1

lzhe

2024-06-03 a786409d7f6769f43c107159dd84faf4a2927a9a

 src/views/console/system/meta-object-type/index.vue

@@ -2,7 +2,7 @@
 * @Author: lzhe lzhe@example.com
 * @Date: 2024-03-26 10:28:33
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-05-13 16:28:30
 * @LastEditTime: 2024-05-14 16:22:28
 * @FilePath: /smart-web/src/views/master/person/main/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
@@ -33,8 +33,8 @@
         </div>
         <div class="right-content">
            <div class="content-title">编码字段</div>
            <el-select v-model="metaForm.test">
               <el-option v-for="item in refCodeList" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"/>
            <el-select v-model="metaForm.code">
               <el-option v-for="item in refCodeList" :key="item.columnName" :label="item.columnName" :value="item.columnName"/>
            </el-select>
         </div>
         <div class="right-content">
@@ -43,39 +43,51 @@
         </div>
         <el-table ref="searchDataListRef" :data="searchDataList" border style="width: 100%;margin-top: 20px;" class="multipleTableRef">
            <el-table-column prop="fcode" label="字段编码">
               <template #default="scope">  
                  <el-select v-if="scope.row.isEdit" v-model="tableForm.fcode">
                     <el-option v-for="item in refCodeList" :key="item.columnName" :label="item.columnName" :value="item.columnName"/>
                  </el-select>
               <template #default="scope">
                  <div v-if="scope.row.isEdit">
                     <span class="important-star">*</span>
                     <el-select v-model="tableForm.fcode" style="width: 90%;">
                        <el-option v-for="item in refCodeList" :key="item.columnName" :label="item.columnName" :value="item.columnName"/>
                     </el-select>
                  </div>
                  <div v-else>{{scope.row.fcode}}</div>
               </template>
            </el-table-column>
            <el-table-column prop="fname" label="字段标题">
               <template #default="scope">
                  <el-input v-if="scope.row.isEdit" v-model="tableForm.fname"></el-input>  
                  <div v-if="scope.row.isEdit">
                     <span class="important-star">*</span>
                     <el-input v-model="tableForm.fname" style="width: 90%;"></el-input>
                  </div>
                  <div v-else>{{scope.row.fname}}</div>
               </template>
            </el-table-column>
            <el-table-column prop="field" label="实体属性">
               <template #default="scope">
                  <el-input v-if="scope.row.isEdit" v-model="tableForm.field"></el-input>  
                  <div v-if="scope.row.isEdit">
                     <span class="important-star">*</span>
                     <el-input v-model="tableForm.field" style="width: 90%;"></el-input>
                  </div>
                  <div v-else>{{scope.row.field}}</div>
               </template>
            </el-table-column>
            <el-table-column prop="elementTypeName" label="元素类型">
               <template #default="scope"> 
                  <el-select v-if="scope.row.isEdit" v-model="tableForm.elementTypeName">
                     <el-option v-for="item in dictionaryType" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"/>
                  </el-select> 
            <el-table-column prop="elementType" label="元素类型">
               <template #default="scope">
                  <div v-if="scope.row.isEdit">
                     <span class="important-star">*</span>
                     <el-select v-model="tableForm.elementType" @change="elementTypeNameChange" style="width: 90%;">
                        <el-option v-for="item in dictionaryType" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"/>
                     </el-select>
                  </div>
                  <div v-else>{{scope.row.elementTypeName}}</div>
               </template>
            </el-table-column>
            <el-table-column prop="enumType" label="枚举类型">
               <template #default="scope">
                  <el-select v-if="scope.row.isEdit" v-model="tableForm.enumType" disabled>
                     <el-option v-for="item in testList" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"/>
                  <el-select v-if="scope.row.isEdit" v-model="tableForm.enumType" :disabled="tableForm.elementType!='4'" @change = enumTypeChange>
                     <el-option v-for="item in dictList" :key="item.id" :label="item.code" :value="item.id"/>
                  </el-select> 
                  <div v-else>{{scope.row.enumType}}</div>
                  <div v-else>{{scope.row.enumTypeZn}}</div>
               </template>
            </el-table-column>
            <el-table-column prop="seq" label="字段顺序">
@@ -86,10 +98,8 @@
            </el-table-column>
            <el-table-column prop="refObjectTypeId" label="引用关系">
               <template #default="scope">
                  <el-select v-if="scope.row.isEdit" v-model="tableForm.refObjectTypeId" disabled>
                     <el-option v-for="item in testList" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"/>
                  </el-select>   
                  <div v-else>{{scope.row.refObjectTypeId}}</div>
                  <el-tree-select v-if="scope.row.isEdit" node-key="id" :props="defalutProps" v-model="tableForm.refObjectTypeId" :data="tableData" :render-after-expand="false" :disabled="tableForm.elementType!='5'" @node-click="handleNodeClick1"/>
                  <div v-else>{{scope.row.refObjectTypeIdZn}}</div>
               </template>
            </el-table-column>
            <el-table-column label="操作">
@@ -99,14 +109,14 @@
                     <el-button size="small" @click="cancelTable">取消</el-button>
                  </div>
                  <div v-else>
                     <el-icon class="operationIcon"><Edit /></el-icon>
                     <el-icon class="operationIcon"><Delete /></el-icon>
                     <!-- <el-icon class="operationIcon" @click="editTable(scope.$index)"><Edit /></el-icon> -->
                     <el-icon class="operationIcon" @click="deleteTable(scope.$index)"><Delete /></el-icon>
                  </div>
               </template>
            </el-table-column>
         </el-table>
         <div class="saveBtn">
            <el-button type="primary" @click="saveBtn">保存</el-button>
            <el-button type="primary" @click="saveBtn" :disabled="isAdd">保存</el-button>
         </div>
      </div>
   </div>
@@ -121,12 +131,15 @@
      name: "metaObject",
      data(){
         return {
            dictList: [],  //枚举类型
            elementTypeValue: "",
            detailobj: {},
            testList: [],
            tableForm: {
               fcode: "",
               fname: "",
               field: "",
               elementTypeName: "",
               elementType: "",
               enumType: "",
               seq: 0,
               refObjectTypeId: ""
@@ -139,7 +152,8 @@
            metaForm: {
               tableName: "",
               refCode: "",
               refName: ""
               refName: "",
               code: ""
            },
            classificationRules: {
               classify: [
@@ -168,16 +182,59 @@
      },
      mounted(){
         this.getDictionary();  //字典类型
         this.getDict(); //枚举类型
      },
      components: {
         ...ElementPlusIconsVue
      },
      methods: {
         getDict() {  //枚举类型
            this.$HTTP.get("/api/blade-system/dict/list").then(res=> {  //物理表
               if(res.code == 200) {
                  this.dictList = res.data;
               }
            })
         },
         editTable(index) {
            this.isAdd = true;
            var obj = Object.assign({},this.searchDataList[index],{isEdit: true});
            this.searchDataList.splice(index,1,obj);
         },
         deleteTable(index) {
            this.searchDataList.splice(index,1);
         },
         enumTypeChange(val) {  //枚举类型
            this.dictList.forEach(item=> {
               if(item.id == val) {
                  this.tableForm.enumTypeZn = item.code;
               }	
            })
         },
         elementTypeNameChange(val) {  //元素类型	
            this.dictionaryType.forEach(item=> {
               if(item.dictKey == val) {
                  this.elementTypeValue = item.dictValue;
               }
            })
            this.tableForm.enumType = "";
            this.tableForm.refObjectTypeId = "";
         },
         saveBtn() {

            var obj = Object.assign(this.detailobj,this.metaForm);  //detailobj物理数据，metaForm基础数据
            obj.fields = this.searchDataList;
            this.$HTTP.post("/api/blade-system/meta-object-type/submit",obj).then(res=> {
               if(res.code == 200) {
                  this.$message.success("保存成功");
               }
            })
         },
         comfirmTable() {
            this.cancelTable();  //还原
            this.cancelTable();
            this.tableForm.refObjectTypeIdZn = this.tableForm.dictKey;
            this.tableForm.elementTypeName = this.elementTypeValue;
            this.tableForm.enumType = this.tableForm.enumTypeZn;
            this.tableForm.id = null;
            this.tableForm.objectId = this.detailobj.objectId;
            this.searchDataList.unshift(this.tableForm);
         },
         cancelTable() {
@@ -185,8 +242,19 @@
            this.isAdd = false;
         },
         addParameter() {
            this.tableForm = {
               fcode: "",
               fname: "",
               field: "",
               elementType: "",
               enumType: "",
               seq: 0,
               refObjectTypeId: ""
            }
            this.isAdd = true;
            this.searchDataList.unshift({isEdit: true});
            var obj = Object.assign({},this.tableForm,{isEdit: true})
            obj.id = null;
            this.searchDataList.unshift(obj);
         },
         getDictionary() {  //字典类型
            this.$HTTP.get("/api/blade-system/dict/dictionary?code=element_type").then(res=> {  //物理表
@@ -222,10 +290,12 @@
                        this.refCodeList = item.tableColumns;
                     }
                  })
                  console.log(this.refCodeList,111)
                  this.metaForm.tableName = res.data.tableName;
                  this.metaForm.refCode = res.data.refCode;
                  this.metaForm.refName = res.data.refName;
                  this.metaForm.code = res.data.code;
                  this.detailobj = res.data;
                  this.detailobj.objectId = res.data.fid;
               }
            })
         },
@@ -233,7 +303,11 @@
            this.$HTTP.get(`/api/blade-system/meta-object-type-field/list?objectId=${this.dictKey}`).then(res=> {  //表格数据
               if(res.code == 200) {
                  this.searchDataList = res.data;
                  this.dictionaryType.forEach(item=> {
                  res.data.forEach(item=> {
                     item.enumTypeZn = item.enumType;  //枚举类型
                     item.refObjectTypeIdZn = item.refObjectTypeId;  //引用关系
                  })
                  this.dictionaryType.forEach(item=> {  //元素类型
                     this.searchDataList.forEach(item1=> {
                        if(item1.elementType == item.dictKey) {
                           item1.elementTypeName = item.dictValue;
@@ -252,24 +326,15 @@
               this.$refs.dialogForm.resetFields();
            };
         },
         classificationSubmit() {
            this.$refs.dialogForm.validate(async (valid) => {
               if (valid) {
                  this.isSaveing = false;
                  // this.$HTTP.post("/api/blade-system/data-scope/submit",obj).then(res=> {
                  //    this.isSaveing = false;
                  //    if(res.code == 200) {
                  //       this.$emit('success', this.addDictForm, this.mode);
                  //       this.visible = false;
                  //       this.$message.success("操作成功");
                  //    }else {
                  //       this.$alert(res.message, "提示", {type: 'error'});
                  //    }
                  // })
               }else{
                  return false;
               }
            })
         handleNodeClick1(data) {
            if(this.firstChild.includes(data.id)) {  //一级菜单返回
               this.$nextTick(()=> {
                  this.tableForm.refObjectTypeId = "";
               })
               return;
            };
            this.tableForm.refObjectTypeIdZn = data.dictValue;
            this.tableForm.dictKey = data.dictKey;
         },
         handleNodeClick(data) {
            if(!this.firstChild.includes(data.id)) {
@@ -369,4 +434,8 @@
   margin-top: 20px;
   text-align: right;
}
.important-star {
   margin-right: 4px;
   color: red;
}
</style>