<template>
<div class="orderDia">
<div class="orderContent">
<!-- 基本情况 -->
<div class="orderBox">
<div class="boxTitle">基本情况</div>
<div class="boxContent">
<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.orderNum" placeholder="请输入工单编码" disabled />
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="工单类型" prop="">
<el-select v-model="orderForm.orderType" placeholder="请选择工单类型" 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" placeholder="请选择工单来源" 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" placeholder="请输入上报人" disabled />
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="联系方式" prop="">
<!-- phone -->
<el-input v-model="orderForm.phone" placeholder="请输入联系方式" disabled />
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="警情时间" prop="">
<el-date-picker
v-model="orderForm.alarmTime"
type="datetime"
placeholder="请选择警情时间"
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%" placeholder="请输入发送位置" disabled />
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="登记时间" prop="">
<el-date-picker
v-model="orderForm.registerTime"
type="datetime"
placeholder="请选择登记时间"
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"
placeholder="请输入工单信息"
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"
placeholder="请选择要求完成时间"
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.handleDeptId" disabled />
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="处理人" prop="">
<!-- phone -->
<el-input v-model="orderForm.handlePersonId" disabled />
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</div>
<!-- 附件 -->
<div class="orderBox">
<div class="boxTitle">附件</div>
<div class="boxContent">
<div>无</div>
</div>
</div>
<!-- 处理流程 -->
<div class="orderBox">
<div class="boxTitle">处理流程</div>
<div class="boxContent">
<div class="processBox">
<div class="processItem" v-for="(item, i) in handleProcess.timeStep" :key="i">
{{ item }}
</div>
</div>
<el-steps :active="handleProcess.active">
<el-step
:title="item.title"
:description="item.description"
v-for="(item, index) in handleProcess.dataList"
:key="index"
:status="item.status"
>
<template #title>
<div class="titleBox">
{{ item.title }}
<div class="callBox" v-if="item.status == '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>【李先生】登记【工单2024102900001】，【城管局】【待受理】</span></div>
<div class="descTime">2024-10-29 16:00</div>
</div>
</div>
</div>
<!-- 事务操作 -->
<div class="orderBox">
<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>
<div class="boxBtn">
<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';
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: '',
},
});
const orderFormRef = ref();
const confirmFormRef = ref();
const dialogImageUrl = ref('');
const dialogVisible = 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: {
name: '',
code: '',
date: '',
type: '',
ly: '',
sbr: '',
phone: '',
jqTime: '',
djTime: '',
location: '',
doneTime: '',
info: '',
state: '',
},
handleProcess: {
active: 4,
// 'wait' | 'process' | 'finish' | 'error' | 'success'
// 等待还未进行 进行 完成 错误 成功
dataList: [
{
title: '登记',
description: '2024-10-29 15:00:00',
status: 'finish',
},
{
title: '受理',
description: '2024-10-29 15:09:00',
status: 'finish',
},
{
title: '提交',
description: '',
status: 'finish',
},
{
title: '分派',
description: '',
status: 'process',
},
{
title: '响应',
description: '',
status: 'wait',
},
{
title: '上报',
description: '',
status: 'wait',
},
{
title: '核实',
description: '',
status: 'wait',
},
{
title: '结单',
description: '',
status: 'wait',
},
],
// timeStep: ['9min','9min','9min','9min','9min','9min','9min'],
timeStep: ['9min'],
timeStep1: [
{
day: '1',
h: '2',
},
],
},
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',
},
],
},
],
},
],
});
const { rules, orderForm, handleProcess, confirmForm, threeData, presonThreeData } = toRefs(orderData);
const handleRemove = (uploadFile, uploadFiles) => {
console.log(uploadFile, uploadFiles);
};
const handlePictureCardPreview = uploadFile => {
dialogImageUrl.value = uploadFile.url;
dialogVisible.value = true;
};
const close = () => {
emit('closeDialog');
};
</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 {
// 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;
}
}
}
}
.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;
}
</style>
