<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 {
|
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>
|
