Your Name
2022-07-19 4f23d16c5f9788e44b83280bf6d3c2e1d2280a07
src/views/accidentHidden/fillProgress.vue
@@ -1,120 +1,304 @@
<template>
    <div class="app-container">
        <div>
            <Titlename title="列表页面"></Titlename>
            <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="onSubmit">添加</el-button>
                        <el-button size="small">批量删除</el-button>
                        <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"
                    size="mini"
                    style="width: 1600px"
                    @cell-mouse-enter="handleCellEnter"
                    @cell-mouse-leave="handleCellLeave"
                    @cell-click="handleCellClick"
                    @selection-change="changeBox"
                    border
                >
                    <el-table-column
                       type="selection"
                       align="center"
                       v-if="type!=1"
                       width="55">
                    </el-table-column>
                    <el-table-column
                        prop="fillingTime"
                        prop="FillinTime"
                        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"
                        prop="FillinPople"
                        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"
                        prop="RectProgrees"
                        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"
                        prop="Remark"
                        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
                        v-if="type!=1"
                        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>
                            <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 {
        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: {},
                // 需要编辑的属性
                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'],
                // 保存进入编辑的cell
                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
@@ -165,6 +349,11 @@
                })
                this.clickCellMap[id] = []
            },
            returnIndex(){
                this.$router.push({
                    path:"/accidentHidden/accidentHidden/majorHidden"
                })
            },
        }
    }
</script>