fj-dc-ui/.svn/pristine/e3/e3940c97049595e86bf6df4d5fbd391da1685412.svn-base

<template>
  <el-dialog
    :title="titleType + '必查清单'"
    @close="closeDialog"
    :visible.sync="dialogFormVisible"
    append-to-body
    class="add_problem_dialog"
    width="90%"
    height="90%"
  >
    <div class="scroll_wrapper">
      <div
        style="
          width: 49%;
          overflow-y: auto;
          max-height: 70vh;
          float: left;
          border: 1px solid #d5d5ff;
          margin-right: 5px;
        "
      >
        <p style="font-weight: bolder; background-color: #d5d5ff; padding: 3px">
          基本信息
        </p>
        <el-form :model="form" :rules="rules" ref="form" label-width="130px">
          <el-form-item label="具体检查项目" prop="chkItem">
            <el-input
              v-model="form.chkItem"
              autocomplete="off"
              :readonly="true"
              :autosize="{ minRows: 5 }"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="检查资料或部位" prop="chkFrp">
            <el-input
              v-model="form.chkFrp"
              autocomplete="off"
              :readonly="true"
              :autosize="{ minRows: 5 }"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="问题掌握标准" prop="pblmMasteryLevel">
            <el-input
              v-model="form.pblmMasteryLevel"
              autocomplete="off"
              :readonly="true"
              :autosize="{ minRows: 4 }"
              type="textarea"
              :rows="5"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="检查依据（法规及规范相应条款）" prop="chkGist">
            <el-input
              v-model="form.chkGist"
              autocomplete="off"
              :readonly="true"
              :autosize="{ minRows: 4 }"
              type="textarea"
              :rows="5"
              disabled
            ></el-input>
          </el-form-item>
          <p class="item_title">
            <i class="el-icon-caret-right"></i>
            <span>检查结果</span>
          </p>
          <el-form-item label="检查结果" prop="isPblm">
            <el-select v-model="form.isPblm" placeholder="请选择检查结果" clearable style="width: 100%;">
              <el-option
                v-for="(item, index) in ynList"
                :key="index"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择问题" prop="pblmstdId"
          v-if="form.isPblm === '1'">
            <el-select
              v-model="form.pblmstdId"
              filterable
              popper-class="problem_select"
              placeholder="请选择"
              @change="changeSelect"
              style="width: 85%"
            >
              <el-option
                v-for="item in problemList"
                :key="item.id"
                :label="item.pblmsDesc"
                :value="item.id"
              >
              </el-option>
            </el-select>
            <span class="add_new_problem" @click="addNewProblem" v-if="!isFujian">添加其它问题</span>
          </el-form-item>
          <el-form-item
            label="问题描述"
            prop="pblmsDesc"
            v-if="form.isPblm === '1'"
          >
            <el-input
              v-model="form.pblmsDesc"
              autocomplete="off"
              type="textarea"
              :rows="5"
            ></el-input>
          </el-form-item>
          <el-form-item label="责任单位"  v-if="form.isPblm === '1'" prop="subjectId">
            <span
              class="el-icon-circle-plus"
              title="添加单位"
              @click="addUnit"
            ></span>
            <div v-for="(unit, index) in unitArray" :key="index">
              <el-form-item label="单位性质" style="display: inline-block">
                <el-select
                  v-model="unit.subId"
                  placeholder="请选择"
                  @change="natureChange(val, index)"
                  clearable
                >
                  <el-option
                    v-for="item in objSubjectList"
                    :key="item.id"
                    :label="item.subName"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
                <span
                  class="el-icon-remove"
                  title="删除单位"
                  v-if="index != 0"
                  @click="removeUnit(index)"
                ></span>
              </el-form-item>
              <el-form-item label="单位名称" style="display: inline-block">
                <el-select
                  v-model="unit.unitNm"
                  popper-class="problem_select"
                  @change="unitSelect"
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="item in unitNameList"
                    :key="item.id"
                    :label="
                      item.sctnName
                        ? `${item.sysNm}(${item.sctnName})`
                        : item.sysNm
                    "
                    :value="item.sysNm"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-form-item>
          <el-form-item
            label="问题定性"
            prop="pblmPasi"
            v-if="form.isPblm === '1'"
          >
            <el-select v-if="selectShow && !isGd && !isSc && !isSd" v-model="form.pblmPasi" placeholder="请选择"  style="width: 100%;">
              <el-option v-for="item in cateObjList" :key="item.cate" :label="item.desc"
                                     :value="item.cate">
              </el-option>
            </el-select>
            <el-select v-if="isGd || isSc || isSd" v-model="form.pblmPasi" placeholder="请选择问题定性">
              <el-option  label="一般" value="0"></el-option>
              <el-option  label="较重" value="1"></el-option>
              <el-option  label="严重" value="2"></el-option>
            </el-select>
            <span v-if="inputShow && !isGd && !isSc && !isSd">{{inputText}}</span>
          </el-form-item>
          <el-form-item
            label="有关情况说明"
            prop="nt"
            v-if="
              pageName === 'inspectionView' ||
              (pageName === 'inspectionIndex' && form.isPblm === '1')
            "
          >
            <el-input
              v-model="form.nt"
              autocomplete="off"
              type="textarea"
              :rows="5"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div
        style="
          width: 49%;
          float: right;
          border: 1px solid rgb(213, 213, 255);
          margin-right: 5px;
          overflow-y: auto;
          max-height: 70vh;
        "
      >
        <p style="font-weight: bolder; background-color: #d5d5ff; padding: 3px">
          多媒体信息
        </p>
        <div
          style="
            width: 99%;
            float: left;
            border: 1px solid rgb(213, 213, 255);
            margin-right: 5px;
            overflow-y: auto;
            max-height: 30vh;
          "
        >
          <el-row style="text-align: right">
            <el-col :span="24">
              <el-button
                :v-if="!addPicPanel ? addPicPanel : addPicPanel"
                size="mini"
                type="text"
                :icon="
                  !addPicPanel
                    ? 'el-icon-circle-plus-outline'
                    : 'el-icon-circle-close-outline'
                "
                @click="addPic('')"
                >{{ !addPicPanel ? "参考范本添加" : "参考范本取消" }}
              </el-button>
            </el-col>
          </el-row>
          <el-row v-show="addPicPanel">
            <span style="display: block; text-align: center; color: red"
              >佐证照片建议上传2至6的偶数张</span
            >
            <upload
              ref="uploadFile"
              :type="'1'"
              :url="`/pdcApi/file/insert?bizId=`"
              @uploadOver="removeNewSupervision"
            ></upload>
          </el-row>
          <el-row style="text-align: right">
            <el-col :span="24">
              <el-button
                :v-if="!addPicPanel1 ? addPicPanel1 : addPicPanel1"
                size="mini"
                type="text"
                :icon="
                  !addPicPanel1
                    ? 'el-icon-circle-plus-outline'
                    : 'el-icon-circle-close-outline'
                "
                @click="addPic('1')"
                >{{ !addPicPanel1 ? "佐证资料添加" : "佐证资料取消" }}
              </el-button>
            </el-col>
          </el-row>
          <el-row v-show="addPicPanel1">
            <span style="display: block; text-align: center; color: red"
              >佐证照片建议上传2至6的偶数张</span
            >
            <upload
              ref="uploadFile1"
              :type="'2'"
              :url="`/pdcApi/file/insert?bizId=`"
              @uploadOver="removeNewSupervision"
            ></upload>
          </el-row>
        </div>
        <p class="item_title">
          <i class="el-icon-caret-right"></i>
          <span>参考范本</span>
        </p>
        <div
          style="
            width: 99%;
            float: left;
            border: 1px solid rgb(213, 213, 255);
            margin-right: 5px;
            overflow-y: auto;
            max-height: 30vh;
          "
        >
          <el-tabs style="margin: 0px 5px">
            <el-tab-pane :label="picturetabName">
              <el-row>
                <div
                  style="
                    overflow-y: auto;
                    overflow-x: hidden;
                    max-height: 42vh;
                    padding: 10px;
                  "
                >
                  <div class="upload-container">
                    <viewer :images="pictureArray">
                      <draggable
                        v-model="pictureArray"
                        :options="{ group: 'image' }"
                        @change="dragChange"
                      >
                        <div
                          v-if="editPicRefresh"
                          v-for="(item, index) in pictureArray"
                          :key="index"
                          class="image-preview image-app-preview"
                        >
                          <div class="image-preview-wrapper">
                            <img
                              :src="`${hostUrl}/${
                                item.filePath
                              }?d=${new Date().getTime()}`"
                            />
                            <div class="image-preview-action">
                              <i
                                @click="removeFile(item.id)"
                                class="el-icon-delete"
                              ></i>
                              <i
                                @click="editPicEvent(item)"
                                class="el-icon-edit-outline"
                              ></i>
                            </div>
                          </div>
                        </div>
                      </draggable>
                    </viewer>
                  </div>
                </div>
              </el-row>
            </el-tab-pane>
            <el-tab-pane :label="audiotabName">
              <el-table
                border
                :data="audioArray"
                style="width: 100%; margin: 0 auto"
              >
                <el-table-column
                  header-align="center"
                  align="center"
                  label="音频"
                >
                  <template slot-scope="scope">
                    <elaudio
                      style="margin-left: 15%; width: 100px; height: 30px"
                      :theUrl="`${hostUrl}/${scope.row.filePath}`"
                    ></elaudio>
                  </template>
                </el-table-column>
                <el-table-column
                  header-align="center"
                  align="center"
                  label="操作"
                >
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      @click="removeFile(scope.row.id, scope.$index)"
                      type="danger"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane :label="videotabName">
              <el-table
                border
                :data="videoArray"
                style="width: 100%; margin: 0 auto"
              >
                <el-table-column
                  header-align="center"
                  align="center"
                  label="视频"
                >
                  <template slot-scope="scope">
                    <video-player
                      class="vjs-custom-skin"
                      ref="videoPlayer"
                      :options="scope.row"
                      :playsinline="true"
                    ></video-player>
                  </template>
                </el-table-column>
                <el-table-column
                  header-align="center"
                  align="center"
                  label="操作"
                >
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      @click="removeFile(scope.row.id, scope.$index)"
                      type="danger"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane :label="filetabName">
              <el-table
                border
                :data="fileArray"
                style="width: 100%; margin: 0 auto"
              >
                <el-table-column
                  header-align="center"
                  align="center"
                  label="文档"
                >
                  <template slot-scope="scope">
                    <p>
                      <a
                        :href="`${hostUrl}/${scope.row.filePath}`"
                        target="_blank"
                        rel="noopener noreferrer"
                      >
                        {{ scope.row.fileName }}
                      </a>
                    </p>
                  </template>
                </el-table-column>
                <el-table-column
                  header-align="center"
                  align="center"
                  label="操作"
                >
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      @click="removeFile(scope.row.id, scope.$index)"
                      type="danger"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </div>
        <p class="item_title">
          <i class="el-icon-caret-right"></i>
          <span>佐证资料</span>
        </p>
        <div
          style="
            width: 99%;
            float: left;
            border: 1px solid rgb(213, 213, 255);
            margin-right: 5px;
            overflow-y: auto;
            max-height: 30vh;
          "
        >
          <el-tabs style="margin: 0px 5px">
            <el-tab-pane :label="picturetabName2">
              <el-row>
                <div
                  style="
                    overflow-y: auto;
                    overflow-x: hidden;
                    max-height: 42vh;
                    padding: 10px;
                  "
                >
                  <div class="upload-container">
                    <viewer :images="pictureArray2">
                      <draggable
                        v-model="pictureArray2"
                        :options="{ group: 'image' }"
                        @change="dragChange"
                      >
                        <div
                          v-if="editPicRefresh"
                          v-for="(item, index) in pictureArray2"
                          :key="index"
                          class="image-preview image-app-preview"
                        >
                          <div class="image-preview-wrapper">
                            <img
                              :src="`${hostUrl}/${
                                item.filePath
                              }?d=${new Date().getTime()}`"
                            />
                            <div class="image-preview-action">
                              <!-- <i @click="previewFile(item.filePath)" class="el-icon-zoom-in"></i> -->
                              <i
                                @click="removeFile(item.id)"
                                class="el-icon-delete"
                              ></i>
                              <i
                                @click="editPicEvent(item)"
                                class="el-icon-edit-outline"
                              ></i>
                            </div>
                          </div>
                        </div>
                      </draggable>
                    </viewer>
                  </div>
                </div>
              </el-row>
            </el-tab-pane>
            <el-tab-pane :label="audiotabName2">
              <el-table
                border
                :data="audioArray2"
                style="width: 100%; margin: 0 auto"
              >
                <el-table-column
                  header-align="center"
                  align="center"
                  label="音频"
                >
                  <template slot-scope="scope">
                    <elaudio
                      style="margin-left: 15%; width: 100px; height: 30px"
                      :theUrl="`${hostUrl}/${scope.row.filePath}`"
                    ></elaudio>
                  </template>
                </el-table-column>
                <el-table-column
                  header-align="center"
                  align="center"
                  label="操作"
                >
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      @click="removeFile(scope.row.id, scope.$index)"
                      type="danger"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane :label="videotabName2">
              <el-table
                border
                :data="videoArray2"
                style="width: 100%; margin: 0 auto"
              >
                <el-table-column
                  header-align="center"
                  align="center"
                  label="视频"
                >
                  <template slot-scope="scope">
                    <video-player
                      class="vjs-custom-skin"
                      ref="videoPlayer"
                      :options="scope.row"
                      :playsinline="true"
                    ></video-player>
                  </template>
                </el-table-column>
                <el-table-column
                  header-align="center"
                  align="center"
                  label="操作"
                >
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      @click="removeFile(scope.row.id, scope.$index)"
                      type="danger"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane :label="filetabName2">
              <el-table
                border
                :data="fileArray2"
                style="width: 100%; margin: 0 auto"
              >
                <el-table-column
                  header-align="center"
                  align="center"
                  label="文档"
                >
                  <template slot-scope="scope">
                    <p>
                      <a
                        :href="`${hostUrl}/${scope.row.filePath}`"
                        target="_blank"
                        rel="noopener noreferrer"
                      >
                        {{ scope.row.fileName }}
                      </a>
                    </p>
                  </template>
                </el-table-column>
                <el-table-column
                  header-align="center"
                  align="center"
                  label="操作"
                >
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      @click="removeFile(scope.row.id, scope.$index)"
                      type="danger"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <div slot="footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="submitProblem">保 存</el-button>
    </div>
    <add-new-problem-com
      v-if="innerVisible"
      :titleType="'添加'"
      :listType="listType"
      @dialogClose="closeInnerDialog"
    ></add-new-problem-com>
  </el-dialog>
</template>
<script>
// import request from '@util/gw_ajax_request.js'
// import {formatDateTime2} from '@util/gw_date.js'
// import {} from '@api/InspectionReport.js'
import {
  getSelectProblemList,
  getProblemNatureApi,
  getUnitNameListApi,
  TacObiPblmHbUpdate,
  // submitInsetMustProblemApi,
  TacObiPblmHbShow,
  submitProblemApi,
} from "@api/InspectionReport.js";
import { updatelist, deleteFileById } from "@api/duChaAPI.js";
import addNewProblemCom from "./addInspectionProblem.vue";
import upload from "@widget/uploadFileWithType";
import { hostUrl } from "@util/global_variable.js";
export default {
  props: ["titleType", "rowData", "listType", "pageName", "objId","currentNodeId"],
  components: {
    addNewProblemCom,
    upload,
  },
  data() {
    var subjectIdValidator = (rule, value, callback) => {
      let unitNames = [];
          let subIds = [];
          this.uniArr(this.unitArray).forEach((ele) => {
            unitNames.push(ele.unitNm);
            subIds.push(ele.subId);
          });
          unitNames = unitNames.filter(function (s) {
            return s && s.trim();
          });
          subIds = subIds.filter(function (s) {
            return s && s.trim();
          });
          if ( unitNames.length === 0 && subIds.length === 0 ) {
            callback(new Error('对应的单位性质或单位名称其中一个不能为空'));
          }else{
            callback();
          }
    };
    return {
      form: {
        chkItem: "",
        chkFrp: "",
        pblmMasteryLevel: "",
        chkGist: "",
        isPblm: "", // 是否有问题 1
        pblmstdId: "", // 问题Id
        pblmsDesc: "", // 问题描述1
        subjectNames: [], // 责任单位1 单位名称集合
        subjectId:'', //  责任单位1 用来判断非空的
        subjectIds: [], // 责任单位1 单位性质集合
        pblmPasi: "", // 问题定性1
        nt: "", // 说明1
        objType: "8", // !!
        objId: '',
        listType: '', //六个专业的类型123456
      },
      dialogFormVisible: true,
      rules: {
        isPblm:[{ required: true, message: "请选择检查结果", trigger: "change" }],
        pblmstdId: [{ required: true, message: "请选择问题", trigger: "change" }],
        pblmsDesc: [{ required: true, message: "请输入问题描述", trigger: "change" }],
        subjectId: [{ required: true, validator: subjectIdValidator, trigger: "change" }],
        pblmPasi: [{ required: true, message: "请选择问题定性", trigger: "change" },],
        nt: [{ required: true, message: "请输入有关情况说明", trigger: "change" },],
      },

      professionList: [
        { label: "前期与设计", value: "1" },
        { label: "建设管理", value: "2" },
        { label: "计划下达与执行", value: "3" },
        { label: "资金使用与管理", value: "4" },
        { label: "质量行为", value: "5" },
        { label: "质量实体", value: "6" },
        { label: "工程安全", value: "7" },
      ],
      ynList: [
        { label: "有问题", value: "1" },
        { label: "无问题", value: "0" },
      ],

      preUrl: "",
      // listType: "", //六个专业的类型123456

      picturetabName: "",
      audiotabName: "",
      videotabName: "",
      filetabName: "",
      pictureArray: [],
      audioArray: [],
      videoArray: [],
      fileArray: [],

      picturetabName2: "",
      audiotabName2: "",
      videotabName2: "",
      filetabName2: "",
      pictureArray2: [],
      audioArray2: [],
      videoArray2: [],
      fileArray2: [],

      editPicRefresh: true,
      picUrl: "",
      picId: "",
      pblmId: "", // 数据id
      addPicPanel: false,
      addPicPanel1: false,
      unitArray: [
        {
          unitNm: "",
          subId: "",
        },
      ],
      bizType: "1", // 文件上传序号
      // problemDxList: "", // 问题分类列表
      gwComFileList: [],
      problemList: [], // 问题列表
      objSubjectList: [], //单位性质列表
      unitNameList: [], //单位名称列表
      innerVisible: false, // 添加问题弹框

      cateObjList: [],//严重程度列表
      selectShow: true,
      inputShow: false,
      inputText: '',
      problemInfo: {},
      changeSupervision:{},// 回显查询结果
    };
  },
  computed: {
    hostUrl() {
      // return window.location.href.indexOf('localhost') > -1 || window.location.href.indexOf("10.1.102.64") > -1 ? 'http://10.1.102.240:8200' : `${window.location.protocol}//${window.location.hostname}`
      return hostUrl;
    },
    isFujian() {
      if (localStorage.getItem("currentRlcode").substring(0, 2) == "35") {
        return true;
      } else {
        return false;
      }
    },
    persId() {
      return localStorage.getItem("userid") ? localStorage.getItem("userid") : "1098101939614724096";
    },
    isGd(){
               if(localStorage.getItem('currentRlcode').substring(0,2)=="44"){
                  return true;
               }else{
                  return false;
               }
    },
    isSc(){
                if(localStorage.getItem('currentRlcode').substring(0,2)=="51"){
                    return true;
                }else{
                    return false;
                }
            },
    isSd(){
                if(localStorage.getItem('currentRlcode').substring(0,2)=="37"){
                    return true;
                }else{
                    return false;
                }
    },
    isHb(){
            if(localStorage.getItem('currentRlcode').substring(0,2)=="42"){
                return true;
            }else{
                return false;
            }
        }
  },
  mounted() {
    this.getProblemList();
    if (this.titleType == "编辑") {
      this.pblmId = this.rowData.id;
      this.changeSup();
    }
    this.$nextTick(()=>{
      this.$refs["form"].clearValidate()
    })
  },

  methods: {
    changeSup() {
      this.pictureArray = [];
      this.audioArray = [];
      this.videoArray = [];
      this.fileArray = [];

      this.pictureArray2 = [];
      this.audioArray2 = [];
      this.videoArray2 = [];
      this.fileArray2 = [];
      TacObiPblmHbShow(this.pblmId)
        .then((res) => {
          if (res.success) {
            this.form = res.data;
            this.changeSupervision = res.data;
            if(this.changeSupervision.tacObjPblmstb){
              this.form.pblmstdId = this.changeSupervision.tacObjPblmstb.id
            }
            if(this.changeSupervision.pblmSubjectList){
              this.unitArray = this.changeSupervision.pblmSubjectList
            }
            if(this.changeSupervision.tacObjPblmstb){
                this.objSubjectList = this.changeSupervision.tacObjPblmstb.objSubjectList
                this.cateObjList = this.changeSupervision.tacObjPblmstb.cateObjList
                this.form.pblmsDesc = this.changeSupervision.tacObjPblmstb.pblmsDesc
            }
            if(this.unitArray.length){
              this.unitArray.forEach((ele,index)=>{
                this.getUnitNameList(index)
              })
            }
            res.data.fileList.forEach((item) => {
              if (item.bizType === "1") {
                if (
                  item.fileExt == "mp3" ||
                  item.fileExt == "MP3" ||
                  item.fileExt == "m4a"
                ) {
                  this.audioArray.push(item);
                } else if (
                  item.fileExt == "jpg" ||
                  item.fileExt == "JPG" ||
                  item.fileExt == "png" ||
                  item.fileExt == "PNG" ||
                  item.fileExt == "JPEG" ||
                  item.fileExt == "jpeg"
                ) {
                  this.pictureArray.push(item);
                } else if (item.fileExt == "mp4" || item.fileExt == "MP4") {
                  this.videoArray.push({
                    width: "130",
                    height: "130",
                    autoplay: false,
                    muted: true,
                    language: "en",
                    playbackRates: [0.7, 1.0, 1.5, 2.0],
                    sources: [
                      {
                        type: "video/mp4",
                        src: this.hostUrl + item.filePath,
                      },
                    ],
                    id: item.id,
                  });
                } else {
                  this.fileArray.push(item);
                }
              } else if (item.bizType === "2") {
                if (
                  item.fileExt == "mp3" ||
                  item.fileExt == "MP3" ||
                  item.fileExt == "m4a"
                ) {
                  this.audioArray2.push(item);
                } else if (
                  item.fileExt == "jpg" ||
                  item.fileExt == "JPG" ||
                  item.fileExt == "png" ||
                  item.fileExt == "PNG" ||
                  item.fileExt == "JPEG" ||
                  item.fileExt == "jpeg"
                ) {
                  this.pictureArray2.push(item);
                } else if (item.fileExt == "mp4" || item.fileExt == "MP4") {
                  this.videoArray2.push({
                    width: "130",
                    height: "130",
                    autoplay: false,
                    muted: true,
                    language: "en",
                    playbackRates: [0.7, 1.0, 1.5, 2.0],
                    sources: [
                      {
                        type: "video/mp4",
                        src: this.hostUrl + item.filePath,
                      },
                    ],
                    id: item.id,
                  });
                } else {
                  this.fileArray2.push(item);
                }
              }
            });
            this.picturetabName = "图片资料(" + this.pictureArray.length + ")";
            this.audiotabName = "音频资料(" + this.audioArray.length + ")";
            this.videotabName = "视频资料(" + this.videoArray.length + ")";
            this.filetabName = "其它资料(" + this.fileArray.length + ")";
            this.picturetabName2 = "图片资料(" + this.pictureArray2.length + ")";
            this.audiotabName2 = "音频资料(" + this.audioArray2.length + ")";
            this.videotabName2 = "视频资料(" + this.videoArray2.length + ")";
            this.filetabName2 = "其它资料(" + this.fileArray2.length + ")";
          } else {
            this.$message.error(res.message);
          }
          this.loading = false;
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    // 获取问题
    getProblemList() {
      getSelectProblemList(this.form.pblmstdId, this.listType)
        .then((res) => {
          if (res.success) {
            this.problemList = res.data.list;
          } else {
            this.$message.error(res.message);
          }
          this.loading = false;
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    // 问题改变
    changeSelect(val) {
      getProblemNatureApi(val)
        .then((res) => {
          if (res.success) {
            this.problemInfo = res.data
            this.form.pblmsDesc = this.problemInfo.pblmsDesc
            this.objSubjectList = this.problemInfo.objSubjectList
            this.cateObjList = this.problemInfo.cateObjList // 严重程度
            if (this.cateObjList.length == 1) {
              this.inputShow = true;
              this.selectShow = false;
              this.form.pblmPasi = this.cateObjList[0].cate;
              this.inputText = this.cateObjList[0].desc;
              // 切换问题标准时问题严重性赋值问题
              this.cateObjList.forEach(ele => {
                if (this.form.pblmPasi && this.form.pblmPasi != ele.cate) {
                  this.form.pblmPasi = ''
                }
              })
            } else {
              this.inputShow = false;
              this.selectShow = true;
            }
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    // 单位性质改变
    natureChange(val, index) {
      this.getUnitNameList(index);
      let _this = this;
      this.unitArray.forEach((ele, index) => {
        _this.objSubjectList.forEach((element) => {
          if (ele.subId == element.id) {
            this.unitArray[index].subName = element.subName;
          }
        });
      });
    },
    // 单位名称改变
    unitSelect() {
      let _this = this;
      this.unitArray.forEach((ele, index) => {
        _this.unitNameList.forEach((element) => {
          if (ele.unitNm == element.sysNm) {
            this.unitArray[index].unitId = element.id;
          }
        });
      });
    },
    // 获取单位名称
    getUnitNameList(index) {
      let paramsObj = {
        rgstrId: this.currentNodeId,
        sysType: this.unitArray[index].subId,
      };
      this.unitArray[index].unitNm = ""; //单位性质切换的时候清空单位名称
      getUnitNameListApi(paramsObj).then(res => {
        if (res.success) {
          this.unitNameList = res.data
        } else {
          this.$message.error(res.message)
        }
      }).catch(err => {
        this.$message.error(err)
      })
    },
    addUnit() {
      this.unitArray.push({ unitNm: "", unitId: "", subId: "", subName: "" });
    },
    removeUnit(index) {
      this.unitArray.splice(index, 1);
    },
    uniArr(tempArr) {
      var newTempArr = [];
      if (tempArr && tempArr.length > 0) {
        tempArr.forEach((item, index) => {
          if (item.unitNm || item.subId) {
            newTempArr.push(item);
          }
        });
        for (let i = 0; i < newTempArr.length; i++) {
          for (let j = i + 1; j < newTempArr.length; j++) {
            if (
              newTempArr[i].unitNm == newTempArr[j].unitNm &&
              newTempArr[i].subId == newTempArr[j].subId
            ) {
              newTempArr.splice(j, 1);
              j--;
            }
          }
        }
        return newTempArr;
      } else {
        return [];
      }
    },
    // 添加问题
    addNewProblem() {
      this.innerVisible = true;
    },
    //监听内容dialog关闭时执行
    closeInnerDialog() {
      this.innerVisible = false;
      this.getProblemList();
    },
    submitProblem() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let unitNames = [];
          let subIds = [];
          this.unitArray = this.uniArr(this.unitArray);
          this.unitArray.forEach((ele) => {
            unitNames.push(ele.unitNm);
            subIds.push(ele.subId);
          });
          unitNames = unitNames.filter(function (s) {
            return s && s.trim();
          });
          subIds = subIds.filter(function (s) {
            return s && s.trim();
          });
          this.form.subjectNames = unitNames.join(",");
          this.form.subjectIds = subIds.join(",");
          this.form.pblmSubjectList = this.unitArray
          this.form.objId = this.objId
          this.form.listType = this.listType
          this.form.rgstrId = this.currentNodeId
          this.form.persId = this.persId
          if (this.titleType == "编辑") {
            if (this.form.isPblm === "1") {
              let form1 = {
                chkFrp:this.form.chkFrp,
                pblmMasteryLevel:this.form.pblmMasteryLevel,
                chkGist:this.form.chkGist,
                chkItem:this.form.chkItem,
                dataStat:this.form.dataStat,
                fileList:this.form.fileList,
                focPblm:this.form.focPblm,
                genus:this.form.genus,
                groupId:this.form.groupId,
                intm:this.form.intm,
                isPblm:this.form.isPblm,
                listType:this.form.listType,
                nt:this.form.nt,
                objId:this.form.objId,
                orgId:this.form.orgId,
                pblmId:this.form.pblmId,
                pblmNt:this.form.pblmNt,
                pblmPasi:this.form.pblmPasi,
                pblmSubjectList:this.form.pblmSubjectList,
                pblmsDesc:this.form.pblmsDesc,
                pblmstbHbId:this.form.pblmstbHbId,
                pblmstdId:this.form.pblmstdId,
                persId:this.form.persId,
                province:this.form.province,
                rgstrId:this.form.rgstrId,
                sn:this.form.sn,
                spfsnlType:this.form.spfsnlType,
                state:this.form.state,
                subjectIds:this.form.subjectIds,
                subjectNames:this.form.subjectNames,
                uptm:this.form.uptm,
              }
              submitProblemApi(form1)
                .then((res) => {
                  if (res.success) {
                      this.form.pblmId = res.data.id
                      TacObiPblmHbUpdate(this.form)
                        .then((res) => {
                          if (res.success) {
                            this.$refs.uploadFile.submitUpload(this.pblmId);
                            this.$refs.uploadFile1.submitUpload(this.pblmId);
                            this.$message.success("修改成功");
                            this.$nextTick(() => {
                              this.$emit("dialogClose");
                            });
                          } else {
                            this.$message.error(res.message);
                          }
                        })
                        .catch((err) => {
                          this.$message.error(err);
                    });
                  } else {
                    this.$message.error(res.message);
                  }
                })
                .catch((err) => {
                  this.$message.error(err);
                });
            }else{
              TacObiPblmHbUpdate(this.form)
                .then((res) => {
                  if (res.success) {
                    this.$refs.uploadFile.submitUpload(this.pblmId);
                    this.$refs.uploadFile1.submitUpload(this.pblmId);
                    this.$message.success("修改成功");
                    this.$nextTick(() => {
                      this.$emit("dialogClose");
                    });
                  } else {
                    this.$message.error(res.message);
                  }
                })
                .catch((err) => {
                  this.$message.error(err);
            });
            }

          }
        } else {
          return false;
        }
      });
    },
    closeDialog() {
      this.$emit("dialogClose");
    },
    removeNewSupervision(arg) {
      if (arg) {
        var args = this.gwComFileList.concat(arg);
      }
      this.changeSup();
      this.$emit("dialogClose");
      this.gwComFileList = [];
    },
    addPic(val) {
      if(val === '1'){
        this.addPicPanel1 = !this.addPicPanel1;
      }else{
        this.addPicPanel = !this.addPicPanel;
      }
    },
    // 删除图片文件
    removeFile(id, index) {
      var _self = this;
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "返回",
        type: "warning",
      }).then(
        (res) => {
          if (res === "confirm") {
            deleteFileById(id, this.persId).then((res) => {
              if (res.success) {
                _self.changeSup();
              } else {
                this.failInfo(res.message);
              }
            });
          }
        },
        (res) => {
          console.log("返回");
        }
      );
    },
    editPicEvent(item) {
      this.picUrl =
        this.hostUrl + "/" + item.filePath + "?d=" + new Date().getTime();
      this.editPicDialog = true;
      this.editPicRefresh = false;
      this.picId = item.id;
    },
    cancelHandler() {
      this.editPicDialog = false;
      this.editPicRefresh = true;
    },
    editPicDataEvent(item) {
      request
        .post(`/file/updateFile?bizId=${this.pblmId}&id=${this.picId}`, item, {
          headers: { "Content-Type": "multipart/form-data" },
        })
        .then((res) => {
          if (res.success) {
            this.pictureArray = [];
            this.pictureArray2 = [];
            this.changeSup();
            this.editPicDialog = false;
            this.editPicRefresh = true;
            this.$message.success("修改成功");
          } else {
            this.$message.warning("修改失败");
          }
        });
    },
    // 操作成功反馈
    successInfo() {
      this.$message({
        type: "success",
        message: "操作成功!",
      });
    },
    // 操作失败反馈
    failInfo(val) {
      this.$message.error(val);
    },
    closeModal() {
      this.$emit("dialogClose");
    },
    dragChange(val) {
      console.log(val);
      console.log(this.pictureArray);
      let gwComFileList = [];
      gwComFileList = gwComFileList
        .concat(this.pictureArray)
        .concat(this.audioArray)
        .concat(this.videoArray)
        .concat(this.fileArray);
      this.form.gwComFileList = gwComFileList;
      console.log(this.form.gwComFileList);
    },
  },
  watch: {},
};
</script>
<style lang="scss" scoped>
.add_problem_dialog {
  .el-dialog {
    margin-top: 6vh !important;
    margin-bottom: 20px;
  }

  .el-dialog__body {
    font-size: 16px;
    color: #333;
  }

  .problem_form {
    display: flex;
    // flex-direction: row;
    width: 98%;
    margin: 0 auto;
    padding: 16px;
    height: calc(100vh - 270px);
    overflow: auto;

    .item_title {
      margin-top: 10px;
      margin-bottom: 20px;

      span:nth-of-type(1) {
        width: 120px;
        padding-left: 5px;
      }
    }

    .hrs {
      display: inline-block;
      width: calc(100% - 40px);
      margin-left: 10px;
      height: 1px;
      vertical-align: middle;
      background-color: #ddd;
    }

    .el-icon-circle-plus,
    .el-icon-remove {
      margin-left: 10px;
      color: #009fff;
      cursor: pointer;
    }

    .el-icon-remove {
      color: red;
    }

    .box-card {
      margin-bottom: 6px;
    }

    .el-form-item__label {
      font-size: 16px;
      color: #333;
    }
  }

  .el-button--mini {
    font-size: 14px;
  }

  .el-input--mini {
    font-size: 14px;
  }

  .el-textarea.is-disabled .el-textarea__inner {
    color: #666;
  }
}

.problem_select .el-select-dropdown__item {
  width: 800px;
}

.add_new_problem {
  color: #009fff;
  cursor: pointer;
}

.scroll_wrapper {
  overflow: hidden;
}
.scroll_wrapper .el-form {
  padding-top: 5px;
  padding-right: 5px;
}
.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: 40px;
      left: 0;
      bottom: 0;
      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: 40px;
      .el-icon-delete,
      .el-icon-zoom-in {
        font-size: 22px;
        margin: 0 5px;
      }
    }
    &:hover {
      .image-preview-action {
        opacity: 1;
      }
    }
  }
  .image-app-preview {
    margin-bottom: 10px;
    margin-right: 6px;
    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;
    }
  }
}
.problem_select .el-select-dropdown__item {
  width: 500px;
}
.modify_problem_dialog {
  .el-dialog__body {
    font-size: 15px;
  }
  .el-form-item__label {
    font-size: 15px;
    color: #333;
  }
  .el-input--mini {
    font-size: 13px;
  }
  .el-button--mini {
    font-size: 14px;
  }
  .el-icon-circle-plus,
  .el-icon-remove {
    margin-left: 10px;
    color: #009fff;
    cursor: pointer;
  }
  .el-icon-remove {
    color: red;
  }
}
.el-icon-refresh-right {
  font-size: 36px;
  cursor: pointer;
}
.pic_dialog .el-dialog {
  margin-top: 10vh !important;
}
.viewer-container {
  z-index: 9999 !important;
}
</style>