vue-fastapi-admin/vue-fastapi-frontend/src/views/datastd/main/stdMap.vue

<template>
  <el-tabs v-model="activeName" style="margin-top: 8px">
    <el-tab-pane label="图谱" name="1">
      <treeNodeg6 ref="treeGraph" :mockData="mockData" />
    </el-tab-pane>
    <el-tab-pane label="表格" name="2">
      <el-form :model="form" ref="formRef" label-width="120px" >
    <div class="form-container">
  <el-row :gutter="20">
    <!-- 代码归属 -->
<el-col :span="8">
  <span class="info-text" >
    标准系统:{{ getSrcSysName(form.srcSys) }}
  </span>
</el-col>

    <!-- 代码编号 -->
    <el-col :span="8">
      <span class="info-text">标准英文名称: {{ form.dataStdEngName || '暂无标准英文名称' }}</span>
    </el-col>

    <!-- 代码名称 -->
    <el-col :span="8">
      <span class="info-text">标准中文名称: {{ form.dataStdCnName || '暂无标准中文名称' }}</span>
    </el-col>
  </el-row>
</div>



  </el-form>



  <!-- 表格展示 -->
  <el-table
    v-loading="loading"
    :data="tableData"
    @selection-change="handleSelectionChange"
    border
    style="width: 100%"
  >
    <el-table-column type="selection" width="55" align="center" />
<!-- <el-table-column label="源系统" align="center" prop="targetSysName">
  <template #default="scope">
    <span >
      {{
        getSrcSysName(scope.row.targetSysName)
      }}
    </span>
  </template>
</el-table-column>    -->
<el-table-column label="标准编号" prop="dataStdNo" align="center" />
<el-table-column label="标准英文名称" prop="dataStdEngName" align="center" />
<el-table-column label="标准中文名称" prop="dataStdCnName" align="center" />
<el-table-column label="字典编号" prop="dataDictNo" align="center" />
<el-table-column label="字典英文名称" prop="dataDictEngName" align="center" />
<el-table-column label="字典中文名称" prop="dataDictCnName" align="center" />



  </el-table>
    </el-tab-pane>
  </el-tabs>
</template>
<script setup>
import { ref, reactive, onMounted, toRefs } from 'vue';
import { listStdCodemap2,getStdMain,getStdMap} from "@/api/datastd/std"; // 更新为新的接口
import treeNodeg6 from "../stdcode/treeNodeg6.vue";

const { proxy } = getCurrentInstance();
const { std_code_status } = proxy.useDict("std_code_status");
import useUserStore  from '@/store/modules/user'; // 注意路径是否正确

const userStore = useUserStore(); // 正确调用
const dsSysList = userStore.dsSysList; // 访问属性
const props = defineProps({
  codeId: {
    type: Object,
    required: false
  },

});

const getSrcSysName = (id) => {
  const match = dsSysList.find(item => item.id === id);
  return match ? match.name : id;
};

const queryParams = ref({
  cdNo: '',
  onum: props.codeId,
  cdValCnMean: '',
  cdType: '',
  sysName: '',
  sysId: '',
  pageNum: 1,
  pageSize: 100
});

const form = ref({
  id: "",
  cdNo: '',
  cdValCnMean: '',
  cdType: 'company',
  cdValStat: '',
  sysName: '',
  classId: 'code',
  codeMapId: '',
  codeMapName: '',
  codeMapNum: '',
});
const activeName = ref("1"); // 默认打开图谱
const tableData = ref([]);
const selections = ref([]);
const loading = ref(false);
const showSys = ref(false);
const multiple = ref(false);


//初始话判断展示系统及映射下拉选
if (props.codeId) {
  form.value = { ...props.rowData };
  if (form.value.cdType == "sys") {
    showSys.value = true;
  } else {
    showSys.value = false;
  }
}





// 获取数据列表
const getList = async () => {
  loading.value = true;
  console.log(queryParams.value,"queryParams.value")
  const response = await listStdCodemap2(queryParams.value);
  tableData.value = response.rows.map(item => ({ ...item}));
  loading.value = false;
};



const handleCodeClick = (row) => {
  console.log('点击了标准代码名称', row);
};


const handleSelectionChange = (selection) => {
  multiple.value = selection.length > 0;
  selections.value = selection; // 保存选中的行数据
console.log(selections.value,"子页面选中")
};

// 搜索
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
};


defineExpose({
  selections
});
const treeGraph = ref(null);

const mockData = ref({
  id: "g1",
  name: "",
  count: 123456,
  label: "",
  rate: 1.0,
  status: "G",
  variableValue: "数据标准",
  variableUp: true,
  children:[]

});

onMounted(() => {
  nextTick(() => {
    getStdMain(props.codeId).then(response => {
    form.value = response.data;
    mockData.value.variableValue="数据标准"
    mockData.value.name=form.value.dataStdCnName
    mockData.value.label=form.value.dataStdNo
    getStdMap(form.value.onum).then(response => {
    mockData.value.children = response.data.children;
    tableData.value = response.data.tableData;
    if (treeGraph.value) {
      treeGraph.value.refreshGraph();
    }
  });
    getList();
  });


  });
});
</script>

<style scoped>
.app-container {
  padding: 20px;
}



.query-form-container {
  margin-bottom: 20px;
}

.el-table .el-input {
  width: 100%;
}
.form-container {
  margin-bottom: 20px;
  
}
.info-text {
  font-size: 18px; /* 调整字体大小 */
  line-height: 1.6; /* 行高，使文字更易于阅读 */
  color: #333; /* 字体颜色 */
  font-weight: 500; /* 设置字体加粗 */
  display: inline-block;
  width: 100%;
}



</style>