hotline-admin-wex/src/views/business/order/components/Order-detail.vue

<template>
	<el-dialog v-model="state.dialogVisible" class="order-detail-dialog" draggable ref="dialogRef" width="80%" append-to-body destroy-on-close>
		<template #header>
			<el-tabs v-model="state.activeName" @tab-change="handleClick">
				<el-tab-pane :name="item.value" v-for="item in state.tabPaneList" :key="item.value" :label="item.label"></el-tab-pane>
			</el-tabs>
		</template>

		<el-collapse v-model="state.collapseArr" v-if="state.activeName === '0'" class="collapse-box" v-loading="state.loading">
			<el-collapse-item name="1">
				<template #title>
					<p class="pl20">
						<b class="font14">来电人信息</b>
					</p>
				</template>
				<div class="collapse-container pb1">
					<el-form label-width="100px" ref="ruleFormRef">
						<el-row :gutter="10">
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-if="state.ruleForm.transferPhone">
								<el-form-item label="转接来源"> {{ state.ruleForm.transferPhone }} </el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-if="state.ruleForm.fromPhone">
								<el-form-item label="来电号码">
									{{ state.ruleForm.fromPhone }}
									<el-button plain title="录音文件" size="small" type="primary" class="ml8" @click="recordFile(state.ruleForm.callId)"
                  v-if="state.ruleForm.callId" >录音文件</el-button>
									<!-- <el-popover :width="480" trigger="hover">
                        <template #reference>
                          <el-button link type="primary" class="ml5" title="播放录音"><SvgIcon name="ele-Headset" size="16px" /></el-button>
                        </template>
                        <AudioPlayer ref="AudioPlayerRef" :url="state.ruleForm.url" />
                      </el-popover> -->
								</el-form-item>
							</el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-if="state.ruleForm.callAddress">
                <el-form-item label="号码归属地">
                  {{ state.ruleForm.callAddress }}
                </el-form-item>
              </el-col>
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
								<el-form-item label="来电人姓名">
									{{ state.ruleForm.fromName }} <span class="ml5"> {{ state.ruleForm.fromGenderText }}</span>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
								<el-form-item label="来电人性别">
									{{ state.ruleForm.fromGenderText }}
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-if="state.ruleForm.contact">
								<el-form-item label="联系电话">
									<span v-if="showMaskNumber"> {{ state.ruleForm.contactMask }}</span>
									<span v-else>{{ state.ruleForm.contact }}</span>
									<el-button plain title="外呼" size="small" type="primary" class="ml8" @click="callPhone(state.ruleForm.contact)">外呼</el-button>
									<el-button plain title="查看号码" size="small" type="primary" class="ml8" @click="showMaskNumber = !showMaskNumber">{{
										showMaskNumber ? '查看号码' : '隐藏号码'
									}}</el-button>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
								<el-form-item label="来电人身份"> {{ state.ruleForm.identityTypeText }} </el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
								<el-form-item label="受理短信"> {{ state.ruleForm.smsSendedText }} </el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
								<el-form-item label="事发地址"> {{ state.ruleForm.address }} </el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" v-if="state.ruleForm.company">
								<el-form-item label="工作单位"> {{ state.ruleForm.company }} </el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</div>
			</el-collapse-item>
			<el-collapse-item name="2">
				<template #title>
					<p class="pl20">
						<b class="font14">工单信息</b>
					</p>
				</template>
				<div class="collapse-container pb1">
					<el-form label-width="100px" ref="ruleFormRef">
						<el-row :gutter="10">
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
								<el-form-item label="来源方式"> {{ state.ruleForm.sourceChannel }} </el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
								<el-form-item label="受理类型"> {{ state.ruleForm.acceptType }} </el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
								<el-form-item label="工单编码"> {{ state.ruleForm.no }} </el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-if="state.ruleForm.fromProvinceNo">
								<el-form-item label="省工单编码"> {{ state.ruleForm.fromProvinceNo }} </el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
								<el-form-item label="工单类型">
									{{ state.ruleForm.orderTypeText }}
									<!-- 投诉或者建议并且是12315工单才有扩展信息 -->
									<el-button
										link
										type="primary"
										v-if="state.ruleForm.orderType === 1 && (state.ruleForm.acceptType === '30' || state.ruleForm.acceptType === '35')"
										class="ml10"
										@click="showExpandInfo"
										><SvgIcon name="ele-Document" class="mr2" /> 拓展信息</el-button
									>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
								<el-form-item label="是否重复">
									{{ state.ruleForm.duplicateIds && state.ruleForm.duplicateIds.length > 0 ? '是(' + state.ruleForm.duplicateIds.length + '次)' : '否' }}
									<el-button
										plain
										title="查看重复工单"
										size="small"
										type="primary"
										class="ml8"
										@click="showRepeatInfo"
										v-if="state.ruleForm.duplicateIds && state.ruleForm.duplicateIds.length > 0"
										>查看重复工单</el-button
									>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
								<el-form-item label="紧急程度"> {{ state.ruleForm.emergencyLevelText }} </el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
								<el-form-item label="热点分类"> {{ state.ruleForm.hotspotSpliceName }} </el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
								<el-form-item label="受理人">
                  <span>{{ state.ruleForm?.acceptorName}} <span v-if="state.ruleForm?.acceptorStaffNo">[{{state.ruleForm?.acceptorStaffNo}}]</span></span>
                </el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-if="state.ruleForm.incidentTime">
								<el-form-item label="受理时间"> {{ formatDate(state.ruleForm.incidentTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-if="state.ruleForm.pushType">
								<el-form-item label="推送分类"> {{ state.ruleForm.pushType }} </el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
								<el-form-item label="工单标题">
									{{ state.ruleForm.title }} <el-tag class="ml10">{{ state.ruleForm.statusText }}</el-tag>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
								<el-form-item label="受理内容">
									{{ state.ruleForm.content }}
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" v-auth="'file:list'">
								<el-form-item label="附件">
                  <annex-list name="查看附件" readonly :businessId="state.ruleForm.id"  classify="查看附件" />
                </el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</div>
			</el-collapse-item>
			<el-collapse-item name="3">
				<template #title>
					<p class="pl20">
						<b class="font14">结果信息</b>
					</p>
				</template>
				<div class="collapse-container pb1">
					<el-form label-width="100px" ref="ruleFormRef">
						<el-row :gutter="10">
							<el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="6">
								<el-form-item label="交办部门"> 热线中心 </el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
								<el-form-item label="交办时间"> {{ formatDate(state.ruleForm.centerToOrgTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
								<el-form-item label="办理部门"> {{ state.ruleForm.actualHandleOrgName  }}</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
								<el-form-item label="办理时间"> {{ formatDate(state.ruleForm.actualHandleTime , 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
								<el-form-item label="工单办理期限"> {{ state.ruleForm.timeLimit }} </el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
								<el-form-item label="工单期满时间"> {{ formatDate(state.ruleForm.expiredTime , 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
								<el-form-item label="办理结果"> {{ state.ruleForm.actualOpinion  }} </el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</div>
			</el-collapse-item>
			<el-collapse-item name="4" v-if="state.supplements && state.supplements.length">
				<template #title>
					<p class="pl20">
						<b class="font14">补充信息</b>
					</p>
				</template>
				<div class="collapse-container">
					<div v-for="i in state.supplements" :key="i" class="plug-container">
						<el-form label-width="100px" ref="ruleFormRef" class="pt10 pb10">
							<el-row :gutter="10">
								<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
									<el-form-item label="补充部门">
										{{ i.creator.organization }}
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
									<el-form-item label="补充时间"> {{ formatDate(i.creationTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
									<el-form-item label="补充人">
										{{ i.creator.name }} <span v-if="i.creator.staffNo">[{{ i.creator.staffNo }} ]</span></el-form-item
									>
								</el-col>
								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
									<el-form-item label="补充详情">
										{{ i.opinion }}
									</el-form-item>
								</el-col>
							</el-row>
						</el-form>
					</div>
				</div>
			</el-collapse-item>
			<el-collapse-item name="5" v-if="state.workflow.assignOrgs">
				<template #title>
					<p class="pl20">
						<b class="font14">回访信息</b>
					</p>
				</template>
				<div class="collapse-container pb1">
					<el-form label-width="100px" ref="ruleFormRef">
						<el-row :gutter="10">
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
								<el-form-item label="语音评价"> {{ state.workflow.assignOrgs }}</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
								<el-form-item label="话务员评价"> {{ formatDate(state.workflow.assignTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
								<el-form-item label="补充人"> {{ state.workflow.timeLimit }} </el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
								<el-form-item label="被回访部门"> {{ formatDate(state.workflow.expiredTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
								<el-form-item label="办件结果"> {{ formatDate(state.workflow.completeTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
								<el-form-item label="办件态度"> {{ formatDate(state.workflow.completeTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
								<el-form-item label="回访内容"> {{ formatDate(state.workflow.completeTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
								<el-form-item label="被回访部门"> {{ formatDate(state.workflow.completeTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
								<el-form-item label="办件结果"> {{ formatDate(state.workflow.completeTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
								<el-form-item label="办件态度"> {{ formatDate(state.workflow.completeTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
								<el-form-item label="回访内容"> {{ state.workflow.opinion }} </el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</div>
			</el-collapse-item>
			<el-collapse-item name="6" v-if="state.workflow.assignOrgs">
				<template #title>
					<p class="pl20">
						<b class="font14">重办信息</b>
					</p>
				</template>
				<div class="collapse-container pb1">
					<el-form label-width="100px" ref="ruleFormRef">
						<el-row :gutter="10">
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
								<el-form-item label="被重办部门"> {{ state.workflow.assignOrgs }}</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
								<el-form-item label="重办时间"> {{ formatDate(state.workflow.assignTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
								<el-form-item label="重办理由"> {{ state.workflow.timeLimit }} </el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
								<el-form-item label="重办原因"> {{ state.workflow.opinion }} </el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</div>
			</el-collapse-item>
		</el-collapse>

		<template #footer>
			<span class="dialog-footer">
				<el-button type="primary" @click="onRecord" :loading="state.loading" v-auth="'system:workflow:record'">流转记录</el-button>
				<!-- 工单未归档和可以办理展示办理按钮 -->
				<el-button
					type="primary"
					@click="onSubmit('工单办理')"
					:loading="state.loading"
					v-if="state.ruleForm.workflow?.status !== 60 && state.workflow.canHandle"
					v-auth="'business:order:handle'"
					>办 理</el-button
				>
				<el-button type="primary" @click="onSubmit('延期申请','延期附件')" v-auth="'business:order:delay'" :loading="state.loading">延 期</el-button>
				<!-- 流程结束之后不展示补充按钮 -->
				<el-button type="primary" @click="onSupply" :loading="state.loading" v-if="state.workflow.status === 0" v-auth="'workflow:supply'"
					>补 充</el-button
				>
				<el-button type="primary" @click="onUrge" :loading="state.loading" v-auth="'business:order:supervise:apply'">
          催 办</el-button>
        <el-button type="primary" @click="onSupervise" :loading="state.loading" v-auth="'business:order:urge:apply'">督 办</el-button>
				<el-button type="primary" @click="onRevoke" :loading="state.loading" v-auth="'business:order:revoke'">撤 销</el-button>
				<!-- 工单未归档都可以撤回 -->
				<el-button
					type="primary"
					@click="onSubmit('撤回申请')"
					:loading="state.loading"
					v-if="state.ruleForm.workflow?.status === 0"
					v-auth="'business:order:recall'"
					>撤 回</el-button
				>
				<!-- 工单未归档和可以办理展示退回按钮 -->
				<el-button
					type="primary"
					@click="onSubmit('退回申请')"
					:loading="state.loading"
					v-if="state.ruleForm.workflow?.status !== 60 && state.workflow.canHandle"
					v-auth="'business:order:return'"
					>退 回</el-button
				>
			</span>
		</template>
	</el-dialog>
	<!-- 扩展信息 -->
	<order-expand-detail ref="orderExpandDetailRef" />
	<!-- 流转记录 -->
	<audit-record ref="AuditRecordRef">
		<template #header>
			<el-form label-width="90px" ref="ruleFormRef">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
						<el-form-item label="工单编码"> {{ state.ruleForm.no }} </el-form-item>
					</el-col>
					<el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
						<el-form-item label="工单标题"> {{ state.ruleForm.title }} </el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</template>
	</audit-record>
	<!-- 工单补充 -->
	<order-supply ref="orderSupplyRef" @onSupplySuccess="onSupplySuccess" />
	<!-- 工单撤销 -->
	<order-revoke ref="orderRevokeRef" @onRevokeSuccess="onRevokeSuccess" />
	<!-- 工单督办 -->
	<order-supervise ref="orderSuperviseRef" @updateList="onSuperviseSuccess" />
  <!-- 工单催办 -->
  <order-urge ref="orderUrgeRef" @updateList="onSuperviseSuccess" />
	<!-- 流程审批 -->
	<process-audit ref="processAuditRef" @orderProcessSuccess="orderProcessSuccess" />
	<!-- 重复工单 -->
	<order-repeat ref="orderRepeatRef" />
</template>

<script setup lang="ts" name="orderDetail">
import { defineAsyncComponent, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { throttle } from '/@/utils/tools';
import { commonEnum } from '/@/utils/constants';
import { orderDetail } from '/@/api/business/order';
import { formatDate } from '/@/utils/formatTime';
import { ElMessage } from 'element-plus';
import { VoiceInterfaceObject } from '/@/utils/PhoneScript';

// 引入组件
const OrderExpandDetail = defineAsyncComponent(() => import('/@/views/business/order/components/Order-expand-detail.vue')); // 扩展信息
const OrderSupply = defineAsyncComponent(() => import('/@/views/business/order/components/Order-supply.vue')); // 工单补充
const OrderRevoke = defineAsyncComponent(() => import('/@/views/business/order/components/Order-revoke.vue')); // 工单撤销
const OrderSupervise = defineAsyncComponent(() => import('/@/views/business/supervise/components/Order-supervise.vue')); // 工单督办
const OrderUrge = defineAsyncComponent(() => import('/@/views/business/urge/components/Order-urge.vue')); // 工单催办
const OrderRepeat = defineAsyncComponent(() => import('/@/views/business/order/components/Order-repeat.vue')); // 重复工单
const AuditRecord = defineAsyncComponent(() => import('/@/components/AuditRecord/index.vue')); // 审核记录
const AnnexList = defineAsyncComponent(() => import('/@/components/AnnexList/index.vue')); // 附件列表
const ProcessAudit = defineAsyncComponent(() => import('/@/components/ProcessAudit/index.vue')); // 流程审批
// const AudioPlayer = defineAsyncComponent(() => import('/@/components/AudioPlayer/index.vue'));

// 定义子组件向父组件传值/事件
const emit = defineEmits(['updateList', 'handle']);
// 定义变量内容
const state = reactive<any>({
	dialogVisible: false, // 弹窗显示隐藏
	ruleForm: {
		// 表单数据
		url: '',
		fromGenderText: '',
		channelText: '',
		identityTypeText: '',
		licenceNo: '',
		contactMask: '',
		company: '',
		emergencyLevelText: '',
		incidentTime: '',
	} as any,
	activeName: '0', // tab切换
	tabPaneList: [
		// tab列表
		{
			label: '工单详情',
			value: '0',
		},
		{
			label: '延期记录',
			value: '1',
		},
		{
			label: '历史工单',
			value: '2',
		},
		{
			label: '回访记录',
			value: '3',
		},
		{
			label: '甄别记录',
			value: '4',
		},
		{
			label: '市民画像',
			value: '5',
		},
	],
	collapseArr: ['1', '2','3'], //展开列表
	loading: false,
	supplements: [], // 补充内容
	workflow: {}, // 工单流程内容
	orderId: '', //工单id
});
const showMaskNumber = ref<boolean>(true); // 是否展示号码
const ruleFormRef = ref<RefType>(); // 表单ref
const router = useRouter(); // 路由
// 查看工单详情
const getOrderDetail = async (id: string) => {
  state.loading = true;
  try {
    const res: any = await orderDetail(id);
    state.ruleForm = res.result;
    state.workflow = state.ruleForm?.workflow ?? {};
    state.supplements = res.result?.workflow?.supplements ?? [];
    state.loading = false;
    state.dialogVisible = true;
  } catch (error) {
    state.loading = false;
    state.dialogVisible = false;
  }
};
// 查询延期记录
const getDelayList = async (id: string) => {
  state.loading = true;
  try {

    state.dialogVisible = true;
  } catch (error) {
    state.loading = false;
    state.dialogVisible = false;
  }
};
// 查询历史工单
const getHistoryList = async (id: string) => {
  state.loading = true;
  try {

    state.dialogVisible = true;
  } catch (error) {
    state.loading = false;
    state.dialogVisible = false;
  }
};
// 查询回访记录
const getVisitList = async (id: string) => {
  state.loading = true;
  try {

    state.dialogVisible = true;
  } catch (error) {
    state.loading = false;
    state.dialogVisible = false;
  }
};
// 查询甄别记录
const getDiscernList = async (id: string) => {
  state.loading = true;
  try {

    state.dialogVisible = true;
  } catch (error) {
    state.loading = false;
    state.dialogVisible = false;
  }
};
// 查询市民画像
const getPortraitList = async (id: string) => {
  state.loading = true;
  try {

    state.dialogVisible = true;
  } catch (error) {
    state.loading = false;
    state.dialogVisible = false;
  }
};
// 打开弹窗
const openDialog = (val: any) => {
	if (!val || !val.id) {
		ElMessage.error('工单id不能为空');
		return;
	}
  state.orderId = val.id;
  console.log(val,'11')
  if(val.activeName) {
    state.activeName = val.activeName;//传入查询tab
    handleClick(val.activeName)
  }else{
    getOrderDetail(state.orderId);
  }
};
// 切换tab 查询列表
const handleClick = (val: string) => {
  switch (val) {
    case '0': //工单详情
      getOrderDetail(state.orderId);
      break;
    case '1': // 延期记录
      getDelayList(state.orderId)
      break;
    case '2':// 历史工单
      getHistoryList(state.orderId)
      break;
    case '3': // 回访记录
      getVisitList(state.orderId)
      break;
    case '4':// 甄别记录
      getDiscernList(state.orderId)
      break;
    case '5': // 市民画像
      getPortraitList(state.orderId)
      break;
    default:
      getOrderDetail(state.orderId);
      break;
  }
};
// 关闭弹窗
const closeDialog = () => {
  state.dialogVisible = false;
};
// 查看录音文件
const recordFile = (callId:string)=>{
  console.log(callId)
}
// 电话外呼
const callPhone = (number: number | string) => {
  VoiceInterfaceObject.DialOut(number); // 呼叫
};
const orderRepeatRef = ref<RefType>();
// 展示重复工单列表
const showRepeatInfo = () => {
	orderRepeatRef.value.openDialog(state.ruleForm);
};
// 展示扩展表单
const orderExpandDetailRef = ref<RefType>(); // 扩展信息
const showExpandInfo = () => {
  let form: any = {};
  if (state.ruleForm.acceptType === '30') {
    // 举报
    form = state.ruleForm.orderReport;
    form.orderTypeText = '12315市场监管局受理单';
    form.acceptTypeText = '举报';
  } else if (state.ruleForm.acceptType === '35') {
    //投诉
    form = state.ruleForm.orderComplain;
    form.orderTypeText = '12315市场监管局受理单';
    form.acceptTypeText = '投诉';
  }
  orderExpandDetailRef.value.openDialog(form);
};
// 流转记录
const AuditRecordRef = ref<RefType>(); // 流转记录
const onRecord = () => {
	const params = {
		dialogTitle: '流转记录',
		...state.ruleForm,
	};
	AuditRecordRef.value.openDialog(params);
};
// 提交流程
const processAuditRef = ref<RefType>(); // 处理流程
const OrderCirculation = commonEnum.OrderCirculation
const onSubmit = throttle((val: string,annexName:string ='办理附件',commonEnum:any=OrderCirculation) => {
	const params = {
		id: state.ruleForm.workflowId,
		commonEnum,
		processType: val,
    orderDetail: state.ruleForm,
		extra: {
			dialogTitle: val,
			inputPlaceholder: '办理意见',
			annexName,
		},
	};
	processAuditRef.value.openDialog(params);
}, 300);
// 流程提交成功
const orderProcessSuccess = () => {
	closeDialog();
	emit('updateList');
};
// 补充信息
const orderSupplyRef = ref<RefType>(); // 工单补充
const onSupply = () => {
	// 穿入当前流程id
	orderSupplyRef.value.openDialog(state.ruleForm);
};
// 补充意见提交成功
const onSupplySuccess = () => {
  handleClick(state.activeName)
};
// 撤销
const orderRevokeRef = ref<RefType>(); // 工单撤销
const onRevoke = () => {
	orderRevokeRef.value.openDialog(state.ruleForm);
};
// 撤销提交成功
const onRevokeSuccess = () => {
  handleClick(state.activeName)
};
// 督办
const orderSuperviseRef = ref<RefType>(); // 工单督办
const onSupervise = () => {
	orderSuperviseRef.value.openDialog(state.ruleForm);
};
// 催办
const orderUrgeRef = ref<RefType>(); // 工单催办
const onUrge = () => {
  orderUrgeRef.value.openDialog(state.ruleForm);
};
// 督办提交成功
const onSuperviseSuccess = () => {
  handleClick(state.activeName)
};
// 暴露变量
defineExpose({
	openDialog,
	closeDialog,
});
</script>
<style lang="scss" scoped>
.collapse-box {
	:deep(.el-collapse-item__header) {
		background-color: var(--hotline-bg-main-color);
		height: 40px;
		border-radius: var(--el-border-radius-base);
	}
	:deep(.el-collapse-item__content) {
		padding-bottom: 10px !important;
		.el-form-item {
			margin-bottom: 5px;
			.el-form-item__content {
				line-height: 24px;
			}
		}
	}
	.collapse-container {
		padding: 10px;
		.plug-container {
			border: var(--el-border);
			border-radius: var(--el-border-radius-base);
			margin-bottom: 15px;
			&:last-child {
				margin-bottom: 0;
			}
		}
	}
}
:deep(.el-tabs__item) {
	font-size: var(--el-font-size-base);
}
</style>
<style lang="scss">
.order-detail-dialog {
}
</style>