fj-dc-ui/.svn/pristine/41/41a0f53ca30cdb588b7cb92cc0fc94234f413c99.svn-base

<template>
  <div class="fpdd">
    <div>
      <el-table
        v-loading="loading"
        border
        ref="et"
        :height="tableHeight1"
        :data="jiChaJiHuaResult"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="100"
          prop="year"
          label="年度"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="100"
          prop="batch"
          label="稽察批次"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="100"
          prop="groupNm"
          label="组别"
          sortable
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="200"
          label="开始时间"
        >
          <template slot-scope="scope">
            <el-date-picker
              style="width: 150px;padding: 0 0 0 30px;"
              v-model="scope.row.stTm"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="开始时间">
            </el-date-picker>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="200"
          label="结束时间"
        >
          <template slot-scope="scope">
            <el-date-picker
              style="width: 150px;padding: 0 0 0 30px;"
              v-model="scope.row.enTm"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="结束时间">
            </el-date-picker>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="250"
          label="稽察地点"
          prop="areas"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="200"
          label="稽察项目"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <transition name="el-fade-in-linear">
              <div style="width:100%;height:100%;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;"  v-if="!scope.row.objList.length">
                <i class="el-icon-plus" style="cursor: pointer;" @click="objTypeClick(scope.$index, scope.row, 20)"></i>
              </div>
            </transition>
            <transition name="el-fade-in-linear">
              <div v-if="scope.row.objList.length" style="width:100%;height:100%;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;">
                <span>{{scope.row['workersList']&&scope.row['objList'].length?testformatterArray(scope.row['objList'],'ojbNm'):''}}</span>
                <i style="margin-left: 5px; cursor: pointer;" class="el-icon-view"  title="查看详情"@click="objTypeViewClick(scope.$index, scope.row, 20)"></i>
                <i style="margin-left: 5px; cursor: pointer;" class="el-icon-edit" @click="objTypeClick(scope.$index, scope.row, 20)"></i>
                <i style="margin-left: 5px; cursor: pointer;" class="el-icon-delete" @click="objTypeDelete(scope.$index, scope.row, 20)"></i>
              </div>
            </transition>
          </template>
        </el-table-column>
        <!--<el-table-column-->
          <!--header-align="center"-->
          <!--align="center"-->
          <!--min-width="100"-->
          <!--prop="workDpNm"-->
          <!--label="项目类型"-->
          <!--show-overflow-tooltip-->
        <!--&gt;</el-table-column>-->
        <el-table-column
          header-align="center"
          align="center"
          min-width="200"
          v-if="isJx"
          label="特派员"
        >
          <template slot-scope="scope">
            <!--<transition name="el-fade-in-linear">-->
            <!--<div style="width:100%;height:100%;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;"  v-if="!scope.row.special.length">-->
            <!--<i class="el-icon-plus" style="margin-left: 5px; cursor: pointer;" @click="roleTypeClick(scope.$index, scope.row, 20)"></i>-->
            <!--</div>-->
            <!--</transition>-->
            <transition name="el-fade-in-linear">
              <div v-if="scope.row.commissioner.length" style="width:100%;height:100%;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;">
                <span>{{scope.row['commissioner']&&scope.row['commissioner'].length?testformatterArray(scope.row['commissioner'],'name'):''}}</span>
                <!--<i style="margin-left: 5px; cursor: pointer;" class="el-icon-edit" @click="roleTypeClick(scope.$index, scope.row, 20)"></i>-->
              </div>
            </transition>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="200"
          label="专家组长"
        >
          <template slot-scope="scope">
            <!--<transition name="el-fade-in-linear">-->
              <!--<div style="width:100%;height:100%;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;"  v-if="!scope.row.special.length">-->
                <!--<i class="el-icon-plus" style="margin-left: 5px; cursor: pointer;" @click="roleTypeClick(scope.$index, scope.row, 20)"></i>-->
              <!--</div>-->
            <!--</transition>-->
            <transition name="el-fade-in-linear">
              <div v-if="scope.row.special.length" style="width:100%;height:100%;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;">
                <span>{{scope.row['special']&&scope.row['special'].length?testformatterArray(scope.row['special'],'name'):''}}</span>
                <!--<i style="margin-left: 5px; cursor: pointer;" class="el-icon-edit" @click="roleTypeClick(scope.$index, scope.row, 20)"></i>-->
              </div>
            </transition>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="200"
          label="助理"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <!--<transition name="el-fade-in-linear">-->
              <!--<div style="width:100%;height:100%;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;"  v-if="!scope.row.aid.length">-->
                <!--<i class="el-icon-plus" style="margin-left: 5px; cursor: pointer;" @click="roleTypeClick(scope.$index, scope.row, 19)"></i>-->
              <!--</div>-->
            <!--</transition>-->
            <transition name="el-fade-in-linear">
              <div v-if="scope.row.aid.length" style="width:100%;height:100%;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;">
                <span>{{scope.row['aid']&&scope.row['aid'].length?testformatterArray(scope.row['aid'],'name'):''}}</span>
                <!--<i class="el-icon-edit" style="margin-left: 5px; cursor: pointer;" @click="roleTypeClick(scope.$index, scope.row, 19)"></i>-->
              </div>
            </transition>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="200"
          label="前期专家"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <!--<transition name="el-fade-in-linear">-->
              <!--<div style="width:100%;height:100%;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;"  v-if="!scope.row.qqzj.length">-->
                <!--<i class="el-icon-plus" style="margin-left: 5px; cursor: pointer;" @click="roleTypeClick(scope.$index, scope.row, 11)"></i>-->
              <!--</div>-->
            <!--</transition>-->
            <transition name="el-fade-in-linear">
              <div v-if="scope.row.qqzj.length" style="width:100%;height:100%;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;">
                <span>{{scope.row['qqzj']&&scope.row['qqzj'].length?testformatterArray(scope.row['qqzj'],'name'):''}}</span>
                <!--<i class="el-icon-edit" style="margin-left: 5px; cursor: pointer;" @click="roleTypeClick(scope.$index, scope.row, 11)"></i>-->
              </div>
            </transition>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="150"
          label="建管专家"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <!--<transition name="el-fade-in-linear">-->
              <!--<div style="width:100%;height:100%;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;"  v-if="!scope.row.jgzj.length">-->
                <!--<i class="el-icon-plus" style="margin-left: 5px; cursor: pointer;" @click="roleTypeClick(scope.$index, scope.row, 12)"></i>-->
              <!--</div>-->
            <!--</transition>-->
            <transition name="el-fade-in-linear">
              <div v-if="scope.row.jgzj.length" style="width:100%;height:100%;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;">
                <span>{{scope.row['jgzj']&&scope.row['jgzj'].length?testformatterArray(scope.row['jgzj'],'name'):''}}</span>
                <!--<i class="el-icon-edit" style="margin-left: 5px; cursor: pointer;" @click="roleTypeClick(scope.$index, scope.row, 12)"></i>-->
              </div>
            </transition>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="150"
          label="计划专家"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <!--<transition name="el-fade-in-linear">-->
              <!--<div style="width:100%;height:100%;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;"  v-if="!scope.row.jhzj.length">-->
                <!--<i class="el-icon-plus" style="margin-left: 5px; cursor: pointer;" @click="roleTypeClick(scope.$index, scope.row, 13)"></i>-->
              <!--</div>-->
            <!--</transition>-->
            <transition name="el-fade-in-linear">
              <div v-if="scope.row.jhzj.length" style="width:100%;height:100%;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;">
                <span>{{scope.row['jhzj']&&scope.row['jhzj'].length?testformatterArray(scope.row['jhzj'],'name'):''}}</span>
                <!--<i class="el-icon-edit" style="margin-left: 5px; cursor: pointer;" @click="roleTypeClick(scope.$index, scope.row, 13)"></i>-->
              </div>
            </transition>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="150"
          label="财务专家"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <!--<transition name="el-fade-in-linear">-->
              <!--<div style="width:100%;height:100%;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;"  v-if="!scope.row.cwzj.length">-->
                <!--<i class="el-icon-plus" style="margin-left: 5px; cursor: pointer;" @click="roleTypeClick(scope.$index, scope.row, 14)"></i>-->
              <!--</div>-->
            <!--</transition>-->
            <transition name="el-fade-in-linear">
              <div v-if="scope.row.cwzj.length" style="width:100%;height:100%;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;">
                <span>{{scope.row['cwzj']&&scope.row['cwzj'].length?testformatterArray(scope.row['cwzj'],'name'):''}}</span>
                <!--<i class="el-icon-edit" style="margin-left: 5px; cursor: pointer;" @click="roleTypeClick(scope.$index, scope.row, 14)"></i>-->
              </div>
            </transition>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="150"
          label="质量专家"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <!--<transition name="el-fade-in-linear">-->
              <!--<div style="width:100%;height:100%;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;"  v-if="!scope.row.zlzj.length">-->
                <!--<i class="el-icon-plus" style="margin-left: 5px; cursor: pointer;" @click="roleTypeClick(scope.$index, scope.row, 15)"></i>-->
              <!--</div>-->
            <!--</transition>-->
            <transition name="el-fade-in-linear">
              <div v-if="scope.row.zlzj.length" style="width:100%;height:100%;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;">
                <span>{{scope.row['zlzj']&&scope.row['zlzj'].length?testformatterArray(scope.row['zlzj'],'name'):''}}</span>
                <!--<i class="el-icon-edit" style="margin-left: 5px; cursor: pointer;" @click="roleTypeClick(scope.$index, scope.row, 15)"></i>-->
              </div>
            </transition>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="150"
          label="安全专家"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <!--<transition name="el-fade-in-linear">-->
              <!--<div style="width:100%;height:100%;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;"  v-if="!scope.row.aqzj.length">-->
                <!--<i class="el-icon-plus" style="margin-left: 5px; cursor: pointer;" @click="roleTypeClick(scope.$index, scope.row, 16)"></i>-->
              <!--</div>-->
            <!--</transition>-->
            <transition name="el-fade-in-linear">
              <div v-if="scope.row.aqzj.length" style="width:100%;height:100%;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;">
                <span style="justify-content:flex-start;">{{scope.row['aqzj']&&scope.row['aqzj'].length?testformatterArray(scope.row['aqzj'],'name'):''}}</span>
                <!--<i class="el-icon-edit" style="margin-left: 5px; cursor: pointer;" @click="roleTypeClick(scope.$index, scope.row, 16)"></i>-->
              </div>
            </transition>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="220"
          prop="remark"
          label="备注"
        >
          <!--<template slot-scope="scope">-->
            <!--<el-input-->
              <!--style="width: 150px;padding: 0 0 0 30px;"-->
              <!--v-model="scope.row.remark"-->
              <!--size="small"-->
              <!--@change="handleBzEdit(scope.$index, scope.row)"-->
              <!--readonly>-->

            <!--</el-input>-->

          <!--</template>-->
        </el-table-column>
        <!--<el-table-column-->
          <!--header-align="center"-->
          <!--align="center"-->
          <!--min-width="120"-->
          <!--label="稽察组长联系"-->
        <!--&gt;</el-table-column>-->
        <el-table-column
          header-align="center"
          align="center"
          min-width="220"
          label="检测单位"
          prop="audUnits"
        >
          <!--<template slot-scope="scope">-->
            <!--<el-input-->
              <!--style="width: 150px;padding: 0 0 0 30px;"-->
              <!--v-model="scope.row.audUnits"-->
              <!--size="small"-->
              <!--@change="handleBzEdit(scope.$index, scope.row)"-->
              <!--readonly>-->

            <!--</el-input>-->

          <!--</template>-->
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="220"
          label="稽察处别"
          prop="audCategory"
        >
          <!--<template slot-scope="scope">-->
            <!--<el-input-->
              <!--style="width: 150px;padding: 0 0 0 30px;"-->
              <!--v-model="scope.row.audCategory"-->
              <!--size="small"-->
              <!--@change="handleBzEdit(scope.$index, scope.row)"-->
              <!--readonly>-->

            <!--</el-input>-->

          <!--</template>-->
        </el-table-column>
      </el-table>
      <el-row style="margin-top: 15px;">
        <el-col :span="24">
          <el-button type="primary" size="medium" @click="addNewGroup">添加新组</el-button>
          <el-button type="primary" size="medium" @click="delXzGroup">删除选中组</el-button>
          <el-button type="primary" size="medium" @click="XzGroupLoction">选中组修改地点</el-button>
        </el-col>
      </el-row>
      <el-row style="margin-top: 15px;">
        <el-col :span="12">
          <span>蓝色：历史稽察地规避失败，红色：地域规避失败，黄色：手动添加更改，粉色：被删除的人员</span>
        </el-col>
        <el-col :span="12" style="text-align: right;">
          <!--<el-button type="success" size="medium">导出Excel</el-button>-->
        </el-col>
      </el-row>
    </div>
    <el-dialog :close-on-click-modal="false" title="请选择要进行的操作" :visible.sync="XzRyJsVisible" width="40%" :modal-append-to-body="true" :append-to-body="true">
      <div style="text-align: center;">
        <span>请选择角色</span>
        <el-select v-model="XzJsType" clearable placeholder="请选择">
          <el-option :label="item.label" :value="item.value" v-for="(item,index) in XzJsTypeData" :key="index"></el-option>
        </el-select>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger"  @click="XzRyJsVisible = false" size="medium">取 消</el-button>
        <el-button type="primary" @click="XzRyJsInfo" size="medium">确 定</el-button>
      </div>
    </el-dialog>
    <NewPersXzInfo v-if="addPersDialog" :roleTypes="roleType" :yearBatchId="yearBatchId" editAdd="editAdd" :rowData="rowData" :changeEdit="changeEdit" :changeDataList="changeDataList" @closeXzPers="closeXzPers"></NewPersXzInfo>
    <el-dialog :close-on-click-modal="false" title="请选择人员" :visible.sync="XzPersDialog" width="40%" :modal-append-to-body="true" :append-to-body="true">
      <div style="text-align: center;">
        <span>请选择人员</span>
        <el-select v-model="XzPers" clearable placeholder="请选择" multiple @change="changeDataClick" value-key="name">
          <el-option v-for="(item,index) in persListData" :label="item.name" :key="item.id" :value="item"></el-option>
        </el-select>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger"  @click="XzPersDialog = false" size="medium">取 消</el-button>
        <el-button type="primary" @click="XzPersQd" size="medium">确 定</el-button>
      </div>
    </el-dialog>
    <!--确定稽察地点及原则-->
    <jiChaDiDian v-if="qdDdYzDialog" :yearBatchId="yearBatchId" @closeJcDdDialog="closeJcDdDialog" :changeUrl="changeUrl"></jiChaDiDian>
    <!--选中组修改地点-->
    <xuanZhongZuDiDian v-if="xZGroupDialog" :persAreaId="persAreaId" @closeXzGroupDdDialog="closeXzGroupDdDialog" :changeUrl="changeUrl" :multipleRowId="multipleRowId"></xuanZhongZuDiDian>
    <el-dialog :close-on-click-modal="false" title="请选择角色" :visible.sync="dialogRoleTypeVisible" width="40%" :modal-append-to-body="true" :append-to-body="true">
      <div style="text-align: center;">
        <span>请选择角色</span>
        <el-select v-model="roleTypeModel" clearable placeholder="请选择">
          <el-option :label="item.label" :value="item.value" v-for="(item,index) in roleTypeData" :key="index"></el-option>
        </el-select>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger"  @click="dialogRoleTypeVisible = false" size="medium">取 消</el-button>
        <el-button type="primary" @click="roleTypeDetermine" size="medium">确 定</el-button>
      </div>
    </el-dialog>

    <!--稽察项目编辑-->
    <editDcdxInfo :nodeAreaList="nodeAreaList" :nodeRow="nodeRow" @closeDialog="closeDialog" v-if="editJcDialog"></editDcdxInfo>
    <!--稽察项目查看-->
    <viewDcdxInfo v-if="viewJcDialog" :groupId="groupId" @closeDialog="closeViewDialog"></viewDcdxInfo>
    <el-dialog :close-on-click-modal="false" title="请选择要删除的项目" :visible.sync="dialogObjTypeVisible" width="40%" :modal-append-to-body="true" :append-to-body="true">
      <div style="text-align: center;">
        <span>项目</span>
        <el-select v-model="objTypeModel" clearable placeholder="请选择">
          <el-option :label="item.ojbNm" :value="item.id" v-for="(item,index) in objTypeData" :key="index"></el-option>
        </el-select>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger"  @click="dialogObjTypeVisible = false" size="medium">取 消</el-button>
        <el-button type="primary" @click="objTypeDetermine" size="medium">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>

  import { dateFormat } from '../../utils/gw_date';
  import {
    formatterValueToLabel,
    formatterArrayToLabel
  } from "../../utils/gw_formatter.js";
  import request from '../../utils/gw_ajax_request'
  import NewPersXzInfo from './NewPersXzInfo'
  import jiChaDiDian from './jiChaDiDian'
  import xuanZhongZuDiDian from './xuanZhongZuDiDian'
    export default {
        name: "fenPeiDidian",
        props: ["distributionLocationResult","persAreaId","yearBatchId","jiChaJiHuaResults"],
        components:{
          NewPersXzInfo,
          jiChaDiDian,
          xuanZhongZuDiDian,
          editDcdxInfo:resolve => {require(['./editDcdxInfo_jc.vue'],resolve)},
          viewDcdxInfo:resolve => {require(['./viewDcdxInfo_jc.vue'],resolve)},
        },
        data(){
          return {
            loading:false,
            multipleSelection:[],
            jiChaJiHuaResult:[],
            tableHeight1: window.innerHeight * .5 - 50,
            XzRyJsVisible: false,
            XzJsType: "",
            XzJsTypeData:[
              {
                label:"添加人员",
                value: "2"
              },
              {
                label:"更换人员",
                value: "3"
              },
              {
                label:"删除人员",
                value: "4"
              }
            ],
            addPersDialog: false,
            roleType: "",
            rowData: "",
            persListData:[],
            XzPersDialog: false,
            XzPers: [],
            changeEdit:"",
            changeDataList:[],
            qdDdYzDialog: false,
            changeUrl:"",
            xZGroupDialog: false,
            dialogRoleTypeVisible:false,
            roleTypeModel: "",
            dialogObjTypeVisible: false,
            objTypeData:[],
            objTypeModel: "",
            multipleRowId:"",
            nodeAreaList:[],
            nodeRow:"",
            editJcDialog: false,
            viewJcDialog: false,
            groundId: "",

          }
        },
        mounted(){
          this.getTableListData();
        },
        computed:{
          userId:function(){
            return localStorage.getItem("userid")? localStorage.getItem("userid"): '1098101939614724096'
          },
          roleTypeData(){
            return this.$store.state.jcState.roleTypeData;
          },
          isJx() {
              return localStorage.getItem('currentRlcode').substring(0,2)=="36";
          }
        },
        methods:{
          getTableListData(){
            this.$nextTick(() =>{
                // //debugger
              this.jiChaJiHuaResult = this.distributionLocationResult;
              this.jiChaJiHuaResult.forEach(item =>{
                item.stTm = item.stTm ? dateFormat(item.stTm, "yyyy-MM-dd") : '';
                item.enTm = item.enTm ? dateFormat(item.enTm, "yyyy-MM-dd") : '';
              })
              this.getPerFl(this.jiChaJiHuaResult);
            })
          },
          getPerFl(arr){
            // 为列表分开稽察组长,助理,前期专家
            arr.forEach(element => {
              element["qqzj"] = [];//前期专家
              element["jgzj"] = [];//建管专家
              element["jhzj"] = [];//计划专家
              element["cwzj"] = [];//财务专家
              element["zlzj"] = [];//质量专家
              element["aqzj"] = [];//安全专家
              element["aid"] = [];//助理
              element["special"] = [];//专家组长
              element["commissioner"] = [];//特派员
              element["workersList"].forEach(per => {
                if (per.roleType == "11") {
                  element["qqzj"].push(per);
                } else if (per.roleType == "12") {
                  element["jgzj"].push(per);
                } else if (per.roleType == "13") {
                  element["jhzj"].push(per);
                } else if (per.roleType == "14") {
                  element["cwzj"].push(per);
                }else if (per.roleType == "15") {
                  element["zlzj"].push(per);
                } else if (per.roleType == "16") {
                  element["aqzj"].push(per);
                } else if (per.roleType == "19") {
                  element["aid"].push(per);
                } else if (per.roleType == "20") {
                  element["special"].push(per);
                } else if (per.roleType == "21") {
                  element["commissioner"].push(per);
                }
              });
            });
          },
          //确定稽察地点及原则
          qrJcDd(){
            this.changeUrl = 'edit';
            this.qdDdYzDialog = true;
          },
          handleSelectionChange(val) {
            console.log(val);
            this.multipleSelection = val;
          },
          handleDdEdit(index, row) {
            console.log(index, row);
          },
          //备注
          handleBzEdit(index, row) {
            console.log(index, row);
          },
          //稽察组长编辑
          roleTypeClick(index, row, value){
            console.log(index, row, value);
            this.XzJsType = "";
            this.XzRyJsVisible = true;
            this.roleType = value;
            this.rowData = row;
          },
          //稽察项目编辑
          objTypeClick(index, row, value){
            console.log(index, row, value);
            if(row.areaList){
              this.nodeAreaList = row.areaList;
            }
            this.nodeRow = row;
            this.editJcDialog = true;
          },
          //稽察项目查看
          objTypeViewClick(index, row, value){
            this.groupId = row.id;
            console.log(index, row, value);
            this.viewJcDialog = true;

          },
          //稽察项目删除
          objTypeDelete(index, row, value){
            this.$confirm('此操作将删除该项目所有数据, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              console.log(index, row, value);
              this.$nextTick(()=>{
                this.objTypeData = row.objList;
                this.objTypeModel = "";
                this.dialogObjTypeVisible = true;
              })
            })
          },
         //  选择人员角色确定
          XzRyJsInfo(){
            if(this.XzJsType){
              this.XzPers = "";
              if(this.XzJsType == '2'){
                this.changeEdit = "add";
                this.addPersDialog = true;
              }else if(this.XzJsType == '3'){
                this.XzPersDialog = true;
                this.getPersList();
              }else if(this.XzJsType == '4'){
                this.XzPersDialog = true;
                this.getPersList();
              }
              this.XzRyJsVisible = false;
            }else{
              this.$message.warning("请选择角色");
              return;
            }

          },
          getPersList(){
            request.post(`/tac/worker/b/getWorkerbsListById`,{
              "roleType": this.roleType,
              "groupId": this.rowData.id
            }).then(res =>{
              if(res.success){
                this.persListData = res.data;
              }
            })
          },
          XzPersQd(){
            if(this.XzPers.length == "0"){
              this.$message.warning("请选择人员");
              return ;
            }
            if(this.XzJsType == '3'){
              this.changeEdit = "change";
              this.addPersDialog = true;
            }else if(this.XzJsType == '4'){
              if(this.changeDataList.length == "0"){
                this.$message.warning("请选择人员");
              }else{
                let obj = {
                  "updateBs": this.changeDataList,
                  "batchId": this.yearBatchId,
                  "groupNm": this.rowData.groupNm,
                  "groupId": this.rowData.id
                };
                request.post(`/tac/insp/year/batch/group/pers/updateGroupPers
`,obj).then(res =>{
                  if(res.success){
                    this.$message.success("删除成功");
                    this.XzPersDialog = false;
                    this.refreshDistributionLocation();
                  }else{
                    this.$message.warning(res.message);
                  }
                })
              }

            }
          },
          // closeXzRyDialog(){
          //
          // },
          //关闭稽察地点
          closeJcDdDialog(){
            this.qdDdYzDialog = false;
            this.refreshDistributionLocation();
          },
          //关闭选中组
          closeXzGroupDdDialog(){
            this.xZGroupDialog = false;
            this.refreshDistributionLocation();
          },
          closeXzPers(){
            this.addPersDialog = false;
            this.XzPersDialog = false;
            this.refreshDistributionLocation();
          },
          changeDataClick(item){
            console.log(item);
            this.changeDataList = item;
          },
          testformatterArray: function(
            arr,
            labelPropName,
            splitMark = ",",
            nonLabel = "",
            isAddNonLabel = true
          ) {
            let r = formatterArrayToLabel(
              arr,
              labelPropName,
              (splitMark = ","),
              (nonLabel = ""),
              (isAddNonLabel = true)
            );
            return r;
          },
          //  添加新组
          addNewGroup(){
            this.changeUrl = 'add';
            this.qdDdYzDialog = true;
          },
          //  删除选中组
          delXzGroup(){
            if(this.multipleSelection.length == 0){
              this.$message.warning("请选择组");
              return;
            }
            this.$confirm('确定要删除该组, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              let obj = {
                "groupList": this.multipleSelection
              }
              request.post(`/tac/insp/year/batch/group/deleteGroupList`,obj).then(res =>{
                if(res.success){
                  this.$message.success("删除成功");
                  this.refreshDistributionLocation();
                }else{
                  this.$message.warning(res.message);
                }
              })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除',
                duration: 1000
              });
            });
          },
          //选中组中添加地点
          XzGroupLoction(){
            if(this.multipleSelection.length == 0){
              this.$message.warning("请选择组");
              return;
            }else if(this.multipleSelection.length > 1){
              this.$message.warning("选中组修改地点不可多选");
              return;
            }
            this.multipleRowId = this.multipleSelection[0].id;
            this.xZGroupDialog = true;
          },
          //重新分配(刷新)
          reallocate(){
            if(this.jiChaJiHuaResult.length && this.jiChaJiHuaResults.length){
              this.$confirm('确定要重新分配, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                request.post(`/tac/worker/b/distributePers`,{
                  "currPersId": this.userId,
                  "prisId": this.persAreaId
                }).then(res =>{
                  if(res.success){
                    this.$message.success("重新分配成功");
                    this.refreshDistributionLocation();
                  }else{
                    this.$message.error(res.message);
                  }
                })
              }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消重新分配',
                  duration: 1000
                });
              });
            }else{
              this.$message.warning("确定人选和分配地点不能为空");
            }

          },
          //单角色刷新
          SingleRoleRefresh(){
            if(this.jiChaJiHuaResult.length && this.jiChaJiHuaResults.length) {
              this.dialogRoleTypeVisible = true;
            }else{
              this.$message.warning("确定人选和分配地点不能为空");
            }
          },
          roleTypeDetermine(){
            // if(this.jiChaJiHuaResult.length && this.jiChaJiHuaResults.length){
                request.post(`/tac/worker/b/distributePers`,{
                  "currPersId": this.userId,
                  "prisId": this.persAreaId,
                  "roleType": this.roleTypeModel
                }).then(res =>{
                  if(res.success){
                    this.$message.success("单角色刷新成功");
                    this.dialogRoleTypeVisible = false;
                    this.refreshDistributionLocation();
                  }
                })
            // }
          },
          objTypeDetermine(){
            if(this.objTypeModel){
              request.post(`/tac/insp/year/batch/obj/cleanObjById`,{
                "id": this.objTypeModel,
                "ojbId": this.objTypeModel
              }).then(res =>{
                if(res.success){
                  this.$message.success("删除成功");
                  this.dialogObjTypeVisible = false;
                  this.refreshDistributionLocation();
                }
              })
            }else{
              this.$message.warning("项目不能为空");
            }
          },
          //  刷新分配地点
          refreshDistributionLocation(){
            request.post(`/tac/insp/year/batch/group/getGroupList`,{
              "yearBatchId": this.yearBatchId
            }).then(res =>{
              if(res.success){
                this.$nextTick(() =>{
                  this.jiChaJiHuaResult = res.data;
                  this.getPerFl(this.jiChaJiHuaResult);
                  this.jiChaJiHuaResult.forEach(item =>{
                    item.stTm = item.stTm ? dateFormat(item.stTm, "yyyy-MM-dd") : '';
                    item.enTm = item.enTm ? dateFormat(item.enTm, "yyyy-MM-dd") : '';
                    item.inTm = item.inTm ? dateFormat(item.inTm, "yyyy-MM-dd") : '';
                  })
                })
              }
            })
          },
          closeDialog(){
            this.editJcDialog = false;
            this.refreshDistributionLocation();
          },
          closeViewDialog(){
            this.viewJcDialog = false;
            this.refreshDistributionLocation();
          }
        },
        watch:{
          distributionLocationResult(n){
            this.jiChaJiHuaResult = n;
            this.getTableListData();
          }
        }
    }
</script>

<style lang="scss">
    .selection-container {
      height:350px;
      margin:10px;
      position: relative;
      left: 50%;
      transform: translateX(-38%);
    }
    .select-box {
      width:14vw;
      height:100%;
      float:left;
      border:1px solid #ebeef5;
      border-radius:4px;
    }
    .arrows-box {
      width:110px;
      height:100%;
      float:left;
      position:relative;
    }
    .select-content {
      width:100%;
      height:310px;
      overflow-y:auto;
      overflow-x:hidden;
    }
    .select-box-title {
      height:40px;
      line-height:40px;
      font-size:16px;
      font-family:"微软雅黑";
      padding:0 6%;
      display:flex;
      align-items:center;
      position:relative;
      width:100%;
      background:#f5f7fa;
      border-bottom:1px solid #ebeef5;
      box-sizing:border-box;
      color:#000;
    }
    .arrow-btns {
      width:100%;
      position:absolute;
      top:50%;
      margin-top:-45px;
      text-align: center;
    }
    .arrows-box .el-button+.el-button {
      margin-left: 0 !important;
    }
    p.title{
      display:block;
      width:120px;
      height:30px;
      position:relative;
      top:-25px;
      text-align: center;
      background: white;
      font-size: 18px;
      color: #000;
      font-weight: bold;
    }

</style>