流程中业务数据表格编辑及保存

 Source/UBCS-WEB/src/components/work/BusinessWork.vue

@@ -1,6 +1,6 @@
<template>
<div>
  <el-button  @click="HandlerRend" size="small" type="primary">保存</el-button>
  <el-button  @click="HandlerSave" v-if="hasEditor" size="small" type="primary" style="margin-bottom: 20px">保存</el-button>
  <el-table
    v-loading="isLoading"
    :data="tableData"
@@ -8,7 +8,6 @@
    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
@@ -23,13 +22,13 @@
      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]"
        <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.data"
            v-for="optionItem in item.dicData"
            :key="optionItem.dictValue"
            :label="optionItem.dictValue"
            :value="optionItem.dictValue">
@@ -39,7 +38,13 @@
          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>
        <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>
@@ -50,6 +55,7 @@
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"],
@@ -62,12 +68,16 @@
      editingRow: null,
      editShow: "",
      editAttr: "",
      hasEditor:false,
      columnType: {
        text: "input",
        combox: "select",
        truefalse: "switch",
        number: "number",
        textarea: "textarea",
        datetime: "datetime",
        date: "date",
        refer: "refer"
      }
    }
  },
@@ -86,8 +96,10 @@
  mounted() {
  },
  methods:{
    HandlerRend(){
    HandlerSave(){
      this.editingRow = null;
      //保存
      this.$message.success(this.tableData[0].tuhao)
    },
    //表格头渲染
    CrudHeaderRend() {
@@ -103,6 +115,7 @@
          '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=[];
@@ -112,7 +125,8 @@
              prop: item.field,
              type: this.columnType[item.type],
              sortable: item.sort,
              width: item.minWidth
              width: item.minWidth,
              edit:this.columnType[item.edit]
            };
            if(item.field == 'id' && validatenull(item.templet)){
              //企业编码的默认添加超链接,暂未实现
@@ -125,11 +139,28 @@
                  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.data=[]
                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))
          });
        });
@@ -144,11 +175,36 @@
        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>

 Source/UBCS-WEB/src/page/index/index.vue

@@ -18,10 +18,9 @@
        <!-- 主体视图层 -->
        <div style="height:100%;overflow-y:auto;overflow-x:hidden;" id="avue-view" v-show="!isSearch">
          <keep-alive>
            <!--<router-view class="avue-view" v-if="$route.meta.keepAlive"/>-->
            <router-view class="avue-view"/>
            <router-view class="avue-view" v-if="$route.meta.keepAlive"/>
          </keep-alive>
          <!--<router-view class="avue-view" v-if="!$route.meta.keepAlive"/>-->
          <router-view class="avue-view" v-if="!$route.meta.keepAlive"/>
        </div>
      </div>
    </div>

 Source/UBCS-WEB/src/views/work/process/leave/handle.vue

@@ -165,6 +165,9 @@
    },
    handelExecute(event) {
      console.log(event)
      if(this.$refs.businesswork.hasEditor){
        this.$refs.businesswork.HandlerSave()
      }
      const { toName, conditionKey, conditionValue } = event
      let param = {
        comment: this.opinionVal || '同意',