dzhh-frontend/.svn/pristine/53/5383736709760a8d4e3d958ba42a472e2d040568.svn-base

<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="">撤回</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>