no message

src/views/mallManagement/configCenter/serviceProduct/index.vue

@@ -0,0 +1,406 @@
+<template>
+  <div class="app-container">
+    <div class="mymain-container">
+      <div class="btn-group clearfix">
+        <div class="fl">
+          <el-button size="small" type="primary" icon="el-icon-plus" @click="addOrEditParent('add')">添加分类</el-button>
+        </div>
+        <div class="fr">
+          <el-input placeholder="请输入分类名称进行搜索" v-model="screenForm.keyword" size="small" style="width: 240px;" clearable>
+            <el-button slot="append" icon="el-icon-search" size="small" @click="getListByScreen"></el-button>
+          </el-input>
+        </div>
+      </div>
+
+      <div class="table">
+        <el-table :data="dataList" row-key="categoryId" border default-expand-all :tree-props="{children: 'children'}">
+          <el-table-column prop="name" label="分类名称" min-width="150"></el-table-column>
+          <el-table-column align="center" label="分类图片" prop="imgUrl" width="80">
+            <template slot-scope="scope">
+              <el-image style="width: 40px; height: 40px; display: block; margin: 0 auto;" :src="scope.row.imgUrl" :preview-src-list="[scope.row.imgUrl]" fit="cover">
+                <div slot="error" style="height: 100%;font-size: 40px;">
+                  <i class="el-icon-picture-outline"></i>
+                </div>
+              </el-image>
+            </template>
+          </el-table-column>
+          <el-table-column align="center" prop="createTime" label="创建时间" min-width="160"></el-table-column>
+          <!-- <el-table-column align="center" prop="goodsNum" label="商品数"></el-table-column> -->
+          <el-table-column align="center" prop="sortNum" label="排序"></el-table-column>
+          <el-table-column align="center" prop="companyName" label="商户" min-width="120"></el-table-column>
+          <el-table-column align="center" label="状态" class-name="status-col">
+            <template slot-scope="scope">
+              <el-tag :type="scope.row.status ? 'success':'danger'">{{ scope.row.status ? '显示':'隐藏' }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column align="right" label="操作" width="150" fixed="right">
+            <template slot-scope="scope">
+              <el-button type="primary" size="mini" icon="el-icon-plus" v-if="scope.row.level == 1" @click="addOrEditChild('add', scope.row.categoryId)"></el-button>
+              <el-button type="primary" size="mini" icon="el-icon-edit" v-if="scope.row.level == 1" @click="addOrEditParent('edit', scope.row.categoryId)"></el-button>
+              <el-button type="primary" size="mini" icon="el-icon-edit" v-if="scope.row.level == 2" @click="addOrEditChild('edit', scope.row.categoryId)"></el-button>
+              <el-popconfirm style="margin-left: 10px;" title="确定删除吗？" @onConfirm="handleDelete(scope.row.categoryId)" >
+                <el-button slot="reference" size="mini" icon="el-icon-delete"></el-button>
+              </el-popconfirm>
+
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+
+    <!-- 新增编辑 一级分类 -->
+    <el-dialog :title="addParentFormType == 'add' ? '添加一级分类':'编辑一级分类'" :visible.sync="addParentFormVisible" :show-close="false" width="40%" :close-on-click-modal="false">
+      <el-form ref="addParentForm" :model="addParentForm" :rules="addParentFormRules" label-position="left" label-width="80px">
+        <el-form-item label="一级分类" prop="oneClassify">
+          <el-input type="text" placeholder="请输入一级分类名称" v-model="addParentForm.oneClassify" maxlength="10" show-word-limit style="width: 250px;"></el-input>
+        </el-form-item>
+        <el-form-item label="分类图片" prop="imgUrl">
+          <el-upload
+            class="avatar-uploader"
+            style="height:122px"
+            :action="baseURL + 'common/upload'"
+            :headers="myHeaders"
+            :show-file-list="false"
+            :on-success="uploadSuccess"
+            :before-upload="beforeUpload">
+            <img v-if="addParentForm.imgUrl" :src="addParentForm.imgUrl" class="avatar">
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+          </el-upload>
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="addParentForm.status">
+            <el-radio :label="true">显示</el-radio>
+            <el-radio :label="false">隐藏</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="排序" prop="sort">
+          <el-input placeholder="请输入排序" v-model.number="addParentForm.sort" style="width: 250px;"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancelAddParentForm">取 消</el-button>
+        <el-button type="primary" @click="submitAddParentForm">确 定</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 新增编辑 二级分类 -->
+    <el-dialog :title="addChildFormType == 'add' ? '添加二级分类':'编辑二级分类'" :visible.sync="addChildFormVisible" :show-close="false" width="40%" :close-on-click-modal="false">
+      <el-form ref="addChildForm" :model="addChildForm" :rules="addChildFormRules" label-position="left" label-width="80px">
+        <el-form-item label="一级分类" prop="oneClassify">
+          <el-select v-model="addChildForm.oneClassify" placeholder="请选择一级分类" disabled style="width: 250px;">
+            <el-option :label="item.name" :value="item.categoryId" v-for="(item, index) in classifyList" :key="index"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="二级分类" prop="twoClassify">
+          <el-input type="text" placeholder="请输入二级分类名称" v-model="addChildForm.twoClassify" maxlength="10" show-word-limit style="width: 250px;"></el-input>
+        </el-form-item>
+
+        <el-form-item label="分类图片" prop="imgUrl">
+          <el-upload
+            class="avatar-uploader"
+            style="height:122px"
+            :action="baseURL + 'common/upload'"
+            :headers="myHeaders"
+            :show-file-list="false"
+            :on-success="uploadSuccess"
+            :before-upload="beforeUpload">
+            <img v-if="addChildForm.imgUrl" :src="addChildForm.imgUrl" class="avatar">
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+          </el-upload>
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="addChildForm.status">
+            <el-radio :label="true">显示</el-radio>
+            <el-radio :label="false">隐藏</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="排序" prop="sort">
+          <el-input placeholder="请输入排序" v-model.number="addChildForm.sort" style="width: 250px;"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancelAddChildForm">取 消</el-button>
+        <el-button type="primary" @click="submitAddChildForm">确 定</el-button>
+      </div>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+import { getToken } from '@/utils/auth'
+import { getClassifyList, addClassify, editClassify, deleteClassify, getClassifyDetail, getSmallType } from '@/api/goods'
+import { ORDER_MAIN_TYPE } from "@/utils/select_data";
+import { findElem } from '@/utils/util.js';
+
+export default {
+  data() {
+    return {
+      baseURL: process.env.VUE_APP_BASE_API,
+      myHeaders: {'x-token': getToken()},
+
+      dataList: [], // 列表数据
+      listLoading: true, // 列表加载loading
+      screenForm: { // 筛选表单数据
+        keyword: '', // 关键词
+      },
+
+      editParentId:  null,
+      addParentFormType: 'add',
+      addParentFormVisible: false,
+      addParentForm: {
+        oneClassify: '',
+        twoClassify: '',
+        imgUrl: '',
+        status: true,
+        sort: 0,
+      },
+      addParentFormRules: {
+        oneClassify: [
+          { required: true, message: '请填写一级分类名称', trigger: 'blur' },
+        ],
+        imgUrl: [
+          { required: true, message: '请上传分类图片', trigger: 'change' }
+        ]
+      },
+
+      editChildId:  null,
+      addChildFormType: 'add',
+      addChildFormVisible: false,
+      addChildForm: {
+        oneClassify: '',
+        twoClassify: '',
+        imgUrl: '',
+        status: true,
+        sort: 0,
+      },
+      addChildFormRules: {
+        oneClassify: [
+          { required: true, message: '请选择一级分类', trigger: 'change' }
+        ],
+        twoClassify: [
+          { required: true, message: '请填写二级分类', trigger: 'blur' }
+        ],
+        imgUrl: [
+          { required: true, message: '请上传分类图片', trigger: 'change' }
+        ],
+      },
+
+      classifyList: [],
+
+      orderMainType: ORDER_MAIN_TYPE,
+      orderSmallType: [],
+
+    }
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+
+    getList() {
+      this.listLoading = true;
+
+      let params = {
+        type: 2,
+        name: this.screenForm.keyword,
+      };
+
+      getClassifyList(params).then(res => {
+        this.dataList = res.data;
+      })
+    },
+
+    // 筛选后重新获取列表
+    getListByScreen() {
+      this.currentPage = 1;
+      this.getList();
+    },
+
+    // 打开 新增编辑 一级分类
+    addOrEditParent(type, cid) {
+      this.addParentFormType = type;
+      this.addParentFormVisible = true;
+      if(type == 'edit') {
+        this.editParentId = cid;
+        getClassifyDetail({categoryId: cid}).then(res => {
+          this.addParentForm = {
+            oneClassify: res.data.name,
+            status: res.data.status,
+            imgUrl: res.data.imgUrl,
+            sort: res.data.sortNum
+          }
+        })
+      }
+    },
+
+    // 取消 新增编辑 一级分类
+    cancelAddParentForm(){
+      this.addParentFormVisible = false;
+      this.$refs.addParentForm.resetFields();
+    },
+
+    // 提交 一级分类
+    submitAddParentForm() {
+      this.$refs.addParentForm.validate((valid) => {
+        if (valid) {
+          let params = {
+            type: 2,
+            name: this.addParentForm.oneClassify,
+            imgUrl: this.addParentForm.imgUrl,
+            status: this.addParentForm.status,
+            sortNum: this.addParentForm.sort,
+          }
+          if(this.addParentFormType == 'edit') {
+            params.categoryId = this.editParentId;
+            editClassify(params).then(res => {
+              this.cancelAddParentForm();
+              this.getList();
+              this.$successMsg('编辑成功');
+            })
+          }else {
+            addClassify(params).then(res => {
+              this.cancelAddParentForm();
+              this.getList();
+              this.$successMsg('添加成功');
+            })
+          }
+        }
+      })
+    },
+
+    // 改变大类
+    changeOrderType() {
+      this.addChildForm.smallType = '';
+      this.getSmallType();
+    },
+
+    getSmallType() {
+      getSmallType({
+        mainNumber: this.addChildForm.orderType,
+        categoryId: this.addChildForm.oneClassify
+      }).then(res => {
+        this.orderSmallType = res.data;
+      })
+    },
+
+    // 打开 新增编辑 二级分类
+    addOrEditChild(type, cid) {
+      this.addChildFormType = type;
+      this.addChildFormVisible = true;
+      getClassifyList({name: '', type: 2}).then(res => {
+        this.classifyList = res.data;
+      })
+      
+      if(type == 'add') {
+        this.addChildForm.oneClassify = cid;
+      }
+
+      if(type == 'edit') {
+        this.editChildId = cid;
+        getClassifyDetail({categoryId: cid}).then(res => {
+          this.addChildForm = {
+            oneClassify: res.data.parentId,
+            twoClassify: res.data.name,
+            imgUrl: res.data.imgUrl,
+            status: res.data.status,
+            sort: res.data.sortNum
+          }
+          this.getSmallType();
+        })
+      }
+    },
+
+    // 取消 新增编辑 二级分类
+    cancelAddChildForm(){
+      this.addChildFormVisible = false;
+      this.$refs.addChildForm.resetFields();
+    },
+
+    // 提交 二级分类
+    submitAddChildForm() {
+      this.$refs.addChildForm.validate((valid) => {
+        if (valid) {
+          let params = {}
+          if(this.addChildFormType == 'edit') {
+            params = {
+              type: 2,
+              categoryId: this.editChildId,
+              name: this.addChildForm.twoClassify,
+              imgUrl: this.addChildForm.imgUrl,
+              status: this.addChildForm.status,
+              sortNum: this.addChildForm.sort
+            }
+            editClassify(params).then(res => {
+              this.cancelAddChildForm();
+              this.getList();
+              this.$successMsg('编辑成功');
+            })
+          }else {
+            params = {
+              children: [{
+                type: 2,
+                parentId: this.addChildForm.oneClassify,
+                name: this.addChildForm.twoClassify,
+                imgUrl: this.addChildForm.imgUrl,
+                status: this.addChildForm.status,
+                sortNum: this.addChildForm.sort
+              }]
+            }
+            addClassify(params).then(res => {
+              this.cancelAddChildForm();
+              this.getList();
+              this.$successMsg('添加成功');
+            })
+          }
+        }
+      })
+    },
+
+    // 操作 - 删除
+    handleDelete(id) {
+      deleteClassify({categoryId: id}).then(res => {
+        this.getList();
+        this.$successMsg();
+      })
+    },
+
+    uploadSuccess(res, file, index) {
+      if (this.addParentFormVisible) {
+        this.addParentForm.imgUrl = res.data.url
+      } else {
+        this.addChildForm.imgUrl = res.data.url
+      }
+    },
+
+    beforeUpload(file) {
+      const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
+      const whiteList = ['jpg', 'jpeg', 'png'];
+      if (whiteList.indexOf(fileSuffix) === -1) {
+        this.$errorMsg('只支持上传jpg/png文件!');
+        return false;
+      }
+    },
+
+  }
+
+}
+
+</script>
+
+<style scoped lang="scss">
+</style>
+
+<style lang="scss">
+  .el-image-viewer__wrapper .el-icon-circle-close {
+    color: #ffffff !important;
+    font-size: 60px;
+  }
+  .el-table__row.expanded {
+    background: #f5f5f5;
+  }
+
+  th:first-child, th:last-child {
+    text-align: center !important;
+  }
+</style>