feat:传参

张含笑

2025-10-14 e062ceaf5439d54575ab962b337fa522c54c5e4e

feat:传参

 src/subPackages/workDetail/index.vue

@@ -1,238 +1,22 @@
<!-- 工单详情 - 包含待审核、待处理、处理中、已完成 -->
<template>
    <div class="workDetailContainer">
        <div class="detailTop">
            <div class="image-container">
                <u-image class="detailImage" :src="workDetailData.photo_url" mode="cover" width="100%" height="200px"
                    @click="previewImage(workDetailData.photo_url)"></u-image>
                <div class="detailTitle">
                    <div class="titleText">
                        <p>{{workDetailData.event_name}}</p>
                        <p>{{workDetailData.create_time}}</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 步骤条 -->
        <div class="stepContainer">
            <up-steps :current="currentStep" direction="column">
                <up-steps-item v-for="(step, index) in stepTitles" :key="index">
                    <template #title>
                        <div class="horizontal-step">
                            <span class="step-title">{{ step.title }}</span>
                            <div class="step-desc" v-if="stepResponse[index]">
                                <span>{{ stepResponse[index].name || '' }}</span>
                                <span>{{ stepResponse[index].create_time || '' }}</span>
                            </div>
                        </div>
                    </template>
                </up-steps-item>
            </up-steps>
        </div>
        <!-- 工单内容 -->
        <div class="workOrderContent">
            <div class="workOrderTitle">工单内容</div>
            <div class="workOrderContainer">

                <div>工单名称:{{workDetailData.event_name}}</div>
                <div>工单类型:{{workOrderTypeName}}</div>
                <div>关联任务:{{workDetailData.job_name}}</div>
                <div>工单创建人:{{workDetailData.event_num?.slice(0, 2) === 'AI' ? 'AI 小飞':workDetailData.create_user}}</div>
                <div>事件地址:{{workDetailData.address}}</div>

                <div>关联算法:{{workDetailData.ai_types}}</div>
                <div>发起部门:{{workDetailData.dept_name}}</div>
                <div>发起任务时间:{{workDetailData.create_time}}</div>
                <div>工单内容:{{workDetailData.remark}}</div>
            </div>
        </div>
        <!-- 操作按钮 -->
        <div class="actionButton">
            <div class="leftBtn" @click="leftClick">
                上一页
            </div>
            <div class="btngroups" v-if="workDetailData.status===2">
                <up-button type="primary" text="通过" @click="approveTicket"></up-button>
                <up-button type="error" text="不通过" @click="rejectTicket"></up-button>
            </div>
            <div class="btngroups" v-else-if="workDetailData.status===0">
                <up-button type="primary" text="受理" @click="approveAndDispatch"></up-button>
                <up-button type="error" text="不受理" @click="rejectTicket"></up-button>
            </div>
            <div class="btngroups" v-else-if="workDetailData.status===3">
                <up-button type="primary" text="完成工单" @click="completeTicket"></up-button>
                <up-button type="error" text="取消"></up-button>
            </div>
            <div class="btngroups" v-else="workDetailData.status===4">

                <up-button type="error" text="取消"></up-button>
            </div>
            <div class="leftBtn" @click="rightClick">
                下一页
            </div>
        </div>

         <web-view ref="sWebViewRef" :src="`${viewUrl}`" />
    </div>
</template>

<script setup>
    import {
        getStepInfo,
        getList,
        flowEvent,
        getTicketInfo
    } from '/src/api/work/index.js'
    const allAlgorithms = ref([])
    const algorithms = ref([])
    const types = ref([]) //工单类型
    const eventNum = ref('');
    const currentStatus = ref('')
    const stepResponse = ref([]);
    const currentStep = ref(0);
    // 工单内容
    const workDetailData = ref({})
    const stepTitles = ref([{
            title: '待审核',
            status: '2'
        },
        {
            title: '待处理',
            status: '0'
        },

        {
            title: '处理中',
            status: '3'
        }, {
            title: '已完成',
            status: '4'
        }
    ])
    onLoad(async (options) => {
        eventNum.value = options.eventNum;
        await getDataList(eventNum.value);
        await getStepInfoData(eventNum.value);
    import { onLoad } from '@dcloudio/uni-app';
    import { useUserStore } from '@/store/index.js'
    const userStore = useUserStore()
    const userInfo = userStore.userInfo
    const sWebViewRef = ref(null);
    const viewUrl = ref(`http://192.168.1.157:5173/drone-app-web-view/#/webViewWrapper/workDetail?params=${JSON.stringify(userStore?.userInfo)}`);
    onLoad( (options) => {
        const eventNum= options.eventNum;
		
        viewUrl.value =`http://192.168.1.157:5173/drone-app-web-view/#/webViewWrapper/workDetail?params=${JSON.stringify(userStore?.userInfo)}&eventNum=${eventNum}`
    });
    const getDataList = async (val) => {
        const params = {
            current: 1,
            size: 9999,
            source: 1,
            event_name: val
        }
        const res = await getList(params);
        const response = res.data.data.records;
        workDetailData.value = response[0];
        currentStatus.value = workDetailData.value.status;
        handleTypeChange(workDetailData.value.work_order_type_dict_key)
        console.log('详情', response);
    }
    // 步骤条
    const calculateCurrentStep = (status) => {
        const statusToStep = {
            '2': 0, // 待审核 -> 第0步
            '0': 1, // 待处理 -> 第1步
            '3': 2, // 处理中 -> 第2步
            '4': 3 // 已完成 -> 第3步
        }
        return statusToStep[String(status)] || 0
    }

    const getStepInfoData = async (val) => {
        const res = await getStepInfo(val);
        stepResponse.value = res.data.data;
        currentStep.value = calculateCurrentStep(currentStatus.value);

        // 动态匹配步骤描述
        const matchedSteps = {};
        stepResponse.value.forEach(step => {
            // 找到 stepTitles 中对应的步骤索引
            const stepIndex = stepTitles.value.findIndex(item => item.status === String(step.status));
            if (stepIndex !== -1) {
                matchedSteps[stepIndex] = step;
            }
        });

        // 确保 stepResponse 按 stepTitles 顺序填充
        stepResponse.value = stepTitles.value.map((_, index) => matchedSteps[index] || null);
    };
    // 图片预览
    const previewImage = (url) => {
        uni.previewImage({
            urls: [url],
            current: 0
        });
    };
    // 关联算法
    const getTicketInfoData = async () => {
        const response = await getTicketInfo();
        const {
            dept_data,
            event_type,
            ai_type,
            info
        } = response.data.data;
        allAlgorithms.value = info
        types.value = Object.entries(event_type).map(([key, value]) => ({
            label: value,
            value: key,
        }));
        console.log('宣发', ai_type,allAlgorithms.value);
    }
    // 计算工单类型显示名称
    const workOrderTypeName = computed(() => {
      const type = types.value.find(
        item => item.value === workDetailData.value.work_order_type_dict_key
      );
      return type ? type.label : workDetailData.value.work_order_type_dict_key;
    });
    // 关联算法选择
    const handleTypeChange=(typeValue)=>{
         const matchedCategory = allAlgorithms.value.find(category => category.dict_key === typeValue);
         if (
                !matchedCategory ||
                !matchedCategory.algorithms ||
                matchedCategory.algorithms.length === 0
              ) {
                // 无匹配的算法时清空
               algorithms.value = [];
		       
                return;
              }
              algorithms.value = matchedCategory.algorithms.map(algo => ({
                      label: algo.dict_value,
                      value: algo.dict_key,
                      dict_key: algo.dict_key,
                      dict_value: algo.dict_value,
                    }));
        console.log('typeValue,typeValue', algorithms.value)
    }
    // 通过
    const approveTicket = async () => {
        const data = {
            id: workDetailData.value.id,
            status: workDetailData.value.status,
            isPass: 0, // 0 表示通过
            eventNum: workDetailData.value.event_num,
        };

        const file = workDetailData.value.file || null;
        const response = await flowEvent(data, file);
        console.log('通过', response)
    }
    // 不通过
    const rejectTicket = () => {}
    // 受理
    const approveAndDispatch = () => {}
    // 不受理
    // const rejectTicket=()=>{}
    // 完成工单
    // const completeTicket=()=>{}
    // 取消

    onShow(() => {
        getTicketInfoData()
    })
</script>

<style lang="scss" scoped>