重大

Kxc0822a

2022-04-12 65efbe871473a5974c05d504a4df7ac9577af114

 src/views/accidentHidden/fillProgress.vue

@@ -1,13 +1,214 @@
<template>
    <div class="app-container">
        <div>
            <Titlename title="列表页面"></Titlename>
            <div class="whole">
                <el-form ref="form" :model="form" label-width="100px">
                    <el-form-item style="text-align: right;">
                        <el-button class="btn" type="primary" icon="el-icon-plus" @click="onSubmit">添加</el-button>
                        <el-button>批量删除</el-button>
                    </el-form-item>
                </el-form>
                <el-table
                    :data="tableData"
                    size="mini"
                    style="width: 1600px"
                    @cell-mouse-enter="handleCellEnter"
                    @cell-mouse-leave="handleCellLeave"
                    @cell-click="handleCellClick"
                >
                    <el-table-column
                       type="selection"
                       align="center"
                       width="55">
                    </el-table-column>
                    <el-table-column
                        prop="fillingTime"
                        align="center"
                        width="220"
                        label="填报时间">
                        <div class="item" slot-scope="scope">
<!--                            <el-input class="item__input" v-model="scope.row.fillingTime" placeholder="请输入内容"></el-input>-->
                            <el-date-picker
                                class="item__input"
                                v-model="scope.row.fillingTime"
                                type="date"
                                ref="saveDateInput"
                                placeholder="选择日期" clearable>
                            </el-date-picker>
                            <div class="item__txt">{{scope.row.fillingTime}}</div>
                        </div>
                    </el-table-column>
                    <el-table-column
                        prop="filledBy"
                        align="center"
                        width="300"
                        label="填报人">
                        <div class="item" slot-scope="scope">
                            <el-input class="item__input" v-model="scope.row.filledBy" placeholder="请输入内容"></el-input>
                            <div class="item__txt">{{scope.row.filledBy}}</div>
                        </div>
                    </el-table-column>
                    <el-table-column
                        prop="progress"
                        label="整改形象进度"
                        width="300"
                        align="center">
                        <div class="item" slot-scope="scope">
                            <el-input class="item__input" v-model="scope.row.progress" placeholder="请输入内容" clearable></el-input>
                            <div class="item__txt">{{scope.row.progress}}</div>
                        </div>
                    </el-table-column>
                    <el-table-column
                        prop="remarks"
                        label="备注"
                        align="center">
                        <div class="item" slot-scope="scope">
                            <el-input type="textarea" class="item__input" v-model="scope.row.remarks" placeholder="请输入内容" clearable></el-input>
                            <div class="item__txt">{{scope.row.remarks}}</div>
                        </div>
                    </el-table-column>
                    <el-table-column
                        label="操作"
                        align="center"
                        width="200">
                        <template slot-scope="scope">
                            <el-button type="text" size="small">编辑</el-button>
                            <el-button @click="save(scope.row)" type="text" size="small">保存</el-button>
                            <el-button type="text" size="small" style="color: #f56c6c">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>

    </div>
</template>

<script>
    import Titlename from "../../components/Titlename/index.vue";
    export default {
        name: "fillProgress"
        components: {Titlename},
        name: "fillProgress",
        data(){
            return{
                // tableData: [],
                tableData: [{
                    fillingTime: '2016-05-02',
                    progress: '无进度',
                    remarks: '222222222',
                    filledBy:'王小虎'
                }, {
                    fillingTime: '2016-05-02',
                    progress: '无进度',
                    remarks: '222222222',
                    filledBy:'王小虎'
                }],
                // // 需要编辑的属性
                // editProp: ['fillingTime', 'progress', 'remarks'],
                // // 保存进入编辑的cell
                // clickCellMap: {},
                // 需要编辑的属性
                editProp: ['fillingTime', 'progress', 'remarks','filledBy'],
                // 保存进入编辑的cell
                clickCellMap: {}
            }
        },
        methods: {
            /** 鼠标移入cell */
            handleCellEnter (row, column, cell, event) {
                const property = column.property
                if (property === 'date' || property === 'name' || property === 'food') {
                    cell.querySelector('.item__txt').classList.add('item__txt--hover')
                }
            },
            /** 鼠标移出cell */
            handleCellLeave (row, column, cell, event) {
                const property = column.property
                if (this.editProp.includes(property)) {
                    cell.querySelector('.item__txt').classList.remove('item__txt--hover')
                }
            },
            /** 点击cell */
            handleCellClick (row, column, cell, event) {
                const property = column.property
                if (this.editProp.includes(property)) {
                    // 保存cell
                    this.saveCellClick(row, cell)
                    cell.querySelector('.item__txt').style.display = 'none'
                    cell.querySelector('.item__input').style.display = 'block'
                    cell.querySelector('input').focus()
                }
            },
            /** 取消编辑状态 */
            cancelEditable (cell) {
                cell.querySelector('.item__txt').style.display = 'block'
                cell.querySelector('.item__input').style.display = 'none'
            },
            /** 保存进入编辑的cell */
            saveCellClick (row, cell) {
                const id = row.id
                if (this.clickCellMap[id] !== undefined) {
                    if (!this.clickCellMap[id].includes(cell)) {
                        this.clickCellMap[id].push(cell)
                    }
                } else {
                    this.clickCellMap[id] = [cell]
                }
            },
            /** 保存数据 */
            save (row) {
                const id = row.id
                // 取消本行所有cell的编辑状态
                this.clickCellMap[id].forEach(cell => {
                    this.cancelEditable(cell)
                })
                this.clickCellMap[id] = []
            },

            close(){
                this.$router.push({
                    path:"/hiddenDangerManagement"
                })
            },
        }
    }
</script>

<style scoped>
    .app-container {
        padding: 20px;
        height: 850px;
        overflow-y: auto;
    }
    .btn {
        background-color: #034ea2;
        border: 1px solid #034ea2;
    }
    .item .item__input{
        display: none;
        font-size: 14px;
    }
    .item .item__input .el-input__inner{
        height: 24px!important;
    }
    /*/deep/ .el-input__inner{*/
    /*    width: 200px;*/
    /*}*/
    /*/deep/ .el-textarea__inner{*/
    /*    width: 200px;*/
    /*}*/
    .item .item__input .el-input__suffix i{
        font-size: 14px !important;
        line-height: 26px !important;
    }
    .item .item__txt{
        box-sizing: border-box;
        border: 1px solid transparent;
        width: 100%;
        line-height: 24px;
        font-size: 14px;
        padding: 0 8px;
    }

</style>