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

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

        <scTable ref="xGridTable" :apiObj="$API.easyRun.supplier" :formConfig="formConfig" :paramsColums="paramsColums" :toolbarConfig="toolbarConfig" :columns="columns">
            <template #action="{ row }">
                <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>

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

<script setup>
import XEUtils from "xe-utils";
import API from "@/api";
import { mapFormItemInput } from "@/components/scTable/helper";
import supplierDetail from "./detail";

const companyTypeDic = reactive({
    firm: "厂商",
    provider: "服务商"
});

const toolbarConfig = reactive({
    enabled: true,
    import: true,
    export: true
});

const formConfig = reactive({
    data: {},
    items: [
        mapFormItemInput("companyName", "供应商名称")
    ]
});

const paramsColums = reactive([
    { type: "relation", column: "companyName", symbol: "like" }
])

const columns = reactive([
    { type: "seq", width: 60 },
    { type: "html", field: "companyName", title: "供应商名称", minWidth: 150, sortable: true },
    { type: "html", field: "type", title: "类型", minWidth: 100, sortable: true, formatter: ({ cellValue }) => XEUtils.get(companyTypeDic, cellValue, cellValue) },
    { type: "html", field: "creditNo", title: "统一社会信用代码", minWidth: 150, sortable: true },
    { type: "html", field: "contactsName", title: "联系人", minWidth: 120, sortable: true },
    { type: "html", field: "contactsPhone", title: "联系方式", minWidth: 120, sortable: true },
    { title: "操作", width: 140, slots: { default: "action" } }
])

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

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

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

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

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