cmc-oa/oa-ui/src/views/index.vue

<!--
 * @Author: ysh
 * @Date: 2024-01-03 09:23:11
 * @LastEditors: wrh
 * @LastEditTime: 2025-02-28 09:16:34
-->

<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :span="6" :xs="24">
        <div class="header">个人信息</div>
        <div class="user-wrapper">
          <div class="avatar">
            <img :src="avatar" class="user-avatar" />
          </div>
          <div class="username">
            <div>{{ user.nickName }}</div>
            <div style="font-size: 14px;color:#bbb;font-weight:lighter;">
              <el-tag type="warning">{{ post.length == 0 ? '未设置职位' : post.join(' / ') }}</el-tag>
            </div>
          </div>
          <div class="user-info">
            <el-row :gutter="20" style="margin:10px">
              <el-col :span="10" style="text-align: right;">所属部门：</el-col>
              <el-col :span="14" style="text-align: left;">{{ user.dept.deptName }}</el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="10" style="text-align: right;">技术职称：</el-col>
              <el-col :span="14" style="text-align: left;">{{ user.titles }}</el-col>
            </el-row>
          </div>
        </div>
      </el-col>
      <el-col :span="18" :xs="24">
        <div class="header">快捷入口</div>
        <div class="nav-wrapper">
          <div class="nav-item" v-for="nav in navItem" @click="goToPath(nav.path)" v-hasPermi="nav.privilege">
            <el-badge :value="formartBadge(nav.id)" :max="99" class="item">
              <div class="nav-logo" :style="{ 'background-color': nav.bgColor, 'box-shadow': nav.boxShadow }">
                <div class="icon">
                  <svg-icon slot="prefix" :icon-class="nav.icon" class="el-input__icon input-icon" />
                </div>
              </div>
            </el-badge>
            <div class="nav-text">{{ nav.name }}</div>
          </div>
        </div>
      </el-col>

    </el-row>
    <el-row :gutter="20">
      <el-col :span="10" :xs="24">
        <div class="header">通知公示</div>
        <div class="notice-content">
          <el-table v-loading="noticeLoading" :data="noticeList" height="320px">
            <!-- <el-table-column label="序号" align="center" prop="noticeId" width="100" /> -->
            <el-table-column label="类型" align="center" prop="noticeType" width="100">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.sys_notice_type" :value="scope.row.noticeType" />
              </template>
            </el-table-column>
            <el-table-column label="标题" align="center" prop="noticeTitle" :show-overflow-tooltip="true" />
            <el-table-column label="创建者" align="center" prop="createBy" width="100" />
            <el-table-column label="创建时间" align="center" prop="createTime" width="100">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="90" align="center">
              <template slot-scope="scope">
                <el-button size="mini" type="text" icon="el-icon-view"
                  @click="handleRowClick(scope.row)">查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="text-align: right;margin-top: 20px;">
            <el-pagination @current-change="getNotice" :current-page.sync="noticeQueryParams.pageNum"
              :page-size="noticeQueryParams.pageSize" layout="total, prev, pager, next,jumper" :total="noticeTotal">
            </el-pagination>
          </div>

        </div>
      </el-col>
      <el-col :span="14" :xs="24">
        <div class="header">待办任务</div>
        <div class="calendar-warpper">
          <el-table v-loading="taskLoading" :data="todoList" height="400px">
            <el-table-column type="index" label="序号" width="55" align="center" />
            <el-table-column label="流程名称" align="center" prop="procDefName" />
            <el-table-column label="标题" align="center" prop="title" show-overflow-tooltip />
            <el-table-column label="当前节点" align="center" prop="taskName" />
            <el-table-column label="流程发起人" align="center">
              <template slot-scope="scope">
                <label>{{ scope.row.startUserName }} <el-tag type="info" size="mini">{{ scope.row.startDeptName
                    }}</el-tag></label>
              </template>
            </el-table-column>
            <el-table-column label="接收时间" align="center" prop="createTime" width="180" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button size="mini" type="text" icon="el-icon-edit-outline" @click="handleProcess(scope.row)">处理
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>

    <el-dialog title="" :visible.sync="noticeOpen" width="750px" append-to-body>
      <h2 class="text-center">{{ clickNotice.noticeTitle }}</h2>
      <div class="pre-formatted" v-html="clickNotice.noticeContent"></div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getUserProfile, getUser } from "@/api/system/user";
import { listProject } from "@/api/oa/project/project";
import { todoList } from "@/api/flowable/todo";
import { finishedList } from "@/api/flowable/finished";
import Calendar from '@/components/Calendar';
import { listNotice } from "@/api/system/notice";
import { getProcessVariables } from "@/api/flowable/definition"
export default {
  dicts: ['sys_notice_status', 'sys_notice_type'],
  components: {
    Calendar
  },
  computed: {
    ...mapGetters(["avatar", "userId"]),
  },
  created() {
    this.getUserbyId();
    this.getDetail();
    this.getProject();
    this.getNotice();
  },
  data() {
    return {
      noticeOpen: false,
      times: new Date(),
      user: {
        dept: {}
      },
      post: [],
      noticeData: [],
      projectData: [],
      noticeList: [],// 数据
      noticeTotal: 0,
      clickNotice: {},
      todoList: [],
      noticeLoading: true,
      taskLoading: true,
      noticeQueryParams: {
        pageNum: 1,
        pageSize: 10
      },
      projectQueryParams: {
        pageNum: 1,
        pageSize: 16
      },
      projectTotal: 0,
      detail: 0,
      finish: 0,
      engineerLevel: '',
      titles: '',
      navItem: [
        {
          id: 1,
          name: '发起流程',
          icon: 'cascader',
          bgColor: '#785aee',
          boxShadow: '0 5px 20px rgba(120,90,238,0.5)',
          path: '/task/process',
          privilege: ['system:deployment:add']
        }, {
          id: 2,
          name: '待办任务',
          icon: 'log',
          bgColor: '#e66794',
          boxShadow: '0 5px 20px rgba(230,103,148,0.5)',
          path: '/task/todo',
          privilege: ['system:deployment:add']
        }, {
          id: 3,
          name: '已办任务',
          icon: 'excel',
          bgColor: '#6389f4',
          boxShadow: '0 5px 20px rgba(99,137,244,0.5)',
          path: '/task/finished',
          privilege: ['system:deployment:add']
        }, {
          id: 4,
          name: '项目台账',
          icon: 'dict',
          bgColor: '#e64c56',
          boxShadow: '0 5px 20px rgba(230,76,86,0.5)',
          path: '/product/account/project',
          privilege: ['oa:project:query']
        }, {
          id: 5,
          name: '车辆管理',
          icon: 'car',
          bgColor: '#eeb62f',
          boxShadow: '0 5px 20px rgba(238,182,47,0.5)',
          path: '/oa/car/index',
          privilege: ['oa:car:list']
        }, {
          id: 6,
          name: '设备管理',
          icon: 'lock',
          bgColor: '#0be1bd',
          boxShadow: '0 5px 20px rgba(11,225,189,0.5)',
          path: '/oa/device/equipment',
          privilege: ['oa:device:list']
        }, {
          id: 7,
          name: '承接合同',
          icon: 'contractSign',
          bgColor: '#F7C59F',
          boxShadow: '0 5px 20px rgba(247,197,159,0.5)',
          path: '/business/contract/contract',
          privilege: ['oa:contract:list']
        }, {
          id: 8,
          name: '人事管理',
          icon: 'dept',
          bgColor: '#20B2AA',
          boxShadow: '0 5px 20px rgba(32,178,170,0.5)',
          path: '/oa/staff/people',
          privilege: ['oa:salary:list']
        },{
          id: 9,
          name: '项目结算',
          icon: 'settle',
          bgColor: '#ff6f61',
          boxShadow: '0 5px 20px rgba(255,111,97,0.5)',
          path: '/product/settle/project',
          privilege: ['oa:settle:list']
        },{
          id: 10,
          name: '借款管理',
          icon: 'borrow',
          bgColor: '#001a6e',
          boxShadow: '0 5px 20px rgba(0,26,110,0.5)',
          path: '/product/budget/borrow',
          privilege: ['oa:borrow:list']
        },
        // {
        //   id: 9,
        //   name: '预算管理',
        //   icon: 'form',
        //   bgColor: '#E64A19',
        //   boxShadow: '0 5px 20px rgba(230,74,25,0.5)',
        //   path: '/budget'
        // }
      ]
    }
  },
  methods: {
    goToPath(path) {
      this.$router.push({ path: path });
    },
    getUserbyId() {
      getUser(this.userId).then(response => {
        this.user = response.data;
        for (let p of response.posts) {
          for (let ids of response.postIds) {
            if (p.postId == ids) {
              this.post.push(p.postName)
            }
          }
        }
        this.getDicts("sys_user_titles").then(res => {
          if (this.user.titles != "" && this.user.titles != null && this.user.titles != undefined) {
            let titles = this.user.titles.split(',');
            let arr = []
            for (let t of titles) {
              arr.push(res.data[t].dictLabel)
            }
            this.user.titles = arr.join(' / ')
          }
        })
      });
    },
    // 获取项目列表
    getProject() {
      listProject(this.projectQueryParams).then(response => {
        this.projectData = response.rows;
        this.projectTotal = response.total;
      })
    },
    // 获取考核待办
    getDetail() {
      this.taskLoading = true;
      todoList({
        pageNum: 1,
        pageSize: 999,
        name: null
      }).then(response => {
        this.detail = response.data.total;
        this.todoList = response.data.records;
        this.taskLoading = false;
      });
    },
    getFinish() {
      finishedList({
        pageNum: 1,
        pageSize: 10,
        name: null,
        category: null,
        key: null,
        tenantId: null,
        deployTime: null,
        derivedFrom: null,
        derivedFromRoot: null,
        parentDeploymentId: null,
        engineVersion: null
      }).then(response => {
        this.finish = response.data.total;
      })
    },
    // 获取列表
    getNotice() {
      listNotice(this.noticeQueryParams).then(response => {
        this.noticeList = response.rows;
        this.noticeTotal = response.total;
        this.noticeLoading = false;
      });
    },
    formartBadge(id) {
      if (id == 2) {
        return this.detail
      } else {
        return null
      }
    },
    handleRowClick(row) {
      this.clickNotice = row;
      this.clickNotice.noticeContent = this.format(row.noticeContent);
      this.noticeOpen = true;
    },
    format(html) {
      var GRT = [
        // img 样式
        ['img', "max-width:100%;height:auto;"],
      ];
      for (let i = 0; i < GRT.length; i++) {
        html = html.replace(new RegExp('<' + GRT[i][0] + '>|<' + GRT[i][0] + ' (.*?)>', 'gi'), function (word) {
          // 分析 dom 上是否带有 style=""
          if (word.indexOf('style=') != -1) {
            var regIn = new RegExp('<' + GRT[i][0] + '(.*?)style="(.*?)"(.*?)(/?)>', 'gi');
            return word.replace(regIn, '<' + GRT[i][0] + '$1style="$2 ' + GRT[i][1] + '"$3$4>');
          } else {
            var regIn = new RegExp('<' + GRT[i][0] + '(.*?)(/?)>', 'gi');
            return word.replace(regIn, '<' + GRT[i][0] + '$1 style="' + GRT[i][1] + '$2">');
          }
        });
      }
      return html;
    },
    handleProcess(row) {
      let path = this.getRoutePath(row);
      getProcessVariables(row.taskId).then(res => {
        this.$router.push({
          path: path,
          query: {
            procInsId: row.procInsId,
            executionId: row.executionId,
            deployId: row.deployId,
            taskId: row.taskId,
            taskName: row.taskName,
            startUser: row.startUserName + '-' + row.startDeptName,
            formId: res.data.formId,
            procDefName: row.procDefName
          }
        })
      })
    },
    getRoutePath(row) {
      let path;
      for (let p of this.publicData.pathRoute) {
        if (p.name == row.procDefName) {
          path = p.path
          break
        } else {
          path = '/flowable/task/todo/detail/index'
        }
      }
      return path
    }
  }
}
</script>
<style scoped lang="scss">
.home {
  padding: 20px 40px;
  background-color: #f0f4f7;
  width: 100%;
  // height: calc(100vh - 100px);
}

.header {
  font-size: 20px;
  line-height: 60px;
}

.nav-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;

  .nav-item {
    background-color: #ffffff;
    // max-width: 240px;
    // width: 220px;
    flex-grow: 1;
    height: 120px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    padding: 0 30px;
    margin-bottom: 10px;

    .nav-logo {
      width: 55px;
      height: 55px;
      border-radius: 10px;
      margin-right: 20px;
      text-align: center;
      line-height: 55px;

      .icon {
        font-size: 27px;
        color: #ffffff;
      }
    }

    .nav-text {
      font-size: 18px;

    }
  }

  .nav-item:hover {
    cursor: pointer;
    box-shadow: 0 0 15px rgba($color: #242d42, $alpha: 0.1);
  }
}

.user-wrapper {
  background-color: #ffffff;
  height: 267px;
  border-radius: 10px;

  .avatar {
    text-align: center;
    // padding: 10px 0;

    .user-avatar {
      width: 100px;
      height: 100px;
      border-radius: 50%;
    }
  }

  .username {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    font-family: '微软雅黑';
  }

  .user-info {
    text-align: center;

    table {
      margin: 0 auto;
    }
  }
}

.notice-content {
  width: 100%;
  height: 400px;
  background-color: #ffffff;
  border-radius: 15px;
  padding: 20px 15px 0;
}

.calendar-warpper {
  padding: 10px;
  width: 100%;
  height: 400px;
  background-color: #ffffff;
  border-radius: 15px;
}

.project-content {
  width: 100%;
  height: 400px;
  background-color: #ffffff;
  border-radius: 15px;
}

.pre-formatted {
  white-space: pre-wrap;
  /* css-2.1, curent FF, Opera, Safari */
  word-wrap: break-word;

  /* Internet Explorer 5.5+ */
  p {
    width: 100% !important;
    height: 100% !important;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

::v-deep .el-calendar-table .el-calendar-day {
  height: 39px;
  text-align: center;
  line-height: 26px;
}

::v-deep .el-calendar-table .el-calendar-day:hover {
  color: #242d42;
}

::v-deep .el-calendar__body {
  padding: 15px 31px 10px;
}

::v-deep .el-calendar__header {
  padding: 20px;
}

::v-deep .el-calendar-table td.is-today {
  background-color: #1890ff;
  border-radius: 10px;
  color: #ffffff;
  box-shadow: 0 0 10px rgba($color: #1890ff, $alpha: 0.2);
}

::v-deep .el-calendar-table td.is-selected {
  // color: #242d42;
}

::v-deep .el-calendar-table td {
  border-right: none;
}

::v-deep .el-table .el-table__header-wrapper th,
.el-table .el-table__fixed-header-wrapper th {
  background-color: #ffffff;
}
</style>