<template>
|
<div>
|
<el-button @click="HandlerSave" v-if="hasEditor" size="small" type="primary" style="margin-bottom: 20px">保存</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.label.length >=4 ?'150':item.label.length==3 ?'120':'90'"
|
:show-overflow-tooltip="true"
|
align="center"
|
>
|
<template slot-scope="{ row }">
|
<el-input v-if="editingRow === row && editShow== item.prop && item.edit == 'text'" 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 v-model="row[item.prop]" filterable allow-create default-first-option slot="prepend" v-if="editingRow === row && editShow== item.prop && item.edit == 'select' " @blur="editingRows=null">
|
<el-option
|
v-for="optionItem in item.dicData"
|
:key="optionItem.dictValue"
|
:label="optionItem.dictValue"
|
:value="optionItem.dictValue">
|
</el-option>
|
</el-select>
|
<el-switch
|
v-if="item.edit === 'switch' || item.edit === 'truefalse'" v-model="row[item.prop]" active-value="true"
|
inactive-value="false">
|
</el-switch>
|
<vciWebRefer 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]"
|
@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} from "@/api/GetItem";
|
import {validatenull} from "@/util/validate";
|
import {getDictionary} from "@/api/system/dict";
|
export default {
|
name: "BusinessWork",
|
props:['ids','templateId',"taskId","modelKey","codeClassifyOid"],
|
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
|
}
|
},
|
created() {
|
},
|
mounted() {
|
},
|
methods:{
|
HandlerSave(){
|
this.editingRow = null;
|
//保存
|
this.$message.success(this.tableData[0].tuhao)
|
},
|
//表格头渲染
|
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.hasEditor=res.data.tableDefineVO.hasEditor;
|
this.options = res.data.tableDefineVO.seniorQueryColumns;
|
this.List = res.data.tableDefineVO.cols[0];
|
this.tableHeadData=[];
|
this.List.forEach((item) => {
|
let columnItem = {
|
label: item.title,
|
prop: item.field,
|
type: this.columnType[item.type],
|
sortable: item.sort,
|
width: item.minWidth,
|
edit:this.columnType[item.edit]
|
};
|
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(validatenull(item.edit)) {
|
if (typeof item.editConfig == "string") {
|
columnItem.editConfig = eval("(" + item.editConfig + ")");
|
} else {
|
columnItem.editConfig = item.editConfig
|
}
|
if (item.edit == 'select') {
|
//需要获取下拉框数据
|
columnItem.dicData = columnItem.editConfig.comboxConfig.data || this.geDictData(columnItem.editConfig.comboxConfig.comboxKey)
|
}
|
if (item.edit == 'refer') {
|
columnItem.referConfig = {
|
title: item.title,
|
showField: item.showField || item.field,
|
field: item.field,
|
options: columnItem.editConfig.referConfig
|
}
|
}
|
}
|
|
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 || "";
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
|
</style>
|
