feature(管理后台): 商品弹窗

yudao-ui-admin/src/views/mall/product/spu/index.vue

@@ -1,36 +1,81 @@
 <template>
   <div class="app-container">
-
     <!-- 搜索工作栏 -->
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+    >
       <el-form-item label="商品名称" prop="name">
-        <el-input v-model="queryParams.name" placeholder="请输入商品名称" clearable @keyup.enter.native="handleQuery"/>
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入商品名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
       </el-form-item>
       <el-form-item label="卖点" prop="sellPoint">
-        <el-input v-model="queryParams.sellPoint" placeholder="请输入卖点" clearable @keyup.enter.native="handleQuery"/>
+        <el-input
+          v-model="queryParams.sellPoint"
+          placeholder="请输入卖点"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
       </el-form-item>
       <el-form-item label="分类id" prop="categoryId">
-        <el-input v-model="queryParams.categoryId" placeholder="请输入分类id" clearable @keyup.enter.native="handleQuery"/>
+        <el-input
+          v-model="queryParams.categoryId"
+          placeholder="请输入分类id"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
       </el-form-item>
       <el-form-item label="价格(分)" prop="price">
-        <el-input v-model="queryParams.price" placeholder="请输入价格 单位使用：分" clearable @keyup.enter.native="handleQuery"/>
+        <el-input
+          v-model="queryParams.price"
+          placeholder="请输入价格 单位使用：分"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
       </el-form-item>
       <el-form-item label="库存数量" prop="quantity">
-        <el-input v-model="queryParams.quantity" placeholder="请输入库存数量" clearable @keyup.enter.native="handleQuery"/>
+        <el-input
+          v-model="queryParams.quantity"
+          placeholder="请输入库存数量"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
       </el-form-item>
       <el-form-item label="状态" prop="status">
-        <el-select v-model="queryParams.status" placeholder="请选择上下架状态" clearable size="small">
+        <el-select
+          v-model="queryParams.status"
+          placeholder="请选择上下架状态"
+          clearable
+          size="small"
+        >
           <el-option label="请选择字典生成" value="" />
           <el-option label="上架" value="0" />
           <el-option label="下架" value="1" />
         </el-select>
       </el-form-item>
       <el-form-item label="创建时间">
-        <el-date-picker v-model="dateRangeCreateTime" style="width: 240px" value-format="yyyy-MM-dd"
+        <el-date-picker
-                        type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"/>
+          v-model="dateRangeCreateTime"
+          style="width: 240px"
+          value-format="yyyy-MM-dd"
+          type="daterange"
+          range-separator="-"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        />
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery"
+          >搜索</el-button
+        >
         <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
@@ -38,17 +83,32 @@
     <!-- 操作工具栏 -->
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+        <el-button
-                   v-hasPermi="['product:spu:create']">新增
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['product:spu:create']"
+          >新增
         </el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
           :loading="exportLoading"
-                   v-hasPermi="['product:spu:export']">导出
+          v-hasPermi="['product:spu:export']"
+          >导出
         </el-button>
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
     </el-row>
 
     <!-- 列表 -->
@@ -60,7 +120,12 @@
       <el-table-column label="分类id" align="center" prop="categoryId" />
       <el-table-column label="商品主图地址" align="center" prop="picUrls">
         <template slot-scope="scope">
-          <img v-if="scope.row.picUrls" :src="scope.row.picUrls[0]" alt="分类图片" class="img-height"/>
+          <img
+            v-if="scope.row.picUrls"
+            :src="scope.row.picUrls[0]"
+            alt="分类图片"
+            class="img-height"
+          />
         </template>
       </el-table-column>
       <el-table-column label="排序字段" align="center" prop="sort" />
@@ -68,28 +133,56 @@
       <el-table-column label="价格 (分)" align="center" prop="price" />
       <el-table-column label="库存数量" align="center" prop="quantity" />
       <!--      <el-table-column label="状态" align="center" prop="status"/>-->
-      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        width="180"
+      >
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
         <template slot-scope="scope">
-          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+          <el-button
-                     v-hasPermi="['product:spu:update']">修改
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['product:spu:update']"
+            >修改
           </el-button>
-          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+          <el-button
-                     v-hasPermi="['product:spu:delete']">删除
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['product:spu:delete']"
+            >删除
           </el-button>
         </template>
       </el-table-column>
     </el-table>
     <!-- 分页组件 -->
-    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+    <pagination
-                @pagination="getList"/>
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNo"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
 
-    <!-- 对话框(添加 / 修改) -->
 <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body >
+  <save @closeDialog="open = false"/>
+</el-dialog>
+    <!-- 对话框(添加 / 修改) -->
+    <!-- <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="商品名称" prop="name">
           <el-input v-model="form.name" placeholder="请输入商品名称" />
@@ -107,7 +200,8 @@
             style="width: 100%"
             :options="categoryList"
             :props="propName"
-              clearable></el-cascader>
+            clearable
+          ></el-cascader>
         </el-form-item>
         <el-form-item label="商品主图地址" prop="picUrls">
           <ImageUpload v-model="form.picUrls" :limit="10" />
@@ -116,17 +210,23 @@
           <el-button size="mini" @click="shopTagInput()">添加规格</el-button>
           <div v-for="(tag, tagIndex) in skuTags" :key="tagIndex">
             <span>{{ tag.name }}</span>
-            <el-button style="margin-left: 10px" class="button-new-tag" type="text" icon="el-icon-delete"
+            <el-button
-                       @click="removeTag(tagIndex)">删除
+              style="margin-left: 10px"
+              class="button-new-tag"
+              type="text"
+              icon="el-icon-delete"
+              @click="removeTag(tagIndex)"
+              >删除
             </el-button>
             <br />
             <el-tag
               v-for="(tagItem, tagItemIndex) in tag.selectValues"
-                :key="tagItem"
+              :key="tagItemIndex"
               style="margin-right: 10px"
-                :disable-transitions="false">
+              :disable-transitions="false"
+            >
               {{ tagItem }}
-            </el-tag>
+            </el-tag> -->
             <!--            <el-input-->
             <!--              class="input-new-tag"-->
             <!--              v-if="tagItemInputs[tagIndex] && tagItemInputs[tagIndex].visible"-->
@@ -136,53 +236,82 @@
             <!--              @keyup.enter.native="handleInputConfirm(tagIndex)"-->
             <!--              @blur="handleInputConfirm(tagIndex)">-->
             <!--            </el-input>-->
-          </div>
+          <!-- </div>
         </el-form-item>
         <el-form-item label="规格名" v-show="isShowTagInput">
           <el-col :span="8">
-            <el-select v-model="addTagInput.name" filterable allow-create default-first-option placeholder="请选择"
+            <el-select
-                       @change="handleTagClick">
+              v-model="addTagInput.name"
+              filterable
+              allow-create
+              default-first-option
+              placeholder="请选择"
+              @change="handleTagClick"
+            >
               <el-option
                 v-for="item in unUseTags"
                 :key="item.id"
                 :label="item.name"
-                  :value="item.name">
+                :value="item.name"
+              >
               </el-option>
             </el-select>
           </el-col>
         </el-form-item>
         <el-form-item label="规格值" v-show="isShowTagInput">
           <el-col :span="8">
-            <el-select v-model="addTagInput.selectValues" multiple filterable allow-create default-first-option
+            <el-select
-                       placeholder="请选择">
+              v-model="addTagInput.selectValues"
+              multiple
+              filterable
+              allow-create
+              default-first-option
+              placeholder="请选择"
+            >
               <el-option
                 v-for="item in dbTagValues"
                 :key="item.id"
                 :label="item.name"
-                  :value="item.name">
+                :value="item.name"
+              >
               </el-option>
             </el-select>
           </el-col>
         </el-form-item>
         <el-form-item>
-          <el-button size="mini" type="primary" @click="addTag()" v-show="isShowTagInput">确定</el-button>
+          <el-button
-          <el-button size="mini" @click="hideTagInput()" v-show="isShowTagInput">取消</el-button>
+            size="mini"
+            type="primary"
+            @click="addTag()"
+            v-show="isShowTagInput"
+            >确定</el-button
+          >
+          <el-button size="mini" @click="hideTagInput()" v-show="isShowTagInput"
+            >取消</el-button
+          >
         </el-form-item>
         <el-form-item v-if="form.skus.length > 0">
           <el-table
             :data="form.skus"
             border
             style="width: 100%; margin-top: 20px"
-              :span-method="tableSpanMethod">
+            :span-method="tableSpanMethod"
-            <el-table-column v-for="(leftTitle, index) in skuTags" :key="index" :label="leftTitle.name">
+          >
+            <el-table-column
+              v-for="(leftTitle, index) in skuTags"
+              :key="index"
+              :label="leftTitle.name"
+            >
               <template slot-scope="scope">
                 {{ scope.row.propertyChildNames[index] }}
               </template>
             </el-table-column>
-            <el-table-column v-if="skuTags.length"
+            <el-table-column
+              v-if="skuTags.length"
               prop="picUrl"
               label="sku图片"
-                             width="180">
+              width="180"
+            >
               <template slot-scope="scope">
                 <ImageUpload v-model="scope.row.picUrl" :limit="1">
                 </ImageUpload>
@@ -191,14 +320,18 @@
             <el-table-column
               prop="prodName"
               label="条形码"
-                width="250" v-if="skuTags.length">
+              width="250"
+              v-if="skuTags.length"
+            >
               <template slot-scope="scope">
-                <el-input v-model="scope.row.barCode" type="textarea" :disabled="scope.row.status==1"></el-input>
+                <el-input
+                  v-model="scope.row.barCode"
+                  type="textarea"
+                  :disabled="scope.row.status == 1"
+                ></el-input>
               </template>
             </el-table-column>
-            <el-table-column
+            <el-table-column prop="price" label="销售价">
-                prop="price"
-                label="销售价">
               <template slot-scope="scope">
                 <el-input-number
                   size="small"
@@ -207,13 +340,12 @@
                   :precision="2"
                   :max="1000000000"
                   :min="0.01"
-                    :disabled="scope.row.status==1">
+                  :disabled="scope.row.status == 1"
+                >
                 </el-input-number>
               </template>
             </el-table-column>
-            <el-table-column
+            <el-table-column prop="oriPrice" label="成本价">
-                prop="oriPrice"
-                label="成本价">
               <template slot-scope="scope">
                 <el-input-number
                   size="small"
@@ -222,13 +354,12 @@
                   :precision="2"
                   :max="1000000000"
                   :min="0.01"
-                    :disabled="scope.row.status==1">
+                  :disabled="scope.row.status == 1"
+                >
                 </el-input-number>
               </template>
             </el-table-column>
-            <el-table-column
+            <el-table-column prop="oriPrice" label="原价">
-                prop="oriPrice"
-                label="原价">
               <template slot-scope="scope">
                 <el-input-number
                   size="small"
@@ -237,18 +368,28 @@
                   :precision="2"
                   :max="1000000000"
                   :min="0.01"
-                    :disabled="scope.row.status==1">
+                  :disabled="scope.row.status == 1"
+                >
                 </el-input-number>
               </template>
             </el-table-column>
-            <el-table-column
+            <el-table-column label="操作">
-                label="操作">
               <template slot-scope="scope">
-                <el-button type="text" size="small" @click="changeSkuStatus(`${scope.$index}`)"
+                <el-button
-                           v-if="scope.row.status===0">
+                  type="text"
+                  size="small"
+                  @click="changeSkuStatus(`${scope.$index}`)"
+                  v-if="scope.row.status === 0"
+                >
                   正常
                 </el-button>
-                <el-button type="text" size="small" @click="changeSkuStatus(`${scope.$index}`)" v-else>已禁用</el-button>
+                <el-button
+                  type="text"
+                  size="small"
+                  @click="changeSkuStatus(`${scope.$index}`)"
+                  v-else
+                  >已禁用</el-button
+                >
               </template>
             </el-table-column>
           </el-table>
@@ -260,7 +401,10 @@
           <el-input v-model="form.likeCount" placeholder="请输入点赞初始人数" />
         </el-form-item>
         <el-form-item label="价格 单位使用：分" prop="price">
-          <el-input v-model="form.price" placeholder="请输入价格 单位使用：分"/>
+          <el-input
+            v-model="form.price"
+            placeholder="请输入价格 单位使用：分"
+          />
         </el-form-item>
         <el-form-item label="库存数量" prop="quantity">
           <el-input v-model="form.quantity" placeholder="请输入库存数量" />
@@ -276,19 +420,26 @@
         <el-button type="primary" @click="submitForm">确 定</el-button>
         <el-button @click="cancel">取 消</el-button>
       </div>
-    </el-dialog>
+    </el-dialog> -->
   </div>
 </template>
 
 <script>
-import {createSpu, updateSpu, deleteSpu, getSpu, getSpuPage, exportSpuExcel} from "@/api/mall/product/spu";
+import {
+  createSpu,
+  updateSpu,
+  deleteSpu,
+  getSpu,
+  getSpuPage,
+  exportSpuExcel,
+} from "@/api/mall/product/spu";
 import {
   createProductCategory,
   deleteProductCategory,
   exportCategoryExcel,
   getProductCategory,
   getProductCategoryList,
-  updateProductCategory
+  updateProductCategory,
 } from "@/api/mall/product/category";
 import {
   createProperty,
@@ -296,16 +447,19 @@ import {
   deleteProperty,
   getProperty,
   getPropertyPage,
-  exportPropertyExcel
+  exportPropertyExcel,
 } from "@/api/mall/product/property";
 
-import Editor from '@/components/Editor';
+import Editor from "@/components/Editor";
-import ImageUpload from '@/components/ImageUpload';
+import ImageUpload from "@/components/ImageUpload";
+import save  from "./save";
 
 export default {
   name: "Spu",
   components: {
-    Editor, ImageUpload
+    Editor,
+    ImageUpload,
+    save,
   },
   data() {
     return {
@@ -316,8 +470,8 @@ export default {
       propertyPageList: [],
       isShowTagInput: false,
       addTagInput: {
-        name: '',
+        name: "",
-        propertyId: '',
+        propertyId: "",
         selectValues: [],
         selectValueIds: [],
         selectObect: [],
@@ -325,8 +479,8 @@ export default {
       skuTags: [],
       propName: {
         checkStrictly: true,
-        label: 'name',
+        label: "name",
-        value: 'id'
+        value: "id",
       },
       categoryList: [],
       // 遮罩层
@@ -378,87 +532,97 @@ export default {
       },
       // 表单校验
       rules: {
-        sellPoint: [{required: true, message: "卖点不能为空", trigger: "blur"}],
+        sellPoint: [
-        description: [{required: true, message: "描述不能为空", trigger: "blur"}],
+          { required: true, message: "卖点不能为空", trigger: "blur" },
-        categoryIds: [{required: true, message: "分类id不能为空", trigger: "blur"}],
+        ],
+        description: [
+          { required: true, message: "描述不能为空", trigger: "blur" },
+        ],
+        categoryIds: [
+          { required: true, message: "分类id不能为空", trigger: "blur" },
+        ],
         picUrls: [{ required: true, message: "商品主图地址", trigger: "blur" }],
-        sort: [{required: true, message: "排序字段不能为空", trigger: "blur"}],
+        sort: [
+          { required: true, message: "排序字段不能为空", trigger: "blur" },
+        ],
       },
       tagIndex: 0,
     };
   },
   created() {
-
     this.getList();
     this.getPropertyPageList();
     this.getListCategory();
   },
   methods: {
     getTableSpecData() {
-      return this.value
+      return this.value;
-    },
-    tableSpanMethod({row, column, rowIndex, columnIndex}) {
-
     },
+    tableSpanMethod({ row, column, rowIndex, columnIndex }) {},
     changeSkuStatus(tagIndex) {
       if (this.form.skus[tagIndex].status == 0) {
         this.form.skus[tagIndex].status = 1;
       } else {
         this.form.skus[tagIndex].status = 0;
       }
-
     },
     skuAddProdName() {
       if (this.initing) {
-        return
+        return;
       }
-      let skuList = []
+      let skuList = [];
       for (let i = 0; i < this.value.length; i++) {
-        const sku = Object.assign({}, this.value[i])
+        const sku = Object.assign({}, this.value[i]);
         if (!sku.properties) {
-          return
+          return;
         }
-        sku.skuName = ''
+        sku.skuName = "";
-        let properties = sku.properties.split(';')
+        let properties = sku.properties.split(";");
         for (const propertiesKey in properties) {
-          sku.skuName += properties[propertiesKey].split(':')[1] + ' '
+          sku.skuName += properties[propertiesKey].split(":")[1] + " ";
         }
-        sku.prodName = this.prodName + ' ' + sku.skuName
+        sku.prodName = this.prodName + " " + sku.skuName;
-        skuList.push(sku)
+        skuList.push(sku);
       }
-      this.$emit('input', skuList)
+      this.$emit("input", skuList);
-    },
-    handleTagClose(tagIndex, tagItemIndex) {
-
     },
+    handleTagClose(tagIndex, tagItemIndex) {},
     //确定添加sku规格
     addTag() {
-
       let skus = this.unUseTags.map(function (item, index) {
-        return item.name
+        return item.name;
       });
       let index = skus.indexOf(this.addTagInput.name);
 
       this.addTagInput.propertyId = this.unUseTags[index].id;
       for (let i = 0; i < this.addTagInput.selectValues.length; i++) {
-        for (let j = 0; j < this.unUseTags[index].propertyValueList.length; j++) {
+        for (
-          if (this.addTagInput.selectValues[i] === this.unUseTags[index].propertyValueList[j].name) {
+          let j = 0;
-            this.addTagInput.selectValueIds.push(this.unUseTags[index].propertyValueList[j].id)
+          j < this.unUseTags[index].propertyValueList.length;
+          j++
+        ) {
+          if (
+            this.addTagInput.selectValues[i] ===
+            this.unUseTags[index].propertyValueList[j].name
+          ) {
+            this.addTagInput.selectValueIds.push(
+              this.unUseTags[index].propertyValueList[j].id
+            );
             this.addTagInput.selectObect.push({
               id: this.unUseTags[index].propertyValueList[j].id,
               name: this.unUseTags[index].propertyValueList[j].name,
-            })
+            });
           }
         }
       }
-      let addTagInput = JSON.parse(JSON.stringify(this.addTagInput))
+      let addTagInput = JSON.parse(JSON.stringify(this.addTagInput));
       this.skuTags.push(addTagInput);
 
       // if (this.skuTags.length > 1) {
       this.skuTags = this.skuTags.sort((a, b) => a.propertyId - b.propertyId);
       this.skuTags.forEach(function (item, index) {
-        item.selectObect = item.selectObect.sort((a, b) => a.id - b.id)
+        item.selectObect = item.selectObect.sort((a, b) => a.id - b.id);
-      })
+      });
 
       for (let i = 0; i < this.skuTags.length; i++) {
         let selectValueIds = [];
@@ -489,17 +653,23 @@ export default {
         propertyNames.push(skuTags[i].name);
       }
 
-      let skuAll = sku1s.reduce((x, y) => {
+      let skuAll = sku1s.reduce(
+        (x, y) => {
           let arr = [];
-        x.forEach(m => y.forEach(y => arr.push(m.concat([y]))))
+          x.forEach((m) => y.forEach((y) => arr.push(m.concat([y]))));
           return arr;
-      }, [[]])
+        },
+        [[]]
+      );
 
-      let skuIdAll = skuIds.reduce((x, y) => {
+      let skuIdAll = skuIds.reduce(
+        (x, y) => {
           let arr = [];
-        x.forEach(m => y.forEach(y => arr.push(m.concat([y]))))
+          x.forEach((m) => y.forEach((y) => arr.push(m.concat([y]))));
           return arr;
-      }, [[]])
+        },
+        [[]]
+      );
 
       for (let i = 0; i < skuAll.length; i++) {
         let han = {
@@ -508,33 +678,32 @@ export default {
           propertyChildNames: skuAll[i],
           propertyChildIds: skuIdAll[i],
           properties: [],
-          picUrl: '',
+          picUrl: "",
-          costPrice: '',
+          costPrice: "",
-          originalPrice: '',
+          originalPrice: "",
-          spuId: '',
+          spuId: "",
-          prodName: '',
+          prodName: "",
-          price: '',
+          price: "",
-          barCode: '',
+          barCode: "",
-          status: '0',
+          status: "0",
-        }
+        };
         this.form.skus.push(han);
       }
-      this.form.skus.forEach(x => {
+      this.form.skus.forEach((x) => {
         x.properties = [];
         for (let i = 0; i < x.propertyIds.length; i++) {
           x.properties.push({
             propertyId: x.propertyIds[i],
-            valueId: x.propertyChildIds[i]
+            valueId: x.propertyChildIds[i],
-          })
+          });
         }
-      })
+      });
-
     },
     hideTagInput() {
       this.isShowTagInput = false;
       this.addTagInput = {
-        name: '',
+        name: "",
-        propertyId: '',
+        propertyId: "",
         selectValues: [],
         selectValueIds: [],
         selectObect: [],
@@ -542,12 +711,12 @@ export default {
     },
     shopTagInput() {
       if (this.unUseTags.length <= 0) {
-        return this.$message.error("规格已经添加完毕")
+        return this.$message.error("规格已经添加完毕");
       }
       this.isShowTagInput = true;
       this.addTagInput = {
-        name: '',
+        name: "",
-        propertyId: '',
+        propertyId: "",
         selectValues: [],
         selectValueIds: [],
         selectObect: [],
@@ -556,8 +725,8 @@ export default {
     //删除已选的规格
     removeTag(row) {
       let skus = this.allhistoryTags.map(function (item, index) {
-        return item.name
+        return item.name;
-      })
+      });
       let index = skus.indexOf(this.skuTags[row].name);
       this.unUseTags.push(this.allhistoryTags[index]);
       this.skuTags.splice(row, 1);
@@ -566,28 +735,27 @@ export default {
     handleTagClick(row) {
       for (let i = 0; i < this.propertyPageList.length; i++) {
         if (row == this.propertyPageList[i].name) {
-          this.dbTagValues = this.propertyPageList[i].propertyValueList
+          this.dbTagValues = this.propertyPageList[i].propertyValueList;
         }
       }
     },
     /** 查询规格 */
     getPropertyPageList() {
       // 执行查询
-      getPropertyPage().then(response => {
+      getPropertyPage().then((response) => {
         this.propertyPageList = response.data.list;
 
         this.unUseTags = this.propertyPageList.map(function (item, index) {
-          return item
+          return item;
-        })
+        });
         this.allhistoryTags = JSON.parse(JSON.stringify(this.unUseTags));
       });
     },
     /** 查询分类 */
     getListCategory() {
       // 执行查询
-      getProductCategoryList().then(response => {
+      getProductCategoryList().then((response) => {
         this.categoryList = this.handleTree(response.data, "id", "parentId");
-
       });
     },
     /** 查询列表 */
@@ -595,9 +763,9 @@ export default {
       this.loading = true;
       // 处理查询参数
       let params = { ...this.queryParams };
-      this.addBeginAndEndTime(params, this.dateRangeCreateTime, 'createTime');
+      this.addBeginAndEndTime(params, this.dateRangeCreateTime, "createTime");
       // 执行查询
-      getSpuPage(params).then(response => {
+      getSpuPage(params).then((response) => {
         this.list = response.data.list;
         this.total = response.data.total;
         this.loading = false;
@@ -610,7 +778,6 @@ export default {
     },
     /** 表单重置 */
     reset() {
-
       this.form = {
         id: undefined,
         name: undefined,
@@ -652,7 +819,7 @@ export default {
     handleUpdate(row) {
       this.reset();
       const id = row.id;
-      getSpu(id).then(response => {
+      getSpu(id).then((response) => {
         let dataSpu = response.data;
         this.form = {
           id: dataSpu.id,
@@ -680,11 +847,15 @@ export default {
     },
     getDataHandle() {
       let that = this;
-      let productPropertyViews = JSON.parse(JSON.stringify(this.form.productPropertyViews));
+      let productPropertyViews = JSON.parse(
-      productPropertyViews = productPropertyViews.sort((a, b) => a.propertyId - b.propertyId);
+        JSON.stringify(this.form.productPropertyViews)
-      productPropertyViews.forEach(item => {
+      );
+      productPropertyViews = productPropertyViews.sort(
+        (a, b) => a.propertyId - b.propertyId
+      );
+      productPropertyViews.forEach((item) => {
         item.propertyValues = item.propertyValues.sort((a, b) => a.v1 - b.v1);
-      })
+      });
       let skuIds = [];
       for (let i = 0; i < productPropertyViews.length; i++) {
         let han = {
@@ -692,17 +863,21 @@ export default {
           propertyId: productPropertyViews[i].propertyId,
           selectValues: [],
           selectValueIds: [],
-        }
+        };
-        for (let j = 0; j < productPropertyViews[i].propertyValues.length; j++) {
+        for (
+          let j = 0;
+          j < productPropertyViews[i].propertyValues.length;
+          j++
+        ) {
           han.selectValues.push(productPropertyViews[i].propertyValues[j].v2);
           han.selectValueIds.push(productPropertyViews[i].propertyValues[j].v1);
         }
-        skuIds.push(han)
+        skuIds.push(han);
       }
       this.skuTags = skuIds;
       this.unUseTags = this.allhistoryTags.filter((v) =>
         skuIds.every((val) => val.name != v.name)
-      )
+      );
       this.getHandleTable();
     },
     getHandleTable() {
@@ -718,17 +893,23 @@ export default {
         propertyIds.push(skuTags[i].propertyId);
         propertyNames.push(skuTags[i].name);
       }
-      let skuAll = sku1s.reduce((x, y) => {
+      let skuAll = sku1s.reduce(
+        (x, y) => {
           let arr = [];
-        x.forEach(m => y.forEach(y => arr.push(m.concat([y]))))
+          x.forEach((m) => y.forEach((y) => arr.push(m.concat([y]))));
           return arr;
-      }, [[]])
+        },
+        [[]]
+      );
 
-      let skuIdAll = skuIds.reduce((x, y) => {
+      let skuIdAll = skuIds.reduce(
+        (x, y) => {
           let arr = [];
-        x.forEach(m => y.forEach(y => arr.push(m.concat([y]))))
+          x.forEach((m) => y.forEach((y) => arr.push(m.concat([y]))));
           return arr;
-      }, [[]])
+        },
+        [[]]
+      );
 
       for (let i = 0; i < skuAll.length; i++) {
         let han = {
@@ -745,33 +926,32 @@ export default {
           price: this.form.skusList[i].price,
           barCode: this.form.skusList[i].barCode,
           status: this.form.skusList[i].status,
-        }
+        };
         this.form.skus.push(han);
       }
-      this.form.skus.forEach(x => {
+      this.form.skus.forEach((x) => {
         x.properties = [];
         for (let i = 0; i < x.propertyIds.length; i++) {
           x.properties.push({
             propertyId: x.propertyIds[i],
-            valueId: x.propertyChildIds[i]
+            valueId: x.propertyChildIds[i],
-          })
+          });
         }
-      })
+      });
-
     },
     /** 提交按钮 */
     submitForm() {
-
+      this.$refs["form"].validate((valid) => {
-      this.$refs["form"].validate(valid => {
         if (!valid) {
           return;
         }
-        this.form.picUrls = this.form.picUrls.split(',');
+        this.form.picUrls = this.form.picUrls.split(",");
-        this.form.categoryId = this.form.categoryIds[(this.form.categoryIds.length - 1)];
+        this.form.categoryId =
+          this.form.categoryIds[this.form.categoryIds.length - 1];
         this.form.status = Number(this.form.status);
         // 修改的提交
         if (this.form.id != null) {
-          updateSpu(this.form).then(response => {
+          updateSpu(this.form).then((response) => {
             this.$modal.msgSuccess("修改成功");
             this.open = false;
             this.getList();
@@ -779,7 +959,7 @@ export default {
           return;
         }
         // 添加的提交
-        createSpu(this.form).then(response => {
+        createSpu(this.form).then((response) => {
           this.$modal.msgSuccess("新增成功");
           this.open = false;
           this.getList();
@@ -789,13 +969,16 @@ export default {
     /** 删除按钮操作 */
     handleDelete(row) {
       const id = row.id;
-      this.$modal.confirm('是否确认删除商品spu编号为"' + id + '"的数据项?').then(function () {
+      this.$modal
+        .confirm('是否确认删除商品spu编号为"' + id + '"的数据项?')
+        .then(function () {
           return deleteSpu(id);
-      }).then(() => {
+        })
+        .then(() => {
           this.getList();
           this.$modal.msgSuccess("删除成功");
-      }).catch(() => {
+        })
-      });
+        .catch(() => {});
     },
     /** 导出按钮操作 */
     handleExport() {
@@ -803,18 +986,21 @@ export default {
       let params = { ...this.queryParams };
       params.pageNo = undefined;
       params.pageSize = undefined;
-      this.addBeginAndEndTime(params, this.dateRangeCreateTime, 'createTime');
+      this.addBeginAndEndTime(params, this.dateRangeCreateTime, "createTime");
       // 执行导出
-      this.$modal.confirm('是否确认导出所有商品spu数据项?').then(() => {
+      this.$modal
+        .confirm("是否确认导出所有商品spu数据项?")
+        .then(() => {
           this.exportLoading = true;
           return exportSpuExcel(params);
-      }).then(response => {
+        })
-        this.$download.excel(response, '商品spu.xls');
+        .then((response) => {
+          this.$download.excel(response, "商品spu.xls");
           this.exportLoading = false;
-      }).catch(() => {
+        })
-      });
+        .catch(() => {});
-    }
+    },
-  }
+  },
 };
 </script>
 <style lang="scss">

yudao-ui-admin/src/views/mall/product/spu/save.vue

@@ -0,0 +1,417 @@
+<template>
+  <div class="container">
+    <el-dialog
+      title="请输入规格值，多个请换行"
+      :visible.sync="dialogForSpec"
+      append-to-body
+      width="400px"
+      @close="dialogForSpec = false; specValue = null"
+    >
+      <el-input
+        v-model="specValue"
+        type="textarea"
+        :autosize="{ minRows: 6, maxRows: 6}"
+        placeholder="请输入内容"
+      />
+
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogForSpec = false; specValue = null">取 消</el-button>
+        <el-button type="primary" @click="addSpecValue">确 定</el-button>
+      </div>
+    </el-dialog>
+
+    <el-tabs v-model="activeName"  class="tabs">
+      <!-- 基础设置 -->
+      <el-tab-pane label="基础设置" name="base">
+        <el-form ref="baseForm" :model="baseForm" :rules="rules" label-width="100px" style="width: 95%">
+          <el-form-item label="商品名称" prop="name">
+            <el-input v-model="baseForm.name" placeholder="请输入商品名称"/>
+          </el-form-item>
+          <el-form-item label="卖点" prop="sellPoint">
+            <el-input v-model="baseForm.sellPoint" placeholder="请输入卖点"/>
+          </el-form-item>
+          <el-form-item label="分类id" prop="categoryIds">
+            <el-cascader
+              v-model="baseForm.categoryIds"
+              placeholder="请输入分类id"
+              style="width: 100%"
+              :options="categoryList"
+              :props="propName"
+              clearable
+            ></el-cascader>
+          </el-form-item>
+          <el-form-item label="商品主图" prop="picUrls">
+            <ImageUpload v-model="baseForm.picUrl" :limit="1" />
+          </el-form-item>
+           <el-form-item label="商品轮播图" prop="picUrl">
+            <ImageUpload v-model="baseForm.picUrls" :limit="10" />
+          </el-form-item>
+          <el-form-item label="排序字段" prop="sort">
+            <el-input v-model="baseForm.sort" placeholder="请输入排序字段"/>
+          </el-form-item>
+        </el-form>
+      </el-tab-pane>
+
+      <!-- 价格库存 -->
+      <el-tab-pane label="价格库存" name="rates" class="rates">
+        <el-form :model="ratesForm" :rules="rules.ratesForm">
+          <el-form-item label="商品规格">
+            <el-radio-group v-model="ratesForm.spec" @change="changeRadio">
+              <el-radio :label="0">单规格</el-radio>
+              <el-radio :label="1">多规格</el-radio>
+            </el-radio-group>
+          </el-form-item>
+
+          <!-- 动态添加规格属性 -->
+          <div v-show="ratesForm.spec === 1">
+            <div
+              v-for="(specs, index) in dynamicSpec"
+              :key="index"
+              class="dynamic-spec"
+            >
+              <!-- 删除按钮 -->
+              <el-button
+                type="danger"
+                icon="el-icon-delete"
+                circle
+                class="spec-delete"
+                @click="dynamicSpec.splice(index, 1)"
+              ></el-button>
+
+              <div class="spec-header">
+                规格项：
+                <el-input
+                  v-model="specs.spec_name"
+                  placeholder="请填写规格项"
+                  class="spec-name"
+                ></el-input>
+              </div>
+              <div class="spec-values">
+                <template v-for="(specsValue, i) in specs.spec_values">
+                  <el-input
+                    v-model="specs.spec_values[i]"
+                    class="spec-value"
+                    :key="specsValue"
+                  ></el-input>
+                </template>
+                <el-button
+                  type="primary"
+                  icon="el-icon-plus"
+                  circle
+                  @click="dialogForSpec = true; currentSpec = index"
+                ></el-button>
+              </div>
+            </div>
+            <el-button type="primary" @click="dynamicSpec.push({spec_values: []}); ratesForm.rates = []"
+            >添加规格项目
+            </el-button
+            >
+          </div>
+
+          <!-- 规格明细 -->
+          <el-form-item label="规格明细">
+            <el-table :data="ratesForm.rates" border style="width: 100%" ref="rates">
+              
+              <template v-if="ratesForm.spec == 1" > 
+                <el-table-column :key="index" v-for="(item, index) in dynamicSpec.filter(v=>v.spec_name != undefined)" :label="item.spec_name" >
+                <template slot-scope="scope">
+                  <el-input
+                    v-if="scope.row.spec"
+                    v-model="scope.row.spec[index]"
+                    disabled
+                  ></el-input>
+                </template>
+              </el-table-column>
+              </template>
+             
+              <el-table-column label="规格图片" width="120px">
+                <template slot-scope="scope">
+                  <ImageUpload v-model="scope.row.picUrl" :limit="1" :isShowTip="false" style="width: 100px; height: 50px" />
+                </template>
+              </el-table-column>
+              <el-table-column label="市场价(元)">
+                <template slot-scope="scope">
+                  <el-input
+                    v-model="scope.row.marketPrice"
+                    type="number"
+                  ></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column label="销售价(元)" re>
+                <template slot-scope="scope">
+                  <el-input v-model="scope.row.price" type="number"></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column label="成本价">
+                <template slot-scope="scope">
+                  <el-input
+                    v-model="scope.row.costPrice"
+                    type="number"
+                  ></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column label="库存">
+                <template slot-scope="scope">
+                  <el-input v-model="scope.row.stock" type="number"></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column label="体积">
+                <template slot-scope="scope">
+                  <el-input v-model="scope.row.volume" type="number"></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column label="重量">
+                <template slot-scope="scope">
+                  <el-input v-model="scope.row.weight" type="number"></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column label="条码">
+                <template slot-scope="scope">
+                  <el-input v-model="scope.row.barCode"></el-input>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-form-item>
+        </el-form>
+      </el-tab-pane>
+
+      <!-- 商品详情 -->
+      <el-tab-pane label="商品描述" name="third">
+        <editor v-model="baseForm.description" :min-height="400" />
+      </el-tab-pane>
+
+      <!-- 销售设置 -->
+      <el-tab-pane label="销售设置" name="fourth">
+        <el-form ref="baseForm" :model="baseForm" :rules="rules" label-width="100px" style="width: 95%">
+        <el-form-item label="库存数量" prop="quantity">
+          <el-input v-model="baseForm.quantity" placeholder="请输入库存数量" />
+        </el-form-item>
+        <el-form-item label="上下架状态" prop="status">
+          <el-radio-group v-model="baseForm.status">
+            <el-radio label="0">上架</el-radio>
+            <el-radio label="1">下架</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        </el-form>
+      </el-tab-pane>
+    </el-tabs>
+
+  <div class="buttons">
+  <el-button type="info" round @click="cancel">取消</el-button>
+   <el-button type="success" round @click="submit">确认</el-button>
+  </div>
+
+  </div>
+</template>
+
+<script>
+import {
+  getProductCategoryList
+} from "@/api/mall/product/category";
+
+import Editor from "@/components/Editor";
+import ImageUpload from "@/components/ImageUpload";
+export default {
+  components: {
+    Editor,
+    ImageUpload
+  },
+  data() {
+    return {
+      activeName: "base",
+      propName: {
+        checkStrictly: true,
+        label: "name",
+        value: "id",
+      },
+      // 基础设置
+      baseForm: {
+        name: null,
+        sellPoint: null,
+        categoryIds: null,
+        sort: null,
+        description: null,
+        picUrl:null,
+        picUrls: [],
+        quantity: null
+      },
+      categoryList: [],
+
+      // 价格库存
+      ratesForm: {
+        spec: 0,
+        // 规格明细
+        rates: [{}]
+      },
+      dynamicSpec: [
+        // {
+        //   spec_id: 86,
+        //   spec_name: "颜色",
+        //   spec_values: [],
+        //   spec_value_ids: [225],
+        // },
+      ],
+      dialogForSpec: false,
+      specValue: null,
+      currentSpec: null,
+
+      // 表单校验
+      rules: {
+        description: [
+          {required: true, message: "描述不能为空", trigger: "blur"},
+        ],
+        categoryIds: [
+          {required: true, message: "分类id不能为空", trigger: "blur"},
+        ],
+        picUrls: [{required: true, message: "商品主图地址", trigger: "blur"}],
+        sort: [
+          {required: true, message: "排序字段不能为空", trigger: "blur"},
+        ],
+      },
+    };
+  },
+  created() {
+    this.getListCategory();
+  },
+  methods: {
+    changeRadio() {
+
+      this.$refs.rates.doLayout()
+      if(this.ratesForm.spec == 0){
+        this.ratesForm.rates = [{}]
+      }else{
+        this.ratesForm.rates = []
+        if(this.dynamicSpec.length > 0){
+          this.buildRatesFormRates()
+        }
+      }
+    },
+    // 构建规格明细笛卡尔积
+  buildRatesFormRates(){
+      let rates = [];
+      this.dynamicSpec.map(v=>v.spec_values)
+      .reduce((last, current) => {
+        const array = [];
+        last.forEach(par1 => {
+            current.forEach(par2 => {
+              let v 
+              if(par1 instanceof Array){
+                v = par1.concat(par2)
+              }else{
+                v = [par1, par2];
+              }
+              array.push(v)
+            });
+        });
+        return array;
+    })
+    .forEach(v=>{
+      rates.push({spec: v})
+    });
+    console.log(rates)
+    this.ratesForm.rates = rates
+  },
+    addSpecValue() {
+      this.dialogForSpec = false;
+      let specValue = this.dynamicSpec[this.currentSpec].spec_values
+        .concat(this.specValue.split(/[(\r\n)\r\n]+/))
+        .filter(v => v != "");
+      console.log(specValue)
+      this.dynamicSpec[this.currentSpec].spec_values = [...new Set(specValue)];
+      this.currentSpec = null;
+      this.buildRatesFormRates()
+    },
+    /** 查询分类 */
+    getListCategory() {
+      // 执行查询
+      getProductCategoryList().then((response) => {
+        this.categoryList = this.handleTree(response.data, "id", "parentId");
+      });
+    },
+    cancel(){
+        this.$emit("closeDialog");
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.spec-dialog {
+  width: 400px;
+  height: 300px;
+}
+
+.dynamic-spec {
+  background-color: #f2f2f2;
+  width: 85%;
+  margin: auto;
+  margin-bottom: 10px;
+
+  .spec-header {
+    padding: 30px;
+    padding-bottom: 0;
+
+    .spec-name {
+      display: inline;
+
+      input {
+        width: 30%;
+      }
+    }
+  }
+
+  .spec-values {
+    width: 84%;
+    padding: 25px;
+    margin: auto;
+
+    .spec-value {
+      display: inline-block;
+      margin-right: 10px;
+      margin-bottom: 10px;
+      width: 13%;
+
+    }
+  }
+
+  .spec-delete {
+    float: right;
+    margin-top: 10px;
+    margin-right: 10px;
+  }
+}
+
+.tabs{
+  height: 500px;
+  border-bottom: 2px solid #f2f2f2;
+  .el-tab-pane{
+    height: 445px;
+    overflow-y: auto;
+  }
+}
+
+// 库存价格图片样式修改
+.rates{
+.component-upload-image{
+  margin: auto;
+}
+.el-upload--picture-card{
+  width: 100px;
+  height: 50px;
+  line-height: 60px;
+  margin: auto;
+}
+.el-upload-list__item{
+   width: 100px !important;
+  height: 50px !important;
+}
+}
+.buttons{
+  margin-top: 20px;
+  height: 36px;
+  button{
+    float: right;
+    margin-left: 15px;
+  }
+}
+</style>