1

package.json

@@ -22,6 +22,7 @@
     "naf-core": "^0.1.2",
     "vue": "^2.6.11",
     "vue-i18n": "^8.24.4",
+    "vue-json-excel": "^0.3.0",
     "vue-meta": "^2.4.0",
     "vue-router": "^3.2.0",
     "vuex": "^3.4.0",

src/main.js

@@ -15,6 +15,9 @@ import '@/plugins/components';
 import '@common/src/assets/icon/iconfont.css';
 import Print from '@/util/print';
 Vue.use(Print);
+// 导数据
+import JsonExcel from 'vue-json-excel';
+Vue.component('downloadExcel', JsonExcel);
 // 管理中心页面效果布局所需插件
 import ElementUI from 'element-ui';
 import VueI18n from 'vue-i18n';

src/router/index.js

@@ -36,6 +36,11 @@ const web = [
         meta: { title: '审批单' },
         component: () => import('../views/adminCenter/examine/index.vue'),
       },
+      {
+        path: '/adminCenter/export/index',
+        meta: { title: '数据导出' },
+        component: () => import('../views/adminCenter/export/index.vue'),
+      },
     ],
   },
 ];

src/views/adminCenter/export/index.vue

@@ -0,0 +1,124 @@
+<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>

vue.config.js

@@ -23,7 +23,7 @@ module.exports = {
         target: 'http://broadcast.waityou24.cn',
       },
       '/api': {
-        target: 'http://broadcast.kqyjy.com',
+        target: 'http://broadcast.waityou24.cn',
         changeOrigin: true,
         ws: false,
       },