无房住户

operationSupport/src/views/ownerManagement/houselessHolds/add.vue

@@ -0,0 +1,529 @@
+<template>
+  <div>
+    <!-- <div class="formContent-item">
+      <div class="formContent-item_title"><span class="show-required-icon-star"></span> 绑定房产和车位</div>
+      <div class="ownerScroll">
+        <div
+          class="addHouse block-title"
+          @click="addHouse()"
+        >
+          <div class="floor list-title">绑定房产</div>
+          <img
+            class="bg-img"
+            src="@/assets/img/ownerManagement/bg_card@2x.png"
+            alt=""
+          />
+          <img
+            class="bg-imgIoc"
+            src="@/assets/img/ownerManagement/icon_building@2x.png"
+            alt=""
+          />
+          <img
+            class="add"
+            src="@/assets/img/ownerManagement/btn_add@2x.png"
+          />
+        </div>
+        <el-button
+          class="addHouseButton"
+          type="primary"
+          @click="addHouse()"
+          v-if="formData.houseList.length !== 0"
+        >新增房产</el-button>
+      </div>
+    </div> -->
+    <div class="formContent-item">
+      <div class="formContent-item_title"><span class="show-required-icon-star"></span> 绑定房产和车位</div>
+      <div class="ownerScroll">
+        <div
+          class="formContent-formList house"
+          v-for="(item, index) in formData.houseList"
+          :key="index"
+        >
+          <div class="block-title">
+            <div class="floor list-title">
+              {{`${item.buildingName} ${!!item.unitName ? CheckChinese(item.unitName, '单元') : ''}${item.roomNumber}`}}
+            </div>
+            <img
+              class="bg-img"
+              src="@/assets/img/ownerManagement/bg_card@2x.png"
+              alt=""
+            />
+            <img
+              class="bg-imgIoc"
+              src="@/assets/img/ownerManagement/icon_building@2x.png"
+              alt=""
+            />
+          </div>
+
+          <div class="el-form">
+            <el-form
+              ref="ruleForm"
+              :model="formData"
+              label-width="100px"
+              :rules="formRules"
+            >
+              <el-form-item
+                label="类型"
+                required
+                label-width="70px"
+              >
+                <el-select
+                  v-model="item.householdType"
+                  clearable
+                  @change="householdTypeHide(item)"
+                >
+                  <el-option
+                    v-for="(item, index) in householdTypeArray"
+                    :key="index"
+                    :label="item.label"
+                    :value="item.status"
+                  >{{ item.label }}</el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item
+                label="入住时间"
+                label-width="80px"
+              >
+                <el-date-picker
+                  v-model="item.checkInDate"
+                  value-format="yyyy-MM-dd HH:mm:ss"
+                  type="date"
+                  placeholder="选择日期"
+                >
+                </el-date-picker>
+              </el-form-item>
+            </el-form>
+          </div>
+
+          <div
+            class="block-title car"
+            v-for="(items, indexs) in item.parkingList"
+            :key="indexs"
+          >
+            <div class="floor list-title">
+              {{ `${items.garageName}${items.areaName || items.partitionName || ''}-${items.parkingNumber}` }}
+            </div>
+            <span
+              class="remove list-title"
+              @click="removeCard(indexs, item)"
+            >移除</span>
+            <img
+              class="bg-img"
+              src="@/assets/img/ownerManagement/bg_card@2x.png"
+              alt=""
+            />
+            <img
+              class="bg-imgIoc"
+              src="@/assets/img/ownerManagement/icon_car@2x.png"
+              alt=""
+            />
+          </div>
+          <div
+            class="addHouse block-title"
+            v-if="!!formData.houseList.length"
+            @click="addCard(item)"
+          >
+            <div class="floor list-title">绑定车位</div>
+            <img
+              class="bg-img"
+              src="@/assets/img/ownerManagement/bg_card@2x.png"
+              alt=""
+            />
+            <img
+              class="bg-imgIoc"
+              src="@/assets/img/ownerManagement/icon_car@2x.png"
+              alt=""
+            />
+            <img
+              class="add"
+              src="@/assets/img/ownerManagement/btn_add@2x.png"
+            />
+          </div>
+          <el-button
+            class="removeHouseButton"
+            type="primary"
+            @click="removeHouse(index)"
+            v-if="formData.houseList.length !== 0"
+          >删除房产</el-button>
+        </div>
+        <div
+          class="addHouse block-title"
+          v-if="formData.houseList.length == 0"
+          @click="addHouse()"
+        >
+          <div class="floor list-title">绑定房产</div>
+          <img
+            class="bg-img"
+            src="@/assets/img/ownerManagement/bg_card@2x.png"
+            alt=""
+          />
+          <img
+            class="bg-imgIoc"
+            src="@/assets/img/ownerManagement/icon_building@2x.png"
+            alt=""
+          />
+          <img
+            class="add"
+            src="@/assets/img/ownerManagement/btn_add@2x.png"
+          />
+        </div>
+        <el-button
+          class="addHouseButton"
+          type="primary"
+          @click="addHouse()"
+          v-if="formData.houseList.length !== 0"
+        >新增房产</el-button>
+      </div>
+    </div>
+  </div>
+
+</template>
+
+
+
+
+<script>
+export default {
+  props: ['params'],
+  data () {
+    return {
+      formData: {
+        houseList: []
+      },
+      communityArr: [],
+      householdTypeArray: [
+        {
+          status: 1,
+          label: '业主'
+        },
+        {
+          status: 2,
+          label: '亲属'
+        },
+        {
+          status: 3,
+          label: '租客'
+        },
+        {
+          status: 4,
+          label: '租户管理员'
+        },
+        {
+          status: 5,
+          label: '普通员工'
+        }
+      ],
+      // formCols3: [
+      //   [
+      //     {
+      //       label: '类型',
+      //       prop: 'householdType',
+      //       slot: 'householdType',
+      //       showRequired: true
+      //     },
+      //     {
+      //       label: '入住时间',
+      //       prop: 'checkInDate',
+      //       slot: 'checkInDate'
+      //     }
+      //   ]
+      // ],
+      garageArr: []
+    }
+  },
+  methods: {
+    addCard (itemObj) {
+      if (itemObj.householdType !== 1) {
+        this.$message.error('只能业主才能绑定车位');
+        return;
+      }
+      new Promise((resolve) => {
+        this.$store.dispatch('addPopup', {
+          url: '/ownerManagement/stepPage/poptreeSelect.vue',
+          width: '500px',
+          height: '400px',
+          props: {
+            num: 2,
+            list: itemObj.parkingList || [],
+            tenantsTree: this.garageArr,
+            callback: resolve
+          },
+          title: '选择车位',
+          notip: true
+        });
+      }).then((res) => {
+        if (res.length > 0) {
+          res.forEach((item, index) => {
+            let newObj = {
+              parkingId: item.parkingId,
+              parkingNumber: item.parkingNumber,
+              partitionName: item.partitionName,
+              garageName: item.garageName
+            };
+            let isExit = itemObj['parkingList'].some((is) => {
+              return is.parkingId == item.parkingId;
+            });
+            if (!isExit) {
+              itemObj['parkingList'].push(newObj);
+            }
+          });
+        }
+      });
+    },
+    removeCard (index, itemObj) {
+      itemObj['parkingList'].splice(index, 1);
+    },
+    removeHouse (index) {
+      this.formData['houseList'].splice(index, 1);
+    },
+
+
+
+    addHouse () {
+      new Promise((resolve) => {
+        this.$store.dispatch('addPopup', {
+          url: '/ownerManagement/houselessHolds/poptreeSelect.vue',
+          width: '500px',
+          height: '400px',
+          props: {
+            num: 1,
+            list: this.formData.houseList || [],
+            tenantsTree: this.communityArr,
+            callback: resolve
+          },
+          title: '选择房产',
+          notip: true
+        });
+      }).then((res) => {
+        if (res.length > 0) {
+          res.forEach((item, index) => {
+            let newObj = {
+              checkInDate: '',
+              householdType: 1,
+              buildingName: item.buildingName,
+              unitName: item.unitName,
+              roomNumber: item.roomNumber,
+              houseId: item.houseId,
+              parkingList: []
+            };
+            let isExit = this.formData['houseList'].some((is) => {
+              return is.houseId == item.houseId;
+            });
+            if (!isExit) {
+              this.formData['houseList'].push(newObj);
+            }
+          });
+        }
+      });
+    },
+    getTenantsTree () {
+      this.$http.get('/sc-community/assets/tree/community/find', { buildingType: 1 }).then(({ status, data, msg }) => {
+        if (status === 0 && data) {
+          this.dimension(data);
+          this.communityArr = data;
+        }
+      });
+      this.$http.get('/sc-community/assets/tree/garage/find').then(({ status, data, msg }) => {
+        if (status === 0 && data) {
+          this.garageArr = data;
+        }
+      });
+    },
+    dimension (arr) {
+      arr.map((item, index) => {
+        if (!!item.children) {
+          this.dimension(item.children);
+          if (item.type == 'unit') {
+            item.name = this.CheckChinese(item.name, '单元');
+          } else if (item.type == 'building') {
+            item.name = this.CheckChinese(item.name, '楼栋');
+          }
+        }
+      });
+    },
+    CheckChinese (val, name) {
+      var reg = new RegExp('[\\u4E00-\\u9FFF]+', 'g');
+      let newVal = val;
+      if (!reg.test(val)) {
+        newVal = val + name;
+      }
+      return newVal;
+    },
+    householdTypeHide (item) {
+      if (item.householdType !== 1) {
+        item.parkingList = [];
+      }
+    },
+
+
+    submit () {
+      this.$http.post('/sc-community/scResident/unboundHouse/save', { houseList: this.formData.houseList, id: this.params.row.id }).then(({ data, msg, status }) => {
+        if (status == 0) {
+          this.$message.success('修改成功');
+        } else {
+          this.$message.error('修改失败');
+        }
+      }).catch(() => { });
+
+      this.$emit('close');
+    }
+  },
+  created () {
+    debugger
+    console.log(this.params.row)
+    debugger
+    // this.formData.houseList = [
+    //   {
+    //     checkInDate: '',
+    //     householdType: 1,
+    //     buildingName: '',
+    //     unitName: '',
+    //     roomNumber: '',
+    //     houseId: '',
+    //     parkingList: []
+    //   }
+    // ];
+
+    this.getTenantsTree();
+  }
+}
+
+</script>
+
+
+
+
+
+<style lang="scss" scoped>
+@import '../style.scss';
+.formContent-item .ownerScroll {
+    height: calc(100vh - 250px);
+    overflow: auto;
+    padding-right: 10px;
+    &::-webkit-scrollbar {
+        width: 5px;
+    }
+    &::-webkit-scrollbar-track {
+        border-radius: 10px;
+        background: #f4f7f9a8;
+    }
+    &::-webkit-scrollbar-thumb {
+        border-radius: 10px;
+        background: #c6c4c4a9;
+    }
+    .addHouse {
+        cursor: pointer;
+        margin-bottom: 20px !important;
+        img.add {
+            margin-left: 20px;
+            width: 13px;
+        }
+    }
+
+    .block-title.car {
+        margin-bottom: 20px;
+        &:nth-of-type(2n) {
+            margin-right: 20px;
+        }
+    }
+
+    .formContent-formList.house {
+        flex-wrap: wrap;
+        &::after {
+            content: '';
+            width: 100%;
+            height: 1px;
+            background: #e0e1e3;
+            margin-bottom: 20px;
+        }
+        .el-form {
+            // width: calc(100% - 220px);
+            // width: 100%;
+            /deep/ .el-date-editor.el-input {
+                width: 100%;
+            }
+        }
+    }
+    .removeHouseButton {
+        width: 80px;
+        height: 32px;
+        margin-bottom: 20px;
+    }
+}
+
+.formContent-item {
+    width: 100%;
+    // width: calc((100vw / 3) - 80px);
+    .formContent-formList {
+        display: flex;
+        justify-content: space-between;
+    }
+    .block-title {
+        width: 200px;
+        height: 80px;
+        background: #ffffff;
+        border-radius: 2px;
+        border: 1px solid #e0e1e3;
+        position: relative;
+        .floor {
+            margin: 16px 0 0 0;
+            // text-align: center;
+            font-weight: 600;
+            font-size: 16px;
+        }
+        .remove {
+            color: $mainBgColor;
+            font-size: 12px;
+            cursor: pointer;
+        }
+        .list-title {
+            margin-left: 20px;
+            position: relative;
+            z-index: 2;
+            // white-space: nowrap;
+        }
+
+        img {
+            &.bg-img {
+                position: absolute;
+                right: 0;
+                top: 0;
+                width: 100px;
+            }
+            &.bg-imgIoc {
+                position: absolute;
+                right: 20px;
+                top: 28px;
+                width: 24px;
+            }
+        }
+    }
+    .addHouse {
+        margin-bottom: 25px;
+    }
+    .add-block {
+        width: 80px;
+        height: 80px;
+        background: #ffffff;
+        border-radius: 2px;
+        border: 1px solid #e0e1e3;
+        position: relative;
+        cursor: pointer;
+        & > img {
+            width: 16px;
+            height: 16px;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
+    }
+    .addCat {
+        & > div {
+            float: left;
+            margin-right: 20px;
+            margin-bottom: 20px;
+        }
+    }
+}
+</style>

operationSupport/src/views/ownerManagement/houselessHolds/index.vue

@@ -0,0 +1,186 @@
+<template>
+  <div class="main">
+    <div class="search">
+      <el-input
+        placeholder="请输入姓名/手机号"
+        class="search-input"
+        clearable
+        v-trim
+        v-model.trim="mixins_query.name"
+      ></el-input>
+      <el-button
+        class="search-btn"
+        type="primary"
+        @click="mixins_search()"
+        :disabled="mixins_onQuery"
+        :loading="mixins_onQuery"
+        icon="el-icon-search"
+      >搜索</el-button>
+      <div class="search-icon">
+        <el-tooltip
+          class="item"
+          effect="light"
+          placement="bottom"
+          content="删除"
+        >
+          <i
+            class="zoniot_font zoniot-icon-shanchu2"
+            @click="deleteRow"
+          ></i>
+        </el-tooltip>
+      </div>
+    </div>
+    <zz-table
+      :cols="cols"
+      :settings="{ showCheckbox: true, showIndex: true, stripe: true }"
+      :data="mixins_list"
+      :loading="mixins_onQuery"
+      :pageset="mixins_pageset"
+      @page-change="pageChange"
+      @selection-change="selectionChange"
+    >
+      <template
+        slot-scope="scope"
+        slot="opt"
+        class="opt"
+      >
+        <div class="opt">
+          <el-tooltip
+            effect="light"
+            placement="bottom"
+            content="编辑"
+          >
+            <i
+              class="zoniot_font zoniot-icon-bianji"
+              @click="addOrEdit(scope.row)"
+            ></i>
+          </el-tooltip>
+          <el-tooltip
+            effect="light"
+            placement="bottom"
+            content="删除"
+          >
+            <i
+              class="zoniot_font zoniot-icon-shanchu redText"
+              @click="deleteOne(scope.row)"
+            ></i>
+          </el-tooltip>
+        </div>
+      </template>
+
+    </zz-table>
+  </div>
+</template>
+
+
+
+<script>
+import list from '@utils/list.js';
+export default {
+  mixins: [list],
+  data () {
+    return {
+      selectRow: [],
+      cols: [
+        {
+          label: '姓名',
+          prop: 'name'
+        }, {
+          label: '手机号',
+          prop: 'phone'
+        }, {
+          label: '注册时间',
+          prop: 'createDate'
+        },
+        {
+          label: '操作',
+          slot: 'opt'
+        }
+      ],
+      mixins_post: 'get'
+    }
+  },
+  methods: {
+
+    deleteOne (row) {
+      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$message({
+          type: 'success',
+          message: '删除成功!'
+        });
+        this.$http.post('/sc-community/scResident/unboundHouse/batchDelete', [row.id]).then(({ data, msg, status }) => {
+          this.mixins_search();
+        }).catch(() => { });
+
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        });
+      });
+      // alert(1)
+      // var res = [];
+      // res.push(row.id)
+    },
+    // 删除
+    deleteRow () {
+      // 获取选中列表的ids
+      let ids = [];
+      if (!this.selectRow.length) {
+        this.$message.error('您尚未选择要删除的记录，请选择后再操作批量删除');
+        return;
+      }
+      this.selectRow.forEach((v) => {
+        ids.push(v.id);
+      });
+      this.$msgBox(`删除`, '删除后将无法恢复，请问是否继续?')
+        .then((_) => {
+          this.$http.post('/sc-community/scResident/unboundHouse/batchDelete', ids).then(({ status, data, msg }) => {
+            if (0 === status) {
+              this.$message({
+                type: 'success',
+                message: '删除成功!'
+              });
+              this.mixins_search();
+            }
+          });
+        })
+        .catch(() => { });
+    },
+    selectionChange (val) {
+      this.selectRow = val;
+    },
+
+
+    addOrEdit (row) {
+      new Promise((resolve) => {
+        this.$store.dispatch('addPopup', {
+          url: '/ownerManagement/houselessHolds/add.vue',
+          width: '650px',
+          height: '500px',
+          props: {
+
+            // data,
+            row: row,
+            callback: resolve,
+            // arrData: this.findUser
+          },
+          title: '绑定房产'
+        });
+      }).then(() => {
+        this.mixins_search();
+      });
+    },
+  },
+  created () {
+    this.mixins_dataUrl = '/sc-community/scResident/unboundHouse/page';
+    this.mixins_query = {};
+    this.mixins_search();
+  }
+}
+
+</script>

operationSupport/src/views/ownerManagement/houselessHolds/poptreeSelect.vue

@@ -0,0 +1,116 @@
+<template>
+  <div>
+    <el-scrollbar
+      class="el-scrollbar-byself"
+      style="width: 100%"
+    >
+      <el-tree
+        :data="tenantsTree"
+        show-checkbox
+        node-key="value"
+        :props="treedefaultProps"
+        :default-checked-keys="defaultcheckedkeys"
+        ref="tenantstree"
+        @check-change="checkChange"
+      >
+        <div
+          style="width: 100%"
+          slot-scope="{ node, data }"
+          @click="thisCheck($event, node, data)"
+        >{{ data.name }}</div>
+      </el-tree>
+    </el-scrollbar>
+  </div>
+</template>
+
+
+<script>
+export default {
+  props: ['params'],
+  data () {
+    return {
+      tenantsTree: [],
+      treedefaultProps: {
+        children: 'children',
+        label: 'name'
+      },
+      defaultcheckedkeys: []
+    };
+  },
+  computed: {},
+  mounted () {
+    console.log(this.$refs.tenantstree.$children);
+  },
+  methods: {
+    submit () {
+      let arrs = this.$refs.tenantstree.getCheckedNodes();
+      let combination = [];
+      arrs.forEach((item, index) => {
+        let thisValue = this.$refs.tenantstree.getNode(item);
+        let newValueIds = thisValue.data.id.split('-');
+        let objArray = {};
+        if (
+          (item.children == null || item.children == undefined) &&
+          !this.defaultcheckedkeys.includes(parseInt(thisValue.data.value))
+        ) {
+          if (thisValue.data.type === 'room') {
+            objArray = {
+              houseId: thisValue.data.value,
+              buildingName: newValueIds.length === 4 ? thisValue.parent.parent.data.name : thisValue.parent.data.name,
+              unitName: newValueIds.length === 4 ? thisValue.parent.data.name : '',
+              roomNumber: thisValue.data.name
+            };
+          } else if (thisValue.data.type === 'parking') {
+            objArray = {
+              parkingId: thisValue.data.value,
+              parkingNumber: thisValue.data.name,
+              partitionName: newValueIds.length === 4 ? thisValue.parent.data.name : '',
+              garageName: newValueIds.length === 4 ? thisValue.parent.parent.data.name : thisValue.parent.data.name
+            };
+          }
+          combination.push(objArray);
+        }
+      });
+
+      this.params.callback && this.params.callback(combination);
+      this.$emit('close');
+    },
+    checkChange (data, checked) {
+      if (checked) {
+      }
+    },
+    filterTreeData (trData) {
+      trData.map((item, index) => {
+        if (this.isNotEmpty(item.children)) {
+          item.disabled = true;
+          this.filterTreeData(item.children);
+        } else {
+          item.disabled = false;
+        }
+      });
+    },
+    isNotEmpty (arr) {
+      return arr && Array.isArray(arr) && arr.length > 0;
+    },
+    thisCheck (ev, node, data) {
+      if (!data.disabled) {
+        node.checked = !node.checked;
+      }
+    }
+  },
+  created () {
+    if (this.params.list.length !== 0) {
+      this.params.list.forEach((item, index) => {
+        if (this.params.num === 1) {
+          this.defaultcheckedkeys.push(item.houseId);
+        } else {
+          this.defaultcheckedkeys.push(item.parkingId);
+        }
+      });
+    }
+
+    this.filterTreeData(this.params.tenantsTree);
+    this.tenantsTree = this.params.tenantsTree;
+  }
+};
+</script>