商品常见问题

src/api/problem.js

@@ -0,0 +1,63 @@
+
+import request from '@/utils/request'
+
+/**
+ * 新增
+ * @param pram
+ */
+export function createApi(data) {
+    return request({
+        url: '/admin/problem/save',
+        method: 'POST',
+        data
+    })
+}
+
+/**
+ * 更新
+ * @param pram
+ */
+export function updateApi(data) {
+    return request({
+        url: '/admin/problem/update',
+        method: 'POST',
+        data
+    })
+}
+
+/**
+ * 详情
+ * @param pram
+ */
+export function detailApi(id) {
+    return request({
+        url: `/admin/problem/info/${id}`,
+        method: 'GET'
+    })
+}
+
+/**
+ * 删除
+ * @param pram
+ */
+export function deleteApi(params) {
+    return request({
+        url: `/admin/problem/delete`,
+        method: 'post',
+        params
+    })
+}
+
+
+/**
+ * 列表
+ * @param pram
+ */
+export function listApi(params) {
+    return request({
+        url: '/admin/problem/list',
+        method: 'GET',
+        params
+    })
+}
+

src/router/modules/store.js

@@ -36,12 +36,12 @@ const storeRouter = {
         name: 'StoreComment',
         meta: { title: '商品评论', icon: '' }
       },
-      // {
+      {
-      //   path: 'problem',
+        path: 'problem/:id?',
-      //   component: () => import('@/views/store/problem/index'),
+        component: () => import('@/views/store/problem/index'),
-      //   name: 'Problem',
+        name: 'Problem',
-      //   meta: { title: '商品常见问题', icon: '' }
+        meta: { title: '商品常见问题', icon: '' }
-      // },
+      },
       {
         path: 'list/creatProduct/:id?/:isDisabled?',
         component: () => import('@/views/store/creatStore/index'),

src/views/home/add-and-update.vue

@@ -188,8 +188,10 @@ export default {
             api.homeCreateApi(this.dataForm).then(res => {
               this.$message.success('新增成功');
             });
+          setTimeout(() => {
+            this.$emit('refreshDataList')
+          }, 600)
           this.visible = false;
-          this.$emit('refreshDataList');
         }
       })
     },

src/views/home/index.vue

@@ -211,12 +211,6 @@ export default {
         this.$refs.addOrUpdate.init(id)
       })
     },
-    // 添加/修改 子项
-    addOrUpdateItem() {
-      this.$nextTick(() => {
-        this.$refs.addOrUpdateItem.init(id)
-      })
-    },
     // 删除
     deleteHandle(id) {
       var ids = id ? [id] : this.dataListSelections.map(item => {

src/views/store/index.vue

@@ -134,8 +134,11 @@
             <router-link :to="{path: '/store/list/creatProduct/' + scope.row.id}">
               <el-button type="text" size="small" class="mr10" v-if="tableFrom.type !== '5' && tableFrom.type !== '1'" v-hasPermi="['admin:product:update']">编辑</el-button>
             </router-link>
-            <el-button  v-if="tableFrom.type === '5'" type="text" size="small" @click="handleRestore(scope.row.id, scope.$index)" v-hasPermi="['admin:product:restore']">恢复商品</el-button>
+            <el-button v-if="tableFrom.type === '5'" type="text" size="small" @click="handleRestore(scope.row.id, scope.$index)" v-hasPermi="['admin:product:restore']">恢复商品</el-button>
             <el-button type="text" size="small" @click="handleDelete(scope.row.id, tableFrom.type)" v-hasPermi="['admin:product:delete']">{{ tableFrom.type === '5' ? '删除' : '加入回收站' }}</el-button>
+            <router-link :to="{path: '/store/problem/' + scope.row.id + ''}">
+              <el-button type="text" size="small" class="mr10" v-hasPermi="['admin:problem:info']">常见问题</el-button>
+            </router-link>
           </template>
         </el-table-column>
       </el-table>
@@ -151,6 +154,7 @@
         />
       </div>
     </el-card>
+
     <el-dialog
       title="复制淘宝、天猫、京东、苏宁"
       :visible.sync="dialogVisible"
@@ -176,7 +180,6 @@
           </el-col>
         </el-row>
     </el-dialog>
-
   </div>
 </template>
 
@@ -201,7 +204,8 @@ import { checkPermi } from "@/utils/permission";
 import CreatTemplates from "@/views/systemSetting/logistics/shippingTemplates/creatTemplates.vue";
 import edit from "@/components/Category/edit.vue";
 import tableHeader from "element-ui/packages/table/src/table-header";
-import {fileImageApi} from "@/api/systemSetting"; // 权限判断函数
+import {fileImageApi} from "@/api/systemSetting";
+import AddOrUpdate from "@/views/home/add-and-update.vue"; // 权限判断函数
 export default {
   name: 'ProductList',
   computed: {
@@ -209,7 +213,7 @@ export default {
       return tableHeader
     }
   },
-  components: {edit, CreatTemplates, taoBao, UploadExcelComponent },
+  components: {AddOrUpdate, edit, CreatTemplates, taoBao, UploadExcelComponent },
   data() {
     return {
       props: {
@@ -241,6 +245,7 @@ export default {
       objectUrl: process.env.VUE_APP_BASE_API,
       dialogVisible: false,
       importVisible: false,
+      problemVisible: false,
     }
   },
   mounted() {
@@ -401,6 +406,12 @@ export default {
         })
       })
     },
+    productProblem(id) {
+      this.problemVisible = true
+      this.$nextTick(() => {
+        this.$refs.problemList.init(id)
+      })
+    },
     onchangeIsShow(row) {
       row.isShow
         ? putOnShellApi( row.id ).then(() => {

src/views/store/problem/add-and-update.vue

@@ -0,0 +1,90 @@
+<template>
+  <div>
+    <!-- 基于 Element UI 新增和修改弹窗 -->
+    <el-dialog
+      :title="!dataForm.id ? '添加' : '修改'"
+      :close-on-click-modal="false"
+      :visible.sync="visible"
+    >
+      <!-- 新增和创建表单表单 -->
+      <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataSubmit()" label-width="90px">
+        <el-form-item label="问题：" prop="title">
+          <el-input v-model="dataForm.title" placeholder="问题"></el-input>
+        </el-form-item>
+        <el-form-item label="回答：" prop="content">
+          <Tinymce v-model="dataForm.content" placeholder="回答"></Tinymce>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">取消</el-button>
+      <el-button type="primary" @click="dataSubmit()">确定</el-button>
+    </span>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+import Tinymce from '@/components/Tinymce/index'
+import * as api from '@/api/problem.js'
+
+export default {
+  components: { Tinymce },
+  data() {
+    return {
+      visible: false,
+      productCateList: [],
+      selectProductVisible: false,
+      selectProductShow: false,
+      dataForm: {
+        id: 0,
+        title: '',
+        content: '',
+        businessId: '',
+      },
+      dataRule: {
+        title: [
+          {required: true, message: '问题 为必填项', trigger: 'blur'}
+        ],
+        content: [
+          {required: true, message: '回答 为必填项', trigger: 'blur'}
+        ],
+      }
+    }
+  },
+  methods: {
+    init(id, businessId) {
+      this.dataForm.id = id || 0
+      this.dataForm.businessId = businessId
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          api.detailApi(id).then(res => {
+            this.dataForm.title = res.title;
+            this.dataForm.content = this.$selfUtil.replaceImgSrcHttps(res.content);
+          })
+        }
+      })
+    },
+    // 表单数据提交
+    dataSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          this.dataForm.id ?
+            api.updateApi(this.dataForm).then(res => {
+              this.$message.success('修改成功');
+            }) :
+            api.createApi(this.dataForm).then(res => {
+              this.$message.success('新增成功');
+            });
+          setTimeout(() => {
+            this.$emit('refreshDataList')
+          }, 600)
+          this.visible = false;
+        }
+      })
+    },
+  }
+}
+</script>

src/views/store/problem/index.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="divBox">
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <div class="container">
+          <el-form ref="form" inline :model="dataForm" size="small">
+            <el-form-item label="标题：">
+              <el-input v-model="dataForm.title" placeholder="请输入问题/回答内容" class="selWidth" clearable>
+                <el-button slot="append" icon="el-icon-search" @click="handleSearch" />
+              </el-input>
+            </el-form-item>
+          </el-form>
+        </div>
+        <div class="acea-row">
+          <el-button v-hasPermi="['admin:problem:save']" size="mini" type="primary" @click="addOrUpdateHandle()">新增数据</el-button>
+          <el-button v-hasPermi="['admin:problem:delete']" size="mini" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
+        </div>
+      </div>
+      <el-table
+        ref="table"
+        v-loading="dataListLoading"
+        :data="dataList"
+        style="width: 100%"
+        size="mini"
+        highlight-current-row
+        @selection-change="selectionChangeHandle"
+      >
+        <el-table-column
+          type="selection"
+          header-align="center"
+          align="center"
+          width="50">
+        </el-table-column>
+        <el-table-column
+          prop="title"
+          header-align="center"
+          align="center"
+          label="问题">
+        </el-table-column>
+        <el-table-column
+          prop="content"
+          header-align="center"
+          align="center"
+          label="回答">
+        </el-table-column>
+        <el-table-column
+          fixed="right"
+          header-align="center"
+          align="center"
+          width="250"
+          label="操作">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
+            <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        @size-change="sizeChangeHandle"
+        @current-change="currentChangeHandle"
+        :current-page="pageIndex"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="pageSize"
+        :total="totalPage"
+        layout="total, sizes, prev, pager, next, jumper">
+      </el-pagination>
+      <!-- 表单弹窗, 新增数据和修改数据 -->
+      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+    </el-card>
+  </div>
+</template>
+<script>
+import AddOrUpdate from './add-and-update'
+import * as api from '@/api/problem.js'
+
+export default {
+  data() {
+    return {
+      dataForm: {
+        title: '',
+        businessId: ''
+      },
+      dataList: [],
+      pageIndex: 1,
+      pageSize: 10,
+      totalPage: 0,
+      dataListLoading: false,
+      dataListSelections: [],
+      addOrUpdateVisible: false,
+    }
+  },
+  components: {
+    AddOrUpdate
+  },
+  mounted() {
+    this.dataForm.businessId = this.$route.params.id
+    this.getDataList()
+  },
+  methods: {
+    // 获取数据列表
+    getDataList() {
+      this.dataListLoading = true
+      api.listApi(this.dataForm).then(res => {
+        this.dataList = res.list
+        this.totalPage = res.total
+        this.dataListLoading = false
+      }).catch(res => {
+        this.dataListLoading = false
+        this.$message.error(res.message)
+      })
+    },
+    handleSearch() {
+      this.page = 1
+      this.getDataList()
+    },
+    // 每页数
+    sizeChangeHandle(val) {
+      this.pageSize = val
+      this.pageIndex = 1
+      this.getDataList()
+    },
+    // 当前页
+    currentChangeHandle(val) {
+      this.pageIndex = val
+      this.getDataList()
+    },
+    // 多选
+    selectionChangeHandle(val) {
+      this.dataListSelections = val
+    },
+    // 新增 / 修改
+    addOrUpdateHandle(id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id, this.dataForm.businessId)
+      })
+    },
+    // 删除
+    deleteHandle(id) {
+      var ids = id ? [id] : this.dataListSelections.map(item => {
+        return item.id
+      })
+      this.$confirm(`您确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        api.deleteApi({ids : ids.join(',')}).then(res => {
+          this.$message.success('操作成功')
+          this.getDataList()
+        })
+      })
+    }
+  }
+}
+</script>