|
|
@@ -0,0 +1,832 @@
|
|
|
+<template>
|
|
|
+ <div class="business-order-container layout-pd">
|
|
|
+ <el-card shadow="never">
|
|
|
+ <div class="flex-center-align mb20">
|
|
|
+ <span class="fast-search-label">快捷查询</span>
|
|
|
+ <el-radio-group v-model="fastSearch" @change="fastSearchChange">
|
|
|
+ <el-radio-button label="all">全部</el-radio-button>
|
|
|
+ <el-radio-button label="city">市工单</el-radio-button>
|
|
|
+ <el-radio-button label="province">省工单</el-radio-button>
|
|
|
+ </el-radio-group>
|
|
|
+ <el-checkbox-group v-model="checkList" class="ml15" @change="changeCheckList">
|
|
|
+ <el-checkbox label="IsSensitiveWord" border>敏感类工单</el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </div>
|
|
|
+ <el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent label-width="100px">
|
|
|
+ <el-row :gutter="0">
|
|
|
+ <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
|
|
|
+ <el-form-item label="工单标题" prop="Keyword">
|
|
|
+ <el-input v-model="state.queryParams.Keyword" placeholder="工单标题" clearable @keyup.enter="handleQuery" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
|
|
|
+ <el-form-item label="工单编码" prop="No">
|
|
|
+ <el-input v-model="state.queryParams.No" placeholder="工单编码" clearable @keyup.enter="handleQuery" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
|
|
|
+ <el-form-item label="生成时间" prop="crTime">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="state.queryParams.crTime"
|
|
|
+ type="datetimerange"
|
|
|
+ unlink-panels
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始时间"
|
|
|
+ end-placeholder="结束时间"
|
|
|
+ :shortcuts="shortcuts"
|
|
|
+ @change="handleQuery"
|
|
|
+ value-format="YYYY-MM-DD[T]HH:mm:ss"
|
|
|
+ :default-time="defaultTimeStartEnd"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <transition name="el-zoom-in-top">
|
|
|
+ <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol && checkList.includes('IsSensitiveWord')">
|
|
|
+ <el-form-item label="敏感词" prop="SensitiveWord">
|
|
|
+ <el-input v-model="state.queryParams.SensitiveWord" placeholder="敏感词" clearable @keyup.enter="handleQuery" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </transition>
|
|
|
+ <transition name="el-zoom-in-top" v-show="!searchCol">
|
|
|
+ <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
|
|
|
+ <el-form-item label="来电人姓名" prop="FromName">
|
|
|
+ <el-input v-model="state.queryParams.FromName" placeholder="来电人姓名" clearable @keyup.enter="handleQuery" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </transition>
|
|
|
+ <transition name="el-zoom-in-top" v-show="!searchCol">
|
|
|
+ <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
|
|
|
+ <el-form-item label="事发地址" prop="AreaCode">
|
|
|
+ <el-cascader
|
|
|
+ :options="state.areaOptions"
|
|
|
+ filterable
|
|
|
+ :show-all-levels="false"
|
|
|
+ :props="{ checkStrictly: true, value: 'id', label: 'areaName', multiple: true }"
|
|
|
+ placeholder="请选择事发地址"
|
|
|
+ clearable
|
|
|
+ class="w100"
|
|
|
+ v-model="state.queryParams.AreaCode"
|
|
|
+ collapse-tags
|
|
|
+ collapse-tags-tooltip
|
|
|
+ :max-collapse-tags="2"
|
|
|
+ @change="changeArea"
|
|
|
+ ref="areaRef"
|
|
|
+ >
|
|
|
+ </el-cascader>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </transition>
|
|
|
+ <transition name="el-zoom-in-top" v-show="!searchCol">
|
|
|
+ <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
|
|
|
+ <el-form-item label="转接来源" prop="TransferPhone">
|
|
|
+ <el-input v-model="state.queryParams.TransferPhone" placeholder="转接来源" clearable @keyup.enter="handleQuery" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </transition>
|
|
|
+ <transition name="el-zoom-in-top">
|
|
|
+ <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol">
|
|
|
+ <el-form-item label="工单状态" prop="Statuses">
|
|
|
+ <el-select v-model="state.queryParams.Statuses" placeholder="请选择工单状态" clearable class="w100" multiple>
|
|
|
+ <el-option v-for="item in state.orderStatusOptions" :value="item.key" :key="item.key" :label="item.value" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </transition>
|
|
|
+ <transition name="el-zoom-in-top">
|
|
|
+ <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol">
|
|
|
+ <el-form-item label="受理类型" prop="AcceptTypes">
|
|
|
+ <el-select
|
|
|
+ v-model="state.queryParams.AcceptTypes"
|
|
|
+ placeholder="请选择受理类型"
|
|
|
+ multiple
|
|
|
+ clearable
|
|
|
+ class="w100"
|
|
|
+ collapse-tags
|
|
|
+ collapse-tags-tooltip
|
|
|
+ :max-collapse-tags="2"
|
|
|
+ >
|
|
|
+ <el-option v-for="item in state.acceptTypeOptions" :value="item.dicDataValue" :key="item.dicDataValue" :label="item.dicDataName" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </transition>
|
|
|
+ <transition name="el-zoom-in-top">
|
|
|
+ <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol">
|
|
|
+ <el-form-item label="来源渠道" prop="Channels">
|
|
|
+ <el-select
|
|
|
+ v-model="state.queryParams.Channels"
|
|
|
+ placeholder="请选择来源渠道"
|
|
|
+ multiple
|
|
|
+ clearable
|
|
|
+ class="w100"
|
|
|
+ collapse-tags
|
|
|
+ collapse-tags-tooltip
|
|
|
+ :max-collapse-tags="2"
|
|
|
+ >
|
|
|
+ <el-option v-for="item in state.channelOptions" :value="item.dicDataValue" :key="item.dicDataValue" :label="item.dicDataName" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </transition>
|
|
|
+ <transition name="el-zoom-in-top">
|
|
|
+ <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol">
|
|
|
+ <el-form-item label="热点分类" prop="HotspotIds">
|
|
|
+ <hot-spot-select
|
|
|
+ v-model="state.queryParams.HotspotIds"
|
|
|
+ class="w100"
|
|
|
+ :hotspotExternal="state.hotspotExternal"
|
|
|
+ show-checkbox
|
|
|
+ ref="hotSpotRef"
|
|
|
+ @confirm="handleQuery"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </transition>
|
|
|
+ <transition name="el-zoom-in-top">
|
|
|
+ <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol">
|
|
|
+ <el-form-item label="接办部门" prop="OrgCodes">
|
|
|
+ <el-cascader
|
|
|
+ :options="state.orgsOptions"
|
|
|
+ filterable
|
|
|
+ :show-all-levels="false"
|
|
|
+ :props="{ checkStrictly: true, value: 'id', label: 'name', emitPath: false, multiple: true }"
|
|
|
+ placeholder="请选择接办部门"
|
|
|
+ clearable
|
|
|
+ class="w100"
|
|
|
+ v-model="state.queryParams.OrgCodes"
|
|
|
+ ref="cascadeRef"
|
|
|
+ collapse-tags
|
|
|
+ collapse-tags-tooltip
|
|
|
+ :max-collapse-tags="2"
|
|
|
+ >
|
|
|
+ </el-cascader>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </transition>
|
|
|
+ <transition name="el-zoom-in-top">
|
|
|
+ <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol">
|
|
|
+ <el-form-item label="受理人" prop="NameOrNo">
|
|
|
+ <el-input v-model="state.queryParams.NameOrNo" placeholder="受理人/坐席工号" clearable @keyup.enter="handleQuery" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </transition>
|
|
|
+ <transition name="el-zoom-in-top">
|
|
|
+ <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol">
|
|
|
+ <el-form-item label="省本地编号" prop="ProvinceNo">
|
|
|
+ <el-input v-model="state.queryParams.ProvinceNo" placeholder="省本地编号" clearable @keyup.enter="handleQuery" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </transition>
|
|
|
+ <transition name="el-zoom-in-top">
|
|
|
+ <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol">
|
|
|
+ <el-form-item label="紧急程度" prop="EmergencyLevels">
|
|
|
+ <el-select v-model="state.queryParams.EmergencyLevels" placeholder="请选择紧急程度" clearable class="w100" multiple>
|
|
|
+ <el-option v-for="item in state.emergencyLevelOptions" :value="item.key" :key="item.key" :label="item.value" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </transition>
|
|
|
+ <transition name="el-zoom-in-top">
|
|
|
+ <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol">
|
|
|
+ <el-form-item label="来电号码" prop="FromPhone">
|
|
|
+ <el-input v-model="state.queryParams.FromPhone" placeholder="来电号码" clearable @keyup.enter="handleQuery" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </transition>
|
|
|
+ <transition name="el-zoom-in-top">
|
|
|
+ <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol">
|
|
|
+ <el-form-item label="联系电话" prop="PhoneNo">
|
|
|
+ <el-input v-model="state.queryParams.PhoneNo" placeholder="联系电话" clearable @keyup.enter="handleQuery" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </transition>
|
|
|
+ <transition name="el-zoom-in-top">
|
|
|
+ <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol">
|
|
|
+ <el-form-item label="推送分类" prop="PushTypeCode">
|
|
|
+ <el-select v-model="state.queryParams.PushTypeCode" placeholder="请选择推送分类" clearable class="w100" @change="handleQuery">
|
|
|
+ <el-option v-for="item in state.pushTypeOptions" :value="item.dicDataValue" :key="item.dicDataValue" :label="item.dicDataName" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </transition>
|
|
|
+ <transition name="el-zoom-in-top">
|
|
|
+ <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol">
|
|
|
+ <el-form-item label="期满时间" prop="exTime">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="state.queryParams.exTime"
|
|
|
+ type="datetimerange"
|
|
|
+ unlink-panels
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始时间"
|
|
|
+ end-placeholder="结束时间"
|
|
|
+ :shortcuts="shortcuts"
|
|
|
+ @change="handleQuery"
|
|
|
+ value-format="YYYY-MM-DD[T]HH:mm:ss"
|
|
|
+ :default-time="defaultTimeStartEnd"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </transition>
|
|
|
+ <transition name="el-zoom-in-top">
|
|
|
+ <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol">
|
|
|
+ <el-form-item label="接办人" prop="ActualHandlerName">
|
|
|
+ <el-input v-model="state.queryParams.ActualHandlerName" placeholder="接办人" clearable @keyup.enter="handleQuery" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </transition>
|
|
|
+ <transition name="el-zoom-in-top">
|
|
|
+ <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol">
|
|
|
+ <el-form-item label="是否甄别" prop="IsScreen">
|
|
|
+ <el-select v-model="state.queryParams.IsScreen" placeholder="请选择是否甄别" class="w100" clearable @change="handleQuery">
|
|
|
+ <el-option label="是" :value="true" />
|
|
|
+ <el-option label="否" :value="false" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </transition>
|
|
|
+ <transition name="el-zoom-in-top">
|
|
|
+ <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol">
|
|
|
+ <el-form-item label="当前办理节点" prop="CurrentStepCode">
|
|
|
+ <el-select v-model="state.queryParams.CurrentStepCode" placeholder="请选择当前办理节点" clearable class="w100" @change="handleQuery">
|
|
|
+ <el-option v-for="item in state.currentStepOptions" :value="item.key" :key="item.key" :label="item.value" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </transition>
|
|
|
+ <transition name="el-zoom-in-top">
|
|
|
+ <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol">
|
|
|
+ <el-form-item label="办结时间" prop="doneTime">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="state.queryParams.doneTime"
|
|
|
+ type="datetimerange"
|
|
|
+ unlink-panels
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始时间"
|
|
|
+ end-placeholder="结束时间"
|
|
|
+ :shortcuts="shortcuts"
|
|
|
+ @change="handleQuery"
|
|
|
+ value-format="YYYY-MM-DD[T]HH:mm:ss"
|
|
|
+ :default-time="defaultTimeStartEnd"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </transition>
|
|
|
+ <transition name="el-zoom-in-top">
|
|
|
+ <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol">
|
|
|
+ <el-form-item label="是否超期" prop="IsOverTime">
|
|
|
+ <el-select v-model="state.queryParams.IsOverTime" placeholder="请选择是否超期" class="w100" clearable @change="handleQuery">
|
|
|
+ <el-option label="是" :value="true" />
|
|
|
+ <el-option label="否" :value="false" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </transition>
|
|
|
+ <transition name="el-zoom-in-top">
|
|
|
+ <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol">
|
|
|
+ <el-form-item label="来电主体" prop="IdentityType">
|
|
|
+ <el-select v-model="state.queryParams.IdentityType" placeholder="请选择来电主体" clearable class="w100" @change="handleQuery">
|
|
|
+ <el-option v-for="item in state.identityTypeOptions" :value="item.key" :key="item.key" :label="item.value" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </transition>
|
|
|
+ <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
|
|
|
+ <el-form-item label=" ">
|
|
|
+ <div class="flex-end w100">
|
|
|
+ <el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
|
|
|
+ <el-button @click="resetQuery(ruleFormRef)" class="default-button" :loading="state.loading">
|
|
|
+ <SvgIcon name="ele-Refresh" class="mr5" />重置
|
|
|
+ </el-button>
|
|
|
+ <el-button link type="primary" @click="closeSearch" :loading="state.loading">
|
|
|
+ {{ searchCol ? '展开' : '收起' }}
|
|
|
+ <SvgIcon :class="{ 'is-reverse': searchCol }" name="ele-ArrowUp" class="mr5 arrow" size="18px" />
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </el-card>
|
|
|
+ <el-card shadow="never">
|
|
|
+ <ProTable
|
|
|
+ ref="proTableRef"
|
|
|
+ :columns="columns"
|
|
|
+ :data="state.tableData"
|
|
|
+ @updateTable="queryList"
|
|
|
+ :loading="state.loading"
|
|
|
+ :total="state.total"
|
|
|
+ v-model:page-index="state.queryParams.PageIndex"
|
|
|
+ v-model:page-size="state.queryParams.PageSize"
|
|
|
+ :toolButton="['refresh', 'setting', 'exportCurrent', 'exportAll']"
|
|
|
+ @export-current="exportTable($event)"
|
|
|
+ @export-all="exportTable($event, true)"
|
|
|
+ :key="Math.random()"
|
|
|
+ >
|
|
|
+ <template #tableHeader="scope">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ @click="onProvinceReturn"
|
|
|
+ v-auth="'business:order:returnBatch'"
|
|
|
+ :disabled="!scope.isSelected"
|
|
|
+ v-show="fastSearch === 'province'"
|
|
|
+ :loading="state.loading"
|
|
|
+ >省退回申请
|
|
|
+ </el-button>
|
|
|
+ <el-button type="primary" @click="onCreateRepeatEvent" :loading="state.loading">
|
|
|
+ <SvgIcon name="ele-Plus" class="mr5" />创建重复性事件
|
|
|
+ </el-button>
|
|
|
+ <el-button type="primary" @click="onObserve" v-auth="'business:order:observe'" :disabled="!scope.isSelected" :loading="state.loading"
|
|
|
+ >设置观察件
|
|
|
+ </el-button>
|
|
|
+ <el-button type="primary" @click="onEnd" v-auth="'business:order:end'" :disabled="!scope.isSelected" :loading="state.loading"
|
|
|
+ >设置终结件
|
|
|
+ </el-button>
|
|
|
+ <el-button type="primary" @click="onJbExport" :disabled="!scope.isSelected" :loading="state.loading" v-auth="'business:order:jbdExport'"
|
|
|
+ ><SvgIcon name="iconfont icon-daochu" class="mr5" />交办单导出
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ <template #expiredStatusText="{ row }">
|
|
|
+ <span :class="'overdue-status-' + row.expiredStatus" :title="row.expiredStatusText"></span>
|
|
|
+ </template>
|
|
|
+ <template #title="{ row }">
|
|
|
+ <order-detail :order="row" @updateList="queryList" :type="row.canSign ? 'danger' : 'primary'">{{ row.title }}</order-detail>
|
|
|
+ </template>
|
|
|
+ <!-- 表格操作 -->
|
|
|
+ <template #operation="{ row }">
|
|
|
+ <!-- <el-button
|
|
|
+ link
|
|
|
+ type="primary"
|
|
|
+ @click="onReturn(row)"
|
|
|
+ title="省工单退回"
|
|
|
+ v-auth="'business:order:return'"
|
|
|
+ v-if="row.source > 1 && row.status <= 1"
|
|
|
+ >
|
|
|
+ 退回</el-button
|
|
|
+ >-->
|
|
|
+ <!-- <el-button link type="primary" @click="onSign(row)" title="签收工单" v-if="row.canSign" v-auth="'business:order:sign'"> 签收 </el-button>
|
|
|
+ <el-button link type="success" @click="onOrderEdit(row)" title="编辑工单" v-if="row.canEdit" v-auth="'business:order:edit'">
|
|
|
+ 修改
|
|
|
+ </el-button>-->
|
|
|
+ <order-detail :order="row" @updateList="queryList" />
|
|
|
+ </template>
|
|
|
+ </ProTable>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <!-- 编辑重复性事件 -->
|
|
|
+ <repeat-event-edit ref="repeatEventEditRef" @updateList="queryList" />
|
|
|
+ <!-- 工单省退回 -->
|
|
|
+ <order-return ref="orderReturnRef" @updateList="queryList" />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script setup lang="tsx" name="order">
|
|
|
+import { defineAsyncComponent, onMounted, reactive, ref,onActivated, onBeforeUnmount } from 'vue';
|
|
|
+import type { FormInstance } from 'element-plus';
|
|
|
+import { ElMessage, ElMessageBox, ElNotification } from 'element-plus';
|
|
|
+import { defaultDateOne, defaultTimeStartEnd, shortcuts } from "@/utils/constants";
|
|
|
+import { useRoute, useRouter } from 'vue-router';
|
|
|
+import { formatDate } from '@/utils/formatTime';
|
|
|
+import { exportJbOrder, exportOrder, listBaseData, orderList, orderListConstant, provinceReturn } from "@/api/business/order";
|
|
|
+import { addObserve } from '@/api/query/observe';
|
|
|
+import { addEnd } from '@/api/query/end';
|
|
|
+import { treeArea } from '@/api/auxiliary/area';
|
|
|
+import { orderSign } from '@/api/todo/order';
|
|
|
+import { downloadFileByStream, downloadZip } from '@/utils/tools';
|
|
|
+import Other from '@/utils/other';
|
|
|
+import mittBus from "@/utils/mitt";
|
|
|
+
|
|
|
+// 引入组件
|
|
|
+const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情
|
|
|
+const RepeatEventEdit = defineAsyncComponent(() => import('@/views/business/repeatEvent/components/Repeat-event-edit.vue')); // 编辑重复性事件
|
|
|
+const HotSpotSelect = defineAsyncComponent(() => import('@/components/Hotspot/index.vue')); // 选择热点
|
|
|
+const OrderReturn = defineAsyncComponent(() => import('@/views/business/return/components/Apply.vue')); // 工单退回
|
|
|
+
|
|
|
+// 定义变量内容
|
|
|
+const state = reactive<any>({
|
|
|
+ queryParams: {
|
|
|
+ PageIndex: 1, // 当前页
|
|
|
+ PageSize: 10, // 每页条数
|
|
|
+ // 查询条件
|
|
|
+ No: null, // 工单编码
|
|
|
+ ProvinceNo: null, // 省本地编号
|
|
|
+ EmergencyLevels: [], // 紧急程度
|
|
|
+ ActualHandlerName: null, // 接办人
|
|
|
+ IsScreen: null, // 是否甄别
|
|
|
+ CurrentStepCode: null, // 当前办理节点
|
|
|
+ IsOverTime: null, // 是否超期
|
|
|
+ FromName: null, // 来电人姓名
|
|
|
+ AreaCode: [],
|
|
|
+ AreaCodes: [], // 事发地址
|
|
|
+ FromPhone: null, // 来电号码
|
|
|
+ Keyword: null, // 关键字
|
|
|
+ Content: null, // 工单内容
|
|
|
+ AcceptTypes: null, // 受理类型
|
|
|
+ Channels: null, // 渠道
|
|
|
+ HotspotIds: [], // 热点
|
|
|
+ OrgCodes: [], // 机构
|
|
|
+ NameOrNo: null, // 受理坐席
|
|
|
+ // crTime: defaultDateOne, // 生成时间
|
|
|
+ crTime: [], // 生成时间
|
|
|
+ CreationTimeStart: null, // 创建时间 开始
|
|
|
+ CreationTimeEnd: null, // 创建时间 结束
|
|
|
+ TransferPhone: null, // 转派人
|
|
|
+ EmergencyLevel: [], // 紧急程度
|
|
|
+ exTime: [], // 过期时间
|
|
|
+ ExpiredTimeStart: null, //办理期限 开始
|
|
|
+ ExpiredTimeEnd: null, //办理期限 结束
|
|
|
+ PhoneNo: null, // 手机号
|
|
|
+ Statuses: [], // 状态
|
|
|
+ doneTime: [], // 办结时间
|
|
|
+ PushTypeCode: null, //推送类型
|
|
|
+ IsProvinceOrder: null, // 省市工单
|
|
|
+ IsSensitiveWord: null, // 是否敏感词工单
|
|
|
+ SensitiveWord: null, // 敏感词
|
|
|
+ },
|
|
|
+ tableData: [], //表单
|
|
|
+ loading: false, // 加载
|
|
|
+ total: 0, // 总数
|
|
|
+ acceptTypeOptions: [], //受理类型
|
|
|
+ channelOptions: [], // 来源频道
|
|
|
+ emergencyLevelOptions: [], // 紧急程度
|
|
|
+ orderStatusOptions: [], // 工单状态
|
|
|
+ currentStepOptions: [], // 当前办理节点
|
|
|
+ identityTypeOptions: [], // 来电主体
|
|
|
+ orgsOptions: [], // 部门
|
|
|
+ pushTypeOptions: [], //推送分类
|
|
|
+ orgData: [], // 机构数据
|
|
|
+ areaOptions: [], // 省市区数据
|
|
|
+});
|
|
|
+const fastSearch = ref('all'); // tab位置
|
|
|
+const fastSearchChange = (val: string) => {
|
|
|
+ fastSearch.value = val;
|
|
|
+ switch (val) {
|
|
|
+ case 'all':
|
|
|
+ state.queryParams.IsProvinceOrder = null;
|
|
|
+ break;
|
|
|
+ case 'city':
|
|
|
+ state.queryParams.IsProvinceOrder = false;
|
|
|
+ break;
|
|
|
+ case 'province':
|
|
|
+ state.queryParams.IsProvinceOrder = true;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ handleQuery();
|
|
|
+};
|
|
|
+const checkList = ref([]);
|
|
|
+// 多选
|
|
|
+const changeCheckList = () => {
|
|
|
+ if (checkList.value.includes('IsSensitiveWord')) state.queryParams.IsSensitiveWord = true;
|
|
|
+ else state.queryParams.IsSensitiveWord = null;
|
|
|
+ handleQuery();
|
|
|
+};
|
|
|
+const ruleFormRef = ref<RefType>(); // 表单ref
|
|
|
+const searchCol = ref(true); // 展开/收起
|
|
|
+// 展开/收起
|
|
|
+const closeSearch = () => {
|
|
|
+ searchCol.value = !searchCol.value;
|
|
|
+};
|
|
|
+const route = useRoute(); // 路由
|
|
|
+const router = useRouter(); // 路由
|
|
|
+const proTableRef = ref<RefType>(); // 表格ref
|
|
|
+const selectable = (row: any) => {
|
|
|
+ if (state.queryParams.IsProvinceOrder) {
|
|
|
+ return row?.isProvince && row?.source > 1 && row?.status <= 1;
|
|
|
+ } else {
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+};
|
|
|
+// 表格配置项
|
|
|
+const columns = ref<any[]>([
|
|
|
+ { type: 'selection', fixed: 'left', width: 55, selectable: selectable, align: 'center' },
|
|
|
+ { prop: 'expiredStatusText', label: '超期状态', align: 'center', width: 80 },
|
|
|
+ { prop: 'no', label: '工单编码', width: 150 },
|
|
|
+ { prop: 'isProvinceText', label: '省/市工单', width: 100 },
|
|
|
+ { prop: 'actualHandleStepName', label: '办理节点', width: 150 },
|
|
|
+ { prop: 'statusText', label: '工单状态', width: 100 },
|
|
|
+ { prop: 'title', label: '工单标题', width: 300 },
|
|
|
+ {
|
|
|
+ prop: 'startTime',
|
|
|
+ label: '受理时间',
|
|
|
+ width: 170,
|
|
|
+ render: (scope) => {
|
|
|
+ return <span>{formatDate(scope.row.startTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'expiredTime',
|
|
|
+ label: '工单期满时间',
|
|
|
+ width: 170,
|
|
|
+ render: (scope) => {
|
|
|
+ return <span>{formatDate(scope.row.expiredTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'filedTime',
|
|
|
+ label: '办结时间',
|
|
|
+ width: 170,
|
|
|
+ render: (scope) => {
|
|
|
+ return <span>{formatDate(scope.row.filedTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ { prop: 'orgLevelOneName', label: '一级部门', width: 170 },
|
|
|
+ { prop: 'actualHandleOrgName', label: '接办部门', width: 170 },
|
|
|
+ { prop: 'acceptType', label: '受理类型', width: 150 },
|
|
|
+ { prop: 'counterSignTypeText', label: '是否会签', width: 100 },
|
|
|
+ { prop: 'sourceChannel', label: '来源方式', width: 100 },
|
|
|
+ { prop: 'hotspotName', label: '热点分类', width: 200 },
|
|
|
+ {
|
|
|
+ prop: 'sensitiveText',
|
|
|
+ label: '敏感词',
|
|
|
+ width: 200,
|
|
|
+ },
|
|
|
+ { prop: 'acceptorName', label: '受理人', width: 100 },
|
|
|
+ {
|
|
|
+ prop: 'reTransactNum',
|
|
|
+ label: '重办次数',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'content',
|
|
|
+ label: '受理内容',
|
|
|
+ isShow: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'actualOpinion',
|
|
|
+ label: '办理结果',
|
|
|
+ isShow: false,
|
|
|
+ },
|
|
|
+ { prop: 'operation', label: '操作', fixed: 'right', width: 160, align: 'center' },
|
|
|
+]);
|
|
|
+// 选择事发地址
|
|
|
+const areaRef = ref<RefType>();
|
|
|
+const changeArea = () => {
|
|
|
+ const area = areaRef.value?.getCheckedNodes() ?? [];
|
|
|
+ state.queryParams.AreaCodes = area.map((item: any) => item.value);
|
|
|
+};
|
|
|
+// 获取查询条件基础信息
|
|
|
+const getBaseData = async () => {
|
|
|
+ try {
|
|
|
+ const res: any = await listBaseData();
|
|
|
+ const mappings: any = {
|
|
|
+ acceptTypeOptions: 'acceptTypeOptions',
|
|
|
+ channelOptions: 'channelOptions',
|
|
|
+ emergencyLevelOptions: 'emergencyLevelOptions',
|
|
|
+ orgsOptions: 'orgsOptions',
|
|
|
+ pushTypeOptions: 'pushTypeOptions',
|
|
|
+ orderStatusOptions: 'orderStatusOptions',
|
|
|
+ identityTypeOptions: 'identityTypeOptions',
|
|
|
+ currentStepOptions: 'currentStepOptions',
|
|
|
+ };
|
|
|
+ for (const key in mappings) {
|
|
|
+ state[key] = res.result?.[mappings[key]] ?? [];
|
|
|
+ }
|
|
|
+ const area = await treeArea();
|
|
|
+ state.areaOptions = area?.result ?? []; //省市区数据
|
|
|
+ } catch (error) {
|
|
|
+ console.log(error);
|
|
|
+ }
|
|
|
+};
|
|
|
+// 手动查询，将页码设置为1
|
|
|
+const handleQuery = () => {
|
|
|
+ state.queryParams.PageIndex = 1;
|
|
|
+ queryList();
|
|
|
+};
|
|
|
+/** 获取列表 */
|
|
|
+const queryList = () => {
|
|
|
+ let request = Other.deepClone(state.queryParams);
|
|
|
+ request.CreationTimeStart = state.queryParams.crTime === null ? null : state.queryParams.crTime[0]; // 生成时间
|
|
|
+ request.CreationTimeEnd = state.queryParams.crTime === null ? null : state.queryParams.crTime[1];
|
|
|
+ Reflect.deleteProperty(request, 'crTime'); // 删除无用的参数
|
|
|
+ request.ExpiredTimeStart = state.queryParams.exTime === null ? null : state.queryParams.exTime[0]; // 期满时间
|
|
|
+ request.ExpiredTimeEnd = state.queryParams.exTime === null ? null : state.queryParams.exTime[1];
|
|
|
+ Reflect.deleteProperty(request, 'exTime'); // 删除无用的参数
|
|
|
+ request.ActualHandleTimeStart = state.queryParams.doneTime === null ? null : state.queryParams.doneTime[0]; // 办结时间
|
|
|
+ request.ActualHandleTimeEnd = state.queryParams.doneTime === null ? null : state.queryParams.doneTime[1];
|
|
|
+ Reflect.deleteProperty(request, 'doneTime'); // 删除无用的参数
|
|
|
+ Reflect.deleteProperty(request, 'AreaCode'); // 删除无用的参数
|
|
|
+ state.loading = true;
|
|
|
+ orderList(request)
|
|
|
+ .then((response: any) => {
|
|
|
+ state.tableData = response?.result.items ?? [];
|
|
|
+
|
|
|
+ state.total = response?.result.total;
|
|
|
+ state.loading = false;
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ state.loading = false;
|
|
|
+ });
|
|
|
+};
|
|
|
+const hotSpotRef = ref<RefType>();
|
|
|
+/** 重置按钮操作 */
|
|
|
+const resetQuery = (formEl: FormInstance | undefined) => {
|
|
|
+ if (!formEl) return;
|
|
|
+ formEl.resetFields();
|
|
|
+ state.queryParams.IsSensitiveWord = null;
|
|
|
+ state.queryParams.IsProvinceOrder = null;
|
|
|
+ fastSearch.value = 'all';
|
|
|
+ checkList.value = [];
|
|
|
+ state.queryParams.AreaCodes = [];
|
|
|
+ hotSpotRef.value?.reset();
|
|
|
+ queryList();
|
|
|
+};
|
|
|
+// 设置终结件
|
|
|
+const onObserve = () => {
|
|
|
+ const ids = proTableRef.value.selectedList.map((item: any) => {
|
|
|
+ return {
|
|
|
+ orderId: item.id,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ ElMessageBox.confirm(`选择的${proTableRef.value.selectedList.length}个工单设置观察件吗？`, '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning',
|
|
|
+ draggable: true,
|
|
|
+ autofocus: false,
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ addObserve({ orderIds: ids }).then(() => {
|
|
|
+ ElMessage.success('操作成功');
|
|
|
+ queryList();
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
+};
|
|
|
+// 设置终结件
|
|
|
+const onEnd = () => {
|
|
|
+ const ids = proTableRef.value.selectedList.map((item: any) => {
|
|
|
+ return {
|
|
|
+ orderId: item.id,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ ElMessageBox.confirm(`选择的${proTableRef.value.selectedList.length}个工单设置终结件吗？`, '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning',
|
|
|
+ draggable: true,
|
|
|
+ autofocus: false,
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ addEnd({ orderIds: ids }).then(() => {
|
|
|
+ ElMessage.success('操作成功');
|
|
|
+ queryList();
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
+};
|
|
|
+// 省退回申请
|
|
|
+const onProvinceReturn = () => {
|
|
|
+ const ids = proTableRef.value.selectedList.map((item: any) => {
|
|
|
+ return {
|
|
|
+ orderId: item.id,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ ElMessageBox.prompt(`选择的${proTableRef.value.selectedList.length}个工单的退回原因`, '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ draggable: true,
|
|
|
+ autofocus: false,
|
|
|
+ inputPlaceholder: '请填写退回原因，不超过50个字符',
|
|
|
+ inputErrorMessage: '请填写退回原因',
|
|
|
+ inputType: 'textarea',
|
|
|
+ inputValidator: (value) => {
|
|
|
+ if (value) return true;
|
|
|
+ else return '请填写退回原因';
|
|
|
+ },
|
|
|
+ })
|
|
|
+ .then(({ value }) => {
|
|
|
+ provinceReturn({ orderIds: ids, content: value }).then((res: any) => {
|
|
|
+ ElNotification({
|
|
|
+ title: '退回完成',
|
|
|
+ dangerouslyUseHTMLString: true,
|
|
|
+ message: `<div>
|
|
|
+ <div>总退回条数：${res.result.count}条；</>
|
|
|
+ <div>成功条数：${res.result.successCount}条；</div>
|
|
|
+ <div>失败条数：${res.result.errorCount}条；</div>
|
|
|
+</div>`,
|
|
|
+ });
|
|
|
+ queryList();
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
+};
|
|
|
+// 签收工单
|
|
|
+const onSign = (row: any) => {
|
|
|
+ ElMessageBox.confirm(`您确定要要签收【${row.title}】，是否继续?`, '提示', {
|
|
|
+ confirmButtonText: '确认',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning',
|
|
|
+ draggable: true,
|
|
|
+ cancelButtonClass: 'default-button',
|
|
|
+ autofocus: false,
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ orderSign(row.id).then(() => {
|
|
|
+ ElMessage.success('签收成功');
|
|
|
+ queryList();
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
+};
|
|
|
+// 创建重复性事件
|
|
|
+const repeatEventEditRef = ref<RefType>();
|
|
|
+const onCreateRepeatEvent = () => {
|
|
|
+ repeatEventEditRef.value.openDialog();
|
|
|
+};
|
|
|
+// 编辑工单
|
|
|
+const onOrderEdit = (row: any) => {
|
|
|
+ router.push({
|
|
|
+ name: 'orderAccept',
|
|
|
+ params: {
|
|
|
+ tagsViewName: '工单受理-' + row.no,
|
|
|
+ id: row.id,
|
|
|
+ callId: '0',
|
|
|
+ },
|
|
|
+ });
|
|
|
+};
|
|
|
+// 工单省退回
|
|
|
+const orderReturnRef = ref<RefType>(); // 工单退回ref
|
|
|
+const onReturn = (row: any) => {
|
|
|
+ orderReturnRef.value.openDialog(row);
|
|
|
+};
|
|
|
+// 表格导出
|
|
|
+const exportTable = (val: any, isExportAll = false) => {
|
|
|
+ let request = Other.deepClone(state.queryParams);
|
|
|
+ request.CreationTimeStart = state.queryParams.crTime === null ? null : state.queryParams.crTime[0]; // 生成时间
|
|
|
+ request.CreationTimeEnd = state.queryParams.crTime === null ? null : state.queryParams.crTime[1];
|
|
|
+ Reflect.deleteProperty(request, 'crTime'); // 删除无用的参数
|
|
|
+ request.ExpiredTimeStart = state.queryParams.exTime === null ? null : state.queryParams.exTime[0]; // 期满时间
|
|
|
+ request.ExpiredTimeEnd = state.queryParams.exTime === null ? null : state.queryParams.exTime[1];
|
|
|
+ Reflect.deleteProperty(request, 'exTime'); // 删除无用的参数
|
|
|
+ request.ActualHandleTimeStart = state.queryParams.doneTime === null ? null : state.queryParams.doneTime[0]; // 办结时间
|
|
|
+ request.ActualHandleTimeEnd = state.queryParams.doneTime === null ? null : state.queryParams.doneTime[1];
|
|
|
+ Reflect.deleteProperty(request, 'doneTime'); // 删除无用的参数
|
|
|
+ Reflect.deleteProperty(request, 'AreaCode'); // 删除无用的参数
|
|
|
+ const columnInfos = val.map((item: any) => {
|
|
|
+ return {
|
|
|
+ prop: item.prop,
|
|
|
+ name: item.label,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ const req = {
|
|
|
+ queryDto: request,
|
|
|
+ columnInfos,
|
|
|
+ isExportAll,
|
|
|
+ };
|
|
|
+ state.loading = true;
|
|
|
+ exportOrder(req)
|
|
|
+ .then((res: any) => {
|
|
|
+ state.loading = false;
|
|
|
+ downloadFileByStream(res);
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ state.loading = false;
|
|
|
+ });
|
|
|
+};
|
|
|
+// 交办单导出
|
|
|
+const onJbExport = () => {
|
|
|
+ const ids = proTableRef.value.selectedList.map((item: any) => item.id);
|
|
|
+ ElMessageBox.confirm(`您确定导出选中的${proTableRef.value.selectedList.length}个工单的交办单，是否继续?`, '提示', {
|
|
|
+ confirmButtonText: '确认',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning',
|
|
|
+ draggable: true,
|
|
|
+ cancelButtonClass: 'default-button',
|
|
|
+ autofocus: false,
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ state.loading = true;
|
|
|
+ exportJbOrder(ids)
|
|
|
+ .then((res: any) => {
|
|
|
+ downloadZip(res);
|
|
|
+ state.loading = false;
|
|
|
+ ElMessage.success('导出成功');
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ state.loading = false;
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
+};
|
|
|
+onMounted(() => {
|
|
|
+ getBaseData();
|
|
|
+ queryList();
|
|
|
+});
|
|
|
+onActivated(() => {
|
|
|
+ mittBus.on('clearCachePage', () => {
|
|
|
+ //清除缓存
|
|
|
+ queryList();
|
|
|
+ });
|
|
|
+});
|
|
|
+onBeforeUnmount(() => {
|
|
|
+ mittBus.off('clearCachePage');
|
|
|
+});
|
|
|
+</script>
|
|
|
+<style scoped lang="scss">
|
|
|
+.business-order-container {
|
|
|
+ .arrow {
|
|
|
+ transition: transform var(--el-transition-duration);
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .arrow.is-reverse {
|
|
|
+ transform: rotateZ(-180deg);
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
zhangchong