优化店铺商品及分类管理

src/views/shop/goods/components/goodsEdit.vue

@@ -45,6 +45,7 @@
             </div>
           </a-form-item>
           <a-form-item
+            v-if="!merchantId"
             label="选择店铺"
             name="merchantId"
           >
@@ -64,7 +65,7 @@
               v-model:value="form.goodsName"
             />
           </a-form-item>
-          <a-form-item label="商品分类" name="categoryId">
+          <a-form-item label="商品分类" name="categoryId" v-if="!merchantId">
             <SelectGoodsCategory
               :data="data"
               placeholder="请选择商品分类"
@@ -73,6 +74,15 @@
               @done="chooseGoodsCategory"
             />
           </a-form-item>
+          <a-form-item label="菜品分类" name="categoryId" v-else>
+            <SelectGoodsCategory
+              :merchantId="merchantId"
+              placeholder="请选择商品分类"
+              style="width: 558px"
+              v-model:value="form.categoryId"
+              @done="chooseTakeawayCategory"
+            />
+          </a-form-item>
           <a-form-item label="商品卖点" name="comments">
             <a-input
               allow-clear
@@ -335,6 +345,9 @@
   import { GoodsSpec } from "@/api/shop/goodsSpec/model";
   import { generateGoodsSku, listGoodsSku } from "@/api/shop/goodsSku";
   import { listGoodsSpec } from "@/api/shop/goodsSpec";
+  import CategorySelect from "@/views/cms/article/components/category-select.vue";
+  import { GoodsCategory } from "@/api/shop/goodsCategory/model";
+  import { listGoodsCategory } from "@/api/shop/goodsCategory";
 
   // 是否是修改
   const isUpdate = ref(false);
@@ -348,6 +361,8 @@
     visible: boolean;
     // 修改回显的数据
     data?: Goods | null;
+    // 商户ID
+    merchantId?: number;
   }>();
 
   const emit = defineEmits<{
@@ -375,6 +390,7 @@
   const files = ref<ItemType[]>([]);
   const goodsSpec = ref<GoodsSpec>();
   const category = ref<string[]>([]);
+  const takeaway = ref<GoodsCategory[]>([]);
 
   const columns = [
     {
@@ -552,11 +568,16 @@
     form.merchantId = item.merchantId;
   };
 
-  const chooseGoodsCategory = (item,value) => {
+  const chooseGoodsCategory = (item: GoodsCategory,value: any) => {
     form.categoryId = value[1].value;
     form.categoryParent = value[0].label;
     form.categoryChildren = value[1].label;
   }
+  const chooseTakeawayCategory = (item: GoodsCategory, value: any) => {
+    form.categoryParent = '店铺分类';
+    form.categoryChildren = value[0].label;
+    form.categoryId = item[0];
+  }
 
   const chooseImage = (data: FileRecord) => {
     images.value.push({
@@ -673,9 +694,7 @@
 
   const editorRef = ref<InstanceType<typeof TinymceEditor> | null>(null);
   const config = ref({
-    height: 240,
-    plugins: 'code preview fullscreen searchreplace save autosave link autolink image media table codesample lists advlist charmap emoticons anchor directionality pagebreak quickbars nonbreaking visualblocks visualchars wordcount',
-    toolbar: false,
+    height: 500,
     images_upload_handler: (blobInfo, success, error) => {
       const file = blobInfo.blob();
       const formData = new FormData();
@@ -686,6 +705,44 @@
         error(msg);
       })
     },
+    // 自定义文件上传(这里使用把选择的文件转成 blob 演示)
+    file_picker_callback: (callback: any, _value: any, meta: any) => {
+      const input = document.createElement('input');
+      input.setAttribute('type', 'file');
+      // 设定文件可选类型
+      if (meta.filetype === 'image') {
+        input.setAttribute('accept', 'image/*');
+      } else if (meta.filetype === 'media') {
+        input.setAttribute('accept', 'video/*,.pdf');
+      }
+      input.onchange = () => {
+        const file = input.files?.[0];
+        if (!file) {
+          return;
+        }
+        if (meta.filetype === 'media') {
+          if (file.size / 1024 / 1024 > 200) {
+            editorRef.value?.alert({ content: '大小不能超过 200MB' });
+            return;
+          }
+          if(file.type.startsWith('application/pdf')){
+            uploadOss(file).then(res => {
+              const addPath = `<a href="${res.downloadUrl}" target="_blank">${res.name}</a>`;
+              content.value = content.value + addPath
+            })
+            return;
+          }
+          if (!file.type.startsWith('video/')) {
+            editorRef.value?.alert({ content: '只能选择视频文件' });
+            return;
+          }
+          uploadOss(file).then(res => {
+            callback(res.path)
+          });
+        }
+      };
+      input.click();
+    }
   });
 
   /* 粘贴图片上传服务器并插入编辑器 */
@@ -732,7 +789,8 @@
           content: content.value,
           files: JSON.stringify(files.value),
           goodsSpec: goodsSpec.value,
-          goodsSkus: skuList.value
+          goodsSkus: skuList.value,
+          type: props.merchantId ? 1 : 0
         };
         const saveOrUpdate = isUpdate.value ? updateGoods : addGoods;
         saveOrUpdate(formData)
@@ -796,6 +854,10 @@
           if (props.data.content){
             content.value = props.data.content;
           }
+          // 外卖商品分类
+          listGoodsCategory({merchantId: props.merchantId}).then(list => {
+            takeaway.value = list
+          })
 
           isUpdate.value = true;
         } else {