ibms/src/components/dialogs/list/batchDialog.vue

<template>
  <el-dialog
      title="批量维护信息点"
      :visible.sync="batchDialog"
      class="batchContainer"
  >
    <el-steps
        :active="active"
        align-center
    >
      <el-step
          @click.native="active = 0"
          description="填写需维护的信息点"
      />
      <el-step
          @click.native="active = 1"
          description="选择批量维护的对象实例"
      />
    </el-steps>
    <hr>
    <div
        v-show="active === 0"
        style="overflow: hidden"
    >
      <section>
        <p class="text-message">维护只有单值的信息点</p>
        <span class="small">请选择需维护的信息点</span>
        <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckChange"
        >
          全部选择
        </el-checkbox>

        <div style="margin: 15px "></div>
        <el-checkbox-group
            v-model="checkedCities"
            @change="handleCheckedCitiesChange"
        >
          <el-checkbox
              v-for="(city,index) in newFirm"
              :label="city"
              :key="index"
          >
            <span @click="fourVendors(city.code)"> {{city.name}}：</span>
            <span :title="city.rname">{{city.rname | filterImgNames}}</span>
          </el-checkbox>
        </el-checkbox-group>
      </section>
      <!--维护有多个值的信息-->
      <section>
        <p class="text-message">维护有多个值的信息点</p>
        <span class="small">选择值的更新方式</span>
        <el-radio-group
            v-model="radio"
            @change="maintenance"
        >
          <el-radio :label="1">以增量方式维护</el-radio>
          <el-radio :label="2">以覆盖方式维护</el-radio>
        </el-radio-group>
        <div style="margin: 15px "></div>
        <div class="checkbox">
          <p v-for="(item,index) in newEnclosure">
            <el-checkbox
              v-model="form[item.Path]"
            >
            <span  @click="multiple(item.Path)">{{item.InfoPointName}}</span>
            </el-checkbox>
            <span
              class="text-color"
              v-for="i in item.value"
            >{{i.Name | filterImgName}}</span>

          </p>
        </div>

      </section>
      <el-button
          class="next-step"
          @click="next"
      >下一步
      </el-button>
    </div>
    <div
        v-show="active === 1"
        class="all-message"
    >
      <el-table
          ref="multipleTable"
          :data="tableData"
          max-height="300"
          tooltip-effect="dark"
          style="width:100%;margin-bottom: 10px"
          @selection-change="handleSelectionChange"
      >
        <el-table-column
            type="selection"
            width="55"
        />
        <el-table-column
            label="设备本地名称"
            width=""
        >
          <template slot-scope="scope">{{scope.row.EquipLocalName}}</template>
        </el-table-column>
        <el-table-column
            prop="EquipLocalID"
            label="设备本地编码"
            width="120"
        />
        <el-table-column
            prop="build"
            label="所属建筑楼层"
            show-overflow-tooltip
        />
      </el-table>
      <my-pagination
          @change="getAllData"
          :page="page"
      ></my-pagination>

      <el-button
          type="primary"
          @click="maintenanceSelect"
          style="margin-top:10px"
      >维护已选
      </el-button>
      <el-button
          @click="active = 0"
          style="margin-right: 10px;margin-top:10px"
      >上 一 步
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
  import myPagination from "@/components/ledger/lib/myPagination"
  import tools from "@/utils/buildfloor/tools";
  export default {
    name: "batchDialog",
    props: ['firmName', 'allObject', 'page', 'information','newEnclosure'],
    components: {myPagination},
    data() {
      return {
        form:{},
        batchDialog: false,//dialog
        active: 0,//进度条
        checkAll: false,//全选
        isIndeterminate: true,
        checkedCities: [],//选择的项,单项
        firm: [
          {
            name: "生产厂家/品牌型号",
            code: "DPManufacturerID",
            num: 2,
          }, {
            name: "供应商信息",
            code: "DPSupplierID",
            num: 8
          }, {
            name: "维修商信息",
            code: "DPMaintainerID",
            num: 35
          }, {
            name: "保险公司信息",
            code: "DPInsurerID",
            num: 42
          }
        ],
        radio: 1, //1增加，2覆盖
        checkedFile: [],//多项
        multipleSelection: [],//checkbox选择的对象数组
        filterList: [],//过滤单项选择的值
        deviceList: [],//过滤全选数据
        onlySelect: [],//检测是否有勾选单值信息
        videoModel: {
          archive: false,
          checkReport: false,
          drawing: false,
          installDrawing: false,
          insuranceFile: false,
          installPic: false,
          nameplate: false,
          pic: false
        },
      }
    },
    watch: {
      information() {
        return this.information
      },
      newEnclosure:{
        immediate:true,
        handler(val){
          this.newEnclosure = val
        }
      }
    },
    created() {
      this.$forceUpdate()
    },
    computed: {
      newFirm() {
        this.firm.map(item => {
          if (item.num === this.firmName.num) {
            item.rname = this.firmName.name
            item.info = this.firmName
          }
          return item
        })
        return this.firm
      },
      tableData() {
        this.allObject.map(item => {
          let build = ''
          if (item.Building && item.Floor) {
            build = item.Building.BuildLocalName + ' - ' + item.Floor.FloorLocalName
          } else if (item.Building) {
            build = item.Building.BuildLocalName
          } else if (item.Floor) {
            build = item.Floor.FloorLocalName
          } else {
            build = '-'
          }
          item.build = build
          return item
        })
        return this.allObject
      },
    },
    filters: {
      filterImgName(value) {
        if (value && value.length > 16) {
          return value.substring(0, 12) + '...'
        } else {
          return value
        }
      } ,
      filterImgNames(value) {
        if (value && value.length > 16) {
          return value.substring(0, 16) + '...'
        } else {
          return value
        }
      }
    },
    methods: {
      next() { //下一步按钮
        // if (this.active++ > 1) this.active = 0
        this.deviceList = this.firm.filter(item => item.info)
        // if (!this.onlySelect.length) { //对单项全选进行过滤
        //   this.$message({
        //     message: '还没有选择单值信息哦',
        //     type: 'warning'
        //   });
        //   return false
        // }
        let fillIn = this.onlySelect.some(i => !i.info)
        if (fillIn) {
          this.$message({
            message: '请填写勾选信息',
            type: 'warning'
          });
          return false
        }
        // if (!this.deviceList.length) { //对单项全选进行过滤
        //   this.$message({
        //     message: '单值信息没有填写哦',
        //     type: 'warning'
        //   });
        //   return false
        // }
        if (this.checkAll) {    // 如果单项全选
          if (this.deviceList.length < 4) { //对单项全选进行过滤
            this.$message({
              message: '单值的信息点存在未填写',
              type: 'warning'
            });
            return false
          } else {
            this.active++
          }
        } else {
          this.active++
        }
      },
      handleCheckChange(val) { //全选
        this.checkedCities = val ? this.firm : []
        this.isIndeterminate = false

      },
      handleCheckedCitiesChange(value) { //维护单项触发
        this.onlySelect = value
        this.filterList = value.filter(item => item.info)
        let checkCount = value.length
        this.checkAll = checkCount === this.firm.length
        this.isIndeterminate = checkCount > 0 && checkCount < this.firm.length
      },
      handleCheckedFileChange(value) { //维护多项触发
      },
      fourVendors(code) {
        this.$emit('code', code)
      },
      //    选择维护方式
      maintenance(val) {
      },

      maintenanceSelect() { //维护已选
        if (!this.multipleSelection.length) {
          this.$message({
            message: '还没有选择实例哦',
            type: 'warning'
          });
          return false
        }
        let arr = []
        // DPSupplierID 供应商 DPManufacturerID 生产商 DPBrandID 品牌
        // DPSpecificationID 型号 DPInsurerID 保险商 DPMaintainerID 维修商
        this.multipleSelection.forEach(item => {
          let EquipID = item.EquipID
          arr.push({EquipID})
        })
        let Id = {}
        let single = {};
        // this.filterList 单选数组,取到需要数据
        // 过滤数组，取对象
        this.checkedCities.filter(item => item.num === 2).forEach(i => { //型号
          if (i.info) {
            let {venderName, brandName, Specification, venderId, brandId, specificationId} = i.info
            single.EquipManufactor = {
              Manufacturer: venderName,
              Brand: brandName,
              Specification: Specification
            }
            Id.DPManufacturerID = venderId
            Id.DPBrandID = brandId
            Id.DPSpecificationID = specificationId
          }
        })
        this.checkedCities.filter(item => item.num === 8).forEach(i => {  //供应商8
          if (i.info) {
            let {website, name, venderId} = i.info
            single.SupplyPurchase = {
              SupplierWeb: website,
              Supplier: name,

            }
            Id.DPSupplierID = venderId
          }
        })
        this.checkedCities.filter(item => item.num === 35).forEach(i => {  //维修商
          if (i.info) {
            let {name, venderId} = i.info
            single.OperationMainte = {
              Maintainer: name
            }
            Id.DPMaintainerID = venderId
          }
        })
        let insurance = this.checkedCities.filter(item => item.num === 42)
        if (insurance.length) {
          insurance.forEach(i => {  //保险
            if (i.info) {
              let {website, name, venderId} = i.info
              single.InsuranceDoc = {
                Insurer: name,
                InsurerWeb: website,
                InsuranceFile: this.information.insuranceFile.InsuranceFile.length && this.radio === 2 ? this.information.insuranceFile.InsuranceFile : undefined
              }
              Id.DPInsurerID = venderId
            }
          })
        } else {
          if (this.radio === 2 && this.information.insuranceFile.InsuranceFile.length) {
            single.InsuranceDoc = {
              InsuranceFile: this.information.insuranceFile.InsuranceFile.length ? this.information.insuranceFile.InsuranceFile : undefined
            }
          }
        }

        // this.information 多选信息
        let valuable = [], newValuable  = []
        valuable = this.newEnclosure.filter(i=>this.form[i.Path] && i.value ).forEach(({ InfoPointCode, value }) => newValuable[InfoPointCode] = value);
        // console.log( newValuable,'多选信息')
        if (this.radio === 1) { //组装数据，根据是覆盖该是增量，1是增量
          //    1:单选数据
          let arr1 = this.deepCopy(arr).map(item => ({
            ...Id,
            ...item,
            LedgerParam: {...single}
          }))
          let arr2 = this.deepCopy(arr).map(item => ({
            ...item,
            ...newValuable
          }))
          this.$emit('upDataDevice', 1, arr1, arr2)
        }
        if (this.radio === 2) {
          let param = {}
          this.newEnclosure.forEach(({Path,value})=>param[Path] = value)
          param =  tools.formatData(param)
          let arr3 = this.deepCopy(arr).map(item => ({
            ...Id,
            ...item,
            ...param
          }))
          this.$emit('upDataDevice', 2, arr3)
        }
        this.closeDialog()
      },
      closeDialog() {  //关闭弹窗，返回初始状态
        this.batchDialog = false
        this.clearData()

      },
      clearData() { //清空规则 filterList
        this.active = 0
        this.checkedCities = []//清空单项的checkbox
        this.firm.forEach(item => {
          item.rname = ''
          item.info = ''
        })
        // this.filterList = []
        this.onlySelect = []
        // this.deviceList = []
        this.radio = 1 //返回到默认增量
        //清空附件信息
        for(let i in this.form)  {
          this.form[i] = false
        }
          this.newEnclosure.map(i=>{
          this.$set(i,'value',[])
        })
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      getAllData() {
        this.$emit('getAllData')
      },
      multiple(val) {
        this.$emit('multiples',val)
      },

      deepCopy(obj) {
        return JSON.parse(JSON.stringify(obj))
      }
    }
  }
</script>

<style scoped lang="less">
  .batchContainer {
    /deep/ .el-step__description {
      margin: 2% 0;
    }

    .text-color {
      color: #409EFF
    }

    .el-checkbox-group {
      display: flex;
      justify-content: space-between;
      flex-direction: row;
      flex-wrap: wrap;

      .el-checkbox {
        width: 43%;
      }

      .el-checkbox:last-of-type {
        margin-right: 30px;
      }
    }

    .next-step {
      display: block;
      float: right;
    }

    .checkbox {
      display: flex;
      justify-content: space-between;
      flex-direction: row;
      flex-wrap: wrap;

      p {
        width: 50%;
      }

      .el-checkbox:last-of-type {
        margin-right: 10px;
      }
    }

    .text-message {
      overflow: hidden;
      margin-top: 10px;
      color: #333;
      border-left: 8px solid #333;
      text-indent: 10px;
      font-weight: 600;
    }

    .small {
      font-size: 12px;
      color: #555;
    }

    .all-message {
      overflow: hidden;

      button {
        float: right;
        padding: 10px;
        margin-left: 5px;
      }
    }

  }
</style>