Source/UBCS-WEB/src/components/Tree/attrCrud.vue

@@ -1,10 +1,10 @@
<template>
  <avue-crud :data="ProData" :option="option" @sort-change="sortChange" @row-update="addUpdate"
             @cell-click="handleRowClick" @select="selectHandle">
             @cell-click="handleRowClick" @select="selectHandle" @row-del="CrudRowDel">
    <template slot="menuLeft">
      <el-button v-if="attrEditVisible == false" size="small" type="primary" @click="busineHandle">＋ 添加 {{msg}}</el-button>
      <el-dialog :visible.sync="addVisible" append-to-body title="从业务类型中选择属性">
        <avue-crud :data="businessData" :option="businessOption">
      <el-button v-if="attrEditVisible == false && attrFlagChiledren==false" size="small" type="primary" @click="busineHandle">＋ 添加 {{msg}}</el-button>
      <el-dialog :visible.sync="addVisible" append-to-body title="从业务类型中选择属性" >
        <avue-crud :data="businessData" :option="businessOption" @select="businessSelect">
          <template slot="menuLeft">
            <div style="display: flex;">
              <el-select>
@@ -18,23 +18,23 @@
          </template>
        </avue-crud>
       <div style="display: flex;justify-content: flex-end;margin-top: 15px">
         <el-button size="small" type="primary">保存</el-button>
         <el-button size="small" type="primary" @click="busineAddHandle">保存</el-button>
         <el-button size="small" type="primary">取消</el-button>
       </div>
      </el-dialog>
    </template>
    <!--        全屏编辑-->
    <template slot="menuLeft">
      <el-button v-if="attrEditVisible == false" size="small" @click="attrEditVisible=true">全屏编辑</el-button>
      <!--      <el-button @click.native="attrEditVisible=false" size="small">退出全屏编辑</el-button>-->
      <el-button v-if=" attrEditVisible == false && attrFlagChiledren==false" size="small" @click="fullscreenHandle">全屏编辑</el-button>
<!--      <el-button v-if="attrFlagChiledren !=false" size="small" plain type="success" @click="escEdit">退出全屏编辑</el-button>-->
      <el-dialog :visible.sync="attrEditVisible" append-to-body fullscreen="true">
        <attrCrud></attrCrud>
       <attrCrud :ProData="this.ProData" :attrFlagChiledren="this.attrFlag"></attrCrud>
      </el-dialog>
    </template>
<!--    组合规则-->
    <template slot="menuLeft">
      <el-button size="small" @click="isShowformulaEdit=true">组合规则</el-button>
        <formula-editor :visible="isShowformulaEdit" :systemVariableTableData="systemVariableTableData" :thisSceneTableData="thisSceneTableData"></formula-editor>
        <formula-editor :visible.sync="isShowformulaEdit" :systemVariableTableData="systemVariableTableData" :thisSceneTableData="thisSceneTableData"></formula-editor>

    </template>
    <!--        验证规则-->
@@ -83,16 +83,24 @@
    </template>
    <!--        属性分组-->
    <template slot="menuLeft">
      <el-button icon="el-icon-menu" size="small" @click="attrVisible=true">属性分组</el-button>
      <el-button icon="el-icon-menu" size="small" @click="attrVisibleHandle">属性分组</el-button>

      <el-dialog :visible.sync="attrVisible" append-to-body style="width: 800px; left:30vw;top: 10vh ;"
                 title="输入分组的名称">
        <avue-form :option="attrOption"></avue-form>
        <el-form ref="form"  label-width="70px">
          <el-form-item label="属性分组">
            <el-input v-model="attrModel"></el-input>
          </el-form-item>
            <div style="display: flex;justify-content: flex-end">
              <el-button type="primary" @click="attrHandle" size="small">提交</el-button>
              <el-button size="small" @click="attrRemove">清空</el-button>
            </div>
        </el-form>
      </el-dialog>
    </template>
    <!--        分类注入-->
    <template slot="menuLeft">
      <el-button icon="el-icon-magic-stick" size="small" @click="injectVisible=true">分类注入</el-button>
      <el-button icon="el-icon-magic-stick" size="small" @click="injectBtn">分类注入</el-button>
      <el-dialog :visible.sync="injectVisible" append-to-body class="mydialog"
                 style="width: 1400px; left:14vw ;top: 10vh;" title="分类注入">
        <div class="injectBox">
@@ -102,38 +110,63 @@
            <br/>4：层级必须是大于0的整数值
          </div>
          <div style="padding-top: 15px;padding-left: 35px">
            <avue-form :option="injectOption" @reset-change="injectHandleReset">
              <template slot="menuForm">
                <el-button icon="el-icon-user" @click="injectRemove">取消</el-button>
              </template>
            </avue-form>
            <el-form ref="injectForm"  label-width="80px">
              <el-form-item label="注入类型">
                <el-radio-group v-model="injectOption.type">
                  <el-radio label="分类名称"></el-radio>
                  <el-radio label="分类代号"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="层级设置">
                <el-radio-group v-model="injectOption.set">
                  <el-radio label="最小层"></el-radio>
                  <el-radio label="指定层"></el-radio>
                  <el-input-number v-model="injectOption.injectNum" controls-position="right"  :min="0" :max="10" v-if="this.injectOption.set == '指定层'"></el-input-number>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="可修改">
                <el-radio-group v-model="injectOption.change">
                  <el-radio label="是"></el-radio>
                  <el-radio label="否"></el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div style="display: flex;justify-content: flex-end">
          <el-button size="small" type="primary" @click="injectAddHandle">确定</el-button>
          <el-button size="small" @click="injectHandleReset">清除内容</el-button>
          <el-button size="small" @click="injectRemove">取消</el-button>
        </div>
      </el-dialog>
    </template>
    <!--        枚举注入-->
    <template slot="menuLeft">
      <el-button size="small" @click="enumVisible=true">枚举注入</el-button>
      <el-button size="small" @click="enmuVisHandle">枚举注入</el-button>
      <el-dialog :visible.sync="enumVisible" append-to-body title="枚举注入">
        <!-- 渲染表格及按钮 -->
        <!-- 渲染表格及按钮 -->
        <div>
          <el-button icon="el-icon-plus" type="primary" @click="addRow">新增</el-button>
          <el-table :data="tableData" style="width: 100%" @cell-click="handleCellClick" @cell-dblclick="dbclick">
          <el-table :data="tableData" style="width: 100%" @cell-click="handleCellClick" @selection-change="handleSelectionChange">
            <!-- 渲染表格列及传参 -->
            <el-table-column label="序号" type="index"></el-table-column>
            <el-table-column label="选项值" prop="name">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column label="选项值" prop="key">
              <template slot-scope="{ row }">
                <!-- 编辑和展示逻辑 -->
                <el-input v-if="editingRow === row && editShow == 'name'" v-model="row.name" @blur="saveRow"></el-input>
                <span v-else>{{ row.name }}</span>
                <el-input v-if="editingRow === row && editShow == 'key'" v-model="row.key" @blur="saveRow"></el-input>
                <span v-else>{{ row.key }}</span>
              </template>
            </el-table-column>
            <el-table-column label="选项中文标签" prop="age">
            <el-table-column label="选项中文标签" prop="value">
              <template slot-scope="{ row }">
                <!-- 编辑和展示逻辑 -->
                <el-input v-if="editingRow === row && editShow == 'age'" v-model="row.age" @blur="saveRow"></el-input>
                <span v-else>{{ row.age }}</span>
                <el-input v-if="editingRow === row && editShow == 'value'" v-model="row.value" @blur="saveRow"></el-input>
                <span v-else>{{ row.value }}</span>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="120">
@@ -146,7 +179,7 @@
          </el-table>
          <template>
            <div style="display: flex;justify-content: right;margin-top: 15px">
              <el-button type="primary"  size="small">保存</el-button>
              <el-button type="primary"  size="small" @click="enumAddHandle">保存</el-button>
              <el-button size="small" @click="enumVisible=false">取消</el-button>
            </div>
          </template>
@@ -166,7 +199,7 @@
          </template>
        </avue-crud>
        <div style="display: flex ;padding-top: 18px;justify-content: right">
          <el-button size="small" type="primary">确定</el-button>
          <el-button size="small" type="primary" @click="CascadeAddHandle">确定</el-button>
          <el-button size="small" style="margin-left: 10px" @click="casRemove">清除内容</el-button>
          <el-button size="small" style="margin-left: 10px" @click="CascadeVisible=false">取消</el-button>
        </div>
@@ -182,26 +215,71 @@
    </template>
    <!--    删除-->
    <template slot="menuLeft">
      <el-button size="small">删除</el-button>
      <el-button size="small" @click="CrudRemove">删除</el-button>
    </template>
    <!--    重置-->
    <template slot="menuLeft">
      <el-button size="small">重置</el-button>
      <el-button size="small" @click="reset">重置</el-button>
    </template>
    <!--    同步到其他模板-->
    <template slot="menuLeft">
      <el-button size="small" style="margin-top: 10px">同步到其他模板</el-button>
      <el-button size="small" style="margin-top: 10px" @click="syncHandle">同步到其他模板</el-button>
    </template>
<!--    编码申请预览-->
    <template slot="menuLeft">
      <el-button size="small" style="margin-top: 10px" @click="applicationHandle">编码申请预览</el-button>
        <FormTemplateDialog
          :visible.sync="addvisible"
          :type="add"
          :templateOid="this.crudOid"
          :codeClassifyOid="this.codeClassifyOid"
        >
        </FormTemplateDialog>
    </template>
  </avue-crud>
</template>

<script>
import {AttrByBtm,gridCodeClassifyTemplateAttr} from '@/api/template/templateAttr'
import {AttrByBtm,gridCodeClassifyTemplateAttr,batchAddSave,copyto} from '@/api/template/templateAttr'
export default {
  name: "attrCrud .vue",
  props: ['ProData','crudOid','crudArray','Formlist'],
  // props: ['ProData','crudOid','crudArray','Formlist','codeClassifyOid'],
  props:{
    ProData:{
      type:Array,
    },
    crudOid:{
      type:String,
      default:''
    },
    crudArray:{
      type:Array,
    },
    Formlist:{
      type:Array,
    },
    codeClassifyOid:{
      type:String,
      default:''
    },
    attrFlagChiledren:{
      type:Boolean,
      default:false
    },
  },
  data() {
    return {
      attrFlag:false,
      //编码申请预览option
      applicationoption:{
        column:[]
      },
      // 编码申请预览data
      applicationData:[],
      //业务类型单选数组
      busineSelectList:[],
      //业务类型添加数据
      busineAddList:{},
      //表格单选数组
      CrudSelect:[],
      //表格oid
@@ -573,6 +651,8 @@
      editShow: "",
      //枚举注入
      enumVisible: false,
      //枚举注入多选保存数组
      enumRow:[],
      // 分类注入弹出框
      injectVisible: false,
      // 添加弹出框
@@ -581,67 +661,19 @@
      rulesVisible: false,
      //属性分组弹出框
      attrVisible: false,
      //属性分组option
      attrOption: {
        column: [
          {
            label: "属性分组",
            span: 24,
            prop: "attrIN"
          }
        ]
      },
      //属性分组输入框
      attrModel:"",
      //当前单选模板属性
      attrRow:{},
      //编码申请预览弹出框
      addvisible:false,
      //分类注入option
      injectOption: {
        column: [
          {
            label: "注入类型",
            type: 'radio',
            prop: "injection",
            span: 24,
            value: 0,
            dicData: [
              {
                label: '分类名称',
                value: 0
              }, {
                label: '分类代号',
                value: 1
              },
            ]
          },
          {
            label: "层级设置",
            type: 'radio',
            prop: "Level",
            span: 24,
            value: 0,
            dicData: [
              {
                label: '最小层',
                value: 0
              }, {
                label: '指定层',
                value: 1
              },
            ]
          },
          {
            label: "可修改",
            type: 'radio',
            prop: "revise",
            value: 0,
            dicData: [
              {
                label: '是',
                value: 0
              }, {
                label: '否',
                value: 1
              },
            ]
          }
        ]
        type:"分类名称",
        set:"最小层",
        change:"是",
        //分类注入计数器
        injectNum:0,
      },
      // 属性验证输入框
      RulesForm: {
@@ -682,6 +714,8 @@
        border: true,
        addBtn: false,
        menu:false,
        selection:true,
        height:500,
        column: [
          {
            label: "属性英文名称",
@@ -731,26 +765,6 @@
      },
      //模板属性
      data: [
        {
          id: "测试一",
          name: "测试name1",
          attributegroup: "测试一",
          attributeDataTypeText: "测试一",

        },
        {
          id: "测试二",
          name: "测试name2",
          attributegroup: "测试二",
          attributeDataTypeText: "测试二"
        },
        {
          id: "测试三",
          name: "测试name3",
          attributegroup: "测试三",
          attributeDataTypeText: "测试三",
          keyattrflag: false
        }
      ],
      // 当前行
      rowList: [],
@@ -791,7 +805,7 @@
          },
          {
            label: "属性分组",
            prop: "attributegroup",
            prop: "attributeGroup",
            cell: false,
            sortable: true,
            width: 125,
@@ -811,101 +825,101 @@
          },
          {
            label: "关键属性",
            prop: "keyattrflag",
            prop: "keyAttrFlag",
            cell: false,
            type: "switch",
          },
          {
            label: "查询属性",
            prop: "queryattrflag",
            prop: "queryAttrFlag",
            cell: false,
          },
          {
            label: "高级查询属性",
            prop: "seniorqueryattrflag",
            prop: "seniorQueryAttrFlag",
            width: 95,
            cell: false,
          },
          {
            label: "相似查询属性",
            prop: "samerepeatattrflag",
            prop: "sameRepeatAttrFlag",
            width: 95,
            cell: false,
          },
          {
            label: "必输",
            prop: "requireflag",
            prop: "requireFlag",
            cell: false,
          },
          {
            label: "表单显示",
            prop: "formdisplayflag",
            prop: "formDisplayFlag",
            cell: false,
          },
          {
            label: "列表显示",
            prop: "tabledisplayflag",
            prop: "tableDisplayFlag",
            cell: false,
          },
          {
            label: "只读",
            prop: "readonlyflag",
            prop: "readonlyFlag",
            cell: false,
          },
          {
            label: "列表排序",
            prop: "sortattrflag",
            prop: "sortAttrFlag",
            cell: false,
          },

          {
            label: "多行文本",
            prop: "textareaflag",
            prop: "textareaFlag",
            cell: false,
          },
          {
            label: "默认值",
            prop: "defaultvalue",
            prop: "defaultValue",
            sortable: true,
            cell: false,
            width: 95,
          },
          {
            label: "前缀",
            prop: "prefixvalue",
            prop: "prefixValue",
            sortable: true,
            cell: false,
          },
          {
            label: "后缀",
            prop: "suffixvalue",
            prop: "suffixValue",
            sortable: true,
            cell: false,
          },
          {
            label: "组合规则",
            prop: "componentrule",
            prop: "componentRule",
            sortable: true,
            cell: false,
            width: 105,
          },
          {
            label: "验证规则",
            prop: "verifyrule",
            prop: "verifyRule",
            sortable: true,
            cell: false,
            width: 105,
          },
          {
            label: "时间格式",
            prop: "codedateformat",
            prop: "codeDateFormat",
            sortable: true,
            width: 105,
            cell: false,
          },
          {
            label: "分类注入",
            prop: "classifyinvokelevel",
            prop: "classifyInvokeLevel",
            cell: false,
          },
          {
@@ -942,60 +956,110 @@
          },
          {
            label: "表单显示样式",
            prop: "formdisplaystyle",
            prop: "formDisplayStyle",
            width: 105,
            cell: false,
          },
          {
            label: "表格显示样式",
            prop: "tabledisplaystyle",
            prop: "tableDisplayStyle",
            width: 105,
            cell: false,
          },
          {
            label: "表单超链接",
            prop: "formhref",
            prop: "formHref",
            width: 95,
            cell: false,
          },
          {
            label: "表格超链接",
            prop: "tablehref",
            prop: "tableHref",
            width: 95,
            cell: false,
          },
          {
            label: "表格显示js",
            prop: "tabledisplayjs",
            prop: "tableDisplayJs",
            width: 95,
            cell: false,
          },
          {
            label: "长度",
            prop: "controllength",
            prop: "controlLength",
            cell: false,
          },
          {
            label: "小数精度",
            prop: "precisionlength",
            prop: "precisionLength",
            cell: false,
          },
          {
            label: "取值范围",
            prop: "valuearea",
            prop: "valueArea",
            sortable: true,
            cell: false,
            width: 105,
          },
        ],
        List:[]
      }
    }
  },
  mounted() {
    console.log(this.attrEditVisible)
    console.log(this.ProData)
  },
  created() {

  },
  methods: {
    //属性分组按钮
    attrVisibleHandle(){
      if(this.CrudSelect.length>1){
        this.$message.warning('只能选择一条模板属性')
      }else if(this.CrudSelect<1){
        this.$message.warning('请选择一条模板属性')
      }else if(this.CrudSelect.length === 1){
        this.attrVisible=true;
      }
    },
    //属性分组提交
    attrHandle(){
      this.$set(this.attrRow,'attributeGroup',this.attrModel)
      this.attrModel=""
      this.attrVisible=false
    },
    //属性分组清空
    attrRemove(){
      this.attrModel=""
    },
    //表格数据
    CrudRend(){
      if(this.crudOid != ''){
        gridCodeClassifyTemplateAttr({'conditionMap[classifyTemplateOid]': this.crudOid}).then(res => {
          this.ProData = res.data.data;
        }).catch(res => {
          this.$message.error(res)
        })
      }
    },
    //业务类型保存
    busineAddHandle(){
      if(this.busineSelectList.length>1){
        this.$message.warning('请选择一条业务类型数据')
      }else {
        this.$set(this.busineAddList,'classifytemplateoid',this.crudOid)
        this.$set(this.busineAddList,'oid','')
        this.ProData.push(JSON.parse(JSON.stringify(this.busineAddList)))
        console.log(this.busineAddList)
        this.addVisible=false;
        console.log('prodata',this.ProData)
      }
    },
    //业务类型单选
    businessSelect(selection,row){
      this.busineSelectList=selection
      this.busineAddList=row
    },
    // 从业务类型中选择数据
    busineHandle(){
      if(this.crudArray.length<1){
@@ -1008,36 +1072,42 @@
        })
      }
    },
    // 级联属性
    // 级联属性按钮
    CascadeHandle(){
      if(this.CrudSelect.length >0){
      if(this.CrudSelect.length >1){
       this.$message.warning('只能选择一条模板属性')
      }else if(this.CrudSelect.length<1){
        this.$message.warning('请选择一条模板属性')
      }else if(this.CrudSelect.length === 1){
        this.CascadeVisible=true;
        gridCodeClassifyTemplateAttr({'conditionMap[classifyTemplateOid]': this.Formlist[0].oid,
          'conditionMap[oid_notequal]':this.CrudOid
        }).then(res=>{
         this.CascadeData=res.data.data
          this.CascadeData=res.data.data;
        })
      }else {
        this.$message.warning('请选择一条模板属性')
      }
    },
    //表格单选
    selectHandle(selection,row){
      this.CrudOid=row.oid;
      this.CrudSelect=selection
      this.CrudSelect=selection;
      this.attrRow=row;
      console.log(selection.length)
    },
    //保存
    addsHandler(){

      batchAddSave(this.ProData).then(res=>{
        console.log(res)
        this.$message.success('保存成功')
      })
    },
    // screenEdit(){
    //   debugger

    //   this.attrEditVisible=true;
    // },
    // outEdit(){
    //   debugger
    //   this.attrEditVisible=false;
    // },
    //级联保存
    CascadeAddHandle(){
      let CascadeString="";
      CascadeString=this.attrRow.id+(this.attrRow.name);
      this.$set(this.attrRow,'parentCode',CascadeString)
      this.CascadeVisible=false;
    },
    //级联属性清除
    casRemove() {
      this.selectRow = ""
@@ -1046,14 +1116,13 @@
    CascaderowClick(row) {
      this.selectRow = row.$index
      console.log(row)
      this.$message.success('选择序号' + row.$index)
    },
    // 枚举注入添加一行空数据
    addRow() {
      this.tableData.push({
        name: "",
        age: ""
      });
      this.tableData.push(JSON.parse(JSON.stringify({
        key: "",
        value: ""
      })));
    },
    // 枚举注入监听单元格点击事件并存储正在编辑的行
    handleCellClick(row, column) {
@@ -1064,6 +1133,31 @@
    enumDeleteRow(row) {
      console.log(row)
      this.tableData.splice(row, 1)
    },
    //枚举注入按钮
    enmuVisHandle(){
      if(this.CrudSelect.length>1){
        this.$message.warning('只能选择一条模板属性')
      }else if(this.CrudSelect<1){
        this.$message.warning('请选择一条模板属性')
      }else if(this.CrudSelect.length === 1){
        this.enumVisible=true;
      }
    },
    //枚举注入多选框
    handleSelectionChange(row){
      console.log(row)
      this.enumRow=JSON.parse(JSON.stringify(row));
    },
    //枚举注入保存
    enumAddHandle(){
      console.log(this.enumRow)
      if(this.enumRow.length<1){
        this.$message.warning('请至少选择一条数据')
      }else {
        this.$set(this.attrRow,'enumString',this.enumRow);
        this.enumVisible=false;
      }
    },
    // 将正在编辑的行的状态变为 null ，即退出编辑状态
    saveRow() {
@@ -1086,9 +1180,27 @@
    rulesExamine() {

    },
    //点击分类注入按钮
    injectBtn(){
      if(this.CrudSelect.length>1){
        this.$message.warning('只能选择一条模板数据')
      }else if(this.CrudSelect.length<1){
        this.$message.warning('请选择一条模板数据')
      }else if(this.CrudSelect.length === 1){
        this.injectVisible=true
      }
    },
    //分类注入保存
    injectAddHandle(){
      this.$set(this.attrRow,'classifyInvokeLevel',this.injectOption);
      this.injectVisible=false
    },
    //分类注入清空
    injectHandleReset() {
      console.log("清空")
      this.injectOption.type="";
      this.injectOption.set="";
      this.injectOption.change="";
      this.injectOption.injectNum="";
    },
    // 分类注入取消
    injectRemove() {
@@ -1128,6 +1240,56 @@
      //加上done关闭保存后不可编辑的状态
      done()
    },
    //表格操作栏删除
    CrudRowDel(row){
      this.ProData.splice(row.$index,1)
    },
    //表格删除
    CrudRemove(){
      this.ProData.splice(this.attrRow.$index,1)
    },
    //表格重置
    reset(){
      this.CrudRend()
    },
    //同步到其他模板
    syncHandle(){
      if(this.CrudSelect.length>1){
        this.$message.warning('只能选择一条模板属性数据')
      }else if(this.CrudSelect.length<1){
        this.$message.warning('请选择一条模板属性数据')
      }else if(this.CrudSelect.length === 1){
        copyto({oid:this.attrRow.oid}).then(res=>{
          this.$message.success('同步成功')
        })
      }
    },
    //编码申请预览
    applicationHandle(){
      this.addvisible=true;
      console.log('temp',this.crudOid)
      console.log('code',this.codeClassifyOid)
      // getFormDefineByTemplate({templateOid:this.crudOid,codeClassifyOid:this.codeClassifyOid}).then(res=>{
      //   console.log(res)
      // })
    },
    //全屏编辑
    fullscreenHandle(){
      if(this.crudArray.length<1){
        this.$message.warning('请选择一个模板')
      }else {
        this.attrEditVisible=true;
        this.attrFlag=true;
        console.log(this.attrEditVisible)
      }

    },
    //退出全屏编辑
    escEdit(){
      this.attrFlagChiledren=false;
      this.attrEditVisible=false;
      console.log(this.attrEditVisible)
    },
    // 排序
    sortChange(val) {
      console.log(val)