yos_web/src/HDrpManagement/terminalWorkBillModule/modules/detail.vue

<template>
    <div>
        <basicDetails
            ref="details"
            :titleText="mainData.name"
            :editData="mainData"
            :mainAreaData="mainAreaData"
            turnPageId="2026051513132402"
            idname="sc_workorder_templateid"
            ownertable="sc_workorder_template"
            tags=""
            :tabs="['工序明细', '详细信息']"
            :column="4"
            @pageChange="pageChange"
            @onEditSuccess="queryMainData($route.query.id)"
        >
            <div slot="tags"></div>
            <template slot="customOperation">
                <Edit
                    class="inline-16"
                    title_btn="编辑"
                    title_drawer="编辑工单模板"
                    btn_size="mini"
                    :data="mainData"
                    @onSuccess="queryMainData"
                ></Edit>
                <el-button
                    v-if="mainData.isused == 0"
                    type="primary"
                    size="mini"
                    :loading="btnLoading"
                    @click="onToggleUsed(1, '启用')"
                    >{{ $t("启 用") }}</el-button
                >
                <el-button
                    v-if="mainData.isused == 1"
                    type="warning"
                    size="mini"
                    :loading="btnLoading"
                    @click="onToggleUsed(0, '禁用')"
                    >{{ $t("禁 用") }}</el-button
                >
                <el-button type="danger" @click="onDelete" size="mini">{{
                    $t(`删 除`)
                }}</el-button>
            </template>
            <div slot="slot0">
                <taskDetail> </taskDetail>
            </div>
            <div slot="slot1">
                <base-info
                    v-if="detailInfo"
                    :detailInfo="detailInfo"
                ></base-info>
            </div>
        </basicDetails>
    </div>
</template>

<script>
import Edit from "@/Form/terminalWorkBillModule/add";
import BaseInfo from "@/HDrpManagement/projectChange/modules/modules/baseInfo/baseInfo";
import taskDetail from "./taskDetail/index";
export default {
    name: "detail",
    data() {
        return {
            mainData: {},
            mainAreaData: [],
            detailInfo: "",
            processDetailList: [],
            btnLoading: false,
        };
    },
    components: { Edit, BaseInfo, taskDetail },
    provide() {
        return {
            isEdit: () => this.mainData.isused == 1,
        };
    },
    methods: {
        onToggleUsed(value, actionText) {
            this.$confirm(
                this.$t(`确认${actionText}当前工单模板吗`) + "?",
                this.$t("提示"),
                {
                    confirmButtonText: this.$t("确定"),
                    cancelButtonText: this.$t("取消"),
                    type: "warning",
                    beforeClose: async (action, instance, done) => {
                        if (action === "confirm") {
                            instance.confirmButtonLoading = true;
                            const res = await this.$api.requested({
                                id: "2026051513140102",
                                content: {
                                    sc_workorder_templateid:
                                        this.$route.query.id,
                                    isused: value,
                                },
                            });
                            this.tool.showMessage(res, () => {
                                setTimeout(() => {
                                    instance.confirmButtonLoading = false;
                                    done();
                                    this.queryMainData();
                                }, 500);
                            });
                        } else {
                            done();
                        }
                    },
                }
            ).catch(() => {});
        },
        onDelete() {
            this.$confirm(
                this.$t("是否确认删除此工单模板") + "?",
                this.$t("提示"),
                {
                    confirmButtonText: this.$t("确定"),
                    cancelButtonText: this.$t("取消"),
                    type: "warning",
                }
            )
                .then(async () => {
                    const res = await this.$api.requested({
                        id: "2026051513141202",
                        content: {
                            sc_workorder_templateids: [this.$route.query.id],
                        },
                    });
                    if (res.code === 0) {
                        this.$message.error(res.data[0].errmsg);
                    } else {
                        this.$message({
                            message: this.$t("删除成功"),
                            type: "success",
                        });
                        this.$store.dispatch("changeDetailDrawer", false);
                    }
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: this.$t("已取消删除"),
                    });
                });
        },
        async queryMainData() {
            const res = await this.$api.requested({
                id: 2026051513132402,
                content: {
                    sc_workorder_templateid: this.$route.query.id,
                },
            });
            this.mainData = res.data;
            this.changeDataStructure();
            console.log("this.mainData", this.mainData);
        },
        changeDataStructure() {
            let that = this;
            this.mainAreaData = [
                {
                    label: "模板名称",
                    value: this.mainData.name,
                },
                {
                    label: "工单类型",
                    value: this.mainData.type,
                },
                {
                    label: "是否启用",
                    value: this.mainData.isused ? "是" : "否",
                    style: function () {
                        let style = {};
                        switch (that.mainData.isused) {
                            case 1:
                                style = { color: "#ff0000" };
                                break;
                            case 0:
                                style = { color: "#666666" };
                                break;
                            default:
                                break;
                        }
                        return style;
                    },
                },
                {
                    label: "是否后续工单",
                    value: this.mainData.isworkorder ? "是" : "否",
                    style: function () {
                        let style = {};
                        switch (that.mainData.isworkorder) {
                            case 1:
                                style = { color: "#ff0000" };
                                break;
                            case 0:
                                style = { color: "#666666" };
                                break;
                            default:
                                break;
                        }
                        return style;
                    },
                },
                {
                    label: "是否积分计算",
                    value: this.mainData.ispoints ? "是" : "否",
                    style: function () {
                        let style = {};
                        switch (that.mainData.ispoints) {
                            case 1:
                                style = { color: "#ff0000" };
                                break;
                            case 0:
                                style = { color: "#666666" };
                                break;
                            default:
                                break;
                        }
                        return style;
                    },
                },
                {
                    label: "是否工单完结时生成质保卡",
                    value: this.mainData.iswarrantycard ? "是" : "否",
                    style: function () {
                        let style = {};
                        switch (that.mainData.iswarrantycard) {
                            case 1:
                                style = { color: "#ff0000" };
                                break;
                            case 0:
                                style = { color: "#666666" };
                                break;
                            default:
                                break;
                        }
                        return style;
                    },
                },
            ];
            this.detailInfo = {
                baseInfo: [
                    {
                        label: "模板名称",
                        value: this.mainData.name,
                    },
                    {
                        label: "工单类型",
                        value: this.mainData.type,
                    },
                    {
                        label: "是否启用",
                        value: this.mainData.isused ? "是" : "否",
                        style: function () {
                            let style = {};
                            switch (that.mainData.isused) {
                                case 1:
                                    style = { color: "#ff0000" };
                                    break;
                                case 0:
                                    style = { color: "#666666" };
                                    break;
                                default:
                                    break;
                            }
                            return style;
                        },
                    },
                    {
                        label: "是否后续工单",
                        value: this.mainData.isworkorder ? "是" : "否",
                        style: function () {
                            let style = {};
                            switch (that.mainData.isworkorder) {
                                case 1:
                                    style = { color: "#ff0000" };
                                    break;
                                case 0:
                                    style = { color: "#666666" };
                                    break;
                                default:
                                    break;
                            }
                            return style;
                        },
                    },
                    {
                        label: "是否积分计算",
                        value: this.mainData.ispoints ? "是" : "否",
                        style: function () {
                            let style = {};
                            switch (that.mainData.ispoints) {
                                case 1:
                                    style = { color: "#ff0000" };
                                    break;
                                case 0:
                                    style = { color: "#666666" };
                                    break;
                                default:
                                    break;
                            }
                            return style;
                        },
                    },
                ],
                systemInfo: [
                    { label: "创建人", value: this.mainData.createby },
                    { label: "创建时间", value: this.mainData.createdate },
                    { label: "最近编辑人", value: this.mainData.changeby },
                    { label: "最近编辑时间", value: this.mainData.changedate },
                ],
            };
        },
        // 监听切换数据,上一页,下一页
        pageChange(id, rowindex, tabIndex) {
            this.flag = false;
            tabIndex = this.$route.query.tabIndex;
            this.$router.replace({
                path: "/serveWorkTaskDetail",
                query: { id: id, rowindex: rowindex, tabIndex: tabIndex },
            });
            this.queryMainData(id);
        },
    },
    mounted() {
        this.queryMainData(this.$route.query.id);
    },
    created() {},
};
</script>

<style scoped></style>