导入记录

src/views/modules/importRecord/index.vue

@@ -0,0 +1,291 @@
+<template>
+  <div>
+    <el-card class="resi-card-table">
+      <div class="resi-row-btn">
+        <h2 type="success" size="small">导入记录</h2>
+      </div>
+      <el-table
+        :data="tableData"
+        border
+        style="width: 100%"
+        class="resi-table"
+        :max-height="maxTableHeight"
+      >
+        <el-table-column label="序号" type="index" align="center" width="50" />
+        <el-table-column prop="originFileName" label="文件名">
+        </el-table-column>
+        <el-table-column prop="startTime" label="导入时间"> </el-table-column>
+        <el-table-column label="导入状态" align="center" width="180">
+          <template slot-scope="scope">
+            <span
+              v-if="scope.row.processStatus == 'processing'"
+              >导入中</span
+            >
+            <span
+              v-else-if="scope.row.processStatus == 'finished'"
+              >已完成</span
+            >
+            <a target="_blank"
+              :href="scope.row.resultDescFile"
+              style="color: #00a7a9"
+              v-else-if="scope.row.processStatus == 'finished_fail'"
+              >下载失败说明</a
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+      <div>
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page.sync="pageNo"
+          :page-sizes="[20, 50, 100, 200]"
+          :page-size="parseInt(pageSize)"
+          layout="sizes, prev, pager, next"
+          :total="total"
+        >
+        </el-pagination>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { requestPost } from "@/js/dai/request";
+import nextTick from "dai-js/tools/nextTick";
+import { mapGetters } from "vuex";
+import axios from "axios";
+
+export default {
+  components: {},
+  data() {
+    return {
+      openSearch: false,
+
+      formShow: false,
+      formTitle: "",
+
+      pageNo: 1,
+      pageSize: window.localStorage.getItem("pageSize") || 20,
+      total: 1,
+
+      tableData: [
+        // {
+        //   originFileName: '某某某.xls',
+        //   processStatus: 'finished_fail',
+        //   startTime: '2022-02-22',
+        //   resultDescFile: 'http://www.baidu.com',
+        // }
+      ],
+    };
+  },
+  computed: {
+    maxTableHeight() {
+      return this.clientHeight - 450;
+    },
+    ...mapGetters(["clientHeight"]),
+  },
+  watch: {},
+  mounted() {
+    this.getTableData();
+  },
+  methods: {
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+      this.pageSize = val;
+      window.localStorage.setItem("pageSize", val);
+      this.getTableData();
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+      this.pageNo = val;
+      this.getTableData();
+    },
+
+    handleClose() {
+      this.formShow = false;
+    },
+    handleSearch(val) {
+      console.log(this.fmData);
+      this.pageNo = 1;
+      this.getTableData();
+    },
+
+    async handleAdd() {
+      this.formShow = true;
+      await nextTick();
+      console.log(this.$refs);
+      this.$refs.eleEditForm.initForm("add");
+    },
+
+    async handleDel(rowData, rowIndex) {
+      console.log(rowData, rowIndex);
+      const url = "/heart/societyorg/del";
+      const { tableData } = this;
+
+      const { data, code, msg } = await requestPost(url, {
+        societyId: tableData[rowIndex].societyId,
+      });
+
+      if (code === 0) {
+        this.$message.success("删除成功！");
+        this.getTableData();
+      } else {
+        this.$message.success("操作失败！");
+      }
+    },
+
+    async getTableData() {
+      const url = "/commonservice/import-task/page";
+      const { pageSize, pageNo, fmData } = this;
+      const { data, code, msg } = await requestPost(url, {
+        pageSize,
+        pageNo,
+        ...fmData,
+      });
+      if (code === 0) {
+        console.log("列表请求成功！！！！！！！！！！！！！！");
+        this.total = data.total || 0;
+        this.tableData = data.list
+          ? data.list.map((item) => {
+              return item;
+            })
+          : [];
+      } else {
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.tabs-other-info {
+  .el-tabs__item {
+    // width: 50px;
+    height: 20px;
+    box-sizing: border-box;
+    margin-right: 7px;
+    padding: 0 10px !important;
+    font-size: 8px;
+    font-weight: 500;
+    color: #666666;
+    line-height: 20px;
+    background: #ebecf1;
+    border-radius: 2px;
+  }
+  .el-tabs__nav-wrap::after,
+  .el-tabs__active-bar {
+    display: none;
+  }
+  .el-tabs__nav-next,
+  .el-tabs__nav-prev {
+    line-height: 20px;
+  }
+}
+
+.resi-card-table {
+  margin-top: 20px;
+}
+.resi-row-btn {
+  margin-bottom: 13px;
+  .upload-btn {
+    display: inline-block;
+    margin: 0 10px;
+  }
+}
+.resi-other {
+  width: 100%;
+  display: flex;
+  .resi-other-title {
+    width: 100px;
+    box-sizing: border-box;
+    margin-bottom: 10px;
+    // padding: 6px 12px 0 0;
+    font-size: 16px;
+    font-weight: 500;
+    color: #333;
+    text-align: center;
+  }
+  .tabs-other-info {
+    // padding-left: 60px;
+  }
+}
+
+.resi-btns {
+  margin-top: 20px;
+  text-align: center;
+}
+
+.resi-container .resi-card {
+  position: relative;
+  overflow: visible;
+}
+.resi-down {
+  position: absolute;
+  left: 50%;
+  bottom: -10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 46px;
+  height: 12px;
+  box-sizing: border-box;
+  margin-left: -23rpx;
+  cursor: pointer;
+  background: #ffffff;
+  border-radius: 0 0 10px 10px;
+  img {
+    display: block;
+  }
+}
+.resi-row-box {
+  height: 104px;
+  overflow: hidden;
+  transition: height 0.5s;
+}
+.resi-row-more {
+  height: max-content;
+  transition: height 0.5s;
+}
+.resi-row {
+  margin-bottom: 20px;
+}
+.resi-search {
+  .el-col {
+    text-align: right;
+  }
+}
+.resi-cell {
+  display: flex;
+  align-items: center;
+  .resi-cell-label {
+    width: 70px;
+    box-sizing: border-box;
+    margin-right: 15px;
+    text-align: right;
+    // line-height: 32;
+  }
+  .resi-cell-value-radio {
+    display: flex;
+    align-items: center;
+    min-height: 32px;
+  }
+  .resi-cell-input {
+    width: 180px;
+  }
+  .resi-cell-select {
+    width: 180px;
+    box-sizing: border-box;
+    margin-right: 10px;
+    &-middle {
+      width: 130px;
+    }
+    &-small {
+      width: 88px;
+    }
+  }
+  .resi-cell-select:last-child {
+    margin-right: 0;
+  }
+}
+</style>