284 lines
12 KiB
Vue
284 lines
12 KiB
Vue
<template>
|
||
<ElDialog v-model="showDialog"
|
||
:close-on-click-modal="false"
|
||
destroy-on-close
|
||
width="fit-content"
|
||
@close="dialogCloseHandler">
|
||
<ElForm :model="formData"
|
||
:rules="rules"
|
||
ref="orderForm"
|
||
class="form-panel"
|
||
label-width="auto">
|
||
<ElFormItem label-width="90" label="Id" prop="id">
|
||
<ElInput
|
||
v-model="formData.id"
|
||
:disabled="status === 'view'"
|
||
placeholder="Id"/>
|
||
</ElFormItem>
|
||
<ElFormItem label-width="90" label="订单编号" prop="sn">
|
||
<ElInput
|
||
v-model="formData.sn"
|
||
:disabled="status === 'view'"
|
||
placeholder="订单编号"/>
|
||
</ElFormItem>
|
||
<ElFormItem label-width="90" label="项目 Id" prop="projectId">
|
||
<ElInput
|
||
v-model="formData.projectId"
|
||
:disabled="status === 'view'"
|
||
placeholder="项目 Id"/>
|
||
</ElFormItem>
|
||
<ElFormItem label-width="90" label="下单人 Id；sys_user.id" prop="userId">
|
||
<ElInput
|
||
v-model="formData.userId"
|
||
:disabled="status === 'view'"
|
||
placeholder="下单人 Id；sys_user.id"/>
|
||
</ElFormItem>
|
||
<ElFormItem label-width="90" label="下单人客户 Id；cst_customer.id" prop="customerId">
|
||
<ElInput
|
||
v-model="formData.customerId"
|
||
:disabled="status === 'view'"
|
||
placeholder="下单人客户 Id；cst_customer.id"/>
|
||
</ElFormItem>
|
||
<ElFormItem label-width="90" label="下单人姓名" prop="contacts">
|
||
<ElInput
|
||
v-model="formData.contacts"
|
||
:disabled="status === 'view'"
|
||
placeholder="下单人姓名"/>
|
||
</ElFormItem>
|
||
<ElFormItem label-width="90" label="下单人联系方式" prop="phone">
|
||
<ElInput
|
||
v-model="formData.phone"
|
||
:disabled="status === 'view'"
|
||
placeholder="下单人联系方式"/>
|
||
</ElFormItem>
|
||
<ElFormItem label-width="90" label="下单时间" prop="orderTime">
|
||
<ElInput
|
||
v-model="formData.orderTime"
|
||
:disabled="status === 'view'"
|
||
placeholder="下单时间"/>
|
||
</ElFormItem>
|
||
<ElFormItem label-width="90" label="订单类型；字典代码：order_category，HuiShouYuYue-->回收预约单、XiaoShouYuYue-->销售预约单、DuanBoRu-->短驳入、DuanBoChu-->短驳出" prop="orderCategory">
|
||
<ElInput
|
||
v-model="formData.orderCategory"
|
||
:disabled="status === 'view'"
|
||
placeholder="订单类型；字典代码：order_category，HuiShouYuYue-->回收预约单、XiaoShouYuYue-->销售预约单、DuanBoRu-->短驳入、DuanBoChu-->短驳出"/>
|
||
</ElFormItem>
|
||
<ElFormItem label-width="90" label="订单状态；字典代码：order_status，YiYuYue-->已预约、JinXingZhong-->进行中、YiWanCheng-->已完成、YiQuXiao-->已取消" prop="orderStatus">
|
||
<ElInput
|
||
v-model="formData.orderStatus"
|
||
:disabled="status === 'view'"
|
||
placeholder="订单状态；字典代码：order_status，YiYuYue-->已预约、JinXingZhong-->进行中、YiWanCheng-->已完成、YiQuXiao-->已取消"/>
|
||
</ElFormItem>
|
||
<ElFormItem label-width="90" label="完结时间" prop="finishTime">
|
||
<ElInput
|
||
v-model="formData.finishTime"
|
||
:disabled="status === 'view'"
|
||
placeholder="完结时间"/>
|
||
</ElFormItem>
|
||
<ElFormItem label-width="90" label="运输组织 Id；cst_org.id" prop="transOrgId">
|
||
<ElInput
|
||
v-model="formData.transOrgId"
|
||
:disabled="status === 'view'"
|
||
placeholder="运输组织 Id；cst_org.id"/>
|
||
</ElFormItem>
|
||
<ElFormItem label-width="90" label="运输方客户 Id" prop="transCustomerId">
|
||
<ElInput
|
||
v-model="formData.transCustomerId"
|
||
:disabled="status === 'view'"
|
||
placeholder="运输方客户 Id"/>
|
||
</ElFormItem>
|
||
<ElFormItem label-width="90" label="指派清运公司时间" prop="assignmentTransTime">
|
||
<ElInput
|
||
v-model="formData.assignmentTransTime"
|
||
:disabled="status === 'view'"
|
||
placeholder="指派清运公司时间"/>
|
||
</ElFormItem>
|
||
<ElFormItem label-width="90" label="站点 Id；cst_station.id" prop="stationId">
|
||
<ElInput
|
||
v-model="formData.stationId"
|
||
:disabled="status === 'view'"
|
||
placeholder="站点 Id；cst_station.id"/>
|
||
</ElFormItem>
|
||
<ElFormItem label-width="90" label="站点名称；cst_station.station.name" prop="stationName">
|
||
<ElInput
|
||
v-model="formData.stationName"
|
||
:disabled="status === 'view'"
|
||
placeholder="站点名称；cst_station.station.name"/>
|
||
</ElFormItem>
|
||
<ElFormItem label-width="90" label="运距；单位：米" prop="transDistance">
|
||
<ElInput
|
||
v-model="formData.transDistance"
|
||
:disabled="status === 'view'"
|
||
placeholder="运距；单位：米"/>
|
||
</ElFormItem>
|
||
<ElFormItem label-width="90" label="预估量" prop="estimatedQuantity">
|
||
<ElInput
|
||
v-model="formData.estimatedQuantity"
|
||
:disabled="status === 'view'"
|
||
placeholder="预估量"/>
|
||
</ElFormItem>
|
||
<ElFormItem label-width="90" label="预估车数" prop="estimatedTrainNum">
|
||
<ElInput
|
||
v-model="formData.estimatedTrainNum"
|
||
:disabled="status === 'view'"
|
||
placeholder="预估车数"/>
|
||
</ElFormItem>
|
||
<ElFormItem label-width="90" label="产品 Id" prop="goodsId">
|
||
<ElInput
|
||
v-model="formData.goodsId"
|
||
:disabled="status === 'view'"
|
||
placeholder="产品 Id"/>
|
||
</ElFormItem>
|
||
<ElFormItem label-width="90" label="产品名称" prop="goodsName">
|
||
<ElInput
|
||
v-model="formData.goodsName"
|
||
:disabled="status === 'view'"
|
||
placeholder="产品名称"/>
|
||
</ElFormItem>
|
||
<ElFormItem label-width="90" label="计量单位；字典代码：unit" prop="unit">
|
||
<ElInput
|
||
v-model="formData.unit"
|
||
:disabled="status === 'view'"
|
||
placeholder="计量单位；字典代码：unit"/>
|
||
</ElFormItem>
|
||
<ElFormItem label-width="90" label="客户备注" prop="customerMemo">
|
||
<ElInput
|
||
v-model="formData.customerMemo"
|
||
:disabled="status === 'view'"
|
||
placeholder="客户备注"/>
|
||
</ElFormItem>
|
||
<ElFormItem label-width="90" label="创建人 Id； sys_user.id" prop="creatorId">
|
||
<ElInput
|
||
v-model="formData.creatorId"
|
||
:disabled="status === 'view'"
|
||
placeholder="创建人 Id； sys_user.id"/>
|
||
</ElFormItem>
|
||
<ElFormItem label-width="90" label="修改人 Id； sys_user.id" prop="modifierId">
|
||
<ElInput
|
||
v-model="formData.modifierId"
|
||
:disabled="status === 'view'"
|
||
placeholder="修改人 Id； sys_user.id"/>
|
||
</ElFormItem>
|
||
<ElFormItem label-width="90" label="创建时间" prop="createTime">
|
||
<ElInput
|
||
v-model="formData.createTime"
|
||
:disabled="status === 'view'"
|
||
placeholder="创建时间"/>
|
||
</ElFormItem>
|
||
<ElFormItem label-width="90" label="修改时间" prop="modifyTime">
|
||
<ElInput
|
||
v-model="formData.modifyTime"
|
||
:disabled="status === 'view'"
|
||
placeholder="修改时间"/>
|
||
</ElFormItem>
|
||
</ElForm>
|
||
<template #footer>
|
||
<ElButton @click="showDialog = false">{{ status === 'view' ? '关闭' : '取消' }}</ElButton>
|
||
<ElButton v-if="status !== 'view'" :loading="submiting" type="primary" @click="submitHandler">提交</ElButton>
|
||
</template>
|
||
</ElDialog>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import OrderApi from '@/pages/order/book-order/order-api.ts'
|
||
import Strings from '@/common/utils/strings.ts'
|
||
import FormUtil from '@/common/utils/formUtil.ts'
|
||
import Utils from '@/common/utils'
|
||
import {
|
||
ElMessage,
|
||
type FormInstance,
|
||
type FormRules,
|
||
} from 'element-plus'
|
||
|
||
const emits = defineEmits(['editSucc'])
|
||
const showDialog = ref(false)
|
||
const submiting = ref(false)
|
||
const status = ref<'add' | 'view' | 'modify'>('add')
|
||
|
||
const orderFormIns = useTemplateRef<FormInstance>('orderForm')
|
||
|
||
const formData = Utils.resetAble(reactive<OrderTypes.SearchOrderResult>({}))
|
||
const rules = reactive<FormRules<OrderTypes.SearchOrderResult>>({
|
||
id: [{ required: true, message: '请填写Id', trigger: 'blur' }],
|
||
sn: [{ required: true, message: '请填写订单编号', trigger: 'blur' }],
|
||
projectId: [{ required: true, message: '请填写项目 Id', trigger: 'blur' }],
|
||
userId: [{ required: true, message: '请填写下单人 Id；sys_user.id', trigger: 'blur' }],
|
||
customerId: [{ required: true, message: '请填写下单人客户 Id；cst_customer.id', trigger: 'blur' }],
|
||
contacts: [{ required: true, message: '请填写下单人姓名', trigger: 'blur' }],
|
||
phone: [{ required: true, message: '请填写下单人联系方式', trigger: 'blur' }],
|
||
orderTime: [{ required: true, message: '请填写下单时间', trigger: 'blur' }],
|
||
orderCategory: [{ required: true, message: '请填写订单类型；字典代码：order_category，HuiShouYuYue-->回收预约单、XiaoShouYuYue-->销售预约单、DuanBoRu-->短驳入、DuanBoChu-->短驳出', trigger: 'blur' }],
|
||
orderStatus: [{ required: true, message: '请填写订单状态；字典代码：order_status，YiYuYue-->已预约、JinXingZhong-->进行中、YiWanCheng-->已完成、YiQuXiao-->已取消', trigger: 'blur' }],
|
||
finishTime: [{ required: true, message: '请填写完结时间', trigger: 'blur' }],
|
||
transOrgId: [{ required: true, message: '请填写运输组织 Id；cst_org.id', trigger: 'blur' }],
|
||
transCustomerId: [{ required: true, message: '请填写运输方客户 Id', trigger: 'blur' }],
|
||
assignmentTransTime: [{ required: true, message: '请填写指派清运公司时间', trigger: 'blur' }],
|
||
stationId: [{ required: true, message: '请填写站点 Id；cst_station.id', trigger: 'blur' }],
|
||
stationName: [{ required: true, message: '请填写站点名称；cst_station.station.name', trigger: 'blur' }],
|
||
transDistance: [{ required: true, message: '请填写运距；单位：米', trigger: 'blur' }],
|
||
estimatedQuantity: [{ required: true, message: '请填写预估量', trigger: 'blur' }],
|
||
estimatedTrainNum: [{ required: true, message: '请填写预估车数', trigger: 'blur' }],
|
||
goodsId: [{ required: true, message: '请填写产品 Id', trigger: 'blur' }],
|
||
goodsName: [{ required: true, message: '请填写产品名称', trigger: 'blur' }],
|
||
unit: [{ required: true, message: '请填写计量单位；字典代码：unit', trigger: 'blur' }],
|
||
customerMemo: [{ required: true, message: '请填写客户备注', trigger: 'blur' }],
|
||
creatorId: [{ required: true, message: '请填写创建人 Id； sys_user.id', trigger: 'blur' }],
|
||
modifierId: [{ required: true, message: '请填写修改人 Id； sys_user.id', trigger: 'blur' }],
|
||
createTime: [{ required: true, message: '请填写创建时间', trigger: 'blur' }],
|
||
modifyTime: [{ required: true, message: '请填写修改时间', trigger: 'blur' }],
|
||
deleted: [{ required: true, message: '请填写是否删除； 0-->未删除、1-->已删除', trigger: 'blur' }],
|
||
})
|
||
|
||
function dialogCloseHandler() {
|
||
formData.$reset()
|
||
}
|
||
|
||
function submitHandler() {
|
||
if (status.value === 'view') return
|
||
submiting.value = true
|
||
if (formData.id != null) {
|
||
FormUtil.submit(orderFormIns, () => OrderApi.modify(formData))
|
||
.then(() => {
|
||
ElMessage.success('修改成功')
|
||
emits('editSucc')
|
||
showDialog.value = false
|
||
})
|
||
.finally(() => {
|
||
submiting.value = false
|
||
})
|
||
} else {
|
||
FormUtil.submit(orderFormIns, () => OrderApi.add(formData))
|
||
.then(() => {
|
||
ElMessage.success('添加成功')
|
||
emits('editSucc')
|
||
showDialog.value = false
|
||
})
|
||
.finally(() => {
|
||
submiting.value = false
|
||
})
|
||
}
|
||
}
|
||
|
||
defineExpose({
|
||
open(data: OrderTypes.SearchOrderResult = {}) {
|
||
showDialog.value = true
|
||
if (!Strings.isBlank(data.id)) {
|
||
status.value = 'modify'
|
||
OrderApi.detail(data.id!)
|
||
.then(res => {
|
||
formData.$reset(res.data)
|
||
})
|
||
} else {
|
||
status.value = 'add'
|
||
formData.$reset(data)
|
||
}
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<style lang="stylus" scoped>
|
||
.form-panel {
|
||
padding 20px
|
||
}
|
||
</style>
|