<template> <span v-if="syncToApp || syncToLocal"> <j-third-app-dropdown v-if="enabledTypes.wechatEnterprise" type="wechatEnterprise" name="企微" v-bind="bindAttrs" v-on="bindEvents"/> <j-third-app-dropdown v-if="enabledTypes.dingtalk" type="dingtalk" name="钉钉" v-bind="bindAttrs" v-on="bindEvents"/> </span> <span v-else>未设置任何同步方向</span> </template> <script> import {getAction} from '@/api/manage' import {cloneObject} from '@/utils/util' import JThirdAppDropdown from './JThirdAppDropdown' const backEndUrl = { // 获取启用的第三方App getEnabledType: '/sys/thirdApp/getEnabledType', // 企业微信 wechatEnterprise: { user: '/sys/thirdApp/sync/wechatEnterprise/user', depart: '/sys/thirdApp/sync/wechatEnterprise/depart', }, // 钉钉 dingtalk: { user: '/sys/thirdApp/sync/dingtalk/user', depart: '/sys/thirdApp/sync/dingtalk/depart', } } export default { name: 'JThirdAppButton', components: {JThirdAppDropdown}, props: { // 同步类型,可以是 user、depart bizType: { type: String, required: true, }, // 是否允许同步到第三方APP syncToApp: Boolean, // 是否允许第三方APP同步到本地 syncToLocal: Boolean, // 选择的行 selectedRowKeys: Array, }, data() { return { enabledTypes: {}, attrs: { dingtalk: {}, }, } }, computed: { bindAttrs() { return { syncToApp: this.syncToApp, syncToLocal: this.syncToLocal } }, bindEvents() { return { 'to-app': this.onToApp, 'to-local': this.onToLocal, } }, }, created() { this.loadEnabledTypes() }, methods: { handleMenuClick() { console.log(arguments) }, onToApp(e) { this.doSync(e.type, '/toApp') }, onToLocal(e) { this.doSync(e.type, '/toLocal') }, // 获取启用的第三方App async loadEnabledTypes() { this.enabledTypes = await loadEnabledTypes() }, // 开始同步第三方App doSync(type, direction) { let urls = backEndUrl[type] if (!(urls && urls[this.bizType])) { console.warn('配置出错') return } let url = urls[this.bizType] + direction let selectedRowKeys = this.selectedRowKeys let content = '确定要开始同步全部数据吗?可能花费较长时间!' if (Array.isArray(selectedRowKeys) && selectedRowKeys.length > 0) { content = `确定要开始同步这 ${selectedRowKeys.length} 项吗?` } else { selectedRowKeys = [] } return new Promise((resolve, reject) => { let model = this.$confirm({ title: '同步', content, onOk: () => { model.update({ keyboard: false, okText: '同步中…', cancelButtonProps: {props: {disabled: true}} }) return getAction(url, { ids: selectedRowKeys.join(',') }).then(res => { let options = null if (res.result) { options = { width: 600, title: res.message, content: (h) => { let nodes let successInfo = [ `成功信息如下:`, this.renderTextarea(h, res.result.successInfo.map((v, i) => `${i + 1}. ${v}`).join('\n')), ] if (res.success) { nodes = [ ...successInfo, h('br'), `无失败信息!`, ] } else { nodes = [ `失败信息如下:`, this.renderTextarea(h, res.result.failInfo.map((v, i) => `${i + 1}. ${v}`).join('\n')), h('br'), ...successInfo, ] } return nodes } } } if (res.success) { if (options != null) { this.$success(options) } else { this.$message.success(res.message) } this.$emit('sync-ok') } else { if (options != null) { this.$warning(options) } else { this.$message.warning(res.message) } this.$emit('sync-error') } }).catch(() => model.destroy()).finally(() => { resolve() this.$emit('sync-finally', { type, direction, isToApp: direction === '/toApp', isToLocal: direction === '/toLocal', }) }) }, onCancel() { resolve() }, }) }) }, renderTextarea(h, value) { return h('a-textarea', { props: { value: value, readOnly: true, autosize: {minRows: 5, maxRows: 10}, }, style: { // 关闭textarea的自动换行,使其可以左右滚动 whiteSpace: 'pre', overflow: 'auto', } }) } }, } // 启用了哪些第三方App(在此缓存) let enabledTypes = null // 获取启用的第三方App export async function loadEnabledTypes() { // 获取缓存 if (enabledTypes != null) { return cloneObject(enabledTypes) } else { let {success, result} = await getAction(backEndUrl.getEnabledType) if (success) { // 在此缓存 enabledTypes = cloneObject(result) return result } else { console.warn('getEnabledType查询失败:', res) } } return {} } </script> <style scoped> </style>