feat: 客户意见反馈

project/package-lock.json

@@ -12250,6 +12250,11 @@
         "vue": "^2.5.2"
       }
     },
+    "vue-lazyload": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/vue-lazyload/-/vue-lazyload-1.3.5.tgz",
+      "integrity": "sha512-SCO/LWgCCbjaregHO4wg2buzITBdPBZRlIS104vERGpT88uxXsK26veuzZpgGAXMR8WpkaR+JDqz80OedpaLiA=="
+    },
     "vue-loader": {
       "version": "13.7.3",
       "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-13.7.3.tgz",

project/package.json

@@ -28,6 +28,7 @@
     "vue": "^2.5.2",
     "vue-axios": "^3.2.5",
     "vue-clipboard2": "^0.3.3",
+    "vue-lazyload": "^1.3.5",
     "vue-masked-input": "^0.5.2",
     "vue-monoplasty-slide-verify": "^1.1.3",
     "vue-progress-path": "0.0.2",

project/src/assets/config/interface_api.js

@@ -483,6 +483,8 @@ var api = {
   customerShare_changeStatus: '/api/customerShare/changeStatus', // 客户共享 - 配置状态
   customerShare_setConfig: '/api/customerShare/setConfig', // 客户共享 - 创建配置
 
+  feedback_list: '/api/sys/userOpinionFeedbackList', // 客户意见反馈
+
 };
 
 export { api };

project/src/components/feedback/detailDialog.vue

@@ -0,0 +1,148 @@
+<template>
+  <el-dialog
+    :visible.sync="dialogVisible"
+    :before-close="handleCancel"
+    class="detail-dialog"
+    :title="title"
+    width="550px"
+  >
+    <div class="form-wrap" v-loading="loading">
+      <!-- 预警人员类型 -->
+      <div class="form-item">
+        <span class="lable">客户:</span>
+        <div class="customer-wrap">
+          <img v-lazy="detail.customer_avatar" />
+          <span>{{ detail.customer_name }}</span>
+        </div>
+      </div>
+      <div class="form-item">
+        <span class="lable">反馈类型:</span>
+        <span>{{ detail.type_title }}</span>
+      </div>
+      <div class="form-item flex-align-start">
+        <span class="lable">反馈内容:</span>
+        <span class="content-wrap">{{ detail.content }}</span>
+      </div>
+      <div class="form-item flex-align-start">
+        <span class="lable">图片证据:</span>
+        <div class="image-wrap" v-if="detail.attachments && detail.attachments.length">
+          <el-image
+            class="image"
+            v-for="imageUrl in detail.attachments"
+            v-lazy="imageUrl"
+            :src="imageUrl"
+            :preview-src-list="detail.attachments">
+          </el-image>
+        </div>
+        <div v-else>无</div>
+      </div>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button size="mini" type="primary" @click="handleCancel">关 闭</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  props: {
+    // 控制弹框是否显示
+    dialogVisible: {
+      type: Boolean,
+      default: () => false
+    },
+    detail: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      loading: false,
+    }
+  },
+  computed: {
+    title() {
+      return `反馈内容`
+    },
+  },
+  watch: {
+    dialogVisible(isShow) {
+      if (isShow) {
+        // do sth.
+      }
+    },
+  },
+  methods: {
+    handleCancel() {
+      this.$emit('close')
+    },
+    // 清空弹框表单数据
+    handleClearFormData() {
+      // this.form.app_id = ''
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.detail-dialog {
+  .form-wrap {
+    padding-right: 20px;
+    .form-item {
+      display: flex;
+      align-items: center;
+      margin-top: 20px;
+      &.flex-align-start {
+        align-items: flex-start;
+      }
+      &:first-child {
+        margin-top: 0;
+      }
+      .lable {
+        width: 80px;
+        font-weight: 500;
+        flex-shrink: 0;
+        text-align: right;
+        margin-right: 10px;
+
+        &.required {
+          &::before {
+            position: relative;
+            right: 2px;
+            content: "*";
+            color: #f56c6c;
+          }
+        }
+      }
+      .customer-wrap {
+        display: flex;
+        align-items: center;
+        img {
+          border-radius: 50%;
+          width: 40px;
+          height: 40px;
+          margin-right: 6px;
+        }
+      }
+      .content-wrap {
+        line-height: 20px;
+        margin-top: -2px;
+      }
+      .image-wrap {
+        display: flex;
+        flex-wrap: wrap;
+        width: 300px;
+        .image {
+          width: 80px;
+          height: 80px;
+          margin: 0 4px 4px 0;
+        }
+      }
+    }
+  }
+  .dialog-footer {
+    text-align: center;
+  }
+}
+</style>

project/src/components/feedback/getUserLinkDialog.vue

@@ -0,0 +1,175 @@
+<template>
+  <el-dialog
+    :visible.sync="dialogVisible"
+    :before-close="handleCancel"
+    class="userLink-dialog"
+    :title="title"
+    width="750px"
+    :close-on-click-modal="false"
+  >
+
+    <div class="form-wrap" v-loading="loading">
+      <div class="form-item">
+        <span class="lable required">客服:</span>
+        <customerServiceCorpV2 ref="customerServiceCorpV2" title="" placeholder="请选择客服" width="200px" @customerDefine="onChangeCorpUserList" />
+        <span class="tips">注：选择客服后自动生成反馈链接</span>
+      </div>
+    </div>
+
+    <el-table v-if="list && list.length" max-height="500" :data="list" tooltip-effect="dark" style="margin-top:10px;width: 100%;">
+      <el-table-column label="客服" prop="name" min-width="140" align="center" fixed="left" show-overflow-tooltip />
+      <el-table-column label="企微主体" prop="corp_name" min-width="140" align="center" show-overflow-tooltip />
+      <el-table-column label="反馈链接" prop="link" min-width="300" align="center" />
+      <el-table-column label="操作" fixed="right" min-width="100" align="center">
+        <template slot-scope="{ row }">
+          <span class="btn c-00b38a" @click="onClickCopy(row)">复制链接</span>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <div slot="footer" class="dialog-footer">
+      <!-- <el-button size="mini" type="primary" @click="handleCancel">关 闭</el-button> -->
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import customerServiceCorpV2 from '@/components/assembly/screen/customerServiceCorpV2.vue'
+
+export default {
+  components: {
+    customerServiceCorpV2,
+  },
+  props: {
+    // 控制弹框是否显示
+    dialogVisible: {
+      type: Boolean,
+      default: () => false
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      list: [],
+      userList: [],
+    }
+  },
+  computed: {
+    title() {
+      return `意见反馈链接`
+    },
+  },
+  watch: {
+    dialogVisible(isShow) {
+      if (isShow) {
+        // do sth.
+      }
+    },
+  },
+  methods: {
+    handleCancel() {
+      this.$emit('close')
+    },
+    // 清空弹框表单数据
+    handleClearFormData() {
+      // this.form.app_id = ''
+    },
+
+    onChangeCorpUserList({ res_format_1, res_format_2 }) {
+      console.log('res_format_1 => ', res_format_1)
+      console.log('res_format_2 => ', res_format_2)
+      if (res_format_1 && res_format_1.length) {
+        this.userList = [...res_format_1]
+        this.handleGetUserLink()
+      } else {
+        this.userList = []
+      }
+    },
+    onClickGetLink() {
+      if (!this.userList || !this.userList.length) {
+        this.$message.warning('请选择客服(可多选)')
+        return false
+      }
+      this.handleGetUserLink()
+    },
+    handleGetUserLink() {
+      if (!this.userList.length) {
+        this.list = []
+        return
+      }
+
+      const currentHost = window.location.host;
+      this.list = this.userList.map(user => ({
+        name: user.name,
+        corp_name: user.corp_name,
+        link: `${currentHost}/playlet/qwh5/dist/index.html#/feedback?corpid=${user.corpid}&user_id=${user.user_id}`
+      }))
+    },
+    async onClickCopy(row) {
+      try {
+        await this.$copyText(row.link)
+        this.$message.success('复制成功')
+      } catch (error) {
+        this.$message.error('复制失败，请重试')
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.userLink-dialog {
+  /deep/ .el-dialog__body {
+    padding-top: 10px;
+    min-height: 150px;
+  }
+  .form-wrap {
+    padding-right: 20px;
+    .form-item {
+      display: flex;
+      align-items: center;
+      margin-top: 20px;
+      &.flex-align-start {
+        align-items: flex-start;
+      }
+      &:first-child {
+        margin-top: 0;
+      }
+      .lable {
+        width: 80px;
+        font-weight: 500;
+        flex-shrink: 0;
+        text-align: right;
+        margin-right: 10px;
+
+        &.required {
+          &::before {
+            position: relative;
+            right: 2px;
+            content: "*";
+            color: #f56c6c;
+          }
+        }
+      }
+      .el-select {
+        width: 430px;
+      }
+      .tips {
+        margin-left: 10px;
+        font-size: 12px;
+        color: #666;
+      }
+    }
+  }
+  .dialog-footer {
+    text-align: center;
+  }
+  .btn {
+    cursor: pointer;
+    margin-right: 4px;
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+</style>

project/src/components/feedback/index.vue

@@ -0,0 +1,201 @@
+<template>
+  <div v-loading="loading" class="feedback-wrap">
+    <div class="self-hint">
+      <i class="el-icon-message-solid" />
+      <div>
+        <p>意见反馈使用说明1mock</p>
+        <p>意见反馈使用说明22mock</p>
+        <p>意见反馈使用说明333mock</p>
+      </div>
+    </div>
+    <div class="screenBox">
+      <div class="filter-wrap">
+        <!-- 客服 -->
+        <customerServiceCorpV2 title="客服" @customerDefine="onChangeMultiCorpUsers" />
+      </div>
+      <el-button type="primary" size="mini" @click="onClickGetUserLink">获取反馈链接</el-button>
+    </div>
+    <el-table :height="height" :data="list" tooltip-effect="dark" style="width: 100%;margin-top:10px">
+      <el-table-column label="客服" prop="user_name" min-width="160" align="center" fixed="left" />
+      <el-table-column label="企微主体" prop="corp_name" min-width="140" align="center" show-overflow-tooltip />
+      <el-table-column label="客户" prop="customer_name" min-width="200" align="center">
+        <template slot-scope="{ row }">
+          <div class="customer-wrap">
+            <!-- <img v-lazy="row.customer_avatar" /> -->
+            <div class="name">{{ row.customer_name }}</div>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="反馈类型" prop="type_title" min-width="200" align="center" />
+      <el-table-column label="反馈内容" prop="content" min-width="120" align="center" show-overflow-tooltip />
+      <el-table-column label="反馈时间" prop="create_time" min-width="160" align="center" show-overflow-tooltip />
+      <el-table-column label="操作" min-width="160" align="center" fixed="right">
+        <template slot-scope="{ row }">
+          <span class="btn c-00b38a" @click="onClickDetail(row)">查看详情</span>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="pagination" v-show="pagination.total > 0">
+      <el-pagination background :current-page="pagination.page" @current-change="handleCurrentChange" layout="prev, pager, next" :page-count="Number(pagination.pages)" />
+    </div>
+
+    <!-- S 查看反馈详情 -->
+    <getUserLinkDialog
+      :dialogVisible="getUserLinkDialogVisible"
+      @close="onCloseUserLink"
+    />
+    <!-- E 查看反馈详情 -->
+
+    <!-- S 查看反馈详情 -->
+    <detailDialog
+      :dialogVisible="detailDialogVisible"
+      :detail="currentDetail"
+      @close="onCloseDeail"
+    />
+    <!-- E 查看反馈详情 -->
+  </div>
+</template>
+
+<script>
+import customerServiceCorpV2 from '@/components/assembly/screen/customerServiceCorpV2.vue'
+import getUserLinkDialog from './getUserLinkDialog.vue'
+import detailDialog from './detailDialog.vue'
+
+export default {
+  name: 'feedback',
+  components: {
+    customerServiceCorpV2,
+    detailDialog,
+    getUserLinkDialog,
+  },
+  data () {
+    return {
+      sys_group_id: this.$cookie.getCookie('isSuperManage') == 1 ? sessionStorage.getItem('company_session_defaultCorp_level_1').toString() : '',
+      height: '',
+      loading: false,
+      pagination: {
+        page: 1,
+        page_size: 20,
+        pages: 0,
+        total: 0,
+      },
+      filter: {
+        user_id: [],
+      },
+      list: [],
+
+      detailDialogVisible: false,
+      currentDetail: {},
+
+      getUserLinkDialogVisible: false,
+    }
+  },
+  created () {
+    this.height = document.documentElement.clientHeight - 200
+    this.handleGetList()
+  },
+  methods: {
+    // 获取列表数据
+    async handleGetList() {
+      try {
+        this.loading = true
+        const url = `${this.URL.BASEURL}${this.URL.feedback_list}`
+        const params = {
+          sys_group_id: this.sys_group_id,
+          user_id: this.filter.user_id,
+          page: this.pagination.page,
+          page_size: this.pagination.page_size,
+        }
+        const { data: res = {} } = await this.$axios.post(url, params)
+        if (res && res.errno == 0 && Array.isArray(res.rst.data)) {
+          this.list = res.rst.data;
+          this.pagination.total = res.rst.pageInfo.total;
+          this.pagination.pages = res.rst.pageInfo.pages;
+        } else if (res.errno != 4002) {
+          this.$message.warning(res.err)
+          this.list = [];
+          this.pagination.total = 0;
+          this.pagination.pages = 0;
+        }
+      } catch (error) {
+        console.log(error)
+        this.list = [];
+        this.pagination.total = 0;
+        this.pagination.pages = 0;
+      } finally {
+        this.loading = false
+      }
+    },
+    // 监听当前页数变化
+    handleCurrentChange(currentPage) {
+      this.pagination.page = currentPage
+      this.handleGetList()
+    },
+    //监听客服变化
+    onChangeMultiCorpUsers({ res_format_1 }) {
+      if (res_format_1 && res_format_1.length) {
+        this.filter.user_id = res_format_1.map(u => ({
+          user_id: u.user_id,
+          corpid: u.corpid,
+        }))
+      } else {
+        this.filter.user_id = []
+      }
+      this.pagination.page = 1
+      this.handleGetList()
+    },
+
+    onClickGetUserLink() {
+      this.getUserLinkDialogVisible = true
+    },
+    onCloseUserLink() {
+      this.getUserLinkDialogVisible = false
+    },
+
+    onClickDetail(row) {
+      this.currentDetail = { ...row }
+      this.detailDialogVisible = true
+    },
+    onCloseDeail() {
+      this.currentDetail = {}
+      this.detailDialogVisible = false
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/style/list.scss";
+.feedback-wrap {
+  .screenBox {
+    background: #fff;
+    padding: 5px 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .filter-wrap {
+      flex: 1;
+      display: flex;
+      flex-wrap: wrap;
+    }
+  }
+  .btn {
+    cursor: pointer;
+    margin-right: 4px;
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+  .customer-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    img {
+      border-radius: 50%;
+      width: 40px;
+      height: 40px;
+      margin-right: 4px;
+    }
+  }
+}
+</style>

project/src/components/license/errListDialog.vue

@@ -28,7 +28,7 @@ export default {
       default: () => false
     },
     list: {
-      type: [],
+      type: Array,
       default: () => []
     }
   },

project/src/main.js

@@ -34,6 +34,9 @@ Vue.use(VueClipboard)
 import instructions from '@/components/assembly/instructions.vue'
 Vue.component("instructions", instructions)
 
+import VueLazyload from 'vue-lazyload'
+Vue.use(VueLazyload)
+
 Vue.prototype.$getDay = getDay;
 Vue.prototype.$timeStamp_to_date = timeStamp_to_date;
 Vue.prototype.$judgePhone = judgePhone;

project/src/router/allRouter.js

@@ -38,6 +38,7 @@ const permissionManage = () => import(/* webpackChunkName: 'permissionManage' */
 const roleManage = () => import(/* webpackChunkName: 'roleManage' */ '@/components/manage/roleManage.vue')
 const menuManage = () => import(/* webpackChunkName: 'menuManage' */ '@/components/manage/menuManage.vue')
 const systemMsg = () => import(/* webpackChunkName: 'systemMsg' */ '@/components/manage/systemMsg.vue')
+const feedback = () => import(/* webpackChunkName: 'feedback' */ '@/components/feedback/index.vue')
 const orderPercent = () => import(/* webpackChunkName: 'orderPercent' */ '@/components/manage/orderPercent/index.vue')
 const thePublic = () => import(/* webpackChunkName: 'thePublic' */ '@/components/dataBoard/thePublic.vue')
 const playletData = () => import(/* webpackChunkName: 'playletData' */ '@/components/dataBoard/playletData.vue')
@@ -666,6 +667,16 @@ export var allRouter = [
         }
       },
       {
+        path: 'feedback',
+        name: 'feedback',
+        component: feedback,
+        meta: {
+          keepAlive: false,
+          isLogin: true,
+          title: '意见反馈',
+        }
+      },
+      {
         path: 'orderPercent',
         name: 'orderPercent',
         component: orderPercent,