整理商品管理模块

src/views/shop/merchantAccount/components/merchantAccountEdit.vue

@@ -18,7 +18,7 @@
         styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
       "
     >
-      <a-form-item label="选择商户" name="merchantId">
+      <a-form-item label="选择商户" name="merchantId" v-if="!merchantId">
         <SelectMerchant
           :placeholder="`选择商户`"
           class="input-item"
@@ -26,11 +26,18 @@
           @done="chooseMerchantId"
         />
       </a-form-item>
+      <a-form-item label="选择用户" name="userId" v-if="!isUpdate">
+        <SelectUser
+          :placeholder="`选择用户`"
+          class="input-item"
+          v-model:value="form.nickname"
+          @done="chooseUserId"
+        />
+      </a-form-item>
       <a-form-item label="选择角色" name="roleId">
         <SelectRole
           :placeholder="`选择角色`"
           class="input-item"
-          :type="`merchant`"
           v-model:value="form.roleName"
           @done="chooseRoleId"
         />
@@ -40,7 +47,7 @@
           allow-clear
           placeholder="请输入手机号码"
           maxlength="11"
-          :disabled="isUpdate"
+          :disabled="true"
           v-model:value="form.phone"
         />
       </a-form-item>
@@ -75,16 +82,20 @@
   import { ref, reactive, watch } from 'vue';
   import { Form, message } from 'ant-design-vue';
   import { assignObject, uuid } from 'ele-admin-pro';
-  import { addMerchantAccount, updateMerchantAccount } from '@/api/shop/merchantAccount';
+  import {
+    addMerchantAccount,
+    updateMerchantAccount
+  } from '@/api/shop/merchantAccount';
   import { MerchantAccount } from '@/api/shop/merchantAccount/model';
   import { useThemeStore } from '@/store/modules/theme';
   import { storeToRefs } from 'pinia';
   import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
   import { FormInstance } from 'ant-design-vue/es/form';
   import { FileRecord } from '@/api/system/file/model';
-  import {DictData} from "@/api/system/dict-data/model";
-  import {Merchant} from "@/api/shop/merchant/model";
-  import {Role} from "@/api/system/role/model";
+  import { DictData } from '@/api/system/dict-data/model';
+  import { Merchant } from '@/api/shop/merchant/model';
+  import { Role } from '@/api/system/role/model';
+  import { User } from '@/api/system/user/model';
 
   // 是否是修改
   const isUpdate = ref(false);
@@ -98,6 +109,8 @@
     visible: boolean;
     // 修改回显的数据
     data?: MerchantAccount | null;
+    // 商户ID
+    merchantId?: number | null;
   }>();
 
   const emit = defineEmits<{
@@ -121,6 +134,7 @@
     merchantId: undefined,
     merchantName: '',
     userId: undefined,
+    nickname: '',
     roleId: undefined,
     roleName: '',
     comments: undefined,
@@ -153,11 +167,11 @@
         trigger: 'blur'
       }
     ],
-    roleId: [
+    userId: [
       {
         required: true,
         type: 'number',
-        message: '请选择角色',
+        message: '请选择用户',
         trigger: 'blur'
       }
     ],
@@ -184,6 +198,14 @@
         message: '请填写真实姓名',
         trigger: 'blur'
       }
+    ],
+    roleId: [
+      {
+        required: true,
+        type: 'number',
+        message: '请选择角色权限',
+        trigger: 'blur'
+      }
     ]
   });
 
@@ -193,10 +215,17 @@
     form.merchantId = item.merchantId;
   };
 
+  const chooseUserId = (item: User) => {
+    form.userId = item.userId;
+    form.nickname = item.realName ? item.realName : item.nickname;
+    form.phone = item.phone;
+    form.realName = item.realName;
+  };
+
   const chooseRoleId = (item: Role) => {
     form.roleId = item.roleId;
     form.roleName = item.roleName;
-  }
+  };
 
   const { resetFields } = useForm(form, rules);
 
@@ -210,9 +239,14 @@
       .then(() => {
         loading.value = true;
         const formData = {
-          ...form
+          ...form,
+          merchantId: Number(props.merchantId)
+            ? props.merchantId
+            : form.merchantId
         };
-        const saveOrUpdate = isUpdate.value ? updateMerchantAccount : addMerchantAccount;
+        const saveOrUpdate = isUpdate.value
+          ? updateMerchantAccount
+          : addMerchantAccount;
         saveOrUpdate(formData)
           .then((msg) => {
             loading.value = false;

src/views/shop/merchantAccount/components/search.vue

@@ -7,13 +7,21 @@
       </template>
       <span>添加</span>
     </a-button>
+    <a-input-search
+      allow-clear
+      placeholder="请输入关键词"
+      v-model:value="where.keywords"
+      @pressEnter="reload"
+      @search="reload"
+    />
   </a-space>
 </template>
 
 <script lang="ts" setup>
   import { PlusOutlined } from '@ant-design/icons-vue';
-  import type { GradeParam } from '@/api/user/grade/model';
   import { watch } from 'vue';
+  import { UserParam } from '@/api/system/user/model';
+  import useSearch from '@/utils/use-search';
 
   const props = withDefaults(
     defineProps<{
@@ -23,8 +31,15 @@
     {}
   );
 
+  // 表单数据
+  const { where } = useSearch<UserParam>({
+    userId: undefined,
+    phone: undefined,
+    keywords: ''
+  });
+
   const emit = defineEmits<{
-    (e: 'search', where?: GradeParam): void;
+    (e: 'search', where?: UserParam): void;
     (e: 'add'): void;
     (e: 'remove'): void;
     (e: 'batchMove'): void;
@@ -35,6 +50,10 @@
     emit('add');
   };
 
+  const reload = () => {
+    emit('search', where);
+  };
+
   watch(
     () => props.selection,
     () => {}

src/views/shop/merchantAccount/index.vue

@@ -30,13 +30,11 @@
             </template>
             <template v-if="column.key === 'action'">
               <a-space>
-                <a @click="openEdit(record)">修改</a>
-                <a-divider type="vertical" />
                 <a-popconfirm
-                  title="确定要删除此记录吗？"
+                  title="确定要移除该门店用户吗？"
                   @confirm="remove(record)"
                 >
-                  <a class="ele-text-danger">删除</a>
+                  <a class="ele-text-danger">移除</a>
                 </a-popconfirm>
               </a-space>
             </template>
@@ -45,13 +43,18 @@
       </a-card>
 
       <!-- 编辑弹窗 -->
-      <MerchantAccountEdit v-model:visible="showEdit" :data="current" @done="reload" />
+      <MerchantAccountEdit
+        v-model:visible="showEdit"
+        :data="current"
+        :merchantId="merchantId"
+        @done="reload"
+      />
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { createVNode, ref } from 'vue';
+  import { createVNode, ref, watch } from 'vue';
   import { message, Modal } from 'ant-design-vue';
   import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
   import type { EleProTable } from 'ele-admin-pro';
@@ -62,8 +65,16 @@
   } from 'ele-admin-pro/es/ele-pro-table/types';
   import Search from './components/search.vue';
   import MerchantAccountEdit from './components/merchantAccountEdit.vue';
-  import { pageMerchantAccount, removeMerchantAccount, removeBatchMerchantAccount } from '@/api/shop/merchantAccount';
-  import type { MerchantAccount, MerchantAccountParam } from '@/api/shop/merchantAccount/model';
+  import {
+    pageMerchantAccount,
+    removeMerchantAccount,
+    removeBatchMerchantAccount
+  } from '@/api/shop/merchantAccount';
+  import type {
+    MerchantAccount,
+    MerchantAccountParam
+  } from '@/api/shop/merchantAccount/model';
+  import router from '@/router';
 
   // 表格实例
   const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
@@ -78,6 +89,8 @@
   const showMove = ref(false);
   // 加载状态
   const loading = ref(true);
+  // 门店ID
+  const merchantId = ref(0);
 
   // 表格数据源
   const datasource: DatasourceFunction = ({
@@ -90,6 +103,10 @@
     if (filters) {
       where.status = filters.status;
     }
+    if (merchantId.value > 0) {
+      where.merchantId = merchantId.value;
+    }
+    console.log('>>>>>>>>', merchantId.value);
     return pageMerchantAccount({
       ...where,
       ...orders,
@@ -101,35 +118,41 @@
   // 表格列配置
   const columns = ref<ColumnItem[]>([
     {
-      title: 'ID',
-      dataIndex: 'id',
-      key: 'id',
+      title: '用户ID',
+      dataIndex: 'userId',
+      key: 'userId',
       align: 'center',
-      width: 90,
+      width: 90
+    },
+    {
+      title: '店铺名称',
+      dataIndex: 'merchantName',
+      key: 'merchantName',
+      align: 'center'
     },
     {
       title: '账号',
       dataIndex: 'phone',
       key: 'phone',
-      align: 'center',
+      align: 'center'
     },
     {
       title: '真实姓名',
       dataIndex: 'realName',
       key: 'realName',
-      align: 'center',
+      align: 'center'
     },
     {
       title: '角色',
       dataIndex: 'roleName',
       key: 'roleName',
-      align: 'center',
+      align: 'center'
     },
     {
       title: '备注',
       dataIndex: 'comments',
       key: 'comments',
-      align: 'center',
+      align: 'center'
     },
     {
       title: '操作',
@@ -202,7 +225,9 @@
 
   /* 查询 */
   const query = () => {
+    console.log('query()', merchantId.value);
     loading.value = true;
+    reload();
   };
 
   /* 自定义行属性 */
@@ -218,7 +243,21 @@
       }
     };
   };
-  query();
+
+  watch(
+    () => router.currentRoute.value.params.id,
+    (id) => {
+      if (id) {
+        if (id == ':id') {
+          merchantId.value = 0;
+        } else {
+          merchantId.value = Number(id);
+        }
+      }
+      query();
+    },
+    { immediate: true }
+  );
 </script>
 
 <script lang="ts">