fj-dc-ui/.svn/pristine/ae/ae3b16e264c81bddc3912402fc2cdec73752b5a7.svn-base

<!--  -->
<template>
  <div>
    <el-button @click="addProblem" type="primary" style="float: right;margin-bottom: 10px">添加问题</el-button>
    <!-- 查询展示 -->
    <div v-if="formIsShow" style="margin-top:10px;">
      <el-table
        border
        ref="multipleTable"
        :data="searchResult"
        :height="tableHeight"
        tooltip-effect="dark"
        style="width: 100%;"
      >
        <el-table-column align="center" type="index" label="序号" min-width="25" fixed>
          <template slot-scope="scope">{{ (currentPage - 1) * pageSize + (scope.$index + 1) }}</template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="180"
          prop="pblmDesc"
          label="问题描述"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="150"
          prop="inTm"
          :formatter="timestampToTime"
          label="创建时间"
          show-overflow-tooltip
        >
          <tempalte slot-scope="scope">
            <span v-if="scope.row.inTm">{{timestampToTime(scope.row.inTm)}}</span>
          </tempalte>
        </el-table-column>
        <el-table-column
                align="center"
                prop
                min-width="130"
                label="操作"
                fixed="right"
              >
                <template slot-scope="scope">
                  <!--<el-button icon="el-icon-view"  title="查看详情"type="text" @click="showDetails(scope.row.pblmId)"></el-button>-->
                  <el-button v-if="ownPriv('manage')" title="修改问题" icon="el-icon-edit" type="text" @click="addProblem(scope.row.id,'edit')"></el-button>
                  <el-button v-if="ownPriv('manage')"
                    icon="el-icon-delete"
                    type="text"
                     title="删除问题" @click="removeSuperviseOne(scope.row.id)"
                  ></el-button>
                </template>
              </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div style="height: 60px;">
        <el-pagination
          class="paginationCenter"
          background
          @size-change="handleSizeChange"
          @current-change="search"
          :current-page.sync="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <el-dialog
      width="60%"
      :append-to-body="true"
      class="problemLastYear"
      :title="titleProblem"
      :close-on-click-modal="false"
      :visible.sync="addProblemLastYearVisible"
    >
      <div class="scroll300">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
          <el-form-item label="详细描述" prop="pblmDesc">
            <el-input type="textarea" :rows="5" v-model="ruleForm.pblmDesc"></el-input>
          </el-form-item>
          <el-form-item style="float: right; margin-top: 20px;">
            <el-button type="primary" @click="onSubmitaddProblemLastYear('ruleForm')">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import {

  showDetailsXq,
  submitUpload,
  deleteFileById,

} from "../../api/duChaAPI.js";
import request from "../../utils/gw_ajax_request.js";
import { hostUrl } from "@util/global_variable.js";
import elaudio from "../../widgets/elAudioShort.vue";
import inuptWithDuChaTreeNode from "../../widgets/inuptWithDuChaTreeNode.vue";
import inputWidthDuChaNodes from "../../widgets/inputWithDuChaNodes.vue";
import inputWidthDuChaShuiKu from "../../widgets/inputWith_sk.vue";
// import problemDialog from "../duChaWenTi/addProblem/problem_dialog";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    //详情页
    supervisionDetails: resolve => {
      require(["../duChaWenTi/supervisionDetails_shuiku.vue"], resolve);
    },
    upload: resolve => {
      require(["../../widgets/uploadFile.vue"], resolve);
    },
    // 删除描述页
    ProblemDelete: resolve => {
      require(["../duChaWenTi/problemDelete.vue"], resolve);
    },
    elaudio: elaudio,
    inuptWithDuChaTreeNode: inuptWithDuChaTreeNode,
    inputWidthDuChaNodes: inputWidthDuChaNodes,
    inputWidthDuChaShuiKu: inputWidthDuChaShuiKu,
  },
  props: ["activedName","currentResCode","currentObjectRgstrId","currentObjectName","szRuls","currentObjectId","showOrEdit","swhsId","swhsCode"],
  data() {
    //这里存放数据
    return {
      addProblemLastYearVisible: false,
      ruleForm: {
        "pblmDesc": "",
      },
      tableHeight: window.innerHeight * .5,
      supervisionState: [
        {
          value: "0",
          label: "一般"
        },
        {
          value: "1",
          label: "较重"
        },
        {
          value: "2",
          label: "严重"
        },
        {
          value: "3",
          label: "特别严重"
        }
      ],
      supervision: [
        {
          value: "1",
          label: "是"
        },
        {
          value: "0",
          label: "否"
        }
      ],
      updateIdXiuGai: "",
      pblmId: "",
      addPicPanel: false,
      supervisionDetailsVisible:false,
      currentProblemId: "",
      currentPage: 1, // 页码
      pageSize: 20,
      loading: false,
      total: 0, // 总数
      searchResult: [], // 结果
      userId: localStorage.getItem("userid"),
      pictureArray: [],
      audioArray: [],
      videoArray: [],
      audiotabName: "",
      videotabName: "",
      picturetabName: "",
      deleteId: "",
      playerOptions: {
        height: "120",
        autoplay: true,
        muted: true,
        language: "en",
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        sources: [
          {
            type: "video/mp4",
            // mp4
            src: "http://vjs.zencdn.net/v/oceans.mp4"
            // webm
            // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
          },
          {
            type: "video/mp4",
            // mp4
            src: "http://vjs.zencdn.net/v/oceans.mp4"
            // webm
            // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
          },
          {
            type: "video/mp4",
            // mp4
            src: "http://vjs.zencdn.net/v/oceans.mp4"
            // webm
            // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
          },
          {
            type: "video/mp4",
            // mp4
            src: "http://vjs.zencdn.net/v/oceans.mp4"
            // webm
            // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
          }
        ]
      },
      changeSupervisionVisible: false,
      changeSupervisionLoading: false,
      changeSupervision: {
        nm: "",
        presId: localStorage.getItem("userid"),
        endTime: "",
        pblmId: "",
        objId: "",
        objType: "",
        inspGroupId: "",
        inspPblmName: "",
        inspPblmDesc: "",
        pblmLong: "",
        pblmLat: "",
        pblmStat: "",
        ifCasePblm: "",
        inspPblmOrgName: "",
        pblmPersName: "",
        inspPblmCate: "",
        reviOpin: "",
        reviConc: "",
        reviOrgGuid: "",
        collTime: "",
        recPers: "",
        gwComFiles: [
          {
            id: "",
            filePath: "",
            bizId: ""
          }
        ]
      },
      // 文件弹框
      fileList: [], // 当前文件列表
      flash: false,
      // 督查类型
      supervisionTypeList: [
        {
          value: "1",
          label: "小水库"
        }
      ],
      leibie: [],
      // 查询
      value6: [],
      findParams: {
        hasVedio:"",
        adCode: "",
        pblmStat: "",
        inspPblmCate: "",
        ifCasePblm: "",
        nm: "",
        rsName: "",
        adFullName: "",
        startTime: "",
        endTime: "",
        objType: 1,
        inspPblmName: "",
        persId: localStorage.getItem("userid")
      },
      crId: "", // 当前督查id
      // 督查详情
      userid: localStorage.getItem("userid"),
      problemDeleteVisible: false,
      supervisionDetails: {},
      gwComFiles: [],
      pblscr: "",
      pblscrList: [
        {
          lable: "我的问题",
          value: localStorage.getItem("userid")
        }
      ],
      pblscrGroup: "",
      showAddProblemDialog: false,
      formIsShow: true,
      rules: {
        pblmDesc: [
          { required: true, message: '详细描述不能为空', trigger: 'blur' }
        ]
      },
      titleProblem:"添加问题"

    };
  },
  //监听属性 类似于data概念
  computed: {
    hostUrl(){
        return hostUrl
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    if (this.showOrEdit === "show") {
      this.formIsShow = false;
    } else {
      this.formIsShow = true;
    }
    this.addPicPanel = false;
    if (this.userId) {
      console.log("已经登录");
      this.search();
    } else {
      this.$router.push("/login");
    }
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // this.search();
  },
  //监控data中的数据变化
  watch: {
    swhsId(n,o) {
        this.search();

    },
    // currentResCode(oldValue,newValue){
    //   this.currentResCode = newValue;
    //   this.search();
    // }
  },
  //方法集合

  methods: {
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.search();
    },
    // 查询
    search() {
      this.loading = true;
      let _self = this;
      let data = {};
      data["swhsId"] = _self.swhsId;
      data["presId"] = _self.userId;
      data["pageNum"] = _self.currentPage;
      data["pageSize"] = _self.pageSize;
      request.post(`/bis/insp/swhs/pblm/page`,data).then(res =>{
      // findPageInfo(data).then(res => {
        _self.loading = false;
        if (res.success) {
          _self.searchResult = res.data.list;
          _self.total = res.data.total;
        } else {
        }
      });
    },
    timestampToTime(row, column) {
      var date = new Date(row);
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      var h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      var m =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      return Y + M + D + h + m;
    },
    // 提交修改信息
    changeSupervisionInfo() {
      // this.changeSupervisionVisible = true;
      // this.$refs.changeSupFrom.validate(valid => {
      //   if (valid) {
      //     this.changeSupervisionLoading = true;
      //     let data = this.changeSupervision;
      //     updatelist(data).then(res => {
      //       this.pblmId = res.data.pblmId;
      //       this.gwComFiles = res.data.gwComFiles;
      //       if (res.success) {
      //           this.removeNewSupervision();
      //         this.successInfo();
      //         if (this.$refs.uploadFile.submitUpload(data.pblmId)) {
      //             this.removeNewSupervision();
      //             this.successInfo();
      //             this.addPicPanel = false;
      //             this.changeSupervisionLoading = false;
      //         }
      //       } else {
      //         this.failInfo();
      //       }
      //     });
      //   }
      // });
    },
    removeNewSupervision(arg) {
      if (arg) {
        console.log(arg);
        var args = this.gwComFiles.concat(arg);
        this.updatefilelist(args);
      }
      this.search();
      this.gwComFiles = [];
      this.newSupervisionVisible = false;
      this.changeSupervisionVisible = false;
      this.newSupervision = {
        id: "",
        checkPoint: "",
        presId: localStorage.getItem("userid"),
        dataStat: "",
        nm: "",
        endTime: "",
        pblmId: "",
        objId: "",
        objType: "",
        inspGroupId: "",
        inspPblmCate: "",
        inspPblmName: "",
        inspPblmDesc: "",
        pblmLong: "",
        pblmLat: "",
        pblmStat: "",
        ifCasePblm: "",
        inspPblmOrgName: "",
        pblmPersName: "",
        reviOpin: "",
        reviConc: "",
        reviOrgGuid: "",
        collTime: "",
        recPers: "",
        note: ""
      };
      // this.$refs.uploadFile.init();
    },
    // 删除图片文件
    removeFile(id, index) {
      // this.updateIdXiuGai = this.updateIdXiuGai;
      var _self = this;
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "返回",
        type: "warning"
      }).then(
        res => {
          if (res === "confirm") {
            deleteFileById(id, this.userId).then(res => {
              if (res.success) {
                // this.changeSupervision.gwComFiles.splice(index, 1);
                this.changeSupervision.gwComFiles.forEach(item => {
                  if (
                    item.fileExt == "mp3" ||
                    item.fileExt == "MP3" ||
                    item.fileExt == "m4a"
                  ) {
                    this.audiotabName.splice(index, 1);
                  } else if (
                    item.fileExt == "jpg" ||
                    item.fileExt == "JPG" ||
                    item.fileExt == "png" ||
                    item.fileExt == "PNG" ||
                    item.fileExt == "JPEG" ||
                    item.fileExt == "jpeg"
                  ) {
                    this.pictureArray.splice(index, 1);
                  } else if (item.fileExt == "mp4" || item.fileExt == "MP4") {
                    this.videoArray.splice(index, 1);
                  }
                });
                _self.changeSup(this.updateIdXiuGai);
              } else {
                this.failInfo();
              }
            });
          }
        },
        res => {
          console.log("返回");
        }
      );

    },
    // 操作成功反馈
    successInfo() {
      this.$message({
        type: "success",
        message: "操作成功!"
      });
    },
    // 操作失败反馈
    failInfo(val) {
      this.$message.error(val);
    },
    // 清空选择
    toggleSelection(rows) {
      this.$refs.multipleTable.clearSelection();
    },
    // 已选择项
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 文件上传
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    addPic() {
      this.addPicPanel = !this.addPicPanel;
    },
    // 删除弹窗
    removeSuperviseOne(id) {
      this.$confirm("此操作删除此条问题, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "返回",
        type: "warning"
      }).then(() =>{
        request.get(`/bis/insp/swhs/pblm/del/${id}`).then(res =>{
          if(res.success){
            this.$message.success("删除成功");
            this.search();
          }else{
            this.$message.warning(res.message);
          }
        })

      }).catch(() =>{

      })

    },
    changeSupervisionVisiblefalse() {
      this.addProblemLastYearVisible = false;
    },
    addProblem: function(id,type) {
      if(type == 'edit'){
        request.get(`/bis/insp/swhs/pblm/${id}`).then(res =>{
          if(res.success){
            this.ruleForm = res.data;
          }
        })
        this.titleProblem = "编辑问题";
        this.addProblemLastYearVisible = true;
      }else{
        this.titleProblem = "添加问题";
        for(var obj in this.ruleForm){
          this.ruleForm[obj] = "";
        }
        this.addProblemLastYearVisible = true;
      }

    },
    closePlDialog(val) {
      this.showAddProblemDialog = false;
      this.search()
    },
    onSubmitaddProblemLastYear(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let obj = {};
          obj["swhsId"] =  this.swhsId;
          obj["swhsCode"] =  this.swhsCode;
          obj["pblmDesc"] =  this.ruleForm.pblmDesc;
          request.post('/bis/insp/swhs/pblm',obj).then((res)=>{
            if(res.success){
              this.$message.success("保存成功");
              this.addProblemLastYearVisible = false;
              this.search();
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "../duChaWenTi/base.css";
@import url("/src/assets/iconfont/iconfont.css");
@import url("/src/assets/css/mixin.scss");
.upload-container {
  width: 100%;
  position: relative;
  .image-uploader {
    width: 35%;
    float: left;
  }
  .image-preview {
    width: 200px;
    height: 200px;
    position: relative;
    border: 1px dashed #d9d9d9;
    float: left;
    // margin-left: 50px;
    .image-preview-wrapper {
      position: relative;
      width: 100%;
      height: 100%;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .image-preview-action {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      cursor: default;
      text-align: center;
      color: #fff;
      opacity: 0;
      font-size: 20px;
      background-color: rgba(0, 0, 0, 0.5);
      transition: opacity 0.3s;
      cursor: pointer;
      text-align: center;
      line-height: 200px;
      .el-icon-delete {
        font-size: 36px;
      }
    }
    &:hover {
      .image-preview-action {
        opacity: 1;
      }
    }
  }
  .image-app-preview {
    margin-bottom: 10px;
    width: 40vh;
    height: 180px;
    position: relative;
    border: 1px dashed #d9d9d9;
    float: left;
    // margin-left: 50px;
    .app-fake-conver {
      height: 44px;
      position: absolute;
      width: 100%; // background: rgba(0, 0, 0, .1);
      text-align: center;
      line-height: 64px;
      color: #fff;
    }
  }
}
.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
#wenTiContainer_sk .el-tree-node {
  /* overflow: auto; */
}

#wenTiContainer_sk .el-tree-node > .el-tree-node__children {
  overflow: auto;
}

.shuiku .el-date-editor.el-input {
  min-width: 180px !important;
}

.shuiku .header {
  padding: 0px 10px;
}

.shuiku .el-row {
  margin-bottom: 5px;
}

.shuiku .content {
  margin: 10px;
}

/* .search .el-table>>>.el-tooltip {
    white-space: pre-wrap !important;
    line-height: 30px;
    font-size: 0;
} */

.shuiku .search >>> .el-table .el-button:nth-child(odd) {
  margin-left: 0 !important;
}

.custom_dialog .el-dialog {
  width: 60% !important;
}

.custom_dialog .scroll300 {
  max-height: 60vh !important;
}

.shuiku .el-tag + .el-tag {
  margin-left: 10px;
}

.shuiku .button-new-tag {
  margin-left: 10px;
  height: 28px;
  line-height: 28px;
  padding-top: 0;
  padding-bottom: 0;
}

.shuiku .input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
  .problemLastYear .el-dialog__body {
    padding: 30px 20px;
    color: #606266;
    font-size: 14px;
    height: 200px;
    overflow: auto;
  }
</style>