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

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

        <scTable ref="xGridTable" v-bind="xGridOptions">
            <template #code_link="{ row }">
                <vxe-text status="primary" @click="table_detail(row)">{{ row.code }}</vxe-text>
            </template>
            <template #process_link="{ row }">
                <vxe-text status="primary" @click="table_detail(row)">工序</vxe-text>
                <div>
                    <vxe-text status="primary" @click="table_detail(row)">分配</vxe-text>
                    <vxe-text status="primary" @click="table_report(row)">汇报</vxe-text><!-- （报工）dialog（工序汇报） -->
                </div>
            </template>

            <template #action>
                <el-button type="primary" link @click="table_edit(row)">
                    <!-- <template #icon><sc-iconify icon="mdi:transfer"></sc-iconify></template>送检 -->
                    <!-- <template #icon><sc-iconify icon="mdi:transfer"></sc-iconify></template>入库申请 -->
                    <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>

    <report-detail v-if="dialog.report" ref="reportRef" @success="refreshTable" @closed="dialog.report = false"></report-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, mapFormItemTenant } from "@/components/scTable/helper";
import reportDetail from "./detail";

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

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

const xGridOptions = reactive({
    // apiObj: API.production.prePlan,
    toolbarConfig: { export: false },
    formConfig: {
        data: {},
        items: [
            mapFormItemInput("nameLike", "派工主题"),
            mapFormItemInput("codeLike", "派工编号"),
            mapFormItemDatePicker("planDate", "计划周期", daterangeConfig)
        ]
    },
    paramsColums: [
        { column: "orderBy", defaultValue: "createTime_desc" },
        { column: "status", defaultValue: "pending" },
        { column: "tenantId" },
        { column: "nameLike" },
        { column: "codeLike" },
        { column: "beginDateBegin", field: "planDate[0]" },
        { column: "endDateEnd", field: "planDate[1]" }
    ],
    columns: [
        { 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") },
        { type: "html", field: "name", title: "单据主题", fixed: "left", minWidth: 150, sortable: true },
        { field: "code", title: "派工产品", fixed: "left", minWidth: 150, sortable: true, className: "vxe-table-link-cell", slots: { default: "code_link" } },
        { field: "process", title: "加工工序", fixed: "left", minWidth: 150, sortable: true, className: "vxe-table-link-cell", slots: { default: "process_link" } },
        { field: "isReport", title: "是否汇报", fixed: "left", minWidth: 150, sortable: true, className: "vxe-table-link-cell", slots: { default: "code_link" } },
        { type: "html", field: "customerName", title: "生产人员", minWidth: 150, sortable: true },
        { type: "html", field: "num", title: "加工数量", minWidth: 150, sortable: true },
        { type: "html", field: "num1", title: "已分配数量", minWidth: 150, sortable: true },
        { type: "html", field: "num2", title: "未分配数量", minWidth: 150, sortable: true },
        { type: "html", field: "num3", title: "合格数量", minWidth: 150, sortable: true },
        { type: "html", field: "num4", title: "返工数量", minWidth: 150, sortable: true },
        { type: "html", field: "num5", title: "报废数量", minWidth: 150, sortable: true },
        { type: "html", field: "num6", title: "剩余数量", minWidth: 150, sortable: true },
        { field: "status", title: "状态", minWidth: 120, editRender: { name: "$cell-tag", options: salesDic.planStatus } },
        { field: "status1", title: "质检状态", minWidth: 120, editRender: { name: "$cell-tag", options: salesDic.planStatus } },
        { type: "html", field: "beginDate", title: "计划开工日期", minWidth: 120, sortable: true },
        { type: "html", field: "endDate", title: "计划完工日期", minWidth: 120, sortable: true },
        { visible: false, type: "html", field: "createTime", title: "创建日期", minWidth: 120, sortable: true, formatter: ({ cellValue }) => TOOL.dateFormat(cellValue, "YYYY-MM-DD") || cellValue },
        { title: "操作", fixed: "right", width: 160, slots: { default: "action" } }
    ],
    options: {
        data: [{}]
    }
});

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

const dispatchRef = ref();
const reportRef = ref();
const dispatchDescRef = ref();
const dialog = reactive({
    detail: false,
    report: false,
    desc: false
});

const table_report = (row) => {
    dialog.report = true;
    nextTick(() => reportRef.value?.setData(row));
}

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

const table_detail = row => {
    dialog.desc = true;
    nextTick(() => dispatchDescRef.value?.setData(row));
}

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