问题管理

src/components/uploadImage.vue

+<template ref="uploadImage">
+  <div v-loading="uploadLoading" class='finish_room'>
+    <div class='finish_room2'>
+      <viewer :images="photo">
+        <div :key="index" v-for="(src,index) in photo" :style="{width:imgWidth?(imgWidth+'px'):'100px',height:imgHeight?(imgHeight+'px'):'100px'}"
+             v-if="photo.length>0" class='room_img'>
+          <img v-lazy="src"
+               :style="{width:imgWidth?(imgWidth+'px'):'100px',height:imgHeight?(imgHeight+'px'):'100px'}">
+          <div @click="deleteImg(index)" class="im-button">
+            <div class="im-close"></div>
+            <div class="im-close1"></div>
+          </div>
+        </div>
+      </viewer>
+      <div :style="{width:'100px',height:'100px'}" v-loading="loading" class='room_add_img'>
+        <span style="margin-top: 35px"><img src="../assets/img/add_img.png"></span>
+        <input :disabled="disabled" @change='add_img' type="file">
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script>
+  import userApi from '@/api/user/user'
+
+  export default {
+    props: [
+      'imgWidth',
+      'imgHeight',
+      'value',
+      'disabled',
+      'isCompress'
+    ],
+    data: function () {
+      return {
+        photo: [],
+        loading: false,
+        uploadLoading: false
+      }
+    },
+    watch: {
+      photo() {
+        this.$emit('input', this.photo)
+      },
+      value() {
+        this.photo = this.value
+      }
+    },
+    mounted() {
+      this.photo = this.value
+    },
+    methods: {
+      deleteImg(index) {
+        this.photo.splice(index,1)
+      },
+      compress(img) {
+        var url = null;
+        var canvas = document.createElement("canvas");
+        var scale = img.height / img.width;
+        canvas.width = 720;
+        canvas.height = 720 * scale;
+
+
+        var ctx = canvas.getContext("2d");
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+        url = canvas.toDataURL("image/jpeg");
+        return url;
+
+      },
+      dataURItoBlob(dataURI) {
+        let byteString = window.atob(dataURI.split(',')[1])
+        let mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
+        let ab = new ArrayBuffer(byteString.length)
+        let ia = new Uint8Array(ab)
+        for (let i = 0; i < byteString.length; i++) {
+          ia[i] = byteString.charCodeAt(i)
+        }
+        return new window.Blob([ab], {type: mimeString})
+      },
+      add_img(event) {
+        let file = event.target.files[0]
+        if (/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(event.target.value)) {
+          this.uploadLoading = true
+          let reader = new FileReader()
+          let self = this
+          reader.readAsDataURL(file)
+          let img = new Image;
+          reader.onload = function (e) {
+            img.src = this.result;
+            img.onload = function () {
+              let base = e.target.result
+              let fileItem = file
+              if (self.isCompress) {
+                base = self.compress(img)
+                fileItem = self.dataURItoBlob(base)
+              }
+              let formdata = new window.FormData()
+              formdata.append('file', fileItem, "image.png")
+              formdata.append('action', 'test')
+              userApi.upload(formdata).then(res => {
+                event.target.value = ''
+                self.photo.push(res.data.url)
+                // self.$emit('input',res.data.url)
+                self.uploadLoading = false
+              }).catch(e => {
+                event.target.value = ''
+                self.uploadLoading = false
+              })
+            }
+          }
+        } else {
+          this.$notify.error({
+            title: '上传图片错误',
+            message: '请上传gif|jpg|jpeg|png|GIF|JPG|PNG格式图片'
+          })
+        }
+      }
+    }
+  }
+</script>
+<style>
+  .finish_room {
+    /*width: 140px;*/
+    /*height: 165px;*/
+  }
+
+  img {
+    height: 100%;
+  }
+
+  .finish_room2 {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    flex-flow: wrap;
+  }
+
+  .finish_room2>div{
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+
+  .finish_room2 .margeImg {
+    margin-left: 10px;
+  }
+
+  .finish_room2 .room_img {
+    /*width: 100%;*/
+    /*height: 100%;*/
+    cursor: pointer;
+    overflow: hidden;
+    position: relative;
+    text-align: center;
+    background-color: rgba(0, 0, 0, .5);
+    margin-left: 10px;
+    margin-top: 10px;
+  }
+
+  .finish_room2 .room_img:before {
+    /*content: "";*/
+    /*width: 0;*/
+    /*height: 100%;*/
+    /*!*background: #000;*!*/
+    /*padding: 14px 18px;*/
+    /*position: absolute;*/
+    /*top: 0;*/
+    /*left: 50%;*/
+    /*opacity: 0;*/
+  }
+
+  .finish_room2 .room_img:hover:before {
+    width: 100%;
+    left: 0;
+    opacity: 0.5;
+  }
+
+  .finish_room2 .room_img .box-content {
+    width: 100%;
+    padding: 14px 18px;
+    color: #fff;
+    position: absolute;
+    top: 38%;
+    left: 0;
+  }
+
+  .finish_room2 .room_img .icon {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    margin-top: -20px;
+  }
+
+  .finish_room2 .room_img .icon li {
+    display: inline-block;
+  }
+
+  .finish_room2 .room_img .icon li i {
+    display: block;
+    width: 40px;
+    height: 40px;
+    line-height: 40px;
+    border-radius: 50%;
+    font-size: 20px;
+    font-weight: 700;
+    color: #fff;
+    margin-right: 25px;
+    opacity: 0;
+    transform: translateY(50px);
+    transition: all 0.5s ease 0s;
+  }
+
+
+  @media only screen and (max-width: 990px) {
+    .finish_room2 .room_img {
+    }
+  }
+
+  .finish_room2 .deleteImg {
+    color: red;
+    position: absolute;
+    top: 0px;
+    left: 80px;
+    cursor: pointer;
+  }
+
+  .finish_room2 .room_img img {
+    cursor: pointer;
+    width: 100%;
+    height: 100%;
+  }
+
+  .finish_room2 > .room_img span {
+    position: absolute;
+    width: auto;
+    height: auto;
+    right: 5px;
+    bottom: 3px;
+  }
+
+  .finish_room2 .im-button {
+    position: absolute;
+    top: -14px;
+    right: -18px;
+    width: 40px;
+    height: 40px;
+    cursor: pointer;
+    border-radius: 50%;
+    background-color: rgba(0, 0, 0, .5);
+    opacity: 0;
+  }
+
+  .finish_room2 .room_img:hover .icon li i {
+    opacity: 0.5;
+  }
+
+  .finish_room2 .room_img:hover img {
+    opacity: 0.5;
+  }
+
+
+  .finish_room2 .room_img:hover .im-button {
+    opacity: 1;
+  }
+
+  .finish_room2 .im-close {
+    transform: rotate(-45deg);
+    line-height: 0px;
+    left: 6px;
+    bottom: 13px;
+    display: inline-block;
+    width: 15px;
+    height: 2px;
+    background: #fff;
+    position: absolute;
+  }
+
+  .finish_room2 .im-close1 {
+    left: 5px;
+    bottom: 13px;
+    display: inline-block;
+    width: 15px;
+    height: 2px;
+    background: #fff;
+    position: absolute;
+    transform: rotate(45deg);
+  }
+
+  .room_add_img {
+    margin-left: 10px;
+    margin-top: 10px;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    border: 1px solid #e1e1e1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    position: relative;
+    z-index: 10;
+  }
+
+  .room_add_img > span:nth-child(1) {
+    width: 30px;
+    height: 30px;
+    overflow: hidden;
+  }
+
+  .room_add_img > span:nth-child(2) {
+    margin-bottom: 10px;
+  }
+
+  .room_add_img input {
+    cursor: pointer;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+    z-index: 99999;
+    opacity: 0;
+  }
+</style>

src/views/problem/list.vue

       </el-form-item>
     </el-form>
     <div>
-      <el-button v-if="btnRule.inspectquestion_assign&&(status==1||status==='0')"
+      <el-button @click="assignList" v-if="btnRule.inspectquestion_assign&&(status==1||status==='0')"
                  :disabled="multipleSelection.length>0?false:true" size="small" type="primary">批量指派
       </el-button>
-      <el-button v-if="btnRule.inspectquestion_finished&&(status==1||status==='0'||status==2)"
+      <el-button @click="signList" v-if="btnRule.inspectquestion_finished&&(status==1||status==='0'||status==2)"
                  :disabled="multipleSelection.length>0?false:true" size="small" type="success">批量标记完成
       </el-button>
     </div>
           <el-button v-if="btnRule.inspectquestion_assign&&scope.row.status==1" type="primary" size="mini"
                      icon="el-icon-s-operation" @click="assign(scope.row)">指派
           </el-button>
-          <el-button v-if="btnRule.inspectquestion_dealWith&&scope.row.status==2&&scope.row.assignUser==info.id" type="primary" size="mini"
-                     icon="el-icon-monitor" @click="handleAddRole(scope.row)">处理
+          <el-button v-if="btnRule.inspectquestion_dealWith&&scope.row.status==2&&scope.row.assignUser==info.id"
+                     type="primary" size="mini"
+                     icon="el-icon-monitor" @click="handle(scope.row)">处理
           </el-button>
           <el-button v-if="btnRule.inspectquestion_finished&&(scope.row.status==1||scope.row.status==2)" type="success"
-                     size="mini" icon="el-icon-finished" @click="handleAddRole(scope.row)">标记完成
+                     size="mini" icon="el-icon-finished" @click="sign(scope.row)">标记完成
           </el-button>
         </template>
       </el-table-column>
                     required: true, message: '责任人不能为空', trigger: 'change'
                   }">
           <el-select @change="assignUserClick" clearable filterable v-model="ruleForm.assignUser">
-            <el-option :key="index" :value="item.id" :label="item.realname" v-for="(item,index) in userList"></el-option>
+            <el-option :key="index" :value="item.id" :label="item.realname"
+                       v-for="(item,index) in userList"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="联系方式" prop="assignContact">
                   </el-button>
               </span>
     </el-dialog>
+    <el-dialog v-if="signVisible" :close-on-press-escape="false" :close-on-click-modal="false" ref="signDialog"
+               top="5vh" center title="标记完成"
+               class="sign-dialog" :visible.sync="signVisible">
+      <el-form ref="ruleForm" :model="ruleForm" size="small" label-width="100px"
+               class="form">
+        <div style="display: flex;align-items: center;margin-left: 100px;margin-bottom: 30px;font-size: 20px">
+          <i style="font-size:28px;margin-right:10px;color: #FFAA15" class="el-icon-warning-outline"></i>确定手动标记完成？
+        </div>
+        <el-form-item label="备注" prop="note">
+          <el-input
+            rows="4"
+            type="textarea"
+            placeholder="备注"
+            v-model="ruleForm.note"
+            maxlength="99"
+            show-word-limit
+          >
+          </el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer no-print">
+              <el-button :loading="submitLoading" @click="signSubmit('ruleForm')" type="primary" size="medium"
+                         icon="el-icon-printer">提交</el-button>
+                  <el-button size="medium" icon="el-icon-back"
+                             @click="signVisible = false">返回
+                  </el-button>
+              </span>
+    </el-dialog>
+    <el-dialog v-if="handleVisible" :close-on-press-escape="false" :close-on-click-modal="false" ref="handleDialog"
+               top="5vh" center title="问题处理"
+               class="handle-dialog" :visible.sync="handleVisible">
+      <el-form ref="ruleForm" :model="ruleForm" size="small" label-width="120px"
+               class="form">
+        <el-form-item label="上传处理后图片" prop="handlerImage">
+          <uploadImage v-model="ruleForm.handlerImage"></uploadImage>
+        </el-form-item>
+        <el-form-item label="处理情况" prop="handlerResult">
+          <el-input
+            rows="4"
+            type="textarea"
+            placeholder="备注"
+            v-model="ruleForm.handlerResult"
+            maxlength="99"
+            show-word-limit
+          >
+          </el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer no-print">
+              <el-button :loading="submitLoading" @click="handleSubmit('ruleForm')" type="primary" size="medium"
+                         icon="el-icon-printer">提交</el-button>
+                  <el-button size="medium" icon="el-icon-back"
+                             @click="handleVisible = false">返回
+                  </el-button>
+              </span>
+    </el-dialog>
+
   </div>
 </template>
 
   import driverAreaSelect from "@/components/driverAreaSelect";
   import detailDialog from "./detailDialog";
   import {mapGetters} from "vuex";
+  import uploadImage from '@/components/uploadImage'
 
   export default {
     name: "problem-container",
     data() {
       return {
-        submitLoading:false,
+        handleVisible:false,
+        signVisible: false,
+        submitLoading: false,
         assignVisible: false,
         drawerWidth: document.body.clientWidth - 190 + "px",
         direction: "rtl",
           inspectTime: "",
           driverArea: ""
         },
-        ruleForm:{},
+        ruleForm: {},
         dataList: [],
         currentPage: 1,
         pageSize: parseInt((document.body.clientHeight - 365 - 43) / 47),
         tableHeight: document.body.clientHeight - 365,
         multipleSelection: [],
         userList: [],
-        ids:''
+        ids: ''
       };
     },
-    components: {driverAreaSelect, detailDialog},
+    components: {driverAreaSelect, detailDialog,uploadImage},
     computed: {
       ...mapGetters(["btnRule", "info"])
     },
     },
     watch: {},
     methods: {
-      assignSubmit(formName){
+      handle(row){
+        this.ruleForm = {
+          id: row.id + '',
+          handlerImage: [],
+          handlerResult:''
+        }
+        this.handleVisible = true
+      },
+      handleSubmit(formName){
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            this.submitLoading = true
+            api.dealWith(this.ruleForm).then(res => {
+              this.$message({
+                type: 'success',
+                message: '处理成功！'
+              })
+              this.submitLoading = false
+              this.handleVisible = false
+              this.getAllList()
+            }).catch(err => {
+              this.submitLoading = false
+            });
+          }
+        })
+      },
+      signSubmit(formName){
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            this.submitLoading = true
+            api.finished(this.ruleForm).then(res => {
+              this.$message({
+                type: 'success',
+                message: '标记完成成功！'
+              })
+              this.submitLoading = false
+              this.signVisible = false
+              this.getAllList()
+            }).catch(err => {
+              this.submitLoading = false
+            });
+          }
+        })
+      },
+      signList() {
+        let bl = true
+        let ids = []
+        this.multipleSelection.map(item => {
+          ids.push(item.id)
+          if (item.status != 1&&item.status != 2) {
+            bl = false
+          }
+        })
+        if (!bl) {
+          this.$message({
+            type: 'error',
+            message: '存在已完成状态数据，无法操作，请重新选择'
+          })
+        } else {
+          this.ruleForm = {
+            id: ids.join(','),
+            note: '',
+          }
+          this.signVisible = true
+        }
+      },
+      assignList() {
+        let bl = true
+        let ids = []
+        this.multipleSelection.map(item => {
+          ids.push(item.id)
+          if (item.status != 1) {
+            bl = false
+          }
+        })
+        if (!bl) {
+          this.$message({
+            type: 'error',
+            message: '存在非’待指派‘状态数据，无法操作，请重新选择！'
+          })
+        } else {
+          this.ruleForm = {
+            id: ids.join(','),
+            assignUser: '',
+            assignContact: '',
+            assignNote: ''
+          }
+          this.assignVisible = true
+        }
+      },
+      assignSubmit(formName) {
         this.$refs[formName].validate((valid) => {
           if (valid) {
+            this.submitLoading = true
+            api.assign(this.ruleForm).then(res => {
+              this.$message({
+                type: 'success',
+                message: '指派成功！'
+              })
+              this.submitLoading = false
+              this.assignVisible = false
+              this.getAllList()
+            }).catch(err => {
+              this.submitLoading = false
+            });
           }
         })
       },
-      assignUserClick(){
-        let ruleForm=JSON.parse(JSON.stringify(this.ruleForm))
-        if(ruleForm.assignUser){
-          let child = this.userList.find(item=>item.id==ruleForm.assignUser)
-          if(child){
-            ruleForm.assignContact=child.mobile
+      assignUserClick() {
+        let ruleForm = JSON.parse(JSON.stringify(this.ruleForm))
+        if (ruleForm.assignUser) {
+          let child = this.userList.find(item => item.id == ruleForm.assignUser)
+          if (child) {
+            ruleForm.assignContact = child.mobile
           }
-        }else{
-          ruleForm.assignContact=''
+        } else {
+          ruleForm.assignContact = ''
         }
-        this.ruleForm=Object.assign({},ruleForm)
+        this.ruleForm = Object.assign({}, ruleForm)
       },
-      assign(row){
-        this.ruleForm={
-          id:row.id,
-          assignUser:'',
-          assignContact:'',
-          assignNote:''
+      sign(row) {
+        this.ruleForm = {
+          id: row.id + '',
+          note: ''
         }
-        this.assignVisible=true
+        this.signVisible = true
+      },
+      assign(row) {
+        this.ruleForm = {
+          id: row.id + '',
+          assignUser: '',
+          assignContact: '',
+          assignNote: ''
+        }
+        this.assignVisible = true
       },
       getUserAdminList() {
         adminApi.getUserAdminList().then(res => {
         }
         this.$refs.table.clearSelection();
         this.multipleSelection = []
+        this.tableLoading = true
         searchParam.status = this.status === '0' ? '' : this.status
         api.getList(searchParam).then(res => {
           this.count = res.data.total;
       color: #333 !important;
     }
 
-    .detail-dialog {
-      .assign-dialog {
-        width: 400px !important;
+    .assign-dialog, .sign-dialog{
+      .el-dialog {
+        width: 500px !important;
+      }
+    }
+    .handle-dialog{
+      .el-dialog {
+        width: 60% !important;
       }
     }
   }