cd-work-flow-ding/src/views/user/Login.vue

<template>
  <div class="content">
    <div class="main">
      <!-- 待办 头部  -->
      <div class="todoContain">
        <a-card title="待办" style="width: 100%" class="todoTitle">
          <template #extra>
            <a @click.stop.prevent="todo()" class="more">
              <span>更多</span>
            </a>
          </template>
          <!-- 无 待办 -->
          <span v-if="todoList.length == 0">
            <div class="nothing">
              <img src="@assets/noOne.png" alt="?????" class="nothingImg" />
              <p>暂无代办</p>
            </div>
          </span>

          <!-- 待办 -->
          <span v-if="todoList.length > 0">
            <div class="haveSomething">
              <img src="@assets/haveSomething.png" alt="?????" class="haveSomethingImg" />
              <p>
                我的待办
                <a-badge class="numTips"> {{ todoList.length }} </a-badge>
              </p>
            </div>
          </span>
        </a-card>
      </div>

      <!-- OA工作台 -->
      <div class="oaContain">
        <a-card title="OA工作台" style="width: 100%" class="oaTitle">
          <div class="oaButton">
            <a class="oaItem" v-for="(item, index) in activeKeyAll" :key="index.id" @click.prevent="aClick(item)">
              <span>
                <img :src="item.iconAddress" />
              </span>
              <p>{{ item.name }}</p>
            </a>
          </div>
        </a-card>
      </div>

      <!-- 其他弹框 -->

      <a-modal v-model="lcModal.visible" :title="lcModal.Title" :footer="null" :maskClosable="false">
        <component
          :disabled="lcModal.disabled"
          v-if="lcModal.visible"
          :is="lcModal.formComponent"
          :processData="lcModal.processData"
          :isNew="lcModal.isNew"
          @afterSubmit="afterSub"
          @close=";(lcModal.visible = false), (lcModal.disabled = false)"
        >
        </component>
      </a-modal>
    </div>
    <!-- 底部 -->
    <a-layout-footer class="footer">
      上海萃颠信息科技有限公司出品
    </a-layout-footer>
  </div>
</template>

<script>
// 组件中使用映射，所以需要导入
import { mapActions } from 'vuex'
import Vue from 'vue'
import { ACCESS_TOKEN, ENCRYPTED_STRING, USER_INFO } from '@/store/mutation-types'
import api from '@/api'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { activitiMixin } from '@/views/activiti/mixins/activitiMixin'
import JSelectUserByDep from '@/components/jeecgbiz/JSelectUserByDep'
import { getCode } from '../../utils/dingding'

export default {
  loading: true,
  name: 'Login',
  components: {},
  data() {
    return {
      todoList: [],
      activeKeyAll: [],
      url: {
        todoList: '/actTask/todoList',
        doneList: '/actTask/doneList'
      },
      //按钮弹框
      lcModal: {
        title: '',
        visible: false,
        disabled: false,
        formComponent: null,
        isNew: false
      },
      isshow: '0'
    }
  },
  // 页面打开时，默认已登录
  created() {
    Vue.ls.remove(ACCESS_TOKEN)
    //钉钉免登录
    //获取临时授权码
    //  getCode(code=>{
    //    //登录
    //   // 异步操作
    //   this.dingLogin({code:code})
    //     .then(res => {
    //       this.getDataList() // 待办、已办 列表
    //       this.getActiveKeyAll() // OA 4个按钮
    //     })
    //     .catch(err => {
    //       console.log(err)
    //     })
    // })
    // 进入页面自动登录
    this.autoLogin()
      .then(res => {
        this.getDataList() // 待办、已办 列表
      })
      .then(res => {
        this.getActiveKeyAll() // OA 4个按钮
      })
  },

  methods: {
    // init() {
    //   this.getDataList()
    // },
    // 映射store/user.js 中 actions的方法
    ...mapActions(['Login', 'dingLogin']),

    // 自动登录
    async autoLogin() {
      var that = this
      let loginParams = {}
      loginParams.username = 'fenghf'
      loginParams.password = 'fenghf`123456'
      loginParams.slidered = true // 默认滑块
      // 异步操作
      await that
        .Login(loginParams)
        .then(res => {
          console.log('Login拿到token | 登录上啦！')
        })
        .catch(err => {
          console.log(err)
        })
    },

    // 点击全部 跳转页面
    todo() {
      this.$router.push({ name: 'todo' })
      console.log(this.$router)
    },

    // 待办 num
    getDataList() {
      this.postFormAction(this.url.todoList, {}).then(res => {
        if (res.success) {
          this.todoList = res.result || []
          console.log('login 待办num：', this.todoList.length)
          if (this.todoList && this.todoList.length > 0) {
            this.isshow = '1'
          } else {
            this.isshow = '2'
          }
        }
      })
    },

    // 获取 OA 按钮
    getActiveKeyAll() {
      this.postFormAction('/activiti_process/listData', { status: 1, roles: true }).then(res => {
        this.activeKeyAll = []
        if (res.success) {
          var result = res.result || []
          if (result.length > 0) {
            this.activeKeyAll = result
            // this.activeKeyAll.push.apply(this.activeKeyAll,result);
            // console.log(this.activeKeyAll)
            console.log('OA 4个按钮被渲染')
          }
        }
      })
    },

    //OA图标点击事件
    aClick(v) {
      //点击的该项按钮
      console.log(v)
      // this.$refs.modal.add("1")
      if (!v.routeName) {
        this.$message.warning('该流程信息未配置表单，请联系开发人员！')
        return
      }
      if (v.routeName.indexOf('外部表单') != -1) {
        alert('调用其他项目页面')
      } else if (v.routeName.indexOf('自定义') != -1) {
        this.lcModal.disabled = false
        let com = { component: () => import(`@/views/activiti/form/demoForm2`) }
        this.lcModal.formComponent = com.component
        this.lcModal.title = '发起流程：' + v.name
        this.lcModal.isNew = true
        this.lcModal.processData = v
        this.lcModal.visible = true
      } else {
        this.lcModal.disabled = false
        this.lcModal.formComponent = this.getFormComponent(v.routeName).component
        this.lcModal.title = '发起流程：' + v.name
        this.lcModal.isNew = true
        this.lcModal.processData = v
        this.lcModal.visible = true
      }
      console.log('发起', v)
      // this.getDataList()
    },

    //提交后
    afterSub(formData) {
      this.lcModal.visible = false
    }
  }
}
</script>

<style src="@assets/less/overwrite.less" lang="less" scoped></style>
<style lang="less" scoped>
/deep/.ant-card-head-title {
  margin-top: 14px;
}
/deep/.ant-card-body {
  padding: 30px 20px;
}
/deep/.ant-layout-header {
  line-height: 0;
}
/deep/.ant-card-head-title {
  font-size: 18px;
}
.content {
  width: 100%;
  height: 100%;
  .main {
    // OA 工作台
    .oaContain,
    .todoContain {
      border-radius: 10px;
      margin: 15px;
      background-color: #efeeee;
      .oaTitle,
      .todoTitle {
        font-size: 18px;
        font-weight: 700;
        border-radius: 10px;
      }
      .more {
        color: white;
        border: 1px solid rgba(26, 133, 229, 0.1);
        padding: 10px 20px;
        background-color: rgba(26, 133, 229);
        border-radius: 10px;
        letter-spacing: 4px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
      }
      .nothing,
      .haveSomething {
        text-align: center;
        .nothingImg,
        .haveSomethingImg {
          width: 150px;
          height: 150px;
          position: relative;
        }
        p {
          font-size: 14px;
          .numTips {
            margin-top: 10px;
            background-color: red;
            color: white;
            padding: 6px 8px;
            border-radius: 50%;
          }
        }
      }

      // 工作台按钮
      .oaButton {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        text-align: center;
        //四个按钮
        .oaItem {
          width: calc((100% - 60px) / 4);
          display: flex;
          justify-content: space-around;
          flex-direction: column;
          align-items: center;
          // 图
          span {
            width: 74px;
            height: 74px;
            box-shadow: 18px 18px 30px rgba(0, 0, 0, 0.1), -18px -18px 30px rgb(255, 255, 255);
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #efeeee;
            transition: box-shadow 0.2s ease-out;
            position: relative;
            img {
              width: 40px;
              height: 40px;
            }
          }
          // 文字
          p {
            font-size: 14px;
            margin-top: 16px;
            color: rgb(128, 127, 127);
            font-weight: 400;
            letter-spacing: 1px;
          }
        }
      }
    }
  }
}
</style>