<template>
|
<div>
|
<el-button @click="HandlerSave" v-if="hasEditor" size="small" type="primary" style="margin-bottom: 10px">保存</el-button>
|
<el-table
|
v-loading="isLoading"
|
:data="tableData"
|
max-height="700"
|
style=""
|
@cell-click="handleCellClick"
|
>
|
<el-table-column fixed label="序号" type="index" width="55">
|
</el-table-column>
|
<el-table-column
|
v-for="item in this.tableHeadData"
|
:key="item.id"
|
:label="item.label"
|
:prop="item.prop"
|
:sortable="item.sortable"
|
:formatter="item.formatter"
|
:width="item.width"
|
:show-overflow-tooltip="true"
|
align="center"
|
>
|
<template slot-scope="{ row }">
|
<el-input
|
v-if="editingRow === row && editShow== item.prop && item.edit == 'input'" v-model="row[item.prop]"
|
@blur="editingRows=null"></el-input>
|
<el-input-number size="small" controls-position="right"
|
v-if="editingRow === row && editShow== item.prop && item.edit == 'number'" v-model="row[item.prop]"
|
@blur="editingRows=null" :style="{width:(item.width-10)+'px'}"></el-input-number>
|
<el-select filterable default-first-option slot="prepend" @change="changeSelect"
|
v-if="editingRow === row && editShow== item.prop && item.edit == 'select' " v-model="row[item.prop]" @blur="editingRows=null">
|
<el-option
|
v-for="optionItem in item.dicData"
|
:key="optionItem.key"
|
:label="optionItem.value"
|
:value="optionItem.key">
|
</el-option>
|
</el-select>
|
<el-switch
|
v-if="editingRow === row && editShow== item.prop && (item.edit === 'switch' || item.edit === 'truefalse')" v-model="row[item.prop]" active-value="true"
|
inactive-value="false">
|
</el-switch>
|
<el-date-picker
|
v-if="editingRow === row && editShow== item.prop && (item.edit == 'date' || item.edit == 'datetime') " v-model="row[item.prop]" @blur="editingRows=null"
|
:type="item.edit" :format="item.dateFormate" :value-format="item.dateFormate"
|
placeholder="选择日期">
|
</el-date-picker>
|
<vciWebRefer
|
:key="item.prop" :data-key="item.prop"
|
v-if="editingRow === row && editShow== item.prop && item.edit == 'refer'"
|
:referConfig="item.referConfig || {}"
|
:value="row[item.referConfig.field] || row[item.prop]"
|
:text="row[item.referConfig.showField]" :disabled="item.disabled" :display="item.display"
|
@setReferValue="setReferValue"
|
></vciWebRefer>
|
<span v-else v-html="formatter(row,item)"></span>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</template>
|
|
<script>
|
import {businese} from '@/api/work/businese'
|
import {FlowTable, batchUpdateCode} from "@/api/GetItem";
|
import {validatenull} from "@/util/validate";
|
import {getDictionary} from "@/api/system/dict";
|
import vciWebRefer from "../refer/vciWebRefer.vue";
|
|
export default {
|
name: "BusinessWork",
|
components: { vciWebRefer },
|
props:['ids','templateId',"taskId","modelKey","codeClassifyOid",'stageAttrs'],
|
data() {
|
return {
|
BuinessOids:[],
|
isLoading:false,
|
tableHeadData:[],
|
tableData:[],
|
editingRow: null,
|
editShow: "",
|
editAttr: "",
|
hasEditor:false,
|
columnType: {
|
text: "input",
|
combox: "select",
|
truefalse: "switch",
|
number: "number",
|
textarea: "textarea",
|
datetime: "datetime",
|
date: "date",
|
refer: "refer"
|
}
|
}
|
},
|
watch:{
|
ids:{
|
handler(newval,oldval){
|
this.BuinessOids=newval;
|
this.CrudHeaderRend()
|
this.BuinseseRend()
|
},
|
deep:true
|
},
|
stageAttrs(newval,oldval){
|
this.hasEditor=newval.length>0;
|
}
|
},
|
created() {
|
|
},
|
mounted() {
|
},
|
methods:{
|
HandlerSave(){
|
if(!validatenull(this.editingRow)) {
|
this.editingRow = null;
|
//保存
|
let datas = this.tableData.map(item => {
|
let newitem = {
|
codeClassifyOid: item.codeclsfid,
|
templateOid: this.templateId,
|
editInProcess: true,
|
data: item,
|
oid: item.oid,
|
ts: item.ts
|
}
|
return newitem;
|
})
|
batchUpdateCode(datas).then(res => {
|
if (res.data.success) {
|
this.$message.success("修改成功");
|
this.BuinseseRend()
|
}
|
})
|
}
|
},
|
//表格头渲染
|
CrudHeaderRend() {
|
if (this.codeClassifyOid != "") {
|
var data=new FormData()
|
data.append('templateId', this.templateId)
|
data.append('taskId', this.taskId)
|
data.append('modelKey', this.modelKey)
|
data.append('codeClassifyOid', this.codeClassifyOid)
|
FlowTable({
|
'templateId': this.templateId,
|
'taskId': this.taskId,
|
'modelKey': this.modelKey,
|
'codeClassifyOid': this.codeClassifyOid
|
}).then((res) => {
|
this.options = res.data.tableDefineVO.seniorQueryColumns;
|
this.List = res.data.tableDefineVO.cols[0];
|
this.tableHeadData=[];
|
this.List.forEach((item) => {
|
let editAttr=this.stageAttrs.filter(stageitem => stageitem.attrId == item.field || (item.fieldType=='combox' && stageitem.attrId+'Text' == item.field)|| (item.fieldType=='refer' && stageitem.attrId+'name' == item.field));
|
let columnItem = {
|
label: item.title,
|
prop: item.field,
|
type: this.columnType[item.type],
|
sortable: item.sort,
|
width: item.minWidth
|
};
|
if(item.field == 'id' && validatenull(item.templet)){
|
//企业编码的默认添加超链接,暂未实现
|
columnItem.formatter = '';
|
}else {
|
if (item.templet && typeof (item.templet) == 'string' && !validatenull(item.templet) && item.templet.indexOf("function(row,column)") > -1) {
|
columnItem.formatter = eval("(" + item.templet + ")");
|
} else if (item.fieldType == "truefalse") {
|
columnItem.formatter = function (row, column) {
|
return row[column.property] == 'true' || row[column.property] == '1' ? '是' : '否'
|
}
|
}
|
|
}
|
if(editAttr.length>0) {
|
columnItem.edit= this.columnType[item.fieldType]
|
if (columnItem.edit == 'select') {
|
//需要获取下拉框数据
|
columnItem.dicData = item.data || this.geDictData(item.comboxKey)
|
columnItem.formatter = function (row, column) {
|
let d=column.dicData.find((value, keys, arr) => {
|
return value.key == row[column.prop.replace('Text','')];
|
})
|
return row[column.prop] =(d && d.value) || row[column.prop]
|
}
|
}
|
if (columnItem.edit == 'refer') {
|
columnItem.referConfig = {
|
title: item.title,
|
showField: item.showField || item.field,
|
field: item.sortField || item.field,
|
options: item.referConfig
|
}
|
columnItem.display=!item.hidden;
|
columnItem.disabled=item.readOnly
|
}
|
}
|
|
this.tableHeadData.push(Object.assign(item, columnItem))
|
});
|
});
|
}
|
},
|
//表格数据
|
BuinseseRend(){
|
businese({
|
btmType:'wupin',
|
'conditionMap[oid]':this.BuinessOids.toString()
|
}).then(res=>{
|
this.tableData = res.data.data;
|
})
|
},
|
// 异步获取字典数据
|
geDictData(dictKey) {
|
getDictionary({code: dictKey}).then((res) => {
|
if (res.data && res.data.code === 200) {
|
return (res.data.data || []).map((itm) => {
|
itm.value = itm.dictValue;
|
itm.key = itm.dictKey;
|
return itm;
|
});
|
}
|
});
|
},
|
// 监听单元格点击事件并存储正在编辑的行
|
handleCellClick(row, column, cell, event) {
|
this.editingRow = row;
|
this.editShow = column.property;
|
},
|
formatter(row, column){
|
if(column.formatter){
|
return column.formatter(row,column)
|
}else{
|
return row[column.prop]
|
}
|
},
|
setReferValue(data) {
|
if (data.field) {
|
this.editingRow[data.field] = data.value || "";
|
this.editingRow[data.showField] = data.text || "";
|
}
|
},
|
changeSelect(data){
|
this.editingRow[this.editShow.replace('Text','')] = data;
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
|
</style>
|
