src/views/baseSpecialhandle/index.vue

<template>
  <div class="baseSpecialAction item-box common-info-box">
    <div class="item-title">专项行动处理</div>
    <div class="item-body">
      <div class="NCC-common-layout">
        <div class="NCC-common-layout-center">
          <el-row class="NCC-common-search-box" :gutter="16">
            <el-form @submit.native.prevent size="mini">
              <el-col :span="6">
                <el-form-item label="">
                  <el-input v-model="query.title" placeholder="标题" clearable />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="">
                  <el-select v-model="query.state" placeholder="请选择状态" clearable>
                    <el-option label="已填写" value="已填写"></el-option>
                    <el-option label="未填写" value="未填写"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item>
                  <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
                  <el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
                </el-form-item>
              </el-col>
            </el-form>
            <div class="NCC-common-search-box-right">
              <el-button type="primary" icon="el-icon-download" size="mini" @click="exportData()">导出</el-button>
            </div>
          </el-row>
          <div class="NCC-common-layout-main NCC-flex-main">
            <NCC-table v-loading="listLoading" :data="list">
              <el-table-column prop="id" label="主键" align="left" show-overflow-tooltip />
              <el-table-column prop="title" label="标题" align="left" show-overflow-tooltip />
              <el-table-column prop="state" label="状态" align="left" show-overflow-tooltip >
                <template slot-scope="scope">
                  <el-tag :type="scope.row.state == '已填写' ? 'success' : 'warning'">{{ scope.row.state }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="deadline" label="截止日期" align="left" :formatter="ncc.tableDateFormat" show-overflow-tooltip width="200">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.deadline" :type="ncc.timeDeadLine(scope.row.deadline)">{{ncc.stateDeadLine(scope.row.deadline)}}{{ ncc.tableDateFormat(scope.row, 'deadline', scope.row.deadline) }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" fixed="right" width="130">
                <template slot-scope="scope">
                  <el-button type="text" @click="toFillForm(scope.row)" :disabled="ncc.timeDeadLine(scope.row.deadline) == 'danger' && scope.row.state == '已填写'">{{scope.row.state == '已填写' ? '修改' : '处理'}}</el-button>
                  <el-button type="text" @click="toFillForm(scope.row, true)" :disabled="scope.row.state != '已填写'">详情</el-button>
                </template>
              </el-table-column>
            </NCC-table>
            <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize"
              @pagination="initData" />
          </div>
        </div>
      </div>
    </div>
    <NCCForm v-if="dialogVisible" ref="NCCForm" @refreshDataList="refresh" />
    <!-- <el-dialog title="专项行动处理" :visible.sync="dialogVisible" fullscreen :modal="false">
        <iframe 
          :src="nestedPageUrl" 
          width="100%" 
          :height="viewportHeight - 58 + 'px'" 
          frameborder="0" 
          allowfullscreen>
        </iframe>
      </el-dialog> -->
  </div>
</template>
<script>
import NCCForm from '@/views/baseSpecialAction/dynamicModel/list/Form'
import request from "@/utils/request";
export default {
  components: { NCCForm },
  data() {
    return {
      query: {
        title: undefined,
        state: undefined,
      },
      list: [],
      listLoading: false,
      total: 0,
      listQuery: {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "",
      },
      communicationAreaOptions: [],
      communicationOutOptions: [],
      dialogVisible: false,
      nestedPageUrl: '',
      viewportHeight: 0,
      taskId: '',
    };
  },
  created() {
    this.updateViewportHeight();
    this.initData()
    // 监听窗口大小变化事件
    window.addEventListener('resize', this.updateViewportHeight);
  },
  beforeDestroy() {
    // 移除窗口大小变化事件监听器
    window.removeEventListener('resize', this.updateViewportHeight);
  },
  computed: {
    isSHILevel() {
      // 判断角色是否为‘市级办公室’
      return this.$store.state.user.islader;
    },
  },
  methods: {
    updateViewportHeight() {
      // 获取页面显示高度
      this.viewportHeight = window.innerHeight || document.documentElement.clientHeight;
    },
    initData() {
      this.listLoading = true;
      let _query = {
        ...this.listQuery,
        ...this.query,
      };
      let query = {};
      for (let key in _query) {
        if (Array.isArray(_query[key])) {
          query[key] = _query[key].join();
        } else {
          query[key] = _query[key];
        }
      }
      request({
        url: '/Extend/BaseSpecialAction/getCurrentUserSpecialAction',
        method: "GET",
        params: query,
      }).then((res) => {
        this.list = res.data.list;
        this.total = res.data.pagination.total;
        this.listLoading = false;
      });
    },
    toFillForm(row, isDetail) {
      this.dialogVisible = true;
      var  Itemid = row.itemId || '';//数据id，没有的话就是新增 ，有的话就是修改
      var  modelId = row.formId;//关联的表单id
      var taskId = row.id; // 当前专项行动id
      var isPreview = false;//固定死，值不变
      var useFormPermission = false;//固定死，值不变
      var formData = [];
      request({
        url: '/visualdev/OnlineDev/'+modelId+'/Config',
        method: "GET",
        params:null
      }).then(res => {
        formData = JSON.parse(res.data.formData);
        formData.disabled = isDetail || false;
        let form = JSON.stringify(formData);
        this.$refs.NCCForm.init(form, modelId, Itemid, isPreview, useFormPermission, taskId, isDetail)
      });
    
      // this.nestedPageUrl = `http://8.130.38.56:8043/old/#/previewModel?isPreview=1&id=${row.originId}`;
      // request({
      //   url: '/visualdev/Base',
      //   method: "GET",
      //   data: {type: 1},
      // }).then((res) => {
      // this.BaseList = res.data.list[0].children.find(v => v.category == row.originId);
      //   res.data.
      //  console.log(res);
      // });
    },
    exportData() {
      this.exportBoxVisible = true;
      this.$nextTick(() => {
        this.$refs.ExportBox.init(this.list);
      });
    },
    download(data) {
      let query = { ...data, ...this.listQuery, ...this.query };
      request({
        url: `/Extend/BaseSpecialAction/Actions/Export`,
        method: "GET",
        data: query,
      }).then((res) => {
        if (!res.data.url) return;
        window.location.href = this.define.comUrl + res.data.url;
        this.$refs.ExportBox.visible = false;
        this.exportBoxVisible = false;
      });
    },
    search() {
      this.listQuery = {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "",
      };
      this.initData();
    },
    refresh(isrRefresh) {
      this.formVisible = false;
      if (isrRefresh) this.reset();
    },
  
    reset() {
      for (let key in this.query) {
        this.query[key] = undefined;
      }
      this.listQuery = {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "",
      };
      this.initData();
    },
  },
};
</script>
<style scoped lang="scss">
.common-info-box {
  :deep(.el-table__body-wrapper.is-scrolling-none) {
    height: calc(100% - 47px);
    overflow-y: scroll;
  }
}
</style>