1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<template>
<div>
  <el-button  @click="HandlerRend" size="small" type="primary">保存</el-button>
  <el-table
    v-loading="isLoading"
    :data="tableData"
    max-height="700"
    style=""
    @cell-click="handleCellClick"
  >
    <el-table-column fixed type="selection" width="55"> </el-table-column>
    <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.prop != 'codeDateFormat' && (item.edit == 'text'  ||item.edit == 'refer' )" 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.data"
            :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>
        <span v-else>{{ row[item.prop] }}</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";
export default {
  name: "BusinessWork",
  props:['ids','templateId',"taskId","modelKey","codeClassifyOid"],
  data() {
    return {
      BuinessOids:[],
      isLoading:false,
      tableHeadData:[],
      tableData:[],
      editingRow: null,
      editShow: "",
      editAttr: "",
      columnType: {
        text: "input",
        combox: "select",
        truefalse: "switch",
        number: "number",
        datetime: "datetime",
      }
    }
  },
  watch:{
    ids:{
      handler(newval,oldval){
        this.BuinessOids=newval;
        this.CrudHeaderRend()
        this.BuinseseRend()
      },
      deep:true
    }
  },
  created() {
  },
  mounted() {
  },
  methods:{
    HandlerRend(){
      this.editingRow = null;
    },
    //表格头渲染
    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 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 (item.edit == 'select') {
                //需要获取下拉框数据
                columnItem.data=[]
              }
            }
            this.tableHeadData.push(Object.assign(item, columnItem))
          });
        });
      }
    },
    //表格数据
    BuinseseRend(){
      businese({
        btmType:'wupin',
        'conditionMap[oid]':this.BuinessOids.toString()
      }).then(res=>{
        this.tableData = res.data.data;
      })
    },
    // 监听单元格点击事件并存储正在编辑的行
    handleCellClick(row, column, cell, event) {
      this.editingRow = row;
      this.editShow = column.property;
    },
  }
}
</script>
 
<style scoped>
 
</style>