index.vue

<template>
  <list-layout>
    <template slot="filterItem">
      <search-item label="赠送类型">
        <base-data-select
          label="赠送类型"
          v-model="filters.giveType"
        ></base-data-select>
      </search-item>
      <search-item label="会员ID">
        <date-picker v-model="filters.customerId" />
      </search-item>
      <search-item
        label="会员ID"
        size="big"
      >
        <date-range-picker
          v-model="filters.timeRange"
          :noLabel="true"
        />
      </search-item>
      <el-button
        type="primary"
        @click="searchList"
      >查询</el-button>
      <el-button
        type="primary"
        @click="showDialog"
      >操作成功点击</el-button>

      <el-button
        type="primary"
        @click="showInfoDialog"
      >信息点击</el-button>

      <el-button
        type="primary"
        @click="showCheckDialog"
      >确认框点击</el-button>

      <el-button
        type="primary"
        @click="dialogVisible = !dialogVisible"
      >新增点击</el-button>

      <el-button
        type="primary"
        @click="showDialogVisible"
      >用户点击</el-button>

      <search-item label="会员ID">
        <date-picker v-model="filters.customerId" />
      </search-item>

      <search-item label="运营商">
        <operator-select v-model="filters.operatorId" />
      </search-item>

      <el-button
        type="primary"
        @click="fetchTest"
      >请求</el-button>
    </template>

    <!-- <div class="posBox"></div> -->

    <!-- <div>{{getOptionsName('赠送类型' ,'01')}}</div> -->

    <!-- <normal-dialog :visible.sync="dialogVisible" :before-close="closeHandle">
      <template slot="title">
        <img src="@/assets/images/dialog/add_icon.png" /> 新增
      </template>
      <form-area title="基本信息">
        <form-line>
          <form-item label="姓名" size="big"> <el-input></el-input> </form-item>
          <form-item label="性别"> <el-input></el-input> </form-item>
        </form-line>
        <form-line>
          <form-item label="会员类型" size="big"></form-item>
          <form-item label="所属区域">
            <area-select v-model="filters.areaId" size="big" :noLabel="true" />
          </form-item>
        </form-line>
      </form-area>
      <div slot="footer">
        <el-button type="primary">确定</el-button>
        <el-button>取消</el-button>
      </div>
    </normal-dialog> -->
    <md-table :data="listData">
      <md-table-column
        type="index"
        label="序号"
        align="center"
        min-width="55"
        width="55"
      />
      <md-table-column
        label="姓名"
        align="center"
        min-width="100"
        prop="name"
      />
    </md-table>
    <ImageUploader v-model="imgUrl" />
    {{imgUrl}}
    <template slot="footer">
      <div class="footer-info">总共123123条 共234234元</div>
      <md-pagination
        :pagination="pagination"
        :changePage="changePage"
        :changeSizeHandle="changeSizeHandle"
      />
    </template>
  </list-layout>
</template>

<script>
import { mapActions, mapGetters } from 'vuex';
import ListMixin from '@/mixins/listPage.js';
import headImg from '@/assets/images/demo/head_icon.png';
import ImageUploader from '../../components/input/ImageUploader/index.js';

export default {
  name: 'tab',
  mixins: [ListMixin],
  components: { ImageUploader },
  data() {
    return {
      imgUrl: '',
      listData: [{ name: '111' }, { name: '222' }],
      filters: {
        areaId: null,
        giveType: '',
        dateTime: null,
      },
      selected: {
        id: null,
      },
      userInfo: {
        areaId: 0,
        areaName: '大苏打发生的更改',
        createAt: '2018-12-17T07:58:42.218Z',
        customerHead: headImg,
        customerName: '张三',
        customerPhone: '18108096066',
        customerSex: '男',
        customerType: '1',
        id: 1535156,
        isFirstRecharge: 0,
        state: '1',
      },
      dialogVisible: false,
      userDialogVisible: false,
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 88815,
      },
      props: {
        label: 'campusName',
        value: 'id',
        children: 'children',
      },

      index: 1,
      options: [],
    };
  },
  computed: {
    campusSelectList() {
      return this.campusList.map(item => ({
        label: item.campusName,
        value: item.id,
        children: [],
      }));
    },
    cabinetSelectList() {
      return this.cabinetList.map(item => ({
        label: item.cabinetLocation,
        value: item.cabinetId,
        children: [],
      }));
    },
    latticeSelectList() {
      return this.latticeList.map(item => ({
        label: item.location,
        value: item.id,
      }));
    },
  },

  methods: {
    searchList() {
      console.log(this.filters.giveType);
    },
    closeEmitHandle(a, b, c) {
      console.log(a, b, c);
    },
    closeHandle(done) {
      done();
    },
    showDialogVisible() {
      this.selected.id = Math.random() > 0.5 ? 12 : 11;
      console.log(this.selected.id);
      this.userDialogVisible = !this.userDialogVisible;
    },
    fetchTest() {
      // fetchAreaList({
      //   params: {
      //     areaId: 0,
      //     customerCellphone: 'string',
      //   },
      //   data: {
      //     areaId: 0,
      //     customerCellphone: 'string',
      //     customerName: 'string',
      //     endTime: '2018-12-14T01:29:46.450Z',
      //     equipmentNum: 'string',
      //     equipmentPosition: 'string',
      //     pageNum: 0,
      //     pageSize: 0,
      //     serviceId: 0,
      //     startTime: '2018-12-14T01:29:46.450Z',
      //   },
      // });
    },
    showDialog() {
      console.log('show');
      // this.$alert('asd').then(result => {
      //   console.log(result);
      // });
      this.$mdAlert.success('dasd');
    },
    showcheck() {
      this.$mdAlert.info('内层弹窗');
    },
    showInfoDialog() {
      this.$mdAlert.info('dasd');
    },
    showCheckDialog() {
      this.$mdAlert.confirm(
        <div class="im">
          adsasd<i class="ImportentText"> 51</i>sss
        </div>
      );
    },
    ...mapActions('listData1', ['updatePagination']),
    getChange(val) {
      console.log(val);
    },
    handleChange(val) {
      if (val.length === 1) {
        let campusValue = val[0];
        console.log(campusValue);
        this.$store
          .dispatch('fetchCabinetList', { campusId: campusValue })
          .then(res => {
            this.campusSelectList.find(
              item => item.value == campusValue
            ).children = this.cabinetSelectList;
          });
      } else if (val.length === 2) {
        let campusValue = val[0];
        let cabinetValue = val[1];
        this.$store
          .dispatch('fetchLatticeList', {
            campusId: campusValue,
            cabinetId: cabinetValue,
          })
          .then(res => {
            this.cabinetSelectList.find(
              item => item.value == cabinetValue
            ).children = this.latticeSelectList;
          });
      }
    },
    onSubmit() {
      this.$message.success('提交成功！');
    },
    add() {
      this.index += 1;
      this.$store.dispatch('listData1/updatePagination', {
        pageNum: this.index,
      });
      // this.updatePagination({pageNum: this.index})
    },
    getCompus() {
      this.$store.dispatch('fetchCampusList');
    },
    ret() {
      this.$store.dispatch('resetLatticeCabinet');
    },
  },
};
</script>

<style>
.posBox {
  width: 100px;
  height: 100px;
  background-color: bisque;
  position: relative;
  top: 0;
  left: -20px;
  z-index: 2000;
}
.line {
  text-align: center;
}

.from-box {
  width: 800px;
}
.table-card {
  display: flex;
  flex-wrap: wrap;
}
</style>