admin-cms/src/views/adminCenter/export/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="one">
          <el-form ref="searchForm" :model="searchForm" label-width="80px">
            <el-col :span="8">
              <el-form-item label="购买人">
                <el-input v-model="searchForm.buy_name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="审批时间">
                <el-date-picker
                  type="date"
                  placeholder="请选择"
                  v-model="searchForm.examine_time"
                  value-format="yyyy-MM-dd"
                  format="yyyy-MM-dd"
                  style="width: 100%"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="审批状态">
                <el-select v-model="searchForm.status" placeholder="请选择" style="width: 100%">
                  <el-option label="待审中" value="0"></el-option>
                  <el-option label="审核通过" value="1"></el-option>
                  <el-option label="审核未通过" value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24" class="btn">
              <el-button type="primary" size="small" @click="search()">查询</el-button>
              <download-excel :data="selected" :fields="excel_fields.fields" :name="excel_fields.name" style="display: inline; margin: 0 0 0 10px">
                <el-button type="primary" size="mini">批量导出</el-button>
              </download-excel>
            </el-col>
          </el-form>
        </el-col>
        <el-col :span="24" class="two">
          <data-table :fields="fields" :opera="opera" :data="list" :total="total" :select="true" :selected="selected" @handleSelect="handleSelect">
          </data-table>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const { examine_fields } = require('@common/src/layout/deploy/dict');
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: examine } = createNamespacedHelpers('examine');
export default {
  name: 'index',
  props: {},
  components: {},
  data: function () {
    return {
      searchForm: {},
      list: [],
      total: 0,
      fields: [
        { label: '审批单号', prop: 'order_num' },
        { label: '购买人', prop: 'buy_name' },
        { label: '购买总价(元)', prop: 'totalMoney' },
        { label: '审批人', prop: 'personal' },
        { label: '审批时间', prop: 'examine_time' },
        {
          label: '审批结果',
          prop: 'status',
          format: (item) => {
            return item === '0' ? '待审' : item === '1' ? '审核通过' : '审核未通过';
          },
        },
      ],
      excel_fields: examine_fields,
      opera: [],
      selected: [],
    };
  },
  async created() {
    this.search();
  },
  methods: {
    ...examine(['query']),
    async search({ skip = 0, limit = 10, ...info } = {}) {
      let res = await this.query({ skip, limit, ...this.searchForm, ...info });
      if (this.$checkRes(res)) {
        this.$set(this, `list`, res.data);
        this.$set(this, `total`, res.total);
      }
    },
    handleSelect(data) {
      this.$set(this, `selected`, data);
    },
  },

  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  .one {
    margin: 0 0 10px 0;
    .btn {
      text-align: right;
    }
  }
}
</style>