123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841 |
- <template>
- <el-button link type="primary" @click="onOrderDetail" title="点击查看工单详情">
- <slot>工单详情</slot>
- </el-button>
- <el-dialog
- v-model="state.dialogVisible"
- class="order-detail-dialog"
- draggable
- ref="dialogRef"
- width="80%"
- append-to-body
- destroy-on-close
- @close="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-show="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">
- <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.recordingFileUrl)"
- v-if="state.ruleForm.recordingFileUrl"
- >录音文件</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.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="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?.incidentPurpose">
- <el-form-item label="事发目的"> {{ state.ruleForm.incidentPurpose }} </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" v-if="state.ruleForm.enterpriseName">
- <el-form-item label="企业名称"> {{ state.ruleForm.enterpriseName }} </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" v-if="state.ruleForm.zhuanBanMingCheng">
- <el-form-item label="专班名称"> {{ state.ruleForm.zhuanBanMingCheng }} </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-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">
- <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 }} <span v-if="state.ruleForm.password"> 【{{ state.ruleForm.password }}】</span>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-if="state.ruleForm.provinceNo">
- <el-form-item label="省工单编码"> {{ state.ruleForm.provinceNo }} </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-if="state.ruleForm?.orderExtension?.orderTypeCode">
- <el-form-item label="工单类型">
- {{ state.ruleForm.orderExtension?.orderType }}
- <el-button link type="primary" 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.startTime">
- <el-form-item label="受理时间"> {{ formatDate(state.ruleForm?.startTime, '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" v-if="state.ruleForm?.workflowId">{{ 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">
- <el-form-item label="附件">
- <annex-list name="附件列表" readonly :businessId="state.ruleForm.id" classify="查看附件" v-model="state.ruleForm.files" />
- </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">
- <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">
- <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>
- <!-- 历史工单 -->
- <div v-show="state.activeName === '1'">
- <history-order :ruleForm="state.ruleForm" :orderId="state.orderId" ref="historyOrderRef" readonly :maxHeight="500" />
- </div>
- <!-- 回访记录 -->
- <div v-show="state.activeName === '2'">
- <!-- <el-table :data="state.ruleForm.orderVisits">
- <el-table-column prop="visitStateText" label="回访状态" show-overflow-tooltip width="100"></el-table-column>
- <el-table-column prop="visitTypeText" label="回访方式" show-overflow-tooltip width="100"></el-table-column>
- <el-table-column prop="creationTime" label="回访任务创建时间" show-overflow-tooltip width="170">
- <template #default="{ row }">
- <span>{{ formatDate(row.creationTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
- </template>
- </el-table-column>
- <el-table-column prop="employeeName" label="回访人" show-overflow-tooltip></el-table-column>
- <el-table-column prop="visitTime" label="回访时间" show-overflow-tooltip width="170">
- <template #default="{ row }">
- <span>{{ formatDate(row.visitTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
- </template>
- </el-table-column>
- <el-table-column label="语音评价" show-overflow-tooltip>
- <template #default="{ row }">
- <span v-for="item in row.orderVisitDetails">
- <span v-if="item.visitTarget === 10">{{ item.voiceEvaluateText }}</span>
- </span>
- </template>
- </el-table-column>
- <el-table-column label="话务员满意度" show-overflow-tooltip>
- <template #default="{ row }">
- <span v-for="item in row.orderVisitDetails">
- <span v-if="item.visitTarget === 10">{{ item.seatEvaluateText }}</span>
- </span>
- </template>
- </el-table-column>
- <el-table-column prop="statusText" label="操作" width="100" fixed="right" align="center">
- <template #default="{ row }">
- <el-button @click="onVisitDetail(row)" link type="primary"> 查看 </el-button>
- </template>
- </el-table-column>
- <template #empty>
- <Empty />
- </template>
- </el-table>-->
- <el-form
- label-width="120px"
- label-position="left"
- v-if="state.ruleForm.orderVisits && state.ruleForm.orderVisits.length"
- class="show-info-form"
- >
- <el-row :gutter="10">
- <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
- <el-form-item label="回访状态">
- {{ state.ruleForm?.orderVisits[0]?.visitStateText }}
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
- <el-form-item label="回访方式">
- {{ state.ruleForm?.orderVisits[0]?.visitTypeText }}
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
- <el-form-item label="当前回访人">
- {{ state.ruleForm?.orderVisits[0]?.employeeName }}
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
- <el-form-item label="回访任务创建时间" label-width="130px">
- {{ formatDate(state.ruleForm?.orderVisits[0]?.creationTime, 'YYYY-mm-dd HH:MM:SS') }}
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
- <el-form-item label="回访时间">
- {{ formatDate(state.ruleForm?.orderVisits[0]?.visitTime, 'YYYY-mm-dd HH:MM:SS') }}
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
- <el-form-item label="回访标签">
- <span v-if="state.ruleForm?.orderVisits[0]?.isPutThrough !== null">{{
- state.ruleForm?.orderVisits[0]?.isPutThrough ? '已接通' : '未接通'
- }}</span>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row v-for="item in state.ruleForm?.orderVisits[0]?.orderVisitDetails" :key="item.id" :gutter="10">
- <!-- 务员评价 -->
- <template v-if="item.visitTarget === 10">
- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
- <el-divider content-position="left">
- <el-text tag="b" size="large"> 话务员回访 </el-text>
- </el-divider>
- </el-col>
- <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
- <el-form-item label="语音评价">
- {{ item.voiceEvaluateText }}
- </el-form-item>
- </el-col>
- <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
- <el-form-item label="话务员评价">
- {{ item.seatEvaluateText }}
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
- <el-form-item label="话务员回访内容">
- {{ item.visitContent }}
- </el-form-item>
- </el-col>
- </template>
- <!-- 部门评价 -->
- <template v-if="item.visitTarget === 20">
- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
- <el-divider content-position="left">
- <el-text tag="b" size="large"> {{ item.visitOrgName }} </el-text>
- </el-divider>
- </el-col>
- <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
- <el-form-item label="部门办件结果">
- {{ item.orgProcessingResults?.value }}
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
- <el-form-item label="不满意原因">
- {{ item.orgNoSatisfiedReason?.map((item) => item.value).join(',') }}
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
- <el-form-item label="部门办件态度">
- {{ item.orgHandledAttitude?.value }}
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
- <el-form-item label="部门回访内容">
- {{ item.visitContent }}
- </el-form-item>
- </el-col>
- </template>
- </el-row>
- </el-form>
- <Empty v-else />
- </div>
- <!-- 市民画像 -->
- <div v-show="state.activeName === '3'" class="flex-center-center">
- <div style="max-width: 800px">
- <citizen-portrait :orderInfo="state.ruleForm" ref="citizenPortraitRef" :editable="false" />
- </div>
- </div>
- <template #footer>
- <span class="dialog-footer">
- <!-- 单会签中+未到汇总节点 -->
- <!-- <el-button type="primary" @click="onCloseCountersignature" :loading="state.loading" v-auth="'business:order:closeCountersignature'"
- >结束会签</el-button
- >-->
- <!-- 有流程信息就可以查询明细 -->
- <el-button type="primary" @click="onRecord" :loading="state.loading" v-if="state.ruleForm?.workflowId">流程明细</el-button>
- <!-- 有流程信息就可以撤回 -->
- <el-button type="primary" @click="onSpecialHandle" :loading="state.loading" v-if="state.ruleForm?.workflowId" v-auth="'business:order:teti'"
- >撤 回(特提)</el-button
- >
- <!-- 办理中和会签中,可以督办 -->
- <el-button
- type="primary"
- @click="onSupervise"
- :loading="state.loading"
- v-if="[100, 200].includes(state.ruleForm?.status)"
- v-auth="'business:order:supervise:apply'"
- >督 办</el-button
- >
- <!-- 办理中和会签中,可以催办 -->
- <el-button
- type="primary"
- @click="onUrge"
- :loading="state.loading"
- v-if="[100, 200].includes(state.ruleForm?.status)"
- v-auth="'business:order:urge:apply'"
- >
- 催 办</el-button
- >
- <!-- 办理中和会签中,可以延期申请 -->
- <el-button
- type="primary"
- @click="onSubmit('延期申请', '延期附件')"
- :loading="state.loading"
- v-if="[100, 200].includes(state.ruleForm?.status)"
- v-auth="'business:order:delay'"
- >延 期</el-button
- >
- <!-- 办理中和会签中并且应该自己办理 -->
- <el-button
- type="primary"
- @click="onSubmit('工单办理')"
- :loading="state.loading"
- v-if="[100, 200].includes(state.ruleForm?.status) && state.workflow.canHandle"
- v-auth="'business:order:handle'"
- >办 理</el-button
- >
- <!-- 流程结束之后不展示补充按钮 -->
- <!-- <el-button type="primary" @click="onSupply" :loading="state.loading" v-if="[0].includes(state.workflow.status)"
- >补 充</el-button
- >-->
- <!-- <el-button type="primary" @click="onRevoke" :loading="state.loading">撤 销</el-button>-->
- <!-- 工单未归档都可以撤回 -->
- <!-- <el-button
- type="primary"
- @click="onSubmit('工单撤回')"
- :loading="state.loading"
- v-if="[0].includes(state.ruleForm.workflow?.status)"
- >撤 回(特提)</el-button
- >-->
- <!-- 办理中和会签中并且应该自己办理 -->
- <el-button
- type="primary"
- @click="onSubmit('工单退回', '退回附件')"
- :loading="state.loading"
- v-if="[100, 200].includes(state.ruleForm?.status) && 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" />
- <!-- 特提 -->
- <special-handle-order ref="specialHandleOrderRef" @updateList="onSpecialHandleSuccess" />
- <!-- 播放录音 -->
- <play-record ref="playRecordRef" />
- </template>
- <script setup lang="ts" name="orderDetail">
- import { defineAsyncComponent, PropType, reactive, ref } from 'vue';
- import { useRouter } from 'vue-router';
- import { throttle, transformFile } from '@/utils/tools';
- import { orderDetail } from '@/api/business/order';
- import { ElButton, ElMessage, ElMessageBox } from 'element-plus';
- import { ola } from '@/utils/ola_api';
- import { formatDate } from '@/utils/formatTime';
- import Empty from '@/components/Empty/index.vue';
- // 引入组件
- 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/query/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 HistoryOrder = defineAsyncComponent(() => import('@/views/todo/seats/accept/History.vue')); // 历史工单
- const CitizenPortrait = defineAsyncComponent(() => import('@/views/todo/seats/accept/Citizen-portrait.vue')); // 市民坏画像
- const SpecialHandleOrder = defineAsyncComponent(() => import('@/views/business/special/components/Special-apply-order.vue')); // 特提申请
- const PlayRecord = defineAsyncComponent(() => import('@/views/tels/callLog/component/Play-record.vue')); // 播放录音
- const props = defineProps({
- order: {
- type: Object as PropType<any>,
- default: {},
- required: true,
- },
- });
- // 定义子组件向父组件传值/事件
- const emit = defineEmits(['updateList']);
- // 定义变量内容
- const state = reactive<any>({
- dialogVisible: false, // 弹窗显示隐藏
- ruleForm: {
- // 表单数据
- },
- activeName: '0', // tab切换
- tabPaneList: [
- // tab列表
- {
- label: '工单详情',
- value: '0',
- },
- {
- label: '历史工单',
- value: '1',
- },
- {
- label: '回访详情',
- value: '2',
- },
- {
- label: '市民画像',
- value: '3',
- },
- ],
- 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.ruleForm.files = transformFile(state.ruleForm.files);
- 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 historyOrderRef = ref<RefType>(); // 历史工单
- const getHistoryList = async (id: string) => {
- state.loading = true;
- try {
- historyOrderRef.value.searchHistory();
- state.dialogVisible = true;
- state.loading = false;
- } catch (error) {
- state.loading = false;
- state.dialogVisible = false;
- }
- };
- // 查询市民画像
- const citizenPortraitRef = ref<RefType>(); // 市民画像
- const getPortraitList = async (id: string) => {
- state.loading = true;
- try {
- citizenPortraitRef.value?.getCitizen(state.ruleForm);
- state.dialogVisible = true;
- state.loading = false;
- } catch (error) {
- console.log(error, '2');
- state.loading = false;
- state.dialogVisible = false;
- }
- };
- // 打开弹窗
- const openDialog = (val: any) => {
- if (!val || !val.id) {
- ElMessage.error('工单id不能为空');
- return;
- }
- state.orderId = val.id;
- if (val.activeName) {
- state.activeName = val.activeName; //传入查询tab
- handleClick(val.activeName);
- } else {
- getOrderDetail(state.orderId);
- }
- };
- const close = () => {
- state.activeName = '0';
- currentVisitObj.value = null;
- };
- // 切换tab 查询列表
- const handleClick = (val: string) => {
- switch (val) {
- case '0': //工单详情
- getOrderDetail(state.orderId);
- break;
- case '1': // 历史工单
- getHistoryList(state.orderId);
- break;
- case '2': // 回访记录
- break;
- case '3': // 市民画像
- getPortraitList(state.orderId);
- break;
- default:
- getOrderDetail(state.orderId);
- break;
- }
- };
- // 关闭弹窗
- const closeDialog = () => {
- state.dialogVisible = false;
- };
- // 查看录音文件
- const playRecordRef = ref<RefType>();
- const recordFile = (url: string) => {
- playRecordRef.value.openDialog(url);
- };
- // 电话外呼
- const callPhone = (number: number | string) => {
- ola.dial(number);
- };
- const orderRepeatRef = ref<RefType>();
- // 展示重复工单列表
- const showRepeatInfo = () => {
- orderRepeatRef.value.openDialog(state.ruleForm);
- };
- // 展示扩展表单
- const orderExpandDetailRef = ref<RefType>(); // 扩展信息
- const showExpandInfo = () => {
- orderExpandDetailRef.value.openDialog(state.ruleForm.orderExtension);
- };
- // 流转记录
- const AuditRecordRef = ref<RefType>(); // 流转记录
- const onRecord = () => {
- const params = {
- dialogTitle: '流转记录',
- ...state.ruleForm,
- };
- AuditRecordRef.value.openDialog(params);
- };
- // 提交流程
- const processAuditRef = ref<RefType>(); // 处理流程
- const onSubmit = throttle((val: string, annexName: string = '办理附件', classify: string = '办理附件') => {
- const params = {
- id: state.ruleForm.workflowId,
- processType: val,
- orderDetail: state.ruleForm,
- extra: {
- dialogTitle: val,
- inputPlaceholder: '办理意见',
- annexName,
- classify,
- },
- };
- 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);
- emit('updateList');
- };
- // 撤销
- const orderRevokeRef = ref<RefType>(); // 工单撤销
- const onRevoke = () => {
- orderRevokeRef.value.openDialog(state.ruleForm);
- };
- // 撤销提交成功
- const onRevokeSuccess = () => {
- handleClick(state.activeName);
- emit('updateList');
- };
- // 督办
- 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);
- emit('updateList');
- };
- // 查看回访详情
- const currentVisitObj = ref<any>();
- const onVisitDetail = (row: any) => {
- currentVisitObj.value = row;
- };
- // 特提
- const specialHandleOrderRef = ref<RefType>(); // 特提
- const onSpecialHandle = () => {
- specialHandleOrderRef.value.openDialog(state.ruleForm);
- };
- // 特提提交成功
- const onSpecialHandleSuccess = () => {
- handleClick(state.activeName);
- emit('updateList');
- };
- // 结束会签
- const onCloseCountersignature = () => {
- ElMessageBox.confirm(`当前工单正在会签中,是否确认结束会签?`, '提示', {
- confirmButtonText: '结束会签',
- cancelButtonText: '取消',
- type: 'warning',
- draggable: true,
- cancelButtonClass: 'default-button',
- autofocus: false,
- })
- .then(() => {
- handleClick(state.activeName);
- emit('updateList');
- })
- .catch(() => {});
- };
- // 暴露变量
- defineExpose({
- openDialog,
- closeDialog,
- });
- // 工单详情
- const onOrderDetail = () => {
- openDialog(props.order);
- };
- </script>
- <style lang="scss" scoped>
- .order-detail-container {
- display: inline-flex;
- }
- .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>
|