TBA_GXPT/ruoyi-ui/src/views/register/modelData/dataJiDe.vue

<template>
  <div style="width: 100%;;display: flex;">
    <div style="width: 15%;;background-color: #F2F6FC;max-height: 85vh;overflow: auto;">
      <div style="display: flex;padding-top: 1%;padding-top: 5%;">
        <el-input
          v-model="inputNode"
          style="width:90%;margin-left: 5%;background-color: #ebeef5;"
          class="w-50 m-2"
          :prefix-icon="Search" 
        />
        <!-- <el-button style="margin-left: 2%;width: 10%;background-color: #F7F7F7" :icon="Filter"/> -->
        <!-- <el-button type="primary" @click="showAdd" style="margin-left: 5%;width: 10%;" :icon="Plus"/> -->
      </div>
      <!-- <Plus style="width: 1em; height: 1em; margin-left:90%;cursor: pointer;color: #337ecc;" @click="showAddTree"/> -->
      <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: 5%;margin-top: 5%;width: 90%;background-color: transparent;" default-expand-all :key="valueKet">
          <template #default="{ node, data }">
            <span  style="justify-content: space-between;display: flex;width: 100%;align-items: center;">
              <div class="custom-tree-node">
                   <svg-icon icon-class="model2" style="color: #eebe77;" v-if="data.nodeType=='MODEL'"/>
                  <svg-icon icon-class="model" dstyle="color: #13E03B;" v-if="data.nodeType=='SERVICE'"/>
                  <svg-icon svg-icon icon-class="cate" style="color: red;" v-if="data.nodeType=='TREE'"/>
                <span>{{ node.label }}</span>
              </div>
              <!-- <div style="margin-right: 1%;position: absolute;margin-left: 75%;">
                <el-dropdown trigger="hover" @click.stop v-if="currentNodeKey === data.id&&data.nodeType!=='SERVICE'">
                    <el-icon class="el-icon--right" style="color: black;">
                      <plus />
                    </el-icon>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item style="display: flex;" @click="add1Level">
                        <el-icon class="el-icon--right" style="color: black;">
                          <CirclePlus />
                        </el-icon>
                        <div>
                          添加同级
                        </div>
                      </el-dropdown-item>
                      <el-dropdown-item style="display: flex;"  @click="addNextLevel">
                        <el-icon class="el-icon--right" style="color: black;">
                          <Connection />
                        </el-icon>
                        <div>
                          新建下级
                        </div>
                      </el-dropdown-item>
                      <divider/>
                      <el-dropdown-item style="display: flex;"  @click="delAll" divided>
                        <el-icon class="el-icon--right" style="color: black;">
                          <CircleClose />
                        </el-icon>
                        <div>
                          删除节点
                        </div>
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div> -->
            </span>
          </template>
        </el-tree>
    </div>
    <div style="width: 84%;margin-left: 1%;padding-top: 0.5%;" class="tab-container">
      <div style="margin-left: auto;margin-right: 1%;">
        <el-button type="primary" @click="dialogVisibleJi = true" :disabled="isSel">新增关联</el-button>
      </div>
      <div>
        <el-table 
        :data="tableData" 
        style="width: 99%;margin-left: 1%;margin-top: 0.5%;"
        :cell-style="{ padding:'5px' }"
        :header-cell-style="{fontSize: '14px',height: heightAll*0.01+'px',}"
        :row-style="{ fontSize: '17px',textAlign:'center'}"
        border 
        :height="tableheight">
        <el-table-column type="index" label="序号" width="80"></el-table-column>
        <el-table-column prop="dcName" label="名称:">
        </el-table-column>
        <el-table-column prop="dcType" label="分类"/>
        <el-table-column prop="dcNote" label="说明"/>>
        <el-table-column prop="address" label="操作" width="280">
            <template #default="scope">
                <div style="width: 100%;">
                    <el-button type="primary" @click="download(scope.row,scope.$index)" size="mini" text style="margin-left: 0%;">下载</el-button>
                    <el-button v-if="scope.row.dcType==='FILE'" type="success" @click="showUpload(scope.row,scope.$index)" size="mini" text style="margin-left: 0%;">储存</el-button>
                    <el-button v-if="scope.row.dcType==='FILE'" type="warning" @click="showBeifen(scope.row,scope.$index)" size="mini" text style="margin-left: 0%;">备份</el-button>
                    <el-button type="danger" @click="delCan(scope.row,scope.$index)" size="mini" text style="margin-left: 0%;">删除</el-button>
                </div>
            </template>
        </el-table-column>
      </el-table>
      </div>
      
        <el-dialog @close="clearAdd" v-model="dialogVisible" title="" width="60%" destroy-on-close :key="tableKey">
          <div style="display: flex;align-items: center;">
            <div v-if="detailJson.rqtype==='GET'">
              <el-tag class="ml-2" type="warning">GET</el-tag>
            </div>
            <div v-if="detailJson.rqtype==='POST'">
              <el-tag class="ml-2" type="warning">POST</el-tag>
            </div>
            <div style="margin-left: 1%;">
              {{ detailJson.name }}:
            </div>
            <div style="margin-left: 1%;">
              {{ detailJson.url }}
            </div>
          </div>
          <el-descriptions style="margin-top: 1%;" :column="3" border>
            <el-descriptions-item label="接口类型">{{ detailJson.type }}</el-descriptions-item>
            <el-descriptions-item label="请求方式">{{ detailJson.rqtype }}</el-descriptions-item>
            <el-descriptions-item label="响应类型">{{ detailJson.rptype }}</el-descriptions-item>
            <el-descriptions-item label="服务分类">{{ detailJson.cateCode }}</el-descriptions-item>
          </el-descriptions>
          <div style="margin-top:4%;font-size: 18px;">
            请求参数
          </div>
           <el-table 
            style="margin-top: 1%;width: 98%;"
            :data="tableDataCan" 
            :cell-style="{ textAlign: 'center',padding:'2px 0' }"
            :header-cell-style="{fontSize: '14px', textAlign: 'center'}"
            :row-style="{ height: heightAll*0.01+'px',fontSize: '17px',textAlign:'center'  }"
            border >
                <el-table-column prop="paramCode" label="参数字段">
                </el-table-column>
                <el-table-column prop="paramName" label="参数名称">
                </el-table-column>
                <el-table-column prop="paramType" label="参数类型" width="200">
                </el-table-column>
                <el-table-column prop="paramValue" label="参数示例">
                  
                </el-table-column>
                <el-table-column prop="paramNote" label="参数说明" show-overflow-tooltip>
                </el-table-column>
            </el-table>
            <div style="margin-top:4%;font-size: 18px;">
              返回参数
            </div>
            <el-input readonly  placeholder="" :rows="8" type="textarea" v-model="dataJsonXiang" size="mini" text style="margin-top: 1%;width: 98%;" ></el-input>
          <template #footer>
            <span class="dialog-footer">
              <el-button type="primary" @click="dialogVisible = false" size="mini">
                确定
              </el-button>
            </span>
          </template>
        </el-dialog>
        <el-dialog @close="clearAdd" v-model="dialogVisibleJi" title="" width="80%" destroy-on-close :key="tableKey">
          <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>
                <div>
                  <el-icon @click="addDir" style="cursor: pointer;color: #409EFF;"><Plus /></el-icon>
                </div>
              </div>
            </template>
              <el-tree :expand-on-click-node="false" ref="treeRef" :filter-node-method="filterNode" :current-node-key="currentNodeKey" class="treeLeft" 
              :data="dataJi" @node-click="handleNodeClickJi" node-key="id" style="margin-left: -10%;margin-top: 0%;width: 120%;background-color: transparent;" default-expand-all :key="valueKet">
                  <template #default="{ node, data }">
                    <span  style="justify-content: space-between;display: flex;width: 30%;align-items: center;margin-left: 1%;">
                      <div class="custom-tree-node" style="align-items: center;line-height: 1.5;">
                        <svg-icon icon-class="model"  v-if="data.nodeType=='SET'"/>
                        <svg-icon icon-class="model2"  v-if="data.nodeType=='TREE'"/>
                        <span style="font-size: 1rem;">{{ node.label }}</span>
                      </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="dcName" 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="!parTree">新增</el-button>
                </div> -->
              <el-table 
                :data="tableDataJi" 
                style="width: 99%;margin-left: 1%;margin-top: 0.5%;"
                :cell-style="{ padding:'5px' }"
                :header-cell-style="{fontSize: '14px',height: heightAll*0.01+'px',}"
                @selection-change="handleSelectionChange"
                :row-style="{ fontSize: '17px',textAlign:'center'}"
                border 
                :height="tableheight">
                <el-table-column type="selection" width="55" />
                <el-table-column type="index" label="序号" width="80"></el-table-column>
                <el-table-column prop="dcName" label="名称:">
                </el-table-column>
                <el-table-column prop="dcType" label="分类"/>
                <el-table-column prop="dcNote" label="说明"/>>
              </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>
          <template #footer>
              <span class="dialog-footer">
                <el-button size="mini" @click="dialogVisibleJi = false">取消</el-button>
                <el-button type="primary" size="mini" @click="saveGuan">确定</el-button>
            </span>
          </template>
        </el-dialog>
        <el-dialog @close="clearFromLev" title="储存文件" v-model="dialogVisibleLevel" width="30%" destroy-on-close :key="tableKey">
          <el-upload
              ref="uploadRef"
              :limit="1"
              accept=".xlsx, .xls"
              :headers="upload.headers"
              :on-change="handleChange"
              :file-list="fileList"
              :action="upload.url + '?file=' + upload.updateSupport"
              :on-progress="handleFileUploadProgress"
              :on-success="handleFileSuccess"
              :auto-upload="false"
              drag
          >
              <el-icon class="el-icon--upload"><upload-filled /></el-icon>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div>上传.xlsx, .xls格式文件</div>
          </el-upload>
          <template #footer>
              <span class="dialog-footer">
                <el-button type="primary" size="mini" @click="saveUpload">确定</el-button>
            </span>
          </template>
        </el-dialog>
        <el-dialog @close="clearFromLev" title="备份文件" v-model="dialogVisibleBei" width="50%" destroy-on-close>
          <div>
            <el-table 
              :data="tableDataBei" 
              style="width: 99%;margin-left: 1%;margin-top: 0.5%;height: 40vh;"
              :cell-style="{ padding:'5px' }"
              :header-cell-style="{fontSize: '14px',height: heightAll*0.01+'px',}"
              :row-style="{ fontSize: '17px',textAlign:'center'}"
              border >
              <el-table-column type="index" label="序号" width="80"></el-table-column>
              <el-table-column prop="createBy" label="创建人">
              </el-table-column>
              <el-table-column prop="createTime" label="创建时间"/>
              <el-table-column prop="originalFilename" label="文件名称" show-overflow-tooltip/>
              <el-table-column prop="address" label="操作" width="100">
                <template #default="scope">
                    <div style="width: 100%;">
                      <el-button type="primary" @click="downloadBei(scope.row,scope.$index)" size="mini" text style="margin-left: 0%;">下载</el-button>
                    </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <template #footer>
              <span class="dialog-footer">
                <el-button type="primary" size="mini" @click="dialogVisibleBei.value = false">确定</el-button>
            </span>
          </template>
        </el-dialog>
    </div>
  </div>
</template>
<script   setup>
import {getCatalog} from "@/api/service/catalog";
import { Plus,Search,Filter,Promotion,Check  } from '@element-plus/icons-vue'
import { reactive } from 'vue'
import { modelTreeSelect,modelSetRela,delGuan,downloadFile,downDir,getBei } from "@/api/service/info";
import { getDataJiFile,dataJiFile } from "@/api/register/regCom.js";
import { ref, onMounted, onUnmounted, nextTick,onBeforeMount } from 'vue';
import { cateTree,dataSetList} from "@/api/register/regCom.js";
import JsonViewer from 'vue-json-viewer'
import 'vue-json-viewer/style.css' 
import  JsonEditorVue from 'json-editor-vue3'
import { getToken } from "@/utils/auth";
import { cloneDeep } from 'lodash'
import { useClipboard } from "@vueuse/core";

const { proxy } = getCurrentInstance();
const tableDataLog = ref([])
const JsonAdd= ref(JSON.stringify({ data: "初始值1" }))
const exampleAdd = ref('')
const dialogVisibleBei = ref(false)
const dialogVisibleLevel = ref(false)
const detail = ref({
  name:'',
  rqtype:'',
  rptype:''
})
const tableDataJi = ref([])
const publish = ref()
const auditRemark = ref()
const show1Lev = ref(true)
const inputNode =ref('')
const fileList = ref([])
const uploadRef = ref(null);
const upload = reactive({
  // 是否显示弹出层（用户导入）
  open: false,
  // 弹出层标题（用户导入）
  title: "",
  // 是否禁用上传
  isUploading: false,
  // 是否更新已经存在的用户数据
  updateSupport: '',
  // 设置上传的请求头部 
  headers: { Authorization: "Bearer " + getToken() },
  // 上传的地址
  url: import.meta.env.VITE_APP_BASE_API + "/common/upload"
});
const url = import.meta.env.VITE_APP_BASE_API
const dialogVisibleJi = ref(false)
const isEdit = ref(true)
const dataReturn = ref('')
const tableDataBei = ref([])
const isSel = ref(true)
const optionsCan = ref([
  {
    label:"string",
    value:'string'
  },
  {
    label:"int",
    value:'int'
  },
  {
    label:"boolean",
    value:'boolean'
  },
  {
    label:"array",
    value:'array'
  },
  {
    label:"object",
    value:'object'
  },
  {
    label:"number",
    value:'number'
  },
  {
    label:"null",
    value:'null'
  },
  {
    label:"any",
    value:'any'
  },
  
])
const currentNodeKey = ref('')
const options =  ref([
    {label:'开发中',
    value:'1'
    },
    {label:'运行中',
    value:'2'
    },
])
const dataJsonXiang = ref([])
const parTree = ref({})
const valueKet = ref(0)
const tableDataCan = ref([
    {
      itemName:'',
      itemCode:'',
      paramType:'',
      paramNote:''
    }
])
const dialogVisibleTest = ref(false)
const optionsMdid = ref([])
const optionsRqtype = ref([
    {label:'GET',
    value:'GET'
    },
    {label:'POST',
    value:'POST'
    },
])
const optionsType=  ref([
    {label:'RESTful',
    value:'RESTful'
    },
    {label:'WebService',
    value:'WebService'
    },
    {label:'HTTP',
    value:'HTTP'
    },
    {label:'WebSocket',
    value:'WebSocket'
    },
])
const parSelJi = ref([])
const data =  ref([])
const select =  ref('1')
const activeName =  ref('first')
const title =  ref('')
const titleTree =  ref('')
const currentPage =  ref(1)
const total =  ref(1)
const tableData = ref([])
const currentNodeKeyJi = ref()
const parTreeJi = ref()
const tableheight = window.innerHeight*0.7
const heightAll = window.innerHeight
const dialogVisible = ref(false)
const dialogVisibleTree = ref(false)
const isAdd = ref(false)
const isAddTa = ref(false)
const treeId = ref('');
const valueSta = ref('1');
const example = ref('');
const tableDataCanAdd = ref([
  {
      itemName:'',
      itemCode:'',
      paramType:'',
      paramNote:''
    }
])
const formZu = ref({
  itemName:'',
  itemTp:'',
  itemEn:'',
  itemTp:'',
  itemDataTp:'',
  itemDefaultVal:'',
  itemUnit:'',
  itemNotes:'',
});
const parId= ref('')
const formJi = ref({
  name:'',
  cateCode:'',
  type:'',
  url:'',
  rqtype:'',
  rptype:'',
  intro:'',
});
const rulesJi = reactive({
  name: [{ required: true, message: '必填', trigger: 'blur' }],
  url: [{ required: true, message: '必填', trigger: 'blur' }],
  cateCode: [{ required: true, message: '必填', trigger: 'blur' }],
});
const formRefJi = ref();
const parMdid = ref('')
const formAdd = ref({
  name:'',
  cateCode:'',
  type:'',
  url:'',
  rqtype:'',
  rptype:'',
  intro:'',
  mdid:''
});
const rulesAdd = reactive({
  mdid: [{ required: true, message: '必填', trigger: 'blur' }],
  name: [{ required: true, message: '必填', trigger: 'blur' }],
  url: [{ required: true, message: '必填', trigger: 'blur' }],
  cateCode: [{ required: true, message: '必填', trigger: 'blur' }],
});
const formRefAdd = ref();
const treeRef = ref(null);
const dataJi = ref([])
const formTree = ref({
  itemName:'',
  catePid:'',
  itemNo:'',
  itemNotes:''
});
const rulesTree = reactive({
  itemNo: [{ required: true, message: '必填', trigger: 'blur' }],
  catePid: [{ required: true, message: '必填', trigger: 'blur' }],
  itemName: [{ required: true, message: '必填', trigger: 'blur' }],
});
const formRefTree = ref();
const formLev = ref({
  itemName:'',
  itemNo:'',
  itemNotes:'',
});
const rulesLev = reactive({
  itemNotes: [{ required: true, message: '必填', trigger: 'blur' }],
  itemNo: [{ required: true, message: '必填', trigger: 'blur' }],
  itemName: [{ required: true, message: '必填', trigger: 'blur' }],
});
const formRefLev = ref();
const cascaderOptions = ref([])
const props1 = ref({
  checkStrictly: true,
})
const detailJson = ref('')
const parOptions = ref([])
watch(inputNode, (val) => {
  treeRef.value?.filter(val); // 调用树的过滤方法
});
const filterNode = (value, data) => {
  if (!value) return true; // 空搜索时显示所有节点
  return data.label.includes(value); // 检查节点标签是否包含关键字
};

const copied = ref(false);
const parShenhe = ref({})

function handleSelectionChange(selection){
  parSelJi.value = selection
}
function saveUpload(){
  proxy.$refs["uploadRef"].submit();
}
async function handleFileSuccess(response, file, fileList){
  var par = {
    dcCode:parRow.value.dcCode,
    filePath:response.fileName,
    originalFilename:response.originalFilename
  }
  await dataJiFile(par).then(res=>{
    if(res.code===200){
      proxy.$modal.msgSuccess("操作");
      dialogVisibleLevel.value = false
      fileList.value = []
    }
  })
};
function filterModelNodes(nodes) {
  if (!Array.isArray(nodes)) return [];
  
  const result = [];
  for (const node of nodes) {
    // 递归处理子节点（如果有）
    const filteredChildren = node.children ? filterModelNodes(node.children) : [];
    
    if (node.nodeType === 'MODEL') {
      // 保留当前节点，并更新其子节点
      node.value = node.id
      result.push({
        ...node,
        children: filteredChildren
      });
    } else {
      // 删除当前节点，将其子节点提升到当前层级
      result.push(...filteredChildren);
    }
  }
  return result;
}
const parRow = ref()
function showBeifen(row){
  dialogVisibleBei.value = true
  var par = {
    dcCode:row.dcCode
  }
  getBei(par).then(res=>{
    tableDataBei.value = res.rows
  })
}
function downloadBei(row){
  getDataJiFile(row.dcCode).then(res1=>{
    var par  ={
      resource:res1.data.filePath
    }
    downDir(par).then(res=>{
      const blob = new Blob([res], { type: 'blob' });
      // 创建临时URL
      const url = URL.createObjectURL(blob);
      // 创建a标签
      const link = document.createElement('a');
      link.href = url;
      // 设置下载的文件名
      link.download = res1.data.originalFilename;
      // 将a标签添加到文档中
      document.body.appendChild(link);
      // 触发点击下载
      link.click();
      // 下载完成后移除a标签
      document.body.removeChild(link);
      // 释放URL对象
      URL.revokeObjectURL(url);
    })
  })
}
function showUpload(row){
  parRow.value = row
  dialogVisibleLevel.value = true
}
function clearAdd(){
  tableDataJi.value = [
  ]
  dataReturn.value = ''
}
function clearFromLev(){
  formLev.value = {
    itemName:'',
    itemNo:'',
    itemNotes:'',
  }
}
function download(row){
  proxy.$modal.confirm('是否确认下载？').then(function () {
    if(row.dcType==='API'){
      var par = {
        dcCode:row.dcCode
      }
      downloadFile(par).then(res=>{
        const blob = new Blob([res], { type: 'text/plain' });
    // 创建临时URL
        const url = URL.createObjectURL(blob);
        // 创建a标签
        const link = document.createElement('a');
        link.href = url;
        // 设置下载的文件名
        link.download = '';
        // 将a标签添加到文档中
        document.body.appendChild(link);
        // 触发点击下载
        link.click();
        // 下载完成后移除a标签
        document.body.removeChild(link);
        // 释放URL对象
        URL.revokeObjectURL(url);
      })
    }
      if(row.dcType==='FILE'){
        getDataJiFile(row.dcCode).then(res1=>{
          var par  ={
            resource:res1.data.filePath
          }
          downDir(par).then(res=>{
            const blob = new Blob([res], { type: 'blob' });
            // 创建临时URL
            const url = URL.createObjectURL(blob);
            // 创建a标签
            const link = document.createElement('a');
            link.href = url;
            // 设置下载的文件名
            link.download = res1.data.originalFilename;
            // 将a标签添加到文档中
            document.body.appendChild(link);
            // 触发点击下载
            link.click();
            // 下载完成后移除a标签
            document.body.removeChild(link);
            // 释放URL对象
            URL.revokeObjectURL(url);
          })
        })
      }
    
  })
}
function delCan(row,index){
  proxy.$modal.confirm('是否确认删除？').then(function () {
    var par = {
      mdid:currentNodeKey.value,
      dcCodes:row.dcCode
    }
    delGuan(par).then(res=>{
      if(res.code===200){
        proxy.$modal.msgSuccess(res.msg);
      }
    })
  }).then(() => {
    tableData.value.splice(index, 1)
  }).catch(() => {});
  
}
async function saveGuan(){
  var parJi = []
  parSelJi.value.forEach(item=>{
    parJi.push(item.dcCode)
  })
  var par = {
    mdid:currentNodeKey.value,
    dcCodes:parJi
  }
  await modelSetRela(par).then(res=>{
    if(res.code===200){
      proxy.$modal.msgSuccess(res.msg);
      dialogVisibleJi.value = false
    }
  })
  var par1 = {
    params:{
      inMdid:currentNodeKey.value
    }
  }
  dataSetList(par1).then(res=>{
    tableData.value = res.rows
  })
}
async function handleNodeClick(node,data,event){
  isSel.value = false
  currentNodeKey.value = data.data.id
  var par = {
    params:{
      inMdid:currentNodeKey.value
    }
  }
  dataSetList(par).then(res=>{
    tableData.value = res.rows
  })
}
async function getTreeLeft(){
  var par = {
    params:{
      level:'2',
      devkind:'APP'
    }
  }
  await modelTreeSelect(par).then(res=>{
    par = res.data
    data.value = res.data
    parMdid.value = res.data[0].children[0].id
  })
  optionsMdid.value = filterModelNodes(par)
  var par1  = {
      data:{id:parMdid.value}
    }
  handleNodeClick(null,par1,null)
}
function handleNodeClickJi(node, data){
    currentNodeKeyJi.value = data.data.id
    parTreeJi.value = data.data
    getTable()
}
function getTable(){
  var par = {
    cateId:currentNodeKeyJi.value,
    params:{
      notInMdid:currentNodeKey.value
    }
  }
  dataSetList(par).then(res=>{
    tableDataJi.value = res.rows
  })
}
function renameTreeProperties(tree) {
  // 深拷贝避免修改原始数据（可选，根据需求）
  const newTree = cloneDeep(tree); // 使用 lodash
  // 或：const newTree = JSON.parse(JSON.stringify(tree)); // 原生方法（不兼容函数等）

  // 递归处理函数
  const processNode = (node) => {
    // 重命名属性
    if ('cateName' in node) {
      node.label = node.cateName;
      delete node.cateName;
    }
    if ('cateCode' in node) {
      node.value = node.cateCode;
      delete node.cateCode;
    }

    // 递归处理子节点
    if (node.children && node.children.length > 0) {
      node.children.forEach(child => processNode(child));
    }
  };

  // 遍历根节点
  newTree.forEach(rootNode => processNode(rootNode));
  return newTree;
}
function fetchData() {
  getCatalog().then((r) => {
    parOptions.value = r.data
    cascaderOptions.value = renameTreeProperties(buildTree(r.data))
    console.log(cascaderOptions.value)
  });
}
function buildTree(flatData, rootValue = '0') {
      const nodeMap = new Map();
      const tree = [];
      flatData.forEach(item => {
        nodeMap.set(item.cateCode, { ...item, children: [] });
      });
      for (const [code, node] of nodeMap) {
        const parentCode = node.catePcode;
        if (parentCode === rootValue || !parentCode) {
          tree.push(node);
          continue;
        }
        const parent = nodeMap.get(parentCode);
        if (parent) {
          parent.children.push(node);
        } else {
          console.warn(`Orphan node detected: ${code}. Parent ${parentCode} not found`);
        }
      }

      return tree;
    }
function getTreeJi(){
  cateTree().then(res=>{
    dataJi.value = res.data
    dataJi.value.forEach(item=>{
      item.value = item.id
      item.id = item.id
    })
    addValueField(dataJi.value)
  })
}
function addValueField(nodes) {
  if (!Array.isArray(nodes)) return;
  
  for (const node of nodes) {
    // 添加value字段，其值等于id
    node.value = node.id;
 
    // 如果存在子节点，递归处理
    if (node.children && Array.isArray(node.children)) {
      addValueField(node.children);
    }
  }
}
const flattenTree = (nodes) => {
  const result = [];
  const stack = [...nodes];
  while (stack.length) {
    const node = stack.pop();
    result.push({ id: node.id, pid: node.pid }); // 只提取 id 和 pid
    if (node.children && node.children.length) {
      stack.push(...node.children);
    }
  }
  return result;
};
onMounted(() => {
  fetchData()
  getTreeLeft()
  getTreeJi()
});

</script>
<style scoped>

.noBorSel :deep(.el-select__wrapper){
  box-shadow: none !important; /* 去除阴影边框 */
  border: 1px solid transparent !important; /* 设置透明边框 */
  background-color: transparent !important; /* 可选：透明背景 */
}
.noBor :deep(.el-input__wrapper) {
  box-shadow: none !important; /* 去除阴影边框 */
  border: 1px solid transparent !important; /* 设置透明边框 */
  background-color: transparent !important; /* 可选：透明背景 */
}
/* 节点垂直间距 */
:deep(.el-tree-node) {
  margin-bottom:5px !important; /* 增大节点间距 */
}
.el-popover.custom-popover {
  min-width: 50px;
  padding: 8px; /* 可选：调整内边距 */
}
</style>
<style>
.dot {
  width: 20px;          /* 控制圆点直径 */
  height: 20px;
  background-color: #333; /* 实心颜色 */
  border-radius: 50%;    /* 关键属性 */
  display: inline-block; /* 确保与其他元素并排 */
}
/* 全局透明样式（不使用 scoped） */
.transparent-select .el-select__wrapper {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.transparent-select .el-select__selection {
  background-color: transparent;
}

/* 处理悬停和聚焦状态 */
.transparent-select .el-select__wrapper:hover,
.transparent-select .el-select__wrapper.is-focused {
  border-color: transparent !important;
  box-shadow: none !important;
}

/* 下拉箭头图标 */
.transparent-select .el-select__caret {
  color: rgba(0, 0, 0, 0.5); /* 半透明图标 */
}
</style>
<style scoped>
:deep(.treeLeft) .el-tree-node__content {
  display: flex !important;
  height: 28px;                  /* 按设计稿调整高度 */
  align-items: center;
  padding-top: 0 !important;
}
:deep(.treeLeft) .el-tree-node__content:hover {
  background-color: #e9e9eb;
}
:deep(.treeLeft) .el-tree-node__content:active {
    background-color: rgka(69,157,255,0.1) !important;
  }
/* 或者更精确的选择器 */
:deep(.el-table th.el-table__cell > .cell .el-checkbox) {
  padding:5px
}
  /* 选中态（Active） */
:deep(.treeLeft) .el-tree-node.is-current > .el-tree-node__content {
    background-color: #c6e2ff !important;
  }

.tab-container {
  height: 100vh; /* 关键：父容器明确高度 */
  display: flex;
  flex-direction: column;
}
.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">

.custom-tree-node {
  display: flex;       /* 启用 Flex 布局 */
  align-items: center; /* 垂直居中 */
  gap: 8px;            /* 图标与文字间距 */
  justify-content: space-between;
}
.el-table .el-table__row td {
  height: 60px !important; /* 行高 */
}
.custom-tree-node {
  display: flex;       /* 启用 Flex 布局 */
  align-items: center; /* 垂直居中 */
  gap: 8px;            /* 图标与文字间距 */
}
</style>