GitBucket
Newer
<template>
<div class="registerOrder">
<div class="subtitle">登记工单</div>
<el-divider />
<div class="orderBox">
<div class="boxTitle">基本情况</div>
<div class="boxContent" v-loading="uploading">
<el-form ref="orderFormRef" :rules="rules" label-width="auto" :model="orderForm" class="formBox">
<el-row justify="space-between">
<el-col :span="7">
<el-form-item label="工单编码" prop="">
<el-input v-model="orderForm.orderNumber" placeholder="请输入工单编码" />
<!-- <el-input v-model="orderForm.orderNumber" placeholder="自动生成工单编码" disabled /> -->
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="工单类型" prop="orderType">
<el-select v-model="orderForm.orderType" placeholder="请选择工单类型" style="width: 100%">
<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="orderSource">
<el-select v-model="orderForm.orderSource" placeholder="请选择工单来源" style="width: 100%">
<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="请输入上报人" />
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="联系方式" prop="">
<!-- phone -->
<el-input v-model="orderForm.reportPersonPhone" placeholder="请输入联系方式" />
</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%"
/>
</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="请输入发送位置" />
</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%"
/>
</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="请输入工单信息"
/>
</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="orderForm.orderFileList"
:listType="'picture-card'"
:fileType="['jpg', 'png', 'jpeg', 'svg', 'gif']"
:fileSize="10"
></ImageFileUpload>
</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%"
/>
</el-form-item>
</el-col>
</el-row>
<el-row justify="center" class="submitBtn">
<el-button type="primary" @click="submitForm(orderFormRef)">提交</el-button>
<el-button>返回</el-button>
</el-row>
</el-form>
</div>
</div>
</div>
</template>
<script setup name="registerOrder">
import bus from '@/bus';
import ImageFileUpload from '@/components/ImageFileUpload/index.vue'; //图片文件上传
import { addWorkOrder } from '@/api/order';
import useUserStore from '@/store/modules/user';
const userStore = useUserStore();
console.log('🚀 ~ userStore:', userStore.userInfo);
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 orderFormRef = ref();
const value = ref('');
const uploading = 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' },
],
orderType: [
{
required: true,
message: '请选择',
trigger: ['change'],
},
],
orderSource: [
{
required: true,
message: '请选择',
trigger: ['change'],
},
],
},
orderForm: {
orderNumber: '',
orderType: '',
orderSource: '',
reportPerson: '',
reportPersonPhone: '',
alarmTime: '',
registerTime: proxy.moment().format('YYYY-MM-DD HH:mm:ss'),
customFinishTime: '',
reportLocation: '',
requireFinishTime: '',
orderFileList: [],
message: '',
nextTaskApproveUserId: userStore.userInfo.userId,
},
});
const { rules, orderForm } = toRefs(orderData);
/** 提交按钮 */
function submitForm(formEl) {
if (!formEl) return;
formEl.validate(valid => {
if (valid) {
uploading.value = true;
orderForm.value.customFinishTime = orderForm.value.registerTime;
addWorkOrder(orderForm.value)
.then(response => {
proxy.$modal.msgSuccess('提交成功');
// open.value = false;
// queryParams.value.areaId = '';
// getList();
orderForm.value = {
...orderForm.value,
orderNumber: '',
reportPerson: '',
reportPersonPhone: '',
alarmTime: '',
registerTime: '',
customFinishTime: '',
reportLocation: '',
requireFinishTime: '',
orderFileList: [],
message: '',
};
bus.emit('orderTitleList');
uploading.value = false;
})
.catch(() => {
uploading.value = false;
// proxy.$modal.msgError('提交失败');
});
// if (addForm.value.id != undefined) {
// editPatrolPoint(addForm.value).then(response => {
// proxy.$modal.msgSuccess('修改成功');
// open.value = false;
// getList({ page: queryParams.value.pageNum, limit: queryParams.value.pageSize });
// });
// } else {
// addPatrolPoint(addForm.value).then(response => {
// proxy.$modal.msgSuccess('新增成功');
// open.value = false;
// queryParams.value.areaId = '';
// getList();
// });
// }
}
});
}
</script>
<style lang="scss" scoped>
.registerOrder {
width: 100%;
height: 100%;
overflow-y: auto;
.subtitle {
font-weight: bold;
font-size: 17px;
color: #333333;
}
.orderBox {
height: calc(100% - 49px);
width: 100%;
.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: 100%;
height: calc(100% - 45px);
margin-top: 10px;
padding: 0 20px;
overflow-y: auto;
// border: 1px solid red;
// .formBox {
// // border: 1px solid red;
// }
// .el-row{
// height: 40px;
// }
.el-form-item {
margin-bottom: 5px;
}
.submitBtn {
margin-top: 10px;
}
}
}
}
.el-divider {
margin: 10px 0 10px 0;
}
</style>