From a315ccd1857a6ee8d217abd198ebd2d0f71e47b3 Mon Sep 17 00:00:00 2001
From: panqihua <panqihua@melt.icu>
Date: Fri, 27 Jan 2023 04:24:38 +0800
Subject: [PATCH] =?UTF-8?q?1.=E5=8E=82=E5=95=86-=E5=95=86=E5=93=81?=
 =?UTF-8?q?=E5=BA=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../inventory/components/add_product.vue      | 277 ++++++++++++++++++
 .../components/inventory/components/form.vue  | 135 +++++++++
 .../inventory/components/tag_list.vue         |  95 ++++++
 src/views/components/inventory/index.vue      |  41 +++
 .../platform/self-operated-mall/index.vue     |   7 +-
 5 files changed, 552 insertions(+), 3 deletions(-)
 create mode 100644 src/views/components/inventory/components/add_product.vue
 create mode 100644 src/views/components/inventory/components/form.vue
 create mode 100644 src/views/components/inventory/components/tag_list.vue
 create mode 100644 src/views/components/inventory/index.vue

diff --git a/src/views/components/inventory/components/add_product.vue b/src/views/components/inventory/components/add_product.vue
new file mode 100644
index 0000000..6c2c8ac
--- /dev/null
+++ b/src/views/components/inventory/components/add_product.vue
@@ -0,0 +1,277 @@
+<template>
+  <div class="app-container">
+    <el-tabs v-model="activeName" type="border-card">
+      <el-tab-pane label="基本信息" name="base">
+        <div class="title">基本信息</div>
+        <el-divider/>
+        <el-form :inline="true">
+          <el-form-item label="商品名称">
+            <el-input placeholder="请输入商品名称"/>
+          </el-form-item>
+          <el-form-item label="商品编码">
+            <el-input placeholder="请输入商品编码"/>
+          </el-form-item>
+          <el-form-item>
+            <el-cascader placeholder="请选择商品分类" :options="categoryOptions"></el-cascader>
+          </el-form-item>
+        </el-form>
+        <el-form :inline="true">
+          <el-form-item label="计量单位">
+            <el-select placeholder="请选择计量单位" v-model="form.unit"/>
+          </el-form-item>
+          <el-form-item label="库存预警">
+            <el-input-number placeholder="请输入最低库存数量" v-model="form.num" controls-position="right"
+                             :step="100" :min="0"></el-input-number>
+          </el-form-item>
+          <br/>
+          <el-form-item label="是否上架">
+            <el-switch v-model="form.isOnShelf" active-color="#adbcf9" inactive-color="#adbc00">
+            </el-switch>
+          </el-form-item>
+        </el-form>
+        <div class="title">商品主图</div>
+        <el-divider/>
+        <el-row>
+          <el-col :span="4" v-for="(item, index) in form.fileList" :key="index">
+            <div class="img" :style="{
+                            backgroundImage: `url(${item.blobURL})`
+                        }">
+              <i class="el-icon-check" v-if="item.primary"></i>
+            </div>
+            <div style="text-align: center;">
+              <el-button type="text" @click="setPrimary(index)">设为主图</el-button>
+              <el-button type="text" @click="handleRemove(index)">删除图片</el-button>
+            </div>
+          </el-col>
+        </el-row>
+        <el-upload action="#" accept="image/png, image/jpeg" :limit="maxFileCount" :show-file-list="false"
+                   :auto-upload="false" :file-list="form.fileList" :on-change="handleChange">
+          <el-button type="primary" v-if="form.fileList.length < maxFileCount">上传图片</el-button>
+          <span
+            class="upload-tip">145*145（单张图片大小不超过{{ maxFileSizeM }}，支持格式jpg、png，最多上传8张）</span>
+        </el-upload>
+        <div class="title">商品详情</div>
+        <h1>富文本编辑器</h1>
+        <el-divider/>
+        <el-button type="primary" @click="save">保存</el-button>
+        <el-button @click="$emit('close')">关闭</el-button>
+      </el-tab-pane>
+      <el-tab-pane label="库存规格" name="spec">
+        <el-row type="flex" justify="center">
+          <el-col :span="2">
+            <div class="left-title">库存/规格</div>
+          </el-col>
+          <el-col :span="16">
+            <el-input placeholder="输入规格名称">
+              <template slot="append">
+                <el-button>添加规格</el-button>
+              </template>
+            </el-input>
+            <div class="top">
+              <tag-list label="尺寸" @change-tags="(tags) => { console.info(tags) }"/>
+              <tag-list label="颜色" @change-tags="(tags) => { console.info(tags) }"/>
+            </div>
+            <el-table class="spec-table" :data="specList" :span-method="arraySpanMethod" border>
+              <el-table-column label="尺寸" align="center">
+                <template slot-scope="scope">
+                  <span v-if="scope.row === undefined">批量设置</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="颜色" align="center">
+
+              </el-table-column>
+              <el-table-column label="价格" align="center">
+                <template slot-scope="scope">
+                  <el-input v-if="scope.row === undefined">
+                    <template slot="append">
+                      <el-button>设置</el-button>
+                    </template>
+                  </el-input>
+                </template>
+              </el-table-column>
+              <el-table-column label="吊牌 价格" align="center">
+                <template slot-scope="scope">
+                  <el-input v-if="scope.row === undefined">
+                    <template slot="append">
+                      <el-button>设置</el-button>
+                    </template>
+                  </el-input>
+                </template>
+              </el-table-column>
+              <el-table-column label="库存" align="center">
+                <template slot-scope="scope">
+                  <el-input v-if="scope.row === undefined">
+                    <template slot="append">
+                      <el-button>设置</el-button>
+                    </template>
+                  </el-input>
+                </template>
+              </el-table-column>
+              <el-table-column label="图片" align="center"></el-table-column>
+            </el-table>
+          </el-col>
+
+        </el-row>
+
+      </el-tab-pane>
+    </el-tabs>
+
+  </div>
+</template>
+<script>
+import { mapState } from 'vuex'
+import TagList from './tag_list'
+
+export default {
+  name: 'AddProduct',
+  components: { TagList },
+  data() {
+    return {
+      //库存数据
+      specList: [undefined],
+      // 最大上传文件数
+      maxFileCount: 2,
+      //最大上传文件体积 单位字节
+      maxFileSize: 1024 * 1024 * 5,
+      form: {
+        // 库存预警
+        num: 100,
+        // 是否商家
+        isOnShelf: true,
+        //计量单位
+        unit: undefined,
+        fileList: []
+
+      },
+      activeName: 'base'
+    }
+  },
+  methods: {
+    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
+      if (rowIndex === this.specList.length - 1) {
+        switch (columnIndex) {
+          case 0:
+            return [1, 2]
+          case 1:
+            return [0, 0]
+          default:
+            return [1, 1]
+        }
+      } else {
+        return [1, 1]
+      }
+    },
+    // 设置主图
+    setPrimary(index) {
+
+      let _index = this.form.fileList.findIndex(item => item.primary)
+      let old = this.form.fileList[_index]
+      old.primary = false
+      this.form.fileList.splice(_index, 1, old)
+      let _new = this.form.fileList[index]
+      _new.primary = true
+      this.form.fileList.splice(index, 1, _new)
+
+    },
+    handleChange(file, fileList) {
+      if (file.size > this.maxFileSize) {
+        this.$modal.msgWarning(`单张图片大小不能超过${this.maxFileSizeM}`)
+        return
+      }
+      file.blobURL = URL.createObjectURL(file.raw)
+      file.primary = false
+      if (this.form.fileList.length === 0) {
+        file.primary = true
+      }
+      this.form.fileList.push(file)
+
+    },
+    handleRemove(index) {
+      let del = this.form.fileList[index]
+      this.form.fileList.splice(index, 1)
+      //删除主图时默认设置剩下图片中的第一张为主图
+      if (this.form.fileList.length > 0 && del.primary) {
+        let defaultPrimary = this.form.fileList[0]
+        defaultPrimary.primary = true
+        this.form.fileList.splice(0, 1, defaultPrimary)
+      }
+    },
+    handlePreview(file) {
+      console.log(file)
+    },
+    save() {
+      this.$modal.msgSuccess('保存成功')
+      this.$emit('close')
+    }
+  },
+  computed: {
+    ...mapState({
+      categoryOptions: state => state.platformShop.categoryOptions
+    }),
+    maxFileSizeM() {
+      return `${this.maxFileSize / 1024 / 1024}M`
+    }
+  }
+}
+</script>
+<style lang="scss">
+.spec-table {
+  margin-top: 10px;
+
+  thead th {
+    background-color: #fff !important;
+  }
+}
+
+.top {
+  margin-top: 5px;
+  background-color: #f5f5f5;
+  border-radius: 5px;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+
+}
+
+.img {
+  width: 145px;
+  height: 145px;
+  background-position: center;
+  background-size: cover;
+  margin: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 50px;
+}
+
+.left-title {
+  font-size: 16px;
+}
+
+.title {
+  color: rgba(16, 16, 16, 1);
+  font-size: 16px;
+  text-align: left;
+  font-family: SourceHanSansSC-regular;
+  margin-top: 20px;
+}
+
+.el-switch__core:after {
+  content: "";
+  position: absolute;
+  top: 1px;
+  left: 1px;
+  border-radius: 100%;
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+  width: 16px;
+  height: 16px;
+  background-color: #5a7bf4 !important;
+}
+
+.upload-tip {
+  font-size: 14px;
+  text-align: left;
+  font-family: SourceHanSansSC-regular;
+  margin-left: 10px;
+}
+</style>
diff --git a/src/views/components/inventory/components/form.vue b/src/views/components/inventory/components/form.vue
new file mode 100644
index 0000000..8b20176
--- /dev/null
+++ b/src/views/components/inventory/components/form.vue
@@ -0,0 +1,135 @@
+<template>
+  <div class="app-container">
+    <el-row>
+      <el-form :inline="true">
+        <el-form-item>
+          <el-input v-model="queryParams.productName" placeholder="请输入商品名称"/>
+        </el-form-item>
+        <el-form-item>
+          <el-input v-model="queryParams.productCode" placeholder="请输入商品编码"/>
+        </el-form-item>
+        <el-form-item>
+          <el-cascader placeholder="请选择商品分类" v-model="queryParams.productCategory"
+                       :options="categoryOptions"></el-cascader>
+        </el-form-item>
+        <el-form-item>
+          <el-select v-model="queryParams.productStatus" placeholder="状态" clearable>
+            <el-option v-for="dict in dict.type.product_status" :key="dict.value" :label="dict.label"
+                       :value="dict.value"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-date-picker v-model="queryParams.dateRange" style="width: 240px" value-format="yyyy-MM-dd"
+                          type="daterange" range-separator="-" start-placeholder="开始日期"
+                          end-placeholder="结束日期"></el-date-picker>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" size="mini">查询</el-button>
+          <el-button icon="el-icon-refresh" size="mini">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-row>
+    <el-row type="flex" justify="space-between">
+      <el-col :span="12">
+        <el-button type="primary" @click="$emit('show-add')">新增商品</el-button>
+        <el-button>批量上架</el-button>
+        <el-button>批量下架</el-button>
+        <el-button>批量删除</el-button>
+      </el-col>
+      <el-col :span="6">
+        <el-button type="text">下载模板</el-button>
+        <el-button>导入</el-button>
+        <el-button>导出</el-button>
+      </el-col>
+    </el-row>
+    <el-row class="table">
+      <el-table :data="dataList">
+        <el-table-column type="selection" width="50" align="center"/>
+        <el-table-column type="index" label="序号" align="center">
+
+        </el-table-column>
+        <el-table-column label="商品编码" align="center">
+          DS000001
+        </el-table-column>
+        <el-table-column label="商品名称" align="center">
+          联想笔记本
+        </el-table-column>
+        <el-table-column label="商品图片" align="center">
+          <img src="http://www.dummyimage.com/50x50"/>
+        </el-table-column>
+        <el-table-column label="商品分类" align="center">
+          电子产品
+        </el-table-column>
+        <el-table-column label="单位" align="center">
+          台
+        </el-table-column>
+        <el-table-column label="销售价" align="center">
+          ￥120.00
+        </el-table-column>
+        <el-table-column label="吊牌价" align="center">
+          ￥120.00
+        </el-table-column>
+        <el-table-column label="销量" align="center">
+          1000
+        </el-table-column>
+        <el-table-column label="库存" align="center">
+          100
+        </el-table-column>
+        <el-table-column label="状态" align="center">
+          上架
+        </el-table-column>
+        <el-table-column label="创建时间" align="center">
+          2022-12-31 12:31
+        </el-table-column>
+        <el-table-column label="操作" align="center">
+          <el-button type="text">编辑</el-button>
+          <el-button type="text" @click="change(true,123)">上架</el-button>
+          <el-button type="text" @click="change(false,123)">下架</el-button>
+        </el-table-column>
+      </el-table>
+    </el-row>
+  </div>
+</template>
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  name: 'BaseForm',
+  dicts: ['product_status'],
+  data() {
+    return {
+      dataList: [{}],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        productName: undefined,
+        productCode: undefined,
+        productCategory: undefined,
+        productStatus: undefined,
+        dateRange: undefined
+      }
+    }
+  },
+  methods: {
+    change(status, id) {
+      if (status) {
+        this.$modal.confirm('商品上架后不可删除，确定上架？')
+      } else {
+        this.$modal.confirm('确定下架该商品')
+      }
+
+    }
+  },
+  computed: {
+    ...mapState({
+      categoryOptions: state => state.platformShop.categoryOptions
+    })
+  }
+}
+</script>
+<style scoped lang="scss">
+.table {
+  margin-top: 20px;
+}
+</style>
diff --git a/src/views/components/inventory/components/tag_list.vue b/src/views/components/inventory/components/tag_list.vue
new file mode 100644
index 0000000..8047d18
--- /dev/null
+++ b/src/views/components/inventory/components/tag_list.vue
@@ -0,0 +1,95 @@
+<template>
+  <div>
+    <div class="size">
+      <i class="el-icon-delete"></i>
+      <span>{{ this.label }}</span>
+      <i class="el-icon-delete" @click="tags = []"></i>
+    </div>
+
+    <el-row class="add" type="flex" justify="space-between">
+      <el-col :span="11">
+        <el-input v-model="value">
+          <template slot="append">
+            <el-button @click="addTag">添加</el-button>
+          </template>
+        </el-input>
+      </el-col>
+      <el-col :span="11">
+        <el-tag v-for="(tag, index) in tags" :key="tag.name" closable :type="tag.type"
+                @close="tags.splice(index, 1)">
+          {{ tag.name }}
+        </el-tag>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script>
+export default {
+  name: 'TagList',
+  props: {
+    label: String
+  },
+  data() {
+    return {
+      //当前尺寸文本
+      value: '',
+      tags: []
+    }
+  },
+  methods: {
+
+    addTag() {
+      let value = this.value
+      if (value) {
+        if (this.tags.find(item => item.name === value)) {
+          this.$modal.msgWarning(`请问重复添加${value}`)
+        } else {
+          this.tags.push({ name: value, type: '' })
+          this.value = ''
+        }
+      }
+    }
+  },
+  watch: {
+    tags(value) {
+      this.$emit('change-tags', value)
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+.add {
+  background-color: #ffffff;
+  padding: 5px;
+
+  & > div:last-child {
+    display: flex;
+    align-items: center;
+    overflow-x: auto;
+
+    & > span {
+      margin-left: 5px;
+    }
+  }
+}
+
+.size {
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 15px 10px;
+
+  & > span {
+    font-weight: bold;
+  }
+
+  & > i:first-child {
+    visibility: hidden;
+  }
+
+  & > i:last-child {
+    color: red;
+  }
+}
+</style>
diff --git a/src/views/components/inventory/index.vue b/src/views/components/inventory/index.vue
new file mode 100644
index 0000000..76a9df4
--- /dev/null
+++ b/src/views/components/inventory/index.vue
@@ -0,0 +1,41 @@
+<template>
+  <div v-if="showList">
+    <el-tabs v-model="activeName" type="card" class="custom-tab">
+      <el-tab-pane label="全部商品（120）" name="all">
+        全部商品
+      </el-tab-pane>
+      <el-tab-pane label="上架商品（120）" name="on-shelf">
+        上架商品
+      </el-tab-pane>
+      <el-tab-pane label="下架商品（120）" name="off-shelf">
+        下架商品
+      </el-tab-pane>
+      <el-tab-pane label="库存预警（120）" name="warn">
+        库存预警
+      </el-tab-pane>
+    </el-tabs>
+    <base-form @show-add="showList = false"/>
+  </div>
+  <add-product v-else @close="showList = true"/>
+</template>
+<script>
+import BaseForm from './components/form'
+import AddProduct from './components/add_product'
+//TODO:商品库，封装成公共组件给总平台、厂商/经销商使用
+export default {
+  name: 'Index',
+  components: { BaseForm, AddProduct },
+  data() {
+    return {
+      activeName: 'all',
+      showList: true
+    }
+  },
+  methods: {}
+}
+</script>
+<style scoped lang="scss">
+div[role='tablist'] > div {
+  background-color: #1684fc;
+}
+</style>
diff --git a/src/views/platform/self-operated-mall/index.vue b/src/views/platform/self-operated-mall/index.vue
index f8260d3..d71500d 100644
--- a/src/views/platform/self-operated-mall/index.vue
+++ b/src/views/platform/self-operated-mall/index.vue
@@ -20,8 +20,9 @@
     <add-product v-else @close="showList = true" />
 </template>
 <script>
-import BaseForm from "./components/form"
-import AddProduct from "./components/add_product"
+import BaseForm from './components/form'
+import AddProduct from './components/add_product'
+//TODO:商品库，封装成公共组件给总平台、厂商/经销商使用
 export default {
     name: "Index",
     components: { BaseForm, AddProduct },
@@ -40,4 +41,4 @@ export default {
 div[role='tablist']>div {
     background-color: #1684fc;
 }
-</style>
\ No newline at end of file
+</style>