From c819024e241b9f7c54cc3786373ad0d2998f2190 Mon Sep 17 00:00:00 2001 From: 马宇豪 <978517621@qq.com> Date: 星期五, 05 五月 2023 08:55:46 +0800 Subject: [PATCH] 修改 --- src/views/accidentHidden/fillProgress.vue | 386 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 385 insertions(+), 1 deletions(-) diff --git a/src/views/accidentHidden/fillProgress.vue b/src/views/accidentHidden/fillProgress.vue index 923f9d9..bd70048 100644 --- a/src/views/accidentHidden/fillProgress.vue +++ b/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> -- Gitblit v1.9.2