update

src/views/teacher/index.vue

@@ -10,8 +10,11 @@
         </template>
       </template>
       <el-row type="flex" align="middle" justify="end" class="btn_bar">
-        <el-col :span="3" style="text-align:right;padding:0 10px;">
+        <!-- <el-col :span="3" style="text-align:right;padding:0 10px;">
           <el-button type="primary" size="mini" @click="printView()">打印预览</el-button>
+        </el-col> -->
+        <el-col :span="2">
+          <el-button type="primary" size="mini" @click="eDialog = true">导出excel</el-button>
         </el-col>
         <el-col :span="3">
           <el-button size="mini" type="primary" @click="downloadTemplate">下载上传教师评分模板</el-button>
@@ -48,6 +51,44 @@
         </el-col>
       </el-row>
     </el-dialog>
+    <el-dialog title="导出" center :visible.sync="eDialog">
+      <el-card>
+        <template #header>
+          <el-row>
+            <el-col :span="24">选择导出的字段-教师表(点击字段可以更换顺序)</el-col>
+            <el-col :span="24">
+              <span v-for="(i, index) in selectModel" :key="`select-${index}`" style="padding-right:15px;zoom:1.1">
+                <el-link type="primary" v-if="index === selectIndex && index !== 0" icon="el-icon-back" @click="toChangePos(i, -1)"></el-link>
+                <el-link @click="toDisplayPos(index)">{{ i }}</el-link>
+                <el-link
+                  type="primary"
+                  v-if="index === selectIndex && index !== selectModel.length - 1"
+                  icon="el-icon-right"
+                  @click="toChangePos(i, 1)"
+                ></el-link>
+              </span>
+            </el-col>
+          </el-row>
+        </template>
+        <el-checkbox-group v-model="selectModel">
+          <el-row>
+            <el-col :span="4" v-for="(i, index) in models.student" :key="`model-${index}`">
+              <el-checkbox :label="i.zh" style="word-wrap: break-word">{{ i.zh }}</el-checkbox>
+            </el-col>
+          </el-row>
+        </el-checkbox-group>
+      </el-card>
+      <template #footer>
+        <el-row type="flex" justify="space-around" :gutter="10" align="middle">
+          <el-col :span="4">
+            <el-button type="primary" size="small" @click="toExportExcel">导出</el-button>
+          </el-col>
+          <el-col :span="4">
+            <el-button size="small" @click="eDialog = false">取消</el-button>
+          </el-col>
+        </el-row>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -58,6 +99,7 @@ import dataTable from '@frame/components/data-table';
 import dataForm from '@frame/components/form';
 import { createNamespacedHelpers } from 'vuex';
 const { mapActions } = createNamespacedHelpers('teacher');
+const { mapActions: util } = createNamespacedHelpers('util');
 export default {
   name: 'index',
   props: {},
@@ -175,6 +217,10 @@ export default {
         },
       },
     ],
+    eDialog: false,
+    models: {},
+    selectModel: [],
+    selectIndex: '',
   }),
   created() {
     this.$set(this, `fields`, this.columns);
@@ -184,10 +230,12 @@ export default {
       this.columns.map(i => i.prop)
     );
     this.search();
+    this.toFindModel();
   },
   computed: {},
   methods: {
-    ...mapActions(['query', 'delete', 'scoreImport', 'status', 'create']),
+    ...util(['findModel']),
+    ...mapActions(['query', 'delete', 'scoreImport', 'status', 'create', 'toExport']),
     async search({ skip = 0, limit = 10, ...info } = {}) {
       const res = await this.query({ skip, limit, ...info });
       if (this.$checkRes(res)) {
@@ -256,6 +304,58 @@ export default {
       this.$set(this, `fields`, r);
       this.columnDialog = false;
     },
+    // 导出部分
+    async toFindModel() {
+      const res = await this.findModel('teacher');
+      if (this.$checkRes(res)) {
+        const { data } = res;
+        if (!(data && _.isObject(data))) return;
+        const keys = Object.keys(data);
+        let obj = {};
+        const arr = [];
+        for (const key of keys) {
+          const o = data[key];
+          const { zh } = o;
+          if (zh) {
+            const ao = { zh };
+            ao['model'] = key;
+            arr.push(ao);
+          }
+        }
+        obj['student'] = arr;
+        this.$set(this, `models`, obj);
+      }
+    },
+    // 显示已经选择的字段的移动位置按钮
+    toDisplayPos(index) {
+      this.selectIndex = index;
+    },
+    // 移动位置,
+    toChangePos(data, num) {
+      const dup = _.cloneDeep(this.selectModel);
+      // 当前元素位置
+      const di = dup.findIndex(f => f == data);
+      // 要交换的元素位置及数据
+      const ci = di + num;
+      const c = dup[ci];
+      // 交换
+      dup[ci] = data;
+      dup[di] = c;
+      this.$set(this, `selectModel`, dup);
+      // 将目标也跟随过去
+      this.toDisplayPos(ci);
+    },
+    async toExportExcel() {
+      let model = this.selectModel.map(i => {
+        const om = this.models.student.find(f => f.zh == i);
+        if (om) return om;
+      });
+      model = _.compact(model);
+      const msg = this.$message({ duration: 0, message: '正在导出,请稍后...' });
+      const res = await this.toExport({ model });
+      msg.close();
+      this.$checkRes(res, '任务已执行,请在 "菜单 - 待办事项" 中查看执行进度');
+    },
   },
 };
 </script>