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
-->
@@ -15,47 +15,109 @@
      <div class="aposcope-right">
         <div class="right-content">
            <div class="content-title"><span>*</span>所在物理表</div>
            <el-select v-model="metaForm.tableName" style="width: 30%" :disabled="isDis">
            <el-select v-model="metaForm.tableName" :disabled="isDis">
               <el-option v-for="item in tableNameList" :key="item.tableName" :label="item.tableName" :value="item.tableName"/>
            </el-select>
         </div>
         <div class="right-content">
            <div class="content-title"><span>*</span>字段1</div>
            <el-select v-model="metaForm.refCode" style="width: 30%">
               <el-option v-for="item in testList" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"/>
            <el-select v-model="metaForm.refCode" :disabled="isDis">
               <el-option v-for="item in refCodeList" :key="item.columnName" :label="item.columnName" :value="item.columnName"/>
            </el-select>
         </div>
         <div class="right-content">
            <div class="content-title"><span>*</span>字段2</div>
            <el-select v-model="metaForm.refName" style="width: 30%">
               <el-option v-for="item in testList" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"/>
            <el-select v-model="metaForm.refName" :disabled="isDis">
               <el-option v-for="item in refCodeList" :key="item.columnName" :label="item.columnName" :value="item.columnName"/>
            </el-select>
         </div>
         <div class="right-content">
            <div class="content-title">编码字段</div>
            <el-select v-model="metaForm.test" style="width: 30%">
               <el-option v-for="item in testList" :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">
            <div class="content-title">参数设置</div>
            <el-button type="primary">添加参数</el-button>
            <el-button type="primary" @click="addParameter" :disabled="isAdd">添加参数</el-button>
         </div>
         <el-table ref="searchDataListRef" :data="searchDataList" border style="width: 100%;margin-top: 20px;" class="multipleTableRef">
            <el-table-column prop="fcode" label="字段编码"></el-table-column>
            <el-table-column prop="fname" label="字段标题"></el-table-column>
            <el-table-column prop="field" label="实体属性"></el-table-column>
            <el-table-column prop="elementTypeName" label="元素类型"></el-table-column>
            <el-table-column prop="enumType" label="枚举类型"></el-table-column>
            <el-table-column prop="seq" label="字段顺序"></el-table-column>
            <el-table-column prop="refObjectTypeId" label="引用关系"></el-table-column>
            <el-table-column prop="fcode" label="字段编码">
               <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">
                  <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">
                  <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="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="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.enumTypeZn}}</div>
               </template>
            </el-table-column>
            <el-table-column prop="seq" label="字段顺序">
               <template #default="scope">
                  <el-input-number v-if="scope.row.isEdit" scope.row.isEdit v-model="tableForm.seq" :min="0" :max="99" style="width:100%;"/>
                  <div v-else>{{scope.row.seq}}</div>
               </template>
            </el-table-column>
            <el-table-column prop="refObjectTypeId" label="引用关系">
               <template #default="scope">
                  <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="操作">
               <template #default="scope">
                  <el-icon><Edit /></el-icon>
                  <el-icon><Edit /></el-icon>
                  <div v-if="scope.row.isEdit">
                     <el-button size="small" type="primary" @click="comfirmTable">确定</el-button>
                     <el-button size="small" @click="cancelTable">取消</el-button>
                  </div>
                  <div v-else>
                     <!-- <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" :disabled="isAdd">保存</el-button>
         </div>
      </div>
   </div>
</template>
@@ -69,13 +131,29 @@
      name: "metaObject",
      data(){
         return {
            isDis: true,
            dictList: [],  //枚举类型
            elementTypeValue: "",
            detailobj: {},
            testList: [],
            tableForm: {
               fcode: "",
               fname: "",
               field: "",
               elementType: "",
               enumType: "",
               seq: 0,
               refObjectTypeId: ""
            },
            inputValue: "",
            isAdd: false,
            isDis: true,
            tableNameList: [],
            refCodeList: [],
            metaForm: {
               tableName: "",
               refCode: "",
               refName: ""
               refName: "",
               code: ""
            },
            classificationRules: {
               classify: [
@@ -104,11 +182,80 @@
      },
      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.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() {
            this.searchDataList.splice(0,1);
            this.isAdd = false;
         },
         addParameter() {
            this.tableForm = {
               fcode: "",
               fname: "",
               field: "",
               elementType: "",
               enumType: "",
               seq: 0,
               refObjectTypeId: ""
            }
            this.isAdd = 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=> {  //物理表
               if(res.code == 200) {
@@ -129,7 +276,7 @@
            })
            this.$HTTP.get("/api/blade-system/meta-object-type/tableDetail").then(res=> {  //物理表
               if(res.code == 200) {
                  this.tableNameList = res.data;
                  this.tableNameList = res.data; 
                  this.gettableName();  //获取字段
               }
            })
@@ -138,9 +285,17 @@
         gettableName() {
            this.$HTTP.get(`/api/blade-system/meta-object-type/detail?fId=${this.dictKey}`).then(res=> {  //物理表数据
               if(res.code == 200) {
                  this.tableNameList.forEach(item=> {
                     if(res.data.tableName == item.tableName) {
                        this.refCodeList = item.tableColumns;
                     }
                  })
                  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;
               }
            })
         },
@@ -148,15 +303,17 @@
            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) {
                           console.log(item.code,99)
                           item1.elementTypeName = item.dictValue;
                        }
                     })
                  })
                  console.log(this.searchDataList,12345)
               }
            })
         },
@@ -169,30 +326,21 @@
               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)) {
               console.log(data,234);
               this.dictKey = data.dictKey;
               this.getList();  //所在物理表、是否可选
               this.isAdd = false;
            }
            // this.drawerPath = data.name;
            // this.$HTTP.get("/api/blade-system/api-scope/list",this.searchData).then(res=> {
@@ -277,4 +425,17 @@
   margin-right: 4px;
   color: red;
}
.operationIcon {
   font-size: 16px;
   margin-right:4px;
   cursor: pointer;
}
.saveBtn {
   margin-top: 20px;
   text-align: right;
}
.important-star {
   margin-right: 4px;
   color: red;
}
</style>