admin/src/views/project/list/independent/quteElePage.vue

<template>
    <!-- 树节点调整排序 -->
    <hc-dialog
        v-model="isShow"
        title="引用元素表"
        widths="56rem"
        isTable
        @close="dialogClose"
        @save="submitClick"
        :loading="submitLoading"
    >
        <hc-body split :options="{ sizes: [14, 96] }">
            <template #left>
                <hc-card scrollbar>
                    <ElTree
                        :load="treeLoadNode"
                        :props="treeProps"
                        accordion
                        highlight-current
                        lazy
                        @node-click="treeNodeTap"
                    />
                </hc-card>
            </template>
            <hc-card>
                <template #header>
                    <div class="w-400px">
                        <hc-search-input
                            v-model="searchForm.titleName"
                            @search="searchClick"
                        />
                    </div>
                </template>

                <hc-table
                    :column="tableColumn"
                    :datas="tableData"
                    :loading="tableLoading"
                    :index-style="{ width: 60 }"
                    is-check
                    :check-style="{ width: 29 }"
                    @selection-change="tableCheckChange"
                >
                </hc-table>
                <template #action>
                    <hc-pages :pages="searchForm" @change="pageChange" />
                </template>
            </hc-card>
        </hc-body>
    </hc-dialog>
</template>
<script setup>
import { ref, watch, nextTick } from "vue";
import mainApi from "~api/desk/wbs";
import privateApi from "~api/wbs/private";
import { arrToId, getArrValue, isNullES } from "js-fast-way";

//事件
const emit = defineEmits(["close"]);
//双向绑定
// eslint-disable-next-line no-undef
const isShow = defineModel("modelValue", {
    default: false,
});
const props = defineProps({
    projectId: {
        type: [String, Number],
        default: "1",
    },
});
const porjectId = ref(props.projectId);
//监听显示
watch(isShow, (val) => {
    if (val) {
    } else {
        emit("close");
    }
});

//关闭弹窗
const dialogClose = () => {
    isShow.value = false;
    emit("close");
};
//树配置
const treeProps = {
    label: "title",
    children: "children",
    isLeaf: "isLeaf",
};

//获取数据
const tabTypeLazyTree = async (parentId = "12345678910") => {
    //发起请求
    const { data } = await mainApi.tabTypeLazyTreeAll({
        parentId,
        current: 1,
        size: 1000,
    });
    const records = getArrValue(data?.records);
    records.forEach((item) => {
        item.isLeaf = !item.hasChildren;
    });
    return { data: records, total: data?.total };
};
const treeLoadNode = async (node, resolve) => {
    if (node.level === 0) {
        const resData = await tabTypeLazyTree();
        resolve(resData?.data);
    } else {
        const resData = await tabTypeLazyTree(
            node?.data?.primaryKeyId,
            "",
            false,
            {
                current: 1,
                size: 2000,
            }
        );
        resolve(resData?.data);
    }
};

//树节点被点击
const nodeInfo = ref({});
const treeNodeTap = (data, node) => {
    nodeInfo.value = data;
    searchForm.value.parentId = data.id;

    if (node?.level === 1) {
        searchClick();
    } else if (node?.level === 2) {
        searchForm.value.total = 1;
        tableData.value = [data];
    }
};

//搜索表单
const searchForm = ref({ current: 1, size: 30, total: 0 });

//搜索
const searchClick = () => {
    const { parentId } = searchForm.value;
    if (isNullES(parentId)) {
        window?.$message?.warning("请先在左侧点击一个节点");
        return;
    }
    searchForm.value.current = 1;
    getTableData();
};

//分页
const pageChange = ({ current, size }) => {
    const { parentId } = searchForm.value;
    if (isNullES(parentId)) {
        window?.$message?.warning("请先在左侧点击一个节点");
        return;
    }
    searchForm.value.current = current;
    searchForm.value.size = size;
    getTableData();
};

//表格数据
const tableData = ref([]);
const tableColumn = ref([
    { key: "title", name: "名称" },
    { key: "elementTotal", name: "总量", width: 80, align: "center" },
    { key: "tabOwner", name: "所属方", width: 140, align: "center" },
    { key: "fillRate", name: "填报率", width: 80, align: "center" },
    { key: "action", name: "操作", width: 220, align: "center" },
]);

//获取表格数据
const tableLoading = ref(false);
const getTableData = async () => {
    tableData.value = [];
    tableLoading.value = true;
    const { data } = await mainApi.tabTypeLazyTreeAll({
        ...searchForm.value,
        total: null,
    });
    tableLoading.value = false;
    tableData.value = getArrValue(data?.records);
    searchForm.value.total = data?.total || 0;
};

//表格被选择
const tableCheckKeys = ref([]);
const tableCheckChange = (rows) => {
    tableCheckKeys.value = rows;
};
const submitLoading = ref(false);
const submitClick = async () => {
    let ids = arrToId(tableCheckKeys.value);
    submitLoading.value = true;
    const { error, code, data, msg } = await privateApi.projecttabInfo({
        primaryKeyIds: ids,
        projectId: porjectId.value,
    });
    submitLoading.value = false;
    //判断状态
    if (!error && code === 200) {
        window.$message.success(msg);
        dialogClose();
    }
};
</script>