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
@@ -22,17 +21,39 @@
      :show-overflow-tooltip="true"
      align="center"
    >
      <!-- 编辑和展示逻辑 -->
      <!--              <template slot-scope="{ row }">-->
      <!--                <el-input v-if="editingRow === row && editShow== item.prop" v-model="row[item.prop]" @blur="saveRow"></el-input>-->
      <!--                <span v-else>{{row[item.prop]}}</span>-->
      <!--                <el-switch-->
      <!--                  v-if="editShow === 'true'"-->
      <!--                  v-model="row[item.prop]"-->
      <!--                  active-color="#13ce66"-->
      <!--                  inactive-color="#ff4949">-->
      <!--                </el-switch>-->
      <!--              </template>-->
      <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 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>
@@ -40,11 +61,15 @@

<script>
import {businese} from '@/api/work/businese'
import {MasterTable} from "@/api/GetItem";
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",
  props:['ids','templateId'],
  components: { vciWebRefer },
  props:['ids','templateId',"taskId","modelKey","codeClassifyOid",'stageAttrs'],
  data() {
    return {
      BuinessOids:[],
@@ -53,39 +78,80 @@
      tableData:[],
      editingRow: null,
      editShow: "",
      editAttr: ""
      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()
        console.log(newval)
        console.log(this.BuinessOids)
      },
      deep:true
    },
    stageAttrs(newval,oldval){
      this.hasEditor=newval.length>0;
    }
  },
  created() {

  },
  mounted() {
  },
  methods:{
    HandlerRend(){
      this.editingRow = null;
    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.data.success) {
            this.$message.success("修改成功");
          }
        })
      }
    },
    //表格头渲染
    CrudHeaderRend() {
      if (this.codeClassifyOid != "") {
        MasterTable({
          codeClassifyOid: this.codeClassifyOid,
          functionId: 5,
        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,
@@ -97,12 +163,40 @@
              //企业编码的默认添加超链接,暂未实现
              columnItem.formatter = '';
            }else {
              if (item.templet && typeof (item.templet) == 'string' && !validatenull(item.templet) && item.templet.indexOf("function(row,column)")>-1) {
              if (item.templet && typeof (item.templet) == 'string' && !validatenull(item.templet) && item.templet.indexOf("function(row,column)") > -1) {
                columnItem.formatter = eval("(" + item.templet + ")");
                //function(row,column){return row[column.property]=='true'?'是':'否'}
              } 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(columnItem)

            this.tableHeadData.push(Object.assign(item, columnItem))
          });
        });
      }
@@ -116,11 +210,39 @@
        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) {
    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>