1

lzhe

2024-05-13 3350b56a1d143eb12c987cd6cf07eea2119294e5

1

 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 12:15:04
 * @LastEditTime: 2024-05-13 16:28:30
 * @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
-->
@@ -10,96 +10,73 @@
    <div class="aposcope-main">
        <div class="aposcope-left">
            <div class="left-title">业务列表</div>
            <el-tree :data="tableData" row-key="id" :props="defalutProps" @node-click="handleNodeClick" ref="treeRef" default-expand-all :highlight-current="true" :expand-on-click-node="false" :default-checked-keys="treeCheck"/>
            <el-tree :data="tableData" node-key="id" :props="defalutProps" @node-click="handleNodeClick" ref="treeRef" default-expand-all :highlight-current="true" :expand-on-click-node="false"/>
        </div>
        <div class="aposcope-right">
            <div class="right-top">
                <div>
                    <el-button type="primary" @click="addData">+ 添加规则</el-button>
                    <el-button type="danger" plain @click="delData" disabled>删除</el-button>
                </div>
                <el-button @click="openVisible">开启规则分类</el-button>
            </div>
            <div class="right-content" v-if="searchDataList.length == 0">
                <!-- <img src="./quesheng.bd026700.png" /> -->
                <div>
                    <span>暂无数据</span>
                    <!-- <span @click="addData">添加规则</span> -->
                </div>
            </div>
            <el-table v-if="searchDataList.length != 0" ref="searchDataListRef" :data="searchDataList" border style="width: 100%;margin-top: 20px;" class="multipleTableRef" @selection-change="searchHandleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="moduleCode" label="接口模块"></el-table-column>
                <el-table-column prop="controllerCode" label="Controller"></el-table-column>
                <el-table-column prop="scopeName" label="action"></el-table-column>
                <el-table-column prop="httpMethod" label="Http方法"></el-table-column>
                <el-table-column prop="scopePath" label="api地址"></el-table-column>
            </el-table>
        </div>
        <el-drawer :title="'当前选中菜单路径'+drawerPath" v-model="drawer" :direction="direction" :before-close="handleClose" size="780" class="drawerClass">
            <el-form :inline="true" :model="drawerSearchData" abel-width="120px">
                <el-form-item label="接口模块">
                    <el-select v-model="drawerSearchData.moduleCode" style="width: 100%">
                        <el-option v-for="item in aList" :key="item.id" :label="item.title" :value="item.id"/>
            <div class="right-content">
                <div class="content-title"><span>*</span>所在物理表</div>
                <el-select v-model="metaForm.tableName" style="width: 30%" :disabled="isDis">
                    <el-option v-for="item in tableNameList" :key="item.tableName" :label="item.tableName" :value="item.tableName"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="接口Controller">
                    <el-select v-model="drawerSearchData.controllerCode" style="width: 100%">
                        <el-option v-for="item in aList" :key="item.id" :label="item.title" :value="item.id"/>
            </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>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="drawerSearchclick">搜索</el-button>
                </el-form-item>
            </el-form>
            <div>
                <div class="dict-table">
                    <el-table ref="multipleTableRef" :data="drawerTableData" border style="width: 100%" class="multipleTableRef" @selection-change="drawerHandleSelectionChange">
                        <el-table-column type="selection" width="55" />
                        <el-table-column prop="className" label="接口模块"></el-table-column>
                        <el-table-column prop="controllerCode" label="Controller"></el-table-column>
                        <el-table-column prop="name" label="action"></el-table-column>
                        <el-table-column prop="httpMethod" label="Http方法"></el-table-column>
                        <el-table-column prop="url" label="api地址"></el-table-column>
                    </el-table>
                </div>
            </div>
            <div class="drawer-foot">
                <el-button type="primary" @click="drawerConfirm" disabled>添加</el-button>
                <el-button @click="closeDrawer">取消</el-button>
            </div>
        </el-drawer>
        <el-dialog title="规则分类" v-model="visible" :width="600" @closed="closeVisible('closed')">
            <el-form :model="classificationForm" :rules="classificationRules" ref="dialogForm" label-width="120px"
                label-position="center">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="分类字段" prop="classify">
                            <el-select v-model="classificationForm.classify" style="width: 100%" placeholder="请选择">
                                <el-option v-for="item in aList" :key="item.id" :label="item.title" :value="item.id"/>
            <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>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="分类字典">
                            <el-input v-model="classificationForm.dictionary" placeholder="分类字典" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <el-button @click="visible = false">取消</el-button>
                <el-button type="primary" :loading="isSaveing" @click="classificationSubmit">确定</el-button>
            </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>
            </div>
            <div class="right-content">
                <div class="content-title">参数设置</div>
                <el-button type="primary">添加参数</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 label="操作">
                    <template #default="scope">
                        <el-icon><Edit /></el-icon>
                        <el-icon><Edit /></el-icon>
            </template>
        </el-dialog>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>
    import * as ElementPlusIconsVue from '@element-plus/icons-vue'
    let icons = []
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        icons.push(key)
    }
    export default {
        name: "apiscope",
        name: "metaObject",
        data(){
            return {
                treeCheck: [],
                isDis: true,
                testList: [],
                tableNameList: [],
                metaForm: {
                    tableName: "",
                    refCode: "",
                    refName: ""
                },
                classificationRules: {
                    classify: [
                        { required: true, message: "请选择分类字段" }
@@ -110,42 +87,79 @@
                    dictionary: ""
                },
                isSaveing: false,
                visible: false,
                drawerPath: "",
                searchData: {
                    size: "15",
                    current: "1"
                },
                searchDataList: [],  //右侧数据list
                aList: [],
                drawerSearchData: {
                    moduleCode: "",
                    controllerCode: "",
                    menuId: "",
                    size: "-1"
                },
                direction: "rtl",
                drawer: false,
                defalutProps: {
                    label: 'dictValue',
                      children: 'children',
                    isLeaf: 'hasChildren'
                },
                parentId: "0",
                tableData: [],
                searchSelection: []
                firstChild: [],   //一级菜单
                dictKey: "",
                dictionaryType: []  //字典类型
            }
        },
        created(){
            
        },
        mounted(){
            this.getMenuList();
            this.getDictionary();  //字典类型
        },
        components: {

            ...ElementPlusIconsVue
        },
        methods: {
            getDictionary() {  //字典类型
                this.$HTTP.get("/api/blade-system/dict/dictionary?code=element_type").then(res=> {  //物理表
                    if(res.code == 200) {
                        this.dictionaryType = res.data;
                        this.getMenuList();
                    }
                })
            },
            getList() {
                this.$HTTP.get(`/api/blade-system/bascoderule/count?type=${this.dictKey}`).then(res=> {  //是否可选
                    if(res.code == 200) {
                        if(res.data == 1) {
                            this.isDis = true;
                        }else {
                            this.isDis = false;
                        }
                    }
                })
                this.$HTTP.get("/api/blade-system/meta-object-type/tableDetail").then(res=> {  //物理表
                    if(res.code == 200) {
                        this.tableNameList = res.data;
                        this.gettableName();  //获取字段
                    }
                })
                this.getSearchDataList(); //表格数据
            },
            gettableName() {
                this.$HTTP.get(`/api/blade-system/meta-object-type/detail?fId=${this.dictKey}`).then(res=> {  //物理表数据
                    if(res.code == 200) {
                        this.metaForm.tableName = res.data.tableName;
                        this.metaForm.refCode = res.data.refCode;
                        this.metaForm.refName = res.data.refName;
                    }
                })
            },
            getSearchDataList() {
                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=> {
                            this.searchDataList.forEach(item1=> {
                                if(item1.elementType == item.dictKey) {
                                    console.log(item.code,99)
                                    item1.elementTypeName = item.dictValue;
                                }
                            })
                        })
                        console.log(this.searchDataList,12345)
                    }
                })
            },
            closeVisible(flag) {
                if(flag == "closed") {
                    this.classificationForm = {
@@ -174,85 +188,57 @@
                    }
                })
            },
            openVisible() {
                this.visible = true;
            },
            closeDrawer() {
                this.drawer = false;
            },
            drawerConfirm() {
                this.drawer = false;
            },
            searchHandleSelectionChange(selection) {
                this.searchSelection = selection;
            },
            drawerHandleSelectionChange() {

            },
            drawerSearchclick() {
                this.drawerSearchData.menuId = this.searchData.menuId;
                var obj = {};
                for(var key in this.drawerSearchData) {
                    if(this.drawerSearchData[key]) {
                        obj[key] = this.drawerSearchData[key];
                    }
                }
                this.$HTTP.get("/api/blade-system/resource-definition/page",obj).then(res=> {
                    if(res.code == 200) {
                        this.drawerTableData = res.data.records;
                    }
                })
            },
            handleClose(done) {
                done();
            },
            handleNodeClick(data) {
                if(!this.firstChild.includes(data.id)) {
                    console.log(data,234);
                    this.dictKey = data.dictKey;
                    this.getList();  //所在物理表、是否可选
                }
                // this.drawerPath = data.name;
                // console.log(data,data.name,222)
                // this.searchData.menuId = data.id;
                // this.$HTTP.get("/api/blade-system/api-scope/list",this.searchData).then(res=> {
                //     if(res.code == 200) {
                //         this.searchDataList = res.data.records;
                //     }
                // })
            },
            extractLastLevelIds(array) {  //递归获取children最后一级的id的数组
                let ids = []; 
                for (let i = 0; i < array.length; i++) {  
                    const obj = array[i];  
                    if (obj.children) {  
                        // 递归调用以提取更深层级的children中的id  
                        ids = ids.concat(this.extractLastLevelIds(obj.children));  
                    } else {  
                        // 如果没有children属性，则假定当前对象是最后一级  
                        if (obj.id) {  
                            ids.push(obj);  
                        }  
                    }  
                }  
                return ids; 
            },
            getMenuList() {
                this.$HTTP.get("/api/blade-system/dict/dictionary-tree?code=code_rule_for_biz_objects").then(res=> {
                    if(res.code == 200) {
                        this.tableData = res.data;
                        // this.treeCheck = idarr;  //获取选中数据
                    }
                })
            },
            addData() {
                // this.drawerSearchclick();
                // this.drawer = true;
            },
            delData() {
                if(this.searchSelection.length == 0) {
                    this.$message({
                      message: '请选择至少一条数据',
                      type: 'warning'
                        var menuGrantList = res.data.filter(item=> { //过滤掉没有children的
                            return item.children;
                    });
                    return;
                }
                var selStr = "";
                this.searchSelection.map(item=> {
                    selStr += item.id + ","
                        var lastId = this.extractLastLevelIds(menuGrantList[0].children);  //获取最后一级id
                        this.firstChild = res.data.map(item=> {
                            return item.id;
                })
                selStr = selStr.replace(/,$/, '');
                var that = this;
                // this.$HTTP.post("/api/blade-system/data-scope/remove?ids="+selStr).then(res=> {
                //     if(res.code == 200) {
                //         that.$message.success("操作成功");
                //         that.drawerSearchclick();
                //     }
                // })
                        this.$nextTick(()=> {
                            this.dictKey = lastId[0].dictKey;
                            this.$refs.treeRef.setCurrentKey(lastId[0].id);  //设置选中数据
                            this.getList();  //所在物理表、是否可选
                        })
                    }
                })
            }
        }
    }
</script>

<style scoped>
.aposcope-main {
    display: flex;
@@ -282,31 +268,13 @@
    margin-bottom: 12px;
}
.right-content {
    text-align: center;
    margin-bottom: 12px;
}
.right-content img {
    width: 350px;
    height: 350px;
.content-title {
    margin-bottom: 12px;
}
.right-content > div {
    font-size: 14px;;
}
.right-content > div span:nth-child(2) {
    margin-left: 8px;
    color: #409eff;
    cursor: pointer;
}
/deep/ .drawerClass {
    padding: 8px;
}
.datascope-drawer-btn {
    margin-bottom: 8px;
}
.drawer-foot {
    margin-top: 20px;
}
.right-top {
    display: flex;
    justify-content: space-between;
.content-title span {
    margin-right: 4px;
    color: red;
}
</style>