<template>
|
<template v-if="syncToApp || syncToLocal">
|
<JThirdAppDropdown v-if="enabledTypes.wechatEnterprise" type="wechatEnterprise" name="企微" v-bind="bindAttrs" v-on="bindEvents" />
|
<JThirdAppDropdown v-if="enabledTypes.dingtalk" type="dingtalk" name="钉钉" v-bind="bindAttrs" v-on="bindEvents" />
|
</template>
|
<template v-else>未设置任何同步方向</template>
|
</template>
|
|
<script lang="ts" setup>
|
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
import { ref, computed, createVNode, h, resolveComponent } from 'vue';
|
import { defHttp } from '/@/utils/http/axios';
|
import { backEndUrl, getEnabledTypes, doSyncThirdApp } from './jThirdApp.api';
|
import { Modal, Input } from 'ant-design-vue';
|
import JThirdAppDropdown from './JThirdAppDropdown.vue';
|
import { useMessage } from '/@/hooks/web/useMessage';
|
|
const { createMessage, createWarningModal } = useMessage();
|
const props = defineProps({
|
// 同步类型，可以是 user、depart
|
bizType: {
|
type: String,
|
required: true,
|
},
|
// 是否允许同步到第三方APP
|
syncToApp: Boolean,
|
// 是否允许第三方APP同步到本地
|
syncToLocal: Boolean,
|
// 选择的行
|
selectedRowKeys: Array,
|
});
|
// 声明Emits
|
const emit = defineEmits(['sync-ok', 'sync-error', 'sync-finally']);
|
|
const enabledTypes = ref({});
|
// 绑定属性
|
const bindAttrs = computed(() => {
|
return {
|
syncToApp: props.syncToApp,
|
syncToLocal: props.syncToLocal,
|
};
|
});
|
// 绑定方法
|
const bindEvents = computed(() => {
|
return {
|
'to-app': onToApp,
|
'to-local': onToLocal,
|
};
|
});
|
|
// 同步到第三方App
|
function onToApp(e) {
|
doSync(e.type, '/toApp');
|
}
|
|
// 同步到本地
|
function onToLocal(e) {
|
doSync(e.type, '/toLocal');
|
}
|
|
// 获取启用的第三方App
|
async function loadEnabledTypes() {
|
enabledTypes.value = await getEnabledTypes();
|
}
|
|
// 开始同步第三方App
|
function doSync(type, direction) {
|
let urls = backEndUrl[type];
|
if (!(urls && urls[props.bizType])) {
|
console.warn('配置出错');
|
return;
|
}
|
let url = urls[props.bizType] + direction;
|
let selectedRowKeys = props.selectedRowKeys;
|
let content = '确定要开始同步全部数据吗？可能花费较长时间！';
|
|
if (Array.isArray(selectedRowKeys) && selectedRowKeys.length > 0) {
|
content = `确定要开始同步这 ${selectedRowKeys.length} 项吗？`;
|
} else {
|
selectedRowKeys = [];
|
}
|
return new Promise((resolve, reject) => {
|
const model = Modal.confirm({
|
icon: createVNode(ExclamationCircleOutlined),
|
title: '同步',
|
content,
|
onOk: () => {
|
model.update({
|
keyboard: false,
|
okText: '同步中…',
|
cancelButtonProps: { disabled: true },
|
});
|
let params = { ids: selectedRowKeys.join(',') };
|
return defHttp
|
.get({ url, params }, { isTransformResponse: false })
|
.then((res) => {
|
let options = {};
|
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;
|
},
|
};
|
}
|
if (res.success) {
|
if (options != null) {
|
Modal.success(options);
|
} else {
|
createMessage.warning(res.message);
|
}
|
emit('sync-ok');
|
} else {
|
if (options != null) {
|
Modal.warning(options);
|
} else {
|
createMessage.warning(res.message);
|
}
|
emit('sync-error');
|
}
|
})
|
.catch(() => model.destroy())
|
.finally(() => {
|
resolve();
|
emit('sync-finally', {
|
type,
|
direction,
|
isToApp: direction === '/toApp',
|
isToLocal: direction === '/toLocal',
|
});
|
});
|
},
|
onCancel() {
|
resolve();
|
},
|
});
|
});
|
}
|
|
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
|
);
|
}
|
|
// 获取启用的第三方App
|
loadEnabledTypes();
|
</script>
|
|
<style scoped>
|
#box:hover {
|
border-color: #40a9ff;
|
}
|
</style>
|
