jhprjv2/ruoyi-ui/src/views/project/projectStandard/projectStandardDrawer.vue

239 lines
9.5 KiB
Vue

<template>
<div class="project-standar-drawer" v-if="isOpen">
<el-drawer v-if="isOpen" :visible.sync="isOpen" direction="rtl" size="60%" style="padding-left: 20px">
<template slot="title">
<div>{{ title + " 【标准化管理】" }}</div>
<right-toolbar @queryTable="loadData" :search="false">
<template slot="left">
</template>
</right-toolbar>
</template>
<el-tabs v-model="activeName" :key="elKey">
<el-tab-pane :label="'' + it.deptName" :name="'' + it.deptId" :key="idx" v-for="(it, idx) in depts">
<div>
<el-button type="primary" @click="doAdd">增加</el-button>
<el-button style="margin-right:12px;">删除</el-button>
<el-select v-model="standType" clearable placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
<el-button type="success" style="margin-left:12px;" @click="doQuery">搜索</el-button>
</div>
<div class="div-data">
<el-table v-loading="loading" :data="projectStandardList" @selection-change="handleSelectionChange" stripe>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="图片路径" align="center" prop="imageFile">
<template slot-scope="{row}">
<el-image :src="row.imageFile+'.min.jpg'" style="height:50px" :preview-src-list="[row.imageFile]" />
</template>
</el-table-column>
<el-table-column label="图片描述" align="center" prop="desc">
<template slot-scope="{row,$index}">
<div class="row-desc" @click="changeEditMode(row,$index)" v-if="!row.editDesc">{{row.standardDesc}}</div>
<el-input v-model="row.standardDesc" v-if="row.editDesc" @blur="doSaveDesc(row)" type="textarea" :row="4" ></el-input>
</template>
</el-table-column>
<el-table-column label="排序" align="center" prop="ord" >
<template slot-scope="{row}">
<el-input-number v-model="row.ord" controls-position="right" @change="doSave(row,false)" :min="1" :max="10000" ></el-input-number>
</template>
</el-table-column>
<el-table-column label="类型" align="center" prop="standardType">
<template slot-scope="{row}">{{ getType(row) }}</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['project:projectStandard:remove']">删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize" @pagination="loadData" />
</div>
</el-tab-pane>
</el-tabs>
</el-drawer>
<standardDlg ref="dlg" @success="loadData"></standardDlg>
</div>
</template>
<script>
import { listProjectStandard,updateProjectStandard } from '@/api/project/projectStandard.js'
import standardDlg from './projectStandardDlg.vue'
export default {
components: {
standardDlg
},
data() {
return {
elKey: 0,
isOpen: false,
prj: null,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
total: 0,
activeName: "",
depts: [],
standType: '',
projectStandardList: [],
queryParams: {
pageNum: 1,
pageSize: 10,
projectId: null,
deptId: null,
imageFile: null,
standardDesc: null,
ord: null,
standardType: null,
isDel: null,
},
options: [
{ label: '现场管理标准化', value: 1 },
{ label: '作业标准化', value: 2 },
{ label: '安全技术标准化', value: 3 },
{ label: '设备管理标准化', value: 4 },
{ label: '文明施工标准化', value: 5 },
{ label: '环境保护标准化', value: 6 },
]
};
},
mounted() {
},
methods: {
doSaveDesc(row){
if(row.oldStandardDesc!=row.standardDesc){
this.doSave(row,true);
row.oldStandardDesc=row.standardDesc;
row.editDesc=false;
}
},
doSave(row,showMsg){
updateProjectStandard(row).then(d=>{
if(d.code==200){
if(showMsg){
this.$message({
message: '修改成功',
type: 'success'
});
}
}
});
},
changeEditMode(row,idx){
row.oldStandardDesc=row.standardDesc;
row.editDesc=true;
setTimeout(()=>{
let els=document.querySelectorAll(".el-table__body-wrapper tr");
if(els.length>idx+1){
let el=els[idx].querySelector(".el-textarea__inner");
if(el){
el.focus();
}
}
},400);
},
doQuery(){
this.queryParams.pageNum=1;
this.loadData();
},
getType(row){
let t=row.standardType||1;
let tmps=this.options.filter(d=>d.value==t);
return tmps.length>0?tmps[0].label:'';
},
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length !== 1
this.multiple = !selection.length
},
doAdd() {
let tmps = this.depts.filter(d => d.deptId == this.activeName);
this.$refs.dlg.showDialog(this.prj, tmps.length > 0 ? tmps[0] : {});
},
loadDepts(cb) {
let tmps = this.$root.prjDept2 && this.$root.prjDept2[this.prj.id] ? this.$root.prjDept2[this.prj.id] || [] : [];
if (tmps.length > 0) {
this.depts = tmps;
if (tmps.length > 0) {
this.activeName = tmps[0].deptId + "";
}
this.elKey++;
cb && cb();
return;
}
this.$api.publics.queryUnitList({
projectId: this.prj.id,
unitTypes: "2".split(","),
}).then((d) => {
let objs = d.rows || [];
if (!this.$root.prjDept2) {
this.$root.prjDept2 = {};
}
this.$root.prjDept2[this.prj.id] = objs;
this.depts = objs;
if (objs.length > 0) {
this.activeName = objs[0].deptId + "";
}
this.elKey++;
cb && cb();
});
},
loadData() {
let tmps = this.depts.filter(d => d.deptId == this.activeName);
this.queryParams.projectId = this.prj.id;
this.queryParams.deptId=tmps.length>0?tmps[0].deptId:null;
this.queryParams.standardType = this.standType ? this.standType : null;
this.loading = true;
listProjectStandard(this.queryParams).then(response => {
this.projectStandardList = (response.rows||[]).map(it=>{
it.editDesc=false;
return it;
});
this.total = response.total;
this.loading = false;
});
},
show(prj) {
this.prj = prj;
this.title = prj.projectName;
this.isOpen = true;
this.loadDepts(()=>{
this.loadData(true);
});
},
},
};
</script>
<style lang="scss" scoped>
.project-standar-drawer {
::v-deep .el-drawer__header {
margin-bottom: 0px;
}
::v-deep .el-drawer__body {
padding: 0px 24px;
.el-tabs__content{
padding-bottom: 10px;
.el-input-number--medium{
width:100px;
}
.row-desc{
cursor: pointer;
}
}
}
}
</style>