工单

config/index.js

@@ -23,7 +23,7 @@ module.exports = {
     },
 
     // Various Dev Server settings
-    host: '192.168.110.157', // can be overwritten by process.env.HOST
+    host: '192.168.110.162', // can be overwritten by process.env.HOST
     port: 8001, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: true,
     errorOverlay: true,

src/components/imgPrev.vue

@@ -0,0 +1,98 @@
+<template>
+  <div>
+    <!-- 图片预览 -->
+    <div id="modal" class="modal">
+        <span class="close" @click="close">&times;</span>
+        <img class="modal-content" :src="url">
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+    props:['url'],
+    methods:{
+        close(){
+            this.$emit('close')
+        },
+    }
+}
+</script>
+
+<style>
+ .zoomable {
+     width: 100%;
+     max-width: 300px;
+     cursor: pointer;
+ }
+
+ /* 模态框 */
+ .modal {
+     /* display: none; */
+     display: flex; align-items: center;
+     position: fixed;
+     /* 确保层级在上 */
+     z-index: 1;
+     padding-top: 100px;
+     left: 0;
+     top: 0;
+     width: 100%;
+     height: 100%;
+     overflow: auto;
+     background-color: rgba(0, 0, 0, 0.2);
+ }
+
+ .modal-content {
+     margin: auto;
+     display: block; background: #fff;
+     /* width: 80%; */
+     max-width: 700px;
+     max-height: 80vh;
+ }
+
+ .modal-content {
+     -webkit-animation-name: zoom;
+     -webkit-animation-duration: 0.6s;
+     animation-name: zoom;
+     animation-duration: 0.6s;
+ }
+
+ @-webkit-keyframes zoom {
+     from {
+         -webkit-transform: scale(0)
+     }
+
+     to {
+         -webkit-transform: scale(1)
+     }
+ }
+
+ @keyframes zoom {
+     from {
+         transform: scale(0)
+     }
+
+     to {
+         transform: scale(1)
+     }
+ }
+
+ /* 关闭按钮 */
+ .close {
+     position: absolute;
+     top: 15%;
+     right: 35px;
+     color: #fff;
+     font-size: 40px;
+     font-weight: bold;
+     transition: 0.3s;
+ }
+
+ .close:hover,
+ .close:focus {
+     color: #14b3e4;
+     text-decoration: none;
+     cursor: pointer;
+ }
+
+</style>

src/router/index.js

@@ -65,6 +65,7 @@ const mainRoutes = {
     { path: '/course-courseVideo', component: _import('modules/course/courseVideo'), name: 'course-courseVideo', meta: { title: '课程目录章节视频列表', isTab: true } },
     { path: '/course-sociologyList', component: _import('modules/course/sociologyList'), name: 'course-sociologyList', meta: { title: '国学标签列表', isTab: true } },
     { path: '/userCourse', component: _import('modules/user/userCourse'), name: 'userCourse', meta: { title: '用户课程列表', isTab: true } },
+    { path: '/workOrder', component: _import('modules/workOrderLIst'), name: 'workOrder', meta: { title: '工单列表', isTab: true } },
   ],
   beforeEnter (to, from, next) {
     let token = Vue.cookie.get('token')

src/utils/imgPre.js

@@ -0,0 +1,25 @@
+var modal = document.getElementById("modal");
+
+var modalImg = document.getElementById("modalImage");
+
+var images = document.querySelectorAll(".zoomable");
+
+// 遍历为每个图片元素添加事件监听器
+images.forEach(function (image) {
+    image.addEventListener("click", function () {
+        modal.style.display = "block";
+        modalImg.src = this.src;
+    });
+});
+
+var span = document.querySelector(".close");
+
+span.addEventListener("click", function () {
+    modal.style.display = "none";
+});
+
+modal.addEventListener("click", function (event) {
+    if (event.target == modal) {
+        modal.style.display = "none";
+    }
+});

src/views/main-navbar.vue

@@ -28,7 +28,7 @@
           <el-badge value="hot">
             <a href="https://www.renren.io/" target="_blank">官方社区</a>
           </el-badge>
-        </el-menu-item>
+        </el-menu-item>       
         <el-submenu index="3">
           <template slot="title">Git源码</template>
           <el-menu-item index="2-1"><a href="https://github.com/renrenio/renren-fast-vue" target="_blank">前端</a></el-menu-item>
@@ -59,12 +59,12 @@
   export default {
     data () {
       return {
-        updatePassowrdVisible: false
+        updatePassowrdVisible: false       
       }
     },
     components: {
       UpdatePassword
-    },
+    },   
     computed: {
       navbarLayoutType: {
         get () { return this.$store.state.common.navbarLayoutType }
@@ -82,7 +82,7 @@
       }
     },
     methods: {
-      // 修改密码
+       // 修改密码
       updatePasswordHandle () {
         this.updatePassowrdVisible = true
         this.$nextTick(() => {

src/views/modules/workOrderLIst.vue

@@ -0,0 +1,315 @@
+<template>
+  <div>
+    <el-form :inline="true" :model="query" @keyup.enter.native="getDataList()">
+      <el-form-item label="账户名">
+        <el-input
+          v-model="query.account"
+          placeholder="请输入账户名"
+          clearable
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="工单类型">
+        <!-- <el-input
+          v-model="query.type"
+          placeholder="出版社名称"
+          clearable
+        ></el-input> -->
+        <el-select v-model="query.type" placeholder="请选择" clearable @change="selectChange">
+          <el-option
+            v-for="item in typeLIst"
+            :key="item.value"
+            :label="item.text"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="工单状态" >
+        <!-- <el-input
+          v-model="query.status"
+          placeholder="作者姓名"
+          clearable
+        ></el-input> -->
+        <el-select v-model="query.status" placeholder="请选择" clearable @change="selectChange">
+          <el-option
+            v-for="item in statusList"
+            :key="item.value"
+            :label="item.text"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="getDataList()">查询</el-button>
+      </el-form-item>
+    </el-form>
+    <el-table
+      :data="dataList"
+      border
+      v-loading="dataListLoading"
+      style="width: 100%;"
+    >
+      <el-table-column
+        prop="type" width="150"
+        header-align="center"
+        align="center"
+        label="工单类型"
+      >
+        <template slot-scope="scope">
+          {{ scope.row.type | getType }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="account" width="150"
+        header-align="center"
+        align="center"
+        label="用户账户"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="content"
+        header-align="center"
+        align="left"
+        label="问题描述"
+      >
+      <template slot-scope="scope">
+        <div>问题描述：{{scope.row.content}}</div>
+        <div>提交时间：{{scope.row.createTime}}</div>
+        <div v-if="scope.row.type == '3'">关联订单号：{{scope.row.relation}}</div>
+      </template>
+      </el-table-column>
+      <el-table-column width="150"
+        prop="contactInformation"
+        header-align="center"
+        align="center"
+        label="联系电话"
+      >
+      </el-table-column>
+      <el-table-column       
+        header-align="center"
+        align="center"
+        label="问题截图"
+      >
+      <template slot-scope="scope"> 
+        <div v-if="scope.row.images && scope.row.images.length > 0">         
+          <img @click="clickImg(item)" :src="item" v-for="(item, index) in scope.row.images" :key="index" style="width:60px; cursor: pointer;"/>
+        </div>      
+        
+      </template>
+    </el-table-column>
+    <el-table-column width="160" v-if="query.status == 1"
+        prop="updateTime"
+        header-align="center"
+        align="center"
+        label="处理时间"
+      >
+      </el-table-column>
+      <el-table-column header-align="center" align="center" label="操作" width="150px">
+        <template slot-scope="scope">
+          <el-button v-show="query.status == 0"
+            type="primary" plain
+            size="small"
+            @click="changeHandle(scope.row)"
+            >标记为已处理</el-button
+          >
+          <el-button  
+            type="danger" style="margin-top:15px"
+            size="small" plain
+            @click="deleteHandle(scope.row)"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <img-prev-vue v-if="showImg" :url="curImg" @close="closeImg"></img-prev-vue>  
+  </div>
+</template>
+
+<script>
+import imgPrevVue from '../../components/imgPrev.vue';
+
+export default {
+  data() {
+    return {
+      query: {
+        account: "",
+        type: "",
+        status: "0"
+      },
+      showImg:false,
+      curImg:'',
+      dataList: [],
+      dataListLoading: false,
+      statusList: [
+        // { value: 0, text: "请选择" },
+        {
+          value: "0",
+          text: "未处理"
+        },
+        {
+          value: "1",
+          text: "已处理"
+        }
+      ],
+      // pageIndex
+      typeLIst: [
+        // { value: 0, text: "请选择" },
+        {
+          value: 1,
+          text: "登陆相关问题"
+        },
+        {
+          value: 2,
+          text: "账号相关问题"
+        },
+        {
+          value: 3,
+          text: "订单相关问题"
+        },
+        {
+          value: 4,
+          text: "购买相关问题"
+        },
+        {
+          value: 5,
+          text: "VIP相关问题"
+        },
+        {
+          value: 6,
+          text: "充值相关问题"
+        },
+        {
+          value: 7,
+          text: "网络暴力举报"
+        },
+        {
+          value: 8,
+          text: "其他"
+        }
+      ]
+    };
+  },
+  created() {
+    this.getDataList();
+  },
+  filters: {
+    getType: function(value) {
+      var _str = "";
+      switch (value) {
+        case "1":
+          _str = "登陆相关问题";
+          break;
+
+        case "2":
+          _str = "账号相关问题";
+          break;
+
+        case "3":
+          _str = "订单相关问题";
+          break;
+
+        case "4":
+          _str = "购买相关问题";
+          break;
+
+        case "5":
+          _str = "VIP相关问题";
+          break;
+
+        case "6":
+          _str = "充值相关问题";
+          break;
+
+        case "7":
+          _str = "网络暴力举报";
+          break;
+
+        case "8":
+          _str = "其他";
+          break;
+      }
+
+      return _str;
+    }
+  },
+  components:{
+    imgPrevVue
+  },
+  methods: {
+    selectChange(){
+      this.getDataList()
+    },
+    closeImg(){      
+      this.showImg = false
+      this.curImg = ''
+    },
+    clickImg(url){
+      console.log('url',url)
+      this.curImg = url
+      this.showImg = true
+    },
+    changeHandle(val){
+      this.$http({
+        url: this.$http.adornUrl("/common/sysFeedback/editStatusById"),
+        method: "post",
+        data: this.$http.adornData({ sysFeedbackId: val.id })
+      })
+        .then(({ data }) => {
+          this.$message.success('设置成功')
+          this.getDataList()
+        }).catch(e => {          
+          this.$message.error("设置失败");
+        });
+    },
+    deleteHandle(val){
+      this.$http({
+        url: this.$http.adornUrl("/common/sysFeedback/delById"),
+        method: "post",
+        data: this.$http.adornData({ sysFeedbackId: val.id })
+      })
+        .then(({ data }) => {
+          this.$message.success('删除成功')
+          this.getDataList()
+        }).catch(e => {          
+          this.$message.error("删除失败");
+        });
+    },
+    getDataList() {
+      this.dataListLoading = true;
+      this.$http({
+        url: this.$http.adornUrl("/common/sysFeedback/getList"),
+        method: "post",
+        data: this.$http.adornData({ ...this.query })
+      })
+        .then(({ data }) => {
+          if (data.code == 0) {
+            let _list = []
+            if(data.res.length > 0){
+              _list = data.res
+              _list.forEach(item => {                
+                if(item.image && item.image != ''){
+                  item.images = item.image.split(",");
+                  // console.log('item.image',item.images)
+                }               
+              })              
+            }
+            console.log('_list',_list)
+              this.dataList = _list;
+          }
+          this.$nextTick(() => {
+            this.dataListLoading = false;
+          });
+        })
+        .catch(e => {
+          this.dataList = [];
+          this.dataListLoading = false;
+          this.$message.error("获取数据失败");
+          // console.log("表单提交报错");
+        });
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped></style>