CZC/operationSupport/src/views/buildingManagement/index.vue

<template>
  <div class="main">
    <div
      class="search"
      v-if="!ownerStatus"
    >
      <el-input
        v-model="mixins_query.buildingName"
        clearable
        placeholder="请输入楼栋名称"
        class="search-input"
      ></el-input>
      <el-select
        v-model="mixins_query.communityId"
        clearable
        placeholder="请选择社区名称"
      >
        <el-option
          v-for="(item, index) in communityList"
          :label="item.label"
          :value="item.id"
          :key="index"
        ></el-option>
      </el-select>
      <el-button
        type="primary"
        @click="mixins_search"
        class="search-btn"
        icon="el-icon-search"
      >查询</el-button>

      <div class="search-icon">
        <el-dropdown
          type="primary"
          @command="addCommand"
        >
          <span class="iconfont">&#xe641;</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: 'BUILDING' }"
                >
                  <span slot="content">批量添加</span>
                </xk-upload>
              </div>
            </el-dropdown-item>
            <el-dropdown-item command="addTemplate">下载模板</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <!-- <el-tooltip
          class="item"
          effect="light"
          placement="bottom"
          content="新增"
        >
          <i
            class="zoniot_font zoniot-icon-tianjia2"
            @click="addOrEdit('add')"
          ></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>
    <div
      class="dictionarys-wrap"
      v-if="!ownerStatus"
    >
      <zz-table
        :cols="cols"
        :settings="{ showIndex: true, stripe: true }"
        :loading="mixins_onQuery"
        :data="mixins_list"
        :pageset="mixins_pageset"
        @page-change="pageChange"
      >
        <template
          slot-scope="scope"
          slot="opt"
        >
          <div class="opt">
            <el-tooltip
              effect="light"
              placement="bottom"
              content="编辑"
            >
              <i
                class="zoniot_font zoniot-icon-bianji"
                @click="addOrEdit('edit', scope.row)"
              ></i>
            </el-tooltip>
            <el-tooltip
              effect="light"
              placement="bottom"
              content="删除"
            >
              <i
                class="zoniot_font zoniot-icon-shanchu redText"
                @click="deleteOne(scope.row.id)"
              ></i>
            </el-tooltip>
          </div>
        </template>
      </zz-table>
    </div>
    <addplan
      v-else
      :params="activeData"
      :todoRow="todoRow"
      @clerOwnerStatus="clerOwnerStatus"
      :isAdd="isAdd"
    ></addplan>
  </div>
</template>

<script>
import list from '@utils/list.js';
import addplan from './pageJump/addoredit.vue';
export default {
  mixins: [list],
  components: { addplan },
  name: 'buildingManagement',
  data () {
    return {
      ownerStatus: '',
      activeData: {},
      c: '',
      isAdd: true,
      communityList: [], //社区名称下拉列表
      query: {
        buildingName: '', //楼栋名称
        communityName: '' //社区名称
      },
      cols: [
        {
          label: '所属社区',
          prop: 'communityName'
        },
        {
          label: '楼栋名称',
          prop: 'buildingName'
        },
        {
          label: '单元数',
          prop: 'unitNumber',
          format (val) {
            if (val == 0) {
              return '-'
            } else {
              return val
            }
          }

        },
        {
          label: '楼栋类型',
          prop: 'buildingTypeDict'
        },
        {
          label: '建筑结构',
          prop: 'buildingStructureDict'
        },
        {
          label: '楼层',
          prop: 'floorsNumber'
        },
        {
          label: '楼栋用途',
          prop: 'buildingPurposeDict'
        },
        {
          label: '建成日期',
          prop: 'builtDate'
        },
        {
          label: '验收日期',
          prop: 'acceptanceDate'
        },
        {
          label: '建筑面积',
          prop: 'buildingArea'
        },
        {
          label: '使用面积',
          prop: 'useArea'
        },
        {
          label: '操作',
          prop: 'opt',
          slot: 'opt'
        }
      ]
    };
  },
  methods: {
    clerOwnerStatus () {
      this.ownerStatus = '';
      this.activeData = {};
      this.isAdd = true;
      this.mixins_search();
    },
    //获取社区名称下拉列表
    communityNameList () {
      this.communityList = [];
      let onOption = '';
      this.$http.get('/czc-community/assets/community/list', {}).then((res) => {
        res.data.map((res) => {
          onOption = {
            label: res.communityName,
            id: res.id
          };

          this.communityList.push(onOption);
        });
        this.$store.commit('setCommunityArray', res.data);
      });
    },
    addCommand (command) {
      if (command === 'add') {
        this.todoRow = command;
        this.addOrEdit('add');
      }
      if (command == 'addTemplate') {
        this.__exportExcel('/czc-community/excel/download/template', { importType: 'BUILDING' });
        return
      }
    },

    addOrEdit (todo, row) {
      if (todo == 'edit') {
        this.activeData = row;
        this.todoRow = todo;
        this.isAdd = false;
      }
      this.ownerStatus = todo;
    },

    exportExcel () {
      this.__exportExcel('/czc-community/assets/building/export/excel');
    },

    //单个删除
    deleteOne (ids) {
      this.$msgBox(`刪除`, '删除后将无法恢复，请问是否继续?')
        .then(() => {
          this.$http.get('/czc-community/assets/building/delete', { id: ids }).then(({ status, data, msg }) => {
            if (0 === status) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.mixins_search();
            } else {
              this.$message.error(msg);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    }
  },
  created () {
    this.communityNameList();
    this.mixins_dataUrl = '/czc-community/assets/building/page';
    this.mixins_post = 'post';
    this.mixins_search();
  }
};
</script>

<style lang="scss" scoped></style>