添加选择自定义规格功能

src/services/api/user/userAPI.ts

 import httpRequest from "@/services/common";
-import { userUrlConfig,authUrlConfig } from '@/services/config';
-import {store} from '@/store/index'
+import { userUrlConfig, authUrlConfig } from '@/services/config';
+import { store } from '@/store/index'
 import { LoginParm, LoginResult, UserInfo } from "@/services/types/user/userModel";
 
 export async function getImagApi() {
@@ -15,27 +15,27 @@ export async function loginApi(params: LoginParm) {
 
 //获取用户信息
 export const getInfoApi = async () => {
-    return await httpRequest.post<UserInfo>(userUrlConfig.getUserInfo,{})
+    return await httpRequest.post<UserInfo>(userUrlConfig.getUserInfo, {})
 }
 
 //添加用户
-export const addUser = async (params:any) => {
-    return await httpRequest.post(userUrlConfig['addUser'],params)
+export const addUser = async (params: any) => {
+    return await httpRequest.post(userUrlConfig['addUser'], params)
 }
 
 //编辑用户
-export const editUser = async (params:any) => {
-    return await httpRequest.put(userUrlConfig['editUser'],params)
+export const editUser = async (params: any) => {
+    return await httpRequest.put(userUrlConfig['editUser'], params)
 }
 
 //删除用户
-export const deleteUser = async (params:any) => {
-    return await httpRequest.delete(userUrlConfig['deleteUser'],params)
+export const deleteUser = async (params: any) => {
+    return await httpRequest.delete(userUrlConfig['deleteUser'], params)
 }
 
 //查询用户(区别与上面的获取用户信息)
-export const getUserInfo = async () => {
-    return await httpRequest.get(userUrlConfig['getUser'])
+export const getUserInfo = async (params: any) => {
+    return await httpRequest.get(userUrlConfig['getUser'], params)
 }
 
 //查询所有角色
@@ -44,6 +44,6 @@ export const getAllRole = async () => {
 }
 
 //查询当前用户的角色
-export const findRoleByUser = async (params:any) => {
-    return await httpRequest.get(authUrlConfig['findRoleByUser'],params)
+export const findRoleByUser = async (params: any) => {
+    return await httpRequest.get(authUrlConfig['findRoleByUser'], params)
 }

src/views/commodityManage/edit.vue

@@ -133,25 +133,39 @@
                             </el-tag>
                         </template>
                     </el-table-column>
-                    <el-table-column property="picUrl" label="规格图片" align="center">
+                    <el-table-column property="customSpec" label="自定义规格" align="center">
                         <template #default="scope">
-                            <img v-if="scope.row.picUrl" :src="scope.row.picUrl" width="40" />
+                            <el-tag v-if="scope.row.customSpec" type="primary">
+                                {{ scope.row.customSpec }}
+                            </el-tag>
+                            <el-tag v-else type="info">
+                                {{ scope.row.customSpec }}
+                            </el-tag>
                         </template>
                     </el-table-column>
+                    <!-- <el-table-column property="picUrl" label="规格图片" align="center">
+                        <template #default="scope">
+                            <img v-if="scope.row.picUrl" :src="scope.row.picUrl" width="40" />
+                        </template>
+                    </el-table-column> -->
                     <el-table-column v-if="multipleSpec" align="center" label="操作" width="250"
                         class-name="small-padding fixed-width">
                         <template #default="scope">
+                            <el-button type="primary" size="small"
+                                @click="handleSpecificationEdit(scope.row, scope.$index)">
+                                编辑
+                            </el-button>
                             <el-button type="danger" size="small" @click="handleSpecificationDelete(scope.row)">删除
                             </el-button>
                         </template>
                     </el-table-column>
                 </el-table>
 
-                <el-dialog v-model="specVisiable" title="设置规格">
+                <el-dialog v-model="specVisiable" :title="titleSpec" title="设置规格">
                     <el-form ref="specRef" :rules="rules" :model="specForm" status-icon label-position="left"
                         label-width="100px" style="width: 400px; margin-left: 50px">
                         <el-form-item label="规格名" prop="specification">
-                            <el-select v-model="specForm.specification" class="m-2" placeholder="请选择规格名"
+                            <el-select v-model="specForm.specification" :disabled="disabledSpec" placeholder="请选择规格名"
                                 @change="dictChange">
                                 <el-option v-for="item in dictList" :key="item.id" :label="item.dictName"
                                     :value="item.id" />
@@ -159,12 +173,16 @@
                         </el-form-item>
                         <el-form-item label="规格值" prop="value">
                             <el-select v-model="specForm.value" multiple collapse-tags collapse-tags-tooltip
-                                placeholder="请选择规格值" style="width: 240px" @change="dictItemChange">
+                                placeholder="请选择规格值" :disabled="disabledSpec" style="width: 240px"
+                                @change="dictItemChange">
                                 <el-option v-for="item in dictItemList" :key="item.id" :label="item.itemText"
                                     :value="item.itemText" />
                             </el-select>
                         </el-form-item>
-                        <el-form-item label="规格图片" prop="picUrl">
+                        <el-form-item label="自定义规格">
+                            <el-switch v-model="specForm.customSpec" @change="dictSwitchChange" />
+                        </el-form-item>
+                        <!-- <el-form-item label="规格图片" prop="picUrl">
                             <el-upload :action="uploadPath" :show-file-list="false" :headers="headers"
                                 :on-success="uploadSpecPicUrl" class="avatar-uploader" accept=".jpg,.jpeg,.png,.gif">
                                 <div v-if="specForm.picUrl">
@@ -174,10 +192,10 @@
                                     <Plus />
                                 </el-icon>
                             </el-upload>
-                        </el-form-item>
+                        </el-form-item> -->
                     </el-form>
                     <template #footer class="dialog-footer">
-                        <el-button @click="specVisiable = false">取消</el-button>
+                        <el-button @click="handleSpecificationClose">取消</el-button>
                         <el-button type="primary" @click="handleSpecificationAdd">确定</el-button>
                     </template>
                 </el-dialog>
@@ -263,7 +281,9 @@ let goods = ref({
 } as any);
 let goodsParts = ref([] as any)
 let specVisiable = ref(false);
-let specForm = ref({ specification: "", value: "", picUrl: "" } as any);
+let specForm = ref({ specification: "", value: "", picUrl: "", customSpec: false } as any);
+let titleSpec = ref('添加规格')
+let disabledSpec = ref(false)
 let multipleSpec = ref(true);
 let specifications = ref([] as any);
 
@@ -468,7 +488,9 @@ let handleSpecificationShow = () => {
     getDictList().then((res: any) => {
         if (res.code === 200) {
             dictList.value = res.data.records
-            specForm.value = { specification: "", value: "", picUrl: "" };
+            specForm.value = { specification: "", value: "", picUrl: "", customSpec: false };
+            disabledSpec.value = false
+            titleSpec.value = '添加规格'
             specVisiable.value = true;
         }
     })
@@ -476,6 +498,9 @@ let handleSpecificationShow = () => {
 let dictItemList = ref()
 let dictName = ref()
 let dictValue = ref()
+let dictSwitch = ref(false) // table swith
+let dictTableIndex = ref() // 点击编辑table index
+let dictTableIndexSwitch = ref(false) // 点击编辑table swith值
 let dictChange = (id: any) => {
     getDictItemList({ dictId: id }).then((res: any) => {
         if (res.code === 200) {
@@ -489,27 +514,57 @@ let dictChange = (id: any) => {
 let dictItemChange = (val: []) => {
     dictValue.value = val
 }
+let dictSwitchChange = (val: boolean) => {
+    dictSwitch.value = val
+}
+let handleSpecificationClose = () => {
+    specForm.value.value = specForm.value.value[0]
+    specForm.value.customSpec = dictTableIndexSwitch.value
+    specifications.value[dictTableIndex.value] = specForm.value
+    specVisiable.value = false;
+}
 let handleSpecificationAdd = () => {
-    if (!dictName.value) return ElMessage({
-        type: 'warning',
-        message: '请选择规格名'
-    })
-    if (dictValue.value) {
-        for (let s of dictValue.value) {
-            specifications.value.push({
-                specification: dictName.value,
-                value: s
+    if (titleSpec.value === '添加规格') {
+        if (!dictName.value) return ElMessage({
+            type: 'warning',
+            message: '请选择规格名'
+        })
+        if (dictValue.value) {
+            for (let s of dictValue.value) {
+                specifications.value.push({
+                    specification: dictName.value,
+                    value: s,
+                    customSpec: dictSwitch.value
+                })
+            }
+            specVisiable.value = false;
+            specToProduct();
+        } else {
+            ElMessage({
+                type: 'warning',
+                message: '请选择规格值'
             })
         }
-        specVisiable.value = false;
-        specToProduct();
     } else {
-        ElMessage({
-            type: 'warning',
-            message: '请选择规格值'
-        })
+        specForm.value.value = specForm.value.value[0]
+        specifications.value[dictTableIndex.value] = specForm.value
+        specVisiable.value = false;
     }
 }
+
+// 编辑商品规格
+let handleSpecificationEdit = (row: any, index: number) => {
+    titleSpec.value = '设置规格'
+    specVisiable.value = true
+    disabledSpec.value = true
+    let str = row.value
+    dictTableIndexSwitch.value = row.customSpec
+    row.value = []
+    row.value.push(str)
+    specForm.value = row
+    dictTableIndex.value = index
+}
+
 let handleSpecificationDelete = (row: any) => {
     const index = specifications.value.indexOf(row);
     specifications.value.splice(index, 1);

src/views/commodityManage/shelves.vue

@@ -484,6 +484,7 @@ let handleSpecificationAdd = () => {
 
 }
 
+// 取消添加商品规格
 let handleSpecificationClose = () => {
     specForm.value.value = specForm.value.value[0]
     specForm.value.customSpec = dictTableIndexSwitch.value

src/views/system/userManage.vue

@@ -35,6 +35,9 @@
                 </template>
             </el-table-column>
         </el-table>
+
+        <pagination :page-data="userQuery" :total="total" @size-change="sizeChange" @current-change="currentChange" />
+
         <el-drawer v-model="showDrawer" :title="drawerTitle" size="40%" style="padding-right: 20px;"
             :before-close="handleClose">
             <el-form class="form" ref="formRef" :rules="rules" :model="formData" size="large" label-position="right"
@@ -212,13 +215,18 @@ const formData = ref<any>({})
 
 const drawerTitle = ref('')
 const showDrawer = ref(false)
-
+const userQuery = ref({
+    pageNo: 1,
+    pageSize: 10
+})
+const total = ref()
 const roles = ref<any>([])
 
 function init() {
-    getUserInfo().then((res) => {
+    getUserInfo(userQuery.value).then((res) => {
         if (res.code == 200) {
             tableData.value = res.data.records
+            total.value = res.data.total
         }
     })
     getAllRole().then((res) => {
@@ -228,6 +236,16 @@ function init() {
     })
 }
 
+let sizeChange = (val: number) => {
+  userQuery.value.pageSize = val
+  init()
+}
+
+let currentChange = (val: number) => {
+  userQuery.value.pageNo = val
+  init()
+}
+
 function handleEdit(scope: any) {
     formData.value = {}
     const params = {

vite.config.ts

@@ -89,11 +89,11 @@ export default ({ command, mode }) => {
         // '/foo': '',
         // 选项写法
         "/admin": {
-          target: "http://192.168.0.23/",
+          target: "http://192.168.0.9:8089/",
           //  rewrite: (path) => path.replace(/^\/api/, '') http://192.168.0.9:8089/
         },
         "/wx": {
-          target: "http://192.168.0.23/",
+          target: "http://192.168.0.9:8089/",
           //  rewrite: (path) => path.replace(/^\/api/, '')
         },
         // 正则表达式写法