CZC/operationSupport/src/views/buildingManagement/pageJump/addoredit.vue

<template>
  <div class="device-info_install addinstall">
    <div class="device_content">
      <div class="left_content">
        <div class="form_head">
          <p>基本信息</p>
        </div>
        <div class="form_content">
          <el-scrollbar
            class="app-list-scroll"
            style="height: 100%"
          >
            <div class="form_content_disform">
              <zz-form
                :cols="detailCols"
                :data="formdata"
                :rules="formrules"
                labelWidth="98"
                ref="detailform"
              >
                <el-select
                  v-model="formdata.communityId"
                  placeholder="请选择社区名称"
                  slot="communityId"
                  class="width100"
                >
                  <el-option
                    v-for="(item, index) in communityArray"
                    :label="item.communityName"
                    :value="item.id"
                    :key="index"
                  ></el-option>
                </el-select>
                <el-select
                  v-model="formdata.buildingType"
                  placeholder="请选择楼栋类型"
                  slot="buildingTypeList"
                  class="width100"
                >
                  <el-option
                    label="高层"
                    :value="1"
                  ></el-option>
                  <el-option
                    label="低层"
                    :value="2"
                  ></el-option>
                </el-select>

                <el-select
                  v-model="formdata.buildingPurpose"
                  placeholder="请选择楼栋用途"
                  slot="buildingPurpose"
                  class="width100"
                >
                  <el-option
                    v-for="(item, index) in buildingPurposeType"
                    :label="item.label"
                    :value="item.id"
                    :key="index"
                  ></el-option>
                </el-select>

                <el-select
                  v-model="formdata.buildingStructure"
                  placeholder="请选择楼栋用途"
                  slot="buildingStructure"
                  class="width100"
                >
                  <el-option
                    v-for="(item, index) in buildingStructureType"
                    :label="item.label"
                    :value="item.id"
                    :key="index"
                  ></el-option>
                </el-select>
                <el-input
                  type="textarea"
                  :rows="4"
                  slot="remarks"
                  show-word-limit
                  v-model="formdata.remarks"
                  maxlength="300"
                >
                </el-input>
              </zz-form>
            </div>
          </el-scrollbar>
        </div>
      </div>
      <div class="right_content">
        <div class="right_content_head">
          <span class="head_text">创建房屋</span>
          <span
            class="close"
            @click="close"
          >
            <i class="el-icon-close"></i>
          </span>
        </div>
        <div class="right_content_info">
          <div
            class="head_fr"
            v-if="isAdd"
          >
            <div class="head_content head_add">
              <div class="checkbox_style">
                <el-checkbox
                  disabled
                  @change="checkedUnit"
                  v-model="initialUnitList.checkedUnit"
                ></el-checkbox>
              </div>
              <div class="form_content">
                <zz-form
                  :cols="unitCols"
                  labelposition="left"
                  :rules="unitrules"
                  :data="formdata"
                  :disabled="!isAdd"
                  labelWidth="50"
                  ref="unitform"
                >
                  <template
                    slot="unitRule"
                    prop="unitRule"
                  >
                    <div class="row_class">
                      <el-radio-group
                        :disabled="!initialUnitList.checkedUnit"
                        v-model="initialUnitList.unit.type"
                        @change="radioChange('unit', $event)"
                      >
                        <el-radio label="Number">按数字1-20生成</el-radio>
                        <el-radio label="Letter">按字母A-Z生成</el-radio>
                      </el-radio-group>
                      <el-select
                        :disabled="!initialUnitList.checkedUnit"
                        class="w120 wfirst"
                        v-model="initialUnitList.unit.start"
                        prop="floorstart"
                        placeholder="起始单元"
                      >
                        <el-option
                          v-for="item in unitOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                      <el-select
                        class="w120 wsecond"
                        :disabled="!initialUnitList.checkedUnit"
                        v-model="initialUnitList.unit.end"
                        placeholder="单元数"
                      >
                        <el-option
                          v-for="item in unitOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </div>
                    <div class="row_class addfloo">
                      <div class="last_level">
                        <label class="label_text">每栋层数</label>
                        <el-select
                          class="w120"
                          v-model="formdata.floorsNumber"
                          placeholder="请选择楼栋层数"
                        >
                          <el-option
                            v-for="item in floorlevelOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                      </div>
                      <div class="last_level">
                        <label class="label_text">每层户数</label>
                        <el-select
                          class="w120"
                          v-model="formdata.householdsPerFloor"
                          placeholder="请选择每层户数"
                        >
                          <el-option
                            v-for="item in unithouseOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                      </div>
                      <div
                        class="last_level"
                        v-if="isAdd"
                      >
                        <label class="label_text">房屋类型</label>
                        <el-select
                          class="w120"
                          v-model="formdata.houseType"
                          @change="toggleUnithOptions"
                          placeholder="请选择每层户数"
                        >
                          <el-option
                            label="住宅"
                            :value="1"
                          ></el-option>
                          <el-option
                            label="商业"
                            :value="2"
                          ></el-option>
                        </el-select>
                      </div>
                    </div>
                  </template>
                </zz-form>
              </div>
              <div class="btn_unit">
                <el-button
                  type="primary"
                  class="el-mgRight-md"
                  :disabled="!isAdd"
                  @click="createDoor"
                >{{ doorData.length ? '重新' : '' }}生成房屋</el-button>
                <el-button
                  @click="clearDoor"
                  :disabled="!isAdd"
                >清空房屋</el-button>
              </div>
            </div>
            <div class="title_class">
              <span class="title_txt">楼栋信息</span>
              <el-tooltip
                v-if="doorData && doorData.length > 0"
                class="item text-wrapper"
                effect="light"
                placement="right"
              >
                <div slot="content">
                  双击可对楼栋、单元名称进行自定义修改<br />单击选中楼栋、单元、单元户信息根据选中的楼栋、单元进行展示
                </div>
                <img
                  src="@/assets/img/menuicon/icon_tishi_zhengchang.png"
                  alt=""
                />
              </el-tooltip>
            </div>
          </div>
          <div class="floorinfo">
            <div class="door-wrap door_install">
              <div
                class="top_content"
                :class="!isAdd ? 'is-disabled' : ''"
              >
                <el-scrollbar
                  class="app-list-scroll"
                  style="height: 100%"
                >
                  <div
                    class="floor_unit"
                    v-if="doorData && doorData.length > 0"
                  >
                    <div class="box clearfix">
                      <div class="label_left">楼栋</div>
                      <div class="el-fl-left tags">
                        <el-tag
                          :disable-transitions="false"
                          data-code="build"
                          class="active"
                        >
                          {{ formdata.buildingName }}
                        </el-tag>
                      </div>
                    </div>
                    <div
                      class="box clearfix"
                      v-if="
                                                initialUnitList.enableUnit &&
                                                doorData[buildingIndex] &&
                                                doorData[buildingIndex].unitFloorList &&
                                                doorData[buildingIndex].unitFloorList.length
                                            "
                    >
                      <div class="label_left">单元</div>

                      <div class="el-fl-left tags">
                        <el-tag
                          :key="index2"
                          v-for="(unit, index2) in doorData"
                          closable
                          :disable-transitions="false"
                          data-code="unit"
                          @close="handleClose('unit', index2, doorData)"
                          @click="unitIndex = index2"
                          :class="{ active: unitIndex === index2 }"
                          style="position: relative ; top: 14px;"
                        >
                          <span @dblclick="showInput">{{ unit.unitName }}</span>
                          <el-input
                            style="display: none"
                            v-model="unit.unitName"
                            @keyup.enter.native="inputConfirm($event, doorData)"
                            @blur="inputConfirm($event, doorData)"
                            data-code="unit"
                            maxlength="20"
                          ></el-input>
                        </el-tag>
                        <el-button
                          class="el-icon-plus button-new-tag"
                          size="small"
                          @click="showInput"
                          style="position: relative; top: -17px;"
                        ></el-button>
                        <el-input
                          class="input-new-tag"
                          style="display: none"
                          size="small"
                          placeholder="请输入单元号"
                          v-model="inputValue.unit"
                          @keyup.enter.native="handleInputConfirm($event, doorData)"
                          @blur="handleInputConfirm($event, doorData)"
                          data-code="unit"
                          maxlength="20"
                        >
                        </el-input>
                      </div>
                    </div>
                  </div>
                  <div
                    v-else
                    class="empty_floor"
                  >
                    <p>暂无相关信息</p>
                  </div>
                  <div class="title_class border_hr">
                    <span class="title_txt">单元户信息</span>
                    {{doorData[buildingIndex]}}
                    <el-tooltip
                      v-if="
                                                doorData[buildingIndex] &&
                                                doorData[buildingIndex].unitFloorList &&
                                                doorData[buildingIndex].unitFloorList.length
                                            "
                      class="item"
                      effect="light"
                      placement="right"
                      :content="unitMsg"
                    >
                      <img
                        src="@/assets/img/menuicon/icon_tishi_zhengchang.png"
                        alt=""
                      />
                    </el-tooltip>
                  </div>

                  <div
                    class="unit"
                    v-if="
                                           doorData[buildingIndex] &&
                                            doorData[buildingIndex].unitFloorList &&
                                            doorData[buildingIndex].unitFloorList.length
                                        "
                  >
                    <div
                      class="floor"
                      v-if="
                                               doorData[buildingIndex].unitFloorList[unitIndex] &&
                                                doorData[buildingIndex].unitFloorList[unitIndex].roomList &&
                                                doorData[buildingIndex].unitFloorList[unitIndex].roomList.length 
                                            "
                    >
                      <!-- <h2>单元户<span>鼠标双击修改名称； 修改楼层名称后，请自行修改单元户的名称</span></h2> -->

                      <div
                        class="box clearfix"
                        :key="index3"
                        v-for="(floor, index3) in doorData[buildingIndex].unitFloorList"
                      >
                        <!-- <span class="el-fl-left label">楼层：</span> -->
                        <div class="unit_left">
                          <el-tag
                            closable
                            :disable-transitions="false"
                            data-code="floor"
                            @close="handleClose('floor', index3, doorData[buildingIndex].unitFloorList)"
                          >
                            <span @dblclick="showInput">{{ floor.floorNumber }}</span>
                            <el-input
                              style="display: none"
                              v-model="floor.floorNumber"
                              @keyup.enter.native="
                                                                inputConfirm($event, doorData[buildingIndex].unitFloorList)
                                                            "
                              @blur="inputConfirm($event, doorData[buildingIndex].unitFloorList)"
                              data-code="floor"
                              maxlength="20"
                            ></el-input>
                          </el-tag>
                          <span class="unit_text">层</span>
                        </div>
                        <span class="el-fl-left tags">
                          <div
                            class="door"
                            v-if="floor"
                          >
                            <el-tag
                              :key="index4"
                              v-for="(door, index4) in floor.roomList"
                              closable
                              :disable-transitions="false"
                              data-code="door"
                              @close="handleClose('door', index4, floor.roomList)"
                            >
                              <span @dblclick="showInput">{{ door.roomNumber }}</span>
                              <el-input
                                style="display: none"
                                v-model="door.roomNumber"
                                @keyup.enter.native="inputConfirm($event, floor.roomList)"
                                @blur="inputConfirm($event, floor.roomList)"
                                data-code="door"
                                maxlength="20"
                              ></el-input>
                            </el-tag>
                            <el-button
                              class="el-icon-plus button-new-tag"
                              size="small"
                              @click="showInput"
                            ></el-button>
                            <el-input
                              class="input-new-tag"
                              style="display: none"
                              size="small"
                              placeholder="请输入户号"
                              v-model="inputValue.door"
                              @keyup.enter.native="handleInputConfirm($event, floor.roomList)"
                              @blur="handleInputConfirm($event, floor.roomList)"
                              data-code="door"
                              maxlength="20"
                            >
                            </el-input>
                          </div>
                        </span>
                      </div>
                      <div class="add-floor">
                        <el-button
                          class="el-icon-plus button-new-tag"
                          size="small"
                          @click="showInput"
                        ></el-button>
                        <el-input
                          class="input-new-tag"
                          style="display: none"
                          size="small"
                          placeholder="请输入楼层号"
                          v-model="inputValue.floor"
                          @keyup.enter.native="handleInputConfirm($event, doorData[buildingIndex].unitFloorList)"
                          @blur="handleInputConfirm($event, doorData[buildingIndex].unitFloorList)"
                          data-code="floor"
                          maxlength="20"
                        >
                        </el-input>
                      </div>
                    </div>
                  </div>
                  <div
                    v-else
                    class="unit_empty"
                  >
                    <div class="center_text">
                      <img
                        src="@assets/img/menuicon/img_wuxiaoxi@2x.png"
                        alt=""
                      />
                      <span>暂无相关信息</span>
                    </div>
                  </div>
                </el-scrollbar>
              </div>
              <div class="btns footer_btn">
                <el-button @click="resetForm">重置</el-button>
                <el-button @click="close">取消</el-button>
                <el-button
                  type="primary"
                  @click="submit"
                >保存</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import initList from '../mixins/initList';
import { initDoor, calcDoor } from './basedata';
const createContinueData = (type, num) => {
  //type--类型，num生成的个数
  let objArr = [];
  if (type == 'Number') {
    [...new Array(Number(num)).keys()].map((idx) => {
      let obj = { label: Number(idx) + 1, value: Number(idx) + 1 };
      objArr.push(obj);
    });
  } else {
    for (let i = 0; i < num; i++) {
      let letter = String.fromCharCode(65 + i);
      let obj = { label: letter, value: letter };
      objArr.push(obj);
    }
  }
  return objArr;
};
const txtI18n = {
  build: '楼栋',
  unit: '单元',
  floor: '楼层',
  door: '单元户'
};
export default {
  mixins: [initList],
  name: 'editBuilding',
  data () {
    return {
      unitCols: [[{ label: '单元', slot: 'unitRule', prop: 'unitRule' }]],
      detailCols: [
        [
          {
            label: '所属社区',
            prop: 'communityId',
            slot: 'communityId'
          },
          {
            label: '楼栋名称',
            prop: 'buildingName',
            input: 'true'
          },
          {
            label: '楼栋编号',
            prop: 'buildingNumber',
            input: 'true'
          },
          {
            label: '楼栋类型',
            prop: 'buildingTypeList',
            slot: 'buildingTypeList'
          },
          {
            label: '楼栋用途',
            prop: 'buildingPurpose',
            slot: 'buildingPurpose'
          },
          {
            label: '建筑结构',
            prop: 'buildingStructure',
            slot: 'buildingStructure'
          },
          {
            label: '建成日期',
            prop: 'builtDate',
            date: 'true',
            widt: true
          },
          {
            label: '验收日期',
            prop: 'acceptanceDate',
            date: 'true',
            widt: true
          },
          {
            label: '建筑面积',
            prop: 'buildingArea',
            input: true
          },
          {
            label: '使用面积',
            prop: 'useArea',
            input: 'true'
          },
          {
            label: '备注信息',
            prop: 'remarks',
            slot: 'remarks'
          }
        ]
      ],
      formdata: {
        communityId: '',
        buildingName: '',
        buildingNumber: '', //楼栋编号
        buildingType: '',
        buildingPurpose: '',
        buildingStructure: '',
        builtDate: '',
        acceptanceDate: '',
        buildingArea: '',
        useArea: '',
        remarks: '',
        houseType: 1,
        floorsNumber: '1', //每栋层数
        unitNumber: 1, //单元数
        householdsPerFloor: '1' //每层户数
      },
      initialUnitList: {
        checkedUnit: true,
        enableUnit: 1, //勾选了复选框
        unit: {
          type: 'Number', //  Number letter
          start: '1', // 1 A单元的起始单元
          end: '1'
        }
      },
      formrules: {
        communityId: this.$valid.selectRequired(['社区']),
        buildingName: [this.$valid.inputRequired('楼栋名称')]
      },
      buildingPurposeType: [
        {
          label: '住宅楼',
          id: 1
        },
        {
          label: '商场',
          id: 2
        },
        {
          label: '写字楼',
          id: 3
        },
        {
          label: '公寓',
          id: 4
        },
        {
          label: '别墅',
          id: 5
        },
        {
          label: '自建楼',
          id: 6
        },
        {
          label: '其他',
          id: 7
        }
      ],
      buildingStructureType: [
        {
          label: '钢结构',
          id: 1
        },
        {
          label: '钢筋混凝土结构',
          id: 2
        },
        {
          label: '筋混凝土结构',
          id: 3
        },
        {
          label: '混合结构',
          id: 4
        },
        {
          label: '砖木结构',
          id: 5
        },
        {
          label: '其他结构',
          id: 6
        }
      ]
    };
  },
  props: {
    params: {
      type: Object
    },
    isAdd: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    radioChange (type, val) {
      let length = val == 'Number' ? '20' : '26';
      if (val == 'Letter') {
        this.unitOptions = createContinueData(val, length);
        this.initialUnitList.unit.type = 'Letter';
        this.initialUnitList.unit.start = 'A';
        this.initialUnitList.unit.end = 'A';
      } else {
        this.initialUnitList.unit = this.copyrules.unit;
        this.unitOptions = createContinueData(val, length);
      }
    },

    resetForm () {
      this.formdata = {};
      this.formdata = this.copyformdata;
      // this.doorData = [];
      this.$refs.detailform.validateField('communityId');
    },

    checkedUnit (val) {
      if (val) {
        this.initialUnitList.enableUnit = 1;
      } else {
        this.formdata.unitNumber = 1;
        this.initialUnitList.enableUnit = 0;
      }
    },
    createDoor () {
      if (this.formdata.buildingName == '') {
        this.$message.error('先输入楼栋名称');
        return;
      }
      new Promise((resolve) => {
        this.$refs.unitform.validate(resolve);
      }).then((v) => {
        if (this.initialUnitList.checkedUnit) {
          this.initialUnitList.enableUnit = 1;
        } else {
          this.formdata.unitNumber = 1;
          this.initialUnitList.enableUnit = 0;
        }
        let isNumberUnitFlag = this.initialUnitList.unit.type == 'Number' ? true : false;
        let checkUnit = this.initialUnitList.unit.start <= this.initialUnitList.unit.end ? true : false;
        if (this.initialUnitList.checkedUnit) {
          if (checkUnit && isNumberUnitFlag) {
            this.formdata.unitNumber = this.initialUnitList.unit.end - this.initialUnitList.unit.start + 1;
          } else if (!isNumberUnitFlag && checkUnit) {
            this.formdata.unitNumber =
              this.initialUnitList.unit.end.charCodeAt() - this.initialUnitList.unit.start.charCodeAt() + 1;
          } else {
            this.formdata.unitNumber = 1;
            this.$message.error('单元起始和结束设置出错');
            return;
          }
        }

        this.doorData = initDoor(this.formdata, this.initialUnitList).generateUnit;
      });
    },
    handleInputConfirm (e, arr) {
      const { value, dataset } = e.target;
      if (value && dataset) {
        const { code } = dataset;
        const querySame = () => _.isEmpty(_.filter(arr, (v) => v.name == value));
        const generate = {
          unit: initDoor(this.formdata, this.initialUnitList).generateUnit,
          floor: initDoor(this.formdata, this.initialUnitList).generateFloor,
          door: initDoor(this.formdata, this.initialUnitList).generateDoor(value)
        };
        if (querySame()) {
          if (code == 'unit') {
            arr.push({
              unitName: value,
              unitFloorList: code != 'door' ? generate['floor'] : undefined
            });
          } else if (code == 'door') {
            arr.push({
              roomNumber: value
            });
          } else if (code == 'floor') {
            arr.push({
              floorNumber: value,
              roomList: code != 'door' ? generate['door'] : undefined
            });
          }
          this.inputValue[code] = '';
        } else {
          this.$message.error(`${txtI18n[code]}名称重复，请重新添加`);
        }
      }
      e.target.parentElement.style.display = 'none';
      e.target.parentElement.previousElementSibling.style.display = 'inline-block';
      e.target.value = '';
    },

    submit () {
      new Promise((resolve) => {
        this.$refs.detailform.validate(resolve);
      }).then((v) => {

        const { buildNumber, unitNumber, floorNumber, doorNumber } = calcDoor(this.doorData, this.initialUnitList.checkedUnit);
        const txt = `请检查信息是否填写完整（包含重复名称，名称为空现象）<br>确认提交单元户信息：<br>总楼栋数：${buildNumber}${this.initialUnitList.enableUnit ? `<br>总单元数：${unitNumber}` : ''
          }<br>总楼层数：${floorNumber}<br>总单元户数：${doorNumber}`;

        this.__confirm(txt, '提交')
          .then((v) => {
            if (!this.initialUnitList.checkedUnit) {
              this.doorData[0].unitName = '';
              this.formdata.unitNumber = 0;
            }
            this.formdata.buildingUnitList = this.doorData;

            let url = '/czc-community/assets/building/add';
            if (!!this.params.id) {
              url = '/czc-community/assets/building/update';
            }
            this.$http
              .post(url, this.formdata)
              .then(({ msg, status }) => {
                this.$message({
                  type: status === 0 ? 'success' : 'error',
                  message: msg
                });
                if (status === 0) {
                  this.close();
                }
              })
              .catch(() => { });
          })
          .catch(() => { });
      });
    },

    getDetailData (id) {
      this.$http.get('/czc-community/assets/building/house/find', { id: id }).then(({ status, data, msg }) => {

        if (0 === status) {
          if (data.buildingUnitList.length !== 0) {
            this.formdata = data;
            debugger
            this.formdata.householdsPerFloor = data.buildingUnitList[0].unitFloorList[0].roomList.length;
            this.initialUnitList = {
              checkedUnit: data.unitNumber !== 0 ? true : false,
              enableUnit: data.unitNumber !== 0 ? 1 : 0,
              unit: {
                type: 'Number', //  Number letter
                start: data.buildingUnitList[0]['unitName'], // 1 A单元的起始单元
                end: data.buildingUnitList[data.buildingUnitList.length - 1]['unitName']
              }
            };
            debugger
            let resDate = [];
            data.buildingUnitList.map((item, index) => {
              resDate.push(item.unitFloorList)
            })
            // this.doorData = data.buildingUnitList;
            debugger
            this.doorData = resDate;
          } else {
            this.formdata = data;
          }
        }
      });
    }
  },
  mounted () { },
  created () {

    this.copyformdata = this.deepClone(this.formdata);
    if (!!this.params.id) {
      this.getDetailData(this.params.id);
    }
    this.copyrules = JSON.parse(JSON.stringify(this.initialUnitList));
  }
};
</script>
<style lang="scss" >
@import './popup.scss';
</style>