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

<template>
  <div class="container">
    <templatePopup
      ref="popupRef"
      :templateTitle="templateTitle"
      :templateType="templateType"
      @confirmEvent="confirmEvent"
    />
    <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.templateForm"
            >
              <el-option
                v-for="item in temFormatOptions"
                :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" @click="addTemplate">添加模板</el-button>
        <el-button class="delete-btn" @click="batchDelete">批量删除</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="templateForm" 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.template)"
              >点击下载</el-button
            >
            <el-button
              v-show="scope.row.templateName == null ? false : true"
              size="mini"
              type="text"
              style="color: #2ea8e6"
              @click="editTemplate(scope.row)"
              >编辑</el-button
            >
            <el-button
              v-show="scope.row.templateName == null ? false : true"
              size="mini"
              type="text"
              style="color: #2ea8e6"
              @click="deleteTemplate(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="bottom">
      <page :paginationData="paginationData"></page>
    </div>
  </div>
</template>

<script>
import page from "@/components/pagination/index";
import templatePopup from "@/views/dataManagement/templatePopup";
import {
  addReportTemplate,
  getTableTemplateList,
  modifySingleTemplate,
  deleteSingleTemplate,
  deleteMultipleTemplates,
  downloadTemplate,
} from "@/api/data/template";
export default {
  components: { page, templatePopup },
  data() {
    return {
      templateTitle: "",
      templateType: "报表",
      form: {
        templateName: "",
        templateForm: "",
      },
      tableData: [],
      temFormatOptions: [
        {
          value: "",
          label: "全部",
        },
        {
          value: "Word",
          label: "Word",
        },
        {
          value: "Excel",
          label: "Excel",
        },
        {
          value: "PDF",
          label: "PDF",
        },
      ],

      defaultProps: {
        children: "children",
        label: "label",
      },
      currentPageSize: 10,
      currentPage: 1,
      paginationData: {
        pageSize: 10,
        pagerCount: 5,
        currentPage: 1,
        pageSizes: [5, 10, 20, 30],
        total: 0,
        currentChange: (val) => {
          this.getTableData(val);
        },
        handleSizeChange: (val) => {
          this.handleSizeChange(val);
        },
      },
      multipleSelection: [],
    };
  },
  watch: {
    filterText(val) {
      this.$refs.search.filter(val);
    },
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      this.getTableData(1);
    },
    getTableData(val) {
      this.tableData = [];
      getTableTemplateList(
        val,
        this.currentPageSize,
        0,
        this.form.templateName,
        this.form.templateForm
      ).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,
              templateForm: v.format,
              createUser: v.creator,
              createTime: v.create_time,
              alterTime: v.update_time,
              template: v.template,
              introduction: v.introduction,
            };
          });
        }
      });
    },
    downloadTemplate(fileName) {
      downloadTemplate(fileName)
        .then((res) => {
          const data = res.data;
          if (data.type === "application/octet-stream") {
            const blob = new Blob([data], { type: data.type });
            const url = window.URL.createObjectURL(blob);
            const link = document.createElement("a");
            link.href = url;
            link.download = fileName;
            document.body.appendChild(link);
            link.click();
          }
        })
        .catch((err) => {
          this.$message.error("文件下载失败，请重新下载!");
        });
    },
    handleSizeChange(val) {
      this.currentPageSize = val;
      this.getTableData(this.currentPage);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    resetEvent() {
      this.form.templateName = "";
      this.form.templateForm = "";
      this.searchEvent();
    },
    searchEvent() {
      this.getTableData(this.currentPage);
    },
    addTemplate() {
      this.templateTitle = "添加模板";
      this.$refs.popupRef.dialogVisible = true;
      this.$refs.popupRef.formData.name = "";
      this.$refs.popupRef.formData.format = "Excel";
      this.$refs.popupRef.formData.introduction = "";
      this.$refs.popupRef.formData.templateType = 0;
    },
    batchDelete() {
      if (this.multipleSelection.length > 0) {
        let arr = this.multipleSelection.map((v) => {
          return v.id;
        });
        deleteMultipleTemplates(JSON.stringify(arr)).then((res) => {
          if (res.data.code === 0) {
            this.$message.success("选中模板已删除!");
            this.getTableData(1);
          }
        });
      } else {
        this.$message.info("暂无需要删除的模板");
      }
    },
    editTemplate(data) {
      this.templateTitle = "编辑模板";
      this.$refs.popupRef.dialogVisible = true;
      this.$refs.popupRef.formData.id = data.id;
      this.$refs.popupRef.formData.templateType = 0;
      this.$refs.popupRef.formData.name = data.templateName;
      this.$refs.popupRef.formData.format = data.templateForm;
      data.introduction == "null"
        ? (this.$refs.popupRef.formData.introduction = "")
        : (this.$refs.popupRef.formData.introduction = data.introduction);
    },
    deleteTemplate(data) {
      deleteSingleTemplate(data.id).then((res) => {
        if (res.data.code === 0) {
          this.$message.success("模板已删除!");
          this.getTableData(1);
        }
      });
    },
    confirmEvent(data) {
      if (this.templateTitle === "添加模板") {
        let options = {
          templateName: data.name,
          templateFormat: data.format,
          introduction: data.introduction,
          templateType: 0,
          file: data.file,
        };
        addReportTemplate(options).then((res) => {
          if (res.data.code === -1) {
            this.$message.info("添加失败，请修改重新添加!");
          }
          if (res.data.code === 0) {
            this.$message.success("模板添加成功!");
            this.$refs.popupRef.dialogVisible = false;
            this.getTableData(1);
          }
        });
      }
      if (this.templateTitle === "编辑模板") {
        let options = {
          id: data.id,
          templateName: data.name,
          templateFormat: data.format,
          introduction: data.introduction,
          templateType: 0,
          file: data.file,
        };
        modifySingleTemplate(options).then((res) => {
          if (res.data.code === -1) {
            this.$message.info("模板修改失败");
          }
          if (res.data.code === 0) {
            this.$message.success("模板添加成功!");
            this.$refs.popupRef.dialogVisible = false;
            this.getTableData(1);
          }
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  position: relative;
  height: 100%;
  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>