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-modal
      title="登录公司选择"
      :width="450"
      :visible="departVisible"
      :closable="false"
      :maskClosable="false"
    >
      <template slot="footer">
        <a-button type="primary" @click="departOk">确认</a-button>
      </template>

      <a-form>
        <!-- <a-form-item
          :labelCol="{span:4}"
          :wrapperCol="{span:20}"
          style="margin-bottom:10px"
          :validate-status="validate_status">
          <a-tooltip placement="topLeft" >
            <template slot="title">
              <span>您隶属于多部门，请选择登录部门</span>
            </template>
            <a-avatar style="backgroundColor:#87d068" icon="gold" />
          </a-tooltip>
          <a-select @change="departChange" :class="{'valid-error':validate_status=='error'}" placeholder="请选择登录部门" style="margin-left:10px;width: 80%">
            <a-icon slot="suffixIcon" type="gold" />
            <a-select-option
              v-for="d in departList"
              :key="d.id"
              :value="d.orgCode">
              {{ d.departName }}
            </a-select-option>
          </a-select>
        </a-form-item>-->
        <a-form-item
          :labelCol="{span:4}"
          :wrapperCol="{span:20}"
          style="margin-bottom:10px"
          :validate-status="validate_status"
        >
          <a-tooltip placement="topLeft">
            <template slot="title">
              <span>您隶属于多公司，请选择登录公司</span>
            </template>
            <a-avatar style="backgroundColor:#87d068" icon="gold" />
          </a-tooltip>
          <a-select
            @change="departChange"
            :class="{'valid-error':validate_status=='error'}"
            placeholder="请选择登录公司"
            style="margin-left:10px;width: 80%"
          >
            <a-icon slot="suffixIcon" type="gold" />
            <a-select-option v-for="d in orgList" :key="d.id" :value="d.id">{{ d.departName }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
    <!-- 底部 -->
    <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'
import { putAction, postAction, getAction } from '@/api/manage'
import store from '@/store/'

export default {
  loading: true,
  name: 'Login',
  components: {},
  data() {
    return {
      orgList: [],
      validate_status: '',
      departVisible: false,
      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 => {
          const userInfo = res.result.userInfo
          Vue.ls.set(USER_INFO, userInfo, 7 * 24 * 60 * 60 * 1000)
          store.commit('SET_INFO', userInfo)
          if (userInfo) {
            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 => {
          // this.departConfirm(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
    },
    departConfirm(res) {
      if (res.success) {
        console.log('用户信息', res)
        let multi_depart = res.result.multi_depart
        //0:无部门 1:一个部门 2:多个部门
        if (multi_depart == 0) {
          this.loginSuccess()
          this.$notification.warn({
            message: '提示',
            // description: `您尚未归属部门,请确认账号信息`,
            description: `您尚未归属公司,请确认账号信息`,
            duration: 3
          })
        } else if (multi_depart == 2) {
          this.departVisible = true
          // this.currentUsername = this.form.getFieldValue('username')
          this.currentUsername = res.result.userInfo.username
          this.departList = res.result.departs
          this.orgList = res.result.orgList
          console.log('公司', this.orgList)
        } else {
          console.log('登录')
          const userInfo = res.result.userInfo
          Vue.ls.set(USER_INFO, userInfo, 7 * 24 * 60 * 60 * 1000)
          store.commit('SET_INFO', userInfo)
          this.loginSuccess()
        }
      } else {
        this.requestFailed(res)
        this.Logout()
      }
    },
    requestFailed(err) {
      this.$notification['error']({
        message: '登录失败',
        description: ((err.response || {}).data || {}).message || err.message || '请求出现错误，请稍后再试',
        duration: 4
      })
      this.loginBtn = false
    },

    departOk() {
      if (!this.departSelected) {
        this.validate_status = 'error'
        return false
      }
      let obj = {
        orgCode: this.departSelected,
        // username: this.form.getFieldValue('username')
        username: this.currentUsername
      }
      putAction('/sys/selectDepart', obj).then(res => {
        if (res.success) {
          const userInfo = res.result.userInfo
          Vue.ls.set(USER_INFO, userInfo, 7 * 24 * 60 * 60 * 1000)
          store.commit('SET_INFO', userInfo)
          //console.log("---切换组织机构---userInfo-------",store.getters.userInfo.orgCode);
          this.departClear()
          // this.loginSuccess()
        } else {
          this.requestFailed(res)
          this.Logout().then(() => {
            this.departClear()
          })
        }
      })
    },

    departChange(value) {
      this.validate_status = 'success'
      this.departSelected = value
    },
    departClear() {
      this.departList = []
      this.departSelected = ''
      this.currentUsername = ''
      this.departVisible = false
      this.validate_status = ''
      this.orgList = []
    }
  }
}
</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;
        padding: 10px 20px;
        border-radius: 999em;
        border: transparent;
        background-color: rgba(37, 104, 239, 0.8);
        box-shadow: 10px 1px 10px rgba(0, 0, 0, 0.8);
        -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
        -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
      }
      .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% - 10px) / 4);
          display: flex;
          justify-content: space-around;
          flex-direction: column;
          align-items: center;

          // 图
          span {
            width: 70px;
            height: 70px;
            border: transparent;
            background-color: rgba(247, 239, 239, 0.3);
            box-shadow: 2px 8px 2px rgba(0, 0, 0, 0.8);
            -webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
            -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            img {
              width: 36px;
              height: 36px;
            }
          }
          // 文字
          p {
            font-size: 14px;
            margin-top: 16px;
            color: rgb(128, 127, 127);
            font-weight: 400;
            letter-spacing: 1px;
          }
        }
      }
    }
  }
}
</style>