优化

src/views/commodityManage/edit.vue

 <template>
     <div class="app-container">
+        <el-drawer v-model="editDrawer" size="100%" @before-close="handleCancel">
             <el-card class="box-card">
                 <h3>商品介绍</h3>
                 <el-form ref="goodsRef" :rules="rules" :model="goods" label-width="150px">
@@ -46,8 +47,8 @@
 
                     <el-form-item label="宣传画廊">
                         <el-upload :action="uploadPath" :limit="5" :headers="headers" :on-exceed="uploadOverrun"
-                        :on-success="handleGalleryUrl" :on-remove="handleRemove" multiple accept=".jpg,.jpeg,.png,.gif"
-                        list-type="picture-card">
+                            :on-success="handleGalleryUrl" :on-remove="handleRemove" multiple
+                            accept=".jpg,.jpeg,.png,.gif" list-type="picture-card">
                             <el-icon class="avatar-uploader-icon">
                                 <Plus />
                             </el-icon>
@@ -63,12 +64,14 @@
                             {{ tag }}
                         </el-tag>
                         <el-input v-if="newKeywordVisible" ref="newKeywordInput" v-model="newKeyword"
-                        class="input-new-keyword" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm" />
+                            class="input-new-keyword" @keyup.enter.native="handleInputConfirm"
+                            @blur="handleInputConfirm" />
                         <el-button v-else class="button-new-keyword" type="primary" @click="showInput">+ 增加</el-button>
                     </el-form-item>
 
                     <el-form-item label="商品配件">
-                    <el-select v-model="goods.parts" multiple collapse-tags collapse-tags-tooltip style="width: 240px">
+                        <el-select v-model="goodsParts" multiple collapse-tags collapse-tags-tooltip
+                            style="width: 240px">
                             <el-option v-for="item in partsList" :key="item.id" :label="item.name" :value="item.id" />
                         </el-select>
                     </el-form-item>
@@ -166,59 +169,6 @@
                 </el-dialog>
             </el-card>
 
-        <!-- <el-card class="box-card">
-            <h3>商品库存</h3>
-            <el-table :data="products">
-                <el-table-column property="value" label="货品规格">
-                    <template #default="scope">
-                        <el-tag v-for="tag in scope.row.specifications" :key="tag">
-                            {{ tag }}
-                        </el-tag>
-                    </template>
-                </el-table-column>
-                <el-table-column property="price" width="100" label="货品售价" />
-                <el-table-column property="number" width="100" label="货品数量" />
-                <el-table-column property="url" width="100" label="货品图片">
-                    <template #default="scope">
-                        <img v-if="scope.row.url" :src="scope.row.url" width="40" />
-                    </template>
-                </el-table-column>
-                <el-table-column align="center" label="操作" width="100" class-name="small-padding fixed-width">
-                    <template #default="scope">
-                        <el-button type="primary" size="small" @click="handleProductShow(scope.row)">设置</el-button>
-                    </template>
-                </el-table-column>
-            </el-table>
-
-            <el-dialog v-model="productVisiable" title="添加货品">
-                <el-form ref="productRef" :model="productForm" status-icon label-position="left" label-width="100px"
-                    style="width: 400px; margin-left: 50px">
-                    <el-form-item label="货品规格列" prop="specifications">
-                        <el-tag v-for="tag in productForm.specifications" :key="tag">
-                            {{ tag }}
-                        </el-tag>
-                    </el-form-item>
-                    <el-form-item label="货品售价" prop="price">
-                        <el-input v-model="productForm.price" />
-                    </el-form-item>
-                    <el-form-item label="货品数量" prop="number">
-                        <el-input v-model="productForm.number" />
-                    </el-form-item>
-                    <el-form-item label="货品图片" prop="url">
-                        <el-upload :action="uploadPath" :show-file-list="false" :headers="headers"
-                            :on-success="uploadProductUrl" class="avatar-uploader" accept=".jpg,.jpeg,.png,.gif">
-                            <img v-if="productForm.url" :src="productForm.url" class="avatar" />
-                            <i v-else class="el-icon-plus avatar-uploader-icon" />
-                        </el-upload>
-                    </el-form-item>
-                </el-form>
-                <template #footer class="dialog-footer">
-                    <el-button @click="productVisiable = false">取消</el-button>
-                    <el-button type="primary" @click="handleProductEdit">确定</el-button>
-                </template>
-            </el-dialog>
-        </el-card> -->
-
             <el-card class="box-card">
                 <h3>商品参数</h3>
                 <el-button type="primary" @click="handleAttributeShow">添加</el-button>
@@ -227,14 +177,15 @@
                     <el-table-column property="value" label="商品参数值" />
                     <el-table-column align="center" label="操作" width="100" class-name="small-padding fixed-width">
                         <template #default="scope">
-                        <el-button type="danger" size="small" @click="handleAttributeDelete(scope.row)">删除</el-button>
+                            <el-button type="danger" size="small" @click="handleAttributeDelete(scope.row)">删除
+                            </el-button>
                         </template>
                     </el-table-column>
                 </el-table>
 
                 <el-dialog v-model="attributeVisiable" title="添加商品参数">
-                <el-form ref="attributeRef" :model="attributeForm" status-icon label-position="left" label-width="100px"
-                    style="width: 400px; margin-left: 50px">
+                    <el-form ref="attributeRef" :model="attributeForm" status-icon label-position="left"
+                        label-width="100px" style="width: 400px; margin-left: 50px">
                         <el-form-item label="商品参数名称" prop="attribute">
                             <el-input v-model="attributeForm.attribute" />
                         </el-form-item>
@@ -249,15 +200,16 @@
                 </el-dialog>
             </el-card>
 
-        <div class="op-container">
+            <template #footer>
                 <el-button @click="handleCancel">取消</el-button>
                 <el-button type="primary" @click="handleEdit">更新商品</el-button>
-        </div>
+            </template>
+        </el-drawer>
     </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, nextTick } from "vue";
+import { ref, computed } from "vue";
 import { detailGoods, editGoods, listCatAndBrand } from "@/services/api/commodityManage/list";
 import { uploadPath } from "@/services/api/storage";
 import { ElMessageBox, ElMessage, ElNotification } from "element-plus";
@@ -266,6 +218,7 @@ import router from '@/router'
 import { listGoods } from "@/services/api/commodityManage/list";
 
 let route: any = router
+let editDrawer = ref(false)
 let newKeywordVisible = ref(false);
 let newPartsVisible = ref(false);
 let newKeyword = ref("");
@@ -290,9 +243,9 @@ let goods = ref({
     brief: "",
     detail: '<p>你好啊！！</p>',
     categoryId: undefined,
-    keywords: undefined,
-    parts: undefined
+    keywords: undefined
 } as any);
+let goodsParts = ref()
 let specVisiable = ref(false);
 let specForm = ref({ specification: "", value: "", picUrl: "" } as any);
 let multipleSpec = ref(false);
@@ -305,7 +258,6 @@ let productForm = ref({
     number: 0,
     url: "",
 });
-let goodsId = ref(route.options.history.location.split('=')[1])
 let products = ref([
     { id: 0, specifications: ["标准"], price: 0.0, number: 0, url: "" },
 ]);
@@ -335,13 +287,9 @@ let initList = () => {
     })
 }
 initList()
-let init = () => {
-    // if (route.options.history.location.split('=').length > 1) {
-    //     var goodsId = route.options.history.location.split('=')[1]
-    // }
-    // else return
 
-    detailGoods(goodsId.value).then((res) => {
+let init = (id: number) => {
+    detailGoods(id).then((res) => {
         goods.value = res.data.goods;
         console.log(goods.value);
 
@@ -374,7 +322,6 @@ let init = () => {
         brandList.value = res.data.brandList;
     });
 }
-init()
 
 let htmlChange = (value: any) => goods.value.detail = value
 
@@ -622,6 +569,11 @@ let handleAttributeDelete = (row: any) => {
     const index = attributes.value.indexOf(row);
     attributes.value.splice(index, 1);
 }
+
+defineExpose({
+    editDrawer,
+    init
+})
 </script>
 
 <style>

src/views/commodityManage/list.vue

@@ -114,6 +114,8 @@
         <litemall-page :page-data="listQuery" :total="total" @size-change="sizeChange"
             @current-change="currentChange" />
     </div>
+    <shelves ref="shelvesRef" @initShelves="getList"/>
+    <edit ref="editRef" :editId="editId" @initShelves="getList"/>
 </template>
 
 <script setup lang="ts">
@@ -123,10 +125,15 @@ import { listGoods, deleteGoods } from "@/services/api/commodityManage/list";
 // import { thumbnail, toPreview } from "@/utils/index";
 import router from '@/router';
 import LitemallPage from "@/components/pagination/litemallPage.vue";
+import shelves from './shelves.vue'
+import edit from './edit.vue'
 
 let list = ref([]);
 let total = ref(0);
 let listLoading = ref(true);
+let shelvesRef = ref();
+let editRef = ref();
+let editId = ref();
 let listQuery = ref({
     page: 1,
     limit: 10,
@@ -170,12 +177,12 @@ let handleFilter = () => {
     getList();
 };
 let handleCreate = () => {
-    console.log('跳转');
-
-    router.push({ path: "/commodity/shelves" });
+    shelvesRef.value.shelvesDrawer = true
+    // router.push({ path: "/commodity/shelves" });
 };
 let handleUpdate = (row: any) => {
-    router.push({ path: "/commodity/edit", query: { id: row.id } });
+    editRef.value.init(row.id)
+    editRef.value.editDrawer = true
 };
 let showDetail = (detail: any) => {
     goodsDetail = detail;

vite.config.ts

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