【代码优化】商城：分销用户的创建

Author: YunaiV

src/views/mall/trade/brokerage/user/CreateUserForm.vue renamed to src/views/mall/trade/brokerage/user/BrokerageUserCreateForm.vue

@@ -5,21 +5,34 @@
       v-loading="formLoading"
       :model="formData"
       :rules="formRules"
-      label-width="80"
+      label-width="90"
     >
       <el-row :gutter="20">
         <el-col :span="12" :xs="24">
-          <el-form-item label="可用佣金" prop="price">
-            <el-input-number v-model="formData.price" :min="0" class="w-1/1!" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" :xs="24">
-          <el-form-item label="冻结佣金" prop="price">
-            <el-input-number v-model="formData.frozenPrice" :min="0" class="w-1/1!" />
+          <el-form-item label="分销员" prop="userId">
+            <el-input
+              v-model="formData.userId"
+              v-loading="formLoading"
+              placeholder="请输入分销员编号"
+            >
+              <template #append>
+                <el-button @click="handleGetUser(formData.userId, '分销员')">
+                  <Icon class="mr-5px" icon="ep:search" />
+                </el-button>
+              </template>
+            </el-input>
           </el-form-item>
+          <!-- 展示分销员的信息 -->
+          <el-descriptions v-if="userInfo.user" :column="1" border>
+            <el-descriptions-item label="头像">
+              <el-avatar :src="userInfo.user?.avatar" />
+            </el-descriptions-item>
+            <el-descriptions-item label="昵称">{{ userInfo.user?.nickname }}</el-descriptions-item>
+          </el-descriptions>
         </el-col>
+
         <el-col :span="12" :xs="24">
-          <el-form-item label="推广人" prop="bindUserId">
+          <el-form-item label="上级推广人" prop="bindUserId">
             <el-input
               v-model="formData.bindUserId"
               v-loading="formLoading"
@@ -49,40 +62,6 @@
             </el-descriptions-item>
           </el-descriptions>
         </el-col>
-        <el-col :span="12" :xs="24">
-          <el-form-item label="分销员" prop="userId">
-            <el-input
-              v-model="formData.userId"
-              v-loading="formLoading"
-              placeholder="请输入分销员编号"
-            >
-              <template #append>
-                <el-button @click="handleGetUser(formData.userId, '分销员')">
-                  <Icon class="mr-5px" icon="ep:search" />
-                </el-button>
-              </template>
-            </el-input>
-          </el-form-item>
-          <!-- 展示分销员的信息 -->
-          <el-descriptions v-if="userInfo.user" :column="1" border>
-            <el-descriptions-item label="头像">
-              <el-avatar :src="userInfo.user?.avatar" />
-            </el-descriptions-item>
-            <el-descriptions-item label="昵称">{{ userInfo.user?.nickname }}</el-descriptions-item>
-            <el-descriptions-item label="推广资格">
-              <el-switch
-                v-model="formData.brokerageEnabled"
-                :disabled="!checkPermi(['trade:brokerage-user:update-bind-user'])"
-                active-text="有"
-                inactive-text="无"
-                inline-prompt
-              />
-            </el-descriptions-item>
-            <el-descriptions-item label="成为推广员的时间">
-              {{ formatDate(userInfo.user?.brokerageTime) }}
-            </el-descriptions-item>
-          </el-descriptions>
-        </el-col>
       </el-row>
     </el-form>
     <template #footer>
@@ -95,7 +74,6 @@
 import * as BrokerageUserApi from '@/api/mall/trade/brokerage/user'
 import * as UserApi from '@/api/member/user'
 import { formatDate } from '@/utils/formatTime'
-import { checkPermi } from '@/utils/permission'
 
 defineOptions({ name: 'CreateUserForm' })
 
@@ -107,9 +85,7 @@ const formLoading = ref(false) // 表单的加载中：1）修改时的数据加
 const formData = ref({
   userId: undefined,
   bindUserId: undefined,
-  brokerageEnabled: false,
-  price: 0,
-  frozenPrice: 0
+  brokerageEnabled: false
 })
 const formRef = ref() // 表单 Ref
 const formRules = reactive({

src/views/mall/trade/brokerage/user/UpdateBindUserForm.vue renamed to src/views/mall/trade/brokerage/user/BrokerageUserUpdateForm.vue

@@ -43,8 +43,8 @@
 import * as BrokerageUserApi from '@/api/mall/trade/brokerage/user'
 import { formatDate } from '@/utils/formatTime'
 
-/** 修改上级推广人表单 */
-defineOptions({ name: 'UpdateBindUserForm' })
+/** 修改分销用户 */
+defineOptions({ name: 'BrokerageUserUpdateForm' })
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗

src/views/mall/trade/brokerage/user/index.vue

@@ -194,24 +194,24 @@
     />
   </ContentWrap>
   <!-- 修改上级推广人表单 -->
-  <UpdateBindUserForm ref="updateBindUserFormRef" @success="getList" />
+  <BrokerageUserUpdateForm ref="updateFormRef" @success="getList" />
   <!-- 推广人列表 -->
-  <BrokerageUserListDialog ref="brokerageUserListDialogRef" />
+  <BrokerageUserListDialog ref="listDialogRef" />
   <!-- 推广订单列表 -->
-  <BrokerageOrderListDialog ref="brokerageOrderListDialogRef" />
+  <BrokerageOrderListDialog ref="orderDialogRef" />
   <!-- 创建分销员 -->
-  <CreateUserForm ref="createUserFormRef" />
+  <BrokerageUserCreateForm ref="createFormRef" />
 </template>
 
 <script lang="ts" setup>
 import { dateFormatter } from '@/utils/formatTime'
 import * as BrokerageUserApi from '@/api/mall/trade/brokerage/user'
 import { checkPermi } from '@/utils/permission'
 import { fenToYuanFormat } from '@/utils/formatter'
-import UpdateBindUserForm from '@/views/mall/trade/brokerage/user/UpdateBindUserForm.vue'
+import BrokerageUserUpdateForm from '@/views/mall/trade/brokerage/user/BrokerageUserUpdateForm.vue'
 import BrokerageUserListDialog from '@/views/mall/trade/brokerage/user/BrokerageUserListDialog.vue'
 import BrokerageOrderListDialog from '@/views/mall/trade/brokerage/user/BrokerageOrderListDialog.vue'
-import CreateUserForm from '@/views/mall/trade/brokerage/user/CreateUserForm.vue'
+import BrokerageUserCreateForm from '@/views/mall/trade/brokerage/user/BrokerageUserCreateForm.vue'
 
 defineOptions({ name: 'TradeBrokerageUser' })
 
@@ -271,27 +271,27 @@ const handleCommand = (command: string, row: BrokerageUserApi.BrokerageUserVO) =
 }
 
 /** 打开推广人列表 */
-const brokerageUserListDialogRef = ref()
+const listDialogRef = ref()
 const openBrokerageUserTable = (id: number) => {
-  brokerageUserListDialogRef.value.open(id)
+  listDialogRef.value.open(id)
 }
 
 /** 打开推广订单列表 */
-const brokerageOrderListDialogRef = ref()
+const orderDialogRef = ref()
 const openBrokerageOrderTable = (id: number) => {
-  brokerageOrderListDialogRef.value.open(id)
+  orderDialogRef.value.open(id)
 }
 
 /** 打开表单：修改上级推广人 */
-const updateBindUserFormRef = ref()
+const updateFormRef = ref()
 const openUpdateBindUserForm = (row: BrokerageUserApi.BrokerageUserVO) => {
-  updateBindUserFormRef.value.open(row)
+  updateFormRef.value.open(row)
 }
 
 /** 创建分销员 */
-const createUserFormRef = ref<InstanceType<typeof CreateUserForm>>()
+const createFormRef = ref<InstanceType<typeof CreateUserForm>>()
 const openCreateUserForm = () => {
-  createUserFormRef.value?.open()
+  createFormRef.value?.open()
 }
 
 /** 清除上级推广人 */