SmartCommunity/smart/src/views/vehicleInformation/index.vue

<!-- 车辆信息 -->
<template>
  <div class="main">
    <div class="search">
      <el-input
        placeholder="输入车牌号"
        class="search-input"
        clearable
        v-model="mixins_query.plateNo"
      ></el-input>
      <el-select
        placeholder="停车场名称"
        clearable
        v-model="mixins_query.parkId"
      >
        <el-option
          v-for="(item,index) in nameParkingLot"
          :key="index"
          :value="item.label"
          :label="item.name"
          @click.native="parkingLot(item.name)"
        ></el-option>
      </el-select>
      <el-select
        placeholder="状态"
        clearable
      >
        <el-option
          label="正常"
          :value="1"
        ></el-option>
        <el-option
          label="已过期"
          :value="2"
        ></el-option>
      </el-select>
      <el-button
        type="primary"
        class="search-btn"
        @click="mixins_search"
        icon="el-icon-search"
      >查询</el-button>
      <div class="search-icon">
        <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: 'FACILITY' }"
                >
                  <span
                    class="upload_text"
                    slot="content"
                  >批量添加</span>
                </xk-upload>
              </div>
            </el-dropdown-item>
            <el-dropdown-item command="template">下载模板</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <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
      :cols="cols"
      :settings="{ showCheckbox: false, showIndex: true, stripe: true }"
      :data="mixins_list"
      :pageset="mixins_pageset"
      @page-change="pageChange"
      @selection-change="selectionChange"
    >

      <template
        slot-scope="scope"
        slot="opt"
      >
        <div class="opt">
          <el-tooltip
            class="item"
            effect="light"
            placement="bottom"
            content="充值"
          >
            <i
              class="zoniot_font zoniot-icon-shoukuan"
              @click="collections(scope.row)"
            ></i>
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="light"
            placement="bottom"
            content="编辑"
          >
            <i
              class="zoniot_font zoniot-icon-bianji"
              @click="add( 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 index from './index';
import list from '@utils/list';
export default {
  mixins: [index, list],
  data () {
    return {
      mixins_post: 'post',
      nameParkingLot: [],
      parkName: '',
    }
  },
  methods: {
    // 删除
    deleteOne (row) {
      debugger
      // cardId
      // parkId
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        this.$http.get('/sc-community-web/parkingCar/deleteVehicleInfor', { id: row.cardId, parkId: row.parkId }).then(({ data, msg, status }) => {
          this.mixins_search();
        }).catch(() => { });

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    add (row) {
      console.log(row.cardId);
      this.details(row.cardId);
    },
    parkingLot (name) {
      this.parkName = name;
    },
    addCommand (command) {
      if (command === 'add') {
        // this.addOrEdit('add');
        this.details();
      }
      if (command === 'template') {
        // this.__exportExcel('/sc-community/excel/download/template', { importType: 'FACILITY' });
        this.__exportExcel('/sc-community-web/parkingCar/getCarInfoExcel');
        return;
      }
    },
    exportExcel () {
      this.__exportExcel('/sc-community-web/parkingCar/getCarInfoExcel');
    },
    details (row) {
      // 添加
      new Promise((resolve) => {
        this.$store.dispatch('addPopup', {
          url: '/vehicleInformation/setpPage/details.vue',
          width: '900px',
          height: '861px',
          props: {
            cardId: row,
            callback: resolve
          },
          // showConfirmButton: true,
          // showCancelButton: true,
          hideStar: true,
          title: '新增内部车'
        });
      }).then(() => {
        this.mixins_search();
      });



      // 充值
      // new Promise((resolve) => {
      //   this.$store.dispatch('addPopup', {
      //     url: '/vehicleInformation/setpPage/recharge.vue',
      //     width: '511px',
      //     height: '683px',
      //     props: {
      //       // id: row.id,
      //       // callback: resolve
      //       callback: resolve,
      //     },
      //     // showConfirmButton: true,
      //     // showCancelButton: true,
      //     hideStar: true,
      //     title: '充值操作'
      //   });
      // }).then(() => {
      //   this.mixins_search();
      // });
    },
    // 充值
    collections (row) {
      // 充值
      debugger
      new Promise((resolve) => {
        this.$store.dispatch('addPopup', {
          url: '/vehicleInformation/setpPage/recharge.vue',
          width: '511px',
          height: '683px',
          props: {
            // id: row.id,
            // callback: resolve
            userName: row.userName,
            cardType: row.cardType,
            parkId: row.parkId,
            cardId: row.cardId,
            callback: resolve,
          },
          // showConfirmButton: true,
          // showCancelButton: true,
          hideStar: true,
          title: '充值操作'
        });
      }).then(() => {
        this.mixins_search();
      });
    },
    // 获取停车场名称
    nameParking () {
      this.$http.post('/sc-community-web/parkingCar/findParkInfo', { pageNum: this.mixins_pageset.pageIndex, pageSize: this.mixins_pageset.pageSize }).then(({ data, status, msg }) => {
        console.log(data.list);
        for (let i = 0; i < data.list.length; i++) {
          this.nameParkingLot.push({
            name: data.list[i].garageName,
            label: data.list[i].parkId
          })
        }
      })
    },
  },
  created () {
    this.mixins_dataUrl = '/sc-community-web/parkingCar/queryCars';
    this.mixins_query = {};
    this.mixins_search();
    this.nameParking();
  }
}
</script>