【代码优化】商城：门店自提的员工绑定

2024-10-13 09:47:12 +08:00 · 2024-10-13 09:47:12 +08:00 · dcf1ad6b38
parent ca9a389ae8
commit dcf1ad6b38
7 changed files with 122 additions and 136 deletions
--- a/src/api/mall/trade/delivery/pickUpStore/index.ts
+++ b/src/api/mall/trade/delivery/pickUpStore/index.ts
@ -13,10 +13,11 @@ export interface DeliveryPickUpStoreVO {
  latitude: number
  longitude: number
  status: number
+  verifyUserIds: number[] // 绑定用户编号组数
 }

 // 查询自提门店列表
-export const getDeliveryPickUpStorePage = async (params) => {
+export const getDeliveryPickUpStorePage = async (params: any) => {
  return await request.get({ url: '/trade/delivery/pick-up-store/page', params })
 }

@ -26,8 +27,8 @@ export const getDeliveryPickUpStore = async (id: number) => {
 }

 // 查询自提门店精简列表
-export const getListAllSimple = async (): Promise<DeliveryPickUpStoreVO[]> => {
-  return await request.get({ url: '/trade/delivery/pick-up-store/list-all-simple' })
+export const getSimpleDeliveryPickUpStoreList = async (): Promise<DeliveryPickUpStoreVO[]> => {
+  return await request.get({ url: '/trade/delivery/pick-up-store/simple-list' })
 }

 // 新增自提门店
@ -45,12 +46,7 @@ export const deleteDeliveryPickUpStore = async (id: number) => {
  return await request.delete({ url: '/trade/delivery/pick-up-store/delete?id=' + id })
 }

-//绑定自提店员
+// 绑定自提店员
 export const bindStoreStaffId = async (data: any) => {
  return await request.post({ url: '/trade/delivery/pick-up-store/bind', data })
 }
-
-//查询门店绑定情况
-export const getDeliveryPickUpStoreStaff = async (id: number) => {
-  return await request.get({ url: '/trade/delivery/pick-up-store/get-store-staff?id=' + id })
-}
--- a/src/views/mall/trade/delivery/pickUpOrder/index.vue
+++ b/src/views/mall/trade/delivery/pickUpOrder/index.vue
@ -72,7 +72,13 @@
          <Icon class="mr-5px" icon="ep:refresh" />
          重置
        </el-button>
-        <el-button @click="handlePickup" type="success" plain v-hasPermi="['trade:order:pick-up']" :disabled="isUse">
+        <el-button
+          @click="handlePickup"
+          type="success"
+          plain
+          v-hasPermi="['trade:order:pick-up']"
+          :disabled="isUse"
+        >
          <Icon class="mr-5px" icon="ep:check" />
          核销
        </el-button>
@ -221,26 +227,20 @@ import { DeliveryTypeEnum } from '@/utils/constants'
 import { TradeOrderSummaryRespVO } from '@/api/mall/trade/order'
 import { DeliveryPickUpStoreVO } from '@/api/mall/trade/delivery/pickUpStore'
 import OrderPickUpForm from '@/views/mall/trade/order/form/OrderPickUpForm.vue'
-import { ref, onMounted } from "vue";
+import { ref, onMounted } from 'vue'
+import { useUserStore } from '@/store/modules/user'
 const message = useMessage() // 消息弹窗

-const port = ref("");
-const ports = ref([]);
-const reader = ref("");
+const port = ref('')
+const ports = ref([])
+const reader = ref('')

 defineOptions({ name: 'PickUpOrder' })

-// 列表的加载中
-const loading = ref(true)
-// 列表的总页数
-const total = ref(2)
-// 列表的数据
-const list = ref<TradeOrderApi.OrderVO[]>([])
-// 搜索的表单
-const queryFormRef = ref<FormInstance>()
-const serialPort = ref(false)
-const isUse = ref(true)
-// 初始表单参数
+const loading = ref(true) // 列表的加载中
+const total = ref(2) // 列表的总页数
+const list = ref<TradeOrderApi.OrderVO[]>([]) // 列表的数据
+const queryFormRef = ref<FormInstance>() // 搜索的表单
 const INIT_QUERY_PARAMS = {
  // 页数
  pageNo: 1,
@ -251,15 +251,15 @@ const INIT_QUERY_PARAMS = {
  // 配送方式
  deliveryType: DeliveryTypeEnum.PICK_UP.type,
  // 自提门店
-  pickUpStoreId: undefined
-}
+  pickUpStoreId: -1
+} // 初始表单参数

-// 表单搜索
-const queryParams = ref({ ...INIT_QUERY_PARAMS })
-// 订单搜索类型 queryParam
-const queryType = reactive({ queryParam: 'no' })
-// 订单统计数据
-const summary = ref<TradeOrderSummaryRespVO>()
+const queryParams = ref({ ...INIT_QUERY_PARAMS }) // 表单搜索
+const queryType = reactive({ queryParam: 'no' }) // 订单搜索类型 queryParam
+const summary = ref<TradeOrderSummaryRespVO>() // 订单统计数据
+
+const serialPort = ref(false) // 是否连接扫码枪
+const isUse = ref(true) // 是否可核销

 // 订单聚合搜索 select 类型配置（动态搜索）
 const dynamicSearchList = ref([
@ -308,7 +308,7 @@ const handleQuery = async () => {
 const resetQuery = () => {
  queryFormRef.value?.resetFields()
  queryParams.value = { ...INIT_QUERY_PARAMS }
-  if(pickUpStoreList.value.length > 0) {
+  if (pickUpStoreList.value.length > 0) {
    queryParams.value.pickUpStoreId = pickUpStoreList.value[0].id
  }
  handleQuery()
@ -317,7 +317,12 @@ const resetQuery = () => {
 /** 自提门店精简列表 */
 const pickUpStoreList = ref<DeliveryPickUpStoreVO[]>([])
 const getPickUpStoreList = async () => {
-  pickUpStoreList.value = await PickUpStoreApi.getListAllSimple()
+  pickUpStoreList.value = await PickUpStoreApi.getSimpleDeliveryPickUpStoreList()
+  // 移除自己无法核销的门店
+  const userId = useUserStore().getUser.id
+  pickUpStoreList.value = pickUpStoreList.value.filter((item) =>
+    item.verifyUserIds?.includes(userId)
+  )
 }

 /** 显示核销表单 */
@ -330,85 +335,92 @@ const handlePickup = () => {
 const connectToSerialPort = async () => {
  try {
    // 判断浏览器支持串口通信
-    if ("serial" in navigator && navigator.serial != null && typeof navigator.serial === 'object' && "requestPort" in navigator.serial) {
+    if (
+      'serial' in navigator &&
+      navigator.serial != null &&
+      typeof navigator.serial === 'object' &&
+      'requestPort' in navigator.serial
+    ) {
      // 提示用户选择一个串口
-      port.value = await navigator.serial.requestPort();
+      port.value = await navigator.serial.requestPort()
    } else {
-      message.error("浏览器不支持扫码枪连接，请更换浏览器重试")
+      message.error('浏览器不支持扫码枪连接，请更换浏览器重试')
      return
    }

    // 获取用户之前授予该网站访问权限的所有串口。
-    ports.value = await navigator.serial.getPorts();
+    ports.value = await navigator.serial.getPorts()

    // console.log(port.value, ports.value);
-    console.log(port.value);
+    // console.log(port.value)
    // 等待串口打开
-    await port.value.open({ baudRate: 9600 , dataBits: 8 , stopBits: 2});
+    await port.value.open({ baudRate: 9600, dataBits: 8, stopBits: 2 })

    // console.log(typeof port.value);
-    message.success("成功连接扫码枪")
-    serialPort.value = true;
+    message.success('成功连接扫码枪')
+    serialPort.value = true
    // readData(port.value);
-    readData();
+    readData()
  } catch (error) {
    // 处理连接串口出错的情况
-    console.log("Error connecting to serial port:", error);
+    console.log('Error connecting to serial port:', error)
  }
-};
+}

 /** 监听扫码枪输入 */
 const readData = async () => {
-  reader.value = port.value.readable.getReader();
-  let data = ""; //扫码数据
+  reader.value = port.value.readable.getReader()
+  let data = '' //扫码数据
  // 监听来自串口的数据
  while (true) {
-    const { value, done } = await reader.value.read();
+    const { value, done } = await reader.value.read()
    if (done) {
      // 允许稍后关闭串口
-      reader.value.releaseLock();
-      break;
+      reader.value.releaseLock()
+      break
    }
    // 获取发送的数据
-    const serialData = new TextDecoder().decode(value);
-    data = `${data}${serialData}`;
-    if (serialData.includes("\r")) {
+    const serialData = new TextDecoder().decode(value)
+    data = `${data}${serialData}`
+    if (serialData.includes('\r')) {
      //读取结束
-      let codeData = data.replace("\r","");
-      data = ""; //清空下次读取不会叠加
-      console.log(`二维码数据:${codeData}`);
+      let codeData = data.replace('\r', '')
+      data = '' //清空下次读取不会叠加
+      console.log(`二维码数据:${codeData}`)
      //处理拿到数据逻辑
      pickUpForm.value.open(codeData)
    }
  }
-};
+}

 /** 断开扫码枪 */
 const cutPort = async () => {
-  if (port.value !== "") {
-    await reader.value.cancel();
-    await port.value.close();
-    port.value = "";
-    console.log("断开扫码枪连接");
-    message.success("已成功断开扫码枪连接")
-    serialPort.value = false;
+  if (port.value !== '') {
+    await reader.value.cancel()
+    await port.value.close()
+    port.value = ''
+    console.log('断开扫码枪连接')
+    message.success('已成功断开扫码枪连接')
+    serialPort.value = false
  } else {
-    message.warning("请先连接或打开扫码枪")
+    message.warning('请先连接或打开扫码枪')
  }
-};
+}

 /** 初始化 **/
 onMounted(async () => {
  await getPickUpStoreList()
-  if(pickUpStoreList.value.length > 0){
-    queryParams.value.pickUpStoreId = pickUpStoreList.value[0].id
-    isUse.value = false
-    await getList()
-  }else{
-    message.error("当前登录人没绑定任何自提点")
+  if (pickUpStoreList.value.length === 0) {
+    message.error('当前登录人没绑定任何自提点')
    loading.value = false
    isUse.value = true
+    return
  }
+
+  // 查询
+  queryParams.value.pickUpStoreId = pickUpStoreList.value[0].id
+  isUse.value = false
+  await getList()
 })
 </script>
 <style lang="scss" scoped>
--- a/src/views/mall/trade/delivery/pickUpStore/DeliveryPickUpStoreBindForm.vue
+++ b/src/views/mall/trade/delivery/pickUpStore/DeliveryPickUpStoreBindForm.vue
@ -10,18 +10,18 @@
      <el-row>
        <el-col :span="24">
          <el-form-item label="门店名称" prop="name">
-            <el-input v-model="formData.name" placeholder="请输入门店名称" :disabled="true"/>
+            <el-input v-model="formData.name" placeholder="请输入门店名称" readonly />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
-          <el-form-item label="门店店员" prop="storeStaffIds">
+          <el-form-item label="门店店员" prop="verifyUserIds">
            <el-button type="primary" @click="storeStaffTableSelect.open()">选择店员</el-button>
          </el-form-item>
          <!-- 店员列表 -->
-          <ContentWrap v-if="usersList.length > 0">
-            <el-table :data="usersList">
+          <ContentWrap v-if="formData.verifyUsers.length > 0">
+            <el-table :data="formData.verifyUsers">
              <el-table-column label="编号" align="center" prop="id" />
              <el-table-column
                label="用户昵称"
@ -56,15 +56,16 @@
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
-  <StoreStaffTableSelect ref="storeStaffTableSelect" @change="changeStoreStaff"/>
+
+  <!-- 选择员工弹窗 -->
+  <StoreStaffTableSelect ref="storeStaffTableSelect" @change="handleSelect" />
 </template>
 <script setup lang="ts">
 import * as DeliveryPickUpStoreApi from '@/api/mall/trade/delivery/pickUpStore'
 import StoreStaffTableSelect from './components/StoreStaffTableSelect.vue'
-import {DICT_TYPE} from "@/utils/dict";
+import { DICT_TYPE } from '@/utils/dict'

 const message = useMessage() // 消息弹窗
-const { t } = useI18n() // 国际化

 const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
@ -72,12 +73,10 @@ const formLoading = ref(false) // 表单的加载中：1）修改时的数据加
 const formData = ref({
  id: undefined,
  name: '',
-  storeStaffIds: [],
-  storeStaffs: [],
-})
-const formRules = reactive({
-  name: [{ required: true, message: '门店名称不能为空', trigger: 'blur' }],
+  verifyUserIds: [],
+  verifyUsers: []
 })
+const formRules = reactive({})
 const formRef = ref() // 表单 Ref
 const storeStaffTableSelect = ref() // 表单 Ref

@ -88,7 +87,7 @@ const open = async (id: number) => {
  resetForm()
  formLoading.value = true
  try {
-    await getList(id)
+    formData.value = await DeliveryPickUpStoreApi.getDeliveryPickUpStore(id)
  } finally {
    formLoading.value = false
  }
@ -97,7 +96,6 @@ defineExpose({ open }) // 提供 open 方法，用于打开弹窗

 /** 提交表单 */
 const submitForm = async () => {
-  formData.value.storeStaffIds = usersList.value.map(item => item.id) as [];
  // 校验表单
  if (!formRef) return
  const valid = await formRef.value.validate()
@ -105,42 +103,31 @@ const submitForm = async () => {
  // 提交请求
  formLoading.value = true
  try {
-    const data = formData.value
+    const data = {
+      id: formData.value.id,
+      verifyUserIds: formData.value.verifyUsers.map((item: any) => item.id)
+    }
    await DeliveryPickUpStoreApi.bindStoreStaffId(data)
-    message.success("绑定成功")
+    message.success('绑定成功')
    dialogVisible.value = false
  } finally {
    formLoading.value = false
  }
 }

-/** 删除按钮操作 */
-const handleDelete = async (id: number) => {
-  try {
-    // 删除的二次确认
-    await message.delConfirm()
-    // 发起删除
-    const index = usersList.value.findIndex(item => {
-      if (item.id == id){
-        return true;
-      }
-    })
-    usersList.value.splice(index, 1);
-    //await DeliveryPickUpStoreStaffApi.deleteDeliveryPickUpStoreStaff(id,formData.value.id)
-    message.success(t('common.delSuccess'))
-    // 刷新列表
-    //await getList(formData.value.id)
-  } catch {}
+/** 处理选择员工操作 */
+const handleSelect = (checkedUsers: []) => {
+  formData.value.verifyUsers = checkedUsers
 }

-/**
- * 查询自提点员工绑定关系
- */
-const getList = async (id: number) => {
-  formData.value = await DeliveryPickUpStoreApi.getDeliveryPickUpStoreStaff(id)
-  if(formData.value.storeStaffs){
-    usersList.value = formData.value.storeStaffs;
-  }
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  const index = formData.value.verifyUsers.findIndex((item: any) => {
+    if (item.id == id) {
+      return true
+    }
+  })
+  formData.value.verifyUsers.splice(index, 1)
 }

 /** 重置表单 */
@ -148,14 +135,9 @@ const resetForm = () => {
  formData.value = {
    id: undefined,
    name: '',
-    storeStaffIds: [],
-    storeStaffs: [],
+    verifyUserIds: [],
+    verifyUsers: []
  }
  formRef.value?.resetFields()
 }
-
-const usersList = ref([])
-const changeStoreStaff = (checkedUsers : []) => {
-  usersList.value = checkedUsers
-}
 </script>
--- a/src/views/mall/trade/delivery/pickUpStore/components/StoreStaffTableSelect.vue
+++ b/src/views/mall/trade/delivery/pickUpStore/components/StoreStaffTableSelect.vue
@ -1,3 +1,4 @@
+<!-- TODO 芋艿：这块后续抽个独立的组件出来 -->
 <template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" width="60%">
    <el-row :gutter="20">
@ -147,8 +148,7 @@ const checkedUsers = ref([])
 // 选中状态：key为用户ID，value为是否选中
 const checkedStatus = ref<Record<string, boolean>>({})

-
-const dialogTitle = "选择店员"
+const dialogTitle = '选择店员'
 const dialogVisible = ref(false)
 const loading = ref(true) // 列表的加载中
 const total = ref(0) // 列表的总页数
@ -221,11 +221,7 @@ const handleCheckAll = (checked: boolean) => {
 * @param combinationActivity 活动
 * @param isCalcCheckAll 是否计算全选
 */
-const handleCheckOne = (
-  checked: boolean,
-  combinationActivity,
-  isCalcCheckAll: boolean
-) => {
+const handleCheckOne = (checked: boolean, combinationActivity, isCalcCheckAll: boolean) => {
  if (checked) {
    checkedUsers.value.push(combinationActivity as never)
    checkedStatus.value[combinationActivity.id] = true
@ -245,8 +241,7 @@ const handleCheckOne = (
 }

 // 查找活动在已选中活动列表中的索引
-const findCheckedIndex = (user) =>
-  checkedUsers.value.findIndex((item) => item.id === user.id)
+const findCheckedIndex = (user) => checkedUsers.value.findIndex((item) => item.id === user.id)

 // 计算全选框状态
 const calculateIsCheckAll = () => {
@ -260,7 +255,7 @@ const calculateIsCheckAll = () => {
 const handleEmitChange = () => {
  // 关闭弹窗
  dialogVisible.value = false
-  emits("change", [...checkedUsers.value])
+  emits('change', [...checkedUsers.value])
 }

 /** 确认选择时的触发事件 */
--- a/src/views/mall/trade/delivery/pickUpStore/index.vue
+++ b/src/views/mall/trade/delivery/pickUpStore/index.vue
@ -93,7 +93,7 @@
        prop="createTime"
        width="180"
      />
-      <el-table-column align="center" label="操作">
+      <el-table-column align="center" label="操作" min-width="110">
        <template #default="scope">
          <el-button
            v-hasPermi="['trade:delivery:pick-up-store:update']"
@ -104,7 +104,7 @@
            编辑
          </el-button>
          <el-button
-            v-hasPermi="['trade:delivery:pick-up-store:bind']"
+            v-hasPermi="['trade:delivery:pick-up-store:update']"
            link
            type="primary"
            @click="openFormBind(scope.row.id)"
@ -123,10 +123,11 @@
      </el-table-column>
    </el-table>
  </ContentWrap>
+
  <!-- 表单弹窗：添加/修改 -->
  <DeliveryPickUpStoreForm ref="formRef" @success="getList" />
  <!-- 表单弹窗：绑定店员 -->
-  <DeliveryPickUpStoreBindForm ref="formBindRef"/>
+  <DeliveryPickUpStoreBindForm ref="formBindRef" />
 </template>
 <script lang="ts" name="DeliveryPickUpStore" setup>
 import * as DeliveryPickUpStoreApi from '@/api/mall/trade/delivery/pickUpStore'
--- a/src/views/mall/trade/order/index.vue
+++ b/src/views/mall/trade/order/index.vue
@ -351,7 +351,7 @@ const deliveryExpressList = ref<DeliveryExpressApi.DeliveryExpressVO[]>([]) //
 /** 初始化 **/
 onMounted(async () => {
  await getList()
-  pickUpStoreList.value = await PickUpStoreApi.getListAllSimple()
+  pickUpStoreList.value = await PickUpStoreApi.getSimpleDeliveryPickUpStoreList()
  deliveryExpressList.value = await DeliveryExpressApi.getSimpleDeliveryExpressList()
 })
 </script>
--- a/src/views/member/user/detail/UserOrderList.vue
+++ b/src/views/member/user/detail/UserOrderList.vue
@ -273,7 +273,7 @@ const openDetail = (id: number) => {
 /** 初始化 **/
 onMounted(async () => {
  await getList()
-  pickUpStoreList.value = await PickUpStoreApi.getListAllSimple()
+  pickUpStoreList.value = await PickUpStoreApi.getSimpleDeliveryPickUpStoreList()
  deliveryExpressList.value = await DeliveryExpressApi.getSimpleDeliveryExpressList()
 })
 </script>