SmartCommunity/smart/src/views/parkingSpaceManagement/parkingSpaceList.vue

<template>
  <div class="main">
    <div class="search">
      <el-input
        placeholder="车位号"
        class="search-input"
        clearable
        v-model="mixins_query.parkingNumber"
      ></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"
          @change="communityChoice"
          :key="index"
        ></el-option>
      </el-select>
      <el-select
        v-model="mixins_query.garageId"
        clearable
        placeholder="请选择车库名称"
      >
        <el-option
          v-for="(item, index) in garageList"
          :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-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-shanchu2"
            @click="deleteRow"
          ></i>
        </el-tooltip> -->
      </div>
    </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('edit', scope)"
              ></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>
  </div>
</template>

<script>
import list from '@utils/list.js';
export default {
  mixins: [list],
  data () {
    return {
      communityList: [], //社区名称下拉列表
      garageList: [], //车库名称下拉列表
      cols: [
        {
          label: '所属社区',
          prop: 'communityName'
        },
        {
          label: '车库名称',
          prop: 'garageName'
        },
        {
          label: '车库区域',
          prop: 'garageAreaName'
        },
        {
          label: '车位号',
          prop: 'parkingNumber'
        },
        {
          label: '车位类别',
          prop: 'parkingType',
          format (val) {
            if (val == 1) {
              return '公共车位';
            } else {
              return '私人车位';
            }
          }
        },
        {
          label: '车位面积',
          prop: 'parkingArea'
        },
        {
          label: '操作',
          prop: 'opt',
          slot: 'opt'
        }
      ],
      selectRow: [],
      mixins_post: 'post'
    };
  },
  methods: {
    //获取社区名称下拉列表
    communityNameList () {
      this.communityList = [];
      let onOption = '';
      this.$http.get('/sc-community/assets/community/list', {}).then((res) => {
        console.log(res);
        res.data.map((res) => {
          onOption = {
            label: res.communityName,
            id: res.id
          };
          this.communityList.push(onOption);
        });
      });
    },
    communityChoice (e) {
      this.garageNameList();
    },
    //获取车库名称下拉列表
    garageNameList () {
      this.garageList = [];
      let onOption = '';
      this.$http.post('/sc-community/assets/garage/list', {}).then((res) => {
        res.data.map((res) => {
          onOption = {
            label: res.garageName,
            id: res.id
          };
          this.garageList.push(onOption);
        });
      });
    },
    addOrEdit (todo, scope) {
      let self = this;
      new Promise((resolve) => {
        let row,
          title = '编辑车位';
        if ('add' == todo) {
          title = '新增车位';
          this.addEditPopUps(title, row, todo);
        } else {
          this.$http.get('/sc-community/assets/garage/parking/find/' + scope.row.id, {}).then((res) => {
            // sessionStorage.setItem('communityInformation',JSON.stringify(data))
            row = res.data;
            this.addEditPopUps(title, row, todo);
          });
        }
      }).then(() => {
        this.mixins_search();
      });
    },
    addEditPopUps (title, row, todo) {
      this.$store.dispatch('addPopup', {
        url: '/parkingSpaceManagement/pageJump/parkingLotSaveEdits.vue',
        title: title,
        width: '850px',
        height: '470px',
        props: {
          data: row,
          todo: todo,
          callback: this.mixins_search
        }
      });
    },
    //单个删除
    deleteOne (id) {
      this.$msgBox(`删除`, '删除后将无法恢复，请问是否继续?')
        .then((_) => {
          this.$http.post('/sc-community/assets/garage/parking/delete', [id]).then(({ status, data, msg }) => {
            if (0 === status) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.mixins_search();
            }
          });
        })
        .catch(() => { });
    },
    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/assets/garage/parking/delete', ids).then(({ status, data, msg }) => {
            if (0 === status) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.mixins_search();
            }
          });
        })
        .catch(() => { });
    },
    selectionChange (val) {
      this.selectRow = val;
    }
  },
  mounted () { },
  created () {
    this.communityNameList();
    this.garageNameList();
    this.mixins_dataUrl = '/sc-community/assets/garage/parking/page';
    this.mixins_query = {};
    this.mixins_search();
  }
};
</script>