盲票导入导出

src/api/business/ticket.js

@@ -26,4 +26,13 @@ export function urlschemaGeneratee(data) {
     method: 'post',
     data
   })
-}
+}
+
+// 盲票组导出
+export function exportTicket(data) {
+  return request({
+    url: '/api/v1/mp/admin/ticket/box/export',
+    method: 'post',
+    data
+  })
+}

src/views/business/ticket/import.vue

@@ -0,0 +1,204 @@
+<template>
+ <el-dialog
+    :title="title"
+    :visible.sync="dialogVisible"
+    width="400px"
+    :append-to-body="true"
+    :before-close="close"
+    :destroy-on-close="true"
+    :close-on-click-modal="false">
+     <el-upload
+       ref="upload"
+       :limit="1"
+       accept=".xlsx, .xls"
+       :headers="upload.headers"
+       :action="upload.url"
+       :disabled="upload.isUploading"
+       :on-progress="handleFileUploadProgress"
+       :on-success="handleFileSuccess"
+       :auto-upload="false"
+       drag
+     >
+       <i class="el-icon-upload"></i>
+       <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+       <div class="el-upload__tip text-center" slot="tip">
+         <div class="el-upload__tip" slot="tip">
+           <!-- <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据 -->
+         </div>
+         <span>仅允许导入xls、xlsx格式文件。</span>
+         <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
+       </div>
+     </el-upload>
+     <div slot="footer" class="dialog-footer">
+       <el-button @click="close">取 消</el-button>
+       <el-button type="primary" @click="submitFileForm">确 定</el-button>
+     </div>
+ </el-dialog>
+</template>
+<script>
+
+import { mapGetters } from 'vuex'
+import { getToken } from "@/utils/auth";
+export default {
+  props: {
+    dialogVisible: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  data() {
+    return {
+      loading: false,
+      // 表单参数
+      form: {},
+      detail: {},
+      // 盲票导入参数
+      upload: {
+        // 是否显示弹出层（盲票导入）
+        open: false,
+        // 弹出层标题（盲票导入）
+        title: "",
+        // 是否禁用上传
+        isUploading: false,
+        // 设置上传的请求头部
+        headers: { Authorization: "Bearer " + getToken() },
+        // 上传的地址
+        url: process.env.VUE_APP_BASE_API + "/api/v1/mp/admin/ticket/box/importTicket"
+      },
+    }
+  },
+
+  computed: {
+    ...mapGetters(['userInfo']),
+    title() {
+      return '盲票导入'
+    }
+  },
+
+  created() {
+    // 是编辑
+    // if (this.editId) {
+    //    this.getDetail()
+    // }
+  },
+
+  mounted() {
+    document.body.appendChild(this.$el)
+  },
+
+  destroyed() {
+    // if appendToBody is true, remove DOM node after destroy
+    if (this.appendToBody && this.$el && this.$el.parentNode) {
+      this.$el.parentNode.removeChild(this.$el)
+    }
+  },
+
+  methods: {
+
+    /** 下载模板操作 */
+    importTemplate() {
+      importTemplate().then(response => {
+        this.download(response.msg);
+      });
+    },
+    // 文件上传中处理
+    handleFileUploadProgress(event, file, fileList) {
+      this.upload.isUploading = true;
+    },
+    // 文件上传成功处理
+    handleFileSuccess(response, file, fileList) {
+      this.upload.open = false;
+      this.upload.isUploading = false;
+      this.$refs.upload.clearFiles();
+      this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
+      this.getList();
+    },
+    // 提交上传文件
+    submitFileForm() {
+      this.$refs.upload.submit();
+    },
+
+    /**
+     * 关闭窗口
+     */
+    close() {
+      this.$emit('close')
+      this.form = {
+        month:3,
+        packageType:'1'
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.tag{
+  margin-right: 15px;
+  width: 90px;
+  text-align: center;
+  cursor: pointer;
+
+}
+
+.tag-select{
+  background-color: #409eff!important;
+  border-color: #409eff!important;
+  color: #fff!important;
+}
+
+.cover-content-item{
+  width: 220px;
+  float: left;
+  position: relative;
+  .cover-img {
+    width: 200px;
+    height: 100px;
+  }
+  .cover-mark {
+    position: absolute;
+    top: 0px;
+    right: 28px;
+    z-index: 1;
+    color: red;
+    cursor: pointer;
+    visibility: hidden;
+  }
+  .select {
+      visibility: visible!important;
+  }
+}
+
+.dialog-footer{
+  text-align: center;
+}
+
+</style>
+
+<style lang="scss">
+.ygp-form-items {
+   .el-form-item{
+     padding: 0 5px;
+   }
+  .el-form-item__label {
+    line-height: 1.2;
+    padding-bottom: 8px;
+    word-break: break-all;
+    word-wrap: break-word;
+    color: #333;
+  }
+
+  .el-form-item__error {
+    position: relative;
+    top: auto;
+    left: auto;
+  }
+
+  .el-form-item.is-desc_text {
+    .el-form-item__label {
+      display: none;
+    }
+  }
+}
+</style>

src/views/business/ticket/index.vue

@@ -74,6 +74,27 @@
           >添加盲票组</el-button
         >
       </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="info"
+          plain
+          icon="el-icon-upload2"
+          size="mini"
+          @click="handleImport"
+          v-hasPermi="['admin:ticket:import']"
+        >导入</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          :loading="exportLoading"
+          @click="handleExport"
+          v-hasPermi="['admin:ticket:export']"
+        >导出</el-button>
+      </el-col>
       <right-toolbar
         :showSearch.sync="showSearch"
         @queryTable="getList"
@@ -171,16 +192,29 @@
       :limit.sync="pageParams.pageSize"
       @pagination="getList"
     />
+
+    <!-- 导入 -->
+    <ticket-import
+      v-if="importShow"
+      :dialog-visible="importShow"
+      @close="hideDialog"
+    />
+
   </div>
 </template>
 <script>
-import { getTicketList } from "@/api/business/ticket";
+import { getTicketList , exportTicket} from "@/api/business/ticket";
 import { publicFileGetUrl } from "@/api/common";
+import TicketImport from './import'
 export default {
   name: "Ticket",
+  components: {
+   TicketImport
+  },
   data() {
     return {
       loading: false,
+      exportLoading: false,
       showSearch: true,
       queryParams: {
         title: "",
@@ -196,6 +230,8 @@ export default {
       // 总条数
       total: 10,
       list: [],
+      ids: [],
+      importShow:false
     };
   },
   created() {
@@ -240,15 +276,42 @@ export default {
     handleAdd() {
       this.$router.push({ name: "TicketCreate" });
     },
-    // 表格多选
-    handleSelectionChange() {},
+
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.boxId);
+    },
 
     handleDetail() {},
+
+    handleImport(){
+      console.log("handleImport ====================")
+      this.importShow = true;
+    },
+
+    hideDialog(){
+      this.importShow = false;
+    },
+
+    /** 导出按钮操作 */
+    handleExport() {
+     const boxIds = this.ids;
+      this.$confirm('是否确认导出所选盲票数据项?', "警告", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(() => {
+          this.exportLoading = true;
+          return exportTicket({ids:boxIds});
+        }).then(response => {
+          this.download(response.msg);
+          this.exportLoading = false;
+        }).catch(() => {});
+    },
   },
-  components: {},
   mounted() {},
   destroyed() {},
 };
 </script>
 <style lang="scss" scoped>
-</style>
+</style>