|
|
@@ -0,0 +1,560 @@
|
|
|
+<template>
|
|
|
+ <div style="width: 99%;display: flex;margin-left: 1%;background-color:#F5F8F9;;">
|
|
|
+ <el-card style="width: 18%;height: 100%;overflow: auto;height: 85vh;background-color: white;overflow-x: hidden;" shadow="never">
|
|
|
+ <template #header>
|
|
|
+ <div class="card-header" style="display: flex;align-items: center;justify-content: space-between;">
|
|
|
+ <span>数据源:</span>
|
|
|
+ <el-button type="primary" @click="showAddDataSource" style="margin-left: 5%;width: 10%;color: white;" size="mini" :icon="Plus"/>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <el-tree :expand-on-click-node="false" ref="treeRef" :filter-node-method="filterNode" :current-node-key="currentNodeKey" class="treeLeft" :data="data" @node-click="handleNodeClick"
|
|
|
+ node-key="id" style="margin-left:-15%;margin-top: 5%;width: 99%;background-color: transparent;" default-expand-all :key="valueKet">
|
|
|
+ <template #default="{ node, data }">
|
|
|
+ <span style="display: flex;width: 30%;align-items: center;margin-left: 1%;line-height: 1.5;">
|
|
|
+ <div class="custom-tree-node" style="width: 50%;line-height: 1.5;align-items: center;">
|
|
|
+ <!-- <el-tag v-if="data.nodeType=='MODEL'" class="ml-2" type="warning">模型</el-tag> -->
|
|
|
+ <el-icon><Coin /></el-icon>
|
|
|
+ <span style="font-size: 1rem;">{{ node.label }}</span>
|
|
|
+ <el-icon :size="size" color="red" style="float: right;margin-right: 1%;">
|
|
|
+ <Delete />
|
|
|
+ </el-icon>
|
|
|
+ </div>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-tree>
|
|
|
+ </el-card>
|
|
|
+ <div style="width: 80%;margin-left: 1%;background-color: white;">
|
|
|
+ <div style="display: flex;justify-content: space-between;width: 100%;align-items: center;margin-left: 0%;padding: 1%;">
|
|
|
+ <div style="display: flex;width: 50%;align-items: center;">
|
|
|
+ <div>
|
|
|
+ 名称
|
|
|
+ </div>
|
|
|
+ <el-input size="mini" v-model="metaName" style="width: 30%;margin-left: 1%;"/>
|
|
|
+ <el-button type="primary" @click="getTable" size="mini" style="margin-left:1%;">查询</el-button>
|
|
|
+ </div>
|
|
|
+ <el-button type="primary" @click="showAdd" size="mini" style="margin-left:1%;" :disabled="!parDscode">新增</el-button>
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ :data="tableData"
|
|
|
+ style="width: 99%;margin-left: 1%;margin-top: 0.5%;"
|
|
|
+ :cell-style="{ padding:'5px' }"
|
|
|
+ :header-cell-style="{height: heightAll*0.01+'px',}"
|
|
|
+ :row-style="{ fontSize: '16px',textAlign:'center'}"
|
|
|
+ border
|
|
|
+ :height="tableheight">
|
|
|
+ <el-table-column type="index" label="序号" width="80"></el-table-column>
|
|
|
+ <el-table-column prop="metaName" label="名称:">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="metaTable" label="代码"/>
|
|
|
+ <el-table-column prop="metaType" label="分类"/>
|
|
|
+ <el-table-column prop="metaNote" label="说明"/>>
|
|
|
+ <el-table-column prop="address" label="操作" width="250">
|
|
|
+ <template #default="scope">
|
|
|
+ <div style="display: flex;justify-content: space-between;width: 100%;">
|
|
|
+ <el-button type="primary" @click="showPei(scope.row)" size="mini" text style="margin-left: 0%;">数据项配置</el-button>
|
|
|
+ <el-button type="primary" @click="showEdit(scope.row)" size="mini" text style="margin-left:0%;">编辑</el-button>
|
|
|
+ <el-button @click="delRow(scope.row)" type="danger" text size="mini" style="margin-left: 0%;">删除</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div style="float: right;margin-top: 0.5%;margin-right: 1%;">
|
|
|
+ <!-- <el-pagination
|
|
|
+ small
|
|
|
+ v-model='currentPage'
|
|
|
+ @current-change="changePage"
|
|
|
+ background
|
|
|
+ layout="prev, pager, next"
|
|
|
+ :total="total"
|
|
|
+ class="mt-4"
|
|
|
+ /> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-dialog :title="title" @close="clearForm" v-model="dialogVisible" title="" width="30%" destroy-on-close :key="tableKey">
|
|
|
+ <el-form :label-width="140" label-position="right" :disabled="isEdit" style="margin-left: 5%;margin-top: 2%;" :model="formZu" class="demo-form-inline" ref="formRefZu" :rules="rulesZu">
|
|
|
+ <el-form-item label="元数据表名(英文):" prop="metaTable" style="" v-if="isAddTa">
|
|
|
+ <el-input v-model="formZu.metaTable" style="width: 75%;" placeholder="" resize="none"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="元数据表中文名:" prop="dsType" style="">
|
|
|
+ <el-input v-model="formZu.metaName" style="width: 75%;" placeholder="" resize="none"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="元数据表说明:" prop="dsPort" style="">
|
|
|
+ <el-input v-model="formZu.metaNote" style="width: 75%;" placeholder="" type="textarea" :row="2" resize="none"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="排序:" prop="dsUser">
|
|
|
+ <el-input-number v-model="formZu.metaSort" :min="1" style="width: 75%;"/>
|
|
|
+ <!-- <el-input v-model="formZu.metaSort" style="width: 75%;" placeholder="" resize="none"/> -->
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <span class="dialog-footer">
|
|
|
+ <el-button size="mini" @click="dialogVisible = false">取消</el-button>
|
|
|
+ <el-button v-if="isAddTa" type="primary" @click="addTa" size="mini">
|
|
|
+ 提交
|
|
|
+ </el-button>
|
|
|
+ <el-button v-if="!isAddTa" type="primary" @click="saveEditTa" size="mini">
|
|
|
+ 提交
|
|
|
+ </el-button>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ <el-dialog @close="" v-model="dialogVisibleTree" title="配置管理" width="50%" destroy-on-close :key="tableKey">
|
|
|
+ <div style="margin-top: 2%;">
|
|
|
+ <div style="display: flex;justify-content: space-between;align-items: center;">
|
|
|
+ <div style="display: flex;justify-content: flex-end;width: 100%;margin-right: 2%;">
|
|
|
+ <el-button @click="addCanAdd" style="margin-top: 1%;" type="success" size="mini" plain>新增参数</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <el-table
|
|
|
+ style="margin-top: 1%;width: 98%;"
|
|
|
+ :data="tableDataCanAdd"
|
|
|
+ :cell-style="{ textAlign: 'center',padding:'2px 0' }"
|
|
|
+ :header-cell-style="{ textAlign: 'center'}"
|
|
|
+ :row-style="{ height: heightAll*0.01+'px',fontSize: '16px',textAlign:'center' }"
|
|
|
+ border >
|
|
|
+ <el-table-column prop="itemName" label="字段编码" width="200">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-input placeholder="(必填)" type="primary" class="noBor" v-model="scope.row.fieldCode" size="mini" text style="margin-left: 0%;"></el-input>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="itemName" label="字段名称">
|
|
|
+ <template #default="scope">
|
|
|
+ <div style="width: 100%;">
|
|
|
+ <el-input placeholder="" type="primary" class="noBor" v-model="scope.row.fieldName" size="mini" text style="margin-left: 0%;"></el-input>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="itemName" label="字段类型">
|
|
|
+ <template #default="scope">
|
|
|
+ <div style="width: 100%;">
|
|
|
+ <el-input placeholder="" type="primary" class="noBor" v-model="scope.row.metaType" size="mini" text style="margin-left: 0%;"></el-input>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="itemName" label="长度" >
|
|
|
+ <template #default="scope">
|
|
|
+ <div style="width: 100%;">
|
|
|
+ <el-input type="primary" class="noBor" v-model="scope.row.fieldLength" size="mini" text style="margin-left: 0%;"></el-input>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="itemName" label="默认值" >
|
|
|
+ <template #default="scope">
|
|
|
+ <div style="width: 100%;">
|
|
|
+ <el-input type="primary" class="noBor" v-model="scope.row.fieldDefault" size="mini" text style="margin-left: 0%;"></el-input>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="itemName" label="说明" >
|
|
|
+ <template #default="scope">
|
|
|
+ <div style="width: 100%;">
|
|
|
+ <el-input type="primary" class="noBor" v-model="scope.row.fieldDesc" size="mini" text style="margin-left: 0%;"></el-input>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="itemName" label="主键" width="80">
|
|
|
+ <template #default="scope">
|
|
|
+ <div style="width: 100%;">
|
|
|
+ <el-checkbox v-model="scope.row.fieldIspri" label="" size="large" />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="address" label="操作" width="100">
|
|
|
+ <template #default="scope">
|
|
|
+ <div style="width: 100%;">
|
|
|
+ <el-button type="danger" @click="delCanAdd(scope.$index)" size="mini" text style="margin-left: 0%;">删除</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <template #footer>
|
|
|
+ <span class="dialog-footer">
|
|
|
+ <el-button size="mini" @click="dialogVisibleTree = false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="addPei" size="mini">
|
|
|
+ 提交
|
|
|
+ </el-button>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ <el-dialog @close="clearForm" v-model="dialogVisibleData" title="新增数据源" width="30%" destroy-on-close :key="tableKey">
|
|
|
+ <el-form :label-width="100" label-position="right" :disabled="isEdit" style="margin-left: 5%;margin-top: 2%;" :model="formTree" class="demo-form-inline" ref="formRefTree" :rules="rulesTree">
|
|
|
+ <el-form-item label="数据源名称:" prop="dsTitle" style="">
|
|
|
+ <el-input v-model="formTree.dsTitle" style="width: 75%;" placeholder="" resize="none"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="数据源类型:" prop="dsType" style="">
|
|
|
+ <el-input v-model="formTree.dsType" style="width: 75%;" placeholder="" resize="none"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="数据库文名:" prop="dsDbname" style="">
|
|
|
+ <el-input v-model="formTree.dsDbname" style="width: 75%;" placeholder="" resize="none"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="数据库IP:" prop="dsIp" style="">
|
|
|
+ <el-input v-model="formTree.dsIp" style="width: 75%;" placeholder="" resize="none"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="端口号:" prop="dsPort" style="">
|
|
|
+ <el-input v-model="formTree.dsPort" style="width: 75%;" placeholder="" resize="none"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="用户名:" prop="dsUser">
|
|
|
+ <el-input v-model="formTree.dsUser" style="width: 75%;" placeholder="" resize="none"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="密码:" prop="dsPass">
|
|
|
+ <el-input v-model="formTree.dsPass" style="width: 75%;" placeholder="" resize="none"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="说明:" prop="dsNode">
|
|
|
+ <el-input v-model="formTree.dsNode" style="width: 75%;" placeholder="" resize="none"/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <span class="dialog-footer">
|
|
|
+ <el-button size="mini" @click="dialogVisibleData = false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="addData" size="mini">
|
|
|
+ 提交
|
|
|
+ </el-button>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+<script setup>
|
|
|
+import { reactive } from 'vue'
|
|
|
+import { Plus,Delete} from '@element-plus/icons-vue'
|
|
|
+import { getDataMetaList,getDataSourceList,addMeta,delMeta,editMeta,addPeiList,getMetaFiele,delMetaFiled,addDataSource } from "@/api/register/regCom.js";
|
|
|
+import { ref, onMounted, onUnmounted, nextTick } from 'vue';
|
|
|
+const { proxy } = getCurrentInstance();
|
|
|
+const data = ref([])
|
|
|
+const title = ref([])
|
|
|
+const titleTree = ref([])
|
|
|
+const dialogVisibleData = ref(false)
|
|
|
+const currentPage = ref(1)
|
|
|
+const total = ref(1)
|
|
|
+const tableData = ref([])
|
|
|
+const tableheight = window.innerHeight*0.78
|
|
|
+const heightAll = window.innerHeight
|
|
|
+const dialogVisible = ref(false)
|
|
|
+const dialogVisibleTree = ref(false)
|
|
|
+const isAdd = ref(false)
|
|
|
+const isAddTa = ref(false)
|
|
|
+const treeId = ref('');
|
|
|
+const metaName =ref()
|
|
|
+const parDel = ref({})
|
|
|
+const formZu = ref({
|
|
|
+ metaTable:'',
|
|
|
+ metaName:'',
|
|
|
+ metaType:'',
|
|
|
+ metaNote:'',
|
|
|
+ metaSort:'',
|
|
|
+});
|
|
|
+const rulesZu = reactive({
|
|
|
+ metaTable: [{ required: true, message: '必填', trigger: 'blur' }],
|
|
|
+});
|
|
|
+const formRefZu = ref();
|
|
|
+const tableDataCanAdd = ref([])
|
|
|
+const formTree = ref({
|
|
|
+ dsTitle:'',
|
|
|
+ dsType:'',
|
|
|
+ dsDbname:'',
|
|
|
+ dsIp:'',
|
|
|
+ dsPort:'',
|
|
|
+ dsUser:'',
|
|
|
+ dsPass:'',
|
|
|
+ dsNode:'',
|
|
|
+});
|
|
|
+const parMeta = ref({})
|
|
|
+const rulesTree = reactive({
|
|
|
+ dsTitle: [{ required: true, message: '必填', trigger: 'blur' }]
|
|
|
+});
|
|
|
+const formRefTree = ref();
|
|
|
+const parDscode = ref('')
|
|
|
+
|
|
|
+function showAddDataSource(){
|
|
|
+ dialogVisibleData.value = true
|
|
|
+}
|
|
|
+function addData(){
|
|
|
+ formRefTree.value.validate(async (valid) => {
|
|
|
+ if(valid){
|
|
|
+ addDataSource(formTree.value).then(res=>{
|
|
|
+ if(res.code===200){
|
|
|
+ proxy.$modal.msgSuccess("新增成功");
|
|
|
+ getTree()
|
|
|
+ dialogVisibleData.value = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+function addPei(){
|
|
|
+
|
|
|
+ tableDataCanAdd.value.forEach((item, index, array)=>{
|
|
|
+ if(item.fieldIspri===true){
|
|
|
+ item.fieldIspri = '1'
|
|
|
+ }
|
|
|
+ if(item.fieldIspri===false){
|
|
|
+ item.fieldIspri = '2'
|
|
|
+ }
|
|
|
+ if(!item.fieldCode){
|
|
|
+ array.splice(index, 1)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if(tableDataCanAdd.value.length===0){
|
|
|
+ var par = {
|
|
|
+ dsCode:parDscode.value,
|
|
|
+ metaTable:parMeta.value.metaTable,
|
|
|
+ fieldCode:parDel.value.fieldCode
|
|
|
+ }
|
|
|
+ delMetaFiled(par).then(res=>{
|
|
|
+ if(res.code===200){
|
|
|
+ proxy.$modal.msgSuccess("修改成功");
|
|
|
+ getTable()
|
|
|
+ dialogVisibleTree.value = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ addPeiList(tableDataCanAdd.value).then(res=>{
|
|
|
+ if(res.code===200){
|
|
|
+ proxy.$modal.msgSuccess("修改成功");
|
|
|
+ getTable()
|
|
|
+ dialogVisibleTree.value = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+function showPei(row){
|
|
|
+ dialogVisibleTree.value = true
|
|
|
+ parMeta.value = row
|
|
|
+ var par = {
|
|
|
+ dsCode:parDscode.value,
|
|
|
+ metaTable:row.metaTable,
|
|
|
+ }
|
|
|
+ getMetaFiele(par).then(res=>{
|
|
|
+ tableDataCanAdd.value = res.data
|
|
|
+ tableDataCanAdd.value.forEach(item=>{
|
|
|
+ if(item.fieldIspri==='1'){
|
|
|
+ item.fieldIspri = true
|
|
|
+ }
|
|
|
+ if(item.fieldIspri==='2'){
|
|
|
+ item.fieldIspri = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+}
|
|
|
+function clearForm(){
|
|
|
+ formTree.value = {
|
|
|
+ dsTitle:'',
|
|
|
+ dsType:'',
|
|
|
+ dsDbname:'',
|
|
|
+ dsIp:'',
|
|
|
+ dsPort:'',
|
|
|
+ dsUser:'',
|
|
|
+ dsPass:'',
|
|
|
+ dsNode:'',
|
|
|
+ }
|
|
|
+ formZu.value = {
|
|
|
+ metaTable:'',
|
|
|
+ metaName:'',
|
|
|
+ metaType:'',
|
|
|
+ metaNote:'',
|
|
|
+ metaSort:'',
|
|
|
+ }
|
|
|
+ tableDataCanAdd.value = []
|
|
|
+}
|
|
|
+function addCanAdd(){
|
|
|
+ var par = {
|
|
|
+ dsCode:parDscode.value,
|
|
|
+ metaTable:parMeta.value.metaTable,
|
|
|
+ }
|
|
|
+ tableDataCanAdd.value.push(par)
|
|
|
+}
|
|
|
+function delCanAdd(index){
|
|
|
+ if(tableDataCanAdd.value.length===1){
|
|
|
+ parDel.value = tableDataCanAdd.value[0]
|
|
|
+ }
|
|
|
+ tableDataCanAdd.value.splice(index, 1)
|
|
|
+}
|
|
|
+function getTable(){
|
|
|
+ var par = {
|
|
|
+ dsCode:parDscode.value,
|
|
|
+ metaName:metaName.value
|
|
|
+ }
|
|
|
+ getDataMetaList(par).then(res=>{
|
|
|
+ tableData.value = res.data
|
|
|
+ })
|
|
|
+}
|
|
|
+function showAdd(){
|
|
|
+ isAddTa.value = true
|
|
|
+ title.value = '新增'
|
|
|
+ dialogVisible.value = true
|
|
|
+}
|
|
|
+function showEdit(row){
|
|
|
+ isAddTa.value = false
|
|
|
+ title.value = '编辑'
|
|
|
+ dialogVisible.value = true
|
|
|
+ formZu.value = row
|
|
|
+}
|
|
|
+function showAddTree(){
|
|
|
+ isAdd.value = true
|
|
|
+ titleTree.value = '新增节点'
|
|
|
+ dialogVisibleTree.value = true
|
|
|
+}
|
|
|
+function clearFromTree(){
|
|
|
+ formTree.value = {
|
|
|
+ itemName:'',
|
|
|
+ catePid:'',
|
|
|
+ itemNo:'',
|
|
|
+ itemNotes:''
|
|
|
+ }
|
|
|
+}
|
|
|
+function getTree(){
|
|
|
+ getDataSourceList().then(res=>{
|
|
|
+ data.value = res.rows
|
|
|
+ data.value.forEach(item=>{
|
|
|
+ item.label = item.dsDbname
|
|
|
+ item.value = item.dsCode
|
|
|
+ })
|
|
|
+ })
|
|
|
+}
|
|
|
+function addTa(){
|
|
|
+ formRefZu.value.validate(async (valid) => {
|
|
|
+ if(valid){
|
|
|
+ formZu.value.dsCode = parDscode.value
|
|
|
+ await addMeta(formZu.value).then(res=>{
|
|
|
+ if(res.code===200){
|
|
|
+ proxy.$modal.msgSuccess("新增成功");
|
|
|
+ getTable()
|
|
|
+ dialogVisible.value = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+function saveEditTa(){
|
|
|
+ editMeta(formZu.value).then(res=>{
|
|
|
+ if(res.code===200){
|
|
|
+ proxy.$modal.msgSuccess("修改成功");
|
|
|
+ dialogVisible.value = false
|
|
|
+ getTable()
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+function delRow(row) {
|
|
|
+ var par = {
|
|
|
+ dsCode:parDscode.value,
|
|
|
+ metaTable:row.metaTable
|
|
|
+ }
|
|
|
+ proxy.$modal.confirm('是否确认删除?').then(function () {
|
|
|
+ return delMeta(par);
|
|
|
+ }).then(() => {
|
|
|
+ getTable();
|
|
|
+ proxy.$modal.msgSuccess("删除成功");
|
|
|
+ }).catch(() => {});
|
|
|
+};
|
|
|
+async function addTree(){
|
|
|
+ formRefTree.value.validate(async (valid) => {
|
|
|
+ await addDataCate(formTree.value).then(res=>{
|
|
|
+ if(res.code===200){
|
|
|
+ proxy.$modal.msgSuccess("新增成功");
|
|
|
+ getTree()
|
|
|
+ dialogVisibleTree.value = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ });
|
|
|
+}
|
|
|
+function saveEditTree(){
|
|
|
+ editCate(formTree.value).then(res=>{
|
|
|
+ if(res.code===200){
|
|
|
+ proxy.$modal.msgSuccess("修改成功");
|
|
|
+ dialogVisibleTree.value = false
|
|
|
+ getTree()
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+function handleNodeClick(node, data){
|
|
|
+ parDscode.value = node.value
|
|
|
+ console.log(parDscode.value)
|
|
|
+ getTable()
|
|
|
+}
|
|
|
+function delTree(node, data) {
|
|
|
+ proxy.$modal.confirm('是否确认删除?').then(function () {
|
|
|
+ return delCate(data.id);
|
|
|
+ }).then(() => {
|
|
|
+ getTree();
|
|
|
+ proxy.$modal.msgSuccess("删除成功");
|
|
|
+ }).catch(() => {});
|
|
|
+};
|
|
|
+function editTree(node, data){
|
|
|
+ console.log(data)
|
|
|
+ titleTree.value = '编辑'
|
|
|
+ isAdd.value = false
|
|
|
+ dialogVisibleTree.value = true
|
|
|
+ getCateDe(data.id).then(res=>{
|
|
|
+ formTree.value = res.data
|
|
|
+ })
|
|
|
+ console.log(node, data)
|
|
|
+}
|
|
|
+onMounted(() => {
|
|
|
+ getTree()
|
|
|
+ // getTable()
|
|
|
+});
|
|
|
+
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+:deep(.el-table__body tr:hover > td) {
|
|
|
+ background-color: #eaf7ff !important;
|
|
|
+}
|
|
|
+ :deep(.treeLeft) .el-tree-node__content {
|
|
|
+ width: 150%;
|
|
|
+ display: flex !important;
|
|
|
+ height: 30px !important;
|
|
|
+ align-items: center;
|
|
|
+ padding-top: 0 !important;
|
|
|
+}
|
|
|
+:deep(.treeLeft) .el-tree-node__content:hover {
|
|
|
+ background-color: #ecf5ff;
|
|
|
+}
|
|
|
+:deep(.treeLeft) .el-tree-node__content:active {
|
|
|
+ background-color: #d9ecff !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 选中态(Active) */
|
|
|
+:deep(.treeLeft) .el-tree-node.is-current > .el-tree-node__content {
|
|
|
+ background-color: #c6e2ff !important;
|
|
|
+ }
|
|
|
+.drag-handle {
|
|
|
+ cursor: move;
|
|
|
+}
|
|
|
+
|
|
|
+.ghost {
|
|
|
+ opacity: 0.5;
|
|
|
+ background: #c8ebfb;
|
|
|
+}
|
|
|
+
|
|
|
+/* 防止文字选中 */
|
|
|
+:deep(.el-table__row) {
|
|
|
+ user-select: none;
|
|
|
+ -webkit-user-select: none;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style scoped lang="scss">
|
|
|
+
|
|
|
+
|
|
|
+.el-table .el-table__row td {
|
|
|
+ height: 60px !important; /* 行高 */
|
|
|
+}
|
|
|
+.custom-tree-node {
|
|
|
+ display: flex; /* 启用 Flex 布局 */
|
|
|
+ align-items: center; /* 垂直居中 */
|
|
|
+ gap: 8px; /* 图标与文字间距 */
|
|
|
+}
|
|
|
+.custom-tree-node {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 14px;
|
|
|
+ padding-right: 8px;
|
|
|
+}
|
|
|
+</style>
|