caojunjie преди 3 години
родител
ревизия
525c88fe88

+ 0 - 1
src/views/basicData/commodityType/detailsPageEdit.vue

@@ -125,7 +125,6 @@
         <containerTitle title="商品规格"></containerTitle>
         <basic-container>
           <avue-crud
-            :ref="sftcrud"
             :data="sftData"
             :option="sftOption"
             @row-del="rowSftDel"

+ 73 - 0
src/views/basicData/productInformation/configuration/specification.json

@@ -0,0 +1,73 @@
+
+{
+  "border": true,
+  "index": true,
+  "viewBtn": false,
+  "editBtn": false,
+  "delBtn": false,
+  "addBtn": false,
+  "align": "center",
+  "menuWidth": 130,
+  "column": [
+    {
+      "label": "规格名称",
+      "prop": "cname",
+      "minWidth": 100,
+      "cell": true
+    },
+    {
+      "label": "材质",
+      "prop": "texture",
+      "minWidth": 100,
+      "cell": true
+    },
+    {
+      "label": "颜色",
+      "prop": "colour",
+      "minWidth": 100,
+      "cell": true
+    },
+    {
+      "label": "描述",
+      "prop": "describe",
+      "minWidth": 100,
+      "cell": true
+    },
+    {
+      "label": "选择活动",
+      "prop": "describe",
+      "minWidth": 100,
+      "cell": true
+    },
+    {
+      "label": "原始价格",
+      "prop": "describe",
+      "minWidth": 100,
+      "cell": true
+    },
+    {
+      "label": "活动价格",
+      "prop": "describe",
+      "minWidth": 100,
+      "cell": true
+    },
+    {
+      "label": "活动库存",
+      "prop": "describe",
+      "minWidth": 100,
+      "cell": true
+    },
+    {
+      "label": "普通库存",
+      "prop": "describe",
+      "minWidth": 100,
+      "cell": true
+    },
+    {
+      "label": "备注",
+      "prop": "remarks",
+      "minWidth": 100,
+      "cell": true
+    }
+  ]
+}

+ 185 - 27
src/views/basicData/productInformation/detailsPageEdit.vue

@@ -16,35 +16,107 @@
     </div>
     <div style="margin-top: 60px">
       <containerTitle title="基础信息"></containerTitle>
-      <basic-container>
+      <basic-container style="margin-bottom: 10px">
         <avue-form ref="form" v-model="form" :option="option">
           <template slot="goodsTypeId" slot-scope="scope">
             <avue-input-tree
-              v-model="form.goodsTypeId"
-              :props="{ label: 'title', value: 'id' }"
-              multiple
-              placeholder=" "
-              type="tree"
-              :dic="dicData"/>
+                v-model="form.goodsTypeId"
+                :props="{ label: 'title', value: 'id' }"
+                multiple
+                placeholder=" "
+                type="tree"
+                :dic="dicData"/>
           </template>
         </avue-form>
       </basic-container>
+      <containerTitle title="商品规格"></containerTitle>
+      <basic-container style="margin-bottom: 10px">
+        <avue-crud
+            :data="sftData"
+            :option="sftOption"
+            @row-del="rowSftDel"
+        >
+          <template slot="menuLeft" slot-scope="{ row, index }">
+            <el-button
+                type="primary"
+                icon="el-icon-plus"
+                size="small"
+                @click.stop="addSftRow(row, index)"
+            >新增明细
+            </el-button>
+          </template>
+          <template slot="menu" slot-scope="{ row, index }">
+            <el-button
+                size="small"
+                icon="el-icon-edit"
+                type="text"
+                @click.stop="rowSftEdit(row, index)"
+            >
+              {{ row.$cellEdit ? "保存" : "编辑" }}
+            </el-button>
+            <el-button
+                size="small"
+                icon="el-icon-edit"
+                type="text"
+                @click.stop="rowSftDel(row, index)">
+              删除
+            </el-button>
+            <el-button
+                size="small"
+                icon="el-icon-close"
+                type="text">
+              下架
+            </el-button>
+          </template>
+        </avue-crud>
+      </basic-container>
+      <containerTitle title="商品图片"></containerTitle>
+      <basic-container style="margin-bottom: 10px">
+        <avue-crud
+            ref="imgUpload"
+            :option="imgUploadList"
+            :data="imgUploadData"
+            @row-save="imgUploadSave"
+            @row-update="imgUploadUpdate"
+            @row-del="imgUploadDel"
+            :upload-before="uploadBefore"
+        ></avue-crud>
+      </basic-container>
+      <containerTitle title="详情页编辑"></containerTitle>
+      <basic-container style="margin-bottom: 10px">
+        <avue-ueditor v-model="text" :options="options"></avue-ueditor>
+      </basic-container>
     </div>
   </div>
 </template>
 <script>
-  import { getDetail, updateDetail,getDeptTree } from "@/api/basicData/commodityType";
+import {getDetail, updateDetail, getDeptTree, priceDelete} from "@/api/basicData/commodityType";
+import sftOption from "./configuration/specification.json";
+import imgUploadList from "./configuration/imgUploadList.json";
 
 export default {
   name: "detailsPage",
   data() {
     return {
       form: {},
+      sftData: [],
+      sftOption: sftOption,
+      imgUploadList: imgUploadList,
+      text: '<h1 class="ql-align-center" style="text-align: center;"><a href="https://avuejs.com/doc/plugins/ueditor-plugins" target="_blank" style="font-weight: bold; color: rgb(194, 79, 74);">欢迎使用Avue富文本编辑器</a></h1><p class="ql-align-center" style="text-align: center;"><span style="font-weight: bold; color: rgb(194, 79, 74);"><img src="https://avuejs.com/images/logo-bg.jpg" height="200" width="200"></span></p>',
+      options: {
+        //普通图片上传
+        action: "https://avuejs.com/imgupload",
+        customConfig: {}, //wangEditor编辑的配置
+        props: {
+          res: "data",
+          url: "url"
+        }
+      },
       disabled: false,
-      userDialog:false,//供应商导入窗口
-      contactsForm: {},
-      dicData:[],
-      detailsSelect:{},
+      userDialog: false,//供应商导入窗口
+      imgUploadData: [],
+      dicData: [],
+      detailsSelect: {},
       option: {
         menuBtn: false,
         labelWidth: 100,
@@ -115,12 +187,12 @@ export default {
             prop: "status",
             span: 8,
             type: 'select',
-            dicData:[{
-              label:'正常',
-              value:0
-            },{
-              label:'停用',
-              value:1
+            dicData: [{
+              label: '正常',
+              value: 0
+            }, {
+              label: '停用',
+              value: 1
             }],
           },
           {
@@ -207,17 +279,103 @@ export default {
     if (this.$route.query.id) {
       getDetail(JSON.parse(this.$route.query.id)).then(res => {
         this.form = res.data.data
-     })
-    }else{
-      this.$set(this.form,"goodsTypeId", this.$route.query.treeDeptId)
+      })
+    } else {
+      this.$set(this.form, "goodsTypeId", this.$route.query.treeDeptId)
     }
   },
   methods: {
-    rowContactSave(row, done, loading) {
-      done()
+    // 商品图片上传保存
+    imgUploadSave(row, done, loading) {
+      console.log(row);
+      this.imgUploadData.push(row);
+      done();
+    },
+    imgUploadUpdate(row, index, done, loading) {
+      done();
+    },
+    imgUploadDel(row, index, donerowDel) {
+      this.$confirm("确定将选择数据删除?", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        //商品判断是否需要调用删除接口
+        if (row.id) {
+          // corpsattn(row.id).then(res => {
+          //   this.$message({
+          //     type: "success",
+          //     message: "操作成功!"
+          //   });
+          //   this.imgUploadData.splice(index, 1);
+          // })
+        } else {
+          this.$message({
+            type: "success",
+            message: "操作成功!"
+          });
+          this.imgUploadData.splice(index, 1);
+        }
+      });
+    },
+    // 上传前
+    uploadBefore(file, done, loading, column) {
+      const is2M = file.size / 1024 / 1024 < 2;
+      const isType =
+          file.type === "image/jpeg" ||
+          file.type === "image/png" ||
+          file.type === "image/jpg";
+      if (!isType) {
+        this.$message.error("图片只能是JPG、JPEG、PNG格式");
+        loading();
+      }
+      if (!is2M) {
+        this.$message.error("图片大小不能超过2M");
+        loading();
+      }
+      const img = new Image();
+      const _URL = window.URL || window.webkitURL;
+      let isSize = null;
+      img.onload = () => {
+        if (column.label == "图片") {
+          isSize = img.width === img.height;
+          if (!isSize) {
+            this.$message.error("图片宽高限制比例为1:1");
+          }
+        } else {
+          const width = 750;
+          const height = 1000;
+          isSize = img.width === width && img.height <= height;
+          if (!isSize) {
+            this.$message.error("商品详情轮播图宽为750,高不能超过1000");
+          }
+        }
+        if (is2M && isType && isSize) {
+          done();
+        } else {
+          loading();
+        }
+      };
+      img.src = _URL.createObjectURL(file);
+    },
+    rowSftEdit(row) {
+      if (row.$cellEdit == true) {
+        this.$set(row, "$cellEdit", false);
+      } else {
+        this.$set(row, "$cellEdit", true);
+      }
+    },
+    addSftRow() {
+      this.sftData.push({
+        $cellEdit: true,
+        cname: null,
+        texture: null,
+        colour: null,
+        describe: null,
+        remarks: null
+      });
     },
-    rowPurchaseSave(row, done, loading) {
-      done()
+    rowSftDel(row, index) {
     },
     rowContactCell(row, index) {
       this.$refs.crudContact.rowCell(row, index)
@@ -232,10 +390,10 @@ export default {
         if (valid) {
           const params = {
             ...this.form,
-            type:0,
+            type: 0,
           }
           updateDetail(params).then(res => {
-            if(res.data.success){
+            if (res.data.success) {
               this.$message.success("操作成功!")
             }
           })

+ 27 - 7
src/views/basicData/productInformation/index.vue

@@ -33,16 +33,30 @@
               @click="excelBox = true"
             >导入
             </el-button>
-          </template>
-          <template slot-scope="scope" slot="menu">
             <el-button
-                type="text"
-                icon="el-icon-view"
-                size="small"
-                @click.stop="beforeOpenPage(scope.row, scope.index)"
-            >查看
+              type="warning"
+              size="small"
+              icon="el-icon-bottom"
+              @click="excelBox = true"
+            >批量上架
             </el-button>
             <el-button
+              type="danger"
+              size="small"
+              icon="el-icon-bottom"
+              @click="excelBox = true"
+            >批量下架
+            </el-button>
+          </template>
+          <template slot-scope="scope" slot="menu">
+<!--            <el-button-->
+<!--                type="text"-->
+<!--                icon="el-icon-view"-->
+<!--                size="small"-->
+<!--                @click.stop="beforeOpenPage(scope.row, scope.index)"-->
+<!--            >查看-->
+<!--            </el-button>-->
+            <el-button
                 type="text"
                 icon="el-icon-edit"
                 size="small"
@@ -56,6 +70,12 @@
                 @click.stop="rowDel(scope.row, scope.index)"
             >删除
             </el-button>
+            <el-button
+                type="text"
+                icon="el-icon-delete"
+                size="small"
+            >下架
+            </el-button>
           </template>
         </avue-crud>
         <el-dialog title="导入产品"