easydo-mes-web/src/views/production/prePlan/index.vue

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

        <scTable ref="xGridTable" :apiObj="$API.production.prePlan" :formConfig="formConfig" :paramsColums="paramsColums" :toolbarConfig="toolbarConfig" :columns="columns">
            <template #action="{ row }">
                <el-button type="primary" link @click="table_bind(row)">
                    <template #icon><sc-iconify icon="material-symbols:arrow-split"></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 { mapFormItemInput, mapFormItemSelect, mapFormItemDatePicker, mapFormItemTenant } from "@/components/scTable/helper";
import planDetail from "./detail";

import store from "@/store";
watch(() => store.state.tenant.tenantId, () => refreshTable());

const customerConfig = reactive({
    api: { key: "basic.customer", query: { orderBy: "createTime_desc", status: "enable" } },
    optionProps: { label: "name", value: "id" },
    events: {
        change: data => XEUtils.merge(formConfig.data, data)
    }
});

const daterangeConfig = reactive({
    resetValue: () => [],
    props: {
        type: "daterange",
        startPlaceholder: "开始日期",
        endPlaceholder: "结束日期",
        format: "YYYY-MM-DD"
    }
});
    
const toolbarConfig = reactive({ export: false });
const formConfig = reactive({
    data: {},
    items: [
        mapFormItemTenant({ events: { change: data => XEUtils.merge(formConfig.data, { ...data, customerId: undefined }) } }),
        mapFormItemInput("codeLike", "单据编号"),
        mapFormItemSelect("customerId", "客户", customerConfig),
        mapFormItemInput("contractNoLike", "合同编号"),
        mapFormItemDatePicker("orderDate", "单据日期", daterangeConfig)
    ]
});

const paramsColums = reactive([
    { column: "orderBy", defaultValue: "orderDate_asc" },
    { column: "status", defaultValue: "pending" },
    { column: "tenantId" },
    { column: "codeLike" },
    { column: "customerId" },
    { column: "contractNoLike" },
    { column: "orderDateBegin", field: "orderDate[0]" },
    { column: "orderDateEnd", field: "orderDate[1]" }
]);

const columns = reactive([
    { type: "seq", fixed: "left", width: 60 },
    { visible: computed(() => store.state.tenant.tenantId === "0"), type: "html", field: "tenantName", title: "所属租户", fixed: "left", minWidth: 200, sortable: true, formatter: ({ cellValue, row }) => cellValue || XEUtils.get(XEUtils.find(store.state.tenant.tenants, item => item.id == row.tenantId), "name") },
    { field: "code", title: "单据编号", fixed: "left", minWidth: 150, sortable: true },
    { type: "html", field: "orderDate", title: "单据日期", fixed: "left", minWidth: 120, sortable: true },
    { type: "html", field: "customerName", title: "客户", minWidth: 150, sortable: true },
    { type: "html", field: "contractNo", title: "合同编号", minWidth: 150, sortable: true },
    { type: "html", field: "actualPrice", title: "成交金额", minWidth: 120, sortable: true, formatter: ({ cellValue }) => TOOL.amountFormat(cellValue) || cellValue },
    { type: "html", field: "planReceiveDate", title: "预计交期", minWidth: 120, sortable: true },
    { title: "操作", fixed: "right", width: 140, slots: { default: "action" } }
]);

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

const planRef = ref();
const dialog = ref(false);
const table_bind = row => {
    dialog.value = true;
    nextTick(() => planRef.value?.setData(row));
}
</script>