企业微信支持改造

pull/975/head
zhangdaiscott 2023-12-29 21:23:37 +08:00
parent 81381f3b64
commit a588da907d
7 changed files with 615 additions and 8 deletions

View File

@ -6,6 +6,10 @@ enum Api {
editThirdAppConfig = '/sys/thirdApp/editThirdAppConfig',
getThirdConfigByTenantId = '/sys/thirdApp/getThirdConfigByTenantId',
syncDingTalkDepartUserToLocal = '/sys/thirdApp/sync/dingtalk/departAndUser/toLocal',
getThirdUserByWechat = '/sys/thirdApp/getThirdUserByWechat',
wechatEnterpriseToLocal = '/sys/thirdApp/sync/wechatEnterprise/departAndUser/toLocal',
getThirdUserBindByWechat = '/sys/thirdApp/getThirdUserBindByWechat',
deleteThirdAccount = '/sys/thirdApp/deleteThirdAccount',
}
/**
@ -31,3 +35,35 @@ export const getThirdConfigByTenantId = (params) => {
export const syncDingTalkDepartUserToLocal = () => {
return defHttp.get({ url: Api.syncDingTalkDepartUserToLocal }, { isTransformResponse: false });
};
/**
*
* @param params
*/
export const getThirdUserByWechat = () => {
return defHttp.get({ url: Api.getThirdUserByWechat }, { isTransformResponse: false });
};
/**
*
* @param params
*/
export const wechatEnterpriseToLocal = (params) => {
return defHttp.get({ url: Api.wechatEnterpriseToLocal, params }, { isTransformResponse: false });
};
/**
*
* @param params
*/
export const getThirdUserBindByWechat = () => {
return defHttp.get({ url: Api.getThirdUserBindByWechat }, { isTransformResponse: false });
};
/**
* id
* @param params
*/
export const deleteThirdAccount = (params) => {
return defHttp.delete({ url: Api.deleteThirdAccount, params }, { isTransformResponse:false, joinParamsToUrl: true });
};

View File

@ -37,7 +37,7 @@ export const thirdAppFormSchema: FormSchema[] = [
label: 'agentAppSecret',
field: 'agentAppSecret',
component: 'Input',
ifShow: ({ values }) => values.thirdType == 'wechat_enterprise',
ifShow: false,
},{
label: '启用',
field: 'status',

View File

@ -0,0 +1,316 @@
<!--弹窗绑定企业微信页面-->
<template>
<BasicModal @register="registerModal" :width="800" :title="title" destroyOnClose>
<a-spin :spinning="loading">
<div class="we-bind">
<a-row :span="24" class="we-title-background">
<a-col :span="12" class="border-right">
<span>组织用户</span>
</a-col>
<a-col :span="12" class="padding-left">
<span>企业微信用户</span>
</a-col>
</a-row>
<a-row :span="24">
<template v-for="(item, index) in bindData.jwUserDepartVos">
<a-col :span="12" class="border-right padding-left border-bottom">
<div class="we-account">
<a-avatar v-if="item.avatar" :src="getFileAccessHttpUrl(item.avatar)" :size="28"></a-avatar>
<a-avatar v-else :size="28">
{{ item.realName.length > 2 ? item.realName.substr(0, 2) : item.realName }}
</a-avatar>
<a-input style="margin-left: 20px" :value="item.realName" readonly />
</div>
</a-col>
<a-col :span="12" class="padding-left border-bottom">
<div class="we-account">
<span v-if="item.wechatUserId || izBind" class="we-remove"
>{{ item.wechatRealName }} <span style="margin-right: 20px" @click="handleRemoveClick(index, item)">移出</span></span
>
<a-select
v-else
v-model:value="item.wechatUserId"
:options="userList"
:fieldNames="{ label: 'wechatRealName', value: 'wechatUserId' }"
style="width: 200px"
showSearch
@select="(val, option) => handleSelect(val, option, index)"
/>
</div>
</a-col>
</template>
</a-row>
</div>
</a-spin>
<template #footer>
<a-button v-if="!izBind" type="primary" @click="handleSubmit"></a-button>
</template>
</BasicModal>
</template>
<script lang="ts">
import { defineComponent, h, ref } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { getThirdUserByWechat, wechatEnterpriseToLocal, getThirdUserBindByWechat, deleteThirdAccount } from './ThirdApp.api';
import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
import { useMessage } from '@/hooks/web/useMessage';
import { Modal } from 'ant-design-vue';
import { useUserStore } from '@/store/modules/user';
export default defineComponent({
name: 'ThirdAppBindWeEnterpriseModal',
components: { BasicModal },
setup(props, { emit }) {
const title = ref<string>('企业微信绑定');
//
const bindData = ref<any>({});
const loading = ref<boolean>(false);
const btnLoading = ref<boolean>(false);
const { createMessage } = useMessage();
const userList = ref<any>([]);
//
const syncText = ref<string>('');
//
const izBind = ref<boolean>(false);
const userStore = useUserStore();
//
const [registerModal, { closeModal }] = useModalInner(async (data) => {
loading.value = true;
console.log('izBind', izBind);
if (!data.izBind) {
await getUnboundData();
} else {
await getBoundData();
}
izBind.value = data.izBind;
});
/**
* 未绑定的数据
*/
async function getUnboundData() {
await getThirdUserByWechat().then((res) => {
if (res.success) {
let userLists = res.result.userList;
bindData.value = res.result;
userList.value = res.result.userList;
/* if (userLists && userLists.length > 0) {
syncText.value = "";
} else {
syncText.value = "企业微信用户均已同步";
}*/
loading.value = false;
} else {
createMessage.warning(res.message);
loading.value = false;
}
});
}
/**
* 已绑定的数据
*/
async function getBoundData() {
await getThirdUserBindByWechat().then((res) => {
if (res.success) {
bindData.value.jwUserDepartVos = res.result;
loading.value = false;
} else {
createMessage.warn(res.message);
loading.value = false;
}
});
}
/**
* 第三方配置点击事件
*/
async function handleSubmit() {
btnLoading.value = true;
let userList = bindData.value.userList;
//idid,
let params: any = [];
//
for (const item of bindData.value.jwUserDepartVos) {
if (item.wechatUserId) {
userList = userList.filter((a) => a.wechatUserId != item.wechatUserId);
params.push({
wechatUserId: item.wechatUserId,
wechatDepartId: item.wechatDepartId,
wechatRealName: item.wechatRealName,
userId: item.userId,
});
}
}
let text: string = '';
//
if (userList && userList.length > 0) {
for (const item of userList) {
params.push({ wechatUserId: item.wechatUserId, wechatDepartId: item.wechatDepartId, wechatRealName: item.wechatRealName });
}
text = '检测到未绑定的企业微信用户 ' + userList.length + ' 位,平台将会为这 ' + userList.length + ' 位用户创建新的账号';
}
Modal.confirm({
title: '确认同步',
content: text,
okText: '确认',
onOk: () => {
let json = JSON.stringify(params);
console.log('json', json);
wechatEnterpriseToLocal({ jwUserDepartJson: json })
.then((res) => {
let options = {};
if (res.success) {
if (res.result) {
options = {
width: 600,
title: res.message,
content: () => {
let nodes;
let successInfo = [`成功信息如下:`, renderTextarea(h, res.result.successInfo.map((v, i) => `${i + 1}. ${v}`).join('\n'))];
if (res.success) {
nodes = [...successInfo, h('br'), `无失败信息!`];
} else {
nodes = [
`失败信息如下:`,
renderTextarea(h, res.result.failInfo.map((v, i) => `${i + 1}. ${v}`).join('\n')),
h('br'),
...successInfo,
];
}
return nodes;
},
};
}
closeModal();
emit('success', options, res);
}
})
.finally(() => {
btnLoading.value = false;
});
},
});
}
/**
* 下拉框选择事件
*/
function handleSelect(val, option, index) {
bindData.value.jwUserDepartVos[index].wechatUserId = option.wechatUserId;
bindData.value.jwUserDepartVos[index].wechatRealName = option.wechatRealName;
bindData.value.jwUserDepartVos[index].wechatDepartId = option.wechatDepartId;
userList.value = userList.value.filter((item) => item.wechatUserId != option.wechatUserId);
}
/**
* 移出事件
* @param index
* @param item
*/
function handleRemoveClick(index, item) {
if (!izBind.value) {
userList.value.push({
wechatUserId: item.wechatUserId,
wechatRealName: item.wechatRealName,
wechatDepartId: item.wechatDepartId,
});
bindData.value.jwUserDepartVos[index].wechatUserId = '';
bindData.value.jwUserDepartVos[index].wechatRealName = '';
bindData.value.jwUserDepartVos[index].wechatDepartId = '';
} else {
Modal.confirm({
title: '确认取消绑定吗',
okText: '确认',
onOk: async () => {
await deleteThirdAccount({ id: item.thirdId, sysUserId: userStore.getUserInfo.id }).then((res) => {
if (res.success) {
createMessage.success('取消绑定成功!');
getBoundData();
} else {
createMessage.warning(res.message);
}
});
},
});
}
}
function renderTextarea(h, value) {
return h(
'div',
{
id: 'box',
style: {
minHeight: '100px',
border: '1px solid #d9d9d9',
fontSize: '14px',
maxHeight: '250px',
whiteSpace: 'pre',
overflow: 'auto',
padding: '10px',
},
},
value
);
}
return {
title,
registerModal,
handleSubmit,
bindData,
getFileAccessHttpUrl,
loading,
userList,
handleSelect,
handleRemoveClick,
btnLoading,
izBind,
};
},
});
</script>
<style lang="less" scoped>
.we-bind {
overflow-y: auto;
border: 1px rgb(240, 240, 240) solid;
border-bottom: none;
.we-title-background {
background: rgb(252, 252, 252);
height: 40px;
line-height: 40px;
padding: 0 10px;
}
.we-account {
display: flex;
height: 40px;
line-height: 40px;
align-items: center;
}
:deep(.ant-input) {
border: none;
padding: 0;
box-shadow: none;
}
.we-remove {
display: flex;
justify-content: space-between;
width: 100%;
cursor: pointer;
}
.border-right {
border-right: 1px rgb(240, 240, 240) solid;
}
.border-bottom {
border-bottom: 1px rgb(240, 240, 240) solid;
}
.padding-left {
padding-left: 10px;
}
}
</style>

View File

@ -3,14 +3,14 @@
<div class="ding-header">
<ul class="ding-menu-tab">
<li :class="activeKey === 'ding' ? 'active' : ''" @click="dingLiClick('ding')"><a>钉钉集成</a></li>
<li :class="activeKey === 'wechat' ? 'active' : ''" @click="dingLiClick('wechat')"><a>企业微信集成?</a></li>
<li :class="activeKey === 'wechat' ? 'active' : ''" @click="dingLiClick('wechat')"><a>企业微信集成</a></li>
</ul>
</div>
<div v-show="activeKey === 'ding'" class="base-collapse">
<ThirdAppDingTalkConfigForm />
</div>
<div v-show="activeKey === 'wechat'" class="p-5 empty-image">
<a-empty description="暂不支持" :image-style="{ margin: '0 auto', height: '160px' }" />
<div v-show="activeKey === 'wechat'" class="base-collapse">
<ThirdAppWeEnterpriseConfigForm />
</div>
</div>
</template>
@ -18,12 +18,14 @@
<script lang="ts">
import { defineComponent, ref } from 'vue';
import ThirdAppDingTalkConfigForm from './ThirdAppDingTalkConfigForm.vue';
import ThirdAppWeEnterpriseConfigForm from './ThirdAppWeEnterpriseConfigForm.vue';
import { useDesign } from '/@/hooks/web/useDesign';
export default defineComponent({
name: 'ThirdAppConfigList',
components: {
ThirdAppDingTalkConfigForm,
ThirdAppWeEnterpriseConfigForm,
},
setup() {
const { prefixCls } = useDesign('j-dd-container');

View File

@ -25,6 +25,11 @@
//
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
setModalProps({ confirmLoading: true });
if (data.thirdType == 'dingtalk') {
title.value = '钉钉配置';
} else {
title.value = '企业微信配置';
}
//
await resetFields();
let values = await getThirdConfigByTenantId({ tenantId: data.tenantId, thirdType: data.thirdType });

View File

@ -6,7 +6,7 @@
<template #header>
<div style="font-size: 16px"> 1.获取对接信息</div>
</template>
<div class="base-desc">企业微信获取对接信息即可开始集成以及同步通讯录</div>
<div class="base-desc">钉钉开放平台获取对接信息即可开始集成以及同步通讯录</div>
<div style="margin-top: 5px">
<a href='https://help.qiaoqiaoyun.com/expand/dingding.html' target='_blank'>如何获取对接信息?</a>
</div>
@ -24,19 +24,19 @@
<div class="flex-flow">
<div class="base-title">Agentld</div>
<div class="base-message">
<a-input v-model:value="appConfigData.agentId" readonly />
<a-input-password v-model:value="appConfigData.agentId" readonly />
</div>
</div>
<div class="flex-flow">
<div class="base-title">AppKey</div>
<div class="base-message">
<a-input v-model:value="appConfigData.clientId" readonly />
<a-input-password v-model:value="appConfigData.clientId" readonly />
</div>
</div>
<div class="flex-flow">
<div class="base-title">AppSecret</div>
<div class="base-message">
<a-input v-model:value="appConfigData.clientSecret" readonly />
<a-input-password v-model:value="appConfigData.clientSecret" readonly />
</div>
</div>
<div style="margin-top: 20px; width: 100%; text-align: right">
@ -291,4 +291,5 @@
position: relative;
top: 2px
}
:deep(.ant-collapse-borderless >.ant-collapse-item:last-child) {border-bottom-width:1px;}
</style>

View File

@ -0,0 +1,247 @@
<template>
<div class="base-collapse">
<div class="header"> 企业微信集成 </div>
<a-collapse expand-icon-position="right" :bordered="false">
<a-collapse-panel key="1">
<template #header>
<div style="font-size: 16px"> 1.获取对接信息</div>
</template>
<div class="base-desc">从企业微信平台获取对接信息即可开始集成以及同步通讯录</div>
<div style="margin-top: 5px">
<a href="https://help.qiaoqiaoyun.com/expand/dingding.html" target="_blank">如何获取对接信息?</a>
</div>
</a-collapse-panel>
</a-collapse>
<div>
<a-collapse expand-icon-position="right" :bordered="false">
<a-collapse-panel key="2">
<template #header>
<div style="width: 100%; justify-content: space-between; display: flex">
<div style="font-size: 16px"> 2.对接信息录入</div>
</div>
</template>
<div class="flex-flow">
<div class="base-title">Agentld</div>
<div class="base-message">
<a-input-password v-model:value="appConfigData.agentId" readonly />
</div>
</div>
<div class="flex-flow">
<div class="base-title">AppKey</div>
<div class="base-message">
<a-input-password v-model:value="appConfigData.clientId" readonly />
</div>
</div>
<div class="flex-flow">
<div class="base-title">AppSecret</div>
<div class="base-message">
<a-input-password v-model:value="appConfigData.clientSecret" readonly />
</div>
</div>
<div style="margin-top: 20px; width: 100%; text-align: right">
<a-button @click="weEnterpriseEditClick"></a-button>
</div>
</a-collapse-panel>
</a-collapse>
<div class="sync-padding">
<div style="font-size: 16px; width: 100%"> 3.数据同步</div>
<div style="margin-top: 20px" class="base-desc">
从企业微信同步到敲敲云
<a style="margin-left: 10px" @click="seeBindWeChat"></a>
<div style="float: right">
<a-button @loading="btnLoading" @click="thirdUserByWechat"></a-button>
</div>
</div>
</div>
</div>
</div>
<ThirdAppConfigModal @register="registerAppConfigModal" @success="handleSuccess" />
<ThirdAppBindWeEnterpriseModal @register="registerBindAppConfigModal" @success="handleBindSuccess" />
</template>
<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import { getThirdConfigByTenantId } from './ThirdApp.api';
import ThirdAppConfigModal from './ThirdAppConfigModal.vue';
import { useModal } from '/@/components/Modal';
import { useMessage } from '/@/hooks/web/useMessage';
import { getTenantId } from '@/utils/auth';
import ThirdAppBindWeEnterpriseModal from './ThirdAppBindWeEnterpriseModal.vue';
import { Modal } from "ant-design-vue";
export default defineComponent({
name: 'ThirdAppWeEnterpriseConfigForm',
components: {
ThirdAppConfigModal,
ThirdAppBindWeEnterpriseModal,
},
setup() {
const btnLoading = ref<boolean>(false);
//
const appConfigData = ref<any>({
agentId: '',
clientId: '',
clientSecret: '',
agentAppSecret: '',
});
//modal
const [registerAppConfigModal, { openModal }] = useModal();
const [registerBindAppConfigModal, { openModal: openBindModal }] = useModal();
const { createMessage } = useMessage();
/**
* 初始化数据
*
* @param params
*/
async function initThirdAppConfigData(params) {
let values = await getThirdConfigByTenantId(params);
if (values) {
appConfigData.value = values;
}
}
/**
* 企业微信编辑
*/
async function weEnterpriseEditClick() {
let tenantId = getTenantId();
openModal(true, {
tenantId: tenantId,
thirdType: 'wechat_enterprise',
});
}
/**
* 获取企业微信绑定的用户
*/
async function thirdUserByWechat() {
openBindModal(true, { izBind: false });
}
/**
* 成功回调
*/
function handleSuccess() {
let tenantId = getTenantId();
initThirdAppConfigData({ tenantId: tenantId, thirdType: 'wechat_enterprise' });
}
/**
* 绑定成功返回值
*
* @param options
* @param item
*/
function handleBindSuccess(options, item) {
console.log("options:::",options)
console.log("item:::",item)
if (item.success) {
if (options != null) {
Modal.success(options);
} else {
createMessage.warning(item.message);
}
} else {
if (options && options.title) {
Modal.warning(options);
} else {
createMessage.warning({
content: '同步失败,请检查对接信息录入中是否填写正确,并确认是否已开启企业微信配置!',
duration: 5,
});
}
}
}
/**
* 查看已绑定的企业微信
*/
function seeBindWeChat() {
openBindModal(true,{ izBind: true })
}
onMounted(() => {
let tenantId = getTenantId();
initThirdAppConfigData({ tenantId: tenantId, thirdType: 'wechat_enterprise' });
});
return {
appConfigData,
weEnterpriseEditClick,
registerAppConfigModal,
registerBindAppConfigModal,
handleSuccess,
btnLoading,
thirdUserByWechat,
handleBindSuccess,
seeBindWeChat,
};
},
});
</script>
<style lang="less" scoped>
.header {
align-items: center;
box-sizing: border-box;
display: flex;
height: 50px;
justify-content: space-between;
font-weight: 700;
font-size: 18px;
}
.flex-flow {
display: flex;
min-height: 0;
}
.sync-padding {
padding: 12px 0 16px;
}
.base-collapse {
margin-top: 20px;
padding: 0 24px;
font-size: 20px;
.base-desc {
font-size: 14px;
}
.base-title {
width: 100px;
text-align: left;
height: 50px;
line-height: 50px;
}
.base-message {
width: 100%;
height: 50px;
line-height: 50px;
}
:deep(.ant-collapse-header) {
padding: 12px 0 16px;
}
:deep(.ant-collapse-content-box) {
padding-left: 0;
}
}
/*begin 兼容暗夜模式*/
//none
[data-theme='dark'] .base-collapse .ant-collapse {
border: none !important;
}
/*end 兼容暗夜模式*/
/*文档按钮问号样式*/
.sync-text {
margin-left: 2px;
cursor: pointer;
position: relative;
top: 2px;
}
</style>