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

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' })
 }
 
 // 新增自提门店
@@ -49,8 +50,3 @@ export const deleteDeliveryPickUpStore = async (id: number) => {
 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 })
-}

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([
@@ -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){
+  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()
-  }else{
-    message.error("当前登录人没绑定任何自提点")
-    loading.value = false
-    isUse.value = true
-  }
 })
 </script>
 <style lang="scss" scoped>

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>

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])
 }
 
 /** 确认选择时的触发事件 */

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,6 +123,7 @@
       </el-table-column>
     </el-table>
   </ContentWrap>
+
   <!-- 表单弹窗：添加/修改 -->
   <DeliveryPickUpStoreForm ref="formRef" @success="getList" />
   <!-- 表单弹窗：绑定店员 -->

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>

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>