factory_web/src/views/wf/ticketd.vue

<template>
    <el-collapse v-model="activeNames" style="padding-left: 2px; padding-right: 2px;">
        <el-collapse-item title="基本信息" name="1">
            <el-descriptions :column="1">
                <el-descriptions-item>
                    <span style="color:darkblue;margin-right: 4px;">({{ ticketDetail.sn }})</span>{{ ticketDetail.title
                    }}
                </el-descriptions-item>
                <el-descriptions-item label="当前:">
                    <el-tag type="info" effect="plain">{{ ticketDetail.state_.name }}</el-tag>
                    <el-tag :type="actStateEnum[ticketDetail.act_state]?.type" effect="plain">
                        {{ actStateEnum[ticketDetail.act_state]?.text }}
                    </el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="可处理人:"
                    v-if="ticketDetail.participant_type == 2 || ticketDetail.participant_type == 1">
                    <span v-for="item in ticketDetail.participant_" :key="item.id">{{ item.name }}/</span>
                </el-descriptions-item>
                <el-descriptions-item label="操作:">
                    <el-button v-if="ticketDetail.state_.enable_retreat && isOwn" type="danger" size="small"
                        @click="handleRetreat">撤回</el-button>
                </el-descriptions-item>
            </el-descriptions>
        </el-collapse-item>
        <el-collapse-item title="审批历史" name="2">
            <div style="padding:1px"><el-timeline>
                    <el-timeline-item v-for="item in ticketLog" :key="item.id" :timestamp="item.create_time"
                        :color="getColor(item)">
                        <div>
                            <strong>{{ item.state_?.name || "未知状态" }}</strong>
                        </div>
                        <div>
                            <span v-if="item.intervene_type != 0"><el-tag
                                    :type="interveneTypeEnum[item.intervene_type]?.type" effect="plain">
                                    {{ interveneTypeEnum[item.intervene_type]?.text }}
                                </el-tag></span>
                            <span v-if="item.transition_"
                                :style="{ color: item.transition_.attribute_type === 1 ? '#67C23A' : '#F56C6C' }">
                                {{ item.transition_.name }}
                            </span>
                            <span v-if="item.participant_">-{{ item.participant_.name }}</span>
                        </div>
                        <div v-if="item.suggestion">
                            <el-tooltip v-if="item.suggestion.length > 20" class="box-item" effect="dark"
                                :content="item.suggestion" placement="top">
                                <span>{{ item.suggestion.slice(0, 20) + "..." }}</span>
                            </el-tooltip>
                            <span v-else>
                                {{ item.suggestion }}
                            </span>
                        </div>
                    </el-timeline-item>
                </el-timeline></div>

        </el-collapse-item>
    </el-collapse>
    <el-dialog :title="dialogTitle" v-model="dialogVisible">
        <el-input v-model="suggestion" type="textarea" :rows="2"></el-input>
        <template #footer>
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogConfirm()">确 定</el-button>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref, defineProps, onMounted } from "vue";
import { actStateEnum, interveneTypeEnum } from "@/utils/enum.js";
import API from '@/api';
import TOOL from "@/utils/tool.js";
const props = defineProps({
    ticket_data: { type: Object, default: null },
    ticket_: { type: Object, default: null, required: true },
});
const currentUser = ref(TOOL.data.get("USER_INFO").id)
const isOwn = ref(false);
const activeNames = ref(['1', '2']);
const ticketDetail = ref({
    state_: {}
});
const ticketLog = ref([]);
const ticketId = ref(null);
watch(
    () => props.ticket_,
    async (newVal) => {
        if (newVal && Object.keys(newVal).length > 0) {
            ticketId.value = newVal.id
            getTicketDetail()
            getTicketLog()
        }
    },
    { immediate: false }
)
onMounted(() => {
});
const emit = defineEmits(['success']);
const refreshTicket = async () => {
    isOwn.value = false
    ticketLog.value = []
    activeNames.value = ['1', '2'] // 根据需要恢复初始展开项
    getTicketDetail()
    getTicketLog()
    emit('success')
}

const getTicketDetail = () => {
    API.wf.ticket.ticketItem.req(ticketId.value).then(res => {
        ticketDetail.value = res;
        const isCreator = res.create_by === currentUser.value
        if (isCreator) {
        isOwn.value = true
        }
    });
};


const getTicketLog = () => {
    API.wf.ticket.ticketFlowlogs.req(ticketId.value).then(res => {
        ticketLog.value = res;
    })
}

function getColor(item) {
    if (item.transition_?.attribute_type === 1) return "#67C23A"; // 同意 绿色
    if (item.transition_?.attribute_type === 2) return "#F56C6C"; // 拒绝 红色
    return "#909399"; // 默认灰色
}

const dialogVisible = ref(false);
const dialogTitle = ref("意见/原因");
const suggestion = ref("");
const handleRetreat = () => {
    dialogTitle.value = "撤回原因";
    dialogVisible.value = true;
};
const dialogConfirm = () => {
    API.wf.ticket.ticketRetreat
            .req(ticketId.value, {"suggestion": suggestion.value})
            .then((res) => {
                refreshTicket();
            });
};
</script>