change: crm包裹处理页面.数据保存功能.

src/pages/shipping-tracking2/index.vue

@@ -24,6 +24,7 @@
             content="注意 Container Number 和 REF只能同时搜一个, 如果同时输入, 那只会用REF来搜"
           >
             <el-button
+              class="custom-button"
               size="small"
               @click="getList()"
               type="primary"
@@ -48,10 +49,14 @@
             导出Excel
           </el-button>
           <el-button
+            class="custom-button"
+            type="primary"
             size="small"
             :loading="loading"
             @click="commit"
-          >保存改动</el-button>
+          >
+            保存改动
+          </el-button>
         </el-form-item>
       </el-form>
       <div
@@ -156,7 +161,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { defineComponent, ref, watch, computed, nextTick } from 'vue'
+import { defineComponent, ref, watch, computed } from 'vue'
 import {
   ElNotification,
   ElTable,
@@ -166,16 +171,11 @@ import {
   ElFormItem,
   ElButton,
   ElTooltip,
-  ElTabs,
-  ElTabPane,
   ElButtonGroup,
   ElMessage,
 } from 'element-plus'
 import cloneDeep from 'lodash.clonedeep'
-import dayjs from 'dayjs'
 import * as XLSX from 'xlsx'
-import request from '@/utils/axios'
-import { last } from 'lodash'
 
 defineComponent({
   name: 'ComponentShippingTracking2',
@@ -192,7 +192,6 @@ zoho.embeddedApp.on('PageLoad', function () {
       // currentUser.value = user.id
       // currentUserName.value = user.full_name || ''
       // currentUserRawData.value = cloneDeep(user)
-      // getList()
       getUserList()
     }
   })
@@ -212,7 +211,6 @@ let getUserList = () => {
     select_query:
       'select id,first_name,last_name,state from users where first_name is not null',
   }).then((res: any) => {
-    console.log(res, 'res')
     if (Array.isArray(res.data) && res.data.length) {
       // userList.value = res.data
       res.data.forEach((i: any) => {
@@ -281,7 +279,27 @@ const columnList = [
   { label: 'Courier', prop: 'Courier', width: 180, fixed: 'right' },
   { label: 'Tracking No', prop: 'Tracking_No', width: 180, fixed: 'right' },
 ]
+
+// 这两个变量是用来记录 当前筛选tab的, 在保存成功之后刷新数据时重新选上这个tab.
+let currentTypeResearch = ref(1)
+let currentTabResearch = ref('')
+watch(
+  () => currentTab.value,
+  (newVal: string) => {
+    currentTabResearch.value = newVal
+  },
+)
+
 let getList = (type = 1) => {
+  currentTypeResearch.value = type // 记录当前搜索类型
+  if (
+    type === 1 &&
+    soRef.value.trim().length < 1 &&
+    containerNumber.value.trim().length < 1
+  ) {
+    ElMessage.info('请输入Container Number 或 REF 来搜索')
+    return
+  }
   loading.value = true
   let sql =
     'select ' +
@@ -307,12 +325,13 @@ let getList = (type = 1) => {
     select_query: sql,
   })
     .then((res: any) => {
-      console.log(res, 'res')
       if (Array.isArray(res.data) && res.data.length) {
         list.value = res.data.map((i: any) => {
           return {
             ...i,
             editFlag: false,
+            Courier: i.Courier || '',
+            Tracking_No: i.Tracking_No || '',
           }
         })
         const temp = res.data
@@ -325,8 +344,13 @@ let getList = (type = 1) => {
         tabList.value = [...new Set(temp)]
         if (tabList.value.length) tabList.value.unshift('')
 
-        console.log(tabList.value.length, 'tabList.value.length')
-        if (tabList.value.length > 1) currentTab.value = tabList.value[1]
+        if (tabList.value.length > 1) {
+          currentTab.value =
+            currentTabResearch.value &&
+            tabList.value.includes(currentTabResearch.value)
+              ? currentTabResearch.value
+              : tabList.value[1]
+        }
       } else if (res.status === 204) {
         ElNotification({
           type: 'warning',
@@ -394,17 +418,116 @@ let exportFunc = () => {
   const wb = XLSX.utils.book_new()
 
   sheet1['!cols'] = columnList.map((i) => {
-    return { wpx: i.width ? i.width + 30 : 110 }
+    if (['Artwork_Links', 'Client_Label_Links'].includes(i.prop)) {
+      return { wpx: 400 }
+    } else {
+      return { wpx: i.width ? i.width + 30 : 110 }
+    }
   })
 
   XLSX.utils.book_append_sheet(wb, sheet1, 'sheet1')
   let name = currentTab.value || '未输入箱规'
-  XLSX.writeFile(wb, name + '.xlsx')
+  XLSX.writeFile(wb, name + '.xls')
 }
 const commit = () => {
   if (loading.value) return
-  // loading.value = true
-  ElMessage.info('正在开发中')
+
+  let data = computedList.value.map((i, index) => {
+    return {
+      editFlag: i.editFlag,
+      index,
+      id: i.id,
+      Courier: i.Courier.trim(),
+      Tracking_No: i.Tracking_No.trim(),
+    }
+  })
+  // console.log(data, 'data')
+  let data2 = data.filter((i) => i.editFlag)
+  // console.log(data2, 'data2')
+  loading.value = true
+  zoho.CRM.API.updateRecord({
+    Entity: 'Shipping_Tracking',
+    Trigger: ['workflow'],
+    APIData: data2.map((i) => {
+      return {
+        id: i.id,
+        Courier: i.Courier,
+        Tracking_No: i.Tracking_No,
+      }
+    }),
+  })
+    .then((res: any) => {
+      if (
+        Array.isArray(res.data) &&
+        res.data.length &&
+        res.data[0].code === 'SUCCESS'
+      ) {
+        if (res.data.every((i: any) => i.code === 'SUCCESS')) {
+          getList(currentTypeResearch.value)
+          ElNotification({
+            type: 'success',
+            title: '操作成功',
+            message: `共更新了 ${data2.length} 条数据`,
+            duration: 5000,
+          })
+          if (currentTypeResearch.value === 2) {
+            setTimeout(() => {
+              ElNotification({
+                type: 'info',
+                title: '注意',
+                message:
+                  '如果刚才是通过 搜索所有未处理申请 按钮 搜索的, 那么刷新数据之后刚才改动的数据 很可能 不会 刷新出来, 因为 Courier 和 Tracking No 已经有值了(刚才更新的). 如果要重查这些数据, 需要用 Container Number 或 REF 来搜索.',
+                duration: 0,
+              })
+            }, 15000)
+          }
+        } else {
+          let errorList: number[] = []
+          res.data.forEach((i: any, index: number) => {
+            if (i.code !== 'SUCCESS') {
+              errorList.push(index)
+            }
+          })
+
+          let a: number[] = errorList.map((i) => data2[i].index + 1)
+          ElNotification({
+            type: 'error',
+            title: '部分操作失败',
+            message: `第 ${a.join(', ')} 条数据操作失败, 请检查数据是否正确`,
+            duration: 0,
+          })
+        }
+
+        // 重新获取数据
+      } else {
+        ElNotification({
+          type: 'error',
+          title: '操作失败, 请稍后再试或者联系管理员',
+          message: res.statusText || `zoho api return: ${res.status}`,
+          duration: 5000,
+        })
+      }
+    })
+    .finally(() => {
+      loading.value = false
+    })
 }
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.el-button.custom-button {
+  background-image: linear-gradient(
+    171deg,
+    rgb(28, 74, 136) 49%,
+    rgb(0, 130, 193) 100%
+  );
+  background-color: rgb(97, 165, 245);
+  &:hover,
+  &:active {
+    background-image: linear-gradient(
+      171deg,
+      rgb(28, 74, 136) 49%,
+      rgb(22, 208, 239) 100%
+    );
+  }
+}
+</style>