管理后台-商品管理：商品附加

htmldev/manage/src/router/modules/business.js

@@ -129,6 +129,12 @@ const businessRouter = {
           component: () => import('@/views/business/pms/goods/index'),
           name: 'BusinessPMSGoods',
           meta: { title: '商品列表' }
+        },
+        {
+          path: 'goodsAttr',
+          component: () => import('@/views/business/pms/goodsAttr/index'),
+          name: 'BusinessPMSGoodsAttr',
+          meta: { title: '商品附加' }
         }
       ]
     }

htmldev/manage/src/views/business/pms/goodsAttr/details.vue

@@ -0,0 +1,137 @@
+<template>
+  <div>
+    <el-dialog :title="exData.id ? '编辑': '新增'"
+               :visible.sync="dialog"
+               width="50%"
+               :close-on-click-modal="false"
+               top="50px">
+      <el-form ref="form"
+               :model="form"
+               :rules="formRules"
+               label-width="160px">
+        <el-form-item prop="attach_name"
+                      :rules="formRules.required"
+                      label="规格名称：">
+          <el-col :span="16">
+            <el-input v-model="form.attach_name"
+                      placeholder="请输入规格名称"
+                      clearable></el-input>
+          </el-col>
+        </el-form-item>
+        <el-form-item v-for="(option, index) in form.attach_content"
+                      :label="(index + 1).toString()"
+                      :key="index"
+                      :prop="'attach_content.' + index + '.name'"
+                      :rules="formRules.required">
+          <el-col :span="16">
+            <el-input v-model="option.name"
+                      placeholder="请输入附加内容"
+                      clearable></el-input>
+          </el-col>
+          <el-col :span="2" :offset="1">
+            <el-button type="warning"
+                       :disabled="form.attach_content.length <= 1"
+                       @click.prevent="removeAttachContent(option)">删除
+            </el-button>
+          </el-col>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer text-center">
+        <el-button @click="dialog = false">取 消</el-button>
+        <el-button @click="addAttachContent">新增选项名</el-button>
+        <el-button type="primary" @click="handleSubmit">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: {
+    value: {
+      type: Boolean,
+      default: true
+    },
+    exData: {
+      type: Object,
+      default: function () {
+        return {}
+      }
+    }
+  },
+  data () {
+    return {
+      dialog: !!this.value,
+      form: {
+        attach_name: '', // 附加名称
+        attach_content: [
+          {
+            name: ''
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    removeAttachContent (item) {
+      var index = this.form.attach_content.indexOf(item)
+      if (index !== -1) {
+        this.form.attach_content.splice(index, 1)
+      }
+    },
+    addAttachContent () {
+      this.form.attach_content.push({
+        name: ''
+      })
+    },
+    handleSubmit () {
+      const url = this.exData.id ? '/v1/bar/product/attach/modify' : '/v1/bar/product/attach/add'
+      this.$refs.form.validate(async valid => {
+        if (valid) {
+          const postData = {
+            ...this.form,
+            attach_content: this.form.attach_content.map(item => item.name).join(',')
+          }
+          const data = await this.$fetch(url, postData)
+          if (data.code === 200) {
+            this.$message.success('提交成功')
+            this.$emit('success')
+            this.dialog = false
+          }
+        }
+      })
+    }
+  },
+  mounted () {
+    if (this.exData.id) {
+      this.$set(this.form, 'id', this.exData.id)
+      for (const key in this.exData) {
+        if (this.form.hasOwnProperty(key)) {
+          let value = this.exData[key]
+          if ((Array.isArray(value) && value.length > 0) || value === 0 || value) {
+            if (key === 'attach_content') {
+              value = value.split(',').map(item => ({
+                name: item
+              }))
+            }
+            this.$set(this.form, key, value)
+          }
+        }
+      }
+    }
+  },
+  watch: {
+    dialog (val) {
+      if (!val) this.$emit('input', val)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.top-tip {
+  margin-top: -20px;
+  margin-bottom: 20px;
+}
+</style>

htmldev/manage/src/views/business/pms/goodsAttr/index.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="padding-20">
+    <div class="search-box">
+      <el-form ref="form"
+               :inline="true"
+               :model="searchForm"
+               clearable
+               label-width="100px"
+               class="mt-10">
+        <el-form-item label="座位名称:">
+          <el-input v-model="searchForm.department_name" placeholder="请输入座位名称" clearable></el-input>
+        </el-form-item>
+        <el-form-item class="ml-10">
+          <el-button icon="el-icon-search" type="primary" @click="searchSubmit">查询</el-button>
+        </el-form-item>
+        <el-form-item class="ml-10">
+          <el-button icon="el-icon-plus" type="primary" @click="add">添加</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <el-table :data="tableData"
+              stripe
+              v-loading="tableLoading"
+              fit
+              class="marginT-10 order-table"
+              border
+              :max-height="vheight">
+      <el-table-column label="ID" prop="id" width="200"></el-table-column>
+      <el-table-column label="附加名称" prop="attach_name" width="200"></el-table-column>
+      <el-table-column label="可选值列表">
+        <template slot-scope="scope">
+          <p>{{ scope.row.attach_content.replace(/,/g, '，') }}</p>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="220">
+        <template slot-scope="scope">
+          <el-button type="text"
+                     @click="edit(scope.row)">编辑
+          </el-button>
+          <el-button type="text"
+                     @click="del(scope.row)">删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      class="marginT-20"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :hide-on-single-page="true"
+      :current-page="page"
+      :page-size="page_size"
+      :page-sizes="[10, 20, 100, 200, 300, 400]"
+      background
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="totalCount"/>
+    <detail v-if="detailsDialog.show"
+            v-model="detailsDialog.show"
+            :exData="detailsDialog.exData"
+            @success="init"></detail>
+  </div>
+</template>
+
+<script>
+import page from '@/mixin/page'
+import detail from './details'
+
+export default {
+  mixins: [page],
+  components: {
+    detail,
+  },
+  data () {
+    return {
+      detailsDialog: {
+        show: false,
+        exData: {}
+      },
+      time: [],
+      searchForm: {},
+      tableData: [],
+      tableUrl: '/v1/bar/product/attach/list'
+    }
+  },
+  methods: {
+    add () {
+      this.detailsDialog.exData = {}
+      this.detailsDialog.show = true
+    },
+    edit (row) {
+      this.detailsDialog.exData = row
+      this.detailsDialog.show = true
+    },
+    del (row) {
+      this.$confirm('确定要删除吗', '确认', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(async () => {
+        const data = await this.$fetch('/v1/bar/product/attach/delete', { id: row.id }, 'get')
+        if (data.code === 200) {
+          this.$message.success('删除成功')
+          this.init()
+        }
+      }).catch(() => {})
+    }
+  },
+  mounted () {
+    this.init()
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.el-dropdown {
+  margin: 0 10px;
+
+  .el-dropdown-link {
+    cursor: pointer;
+    color: #409EFF;
+  }
+}
+</style>