Source/UBCS-WEB/src/components/Theme/ThemeAttrCrud.vue

@@ -1,6 +1,6 @@
<template>
  <div>
    <div style="display: flex;flex-wrap: wrap;" v-if="this.crudArrayFlag" class="app">
    <div style="display: flex;flex-wrap: wrap; display: inline-block" v-if="this.crudArrayFlag" class="app" >
      <el-button-group>
      <!--新增-->
      <el-button v-if="attrEditVisible == false && attrFlagChiledren==false && editOpenFlag &&  (!checkStatus || crudLCStatus=='Editing' )" size="small" type="primary" icon="el-icon-plus" plain @click="busineHandle">添加 {{ msg }}</el-button>
@@ -10,6 +10,16 @@
      <el-button v-if="(!checkStatus || crudLCStatus=='Editing' )&& editOpenFlag" icon="el-icon-info" size="small" @click="ruleAddHandler">验证规则</el-button>
      <!--        属性分组-->
      <el-button v-if="(!checkStatus || crudLCStatus=='Editing') && editOpenFlag" icon="el-icon-menu" size="small" @click="attrVisibleHandle">属性分组</el-button>
      </el-button-group>
      <el-button-group>
        <!--    保存-->
        <el-button v-if="(!checkStatus|| crudLCStatus=='Editing') && editOpenFlag" size="small" type="success" plain @click.prevent="addsHandler" icon="el-icon-check">保存</el-button>
        <!--    预览排序-->
        <el-button size="small" @click="orderHandle" icon="el-icon-arrow-down">预览排序</el-button>
        <!--    删除-->
        <el-button v-if="(!checkStatus || crudLCStatus=='Editing') && editOpenFlag" size="small" @click="CrudRemove" icon="el-icon-delete">删除</el-button>
        <!--    重置-->
        <el-button size="small" @click="reset" icon="el-icon-refresh-right">重置</el-button>
      </el-button-group>
      <el-button-group>
        <!--新增-->
@@ -22,17 +32,7 @@
      <!--    级联属性-->
      <el-button v-if="(!checkStatus|| crudLCStatus=='Editing') && editOpenFlag" icon="el-icon-coin" size="small" @click="CascadeHandle">级联属性</el-button>
      </el-button-group>
      <el-button-group>
      <!--    预览排序-->
        <el-button size="small" @click="orderHandle" icon="el-icon-arrow-down">预览排序</el-button>
        <!--新增-->
      <!--    保存-->
      <el-button v-if="(!checkStatus|| crudLCStatus=='Editing') && editOpenFlag" size="small" @click="addsHandler" icon="el-icon-check">保存</el-button>
      <!--    删除-->
      <el-button v-if="(!checkStatus || crudLCStatus=='Editing') && editOpenFlag" size="small" @click="CrudRemove" icon="el-icon-delete">删除</el-button>
      <!--    重置-->
      <el-button size="small" @click="reset" icon="el-icon-refresh-right">重置</el-button>
      </el-button-group>

      <el-button-group>
      <!--    同步到其他模板-->
      <el-button size="small"@click="syncHandle" icon="el-icon-share">同步到其他模板</el-button>
@@ -45,8 +45,18 @@
      </el-button-group>
      <!-- 是否开启编辑     -->
    <el-button-group>
      <el-button size="small" plain  icon="el-icon-view"  v-if="(!checkStatus|| crudLCStatus=='Editing') && !editOpenFlag" @click="editOpen" >开启编辑</el-button>
      <el-button size="small" plain  icon="el-icon-view"  v-if="(!checkStatus|| crudLCStatus=='Editing') && !editOpenFlag && attrEditVisible == false && attrFlagChiledren==false" @click="editOpen" >开启编辑</el-button>
    </el-button-group>
      <el-select v-if="(!checkStatus || crudLCStatus=='Editing') && editOpenFlag"  size="small" v-model="selectvalue" placeholder="请选择">
        <el-option
          v-for="item in selectoptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-switch v-if="(!checkStatus || crudLCStatus=='Editing') && editOpenFlag"  v-model="switchvalue" @change="batchSetFlag" active-value="true" style="margin:6px 0 0 10px">
      </el-switch>
    </div>
<!--    弹窗-->
    <div>
@@ -78,6 +88,12 @@
      <el-dialog :visible.sync="enumVisible" append-to-body title="枚举注入" :before-close="this.enumBeforeClose">
        <!-- 渲染表格及按钮 -->
        <!-- 渲染表格及按钮 -->
        <el-alert
          title="请新增后点击单元格输入枚举数据"
          type="success"
          style="margin-bottom: 10px;display: inline-block"
          :closable="false">
        </el-alert>
        <div>
          <el-button icon="el-icon-plus" type="primary" @click="addRow">新增</el-button>
          <el-table :data="tableData" style="width: 100%" @cell-click="handleCellClick"
@@ -155,11 +171,11 @@
        </div>
      </el-dialog>
      <!--        属性分组-->
      <el-dialog :visible.sync="attrVisible" append-to-body style="width: 800px; left:30vw;top: 10vh ;"
      <el-dialog :visible.sync="attrVisible" append-to-body :before-close="attrClose" style="width: 800px; left:30vw;top: 10vh ;"
                 title="输入分组的名称">
        <el-form ref="form" label-width="70px">
          <el-form-item label="属性分组">
            <el-input v-model="attrModel"></el-input>
            <el-input v-model="attrModel" autofocus></el-input>
          </el-form-item>
          <div style="display: flex;justify-content: flex-end">
            <el-button size="small" type="primary" @click="attrHandle">提交</el-button>
@@ -206,8 +222,8 @@
        </el-container>
      </el-dialog>
      <!--        全屏编辑-->
      <el-dialog :visible.sync="attrEditVisible" append-to-body fullscreen="true">
        <attrCrud :ProData="this.ProData" :attrFlagChiledren="this.attrFlag" :crudArrayFlag="this.crudArrayFlag"></attrCrud>
      <el-dialog :visible.sync="attrEditVisible" append-to-body fullscreen="true" :before-close="escEdit" >
        <attrCrud :ProData="this.ProData" :attrFlagChiledren="this.attrFlag" @editCloseChildren="editClose" :editStyleFlag="editStyleFlag" :editOpenFlag="editOpenFlag" :crudArrayFlag="this.crudArrayFlag"></attrCrud>
      </el-dialog>
      <!--      组合规则-->
      <formula-editor :systemVariableTableData="systemVariableTableData"
@@ -251,10 +267,11 @@
    </div>
    <el-table :data="ProData"
              style="width: 100%"
              height="400"
              :height="this.editStyleFlag? 800 : 343"
              @cell-click="handleCellClicks"
              @select="selectHandle"
              @selection-change="selectionChange"
              @row-click="rowClick"
              v-if="this.crudArrayFlag"
              ref="referAttrCrud"
              v-loading="loading"
@@ -276,8 +293,8 @@
                       v-if="item.edit !='referName'"
      >
        <template slot-scope="{ row }">
          <el-input v-if="editingRows === row && editShows== item.prop && item.prop != 'codeDateFormat' && (item.edit == 'text'  ||item.edit == 'refer' )" v-model="row[item.prop]"
                    @blur="saveRows" ></el-input>
          <el-input ref="inputRef" v-if="editingRows === row && editShows== item.prop && item.prop != 'codeDateFormat' && (item.edit == 'text'  ||item.edit == 'refer' )" v-model="row[item.prop]"
                    @blur="saveRows" autofocus ></el-input>
          <el-input-number size="small" controls-position="right" v-if="editingRows === row && editShows== item.prop && item.edit == 'number'" v-model="row[item.prop]"
                           @blur="saveRows" :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="editingRows === row && editShows== item.prop && item.edit == 'select' " @blur="selectChangeHandler(item.editConfig,index)">
@@ -315,6 +332,7 @@
<script>
import {AttrByBtm, gridCodeClassifyTemplateAttr, batchAddSave, copyto,listByFlag} from '@/api/template/templateAttr'
import {getList} from "@/api/refer/table";
import func from "@/util/func";

export default {
  name: "attrCrud .vue",
@@ -330,7 +348,12 @@
      type: Boolean,
      default: false
    },
    //控制是否开启编辑
    editOpenFlag:{
      type: Boolean,
      default: false
    },
    editStyleFlag:{
      type: Boolean,
      default: false
    },
@@ -355,11 +378,24 @@
    crudArrayFlag:{
      type: Boolean,
      default: false
    }
    },
  },
  watch:{
    crudOid:{
      handler(newval,oldval){
        if(newval){
          this.editOpenFlag=false
        }
      }
    },
    crudArrayFlag:{
      handler(newval,olaval){
        console.log('crudArrayFlag',newval)
      }
    },
    crudArray:{
      handler(newval,oldval){
        console.log('crudArray',newval)
        if(newval != undefined){
          if(newval.length>=1){
            this.crudArrayFlag=true
@@ -390,7 +426,6 @@
      }
    },
    'injectOption.classifyInvokeAttr': function(newVal) {
      console.log('newVal',newVal)
      if (newVal === "name") {
        this.injectOption.classifyInvokeAttrName='分类名称'
      } else if (newVal === "id") {
@@ -400,7 +435,7 @@
    },
    editOpenFlag:{
      handler(newval,oldval){
        console.log(newval)
        console.log('editOpenFlag',newval)
      },
      deep:true,
      immediate:true
@@ -409,6 +444,8 @@
  },
  data() {
    return {
      //全屏编辑高度状态
      editStyleFlag:false,
      loading:false,
      referConfigText:"",
      referConfigVisble:false,
@@ -506,7 +543,7 @@
          desc: "当前用户的姓名"
        },
        {
          formula: "#CURRENTUSER.SECRETGRADE#",
          formula: "#CURRENTUSER.SECRETARIAT#",
          desc: "当前用户密级"
        },
        {
@@ -1387,7 +1424,50 @@
      codeDataFlag:false,
    //  组合规单元格编辑回填
      componentRuleText:"",

      //模板属性下拉设置switch
      selectoptions: [{
        value: 'keyAttrFlag',
        label: '关键属性'
      }, {
        value: 'queryAttrFlag',
        label: '查询属性'
      }, {
        value: 'seniorQueryAttrFlag',
        label: '高级查询属性'
      }, {
        value: 'sameRepeatAttrFlag',
        label: '相似查重属性'
      }, {
        value: 'barcodeFlag',
        label: '一维码'
      }, {
        value: 'qrcodeFlag',
        label: '二维码'
      }, {
        value: 'requireFlag',
        label: '必输'
      }, {
        value: 'formDisplayFlag',
        label: '表单显示'
      }, {
        value: 'tableDisplayFlag',
        label: '列表显示'
      }, {
        value: 'readonlyFlag',
        label: '只读'
      }, {
        value: 'sortAttrFlag',
        label: '列表排序'
      }, {
        value: 'textareaFlag',
        label: '多行文本'
      }, {
        value: 'imageFlag',
        label: '预览图'
      }],
      //模板属性下拉选中值
      selectvalue: 'keyAttrFlag',
      switchvalue:'false'
    }
  },
  computed:{
@@ -1416,9 +1496,6 @@
    })
  },
  methods: {
    formAttr(row, column) {
      console.log(row,column)
    },
    //新增搜索
    AddFindHandler(){
      if(this.SelectValue == 'id'){
@@ -1439,7 +1516,6 @@
    },
    //参照配置子组件
    echoReferConfig(val){
      console.log('val--',val)
      this.referObject=val
      this.$set(this.CurrentCell,'referConfig',JSON.stringify(val))

@@ -1460,12 +1536,10 @@
        this.$message.warning('请选择模板属性')
      } else  {
        this.attrVisible = true;
       console.log(this.attrSelectList)
      }
    },
    //属性分组提交
    attrHandle() {
      console.log(this.attrSelectList)
      this.attrSelectList.forEach(item=>{
        item.attributeGroup=this.attrModel
      })
@@ -1474,17 +1548,20 @@
      }else {
        this.$set(this.attrSelectList[0], 'attributeGroup', this.attrModel)
      }
      this.attrModel = "";
      this.attrVisible = false;
      this.attrClose()
    },
    //属性分组清空
    attrRemove() {
      this.attrModel = ""
    },
    attrClose(){
      this.attrModel = "";
      this.attrVisible=false
    },
    //表格数据
    CrudRend() {
      if (this.crudOid != '') {
        gridCodeClassifyTemplateAttr({'conditionMap[classifyTemplateOid]': this.crudOid}).then(res => {
        gridCodeClassifyTemplateAttr({'conditionMap[classifyTemplateOid]': this.crudOid,limit:-1}).then(res => {
          this.loading=true
          setTimeout(() => {
            this.ProData = res.data.data;
@@ -1538,12 +1615,10 @@
        }
      })
      this.addVisible = false;

    },
    //业务类型选择
    businessSelect(selection, row) {
      this.busineSelectList = selection;
      console.log(selection)
    },
    // 从业务类型中选择数据弹窗
    busineHandle() {
@@ -1602,23 +1677,80 @@
    selectHandle(selection, row) {
      this.attrOid = row.oid;
      this.attrRow = row;
      console.log(row)
    },
    //表格选择
    selectionChange(list) {
      this.attrSelectList = list;
      console.log(list)
    },
    rowClick(row){
      this.$refs.referAttrCrud.clearSelection();
      this.attrSelectList = [row];
      this.$refs.referAttrCrud.setCurrentRow(row);
      this.$refs.referAttrCrud.toggleRowSelection(row); //选中当前行

      this.attrOid = row.oid;
      this.attrRow = row;
    },
    //保存
    addsHandler() {
      batchAddSave(JSON.parse(JSON.stringify(this.ProData))).then(res => {
        this.$message.success('保存成功')
        this.editOpenFlag=false
      }).catch(()=>{
        this.$message.warning('保存失败，请查看控制台输出！')
    addsHandler(event) {
      this.$refs.referAttrCrud.sort("orderNum");
      var ischeck = true;
      console.log(this.ProData)
      this.ProData.forEach((item,index)=>{
        if((item.requireFlag && item.requireFlag.toString()=='true') && (item.readOnlyFlag && item.readOnlyFlag.toString()=='true')){
          this.$message.warning(item.name+"("+item.id+")必输的属性不能是只读");
          console.log(item)
          ischeck=false;
          return;
        }
        var num=0;
        if(item.componentRule){
          //组合规则
          num++
        }
        if(item.enumString || item.enumId){
          //枚举
          num++
        }
        if(item.referConfig || item.referBtmId){
          //参照
          num++
        }
        if(item.codeDateFormat){
          //时间格式
          num++
        }
        if(item.classifyInvokeLevel){
          //分类注入
          num++
        }
        if(num>1 && ischeck){
          this.$message({
            showClose: true,
            message: item.name+"("+item.id+") 属性只能是组合规则，枚举，参照，时间格式，分类注入中的一种",
            type: 'warning'
          });
          ischeck=false;
          return;
        }
      })
      if(!ischeck){
        return ;
      }
      // 新函数用于执行batchAddSave方法
      const executeBatchAddSave = () => {
        batchAddSave(JSON.parse(JSON.stringify(this.ProData))).then(res => {
          this.$message.success('保存成功')
          this.editOpenFlag=false;
          // 调用父组件修改按钮状态
          this.$emit('editCloseChildren')
        }).catch(()=>{
          this.$message.warning('保存失败，请查看控制台输出！')
        });
      }
      // 所有if条件和逻辑通过后调用executeBatchAddSave函数
      executeBatchAddSave();
    },

    //表格行编辑
    handleCellClicks(row, column) {
       if(this.editOpenFlag){
@@ -1629,17 +1761,27 @@
         if(column.property == 'referConfig' ){
           this.referConfigVisble= true;
           this.referConfigOption = {
             referConfig: this.referConfigText || '',
             referConfig: this.CurrentCell.referConfig || '',
           }
           if(this.CurrentCell.referConfig == ''){
             this.referConfigOption = {
               referConfig:'',
             }
           }
           console.log('--',this.referConfigOption)
           // this.$refs.referConfigFormDialog.onloadAttrData();
         }else if(column.property == 'classifyInvokeText'){
           this.injectVisible=true;
           if (this.CurrentCell.classifyInvokeAttr != '') {
             this.injectOption = {
               classifyInvokeAttr: this.CurrentCell.classifyInvokeAttr,
               classifyInvokeAttrName: this.CurrentCell.classifyInvokeAttrName,
               classifyInvokeEditFlag: this.CurrentCell.classifyInvokeEditFlag,
               classifyInvokeLevel: this.CurrentCell.classifyInvokeLevel == 'min' ? 'min' : 'max',
               classifyNumber: this.CurrentCell.classifyInvokeLevel == 'min' ? '' : this.CurrentCell.classifyInvokeLevel
             };
           } else {
             this.injectHandleReset();
           }
         }else if(column.property == 'componentRule'){
           if(this.CurrentCell){
             this.CurrentCell.componentRule=this.componentRuleText;
@@ -1654,9 +1796,9 @@
         }else if(column.property == 'parentCode'){
           gridCodeClassifyTemplateAttr({
             'conditionMap[classifyTemplateOid]': this.Formlist[0].oid,
             'conditionMap[oid_notequal]': this.CurrentCell.oid
             'conditionMap[oid_notequal]': this.CurrentCell.oid,
             limit:-1
           }).then(res => {
             console.log(res)
             this.CascadeData = res.data.data;
           })
           this.CascadeVisible=true;
@@ -1665,6 +1807,9 @@
           this.rulesVisible=true;
         }else if(column.property == 'attributeGroup'){
           this.attrVisible = true;
           if(this.CurrentCell.attributeGroup !== ''){
                this.attrModel=this.CurrentCell.attributeGroup
           }
         }
       }
    },
@@ -1716,29 +1861,33 @@
    },
    //枚举注入保存
    enumAddHandle() {
      let hasError = false; // 添加一个变量
      this.tableData.forEach((item, index) => {
        if (item.key === '') {
          this.$message.warning(`第${index + 1}行的选项值不能为空`);
          hasError = true;
          return;
        } else if (item.value === '') {
          this.$message.warning(`第${index + 1}行的选项中文标签不能为空`);
          hasError = true;
          return;
        }
      });
        // 保存执行逻辑
      if (!hasError) {
        if (this.CurrentCell) {
          this.$set(this.CurrentCell, 'enumString', JSON.stringify(this.tableData));
          this.enumVisible = false;
        } else {
          this.$set(this.attrSelectList[0], 'enumString', JSON.stringify(this.tableData));
          this.tableData=[];
          this.enumVisible = false;
        }
      }
     if(this.tableData.length>=1){
       let hasError = false; // 添加一个变量
       this.tableData.forEach((item, index) => {
         if (item.key === '') {
           this.$message.warning(`第${index + 1}行的选项值不能为空`);
           hasError = true;
           return;
         } else if (item.value === '') {
           this.$message.warning(`第${index + 1}行的选项中文标签不能为空`);
           hasError = true;
           return;
         }
       });
       // 保存执行逻辑
       if (!hasError) {
         if (this.CurrentCell) {
           this.$set(this.CurrentCell, 'enumString', JSON.stringify(this.tableData));
           this.enumVisible = false;
         } else {
           this.$set(this.attrSelectList[0], 'enumString', JSON.stringify(this.tableData));
           this.tableData=[];
           this.enumVisible = false;
         }
       }
     }else {
       this.$message.warning('请添加枚举注入数据！')
     }
    },
    // 将正在编辑的行的状态变为 null，即退出编辑状态
    saveRow() {
@@ -1777,7 +1926,6 @@
    },
    //验证规则检查
    rulesExamine() {
      console.log(this.RulesForm.expressionText)
      const regex = new RegExp(this.rulesData.ruleRowBds);
      if(regex.test(this.RulesForm.TestContent)){
        this.$message.success('校验成功')
@@ -1802,23 +1950,6 @@
        "层级设置": this.injectOption.classifyInvokeLevel=='max'?this.injectOption.classifyNumber :'min',
        "是否可修改": this.injectOption.classifyInvokeEditFlag
      }
      //单元格编辑赋值一遍
      // noinspection JSCheckFunctionSignatures
      if(this.CurrentCell){
        //如果是指定层赋值为数字
        if(this.injectOption.classifyInvokeLevel!== 'min'){
          this.CurrentCell.classifyInvokeLevel=this.injectOption.classifyNumber
        }else {
          this.CurrentCell.classifyInvokeLevel='min'
        }
        //其余正常赋值
        this.CurrentCell.classifyInvokeAttr=this.injectOption.classifyInvokeAttr,
        this.CurrentCell.classifyInvokeAttrName=this.injectOption.classifyInvokeAttrName,
        this.CurrentCell.classifyInvokeEditFlag=this.injectOption.classifyInvokeEditFlag,
        // this.$set(this.CurrentCell, 'classifyInvokeText', data)
          this.CurrentCell.classifyInvokeText = data;
        this.injectHandleReset()
      }else {
        //勾选操作
        for (const key in this.injectOption) {
          this.attrSelectList[0][key] = this.injectOption[key];
@@ -1831,7 +1962,7 @@
          this.$set(this.attrSelectList[0],'classifyInvokeText',data)
        }
        this.injectHandleReset()
      }

      if(this.injectOption.classifyInvokeLevel !== 'min'){
        this.injectOption.classifyInvokeLevel=this.injectOption.classifyNumber;
      }else  {
@@ -1850,7 +1981,8 @@
    },
    // 分类注入取消
    injectRemove() {
      this.injectVisible = false
      this.injectVisible = false;
      this.injectHandleReset()
    },
    //属性模板表格单元格点击事件
    //表格操作栏删除
@@ -1899,6 +2031,7 @@
      if (this.crudArray.length < 1) {
        this.$message.warning('请选择一个模板')
      } else {
        this.editStyleFlag=true;
        this.attrEditVisible = true;
        this.attrFlag = true;
      }
@@ -1908,6 +2041,7 @@
    escEdit() {
      this.attrFlagChiledren = false;
      this.attrEditVisible = false;
      this.editStyleFlag=false;
    },
    //组合规则确定
    updataFormlaContent(val) {
@@ -1934,6 +2068,16 @@
    //开启编辑
    editOpen(){
      this.editOpenFlag=true;
    },
    //定义一个关闭编辑的方法供子组件使用
    editClose(){
      this.editOpenFlag=false;
    },
    //批量设置switch
    batchSetFlag(value){
      this.attrSelectList.forEach(item=>{
        item[this.selectvalue]=value;
      })
    }
  }
}