crm_extend/src/pages/shipping-tracking2/index.vue

<template>
  <div class="w-[100vw] bg-white page-shipping-tracking2">
    <div
      v-loading="loading"
      class="pt-2 w-[100%] min-h-[100vh]"
    >
      <el-form inline>
        <el-form-item label="Container Num">
          <el-input
            size="small"
            v-model="containerNumber"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="REF">
          <el-input
            size="small"
            v-model="soRef"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-tooltip
            content="注意 Container Number 和 REF只能同时搜一个, 如果同时输入, 那只会用REF来搜"
          >
            <el-button
              size="small"
              @click="getList()"
              type="primary"
              :loading="loading"
            >
              搜索输入的单号/柜号
            </el-button>
          </el-tooltip>
          <el-button
            size="small"
            @click="getList(2)"
            type="warning"
            :loading="loading"
          >
            搜索所有未处理申请
          </el-button>
          <el-button
            size="small"
            :loading="loading"
            @click="exportFunc"
          >
            导出Excel
          </el-button>
          <el-button
            size="small"
            :loading="loading"
            @click="commit"
          >保存改动</el-button>
        </el-form-item>
      </el-form>
      <div
        class="mb-2"
        v-show="tabList.length"
      >
        <el-button-group>
          <el-button
            v-for="tab in tabList"
            :key="tab"
            size="small"
            :type="tab === currentTab ? 'primary' : ''"
            @click="currentTab = tab"
          >
            {{ tab.length ? tab : '未输入箱规' }}
          </el-button>
        </el-button-group>

        <div class="flex text-red-500 text-sm">
          当前筛选得 {{ computedList.length }} 条,
          <!-- <br /> -->
          从CRM共搜索得 {{ list.length }} 条记录
        </div>
      </div>
      <el-table
        :data="computedList"
        max-height="550"
        stripe
        size="small"
        :row-style="calcRowStyle"
        :row-class-name="
          (row: any) => {
            return row.editFlag ? 'table-row-edit' : ''
          }
        "
        border
      >
        <el-table-column
          fixed
          type="index"
          width="50"
        ></el-table-column>
        <el-table-column
          v-for="col in columnList"
          :key="col.prop"
          :width="col.width ? col.width : ''"
          :fixed="col.fixed ? col.fixed : false"
          :label="col.label"
          :prop="col.prop"
        >
          <template #default="scope">
            <div v-if="col.prop === 'Owner'">
              {{ getName(scope.row.Owner.id) }}
            </div>

            <div v-if="col.prop === 'Client_Label_Links'">
              <el-tooltip
                :content="scope.row.Client_Label_Links"
                v-if="scope.row.Client_Label_Links"
              >
                <a
                  :href="scope.row.Client_Label_Links"
                  target="_blank"
                >
                  点击会在新标签页打开
                </a>
              </el-tooltip>
            </div>

            <div v-if="col.prop === 'Artwork_Links'">
              <el-tooltip
                :content="scope.row.Artwork_Links"
                v-if="scope.row.Artwork_Links"
              >
                <a
                  :href="scope.row.Artwork_Links"
                  target="_blank"
                >
                  点击会在新标签页打开
                </a>
              </el-tooltip>
            </div>

            <div v-if="col.prop === 'Courier'">
              <el-input
                v-model="scope.row.Courier"
                @change="scope.row.editFlag = true"
                size="small"
              ></el-input>
            </div>
            <div v-if="col.prop === 'Tracking_No'">
              <el-input
                size="small"
                v-model="scope.row.Tracking_No"
                @change="scope.row.editFlag = true"
              ></el-input>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { defineComponent, ref, watch, computed, nextTick } from 'vue'
import {
  ElNotification,
  ElTable,
  ElTableColumn,
  ElInput,
  ElForm,
  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',
})
let loading = ref(false)
let list = ref([] as any[])
// @ts-ignore
const zoho = window.ZOHO
zoho.embeddedApp.on('PageLoad', function () {
  zoho.CRM.CONFIG.getCurrentUser().then(function (data: any) {
    if (Array.isArray(data.users) && data.users.length) {
      // const user = data.users[0]
      // console.log(user, 'user')
      // currentUser.value = user.id
      // currentUserName.value = user.full_name || ''
      // currentUserRawData.value = cloneDeep(user)
      // getList()
      getUserList()
    }
  })
})
let containerNumber = ref('')
let soRef = ref('')
let tabList = ref([] as any)
let currentTab = ref('')
let resetData = () => {
  list.value = []
  tabList.value = []
  currentTab.value = ''
}
let userList = ref(new Map())
let getUserList = () => {
  return zoho.CRM.API.coql({
    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) => {
        userList.value.set(i.id, i)
      })
    }
  })
}

let getName = (id: string) => {
  const temp = userList.value.get(id) || {}
  let firstName = temp.first_name || ''
  let lastName = temp.last_name || ''
  return firstName + ' ' + lastName
}
const columnList = [
  { label: 'Urgent', prop: 'Urgent' },
  { label: 'REF', prop: 'SO_Reference', width: 140 },
  { label: 'Sales Person', prop: 'Owner', width: 120 },
  {
    label: 'Qty to be sent',
    prop: 'Total_Actual_Product',
    width: 100,
  },
  {
    label: 'Qty (Carton)',
    prop: 'Total_Quantity_Carton',
    width: 130,
  },
  { label: 'Weight', prop: 'Total_Weight', width: 100 },
  { label: 'Cube', prop: 'Total_Cube', width: 100 },
  {
    label: 'AU Standard Pallet',
    prop: 'AU_Standard_Pallet',
    width: 150,
  },
  {
    label: 'Delivery Notes',
    prop: 'Delivery_Notes',
    width: 200,
  },
  {
    label: 'Client Label Links',
    prop: 'Client_Label_Links',
    width: 145,
  },
  { label: 'Artwork Link', prop: 'Artwork_Links', width: 145 },
  {
    label: 'Time Requirement',
    prop: 'Time_requirement',
    width: 150,
  },
  { label: 'Packing', prop: 'Packing', width: 100 },
  {
    label: 'Delivery Method',
    prop: 'Delivery_Method',
    width: 160,
  },
  { label: 'Carton Mark', prop: 'Carton_Mark', width: 150 },
  {
    label: 'Container_Number',
    prop: 'Container_Number',
    width: 150,
    fixed: 'right',
  },
  { label: 'Courier', prop: 'Courier', width: 180, fixed: 'right' },
  { label: 'Tracking No', prop: 'Tracking_No', width: 180, fixed: 'right' },
]
let getList = (type = 1) => {
  loading.value = true
  let sql =
    'select ' +
    columnList.map((i: any) => `Shipping_Tracking.${i.prop}`).join(',') +
    ' from Shipping_Tracking '

  let whereSQL =
    "  (Package_Type='SGL Package' and Confirm_send_to_Starshipit=true) "

  if (type === 2) {
    sql += ' where (Tracking_No is null or Courier is null) and' + whereSQL
  } else if (soRef.value) {
    sql = sql + ` where (SO_Reference like '%${soRef.value}%') and` + whereSQL
  } else if (containerNumber.value) {
    sql +=
      ` where (Container_Number like '%${containerNumber.value}%') and` +
      whereSQL
  } else {
    sql += ' where ' + whereSQL
  }

  return zoho.CRM.API.coql({
    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,
          }
        })
        const temp = res.data
          .filter(
            (i: any) =>
              ![null, 'null', '', '-', '_', 'N/A'].includes(i.Container_Number),
          )
          .map((i: any) => i.Container_Number)
        // tabList.value 去重
        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]
      } else if (res.status === 204) {
        ElNotification({
          type: 'warning',
          title: 'No Data Found',
          message: res.statusText || `zoho api return: ${res.status}`,
          duration: 3000,
        })
        resetData()
      } else {
        resetData()
      }
    })
    .catch(() => {
      resetData()
    })
    .finally(() => {
      loading.value = false
    })
}

let computedList = computed(() =>
  currentTab.value
    ? list.value.filter((i) => i.Container_Number === currentTab.value)
    : list.value.filter((i) => ['', 'null', null].includes(i.Container_Number)),
)
zoho.embeddedApp.init()
// 给表格加红绿背景. 颜色用的tailwind的 red green
const calcRowStyle = ($e: any) => {
  const result = {} as any
  if ($e.row.editFlag) result['background-color'] = 'rgb(187, 247, 208)'
  return result
}
// 帮我把导出表格的表头, 从columnList中获取的prop改为label, 但是表格其他数据不变
let exportFunc = () => {
  if (!computedList.value.length) {
    ElNotification({
      type: 'warning',
      title: '换个tab筛选数据吧',
      message: '当前表格没有数据可以导出',
      duration: 3000,
    })
    return
  }
  const sheetData = computedList.value.map((i) => {
    let result = {
      ...cloneDeep(i),
      Urgent: `${i.Urgent}`,
      Owner: getName(i.Owner.id),
    }
    delete result.id
    delete result.editFlag

    // 关键：根据 columnList 顺序构建导出对象
    let ordered: { [label: string]: any } = {}
    columnList.forEach((col) => {
      ordered[col.label] = result[col.prop]
    })
    return ordered
  })

  const sheet1 = XLSX.utils.json_to_sheet(sheetData, {
    header: columnList.map((i) => i.label),
  })

  const wb = XLSX.utils.book_new()

  sheet1['!cols'] = columnList.map((i) => {
    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')
}
const commit = () => {
  if (loading.value) return
  // loading.value = true
  ElMessage.info('正在开发中')
}
</script>
<style lang="scss" scoped></style>