src/views/overView/Overview.vue

<template>
  <div class="overview">
    <el-row :gutter="20">
      <el-col :span="16">
        <div class="item-box todo">
          <div class="item-title public-title">
            <div class="left">任务中心</div>
            <div class="right">
              <!-- <el-button type="success" size="mini" style="margin-right: 10px;" v-if="isSHILevel" @click="announceMsg">发布</el-button> -->
              <el-tooltip effect="dark" content="刷新" placement="top">
                <el-link icon="icon-ym icon-ym-Refresh NCC-common-head-icon" :underline="false" @click="resetTask"/>
              </el-tooltip>
            </div>
          </div>
          <div class="item-body">
            <template>
              <el-table :data="taskList" style="width: 100%" stripe v-loading="taskLoading" size="small">
                <el-table-column type="index" width="40"> </el-table-column>
                <el-table-column prop="taskTitle" label="任务名称" show-overflow-tooltip/>
                <el-table-column prop="taskType" label="任务类型" show-overflow-tooltip width="100"/>
                <el-table-column prop="taskContent" label="任务内容" show-overflow-tooltip></el-table-column>
                <el-table-column prop="taskState" label="状态" show-overflow-tooltip width="80">
                  <template slot-scope="scope">
                    <el-tag type="success">{{ scope.row.taskState }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="deadLine" label="任务期限" show-overflow-tooltip :formatter="ncc.tableDateFormat" width="200">
                  <template slot-scope="scope">
                    <el-tag :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="操作" width="100">
                  <template slot-scope="scope">
                    <el-button type="primary" size="small" @click="handleTask(scope.row)">处理</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <pagination :total="taskTotal" :page.sync="taskListQuery.currentPage" :limit.sync="taskListQuery.pageSize" @pagination="getAllTaskList" />
            </template>
          </div>
        </div>
          <!--<div
          class="item-box earmarked"
          :style="`height: calc(${
            isSHILevel ? '50vh - 115px' : '100vh - 205px'
          });`"
        >
          <div class="item-title">专项行动</div>
          <div class="item-body">
            <el-row :gutter="6" class="item-one-list">
              <el-col
                :span="6"
                v-for="(item, index) in aimList"
                :key="index"
                style="margin-bottom: 6px"
              >
                <div class="item-one-box">
                  <div class="one-title">关于xxxxxx的专项行动</div>
                  <template v-if="item.type == 1">
                    <div class="one-info">
                      <div>区县：8（已填7）</div>
                      <div>外协：无</div>
                    </div>
                    <div class="one-info">行动时间：2024-07-01至2024-07-31</div>
                    <el-button type="text" class="el-button-qu">管理</el-button>
                    <el-button type="text" class="el-button-qu">查看</el-button>
                  </template>
                  <template v-else>
                    <div class="one-info">行动时间：2024-07-01至2024-07-31</div>
                    <div class="btn-box">
                      <el-button type="success" size="small">填报</el-button>
                      <div class="err">即将超时</div>
                    </div>
                  </template>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>-->
      </el-col>
      <el-col :span="8">
        <!-- <div class="item-box tip">
          <div class="item-title">工作提示</div>
          <div class="item-body">
            <template>
              <el-table :data="todoTableData" style="width: 100%" stripe>
                <el-table-column
                  prop="teskName"
                  label="内容"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  prop="teskCode"
                  label="事件"
                  show-overflow-tooltip
                >
                </el-table-column>
              </el-table>
            </template>
          </div>
        </div> -->
        <div class="item-box msg">
          <div class="item-title">
            <div class="left">通知公告</div>
            <div class="right">
              <el-button type="success" size="mini" style="margin-right: 10px;" v-if="isSHILevel" @click="announceMsg">发布</el-button>
              <el-tooltip effect="dark" content="刷新" placement="top">
                <el-link icon="icon-ym icon-ym-Refresh NCC-common-head-icon" :underline="false" @click="resetMsg"/>
              </el-tooltip>
            </div>
          </div>
          <div class="item-body">
            <template>
              <el-table :data="msgList" style="width: 100%" stripe v-loading="msgLoading">
                <el-table-column prop="title" label="标题" show-overflow-tooltip>
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="150">
                  <template slot-scope="scope">
                    <el-button type="text" @click="checkDetail(scope.row, true)">详情</el-button>
                    <el-button type="text" @click="checkDetail(scope.row)" v-if="isSHILevel">编辑</el-button>
                    <el-button type="text" style="color: red;" @click="delNew(scope.row)" v-if="isSHILevel">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <pagination :total="msgTotal" :page.sync="msgListQuery.currentPage" :limit.sync="msgListQuery.pageSize" @pagination="getAllMsgList" layout="prev, pager, next"/>
            </template>
          </div>
        </div>
      </el-col>
    </el-row>
    <MsgForm v-if="MsgFormVisible" ref="MsgForm" @refresh="msgRefresh"/>
    <HandleInspectForm v-if="HandleInspectFormVisible" ref="HandleInspectForm" @refresh="(val) => {taskRefresh('HandleInspectFormVisible', val)}"/>
    <NCC-Form v-if="formVisible" ref="NCCForm" @refreshDataList="(val) => {taskRefresh('formVisible', val)}" />
      <!-- 案件处理 -->
    <HandForm v-if="HandFormVisible" ref="HandForm" @refresh="(val) => {taskRefresh('HandFormVisible', val)}" />
      <!-- 研判 -->
    <DisposalForm v-if="DisposalFormVisible" ref="DisposalForm" @refresh="(val) => {taskRefresh('DisposalFormVisible', val)}"/>
    <DisposalHandleForm v-if="DisposalHandleFormVisible" ref="DisposalHandleForm" @refresh="(val) => {taskRefresh('DisposalHandleFormVisible', val)}"/>
    <el-dialog
      title="专项行动详情"
      :visible.sync="dialogVisible"
      class="NCC-dialog NCC-dialog_center baseSpecialAction"
      width="60%"
      :before-close="closeDis">
      <el-row :gutter="15" class="NCC-dialog-content">
        <h4>{{dataForm.title}}</h4>
        <div class="content" v-html="dataForm.content"></div>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleEditForm(dataForm.row)">填写表单</el-button>
        <el-button @click="closeDis">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import request from "@/utils/request";
import MsgForm from "./msgForm.vue"
import HandleInspectForm from "@/views/baseSystemInfo/HandleInspectForm.vue"
import NCCForm from '@/views/baseSpecialAction/dynamicModel/list/Form'
import HandForm from '@/views/baseCaseHandling/Form.vue'
// 研判
import DisposalForm from "@/views/DisposalSuggestions/Form.vue";
// 巡查处理
import DisposalHandleForm from "@/views/DisposalSuggestions/HandleForm.vue";
import { Loading } from 'element-ui';
export default {
  name: "Overview",
  components: { MsgForm, HandleInspectForm, NCCForm, HandForm, DisposalForm, DisposalHandleForm },
  data() {
    return {
      todoTableData: [],
      tipTableData: [],
      aimList: [],
      msgLoading: false,
      msgListQuery: {
        currentPage: 1,
        pageSize: 20,
      },
      msgQuery: {
        keyword: ''
      },
      msgList: [],
      msgTotal: 0,
      MsgFormVisible: false,
      taskLoading: false,
      taskListQuery: {
        currentPage: 1,
        pageSize: 20,
      },
      taskQuery: {
        keyword: ''
      },
      taskList: [],
      taskTotal: 0,
      HandleInspectFormVisible: false,
      formVisible: false,
      HandFormVisible: false,
      DisposalHandleFormVisible: false,
      DisposalFormVisible: false,
      dialogVisible: false,
      dataForm: {},
    };
  },
  created() {
    this.getAllMsgList();
    this.getAllTaskList();
  },
  computed: {
    isSHILevel() {
      // 判断角色是否为‘市级办公室’
      return this.$store.state.user.islader;
    },
  },
  methods: {
    // 通知公告
    getAllMsgList() {
      this.msgLoading = true;
      let _query = {
        ...this.msgListQuery,
        ...this.msgQuery,
      };
      let query = {};
      for (let key in _query) {
        if (Array.isArray(_query[key])) {
          query[key] = _query[key].join();
        } else {
          query[key] = _query[key];
        }
      }
      request({
        url: '/SubDev/ZyOaArticle',
        method: "GET",
        params: query,
      }).then((res) => {
        this.msgList = res.data.list;
        this.msgTotal = res.data.pagination.total;
        this.msgLoading = false;
      }).catch(() => {
        this.msgLoading = false;
      });
    },
    resetMsg() {
      this.msgList = [];
      this.msgListQuery = {
        currentPage: 1,
        pageSize: 20,
      };
      this.getAllMsgList();
    },
    msgRefresh(val) {
      this.MsgFormVisible = false;
      val && this.getAllMsgList();
    },
    checkDetail(row, isDetail) {
      this.MsgFormVisible = true;
      this.$nextTick(() => {
        this.$refs.MsgForm.init(row.id, isDetail);
      })
    },
    delNew(row) {
      this.$confirm('此操作将永久删除该消息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await request({
          url: `/SubDev/ZyOaArticle/${row.id}`,
          method: "DELETE",
        });
        this.$message({
          message: res.msg,
          type: 'success'
        });
        this.getAllMsgList();
      });
    },
    // 发布消息通知
    announceMsg() {
      this.MsgFormVisible = true;
      this.$nextTick(() => {
        this.$refs.MsgForm.init();
      })
    },
    // 任务中心
    getAllTaskList() {
      this.taskLoading = true;
      let _query = {
        ...this.taskListQuery,
        ...this.taskQuery,
      };
      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/BaseTaskCenter/GetListByCurretUser',
        method: "GET",
        params: query,
      }).then((res) => {
        this.taskList = res.data.list;
        this.taskTotal = res.data.pagination.total;
        this.taskLoading = false;
      }).catch(() => {
        this.taskLoading = false;
      });
    },
    resetTask() {
      this.taskList = [];
      this.taskListQuery = {
        currentPage: 1,
        pageSize: 20,
      };
      this.getAllTaskList();
    },
    async handleTask(row) {
      if(row.taskType == '专项行动') {
        this.dialogVisible = true;
        this.dataForm = {
          content: row.taskContent,
          title: row.taskTitle,
          row: row,
        };
        // let loadingInstance = Loading.service({
        //   lock: true,
        //   text: 'Loading',
        //   spinner: 'el-icon-loading',
        //   background: 'rgba(255, 255, 255, 0.7)'
        // });
        // this.formVisible = true;
        // // let data = await this.getBaseSpecialActionInfo('588008032122701061');
        // let data = await this.getBaseSpecialActionInfo(row.taskCorrelationId);
        // var  Itemid = data.itemId || '';//数据id，没有的话就是新增 ，有的话就是修改
        // var  modelId = data.formId;//关联的表单id
        // var taskId = data.id; // 当前专项行动id
        // var isPreview = false;//固定死，值不变
        // var useFormPermission = false;//固定死，值不变
        // var formData = [];
        // request({
        //   url: '/visualdev/OnlineDev/'+modelId+'/Config',
        //   method: "GET",
        //   params:null
        // }).then(res => {
        //   formData = res.data.formData;
        //   this.$refs.NCCForm.init(formData, modelId, Itemid, isPreview, useFormPermission, taskId);
        //   loadingInstance.close();
        // });
      } else {
        let type = row.taskType;
        if(row.taskType == '核查处理' || row.taskType == '研判') {
          let str = row.taskTitle;
          type = str.slice(1, str.indexOf('】'));
        }
        let openObject = this.getDialog(type);
        this[openObject.visible] = true;
        this.$nextTick(() => {
          this.$refs[`${openObject.node}`].init(row.taskCorrelationId, openObject.isDetail, 1);
        })
      }
    },
    closeDis() {
      this.dialogVisible = false; 
      this.dataForm = {};
      this.$forceUpdate();
    },
    async handleEditForm(row) {
      let loadingInstance = Loading.service({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(255, 255, 255, 0.7)'
      });
      this.formVisible = true;
      // let data = await this.getBaseSpecialActionInfo('588008032122701061');
      let data = await this.getBaseSpecialActionInfo(row.taskCorrelationId);
      var  Itemid = data.itemId || '';//数据id，没有的话就是新增 ，有的话就是修改
      var  modelId = data.formId;//关联的表单id
      var taskId = data.id; // 当前专项行动id
      var isPreview = false;//固定死，值不变
      var useFormPermission = false;//固定死，值不变
      var formData = [];
      request({
        url: '/visualdev/OnlineDev/'+modelId+'/Config',
        method: "GET",
        params:null
      }).then(res => {
        formData = res.data.formData;
        this.$refs.NCCForm.init(formData, modelId, Itemid, isPreview, useFormPermission, taskId);
        loadingInstance.close();
      });
    },
    getDialog(type) {
      switch (type) {
        case '归属地变更':
          return { visible: 'HandleInspectFormVisible', node: 'HandleInspectForm', isDetail: true }
          break;
        case '专项行动':
          
          break;
        case '案件处理':
        case '网信执法':
          return { visible: 'HandFormVisible', node: 'HandForm', isDetail: false, type: 1}
          break;
        case '研判':
          return { visible: 'DisposalFormVisible', node: 'DisposalForm', isDetail: false}
          break;
        case '进一步处置':
          return { visible: 'DisposalHandleFormVisible', node: 'DisposalHandleForm', isDetail: false}
          break;
        default:
          break;
      }
    },
    async getBaseSpecialActionInfo(id) {
      let {data} = await request({
        url: `/Extend/BaseSpecialActionInfo/${id}`,
        method: "GET",
      })
      return data;
    },
    taskRefresh(key, val) {
      this[key] = false;
      key == 'formVisible' && (this.dialogVisible = false);
      val && this.getAllTaskList();
    }
  },
};
</script>
<style scoped lang="scss">
.overview {
  .item-box {
    width: 100%;
    border-radius: 10px;
    background-color: rgba(228, 231, 237, 0.23);
    // margin-bottom: 15px;
    // border-image-source:url('/src/assets/images/box-bc.png');
    // border-image-slice:33%;
    // border-image-width:40px;
    // border-image-outset:0; 
    // border-image-repeat:repeat;   
    overflow: hidden;
    &.todo {
      height: calc(100vh - 160px);
    }
    //&.earmarked {
      // height: calc(50vh - 115px);
      //margin-bottom: 0;
    //}
    // &.tip {
    //   height: calc(50vh - 60px);
    // }
    &.msg {
      height: calc(100vh - 160px);
      margin-bottom: 0;
    }
    .public-title {
      width: calc(100% - 20px);
      height: 30px;
      position: relative;
      top: 0;
      left: 5px;
      color: white;
      padding-left: 16px;
      line-height: 30px;
      font-size: 14px;
      &::before {
        width: 4px;
        height: 20px;
        top: 5px;
        position: absolute;
        content: "";
        background: #2997e4;
        border-radius: 2px;
        left: 5px;
      }
    }
    .item-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0px 15px;
      margin: 6px 10px;
      // color: rgba(255, 255, 255, 1);
      // font-size: 16px;
      // line-height: 23px;
      // padding: 10px;
      .el-link.el-link--default {
        color: #fff !important;
      }
    }
    .item-body {
      height: calc(100% - 95px);
      margin: 0 13px;
      // padding-bottom: 28px;
      .el-table {
        border-radius: 10px;
        height: 100%;
        :deep(.el-table__body-wrapper.is-scrolling-none) {
          height: calc(100% - 47px);
          overflow-y: scroll;
        }
      }
    }
  }
  .earmarked {
    .item-title {
      margin-bottom: 0;
    }
    .item-one-list {
      max-height: 100%;
      overflow-y: scroll;
      margin-bottom: -6px;
      .item-one-box {
        box-sizing: border-box;
        background-color: #fff;
        border-radius: 5px;
        padding: 3px;
        height: 90px;
        .one-title {
          color: rgba(0, 122, 255, 1);
          font-size: 14px;
          line-height: 20px;
        }
        .one-info {
          display: flex;
          font-size: 12px;
          line-height: 20px;
        }
        .el-button-qu {
          padding: 5px 0;
        }
        .btn-box {
          margin-top: 10px;
          display: flex;
          align-items: flex-end;
          .err {
            margin-left: 10px;
            color: rgba(236, 47, 47, 1);
            font-size: 12px;
            line-height: 17px;
          }
        }
      }
    }
  }
}
.baseSpecialAction {
  h4 {
    text-align: center;
    line-height: 40px;
    border-bottom: 1px solid #ccc;
  }
  .content {
    padding: 20px;
    border-bottom: 1px solid #ccc;
  }
  .tag-group {
    margin: 10px 0;
  }
  .title-tag {
    margin: 5px 8px;
  }
  :deep(.el-tag) {
    margin: 4px 4px;
  }
}
</style>