CZC/operationSupport/src/views/ownerManagement/landlordManagement/stepPage/add.vue

<template>
  <div class="main">
    <div class="landlord-title">
      <span>添加房东(</span>
      <span>*</span>
      <span>为必填项)</span>
    </div>
    <el-form
      ref="ruleForm"
      :model="formData"
      label-width="100px"
      :rules="formRules"
    >
      <div class="formContent">
        <div class="formContent-item">
          <div class="formContent-item_title">基础信息</div>
          <div class="formContent-formList">
            <div>
              <el-form-item
                label="姓名"
                prop="name"
              >
                <el-input
                  v-model="formData.name"
                  placeholder="请输入姓名"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="手机号"
                prop="phone"
              >
                <el-input
                  v-model="formData.phone"
                  placeholder="请输入手机号"
                  maxlength="11"
                ></el-input>
              </el-form-item>
              <el-form-item label="房东编号">
                <el-input
                  v-model="formData.personnelNumber"
                  placeholder="请输入房东编号"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="性别"
                required
              >
                <el-radio
                  v-model="formData.sex"
                  :label="1"
                >男</el-radio>
                <el-radio
                  v-model="formData.sex"
                  :label="2"
                >女</el-radio>
              </el-form-item>
              <el-form-item label="备注">
                <el-input
                  type="textarea"
                  v-model="formData.remark"
                  placeholder="请输入备注"
                ></el-input>
              </el-form-item>
            </div>
            <div class="clickUpload">
              <div class="clickUpText">
                <img
                  class="dataImg"
                  v-if="!!formData.facePictureUrl"
                  :src="formData.facePictureUrl"
                />
                <template v-else>
                  <img
                    class="bg-img"
                    src="@/assets/img/ownerManagement/img_zhaopian2@2x.png"
                    alt=""
                  />
                  <div>点击添加人脸照片</div>
                </template>
              </div>
              <el-upload
                :headers="token"
                ref="uploaduserlogo"
                class="mini-upload"
                limit="1"
                action="/czc-community/upload/uploadFile"
                :on-success="uploadsuccess"
                :before-upload="beforeAvatarUpload"
                :auto-upload="true"
                name="file"
              >
              </el-upload>
            </div>
          </div>
        </div>

        <div class="formContent-item">
          <div class="formContent-item_title">证件信息</div>
          <el-form-item label="证件类型">
            <el-select
              v-model="formData.idType"
              class="width100"
            >
              <el-option
                v-for="(item, index) in idTypeArray"
                :key="index"
                :label="item.label"
                :value="item.status"
              >{{item.label}}</el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="证件号码"
            class="width100"
          >
            <el-input
              v-model="formData.idNumber"
              placeholder="请输入证件号码"
              maxlength="18"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="户籍地址"
            class="width100"
          >
            <el-input
              v-model="formData.permanentAddress"
              placeholder="请输入户籍地址"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="签发机关"
            class="width100"
          >
            <el-input
              v-model="formData.issuingAuthority"
              placeholder="请输入签发机关"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="有效期"
            style="width: 100%;"
          >
            <div style="width: 100%; float: left; margin-right: 7px;">
              <el-date-picker
                class="width100"
                v-model="effectiveDate"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="effectiveDateToggle"
                :editable="false"
              ></el-date-picker>
            </div>
            <!-- <div style="width: 20%; float: left;">
              <el-checkbox v-model="checked">长期</el-checkbox>
            </div> -->

          </el-form-item>

          <el-form-item label="国籍">
            <el-select
              v-model="formData.nationality"
              clearable
              class="width100"
            >
              <el-option
                v-for="(item, index) in nationalityArray"
                :key="index"
                :label="item.label"
                :value="item.status"
              >{{item.label}}</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="籍贯">
            <el-select
              v-model="formData.nativePlace"
              clearable
              class="width100"
            >
              <el-option
                v-for="(item, index) in nativePlaceArray"
                :key="index"
                :label="item.name"
                :value="item.code"
              >{{item.name}}</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="民族">
            <el-select
              v-model="formData.nation"
              clearable
              class="width100"
            >
              <el-option
                v-for="(item, index) in nationArray"
                :key="index"
                :label="item.name"
                :value="item.code"
              >{{item.name}}</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="出生日期">
            <el-date-picker
              class="width100"
              v-model="formData.birthDate"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="date"
              :picker-options="pickerOptions"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
        </div>

        <div class="formContent-item">
          <div class="formContent-item_title">物业信息</div>
          <div
            style="max-height: 400px; overflow: hidden; overflow-y: auto; padding-right: 10px;"
            class="formContent-item_title_center"
          >
            <div
              v-for="(items, indexs) in houseInformation"
              :key="indexs"
            >
              <!-- <span style="color:red;float: left;">*</span> -->
              <el-form-item
                label="房屋信息"
                class="width100"
                :required="true"
              >
                <div style="width: 49%; float: left;">
                  <el-radio
                    :label="1"
                    v-model="items.choice"
                    @click.native="elRadio(indexs)"
                  >按楼栋</el-radio>
                  <el-radio
                    :label="2"
                    v-model="items.choice"
                    @click.native="elRadios(indexs)"
                  >按房间</el-radio>
                </div>
                <div
                  style="width: 50%;float: left; "
                  v-if="items.choice == 1 ? true : flase"
                >
                  <el-cascader
                    :ref="`getCheckeds`+indexs"
                    :props="{emitPath:false}"
                    :options="options"
                    class="width100"
                    placeholder="请选择"
                    @change="shareScopeChange1(indexs)"
                    v-model="items.region"
                    clearable
                  ></el-cascader>
                </div>
                <div
                  style="width: 50%;float: left;"
                  v-if="items.choice == 2 ? true : flase && this.isAdd"
                >
                  <el-cascader
                    :ref="`getChecked`+indexs"
                    :options="scopeList"
                    :props="props"
                    class="width100"
                    placeholder="请选择"
                    @change="shareScopeChange(indexs)"
                    v-model="items.region"
                    clearable
                    :show-all-levels="false"
                    :filter-node-method="filterNodeHouse"
                    collapse-tags
                  ></el-cascader>
                </div>
                <!-- :props="{ label: 'name', value: 'code' }" -->

              </el-form-item>

              <el-form-item
                label="计费规则"
                class="width100"
                :required="true"
              >
                <el-select
                  v-model="houseInformation[indexs].billingRules"
                  clearable
                  class="width100"
                  @click.native="houseCommunityRules(indexs)"
                >

                  <el-option
                    v-for="(item, index) in houseInformation[indexs].billing"
                    :key="index"
                    :label="item.name"
                    :value="item.value"
                  >{{item.name}}</el-option>
                </el-select>

              </el-form-item>
              <el-form-item
                label="计费面积"
                class="width100"
                :required="true"
              >
                <el-input
                  class="aaaa"
                  v-model="houseInformation[indexs].billingArea"
                  placeholder="请输入计费面积"
                  type="number"
                ></el-input>
              </el-form-item>
              <div
                style="width: 100%;"
                v-if="houseInformation.length == 1 ? flase :  true"
              >
                <el-button
                  type="primary"
                  style="float: right; position: relative; z-index: 100;"
                  key="indexs"
                  @click="closeshouseInformation(indexs)"
                >删除</el-button>
              </div>

              <div style="width: 100%; height: 0.005vw; background: #E0E1E3; margin: 20px 0; float: left;"></div>

            </div>
            <div>
              <el-button
                @click="addhouseInformation"
                style="float: left;"
                type="primary"
              >新增物业信息</el-button>
            </div>
          </div>

        </div>
      </div>
    </el-form>

    <div class="buttons">
      <el-button @click="closes">取消</el-button>
      <el-button
        type="primary"
        @click="addEdit()"
      >保存</el-button>
    </div>
  </div>
</template>



<script>
// import 
export default {
  props: {
    params: {
      type: Object
    },
    isAdd: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      props: { multiple: true, emitPath: true, value: 'value', label: 'name', children: 'children', },
      optionsxx: [],
      checked: false,
      formData: {
        name: '',
        phone: '',
        personnelNumber: '',
        sex: 1,
        remark: '',
        facePictureUrl: '',
        idType: '',
        idNumber: '',
        permanentAddress: '',
        issuingAuthority: '',
        nationality: '',
        nativePlace: '',
        nation: '',
        birthDate: ''
      },
      effectiveDate: [],
      idTypeArray: [
        {
          status: 1,
          label: '居民身份证'
        },
        {
          status: 2,
          label: '居民户口簿'
        },
        {
          status: 3,
          label: '暂住证'
        },
        {
          status: 4,
          label: '其他'
        }
      ],
      nationalityArray: [
        {
          status: 1,
          label: '中国'
        },
        {
          status: 2,
          label: '其他'
        }
      ],
      formRules: {
        name: [this.$valid.selectRequireds('填写姓名')],
        phone: [this.$valid.patternPhone('填写手机号')],
      },
      houseInformation: [
        {
          choice: 1,
          billingArea: '',
          billingRules: '',
          region: [],
          billing: []//计费规则
        },
      ],
      // houseCommunity: [
      //   {
      //     billing: []
      //   }
      // ],
      options: [],
      billing: [
        {
          id: 1,
          name: '房东'
        },
        {
          id: 2,
          name: '二房东'
        },
      ],
      optionTree: [],
      shareScope: [],
      shareScopeID: [],
      communityIdTree: [],
      communityId: []
    }
  },
  methods: {

    elRadio (indexs) {
      this.houseInformation[indexs].billingRules = '';
      this.houseInformation[indexs].billing = [];
    },
    elRadios (indexs) {
      this.houseInformation[indexs].billingRules = '';
      this.houseInformation[indexs].billing = [];
    },


    uploadsuccess (response, file, fileList) {
      this.$refs.uploaduserlogo.clearFiles();
      if (0 === response.status) {

        this.formData.facePictureUrl = response.data;
      }
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },



    shareScopeChange (index) {

      var data = this.$refs[`getChecked${index}`][0].getCheckedNodes();
      if (data.length == 0) {
        this.houseInformation[index].billingRules = '';
        this.houseInformation[index].billing = [];
        // this.communityId = '';
        return;
      }
      this.shareScope = [];
      this.communityIdTree = [];
      for (let a = 0; a < data.length; a++) {
        if (data[a].children.length != 0) {
          if (data[0].path[0] == data[data.length - 1].path[0]) {

            for (let i = 0; i < data.length; i++) {
              this.shareScope.push(data[i].path[1]);
              this.communityIdTree.push(data[i].path[0]);
            }

            // this.houseInformation[index].region = [];
            // var houseInformation = [];
            // for (let i = 0; i < data.length; i++) {
            //   if (data[i].path[3] != undefined) {
            //     houseInformation.push(data[i].path)
            //     this.shareScope = data[i].path[1]
            //   }
            // }
            // this.houseInformation[index].region = houseInformation
            // // scopeList
            // debugger
            // this.$refs[`getChecked${index}`][0].$refs.panel.clearCheckedNodes();
            // console.log('同一个单元', this.houseInformation[index].region)
          } else {
            // 不同


            this.houseInformation[index].region = [];
            var houseInformation = [];
            this.shareScope = [];
            this.communityIdTree = [];

            for (let k = 0; k < data.length; k++) {
              if (data[k].path[0] == data[data.length - 1].path[0]) {
                if (data[k].path[3] != undefined) {
                  houseInformation.push(data[k].path)
                  this.shareScope.push(data[k].path[1])
                  this.communityIdTree.push(data[k].path[0]);
                }

              }
            }
            // this.$refs[`getChecked${index}`][0].$refs.panel.clearCheckedNodes();
            // this.$refs[`getChecked${index}`][0].$refs.panel.activePath = [];
            // data = [];
            // this.$refs[`getChecked${index}`][0].getCheckedNodes() = [];
            this.houseInformation[index].region = houseInformation
            this.$nextTick(() => {
              // this.$forceUpdate();
              this.$refs[`getChecked${index}`][0].$refs.panel.clearCheckedNodes();
            })




          }

        } else {
          this.shareScope = [];
          this.communityIdTree = [];
          if (data[0].path[0] == data[data.length - 1].path[0]) {
            for (let i = 0; i < data.length; i++) {
              this.shareScope.push(data[i].path[1])
              this.communityIdTree.push(data[i].path[0]);
            }
          } else {
            this.shareScope = [];
            this.communityIdTree = [];
            for (let k = 0; k < data.length; k++) {
              this.shareScope.push(data[k].path[1])
              this.communityIdTree.push(data[k].path[0]);
            }
            this.$nextTick(() => {
              // this.$forceUpdate();
              this.$refs[`getChecked${index}`][0].$refs.panel.clearCheckedNodes();
            })
            // this.houseInformation[index].region = [];
            // var houseInformation = [];
            // this.shareScope = [];
            // for (let k = 0; k < data.length; k++) {
            //   if (data[k].path[0] == data[data.length - 1].path[0]) {
            //     if (data[k].path[3] != undefined) {
            //       houseInformation.push(data[k].path)
            //       this.shareScope.push(data[k].path[1])
            //     }

            //   }
            // }
          }
          // this.houseInformation[index].region = houseInformation
          // this.$nextTick(() => {
          //   // this.$forceUpdate();
          //   this.$refs[`getChecked${index}`][0].$refs.panel.clearCheckedNodes();
          // })
          // debugger
          // // this.shareScope = data[index].parent.parent.value;
          // if (data[0].path[0] == data[data.length - 1].path[0]) {
          //   this.houseInformation[index].region = [];
          //   var houseInformation = [];
          //   // var houseInformation = [];
          //   for (let i = 0; i < data.length; i++) {
          //     houseInformation.push(data[i].path)
          //     //   houseInformation.push(this.houseInformation[index].region[i][3])
          //     this.shareScope = data[i].path[1]
          //   }
          //   this.houseInformation[index].region = houseInformation
          //   console.log('同社区', this.houseInformation[index].region)
          // } else {
          //   this.houseInformation[index].region = [];
          //   var houseInformation = [];

          //   for (let j = 0; j < data.length; j++) {
          //     if (data[j].path[0] != data[j + 1].path[0]) {
          //       debugger
          //       houseInformation.push(data[j + 1].path)
          //       this.shareScope = data[j + 1].path[1]
          //     }
          //   }
          //   this.houseInformation[index].region = houseInformation
          //   console.log('不同社区', this.houseInformation[index].region)

          // }
        }



      }
      this.shareScope = Array.from(new Set(this.shareScope))
      this.communityIdTree = Array.from(new Set(this.communityIdTree))
      this.shareScopeID[index] = this.shareScope;
      this.communityId[index] = this.communityIdTree
      this.communityRules(index);

      // 判断点击是否为单元


    },
    houseCommunityRules (index) {
      this.communityRules(index);

    },
    // 获取对应社区的规则
    communityRules (index) {
      this.$http.get('/czc-charge/scChargeStrategy/list', { communityId: this.communityId[index][0] }).then(({ status, data, msg }) => {
        if (status == 0) {
          this.houseInformation[index].billing = [];
          // this.houseInformation[index].billingRules = ''
          if (data.length == 0) {
            this.houseInformation[index].billing = [];
            this.houseInformation[index].billingRules = ''
          } else {
            data.map((item, indexs) => {
              this.houseInformation[index].billing.push({
                name: item.chargeName,
                value: item.id
              })
            })
          }


        }
      })
    },
    // 回填规则
    RescommunityRules (index, communityId) {
      this.$http.get('/czc-charge/scChargeStrategy/list', { communityId: communityId }).then(({ status, data, msg }) => {
        if (status == 0) {
          this.houseInformation[index].billing = [];
          // this.houseInformation[index].billingRules = ''
          if (data.length == 0) {
            this.houseInformation[index].billing = [];
            this.houseInformation[index].billingRules = ''
          } else {
            data.map((item, indexs) => {
              // 
              this.houseInformation[index].billing.push({
                name: item.chargeName,
                value: item.id
              })
            })
          }
        }
      })
    },
    shareScopeChange1 (index) {

      var data = this.$refs[`getCheckeds${index}`][0].getCheckedNodes();
      if (data.length != 0) {
        var id = data[0].path[0];
        this.RescommunityRules(index, id);
      } else {
        this.houseInformation[index].billingRules = '';
        this.houseInformation[index].billing = [];
      }

    },
    closes () {
      this.$emit('clerOwnerStatus');
    },
    addEdit () {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          for (let a = 0; a < this.houseInformation.length; a++) {
            if (this.houseInformation[a].region == null) {
              if (this.houseInformation[a].region == null || this.houseInformation[a].billingRules.length == 0 || this.houseInformation[a].billingArea.length == 0) {
                this.$message.error('请填写物业信息');
                return;
              }
            } else {
              if (this.houseInformation[a].region.length == 0 || this.houseInformation[a].billingRules.length == 0 || this.houseInformation[a].billingArea.length == 0) {
                this.$message.error('请填写物业信息');
                return;
              }

            }
          }
          var url = '/czc-community/landlord/add';
          var params = {
            name: this.formData.name,
            phone: this.formData.phone,
            personnelNumber: this.formData.personnelNumber,
            sex: this.formData.sex,
            remarks: this.formData.remark,
            facePictureUrl: this.formData.facePictureUrl,
            idType: this.formData.idType,
            idNumber: this.formData.idNumber,
            permanentAddress: this.formData.permanentAddress,
            issuingAuthority: this.formData.issuingAuthority,
            effectiveDateStart: this.effectiveDate[0],
            effectiveDateEnd: this.effectiveDate[1],
            nationality: this.formData.nationality,
            nation: this.formData.nation,
            birthDate: this.formData.birthDate,
            nativePlace: this.formData.nativePlace,
            buildingList: []
          };
          if (!this.isAdd) {
            var url = '/czc-community/landlord/update'
            var params = {
              id: this.params,
              name: this.formData.name,
              phone: this.formData.phone,
              personnelNumber: this.formData.personnelNumber,
              sex: this.formData.sex,
              remarks: this.formData.remark,
              facePictureUrl: this.formData.facePictureUrl,
              idType: this.formData.idType,
              idNumber: this.formData.idNumber,
              permanentAddress: this.formData.permanentAddress,
              issuingAuthority: this.formData.issuingAuthority,
              effectiveDateStart: this.effectiveDate[0],
              effectiveDateEnd: this.effectiveDate[1],
              nationality: this.formData.nationality,
              nation: this.formData.nation,
              birthDate: this.formData.birthDate,
              nativePlace: this.formData.nativePlace,
              buildingList: []
            };
          }

          for (let i = 0; i < this.houseInformation.length; i++) {
            if (this.houseInformation[i].choice == 1) {
              params.buildingList.push({
                type: this.houseInformation[i].choice,
                buildingId: this.houseInformation[i].region,
                strategyId: this.houseInformation[i].billingRules,
                area: this.houseInformation[i].billingArea,
                houseList: []
              })
            } else if (this.houseInformation[i].choice == 2) {
              params.buildingList.push({
                type: this.houseInformation[i].choice,
                buildingId: this.shareScopeID[i][0] || this.shareScopeID[i][1],
                strategyId: this.houseInformation[i].billingRules,
                area: this.houseInformation[i].billingArea,
                houseList: []
              })
              for (let j = 0; j < this.houseInformation[i].region.length; j++) {

                params.buildingList[i].houseList.push({
                  houseId: this.houseInformation[i].region[j][3] || this.houseInformation[i].region[j][2]
                })
              }
            }

          }

          this.$http.post(url, params).then(({ status, msg }) => {
            if (status == 0) {
              this.$message.success(msg);
              this.closes();
            } else {
              this.$message.error(msg);
            }
          }).catch(() => { });
        } else {

          return false;
        }
      });

    },
    addhouseInformation () {
      this.houseInformation.push({
        choice: 1,
        billingArea: '',
        billingRules: '',
        region: [],
        billing: []
      })
    },
    closeshouseInformation (id) {
      if (this.houseInformation.length > 1) {
        this.houseInformation.splice(id, 1);
      }

      if (this.shareScopeID.length > 1 && this.shareScopeID[id] != undefined) {
        this.shareScopeID.splice(id, 1);
      }
    },
    getOrgTreeList () {
      this.$http
        .get('/czc-community/assets/tree/community/find', { buildingType: 1 })
        .then(({ status, data, msg }) => {
          if (status === 0 && data) {
            this.optionTree = data;
            this.scopeList = data;

            this.TreeList();
          }
        });
    },
    TreeList () {
      this.options = [];
      for (let i = 0; i < this.optionTree.length; i++) {
        this.options.push({
          value: this.optionTree[i].value,
          label: this.optionTree[i].name,
          children: [],
        });
        for (let k = 0; k < this.optionTree[i].children.length; k++) {
          this.options[i].children.push({
            value: this.optionTree[i].children[k].value,
            label: this.optionTree[i].children[k].name,
          })
        }
      }
      if (!this.isAdd) {

        this.getDetails();
      }

    },


    getDetails () {
      let url = '/czc-community/landlord/find/' + this.params;
      this.$http.get(url).then(({ data, status, msg }) => {
        if (status == 0) {
          this.effectiveDate = [];

          this.formData.name = data.name;
          this.formData.phone = data.phone;
          this.formData.personnelNumber = data.personnelNumber;
          this.formData.sex = data.sex;
          this.formData.remark = data.remarks;
          this.formData.facePictureUrl = data.facePictureUrl;
          this.formData.idType = data.idType;
          this.formData.idNumber = data.idNumber;
          this.formData.permanentAddress = data.permanentAddress;
          this.formData.issuingAuthority = data.issuingAuthority;
          this.effectiveDate.push(data.effectiveDateStart, data.effectiveDateEnd)
          this.formData.nationality = data.nationality;
          this.formData.nation = data.nation;
          this.formData.birthDate = data.birthDate;
          this.formData.nativePlace = data.nativePlace


          let newHouse = [];
          for (let i = 0; i < data.buildingList.length; i++) {



            if (data.buildingList[i].type == 1) {

              newHouse.push({
                choice: data.buildingList[i].type,
                region: data.buildingList[i].buildingId + '',
                billingRules: data.buildingList[i].strategyId,
                billingArea: data.buildingList[i].area,
                billing: [],
              })
              this.RescommunityRules(i, data.buildingList[i].communityId);

            } else if (data.buildingList[i].type == 2) {
              this.shareScopeID[i] = [data.buildingList[i].buildingId + ''];
              var communityId = data.buildingList[i].communityId + '';
              var buildingId = data.buildingList[i].buildingId + '';

              var resDateRegion = []
              var houseId = [];
              var unitName = [];
              for (let k = 0; k < data.buildingList[i].houseList.length; k++) {
                houseId.push(data.buildingList[i].houseList[k].houseId);
                unitName.push(data.buildingList[i].houseList[k].unitName)
                if (unitName.length != 0 && unitName[0] != null) {

                  resDateRegion[k] = [communityId, buildingId, unitName[k], houseId[k]];
                } else {
                  resDateRegion[k] = [communityId, buildingId, houseId[k]];
                }
              }
              newHouse.push({
                choice: data.buildingList[i].type,
                region: resDateRegion,
                billingRules: data.buildingList[i].strategyId,
                billingArea: data.buildingList[i].area,
                billing: [],
              })
            }
            this.RescommunityRules(i, data.buildingList[i].communityId);
          }
          this.houseInformation = newHouse;
        }
      })
    }
  },
  created () {
    this.getOrgTreeList();
    if (!this.isAdd) {
      this.getDetails();
    }

  },
  computed: {
    nationArray () {
      return this.$store.getters['getNationArray'];
    },
    nativePlaceArray () {
      return this.$store.getters['getNativeArray'];
    }
  },
}

</script>






<style lang="scss" scoped >
@import '../../style.scss';
.landlord-title {
    margin-bottom: 20px;
    background: white;
    height: 60px;
    display: flex;
    align-items: center;
    padding: 20px;
    span {
        font-size: 16px;
    }
}
.landlord-title span:nth-child(2) {
    color: red;
}
/deep/ .el-range-separator {
    width: 8% !important;
}
.formContent-item .ownerScroll[data-v-2c08d612]::-webkit-scrollbar {
    width: 5px;
}
.formContent-item .ownerScroll[data-v-2c08d612]::-webkit-scrollbar-thumb {
    background: #c6c4c4a9;
}
.formContent-item_title_center::-webkit-scrollbar {
    width: 5px !important;
}
.formContent-item_title_center::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}
.formContent-item_title_center::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #c6c4c4a9;
}
.formContent-item_title_center::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #f4f7f9a8;
}
</style>


<style lang="scss">
.el-cascader-panel {
    .el-scrollbar:first-child {
        .el-checkbox {
            display: none !important;
        }
    }
    .el-scrollbar:nth-child(2) {
        .el-checkbox {
            display: none !important;
        }
    }
}

.aaaa input::-webkit-outer-spin-button,
.aaaa input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
.aaaa input[type='number'] {
    -moz-appearance: textfield;
}
</style>