easydo-mes-web/src/views/workmanship/line/index.vue

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

        <scTable ref="xGridTable" :apiObj="$API.workmanship.route" :formConfig="formConfig" :paramsColums="paramsColums" :toolbarConfig="toolbarConfig" :columns="columns" v-bind="options">
            <template #code_link="{ row }">
                <vxe-text status="primary" @click="table_detail(row)">{{ row.code }}</vxe-text>
            </template>
            
            <template #version_link="{ items, row }">
                <vxe-text v-if="row.isHaveHistory" status="primary" @click="table_history(row)">{{ row.version }}</vxe-text>
                <span v-else v-html="XEUtils.first(items).version" class="vxe-cell--html"></span>
            </template>
            
            <template #action="{ row }">
                <el-button type="primary" link @click="table_edit(row, 'upgrade')">
                    <template #icon><sc-iconify icon="material-symbols:move-up"></sc-iconify></template>版本升级
                </el-button>
                <el-button v-if="row.isHaveHistory" type="primary" link @click="table_regrade(row)">
                    <template #icon><sc-iconify icon="material-symbols:move-down"></sc-iconify></template>版本回退
                </el-button>
                <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 v-if="row.status == 'enable'" type="primary" link @click="table_change(row)">
                    <template #icon><sc-iconify icon="material-symbols:lock-outline"></sc-iconify></template>停用
                </el-button>
                <el-button v-else type="primary" link @click="table_change(row)">
                    <template #icon><sc-iconify icon="material-symbols:lock-open-outline"></sc-iconify></template>启用
                </el-button>
                <el-button v-if="!row.isHaveHistory" 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>

    <process-detail v-if="dialog.detail" ref="processRef" @success="refreshTable" @closed="dialogClose"></process-detail>
    <process-desc v-if="dialog.desc" ref="processDescRef" @closed="dialog.desc = false"></process-desc>
    <version-history v-if="dialog.history" ref="historyRef" @closed="dialog.history = false"></version-history>
</template>

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

import API from "@/api";
import TOOL from "@/utils/tool";
import { statusDic, workmanshipDic, objectToArray } from "@/utils/basicDic";
import { mapFormItemInput, mapFormItemSelect, mapFormItemDatePicker } from "@/components/scTable/helper";
import processDetail from "./detail";
import processDesc from "./desc";
import versionHistory from "./history";

const props = defineProps({
    hidePageHeader: { type: Boolean, default: false },
    hideHandler: { type: Boolean, default: false },
    paramsColums: { type: Array, default: () => [] },
    options: { type: Object, default: () => ({}) }
});

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

const selectConfig = reactive({
    visible: !props.hideHandler,
    options: objectToArray(statusDic),
    events: {
        change: data => XEUtils.merge(formConfig.data, data)
    }
});

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

const formConfig = reactive({
    data: {},
    items: [
        mapFormItemInput("nameLike", "工艺路线名称"),
        mapFormItemInput("codeLike", "工艺路线编号"),
        mapFormItemSelect("status", "工艺路线状态", selectConfig),
        mapFormItemDatePicker("createTime", "创建日期", daterangeConfig)
    ]
});

const paramsColums = reactive([
    { column: "orderBy", defaultValue: "code_asc" },
    { column: "parentId", defaultValue: "0" },
    { column: "nameLike" },
    { column: "codeLike" },
    { column: "status" },
    { column: "createTimeBegin", field: "createTime[0]" },
    { column: "createTimeEnd", field: "createTime[1]" },
    ...props.paramsColums
]);

const columns = reactive([
    { type: "seq", fixed: "left", width: 60 },
    { 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" } },
    { visible: !props.hideHandler, field: "status", title: "工艺路线状态", minWidth: 120, editRender: { name: "$cell-tag", options: statusDic } },
    { visible: false, type: "html", field: "timeUnit", title: "时间单位", minWidth: 100, sortable: true, formatter: ({ cellValue }) => XEUtils.get(workmanshipDic.timeUnit, cellValue, cellValue) },
    { type: "html", field: "", title: "质检方案", minWidth: 160, sortable: true },
    { type: "html", field: "createTime", title: "创建日期", minWidth: 120, sortable: true, formatter: ({ cellValue }) => TOOL.dateFormat(cellValue, "YYYY-MM-DD") || cellValue },
    { type: "html", field: "version", title: "版本号", minWidth: 120, sortable: true, className: "vxe-table-link-cell", slots: { default: "version_link" } },
    { visible: false, type: "html", field: "remark", title: "概要", minWidth: 300, sortable: true },
    { visible: !props.hideHandler, title: "操作", fixed: "right", width: 320, slots: { default: "action" } }
]);

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

const processRef = ref();
const processDescRef = ref();
const historyRef = ref();
const dialog = reactive({
    detail: false,
    desc: false,
    history: false
});

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

const table_edit = (row, mode = "edit") => {
    dialog.detail = true;
    nextTick(() => processRef.value?.setData(row, mode));
}

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

const table_history = row => {
    dialog.history = true;
    nextTick(() => historyRef.value?.setData(row));
}

const table_del = ({ id }) => {
    ElMessageBox.confirm("是否确认删除该工艺路线?", "删除警告", {
        type: "warning",
        confirmButtonText: "确定",
        cancelButtonText: "取消"
    }).then(() => {
        API.workmanship.route.del({ id }).then(() => {
            ElMessage.success("操作成功");
            refreshTable();
        });
    }).catch(() => {});
}

const table_regrade = ({ id }) => {
    ElMessageBox.confirm("是否确认回退该工艺路线的版本?", "回退警告", {
        type: "warning",
        confirmButtonText: "确定",
        cancelButtonText: "取消"
    }).then(() => {
        API.workmanship.route.regrade({ id }).then(() => {
            ElMessage.success("操作成功");
            refreshTable();
        });
    }).catch(() => {});
}

const table_change = row => {
    const status = row.status == "enable" && "disable" || "enable";
    const msg = row.status == "enable" && "停用" || "启用";

    ElMessageBox.confirm(`是否确认${msg}该工艺路线?`, `${msg}警告`, {
        type: "warning",
        confirmButtonText: "确定",
        cancelButtonText: "取消"
    }).then(() => {
        API.workmanship.route.edit({ id: row.id, status }).then(() => {
            ElMessage.success("操作成功");
            refreshTable();
        });
    }).catch(() => {});
}

const dialogClose = isDel => {
    dialog.detail = false;
    isDel && refreshTable();
}
</script>