From 956a84f7b1f007dee343c7129cd8107b3158a5a6 Mon Sep 17 00:00:00 2001
From: 13218645326 <sjf13651675634@163.com>
Date: Wed, 6 Dec 2023 11:02:12 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=A2=E5=8D=95=E7=A1=AE=E8=AE=A4=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E6=90=AD=E5=BB=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/elementCom.ts                       |  44 ++++++
 .../orderManagement/orderCom/orderConfirm.vue | 143 ++++++++++++------
 2 files changed, 141 insertions(+), 46 deletions(-)
 create mode 100644 src/utils/elementCom.ts

diff --git a/src/utils/elementCom.ts b/src/utils/elementCom.ts
new file mode 100644
index 0000000..a9081da
--- /dev/null
+++ b/src/utils/elementCom.ts
@@ -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',
+      })
+    })
+}
\ No newline at end of file
diff --git a/src/views/user/orderManagement/orderCom/orderConfirm.vue b/src/views/user/orderManagement/orderCom/orderConfirm.vue
index 94d0776..a30ca6c 100644
--- a/src/views/user/orderManagement/orderCom/orderConfirm.vue
+++ b/src/views/user/orderManagement/orderCom/orderConfirm.vue
@@ -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>