商品，资讯，推送

src/api/common.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+// 通用上传
+export function uploadFile(data) {
+  return request({
+    url: '/common/upload',
+    method: 'post',
+    data: data
+  })
+}

src/api/system/news.js

@@ -0,0 +1,53 @@
+import request from '@/utils/request'
+
+// 查询资讯列表
+export function listNews(query) {
+  return request({
+    url: '/system/news/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询资讯详细
+export function getNews(id) {
+  return request({
+    url: '/system/news/' + id,
+    method: 'get'
+  })
+}
+
+// 新增资讯
+export function addNews(data) {
+  return request({
+    url: '/system/news',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改资讯
+export function updateNews(data) {
+  return request({
+    url: '/system/news',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除资讯
+export function delNews(id) {
+  return request({
+    url: '/system/news/' + id,
+    method: 'delete'
+  })
+}
+
+// 导出资讯
+export function exportNews(query) {
+  return request({
+    url: '/system/news/export',
+    method: 'get',
+    params: query
+  })
+}

src/api/system/shop/goods.js

@@ -0,0 +1,61 @@
+import request from '@/utils/request'
+
+// 查询商品列表
+export function listGoods(query) {
+  return request({
+    url: '/system/shop/goods/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询商品分类
+export function typeList() {
+  return request({
+    url: '/system/shop/goods/typeList',
+    method: 'get'
+  })
+}
+
+// 查询商品详细
+export function getGoods(id) {
+  return request({
+    url: '/system/shop/goods/' + id,
+    method: 'get'
+  })
+}
+
+// 新增商品
+export function addGoods(data) {
+  return request({
+    url: '/system/shop/goods',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改商品
+export function updateGoods(data) {
+  return request({
+    url: '/system/shop/goods',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除商品
+export function delGoods(id) {
+  return request({
+    url: '/system/shop/goods/' + id,
+    method: 'delete'
+  })
+}
+
+// 导出商品
+export function exportGoods(query) {
+  return request({
+    url: '/system/shop/goods/export',
+    method: 'get',
+    params: query
+  })
+}

src/api/system/shop/type.js

@@ -0,0 +1,53 @@
+import request from '@/utils/request'
+
+// 查询商品类型列表
+export function listType(query) {
+  return request({
+    url: '/system/shop/type/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询商品类型详细
+export function getType(id) {
+  return request({
+    url: '/system/shop/type/' + id,
+    method: 'get'
+  })
+}
+
+// 新增商品类型
+export function addType(data) {
+  return request({
+    url: '/system/shop/type',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改商品类型
+export function updateType(data) {
+  return request({
+    url: '/system/shop/type',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除商品类型
+export function delType(id) {
+  return request({
+    url: '/system/shop/type/' + id,
+    method: 'delete'
+  })
+}
+
+// 导出商品类型
+export function exportType(query) {
+  return request({
+    url: '/system/shop/type/export',
+    method: 'get',
+    params: query
+  })
+}

src/components/cropper.vue

@@ -0,0 +1,140 @@
+<template>
+  <div>
+    <el-dialog title="上传图片和剪裁" :visible.sync="visible" :close-on-click-modal="false" @close="close" append-to-body>
+      <div style="height:350px">
+        <vue-cropper
+          ref="cropper"
+          :img="options.img"
+          :info="true"
+          :autoCrop="options.autoCrop"
+          :fixedBox="options.fixedBox"
+          :fixed="options.fixed"
+          :full="options.full"
+          :fixedNumber="fixed_number"
+          :centerBox="options.centerBox"
+          :outputSize="options.outputSize"
+          v-if="options.img"
+        />
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <div class="lsw_flex">
+          <div class="f">
+            <div class="lsw_flex">
+              <div class="f4">
+                <el-upload action="#" :http-request="requestUpload" accept=".jpg,.jpeg,.png,.gif" :show-file-list="false" :before-upload="beforeUpload">
+                  <el-button size="small" icon="el-icon-scissors">选取图片</el-button>
+                </el-upload>
+              </div>
+              <div class="f lsw_left ml15"><el-button type="primary" size="small" icon="el-icon-upload" @click="uploadImg()">确认上传</el-button></div>
+            </div>
+          </div>
+          <div class="f">
+            <el-button-group v-show="options.img">
+              <el-button icon="el-icon-plus" @click="changeScale(1)"></el-button>
+              <el-button icon="el-icon-minus" @click="changeScale(-1)"></el-button>
+              <el-button icon="el-icon-refresh-left" @click="rotateLeft()"></el-button>
+              <el-button icon="el-icon-refresh-right" @click="rotateRight()"></el-button>
+            </el-button-group>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { VueCropper } from 'vue-cropper';
+import { uploadFile } from '@/api/common';
+
+export default {
+  components: { VueCropper },
+  props: {
+    //裁剪宽高比例
+    fixed_number: {
+      type: Array,
+      default: [21, 9]
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      options: {
+        img: '', //裁剪图片的地址
+        autoCrop: true, //是否默认生成截图框
+        outputSize: 0.8, //裁剪生成图片的质量
+        fixed: true, // 是否开启截图框宽高固定比例
+        full: true, //是否输出原图比例的截图
+        fixedBox: false, //固定截图框大小 不允许改变
+        centerBox: true //截图框是否被限制在图片里面
+      }
+    };
+  },
+  methods: {
+    editCropper(data) {
+      this.visible = true;
+    },
+    // 向左旋转
+    rotateLeft() {
+      this.$refs.cropper.rotateLeft();
+    },
+    // 向右旋转
+    rotateRight() {
+      this.$refs.cropper.rotateRight();
+    },
+    // 图片缩放
+    changeScale(num) {
+      num = num || 1;
+      this.$refs.cropper.changeScale(num);
+    },
+    // 覆盖默认的上传行为
+    requestUpload() {},
+    // 上传预处理
+    beforeUpload(file) {
+      if (file.type.indexOf('image/') == -1) {
+        this.msgError('文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。');
+        return;
+      }
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = () => {
+        this.options.img = reader.result;
+      };
+    },
+    // 上传图片
+    uploadImg() {
+      if (this.options.img == '') {
+        this.msgError('请选取图片');
+        return;
+      }
+      this.$refs.cropper.getCropBlob(data => {
+        let formData = new FormData();
+        formData.append('file', data);
+        uploadFile(formData).then(response => {
+          if (response.code === 200) {
+            this.$emit('img', response.fileName);
+            this.msgSuccess('上传成功');
+            this.visible = false;
+          }
+        });
+      });
+    },
+    // 关闭弹窗表单重置
+    close() {
+      this.visible = false;
+      this.options.img = '';
+    }
+  }
+};
+</script>
+<style lang="scss">
+.lsw_flex {
+  display: flex;
+}
+.lsw_flex .f {
+  flex: 1;
+}
+.lsw_left {
+  text-align: left;
+  margin-left: 20px;
+}
+</style>

src/views/system/news/edit.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="app-container">
+    <!-- 添加或修改资讯对话框 -->
+    <el-dialog :title="form.id ? '编辑' : '新增'" :close-on-click-modal="false" :visible.sync="visible" @close="close" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="120px" v-loading="loading">
+        <el-form-item label="资讯标题" prop="title"><el-input v-model="form.title" placeholder="请输入资讯标题" clearable /></el-form-item>
+        <el-form-item label="封面图" prop="pic">
+          <el-upload action="#" :show-file-list="false" :http-request="requestUpload" accept=".jpg,.jpeg,.png,.gif" :before-upload="beforeUpload">
+            <el-button icon="el-icon-scissors">选取图片</el-button>
+          </el-upload>
+          <el-image v-if="form.pic" :fit="'contain'" class="mt10 lsw_square" style="max-width:10%;" :src="form.pic" :preview-src-list="[form.pic]"></el-image>
+        </el-form-item>
+        <div class="meditor">
+          <el-form-item label="资讯内容" prop="contents"><Editor v-model="form.contents" :min-height="292"/></el-form-item>
+        </div>
+        <el-form-item label="状态 " prop="state">
+          <el-radio-group v-model="form.state">
+            <el-radio-button v-for="dict in stateOptions" :key="dict.dictValue" :label="parseInt(dict.dictValue)">{{ dict.dictLabel }}</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="visible = false">取 消</el-button>
+      </div>
+    </el-dialog>
+    <!-- 剪裁图片对话框 -->
+    <cropper v-if="show" ref="upload" @img="setImg" :fixed_number="fixedNumber"></cropper>
+  </div>
+</template>
+
+<script>
+import { listNews, getNews, delNews, addNews, updateNews, exportNews } from '@/api/system/news';
+import Editor from '@/components/Editor';
+import cropper from '@/components/cropper';
+export default {
+  components: {
+    Editor,
+    cropper
+  },
+  data() {
+    return {
+      // 遮罩层
+      show: false,
+      loading: false,
+      visible: false,
+      // 图片裁剪比例
+      fixedNumber: [16, 9],
+      // 状态字典
+      stateOptions: [],
+      // 表单参数
+      form: { pic: '' },
+      // 表单校验
+      rules: {
+        title: [{ required: true, message: '资讯标题不能为空', trigger: 'blur' }],
+        pic: [{ required: true, message: '封面图不能为空', trigger: 'blur' }],
+        contents: [{ required: true, message: '资讯内容不能为空', trigger: 'blur' }],
+        state: [{ required: true, message: '状态 不能为空', trigger: 'blur' }]
+      }
+    };
+  },
+  created() {
+    this.getDicts('common_state').then(response => {
+      this.stateOptions = response.data;
+    });
+  },
+  methods: {
+    /** 查询资讯列表 */
+    init(id) {
+      this.visible = true;
+      if (id != '') {
+        this.loading = true;
+        getNews(id).then(response => {
+          this.form = response.data;
+          this.loading = false;
+        });
+      }
+    },
+    // 覆盖默认的上传行为
+    requestUpload() {},
+    // 上传预处理
+    beforeUpload(file) {
+      if (file.type.indexOf('image/') == -1) {
+        this.msgError('文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。');
+        return;
+      }
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = () => {
+        this.show = true;
+        this.$nextTick(() => {
+          this.$refs.upload.editCropper(reader.result);
+        });
+      };
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          this.loading=true;
+          if (this.form.id != null) {
+            updateNews(this.form).then(response => {
+              if (response.code === 200) {
+                this.msgSuccess('修改成功');
+                this.$emit('refresh'); //刷新父组件数据
+                this.visible = false;
+              }
+            });
+          } else {
+            addNews(this.form).then(response => {
+              if (response.code === 200) {
+                this.msgSuccess('新增成功');
+                this.$emit('refresh'); //刷新父组件数据
+                this.visible = false;
+              }
+            });
+          }
+        }
+      });
+    },
+    setImg(img) {
+      this.form.pic = img;
+    },
+    // 关闭弹窗表单重置
+    close() {
+      this.resetForm('form');
+      this.form = {pic:''};
+    }
+  }
+};
+</script>

src/views/system/news/index.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="资讯标题" prop="title"><el-input v-model="queryParams.title" placeholder="请输入资讯标题" clearable @keyup.enter.native="handleQuery" /></el-form-item>
+      <el-form-item label="状态 " prop="state">
+        <el-select v-model="queryParams.state" placeholder="请选择状态 " clearable>
+          <el-option v-for="dict in stateOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="cyan" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <el-row :gutter="10" class="mb8">
+      <el-button type="primary" icon="el-icon-plus" :disabled="ids.length > 0" @click="handleOp" v-hasPermi="['system:news:add']">新增</el-button>
+      <el-button type="success" icon="el-icon-edit" :disabled="ids.length != 1" @click="handleOp" v-hasPermi="['system:news:edit']">修改</el-button>
+      <el-button type="danger" icon="el-icon-delete" :disabled="ids.length == 0" @click="handleDelete" v-hasPermi="['system:news:remove']">批量删除</el-button>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+    <el-table v-loading="loading" border :data="newsList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="资讯标题" align="center" prop="title" />
+      <el-table-column label="封面图" align="center">
+        <template slot-scope="scope">
+          <el-image class="lsw_square" :fit="'contain'" style="max-width:80px;" :src="scope.row.pic" :preview-src-list="[scope.row.pic]"></el-image>
+        </template>
+      </el-table-column>
+      <el-table-column label="阅读量" align="center" prop="views" />
+      <el-table-column label="状态" align="center" prop="state" sortable width="120">
+        <template slot-scope="scope">
+          <el-tag type="danger" v-if="scope.row.state == 1">停用</el-tag>
+          <el-tag type="success" v-if="scope.row.state == 0">启用</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" align="center" prop="createTime" />
+      <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleOp(scope.row)" v-hasPermi="['system:news:edit']">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:news:remove']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+    <!-- 添加或修改对话框 -->
+    <edit v-if="dialogVisible" ref="dialog" @refresh="getList"></edit>
+  </div>
+</template>
+
+<script>
+import { listNews, getNews, delNews, addNews, updateNews, exportNews } from '@/api/system/news';
+import edit from './edit';
+export default {
+  components: {
+    edit
+  },
+  data() {
+    return {
+      //新增,修改弹出框
+      dialogVisible: false,
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 资讯表格数据
+      newsList: [],
+      // 状态 字典
+      stateOptions: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        title: null,
+        pic: null,
+        contents: null,
+        views: null,
+        state: null,
+        orderByColumn: 'id', //排序字段
+        isAsc: 'desc' //排序方式
+      }
+    };
+  },
+  created() {
+    this.getList();
+    this.getDicts('common_state').then(response => {
+      this.stateOptions = response.data;
+    });
+  },
+  methods: {
+    /** 查询资讯列表 */
+    getList() {
+      this.loading = true;
+      listNews(this.queryParams).then(response => {
+        this.newsList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 状态 字典翻译
+    stateFormat(row, column) {
+      return this.selectDictLabel(this.stateOptions, row.state);
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm('queryForm');
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id);
+    },
+    /** 新增,修改按钮操作 */
+    handleOp(row) {
+      this.dialogVisible = true;
+      const ids = row.id || this.ids;
+      this.$nextTick(() => {
+        this.$refs.dialog.init(ids);
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids;
+      this.$confirm('是否确认删除资讯编号为"' + ids + '"的数据项?', '警告', { type: 'warning' })
+        .then(() => {
+          return delNews(ids);
+        })
+        .then(() => {
+          this.getList();
+          this.msgSuccess('删除成功');
+        });
+    }
+  }
+};
+</script>

src/views/system/shop/goods/edit.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="app-container">
+    <!-- 添加或修改商品对话框 -->
+    <el-dialog :title="form.id ? '编辑' : '新增'" :close-on-click-modal="false" :visible.sync="visible" @close="close" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="120px" v-loading="loading">
+        <el-form-item label="商品分类" prop="typeId">
+          <el-select v-model="form.typeId" placeholder="请选择商品分类">
+            <el-option v-for="dict in typeIdOptions" :key="dict.id" :label="dict.name" :value="dict.id"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="商品标题" prop="title"><el-input v-model="form.title" placeholder="请输入商品标题" clearable /></el-form-item>
+        <el-form-item label="商品价格" prop="price"><el-input type="number" v-model="form.price" placeholder="请输入商品价格" clearable /></el-form-item>
+        <el-form-item label="商品图片" prop="pic">
+          <el-button icon="el-icon-scissors" @click="getImg()">选取图片</el-button>
+          <el-image v-if="form.pic" :fit="'contain'" style="max-width:10%;display: block;margin-top: 10px;" :src="form.pic" :preview-src-list="[form.pic]"></el-image>
+        </el-form-item>
+        <div>
+          <el-form-item label="商品详情" prop="details"><Editor v-model="form.details" :min-height="292" /></el-form-item>
+        </div>
+        <el-form-item label="状态 " prop="state">
+          <el-radio-group v-model="form.state">
+            <el-radio-button v-for="dict in stateOptions" :key="dict.dictValue" :label="parseInt(dict.dictValue)">{{ dict.dictLabel }}</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="visible = false">取 消</el-button>
+      </div>
+    </el-dialog>
+    <!-- 剪裁图片对话框 -->
+    <cropper v-if="show" ref="upload" @img="setImg" :fixed_number="fixedNumber"></cropper>
+  </div>
+</template>
+
+<script>
+import { typeList, listGoods, getGoods, delGoods, addGoods, updateGoods, exportGoods } from '@/api/system/shop/goods';
+import Editor from '@/components/Editor';
+import cropper from '@/components/cropper';
+export default {
+  components: {
+    Editor,
+    cropper
+  },
+  data() {
+    return {
+      // 遮罩层
+      show: false,
+      loading: false,
+      visible: false,
+      // 图片裁剪比例
+      fixedNumber: [1, 1],
+      typeIdOptions: [],
+      stateOptions: [],
+      // 表单参数
+      form: { pic: '' },
+      // 表单校验
+      rules: {
+        typeId: [{ required: true, message: '请选择商品类型', trigger: 'blur' }],
+        title: [{ required: true, message: '商品标题不能为空', trigger: 'blur' }],
+        price: [{ required: true, message: '商品价格不能为空', trigger: 'blur' }],
+        pic: [{ required: true, message: '图片不能为空', trigger: 'blur' }],
+        details: [{ required: true, message: '详情不能为空', trigger: 'blur' }],
+        state: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
+      }
+    };
+  },
+  created() {
+    typeList().then(response => {
+      this.typeIdOptions = response.data;
+    });
+    this.getDicts('goods_state').then(response => {
+      this.stateOptions = response.data;
+    });
+  },
+  methods: {
+    init(id) {
+      this.visible = true;
+      if (id != '') {
+        this.loading = true;
+        getGoods(id).then(response => {
+          this.form = response.data;
+          this.loading = false;
+        });
+      }
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          this.loading = true;
+          if (this.form.id != null) {
+            updateGoods(this.form).then(response => {
+              if (response.code === 200) {
+                this.msgSuccess('修改成功');
+                this.$emit('refresh'); //刷新父组件数据
+                this.visible = false;
+              }
+            });
+          } else {
+            addGoods(this.form).then(response => {
+              if (response.code === 200) {
+                this.msgSuccess('新增成功');
+                this.$emit('refresh'); //刷新父组件数据
+                this.visible = false;
+              }
+            });
+          }
+        }
+      });
+    },
+    //选取图片
+    getImg() {
+      this.show = true;
+      this.$nextTick(() => {
+        this.$refs.upload.editCropper();
+      });
+    },
+    //设置图片
+    setImg(img) {
+      this.form.pic = img;
+    },
+    // 关闭弹窗表单重置
+    close() {
+      this.resetForm('form');
+      this.form = {};
+    }
+  }
+};
+</script>

src/views/system/shop/goods/index.vue

@@ -0,0 +1,151 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="88px">
+        <el-form-item label="商品分类" prop="typeId">
+          <el-select v-model="queryParams.typeId" placeholder="请选择商品分类" clearable>
+            <el-option v-for="dict in typeIdOptions" :key="dict.id" :label="dict.name" :value="dict.id"></el-option>
+          </el-select>
+        </el-form-item>
+      <el-form-item label="商品标题" prop="title"><el-input v-model="queryParams.title" placeholder="请输入商品标题" clearable @keyup.enter.native="handleQuery" /></el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker
+          clearable
+          v-model="dateRange"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        ></el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="cyan" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <el-row :gutter="10" class="mb8">
+      <el-button type="primary" icon="el-icon-plus" :disabled="ids.length > 0" @click="handleOp" v-hasPermi="['system/shop:goods:add']">新增</el-button>
+      <el-button type="success" icon="el-icon-edit" :disabled="ids.length != 1" @click="handleOp" v-hasPermi="['system/shop:goods:edit']">修改</el-button>
+      <el-button type="danger" icon="el-icon-delete" :disabled="ids.length == 0" @click="handleDelete" v-hasPermi="['system/shop:goods:remove']">批量删除</el-button>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+    <el-table v-loading="loading" border :data="goodsList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="商品标题" align="center" prop="title" />
+      <el-table-column label="商品类型" align="center" prop="tbGoodsType.name" />
+      <el-table-column label="商品价格" align="center" prop="price" />
+      <el-table-column label="商品图片" align="center">
+        <template slot-scope="scope">
+          <el-image class="lsw_square" :fit="'contain'" style="max-width:80px;" :src="scope.row.pic" :preview-src-list="[scope.row.pic]"></el-image>
+        </template>
+      </el-table-column>
+      <el-table-column label="状态" align="center" prop="state" sortable width="120">
+        <template slot-scope="scope">
+          <el-tag type="danger" v-if="scope.row.state == 1">下架</el-tag>
+          <el-tag type="success" v-if="scope.row.state == 0">上架</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" align="center" prop="createTime" />
+      <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleOp(scope.row)" v-hasPermi="['system/shop:goods:edit']">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system/shop:goods:remove']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+    <!-- 添加或修改对话框 -->
+    <edit v-if="dialogVisible" ref="dialog" @refresh="getList"></edit>
+  </div>
+</template>
+
+<script>
+import {typeList, listGoods, getGoods, delGoods, addGoods, updateGoods, exportGoods } from '@/api/system/shop/goods';
+import edit from './edit';
+export default {
+  components: {
+    edit
+  },
+  data() {
+    return {
+      //新增,修改弹出框
+      dialogVisible: false,
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      // 日期范围
+      dateRange: [],
+      ids: [],
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      typeIdOptions: [],
+      // 商品表格数据
+      goodsList: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        typeId: null,
+        title: null,
+        createTime: null,
+        orderByColumn: 'id', //排序字段
+        isAsc: 'desc' //排序方式
+      }
+    };
+  },
+  created() {
+    typeList().then(response => {
+      this.typeIdOptions = response.data;
+    });
+    this.getList();
+  },
+  methods: {
+    /** 查询商品列表 */
+    getList() {
+      this.loading = true;
+      listGoods(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
+        this.goodsList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.dateRange = [];
+      this.resetForm('queryForm');
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id);
+    },
+    /** 新增,修改按钮操作 */
+    handleOp(row) {
+      this.dialogVisible = true;
+      const ids = row.id || this.ids;
+      this.$nextTick(() => {
+        this.$refs.dialog.init(ids);
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids;
+      this.$confirm('是否确认删除商品编号为"' + ids + '"的数据项?', '警告', { type: 'warning' })
+        .then(() => {
+          return delGoods(ids);
+        })
+        .then(() => {
+          this.getList();
+          this.msgSuccess('删除成功');
+        });
+    }
+  }
+};
+</script>

src/views/system/shop/type/edit.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="app-container">
+    <!-- 添加或修改商品类型对话框 -->
+    <el-dialog :title="form.id ? '编辑' : '新增'" :close-on-click-modal="false" :visible.sync="visible" @close="close" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="120px" v-loading="loading">
+        <el-form-item label="类型名称" prop="name"><el-input v-model="form.name" placeholder="请输入类型名称" clearable /></el-form-item>
+        <el-form-item label="状态 " prop="state">
+          <el-radio-group v-model="form.state">
+            <el-radio-button v-for="dict in stateOptions" :key="dict.dictValue" :label="parseInt(dict.dictValue)">{{ dict.dictLabel }}</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="visible = false">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listType, getType, delType, addType, updateType, exportType } from '@/api/system/shop/type';
+import { getToken } from '@/utils/auth';
+export default {
+  components: {},
+  data() {
+    return {
+      // 遮罩层
+      loading: false,
+      visible: false,
+      // 状态字典
+      stateOptions: [],
+      // 表单参数
+      form: {},
+     // 表单校验
+     rules: {
+       name: [{ required: true, message: '类型名称', trigger: 'blur' }],
+       state: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
+     }
+    };
+  },
+  created() {
+    this.getDicts('common_state').then(response => {
+      this.stateOptions = response.data;
+    });
+  },
+  methods: {
+    /** 查询商品类型列表 */
+    init(id) {
+      this.visible = true;
+      if (id != '') {
+        this.loading = true;
+        getType(id).then(response => {
+          this.form = response.data;
+          this.loading = false;
+        });
+      }
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          if (this.form.id != null) {
+            updateType(this.form).then(response => {
+              if (response.code === 200) {
+                this.msgSuccess('修改成功');
+                this.$emit('refresh'); //刷新父组件数据
+                this.visible = false;
+              }
+            });
+          } else {
+            addType(this.form).then(response => {
+              if (response.code === 200) {
+                this.msgSuccess('新增成功');
+                this.$emit('refresh'); //刷新父组件数据
+                this.visible = false;
+              }
+            });
+          }
+        }
+      });
+    },
+    // 关闭弹窗表单重置
+    close() {
+      this.resetForm('form');
+      this.form = {};
+    }
+  }
+};
+</script>

src/views/system/shop/type/index.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" :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-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker
+          clearable
+          v-model="dateRange"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        ></el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="cyan" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <el-row :gutter="10" class="mb8">
+      <el-button type="primary" icon="el-icon-plus" :disabled="ids.length > 0" @click="handleOp" v-hasPermi="['system/shop:type:add']">新增</el-button>
+      <el-button type="success" icon="el-icon-edit" :disabled="ids.length != 1" @click="handleOp" v-hasPermi="['system/shop:type:edit']">修改</el-button>
+      <el-button type="danger" icon="el-icon-delete" :disabled="ids.length == 0" @click="handleDelete" v-hasPermi="['system/shop:type:remove']">批量删除</el-button>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+    <el-table v-loading="loading" border :data="typeList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="类型名称" align="center" prop="name" />
+      <el-table-column label="状态" align="center" prop="state" sortable width="120">
+        <template slot-scope="scope">
+          <el-tag type="danger" v-if="scope.row.state == 1">停用</el-tag>
+          <el-tag type="success" v-if="scope.row.state == 0">启用</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" align="center" prop="createTime" />
+      <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleOp(scope.row)" v-hasPermi="['system/shop:type:edit']">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system/shop:type:remove']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+    <!-- 添加或修改对话框 -->
+    <edit v-if="dialogVisible" ref="dialog" @refresh="getList"></edit>
+  </div>
+</template>
+
+<script>
+import { listType, getType, delType, addType, updateType, exportType } from '@/api/system/shop/type';
+import edit from './edit';
+export default {
+  components: {
+    edit
+  },
+  data() {
+    return {
+      //新增,修改弹出框
+      dialogVisible: false,
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      // 日期范围
+      dateRange: [],
+      ids: [],
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 商品类型表格数据
+      typeList: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        name: null,
+        createTime: null,
+        orderByColumn: 'id', //排序字段
+        isAsc: 'desc' //排序方式
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询商品类型列表 */
+    getList() {
+      this.loading = true;
+      listType(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
+        this.typeList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.dateRange = [];
+      this.resetForm('queryForm');
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id);
+    },
+    /** 新增,修改按钮操作 */
+    handleOp(row) {
+      this.dialogVisible = true;
+      const ids = row.id || this.ids;
+      this.$nextTick(() => {
+        this.$refs.dialog.init(ids);
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids;
+      this.$confirm('是否确认删除商品类型编号为"' + ids + '"的数据项?', '警告', { type: 'warning' })
+        .then(() => {
+          return delType(ids);
+        })
+        .then(() => {
+          this.getList();
+          this.msgSuccess('删除成功');
+        });
+    }
+  }
+};
+</script>