Smart_platform_ui/src/components/report-dialog/main.vue

<template>
  <el-dialog
    title="提报列表"
    :visible.sync="visible"
    top="5vh"
    width="60%"
    :before-close="onClose"
    append-to-body
    class="el-dialogDeep"
    v-dialog-drag
  >
    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      ref="crud"
      :page.sync="page"
      @current-change="currentChange"
      @size-change="sizeChange"
      :cell-style="cellStyle"
    >
      <template slot-scope="{ row }" slot="name">
        <el-tag style="cursor:pointer" @click="goReport(row.name)">{{
          row.name | nameFormat
        }}</el-tag>
      </template>
    </avue-crud>
    <span slot="footer" class="dialog-footer">
      <el-button @click="onClose()">关 闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getList } from "@/api/report/report";
import { nameReportFormat } from "@/filters/report";
export default {
  data() {
    return {
      visible: false,
      loading: true,
      query: {},
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      option: {
        addBtn: false,
        border: true,
        index: true,
        refreshBtn: false,
        menu: false,
        columnBtn: false,
        header: false,
        column: [
          {
            label: "文件名",
            prop: "name",
            overHidden: true
          },
          {
            label: "创建时间",
            prop: "createTime",
            overHidden: true
          },
          {
            label: "更新时间",
            prop: "updateTime",
            overHidden: true
          }
        ]
      },
      data: []
    };
  },
  props: {
    switchDialog: {
      type: Boolean,
      default: false
    },
    reportName: {
      type: String
    },
    reportId: {
      type: String
    }
  },
  filters: {
    nameFormat(name) {
      return nameReportFormat(name);
    }
  },
  methods: {
    cellStyle() {
      return "padding:0;height:40px;";
    },
    onClose() {
      this.visible = false;
      Object.assign(this.$data, this.$options.data());
      this.$emit("onClose", false);
    },
    getList() {
      this.loading = true;
      getList(
        this.page.currentPage,
        this.page.pageSize,
        Object.assign(this.query)
      ).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        if (this.page.total) {
          this.option.height = window.innerHeight - 350;
        }
      });
    },
    goReport(name) {
      this.$router.push({
        path: `/myiframe/urlPath?name=preview-${name}&src=${this.website.reportUrl}/preview?_u=blade-${name}&id=${this.reportId}`
      });
      this.$emit("onClose", false);
    }
  },
  watch: {
    switchDialog: function(i) {
      this.visible = i;
      this.query = {
        name: this.reportName ? this.reportName : this.$router.currentRoute.name
      };
      if (i) {
        this.getList();
      }
    }
  }
};
</script>

<style lang="scss" scoped></style>