<template>
<div class="orderDia">
<div class="orderContent">
<!-- 基本情况 -->
<div class="orderBox">
<div class="boxTitle">基本情况</div>
<div class="boxContent" v-loading="infoLoading">
<el-form ref="orderFormRef" :rules="rules" label-width="auto" :model="orderForm">
<el-row justify="space-between">
<el-col :span="7">
<el-form-item label="工单编码" prop="">
<el-input v-model="orderForm.orderNumber" disabled />
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="工单类型" prop="">
<el-select v-model="orderForm.orderType" style="width: 100%" disabled>
<el-option v-for="item in work_order_type" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="工单来源" prop="">
<el-select v-model="orderForm.orderSource" style="width: 100%" disabled>
<el-option v-for="item in work_order_source" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row justify="space-between">
<el-col :span="7">
<el-form-item label="上 报 人" prop="">
<el-input v-model="orderForm.reportPerson" disabled />
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="联系方式" prop="">
<!-- phone -->
<el-input v-model="orderForm.reportPersonPhone" disabled />
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="警情时间" prop="">
<el-date-picker
v-model="orderForm.alarmTime"
type="datetime"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
style="width: 100%"
disabled
/>
</el-form-item>
</el-col>
</el-row>
<el-row justify="space-between">
<el-col :span="16">
<el-form-item label="发送位置" prop="">
<!-- phone -->
<el-input v-model="orderForm.reportLocation" style="width: 97%" disabled />
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="登记时间" prop="">
<el-date-picker
v-model="orderForm.registerTime"
type="datetime"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
style="width: 100%"
disabled
/>
</el-form-item>
</el-col>
</el-row>
<el-row justify="space-between">
<el-col :span="24">
<el-form-item label="信  息" prop="">
<!-- phone -->
<el-input v-model="orderForm.message" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" disabled />
</el-form-item>
</el-col>
</el-row>
<el-row justify="space-between">
<el-col :span="7">
<el-form-item label="要求完成时间" prop="">
<el-date-picker
v-model="orderForm.requireFinishTime"
type="datetime"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
style="width: 100%"
disabled
/>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="处理单位" prop="">
<!-- phone -->
<el-input v-model="orderForm.handleDeptName" disabled />
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="处理人" prop="">
<!-- phone -->
<el-input v-model="orderForm.handlePersonName" disabled />
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</div>
<!-- 附件 -->
<div class="orderBox">
<div class="boxTitle">附件</div>
<div class="boxContent" v-loading="infoLoading">
<div class="imgBox" v-if="orderForm?.orderFilesList?.length">
<el-image
style="width: 100px; height: 100px"
:src="i.url"
v-for="(i, index) in orderForm.orderFilesList"
:key="i"
:zoom-rate="1.2"
:max-scale="7"
:min-scale="0.2"
:preview-src-list="
orderForm.orderFilesList.map(item => {
return item.url;
})
"
:initial-index="index"
fit="cover"
class="imgItem"
/>
</div>
<div v-else>无</div>
</div>
</div>
<!-- 处理流程 -->
<div class="orderBox">
<div class="boxTitle">处理流程</div>
<div class="boxContent" v-loading="infoLoading">
<div class="processBox">
<div class="processItem" v-for="(item, i) in handleProcess.timeStep" :key="i">
{{ item }}
</div>
</div>
<el-steps :active="handleProcess.active">
<!-- :title="item.activityName" -->
<el-step
:title="item.activityName"
:description="item.endTime"
v-for="(item, index) in handleProcess.dataList"
:key="index"
:status="item.processStatus"
>
<template #title>
<div class="titleBox">
{{ item.activityName }}
<div class="callBox" v-if="item.processStatus == 'process'">
<div class="callTitle">催办</div>
<img src="@/assets/images/order/shortMessage_icon.png" alt="" class="callImg" />
<img src="@/assets/images/order/phone_icon.png" alt="" class="callImg" />
</div>
</div>
</template>
</el-step>
</el-steps>
<el-divider />
<div class="processDesc">
<div class="descTitle">
上一步操作：<span> {{ handleProcess.operation }} </span>
</div>
<div class="descTime">{{ handleProcess.operationTime }}</div>
</div>
</div>
</div>
<!-- 事务操作 -->
<div class="orderBox" v-if="props.status != 'xiangqing'">
<div class="boxTitle">事务操作</div>
<div class="boxContent">
<el-form ref="confirmFormRef" :rules="rules" label-width="auto" :model="confirmForm">
<!-- 受理 -->
<template v-if="props.status == 'accept'">
<el-row justify="space-between">
<el-col :span="7">
<el-form-item label="受理方式" prop="">
<!-- <el-input v-model="confirmForm.reportPerson" placeholder="请输入上报人" /> -->
<el-radio-group v-model="confirmForm.type">
<el-radio label="1">接受</el-radio>
<el-radio label="0">驳回</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="受理时间" prop="">
<el-date-picker
v-model="confirmForm.time"
type="datetime"
placeholder="请选择受理时间"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
style="width: 100%"
/>
</el-form-item>
</el-col>
</el-row>
</template>
<!-- 提交 -->
<template v-if="props.status == 'submit'">
<el-row justify="space-between">
<el-col :span="7">
<el-form-item label="提交方式" prop="">
<!-- <el-input v-model="confirmForm.reportPerson" placeholder="请输入上报人" /> -->
<el-radio-group v-model="confirmForm.type">
<el-radio label="1">接受</el-radio>
<el-radio label="0">驳回</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="提交时间" prop="">
<el-date-picker
v-model="confirmForm.time"
type="datetime"
placeholder="请选择提交时间"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
style="width: 100%"
/>
</el-form-item>
</el-col>
</el-row>
<el-row justify="space-between" v-if="props.status == 'submit'">
<el-col :span="7">
<el-form-item label="提交部门" prop="">
<el-tree-select
v-model="confirmForm.threeValue"
:data="threeData"
:render-after-expand="false"
style="width: 100%"
/>
</el-form-item>
</el-col>
</el-row>
</template>
<!-- 分派 -->
<template v-if="props.status == 'assign'">
<el-row justify="space-between">
<el-col :span="7">
<el-form-item label="分派方式" prop="">
<!-- <el-input v-model="confirmForm.reportPerson" placeholder="请输入上报人" /> -->
<el-radio-group v-model="confirmForm.type">
<el-radio label="1">接受</el-radio>
<el-radio label="0">驳回</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="分派时间" prop="">
<el-date-picker
v-model="confirmForm.time"
type="datetime"
placeholder="请选择分派时间"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
style="width: 100%"
/>
</el-form-item>
</el-col>
</el-row>
<el-row justify="space-between" v-if="props.status == 'submit'">
<el-col :span="7">
<el-form-item label="分派人员" prop="">
<el-tree-select
v-model="confirmForm.presonThreeValue"
:data="presonThreeData"
:render-after-expand="false"
style="width: 100%"
/>
</el-form-item>
</el-col>
</el-row>
</template>
<!-- 响应 -->
<template v-if="props.status == 'response'">
<el-row justify="space-between">
<el-col :span="7">
<el-form-item label="响应方式" prop="">
<!-- <el-input v-model="confirmForm.reportPerson" placeholder="请输入上报人" /> -->
<el-radio-group v-model="confirmForm.type">
<el-radio label="1">接受</el-radio>
<el-radio label="0">驳回</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="响应时间" prop="">
<el-date-picker
v-model="confirmForm.time"
type="datetime"
placeholder="请选择受理时间"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
style="width: 100%"
/>
</el-form-item>
</el-col>
</el-row>
</template>
<!-- 上报 -->
<template v-if="props.status == 'report'">
<el-row justify="space-between">
<el-col :span="7">
<el-form-item label="处理时间" prop="">
<el-date-picker
v-model="confirmForm.time"
type="datetime"
placeholder="请选择处理时间"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
style="width: 100%"
/>
</el-form-item>
</el-col>
</el-row>
<el-row justify="space-between">
<el-col :span="24">
<el-form-item label="处理位置" prop="">
<el-input v-model="confirmForm.location" placeholder="请选择处理位置" />
</el-form-item>
</el-col>
</el-row>
<el-row justify="space-between">
<el-col :span="24">
<el-form-item label="处理图片" prop="">
<ImageFileUpload
:limit="4"
v-model:saveFileArr="confirmForm.fileList"
:listType="'picture-card'"
:fileType="['jpg', 'png', 'jpeg', 'svg', 'gif']"
:fileSize="10"
></ImageFileUpload>
</el-form-item>
</el-col>
</el-row>
</template>
<!-- 核实 -->
<template v-if="props.status == 'check'">
<el-row justify="space-between">
<el-col :span="7">
<el-form-item label="核实方式" prop="">
<!-- <el-input v-model="confirmForm.reportPerson" placeholder="请输入上报人" /> -->
<el-radio-group v-model="confirmForm.type">
<el-radio label="1">接受</el-radio>
<el-radio label="0">驳回</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="核实时间" prop="">
<el-date-picker
v-model="confirmForm.time"
type="datetime"
placeholder="请选择核实时间"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
style="width: 100%"
/>
</el-form-item>
</el-col>
</el-row>
</template>
<!-- 结单 -->
<template v-if="props.status == 'complete'">
<el-row justify="space-between">
<el-col :span="7">
<el-form-item label="结单方式" prop="">
<!-- <el-input v-model="confirmForm.reportPerson" placeholder="请输入上报人" /> -->
<el-radio-group v-model="confirmForm.type">
<el-radio label="1">接受</el-radio>
<el-radio label="0">驳回</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="结单时间" prop="">
<el-date-picker
v-model="confirmForm.time"
type="datetime"
placeholder="请选择结单时间"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
style="width: 100%"
/>
</el-form-item>
</el-col>
</el-row>
</template>
<el-row justify="space-between">
<el-col :span="24">
<el-form-item label="意  见" prop="">
<!-- phone -->
<el-input
v-model="confirmForm.message"
:autosize="{ minRows: 2, maxRows: 4 }"
type="textarea"
placeholder="请输入意见"
maxlength="300"
show-word-limit
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</div>
<!-- 处理明细 -->
<div class="orderBox" v-if="props.status == 'xiangqing'">
<div class="boxTitle">处理明细</div>
<div class="boxContent">
<div class="textBox" v-for="(item, index) in handleProcess.historyData" :key="item.id">
{{ item.operationTime + ' ' + item.operation }}
</div>
</div>
</div>
</div>
<div class="boxBtn" v-if="props.status != 'xiangqing'">
<el-button type="primary">提交</el-button>
<el-button @click="close">返回</el-button>
</div>
</div>
</template>
<script setup name="orderDia">
import ImageFileUpload from '@/components/ImageFileUpload/index.vue'; //图片文件上传
import phone_icon from '@/assets/images/order/phone_icon.png';
import shortMessage_icon from '@/assets/images/order/shortMessage_icon.png';
import { getWorkOrder, listHistoryData } from '@/api/order';
import { onMounted, ref } from 'vue';
const { proxy } = getCurrentInstance();
// 工单类型： work_order_type
// 工单状态： work_order_status
// 工单来源： work_order_source
const { work_order_type, work_order_status, work_order_source } = proxy.useDict(
'work_order_type',
'work_order_status',
'work_order_source'
);
const emit = defineEmits(['closeDialog']);
const props = defineProps({
status: {
type: String,
default: '',
},
orderId: {
type: String,
default: '',
},
});
const orderFormRef = ref();
const confirmFormRef = ref();
const infoLoading = ref(false);
const orderData = reactive({
rules: {
name: [
{ required: true, message: 'Please input Activity name', trigger: 'blur' },
{ min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
],
region: [
{
required: true,
message: 'Please select Activity zone',
trigger: 'change',
},
],
count: [
{
required: true,
message: 'Please select Activity count',
trigger: 'change',
},
],
},
orderForm: {},
handleProcess: {
active: 4,
// 'wait' | 'process' | 'finish' | 'error' | 'success'
// 等待还未进行 进行 完成 错误 成功
dataList: [],
// timeStep: ['9min','9min','9min','9min','9min','9min','9min'],
timeStep: [],
operation: '',
operationTime: '',
historyData: [],
},
confirmForm: {
time: proxy.moment().format('YYYY-MM-DD HH:mm:ss'),
message: '',
type: '1',
threeValue: '',
presonThreeValue: '',
location: '',
fileList: [
{
name: 'food.jpeg',
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
},
{
name: 'food.jpeg',
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
},
{
name: 'food.jpeg',
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
},
{
name: 'food.jpeg',
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
},
],
},
presonThreeData: [
{
value: '1',
label: 'Level one 1',
children: [
{
value: '1-1',
label: 'Level two 1-1',
children: [
{
value: '1-1-1',
label: 'Level three 1-1-1',
},
],
},
],
},
{
value: '2',
label: 'Level one 2',
children: [
{
value: '2-1',
label: 'Level two 2-1',
children: [
{
value: '2-1-1',
label: 'Level three 2-1-1',
},
],
},
{
value: '2-2',
label: 'Level two 2-2',
children: [
{
value: '2-2-1',
label: 'Level three 2-2-1',
},
],
},
],
},
{
value: '3',
label: 'Level one 3',
children: [
{
value: '3-1',
label: 'Level two 3-1',
children: [
{
value: '3-1-1',
label: 'Level three 3-1-1',
},
],
},
{
value: '3-2',
label: 'Level two 3-2',
children: [
{
value: '3-2-1',
label: 'Level three 3-2-1',
},
],
},
],
},
],
threeData: [
{
value: '1',
label: 'Level one 1',
children: [
{
value: '1-1',
label: 'Level two 1-1',
children: [
{
value: '1-1-1',
label: 'Level three 1-1-1',
},
],
},
],
},
{
value: '2',
label: 'Level one 2',
children: [
{
value: '2-1',
label: 'Level two 2-1',
children: [
{
value: '2-1-1',
label: 'Level three 2-1-1',
},
],
},
{
value: '2-2',
label: 'Level two 2-2',
children: [
{
value: '2-2-1',
label: 'Level three 2-2-1',
},
],
},
],
},
{
value: '3',
label: 'Level one 3',
children: [
{
value: '3-1',
label: 'Level two 3-1',
children: [
{
value: '3-1-1',
label: 'Level three 3-1-1',
},
],
},
{
value: '3-2',
label: 'Level two 3-2',
children: [
{
value: '3-2-1',
label: 'Level three 3-2-1',
},
],
},
],
},
],
historyParams: {
workflowKey: 'WorkOrder',
fileRefFieldPattern: 'picture',
businessKey: '',
},
});
const { rules, orderForm, handleProcess, confirmForm, threeData, presonThreeData, historyParams } = toRefs(orderData);
// 详情
const getDetail = () => {
infoLoading.value = true;
getWorkOrder(props.orderId).then(res => {
console.log('----------', res);
orderForm.value = res.data;
handleProcess.value.dataList = res.data.workOrderWorkFlowStepVo?.workOrderWorkFlowHistoryVoList;
handleProcess.value.timeStep = res.data.workOrderWorkFlowStepVo?.timeStepList;
// previousOperation
handleProcess.value.operation = res.data.previousOperation?.operation || '';
handleProcess.value.operationTime = res.data.previousOperation?.operationTime || '';
infoLoading.value = false;
});
};
// 历史记录
const getHistoryData = () => {
historyParams.value.businessKey = props.orderId;
listHistoryData(historyParams.value).then(res => {
// console.log('historyData', res);
handleProcess.value.historyData = res.data;
});
};
const handleSubmit = () => {};
const close = () => {
emit('closeDialog');
};
onMounted(() => {
getHistoryData();
getDetail();
});
</script>
<style lang="scss" scoped>
.orderDia {
width: 100%;
height: 720px;
// border: 1px solid red;
padding-bottom: 20px;
.orderContent {
height: calc(100% - 40px);
overflow-y: auto;
}
.orderBox {
width: 100%;
border-radius: 2px;
border: 1px solid #eaeaea;
margin-bottom: 20px;
.boxTitle {
height: 40px;
background: #f6f6f8;
// border-radius: 2px;
// border: 1px solid #eaeaea;
font-weight: bold;
font-size: 14px;
color: #333333;
display: flex;
align-items: center;
padding-left: 20px;
}
.boxContent {
min-height: 50px;
// height: calc(100% - 120px);
margin: 10px 0;
// border: 1px solid red;
padding: 0 20px;
.processBox {
width: 100%;
height: 12px;
font-weight: 400;
font-size: 12px;
color: #666666;
box-sizing: border-box;
padding: 0px 20px 0 10px;
margin-top: 30px;
display: flex;
align-items: center;
.processItem {
width: 183px;
// border: 1px solid red;
text-align: center;
}
}
.processDesc {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
.descTitle {
font-weight: 900;
color: #333333;
}
span {
font-weight: 400;
color: #666666;
}
.descTime {
font-weight: 400;
color: #666666;
}
}
.imgBox {
display: flex;
align-items: center;
.imgItem {
width: 100px;
height: 100px;
margin-right: 15px;
}
}
}
}
.boxBtn {
display: flex;
align-items: center;
justify-content: center;
height: 40px;
}
}
.titleBox {
position: relative;
// width: 20px;
// height: 20px;
// border-radius: 50%;
// background-color: blue;
font-weight: 500;
font-size: 14px;
.callBox {
position: absolute;
left: -10px;
top: -55px;
display: flex;
.callTitle {
width: 40px;
height: 22px;
line-height: 22px;
background: #4285f4;
border-radius: 2px;
font-weight: 500;
font-size: 14px;
color: #ffffff;
text-align: center;
}
.callImg {
margin-left: 5px;
}
}
}
.el-divider {
margin: 10px 0 15px 0;
}
:deep(.el-loading-spinner) {
top: 20%;
}
</style>
