|
|
@@ -0,0 +1,556 @@
|
|
|
+<template>
|
|
|
+ <div class="dd-login-page">
|
|
|
+ <div class="dd-login-bg dd-login-bg-left"></div>
|
|
|
+ <div class="dd-login-bg dd-login-bg-right"></div>
|
|
|
+
|
|
|
+ <div class="dd-login-panel">
|
|
|
+ <div class="dd-login-brand">
|
|
|
+ <div class="dd-login-logo">
|
|
|
+ <img alt="logo" src="/img/logo.svg" />
|
|
|
+ </div>
|
|
|
+ <div class="dd-login-brand-text">
|
|
|
+ <h1>{{ isRebackMode ? "审批处理结果" : "钉钉快捷登录" }}</h1>
|
|
|
+ <p>{{ isRebackMode ? "当前审批流程已处理完成" : "正在进入系统，请稍候" }}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="dd-login-card" :class="{ 'dd-login-card-success': isRebackMode }">
|
|
|
+ <div class="dd-login-icon" :class="{ 'is-success': isRebackMode }">
|
|
|
+ <div class="dd-login-icon-ring"></div>
|
|
|
+ <div class="dd-login-icon-core">{{ isRebackMode ? "✓" : "钉" }}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="dd-login-title">{{ isRebackMode ? "审批已处理" : "企业身份校验中" }}</div>
|
|
|
+ <div class="dd-login-subtitle">
|
|
|
+ {{ isRebackMode ? "流程已完成审批处理，你可以返回钉钉继续后续操作。" : "检测到你正在钉钉中打开系统，这里可以作为免登录跳转中转页。" }}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="dd-login-status">
|
|
|
+ <div class="dd-login-status-row">
|
|
|
+ <span class="label">{{ isRebackMode ? "审批结果" : "当前状态" }}</span>
|
|
|
+ <span class="value" :class="{ loading: !isRebackMode }" :style="{
|
|
|
+ color: isRebackMode || loginStatus.includes('成功') ? '#52c41a' : '#1890ff'
|
|
|
+ }">{{ loginStatus }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="dd-login-footer">
|
|
|
+ 安全登录 · 统一认证 · 钉钉快速进入
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import config from "@/config";
|
|
|
+import loginService from "@/api/auth/loginService";
|
|
|
+import userService from "@/api/sys/userService";
|
|
|
+import tenantService from "@/api/sys/tenantService";
|
|
|
+import financeInvoiceService from '@/api/cw/invoice/CwFinanceInvoiceService'
|
|
|
+import FinanceInvoiceService from '@/api/finance/invoice/FinanceInvoiceService'
|
|
|
+import taskService from '@/api/flowable/TaskService'
|
|
|
+import pick from 'lodash.pick'
|
|
|
+export default {
|
|
|
+ name: "DdLogin",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loginStatus: "正在校验身份...",
|
|
|
+ isRebackMode: false
|
|
|
+ };
|
|
|
+ },
|
|
|
+ pgFinanceInvoiceService: null,
|
|
|
+ mounted() {
|
|
|
+
|
|
|
+ this.isRebackMode = this.$route.query.reback != false && this.$route.query.reback != "false";
|
|
|
+
|
|
|
+ if (this.isRebackMode) {
|
|
|
+ this.loginStatus = "审批已处理";
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.pgFinanceInvoiceService = new FinanceInvoiceService()
|
|
|
+ console.log("DdLogin mounted, starting login process...");
|
|
|
+ this.handleLogin()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleLogin() {
|
|
|
+ let nowToken = this.$TOOL.data.get(config.TOKEN);
|
|
|
+ const type = this.$route.query.type;
|
|
|
+
|
|
|
+ //从url的参数获取id，用route获取
|
|
|
+ let ddId = this.$route.query.ddid
|
|
|
+ const infoId = this.$route.query.infoId;
|
|
|
+ if (ddId && infoId) {
|
|
|
+ let params = {
|
|
|
+ ddId: ddId
|
|
|
+ }
|
|
|
+ loginService.ddlogin(params).then(async (res) => {
|
|
|
+ this.$TOOL.data.set(config.TOKEN, res.token);
|
|
|
+ this.$cookies.set(config.TOKEN, res.token, -1);
|
|
|
+ let { user } = await userService.info();
|
|
|
+ this.$TOOL.data.set("USER_INFO", user);
|
|
|
+ this.$store.commit("user/updateUser", user);
|
|
|
+ let isPrimaryTenant = user.tenantDTO.id === "10000";
|
|
|
+ this.$TOOL.data.set(
|
|
|
+ "IS_PRIMARY_TENANT",
|
|
|
+ isPrimaryTenant
|
|
|
+ );
|
|
|
+ if (isPrimaryTenant) {
|
|
|
+ tenantService.list().then((data) => {
|
|
|
+ this.$TOOL.data.set(
|
|
|
+ "TENANT_LIST",
|
|
|
+ data.records
|
|
|
+ );
|
|
|
+ });
|
|
|
+ }
|
|
|
+ let { menuList, permissions, dictList } =
|
|
|
+ await userService.getMenus();
|
|
|
+ if (menuList.length == 0) {
|
|
|
+ this.loading = false;
|
|
|
+ this.$alert(
|
|
|
+ "当前用户无任何菜单权限，请联系系统管理员",
|
|
|
+ "无权限访问",
|
|
|
+ {
|
|
|
+ type: "error",
|
|
|
+ center: true,
|
|
|
+ }
|
|
|
+ );
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ // 布局
|
|
|
+ this.$store.commit("SET_layout", "left");
|
|
|
+ this.$TOOL.data.set("APP_LAYOUT", "left");
|
|
|
+ this.$TOOL.data.set("MENU", menuList);
|
|
|
+ this.$TOOL.data.set("PERMISSIONS", permissions);
|
|
|
+ this.$TOOL.data.set("DICT_LIST", dictList);
|
|
|
+ this.$dictUtils.refreshDictList();
|
|
|
+
|
|
|
+ this.loginStatus = "身份校验成功，正在跳转...";
|
|
|
+ //从url的参数获取redirect
|
|
|
+ if (type == "cw") {
|
|
|
+ financeInvoiceService
|
|
|
+ .queryById(infoId)
|
|
|
+ .then((data) => {
|
|
|
+ this.todo(data)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if (type == "pg") {
|
|
|
+ this.pgFinanceInvoiceService.queryById(infoId).then((data) => {
|
|
|
+ this.todo(data)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ this.loginStatus = "登录请求失败，请检查网络或稍后再试";
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ // 跳转登录
|
|
|
+ this.loginStatus = "登录失败，请联系管理员";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ todo(row) {
|
|
|
+ let cUser = false
|
|
|
+ taskService.getTaskDefInfo({
|
|
|
+ taskId: row.invoiceTaskId
|
|
|
+ }).then((data) => {
|
|
|
+ this.$router.push({
|
|
|
+ path: '/flowable/task/TaskForm',
|
|
|
+ query: {
|
|
|
+ ...pick(data, 'formType', 'formUrl', 'procDefKey', 'taskDefKey', 'procInsId', 'procDefId', 'taskId', 'status', 'title', 'businessId'),
|
|
|
+ isShow: false,
|
|
|
+ formReadOnly: true,
|
|
|
+ formTitle: `${data.taskName}`,
|
|
|
+ cUser: cUser,
|
|
|
+ title: `审批【${data.taskName || ''}】`,
|
|
|
+ routePath: '/ddLogin' // 数据处理后需要跳转的页面路径
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.dd-login-page {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ justify-content: center;
|
|
|
+ min-height: 100vh;
|
|
|
+ min-height: 100dvh;
|
|
|
+ padding: calc(env(safe-area-inset-top, 0px) + 20px) 14px calc(env(safe-area-inset-bottom, 0px) + 20px);
|
|
|
+ overflow: hidden;
|
|
|
+ background: linear-gradient(180deg, #f2f8ff 0%, #e8f3ff 48%, #f8fbff 100%);
|
|
|
+}
|
|
|
+
|
|
|
+.dd-login-bg {
|
|
|
+ position: absolute;
|
|
|
+ border-radius: 50%;
|
|
|
+ filter: blur(2px);
|
|
|
+ pointer-events: none;
|
|
|
+
|
|
|
+ &.dd-login-bg-left {
|
|
|
+ top: -140px;
|
|
|
+ left: -150px;
|
|
|
+ width: 300px;
|
|
|
+ height: 300px;
|
|
|
+ background: radial-gradient(circle, rgba(24, 144, 255, 0.2) 0%, rgba(24, 144, 255, 0) 70%);
|
|
|
+ }
|
|
|
+
|
|
|
+ &.dd-login-bg-right {
|
|
|
+ right: -160px;
|
|
|
+ bottom: -180px;
|
|
|
+ width: 280px;
|
|
|
+ height: 280px;
|
|
|
+ background: radial-gradient(circle, rgba(64, 169, 255, 0.2) 0%, rgba(64, 169, 255, 0) 72%);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.dd-login-panel {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ max-width: 420px;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr;
|
|
|
+ gap: 16px;
|
|
|
+ align-items: stretch;
|
|
|
+ z-index: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.dd-login-brand {
|
|
|
+ padding: 4px 4px 0;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ .dd-login-logo {
|
|
|
+ width: 56px;
|
|
|
+ height: 56px;
|
|
|
+ margin: 0 auto 14px;
|
|
|
+ padding: 10px;
|
|
|
+ border-radius: 16px;
|
|
|
+ background: rgba(255, 255, 255, 0.72);
|
|
|
+ box-shadow: 0 12px 28px rgba(24, 144, 255, 0.1);
|
|
|
+ backdrop-filter: blur(10px);
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: contain;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .dd-login-brand-text {
|
|
|
+ h1 {
|
|
|
+ margin: 0 0 8px;
|
|
|
+ color: #1f2d3d;
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 1.35;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ margin: 0;
|
|
|
+ max-width: 100%;
|
|
|
+ color: #5f6b7a;
|
|
|
+ font-size: 13px;
|
|
|
+ line-height: 1.7;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.dd-login-card {
|
|
|
+ position: relative;
|
|
|
+ padding: 24px 18px 20px;
|
|
|
+ border: 1px solid rgba(24, 144, 255, 0.12);
|
|
|
+ border-radius: 22px;
|
|
|
+ background: rgba(255, 255, 255, 0.88);
|
|
|
+ box-shadow: 0 16px 40px rgba(31, 45, 61, 0.1);
|
|
|
+ backdrop-filter: blur(14px);
|
|
|
+ margin-top: 10%;
|
|
|
+}
|
|
|
+
|
|
|
+.dd-login-card-success {
|
|
|
+ border-color: rgba(82, 196, 26, 0.18);
|
|
|
+ background: rgba(255, 255, 255, 0.92);
|
|
|
+ box-shadow: 0 18px 42px rgba(63, 140, 40, 0.12);
|
|
|
+}
|
|
|
+
|
|
|
+.dd-login-icon {
|
|
|
+ position: relative;
|
|
|
+ width: 76px;
|
|
|
+ height: 76px;
|
|
|
+ margin: 0 auto 16px;
|
|
|
+
|
|
|
+ &-ring {
|
|
|
+ position: absolute;
|
|
|
+ inset: 0;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: linear-gradient(135deg, rgba(24, 144, 255, 0.14), rgba(24, 144, 255, 0.02));
|
|
|
+ border: 1px solid rgba(24, 144, 255, 0.2);
|
|
|
+ }
|
|
|
+
|
|
|
+ &-core {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ width: 48px;
|
|
|
+ height: 48px;
|
|
|
+ border-radius: 15px;
|
|
|
+ background: linear-gradient(135deg, #1890ff 0%, #36c3ff 100%);
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 700;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ box-shadow: 0 14px 28px rgba(24, 144, 255, 0.3);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.dd-login-icon.is-success {
|
|
|
+ .dd-login-icon-ring {
|
|
|
+ background: linear-gradient(135deg, rgba(82, 196, 26, 0.16), rgba(82, 196, 26, 0.02));
|
|
|
+ border-color: rgba(82, 196, 26, 0.24);
|
|
|
+ }
|
|
|
+
|
|
|
+ .dd-login-icon-core {
|
|
|
+ background: linear-gradient(135deg, #52c41a 0%, #95de64 100%);
|
|
|
+ box-shadow: 0 14px 28px rgba(82, 196, 26, 0.28);
|
|
|
+ font-size: 24px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.dd-login-title {
|
|
|
+ margin-bottom: 8px;
|
|
|
+ color: #1f2d3d;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 700;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.dd-login-subtitle {
|
|
|
+ margin: 0 auto 18px;
|
|
|
+ max-width: 420px;
|
|
|
+ color: #6b7785;
|
|
|
+ font-size: 13px;
|
|
|
+ line-height: 1.7;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.dd-login-status {
|
|
|
+ padding: 12px 14px;
|
|
|
+ border-radius: 16px;
|
|
|
+ background: #f6fbff;
|
|
|
+ border: 1px solid #e0f0ff;
|
|
|
+}
|
|
|
+
|
|
|
+.dd-login-status-row {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: flex-start;
|
|
|
+ justify-content: flex-start;
|
|
|
+ gap: 12px;
|
|
|
+ padding: 10px 0;
|
|
|
+ font-size: 13px;
|
|
|
+
|
|
|
+ &+.dd-login-status-row {
|
|
|
+ border-top: 1px solid #eaf4ff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .label {
|
|
|
+ color: #7b8794;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value {
|
|
|
+ color: #1f2d3d;
|
|
|
+ font-weight: 600;
|
|
|
+ word-break: break-word;
|
|
|
+
|
|
|
+ &.loading {
|
|
|
+ color: #1890ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.dd-login-actions {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 12px;
|
|
|
+ margin-top: 18px;
|
|
|
+
|
|
|
+ button {
|
|
|
+ width: 100%;
|
|
|
+ height: 44px;
|
|
|
+ border-radius: 14px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.2s ease;
|
|
|
+ -webkit-tap-highlight-color: transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ .primary-btn {
|
|
|
+ border: none;
|
|
|
+ background: linear-gradient(135deg, #1890ff 0%, #36c3ff 100%);
|
|
|
+ color: #ffffff;
|
|
|
+ box-shadow: 0 12px 24px rgba(24, 144, 255, 0.24);
|
|
|
+ }
|
|
|
+
|
|
|
+ .ghost-btn {
|
|
|
+ border: 1px solid #cfe7ff;
|
|
|
+ background: #ffffff;
|
|
|
+ color: #1890ff;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.dd-login-tips {
|
|
|
+ margin-top: 16px;
|
|
|
+ padding-top: 14px;
|
|
|
+ border-top: 1px dashed #d9ecff;
|
|
|
+}
|
|
|
+
|
|
|
+.tip-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ gap: 8px;
|
|
|
+ color: #73808f;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 1.7;
|
|
|
+
|
|
|
+ &+.tip-item {
|
|
|
+ margin-top: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dot {
|
|
|
+ width: 6px;
|
|
|
+ height: 6px;
|
|
|
+ margin-top: 8px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: #36a3ff;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.dd-login-footer {
|
|
|
+ margin-top: 2px;
|
|
|
+ color: #8d99a8;
|
|
|
+ font-size: 12px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 1.6;
|
|
|
+}
|
|
|
+
|
|
|
+@media (min-width: 768px) {
|
|
|
+ .dd-login-panel {
|
|
|
+ max-width: 960px;
|
|
|
+ grid-template-columns: 1.05fr 0.95fr;
|
|
|
+ gap: 28px;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dd-login-brand {
|
|
|
+ padding: 20px 12px;
|
|
|
+ text-align: left;
|
|
|
+
|
|
|
+ .dd-login-logo {
|
|
|
+ width: 72px;
|
|
|
+ height: 72px;
|
|
|
+ margin: 0 0 24px;
|
|
|
+ padding: 14px;
|
|
|
+ border-radius: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dd-login-brand-text h1 {
|
|
|
+ margin-bottom: 14px;
|
|
|
+ font-size: 38px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dd-login-brand-text p {
|
|
|
+ max-width: 460px;
|
|
|
+ margin: 0;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .dd-login-page {
|
|
|
+ align-items: center;
|
|
|
+ padding: 32px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dd-login-bg {
|
|
|
+ &.dd-login-bg-left {
|
|
|
+ top: -180px;
|
|
|
+ left: -120px;
|
|
|
+ width: 420px;
|
|
|
+ height: 420px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.dd-login-bg-right {
|
|
|
+ right: -160px;
|
|
|
+ bottom: -220px;
|
|
|
+ width: 460px;
|
|
|
+ height: 460px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .dd-login-card {
|
|
|
+ padding: 36px 32px 28px;
|
|
|
+ border-radius: 28px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dd-login-icon {
|
|
|
+ width: 92px;
|
|
|
+ height: 92px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dd-login-actions {
|
|
|
+ flex-direction: row;
|
|
|
+ margin-top: 24px;
|
|
|
+
|
|
|
+ button {
|
|
|
+ width: auto;
|
|
|
+ flex: 1;
|
|
|
+ height: 46px;
|
|
|
+ font-size: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .dd-login-status-row {
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dd-login-title {
|
|
|
+ font-size: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dd-login-subtitle {
|
|
|
+ margin-bottom: 24px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dd-login-footer {
|
|
|
+ margin-top: 18px;
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 480px) {
|
|
|
+ .dd-login-status-row {
|
|
|
+ gap: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dd-login-card {
|
|
|
+ padding-left: 16px;
|
|
|
+ padding-right: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dd-login-brand .dd-login-brand-text h1 {
|
|
|
+ font-size: 22px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
huangguoce