ioc-admin-ui/src/views/dataManagement/reportConfig.vue

<template>
  <div class="container">
    <div class="header">
      <el-form label-width="120px">
        <div style="display: flex; padding: 10px">
          <el-form-item label="报告模板名称：">
            <el-input
              ref="search"
              v-model="form.templateName"
              suffix-icon="el-icon-search"
              placeholder="请输入模板名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="报告模板格式：">
            <el-select
              placeholder="请选择模板格式"
              v-model="form.templateFormat"
            >
              <el-option
                v-for="item in reportFormatOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="报告类型：">
            <el-select placeholder="请选择报告类型" v-model="form.reportType">
              <el-option
                v-for="item in reportTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-button class="reset-btn" @click="resetEvent">重置</el-button>
          <el-button class="search-btn" @click="searchEvent">查询</el-button>
        </div>
      </el-form>
    </div>
    <div class="content">
      <div class="content-inner-top">
        <div class="info">模板列表</div>
        <el-button class="add-btn">添加模板</el-button>
        <el-button class="delete-btn">批量删除</el-button>
      </div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }"
        style="width: 100%"
        :height="400"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="50"> </el-table-column>
        <el-table-column prop="templateName" label="模板名称">
        </el-table-column>
        <el-table-column prop="templateFormat" label="模板格式">
        </el-table-column>
        <el-table-column prop="reportType" label="报告类型"> </el-table-column>
        <el-table-column prop="createUser" label="创建用户"> </el-table-column>
        <el-table-column prop="createTime" label="创建时间"> </el-table-column>
        <el-table-column prop="alterTime" label="修改时间"> </el-table-column>
        <el-table-column prop="operation" label="操作">
          <template slot-scope="scope">
            <el-button
              v-show="scope.row.templateName == null ? false : true"
              size="mini"
              type="text"
              style="color: #2ea8e6"
              @click="downloadTemplate(scope.row.templateUrl)"
              ><a :href="scope.row.templateUrl">点击下载</a></el-button
            >
            <el-button
              v-show="scope.row.templateName == null ? false : true"
              size="mini"
              type="text"
              style="color: #2ea8e6"
              >编辑</el-button
            >
            <el-button
              v-show="scope.row.templateName == null ? false : true"
              size="mini"
              type="text"
              style="color: #2ea8e6"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="bottom">
      <page :paginationData="paginationData"></page>
    </div>
  </div>
</template>

<script>
import checkbox from "@/components/Checkbox/index";
import page from "@/components/pagination/index";
import { addReportTemplate, getReportTemplateList } from "@/api/data/template";

export default {
  components: { checkbox, page },
  data() {
    return {
      input: "",
      show: true,
      form: {
        templateName: "",
        templateFormat: "",
        reportType: "",
      },
      reportFormatOptions: [
        {
          value: "",
          label: "全部",
        },
        {
          value: "Word",
          label: "Word",
        },
        {
          value: "Excel",
          label: "Excel",
        },
        {
          value: "PDF",
          label: "PDF",
        },
      ],
      reportTypeOptions: [
        {
          value: "",
          label: "全部",
        },
        {
          value: "年度报告",
          label: "年度报告",
        },
        {
          value: "季度报告",
          label: "季度报告",
        },
        {
          value: "月度报告",
          label: "月度报告",
        },
      ],
      tableData: [],

      // tableData: [
      //   {
      //     templateName: "模板1",
      //     templateFormat: "txt",
      //     createUser: "test",
      //     createTime: "2023-01-01 00:00",
      //     alterTime: "2023-01-01 00:00",
      //   },
      //   {
      //     templateName: "模板1",
      //     templateFormat: "txt",
      //     createUser: "test",
      //     createTime: "2023-01-01 00:00",
      //     alterTime: "2023-01-01 00:00",
      //   },
      //   {
      //     templateName: "模板1",
      //     templateFormat: "txt",
      //     createUser: "test",
      //     createTime: "2023-01-01 00:00",
      //     alterTime: "2023-01-01 00:00",
      //   },
      // ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      currentPageSize: 10,
      currentPage: 1,
      paginationData: {
        pageSize: 10,
        pagerCount: 5,
        currentPage: 1,
        pageSizes: [5, 10, 20, 30],
        total: 30,
        currentChange: (val) => {
          this.getTableData(val);
        },
        handleSizeChange: (val) => {
          this.handleSizeChange(val);
        },
      },
      multipleSelection: [],
    };
  },
  mounted() {
    this.initData();
  },
  watch: {
    filterText(val) {
      this.$refs.search.filter(val);
    },
  },
  methods: {
    initData() {
      this.getTableData(1);
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    downloadTemplate(url) {
      console.log(url, "url");
    },
    getTableData(val) {
      this.tableData = [];
      getReportTemplateList(
        val,
        this.currentPageSize,
        1,
        this.form.templateName,
        this.form.templateFormat,
        this.form.reportType
      ).then((res) => {
        if (res.data.code === 0 && res.data.data.length > 0) {
          this.paginationData.total = res.data.total;
          this.tableData = res.data.data.map((v) => {
            return {
              id: v.id,
              templateName: v.name,
              templateFormat: v.format,
              reportType: v.report_type || "--",
              createUser: v.creator,
              createTime: v.create_time,
              alterTime: v.update_time,
              templateUrl: v.template_url,
            };
          });
        }
      });
    },
    handleSizeChange(val) {
      this.currentPageSize = val;
      this.getTableData(this.currentPage);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    resetEvent() {
      this.form.templateName = "";
      this.form.templateFormat = "";
      this.form.reportType = "";
      this.searchEvent();
    },
    searchEvent() {
      this.getTableData(this.currentPage);
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  position: absolute;
  left: 218px;
  top: 80px;
  right: 16px;
  bottom: 20px;
  line-height: 20px;
  background-color: rgba(255, 255, 255, 1);
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: center;
  overflow-y: auto;
  //box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);

  .header {
    margin: 2%;
    width: 96%;
    height: 60px;
    background-color: #fafafa;
    position: relative;
    border-radius: 4px;

    .reset-btn,
    .search-btn {
      height: 30px;
      width: 80px;
      position: absolute;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      top: 15px;
    }
    .reset-btn {
      background-color: #b3b3b3;
      right: 130px;
    }
    .search-btn {
      background-color: #2ea8e6;
      right: 25px;
    }

    .el-form-item {
      margin-bottom: 0 !important;
      margin-right: 60px !important;

      /deep/.el-form-item {
        margin-right: 50px;
        margin-bottom: 0;
      }

      /deep/.el-form-item__content {
        margin-left: 120px;
      }
    }
  }

  .content {
    width: 95%;
    position: absolute;
    margin-left: 2.5%;
    margin-right: 2.5%;
    margin-top: 30px;
    height: calc(80% - 110px);
    &-inner-top {
      width: 100%;
      height: 100px;
      position: absolute;
      .info {
        position: absolute;
        width: 150px;
        top: 0;
        left: 0;
        height: 60px;
        font-size: 25px;
        display: flex;
        align-items: center;
        font-weight: 550;
        color: #4d4d4d;
      }
      .add-btn,
      .delete-btn {
        padding: 3px;
        width: 80px;
        height: 30px;
        bottom: 15px;
        position: absolute;
        color: #fff;
        border-radius: 4px;
      }
      .add-btn {
        right: 100px;
        background-color: #2ea8e6;
      }
      .delete-btn {
        right: 10px;
        background-color: #b3b3b3;
      }
    }

    .el-table {
      position: absolute;
      top: 100px;
      width: 100%;
      height: calc(100% - 100px);
      border: 1px solid #f0f2f2;
      margin-top: 10px;
      font-size: 0.95rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: #b2b2b2;
      background: rgba(255, 255, 255, 0.8);

      /deep/th {
        background: #f7fbff;
      }
      /deep/.el-checkbox {
        color: #b2b2b2;
        .el-checkbox__input.is-checked + .el-checkbox__label {
          color: #2ea8e6;
        }

        .el-checkbox__input.is-checked .el-checkbox__inner::after {
          width: 70%;
          height: 70%;
          background: #2ea8e6;
          border-radius: 0;
          transform: rotate(0deg) scaleY(1);
          position: static;
          // border: 1px solid #8DD9FF;
        }

        .el-checkbox__inner {
          border: 1px solid #8dd9ff;
          background: rgba(0, 170, 255, 0);
          display: flex;
          align-items: center;
          justify-content: center;
          position: static;
          &::after {
            transition: 0ms;
          }
        }

        .el-checkbox__label {
          padding-left: 0;
          font-size: 15px;
          position: absolute;
          top: 1px;
          left: 25px;
        }
      }
    }

    .el-select {
      width: 80px;
      margin-right: 20px;
    }
  }

  .bottom {
    position: absolute;
    left: 20px;
    right: 16px;
    bottom: 20px;
    height: 50px;
    line-height: 20px;
    background-color: rgba(255, 255, 255, 1);
    text-align: center;

    .checkbox {
      position: absolute;
      left: 29px;
      top: 15px;
      font-size: 14px;
    }

    .check-cancel {
      position: absolute;
      // line-height: 20px;
      font-size: 14px;
      text-align: center;
      left: 140px;
      top: 10px;
    }

    .bottom_button {
      position: absolute;
      left: 200px;
      margin-top: 15px;

      .delete {
        font-size: 14px;
        text-align: center;
        padding: 1px;
      }

      .disabled {
        font-size: 14px;
        text-align: center;
        padding: 1px;
      }

      .export {
        font-size: 14px;
        text-align: center;
        padding: 1px;
      }
    }
  }
}
</style>