feats

src/components/EditableTag.vue

@@ -0,0 +1,84 @@
+<template>
+  <div>
+    <el-tag
+      :key="item[label]"
+      v-for="item in value"
+      closable
+      :disable-transitions="false"
+      @close="() => handleClose(item)">
+      {{item[label]}}
+    </el-tag>
+    <el-input
+      class="input-new-tag"
+      v-if="inputVisible"
+      v-model="inputValue"
+      ref="saveTagInput"
+      size="small"
+      @keyup.enter.native="handleInputConfirm"
+      @blur="handleInputConfirm"
+    >
+    </el-input>
+    <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 新建</el-button>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'EditableTag',
+    props: [
+      'value',
+      'label',
+    ],
+    data() {
+      return {
+        inputVisible: false,
+        inputValue: ''
+      };
+    },
+    methods: {
+      handleClose(item) {
+        this.$confirm(`确认删除 ${item[this.label]}?`, '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          this.$emit('delete', item)
+        }).catch(() => {})
+      },
+
+      showInput() {
+        this.inputVisible = true;
+        this.$nextTick(() => {
+          this.$refs.saveTagInput.$refs.input.focus()
+        })
+      },
+
+      handleInputConfirm() {
+        let inputValue = this.inputValue
+        if (inputValue) {
+          this.$emit('insert', inputValue)
+        }
+        this.inputVisible = false
+        this.inputValue = ''
+      }
+    }
+  }
+</script>
+
+<style>
+  .el-tag + .el-tag {
+    margin-left: 10px;
+  }
+  .button-new-tag {
+    margin-left: 10px;
+    height: 32px;
+    line-height: 30px;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .input-new-tag {
+    width: 90px;
+    margin-left: 10px;
+    vertical-align: bottom;
+  }
+</style>

src/config/api.js

@@ -365,7 +365,68 @@ const apis = {
     },
     
   },
-  
+  goods: {
+    type: {
+      list: {
+        method: 'get',
+        url: `${commPrefix}/tdGoodsType`
+      },
+      save: {
+        method: 'post',
+        url: `${commPrefix}/tdGoodsType/add`
+      },
+      update: {
+        method: 'put',
+        url: `${commPrefix}/tdGoodsType/update`
+      },
+      delete: {
+        method: 'delete',
+        url: `${commPrefix}/tdGoodsType/delete/:id`
+      },
+    },
+
+    spec: {
+      list: {
+        method: 'get',
+        url: `${commPrefix}/tdSpec`
+      },
+      save: {
+        method: 'post',
+        url: `${commPrefix}/tdSpec/add`
+      },
+      update: {
+        method: 'put',
+        url: `${commPrefix}/tdSpec/update`
+      },
+      delete: {
+        method: 'delete',
+        url: `${commPrefix}/tdSpec/delete/:id`
+      },
+    },
+
+    profile: {
+      list: {
+        method: 'get',
+        url: `${commPrefix}/taGoods`
+      },
+      get: {
+        method: 'get',
+        url: `${commPrefix}/taGoods/get/:id`
+      },
+      save: {
+        method: 'post',
+        url: `${commPrefix}/taGoods/add`
+      },
+      update: {
+        method: 'put',
+        url: `${commPrefix}/taGoods/update`
+      },
+      delete: {
+        method: 'delete',
+        url: `${commPrefix}/taGoods/delete/:id`
+      },
+    }
+  }
 
 }
 export default apis

src/layout/default/MenuItem.vue

@@ -1,8 +1,10 @@
 <template>
   <el-submenu v-if="checkChildren(menu) && isShow(menu)" :index="menu.name">
     <template slot="title">
-      <xm-icon v-if="menu.meta.icon" :name="menu.meta.icon"></xm-icon>
-      <span slot="title">{{ menu.meta.title }}</span>
+      <div @click="() => handleClick(menu)">
+        <xm-icon v-if="menu.meta.icon" :name="menu.meta.icon"></xm-icon>
+        <span slot="title">{{ menu.meta.title }}</span>
+      </div>
     </template>
     <menu-item v-for="item in menu.children" :key="item.name" :menu="item" :validate="validate" />
   </el-submenu>
@@ -36,6 +38,11 @@ export default {
       if (!this.validate(item)) return false
 
       return true
+    },
+    handleClick (menu) {
+      if (menu.meta.hasChildren) {
+        this.$router.push({ name: menu.name })
+      }
     }
   }
 }

src/store/modules/goods.js

@@ -24,48 +24,71 @@ export default {
     }
   },
   actions: {
-    GetGoodsList ({ commit }, payload) {
-      return new Promise((resolve, reject) => {
-        interact(apis.goodsManager.getGoodsList, payload).then(res => {
-          commit('updateList', res)
-          resolve(res)
-        }).catch(reject)
-      })
+    getGoodsList (_, payload) {
+      return interact(apis.goods.profile.list, payload)
     },
-    GetGoodTypes ({ commit }, payload) {
-      return new Promise((resolve, reject) => {
-        interact(apis.goodsManager.getGoodsTypeList, payload).then(res => {
-          commit('updateTypes', res)
-          resolve(res)
-        }).catch(reject)
-      })
+    saveGoods (_, goods) {
+      return interact(apis.goods.profile.save, window.JSON.stringify(goods))
     },
-    GetGoodSpecs ({ commit }, payload) {
-      interact(apis.goodsManager.getGoodsSpecList, payload).then(res => {
-        commit('updateSpecs', res)
-      })
+    updateGoods (_, goods) {
+      return interact(apis.goods.profile.update, window.JSON.stringify(goods))
     },
-    GetGoodsByID ({ commit }, { id }) {
-      interact(replaceApiParams(apis.goodsManager.getGoodsByID, { id })).then(res => {
-        commit('updateInfo', res)
-      })
+    deleteGoods (_, goods) {
+      return interact(replaceApiParams(apis.goods.profile.delete, { id: goods.goodsId }))
     },
-    AddGoods ({ commit }, payload) {
-      interact(apis.goodsManager.addGoods, payload).then(res => {
-        commit('updateInfo', res)
-      })
+    getGoodsByID (_, payload) {
+      return interact(replaceApiParams(apis.goods.profile.get, { id: payload.id }))
     },
-    UpdateGoods (_, payload) {
-      interact(replaceApiParams(apis.goodsManager.updateGoods, { id: payload.GoodsId }), payload).then(x => x)
+
+    getGoodTypes (_, payload) {
+      return interact(apis.goods.type.list, payload)
     },
-    DelGoods (_, { id, callback }) {
-      interact(replaceApiParams(apis.goodsManager.deleteGoods.url, { id: id })).then(callback)
+    saveGoodType (_, goodsType) {
+      return interact(apis.goods.type.save, window.JSON.stringify(goodsType))
     },
-    SetNull ({ commit }) {
-      commit('updateInfo', {})
+    updateGoodType (_, goodsType) {
+      return interact(apis.goods.type.update, window.JSON.stringify(goodsType))
     },
-    UpdateInfo ({ commit }, payload) {
-      commit('updateInfo', payload)
-    }
+    deleteGoodType (_, goodsType) {
+      return interact(replaceApiParams(apis.goods.type.delete, { id: goodsType.typeId }))
+    },
+
+    getGoodsSpecList (_, payload) {
+      return interact(apis.goods.spec.list, payload)
+    },
+    saveGoodsSpec (_, goodsSpec) {
+      return interact(apis.goods.spec.save, window.JSON.stringify(goodsSpec))
+    },
+    deleteGoodsSpec (_, goodsSpec) {
+      return interact(replaceApiParams(apis.goods.spec.delete, { id: goodsSpec.specId }))
+    },
+
+    // getGoodSpecs ({ commit }, payload) {
+    //   interact(apis.goodsManager.getGoodsSpecList, payload).then(res => {
+    //     commit('updateSpecs', res)
+    //   })
+    // },
+    // getGoodsByID ({ commit }, { id }) {
+    //   interact(replaceApiParams(apis.goodsManager.getGoodsByID, { id })).then(res => {
+    //     commit('updateInfo', res)
+    //   })
+    // },
+    // addGoods ({ commit }, payload) {
+    //   interact(apis.goodsManager.addGoods, payload).then(res => {
+    //     commit('updateInfo', res)
+    //   })
+    // },
+    // updateGoods (_, payload) {
+    //   interact(replaceApiParams(apis.goodsManager.updateGoods, { id: payload.GoodsId }), payload).then(x => x)
+    // },
+    // delGoods (_, { id, callback }) {
+    //   interact(replaceApiParams(apis.goodsManager.deleteGoods.url, { id: id })).then(callback)
+    // },
+    // setNull ({ commit }) {
+    //   commit('updateInfo', {})
+    // },
+    // updateInfo ({ commit }, payload) {
+    //   commit('updateInfo', payload)
+    // }
   }
 }

src/views/goodsManager/GoodsSpec.vue

@@ -0,0 +1,77 @@
+<template>
+  <div>
+    <el-alert title="直接进行标签的新增、删除即可，不支持修改" type="warning"></el-alert>
+    <div style="margin-top: 24px">
+      <editable-tag
+        :value="specList"
+        label="specName"
+        @insert="handleSpecSave"
+        @delete="handleSpecDelete"
+      ></editable-tag>
+    </div>
+    <div></div>
+  </div>
+</template>
+
+<script>
+import { createNamespacedHelpers } from 'vuex'
+
+const { mapActions: mapGoodsActions } = createNamespacedHelpers('goods')
+
+export default {
+  name: 'GoodsSpec',
+  components: {
+    EditableTag: () => import('../../components/EditableTag')
+  },
+  data () {
+    return {
+      specList: [],
+      detailTPL: {
+        specId: undefined,
+        specName: undefined,
+        status: undefined,
+        orgId: undefined,
+        caseId: undefined,
+      },
+      detail: {},
+    }
+  },
+  created () {
+    this.pageInit()
+  },
+  methods: {
+    ...mapGoodsActions([
+      'getGoodsSpecList',
+      'saveGoodsSpec',
+      'deleteGoodsSpec',
+    ]),
+
+    pageInit() {
+      this.getGoodsSpecList({ pageSize: 999 }).then((dt) => {
+        this.specList = dt.records || []
+      })
+    },
+
+    handleSpecSave (specName) {
+      this.detail = { ...this.detailTPL, specName }
+      this.saveGoodsSpec(this.detail).then((dt) => {
+        this.specList = this.specList.concat(dt)
+
+        this.$message('操作成功')
+      }).catch((err) => {
+        this.$message.error(err.message || err)
+      })
+    },
+    handleSpecDelete (spec) {
+      this.deleteGoodsSpec(spec).then(() => {
+        this.specList = this.specList.filter(s => s.specId !== spec.specId)
+
+        this.$message('操作成功')
+      }).catch((err) => {
+        this.$message.error(err.message || err)
+      })
+    }
+  }
+}
+</script>
+

src/views/goodsManager/goodsTypeManager/index.vue → src/views/goodsManager/GoodsType.vue

@@ -55,10 +55,12 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { createNamespacedHelpers } from 'vuex'
+
+const { mapActions: mapGoodsActions } = createNamespacedHelpers('goods')
 
 export default {
-  name: '',
+  name: 'GoodsType',
   data () {
     return {
       total: 0,
@@ -88,11 +90,21 @@ export default {
     })
   },
   computed: {
-    ...mapState({
-    }),
   },
   methods: {
+    ...mapGoodsActions([
+      'getGoodTypes',
+      'saveGoodType',
+      'updateGoodType',
+      'deleteGoodType',
+    ]),
     getList () { // 获取列表
+      this.getGoodTypes(this.postData).then((data) => {
+        this.postData.page = data.current
+        this.postData.pagesize = data.size
+        this.currentList = data.records
+      })
+
       // this.$ajax(this.$api.goodsManager.getGoodsTypeList.url, {
       //   method: this.$api.goodsManager.getGoodsTypeList.method,
       //   queryData: { ...this.postData, caseid: this.CaseId === 'all' ? '' : this.CaseId }
@@ -119,16 +131,10 @@ export default {
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
-        // this.$ajax(this.$api.goodsManager.deleteGoodsType.url, {
-        //   method: this.$api.goodsManager.deleteGoodsType.method,
-        //   urlData: { id: row.TypeId }
-        // }).then(res => {
-        //   this.$message({
-        //     type: 'success',
-        //     message: '删除成功!'
-        //   })
-        //   this.search()
-        // })
+        this.deleteGoodType(row).then(() => {
+          this.currentList = this.currentList.filter(item => item.typeId !== row.typeId)
+          this.$message('操作成功')
+        }).catch(err => this.$message.error(err.message || err))
       }).catch(() => {
         this.$message({
           type: 'info',
@@ -141,6 +147,23 @@ export default {
       this.dialogFormVisible = true
     },
     submitTypeDetail () {
+      const newData = !this.typeDetail.typeId
+      const api = newData ? this.saveGoodType : this.updateGoodType
+
+      api(this.typeDetail).then((data) => {
+        if (newData) {
+          this.currentList = this.currentList.concat(data)
+        } else {
+          this.currentList = this.currentList.map((item) => {
+            return item.typeId === data.typeId ? data : item
+          })
+        }
+
+        this.$message('操作成功')
+      }).catch((err) => {
+        this.$message.error(err.message || err)
+      })
+
       this.dialogFormVisible = false
     }
   }

src/views/goodsManager/goodManager/edit.vue

@@ -1,255 +1,210 @@
 <template>
   <div class="subPage">
-    <form class="mainForm">
-      <ul>
-         <li class="flex-h">
-          <span>选择案场：<em>*</em></span>
-          <div class="flex-item">
-            <div style="width:50%">
-              <el-select v-model="Case" placeholder="请选择">
-                <el-option
-                  v-for="item in cases"
-                  :key="item.CaseId"
-                  :label="item.CaseName"
-                  :value="item.CaseId">
-                </el-option>
-              </el-select>
-            </div>
+    <el-form class="mainForm" label-width="80px">
+      <el-form-item label="商品名称" required>
+        <el-input
+          placeholder="请输入商品名称"
+          v-model="detail.goodsName"
+          clearable>
+        </el-input>
+      </el-form-item>
+      <el-form-item label="商品图片" required>
+        <div class="flex-item">
+          <div class="red-hint">建议上传150*150尺寸的图片</div>
+          <div style="width:50%">
+            <el-upload
+              class="avatar-uploader"
+              name="uploadFile"
+              :action="upFileUrl"
+              :show-file-list="false"
+              :before-upload="beforeImgUpload"
+              :on-success="handleAvatarSuccess">
+              <img v-if="detail.imgUrl" :src="detail.imgUrl" class="avatar">
+              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+            </el-upload>
           </div>
-        </li>
-        <li class="flex-h">
-          <span>商品名称：<em>*</em></span>
-          <div class="flex-item">
-            <div style="width:50%">
-              <el-input
-                placeholder="请输入商品名称"
-                v-model="detail.GoodsName"
-                clearable>
-              </el-input>
-            </div>
-          </div>
-        </li>
-        <li class="flex-h">
-          <span>商品图片：<em>*</em></span>
-          <div class="flex-item">
-            <div class="red-hint">建议上传150*150尺寸的图片</div>
-            <div style="width:50%">
-              <el-upload
-                class="avatar-uploader"
-                action='string'
-                :before-upload="toolClass.beforeUpload"
-                :http-request="toolClass.upload"
-                :show-file-list="false"
-                :on-success="handleAvatarSuccess">
-                <img v-if="Image" :src="Image" class="avatar">
-                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-              </el-upload>
-            </div>
-          </div>
-        </li>
-        <li class="flex-h">
-          <span>商品价格：<em>*</em></span>
-          <div class="flex-item">
-            <div style="width:50%">
-              <el-input
-                placeholder="请输入商品价格"
-                v-model="detail.Price"
-                clearable>
-              </el-input>
-            </div>
-          </div>
-        </li>
-        <li class="flex-h">
-          <span>商品规格：</span>
-          <div class="flex-item">
-            <div style="width:50%">
-              <el-select v-model="detailSpecs" multiple placeholder="请选择" style="width:100%;">
-                <el-option
-                  v-for="item in ((Case || '') === '' ? [] : specs.list)"
-                  :key="item.SpecId"
-                  :label="item.SpecName"
-                  :value="item.SpecId">
-                </el-option>
-              </el-select>
-            </div>
-          </div>
-        </li>
-        <li class="flex-h">
-          <span>商品类别：<em>*</em></span>
-          <div class="flex-item">
-            <div style="width:50%">
-              <el-select v-model="TypeId" placeholder="请选择商品类型">
-                <el-option
-                  v-for="item in ((Case || '') === '' ? [] : types.list)"
-                  :key="item.TypeId"
-                  :label="item.TypeName"
-                  :value="item.TypeId">
-                </el-option>
-              </el-select>
-            </div>
-          </div>
-        </li>
-        <li style="text-align:center">
-          <el-button type="primary" size="mini" @click='submit'>保存</el-button>
-          <el-button type="danger" size="mini" @click="cancel">取消</el-button>
-        </li>
-      </ul>
-    </form>
+        </div>
+      </el-form-item>
+      <el-form-item label="商品规格" required>
+        <el-select v-model="detailSpecs" multiple placeholder="请选择" style="width:100%;">
+          <el-option
+            v-for="item in goodsSpecs"
+            :key="item.specId"
+            :label="item.specName"
+            :value="item.specId">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="商品类别" required>
+        <el-select v-model="detail.typeId" placeholder="请选择商品类型" style="width: 100%">
+          <el-option
+            v-for="item in goodsTypes"
+            :key="item.typeId"
+            :label="item.typeName"
+            :value="item.typeId">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click='submit'>保存</el-button>
+        <el-button type="danger" @click="cancel">取消</el-button>
+      </el-form-item>
+    </el-form>
   </div>
 </template>
 
 <script>
-import { createNamespacedHelpers, mapState, mapActions } from 'vuex'
+import { createNamespacedHelpers } from 'vuex'
+import apis from '../../../config/api'
 
-const { mapState: mapGoodsState, mapActions: mapGoodsActions } = createNamespacedHelpers('goods')
+const { mapActions: mapGoodsActions } = createNamespacedHelpers('goods')
 export default {
   name: '',
   data () {
     return {
-      limit: 1,
-      dialogVisible: false,
-      infoSpecs: null,
+      loading: undefined,
+      upFileUrl: apis.file.upload.url,
+      goodsTypes: [],
+      goodsSpecs: [],
+      detailSpecs: [],
+      detail: {
+        goodsId: undefined,
+        goodsName: undefined,
+        orgId: undefined,
+        caseId: undefined,
+        typeId: undefined,
+        price: undefined,
+        status: 1,
+        createDate: undefined,
+        createUser: undefined,
+        imgUrl: undefined,
+        typeName: undefined,
+        specList: [],
+      },
     }
   },
   components: {},
   computed: {
-    ...mapGoodsState({
-      detail: x => x.goodsInfo,
-      types: x => x.goodsTypes,
-      specs: x => x.goodsSpecs,
-    }),
-    ...mapState({
-      cases: x => x.app.cases.list,
-      caseid: x => x.app.cases.default,
-      orgid: x => x.app.user.OrgId,
-    }),
-    Case: {
-      get () {
-        return this.detail.CaseId
-      },
-      set (val) {
-        this.UpdateInfo({ ...this.detail, CaseId: val })
-        this.detail.TypeId = ''
-        this.GetGoodTypes({ pagesize: 1000, caseid: this.Case })
-        this.GetGoodSpecs({ pagesize: 1000, caseid: this.Case })
-      }
-    },
-    detailSpecs: {
-      get () {
-        // console.log(this.infoSpecs || (this.detail.Specs || []).map(x => x.SpecId))
-        return this.infoSpecs || (this.detail.Specs || []).map(x => x.SpecId)
-      },
-      set (val) {
-        this.infoSpecs = val
-      },
-    },
-    Image () {
-      return ((this.detail.Images || [])[0] || {}).ImgUrl
-    },
-    TypeId: {
-      get () {
-        return this.detail.TypeId
-      },
-      set (val) {
-        this.UpdateInfo({ ...this.detail, TypeId: val })
-      },
-    },
   },
   methods: {
     ...mapGoodsActions([
-      'GetGoodTypes',
-      'GetGoodsByID',
-      'AddGoods',
-      'UpdateGoods',
-      'SetNull',
-      'UpdateInfo',
-      'GetGoodSpecs',
-    ]),
-    ...mapActions([
-      'picSize'
+      'getGoodTypes',
+      'getGoodsByID',
+      'saveGoods',
+      'updateGoods',
+      'getGoodsSpecList',
     ]),
     submit () {
-      this.detail.specs = JSON.stringify(this.detailSpecs.map(x => ({ SpecId: x, GoodsPrice: this.detail.Price })))
-      this.detail.images = (this.detail.Images || []).map(x => {
-        if (x.response) {
-          return x.response.result.url
-        } else {
-          return x.ImgUrl
-        }
-      }).join(',')
-      if ((this.detail.CaseId || '') === '') {
-        this.$message({
-          type: 'error',
-          message: '案场不能为空'
-        })
-        return false
-      }
-      if ((this.detail.GoodsName || '') === '') {
+      this.detail.price = 0
+      this.detail.specList = this.detailSpecs.map(x => ({ specId: x }))
+
+      if (!this.detail.goodsName) {
         this.$message({
           type: 'error',
           message: '商品名称不能为空'
         })
         return false
       }
-      if ((this.detail.Images || '') === '') {
+      if (!this.detail.imgUrl) {
         this.$message({
           type: 'error',
           message: '图片不能为空'
         })
         return false
       }
-      if ((this.detail.Price || '') === '') {
-        this.$message({
-          type: 'error',
-          message: '价格不能为空'
-        })
-        return false
-      }
-      if ((this.detail.TypeId || '') === '') {
+
+      if (!this.detail.typeId) {
         this.$message({
           type: 'error',
           message: '类别不能为空'
         })
         return false
       }
-      if ((this.detail.GoodsId || '') === '') {
-        this.detail.OrgId = this.orgid
-        this.AddGoods(this.detail)
-      } else {
-        if ((this.detail.CaseId || '') === '') {
-          this.$message({
-            type: 'error',
-            message: '案场不能为空'
-          })
-          return false
-        }
-        this.UpdateGoods(this.detail)
-      }
-      this.$message({
-        type: 'success',
-        message: '操作成功'
-      })
-      this.$router.push({ name: 'goodsInfo' })
+
+      const newRec = !this.detail.goodsId
+      const api = newRec ? this.saveGoods : this.updateGoods
+
+      api(this.detail).then(() => {
+        this.$alert('操作成功', '', {
+          callback: () => this.$router.push({ name: 'goodsprofile' })
+        })        
+      }).catch((err) => this.$message.error(err.message || err))
     },
     cancel () {
       this.$router.go(-1)
     },
-    handleAvatarSuccess (res, file) {
-      this.UpdateInfo({ ...this.detail, Images: [{ ImgUrl: res.result.url }] })
+    handleAvatarSuccess (res) {
+      this.detail.imgUrl = res.data
+      this.loading.close()
+    },
+    beforeImgUpload (file) {
+      if (file.type !== 'image/jpeg') {
+        this.$message.error('上传图片只能是 JPG 格式!')
+        return false
+      }
+      if (file.size / 1024 > 300) {
+        this.$message.error('图片大小不允许超过300k!')
+        return false
+      }
+      this.loading = this.$loading({
+        lock: true,
+        text: '上传中...',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+
+      return true
     },
   },
   created () {
-    this.picSize({ w: 150, h: 150 })
+    this.getGoodTypes({ pageSize: 9999 }).then((dt) => {
+      this.goodsTypes = dt.records || []
+    })
+    this.getGoodsSpecList({ pageSize: 9999 }).then((dt) => {
+      this.goodsSpecs = dt.records || []
+    })
     const { id } = this.$route.query
-    if (id && id !== '') {
-      this.GetGoodTypes({ pagesize: 1000, caseid: this.Case })
-      this.GetGoodSpecs({ pagesize: 1000, caseid: this.Case })
-      this.GetGoodsByID({ id: id })
+    if (id) {
+      this.getGoodsByID({ id }).then((dt) => {
+        this.detail = { ...dt }
+        this.detailSpecs = (dt.specList || []).map(x => x.specId)
+      })
     }
   }
 }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
+
+<style lang="scss">
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409EFF;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  line-height: 178px;
+  text-align: center;
+}
+.avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+</style>
+
 <style lang="scss" scoped>
+.mainForm {
+  width: 60%;
+  min-width: 480px;
+}
 </style>

src/views/goodsManager/goodManager/index.vue

@@ -1,76 +1,40 @@
 <template>
-  <div class="subPage">
-    <div class="system-table-search">
-      <div class="flex-h">
-        <div class="flex-item flex-h">
-          <el-button size="mini" type="success" @click='addRole'>新增商品</el-button>
-        </div>
-        <ul>
-          <li>
-            <!-- <span>选择案场：</span> -->
-            <el-select v-model="CaseId" placeholder="请选择">
-              <el-option
-                key="all"
-                label="所有案场"
-                value="all">
-              </el-option>
-              <el-option
-                v-for="item in cases"
-                :key="item.CaseId"
-                :label="item.CaseName"
-                :value="item.CaseId">
-              </el-option>
-            </el-select>
-          </li>
-          <li>
-            <el-input
-              placeholder="请输入商品名称"
-              v-model="postData.name"
-            >
-            </el-input>
-          </li>
-          <li>
-            <span>商品类型：</span>
-            <el-select v-model="postData.type" placeholder="请选择">
-              <el-option
-                v-for="item in types.list"
-                :key="item.TypeId"
-                :label="item.TypeName"
-                :value="item.TypeId">
-              </el-option>
-            </el-select>
-          </li>
-        </ul>
-        <el-button
-          size="mini"
-          type="primary" @click="search">搜索</el-button>
-      </div>
-      <div class="moreFilter"></div>
-    </div>
+  <r-layout class="subPage">
+    <xm-search>
+      <el-form-item>
+        <el-button type="success" @click='addGoods'>新增商品</el-button>
+      </el-form-item>
+      <el-form-item label="商品名称">
+        <el-input
+          placeholder="请输入商品名称"
+          v-model="postData.goodsName"
+          clearable
+        >
+        </el-input>
+      </el-form-item>
+      <el-form-item label="商品类型">
+        <el-select v-model="postData.typeId" placeholder="请选择">
+          <el-option
+            v-for="item in goodsTypes"
+            :key="item.typeId"
+            :label="item.typeName"
+            :value="item.typeId">
+          </el-option>
+        </el-select>
+      </el-form-item>
+    </xm-search>
     <div class="system-table-box">
-      <el-table :data="goods.list" stripe style="width: 100%">
-        <el-table-column prop="GoodsName" label="商品名称">
-        </el-table-column>
+      <el-table :data="currentList" stripe style="width: 100%">
+        <el-table-column prop="goodsId" label="#"></el-table-column>
+        <el-table-column prop="goodsName" label="商品名称"></el-table-column>
         <el-table-column label="图片" width="300">
           <template slot-scope="scope">
-            <img :src="((scope.row.Images || [])[0] || {}).ImgUrl" style="width:200px;" />
+            <img :src="scope.row.imgUrl" style="width: 96px;" />
           </template>
         </el-table-column>
-        <el-table-column prop="Price" label="价格">
-        </el-table-column>
         <el-table-column label="类型">
           <template slot-scope="scope">
-            <label>{{getTypeName(scope.row.TypeId)}}</label>
-          </template>
-        </el-table-column>
-        <el-table-column label="规格">
-          <template slot-scope="scope">
-            <label>{{getSpecNames(scope.row.Specs)}}</label>
-          </template>
-        </el-table-column>
-        <el-table-column label="案场">
-          <template slot-scope="scope">
-            <label>{{getCaseName(scope.row.CaseId)}}</label>
+            <label>{{getTypeName(scope.row.typeId)}}</label>
           </template>
         </el-table-column>
         <el-table-column fixed='right' label="操作" width="300">
@@ -82,74 +46,45 @@
       </el-table>
     </div>
     <el-pagination
-    @size-change="handleSizeChange"
     @current-change="handleCurrentChange"
-    :current-page.sync="currentPage"
+    :current-page="postData.page"
     :page-size="postData.pagesize"
     layout="prev, pager, next, jumper"
-    :total="goods.pagenum">
+    :total="pageTotal">
     </el-pagination>
-  </div>
+  </r-layout>
 </template>
 
 <script>
-import { createNamespacedHelpers, mapState } from 'vuex'
-import tableSearch from '@/components/tableSearch/index'
+import { createNamespacedHelpers } from 'vuex'
 
-const { mapState: mapGoodsState, mapActions: mapGoodsActions } = createNamespacedHelpers('goods')
+const { mapActions: mapGoodsActions } = createNamespacedHelpers('goods')
 
 export default {
   name: '',
   data () {
     return {
-      currentPage: 0, // 当前页码
-      key: '',
+      goodsTypes: [],
+      currentList: [],
+      pageTotal: 0,
       postData: {
-        caseid: '',
-        name: '',
-        type: '',
+        goodsName: '',
+        typeId: '',
         page: 1,
         pagesize: 10,
       },
     }
   },
   computed: {
-    ...mapState({
-      cases: x => x.app.cases.list,
-      defaultCaseId: x => x.app.cases.default
-    }),
-    ...mapGoodsState({
-      goods: x => x.goodsList,
-      types: x => x.goodsTypes,
-    }),
-    CaseId: {
-      get () {
-        return this.postData.caseid || this.defaultCaseId
-      },
-      set (val) {
-        this.postData.caseid = val
-        this.GetGoodTypes({ pagesize: 1000, caseid: this.CaseId === 'all' ? '' : this.CaseId })
-      }
-    }
-  },
-  components: {
-    tableSearch
   },
   methods: {
     ...mapGoodsActions([
-      'GetGoodsList',
-      'GetGoodTypes',
-      'DelGoods',
-      'SetNull',
+      'getGoodsList',
+      'getGoodTypes',
+      'delGoods',
     ]),
     getTypeName (typeid) {
-      return (this.types.list.filter(x => x.TypeId === typeid)[0] || {}).TypeName
-    },
-    getSpecNames (specs) {
-      return (specs || []).map(x => x.SpecName).join(',')
-    },
-    getCaseName (caseid) {
-      return (this.cases.filter(x => x.CaseId === caseid)[0] || {}).CaseName
+      return (this.goodsTypes.filter(x => x.typeId === typeid)[0] || {}).typeName
     },
     search () { // 搜索
       this.postData.page = 1
@@ -157,19 +92,20 @@ export default {
       this.getList()
     },
     getList () {
-      this.GetGoodsList({ ...this.postData, caseid: this.CaseId === 'all' ? '' : this.CaseId })
-    },
-    handleSizeChange (val) {
-      console.log(`每页 ${val} 条`)
+      this.getGoodsList({ ...this.postData }).then((dt) => {
+        this.currentList = dt.records
+        this.postData.page = dt.current
+        this.postData.pagesize = dt.size
+        this.pageTotal = dt.total
+      })
     },
     handleCurrentChange (val) {
-      this.postData.page = this.currentPage
+      this.postData.page = val
       this.getList()
     },
     handleEdit (index, row) {
       // 编辑
-      this.SetNull()
-      this.$router.push({ name: 'editGoods', query: { id: row.GoodsId } })
+      this.$router.push({ name: 'goodsedit', query: { id: row.goodsId } })
     },
     handleDelete (index, row) {
       // 删除
@@ -179,7 +115,7 @@ export default {
         type: 'warning'
       })
         .then(() => {
-          this.DelGoods({ id: row.GoodsId, callback: this.delCallBack })
+          this.delGoods({ id: row.goodsId, callback: this.delCallBack })
         })
         .catch(() => {
           this.$message({
@@ -195,16 +131,16 @@ export default {
       })
       this.getList()
     },
-    addRole () {
-      this.SetNull()
-      this.$router.push({ name: 'addGoods' })
+    addGoods () {
+      this.$router.push({ name: 'goodsedit' })
     },
   },
-  created () {
-    this.GetGoodTypes({ pagesize: 1000, caseid: this.CaseId })
-    this.$nextTick(function () {
-      this.getList()
+  mounted () {
+    this.getGoodTypes({ pageSize: 999 }).then((dt) => {
+      this.goodsTypes = dt.records || []
     })
+
+    this.getList()
   },
 }
 </script>

src/views/goodsManager/goodsSpecManager/add.vue

@@ -1,105 +0,0 @@
-<template>
-  <div class="subPage">
-    <form class="mainForm">
-      <ul>
-        <li class="flex-h">
-          <span>规格名：<em>*</em></span>
-          <div class="flex-item">
-            <div style="width:50%">
-              <el-input
-                placeholder="请输入规格名"
-                v-model="postData.SpecName"
-                clearable>
-              </el-input>
-            </div>
-          </div>
-        </li>
-        <li class="flex-h">
-          <span>选择案场：<em>*</em></span>
-          <div class="flex-item">
-            <div style="width:50%">
-              <el-select v-model="CaseId" placeholder="请选择">
-                <el-option
-                  v-for="item in cases"
-                  :key="item.CaseId"
-                  :label="item.CaseName"
-                  :value="item.CaseId">
-                </el-option>
-              </el-select>
-            </div>
-          </div>
-        </li>
-        <li style="text-align:center">
-          <el-button type="primary" size="mini" @click="submit">保存</el-button>
-          <el-button type="danger" size="mini" @click="cancel">取消</el-button>
-        </li>
-      </ul>
-    </form>
-  </div>
-</template>
-
-<script>
-import { mapState } from 'vuex'
-
-export default {
-  name: '',
-  data () {
-    return {
-      postData: {
-        SpecId: '', // 规格id（新增传空值）
-        SpecName: '', // 规格名称
-        Status: '', // 状态（无状态可传空值）
-        OrgId: '', // 机构id
-        CaseId: '', // 案场id
-      }
-    }
-  },
-  computed: {
-    ...mapState({
-      cases: x => x.app.cases.list,
-      defaultCaseId: x => x.app.cases.default,
-      OrgId: x => x.app.user.OrgId,
-    }),
-    CaseId: {
-      get () {
-        return this.postData.CaseId === '' ? this.defaultCaseId || '' : this.postData.CaseId
-      },
-      set (val) {
-        this.postData.CaseId = val
-      }
-    }
-  },
-  components: {},
-  methods: {
-    submit () { // 提交数据
-      if (this.postData.SpecName === '') {
-        this.$message({
-          message: '规格名不能为空',
-          type: 'error'
-        })
-        return false
-      }
-      this.postData.OrgId = this.OrgId
-      if (this.postData.CaseId === '') this.postData.CaseId = this.CaseId
-      this.$ajax(this.$api.goodsManager.addGoodsSpec.url, {
-        method: this.$api.goodsManager.addGoodsSpec.method,
-        data: this.postData
-      }).then(res => {
-        this.$message({
-          type: 'success',
-          message: '操作成功'
-        })
-        this.$router.push({ name: 'goodsSpecManager' })
-      })
-    },
-    cancel () {
-      this.$router.push({ name: 'goodsSpecManager' })
-    }
-  },
-  mounted () { }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style lang="scss" scoped>
-</style>

src/views/goodsManager/goodsSpecManager/edit.vue

@@ -1,115 +0,0 @@
-<template>
-  <div class="subPage">
-    <form class="mainForm">
-      <ul>
-        <li class="flex-h">
-          <span>规格名：<em>*</em></span>
-          <div class="flex-item">
-            <div style="width:50%">
-              <el-input
-                placeholder="请输入规格名"
-                v-model="postData.SpecName"
-                clearable>
-              </el-input>
-            </div>
-          </div>
-        </li>
-        <li class="flex-h">
-          <span>选择案场：<em>*</em></span>
-          <div class="flex-item">
-            <div style="width:50%">
-              <el-select v-model="CaseId" placeholder="请选择">
-                <el-option
-                  v-for="item in cases"
-                  :key="item.CaseId"
-                  :label="item.CaseName"
-                  :value="item.CaseId">
-                </el-option>
-              </el-select>
-            </div>
-          </div>
-        </li>
-        <li style="text-align:center">
-          <el-button type="primary" size="mini" @click="submit">保存</el-button>
-          <el-button type="danger" size="mini" @click="cancel">取消</el-button>
-        </li>
-      </ul>
-    </form>
-  </div>
-</template>
-
-<script>
-import { mapState } from 'vuex'
-
-export default {
-  name: '',
-  data () {
-    return {
-      postData: {
-        SpecId: '',
-        SpecName: '',
-        Status: '',
-        OrgId: '',
-        CaseId: ''
-      }
-    }
-  },
-  computed: {
-    ...mapState({
-      cases: x => x.app.cases.list,
-      defaultCaseId: x => x.app.cases.default,
-      OrgId: x => x.app.user.OrgId,
-    }),
-    CaseId: {
-      get () {
-        return this.postData.CaseId === '' ? this.defaultCaseId || '' : this.postData.CaseId
-      },
-      set (val) {
-        this.postData.CaseId = val
-      }
-    }
-  },
-  components: {},
-  created () {
-    this.getInfo()
-  },
-  methods: {
-    getInfo () { // 获取规格信息
-      this.$ajax(this.$api.goodsManager.getGoodsSpecById.url, {
-        method: this.$api.goodsManager.getGoodsSpecById.method,
-        urlData: {id: this.$route.query.id}
-      }).then(res => {
-        this.postData = res
-      })
-    },
-    submit () { // 提交数据
-      if (this.postData.SpecName === '') {
-        this.$message({
-          type: 'error',
-          message: '规格名称不能为空'
-        })
-        return false
-      }
-      this.$ajax(this.$api.goodsManager.editGoodsSpec.url, {
-        method: this.$api.goodsManager.editGoodsSpec.method,
-        data: this.postData,
-        urlData: {id: this.postData.SpecId}
-      }).then(res => {
-        this.$message({
-          type: 'success',
-          message: '操作成功'
-        })
-        this.$router.push({ name: 'goodsSpecManager' })
-      })
-    },
-    cancel () {
-      this.$router.go(-1)
-    }
-  },
-  mounted () { }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style lang="scss" scoped>
-</style>

src/views/goodsManager/goodsSpecManager/index.vue

@@ -1,164 +0,0 @@
-<template>
-  <div class="subPage">
-    <div class="system-table-search">
-      <div class="flex-h">
-        <div class="flex-item flex-h">
-          <el-button size="mini" type="success" @click="addGoodsSpec">新增商品规格</el-button>
-        </div>
-        <ul>
-          <li>
-            <!-- <span>选择案场：</span> -->
-            <el-select v-model="CaseId" placeholder="请选择">
-              <el-option
-                key="all"
-                label="所有案场"
-                value="all">
-              </el-option>
-              <el-option
-                v-for="item in cases"
-                :key="item.CaseId"
-                :label="item.CaseName"
-                :value="item.CaseId">
-              </el-option>
-            </el-select>
-          </li>
-        </ul>
-        <el-button
-          size="mini"
-          type="primary" @click="search">搜索</el-button>
-      </div>
-      <div class="moreFilter"></div>
-    </div>
-    <div class="system-table-box">
-      <el-table
-        :data="currentList"
-        stripe
-        style="width: 100%">
-        <el-table-column
-          prop="SpecName"
-          label="规格名">
-        </el-table-column>
-        <el-table-column
-          label="所属案场">
-          <template slot-scope="scope">
-            <label>{{getCaseName(scope.row.CaseId)}}</label>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作">
-          <template slot-scope="scope">
-            <el-button
-              size="mini"
-              type="warning"
-              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
-            <el-button
-              size="mini"
-              type="danger"
-              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-    <el-pagination
-      @current-change="handleCurrentChange"
-      :current-page.sync="postData.page"
-      :page-size="postData.pagesize"
-      layout="prev, pager, next, jumper"
-      :total="total">
-    </el-pagination>
-  </div>
-</template>
-
-<script>
-import { mapState } from 'vuex'
-
-export default {
-  name: '',
-  data () {
-    return {
-      total: 0,
-      postData: { // 表格搜索条件
-        CaseId: '', // 案场id
-        page: 1, // 当前页码
-        pagesize: 10, // 请求数据量
-      },
-      currentList: []
-    }
-  },
-  mounted () {
-    this.$nextTick(function () {
-      this.getList()
-    })
-  },
-  computed: {
-    ...mapState({
-      cases: x => x.app.cases.list,
-      defaultCaseId: x => x.app.cases.default
-    }),
-    CaseId: {
-      get () {
-        return this.postData.CaseId || this.defaultCaseId
-      },
-      set (val) {
-        this.postData.CaseId = val
-      }
-    }
-  },
-  methods: {
-    getCaseName (caseid) {
-      return (this.cases.filter(x => x.CaseId === caseid)[0] || {}).CaseName
-    },
-    search () { // 搜索
-      this.postData.page = 1
-      this.currentList = []
-      this.getList()
-    },
-    getList () { // 获取列表
-      this.$ajax(this.$api.goodsManager.getGoodsSpecList.url, {
-        method: this.$api.goodsManager.getGoodsSpecList.method,
-        queryData: { ...this.postData, caseid: this.CaseId === 'all' ? '' : this.CaseId }
-      }).then(res => {
-        this.currentList = res.list
-        this.postData.page = res.page
-        this.total = res.pagenum
-      })
-    },
-    handleCurrentChange (val) { // 跳转到分页
-      this.getList()
-    },
-    handleEdit (index, row) { // 编辑
-      this.$router.push({ name: 'editGoodsSpec', query: { id: row.SpecId } })
-    },
-    handleDelete (index, row) { // 删除
-      let name = '确认删除规格“' + row.SpecName + '”?'
-      this.$confirm(name, '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        this.$ajax(this.$api.goodsManager.deleteGoodsSpec.url, {
-          method: this.$api.goodsManager.deleteGoodsSpec.method,
-          urlData: { id: row.SpecId }
-        }).then(res => {
-          this.$message({
-            type: 'success',
-            message: '删除成功!'
-          })
-          this.search()
-        })
-      }).catch(() => {
-        this.$message({
-          type: 'info',
-          message: '已取消删除'
-        })
-      })
-    },
-    addGoodsSpec () {
-      this.$router.push({ name: 'addGoodsSpec' })
-    }
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style lang="scss" scoped>
-</style>

src/views/index.js

@@ -203,14 +203,55 @@ const pages = [
         },
       },
       {
-        path: 'goodstype',
-        name: 'goodstype',
-        component: () => import('./goodsManager/goodsTypeManager'),
+        path: 'goods',
+        name: 'goods',
+        component: () => import('./index.vue'),
         meta: {
           menuShow: true,
-          title: '商品类型管理',
+          title: '商品管理',
         },
-      }
+        children: [
+          {
+            path: 'goodstype',
+            name: 'goodstype',
+            component: () => import('./goodsManager/GoodsType'),
+            meta: {
+              menuShow: true,
+              title: '类型管理',
+            },
+          },
+          {
+            path: 'goodsspec',
+            name: 'goodsspec',
+            component: () => import('./goodsManager/GoodsSpec'),
+            meta: {
+              menuShow: true,
+              title: '规格管理',
+            },
+          },
+          {
+            path: 'profile',
+            name: 'goodsprofile',
+            component: () => import('./goodsManager/goodManager'),
+            meta: {
+              menuShow: true,
+              title: '商品维护',
+              hasChildren: true,
+            },
+            children: [
+              {
+                path: 'edit',
+                name: 'goodsedit',
+                component: () => import('./goodsManager/goodManager/edit.vue'),
+                meta: {
+                  menuShow: true,
+                  title: '商品编辑',
+                },
+              },
+            ]
+          },
+        ],
+      },
     ]
   },
 

src/views/person/edit.vue

@@ -31,8 +31,8 @@
         <el-form-item label="头像">
           <el-upload
             class="avatar-uploader"
-            :action='upFileUrl'
-            name='uploadFile'
+            :action="upFileUrl"
+            name="uploadFile"
             :show-file-list="false"
             :before-upload="beforeImgUpload"
             :on-success="handleAvatarSuccess">

src/views/sysuser/edit.vue

@@ -24,15 +24,15 @@
         </el-select>
       </el-form-item>
 
-      <el-form-item label="角色权限"  required>
-      <el-select v-model="roleId" multiple placeholder="请选择">
-      <el-option
-      v-for="(item, index) in sysRole"
-      :key="index"
-      :label="item.roleName"
-      :value="item.roleId">
-      </el-option>
-      </el-select>
+      <el-form-item label="角色权限" required>
+        <el-select v-model="roleId" multiple placeholder="请选择">
+          <el-option
+          v-for="(item, index) in sysRole"
+          :key="index"
+          :label="item.roleName"
+          :value="item.roleId">
+          </el-option>
+        </el-select>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="onSubmit">保存</el-button>