CZC/operationSupport/src/views/ownerManagement/landlordManagement/index.vue

<template>
  <div class="content main">
    <organ-tree
      @organId="currentOrganId"
      v-if="!ownerStatus"
      :buildingType="1"
    ></organ-tree>

    <div
      class="content-right"
      v-if="!ownerStatus"
    >
      <div class="search">
        <el-input
          clearable
          placeholder="输入房东姓名或手机号"
          class="search-input"
          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">
          <template>
            <el-dropdown
              type="primary"
              @command="addCommand"
            >
              <span class="zoniot_font zoniot-icon-tianjia2"></span>
              <el-dropdown-menu
                slot="dropdown"
                hide-on-click="false"
                class="device-search-dropdown"
              >
                <el-dropdown-item command="add">单个添加</el-dropdown-item>
                <el-dropdown-item command="batchAdd">
                  <div class="upload_div">
                    <xk-upload
                      class="upload_class"
                      @callback="mixins_search"
                      :params="{ importType: 'LANDLORD' }"
                    >
                      <span slot="content">批量添加</span>
                    </xk-upload>
                  </div>
                </el-dropdown-item>
                <el-dropdown-item command="template">下载模板</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
          <el-tooltip
            class="item"
            effect="light"
            placement="bottom"
            content="删除"
          >
            <i
              class="zoniot_font zoniot-icon-shanchu2"
              @click="deluserbyidsFn"
            ></i>
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="light"
            placement="bottom"
            content="导出"
          >
            <i
              class="zoniot_font zoniot-icon-daochu2"
              @click="exportExcel"
            ></i>
          </el-tooltip>
        </div>
      </div>

      <zz-table
        :settings="{ showCheckbox: true, showIndex: true, stripe: true }"
        :cols="cols"
        :loading="mixins_onQuery"
        :data="mixins_list"
        :pageset="mixins_pageset"
        @page-change="pageChange"
        @selection-change="selectionChange"
      >
        <template
          slot-scope="scope"
          slot="communityName"
        >

          <!-- <span>{{scope.row.houseList}}</span> -->
          <div
            class="table-list"
            v-for="(item, index) in scope.row.buildingList"
            :key="index"
          >{{ item.communityName }}</div>
        </template>

        <template
          slot-scope="scope"
          slot="buildingName"
        >
          <div
            class="table-list"
            v-for="(item, index) in scope.row.buildingList"
            :key="index"
          >{{ item.buildingName }}</div>
        </template>

        <template
          slot-scope="scope"
          slot="houseName"
        >
          <div
            class="table-list"
            v-for="(item, index) in scope.row.buildingList"
            :key="index"
          >{{ item.houseName != null ?  item.houseName : '-'}}</div>
        </template>

        <template
          slot-scope="scope"
          slot="area"
        >
          <div
            class="table-list"
            v-for="(item, index) in scope.row.buildingList"
            :key="index"
          >{{ item.area }}</div>
        </template>

        <template
          slot-scope="scope"
          slot="opt"
        >
          <div class="opt">
            <el-tooltip
              class="item"
              effect="light"
              placement="bottom"
              content="编辑"
            >
              <i
                class="zoniot_font zoniot-icon-bianji"
                @click="addOrEdit('edit', scope.row)"
              ></i>
            </el-tooltip>

            <el-tooltip
              class="item"
              effect="light"
              placement="bottom"
              content="删除"
            >
              <i
                class="zoniot_font zoniot-icon-shanchu redText"
                @click="deleteRow(scope.row)"
              ></i>
            </el-tooltip>
          </div>
        </template>

      </zz-table>

    </div>

    <add-owner
      v-else
      :params="activeData"
      @clerOwnerStatus="clerOwnerStatus"
      :isAdd="isAdd"
    ></add-owner>
  </div>
</template>



<script>
import list from '@/js/list.js';
import addOwner from './stepPage/add.vue'
export default {
  mixins: [list],
  components: { addOwner },
  data () {
    return {
      ownerStatus: '',
      currentId: '',
      activeData: {},
      selectRow: [],
      isAdd: true,
      mixins_query: {
        name: ''
      },
      cols: [
        {
          label: '房东姓名',
          prop: 'name'
        },
        {
          label: '手机号',
          prop: 'phone'
        },
        {
          label: '社区',
          prop: 'communityName',
          slot: 'communityName'
        },
        {
          label: '楼栋',
          prop: 'buildingName',
          slot: 'buildingName'
        },
        {
          label: '房屋',
          prop: 'houseName',
          slot: 'houseName'
        },
        {
          label: '物业计费面积',
          prop: 'area',
          slot: 'area'
        }, {
          label: '操作',
          prop: 'id',
          slot: 'opt',
          width: 130
        }

      ]
    }
  },
  methods: {
    clerOwnerStatus () {
      this.ownerStatus = '';
      this.activeData = '';
      this.isAdd = true;
      this.mixins_search();
    },
    addOrEdit (todo, row) {
      if (todo == 'edit') {

        this.activeData = row.id;
        this.isAdd = false;
      }
      this.ownerStatus = todo;
    },
    currentOrganId (data) {
      this.currentId = data || '';
    },
    addCommand (command) {
      if (command === 'add') {
        this.addOrEdit('add');
        // alert(command)
        return;
      }
      if (command === 'template') {
        this.__exportExcel('/czc-community/landlord/downTemplate', { importType: 'LANDLORD' });
        return;
      }
    },
    getNationArray (type) {
      this.$http.postForm('/czc-community/scResident/option', { type: type }).then(({ status, data, msg }) => {
        if (status === 0 && data) {
          if (type == 'nation') {
            this.$store.commit('setNationArray', data);
          } else if (type == 'native') {
            this.$store.commit('setNativeArray', data);
          }
        }
      });
    },



    selectionChange (val) {
      this.selectRow = val;
    },
    deluserbyidsFn () {
      let ids = [];
      if (!this.selectRow.length) {
        this.$message.error('您尚未选择要删除的记录，请选择后再操作批量删除');
        return;
      }
      this.selectRow.forEach((v) => {
        ids.push(v.id);
      });
      this.$msgBox(`删除`, '删除后将无法恢复，请问是否继续?')
        .then(() => {
          this.$http.post('/czc-community/landlord/batchDelete', ids).then(({ status, data, msg }) => {
            if (0 === status) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.mixins_search();
            }
          });
        })
        .catch(() => { });
    },
    exportExcel () {
      this.__exportExcel('/czc-community/landlord/getDataExcel', this.mixins_query);
    },
    deleteRow (row) {
      const { name } = row;
      let title = `您确定要删除住户“${name}”`;
      this.$msgBox(title)
        .then(() => {
          this.$http
            .postForm('/czc-community/landlord/delete', { id: row.id })
            .then(({ status, msg }) => {
              this.$delete(row, 'onDelete');
              if (0 === status) {
                this.$message.success(msg);
                this.mixins_search('del');
              } else {
                this.$message.error(msg);
              }
            })
            .catch(() => {
              this.$delete(row, 'onDelete');
            });
        })
        .catch(() => { });
    },
  },
  created () {
    if (this.$store.getters['getNationArray'].length === 0) {
      this.getNationArray('nation');
    }
    if (this.$store.getters['getNativeArray'].length === 0) {
      this.getNationArray('native');
    }


    this.mix_path = ''; // 权限
    this.mixins_dataUrl = '/czc-community/landlord/page'; // 分页查询接口
    this.mixins_query = {
      questParams: ''
    };
    this.mixins_search('search');
  },
  watch: {
    currentId (newValue, oldValue) {
      this.mixins_query.communityId = '';
      this.mixins_query.buildingId = '';
      this.mixins_query.unitName = '';
      this.mixins_query.roomNumber = '';
      if (newValue.type) {
        let newValueIds = newValue.id.split('-');
        if (newValue.type === 'community') {
          this.mixins_query.communityId = newValueIds[0];
        } else if (newValue.type === 'building') {
          this.mixins_query.buildingId = newValueIds[1];
        } else if (newValue.type === 'unit') {
          this.mixins_query.buildingId = newValueIds[1];
          this.mixins_query.unitName = newValueIds[2];
        } else if (newValue.type === 'room') {
          this.mixins_query.buildingId = newValueIds[1];
          this.mixins_query.roomNumber = newValueIds[newValueIds.length - 1];
        }
      }
      this.thisLeftData = newValue;
      this.mixins_search();
    }
  },
}
</script>