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="编辑工单模板"
                    :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;
                    },
                },
            ];
            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>