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

<template>
    <hc-drawer
        v-model="isShow"
        to-id="hc-main-box"
        is-close
        @close="drawerClose"
    >
        <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>
                <template #extra>
                    <el-button hc-btn type="primary" @click="editTable"
                        >编辑表单</el-button
                    >
                    <el-button
                        hc-btn
                        type="danger"
                        @click="batchDel"
                        :loading="batchDelLoad"
                        >删除元素表</el-button
                    >
                    <!-- el-button hc-btn type="warning">排序</el-button -->
                </template>
                <hc-table
                    :column="tableColumn"
                    :datas="tableData"
                    :loading="tableLoading"
                    :index-style="{ width: 60 }"
                    is-check
                    :check-style="{ width: 29 }"
                    @selection-change="tableCheckChange"
                >
                    <template #action="{ row }">
                        <el-link type="primary" @click="rowNodeClick(row)"
                            >分配节点</el-link
                        >
                        <el-link type="warning" @click="rowFormulaClick(row)"
                            >公式配置</el-link
                        >
                        <el-link type="danger" @click="rowEditClick(row)"
                            >编辑元素</el-link
                        >
                    </template>
                </hc-table>
                <template #action>
                    <hc-pages :pages="searchForm" @change="pageChange" />
                </template>
            </hc-card>
        </hc-body>

        <!-- 分配节点 -->
        <HcWebTemplate v-model="webTemplateShow" :info="webTemplateInfo" />
        <!-- 编辑元素 -->
        <editElement v-model="editElementShow" :info="editElementInfo" />
        <!-- 编辑元素表单信息 -->
        <editEle
            :ownerTypeList="ownerTypeList"
            :tableTypelist="tableTypelist"
            :tab="editArr"
            v-model="editTableShow"
            :editType="1"
            @close="editTableClose"
        />
    </hc-drawer>
</template>

<script setup>
import { ref, watch } from "vue";
import { HcDelMsg } from "hc-vue3-ui";
import { getArrValue, arrToId, isNullES } from "js-fast-way";
import mainApi from "~api/desk/wbs";
import privateApi from "~api/wbs/private";
import HcWebTemplate from "./element/web-temp.vue";
import editElement from "./element/edit-element.vue";
import editEle from "./edit-ele.vue";
import { getDictionaryData, getDictionaryVal } from "~uti/tools";

//事件
const emit = defineEmits(["close"]);

//双向绑定
const isShow = defineModel("modelValue", {
    default: false,
});

//监听显示
watch(isShow, (val) => {
    if (val) getDataApi();
});

//处理相关数据
const getDataApi = () => {
    getTreeData();
};

//树配置
const treeProps = {
    label: "title",
    children: "children",
    isLeaf: "isLeaf",
};

//获取树接口
const treeData = ref([]);
const getTreeData = async () => {
    const { data } = await mainApi.tabTypeLazyTreeAll({
        parentId: "12345678910",
        current: 1,
        size: 1000,
    });
    treeData.value = getArrValue(data?.records);
};
//获取数据
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 webTemplateShow = ref(false);
const webTemplateInfo = ref({});
const rowNodeClick = (row) => {
    webTemplateInfo.value = row;
    webTemplateShow.value = true;
};

//公式配置
const rowFormulaClick = (row) => {};

//编辑元素
const editElementShow = ref(false);
const editElementInfo = ref({});
const rowEditClick = (row) => {
    editElementInfo.value = row;
    editElementShow.value = true;
};
//编辑元素表单信息
const editTableShow = ref(false);
const editArr = ref([]);
const editTable = async () => {
    if (tableCheckKeys.value.length < 1) {
        window?.$message?.warning("请先选择一个元素");
        return;
    }
    await getOwnerTypelist();
    await getTableTypelist();
    editArr.value = [];
    tableCheckKeys.value.forEach((ele) => {
        editArr.value.push({
            tableType: getDictionaryVal(tableTypelist.value, ele.tabType),
            tableOwner: getDictionaryVal(ownerTypeList.value, ele.tabOwner),
            nodeName: ele.title,
            Type: 10,
            id: ele.id,
            fillRate: ele.fillRate,
        });
    });
    editTableShow.value = true;
};
const ownerTypeList = ref([]);
const getOwnerTypelist = async () => {
    const data = await getDictionaryData("owner_type");
    ownerTypeList.value = getArrValue(data);
};
//获取表单类型
const tableTypelist = ref([]);
const getTableTypelist = async () => {
    const data = await getDictionaryData("table_type");
    tableTypelist.value = getArrValue(data);
};
const editTableClose = () => {
    editTableShow.value = false;
    getTableData();
};
//关闭抽屉
const drawerClose = () => {
    isShow.value = false;
    emit("close");
};
//删除元素表
const batchDelLoad = ref(false);
const batchDel = async () => {
    if (tableCheckKeys.value.length < 1) {
        window?.$message?.warning("请先选择一个元素");
        return;
    }
    HcDelMsg(async (resolve) => {
        //发起请求
        const ids = arrToId(tableCheckKeys.value);
        const { isRes } = await privateApi.delTabInfoAll(ids);
        resolve(); //关闭弹窗
        if (!isRes) return;
        window.$message.success("删除成功");
        getTableData().then();
    });
};
</script>