change: indent转单增加填充流程.

src/pages/indent-manage/indent/components/quoteRecord.vue

@@ -11,8 +11,141 @@
     >
       <el-table
         v-loading="loading"
+        row-key="id"
+        :expand-row-keys="expandRowKeys"
         :data="list"
       >
+        <el-table-column type="expand">
+          <template #default="props">
+            <el-form
+              :ref="($el) => setFormRef($el, props.row.id_string)"
+              :model="formList[props.$index]"
+              label-width="140"
+            >
+              <div class="flex justify-between flex-wrap">
+                <el-form-item
+                  :rules="{
+                    required: true,
+                  }"
+                  label="交付日期"
+                  prop="Expected_Delivery_Date"
+                >
+                  <el-date-picker
+                    v-model="formList[props.$index].Expected_Delivery_Date"
+                    format="YYYY-MM-DD"
+                    value-format="YYYY-MM-DD"
+                    type="date"
+                  ></el-date-picker>
+                </el-form-item>
+                <el-form-item
+                  :rules="{
+                    required: true,
+                  }"
+                  label="Brand Name"
+                  prop="Brand_Name"
+                >
+                  <el-input
+                    v-model="formList[props.$index].Brand_Name"
+                  ></el-input>
+                </el-form-item>
+                <el-form-item
+                  :rules="{
+                    required: true,
+                  }"
+                  label="Client Mailbox"
+                  prop="Client_Mailbox"
+                >
+                  <el-input
+                    v-model="formList[props.$index].Client_Mailbox"
+                  ></el-input>
+                </el-form-item>
+                <el-form-item
+                  :rules="{
+                    required: true,
+                  }"
+                  label-width="220"
+                  label="Shipping Unit/Building Name"
+                  prop="Shipping_Unit_Building_Name"
+                >
+                  <el-input
+                    v-model="formList[props.$index].Shipping_Unit_Building_Name"
+                  ></el-input>
+                </el-form-item>
+                <el-form-item
+                  :rules="{
+                    required: true,
+                  }"
+                  label="Shipping Street"
+                  prop="Shipping_Street"
+                >
+                  <el-input
+                    v-model="formList[props.$index].Shipping_Street"
+                  ></el-input>
+                </el-form-item>
+                <el-form-item
+                  :rules="{
+                    required: true,
+                  }"
+                  label="Shipping City"
+                  prop="Shipping_City"
+                >
+                  <el-input
+                    v-model="formList[props.$index].Shipping_City"
+                  ></el-input>
+                </el-form-item>
+                <el-form-item
+                  :rules="{
+                    required: true,
+                  }"
+                  label="Shipping State"
+                  prop="Shipping_State"
+                >
+                  <el-input
+                    v-model="formList[props.$index].Shipping_State"
+                  ></el-input>
+                </el-form-item>
+                <el-form-item
+                  :rules="{
+                    required: true,
+                  }"
+                  label="Shipping Code"
+                  prop="Shipping_Code"
+                >
+                  <el-input
+                    v-model="formList[props.$index].Shipping_Code"
+                  ></el-input>
+                </el-form-item>
+                <el-form-item
+                  :rules="{
+                    required: true,
+                  }"
+                  label="Shipping Country"
+                  prop="Shipping_Country"
+                >
+                  <el-input
+                    v-model="formList[props.$index].Shipping_Country"
+                  ></el-input>
+                </el-form-item>
+                <div></div>
+              </div>
+              <div class="flex justify-end">
+                <el-button
+                  size="small"
+                  @click="expandRowKeys = []"
+                >
+                  取消
+                </el-button>
+                <el-button
+                  size="small"
+                  type="primary"
+                  @click="submitChangeOrder(props.$index)"
+                >
+                  提交
+                </el-button>
+              </div>
+            </el-form>
+          </template>
+        </el-table-column>
         <el-table-column
           label="序号"
           width="80"
@@ -50,7 +183,7 @@
               size="small"
               type="primary"
               plain
-              @click="onChangeOrderClick(scope.row)"
+              @click="expandRowKeys.push(scope.row.id_string)"
             >
               转单
             </el-button>
@@ -82,6 +215,10 @@ import {
   ElPagination,
   ElMessage,
   ElMessageBox,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElDatePicker,
 } from 'element-plus'
 import { getCalcPriceRecord, generateOrder } from '@/api/indent'
 defineComponent({
@@ -114,7 +251,27 @@ const getCalcPriceRecordFunc = () => {
   loading.value = true
   getCalcPriceRecord({ id: id })
     .then((res: any) => {
-      if (res.code === 1) list.value = res.result.data || []
+      if (res.code === 1)
+        list.value =
+          res.result.data.map((i: any) => ({
+            ...i,
+            id_string: `${i.id}`,
+          })) || []
+
+      for (let i = 0; i < list.value.length; i++) {
+        formList.value.push({
+          Expected_Delivery_Date: '',
+          Brand_Name: '',
+          Client_Mailbox: '',
+          Shipping_Unit_Building_Name: '',
+          Shipping_Street: '',
+          Shipping_City: '',
+          Shipping_State: '',
+          Shipping_Code: '',
+          Order_Source: 'Indent App',
+          Contact_Name: { id: '4791186000057250001', name: '/' },
+        })
+      }
     })
     .finally(() => (loading.value = false))
 }
@@ -123,6 +280,26 @@ let close = (done = {} as any) => {
   if (typeof done === 'function') done()
 }
 
+const expandRowKeys = ref([] as string[])
+const formList = ref([] as any[])
+const formListRef = ref({} as any)
+const setFormRef = (el: any, key: string) => {
+  formListRef.value[`${key}`] = el
+}
+const submitChangeOrder = (index: number) => {
+  const key = list.value[index].id_string
+  const target: any = formListRef.value[`${key}`]
+
+  target.validate((valid: boolean) => {
+    if (!valid) return
+
+    const data = Object.assign({}, formList.value[index], {
+      id: list.value[index].id,
+    })
+    console.log(data, 'data')
+    onChangeOrderClick(data)
+  })
+}
 const onChangeOrderClick = (row: any) => {
   ElMessageBox.confirm('选择该条计价记录进行转单, 是否继续?', '提示', {
     confirmButtonText: '确定',
@@ -130,7 +307,7 @@ const onChangeOrderClick = (row: any) => {
     type: 'warning',
   }).then(() => {
     loading.value = true
-    generateOrder({ id: row.id })
+    generateOrder(row)
       .then((res: any) => {
         if (res.code === 1) {
           ElMessage.success('转单成功')
@@ -145,4 +322,10 @@ const onChangeOrderClick = (row: any) => {
   })
 }
 </script>
-<style lang="scss"></style>
+<style lang="scss">
+.dialog-change-order {
+  .el-form-item {
+    width: 49%;
+  }
+}
+</style>