Merge remote-tracking branch 'remotes/origin/shf' into master

lyfO_o

2022-07-12 c562fa2e66f4972ae23fa57ef7412da6e18991ed

 src/views/accidentHidden/fillProgress.vue

@@ -1,13 +1,397 @@
<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" size="small" icon="el-icon-plus" @click="addProgress" v-if="type!=1">添加</el-button>
                        <el-button size="small" @click="deleteBatch" v-if="type!=1">批量删除</el-button>
                    </el-form-item>
                </el-form>
                <el-table
                    type="selection"
                    :data="tableData"
                    style="width: 1600px"
                    @selection-change="changeBox"
                    border
                >
                    <el-table-column
                       type="selection"
                       align="center"
                       v-if="type!=1"
                       width="55">
                    </el-table-column>
                    <el-table-column
                        prop="FillinTime"
                        align="center"
                        width="220"
                        label="填报时间">

                    </el-table-column>
                    <el-table-column
                        prop="FillinPople"
                        align="center"
                        width="300"
                        label="填报人">

                    </el-table-column>
                    <el-table-column
                        prop="RectProgrees"
                        label="整改形象进度"
                        width="300"
                        align="center">
                    </el-table-column>
                    <el-table-column
                        prop="Remark"
                        label="备注"
                        align="center">
                    </el-table-column>
                    <el-table-column
                        v-if="type!=1"
                        label="操作"
                        align="center"
                        width="200">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="updateClick(scope.row)" v-if="type!=1">编辑</el-button>
                           <!-- <el-button @click="save(scope.row)" type="text" size="small">保存</el-button>-->
                            <el-button type="text" size="small" style="color: #f56c6c" @click="deleteClick(scope.row)" v-if="type!=1">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div style="text-align: right">
                    <el-pagination
                        v-show="recordTotal > 0"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[10, 20, 30, 50]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="recordTotal"
                    >
                    </el-pagination>
                </div>
            </div>
        </div>

        <el-button @click="returnIndex">返回</el-button>
        <el-dialog
            :title="title"
            :visible.sync="dialogVisible"
            :close-on-click-modal="false"
            width="40%">
            <el-form ref="form" :rules="rules" :model="form" label-width="100px">
                <el-row>
                    <el-col :span="9">
                        <el-form-item label="填报时间" prop="FillinTime">
                            <el-date-picker
                                v-model="form.FillinTime"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="选择日期"
                                style="width: 100%"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="9" :offset="4">
                        <el-form-item label="填报人" prop="FillinPople">
                            <el-input v-model="form.FillinPople"  class="multiline"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="9">
                        <el-form-item label="进度" prop="RectProgrees">
                            <el-input v-model="form.RectProgrees" type="textarea" :rows="3"  class="multiline"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="9">
                        <el-form-item label="备注" prop="Remark ">
                            <el-input v-model="form.Remark " type="textarea" :rows="3"  class="multiline"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="22">
                        <el-form-item style="text-align: center">
                            <el-button type="primary" class="btns" @click="submitProgress('form')"
                            >保存</el-button
                            >
                            <el-button @click="dialogVisible=false">关闭</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>

    </div>
</template>

<script>
    import Titlename from "../../components/Titlename/index.vue";
    import {saveProcess,viewProcess,deleteProcess} from '@/api/sgyhpczl/majorHidden.js'
    import { deepClone } from '@/utils'
    export default {
        name: "fillProgress"
        components: {Titlename},
        name: "fillProgress",
        data(){
            return{
                selectedList:[],
                rules:{
                    FillinTime: [{ required: true, message: '不能为空', trigger: 'blur' },],
                    FillinPople: [{ required: true, message: '不能为空', trigger: 'blur' },],
                    RectProgrees: [{ required: true, message: '不能为空', trigger: 'blur' },],
                },
                form:{},
                title:'新增',
                dialogVisible:false,
                id:'',
                type:'',
                listQuery:{
                    page:1,
                    limit:10,
                    form:{
                        id:''
                    },
                },
                recordTotal: 0,
                tableData: [],
                currentPage: 1,
                pageSize: 10,
                editProp: ['fillingTime', 'progress', 'remarks','filledBy'],
                clickCellMap: {}
            }
        },
        mounted() {
            this.id = this.$route.query.id;
            this.listQuery.form.id = this.$route.query.id;
            this.type = this.$route.query.type;
            this.getPageList()
        },
        methods: {
            deleteBatch(){
                if(this.selectedList==null ||this.selectedList.length==0 ){
                    this.$message({type:'warning', message:'至少选中一条数据', duration:3000})
                    return
                }
                var ids=this.selectedList.map((obj) => {
                    return obj.id
                }).join(",")
                this.$confirm('确认删除吗','提示', {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(()=>{
                        deleteProcess(ids).then(() => {
                            this.getPageList()
                            this.$notify({
                                title: "成功",
                                message: "删除成功",
                                type: "success",
                                duration: 2000,
                            });
                        });
                    })
                    .catch(error =>{
                    });
            },
            changeBox(val){
                this.selectedList = []
                val.forEach((item) => {
                    this.selectedList.push(item)
                })
            },
            deleteClick(row){
                this.$confirm('确认删除吗','提示', {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(()=>{
                        deleteProcess(row.id).then(() => {
                            this.getPageList()
                            this.$notify({
                                title: "成功",
                                message: "删除成功",
                                type: "success",
                                duration: 2000,
                            });
                        });
                    })
                    .catch(error =>{
                    });
            },
            updateClick(row){
                this.form=deepClone(row)
                this.title='编辑'
                this.dialogVisible=true
            },
            addProgress(){
                this.form={
                    yh_id:this.id
                }
                this.title='新增'
                this.dialogVisible=true
            },
            submitProgress(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if(this.title=='新增'){
                            saveProcess(this.form).then(res=>{
                                if(res.data.ok==1){
                                    this.getPageList()
                                    this.dialogVisible=false
                                    this.$message({type:'success', message:'新增成功', duration:3000})
                                }else {
                                    this.$message({type:'error', message:res.data.msg, duration:3000})
                                }
                            })
                        }else {
                            saveProcess(this.form).then(res=>{
                                if(res.data.ok==1){
                                    this.getPageList()
                                    this.dialogVisible=false
                                    this.$message({type:'success', message:'编辑成功', duration:3000})
                                }else {
                                    this.$message({type:'error', message:res.data.msg, duration:3000})
                                }
                            })
                        }
                        this.dialogVisible=false

                    } else {
                        return false;
                    }
                });
            },
            getPageList(){
                this.listQuery.page=1
                viewProcess(this.listQuery).then(res=>{
                    if (res.data.ok==1) {
                        this.tableData = res.data.data.items
                        this.recordTotal=res.data.data.total
                    }else{
                        this.$message({type:'error', message:res.data.msg, duration:3000})
                    }
                })
            },
            handleSizeChange(val){
                this.listQuery.limit = val
                this.getPageListForPagination();
            },
            handleCurrentChange(val){
                this.listQuery.page = val
                this.getPageListForPagination();
            },
            getPageListForPagination(){
                viewProcess(this.listQuery).then(res=>{
                    if (res.data.ok==1) {
                        this.tableData = res.data.data.items
                        this.recordTotal=res.data.data.total
                    }else{
                        this.$message({type:'error', message:res.data.msg, duration:3000})
                    }
                })
            },
            /** 鼠标移入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] = []
            },
            returnIndex(){
                this.$router.push({
                    path:"/accidentHidden/accidentHidden/majorHidden"
                })
            },
        }
    }
</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>