bonus
/
Zlpt_Portal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

订单确认页面搭建

This commit is contained in:
13218645326 2023-12-06 11:02:12 +08:00
parent e44e03fb39
commit 956a84f7b1
2 changed files with 141 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/utils/elementCom.ts Normal file
View File

@ -0,0 +1,44 @@
import { ElMessage, ElMessageBox } from 'element-plus'
export const ElConfirmBeforeOpert = (title = '操作确认', text = "是否确定删除数据？", callBack: any, confirmText = '确定', cancelText = '取消', row: any) => {
ElMessageBox.confirm(
text,
title,
{
confirmButtonText: confirmText,
cancelButtonText: cancelText,
type: 'warning',
}
)
.then(() => {
callBack(row)
})
.catch(() => {
})
}
export const ElMessageBoxOpert = (title = '', text = "", onfirmText = "", cancelText = "", inputValidator:any, inputErrorMessage = "",callBack: any,row:any,inputType="text") => {
ElMessageBox.prompt(text, title, {
draggable:true,
confirmButtonText: onfirmText,
cancelButtonText: cancelText,
inputValidator: (val)=>{
return inputValidator(val)
},
inputType: inputType,
inputErrorMessage: inputErrorMessage,
})
.then(({ value }) => {
callBack(row,value)
})
.catch(() => {
ElMessage({
type: 'info',
message: 'Input canceled',
})
})
}

143
src/views/user/orderManagement/orderCom/orderConfirm.vue
View File

@ -43,7 +43,7 @@
xxxx-xx-xx ~ xxxx-xx-xx
</el-form-item> -->
<!-- 表格 -->
<orderTable :tableInfo="tableInfo">
<orderTable :tableInfo="tableInfo" style="width: 760px">
<!-- <template v-slot:rentMoney>
<h1>6666</h1>
</template> -->
@ -60,6 +60,9 @@
</template>
</orderTable>
<div class="total_money">
合计：234234元
</div>
<!-- <el-form-item label="订单合同：" style="width: 800px;margin-top:12px;">
xxxxxxxxxxxx.pdf
</el-form-item>
@ -72,7 +75,7 @@
<el-form-item label="物流司机电话：" style="width: 800px;">
xxxxx
</el-form-item> -->
<el-form-item label="订单合同：" style="width: 800px;">
<el-form-item label="订单合同：" style="width: 800px;" v-if="stepVal == '1'">
<uploadComponent :maxLimit="1" listType="text" :acceptTypeList="['.pdf']" width="72px" height="24px">
<template v-slot:default>
<el-button type="primary">上传文件</el-button>
@ -80,21 +83,46 @@
</uploadComponent>
</el-form-item>
<div>
<el-form-item label="机手姓名：" class="table_item_sub">
<el-select v-model="submitInfo.driver" placeholder="Select" clearable filterable style="width: 100%;">
<el-option v-for="item in driverInfo.list" :key="item.value" :label="item.label"
:value="item.value" />
<div v-else-if="stepVal == '2'">
<el-form-item label="机手姓名：" style="width: 300px;">
<el-select v-model="submitInfo.driver" placeholder="请选择机手姓名" clearable filterable style="width: 100%;">
<el-option v-for="item in driverInfo.list" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="联系电话：" class="table_item_sub">
<el-form-item label="联系电话：" style="width: 300px;">
<el-input v-model.trim="submitInfo.driverPhone" placeholder="请输入模版编号" clearable maxlength="30" />
</el-form-item>
<el-form-item label="物流司机电话：">
<el-form-item label="物流司机电话：" style="width: 300px;">
<el-input v-model.trim="submitInfo.deliverPhone" placeholder="请输入模版编号" clearable maxlength="30" />
</el-form-item>
</div>
<div v-else-if="stepVal == '3'">
<el-form-item label="机手姓名：" style="width: 300px;">
{{ submitInfo.driver }}
</el-form-item>
<el-form-item label="联系电话：" style="width: 300px;">
{{ submitInfo.driverPhone }}
</el-form-item>
<el-form-item label="物流司机电话：" style="width: 300px;">
{{ submitInfo.deliverPhone }}
</el-form-item>
</div>
<el-form-item>
<div class="btn_opert">
<el-button type="primary" @click="demandConfirmFn" v-if="stepVal == '1'">
需求确认
</el-button>
<el-button type="primary" @click="demandRejectFn" v-if="stepVal == '1'">
需求驳回
</el-button>
<el-button type="primary" @click="nextFn" v-else-if="stepVal == '2'">
下一步
</el-button>
<el-button type="primary" @click="confirmSendFn" v-else-if="stepVal == '3'">
确认发
</el-button>
</div>
</el-form-item>
</el-form>
</template>
@ -105,6 +133,7 @@ import { reactive } from "vue"
import { MoreFilled } from '@element-plus/icons-vue'
import timeLineHorizontal from "./timeLineHorizontal.vue"
import uploadComponent from 'components/uploadComponent/index.vue'
import {ElMessageBoxOpert} from "utils/elementCom"
const tableInfo = reactive({
v_equipment_title: "220E履带挖掘机",
v_equipment_code: "88888",
@ -117,39 +146,8 @@ const tableInfo = reactive({
unit: '月',
imgUrl: ""
})
const timeLineStep = reactive({
list: [
{
content: '订单状态',
timestamp: '需求已提交，等待供应商审核。',
size: 'large',
type: 'primary',
icon: MoreFilled,
},
{
content: '订单状态',
timestamp: '订单已确认，供应商会与您联系，签订合同。',
color: '#0bbd87',
},
{
content: '订单状态',
timestamp: '装备已发出，到货后请及时确认。',
size: 'large',
},
{
content: '订单状态',
timestamp: '租赁进行中。',
type: 'primary',
hollow: true,
last: true
},
{
content: 'Default node',
timestamp: '2018-04-03 20:46',
},
]
})
const stepVal = ref('1')
const timeLineList = reactive({
list: [
@ -183,11 +181,50 @@ const driverInfo = reactive({
}]
})
const submitInfo=reactive({
driver:'',
driverPhone:'',
deliverPhone:''
const submitInfo = reactive({
driver: '',
driverPhone: '',
deliverPhone: ''
})
const demandConfirmFn = () => {
stepVal.value = '2'
}
const editCallBack = (row: any, value: any) => {
console.log("editCallBack", row, value)
}
const demandRejectFn = (row:any) => {
ElMessageBoxOpert(
'驳回原因',
'填写驳回原因',
'确定',
'取消',
(val: any) => {
if (!val) {
return "请填写类型模板"
}
},
"请填写类型模板",
editCallBack,
row,
'textarea'
)
}
const nextFn = () => {
stepVal.value = '3'
}
const confirmSendFn = () => {
}
</script>
@ -208,4 +245,18 @@ const submitInfo=reactive({
.btn_c {}
}
.total_money {
display: flex;
justify-content: flex-end;
height: 32px;
line-height: 32px;
width: 760px;
}
.btn_opert {
width: 760px;
display: flex;
justify-content: flex-end;
}
</style>