<template> <a-card :bordered="false"> <a-spin :spinning="loading"> <a-form-model ref="form" :model="model" :rules="rules"> <a-tabs> <a-tab-pane tab="消息选项" key="1"> <a-form-model-item label="测试APP" prop="app" :labelCol="labelCol" :wrapperCol="wrapperCol"> <a-select v-model="model.app" placeholder="请选择测试APP" :options="appOptions"/> </a-form-model-item> <a-form-model-item label="发送给所有人" prop="sendAll" :labelCol="labelCol" :wrapperCol="wrapperCol"> <a-switch checkedChildren="是" unCheckedChildren="否" v-model="model.sendAll" @change="onSendAllChange"/> </a-form-model-item> <a-form-model-item label="接收人" prop="receiver" :labelCol="labelCol" :wrapperCol="wrapperCol"> <j-select-multi-user v-model="model.receiver" :disabled="model.sendAll" placeholder="请选择接收人"/> </a-form-model-item> <a-form-model-item label="消息内容" prop="content" :labelCol="labelCol" :wrapperCol="wrapperCol"> <a-textarea :rows="5" v-model="model.content" placeholder="请输入消息内容"/> </a-form-model-item> <div style="text-align: center;"> <a-button type="primary" size="large" @click="onSend" style="width: 120px;">发送</a-button> </div> </a-tab-pane> </a-tabs> <a-tabs> <a-tab-pane tab="测试结果(刷新自动清空)" key="1"> <a-table rowKey="id" bordered size="middle" :columns="columns" :dataSource="dataSource" > <div slot="action" slot-scope="text, record"> <template v-if="record.app==='DINGTALK'"> <a-popconfirm v-if="!record.recalled" title="确定吗?" @confirm="handleRecall(record)"> <a @click="null">撤回</a> </a-popconfirm> <span v-else>已撤回</span> </template> <template v-else>-</template> </div> </a-table> </a-tab-pane> </a-tabs> </a-form-model> </a-spin> </a-card> </template> <script> import {loadEnabledTypes} from '@/components/jeecgbiz/thirdApp/JThirdAppButton' import {postAction} from '@/api/manage' import {randomUUID} from '@/utils/util' export default { name: 'ThirdAppMessageTest', data() { return { loading: false, labelCol: {span: 6}, wrapperCol: {span: 12}, model: { sendAll: false, }, enabledTypes: {}, columns: [ { title: '#', dataIndex: '', key: 'rowIndex', width: 60, align: 'center', customRender: (t, r, index) => { return this.dataSource.length - index } }, { title: '测试APP', align: 'center', dataIndex: 'app', customRender: (t, r, index) => { if (t === 'WECHAT_ENTERPRISE') { return '企业微信' } if (t === 'DINGTALK') { return '钉钉' } else { return t } } }, { title: '接收人', align: 'center', dataIndex: 'receiver', customRender: (t, r, index) => { return r.sendAll ? '【全体】' : t } }, { title: '消息内容', align: 'center', dataIndex: 'content' }, { title: 'response', align: 'center', dataIndex: 'response' }, { title: '操作', dataIndex: 'action', align: 'center', fixed: 'right', width: 80, scopedSlots: {customRender: 'action'} } ], dataSource: [], } }, computed: { rules() { return { app: [{required: true, message: '请选择测试APP'}], url: [{required: this.show, message: '请输入菜单路径!'}], receiver: [{required: !this.model.sendAll, message: '请选择接收人'}], content: [{required: true, message: '消息内容不能为空'}] } }, appOptions() { return [ { label: `企业微信${this.enabledTypes.wechatEnterprise ? '' : '(已禁用)'}`, value: 'WECHAT_ENTERPRISE', disabled: !this.enabledTypes.wechatEnterprise }, { label: `钉钉${this.enabledTypes.dingtalk ? '' : '(已禁用)'}`, value: 'DINGTALK', disabled: !this.enabledTypes.dingtalk }, ] }, }, created() { this.loadEnabledTypes() }, methods: { // 获取启用的第三方App async loadEnabledTypes() { this.enabledTypes = await loadEnabledTypes() }, onSendAllChange() { this.$refs.form.clearValidate('receiver') }, onSend() { this.$refs.form.validate((ok, err) => { if (ok) { this.loading = true postAction('/sys/thirdApp/sendMessageTest', this.model).then(({success, result, message}) => { if (success) { let response = '' try { response = JSON.stringify(result) } catch (e) { response = result } this.dataSource.unshift(Object.assign({id: randomUUID()}, this.model, {response})) } else { this.$message.warning(message) } }).finally(() => this.loading = false) } }) }, handleRecall(record) { try { let response = JSON.parse(record.response) postAction('/sys/thirdApp/recallMessageTest', { app: record.app, msg_task_id: response.result }).then(res => { if (res.success) { this.$set(record, 'recalled', true) this.$message.success(res.message) } else { this.$message.warning(res.message) } }).catch(e => this.$message.warning(e.message || e)) } catch (e) { this.$message.warning(e.message || e) } }, }, } </script> <style scoped> </style>