317 lines
10 KiB
Vue
317 lines
10 KiB
Vue
|
<!--弹窗绑定企业微信页面-->
|
|||
|
|
<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;
|
|||
|
|
//重新封装数据，只留用户id和企业微信id即可,还需要把没绑定的用户传给后台
|
|||
|
|
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 @border-color-base solid;
|
|||
|
|
border-bottom: none;
|
|||
|
|
.we-title-background {
|
|||
|
|
background: @component-background;
|
|||
|
|
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 @border-color-base solid;
|
|||
|
|
}
|
|||
|
|
.border-bottom {
|
|||
|
|
border-bottom: 1px @border-color-base solid;
|
|||
|
|
}
|
|||
|
|
.padding-left {
|
|||
|
|
padding-left: 10px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|