fj-dc-ui/.svn/pristine/c5/c5dc5ba073a8a5f91957fc9fc587f0c8299d1d2b.svn-base

<template>
  <!-- 问题处置-2020人饮问题编辑 -->
  <div style="height:100%;width:100%" id="wenTiContainer_sk">
    <el-container>
      <el-aside
        width="318px"
        style="border-right:2px solid #d5d5ff;float:left"
        :style="{'max-height':testHeight+'px','height':testHeight+'px'}"
        v-show="!rowId"
      >
        <wt-left-tree orgType="108" @treeNodeClickHandler="treeNodeClickHandler" @changeYear="changeYear"
                      @organList="getAllTreeData" @changeTabType="changeTabType"></wt-left-tree>
      </el-aside>
      <!-- 主要窗口 -->
      <el-main style="margin:0px;padding:0px;overflow-y:hidden;" class="shuiku" v-loading="exportLoading">
        <!-- <el-card> -->
        <div class="pages" :style="{'max-height':testHeight+'px'}">
          <!-- 为什么要根据rowId来判断过滤条件的显示或者隐藏？ -->
          <div style="padding: 12px 0 0 0">
            <el-row type="flex" justify="space-between">
              <el-col :span="24">
                <el-form :inline="true" size="mini" class="demo-form-inline"
                         style="padding-left: 10px;">
                  <el-form-item label="行政区划:">
                    <el-input
                      resize="none"
                      type="input"
                      :rows="3"
                      placeholder="请输入行政区划名称"
                      v-model.trim="findParams.adFullName"
                      clearable
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="督查对象名称:">
                    <el-input
                      resize="none"
                      type="input"
                      :rows="3"
                      placeholder="请输入名称"
                      v-model.trim="findParams.nm"
                      clearable
                    ></el-input>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>

            <el-row type="flex" justify="space-between" v-show="showExpandSearchPanel">
              <el-col :span="24">
                <el-form :inline="true" size="mini" class="demo-form-inline"
                         style="padding-left: 10px;">
                  <el-form-item label="问题类别:">
                    <el-select v-model="findParams.inspPblmName" clearable placeholder="请选择">
                      <el-option
                        v-for="item in problemList"
                        :key="item.guid"
                        :label="item.inspPblmsName"
                        :value="item.inspPblmsName"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="问题筛选:">
                    <el-select v-model="pblscr" clearable placeholder="请选择">
                      <el-option
                        v-for="item in pblscrList"
                        :key="item.value"
                        :label="item.lable"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="上报人员:">
                    <el-input
                      resize="none"
                      type="input"
                      :rows="3"

                      placeholder="请输入名称"
                      v-model.trim="findParams.persName"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="发现时间:">
                    <el-date-picker
                      style="width: 200px;"
                      v-model="value6"
                      type="daterange"
                      value-format="yyyy-MM-dd"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                    ></el-date-picker>
                  </el-form-item>
                  <el-form-item label="所在组:">
                    <el-input
                      resize="none"
                      type="input"
                      :rows="3"
                      placeholder="请输入所在组名称"
                      v-model.trim="pblscrGroup"
                      clearable
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="是否包含多媒体文件:">
                    <el-select v-model="findParams.hasVedio" clearable placeholder="请选择">
                      <el-option
                        v-for="item in hasVedio1"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="问题督查状态:">
                    <el-select v-model="findParams.state" clearable placeholder="请选择">
                      <el-option
                        v-for="item in stateList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </el-col>

            </el-row>
            <el-row type="flex" justify="space-between" style="border-top:1px solid #0014ff2e;">
              <el-col style='padding-bottom:10px;' :offset="11" :span="2">
                <el-button style="float:right;margin-right:10px;border: 1px solid #0014ff2e;
                                    border-radius: 0px 0px 5px 5px;border-top: 0px;" type="info" plain
                           size="mini"
                           @click="showExpandSearchPanel = !showExpandSearchPanel"

                >
                  {{showExpandSearchPanel?'收起':'更多条件'}}
                  <i class="el-icon-arrow-down el-icon--right" v-show="!showExpandSearchPanel"/>
                  <i class="el-icon-arrow-up el-icon--right" v-show="showExpandSearchPanel"/>
                </el-button>
              </el-col>
              <el-col :offset="2" :span="9">
                <el-button
                  style="color:rgba(255,255,255,1);float:right;margin-right:10px;margin-top:5px;"
                  type="primary"
                  icon="el-icon-search"
                  @click="search"
                >&nbsp;查&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;询&nbsp;
                </el-button>
                <el-button
                  style="color:rgba(255,255,255,1);float:right;margin-right:10px;margin-top:5px;"
                  type="success"
                  @click="submitBtn"
                >问题提交
                </el-button>
                <el-button
                  style="color:rgba(255,255,255,1);float:right;margin-right:10px;margin-top:5px;"
                  type="success"
                  icon="el-icon-download"
                  @click="exportExcel"
                >导出EXCEL
                </el-button>
                <!--                <el-button-->
                <!--                  style="color:rgba(255,255,255,1);float:right;margin-right:10px;margin-top:5px;"-->
                <!--                  type="success"-->
                <!--                  icon="el-icon-download"-->
                <!--                  @click="exportExcel"-->
                <!--                >导出EXCEL-->
                <!--                </el-button>-->
                <shuiKuWentiPl v-if="showShuiKuTianBaoPl"
                               :showShuiKuTianBaoPl="showShuiKuTianBaoPl"
                               titleName="小水库"
                               @closePlDialog="closePlDialog">
                </shuiKuWentiPl>

              </el-col>
            </el-row>

          </div>

          <!-- 查询展示 -->
          <div class="search" style="margin-top:10px;">
            <el-table
              v-loading="loading"
              border
              ref="multipleTable"
              :height="tableHeight"
              :data="searchResult"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column
                type="selection"
                min-width="55">
              </el-table-column>
              <el-table-column align="center" type="index" label="序号" min-width="25">
                <template slot-scope="scope">{{ (currentPage - 1) * pageSize + (scope.$index + 1) }}
                </template>
              </el-table-column>

              <!-- <el-table-column header-align="center" align="center" min-width="140" prop="inspPblmName" label="小水库问题类别"></el-table-column> -->
              <el-table-column
                header-align="center"
                align="center"
                min-width="60"
                prop="province"
                label="省" v-if="isXj"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                header-align="center"
                align="center"
                min-width="60"
                prop="city"
                :label="ownAdName"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                header-align="center"
                align="center"
                min-width="60"
                prop="country"
                label="县"
                v-if="isXj"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                header-align="center"
                align="center"
                min-width="110"
                prop="nm"
                label="督查对象名称"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                header-align="center"
                align="center"
                min-width="140"
                prop="inspPblmName"
                label="督查问题类别"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                header-align="center"
                align="center"
                min-width="100"
                prop="checkPoint"
                label="检查项目"
                show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                header-align="center"
                align="center"
                min-width="100"
                prop="pblmDescBz"
                label="问题描述"
                show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                header-align="center"
                align="center"
                min-width="100"
                prop="state"
                label="问题督查状态">
                <template slot-scope="scope">
                  <p v-if="Number(scope.row.state) === 0"><span class="inspPblmCate"
                                                                style="background: #F56C6C;">未提交</span>
                  </p>
                  <p v-if="scope.row.state == 2"><span class="inspPblmCate"
                                                       style="background: #409EFF;">已提交</span>
                  </p>
                  <p v-if="scope.row.state == 3"><span class="inspPblmCate"
                                                       style="background: #67C23A;">已发布</span>
                  </p>
                </template>
              </el-table-column>
              <el-table-column
                header-align="center"
                align="center"
                min-width="70"
                prop="persName"
                label="上报人"
              ></el-table-column>
              <el-table-column
                header-align="center"
                align="center"
                min-width="80"
                show-overflow-tooltip
                prop="orgNm"
                label="所在组"
              ></el-table-column>
              <el-table-column
                prop="collTime"
                label="上报时间"
                :formatter="timestampToTime"
                sortable
                align="center"
                min-width="110"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                header-align="center"
                align="center"
                min-width="150"
                prop="hasVedio"
                label="是否包含多媒体文件"
              >
                <template slot-scope="scope">
                  <p v-if="scope.row.hasVedio == 1">是</p>
                  <p v-if="scope.row.hasVedio == 0">否</p>
                </template>
              </el-table-column>
              <el-table-column
                fixed="right"
                label="操作"
                min-width="130"
              >
                <template slot-scope="scope">
                  <!--                                    <span style="margin-right:10px;" v-if="ownPriv('manage')">-->
                  <!--                                        <el-button icon="el-icon-s-flag" type="text" v-if="scope.row.quote == '1'" title="已被督查简报引用"-->
                  <!--                                                   @click="changeSfYy(scope.row.pblmId,1)"></el-button>-->
                  <!--                                        <i class="el-icon-s-flag" v-else title="未被督查简报引用" @click="changeSfYy(scope.row.pblmId,0)"-->
                  <!--                                           style="cursor: pointer;"></i>-->
                  <!--                                    </span>-->
                  <el-button icon="el-icon-view" title="查看详情" type="text"
                             @click="showDetails(scope.row.pblmId)"></el-button>
                  <el-button icon="el-icon-edit" type="text" title="修改问题"
                             @click="changeSup(scope.row.pblmId)"
                             v-if="ownPriv('manage')"></el-button>
                  <el-button
                    icon="el-icon-delete"
                    type="text"
                    v-if="ownPriv('manage')"
                    title="删除问题" @click="removeSuperviseOne(scope.row.pblmId)"
                  ></el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="paginationWarpper">
              <el-pagination
                class="paginationCenter"
                background
                @size-change="handleSizeChange"
                @current-change="search"
                :current-page.sync="currentPage"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              ></el-pagination>
            </div>
          </div>
          <!-- 详情弹框 -->
          <el-dialog
            class="outerDialog custom_dialog"
            title="问题详情"
            width="60%"
            v-if="supervisionDetailsVisible"
            :visible.sync="supervisionDetailsVisible"
          >
            <supervision-details ref="xianqing" :problemId="currentProblemId"
                                 :objType="108"></supervision-details>
            <span slot="footer">
                        <el-button style="margin-top:5px;" @click="supervisionDetailsVisible = false">返回</el-button>
                        </span>
          </el-dialog>
          <!-- 删除的弹窗 -->
          <el-dialog class="deleteDialog" title="问题删除描述" :visible.sync="problemDeleteVisible">
            <Problem-delete
              ref="deleteMiaoShu"
              :deleteProblemId="deleteId"
              @deleteSuccess="deleteSuccess"
            ></Problem-delete>
            <span slot="footer">
                        <el-button @click="problemDeleteVisible = false">返回</el-button>
                        </span>
          </el-dialog>

        </div>
      </el-main>
    </el-container>
    <EditPicOnline
      ref="editPicWeakupEvnent"
      v-if="editPicDialog"
      :picUrl="picUrl"
      @cancelHandler="cancelHandler"
      @editPicData="editPicDataEvent"
    ></EditPicOnline>


    <!-- 修改组件 -->
    <problem-edit :editId="editId" @closeEditDialog="closeEditDialog" v-if="changeSupervisionVisible"
                  :pType="pType"></problem-edit>
  </div>
</template>

<script>
    import {
        deleteFileById,
        findProblemPageInfo,
        getSupervisdByID,
        showDetailsXq,
        submitUpload,
        updatelist,
        pblmSubmit
    } from "@api/duChaAPI.js";
    import {exportModel} from "@util/gw_exportModel";
    import request from "@util/gw_ajax_request.js";
    import elaudio from "@widget/elAudioShort.vue";
    import inuptWithDuChaTreeNode from "@widget/inuptWithDuChaTreeNode.vue";
    import inputWidthDuChaNodes from "@widget/inputWithDuChaNodes.vue";
    import inputWidthDuChaShuiKu from "@widget/inputWith_sk.vue";
    import problemDialog from "./problemDialog.vue";
    import shuiKuWentiPl from "./problemBatchImp/tongYongWenti_piliang.vue"
    import wtLeftTree from "./wtcz_lefttree.vue"
    import { hostUrl } from "@util/global_variable.js";
    export default {
        props: ["codeId", "rowId"],
        components: {
            upload: resolve => {
                require(["@widget/uploadFile.vue"], resolve);
            },
            //详情页
            supervisionDetails: resolve => {
                require(["../duChaWenTi/problemDetails/supervisionDetails_ncysaqXjbt.vue"], resolve);
            },
            // 删除描述页
            ProblemDelete: resolve => {
                require(["./problemDelete.vue"], resolve);
            },
            EditPicOnline: resolve => {
                require(["@widget/EditPicOnline/EditPicOnline.vue"], resolve);
            },
            // addPicDialog: resolve => {
            //   require(["./addPicDialog.vue"], resolve);
            // },
            elaudio: elaudio,
            inuptWithDuChaTreeNode: inuptWithDuChaTreeNode,
            inputWidthDuChaNodes: inputWidthDuChaNodes,
            inputWidthDuChaShuiKu: inputWidthDuChaShuiKu,
            problemDialog: problemDialog,
            shuiKuWentiPl: shuiKuWentiPl,
            wtLeftTree: wtLeftTree,
            // 修改问题
            problemEdit: resolve => {
                require(["../duChaWenTi/problemModify/ncysaqXjbtProblemModify.vue"], resolve);
            },
        },
        data() {
            var validatePass1 = (rules1, value, callback) => {
                if (this.newSupervision.startTime > this.newSupervision.endTime) {
                    callback(new Error("结束时间不能早于开始时间"));
                } else {
                    callback();
                }
            };
            var validatePass2 = (rules1, value, callback) => {
                let startTime = this.changeSupervision.startTime.slice(0, 10);
                if (startTime > this.changeSupervision.endTime) {
                    callback(new Error("结束时间不能早于开始时间"));
                } else {
                    callback();
                }
            };
            var divisionList = (rules1, value, callback) => {
                if (this.newGroup.divisionList.length) {
                    callback();
                } else {
                    callback(new Error("至少要添加一个地区"));
                }
            };
            return {
                tabType: "0",//0全部，1当前数据，2历史数据
                editPicRefresh: true,
                showExpandSearchPanel: false,
                tableHeight: window.innerHeight - 291,
                globoId: "",
                addPicPanel: false,
                currentDate: new Date(),
                deleteId: "",
                treeNodeArray: [],
                treeNodeSelectVisible: false,
                adNodeArray: [],
                adNodeSelectVisible: false,
                areaSelectVisible: false,
                rsvrNodeArray: [],
                rsvrNodeSelectVisible: false,
                skSelectVisible: false,

                currentProblemId: "",
                updateIdXiuGai: "",
                rules1: {
                    inspPblmName: [
                        {
                            required: true,
                            message: "请输入问题名称",
                            trigger: "blur"
                        },
                        {
                            min: 1,
                            max: 999,
                            message: "不超过100字符",
                            trigger: "blur"
                        }
                    ],
                    inspPblmDesc: [
                        {
                            required: true,
                            message: "请输入问题描述",
                            trigger: "blur"
                        }
                    ],
                    recPers: [
                        {
                            required: true,
                            message: "请输入记录人",
                            trigger: "blur"
                        },
                        {
                            min: 1,
                            max: 999,
                            message: "不超过100字符",
                            trigger: "blur"
                        }
                    ],
                    objType: [
                        {
                            required: true,
                            message: "请选择督查对象类型",
                            trigger: "change"
                        }
                    ],
                    objId: [
                        {
                            required: true,
                            message: "请选择督查对象类型",
                            trigger: "change"
                        }
                    ],
                    inspPblmType: [
                        {
                            required: true,
                            message: "请选择督查问题类型",
                            trigger: "change"
                        }
                    ],
                    dataStat: [
                        {
                            required: true,
                            message: "请选择数据状态",
                            trigger: "change"
                        }
                    ],
                    collTime: [
                        {
                            required: true,
                            message: "请选择采集时间",
                            trigger: "change"
                        }
                    ],
                    ifCasePblm: [
                        {
                            required: true,
                            message: "请选择是否典型",
                            trigger: "change"
                        }
                    ],
                    pblmStat: [
                        {
                            required: true,
                            message: "请选择问题类型",
                            trigger: "change"
                        }
                    ],
                    inspPblmCate: [
                        {
                            required: true,
                            message: "请选择问题程度",
                            trigger: "change"
                        },
                        {
                            trigger: "change"
                        }
                    ]
                },
                dxdcAsideHeight: window.innerHeight - 220,
                maxHeight: window.innerHeight - 120,
                testHeight: window.innerHeight - 120,
                supervisionStateList: [
                    {
                        value: "0",
                        label: "暂存"
                    },
                    {
                        value: "1",
                        label: "上报"
                    }
                ],

                supervisionState: [
                    {
                        value: "0",
                        label: "一般"
                    },
                    {
                        value: "1",
                        label: "较重"
                    },
                    {
                        value: "2",
                        label: "严重"
                    },
                    {
                        value: "3",
                        label: "特别严重"
                    }
                ],
                supervision: [
                    {
                        value: "1",
                        label: "是"
                    },
                    {
                        value: "0",
                        label: "否"
                    }
                ],
                hasVedio1: [
                    {
                        value: "1",
                        label: "是"
                    },
                    {
                        value: "0",
                        label: "否"
                    }
                ],
                findUseOrgArray: [],
                areaInputValue: {},
                memberInputValue: {},
                multipleSelection: [], // 已选
                selectionType: {
                    remove: 0,
                    befor: 0,
                    now: 0,
                    after: 0
                },
                // 根据客户点击的督查类型查找督查对象ID
                // 新增
                listobjId: [],
                userId: localStorage.getItem("userid"),
                treeData: [],
                // 修改督查
                pictureArray: [],
                audioArray: [],
                videoArray: [],
                fileArray: [],
                audiotabName: "",
                videotabName: "",
                picturetabName: "",
                filetabName: "",
                playerOptions: {
                    height: "120",
                    autoplay: true,
                    muted: true,
                    language: "en",
                    playbackRates: [0.7, 1.0, 1.5, 2.0],
                    sources: [
                        {
                            type: "video/mp4",
                            // mp4
                            src: "http://vjs.zencdn.net/v/oceans.mp4"
                            // webm
                            // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
                        },
                        {
                            type: "video/mp4",
                            // mp4
                            src: "http://vjs.zencdn.net/v/oceans.mp4"
                            // webm
                            // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
                        },
                        {
                            type: "video/mp4",
                            // mp4
                            src: "http://vjs.zencdn.net/v/oceans.mp4"
                            // webm
                            // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
                        },
                        {
                            type: "video/mp4",
                            // mp4
                            src: "http://vjs.zencdn.net/v/oceans.mp4"
                            // webm
                            // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
                        }
                    ]
                },
                changeSupervisionVisible: false,
                changeSupervisionLoading: false,
                changeSupervision: {
                    nm: "",
                    presId: localStorage.getItem("userid"),
                    endTime: "",
                    pblmId: "",
                    objId: "",
                    pType: "",
                    inspGroupId: "",
                    inspPblmName: "",
                    inspPblmDesc: "",
                    pblmLong: "",
                    pblmLat: "",
                    pblmStat: "",
                    ifCasePblm: "",
                    inspPblmOrgName: "",
                    pblmPersName: "",
                    inspPblmCate: "",
                    reviOpin: "",
                    reviConc: "",
                    reviOrgGuid: "",
                    collTime: "",
                    recPers: "",
                    gwComFiles: [
                        {
                            id: "",
                            filePath: "",
                            bizId: ""
                        }
                    ]
                },
                flash: false,
                // 督查类型
                supervisionTypeList: [
                    {
                        value: "1",
                        label: "小水库"
                    }
                ],
                // 查询
                value6: [],
                findParams: {
                    hasVedio: "",
                    adCode: "",
                    pblmStat: "",
                    nm: "",
                    adFullName: "",
                    startTime: "",
                    endTime: "",
                    pType: 108,
                    inspPblmName: "",
                    persId: localStorage.getItem("userid"),
                    state: ''
                },
                stateList: [
                    {
                        label: '未提交',
                        value: '0'
                    },
                    {
                        label: '已提交',
                        value: '2'
                    },
                    {
                        label: '已发布',
                        value: '3'
                    }
                ],
                currentPage: 1, // 页码
                pageSize: 20, // 条数
                loading: false,
                total: 0, // 总数
                searchResult: [], // 结果
                crId: "", // 当前督查id
                // 督查详情
                userid: localStorage.getItem("userid"),
                supervisionDetailsVisible: false,
                problemDeleteVisible: false,
                supervisionDetails: {},
                pblmId: "",
                gwComFiles: [],
                pblscr: "",
                pblscrList: [
                    {
                        lable: "我的问题",
                        value: localStorage.getItem("userid")
                    }
                ],
                pblscrGroup: "",
                t1: {},
                t2: {},
                t3: {},
                problemList: [],
                currentCheckPointList: [],
                currentProblemDescList: [],
                xiangqingmiaoshu: '',
                wenTiLeiBie: "",
                jianChaXiangMu: "",
                actionUrl: "",
                fileList: [],
                header: {
                    'persId': localStorage.getItem('userid'),
                    'accessToken': localStorage.getItem('accessToken')
                },
                fileListLength: 0,
                showShuiKuTianBaoPl: false,
                uploadDisabled: true,
                exportLoading: false,
                datas: {},
                orgIds: '001',
                editPicDialog: false,
                picUrl: "",
                picId: "",
                downloadIcon: "el-icon-download",
                buttonLoading: false,
                treeAllData: [],
                newYear: "",
                editId: "",
                pType: 108,
            };
        },
        computed: {
            hostUrl() {
                return hostUrl
            }
        },
        created() {
            if (this.userId) {
                console.log("已经登录");
                this.search();
            } else {
                this.$router.push("/login");
            }
            this.getproblemSmallType();
            this.addPicPanel = false;
        },
        activated() {
        },
        methods: {
            changeTabType(tabType) {
                this.treeNodeArray = [];
                this.tabType = tabType;
                this.search();
            },
            //图片编辑
            editPicEvent(item) {
                this.picUrl = this.hostUrl + "/" + item.filePath;
                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 = [];
                        showDetailsXq(this.updateIdXiuGai).then(res => {
                            res.data.gwComFiles.forEach(item => {
                                this.pictureArray.push(item);
                                this.editPicDialog = false;
                                this.editPicRefresh = true;
                            });
                            this.picturetabName = "图片资料(" + this.pictureArray.length + ")";
                        });
                    }
                });
            },
            // 操作成功反馈
            successInfo() {
                this.$message({
                    type: "success",
                    message: "操作成功!"
                });
            },
            // 操作失败反馈
            failInfo(val) {
                this.$message.error(val);
            },
            // 已选择项
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },

            // 查询
            async search() {
                this.loading = true;
                let _self = this;
                let orgAllNode = this.treeAllData;
                _self.loading = true;
                let data = _self.findParams;
                data.startTime = _self.value6 && _self.value6.length > 0 ? _self.value6[0] : '';
                data.endTime = _self.value6 && _self.value6.length > 0 ? _self.value6[1] : '';
                data.pageNum = _self.currentPage;
                data.recPers = _self.pblscr;
                data.orgNm = _self.pblscrGroup;
                data.pageSize = _self.pageSize;
                data.villType = "";
                _self.findUseOrgArray = [];
                _self.treeNodeArray.forEach(item => {
                    if (item.id.length < 12) {
                        orgAllNode.forEach(orgItem => {
                            if (orgItem.id.startsWith(item.code)) {
                                _self.findUseOrgArray.push(orgItem.id);
                            }
                        });
                    }
                    _self.findUseOrgArray.push(item.id);
                });

                if (_self.findUseOrgArray.length > 0) {
                    data["orgIds"] = _self.findUseOrgArray.join(",");
                    this.orgIds = _self.findUseOrgArray.join(",");
                } else {
                    data["orgIds"] = "";
                }
                if (this.rowId) {
                    data["orgIds"] = this.rowId;
                }
                data["year"] = this.newYear;
                data.tabType = this.tabType;
                findProblemPageInfo(data).then(res => {
                    _self.loading = false;
                    _self.multipleSelection = [];
                    if (res.success) {
                        _self.searchResult = res.data.list;
                        // console.log(  "绝对是"+searchResult)
                        _self.total = res.data.total;
                    } else {
                        _self.failInfo();
                    }
                });
            },
            async submitBtn() {
                if (this.multipleSelection.length === 0) {
                    this.$message.warning('请至少选择一条问题');
                    return;
                }
                let newArray = this.multipleSelection.map((item) => {
                    return {
                        "objId": item.objId,
                        "objType": item.objType,
                        "state": "3"
                    }
                });
                const {success, message} = await pblmSubmit(newArray);
                if (success) {
                    this.$message.success('问题发布成功');
                    this.search();
                } else {
                    this.$message.warning(message);
                }
            },
            async exportExcel() {
                this.exportLoading = true;
                let _self = this;
                let orgAllNode = _self.treeAllData;
                let data = _self.findParams;
                data.pageNum = _self.currentPage;
                data.pageSize = _self.pageSize;
                data.villType = "";
                _self.datas = JSON.stringify(data);
                _self.treeNodeArray.forEach(item => {
                    console.log(item);
                    if (item.id.length < 12) {
                        orgAllNode.forEach(orgItem => {
                            if (orgItem.id.startsWith(item.id)) {
                                _self.findUseOrgArray.push(orgItem.id);
                            }
                        });
                    } else {
                        _self.findUseOrgArray.push(item.id);
                    }
                });
                let url = "/pdcApi/dc/insp/pblm/page/export";
                let type = "post";
                let exportName = "农村饮水安全问题列表.xls"
                let result = await exportModel(type, url, exportName, this.datas);
                _self.exportLoading = result;
            },
            async exportWord() {
                let _self = this;
                _self.exportLoading = true;
                let orgAllNode = _self.treeAllData;
                let data = _self.findParams;
                data.pageNum = _self.currentPage;
                data.pageSize = _self.pageSize;
                data.villType = "";
                this.datas = data;
                _self.treeNodeArray.forEach(item => {
                    if (item.id.length < 12) {
                        orgAllNode.forEach(orgItem => {
                            if (orgItem.id.startsWith(item.id)) {
                                _self.findUseOrgArray.push(orgItem.id);
                            }
                        });
                    } else {
                        _self.findUseOrgArray.push(item.id);
                    }
                });
                //下载word文档2
                await request.post('/rever/doc', this.datas).then(res => {
                    if (res.success) {
                        console.log(this.response)
                        var a = document.createElement('a');
                        a.href = `${this.hostUrl}${res.data.downloadPath}`;
                        //设置文件名称
                        a.download = '小水库问题详情.doc';
                        a.click();
                        // window.open(`${this.hostUrl}${res.data.downloadPath}`)
                        _self.exportLoading = false;
                    } else {
                        _self.$mesage.error(res.message)
                    }
                }).catch(res => {
                    _self.$mesage.error(res.message)
                })
            },
            downFile(blob, fileName) {
                // 非IE下载
                if ("download" in document.createElement("a")) {
                    let link = document.createElement("a");
                    link.href = window.URL.createObjectURL(blob); // 创建下载的链接
                    link.download = fileName; // 下载后文件名
                    link.style.display = "none";
                    document.body.appendChild(link);
                    link.click(); // 点击下载
                    window.URL.revokeObjectURL(link.href); // 释放掉blob对象
                    document.body.removeChild(link); // 下载完成移除元素
                } else {
                    // IE10+下载
                    window.navigator.msSaveBlob(blob, fileName);
                }
            },
            // 下载模板
            async downloadTemplate() {

                await this.search();
                await this.downloadTemplateSet();
                this.uploadDisabled = false;

            },
            downloadTemplateSet() {
                let _this = this;
                _this.downloadIcon = "el-icon-loading"
                // 使用POST传值下载文件,可以看到请求参数和避免请求参数过长导致请求失败
                let xhr = new XMLHttpRequest();
                this.findParams.orgIds = '';
                let datas = JSON.stringify(this.findParams);
                xhr.open('post', '/api/dc/imp/pblm/download', true);
                xhr.responseType = 'blob';
                // data传值方式和Content-Type要对应
                let data = 'userId=' + this.userId + '&orgType=001&orgIds=' + this.orgIds + '&datas=' + datas;
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                // xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8');
                xhr.setRequestHeader('persId', localStorage.getItem('userid') ? localStorage.getItem('userid') : '');
                xhr.onload = function () {
                    if (this.status == 200) {
                        let blob = this.response;
                        let a = document.createElement('a');
                        let url = window.URL.createObjectURL(blob);
                        a.href = url;
                        //设置文件名称
                        a.download = '小水库问题.xls';
                        a.click();
                    }
                    _this.downloadIcon = "el-icon-download"
                }
                xhr.send(data);
            },
            showPlDialog() {
                this.showShuiKuTianBaoPl = true
            },
            closePlDialog(val) {
                this.showShuiKuTianBaoPl = false
                this.search();
            },
            handleSizeChange(pageSize) {
                this.pageSize = pageSize;
                this.search();
            },

            // 新增
            getDuChaId() {
                //新增中 获取督查对象id
                getSupervisdByID(this.userid, 1).then(res => {
                    if (res.success) {
                        // alert(1)
                        this.listobjId = res.data;
                    } else {
                        this.failInfo();
                    }
                });
            },

            // 取消
            removeNewSupervision(arg) {
                this.gwComFiles = [];
                if (arg) {
                    this.gwComFiles = arg;
                    this.$refs.uploadFile.init();
                }
            },
            // 详情弹框
            showDetails(id) {
                this.currentProblemId = id;
                this.supervisionDetailsVisible = true;
            },
            // 删除弹窗
            removeSuperviseOne(id) {
                this.deleteId = id;
                this.problemDeleteVisible = true;
                // showDetailsXq(id).then(res => {
                //     // console.log("123" + res.data)
                //     this.persNameRen = res.data.persName;
                // });
            },
            deleteSuccess() {
                this.problemDeleteVisible = false;
                this.search();
                this.$emit("problemCount");
            },
            // 修改弹窗显示
            // changeSup(id) {
            //     this.currentProblemId = '';
            //     this.pictureArray = [];
            //     this.audioArray = [];
            //     this.videoArray = [];
            //     this.fileArray = [];
            //     this.updateIdXiuGai = id;
            //     showDetailsXq(this.updateIdXiuGai).then(res => {
            //         this.changeSupervision = res.data;
            //         this.fileList = this.changeSupervision.gwComFiles;
            //         this.t1['inspPblmsName'] = this.changeSupervision.inspPblmsName
            //         this.problemList.forEach(ele => {
            //             if (ele.inspPblmsName == this.t1.inspPblmsName) {
            //                 this.problemListChange(ele)
            //             }
            //         })
            //         this.t2['checkPointName'] = this.changeSupervision.checkPoint
            //         this.currentCheckPointList.forEach(ele => {
            //             if (ele.checkPointName == this.t2.checkPointName) {
            //                 this.currentCheckPointListChange(ele)
            //             }
            //         })
            //         this.t3['pblmDesc'] = this.changeSupervision.pblmDesc
            //         this.changeSupervisionVisible = true;
            //         res.data.gwComFiles.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({
            //                     id: item.id,
            //                     bizId: item.bizId,
            //                     width: "130",
            //                     height: "130",
            //                     autoplay: false,
            //                     muted: true,
            //                     language: "en",
            //                     playbackRates: [0.7, 1.0, 1.5, 2.0],
            //                     sources: [
            //                         {
            //                             type: "video/mp4",
            //                             // mp4
            //                             src: this.hostUrl + item.filePath
            //                             // webm
            //                             // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
            //                         }
            //                     ]
            //                 });
            //             } else {
            //                 this.fileArray.push(item);
            //             }
            //         });
            //
            //         this.picturetabName = "图片资料(" + this.pictureArray.length + ")";
            //         this.audiotabName = "音频资料(" + this.audioArray.length + ")";
            //         this.videotabName = "视频资料(" + this.videoArray.length + ")";
            //         this.filetabName = "其它资料(" + this.fileArray.length + ")";
            //     });
            // },
            changeSup(pblmId) {
                this.editId = pblmId;
                this.changeSupervisionVisible = true
            },
            // 提交修改信息
            changeSupervisionInfo() {
                this.$refs.changeSupFrom.validate(valid => {
                    if (valid) {
                        this.$nextTick(() => {
                            this.buttonLoading = true;
                            if (this.$refs.uploadFile.submitUpload(this.changeSupervision.pblmId)) {
                                this.removeNewSupervision();
                            }
                            setTimeout(() => {
                                this.changeSupervisionLoading = true;
                                this.changeSupervision.gwComFiles = this.gwComFiles;
                                let data = this.changeSupervision;
                                updatelist(data).then(res => {
                                    this.pblmId = res.data.pblmId;
                                    this.gwComFiles = res.data.gwComFiles;
                                    this.changeSupervisionLoading = false;
                                    if (res.success) {
                                        this.buttonLoading = false;
                                        this.search();
                                        this.successInfo();
                                        this.addPicPanel = false;
                                        this.changeSupervisionVisible = false;
                                    } else {
                                        this.failInfo();
                                    }
                                });
                            }, 1000)
                        })

                    }
                });
            },
            // 时间格式化
            timestampToTime(row, column) {
                var date = new Date(row.collTime);
                var Y = date.getFullYear() + "-";
                var M =
                    (date.getMonth() + 1 < 10
                        ? "0" + (date.getMonth() + 1)
                        : date.getMonth() + 1) + "-";
                var D =
                    (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
                var h =
                    (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
                var m =
                    date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
                return Y + M + D;
            },

            // 删除图片文件
            removeFile(id, index) {
                var _self = this;
                this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "返回",
                    type: "warning"
                }).then(
                    res => {
                        if (res === "confirm") {
                            deleteFileById(id, this.userId).then(res => {
                                if (res.success) {
                                    this.fileListLength = 0;
                                    this.fileList.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("返回");
                    }
                );

            },
            changeSupervisionVisiblefalse() {
                this.$nextTick(() => {
                    if (this.flash) {
                        this.flash = false;
                        this.search();

                    }
                });

                this.changeSupervisionVisible = false;
                this.changeSupervision = {
                    dataStat: "",
                    nm: "",
                    endTime: "",
                    pblmId: "",
                    objId: "",
                    pType: "",
                    inspGroupId: "",
                    inspPblmCate: "",
                    inspPblmName: "",
                    inspPblmDesc: "",
                    pblmLong: "",
                    pblmLat: "",
                    pblmStat: "",
                    ifCasePblm: "",
                    inspPblmOrgName: "",
                    pblmPersName: "",
                    reviOpin: "",
                    reviConc: "",
                    reviOrgGuid: "",
                    collTime: "",
                    recPers: "",
                    note: "",
                    gwComFiles: [
                        {
                            id: "",
                            filePath: "",
                            bizId: ""
                        }
                    ]
                };
                // this.$refs.uploadFile.init();
                this.addPicPanel = false;
            },
            addPic() {
                this.addPicPanel = !this.addPicPanel;
            },
            getproblemSmallType() {

                let result = [];
                request.get('/dc/insp/pblms/getPblmType', {
                    params: {
                        type: '108',
                        pguid: '10800000000000000000000000000000'
                    }
                }).then(res => {
                    if (res.success) {

                        res.data.forEach((ele) => {
                            let haveinspPblmsName = false;
                            result.forEach((inspPblm) => {
                                if (inspPblm['inspPblmsName'] == ele.inspPblmsName) {
                                    //
                                    let havechekPoint = false;
                                    inspPblm['checkPoints'].forEach((chekPoint) => {

                                        if (chekPoint['checkPointName'] == ele.checkPoint) {

                                            havechekPoint = true;
                                        }
                                    });
                                    if (!havechekPoint) {
                                        let newCheckPoint = {};
                                        newCheckPoint['checkPointName'] = ele.checkPoint;
                                        newCheckPoint['sort2'] = ele.sort2;
                                        newCheckPoint['guid'] = ele.guid;
                                        inspPblm['checkPoints'].push(newCheckPoint);
                                    }
                                    haveinspPblmsName = true;
                                }
                            });
                            if (!haveinspPblmsName) {
                                let haveinspPblmsObj = {};
                                haveinspPblmsObj['inspPblmsName'] = ele.inspPblmsName;
                                haveinspPblmsObj['sort1'] = ele.sort1;
                                haveinspPblmsObj['checkPoints'] = [{
                                    checkPointName: ele.checkPoint,
                                    sort2: ele.sort2,
                                    guid: ele.guid
                                }];
                                result.push(haveinspPblmsObj);
                            }
                        })

                        this.problemList = result;
                        console.log(this.problemList);
                    }
                })
            },
            problemListChange: function (item) {
                this.t1 = item;
                this.wenTiLeiBie = item.inspPblmsName;
                this.currentCheckPointList = item.checkPoints;
            },
            currentCheckPointListChange: function (item) {
                this.jianChaXiangMu = item.checkPointName;
                this.currentProblemDescList = item.pblmDescs;
            },
            currentProblemDescListChange: function (item) {
                this.xiangqingmiaoshu = item.pblmDesc;
                console.log(item);
            },

            fileUpErr(err, file, fileList) {
                this.$message.error("上传出错，请修改文件！");
                this.fileList = [];
            },
            fileSuccess(item) {
                this.fileList.push(item.data);
                console.log(this.fileList);
            },
            // onChangeDialog() {
            //     this.changeSupervisionVisible = true;
            //     this.$refs.changeSupFrom.validate(valid => {
            //         if (valid) {
            //             this.changeSupervisionLoading = true;
            //             this.changeSupervision.inspPblmsName = this.wenTiLeiBie
            //             this.changeSupervision.checkPoint = this.jianChaXiangMu
            //             this.changeSupervision.inspPblmName = this.wenTiLeiBie    //后台只需要这一个字段和问题id  inspPblmsName和checkPoint可不传
            //             this.changeSupervision.inspPlbmType = this.t2.sort2;
            //             this.changeSupervision.pblmsTypeId = this.t2.guid;
            //             this.changeSupervision.gwComFiles = this.fileList;
            //             let data = this.changeSupervision;
            //             updatelist(data).then(res => {
            //                 this.pblmId = res.data.pblmId;
            //                 this.gwComFiles = res.data.gwComFiles;
            //                 if (res.success) {
            //                     if (this.$refs.uploadFile.submitUpload(data.pblmId)) {
            //                         this.removeNewSupervision();
            //                         this.successInfo();
            //                         this.addPicPanel = false;
            //                         this.changeSupervisionLoading = false;
            //                     }
            //                 } else {
            //                     _self.failInfo();
            //                 }
            //             });
            //         }
            //     });
            // },

            addFile(file, fileList) {
                this.fileListLength = fileList.length;

            },
            UploadUrl: function () {
                return `/pdcApi/file/insert?bizId=${this.changeSupervision.pblmId}`
            },
            beforeAvatarUpload(file) {
                console.log(file);
            },
            //切换问题是否被督查简报调用
            changeSfYy(row, val) {
                this.$confirm('此问题将切换是否被督查简报引用, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    if (val) {
                        request.post(`/dc/insp/pblm/update`, {
                            "pblmId": row,
                            "quote": 0
                        }).then(res => {
                            if (res.success) {
                                this.search();
                            }

                        })
                    } else {
                        request.post(`/dc/insp/pblm/update`, {
                            "pblmId": row,
                            "quote": 1
                        }).then(res => {
                            if (res.success) {
                                this.search();
                            }
                        })
                    }
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消切换'
                    });
                });

            },
            treeNodeClickHandler(data) {
                this.treeNodeArray = data;
            },
            changeYear(val) {
                this.newYear = val;
                this.search();
            },
            getAllTreeData(data) {
                this.treeAllData = data;
            },
            closeEditDialog() {
                this.changeSupervisionVisible = false
                setTimeout(() => {
                    this.search()
                }, 800)
            }
        },
        watch: {
            codeId: function () {
                this.search();
            },
            showExpandSearchPanel: function (val) {
                if (val) {
                    this.tableHeight = window.innerHeight - 390;
                } else {
                    this.tableHeight = window.innerHeight - 291;
                }
            },
            rowId(val) {
                if (val) {
                    this.search();
                }
            }
        },
    };
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import "./base.css";
  @import url("/src/assets/iconfont/iconfont.css");
  @import url("/src/assets/css/mixin.scss");

  .upload-container {
    width: 100%;
    position: relative;

    .image-uploader {
      width: 35%;
      float: left;
    }

    .image-preview {
      width: 200px;
      height: 200px;
      position: relative;
      border: 1px dashed #d9d9d9;
      float: left;
      // margin-left: 50px;
      .image-preview-wrapper {
        position: relative;
        width: 100%;
        height: 100%;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .image-preview-action {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        cursor: default;
        text-align: center;
        color: #fff;
        opacity: 0;
        font-size: 20px;
        background-color: rgba(0, 0, 0, 0.5);
        transition: opacity 0.3s;
        cursor: pointer;
        text-align: center;
        line-height: 200px;

        .el-icon-delete {
          font-size: 36px;
        }

        .el-icon-edit-outline {
          font-size: 36px;
        }
      }

      &:hover {
        .image-preview-action {
          opacity: 1;
        }
      }
    }

    .image-app-preview {
      margin-bottom: 10px;
      width: 40vh;
      height: 180px;
      position: relative;
      border: 1px dashed #d9d9d9;
      float: left;
      // margin-left: 50px;
      .app-fake-conver {
        height: 44px;
        position: absolute;
        width: 100%; // background: rgba(0, 0, 0, .1);
        text-align: center;
        line-height: 64px;
        color: #fff;
      }
    }
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

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

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

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

  .clearfix:after {
    clear: both;
  }

  #wenTiContainer_sk .el-tree-node {
    /* overflow: auto; */
  }

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

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

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

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

  .shuiku .content {
    margin: 10px;
  }

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

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

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

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

  .scroll300 .el-form {
    padding-top: 5px;
    padding-right: 5px;
  }

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

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

  .shuiku .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }

  .inspPblmCate {
    padding: 2px 10px;
    border-radius: 10px;
    color: #ffffff;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
  }

  #wenTiContainer_sk .el-select, #wenTiContainer_sk .el-input {
    width: 140px !important;
  }
</style>