feat: 迁移订单与维权订单

src/layout/components/AppMain.vue

@@ -1,12 +1,10 @@
 <template>
   <section class="app-main" :style="{ paddingTop: show ? '140px' : '80px' }">
     <div class="app-main-view">
-      <!-- <transition name="fade-transform" mode="out-in"> -->
-      <keep-alive v-if="$route.name">
-        <router-view :key="$route.name" />
+      <keep-alive>
+        <router-view v-if="$route.meta.status" :key="$route.name" />
       </keep-alive>
-      <router-view v-else />
-      <!-- </transition> -->
+      <router-view v-if="!$route.meta.status" :key="$route.name"/>
       <zj-watermark color="rgba(200,200,200,.3)" position="absolute" :str="str" zIndex="99" />
     </div>
   </section>
@@ -19,12 +17,6 @@ export default {
   name: 'AppMain',
   computed: {
     ...mapGetters(['show']),
-    cachedViews() {
-      return this.$store.state.tagsView.cachedViews
-    },
-    key() {
-      return this.$route.path
-    },
     str() {
       return this.$store.state?.user?.name
     }

src/layout/components/Sidebar/SidebarItem.vue

@@ -1,6 +1,6 @@
 <template>
-  <div v-if="!item.hidden || item.noShowingChildren">
-    <template v-if="item.type == 2 || (!item.children || !item.children.length)">
+  <div v-if="item.status">
+    <template v-if="!item.children || !item.children.length">
       <app-link v-if="item.meta" :to="item.path">
         <el-menu-item :index="item.path" :class="{ 'submenu-title-noDropdown': !isNest }">
           <item :icon="item.meta.icon || (item.meta && item.meta.icon)" :title="item.meta.title" />

src/layout/components/Sidebar/index.vue

@@ -31,6 +31,8 @@ export default {
     routes() {
       var l1 = this.$router.options.routes.concat(global.antRouter).find(item => item.path === this.l1Path)
       if (l1 && l1.children) {
+        console.log(l1.children)
+        console.log(global.antRouter)
         return l1.children
       } else {
         return []

src/main.js

@@ -1,5 +1,5 @@
 import { setToken } from '@/utils/auth'
-import { getUrlParam } from '@/utils/util'
+import { getUrlParam, findElem, deleteEmptyObj } from '@/utils/util'
 if (getUrlParam().token) {
   setToken(getUrlParam().token)
 }
@@ -128,6 +128,11 @@ Vue.component('Collapse', Collapse)
 Vue.prototype.$imageUrl = process.env.VUE_APP_BASE_API + '/common/img/get?key=';
 Vue.prototype.$xdocUrl = 'https://pgxtadm.greeapps.com/preview/onlinePreview?url=';
 
+
+Vue.prototype.$findElem = findElem;
+Vue.prototype.$deleteEmptyObj = deleteEmptyObj;
+
+
 /**
  * If you don't want to use mock-server
  * you want to use MockJs for mock api

src/permission.js

@@ -19,6 +19,8 @@ const lay = {
 
 import { pages } from './settings'
 
+var include = []
+
 // 递归找最后一级页面
 function getc(obj) {
   if (!obj.children || !obj.children.length) {
@@ -85,16 +87,18 @@ router.afterEach(() => {
 })
 
 function buildRoute(route, parentUrl = '', bool=true) {
-  const { url, moduleName, icon, moduleId, code, type, hidden, fullUrl } = route
+  const { url, moduleName, icon, moduleId, code, type, hidden, fullUrl, status } = route
   var item = {}
   item.path = ~[3, 4].indexOf(type) ? fullUrl : parentUrl + url
   item.name = ~[3].indexOf(type) ? fullUrl : code
   item.type = type
+  item.status = status
   item.meta = {
     url,
     title: moduleName,
     icon: icon,
-    moduleId
+    moduleId,
+    status : status
   }
   item.hidden = hidden
   if (route.children && route.children.length) {
@@ -104,9 +108,6 @@ function buildRoute(route, parentUrl = '', bool=true) {
       } catch (e) {
         console.log(e)
       }
-      if(route.children && route.children.length){
-        item.children = route.children.filter(item => item.type !== 3).map(child => buildRoute(child, parentUrl, bool))
-      }
       const roles = []
       const roleItems = []
       for (var role of route.children.filter(item => item.type == 3)) {

src/utils/util.js

@@ -8,31 +8,32 @@ import { getToken } from '@/utils/auth'
  * @returns {Object}
  */
 export function deleteEmptyObj(obj) {
-  const newObj = obj
-  for (var key in newObj) {
-    if (newObj[key] === '' || newObj[key] === null || newObj[key] === undefined) {
+  let newObj = obj;
+  for(var key in newObj) {
+    if(newObj[key] === '' || newObj[key] === null) {
       delete newObj[key]
     }
   }
-  return newObj
+  return newObj;
 }
 
 /**
- *
+ * 
  * @param {*} array 要查询的数组
  * @param {*} attr 要查询的字段
  * @param {*} val 要查询的字段值
- * @returns
+ * @returns 
  */
 export function findElem(array, attr, val) {
   for (var i = 0; i < array.length; i++) {
     if (array[i][attr] == val) {
-      return i // 返回当前索引值
+        return i; //返回当前索引值
     }
   }
-  return -1
+  return -1;
 }
 
+
 /**
  * 生成带参数的链接
  * @param {String} url

src/views/mallManagement/goods/explain_add/index.vue

@@ -0,0 +1,564 @@
+<template>
+  <div class="app-container">
+    <el-form ref="mainForm" :model="mainForm" :rules="mainFormRules" label-width="80px" label-position="top">
+      <el-form-item label="模块名称" prop="name">
+        <el-input v-model="mainForm.name" placeholder="请输入模块名称" style="width: 300px"></el-input>
+      </el-form-item>
+      <el-form-item label="详细内容" prop="content">
+        <el-upload
+          ref="imageListUpload"
+          class="avatar-uploader2"
+          :action="baseURL + 'common/upload'"
+          :headers="myHeaders"
+          multiple
+          name="file"
+          :show-file-list="false"
+          :on-success="uploadSuccess4"
+          :on-error="uploadError4"
+          :before-upload="beforeUpload4">
+        </el-upload>
+        <!--富文本编辑器组件-->
+        <el-row v-loading="quillImgLoading">
+          <quill-editor
+            v-model="mainForm.content"
+            ref="myQuillEditor"
+            :options="editorOption">
+          </quill-editor>
+        </el-row>
+      </el-form-item>
+    </el-form>
+
+    <div class="mymain-container">
+      <div class="btn-group">
+        <el-button size="small" type="primary" @click="addClassify">选择分类</el-button>
+        <el-button size="small" type="primary" @click="addGoods">选择商品</el-button>
+      </div>
+
+      <div class="table">
+        <el-table :data="goodsList" border fit stripe>
+          <el-table-column align="center" label="商品名称" prop="goodsName" min-width="200"></el-table-column>
+          <el-table-column align="center" label="销售价格" prop="goodsPrice" min-width="110">
+            <template slot-scope="scope">
+              ¥{{ scope.row.goodsPrice }}
+            </template>
+          </el-table-column>
+          <el-table-column align="center" label="分销金额" prop="shareAmount" min-width="110">
+            <template slot-scope="scope">
+              ¥{{ scope.row.shareAmount }}
+            </template>
+          </el-table-column>
+          <el-table-column align="center" label="库存" prop="stockNum"></el-table-column>
+          <el-table-column align="center" label="销量" prop="soldNum"></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="center" label="操作" width="100">
+            <template slot-scope="scope">
+              <el-button type="text" @click="deleteGoods(scope.$index)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+
+    <div class="page-footer">
+      <div class="footer" :class="classObj">
+        <el-button type="primary" @click="submitForm" :loading="formLoading">{{ formLoading ? '提交中 ...' : '提 交' }}</el-button>
+        <el-popconfirm
+          title="确定关闭吗？"
+          @onConfirm="goBack"
+          style="margin-left: 10px;"
+        >
+          <el-button slot="reference">关 闭</el-button>
+        </el-popconfirm>
+      </div>
+    </div>
+
+    <!-- 选择商品 -->
+    <el-dialog title="选择商品" :visible.sync="addGoodsVisible" :show-close="false" width="50%" :close-on-click-modal="false">
+      <div class="dialog-container clearfix">
+        <div class="left fl">
+          <div class="item" @click="changeClassify('')">全部分类</div>
+          <div class="group" v-for="(item, index) in classifyList" :key="index">
+            <div class="item" @click="toggleOpen(index)">
+              <i :class="item.isOpen ? 'el-icon-caret-bottom':'el-icon-caret-right'"></i> {{item.name}}
+            </div>
+            <div class="child" v-if="item.isOpen">
+              <div class="item" v-for="(childItem, childIndex) in item.children" :key="childIndex" @click="changeClassify(childItem.categoryId)">{{childItem.name}}</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="right fl">
+          <div class="search">
+            <el-input placeholder="请输入商品名称进行搜索" v-model="keyword" class="input-with-select" clearable size="small" style="width: 250px">
+              <el-button slot="append" icon="el-icon-search" size="small" @click="getGoodsListByScreen"></el-button>
+            </el-input>
+          </div>
+          <div class="table" style="margin: 10px 0 20px;">
+            <el-table 
+              v-loading="table_listLoading" 
+              :data="table_dataList" 
+              element-loading-text="Loading" 
+              tooltip-effect="dark" 
+              style="width: 100%" 
+              max-height="270"
+              @selection-change="handleChooseGoods">
+              <el-table-column align="center" type="selection" :selectable='checkboxSelect' width="45"></el-table-column>
+              <el-table-column align="center" prop="goodsName" label="商品名称" min-width="200" show-overflow-tooltip></el-table-column>
+              <el-table-column align="center" prop="goodsPrice" label="价格" width="80"></el-table-column>
+              <el-table-column align="center" prop="stockNum" label="库存" width="80"></el-table-column>
+            </el-table>
+          </div>
+          <div class="pagination clearfix">
+            <div class="fr">
+              <el-pagination
+                @current-change="handleTableCurrentChange"
+                :current-page="table_currentPage"
+                :page-size="table_pageSize"
+                background
+                layout="prev, pager, next"
+                :total="table_listTotal">
+              </el-pagination>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitAddGoods">保 存</el-button>
+        <el-button @click="cancelAddGoods">取 消</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 选择分类 -->
+    <el-dialog title="选择分类" :visible.sync="addClassifyVisible" :show-close="false" width="40%" :close-on-click-modal="false">
+      <div class="classify-list">
+        <el-tree
+          :data="classifyList"
+          show-checkbox
+          default-expand-all
+          node-key="categoryId"
+          ref="tree"
+          highlight-current
+          :props="defaultProps">
+        </el-tree>
+      </div>
+      
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitAddClassify">保 存</el-button>
+        <el-button @click="cancelAddClassify">取 消</el-button>
+      </div>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+import { getToken } from '@/utils/auth'
+import { getModuleDetail, addModule, editModule, getClassifyList, getGoodsList, getMoreGoodsList } from '@/api/goods'
+import { quillEditor } from 'vue-quill-editor'
+import 'quill/dist/quill.core.css'
+import 'quill/dist/quill.snow.css'
+import 'quill/dist/quill.bubble.css'
+
+// 工具栏配置
+const toolbarOptions = [
+  ['bold', 'italic', 'underline', 'strike'],
+  ['blockquote', 'code-block'],
+  [{'header': 1}, {'header': 2}],
+  [{'list': 'ordered'}, {'list': 'bullet'}],
+  [{'script': 'sub'}, {'script': 'super'}],
+  [{'indent': '-1'}, {'indent': '+1'}],
+  [{'direction': 'rtl'}],
+  [{'size': ['small', false, 'large', 'huge']}],
+  [{'header': [1, 2, 3, 4, 5, 6, false]}],
+  [{'color': []}, {'background': []}],
+  [{'font': []}],
+  [{'align': []}],
+  ['link', 'image', 'video'],
+  // ['clean']
+]
+
+export default {
+  components: {
+    quillEditor
+  },
+  data() {
+    return {
+      baseURL: process.env.VUE_APP_BASE_API,
+      myHeaders: {'x-token': getToken()},
+      isEdit: false,
+      editId: '',
+
+      mainForm: {
+        name: '',
+        content: '',
+      },
+      mainFormRules: {
+        name: [
+          { required: true, message: '请输入模块名称', trigger: 'blur' }
+        ],
+        content: [
+          { required: true, message: '请输入详情内容', trigger: 'blur' }
+        ],
+      },
+
+      quillImgLoading: false, // 富文本上传图片loading
+      editorOption: { // 富文本配置
+        placeholder: '请输入详情内容',
+        theme: 'snow',
+        modules: {
+          toolbar: {
+            container: toolbarOptions,
+            handlers: {
+              'image': function (value) {
+                if (value) {
+                  document.querySelector('.avatar-uploader2 input').click()
+                } else {
+                  this.quill.format('image', false);
+                }
+              }
+            }
+          }
+        }
+      },
+      editorImages: [],
+
+      formLoading: false,
+
+      goodsList: [], // 列表数据
+      addGoodsVisible: false,
+
+      classifyList: [],
+      classifyCurrent: '',
+      keyword: '',
+      table_dataList: null, // 列表数据
+      table_listLoading: true, // 列表加载loading
+      table_currentPage: 1, // 当前页码
+      table_pageSize: 10, // 每页数量
+      table_listTotal: 0, // 列表总数
+      table_chooseGoods: [], // table中 当前选择商品
+
+      addClassifyVisible: false,
+      defaultProps: {
+        children: 'children',
+        label: 'name'
+      }
+    }
+  },
+  computed: {
+    sidebar() {
+      return this.$store.state.app.sidebar
+    },
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened
+      }
+    },
+  },
+
+  created() {
+    const { id } = this.$route.query;
+    this.isEdit = id ? true : false;
+    this.editId = id;
+
+    if(this.isEdit) {
+      this.getModuleDetail(id);
+    }
+  },
+
+  methods: {
+    // 获取详情
+    getModuleDetail(commonTemplateId) {
+      getModuleDetail({commonTemplateId}).then(res => {
+        this.mainForm = {
+          name: res.data.name,
+          content: res.data.content,
+        }
+        this.goodsList = res.data.goodsList
+      })
+    },
+
+    // 获取分类列表
+    getClassifyList() {
+      getClassifyList({categoryLevel: 1, status: true}).then(res => {
+        res.data.forEach(item => {
+          item.isOpen = false;
+        });
+        this.classifyList = res.data;
+        this.classifyCurrent = '';
+        this.getGoodsList();
+      })
+    },
+
+    // 展开/收起 分类
+    toggleOpen(index) {
+      this.classifyList[index].isOpen = !this.classifyList[index].isOpen;
+    },
+
+    // 切换分类
+    changeClassify(cid) {
+      if(this.table_chooseGoods.length > 0) {
+        return this.$errorMsg('当前已选择商品，不可切换分类');
+      }
+      this.classifyCurrent = cid;
+      this.table_currentPage = 1;
+      this.getGoodsList();
+    },
+
+    // 搜索
+    getGoodsListByScreen() {
+      if(this.table_chooseGoods.length > 0) {
+        return this.$errorMsg('当前已选择商品，不可搜索');
+      }
+      this.table_currentPage = 1;
+      this.getGoodsList();
+    },
+
+    // 获取商品列表
+    getGoodsList() {
+      getGoodsList({
+        pageNum: this.table_currentPage,
+        pageSize: this.table_pageSize,
+        keyword: this.keyword,
+        categoryId: this.classifyCurrent,
+      }).then(res => {
+        let oldGoodsList = this.goodsList;
+        let newGoodsList = res.data.records;
+        for(let i = 0; i < oldGoodsList.length; i++) {
+          let oldItem = oldGoodsList[i]
+          for(let j = 0; j < newGoodsList.length; j++) {
+            let newItem = newGoodsList[j]
+            if(newItem.goodsId === oldItem.goodsId){
+              newGoodsList[j].selected = true;
+              break;
+            }
+          }
+        }
+        this.table_dataList = newGoodsList;
+        this.table_listTotal = res.data.total;
+        this.table_listLoading = false;
+      })
+    },
+
+    // 查询重复值并禁选
+    checkboxSelect (row, rowIndex) {
+      if (row.selected) {
+        return false // 禁用
+      }else{
+        return true // 不禁用
+      }
+    },
+
+    // 更改列表当前页
+    handleTableCurrentChange(val) {
+      if(this.table_chooseGoods.length > 0) {
+        return this.$errorMsg('当前已选择商品，不可切换分页');
+      }
+      this.table_currentPage = val;
+      this.getGoodsList();
+    },
+
+    // table点击选择商品
+    handleChooseGoods(val) {
+      this.table_chooseGoods = val;
+    },
+
+    // 打开 选择商品
+    addGoods() {
+      this.addGoodsVisible = true;
+      this.getClassifyList();
+    },
+
+    // 取消 选择商品
+    cancelAddGoods(){
+      this.addGoodsVisible = false;
+    },
+
+    // 提交 选择商品
+    submitAddGoods() {
+      let oldGoodsList = this.goodsList;
+      let newGoodsList = this.table_chooseGoods;
+      this.goodsList = oldGoodsList.concat(newGoodsList);
+      this.addGoodsVisible = false;
+    },
+
+    // 删除商品
+    deleteGoods(index) {
+      this.goodsList.splice(index, 1);
+    },
+
+    // 打开 选择分类
+    addClassify() {
+      this.addClassifyVisible = true;
+      this.getClassifyList();
+    },
+
+    // 取消 选择分类
+    cancelAddClassify(){
+      this.addClassifyVisible = false;
+    },
+
+    // 提交 选择分类
+    submitAddClassify() {
+      if(this.$refs.tree.getCheckedNodes().length <= 0) {
+        return this.$errorMsg('请选择分类');
+      }
+      let checkeds = this.$refs.tree.getCheckedNodes();
+      let ids = [];
+      checkeds.forEach(item => {
+        if(item.level === 2) {
+          ids.push(item.categoryId);
+        }
+      })
+      getMoreGoodsList({ categoryIds: ids.join(',')}).then(res => {
+        let oldGoodsList = this.goodsList;
+        let newGoodsList = res.data;
+        let allGoodsList = oldGoodsList.concat(newGoodsList);
+        let showGoodsList = [];
+        let obj = {};
+        for(var i =0; i<allGoodsList.length; i++){
+            if(!obj[allGoodsList[i].goodsId]){
+              showGoodsList.push(allGoodsList[i]);
+              obj[allGoodsList[i].goodsId] = true;
+            }
+        }
+        this.goodsList = showGoodsList;
+        this.addClassifyVisible = false;
+      })
+    },
+
+    submitForm() {
+      this.$refs.mainForm.validate((valid) => {
+        if (valid) {
+          if(this.goodsList.length <= 0) {
+            return this.$errorMsg('请选择商品');
+          }
+
+          let goodsIds = [];
+          this.goodsList.forEach(item => {
+            goodsIds.push(item.goodsId);
+          })
+
+          this.formLoading = true;
+
+          let params = {
+            name: this.mainForm.name,
+            content: this.mainForm.content,
+            goodsIds: goodsIds
+          }
+          params = this.$deleteEmptyObj(params);
+
+          if(this.isEdit) {
+            params.commonTemplateId = this.editId;
+            editModule(params).then(res => {
+              this.formLoading = false;
+              this.$successMsg('编辑成功');
+              setTimeout(()=>{
+                this.goBack();
+              }, 1000)
+            }).catch(err => {
+              this.formLoading = false;
+            })
+          } else {
+            addModule(params).then(res => {
+              this.formLoading = false;
+              this.$successMsg('新增成功');
+              setTimeout(()=>{
+                this.goBack();
+              }, 1000)
+            }).catch(err => {
+              this.formLoading = false;
+            })
+          }
+
+        }
+      })
+    },
+
+    goBack() {
+      this.$router.go(-1);
+      // this.$store.dispatch("tagsView/delView", this.$route);
+    },
+
+    // 富文本图片上传前
+    beforeUpload4() {
+      this.quillImgLoading = true;
+    },
+
+    // 富文本图片上传成功
+    uploadSuccess4(res, file, fileList) {
+      console.log(fileList);
+      fileList.forEach(item => {
+        if(this.editorImages.indexOf(item.response.data.url) < 0) {
+          this.editorImages.push(item.response.data.url);
+        }
+      })
+      this.showImage()
+      this.quillImgLoading = false;
+    },
+
+    showImage() {
+      console.log(this.editorImages);
+      let quill = this.$refs.myQuillEditor.quill;
+      this.editorImages.forEach(item => {
+        // 获取光标所在位置
+        let length = quill.getSelection().index;
+        // 插入图片  res.info为服务器返回的图片地址
+        console.log(item);
+        quill.insertEmbed(length, 'image', item);
+        // this.$refs.imageListUpload.clearFiles()
+        // 调整光标到最后
+        quill.setSelection(length + 1);
+      })
+      this.editorImages = [];
+      this.$refs.imageListUpload.clearFiles();
+    },
+
+    // 富文本图片上传失败
+    uploadError4() {
+      this.quillImgLoading = false;
+      this.$errorMsg('图片插入失败');
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .dialog-container {
+    .left {
+      width: 140px;
+      height: 350px;
+      overflow-y: scroll;
+      .group {
+        margin-top: 10px;
+      }
+      .child {
+        margin-top: 5px;
+        .item {
+          padding-left: 18px;
+        }
+      }
+      .item {
+        cursor: pointer;
+        line-height: 24px;
+      }
+    }
+    .right {
+      width: calc(100% - 140px);
+      height: 350px;
+      box-sizing: border-box;
+      padding-left: 20px;
+    }
+  }
+
+  .classify-list {
+    height: 50vh;
+    overflow-y: scroll;
+  }
+</style>

src/views/mallManagement/goods/explain_common/index.vue

@@ -0,0 +1,218 @@
+<template>
+  <div class="app-container">
+    <div class="title">公共内容<span>显示在所有商品详情</span></div>
+    <el-form ref="mainForm" :model="mainForm" :rules="mainFormRules" label-width="80px" label-position="top">
+      <el-form-item label="" prop="content">
+        <el-upload
+          ref="imageListUpload"
+          class="avatar-uploader2"
+          :action="baseURL + 'common/upload'"
+          :headers="myHeaders"
+          multiple
+          name="file"
+          :show-file-list="false"
+          :on-success="uploadSuccess4"
+          :on-error="uploadError4"
+          :before-upload="beforeUpload4">
+        </el-upload>
+        <!--富文本编辑器组件-->
+        <el-row v-loading="quillImgLoading">
+          <quill-editor
+            v-model="mainForm.content"
+            ref="myQuillEditor"
+            :options="editorOption">
+          </quill-editor>
+        </el-row>
+      </el-form-item>
+    </el-form>
+
+    <div class="page-footer">
+      <div class="footer" :class="classObj">
+        <el-button type="primary" @click="submitForm" :loading="formLoading">{{ formLoading ? '提交中 ...' : '提 交' }}</el-button>
+        <el-popconfirm
+          title="确定关闭吗？"
+          @onConfirm="goBack"
+          style="margin-left: 10px;"
+        >
+          <el-button slot="reference">关 闭</el-button>
+        </el-popconfirm>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import { getToken } from '@/utils/auth'
+import { getCommonModuleDetail, editCommonModule } from '@/api/goods'
+import { quillEditor } from 'vue-quill-editor'
+import 'quill/dist/quill.core.css'
+import 'quill/dist/quill.snow.css'
+import 'quill/dist/quill.bubble.css'
+
+// 工具栏配置
+const toolbarOptions = [
+  ['bold', 'italic', 'underline', 'strike'],
+  ['blockquote', 'code-block'],
+  [{'header': 1}, {'header': 2}],
+  [{'list': 'ordered'}, {'list': 'bullet'}],
+  [{'script': 'sub'}, {'script': 'super'}],
+  [{'indent': '-1'}, {'indent': '+1'}],
+  [{'direction': 'rtl'}],
+  [{'size': ['small', false, 'large', 'huge']}],
+  [{'header': [1, 2, 3, 4, 5, 6, false]}],
+  [{'color': []}, {'background': []}],
+  [{'font': []}],
+  [{'align': []}],
+  ['link', 'image', 'video'],
+  // ['clean']
+]
+
+export default {
+  components: {
+    quillEditor
+  },
+  data() {
+    return {
+      baseURL: process.env.VUE_APP_BASE_API,
+      myHeaders: {'x-token': getToken()},
+
+      mainForm: {
+        content: '',
+      },
+      mainFormRules: {
+        // content: [
+        //   { required: true, message: '请输入公共内容', trigger: 'blur' }
+        // ],
+      },
+
+      quillImgLoading: false, // 富文本上传图片loading
+      editorOption: { // 富文本配置
+        placeholder: '请输入公共内容',
+        theme: 'snow',
+        modules: {
+          toolbar: {
+            container: toolbarOptions,
+            handlers: {
+              'image': function (value) {
+                if (value) {
+                  document.querySelector('.avatar-uploader2 input').click()
+                } else {
+                  this.quill.format('image', false);
+                }
+              }
+            }
+          }
+        }
+      },
+      editorImages: [],
+
+      formLoading: false,
+    }
+  },
+  computed: {
+    sidebar() {
+      return this.$store.state.app.sidebar
+    },
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened
+      }
+    },
+  },
+
+  created() {
+    this.getCommonModuleDetail();
+  },
+
+  methods: {
+    // 获取详情
+    getCommonModuleDetail() {
+      getCommonModuleDetail().then(res => {
+        this.mainForm = {
+          content: res.data.content,
+        }
+      })
+    },
+
+    submitForm() {
+      this.$refs.mainForm.validate((valid) => {
+        if (valid) {
+          this.formLoading = true;
+
+          editCommonModule({
+            content: this.mainForm.content,
+          }).then(res => {
+            this.formLoading = false;
+            this.$successMsg('编辑成功');
+            setTimeout(()=>{
+              this.goBack();
+            }, 1000)
+          }).catch(err => {
+            this.formLoading = false;
+          })
+
+        }
+      })
+    },
+
+    goBack() {
+      this.$router.go(-1);
+    },
+
+    // 富文本图片上传前
+    beforeUpload4() {
+      this.quillImgLoading = true;
+    },
+
+    // 富文本图片上传成功
+    uploadSuccess4(res, file, fileList) {
+      console.log(fileList);
+      fileList.forEach(item => {
+        if(this.editorImages.indexOf(item.response.data.url) < 0) {
+          this.editorImages.push(item.response.data.url);
+        }
+      })
+      this.showImage()
+      this.quillImgLoading = false;
+    },
+
+    showImage() {
+      console.log(this.editorImages);
+      let quill = this.$refs.myQuillEditor.quill;
+      this.editorImages.forEach(item => {
+        // 获取光标所在位置
+        let length = quill.getSelection().index;
+        // 插入图片  res.info为服务器返回的图片地址
+        console.log(item);
+        quill.insertEmbed(length, 'image', item);
+        // this.$refs.imageListUpload.clearFiles()
+        // 调整光标到最后
+        quill.setSelection(length + 1);
+      })
+      this.editorImages = [];
+      this.$refs.imageListUpload.clearFiles();
+    },
+
+    // 富文本图片上传失败
+    uploadError4() {
+      this.quillImgLoading = false;
+      this.$errorMsg('图片插入失败');
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .title {
+    font-size: 16px;
+    color: #333333;
+    margin-bottom: 20px;
+    span {
+      font-size: 14px;
+      color: #999999;
+      margin-left: 10px;
+    }
+  }
+</style>

src/views/mallManagement/goods/explain_index/index.vue

@@ -80,7 +80,7 @@ export default {
     // 编辑公共模块
     editCommonModule() {
       this.$router.push({
-        path: '/goods/explain_common',
+        name:"explain_common",
         query: {}
       })
     },
@@ -89,12 +89,12 @@ export default {
     addOrEdit(type, id) {
       if(type == 'add') {
         this.$router.push({
-          path: '/goods/explain_add',
+          name:"explain_add",
           query: {}
         })
       }else {
         this.$router.push({
-          path: '/goods/explain_add',
+          name:"explain_add",
           query: {
             id
           }

src/views/mallManagement/goods/goods_index/goods_add/index.vue → src/views/mallManagement/goods/goods_add/index.vue

@@ -3,9 +3,9 @@
 
     <div class="step-container">
       <el-steps :active="step" simple style="margin-top: 20px">
-        <el-step title="1.编辑基础信息" ></el-step>
-        <el-step title="2.编辑价格库存" ></el-step>
-        <el-step title="3.编辑商品详情" ></el-step>
+        <el-step title="1.编辑基础信息"></el-step>
+        <el-step title="2.编辑价格库存"></el-step>
+        <el-step title="3.编辑商品详情"></el-step>
       </el-steps>
     </div>
 
@@ -17,17 +17,12 @@
           <el-input v-model="step1Form.goodsName" placeholder="请输入商品名称" maxlength="200" show-word-limit></el-input>
         </el-form-item>
         <el-form-item label="商品描述：" prop="goodsDes">
-          <el-input v-model="step1Form.goodsDes" type="textarea" placeholder="请输入商品描述" :autosize="{ minRows: 3, maxRows: 6}" maxlength="100" show-word-limit></el-input>
+          <el-input v-model="step1Form.goodsDes" type="textarea" placeholder="请输入商品描述"
+            :autosize="{ minRows: 3, maxRows: 6 }" maxlength="100" show-word-limit></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">
+          <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="step1Form.imgUrl" :src="step1Form.imgUrl" class="avatar">
             <i v-else class="el-icon-plus avatar-uploader-icon"></i>
           </el-upload>
@@ -36,18 +31,9 @@
           </div>
         </el-form-item>
         <el-form-item label="轮播图：" prop="images">
-          <el-upload
-            multiple
-            :limit="6"
-            ref="imageListUpload2"
-            class="avatar-uploader2 imageListUpload2"
-            style="height: 0;"
-            :action="baseURL + 'common/upload'"
-            :headers="myHeaders"
-            name="file"
-            :show-file-list="false"
-            :on-success="uploadSuccess2"
-            :on-exceed="uploadExceed2"
+          <el-upload multiple :limit="6" ref="imageListUpload2" class="avatar-uploader2 imageListUpload2"
+            style="height: 0;" :action="baseURL + 'common/upload'" :headers="myHeaders" name="file"
+            :show-file-list="false" :on-success="uploadSuccess2" :on-exceed="uploadExceed2"
             :before-upload="beforeUpload2">
           </el-upload>
           <div class="images">
@@ -78,14 +64,8 @@
         </el-form-item>
 
         <el-form-item label="商品视频：" prop="videoUrl">
-          <el-upload
-            class="avatar-uploader"
-            style="height:122px"
-            :action="baseURL + 'common/upload'"
-            :headers="myHeaders"
-            :show-file-list="false"
-            :on-success="uploadSuccess3"
-            :before-upload="beforeUpload3">
+          <el-upload class="avatar-uploader" style="height:122px" :action="baseURL + 'common/upload'" :headers="myHeaders"
+            :show-file-list="false" :on-success="uploadSuccess3" :before-upload="beforeUpload3">
             <!-- <img v-if="step1Form.videoUrl" :src="step1Form.videoUrl" class="avatar"> -->
             <video v-if="step1Form.videoUrl" :src="step1Form.videoUrl" height="120" style="display: block;"></video>
             <i v-else class="el-icon-plus avatar-uploader-icon"></i>
@@ -123,25 +103,15 @@
         </el-form-item> -->
 
         <el-form-item label="商品分类：" prop="classify">
-          <el-cascader
-            placeholder="请选择商品分类"
-            :options="classifyList"
-            :props="{ value: 'categoryId', label:'name' }"
-            v-model="step1Form.classify"
-            style="width: 300px"
-            @change="changeClassify()"
-            filterable
-            clearable>
+          <el-cascader placeholder="请选择商品分类" :options="classifyList" :props="{ value: 'categoryId', label: 'name' }"
+            v-model="step1Form.classify" style="width: 300px" @change="changeClassify()" filterable clearable>
           </el-cascader>
         </el-form-item>
 
         <el-form-item label="营销活动：" prop="marketing">
-          <el-select v-model="step1Form.marketing" placeholder="请选择营销活动" style="width: 300px" clearable :disabled="!step1Form.classify">
-            <el-option
-              v-for="item in marketingList"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id">
+          <el-select v-model="step1Form.marketing" placeholder="请选择营销活动" style="width: 300px" clearable
+            :disabled="!step1Form.classify">
+            <el-option v-for="item in marketingList" :key="item.id" :label="item.name" :value="item.id">
             </el-option>
           </el-select>
         </el-form-item>
@@ -183,7 +153,8 @@
                 </el-col>
                 <el-col :xs="24" :sm="12" :lg="6">
                   <el-form-item label="规格值" prop="specValue">
-                    <el-input v-model="specForm.specValue" placeholder="请输入规格值" :disabled="!step2Form.specType"></el-input>
+                    <el-input v-model="specForm.specValue" placeholder="请输入规格值"
+                      :disabled="!step2Form.specType"></el-input>
                   </el-form-item>
                 </el-col>
                 <el-col :xs="24" :sm="12" :lg="6">
@@ -229,13 +200,8 @@
 
                 <el-col :xs="24" :sm="24" :lg="24">
                   <el-form-item label="规格图片" prop="imgUrl">
-                    <el-upload
-                      class="avatar-uploader"
-                      :action="baseURL + 'common/upload'"
-                      :headers="myHeaders"
-                      :show-file-list="false"
-                      :on-success="uploadSuccess5"
-                      :before-upload="beforeUpload5">
+                    <el-upload class="avatar-uploader" :action="baseURL + 'common/upload'" :headers="myHeaders"
+                      :show-file-list="false" :on-success="uploadSuccess5" :before-upload="beforeUpload5">
                       <img v-if="specForm.imgUrl" :src="specForm.imgUrl" class="avatar">
                       <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                     </el-upload>
@@ -244,18 +210,14 @@
               </el-row>
             </el-form>
           </div>
-          <div class="addBtn"><el-button type="primary" size="small" @click="addSpec" v-show="step2Form.specType">添加规格</el-button></div>
+          <div class="addBtn"><el-button type="primary" size="small" @click="addSpec"
+              v-show="step2Form.specType">添加规格</el-button></div>
 
-          <el-upload
-            class="editSpecimage-uploader"
-            style="height: 0;"
-            :action="baseURL + 'common/upload'"
-            :headers="myHeaders"
-            :show-file-list="false"
-            :on-success="uploadSuccess6"
-            :before-upload="beforeUpload5">
+          <el-upload class="editSpecimage-uploader" style="height: 0;" :action="baseURL + 'common/upload'"
+            :headers="myHeaders" :show-file-list="false" :on-success="uploadSuccess6" :before-upload="beforeUpload5">
           </el-upload>
-          <el-table :data="specList" element-loading-text="Loading" border fit highlight-current-row stripe style="margin-bottom: 20px" v-show="step2Form.specType">
+          <el-table :data="specList" element-loading-text="Loading" border fit highlight-current-row stripe
+            style="margin-bottom: 20px" v-show="step2Form.specType">
             <el-table-column align="center" label="规格名称" prop="name" min-width="120">
               <template slot-scope="scope">
                 <el-input v-model="scope.row.name"></el-input>
@@ -268,7 +230,8 @@
             </el-table-column>
             <el-table-column align="center" label="规格图片" prop="imgUrl">
               <template slot-scope="scope">
-                <el-image style="width: 40px; height: 40px; cursor: pointer;" :src="scope.row.imgUrl" fit="cover" @click="editSpecImage(scope.$index)"></el-image>
+                <el-image style="width: 40px; height: 40px; cursor: pointer;" :src="scope.row.imgUrl" fit="cover"
+                  @click="editSpecImage(scope.$index)"></el-image>
               </template>
             </el-table-column>
             <el-table-column align="center" label="成本价" prop="costPrice" min-width="120">
@@ -315,7 +278,7 @@
             <el-table-column align="center" label="操作">
               <template slot-scope="scope">
                 <!-- <el-button type="text" @click="editExam('theory', scope.row.index)">编辑</el-button> -->
-                <el-popconfirm title="确定删除吗？" @onConfirm="deleteSpec(scope.row.index)" >
+                <el-popconfirm title="确定删除吗？" @onConfirm="deleteSpec(scope.row.index)">
                   <el-button slot="reference" type="text">删除</el-button>
                 </el-popconfirm>
               </template>
@@ -360,7 +323,8 @@
         </el-form-item> -->
         <el-form-item label="运费模版：" prop="freight">
           <el-select v-model="step2Form.freight" filterable placeholder="请选择运费模版" style="width: 300px">
-            <el-option v-for="item in freightList" :key="item.freightTemplateId" :label="item.name" :value="item.freightTemplateId">
+            <el-option v-for="item in freightList" :key="item.freightTemplateId" :label="item.name"
+              :value="item.freightTemplateId">
             </el-option>
           </el-select>
         </el-form-item>
@@ -378,29 +342,19 @@
       <el-form ref="step3Form" :model="step3Form" :rules="step3FormRules" label-width="80px" label-position="top">
         <el-form-item label="说明模块" prop="moduleId">
           <el-select v-model="step3Form.moduleId" filterable placeholder="请选择说明模块" style="width: 300px">
-            <el-option v-for="item in moduleList" :key="item.commonTemplateId" :label="item.name" :value="item.commonTemplateId">
+            <el-option v-for="item in moduleList" :key="item.commonTemplateId" :label="item.name"
+              :value="item.commonTemplateId">
             </el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="详情内容" prop="detailContent">
-          <el-upload
-            ref="imageListUpload"
-            class="avatar-uploader2 imageListUpload"
-            :action="baseURL + 'common/upload'"
-            :headers="myHeaders"
-            multiple
-            name="file"
-            :show-file-list="false"
-            :on-success="uploadSuccess4"
-            :on-error="uploadError4"
-            :before-upload="beforeUpload4">
+          <el-upload ref="imageListUpload" class="avatar-uploader2 imageListUpload" :action="baseURL + 'common/upload'"
+            :headers="myHeaders" multiple name="file" :show-file-list="false" :on-success="uploadSuccess4"
+            :on-error="uploadError4" :before-upload="beforeUpload4">
           </el-upload>
           <!--富文本编辑器组件-->
           <el-row v-loading="quillImgLoading">
-            <quill-editor
-              v-model="step3Form.detailContent"
-              ref="myQuillEditor"
-              :options="editorOption">
+            <quill-editor v-model="step3Form.detailContent" ref="myQuillEditor" :options="editorOption">
             </quill-editor>
           </el-row>
         </el-form-item>
@@ -412,12 +366,9 @@
       <div class="footer" :class="classObj">
         <el-button @click="changeStep(0)" v-show="step > 0">上一步</el-button>
         <el-button @click="changeStep(1)" v-show="step < 2">下一步</el-button>
-        <el-button type="primary" @click="clickSubmitForm" :loading="formLoading">{{ formLoading ? '提交中 ...' : '提 交' }}</el-button>
-        <el-popconfirm
-          title="确定关闭吗？"
-          @onConfirm="goBack"
-          style="margin-left: 10px;"
-        >
+        <el-button type="primary" @click="clickSubmitForm" :loading="formLoading">{{ formLoading ? '提交中 ...' : '提 交'
+        }}</el-button>
+        <el-popconfirm title="确定关闭吗？" @onConfirm="goBack" style="margin-left: 10px;">
           <el-button slot="reference">关 闭</el-button>
         </el-popconfirm>
       </div>
@@ -438,16 +389,16 @@ import 'quill/dist/quill.bubble.css'
 const toolbarOptions = [
   ['bold', 'italic', 'underline', 'strike'],
   ['blockquote', 'code-block'],
-  [{'header': 1}, {'header': 2}],
-  [{'list': 'ordered'}, {'list': 'bullet'}],
-  [{'script': 'sub'}, {'script': 'super'}],
-  [{'indent': '-1'}, {'indent': '+1'}],
-  [{'direction': 'rtl'}],
-  [{'size': ['small', false, 'large', 'huge']}],
-  [{'header': [1, 2, 3, 4, 5, 6, false]}],
-  [{'color': []}, {'background': []}],
-  [{'font': []}],
-  [{'align': []}],
+  [{ 'header': 1 }, { 'header': 2 }],
+  [{ 'list': 'ordered' }, { 'list': 'bullet' }],
+  [{ 'script': 'sub' }, { 'script': 'super' }],
+  [{ 'indent': '-1' }, { 'indent': '+1' }],
+  [{ 'direction': 'rtl' }],
+  [{ 'size': ['small', false, 'large', 'huge'] }],
+  [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
+  [{ 'color': [] }, { 'background': [] }],
+  [{ 'font': [] }],
+  [{ 'align': [] }],
   ['link', 'image', 'video'],
   // ['clean']
 ]
@@ -459,7 +410,7 @@ export default {
   data() {
     return {
       baseURL: process.env.VUE_APP_BASE_API,
-      myHeaders: {'x-token': getToken()},
+      myHeaders: { 'x-token': getToken() },
       isEdit: false,
       editId: '',
 
@@ -592,18 +543,18 @@ export default {
     },
   },
   watch: {
-    'specForm.costPrice': function(){
-      if(this.canCompute) {
+    'specForm.costPrice': function () {
+      if (this.canCompute) {
         this.computeShareAmount();
       }
     },
-    'specForm.price': function(){
+    'specForm.price': function () {
       this.changeGoodsPrice();
-      if(this.canCompute) {
+      if (this.canCompute) {
         this.computeShareAmount();
       }
     },
-    specList: function() {
+    specList: function () {
       this.changeGoodsPrice();
     },
   },
@@ -619,10 +570,10 @@ export default {
     this.getFreightList();
     this.getModuleList();
 
-    if(this.isEdit) {
+    if (this.isEdit) {
       this.canCompute = false;
       this.getGoodsDetail(id);
-    }else {
+    } else {
       this.canCompute = true;
       this.canChangeGoodsPrice = true;
     }
@@ -651,9 +602,9 @@ export default {
       this.classifyList.forEach(item => {
         classifyList = classifyList.concat(item.children);
       })
-      if(typeof this.step1Form.classify == 'string') {
+      if (typeof this.step1Form.classify == 'string') {
         categoryId = this.step1Form.classify;
-      }else {
+      } else {
         categoryId = this.step1Form.classify[1];
       }
       let type = classifyList[this.$findElem(classifyList, 'categoryId', categoryId)].workOrderType;
@@ -715,7 +666,7 @@ export default {
 
     // 获取详情
     getGoodsDetail(goodsId) {
-      getGoodsDetail({goodsId}).then(res => {
+      getGoodsDetail({ goodsId }).then(res => {
         let data = res.data;
         this.step1Form = {
           goodsName: data.goodsName,
@@ -744,10 +695,10 @@ export default {
           status: data.status,
         }
 
-        if(data.hasSpec) {
+        if (data.hasSpec) {
           this.specList = data.goodsSpecs;
           this.specList = this.listAddIndex(this.specList);
-        }else {
+        } else {
           this.specForm = {
             goodsSpecId: data.goodsSpecs[0].goodsSpecId,
             name: data.goodsSpecs[0].name,
@@ -780,10 +731,10 @@ export default {
 
     // 切换步骤
     changeStep(type) {
-      if(type == 1) {
-        this.step ++;
-      }else {
-        this.step --;
+      if (type == 1) {
+        this.step++;
+      } else {
+        this.step--;
       }
     },
 
@@ -802,15 +753,15 @@ export default {
 
     // 切换规格类型
     changeSpecType() {
-      if(this.specList.length > 0 && !this.step2Form.specType && this.specList[0].name != '默认') {
+      if (this.specList.length > 0 && !this.step2Form.specType && this.specList[0].name != '默认') {
         this.$errorMsg('请先删除规格');
         this.step2Form.specType = true;
         return false;
       }
-      if(!this.step2Form.specType) {
+      if (!this.step2Form.specType) {
         this.specForm.name = '默认';
         this.specForm.specValue = '默认';
-      }else {
+      } else {
         this.specForm.name = '';
         this.specForm.specValue = '';
       }
@@ -818,29 +769,29 @@ export default {
 
     // 添加规格
     addSpec() {
-      if(!this.specForm.name) {
+      if (!this.specForm.name) {
         return this.$errorMsg('请填写规格名称');
-      } else if(!this.specForm.specValue) {
+      } else if (!this.specForm.specValue) {
         return this.$errorMsg('请填写规格值');
-      } else if(!this.specForm.costPrice) {
+      } else if (!this.specForm.costPrice) {
         return this.$errorMsg('请填写成本价');
-      } else if(!this.specForm.price) {
+      } else if (!this.specForm.price) {
         return this.$errorMsg('请填写销售价');
-      } else if(this.specForm.shareAmount === '') {
+      } else if (this.specForm.shareAmount === '') {
         return this.$errorMsg('请填写佣金');
-      } else if(this.specForm.shareAmount / this.specForm.price > 0.4) {
+      } else if (this.specForm.shareAmount / this.specForm.price > 0.4) {
         return this.$errorMsg('佣金不能超过销售价的40%');
-      } else if(this.specForm.innerShareAmount === '') {
+      } else if (this.specForm.innerShareAmount === '') {
         return this.$errorMsg('请填写内部佣金');
-      } else if(this.specForm.innerShareAmount / this.specForm.price > 0.4) {
+      } else if (this.specForm.innerShareAmount / this.specForm.price > 0.4) {
         return this.$errorMsg('内部佣金不能超过销售价的40%');
-      } else if(this.specForm.sharePercent === '') {
+      } else if (this.specForm.sharePercent === '') {
         return this.$errorMsg('请填写佣金比例');
-      } else if(Number(this.specForm.sharePercent) < 0 || Number(this.specForm.sharePercent) > 40) {
+      } else if (Number(this.specForm.sharePercent) < 0 || Number(this.specForm.sharePercent) > 40) {
         return this.$errorMsg('佣金比例范围0-40');
-      } else if(!this.specForm.stockNum) {
+      } else if (!this.specForm.stockNum) {
         return this.$errorMsg('请填写库存');
-      } else if(!this.specForm.imgUrl) {
+      } else if (!this.specForm.imgUrl) {
         return this.$errorMsg('请上传规格图片');
       }
       let item = JSON.parse(JSON.stringify(this.specForm));
@@ -870,15 +821,15 @@ export default {
               this.$refs.step3Form.validate((valid) => {
                 if (valid) {
                   this.submitForm();
-                }else {
+                } else {
                   this.step = 2;
                 }
               })
-            }else {
+            } else {
               this.step = 1;
             }
           })
-        }else {
+        } else {
           this.step = 0;
         }
       })
@@ -888,47 +839,47 @@ export default {
     submitForm() {
       this.formLoading = true;
 
-      if(!this.step2Form.specType) {
-        if(!this.specForm.name) {
+      if (!this.step2Form.specType) {
+        if (!this.specForm.name) {
           this.formLoading = false;
           return this.$errorMsg('请填写规格名称');
-        } else if(!this.specForm.specValue) {
+        } else if (!this.specForm.specValue) {
           this.formLoading = false;
           return this.$errorMsg('请填写规格值');
-        } else if(!this.specForm.costPrice) {
+        } else if (!this.specForm.costPrice) {
           this.formLoading = false;
           return this.$errorMsg('请填写成本价');
-        } else if(!this.specForm.price) {
+        } else if (!this.specForm.price) {
           this.formLoading = false;
           return this.$errorMsg('请填写销售价');
-        } else if(this.specForm.shareAmount === '') {
+        } else if (this.specForm.shareAmount === '') {
           this.formLoading = false;
           return this.$errorMsg('请填写佣金');
-        } else if(this.specForm.sharePercent === '') {
+        } else if (this.specForm.sharePercent === '') {
           this.formLoading = false;
           return this.$errorMsg('请填写佣金比例');
-        } else if(this.specForm.shareAmount / this.specForm.price > 0.4) {
+        } else if (this.specForm.shareAmount / this.specForm.price > 0.4) {
           this.formLoading = false;
           return this.$errorMsg('佣金不能超过销售价的40%');
-        } else if(Number(this.specForm.sharePercent) < 0 || Number(this.specForm.sharePercent) > 40) {
+        } else if (Number(this.specForm.sharePercent) < 0 || Number(this.specForm.sharePercent) > 40) {
           this.formLoading = false;
           return this.$errorMsg('佣金比例范围0-40');
-        } else if(this.specForm.innerShareAmount === '') {
+        } else if (this.specForm.innerShareAmount === '') {
           this.formLoading = false;
           return this.$errorMsg('请填写内部佣金');
-        } else if(this.specForm.innerSharePercent === '') {
+        } else if (this.specForm.innerSharePercent === '') {
           this.formLoading = false;
           return this.$errorMsg('请填写内部佣金比例');
-        } else if(this.specForm.innerShareAmount / this.specForm.price > 0.4) {
+        } else if (this.specForm.innerShareAmount / this.specForm.price > 0.4) {
           this.formLoading = false;
           return this.$errorMsg('内部佣金不能超过销售价的40%');
-        } else if(Number(this.specForm.innerSharePercent) < 0 || Number(this.specForm.innerSharePercent) > 40) {
+        } else if (Number(this.specForm.innerSharePercent) < 0 || Number(this.specForm.innerSharePercent) > 40) {
           this.formLoading = false;
           return this.$errorMsg('内部佣金比例范围0-40');
-        } else if(!this.specForm.stockNum) {
+        } else if (!this.specForm.stockNum) {
           this.formLoading = false;
           return this.$errorMsg('请填写库存');
-        } else if(!this.specForm.imgUrl) {
+        } else if (!this.specForm.imgUrl) {
           this.formLoading = false;
           return this.$errorMsg('请上传规格图片');
         }
@@ -936,25 +887,25 @@ export default {
         this.specList.push(item);
         this.specList = this.listAddIndex(this.specList);
         console.log(this.specList);
-      }else {
+      } else {
         let specList = this.specList;
-        for(let i=0; i<specList.length; i++) {
-          if(specList[i].shareAmount / specList[i].price > 0.4) {
+        for (let i = 0; i < specList.length; i++) {
+          if (specList[i].shareAmount / specList[i].price > 0.4) {
             this.formLoading = false;
             this.$errorMsg('单个规格的佣金不能超过销售价的40%');
             return;
           }
-          if(Number(specList[i].sharePercent) < 0 || Number(specList[i].sharePercent) > 40) {
+          if (Number(specList[i].sharePercent) < 0 || Number(specList[i].sharePercent) > 40) {
             this.formLoading = false;
             this.$errorMsg('单个规格的佣金比例范围在0-40');
             return;
           }
-          if(specList[i].innerShareAmount / specList[i].price > 0.4) {
+          if (specList[i].innerShareAmount / specList[i].price > 0.4) {
             this.formLoading = false;
             this.$errorMsg('单个规格的佣金不能超过销售价的40%');
             return;
           }
-          if(Number(specList[i].innerSharePercent) < 0 || Number(specList[i].innerSharePercent) > 40) {
+          if (Number(specList[i].innerSharePercent) < 0 || Number(specList[i].innerSharePercent) > 40) {
             this.formLoading = false;
             this.$errorMsg('单个规格的佣金比例范围在0-40');
             return;
@@ -963,21 +914,21 @@ export default {
       }
 
       let images = [];
-      for(let i=0; i<this.step1Form.images.length; i++) {
+      for (let i = 0; i < this.step1Form.images.length; i++) {
         let obj = {};
         obj.id = this.step1Form.images[i].id;
         images.push(obj);
       }
 
       let categoryId = '';
-      if(typeof this.step1Form.classify == 'string') {
+      if (typeof this.step1Form.classify == 'string') {
         categoryId = this.step1Form.classify;
-      }else {
+      } else {
         categoryId = this.step1Form.classify[1];
       }
 
       let marketingName = '';
-      if(this.step1Form.marketing) {
+      if (this.step1Form.marketing) {
         marketingName = this.marketingList[this.$findElem(this.marketingList, 'id', this.step1Form.marketing)].name;
       }
 
@@ -1011,13 +962,13 @@ export default {
       }
       console.log(params);
 
-      if(this.isEdit) {
+      if (this.isEdit) {
         params.goodsId = this.editId;
         editGoods(params).then(res => {
           this.formLoading = false;
           // this.$refs.mainForm.resetFields();
           this.$successMsg('编辑成功');
-          setTimeout(()=>{
+          setTimeout(() => {
             this.goBack();
           }, 1000)
         }).catch(err => {
@@ -1028,7 +979,7 @@ export default {
           this.formLoading = false;
           // this.$refs.mainForm.resetFields();
           this.$successMsg('新增成功');
-          setTimeout(()=>{
+          setTimeout(() => {
             this.goBack();
           }, 1000)
         }).catch(err => {
@@ -1111,7 +1062,7 @@ export default {
     uploadSuccess4(res, file, fileList) {
       console.log(fileList);
       fileList.forEach(item => {
-        if(this.editorImages.indexOf(item.response.data.url) < 0) {
+        if (this.editorImages.indexOf(item.response.data.url) < 0) {
           this.editorImages.push(item.response.data.url);
         }
       })
@@ -1144,25 +1095,25 @@ export default {
     },
 
     changeGoodsPrice() {
-      if(!this.canChangeGoodsPrice) { return false };
-      if(!this.step2Form.specType) {
+      if (!this.canChangeGoodsPrice) { return false };
+      if (!this.step2Form.specType) {
         this.step2Form.price = this.specForm.price;
         // this.$set(this.step2Form, 'price', this.specForm.price);
-      }else {
-        if(this.specList.length > 0) {
+      } else {
+        if (this.specList.length > 0) {
           let allPrice = [];
           this.specList.forEach(item => {
             allPrice.push(item.price);
           })
           this.step2Form.price = Math.min(...allPrice);
-        }else {
+        } else {
           this.step2Form.price = '';
         }
       }
     },
 
     computeShareAmount() {
-      this.specForm.shareAmount = (this.specForm.price*100 - this.specForm.costPrice*100) / 100;
+      this.specForm.shareAmount = (this.specForm.price * 100 - this.specForm.costPrice * 100) / 100;
     },
 
     // 轮播图 - 点击上传图片
@@ -1173,11 +1124,11 @@ export default {
 
     // 轮播图 - 上传成功
     uploadSuccess2(res, file) {
-      if(this.uploadImageId) {
+      if (this.uploadImageId) {
         let index = this.$findElem(this.step1Form.images, 'id', this.uploadImageId);
         this.$set(this.step1Form.images, index, res.data);
-      }else {
-        if(this.step1Form.images.length >= 6) {
+      } else {
+        if (this.step1Form.images.length >= 6) {
           return this.$errorMsg('最多上传6张轮播图');
         }
         this.step1Form.images.push(res.data);
@@ -1206,26 +1157,26 @@ export default {
 
     // 轮播图 - 向前移动
     moveForward(index) {
-      if(index != 0) {
+      if (index != 0) {
         let arr = this.step1Form.images;
         let thisItem = arr[index];
         let targetItem = arr[index - 1];
         this.$set(this.step1Form.images, index, targetItem);
         this.$set(this.step1Form.images, index - 1, thisItem);
-      }else {
+      } else {
         this.$errorMsg('已经最前，无法前移');
       }
     },
 
     // 轮播图 - 向后移动
     moveBack(index) {
-      if(index+1 < this.step1Form.images.length) {
+      if (index + 1 < this.step1Form.images.length) {
         let arr = this.step1Form.images;
         let thisItem = arr[index];
         let targetItem = arr[index + 1];
         this.$set(this.step1Form.images, index, targetItem);
         this.$set(this.step1Form.images, index + 1, thisItem);
-      }else {
+      } else {
         this.$errorMsg('已经最后，无法后移');
       }
     },
@@ -1248,170 +1199,196 @@ export default {
 </script>
 
 <style scoped lang="scss">
-  .step-container {
-    padding: 0 10%;
+.step-container {
+  padding: 0 10%;
+}
+
+.form-container {
+  margin-top: 40px;
+  padding: 0 10%;
+
+  .title {
+    font-size: 16px;
+    margin-bottom: 30px;
+    padding-left: 10px;
+    font-weight: bold;
+  }
+
+  .tips {
+    margin-top: 10px;
+
+    span {
+      display: inline-block;
+      width: 300px;
+      text-align: center;
+      line-height: 32px;
+      background: #ffefef;
+      font-size: 14px;
+      color: #f66460;
+    }
+  }
+
+  .tips2 {
+    font-size: 12px;
+    color: #999999;
+    line-height: 30px;
+  }
+
+  .container {
+    padding: 10px 20px 0;
+    background: #f5f5f5;
+    border-radius: 10px;
+  }
+
+  .addBtn {
+    padding: 10px 0;
   }
+}
+
+@media only screen and (max-width: 1200px) {
   .form-container {
-    margin-top: 40px;
     padding: 0 10%;
-    .title {
-      font-size: 16px;
-      margin-bottom: 30px;
-      padding-left: 10px;
-      font-weight: bold;
-    }
-    .tips {
-      margin-top: 10px;
-      span {
-        display: inline-block;
-        width: 300px;
-        text-align: center;
-        line-height: 32px;
-        background: #ffefef;
-        font-size: 14px;
-        color: #f66460;
-      }
-    }
-    .tips2 {
-      font-size: 12px;
-      color: #999999;
-      line-height: 30px;
-    }
-    .container {
-      padding: 10px 20px 0;
-      background: #f5f5f5;
-      border-radius: 10px;
-    }
-    .addBtn {
-      padding: 10px 0;
-    }
   }
-  @media only screen and (max-width: 1200px) {
-    .form-container {
-      padding: 0 10%;
-    }
+}
+
+@media only screen and (max-width: 768px) {
+  .step-container {
+    padding: 0;
   }
-  @media only screen and (max-width: 768px) {
-    .step-container {
-      padding: 0;
-    }
-    .form-container {
-      padding: 0 5%;
-    }
+
+  .form-container {
+    padding: 0 5%;
   }
+}
 </style>
 
 <style lang="scss">
-  // 图片墙
-  .el-upload-list--picture-card .el-upload-list__item {
-    width: 100px;
-    height: 100px;
-  }
-  .el-upload--picture-card {
+// 图片墙
+.el-upload-list--picture-card .el-upload-list__item {
+  width: 100px;
+  height: 100px;
+}
+
+.el-upload--picture-card {
+  width: 100px;
+  height: 100px;
+  line-height: 100px;
+
+  .avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
     width: 100px;
     height: 100px;
     line-height: 100px;
-    .avatar-uploader-icon {
-      font-size: 28px;
-      color: #8c939d;
-      width: 100px;
-      height: 100px;
-      line-height: 100px;
-      text-align: center;
-    }
+    text-align: center;
   }
+}
 
-  .el-input.small input {
-    width: 300px;
-  }
+.el-input.small input {
+  width: 300px;
+}
 
-  .avatar-uploader2 {
-    height: 0;
-  }
+.avatar-uploader2 {
+  height: 0;
+}
 
-  .container {
-    .el-form-item__label {
-      padding-bottom: 0;
-    }
-    .el-form-item {
-      margin-bottom: 5px;
-    }
+.container {
+  .el-form-item__label {
+    padding-bottom: 0;
   }
-  .ql-editor{
-    min-height:300px;
+
+  .el-form-item {
+    margin-bottom: 5px;
   }
+}
+
+.ql-editor {
+  min-height: 300px;
+}
 </style>
 
 <style scoped lang="scss">
-  .images {
+.images {
+  display: flex;
+  flex-wrap: wrap;
+
+  .item {
     display: flex;
-    flex-wrap: wrap;
-    .item {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      width: 120px;
-      margin-right: 20px;
-      margin-bottom: 20px;
-      .img {
-        border: 1px dashed #eaeaea;
-        border-radius: 5px;
-        overflow: hidden;
-        position: relative;
-        .el-image {
-          display: block;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 120px;
+    margin-right: 20px;
+    margin-bottom: 20px;
+
+    .img {
+      border: 1px dashed #eaeaea;
+      border-radius: 5px;
+      overflow: hidden;
+      position: relative;
+
+      .el-image {
+        display: block;
+      }
+
+      .mask {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 120px;
+        height: 120px;
+        background: rgba($color: #000000, $alpha: 0.5);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        opacity: 0;
+
+        &:hover {
+          opacity: 1;
         }
-        .mask {
-          position: absolute;
-          left: 0;
-          top: 0;
-          width: 120px;
-          height: 120px;
-          background: rgba($color: #000000, $alpha: 0.5);
+
+        .row {
           display: flex;
           align-items: center;
           justify-content: center;
-          flex-direction: column;
-          opacity: 0;
-          &:hover {
-            opacity: 1;
-          }
-          .row {
+
+          .it {
             display: flex;
             align-items: center;
             justify-content: center;
-            .it {
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              cursor: pointer;
-              margin: 5px;
-              i {
-                font-size: 20px;
-                color: #ffffff;
-              }
-              span {
-                font-size: 14px;
-                color: #ffffff;
-              }
+            cursor: pointer;
+            margin: 5px;
+
+            i {
+              font-size: 20px;
+              color: #ffffff;
+            }
+
+            span {
+              font-size: 14px;
+              color: #ffffff;
             }
           }
         }
       }
-      .add {
-        border: 1px dashed #eaeaea;
-        border-radius: 5px;
-        cursor: pointer;
-        .avatar-uploader-icon {
-          width: 120px;
-          height: 120px;
-          line-height: 120px;
-        }
-        &:hover {
-          border: 1px dashed #66b1ff;
-        }
+    }
+
+    .add {
+      border: 1px dashed #eaeaea;
+      border-radius: 5px;
+      cursor: pointer;
+
+      .avatar-uploader-icon {
+        width: 120px;
+        height: 120px;
+        line-height: 120px;
+      }
+
+      &:hover {
+        border: 1px dashed #66b1ff;
       }
     }
   }
+}
 </style>

src/views/mallManagement/goods/newclassify_index/index.vue

@@ -216,7 +216,7 @@ export default {
     // 配置
     setUp(item) {
       this.$router.push({
-        path: "/goods/newclassify_set",
+        name: "newclassify_set",
         query: {
           item
         },

src/views/mallManagement/goods/newclassify_set/index.vue

@@ -0,0 +1,681 @@
+<template>
+  <div class="app-container" >
+    <el-page-header @back="goBack" content="分类配置" style="margin-bottom: 20px"></el-page-header>
+    <el-divider></el-divider>
+
+    <div class="form-container">
+      <el-form ref="mainForm" :model="mainForm" :rules="mainFormRules" label-width="90px">
+        <el-form-item :label="'主标题:'" prop="mainTitle">
+          <el-input style="width:250px" disabled v-model="mainForm.mainTitle"></el-input>
+        </el-form-item>
+        <el-form-item :label="'副标题:'" prop="subtitle">
+          <el-input style="width:250px" disabled v-model="mainForm.subtitle"></el-input>
+        </el-form-item>
+        <el-form-item label="商品类别" prop="goodsType">
+          <el-select v-model="mainForm.goodsType" placeholder="请选择商品类别" style="width: 250px" disabled>
+            <el-option label="普通商品" :value="1"></el-option>
+            <el-option label="套购商品" :value="2"></el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+    </div>
+    
+    <div class="btn-group">
+      <el-button size="small" type="primary" @click="addClassify" v-if="mainForm.goodsType === 1">选择分类</el-button>
+      <el-button size="small" type="primary" @click="addGoods">选择商品</el-button>
+    </div>
+  
+    <div class="diy-table" v-if="mainForm.goodsType === 1">
+      <div class="table-head clearfix">
+        <div class="item goods">商品名称</div>
+        <div class="right">
+          <div class="item name">规格</div>
+          <div class="item input">划线价格</div>
+          <div class="item input">销售价</div>
+          <div class="item input">分销金额</div>
+          <div class="item input">佣金比例</div>
+          <div class="item input">内部分销金额</div>
+          <div class="item input">内部佣金比例</div>
+          <div class="item input">库存</div>
+          <div class="item input">销量</div>
+        </div>
+        <div class="blank">操作</div>
+      </div>
+      <div class="goods-item" v-for="(item, index) in goodsList" :key="index">
+        <div class="goods-info" >
+          <img :src="item.imgUrl" alt="" />
+          {{ item.goodsName }}
+        </div>
+        <div class="spec-list">
+          <div class="spec-item" v-for="(it, idx) in item.goodsSpecs" :key="idx">
+            <div class="col name">{{it.name}}-{{it.specValue}}</div>
+            <div class="col input"><el-input disabled type="number" size="small" v-model="it.orgPrice"></el-input></div>
+            <div class="col input"><el-input disabled type="number" size="small" v-model="it.price"></el-input></div>
+            <div class="col input"><el-input disabled type="number" size="small" v-model="it.shareAmount"></el-input></div>
+            <div class="col input"><el-input disabled type="number" size="small" v-model="it.innerSharePercent"></el-input></div>
+            <div class="col input"><el-input disabled type="number" size="small" v-model="it.innerShareAmount"></el-input></div>
+            <div class="col input"><el-input disabled type="number" size="small" v-model="it.innerSharePercent"></el-input></div>
+            <div class="col input"><el-input disabled type="number" size="small" v-model="it.stockNum"></el-input></div>
+            <div class="col input"><el-input disabled type="number" size="small" v-model="it.soldNum"></el-input></div>
+          </div>
+        </div>
+        <div class="operation">
+          <el-button type="text" style="color: #f56c6c" @click="deleteGoods(item.goodsId,index)">删除</el-button>
+        </div>
+      </div>
+      <div class="empty-text" v-if="goodsList.length < 1">暂无数据</div>
+    </div>
+
+    <div v-if="mainForm.goodsType === 2" style="margin-top: 20px">
+      <el-table :data="goodsList" border fit highlight-current-row stripe>
+          <el-table-column align="center" label="商品图片" prop="imgUrl" width="85">
+            <template slot-scope="scope">
+              <el-image style="width: 60px; height: 60px; display: block;" :src="scope.row.imgUrl" :preview-src-list="[scope.row.imgUrl]" fit="cover"></el-image>
+            </template>
+          </el-table-column>
+          <el-table-column align="center" label="商品名称" prop="goodsName" min-width="200"></el-table-column>
+          <el-table-column align="center" label="最低销售价" prop="packageMinAmount" min-width="120" sortable></el-table-column>
+          <el-table-column align="center" label="最低分佣金额" prop="packageMinShareAmount" min-width="130" sortable></el-table-column>
+          <el-table-column align="center" label="库存" prop="stockNum" min-width="110"></el-table-column>
+          <el-table-column align="center" label="销量" prop="soldNum" min-width="110"></el-table-column>
+
+          <el-table-column align="center" label="操作" width="80" fixed="right">
+            <template slot-scope="scope">
+              <el-button type="text" style="color: #f56c6c" @click="deleteGoods(scope.row.goodsId, scope.$index)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+    </div>
+    
+    <div class="page-footer">
+      <div class="footer">
+        <el-button
+          type="primary"
+          @click="submitMainForm"
+          :loading="formLoading"
+          >{{ formLoading ? "提交中 ..." : "提 交" }}</el-button
+        >
+        <el-button @click="goBack">关 闭</el-button>
+      </div>
+    </div>
+
+    <!-- 选择商品 -->
+    <el-dialog title="选择商品" :visible.sync="addGoodsVisible" :show-close="false" width="50%" :close-on-click-modal="false">
+      <div class="dialog-container clearfix">
+        <div class="left fl">
+          <div class="item" @click="changeClassify('')">全部分类</div>
+          <div class="group" v-for="(item, index) in classifyList" :key="index">
+            <div class="item" @click="toggleOpen(index)">
+              <i :class="item.isOpen ? 'el-icon-caret-bottom':'el-icon-caret-right'"></i> {{item.name}}
+            </div>
+            <div class="child" v-if="item.isOpen">
+              <div class="item" v-for="(childItem, childIndex) in item.children" :key="childIndex" @click="changeClassify(childItem.categoryId)">{{childItem.name}}</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="right fl">
+          <div class="search">
+            <el-input placeholder="请输入商品名称进行搜索" v-model="keyword" class="input-with-select" clearable size="small" style="width: 250px">
+              <el-button slot="append" icon="el-icon-search" size="small" @click="getGoodsListByScreen"></el-button>
+            </el-input>
+          </div>
+          <div class="table" style="margin: 10px 0 20px;">
+            <el-table 
+              v-loading="table_listLoading" 
+              :data="table_dataList" 
+              element-loading-text="Loading" 
+              tooltip-effect="dark" 
+              style="width: 100%" 
+              max-height="270"
+              @selection-change="handleChooseGoods">
+              <el-table-column align="center" type="selection" :selectable='checkboxSelect' width="45"></el-table-column>
+              <el-table-column align="center" prop="goodsName" label="商品名称" min-width="200" show-overflow-tooltip></el-table-column>
+              <el-table-column align="center" prop="goodsPrice" label="价格" width="80"></el-table-column>
+              <el-table-column align="center" prop="stockNum" label="库存" width="80"></el-table-column>
+            </el-table>
+          </div>
+          <div class="pagination clearfix">
+            <div class="fr">
+              <el-pagination
+                @current-change="handleTableCurrentChange"
+                :current-page="table_currentPage"
+                :page-size="table_pageSize"
+                background
+                layout="prev, pager, next"
+                :total="table_listTotal">
+              </el-pagination>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitAddGoods">保 存</el-button>
+        <el-button @click="cancelAddGoods">取 消</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 选择分类 -->
+    <el-dialog title="选择分类" :visible.sync="addClassifyVisible" :show-close="false" width="40%" :close-on-click-modal="false">
+      <div class="classify-list">
+        <el-tree
+          :data="classifyList"
+          show-checkbox
+          default-expand-all
+          node-key="categoryId"
+          ref="tree"
+          highlight-current
+          :props="defaultProps">
+        </el-tree>
+      </div>
+      
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitAddClassify">保 存</el-button>
+        <el-button @click="cancelAddClassify">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getactivityGoodsDetail,addActiveGoods,getEnterpriseTemplate, getClassifyList, getGoodsList, getMoreGoodsList } from "@/api/special";
+export default {
+  data() {
+    return {
+      objectId: "", // 小程序模板id
+      type: "", // 类型
+      companyWechatId: "",
+      useTemplate: "",
+      formLoading: false,
+      mainForm: {
+        mainTitle:"", // 主标题
+        subtitle:"", // 副标题
+        goodsType: 1,
+      },
+      mainFormRules: {
+        mainTitle: [
+          { required: true, message: "请输入主标题", trigger: "blur" },
+        ],
+        subtitle: [
+          { required: true, message: "请输入副标题", trigger: "blur" },
+        ],
+        goodsType: [
+          { required: true, message: "请选择商品类别", trigger: "change" },
+        ],
+      },
+      goodsList: [], // 列表数据
+
+      addGoodsVisible: false,
+
+      classifyList: [],
+      classifyCurrent: '',
+      keyword: '',
+      table_dataList: null, // 列表数据
+      table_listLoading: true, // 列表加载loading
+      table_currentPage: 1, // 当前页码
+      table_pageSize: 10, // 每页数量
+      table_listTotal: 0, // 列表总数
+      table_chooseGoods: [], // table中 当前选择商品
+
+      addClassifyVisible: false,
+      defaultProps: {
+        children: 'children',
+        label: 'name'
+      }
+    };
+  },
+  computed: {
+    
+  },
+  created(){
+    const { item } = this.$route.query;
+    this.mainForm.mainTitle = item.mainTitle;
+    this.mainForm.subtitle = item.subTitle;
+    this.mainForm.goodsType = item.type;
+    this.objectId = item.goodsNewsCategoryId
+    
+    this.getEnterpriseTemplate()
+    this.getactivityGoodsDetail()
+  },
+
+  methods: {
+    // 添加活动商品
+    addActiveGoods(params){
+      addActiveGoods(params).then(res=>{
+        if(res.code==200){
+          this.$router.go(-1)
+        }
+      })
+    },
+
+    //获取企业下模板
+    getEnterpriseTemplate(){
+      this.companyWechatId = JSON.parse(
+        localStorage.getItem("greemall_user")
+      ).companyWechatId;
+      this.useTemplate=JSON.parse(
+        localStorage.getItem("greemall_user")
+      ).useTemplate;
+      const parmas={
+        companyId: this.companyWechatId
+      }
+      getEnterpriseTemplate(parmas).then(res=>{
+        console.log('获取企业下模板',res)
+      })
+    },
+
+    // 获取活动商品详情
+    getactivityGoodsDetail() {
+      const params = {
+        objectId: this.objectId, // 小程序模板id
+        type: 1, // 类型: 1=新维度分类，2=首页弹窗，3=活动专区1，4=活动专区2左侧，5=活动专区2右侧，6=专场专区1，7=专场专区2，8=专场专区3，9=专场专区4
+      };
+      getactivityGoodsDetail(params).then((res) => {
+        res.data.activeGoodsList.forEach(item=> {
+          item.imgUrl = item.goods.imgUrl
+        });
+        
+        this.goodsList = res.data.activeGoodsList;
+
+        if(this.mainForm.goodsType === 2) {
+          this.goodsList.forEach((item, index) => {
+            this.$set(this.goodsList, index, {...item, ...item.goods});
+          })
+        }
+      });
+    },
+
+    // 删除商品
+    deleteGoods(item,index){
+      this.goodsList.splice(index,1)
+    },
+
+    // 返回
+    goBack() {
+      this.$router.go(-1);
+    },
+
+    // 获取分类列表
+    getClassifyList(state) {
+      getClassifyList({categoryLevel: 1, status: true}).then(res => {
+        res.data.forEach(item => {
+          item.isOpen = false;
+        });
+        this.classifyList = res.data;
+        this.classifyCurrent = '';
+        if(!state) {
+          this.getGoodsList();
+        }
+      })
+    },
+
+    // 展开/收起 分类
+    toggleOpen(index) {
+      this.classifyList[index].isOpen = !this.classifyList[index].isOpen;
+    },
+
+    // 切换分类
+    changeClassify(cid) {
+      if(this.table_chooseGoods.length > 0) {
+        return this.$errorMsg('当前已选择商品，不可切换分类');
+      }
+      this.classifyCurrent = cid;
+      this.table_currentPage = 1;
+      this.getGoodsList();
+    },
+
+    // 搜索
+    getGoodsListByScreen() {
+      if(this.table_chooseGoods.length > 0) {
+        return this.$errorMsg('当前已选择商品，不可搜索');
+      }
+      this.table_currentPage = 1;
+      this.getGoodsList();
+    },
+
+    // 获取商品列表
+    getGoodsList() {
+      getGoodsList({
+        pageNum: this.table_currentPage,
+        pageSize: this.table_pageSize,
+        keyword: this.keyword,
+        categoryId: this.classifyCurrent,
+        goodsTypes: this.mainForm.goodsType === 1 ? 'COMMON' : 'PACKAGE',
+      }).then(res => {
+        let oldGoodsList = this.goodsList;
+        let newGoodsList = res.data.records;
+        for(let i = 0; i < oldGoodsList.length; i++) {
+          let oldItem = oldGoodsList[i]
+          for(let j = 0; j < newGoodsList.length; j++) {
+            let newItem = newGoodsList[j]
+            if(newItem.goodsId === oldItem.goodsId){
+              newGoodsList[j].selected = true;
+              break;
+            }
+          }
+        }
+        for(let j = 0; j < newGoodsList.length; j++) {
+          let newItem = newGoodsList[j]
+          if(newItem.promotionGroup === true){
+            newGoodsList[j].selected = true;
+          }
+        }
+        this.table_dataList = newGoodsList;
+        this.table_listTotal = res.data.total;
+        this.table_listLoading = false;
+      })
+    },
+
+    // 查询重复值并禁选
+    checkboxSelect (row, rowIndex) {
+      if (row.selected) {
+        return false // 禁用
+      }else{
+        return true // 不禁用
+      }
+    },
+
+    // 更改列表当前页
+    handleTableCurrentChange(val) {
+      if(this.table_chooseGoods.length > 0) {
+        return this.$errorMsg('当前已选择商品，不可切换分页');
+      }
+      this.table_currentPage = val;
+      this.getGoodsList();
+    },
+
+    // table点击选择商品
+    handleChooseGoods(val) {
+      this.table_chooseGoods = val;
+    },
+
+    // 打开 选择商品
+    addGoods() {
+      this.addGoodsVisible = true;
+      this.getClassifyList();
+    },
+
+    // 取消 选择商品
+    cancelAddGoods(){
+      this.addGoodsVisible = false;
+    },
+
+    // 提交 选择商品
+    submitAddGoods() {
+      let oldGoodsList = this.goodsList;
+      let newGoodsList = this.table_chooseGoods;
+      this.goodsList = oldGoodsList.concat(newGoodsList);
+      this.addGoodsVisible = false;
+    },
+
+    // 打开 选择分类
+    addClassify() {
+      this.addClassifyVisible = true;
+      this.getClassifyList(true);
+    },
+
+    // 取消 选择分类
+    cancelAddClassify(){
+      this.addClassifyVisible = false;
+    },
+
+    // 提交 选择分类
+    submitAddClassify() {
+      if(this.$refs.tree.getCheckedNodes().length <= 0) {
+        return this.$errorMsg('请选择分类');
+      }
+      let checkeds = this.$refs.tree.getCheckedNodes();
+      let ids = [];
+      checkeds.forEach(item => {
+        if(item.level === 2) {
+          ids.push(item.categoryId);
+        }
+      })
+      getMoreGoodsList({ categoryIds: ids.join(',')}).then(res => {
+        let oldGoodsList = this.goodsList;
+        let newGoodsList = [];
+        res.data.forEach(item => {
+          if(item.promotionGroup === false) {
+            newGoodsList.push(item);
+          }
+        })
+        let allGoodsList = oldGoodsList.concat(newGoodsList);
+        let showGoodsList = [];
+        let obj = {};
+        for(var i =0; i<allGoodsList.length; i++){
+          if(!obj[allGoodsList[i].goodsId]){
+            showGoodsList.push(allGoodsList[i]);
+            obj[allGoodsList[i].goodsId] = true;
+          }
+        }
+        this.goodsList = showGoodsList;
+        this.addClassifyVisible = false;
+      })
+    },
+
+    // 提交
+    submitMainForm() {
+      this.$refs.mainForm.validate((valid) => {
+        if (valid) {
+          const params = {
+            goodsList: this.goodsList,
+            objectId: this.objectId,
+            type: 1
+          }
+          this.addActiveGoods(params);
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+
+.form-container {
+  margin-top: 40px;
+  // padding: 0 6%;
+  .title {
+    font-size: 16px;
+    margin-bottom: 30px;
+    padding-left: 10px;
+    font-weight: bold;
+  }
+  .tips {
+    margin-top: 10px;
+    span {
+      display: inline-block;
+      width: 300px;
+      text-align: center;
+      line-height: 32px;
+      background: #ffefef;
+      font-size: 14px;
+      color: #f66460;
+    }
+  }
+  .tips2 {
+    font-size: 12px;
+    color: #999999;
+    line-height: 30px;
+  }
+  .container {
+    padding: 10px 20px 0;
+    background: #f5f5f5;
+    border-radius: 10px;
+  }
+  .addBtn {
+    padding: 10px 0;
+  }
+}
+
+
+.diy-table {
+  overflow-x: scroll;
+  border-left: 1px solid #f5f5f5;
+  margin-top: 20px;
+  width: 100%;
+  // margin-left: 77px;
+  // min-width: 1185px;
+  max-width: 100%;
+  .table-head {
+    display: flex;
+    .item {
+      height: 40px;
+      line-height: 40px;
+      float: left;
+      font-weight: 500;
+      font-size: 14px;
+      background: #f5f5f5;
+      text-align: center;
+    }
+    .right {
+      float: left;
+      width: 94%;
+      min-width: 1150px;
+      flex-shrink: 0;
+      height: 40px;
+    }
+    .goods {
+      width: 20%;
+      min-width: 250px;
+    }
+    .name {
+      width: 11.1111%;
+      min-width: 100px;
+    }
+    .input {
+      width: 11.1111%;
+      min-width: 100px;
+    }
+    .opera {
+      width: 11.1111%;
+      min-width: 80px;
+      // text-align: right;
+    }
+    .blank {
+      width: 6%;
+      min-width: 90px;
+      font-weight: 500;
+      font-size: 14px;
+      background: #f5f5f5;
+      text-align: center;
+      line-height: 40px;
+    }
+  }
+  .goods-item {
+    display: flex;
+    align-content: center;
+    .goods-info {
+      flex-shrink: 0;
+      width: 20%;
+      min-width: 250px;
+      padding: 0 10px;
+      display: flex;
+      align-items: center;
+      border-bottom: 1px solid #f5f5f5;
+      border-right: 1px solid #f5f5f5;
+      font-size: 14px;
+      &:last-child {
+        border-bottom: none;
+      }
+      img {
+        width: 40px;
+        height: 40px;
+        margin-right: 10px;
+        flex-shrink: 0;
+      }
+    }
+    .spec-list {
+      width: 94%;
+      min-width: 1150px;
+      border-bottom: 1px solid #f5f5f5;
+      border-right: 1px solid #f5f5f5;
+      &:last-child {
+        border-bottom: none;
+      }
+      .spec-item {
+        display: flex;
+        align-items: center;
+        border-bottom: 1px solid #f5f5f5;
+        &:last-child {
+          border-bottom: none;
+        }
+        .col {
+          flex-shrink: 0;
+          height: 50px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 0 10px;
+          border-right: 1px solid #f5f5f5;
+          &:last-child {
+            border-right: none;
+          }
+        }
+        .name {
+          width: 11.1111%;
+          min-width: 100px;
+          font-size: 14px;
+          text-align: center;
+        }
+        .input {
+          width: 11.1111%;
+          min-width: 100px;
+        }
+        .btn {
+          width: 11.1111%;
+          min-width: 80px;
+        }
+      }
+    }
+    .operation {
+      flex-shrink: 0;
+      width: 6%;
+      min-width: 90px;
+      padding: 0 10px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-bottom: 1px solid #f5f5f5;
+      border-right: 1px solid #f5f5f5;
+    }
+  }
+  .empty-text {
+    line-height: 60px;
+    text-align: center;
+    color: #909399;
+  }
+}
+
+  .dialog-container {
+    .left {
+      width: 140px;
+      height: 350px;
+      overflow-y: scroll;
+      .group {
+        margin-top: 10px;
+      }
+      .child {
+        margin-top: 5px;
+        .item {
+          padding-left: 18px;
+        }
+      }
+      .item {
+        cursor: pointer;
+        line-height: 24px;
+      }
+    }
+    .right {
+      width: calc(100% - 140px);
+      height: 350px;
+      box-sizing: border-box;
+      padding-left: 20px;
+    }
+  }
+
+  ::v-deep .el-form-item__label{
+    margin-left: 0px !important;
+  }
+</style>

src/views/mallManagement/goods/watermark/index.vue

@@ -79,7 +79,7 @@ export default {
     // 编辑公共模块
     editCommonModule() {
       this.$router.push({
-        path: '/goods/explain_common',
+        name:"explain_common",
         query: {}
       })
     },
@@ -88,12 +88,12 @@ export default {
     addOrEdit(type, id) {
       if(type == 'add') {
         this.$router.push({
-          path: '/goods/watermark_add',
+          name:"watermark_add",
           query: {}
         })
       }else {
         this.$router.push({
-          path: '/goods/watermark_add',
+          name:"watermark_add",
           query: {
             id
           }

src/views/mallManagement/goods/watermark_add/index.vue

@@ -0,0 +1,507 @@
+<template>
+  <div class="app-container">
+    <el-form ref="mainForm" :model="mainForm" :rules="mainFormRules" label-width="110px" label-position="right">
+      <el-form-item label="水印名称" prop="name">
+        <el-input v-model="mainForm.name" placeholder="请输入水印名称" style="width: 300px"></el-input>
+      </el-form-item>
+
+      <el-form-item label="水印图片" prop="logoUrl">
+        <el-upload
+          class="avatar-uploader"
+          style="height:122px"
+          :action="baseURL + 'common/upload'"
+          :headers="myHeaders"
+          :show-file-list="false"
+          :on-success="uploadSuccess7"
+          :before-upload="beforeUpload7">
+          <img v-if="mainForm.logoUrl" :src="mainForm.logoUrl" class="avatar">
+          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+        </el-upload>
+      </el-form-item>
+
+      <el-form-item label="水印显示日期" prop="showDate">
+        <el-date-picker
+          v-model="mainForm.showDate"
+          style="width: 300px"
+          type="daterange"
+          value-format="yyyy-MM-dd"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          clearable>
+        </el-date-picker>
+      </el-form-item>
+    </el-form>
+
+    <div class="mymain-container">
+      <div class="btn-group">
+        <el-button size="small" type="primary" @click="addClassify">选择分类</el-button>
+        <el-button size="small" type="primary" @click="addGoods">选择商品</el-button>
+      </div>
+
+      <div class="table">
+        <el-table :data="goodsList" border fit stripe>
+          <el-table-column align="center" label="商品名称" prop="goodsName" min-width="200"></el-table-column>
+          <el-table-column align="center" label="销售价格" prop="goodsPrice" min-width="110">
+            <template slot-scope="scope">
+              ¥{{ scope.row.goodsPrice }}
+            </template>
+          </el-table-column>
+          <el-table-column align="center" label="分销金额" prop="shareAmount" min-width="110">
+            <template slot-scope="scope">
+              ¥{{ scope.row.shareAmount }}
+            </template>
+          </el-table-column>
+          <el-table-column align="center" label="库存" prop="stockNum"></el-table-column>
+          <el-table-column align="center" label="销量" prop="soldNum"></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="center" label="操作" width="100">
+            <template slot-scope="scope">
+              <el-button type="text" @click="deleteGoods(scope.$index)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+
+    <div class="page-footer">
+      <div class="footer" :class="classObj">
+        <el-button type="primary" @click="submitForm" :loading="formLoading">{{ formLoading ? '提交中 ...' : '提 交' }}</el-button>
+        <el-popconfirm
+          title="确定关闭吗？"
+          @onConfirm="goBack"
+          style="margin-left: 10px;"
+        >
+          <el-button slot="reference">关 闭</el-button>
+        </el-popconfirm>
+      </div>
+    </div>
+
+    <!-- 选择商品 -->
+    <el-dialog title="选择商品" :visible.sync="addGoodsVisible" :show-close="false" width="50%" :close-on-click-modal="false">
+      <div class="dialog-container clearfix">
+        <div class="left fl">
+          <div class="item" @click="changeClassify('')">全部分类</div>
+          <div class="group" v-for="(item, index) in classifyList" :key="index">
+            <div class="item" @click="toggleOpen(index)">
+              <i :class="item.isOpen ? 'el-icon-caret-bottom':'el-icon-caret-right'"></i> {{item.name}}
+            </div>
+            <div class="child" v-if="item.isOpen">
+              <div class="item" v-for="(childItem, childIndex) in item.children" :key="childIndex" @click="changeClassify(childItem.categoryId)">{{childItem.name}}</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="right fl">
+          <div class="search">
+            <el-input placeholder="请输入商品名称进行搜索" v-model="keyword" class="input-with-select" clearable size="small" style="width: 250px">
+              <el-button slot="append" icon="el-icon-search" size="small" @click="getGoodsListByScreen"></el-button>
+            </el-input>
+          </div>
+          <div class="table" style="margin: 10px 0 20px;">
+            <el-table 
+              v-loading="table_listLoading" 
+              :data="table_dataList" 
+              element-loading-text="Loading" 
+              tooltip-effect="dark" 
+              style="width: 100%" 
+              max-height="270"
+              @selection-change="handleChooseGoods">
+              <el-table-column align="center" type="selection" :selectable='checkboxSelect' width="45"></el-table-column>
+              <el-table-column align="center" prop="goodsName" label="商品名称" min-width="200" show-overflow-tooltip></el-table-column>
+              <el-table-column align="center" prop="goodsPrice" label="价格" width="80"></el-table-column>
+              <el-table-column align="center" prop="stockNum" label="库存" width="80"></el-table-column>
+            </el-table>
+          </div>
+          <div class="pagination clearfix">
+            <div class="fr">
+              <el-pagination
+                @current-change="handleTableCurrentChange"
+                :current-page="table_currentPage"
+                :page-size="table_pageSize"
+                background
+                layout="prev, pager, next"
+                :total="table_listTotal">
+              </el-pagination>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitAddGoods">保 存</el-button>
+        <el-button @click="cancelAddGoods">取 消</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 选择分类 -->
+    <el-dialog title="选择分类" :visible.sync="addClassifyVisible" :show-close="false" width="40%" :close-on-click-modal="false">
+      <div class="classify-list">
+        <el-tree
+          :data="classifyList"
+          show-checkbox
+          default-expand-all
+          node-key="categoryId"
+          ref="tree"
+          highlight-current
+          :props="defaultProps">
+        </el-tree>
+      </div>
+      
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitAddClassify">保 存</el-button>
+        <el-button @click="cancelAddClassify">取 消</el-button>
+      </div>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+import { getToken } from '@/utils/auth'
+import { getModuleDetail, addModule, editModule, getClassifyList, getGoodsList, getMoreGoodsList } from '@/api/goods'
+
+export default {
+  data() {
+    return {
+      baseURL: process.env.VUE_APP_BASE_API,
+      myHeaders: {'x-token': getToken()},
+      isEdit: false,
+      editId: '',
+
+      mainForm: {
+        name: '',
+        logoUrl: '',
+        showDate: [],
+      },
+      mainFormRules: {
+        name: [
+          { required: true, message: '请输入水印名称', trigger: 'blur' }
+        ],
+        logoUrl: [
+          { required: true, message: '请上传水印图片', trigger: 'blur' }
+        ],
+        showDate: [
+          { required: true, message: '请选择水印显示日期', trigger: 'blur' }
+        ],
+      },
+
+      formLoading: false,
+
+      goodsList: [], // 列表数据
+      addGoodsVisible: false,
+
+      classifyList: [],
+      classifyCurrent: '',
+      keyword: '',
+      table_dataList: null, // 列表数据
+      table_listLoading: true, // 列表加载loading
+      table_currentPage: 1, // 当前页码
+      table_pageSize: 10, // 每页数量
+      table_listTotal: 0, // 列表总数
+      table_chooseGoods: [], // table中 当前选择商品
+
+      addClassifyVisible: false,
+      defaultProps: {
+        children: 'children',
+        label: 'name'
+      }
+    }
+  },
+  computed: {
+    sidebar() {
+      return this.$store.state.app.sidebar
+    },
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened
+      }
+    },
+  },
+
+  created() {
+    const { id } = this.$route.query;
+    this.isEdit = id ? true : false;
+    this.editId = id;
+
+    if(this.isEdit) {
+      this.getModuleDetail(id);
+    }
+  },
+
+  methods: {
+    // 获取详情
+    getModuleDetail(commonTemplateId) {
+      getModuleDetail({commonTemplateId}).then(res => {
+        this.mainForm = {
+          name: res.data.name,
+          content: res.data.content,
+          logoUrl: res.data.logo,
+          showDate: res.data.logoStartTime ? [res.data.logoStartTime.slice(0, 10), res.data.logoEndTime.slice(0, 10)] : [],
+        }
+        this.goodsList = res.data.goodsList
+      })
+    },
+
+    // 获取分类列表
+    getClassifyList() {
+      getClassifyList({categoryLevel: 1, status: true}).then(res => {
+        res.data.forEach(item => {
+          item.isOpen = false;
+        });
+        this.classifyList = res.data;
+        this.classifyCurrent = '';
+        this.getGoodsList();
+      })
+    },
+
+    // 展开/收起 分类
+    toggleOpen(index) {
+      this.classifyList[index].isOpen = !this.classifyList[index].isOpen;
+    },
+
+    // 切换分类
+    changeClassify(cid) {
+      if(this.table_chooseGoods.length > 0) {
+        return this.$errorMsg('当前已选择商品，不可切换分类');
+      }
+      this.classifyCurrent = cid;
+      this.table_currentPage = 1;
+      this.getGoodsList();
+    },
+
+    // 搜索
+    getGoodsListByScreen() {
+      if(this.table_chooseGoods.length > 0) {
+        return this.$errorMsg('当前已选择商品，不可搜索');
+      }
+      this.table_currentPage = 1;
+      this.getGoodsList();
+    },
+
+    // 获取商品列表
+    getGoodsList() {
+      getGoodsList({
+        pageNum: this.table_currentPage,
+        pageSize: this.table_pageSize,
+        keyword: this.keyword,
+        categoryId: this.classifyCurrent,
+      }).then(res => {
+        let oldGoodsList = this.goodsList;
+        let newGoodsList = res.data.records;
+        for(let i = 0; i < oldGoodsList.length; i++) {
+          let oldItem = oldGoodsList[i]
+          for(let j = 0; j < newGoodsList.length; j++) {
+            let newItem = newGoodsList[j]
+            if(newItem.goodsId === oldItem.goodsId){
+              newGoodsList[j].selected = true;
+              break;
+            }
+          }
+        }
+        this.table_dataList = newGoodsList;
+        this.table_listTotal = res.data.total;
+        this.table_listLoading = false;
+      })
+    },
+
+    // 查询重复值并禁选
+    checkboxSelect (row, rowIndex) {
+      if (row.selected) {
+        return false // 禁用
+      }else{
+        return true // 不禁用
+      }
+    },
+
+    // 更改列表当前页
+    handleTableCurrentChange(val) {
+      if(this.table_chooseGoods.length > 0) {
+        return this.$errorMsg('当前已选择商品，不可切换分页');
+      }
+      this.table_currentPage = val;
+      this.getGoodsList();
+    },
+
+    // table点击选择商品
+    handleChooseGoods(val) {
+      this.table_chooseGoods = val;
+    },
+
+    // 打开 选择商品
+    addGoods() {
+      this.addGoodsVisible = true;
+      this.getClassifyList();
+    },
+
+    // 取消 选择商品
+    cancelAddGoods(){
+      this.addGoodsVisible = false;
+    },
+
+    // 提交 选择商品
+    submitAddGoods() {
+      let oldGoodsList = this.goodsList;
+      let newGoodsList = this.table_chooseGoods;
+      this.goodsList = oldGoodsList.concat(newGoodsList);
+      this.addGoodsVisible = false;
+    },
+
+    // 删除商品
+    deleteGoods(index) {
+      this.goodsList.splice(index, 1);
+    },
+
+    // 打开 选择分类
+    addClassify() {
+      this.addClassifyVisible = true;
+      this.getClassifyList();
+    },
+
+    // 取消 选择分类
+    cancelAddClassify(){
+      this.addClassifyVisible = false;
+    },
+
+    // 提交 选择分类
+    submitAddClassify() {
+      if(this.$refs.tree.getCheckedNodes().length <= 0) {
+        return this.$errorMsg('请选择分类');
+      }
+      let checkeds = this.$refs.tree.getCheckedNodes();
+      let ids = [];
+      checkeds.forEach(item => {
+        if(item.level === 2) {
+          ids.push(item.categoryId);
+        }
+      })
+      getMoreGoodsList({ categoryIds: ids.join(',')}).then(res => {
+        let oldGoodsList = this.goodsList;
+        let newGoodsList = res.data;
+        let allGoodsList = oldGoodsList.concat(newGoodsList);
+        let showGoodsList = [];
+        let obj = {};
+        for(var i =0; i<allGoodsList.length; i++){
+            if(!obj[allGoodsList[i].goodsId]){
+              showGoodsList.push(allGoodsList[i]);
+              obj[allGoodsList[i].goodsId] = true;
+            }
+        }
+        this.goodsList = showGoodsList;
+        this.addClassifyVisible = false;
+      })
+    },
+
+    submitForm() {
+      this.$refs.mainForm.validate((valid) => {
+        if (valid) {
+          if(this.goodsList.length <= 0) {
+            return this.$errorMsg('请选择商品');
+          }
+
+          let goodsIds = [];
+          this.goodsList.forEach(item => {
+            goodsIds.push(item.goodsId);
+          })
+
+          this.formLoading = true;
+
+          let params = {
+            type: 2,
+            name: this.mainForm.name,
+            logo: this.mainForm.logoUrl,
+            logoStartTime: this.mainForm.showDate ? this.mainForm.showDate[0] + ' 00:00:00' : '',
+            logoEndTime: this.mainForm.showDate ? this.mainForm.showDate[1] + ' 23:59:59' : '',
+            goodsIds: goodsIds
+          }
+          params = this.$deleteEmptyObj(params);
+
+          if(this.isEdit) {
+            params.commonTemplateId = this.editId;
+            editModule(params).then(res => {
+              this.formLoading = false;
+              this.$successMsg('编辑成功');
+              setTimeout(()=>{
+                this.goBack();
+              }, 1000)
+            }).catch(err => {
+              this.formLoading = false;
+            })
+          } else {
+            addModule(params).then(res => {
+              this.formLoading = false;
+              this.$successMsg('新增成功');
+              setTimeout(()=>{
+                this.goBack();
+              }, 1000)
+            }).catch(err => {
+              this.formLoading = false;
+            })
+          }
+
+        }
+      })
+    },
+
+    goBack() {
+      this.$router.go(-1);
+      // this.$store.dispatch("tagsView/delView", this.$route);
+    },
+
+    // 水印logo - 上传成功
+    uploadSuccess7(res, file) {
+      this.mainForm.logoUrl = res.data.url;
+    },
+
+    // 水印logo - 上传前
+    beforeUpload7(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 lang="scss" scoped>
+  .dialog-container {
+    .left {
+      width: 140px;
+      height: 350px;
+      overflow-y: scroll;
+      .group {
+        margin-top: 10px;
+      }
+      .child {
+        margin-top: 5px;
+        .item {
+          padding-left: 18px;
+        }
+      }
+      .item {
+        cursor: pointer;
+        line-height: 24px;
+      }
+    }
+    .right {
+      width: calc(100% - 140px);
+      height: 350px;
+      box-sizing: border-box;
+      padding-left: 20px;
+    }
+  }
+
+  .classify-list {
+    height: 50vh;
+    overflow-y: scroll;
+  }
+</style>

src/views/mallManagement/order/order_detail/index.vue

@@ -0,0 +1,847 @@
+<template>
+  <div class="app-container">
+    <el-page-header @back="goBack" content="订单详情"></el-page-header>
+    <div class="order-main">
+      <el-row style="padding: 15px 15px 10px">
+        <el-col :span="24">
+          <div class="order-main-title">
+            <span>订单编号：{{ orderDetail.orderId }}</span>
+            <span>下单时间：{{ orderDetail.createTime }}</span>
+            <span>商户：{{ orderDetail.companyWechatName || '无' }}</span>
+            <span>网点：{{ orderDetail.websitName || '无' }}</span>
+            <div class="fr">
+              <el-link type="primary" :underline="false" @click="showDialog('remark')">订单备注</el-link>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+      <div style="width: 100%; padding: 10px 15px 15px 15px">
+        <el-row>
+          <el-col :span="8" style="border-right: 1px solid #e8e8e8;">
+            <div class="order-main-status">
+              <span>{{ orderDetail.orderStatus | ORDER_CURRENT_STATUS_FILTER }}</span>
+            </div>
+            <div class="order-main-opt-btn">
+              <template v-if="orderDetail.orderStatus === 'NOPAY'">
+                <el-popconfirm title="确定收款吗？" @onConfirm="confirmOrder">
+                  <el-button slot="reference" size="small">确认收款</el-button>
+                </el-popconfirm>
+                <el-button size="small" @click="showDialog('price')" style="margin-left: 10px;">修改价格</el-button>
+                <el-popconfirm title="确定取消订单吗？" @onConfirm="cancelOrder" style="margin-left: 10px;">
+                  <el-button slot="reference" size="small" type="danger">取消订单</el-button>
+                </el-popconfirm>
+              </template>
+              <template v-if="orderDetail.orderStatus === 'DFH'">
+                <el-button size="small" type="primary" @click="showDialog('send')">发货</el-button>
+                <el-popconfirm title="确定取消订单吗？" @onConfirm="cancelOrder" style="margin-left: 10px;">
+                  <el-button slot="reference" size="small" type="danger">取消订单</el-button>
+                </el-popconfirm>
+              </template>
+              <template v-if="orderDetail.orderStatus === 'YFH' || orderDetail.orderStatus === 'OVER'">
+                <el-button size="small" @click="showDialog('query')">查看物流</el-button>
+              </template>
+            </div>
+          </el-col>
+          <el-col :span="16" style="padding-top: 10px;">
+            <el-steps :active="orderDetail.orderStatus != 'CLOSE' ? curOrderStatus : -1" align-center>
+              <el-step title="买家下单" :description="orderDetail.createTime"></el-step>
+              <el-step title="买家付款" :description="orderDetail.payTime ? orderDetail.payTime : ''"></el-step>
+              <el-step title="商家发货" :description="orderDetail.deliverTime ? orderDetail.deliverTime : ''"></el-step>
+              <el-step title="交易成功" :description="orderDetail.overTime ? orderDetail.overTime : ''"></el-step>
+            </el-steps>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+    <div class="order-receive-info" style="padding-bottom: 15px;">
+      <el-row :gutter="30">
+        <el-col :xs="24" :sm="12" :lg="12">
+          <div class="main-detail">
+            <div class="title">订单信息</div>
+            <div class="item">
+              <div class="label">收货人信息：</div>
+              <div class="value">{{orderDetail.receUserName}} ({{orderDetail.recePhone}})</div>
+            </div>
+            <div class="item">
+              <div class="label">收货人地址：</div>
+              <div class="value">{{orderDetail.province + orderDetail.city + orderDetail.area + orderDetail.street + orderDetail.receAddress + orderDetail.houseNo}}</div>
+            </div>
+            <div class="item">
+              <div class="label">销售员信息：</div>
+              <div class="value">{{orderDetail.workerName}} ({{orderDetail.workerPhone}})</div>
+            </div>
+            <div class="item">
+              <div class="label">团长信息：</div>
+              <div class="value">{{orderDetail.promotionGroupUserName}} ({{orderDetail.promotionGroupMobile}})</div>
+            </div>
+            <div class="item">
+              <div class="label">下单渠道：</div>
+              <div class="value">{{orderDetail.source}}</div>
+            </div>
+            <div class="item">
+              <div class="label">支付方式：</div>
+              <div class="value">{{orderDetail.payType}}</div>
+            </div>
+            <div class="item">
+              <div class="label">是否开票：</div>
+              <div class="value">{{orderDetail.tax ? '是':'否'}}</div>
+            </div>
+            <div class="item" v-if="orderDetail.dispatchType">
+              <div class="label">工单派单方式：</div>
+              <div class="value">{{orderDetail.dispatchType}}</div>
+            </div>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="12" :lg="12" v-if="orderDetail.orderStatus === 'YFH' || orderDetail.orderStatus === 'OVER'">
+          <div class="main-detail">
+            <div class="title">物流信息</div>
+            <div class="item">
+              <div class="label">快递单号：</div>
+              <div class="value">{{orderDetail.logisticsNo}}</div>
+            </div>
+            <div class="item">
+              <div class="label">快递公司：</div>
+              <div class="value">{{orderDetail.companyName}}</div>
+            </div>
+            <div class="item">
+              <div class="label">货件仓储：</div>
+              <div class="value">{{orderDetail.storageName}}</div>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+      
+      
+    </div>
+
+    <div class="order-detail" v-if="compensateList.length > 0" style="margin-bottom: 20px;">
+      <!-- 理赔表格 -->
+      <el-table :data="compensateList" style="width: 100%;" size="small" border>
+        <el-table-column prop="goodsName" label="理赔商品" align="center"></el-table-column>
+        <el-table-column prop="num" label="理赔数量" align="center"></el-table-column>
+        <el-table-column prop="createTime" label="理赔时间" align="center"></el-table-column>
+        <el-table-column prop="refundAmount" label="理赔金额" align="center"></el-table-column>
+        <el-table-column prop="operatorUser" label="操作人" align="center"></el-table-column>
+        <el-table-column prop="remark" label="备注" align="center"></el-table-column>
+      </el-table>
+    </div>
+
+    <div class="order-detail">
+
+      <!-- 订单表格 -->
+      <el-table :data="orderDetail.orderDetails" style="width: 100%" border>
+        <el-table-column label="商品信息" min-width="200">
+          <template slot-scope="scope">
+            <el-row>
+              <el-col :span="6">
+                <el-image style="width: 40px; height: 40px" :src="scope.row.imgUrl">
+                  <div slot="error" class="image-slot">
+                    <i class="el-icon-picture-outline"></i>
+                  </div>
+                </el-image>
+              </el-col>
+              <el-col :span="18">
+                <div>{{ scope.row.goodsName }}</div>
+              </el-col>
+            </el-row>
+          </template>
+        </el-table-column>
+        <el-table-column prop="goodsSpecName" label="规格" align="center"></el-table-column>
+        <el-table-column prop="price" label="单价" align="center"></el-table-column>
+        <el-table-column prop="num" label="数量" align="center"></el-table-column>
+        <el-table-column prop="shareAmount" label="分销金额" align="center">
+          <template slot-scope="scope">
+            {{ orderDetail.workerId || orderDetail.promotionGroupUserId ? scope.row.shareAmount : '0' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="discountAmount" label="优惠金额" align="center"></el-table-column>
+        <!-- <el-table-column prop="zkAmount" label="折扣优惠" align="center"></el-table-column> -->
+        <el-table-column prop="applyAmount" label="优惠价格申请" align="center" min-width="110"></el-table-column>
+        <el-table-column prop="profitAmount" label="预计盈利" align="center">
+          <template slot-scope="scope">
+            {{ orderDetail.workerId || orderDetail.promotionGroupUserId ? scope.row.profitAmount : scope.row.payAmount }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="payAmount" label="商品总金额" align="center" min-width="100"></el-table-column>
+        <el-table-column prop="freight" label="运费" align="center"></el-table-column>
+        <el-table-column prop="refundNum" label="退款数量" align="center"></el-table-column>
+        <el-table-column prop="refundAmount" label="退款金额" align="center"></el-table-column>
+        <el-table-column label="操作" align="center" width="160" v-if="orderDetail.orderStatus != 'CLOSE'">
+          <template slot-scope="scope">
+            <el-button size="mini" type="primary" @click="handleRefund(scope.row)" :disabled="!orderDetail.refundAble || scope.row.refundNum >= scope.row.num">退款</el-button>
+            <el-button size="mini" @click="handleCompensate(scope.row)">理赔</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+
+      <div class="order-amount-info">
+        <el-row>
+          <el-col :span="19"><div style="width: 1px;height: 1px;"></div></el-col>
+          <el-col :span="5">
+            <div style="padding-bottom: 10px;">商品总价：¥ {{ orderDetail.totalAmount }}</div>
+            <div style="padding-bottom: 10px;">运费：¥ {{ orderDetail.freight }}</div>
+            <div style="padding-bottom: 10px;" v-if="orderDetail.discountAmount">
+              优惠：¥ {{ orderDetail.discountAmount }} 
+              <span v-if="orderDetail.exchangeCode">（优惠码：{{ orderDetail.exchangeCode }}）</span>
+              <span v-if="orderDetail.promotionDiscountRate">（{{orderDetail.promotionDiscountRate * 10}}折）</span>
+            </div>
+            <div style="font-size: 14px;">
+              <span style="padding-right: 15px;">实际收款</span><span style="color: red;font-size: 18px;">¥ {{ orderDetail.payAmount }}</span>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+    
+    <div class="order-evaluate-info" v-if="evaluateDetail">
+      <div class="title">
+        <div class="left">评价信息<span>{{evaluateDetail.createTime}}</span></div>
+        <div class="right">
+          <span>是否客户端展示</span>
+          <el-switch v-model="evaluateDetail.isShow" @change="changeShow"></el-switch>
+        </div>
+      </div>
+      <div class="main">
+        <div class="rate-list">
+          <div style="display: flex; align-items: center; margin-bottom: 5px;">商品质量：<el-rate :value="evaluateDetail.commentGoods" disabled disabled-void-color="#DDDDDD"></el-rate></div>
+          <div style="display: flex; align-items: center; margin-bottom: 5px;">服务质量：<el-rate :value="evaluateDetail.commentService" disabled disabled-void-color="#DDDDDD"></el-rate></div>
+          <div style="display: flex; align-items: center;">配送质量：<el-rate :value="evaluateDetail.commentExpress" disabled disabled-void-color="#DDDDDD"></el-rate></div>
+        </div>
+        <div class="tag-list" v-if="orderDetail.orderCommentTags && orderDetail.orderCommentTags.length > 0">
+          <el-tag v-for="(item, index) in orderDetail.orderCommentTags" :key="index">{{item}}</el-tag>
+        </div>
+      </div>
+      <div class="content">{{evaluateDetail.content}}</div>
+      <div class="img-list" v-if="orderDetail.orderCommentImgs && orderDetail.orderCommentImgs.length > 0">
+        <el-image v-for="(item, index) in orderDetail.orderCommentImgs" :key="index" :src="item" :preview-src-list="orderDetail.orderCommentImgs" fit="cover"></el-image>
+      </div>
+    </div>
+
+    <el-dialog :title="dialogTitle" :visible.sync="remarkVisible" :show-close="false" :width="dialogWidth" :close-on-click-modal="false">
+      <el-form :model="orderForm" :rules="orderFormRules" ref="orderForm" v-if="curOpenDialogType !== 'query'" label-width="90px" label-position="left">
+        <el-form-item prop="remark" v-if="curOpenDialogType === 'remark'">
+          <el-input
+            type="textarea"
+            :autosize="{ minRows: 8, maxRows: 16}"
+            placeholder="请输入备注内容"
+            v-model="remark"
+            maxlength="100"
+            show-word-limit>
+          </el-input>
+        </el-form-item>
+        <el-form-item prop="payAmount" v-if="curOpenDialogType === 'price'">
+          <el-input v-model="orderForm.payAmount" autocomplete="off" placeholder="请输入价格"></el-input>
+        </el-form-item>
+        <el-form-item label="收货人" prop="receUserName" v-if="curOpenDialogType === 'info'">
+          <el-input v-model="orderForm.receUserName" autocomplete="off" placeholder="请输入收货人"></el-input>
+        </el-form-item>
+        <el-form-item label="收货电话" prop="recePhone" v-if="curOpenDialogType === 'info'">
+          <el-input v-model="orderForm.recePhone" autocomplete="off" placeholder="请输入收货电话"></el-input>
+        </el-form-item>
+        <el-form-item label="收货地址" prop="receAddress" v-if="curOpenDialogType === 'info'">
+          <el-input v-model="orderForm.receAddress" autocomplete="off" placeholder="请输入收货地址"></el-input>
+        </el-form-item>
+        <el-form-item label="快递单号" prop="logisticsNo" v-if="curOpenDialogType === 'send'">
+          <el-input v-model="orderForm.logisticsNo" autocomplete="off" placeholder="请输入快递单号"></el-input>
+        </el-form-item>
+        <el-form-item label="物流公司" prop="companyCode" v-if="curOpenDialogType === 'send'">
+          <el-select v-model="orderForm.companyCode" placeholder="请选择物流公司" style="width: 100%;">
+            <el-option :label="item.name" :value="item.code" v-for="(item, index) in companyList" :key="index"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="仓储" prop="storageId" v-if="curOpenDialogType === 'send'">
+          <el-select v-model="orderForm.storageId" placeholder="请选择仓储" style="width: 100%;">
+            <el-option :label="item.storageName" :value="item.storageId" v-for="(item, index) in storageList" :key="index"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="是否派单" prop="workOrder" v-if="curOpenDialogType === 'send'">
+          <el-radio-group v-model="orderForm.workOrder">
+            <el-radio :label="true">是</el-radio>
+            <el-radio :label="false">否</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <el-table v-loading="logisticsLoading" :data="logistics" style="width: 100%" size="mini" v-if="curOpenDialogType === 'query'">
+        <el-table-column prop="comName" label="物流公司" align="center"></el-table-column>
+        <el-table-column prop="areaName" label="地区名称" align="center"></el-table-column>
+        <el-table-column prop="time" label="物流时间" align="center"></el-table-column>
+        <el-table-column prop="state" label="物流状态" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.state | EXPRESS_CURRENT_STATE_FILTER }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="context" label="物流详情" align="center"></el-table-column>
+      </el-table>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="saveForm" v-if="curOpenDialogType !== 'query'">保 存</el-button>
+        <el-button @click="cancelForm">{{ curOpenDialogType === 'query' ? '关 闭' : '取 消' }}</el-button>
+      </div>
+    </el-dialog>
+
+    <el-dialog title="理赔" :visible.sync="compensateFormVisible" width="30%" :close-on-click-modal="false">
+      <el-form ref="compensateForm" :model="compensateForm" :rules="compensateFormRules" label-position="left">
+        <el-form-item label="理赔数量" prop="num">
+          <el-input v-model="compensateForm.num" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="理赔金额" prop="amount">
+          <el-input v-model="compensateForm.amount" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="compensateForm.remark" autocomplete="off" type="textarea" :rows="3"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancelCompensateForm">取 消</el-button>
+        <el-button type="primary" @click="submitCompensateForm">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  cancelOrder,
+  changePrice,
+  changeReceiveInfo,
+  confirmOrder,
+  getOrderDetail, goodsDeliver,
+  saveRemark, orderRefund, orderCompensate, getCompensateList,
+  changeShow
+} from "@/api/order";
+import {getExpress, getCompanyList} from "@/api/common";
+import * as Storage from "@/api/storage";
+import { mapGetters } from 'vuex'
+
+export default {
+  name: "detail",
+  data() {
+    return {
+      orderId: '',
+      orderDetail: {},
+      evaluateDetail: null,
+      dialogTitle: '',
+      remarkVisible: false,
+      remark: '',
+      price: 0,
+      orderForm: {
+        orderId: '',
+        payAmount: '',
+        receAddress: '',
+        receUserName: '',
+        recePhone: '',
+        logisticsNo: '',
+        companyCode: '',
+        workOrder: true,
+      },
+      orderFormRules: {
+        payAmount: [
+          { validator: (rule, value, callback) => {
+              if(this.curOpenDialogType !== 'price') {
+                callback()
+              } else {
+                if (!value) {
+                  callback(new Error('请输入价格'))
+                } else {
+                  if (!this.isNumber(value)) {
+                    callback(new Error('请输入数字值'))
+                  } else {
+                    callback()
+                  }
+                }
+              }
+            }, trigger: 'blur' }
+        ],
+        receUserName: [
+          { require: true, message: '请输入收货人', trigger:'blur' }
+        ],
+        recePhone: [
+          { require: true, message: '请输入收货电话', trigger:'blur' }
+        ],
+        receAddress: [
+          { require: true, message: '请输入收货地址', trigger:'blur' }
+        ],
+        logisticsNo: [
+          { validator: (rule, value, callback) => {
+              if(this.curOpenDialogType !== 'send') {
+                callback()
+              } else {
+                if (!value) {
+                  callback(new Error('请输入快递单号'))
+                } else {
+                  callback()
+                }
+              }
+            }, trigger: 'blur' }
+        ],
+        storageId: [
+          { validator: (rule, value, callback) => {
+              if(this.curOpenDialogType !== 'send') {
+                callback()
+              } else {
+                if (!value) {
+                  callback(new Error('请选择仓储'))
+                } else {
+                  callback()
+                }
+              }
+            }, trigger: 'change' }
+        ],
+        companyCode: [
+          { validator: (rule, value, callback) => {
+              if(this.curOpenDialogType !== 'send') {
+                callback()
+              } else {
+                if (!value) {
+                  callback(new Error('请选择快递公司'))
+                } else {
+                  callback()
+                }
+              }
+            }, trigger: 'change' }
+        ]
+      },
+      curOpenDialogType: 'order',
+      logistics: [],
+      storageList: [],
+      dialogWidth: '50%',
+      logisticsLoading: false,
+      companyList: [],
+
+      compensateFormVisible: false,
+      compensateForm: {
+        id: null,
+        num: '',
+        amount: '',
+        remark: '',
+      },
+      compensateFormRules: {
+        num: [
+          { required: true, message: '请输入理赔数量', trigger: 'blur' },
+          { validator: (rule, value, callback) => {
+            if(value > (this.compensateItem.num - this.compensateItem.refundNum)) {
+              callback(new Error('最多还可以理赔' + (this.compensateItem.num - this.compensateItem.refundNum) + '件商品'));
+            } else {
+              callback();
+            }
+          }, trigger: 'blur' }
+        ],
+        amount: [
+          { required: true, message: '请输入理赔金额', trigger: 'blur' },
+        ]
+      },
+      compensateItem: {
+        num: '',
+        refundNum: '',
+      },
+      compensateList: [],
+    }
+  },
+  created() {
+    this.orderId = this.$route.query.orderId
+    this.getDetail();
+    this.getStorageList();
+    this.getCompanyList();
+    this.getCompensateList();
+  },
+  methods: {
+    getDetail() {
+      getOrderDetail({ orderId: this.orderId }).then((res) => {
+        this.orderDetail = res.data
+        this.orderDetail.workerName = this.orderDetail.workerName ? this.orderDetail.workerName : '暂无'
+        this.orderDetail.workerPhone = this.orderDetail.workerPhone ? this.orderDetail.workerPhone : ''
+        this.evaluateDetail = res.data.orderComment;
+      })
+    },
+    showDialog(type) {
+      this.dialogWidth = type === 'query' ? '80%' : '50%'
+      this.remarkVisible = true
+      this.curOpenDialogType = type
+      if (type === 'remark') {
+        this.dialogTitle = '订单备注'
+        this.remark = this.orderDetail.remark
+      } else if (type === 'price') {
+        this.dialogTitle = '修改价格'
+        this.orderForm.payAmount = this.orderDetail.payAmount
+      } else if (type === 'info') {
+        this.dialogTitle = '收货人信息'
+        this.orderForm.receUserName = this.orderDetail.receUserName
+        this.orderForm.recePhone = this.orderDetail.recePhone
+        this.orderForm.receAddress = this.orderDetail.receAddress
+      } else if (type === 'send') {
+        this.dialogTitle = '发货信息'
+      } else if (type === 'query') {
+        this.logisticsLoading = true
+        this.dialogTitle = '物流信息'
+        getExpress({ 
+          logisticsNo: this.orderDetail.logisticsNo,
+          companyCode: this.orderDetail.companyCode
+        }).then(res => {
+          this.logistics = res.data
+          this.logisticsLoading = false
+        })
+      }
+    },
+    cancelForm() {
+      this.remarkVisible = false
+      if (this.curOpenDialogType === 'query') {
+        return
+      }
+      this.$refs.orderForm.resetFields()
+      if (this.curOpenDialogType === 'remark') {
+        this.remark = ''
+      } else if (this.curOpenDialogType === 'price') {
+        this.price = ''
+      }
+    },
+    saveForm() {
+      const params = {
+        orderId: this.orderId
+      }
+      if (this.curOpenDialogType === 'remark') {
+        params.remark = this.remark
+        saveRemark(params).then(() => {
+          this.cancelForm();
+          this.getDetail();
+          this.$successMsg('保存成功');
+        })
+      } else if (this.curOpenDialogType === 'price') {
+        params.price = this.orderForm.payAmount
+        this.$refs.orderForm.validate((valid) => {
+          if (valid) {
+            changePrice(params).then(() => {
+              this.cancelForm();
+              this.getDetail();
+              this.$successMsg('保存成功');
+            })
+          }
+        })
+      } else if (this.curOpenDialogType === 'info') {
+        params.receUserName = this.orderForm.receUserName
+        params.recePhone = this.orderForm.recePhone
+        params.receAddress = this.orderForm.receAddress
+        params.orderStatus = this.orderDetail.orderStatus
+        this.$refs.orderForm.validate((valid) => {
+          if (valid) {
+            changeReceiveInfo(params).then(() => {
+              this.cancelForm();
+              this.getDetail();
+              this.$successMsg('保存成功');
+            })
+          }
+        })
+      } else if (this.curOpenDialogType === 'send') {
+        params.logisticsNo = this.orderForm.logisticsNo
+        params.storageId = this.orderForm.storageId
+        params.companyCode = this.orderForm.companyCode
+        params.workOrder = this.orderForm.workOrder
+        this.$refs.orderForm.validate((valid) => {
+          if (valid) {
+            goodsDeliver(params).then(() => {
+              this.cancelForm();
+              this.getDetail();
+              this.$successMsg('保存成功');
+            })
+          }
+        })
+      }
+    },
+    cancelOrder() {
+      cancelOrder({ orderId: this.orderId }).then(() => {
+        this.getDetail();
+        this.$successMsg('取消成功');
+      })
+    },
+    confirmOrder() {
+      confirmOrder({ orderId: this.orderId }).then(() => {
+        this.getDetail();
+        this.$successMsg('确认收款成功');
+      })
+    },
+    goBack() {
+      this.$router.go(-1);
+    },
+    isNumber(val) {
+      const regPos = /^\d+(\.\d+)?$/
+      const regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/
+      if (regPos.test(val) || regNeg.test(val)) {
+        return true
+      } else {
+        return false
+      }
+    },
+
+    getStorageList() {
+      Storage.getList({ pageNum: 1, pageSize: 100 }).then(res => {
+        this.storageList = res.data.records
+      })
+    },
+
+    // 获取物流公司列表
+    getCompanyList() {
+      getCompanyList().then(res => {
+        this.companyList = res.data;
+      })
+    },
+
+    // 退款
+    handleRefund(row) {
+      console.log(row);
+      if(row.num == 1) {
+        this.$confirm('此操作将退款此商品, 是否继续?', '退款', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          this.orderRefund(1, row.orderDetailId);
+        }).catch(() => {});
+      }
+      else {
+        this.$prompt('请输入退款数量', '退款', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          inputValidator: function(value) {
+            if(!value) return '请输入退款数量';
+            if(value == 0) return '退款数量不能小于1';
+            if(value > (row.num - row.refundNum)) {
+              return '最多还可以退款' + (row.num - row.refundNum) + '件商品'
+            }
+          },
+        }).then(({ value }) => {
+          this.orderRefund(value, row.orderDetailId);
+        }).catch(() => {});
+      }
+    },
+
+    // 退款
+    orderRefund(num, id) {
+      orderRefund({
+        num: num,
+        orderDetailId: id,
+      }).then(res => {
+        this.getDetail();
+        this.$successMsg('退款成功');
+      })
+    },
+
+    // 理赔
+    handleCompensate(row) {
+      this.compensateFormVisible = true;
+      this.compensateForm.id = row.orderDetailId;
+      this.compensateItem.num = row.num;
+      this.compensateItem.refundNum = row.refundNum;
+    },
+
+    // 取消 理赔
+    cancelCompensateForm(){
+      this.compensateFormVisible = false;
+      this.compensateForm = {
+        id: null,
+        num: '',
+        amount: '',
+        remark: '',
+      }
+    },
+
+    // 提交 理赔
+    submitCompensateForm() {
+      this.$refs.compensateForm.validate((valid) => {
+        if (valid) {
+          let params = {
+            adminUserId: this.userid,
+            orderDetailId: this.compensateForm.id,
+            num: this.compensateForm.num,
+            refundAmount: this.compensateForm.amount,
+            remark: this.compensateForm.remark,
+          }
+          orderCompensate(params).then(res => {
+            this.cancelCompensateForm();
+            this.getDetail();
+            this.getCompensateList();
+            this.$successMsg('理赔成功');
+          })
+        }
+      });
+      
+    },
+
+    // 获取理赔列表
+    getCompensateList() {
+      getCompensateList({orderId: this.orderId}).then(res => {
+        this.compensateList = res.data;
+      })
+    },
+
+    // 切换评价信息是否显示
+    changeShow() {
+      changeShow({
+        isShow: this.evaluateDetail.isShow,
+        orderId: this.orderId,
+      }).then(res => {
+        this.getDetail();
+        this.$successMsg();
+      })
+    }
+
+  },
+  computed: {
+    ...mapGetters([
+      'userid', 
+      'name'
+    ]),
+    curOrderStatus() {
+      switch (this.orderDetail.orderStatus) {
+        case 'NOPAY':
+          return 1
+          break;
+        case 'DFH':
+          return 2
+          break;
+        case 'YFH':
+          return 3
+          break;
+        case 'OVER':
+          return 4
+          break;
+        default:
+          return 1
+      }
+    },
+    totalAmountCompute() {
+      if(!this.orderDetail.totalAmount) {
+        return 0
+      }
+      const totalAmount = parseFloat(this.orderDetail.totalAmount)
+      const freight = parseFloat(this.orderDetail.freight)
+      return (totalAmount - freight).toFixed(2)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.order-main {
+  margin-top: 15px;
+  border: 1px solid #e5e5e5;
+  .order-main-title {
+    font-size: 14px;
+  }
+  .order-main-title span {
+    margin-right: 15px;
+  }
+  .order-main-status {
+    padding: 15px 0;
+    font-size: 24px;
+    color: #409EFF;
+  }
+  .order-main-opt-btn {
+    padding: 15px 0;
+  }
+}
+.order-receive-info {
+  margin: 15px 0;
+  padding: 15px;
+  background: #f5f7fa;
+  :first-child div span {
+    padding-right: 15px;
+  }
+  .el-row{
+    padding-top: 15px;
+  }
+}
+
+.order-detail {
+  background: #f5f7fa;
+  .order-amount-info {
+    padding: 15px 0;
+    font-size: 12px;
+    font-weight: bold;
+  }
+
+  ::v-deep .el-table tr, ::v-deep .el-table th {
+    background-color: #f5f7fa;
+  }
+}
+
+.main-detail {
+  .title {
+    font-size: 16px;
+    font-weight: 700;
+    margin-bottom: 20px;
+  }
+  .item {
+    display: flex;
+    font-size: 14px;
+    color: #666;
+    padding-bottom: 12px;
+    .label {
+      white-space: nowrap;
+    }
+  }
+}
+
+.order-evaluate-info {
+  margin: 15px 0;
+  padding: 30px 15px;
+  background: #f5f7fa;
+  .title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .left {
+      font-size: 16px;
+      font-weight: 700;
+      span {
+        font-weight: normal;
+        margin-left: 20px;
+        font-size: 14px;
+        color: #666;
+      }
+    }
+    .right {
+      display: flex;
+      align-items: center;
+      font-size: 14px;
+      span {
+        margin-right: 10px;
+      }
+    }
+  }
+  .main {
+    margin-top: 20px;
+    display: flex;
+    .rate-list {
+      font-size: 14px;
+      flex-shrink: 0;
+    }
+    .tag-list {
+      margin-left: 30px;
+      ::v-deep .el-tag {
+        margin-right: 10px;
+        margin-bottom: 10px;
+      }
+    }
+  }
+  .content {
+    width: 400px;
+    line-height: 20px;
+    font-size: 14px;
+    color: #333;
+    margin-top: 10px;
+  }
+  .img-list {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 10px;
+    width: 400px;
+    ::v-deep .el-image {
+      width: 100px;
+      height: 100px;
+      margin-right: 10px;
+      margin-bottom: 10px;
+      border: 1px solid #eaeaea;
+    }
+  }
+}
+
+</style>

src/views/mallManagement/order/order_list/index.vue

@@ -565,15 +565,14 @@ export default {
     },
     // 查看详情
     queryDetail (orderId) {
-      let {href} = this.$router.resolve({path: `/order/detail?orderId=${orderId}`});
-      window.open(href, '_blank');
-
-      // this.$router.push({
-      //   path: '/order/detail',
-      //   query: {
-      //     orderId
-      //   }
-      // })
+      // let {href} = this.$router.resolve({path: `/order/detail?orderId=${orderId}`});
+      // window.open(href, '_blank');
+      this.$router.push({
+        name:"order_detail",
+        query: {
+          orderId
+        }
+      })
     },
     // 更改每页数量
     handleSizeChange(val) {
@@ -971,8 +970,16 @@ export default {
 
     // 查看工单
     toWorkOrderDetail(orderId) {
-      let {href} = this.$router.resolve({path: `/order/workOrder_detail?orderId=${orderId}`});
-      window.open(href, '_blank');
+      // let {href} = this.$router.resolve({path: `/order/workOrder_detail?orderId=${orderId}`});
+      // window.open(href, '_blank');
+
+      this.$router.push({
+        name:"workOrder_detail",
+        query: {
+          orderId
+        }
+      })
+      
     },
 
   }

src/views/mallManagement/order/order_refund/index.vue

@@ -428,15 +428,14 @@ export default {
     // 查看详情
     showDetail(index) {
       const orderRefundId = this.dataList[index].orderRefundId
-      let {href} = this.$router.resolve({path: `/order/order_refund_detail?orderRefundId=${orderRefundId}`});
-      window.open(href, '_blank');
-
-      // this.$router.push({
-      //   path: '/order/order_refund_detail',
-      //   query: {
-      //     orderRefundId
-      //   }
-      // })
+      // let {href} = this.$router.resolve({path: `/order/order_refund_detail?orderRefundId=${orderRefundId}`});
+      // window.open(href, '_blank');
+      this.$router.push({
+        name:"order_refund_detail",
+        query: {
+          orderRefundId
+        }
+      })
     },
     receiveProd(orderRefundId) {
       receiveProd({orderRefundId}).then(() => {
@@ -447,8 +446,14 @@ export default {
 
     // 查看工单
     toWorkOrderDetail(orderId) {
-      let {href} = this.$router.resolve({path: `/order/workOrder_detail?orderId=${orderId}`});
-      window.open(href, '_blank');
+      // let {href} = this.$router.resolve({path: `/order/workOrder_detail?orderId=${orderId}`});
+      // window.open(href, '_blank');
+      this.$router.push({
+        name:"workOrder_detail",
+        query: {
+          orderId
+        }
+      })
     },
 
     // 导出

src/views/mallManagement/order/order_refund_detail/index.vue

@@ -0,0 +1,333 @@
+<template>
+  <div class="app-container">
+    <el-page-header @back="goBack" content="订单详情"></el-page-header>
+    <div class="order-refund-main">
+      <el-row style="padding: 15px 15px 10px">
+        <el-col :span="24">
+          <div class="order-refund-main-title">
+            <span>订单编号：{{ orderDetail.orderId }}</span>
+            <span>申请退款时间：{{ orderDetail.createTime }}</span>
+            <span>商户：{{ orderDetail.companyWechatName || '无' }}</span>
+            <div class="fr">
+              <el-link type="primary" :underline="false" @click="showRemark('remark')">修改订单备注</el-link>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+      <div style="width: 100%; padding: 10px 15px 15px 15px">
+        <el-row>
+          <el-col :span="8" style="border-right: 1px solid #e8e8e8;">
+            <div class="order-refund-main-status">
+              <span>{{ orderDetail.orderStatus | ORDER_REFUND_CURRENT_STATUS_FILTER }}</span>
+            </div>
+            <div class="order-refund-main-opt-btn">
+              <template v-if="orderDetail.orderStatus === 'DSJCL'">
+                <el-popconfirm title="确定同意吗？" @onConfirm="changeExamineStatus('OK')">
+                  <el-button slot="reference" size="small" type="primary">同意</el-button>
+                </el-popconfirm>
+                <el-popconfirm title="确定拒绝吗？" @onConfirm="changeExamineStatus('FAIL')" style="margin-left: 10px;">
+                  <el-button slot="reference" size="small" type="warning">拒绝</el-button>
+                </el-popconfirm>
+              </template>
+              <template v-if="orderDetail.orderStatus === 'DSJSH'">
+                <el-popconfirm title="确定要收货吗？" @onConfirm="receiveProd()">
+                  <el-button slot="reference" size="small" type="primary">确认收货</el-button>
+                </el-popconfirm>
+                <el-button type="success" size="small" @click="queryLogistics(orderDetail.logisticsNo)" v-if="orderDetail.logisticsNo" style="margin-left: 10px;">查看物流</el-button>
+              </template>
+            </div>
+          </el-col>
+          <el-col :span="16" style="padding: 0 15px;">订单备注：{{ orderDetail.remark }}</el-col>
+        </el-row>
+      </div>
+    </div>
+    <div class="order-refund-receive-info">
+      <el-row :gutter="30">
+        <el-col :xs="24" :sm="12" :lg="12">
+          <div class="main-detail">
+            <div class="title">订单信息</div>
+            <div class="item">
+              <div class="label">收货人信息：</div>
+              <div class="value">{{orderDetail.receUserName}} ({{orderDetail.recePhone}})</div>
+            </div>
+            <div class="item">
+              <div class="label">收货人地址：</div>
+              <div class="value">{{orderDetail.province + orderDetail.city + orderDetail.area + orderDetail.street + orderDetail.receAddress}}</div>
+            </div>
+            <div class="item">
+              <div class="label">销售员信息：</div>
+              <div class="value">{{orderDetail.workerName}} ({{orderDetail.workerPhone}})</div>
+            </div>
+            <div class="item">
+              <div class="label">下单渠道：</div>
+              <div class="value">{{orderDetail.source}}</div>
+            </div>
+            <div class="item">
+              <div class="label">支付方式：</div>
+              <div class="value">{{orderDetail.payType}}</div>
+            </div>
+            <div class="item">
+              <div class="label">是否开票：</div>
+              <div class="value">{{orderDetail.tax ? '是':'否'}}</div>
+            </div>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="12" :lg="12">
+          <div class="main-detail">
+            <div class="title">维权信息</div>
+            <div class="item">
+              <div class="label">退款方式：</div>
+              <div class="value">{{orderDetail.refundType | REFUND_CURRENT_TYPE_FILTER}}</div>
+            </div>
+            <div class="item">
+              <div class="label">退款原因：</div>
+              <div class="value">{{orderDetail.refundReason}}</div>
+            </div>
+            <div class="item">
+              <div class="label">退款说明：</div>
+              <div class="value">{{orderDetail.refundExplain}}</div>
+            </div>
+            <div class="item">
+              <div class="label">退款凭证：</div>
+              <div class="value" style="display: flex;">
+                <div v-for="(item, index) in orderDetail.tkFiles" :key="index" style="margin-right: 10px">
+                  <el-image :src="item.url" style="width: 50px; height: 50px;" :preview-src-list="[item.url]"></el-image>
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+    <div class="order-refund-detail">
+      <el-table :data="orderDetail.orderDetails" style="width: 100%" border >
+        <el-table-column label="商品信息" min-width="200">
+          <template slot-scope="scope">
+            <el-row>
+              <el-col :span="6">
+                <el-image style="width: 40px; height: 40px" :src="scope.row.imgUrl">
+                  <div slot="error" class="image-slot">
+                    <i class="el-icon-picture-outline"></i>
+                  </div>
+                </el-image>
+              </el-col>
+              <el-col :span="18">
+                <div>{{ scope.row.goodsName }}</div>
+              </el-col>
+            </el-row>
+          </template>
+        </el-table-column>
+        <el-table-column prop="goodsSpecName" label="规格" align="center"></el-table-column>
+        <el-table-column prop="price" label="单价" align="center"></el-table-column>
+        <el-table-column prop="num" label="数量" align="center"></el-table-column>
+        <el-table-column prop="shareAmount" label="分销金额" align="center"></el-table-column>
+        <el-table-column prop="profitAmount" label="预计盈利" align="center"></el-table-column>
+        <el-table-column prop="totalPrice" label="商品总金额" align="center" min-width="100"></el-table-column>
+        <el-table-column prop="refundAmount" label="退款金额" align="center"></el-table-column>
+        <el-table-column prop="refundNum" label="退款数量" align="center"></el-table-column>
+        <el-table-column label="退款时间" align="center" min-width="160">
+          <template>
+            {{ orderDetail.examineTime || '' }}
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="order-amount-info">
+        <el-row>
+          <el-col :span="19"><div style="width: 1px;height: 1px;"></div></el-col>
+          <el-col :span="5">
+            <div style="padding-bottom: 10px;">商品总价：¥ {{ totalAmountCompute }}</div>
+            <div style="padding-bottom: 10px;">运费：¥ {{ orderDetail.freight }}</div>
+            <div style="padding-bottom: 10px;">优惠：¥ {{ orderDetail.discountAmount }}</div>
+            <div style="font-size: 14px;">
+              <span style="padding-right: 15px;">实际收款</span><span style="color: red;font-size: 18px;">¥ {{ orderDetail.payAmount }}</span>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+    <el-dialog :title="'订单备注'" :visible.sync="remarkVisible" :show-close="false" width="50%" :close-on-click-modal="false">
+      <el-input
+        type="textarea"
+        :autosize="{ minRows: 8, maxRows: 16}"
+        placeholder="请输入备注内容"
+        v-model="orderDetail.remark"
+        maxlength="100"
+        show-word-limit>
+      </el-input>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="saveRemark">保 存</el-button>
+        <el-button @click="cancelRemark">取 消</el-button>
+      </div>
+    </el-dialog>
+    <el-dialog :title="'物流信息'" :visible.sync="logisticsVisible" :show-close="false" width="80%" :close-on-click-modal="false">
+      <el-table
+        :data="logistics"
+        style="width: 100%"
+        size="mini">
+        <el-table-column prop="logisticsNo" label="快递单号" align="center"></el-table-column>
+        <el-table-column prop="comName" label="物流公司" align="center"></el-table-column>
+        <el-table-column prop="time" label="物流时间" align="center"></el-table-column>
+        <el-table-column prop="state" label="物流状态" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.state | EXPRESS_CURRENT_STATE_FILTER }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="context" label="物流详情" align="center"></el-table-column>
+      </el-table>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="logisticsVisible = false">关 闭</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {changeExamineStatus, getOrderRefundDetail, receiveProd, saveRefundRemark} from "@/api/order";
+import {getExpress} from "@/api/common";
+
+export default {
+  name: "orderRefundDetail",
+  data() {
+    return {
+      orderRefundId: '',
+      orderDetail: {},
+      remarkVisible: false,
+      logisticsVisible: false,
+      logistics: []
+    }
+  },
+  created() {
+    this.orderRefundId = this.$route.query.orderRefundId
+    this.getDetail()
+  },
+  methods: {
+    getDetail() {
+      getOrderRefundDetail({ orderRefundId: this.orderRefundId }).then((res) => {
+        this.orderDetail = res.data
+        this.orderDetail.workerName = this.orderDetail.workerName ? this.orderDetail.workerName : '暂无'
+        this.orderDetail.workerPhone = this.orderDetail.workerPhone ? this.orderDetail.workerPhone : ''
+      })
+    },
+    goBack() {
+      this.$router.go(-1);
+    },
+    showRemark() {
+      this.remarkVisible = true
+    },
+    cancelRemark() {
+      this.remarkVisible = false
+    },
+    saveRemark() {
+      const params = {
+        orderRefundId: this.orderRefundId,
+        remark: this.orderDetail.remark
+      }
+      saveRefundRemark(params).then(() => {
+        this.cancelRemark();
+        this.getDetail();
+        this.$successMsg('保存成功');
+      })
+    },
+    // 变更维权处理状态
+    changeExamineStatus(examineStatus) {
+      console.log(123);
+      const orderRefundId = this.orderRefundId
+      changeExamineStatus({orderRefundId, examineStatus}).then(() => {
+        this.getDetail();
+        this.$successMsg('操作成功');
+      })
+    },
+    // 确认收货
+    receiveProd() {
+      const orderRefundId = this.orderRefundId
+      receiveProd({orderRefundId}).then(() => {
+        this.getDetail();
+        this.$successMsg('确认收货成功');
+      })
+    },
+    // 查看物流
+    queryLogistics(logisticsNo) {
+      this.logisticsVisible = true
+      getExpress({ logisticsNo }).then(res => {
+        this.logistics = res.data
+      })
+    },
+  },
+  computed: {
+    totalAmountCompute() {
+      if(!this.orderDetail.totalAmount) {
+        return 0
+      }
+      const totalAmount = parseFloat(this.orderDetail.totalAmount)
+      const freight = parseFloat(this.orderDetail.freight)
+      return (totalAmount - freight).toFixed(2)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.order-refund-main {
+  margin-top: 15px;
+  border: 1px solid #e5e5e5;
+  .order-refund-main-title {
+    font-size: 14px;
+  }
+  .order-refund-main-title span {
+    margin-right: 15px;
+  }
+  .order-refund-main-status {
+    color: #409EFF;
+    padding: 15px 0;
+    font-size: 24px;
+  }
+  .order-refund-main-opt-btn {
+    padding: 15px 0;
+  }
+}
+.order-refund-receive-info {
+  margin: 15px 0;
+  padding: 15px;
+  background: #f5f7fa;
+  :first-child div span {
+    padding-right: 15px;
+  }
+  .el-row{
+    padding-top: 15px;
+  }
+}
+
+.order-refund-detail {
+  background: #f5f7fa;
+  .order-amount-info {
+    padding: 15px 0;
+    font-size: 12px;
+    font-weight: bold;
+  }
+}
+
+.main-detail {
+  .title {
+    font-size: 16px;
+    font-weight: 700;
+    margin-bottom: 20px;
+  }
+  .item {
+    display: flex;
+    font-size: 14px;
+    color: #666;
+    padding-bottom: 12px;
+    .label {
+      white-space: nowrap;
+    }
+  }
+}
+</style>
+<style lang="scss">
+.order-refund-detail {
+  .el-table tr,.el-table th {
+    background-color: #f5f7fa;
+  }
+}
+
+</style>

src/views/mallManagement/order/workOrder_detail/index.vue

@@ -0,0 +1,264 @@
+<template>
+  <div class="app-container">
+    <div class="header-container">
+      <div class="el-page-header__left" @click="goBack">
+        <i class="el-icon-back"></i>
+        <div class="el-page-header__title">返回</div>
+      </div>
+      <div class="el-page-header__content">
+        <el-tabs v-model="activeName">
+          <el-tab-pane :label="'工单详情' + (index+1)" :name="'order_' + (index+1)" v-for="(item, index) in dataList" :key="index"></el-tab-pane>
+        </el-tabs>
+      </div>
+    </div>
+
+    <div v-for="(item, index) in dataList" :key="index">
+      <div v-show="activeName === 'order_' + (index+1)">
+        <div class="top-container">
+          <span>订单编号：{{ item.orderId }}</span>
+          <span>下单时间：{{ item.payTime }}</span>
+        </div>
+
+        <el-card class="card-container goods-container" shadow="never">
+          <div slot="header" class="title">订单信息</div>
+          <el-table :data="item.orderDetails" style="width: 100%" border>
+            <el-table-column label="商品信息" min-width="200">
+              <template slot-scope="scope">
+                <div class="goods-info">
+                  <el-image class="image" :src="scope.row.imgUrl"></el-image>
+                  <div class="name">{{ scope.row.goodsName }}</div>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="goodsSpecName" label="规格" align="center"></el-table-column>
+            <el-table-column prop="price" label="单价" align="center"></el-table-column>
+            <el-table-column prop="num" label="数量" align="center"></el-table-column>
+          </el-table>
+        </el-card>
+
+        <el-card class="card-container" shadow="never">
+          <div slot="header" class="title">服务工单信息</div>
+          <div class="order-info">
+            <el-row :gutter="30">
+              <el-col :xs="24" :sm="12">
+                <div class="item">
+                  <div class="label">信息编号：</div>
+                  <div class="value">{{ item.workerOrder }}</div>
+                </div>
+              </el-col>
+              <el-col :xs="24" :sm="12">
+                <div class="item">
+                  <div class="label">总部信息编号：</div>
+                  <div class="value">{{ item.pgid }}</div>
+                </div>
+              </el-col>
+              <el-col :xs="24" :sm="12">
+                <div class="item">
+                  <div class="label">工单状态：</div>
+                  <div class="value">{{ item.orderState }}</div>
+                </div>
+              </el-col>
+              <el-col :xs="24" :sm="12">
+                <div class="item">
+                  <div class="label">售后服务网点：</div>
+                  <div class="value">{{ item.installName }}</div>
+                </div>
+              </el-col>
+              <el-col :xs="24" :sm="12">
+                <div class="item">
+                  <div class="label">主要服务人员：</div>
+                  <div class="value">{{ item.workerName }}</div>
+                </div>
+              </el-col>
+              <el-col :xs="24" :sm="12">
+                <div class="item">
+                  <div class="label">服务人员电话：</div>
+                  <div class="value">{{ item.workerPhone }}</div>
+                </div>
+              </el-col>
+              <el-col :xs="24" :sm="12">
+                <div class="item">
+                  <div class="label">工单接收时间：</div>
+                  <div class="value">{{ item.orderReceTime }}</div>
+                </div>
+              </el-col>
+              <el-col :xs="24" :sm="12">
+                <div class="item">
+                  <div class="label">完工时间：</div>
+                  <div class="value">{{ item.finishTime }}</div>
+                </div>
+              </el-col>
+            </el-row>
+          </div>
+        </el-card>
+
+        <el-card class="card-container" shadow="never">
+          <div slot="header" class="title">工单反馈信息</div>
+          <el-table :data="item.fkxxs" style="width: 100%" border>
+            <el-table-column prop="operatorType" label="操作类别" align="center" min-width="100"></el-table-column>
+            <el-table-column prop="operatorContent" label="操作内容" align="center" min-width="160"></el-table-column>
+            <el-table-column prop="lastOperatorTime" label="最后操作时间" align="center" min-width="160"></el-table-column>
+            <el-table-column prop="operatorName" label="操作人" align="center" min-width="120"></el-table-column>
+            <el-table-column prop="operatorWebsit" label="操作网点" align="center" min-width="120"></el-table-column>
+            <el-table-column prop="result" label="反馈结果" align="center" min-width="100"></el-table-column>
+          </el-table>
+        </el-card>
+
+        <el-card class="card-container" shadow="never">
+          <div slot="header" class="title">辅材支付信息</div>
+          <el-table :data="item.fcxxs" style="width: 100%" border>
+            <el-table-column prop="id" label="ID" align="center"></el-table-column>
+            <el-table-column prop="orderNo" label="费用单号" align="center"></el-table-column>
+            <el-table-column prop="operatorWebsit" label="操作网点" align="center"></el-table-column>
+            <el-table-column prop="operatorName" label="操作人" align="center"></el-table-column>
+            <el-table-column prop="payStatus" label="支付状态" align="center"></el-table-column>
+            <el-table-column prop="payTime" label="支付时间" align="center"></el-table-column>
+            <el-table-column prop="amount" label="金额" align="center"></el-table-column>
+            <el-table-column prop="goodsSpecName" label="商品详情" align="center">
+              <template slot-scope="scope">
+                <el-button type="text" size="small" @click="openDetail(scope.row.details)">查看详情</el-button>
+              </template>
+            </el-table-column>
+            <el-table-column prop="remark" label="备注" align="center"></el-table-column>
+          </el-table>
+        </el-card>
+      </div>
+    </div>
+
+    <el-dialog title="辅材详情" :visible.sync="goodsDetailDialog" width="60%" :close-on-click-modal="false">
+      <el-table :data="goodsDetailList" style="width: 100%" border>
+        <el-table-column prop="id" label="商品ID" align="center"></el-table-column>
+        <el-table-column prop="goods_name" label="商品名称" align="center"></el-table-column>
+        <el-table-column prop="number" label="数量" align="center"></el-table-column>
+        <el-table-column prop="amount" label="单价" align="center"></el-table-column>
+        <el-table-column prop="sub_amount" label="小计" align="center"></el-table-column>
+      </el-table>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="goodsDetailDialog = false;">关 闭</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  getWorkOrder, getCompensateList
+} from "@/api/order";
+import * as Storage from "@/api/storage";
+import { mapGetters } from 'vuex'
+
+export default {
+  name: "detail",
+  data() {
+    return {
+      activeName: 'order_1',
+      orderId: '',
+      dataList: {},
+      goodsDetailDialog: false,
+      goodsDetailList: [],
+    }
+  },
+
+  computed: {
+    ...mapGetters([
+      'userid', 
+      'name'
+    ]),
+  },
+
+  created() {
+    this.orderId = this.$route.query.orderId
+    this.getDetail();
+  },
+  methods: {
+    getDetail() {
+      getWorkOrder({ orderId: this.orderId }).then((res) => {
+        this.dataList = res.data;
+      })
+    },
+    goBack() {
+      this.$router.go(-1);
+    },
+    
+    // 理赔
+    openDetail(list) {
+      this.goodsDetailList = list;
+      this.goodsDetailDialog = true;
+    },
+
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.header-container {
+  display: flex;
+  line-height: 24px;
+  .el-page-header__left {
+    align-items: center;
+  }
+  ::v-deep .el-tabs__header {
+    margin-bottom: 0;
+  }
+  ::v-deep .el-tabs__item {
+    padding: 0 10px;
+    font-size: 16px;
+  }
+  ::v-deep .el-tabs__nav-wrap::after {
+    background: none;
+  }
+}
+.top-container {
+  display: flex;
+  margin-top: 30px;
+  span {
+    margin-right: 20px;
+    font-weight: 500;
+  }
+}
+.goods-container {
+  .goods-info {
+    display: flex;
+    .image {
+      width: 50px;
+      height: 50px;
+      margin-right: 10px;
+    }
+    .name {
+      flex: 1;
+    }
+  }
+}
+
+.card-container {
+  margin-top: 20px;
+  ::v-deep .el-card__header {
+    background: #f5f7fa;
+  }
+  ::v-deep .el-card__body {
+    padding: 0;
+  }
+  .title {
+    font-weight: 500;
+    color: #409EFF;
+  }
+  .order-info {
+    padding: 10px 20px;
+    .item {
+      display: flex;
+      align-items: center;
+      font-size: 14px;
+      height: 36px;
+      .label {
+        font-weight: 500;
+        width: 100px;
+      }
+      .value {
+        flex: 1;
+      }
+    }
+  }
+}
+
+</style>