admin/src/views/project/list/previewPage.vue

<template>
    <hc-dialog
        v-model="isShow"
        :footer="false"
        :title="info.tableName"
        @close="dialogClose"
        widths="56rem"
        :isTable="true"
    >
        <hc-table :column="tableColumn" :datas="tableData">
            <template #eType="{ row }">
                {{ getDictionaryName(dataTypeList, row.eType, true) }}
            </template>
        </hc-table>
    </hc-dialog>
</template>
<script setup>
import { ref, watch } from "vue";
import treeApi from "~api/wbs/tree";
import { getArrValue } from "js-fast-way";
import { getDictionaryData, getDictionaryName } from "~src/utils/tools";

const props = defineProps({
    info: {
        type: Object,
        default: () => {},
    },
});
//事件
const emit = defineEmits(["close"]);
//双向绑定
// eslint-disable-next-line no-undef
const isShow = defineModel("modelValue", {
    default: false,
});
const tableData = ref([]);
const getTableData = async () => {
    const { data } = await treeApi.selectPrivateFormElements({
        id: info.value?.initTableId,
    });
    tableData.value = getArrValue(data);
};
//监听显示
watch(isShow, (val) => {
    if (val) {
        getTableData();
        getDataTypelist();
    }
});
const info = ref(props.info);
watch(
    () => [props.info],
    ([inf]) => {
        info.value = inf;
    },
    { deep: true }
);

//关闭弹窗
const dialogClose = () => {
    isShow.value = false;
    emit("close");
};

const tableColumn = ref([
    { key: "eName", name: "字段信息" },
    { key: "eType", name: "数据类型" },
    { key: "eLength", name: "长度" },
    { key: "eAllowDeviation", name: "允许偏差值" },
    { key: "eInspectionMethod", name: "检查方法和频率" },
]);

//获取数据类型
const dataTypeList = ref([]);
const getDataTypelist = async () => {
    if (dataTypeList.value.length > 1) {
        return;
    }
    dataTypeList.value = await getDictionaryData("data_type", false);
};
</script>