src/views/baseSpecialAction/infoForm.vue

<template>
  <!-- 专项行动填报情况 -->
  <el-dialog
    title="行动情况"
    :close-on-click-modal="false"
    :visible.sync="visible"
    class="NCC-dialog NCC-dialog_center"
    lock-scroll
    width="70%"
  >
    <el-row :gutter="15" style="height: 65vh" class="NCC-dialog-content">
        <el-col :span="24" style="margin-bottom: 20px;">
            <el-col :span="10" class="form-item">
                <div class="label w-100">行动标题：</div>
                <div>{{ form.title }}</div>
            </el-col>
            <el-col :span="10" class="form-item">
                <div class="label w-100">截止时间：</div>
                <div>{{ ncc.dateFormat(form.deadline) }}</div>
            </el-col>
            <el-col :span="2" class="form-item">
              <el-button type="primary" icon="el-icon-download" size="mini" @click="toExport" :loading="exportBtnLoading">导出</el-button>
            </el-col>
        </el-col>
        <el-col :span="24" style="height: calc(100% - 100px);">
            <NCC-table :data="tableData" style="width: 100%" v-loading="loading" stripe>
              <el-table-column prop="originName" label="传达区县/外协" />
              <el-table-column prop="state" label="状态">
                <template slot-scope="scope">
                  <el-tag :type="scope.row.state == '已填写' ? 'success' : 'warning'">{{scope.row.state}}</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" fixed="right" >
                <template slot-scope="scope">
                  <FormDialog :row="scope.row" :isDetail="true" :disabled="scope.row.state != '已填写'">详情</FormDialog>
                </template>
              </el-table-column>
            </NCC-table>
            <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize" @pagination="initList"/>
        </el-col>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
    </span>
    <NCCForm v-if="dialogVisible" ref="NCCForm" />
  </el-dialog>
</template>
<script>
import request from "@/utils/request";
import NCCForm from '@/views/baseSpecialAction/dynamicModel/list/Form'
export default {
  components: { NCCForm },
  props: [],
  data() {
    return {
      loading: false,
      visible: false,
      tableData: [{}],
      listQuery: {
        currentPage: 1,
        pageSize: 20,
      },
      total: 0,
      form: {},
      dialogVisible: false,
      exportBtnLoading: false,
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    close() {
        this.form = {};
        this.$emit("refresh");
    },
    init(row) {
        this.form = row;
        this.visible = true;
        this.loading = true;
        this.$nextTick(() => {
            this.initList();
        })
    },
    initList() {
      request({
        url: `/Extend/BaseSpecialActionInfo/GetListById`,
        method: "GET",
        params: {
          ...this.listQuery,
          specialActionId: this.form.id,
        },
      }).then((res) => {
        this.tableData = res.data.list;
        this.total = res.data.pagination.total;
        this.loading = false;
      });
    },
     // 导出
    toExport() {
      this.exportBtnLoading = true;
      request({
        url: `/Extend/BaseSpecialActionInfo/Actions/Export`,
        method: "POST",
        data: {specialActionId: this.form.id},
      }).then((res) => {
        const url = process.env.VUE_APP_BASE_API + res.data.url;
        const link = document.createElement("a");
        link.href = url;
        link.download = res.data.name;
        link.click();
        this.exportBtnLoading = false;
      }).catch(() => this.exportBtnLoading = false);
    },
  },
}
</script>
<style lang="scss" scoped>
.NCC-dialog {
    :deep(.el-table__body-wrapper.is-scrolling-none) {
      height: calc(100% - 47px);
      overflow-y: scroll;
    }
    :deep(.el-pagination__total) {
        color: #606266;
    }
    :deep(.el-pagination__jump) {
        color: #606266;
    }
}
</style>