fj-dc-ui/.svn/pristine/d0/d0a5fde50cb0f2f178f29662145f7eba750d9d39.svn-base

<template>
    <!-- 修改弹框 -->
    <el-dialog
        width="90%"
        class="outerDialog modify_problem_dialog"
        title="修改稽察问题"
        @close="closeModal"
        :close-on-click-modal="false"
        :visible.sync="changeSupervisionVisible">
        <div class="scroll_wrapper">
            <div
                style="width:49%;overflow-y:auto;max-height:62vh;float:left;border:1px solid #d5d5ff;margin-right:5px;">
                <p style="font-weight:bolder;background-color:#d5d5ff;padding:3px;">基本信息</p>
                <el-form ref="changeSupFrom" :model="changeSupervision" :rules="rules" label-width="140px">
                    <el-form-item label="选择问题">
                        <el-select v-model="keyword" filterable popper-class="problem_select" placeholder="请选择" disabled @change="changeSelect">
                            <el-option
                            v-for="item in problemList"
                            :key="item.id"
                            :label="item.pblmsDesc"
                            :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="问题描述">
                        <el-input v-model="changeSupervision.pblmsDesc" readonly rows="5"  type="textarea"></el-input>
                    </el-form-item>

                    <el-form-item label="法规条款">
                        <el-input v-model="changeSupervision.relativeLaw"  @input="updateView($event)" rows="5"  type="textarea" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="法规内容">
                        <el-input v-model="changeSupervision.lawContent"  @input="updateView($event)" rows="5"  type="textarea" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input v-model="changeSupervision.note" readonly rows="1"  type="textarea" autocomplete="off"></el-input>
                    </el-form-item>
                    <p class="item_title">
                        <i class="el-icon-caret-right"></i>
                        <span>责任主体</span>
                        <span class="el-icon-circle-plus" title="添加单位" @click="addUnit"></span>
                        <!-- <span class="hrs"></span> -->
                    </p>
                    <div v-for="(unit,index) in unitArray" :key="index">
                        <el-form-item label="单位性质">
                            <el-select v-model="unit.subId" placeholder="请选择" :disabled="disabled" @change="natureChange(val,index)">
                                <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="单位名称">
                            <el-select v-model="unit.unitNm" popper-class="problem_select" :disabled="disabled" @change="unitSelect" placeholder="请选择">
                                <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-input v-model="unit.unitNm" autocomplete="off"></el-input> -->
                        </el-form-item>
                    </div>
                    <el-form-item label="">
                    </el-form-item>
                    <el-form-item label="排序序号" prop="sn">
                        <el-input v-model="changeSupervision.sn" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="发现问题">
                        <el-input v-model="changeSupervision.pblmNm" :disabled="disabled" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="问题分类" prop="pblmTypeDesc">
                        <!-- pblmQlttvCd -->
                        <el-select v-model="changeSupervision.pblmTypeDesc" filterable popper-class="problem_select" style="width: 88%" placeholder="请选择">
                            <el-option
                            v-for="(item,index) in problemDxList"
                            :key="index"
                            :label="item"
                            :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="问题阐述">
                        <el-input v-model="changeSupervision.pblmDesc" rows="5" type="textarea" :disabled="disabled" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="问题严重性" prop="pblmPasi">
                      <el-select v-if="isGd || isSc || isSd" v-model="changeSupervision.pblmPasi" :disabled="disabled" placeholder="请选择">
                        <el-option  label="一般" value="0"></el-option>
                        <el-option  label="较重" value="1"></el-option>
                        <el-option  label="严重" value="2"></el-option>
                      </el-select>
                      <el-select v-if="!isGd && !isSc && !isSd" v-model="changeSupervision.pblmPasi" :disabled="disabled" placeholder="请选择" @change="changeRules">
                        <el-option
                          v-for="item in cateObjList"
                          :key="item.cate"
                          :label="item.desc"
                          :value="item.cate">
                        </el-option>
                      </el-select>
                    </el-form-item>
<!--                    <el-form-item label="问题严重性">-->
<!--                        <el-select v-model="changeSupervision.pblmPasi" :disabled="disabled" placeholder="请选择">-->
<!--                            <el-option-->
<!--                            v-for="item in cateObjList"-->
<!--                            :key="item.cate"-->
<!--                            :label="item.desc"-->
<!--                            :value="item.cate">-->
<!--                            </el-option>-->
<!--                        </el-select>-->
<!--                    </el-form-item>-->
                    <el-form-item label="问题是否典型">
                            <el-radio v-model="changeSupervision.ifCasePblm" :disabled="disabled" label="1">是</el-radio>
                            <el-radio v-model="changeSupervision.ifCasePblm" :disabled="disabled" label="0">否</el-radio>
                    </el-form-item>
                    <el-form-item label="主要原因分析" prop="pblmReason">
                        <el-input v-model="changeSupervision.pblmReason" rows="5" type="textarea" :disabled="disabled" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="整改意见及建议" prop="pblmSggtn">
                        <el-input v-model="changeSupervision.pblmSggtn" rows="5" type="textarea" :disabled="disabled" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="稽察组长复核意见">
                        <el-input v-model="changeSupervision.spclRvwOptn" rows="5" type="textarea" autocomplete="off"></el-input>
                    </el-form-item>
                  <el-form-item v-if="isRevision=='1'" label="问题修改理由" >
                    <el-input  v-model="changeSupervision.pblmRevision" rows="5" type="textarea" autocomplete="off"></el-input>
                  </el-form-item>
                </el-form>
            </div>
            <div
                style="width: 49%;float: left;border: 1px solid rgb(213, 213, 255);margin-right: 5px;overflow-y: auto;max-height: 62vh;">
                <p style="font-weight:bolder;background-color:#d5d5ff;padding:3px;">问题多媒体信息</p>
                <el-tabs style="margin:0px 5px">
                <el-tab-pane :label="picturetabName">
                    <el-row style="text-align:right;">
                    <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(0)"
                    >{{!addPicPanel?"添加":"取消"}}</el-button>
                    </el-row>
                    <el-row v-show="addPicPanel">
                    <upload
                        ref="uploadFile"
                        :url="`/pdcApi/file/insert?bizId=`"
                        @uploadOver="removeNewSupervision"
                    ></upload>
                    </el-row>
                    <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="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>
                            <el-dialog :visible.sync="previewDialogVisible" class="pic_dialog" append-to-body width="60%">
                                <div style="width: 500px;height: 460px;margin: 0 auto;position: relative;display: flex;justify-content:center;align-items:center">
                                    <img :src="dialogImageUrl" alt="" :style="rotateDeg" style="max-width: 100%;max-height:460px;">
                                    <p style="position:absolute;bottom: 0;right: 30px;"><i class="el-icon-refresh-right" title="旋转" @click="picRotate"></i></p>
                                </div>
                            </el-dialog>
                        </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>

          <div v-if="isRevision=='1'" style="width: 49%;float: left;border: 1px solid rgb(213, 213, 255);margin-right: 5px;padding-top: 10px;overflow-y: auto;max-height: 62vh;">
            <p style="font-weight:bolder;background-color:#d5d5ff;padding:3px;">问题修改理由佐证多媒体信息</p>
            <el-tabs style="margin:0px 5px">
              <el-tab-pane :label="picturetabNameq">
                <el-row style="text-align:right;">
                  <el-button
                    :v-if="!addPicPanel2?addPicPanel2:addPicPanel2"
                    size="mini"
                    type="text"
                    :icon="!addPicPanel2?'el-icon-circle-plus-outline':'el-icon-circle-close-outline'"
                    @click="addPic(1)"
                  >{{!addPicPanel2?"添加":"取消"}}</el-button>
                </el-row>
                <el-row v-show="addPicPanel2">
                  <upload2
                    ref="uploadFile2"
                    :url="`/pdcApi/file/insert?bizId=`"
                    @uploadOver="removeNewSupervision"
                  ></upload2>
                </el-row>
                <el-row>
                  <div style="overflow-y:auto;overflow-x:hidden;max-height:42vh;padding:10px;">
                    <div class="upload-container">
                      <viewer :images="pictureArrayq">
                        <draggable v-model="pictureArrayq" :options="{group:'image'}" @change="dragChangeq">
                          <div
                            v-if="editPicRefresh"
                            v-for="(item, index) in pictureArrayq"
                            :key="index"
                            class="image-preview image-app-preview">
                            <div class="image-preview-wrapper">
                              <img :src="`${hostUrl}/${item.filePath}`">
                              <div class="image-preview-action">
                                <!-- <i @click="previewFile(item.filePath)" class="el-icon-zoom-in"></i> -->
                                <i @click="removeFile2(item.id)" class="el-icon-delete"></i>
                                <i @click="editPicEvent(item)" class="el-icon-edit-outline"></i>
                              </div>
                            </div>
                          </div>
                        </draggable>
                      </viewer>
                      <el-dialog :visible.sync="previewDialogVisible" class="pic_dialog" append-to-body width="60%">
                        <div style="width: 500px;height: 460px;margin: 0 auto;position: relative;display: flex;justify-content:center;align-items:center">
                          <img :src="dialogImageUrl" alt="" :style="rotateDeg" style="max-width: 100%;max-height:460px;">
                          <p style="position:absolute;bottom: 0;right: 30px;"><i class="el-icon-refresh-right" title="旋转" @click="picRotate"></i></p>
                        </div>
                      </el-dialog>
                    </div>
                  </div>
                </el-row>
              </el-tab-pane>
              <el-tab-pane :label="audiotabNameq">
                <el-table border :data="audioArrayq" 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="removeFile2(scope.row.id,scope.$index)"
                        type="danger"
                      >删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane :label="videotabNameq">
                <el-table border :data="videoArrayq" 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="removeFile2(scope.row.id,scope.$index)"
                        type="danger"
                      >删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane :label="filetabNameq">
                <el-table border :data="fileArrayq" 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="removeFile2(scope.row.id,scope.$index)"
                        type="danger"
                      >删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </div>

        </div>
        <span slot="footer">
        <el-button type="primary" @click="submitProblem">保存</el-button>
        <el-button @click="closeModal">取消</el-button>
        </span>
        <div v-if="editPicDialog">
            <EditPicOnline
            ref="editPicWeakupEvnent"
            :picUrl="picUrl"
            @cancelHandler="cancelHandler"
            @editPicData="editPicDataEvent"
            ></EditPicOnline>
        </div>
    </el-dialog>
</template>
<script>
import draggable from "vuedraggable";
import {updatelist,deleteFileById} from "@api/duChaAPI.js";
import {showDetailsXq,getProblemNatureApi,submitProblemApi,getSelectProblemList,getUnitNameListApi,getProblemDxListApi} from "@api/InspectionReport.js";
import request from "@util/gw_ajax_request.js";
import elaudio from "@widget/elAudioShort.vue";
import {hostUrl} from '@util/global_variable.js'
export default {
    props: ['problemId','pertype','listType','isRevision'],//isRevision是否存在问题修改理由
    data(){
        var checkSn = (rule, value, callback) => {
            if (value && value<0) {
                return callback(new Error('序号应大于0'));
            }
            setTimeout(() => {
                if (value && (!(/(^[1-9]\d*$)/.test(value)) || value<0)) {
                    callback(new Error('请输入大于0的正整数'));
                } else {
                    callback();
                }
            }, 1000);
        };
        return{
            changeSupervisionVisible: true,
            changeSupervisionLoading: false,
            changeSupervision: {},
            supervision: [
                {
                value: "1",
                label: "是"
                },
                {
                value: "0",
                label: "否"
                }
            ],
            addPicPanel: false,
            gwComFileList: [],
            picturetabName: "",
            picturetabNameq: "",
            audiotabName: "",
            audiotabNameq: "",
            videotabName: "",
            videotabNameq: "",
            filetabName: "",
            filetabNameq: "",
            pictureArray: [],
            pictureArrayq: [],
            audioArray: [],
            audioArrayq: [],
            videoArray: [],
            videoArrayq: [],
            fileArray: [],
            fileArrayq: [],

            //问题修改理由取证资源
          addPicPanel2: false,
            updateIdXiuGai: "",
            pblmId: "",
            //稽察添加问题用到的参数
            keyword: '',
            problemList: [],
            problemInfo: {},
            gwComFileList: [],
            cateObjList:[],//严重程度列表
            objSubjectList: [], //单位性质列表
            unitNameList: [],  //单位名称列表
            unitArray: [
                {
                    unitNm:'',
                    subId:''
                }
            ],
            //为稽察组长时禁用
            disabled: false,
            rules: {
                sn: [
                    { validator: checkSn, trigger: 'blur' }
                ],
                pblmTypeDesc: [
                    { required: true, message: '请选择问题类别', trigger: 'change'}
                ],
                pblmPasi: [
                    { required: true, message: '请选择问题严重性', trigger: 'change'}
                ],
                pblmReason: [
                    { required: true, message: '请输入主要原因分析', trigger: 'change' }
                ],
                pblmSggtn: [
                    { required: true, message: '请输入意见及建议', trigger: 'change' }
                ]
            },
            dialogImageUrl: '',
            previewDialogVisible: false,
            rotateDeg: {'transform': 'rotate(0deg)'},
            editPicDialog:false,
            editPicRefresh:true,
            picUrl:"",
            picId:"",
            problemDxList: [],    //问题分类列表
            relCode: '',
        }
    },
    components:{
        elaudio: elaudio,
        draggable,
        upload: resolve => {
            require(["@widget/uploadFileWithPic.vue"], resolve);
        },
        upload2: resolve => {
            require(["@widget/uploadFileWithPic.vue"], resolve);
        },
        EditPicOnline: resolve => {
            require(["@widget/EditPicOnline/EditPicOnline.vue"], resolve);
        },
    },
    computed:{
        hostUrl(){
            console.log(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
        },
        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();
        this.changeSup(this.problemId)
        if(this.pertype == 20){
            this.disabled = true
        }
    },
    methods:{
        changeRules(){
            if(this.isHb){
                if(this.changeSupervision.pblmPasi=="0"){
                    this.rules["pblmReason"][0].required = false;
                    this.rules["pblmSggtn"][0].required = false;
                }else{
                    this.rules["pblmReason"][0].required = true;
                    this.rules["pblmSggtn"][0].required = true;
                }
            }
        },
        updateView(){
            this.$forceUpdate();
        },
        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.changeSupervision.pblmId}&id=${this.picId}`,item,{headers:{'Content-Type': 'multipart/form-data'}}).then(res => {
                console.log(res);
                if(res.success){
                    this.pictureArray = [];
                    this.changeSup(this.updateIdXiuGai);
                    this.editPicDialog = false;
                    this.editPicRefresh = true;
                    this.$message.success('修改成功');
                    // showDetailsXq(this.updateIdXiuGai).then(res => {
                    //     res.data.gwComFileList.forEach(item => {
                    //     this.pictureArray.push(item);
                    //     this.editPicDialog = false;
                    //     this.editPicRefresh = true;
                    //     this.$message.success('修改成功');
                    // });
                    //     this.picturetabName = "图片资料(" + this.pictureArray.length + ")";
                    // });
                }else{
                    this.$message.warning('修改失败');
                }
            });
        },
        // 修改弹窗显示
        changeSup(id) {
            this.pictureArray = [];
            this.audioArray = [];
            this.videoArray = [];
            this.fileArray = [];
            this.pictureArrayq = [];
            this.audioArrayq = [];
            this.videoArrayq = [];
            this.fileArrayq = [];
            this.updateIdXiuGai = id;
            request.get(`/tac/province/pblm/info/${id}`).then(res => {
                // if(this.usersId==)
                this.changeSupervision = res.data;
                this.changeRules()
                this.keyword = this.changeSupervision.tacObjPblmstb ? 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.changeSupervision.pblmsDesc = this.changeSupervision.tacObjPblmstb.pblmsDesc
                    // this.changeSupervision.relativeLaw = this.changeSupervision.tacObjPblmstb.relativeLaw
                    // this.changeSupervision.lawContent = this.changeSupervision.tacObjPblmstb.lawContent
                    this.changeSupervision.note = this.changeSupervision.tacObjPblmstb.note
                }
                this.changeSupervision.pblmQlttvCd = this.changeSupervision.pblmQlttvCd ? this.changeSupervision.pblmQlttvCd.toString() : '';
                // this.relCode = this.changeSupervision.lawContent.substr(0,3)  by 20200420 thy 统一取class2字段
                this.relCode = this.changeSupervision.tacObjPblmstb.class2;
                if(this.unitArray.length){
                    this.unitArray.forEach((ele,index)=>{
                        this.getUnitNameList(index)
                    })
                }
                res.data.gwComFileList.forEach(item => {
                    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);
                    }
                });

                if(res.data.revisionFileList){
                res.data.revisionFileList.forEach(item => {
                    if (
                        item.fileExt == "mp3" ||
                        item.fileExt == "MP3" ||
                        item.fileExt == "m4a"
                    ) {
                        this.audioArrayq.push(item);
                    } else if (
                        item.fileExt == "jpg" ||
                        item.fileExt == "JPG" ||
                        item.fileExt == "png" ||
                        item.fileExt == "PNG" ||
                        item.fileExt == "JPEG" ||
                        item.fileExt == "jpeg"
                    ) {
                        this.pictureArrayq.push(item);
                    } else if (item.fileExt == "mp4" || item.fileExt == "MP4") {
                        this.videoArrayq.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.fileArrayq.push(item);
                    }
                });
                this.picturetabNameq = "图片资料(" + this.pictureArrayq.length + ")";
                this.audiotabNameq = "音频资料(" + this.audioArrayq.length + ")";
                this.videotabNameq = "视频资料(" + this.videoArrayq.length + ")";
                this.filetabNameq = "其它资料(" + this.fileArrayq.length + ")";
                }


                this.picturetabName = "图片资料(" + this.pictureArray.length + ")";
                this.audiotabName = "音频资料(" + this.audioArray.length + ")";
                this.videotabName = "视频资料(" + this.videoArray.length + ")";
                this.filetabName = "其它资料(" + this.fileArray.length + ")";


                // this.getProblemDxList()   //不通过这个方法获取问题定性列表了，直接在上面取pblmTypeDesc和pblmTypeDesc2的值
                this.changeSelectForDesc(this.keyword)
            });
        },
        getProblemDxList(){
            getProblemDxListApi(this.relCode,this.listType).then(res=>{
                if(res.success){
                    this.problemDxList = res.data
                }else{
                    this.$message.error(res.message)
                }
            }).catch(err=>{
                this.$message.error(err)
            })
        },
        // 提交修改信息
        submitProblem(){
            this.$refs['changeSupFrom'].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();
                    });
                    if((unitNames.length!=subIds.length) && unitNames.length!=0 && subIds.length!=0){
                        this.$message.warning("对应的单位性质或单位名称其中一个不能为空");
                        return false;
                    }
                    //问题严重性为一般和较重时修改问题是否典型隐藏 默认为否
                    // if(this.changeSupervision.pblmPasi != '2' || this.changeSupervision.ifCasePblm == ''){
                    //     this.changeSupervision.ifCasePblm = '0'
                    // }
                    this.changeSupervision.subjectNames = unitNames.join(',')
                    this.changeSupervision.subjectIds = subIds.join(",")
                    this.changeSupervision.pblmSubjectList = this.unitArray
                    this.changeSupervision.pblmstdId = this.keyword
                    if(this.changeSupervision.sn == ''){
                        this.changeSupervision.sn = 0
                    }
                    if(this.changeSupervision.pblmReason && this.changeSupervision.pblmReason.length >= 500){
                        this.$message.warning('主要原因分析需字数小于500字！');
                        return;
                    }
                    if(this.changeSupervision.pblmSggtn && this.changeSupervision.pblmSggtn.length >= 1000){
                        this.$message.warning('整改意见及建议字数需小于1000字！');
                        return;
                    }
                    if(this.changeSupervision.spclRvwOptn && this.changeSupervision.spclRvwOptn.length >= 500){
                        this.$message.warning('稽察组长意见字数需小于500字！');
                        return;
                    }
                    request.post(`/tac/province/pblm/info`,this.changeSupervision).then(res => {
                        if(res.success){
                            this.gwComFileList = [];
                            if (this.$refs.uploadFile.submitUpload(res.data.id,res.data.gwComFileList.length) && this.isRevision == '1' && this.$refs.uploadFile2.submitUpload(res.data.pblmRevisionProof,res.data.revisionFileList.length)) {
                            }
                            this.$message.success('修改成功')
                            setTimeout(()=>{
                                this.removeNewSupervision()
                            })
                        }else{
                            this.$message.error(res.message)
                        }
                    }).catch(err => {
                        this.$message.error(err)
                    })
                    // submitProblemApi(this.changeSupervision).then(res=>{
                    //     if(res.success){
                    //         this.gwComFileList = [];
                    //         if (this.$refs.uploadFile.submitUpload(res.data.id,res.data.gwComFileList.length)) {
                    //             this.removeNewSupervision();
                    //         }
                    //         this.$message.success('修改成功')
                    //     }else{
                    //         this.$message.error(res.message)
                    //     }
                    // }).catch(err=>{
                    //     this.$message.error(err)
                    // })
                }
            })
        },
        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 [];
            }
        },
        unitSelect(){
            let _this = this
            let unitIds = []
            this.unitArray.forEach((ele,index)=>{
                _this.unitNameList.forEach(element=>{
                    if(ele.unitNm == element.sysNm){
                        this.unitArray[index].unitId = element.id
                    }
                })
                unitIds.push(ele.unitId)
            })
            // this.changeSupervision.subjectIds = unitIds.join(',')
        },
        getProblemList(id){
            // request.get(`/tac/province/pblm/info/${id}`)
            // .then(res => {
            //     if(res.success){

            //     }
            // })
            getSelectProblemList(this.keyword,this.listType).then(res=>{
                if(res.success){
                    this.problemList = res.data.list
                }else{
                    this.$message.error(res.message)
                }
            }).catch(err=>{
                this.$message.error(err)
            })
        },
        changeSelect(val){
            getProblemNatureApi(val).then(res=>{
                if(res.success){
                    this.problemInfo = res.data
                    this.changeSupervision.pblmsDesc = this.problemInfo.pblmsDesc
                    this.changeSupervision.relativeLaw = this.problemInfo.relativeLaw
                    this.changeSupervision.lawContent = this.problemInfo.lawContent
                    this.changeSupervision.note = this.problemInfo.note
                    this.objSubjectList = this.problemInfo.objSubjectList
                    this.cateObjList = this.problemInfo.cateObjList
                    this.changeSupervision.pblmPasi = this.cateObjList[0].cate
                    this.changeSupervision.pblmNm = this.problemInfo.pblmsDesc   //发现问题项的内容默认为问题描述内容  可更改
                    this.relCode = this.problemInfo.class2   //获取问题分类列表需要的问题标准序号
                    this.changeSupervision.pblmTypeDesc = ''

                    this.problemDxList = []
                    if(this.problemInfo.pblmTypeDesc){
                        this.problemDxList.push(this.problemInfo.pblmTypeDesc)
                    }
                    if(this.problemInfo.pblmTypeDesc2){
                        this.problemDxList.push(this.problemInfo.pblmTypeDesc2)
                    }
                    // this.getProblemDxList()
                }else{
                    this.$message.error(res.message)
                }
            }).catch(err=>{
                this.$message.error(err)
            })
        },
        // 为了获取问题类别列表
        changeSelectForDesc(val){
            getProblemNatureApi(val).then(res=>{
                if(res.success){
                    this.problemDxList = []
                    if(res.data.pblmTypeDesc){
                        this.problemDxList.push(res.data.pblmTypeDesc)
                    }
                    if(res.data.pblmTypeDesc2){
                        this.problemDxList.push(res.data.pblmTypeDesc2)
                    }
                }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)
        },
        getUnitNameList(index){
            let subId = this.unitArray[index].subId ? this.unitArray[index].subId : ''
            let paramsObj = {
                rgstrId: this.changeSupervision.rgstrId,
                sysType: subId
            }
            if(subId){
                getUnitNameListApi(paramsObj).then(res=>{
                    if(res.success){
                        this.unitNameList = res.data
                        if(!this.unitNameList.length){
                            this.unitArray[index].unitNm = ''   //单位性质切换时没有单位数据清空单位名称
                        }
                    }else{
                        this.$message.error(res.message)
                    }
                }).catch(err=>{
                    this.$message.error(err)
                })
            }
        },
        natureChange(val,index){
            this.unitArray.forEach((ele,index)=>{
                this.objSubjectList.forEach(element=>{
                    if(ele.subId == element.id){
                        this.unitArray[index].subName = element.subName
                    }
                })
            })

            let subIds = []
            this.unitArray.forEach((ele,index)=>{
                subIds.push(ele.subId)
            })
            this.changeSupervision.subjectIds = subIds.join(',')
            this.getUnitNameList(index)
        },
        removeNewSupervision(arg) {
            if (arg) {
                var args = this.gwComFileList.concat(arg);
            }
            this.changeSup(this.problemId)
            this.$emit('dialogClose')
            this.gwComFileList = [];
        },
        changeSupervisionVisiblefalse() {
            this.$emit('closeEditDialog')
            this.$refs.uploadFile.init();
            this.addPicPanel = false;
        },
        addPic(value) {
          console.log(value)
          if (value===1)
            this.addPicPanel2 = !this.addPicPanel2;
          else
            this.addPicPanel = !this.addPicPanel;
        },
        // 删除图片文件
        removeFile(id, index) {
            // this.updateIdXiuGai = this.updateIdXiuGai;
            var _self = this;
            this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "返回",
                type: "warning"
            }).then(
                res => {
                if (res === "confirm") {
                    deleteFileById(id, this.persId).then(res => {
                    if (res.success) {
                        this.changeSupervision.gwComFileList.forEach(item => {
                        if (
                            item.fileExt == "mp3" ||
                            item.fileExt == "MP3" ||
                            item.fileExt == "m4a"
                        ) {
                            this.audioArray.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("返回");
                }
            )
        },
        removeFile2(id, index) {
            // this.updateIdXiuGai = this.updateIdXiuGai;
            var _self = this;
            this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "返回",
                type: "warning"
            }).then(
                res => {
                if (res === "confirm") {
                    deleteFileById(id, this.persId).then(res => {
                    if (res.success) {
                        this.changeSupervision.revisionFileList.forEach(item => {
                        if (
                            item.fileExt == "mp3" ||
                            item.fileExt == "MP3" ||
                            item.fileExt == "m4a"
                        ) {
                            this.audioArrayq.splice(index, 1);
                        } else if (
                            item.fileExt == "jpg" ||
                            item.fileExt == "JPG" ||
                            item.fileExt == "png" ||
                            item.fileExt == "PNG" ||
                            item.fileExt == "JPEG" ||
                            item.fileExt == "jpeg"
                        ) {
                            this.pictureArrayq.splice(index, 1);
                        } else if (item.fileExt == "mp4" || item.fileExt == "MP4") {
                            this.videoArrayq.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);
        },
        // 文件上传
        // submitUpload() {
        //     this.$refs.upload.submit();
        // },
        closeModal(){
            this.$emit('dialogClose')
        },
        dragChange(val){
            console.log(val)
            // let oldIndex = val.moved.oldIndex
            // let newIndex = val.moved.newIndex
            // let oldItem = this.changeSupervision.gwComFileList[oldIndex]
            // let newItem = this.changeSupervision.gwComFileList[newIndex]
            // this.changeSupervision.gwComFileList[oldIndex] = newItem
            // this.changeSupervision.gwComFileList[newIndex] = oldItem
            console.log(this.pictureArray)
            let gwComFileList = []
            gwComFileList = gwComFileList.concat(this.pictureArray).concat(this.audioArray).concat(this.videoArray).concat(this.fileArray)
            this.changeSupervision.gwComFileList = gwComFileList
            console.log(this.changeSupervision.gwComFileList)
        },
        dragChangeq(val){
            console.log(val)
            // let oldIndex = val.moved.oldIndex
            // let newIndex = val.moved.newIndex
            // let oldItem = this.changeSupervision.gwComFileList[oldIndex]
            // let newItem = this.changeSupervision.gwComFileList[newIndex]
            // this.changeSupervision.gwComFileList[oldIndex] = newItem
            // this.changeSupervision.gwComFileList[newIndex] = oldItem
            console.log(this.pictureArrayq)
            let revisionFileList = []
            revisionFileList = revisionFileList.concat(this.pictureArrayq).concat(this.audioArrayq).concat(this.videoArrayq).concat(this.fileArrayq)
            this.changeSupervision.revisionFileList = revisionFileList
            console.log(this.changeSupervision.revisionFileList)
        },
        previewFile(url){
            this.dialogImageUrl = `${this.hostUrl}/${url}`
            this.previewDialogVisible = true
        },
        picRotate(){
            if(this.rotateDeg.transform == 'rotate(0deg)'){
                this.rotateDeg = {'transform': 'rotate(90deg)'}
            }else if(this.rotateDeg.transform == 'rotate(90deg)'){
                this.rotateDeg = {'transform': 'rotate(180deg)'}
            }else if(this.rotateDeg.transform == 'rotate(180deg)'){
                this.rotateDeg = {'transform': 'rotate(270deg)'}
            }else if(this.rotateDeg.transform == 'rotate(270deg)'){
                this.rotateDeg = {'transform': 'rotate(360deg)'}
            }else if(this.rotateDeg.transform == 'rotate(360deg)'){
                this.rotateDeg = {'transform': 'rotate(90deg)'}
            }

        }
    },
    watch:{
        problemId(val){
            this.changeSup(val)
        },
        pertype(val){
            if(val == 20){
                this.disabled = true
            }
        }
    }
}
</script>
<style lang="scss">
    .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>