mosr-web/src/views/home/index.vue

<template>
  <div class="home-bg">
    <el-row gutter="20">
      <el-col :xs="24" :sm="24" :md="18" :lg="18" :xl="18">
        <div class="left">
          <h3>我的科创工作</h3>
          <el-row :gutter="20" class="statistics">
            <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-for="(item,index) in list" :key="index">
              <div class="block" :style="{background: item.color}">
                <svg-icon :name="item.icon" :class-name="'home-icon'"/>
                <div class="block-right">
                  <span>{{ item.title }}</span>
                  <span :style="{color: item.textColor}">{{ item.num }}<span>个</span></span>
                </div>
              </div>
            </el-col>
          </el-row>
          <h4>待办 ({{ todoNum }})</h4>
          <fvTable ref="tableIns" class="home-table" :tableConfig="tableConfig">
            <template #empty>
              <el-empty description="暂无待办"/>
            </template>
          </fvTable>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
        <div class="right">
          <div class="right-top ">
            <div>
              <h3>帮助文档</h3>
              <span>查看更多</span>
            </div>
            <el-divider/>
            <div v-for="item in helpDocList" class="help">
              {{ item.title }}
            </div>
          </div>
          <div class="right-top">
            <div>
              <h3>工具下载</h3>
              <span>常用网站</span>
            </div>
            <el-divider/>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="jsx">
import 'element-plus/theme-chalk/display.css'

const router = useRouter()
const list = ref([
  {
    title: '待立项',
    color: '#CEE8FA',
    textColor: '#0043C5',
    icon: 'home1',
    num: 21
  },
  {
    title: '待评审',
    color: '#DCCEFA',
    textColor: '#8600C5',
    icon: 'home2',
    num: 2
  },
  {
    title: '待验收',
    color: '#FAE6CE',
    textColor: '#F47D0E',
    icon: 'home3',
    num: 4
  },
  {
    title: '待归档',
    color: '#CEFAD8',
    textColor: '#01A089',
    icon: 'home4',
    num: 1
  }
])
const helpDocList = ref([
  {
    title: '业务流程'
  },
  {
    title: '业务流程'
  },
  {
    title: '业务流程'
  },
  {
    title: '业务流程'
  }
])
const todoNum = ref(20)
const tableConfig = reactive({
  columns: [
    {
      prop: 'processName',
      label: '流程名称',
      align: 'center',
    },
    {
      prop: 'initiatorName',
      label: '发起人',
      align: 'center',
    },
    {
      prop: 'targetState',
      label: '类型',
      align: 'center',
      showOverflowTooltip: false,
      currentRender: ({row, index}) => {
        if(row.targetState!==null){
          return (<Tag dictType={'todo_type'} value={row.targetState}/>)
        }else {
          return '--'
        }
      }
    },
    {
      prop: 'submitTime',
      label: '提交时间',
      align: 'center',
    },
    {
      prop: 'taskName',
      label: '当前节点',
      align: 'center',
    },
    {
      prop: 'oper',
      label: '操作',
      fixed: 'right',
      width: '150',
      align: 'center',
      showOverflowTooltip: false,
      currentRender: ({row, index}) => {
        return (
            <div>
              <el-button type="primary" link onClick={() => handleView(row)}>查看</el-button>
              <el-button type="primary" link onClick={() => handleEdit(row)}>已读</el-button>
            </div>
        )
      }
    }
  ],
  api: '/workflow/mosr/process/task',
  params: {},
})
const handleView = (row) => {
  console.log('row', row)
  if(row.targetState=='00'&&row.targetId){
    router.push({
      path: '/projectdemand/demanddetail',
      query: {
        id: row.targetId
      }
    })
  }
}
</script>

<style lang="scss" scoped>
@media only screen and (max-width: 767px) {
  .right {
    margin-top: 10px;
  }
  :deep(.el-table) {
    height: 300px !important;
  }


}

@media only screen and (max-width: 1000px) {
  .right {
    margin-top: 10px;
  }
  :deep(.el-table) {
    height: 300px !important;
  }

}

.home-bg {
  height: calc(100vh - 130px);
  max-height: calc(100vh - 96px);
  background-color: #EFEFEF;
  position: absolute;
  left: 18px;
  right: 0;
  overflow-x: hidden;
  overflow-y: auto;

  &::-webkit-scrollbar {
    width: 6px;
  }

  // 滚动条轨道
  &::-webkit-scrollbar-track {
    background: rgb(239, 239, 239);
    border-radius: 2px;
  }

  // 小滑块
  &::-webkit-scrollbar-thumb {
    background: rgba(80, 81, 82, 0.29);
    border-radius: 10px;
  }

  .left {
    //flex: 0.8;
    padding: 15px;
    height: 100%;
    border-radius: 10px;
    background-color: #ffffff;


    .el-table__empty-block {
      .el-empty {
        padding: 10px 0;
      }
    }

    .statistics {
      width: 99%;
      margin-bottom: 20px;

      .block {
        display: flex;
        align-items: center;
        background-color: #e9edf2;
        border-radius: 4px;
        padding: 25px;
        margin-top: 15px;

        .block-right {
          margin-left: 15%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          color: #92969a;
          font-size: 17px;

          > span:first-child {
            white-space: nowrap;
            color: #000000;
            margin-bottom: 10px;
          }

          > span:last-child {
            white-space: nowrap;
            font-size: 20px;
            font-weight: bold;

            > span {
              margin-left: 10px;
            }
          }
        }
      }
    }

  }

  .right {
    height: calc(100vh - 130px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .right-top {
      flex: 0.5;
      padding: 15px;
      border-radius: 10px;
      background-color: #ffffff;
    }

    .right-top {
      flex: 0.48;

      > div:first-child {
        display: flex;
        justify-content: space-between;
        align-items: center;

        h3 {
          white-space: nowrap;
          margin-left: 15px;
        }

        > span {
          white-space: nowrap;
          color: #927648;
          font-size: 14px;
        }
      }

      .el-divider--horizontal {
        height: 3px;
        background: #D9D9D9;
        border: none;
      }

      .help {
        height: 61px;
        line-height: 61px;
        padding-left: 15px;

        &:hover {
          background: #FBFBF7;
        }
      }
    }
  }
}

</style>