change: indent 转单. 增加attn相关自动及半自动填充交互.

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

@@ -11,8 +11,8 @@
     >
       <el-table
         v-loading="loading"
-        row-key="id"
         :expand-row-keys="expandRowKeys"
+        row-key="id"
         :data="list"
       >
         <el-table-column type="expand">
@@ -72,6 +72,21 @@
                   ></el-input>
                 </el-form-item>
 
+                <el-form-item
+                  label="ATTN"
+                  prop="Primary_Contact"
+                >
+                  <el-input v-model="formList[props.$index].Primary_Contact">
+                    <template #append>
+                      <el-button @click="openATTNDialog(props.$index)">
+                        <el-icon :size="14">
+                          <Notebook></Notebook>
+                        </el-icon>
+                      </el-button>
+                    </template>
+                  </el-input>
+                </el-form-item>
+
                 <el-form-item
                   :rules="{
                     required: true,
@@ -83,6 +98,22 @@
                   <el-input
                     v-model="formList[props.$index].Shipping_Unit_Building_Name"
                   ></el-input>
+                  <!-- <el-select
+                    v-model="formList[props.$index].Shipping_Unit_Building_Name"
+                    allow-create
+                    filterable
+                    remote
+                    placeholder="enter directly or select a place"
+                    :remote-method="($e) => remoteSearchPlace($e, props.$index)"
+                    :loading="loading"
+                  >
+                    <el-option
+                      v-for="item in remoteOption[props.$index] as any[]"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    />
+                  </el-select> -->
                 </el-form-item>
                 <el-form-item
                   :rules="{
@@ -230,6 +261,59 @@
         ></el-pagination>
       </div>
     </el-dialog>
+    <el-dialog
+      v-model="show2"
+      class="attn-dialog"
+      title="选择地址"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      width="1150px"
+    >
+      <el-table
+        v-if="currentATTNList"
+        highlight-current-row
+        :data="currentATTNList"
+        max-height="70vh"
+        @current-change="selectATTN"
+      >
+        <el-table-column
+          type="index"
+          width="50"
+        ></el-table-column>
+        <el-table-column
+          width="150"
+          label="ATTN"
+          prop="Primary_Contact"
+        ></el-table-column>
+        <el-table-column
+          width="120"
+          label="Phone"
+          prop="Phone"
+        ></el-table-column>
+        <el-table-column
+          label="Shipping_Unit_Building_Name"
+          prop="Shipping_Unit_Building_Name"
+        ></el-table-column>
+        <el-table-column
+          label="Shipping_Street"
+          prop="Shipping_Street"
+        ></el-table-column>
+        <el-table-column
+          width="135"
+          label="Shipping_State"
+          prop="Shipping_State"
+        ></el-table-column>
+      </el-table>
+      <div class="flex justify-center pt-2">
+        <el-button
+          type="primary"
+          @click="onATTNSelect"
+        >
+          选择该项进行填充
+        </el-button>
+        <el-button @click="show2 = false">关闭</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 <script lang="ts" setup>
@@ -249,7 +333,9 @@ import {
   ElDatePicker,
   ElSelect,
   ElOption,
+  ElIcon,
 } from 'element-plus'
+import { Notebook } from '@element-plus/icons-vue'
 import { getCalcPriceRecord, generateOrder } from '@/api/indent'
 defineComponent({
   name: 'ComponentQuoteRecord',
@@ -260,8 +346,10 @@ const { visible = false, id = '' } = defineProps<{
 }>()
 const $emit = defineEmits(['update:visible'])
 let show = ref(false)
+let show2 = ref(false)
 let loading = ref(false)
 let list = ref([] as any[])
+// let remoteOption = ref([])
 
 watch(
   () => visible,
@@ -289,26 +377,63 @@ const getCalcPriceRecordFunc = () => {
           })) || []
 
       for (let i = 0; i < list.value.length; i++) {
+        const v = list.value[i].Accounts || ({} as any)
+        // remoteOption.value.push([])
         formList.value.push({
           Contract_Title: '',
           Expected_Delivery_Date: '',
           Brand_Name: '',
           Client_Mailbox: '',
-          Shipping_Unit_Building_Name: '',
-          Shipping_Street: '',
-          Shipping_City: '',
-          Shipping_State: '',
-          Shipping_Code: '',
+          Shipping_Unit_Building_Name: v.Billing_Unit_Building_Name || '',
+          Shipping_Street: v.Shipping_Street || '',
+          Shipping_City: v.Shipping_City || '',
+          Shipping_State: v.Shipping_State || '',
+          Shipping_Code: v.Shipping_Code || '',
+          Shipping_Country: v.Shipping_Country || '',
           Tax_Level: 'GST AU 10%',
           Order_Source: 'Indent App',
           Contact_Name: { id: '4791186000057250001', name: '/' },
+          Primary_Contact: '',
+          Phone: '',
         })
       }
     })
     .finally(() => (loading.value = false))
 }
+const currentATTNList = ref([] as any[])
+let currentATTNIndex = ref(0) // 当前第几行表单在选attn
+const openATTNDialog = (index: number) => {
+  show2.value = true
+  currentATTNList.value = list.value[index].AccountEndUser || []
+  currentATTN.value = {}
+  console.log(index, 'index')
+  currentATTNIndex.value = index || 0
+}
+let currentATTN = ref({} as any)
+const selectATTN = (value: any) => {
+  currentATTN.value = value || {}
+}
+const onATTNSelect = () => {
+  if (!currentATTN.value.id) {
+    ElMessage.error('请先点击选择一行地址数据, 再点击按钮')
+    return
+  }
+  const v = currentATTN.value
+  const target = formList.value[currentATTNIndex.value]
+  target.Shipping_Unit_Building_Name = v.Shipping_Unit_Building_Name || ''
+  target.Shipping_Street = v.Shipping_Street || ''
+  target.Shipping_City = v.Shipping_City || ''
+  target.Shipping_State = v.Shipping_State || ''
+  target.Shipping_Code = v.Shipping_Post_Code || ''
+  target.Shipping_Country = v.Shipping_Country || ''
+  target.Primary_Contact = v.Primary_Contact || ''
+  show2.value = false
+}
 let close = (done = {} as any) => {
   $emit('update:visible', false)
+  list.value = []
+  formList.value = []
+  // remoteOption.value = []
   if (typeof done === 'function') done()
 }
 
@@ -353,11 +478,22 @@ const onChangeOrderClick = (row: any) => {
       .finally(() => (loading.value = false))
   })
 }
+// const remoteSearchPlace = (str: string, index: number) => {
+//   console.log(str, 'str', index)
+//   if (!str.length) return
+//   const target = remoteOption.value[index] as any[]
+//   if (target && Array.isArray(target)) {
+//     target.push({ value: 1, label: 1 })
+//   }
+// }
 </script>
 <style lang="scss">
 .dialog-change-order {
   .el-form-item {
     width: 49%;
   }
+  .attn-dialog {
+    margin-top: 8vh;
+  }
 }
 </style>