<script lang="ts" setup>
|
import { onMounted, reactive, toRefs } from 'vue';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { useModal } from '@jnpf/ui/modal';
|
|
import { LoadingOutlined } from '@ant-design/icons-vue';
|
import dayjs from 'dayjs';
|
|
import { getOrganizeSyncList } from '#/api/permission/organize';
|
import { clearAllSyn, getSocialsConfig, getSynData, testDing, updateSocialsConfig } from '#/api/system/sysConfig';
|
import { $t } from '#/locales';
|
|
import CountModal from './CountModal.vue';
|
import SyncModal from './SyncModal.vue';
|
|
interface State {
|
baseForm: any;
|
btnLoading: boolean;
|
testDingLoading: boolean;
|
eventsColumns: any[];
|
resultsColumns: any[];
|
eventsList: any[];
|
resultsList: any[];
|
synData: any;
|
orgOptions: any[];
|
}
|
|
defineOptions({ name: 'IntegrationCenterDingTalk' });
|
|
const state = reactive<State>({
|
baseForm: {},
|
btnLoading: false,
|
testDingLoading: false,
|
eventsColumns: [
|
{ title: '', dataIndex: 'select', width: 50, align: 'center' },
|
{ title: '触发事件', dataIndex: 'title' },
|
{ title: '描述', dataIndex: 'desc' },
|
],
|
resultsColumns: [
|
{ title: '同步类型', dataIndex: 'synType' },
|
{ title: '总数', dataIndex: 'recordTotal' },
|
{ title: '同步成功数', dataIndex: 'synSuccessCount' },
|
{ title: '同步失败数', dataIndex: 'synFailCount' },
|
{ title: '未同步数', dataIndex: 'unSynCount' },
|
{ title: '同步时间', dataIndex: 'synDate' },
|
{ title: '操作', dataIndex: 'action', width: 50 },
|
],
|
eventsList: [
|
{ select: false, title: '启用同步组织', desc: '新增、删除、修改组织信息触发同步组织事件' },
|
{ select: false, title: '启用同步用户', desc: '新增、删除、修改用户信息触发同步用户事件' },
|
],
|
resultsList: [
|
{ recordTotal: '', synDate: '', synFailCount: '', synSuccessCount: '', synType: '组织', unSynCount: '' },
|
{ recordTotal: '', synDate: '', synFailCount: '', synSuccessCount: '', synType: '用户', unSynCount: '' },
|
],
|
synData: {},
|
orgOptions: [],
|
});
|
const { baseForm, btnLoading, testDingLoading, eventsColumns, resultsColumns, eventsList, resultsList, orgOptions } = toRefs(state);
|
const { createConfirm, createMessage } = useMessage();
|
const [registerModal, { openModal }] = useModal();
|
const [registerCountModal, { openModal: openCountModal }] = useModal();
|
|
function initData() {
|
state.testDingLoading = false;
|
getOrgOptions();
|
getSocialsConfigs();
|
getSynDataFun(2);
|
}
|
function getSocialsConfigs() {
|
getSocialsConfig().then((res) => {
|
state.baseForm = res.data;
|
state.eventsList[0].select = !!state.baseForm.dingSynIsSynOrg;
|
state.eventsList[1].select = !!state.baseForm.dingSynIsSynUser;
|
});
|
}
|
function getOrgOptions() {
|
getOrganizeSyncList({ parentId: '0' }).then((res) => {
|
state.orgOptions = res.data.list || [];
|
});
|
}
|
function handleRelieve() {
|
if (state.btnLoading) return;
|
createConfirm({
|
iconType: 'warning',
|
title: '解除确认',
|
content: '确定解除当前选中组织的同步关系?',
|
onOk: () => {
|
clearAllSyn(2).then((res) => {
|
createMessage.success(res.msg);
|
initData();
|
});
|
},
|
});
|
}
|
function handleSubmit() {
|
state.baseForm.dingSynIsSynOrg = state.eventsList[0].select ? 1 : 0;
|
state.baseForm.dingSynIsSynUser = state.eventsList[1].select ? 1 : 0;
|
createConfirm({
|
iconType: 'warning',
|
title: $t('common.tipTitle'),
|
content: '您确定要保存，是否继续?',
|
onOk: () => {
|
state.btnLoading = true;
|
updateSocialsConfig(state.baseForm)
|
.then((res) => {
|
createMessage.success(res.msg);
|
state.btnLoading = false;
|
initData();
|
})
|
.catch(() => {
|
state.btnLoading = false;
|
});
|
},
|
});
|
}
|
|
function checkDing() {
|
state.testDingLoading = true;
|
const data = {
|
dingAgentId: state.baseForm.dingAgentId,
|
dingSynAppKey: state.baseForm.dingSynAppKey,
|
dingSynAppSecret: state.baseForm.dingSynAppSecret,
|
};
|
testDing(data)
|
.then((res) => {
|
createMessage.success(res.msg);
|
state.testDingLoading = false;
|
})
|
.catch(() => {
|
state.testDingLoading = false;
|
});
|
}
|
function handleSync(record) {
|
if (!state.baseForm.dingDepartment) return createMessage.warning('请选择组织');
|
if (!state.baseForm.dingDisabled && record.synType != '组织') return createMessage.warning('请先同步组织数据');
|
state.synData = record;
|
openModal(true, state.synData);
|
}
|
function getSynDataFun(type) {
|
getSynData(type).then((res) => {
|
state.resultsList = res.data.map((o) => ({ loading: false, ...o }));
|
});
|
}
|
function updateSyncData(data) {
|
state.synData = data;
|
getSocialsConfigs();
|
}
|
function handleFailCount(record, resultType, count) {
|
if (!count) return;
|
const synType = record.synType == '组织' ? 1 : 2;
|
openCountModal(true, { synType, resultType });
|
}
|
|
onMounted(() => {
|
initData();
|
});
|
</script>
|
<template>
|
<div class="jnpf-content-wrapper">
|
<div class="jnpf-content-wrapper-center !overflow-auto bg-white">
|
<a-form :colon="false" label-align="right" :label-col="{ style: { width: '80px' } }" class="right-board-form h-full !p-[30px]">
|
<JnpfGroupTitle class="-mt-[20px] mb-[20px]" content="钉钉同步配置" />
|
<a-row :gutter="20">
|
<a-col :span="12" :offset="6" :pull="6">
|
<a-form-item label="企业号Id">
|
<a-input v-model:value="baseForm.dingAgentId" allow-clear placeholder="请输入AgentId" />
|
</a-form-item>
|
</a-col>
|
<a-col :span="12" :offset="6" :pull="6">
|
<a-form-item label="应用凭证">
|
<a-input v-model:value="baseForm.dingSynAppKey" allow-clear placeholder="请输入AppKey" />
|
</a-form-item>
|
</a-col>
|
<a-col :span="12" :offset="6" :pull="6">
|
<a-form-item label="凭证密钥">
|
<a-input v-model:value="baseForm.dingSynAppSecret" allow-clear placeholder="请输入AppSecret">
|
<template #addonAfter>
|
<LoadingOutlined class="mr-[5px]" v-if="testDingLoading" />
|
<span class="cursor-pointer" @click="checkDing">连接测试</span>
|
</template>
|
</a-input>
|
</a-form-item>
|
</a-col>
|
<a-col :span="12" :offset="6" :pull="6">
|
<a-form-item label="同步反馈">
|
<div :class="{ 'mr-[-90px] flex': baseForm.dingDisabled }">
|
<JnpfSelect v-model:value="baseForm.dingDepartment" :options="orgOptions" allow-clear show-search :disabled="!!baseForm.dingDisabled" />
|
<a-button type="link" color="error" class="ml-[2px]" v-if="baseForm.dingDisabled" @click="handleRelieve">解除同步</a-button>
|
</div>
|
</a-form-item>
|
</a-col>
|
<a-col :span="24">
|
<a-form-item label=" ">
|
<div class="mb-[10px] mt-[-12px]">选择一个组织作为最高级组织进行数据同步，同步成功后该组织不可修改。</div>
|
<a-table bordered :data-source="resultsList" :columns="resultsColumns" :pagination="false" size="small">
|
<template #bodyCell="{ column, record }">
|
<template v-if="column.dataIndex === 'synFailCount'">
|
<p :class="{ 'link-text': record.synFailCount }" @click="handleFailCount(record, 2, record.synFailCount)">
|
{{ record[column.dataIndex] }}
|
</p>
|
</template>
|
<template v-if="column.dataIndex === 'unSynCount'">
|
<p :class="{ 'link-text': record.unSynCount }" @click="handleFailCount(record, 0, record.unSynCount)">
|
{{ record[column.dataIndex] }}
|
</p>
|
</template>
|
<template v-if="column.dataIndex === 'synDate'">
|
<p>{{ record.synDate ? dayjs(record.synDate).format('YYYY-MM-DD HH:mm:ss') : '' }}</p>
|
</template>
|
<template v-if="column.dataIndex === 'action'">
|
<a-button class="action-btn" type="link" @click="handleSync(record)" size="small">同步</a-button>
|
</template>
|
</template>
|
</a-table>
|
</a-form-item>
|
</a-col>
|
</a-row>
|
<a-form-item label="触发事件">
|
<a-table bordered :data-source="eventsList" :columns="eventsColumns" :pagination="false" size="small">
|
<template #bodyCell="{ column, record }">
|
<template v-if="column.dataIndex === 'select'">
|
<a-checkbox v-model:checked="record.select" />
|
</template>
|
</template>
|
</a-table>
|
</a-form-item>
|
<a-form-item label=" ">
|
<a-button type="primary" @click.prevent="handleSubmit" :loading="btnLoading">保存</a-button>
|
</a-form-item>
|
</a-form>
|
</div>
|
<SyncModal :type="2" :department-id="baseForm.dingDepartment" @register="registerModal" @update="updateSyncData" />
|
<CountModal :type="2" @register="registerCountModal" />
|
</div>
|
</template>
|
