fj-dc-ui/.svn/pristine/01/01b269ce81b1e9a86c922ea3f8231ea2d1abe6d7.svn-base

<template>
    <div>
      <el-dialog :close-on-click-modal="false" title="选择稽察地点" :visible.sync="qrJcDdDialog" width="50%" :modal-append-to-body="true" :append-to-body="true" @close="closeXzGroupDdDialog">
        <div class="selection-container">
          <div class="select-box left">
            <div class="select-box-title">
              <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">请选择地点：</el-checkbox>
            </div>
            <div class="select-content">
              <el-checkbox-group v-model="checkedXzDdData" @change="val => handleCheckedXzDdDataChange(val)">
                <div v-for="city in XzDdData" :key="city" style="height: 40px;line-height: 40px;padding: 0 6%;">
                  <el-checkbox :label="city">{{city}}</el-checkbox>
                </div>
              </el-checkbox-group>
            </div>
          </div>
          <div class="arrows-box">
            <div class="arrow-btns">
              <el-button type="primary" style="margin-bottom: 15px;" :disabled="!isIndeterminate" @click="addFz">添加>></el-button>
              <el-button type="primary" :disabled="!isIndeterminateFz" @click="removeFz"><<移除</el-button>
            </div>
          </div>
          <div class="select-box right">
            <div class="select-box-title">
              <el-checkbox :indeterminate="isIndeterminateFz" v-model="checkAllFz" @change="handleCheckAllChangeFz">稽察分组数：</el-checkbox>
            </div>
            <div class="select-content">
              <el-checkbox-group v-model="checkedXzDdDataFz" @change="handleCheckedXzDdDataChangeFz">
                <div v-for="(city,key) in JcFzsData" :key="key"  style="height: 40px;line-height: 40px;padding: 0 6%;">
                  <el-checkbox :label="city" :key="city">{{city}}</el-checkbox>
                </div>
              </el-checkbox-group>
            </div>
          </div>
        </div>
        <div slot="footer" class="dialog-footer" style="text-align: right;">
          <el-button type="primary" @click="savePersInfo" size="medium">保  存</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
  import { getAdData } from "../../api/duChaAPI.js";
  import request from '../../utils/gw_ajax_request'
    export default {
        name: "jiChaDiDian",
        props:["persAreaId", "multipleRowId"],
        data(){
          return{
            isHlZq: true,
            qrJcDdDialog: true,
            qdJcDdYzForm:{
              avoidYrSize: "",
              avoidSize: "",
              siBadPersNum: "",
              siGoodPersNum: "",
              siNvPersNum: "",
              siSaPersNum: "",
              isPorc: "",
            },
            isIndeterminate: false,
            isIndeterminateFz: false,
            checkAll: false,
            checkedXzDdData: [],
            checkAllFz: false,
            checkedXzDdDataFz: [],
            XzDdData: [],
            rootCode: localStorage.getItem('currentRlcode'),
            XuanZhongRemove:[],
            tongZuArray:[],
            jCResullt:[],
            JcFzsData:[],
            XuanZhongLeft:[],
          }
        },
        mounted(){
          this.$nextTick(() =>{
            this.getJcDdYzData();
            this.getAdDataList();
          })
        },
        methods:{
          getJcDdYzData(){
            this.JcFzsData = [];
            // if(this.persAreaId){
              request.get(`/tac/insp/year/batch/group/getGroupById/${this.multipleRowId}`).then(res =>{
                if(res.success){
                  this.$nextTick(()=>{
                    if(res.data.areaList){
                      res.data.areaList.forEach(item =>{
                        this.JcFzsData.push(item.adName);
                      })
                    }
                    this.qdJcDdYzForm = res.data;
                    if(this.qdJcDdYzForm.isPorc == '1'){
                      this.isHlZq = false;
                    }

                  })
                }else{
                  this.$message.warning(res.message);
                }
              })
            // }else{
            //   this.$message.warning("请先确定人员及原则");
            // }
          },
          getAdDataList(){
            var _self = this;
            getAdData(_self.rootCode).then((res)=>{
              if(res.data){
                res.data.forEach((item,index) => {
                  _self.XzDdData.push(item.adName);
                })
              }
            })
          },
          handleCheckAllChange(val) {
            this.checkedXzDdData = val ? this.XzDdData : [];
            this.isIndeterminate = val;
            this.$nextTick(() =>{
              this.jCResullt = this.checkedXzDdData;
            })
          },
          handleCheckAllChangeFz(val) {
            this.checkedXzDdDataFz = val ? this.JcFzsData : [];
            this.isIndeterminateFz = val;
            this.$nextTick(() =>{
              this.XuanZhongRemove = this.JcFzsData;
            })
          },
          handleCheckedXzDdDataChange(value) {
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.XzDdData.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount <= this.XzDdData.length;
            this.$nextTick(() =>{
              this.jCResullt = this.uniq(this.JcFzsData.concat(value));
              this.XuanZhongLeft = value;
            })
          },
          handleCheckedXzDdDataChangeFz(value) {
            let checkedCount = value.length;
            this.checkAllFz = checkedCount === this.XzDdData.length;
            this.isIndeterminateFz = checkedCount > 0 && checkedCount <= this.XzDdData.length;
            this.XuanZhongRemove = value;

          },
          //添加分组
          addFz(){
            this.JcFzsData = this.unique(this.JcFzsData,this.XuanZhongRemove);
            this.JcFzsData = this.uniq(this.jCResullt.concat(this.tongZuArray));
          },

          //移除
          removeFz(){
            this.$nextTick(()=>{
              this.JcFzsData = this.unique(this.JcFzsData,this.XuanZhongRemove);
              this.jCResullt = this.XuanZhongLeft;
              if(this.JcFzsData.length == "0"){
                this.tongZuArray = [];
                this.JcFzsData = [];
              }
            })
          },
          unique (obj, ary){
            return obj.filter(function(item){
              return ary.indexOf(item) == -1;
            })
          },
          //去重
          uniq (array){
            let temp = [];
            for(var i = 0; i < array.length; i++){
              if(temp.indexOf(array[i]) === -1){
                temp.push(array[i]);
              }
            }
            return temp;
          },
          //是否合理周期
          isPorcClick(val){
            if(val == '1'){
              this.isHlZq = false;
            }else{
              this.isHlZq = true;
            }
          },
        //  保存
          savePersInfo(){
            if(this.JcFzsData.length && this.JcFzsData){
              let array = [];
              this.JcFzsData.forEach(item => {
                var obj = {};
                this.$set(obj,'adName',item);
                array.push(obj);
              });
              this.qdJcDdYzForm["adNames"] = array;
              request.post(`/tac/insp/year/batch/group/updateGroupArea`,this.qdJcDdYzForm).then(res =>{
                if(res.success){
                  this.$message.success("保存成功");
                  this.$emit('closeXzGroupDdDialog');
                }
              })
            }else{
              this.$message.warning("稽察分组不能为空")
            }
          },
          closeXzGroupDdDialog(){
            this.$emit('closeXzGroupDdDialog');
          }

        }
    }
</script>

<style>

</style>