easydo-ops/src/views/basic/project/index.vue

<template>
	<el-container class="is-vertical">
        <sc-page-header @add="table_add"></sc-page-header>

        <scTable ref="xGridTable" :apiObj="$API.system.project" :formConfig="formConfig" :paramsColums="paramsColums" :toolbarConfig="toolbarConfig" :columns="columns">
            <template #tree_select>
                <el-tree-select v-model="formConfig.data.projectFirmName" v-bind="treeSelectProps"></el-tree-select>
            </template>
            
            <template #action="{ row }">
                <el-button type="primary" link @click="table_items(row)">
                    <template #icon><sc-iconify icon="pajamas:list-bulleted"></sc-iconify></template>验收清单
                </el-button>
                <el-button type="primary" link @click="table_edit(row)">
                    <template #icon><sc-iconify icon="ant-design:edit-outlined"></sc-iconify></template>修改
                </el-button>
                <el-button type="primary" link @click="table_del(row)">
                    <template #icon><sc-iconify icon="ant-design:delete-outlined"></sc-iconify></template>删除
                </el-button>
            </template>
        </scTable>
	</el-container>

    <project-detail v-if="dialog.detail" ref="projectRef" :treeSelectProps="treeSelectProps" @success="refreshTable" @closed="dialog.detail = false"></project-detail>
    <accept-item-detail v-if="dialog.items" ref="acceptItemRef" @closed="dialog.items = false"></accept-item-detail>
</template>

<script setup>
import XEUtils from "xe-utils";
import API from "@/api";
import TOOL from "@/utils/tool";
import { mapFormItemInput, mapFormItemSelect } from "@/components/scTable/helper";
import { typeDic, statusDic } from "./main";
import projectDetail from "./detail";
import acceptItemDetail from "./items";

const router = useRouter();

const treeSelectProps = reactive({
    popperClass: "vxe-table-slot--popper",
    data: [],
    filterable: true,
    clearable: true,
    checkStrictly: true,
    placeholder: "请选择所属企业",
    props: { label: "name", value: "name" }
})

const toolbarConfig = reactive({
    enabled: true,
    print: false
});

const formConfig = reactive({
    data: {
        projectStatusNot: "学校"
    },
    items: [
        mapFormItemInput("projectNameLike", "项目名称"),
        mapFormItemInput("projectFirmName", "所属企业", { slots: { default: "tree_select" } })
    ]
});

const paramsColums = reactive([
    { column: "projectStatusNot" },
    { column: "projectNameLike" },
    { column: "projectFirmName" }
])

const columns = reactive([
    { type: "html", field: "fpiId", title: "ID", width: 60, sortable: true },
    { type: "html", field: "projectName", title: "项目名称", minWidth: 160, sortable: true },
    { type: "html", field: "projectFirmName", title: "所属企业", minWidth: 160, sortable: true },
    { type: "html", field: "projectType", title: "项目类型", width: 120, sortable: true },
    { type: "html", field: "projectStatus", title: "项目状态", width: 100, sortable: true },
    { title: "操作", fixed: "right", width: 220, align: "center", slots: { default: "action" } }
])

// 获取组织树
const getSelectTreeData = async () => {
    const res = await API.system.project.dept();
    treeSelectProps.data = XEUtils.toArrayTree(XEUtils.filter(res, item => item.firmNature !== "学校"), { parentKey: "pid", key: "deptId" });
}

// 显示隐藏 筛选表单
const xGridTable = ref();
const refreshTable = (mode = "add", fpiId) => {
    xGridTable.value.reloadColumn(columns);
    xGridTable.value.searchData(mode);
    router.getProject(fpiId);
}

const projectRef = ref();
const acceptItemRef = ref();
const dialog = reactive({
    detail: false,
    items: false
});

const table_add = () => {
    dialog.detail = true;
    nextTick(() => projectRef.value?.open());
}

const table_edit = row => {
    dialog.detail = true;
    nextTick(() => projectRef.value?.setData(row.fpiId));
}

const table_items = row => {
    dialog.items = true;
    nextTick(() => acceptItemRef.value?.setData(row));
}

const table_del = ({ fpiId }) => {
    ElMessageBox.confirm("是否确认删除该项目?", "删除警告", {
        type: "warning",
        confirmButtonText: "确定",
        cancelButtonText: "取消"
    }).then(() => {
        API.system.project.del({ fpiId }).then(() => {
            ElMessage.success("操作成功");
            refreshTable("add", fpiId);
        });
    });
}

getSelectTreeData();
</script>