easydo-mes-web/src/views/system/dept/index.vue

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

        <scTable ref="xGridTable" :apiObj="$API.system.dept" v-bind="options">
            <template #action="{ row }">
                <template v-if="row.pid != 0">
                    <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>
            </template>
        </scTable>
	</el-container>

    <dept-detail v-if="dialog" ref="deptRef" @success="refreshTable" @closed="dialog = false"></dept-detail>
</template>

<script setup>
import XEUtils from "xe-utils";

import API from "@/api";
import { mapFormItemInput } from "@/components/scTable/helper";
import deptDetail from "./detail";

const options = reactive({
    formConfig: {
        data: {},
        items: [mapFormItemInput("nameLike", "部门名称")]
    },
    paramsColums: [
        { column: "orderBy", defaultValue: "deptSort_asc" },
        { column: "nameLike" }
    ],
    toolbarConfig: { enabled: true, export: true },
    treeConfig: { transform: true, parentField: "pid" },
    columns: [
        { type: "seq", width: 60 },
        { type: "html", field: "name", title: "部门名称", minWidth: 200, treeNode: true, sortable: true },
        { type: "html", field: "firmFunctionary", title: "负责人", minWidth: 160, sortable: true },
        { type: "html", field: "firmFunctionaryPhone", title: "负责人电话", minWidth: 160, sortable: true },
        { type: "html", field: "remark", title: "备注", minWidth: 300, sortable: true },
        { title: "操作", fixed: "right", width: 140, align: "center", slots: { default: "action" } }
    ],
    pagerConfig: { enabled: false }
});

// 显示隐藏 筛选表单
const xGridTable = ref();
const refreshTable = (mode = "add") => xGridTable.value.searchData(mode);

const deptRef = ref();
const dialog = ref(false);

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

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

const table_del = ({ id }) => {
    ElMessageBox.confirm("是否确认删除该部门?", "删除警告", {
        type: "warning",
        confirmButtonText: "确定",
        cancelButtonText: "取消"
    }).then(() => {
        API.system.dept.del(({ id })).then(() => {
            ElMessage.success("操作成功");
            refreshTable();
        });
    }).catch(() => {});
}
</script>