easydo-mes-web/src/views/sales/plan/index.vue

<template>
	<el-container class="is-vertical">
        <sc-page-header @add="table_add()"></sc-page-header>
        
        <scTable ref="xGridTable" :apiObj="$API.sales.plan" :formConfig="formConfig" v-bind="options">
            <template #action="scoped">
                <el-button v-if="XEUtils.includes(['year', 'quarter'], scoped.row.type)" type="primary" link @click="table_add(scoped.row)">
                    <template #icon><sc-iconify icon="ant-design:cloud-upload-outlined"></sc-iconify></template>新增
                </el-button>
                <el-button type="primary" link @click="table_edit(scoped)">
                    <template #icon><sc-iconify icon="ant-design:edit-outlined"></sc-iconify></template>修改
                </el-button>
                <el-button v-if="!scoped.row.children.length" type="primary" link @click="table_del(scoped.row)">
                    <template #icon><sc-iconify icon="ant-design:delete-outlined"></sc-iconify></template>删除
                </el-button>
            </template>
        </scTable>
	</el-container>

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

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

import API from "@/api";
import TOOL from "@/utils/tool";
import { salesDic } from "@/utils/basicDic";
import { mapFormItemInput, mapFormItemSelect, mapFormItemDatePicker } from "@/components/scTable/helper";
import planDetail from "./detail";

const formatStatus = row => {
    if (moment().isBefore(row.beginDate)) return "pending";
    if (moment().isAfter(row.endDate)) return "finished";
    return "executing";
}

const selectConfig = reactive({
    options: salesDic.planType,
    events: {
        change: data => XEUtils.merge(formConfig.data, data)
    }
});

const daterangeConfig = reactive({
    resetValue: () => [moment().startOf("year").format("YYYY-MM-DD"), moment().format("YYYY-MM-DD")],
    props: {
        type: "daterange",
        startPlaceholder: "开始日期",
        endPlaceholder: "结束日期",
        valueFormat: "YYYY-MM-DD"
    }
});

const formConfig = reactive({
    data: {
        beginDate: [moment().startOf("year").format("YYYY-MM-DD"), moment().format("YYYY-MM-DD")]
    },
    items: [
        mapFormItemInput("nameLike", "计划名称"),
        mapFormItemInput("codeLike", "计划编号"),
        mapFormItemSelect("type", "计划类型", selectConfig),
        mapFormItemDatePicker("beginDate", "计划开始日期", daterangeConfig)
    ]
});

const options = reactive({
    paramsColums: [
        { column: "orderBy", defaultValue: "beginDate_asc" },
        { column: "nameLike" },
        { column: "codeLike" },
        { column: "type" },
        { column: "beginDateBegin", field: "beginDate[0]" },
        { column: "beginDateEnd", field: "beginDate[1]" }
    ],
    treeConfig: { transform: true },
    pagerConfig : { enabled: false },
    columns: [
        { type: "seq", fixed: "left", width: 80 },
        { type: "html", field: "name", title: "计划名称", fixed: "left", minWidth: 160, treeNode: true, headerAlign: "center", align: "left", sortable: true },
        { type: "html", field: "code", title: "计划编号", fixed: "left", minWidth: 150, sortable: true },
        { type: "html", field: "type", title: "计划类型", minWidth: 120, sortable: true, formatter: ({ cellValue }) => XEUtils.get(salesDic.planType, cellValue, cellValue) },
        { field: "status", title: "计划状态", minWidth: 120, editRender: { name: "$cell-tag", options: salesDic.planStatus, formatter: row => formatStatus(row) } },
        { type: "html", field: "beginDate", title: "计划开始日期", minWidth: 150, sortable: true },
        { type: "html", field: "endDate", title: "计划结束日期", minWidth: 150, sortable: true },
        { type: "html", field: "saleAmount", title: "计划销售金额", minWidth: 150, sortable: true, formatter: ({ cellValue }) => TOOL.amountFormat(cellValue) || cellValue },
        { type: "html", field: "totalActualPrice", title: "实际销售金额", minWidth: 150, sortable: true, formatter: ({ cellValue }) => TOOL.amountFormat(cellValue) || cellValue },
        { type: "html", field: "createTime", title: "创建日期", minWidth: 120, sortable: true, formatter: ({ cellValue }) => TOOL.dateFormat(cellValue, "YYYY-MM-DD") || cellValue },
        { visible: false, type: "html", field: "remark", title: "概要", minWidth: 300, sortable: true },
        { title: "操作", fixed: "right", width: 220, slots: { default: "action" } }
    ]
});

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

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

const table_add = (parent = {}) => {
    dialog.value = true;
    nextTick(() => planRef.value?.setData(parent));
}

const table_edit = ({ $grid, row }) => {
    const parent = $grid.getTreeParentRow(row);

    dialog.value = true;
    nextTick(() => planRef.value?.setData(parent, row, "edit"));
}

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