frontend/src/views/Pusher/index.vue

<template>
  <div class="h-full  m-4 bg-white rounded-2 shadow-lg p-8 flex flex-col justify-between space-y-4">
    <div class="flex justify-between">
      <a-button type="primary" @click="addModal.visible=true" :disabled="loading">添加</a-button>
      <div class="flex space-x-4">
        <a-input placeholder="请输入关键词" v-model:value="query.keyword"></a-input>
        <a-button type="primary" :disabled="loading" @click="list">搜索</a-button>
      </div>
    </div>
    <div class="h-full border-0 border-t-1 border-solid border-gray-300 pt-4">
      <a-spin :spinning="loading" :indicator="indicator">
        <a-table :dataSource="data.list" :columns="columns" :pagination="false">
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'type'">
              <span>{{WEBSITE_OPTIONS.find(w => w.value === record.type).label}}</span>
            </template>
            <template v-if="column.dataIndex === 'updatedAt'">
              <span>{{moment(record.updatedAt).format('YYYY-MM-DD HH:mm:ss')}}</span>
            </template>
            <template v-if="column.dataIndex === 'option'">
              <span>{{record.option}}</span>
            </template>
          </template>
        </a-table>
      </a-spin>
    </div>
    <a-pagination :disabled="loading" class="text-right" v-model:current="query.page" :total="data.total" show-less-items @change="list"/>
  </div>
  <a-modal v-model:open="addModal.visible" title="添加推送通知" @ok="handleOk" >
    <a-spin :spinning="addModal.loading" :indicator="indicator">
      <a-form
          :model="addModal.data"
          :label-col="{ span: 4 }"
          :wrapper-col="{ span: 16 }"
          autocomplete="off"
          @finish="closeAddModal"
          @finishFailed="closeAddModal"
      >
        <a-form-item label="名称" name="name" :rules="[{ required: true, message: '请填写推送名称' }]">
          <a-input v-model:value="addModal.data.name" />
        </a-form-item>
        <a-form-item label="token" name="option.token" :rules="[{ required: false, message: '请填写token' }]">
          <a-input v-model:value="addModal.data.option.token" />
        </a-form-item>
        <a-form-item label="channel" name="option.channel" :rules="[{ required: false, message: '请填写channel' }]">
          <a-input v-model:value="addModal.data.option.channel" />
        </a-form-item>
        <a-form-item label="备注" name="remark">
          <a-textarea  v-model:value="addModal.data.remark" />
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>
<script setup>

import {h, onMounted, reactive, ref} from "vue";
import {WEBSITE_OPTIONS} from "@/constants/website.js";
import moment from "moment/moment.js";
import {LoadingOutlined} from "@ant-design/icons-vue";
import {AddPusher, ListPushers} from "@/api/pusher.js";
import {PUSHER} from "@/constants/pusher.js";
import {message} from "ant-design-vue";

const loading = ref(false)

onMounted(()=>{
  list()
})


const query = reactive({
  // Website   database.WebsiteType `query:"website,omitempty"` //是什么网站
  // Watch     *bool                `query:"watch,omitempty"`
  // Orderable *bool                `query:"orderable,omitempty"`
  // Keyword   string               `query:"keyword,omitempty"`
  keyword: '',
  page: 1,
  size:10
})


const data = ref({
  total: 0,
  list:[]
})

const list = ()=>{
  loading.value = true
  ListPushers(query).then(res=>{
    data.value = res
  }).catch(err => {
    console.log(err)
  }).finally(()=>{
    loading.value = false
  })
}

const addModal = reactive({
  visible: false,
  data: {
    type:PUSHER.ANPUSHER,
    name:'',
    remark:'',
    option:{
      token:'',
      channel: ''
    }
  },
  loading: false
})

const closeAddModal = ()=>{
  addModal.visible = false
  addModal.data = {
    type:PUSHER.ANPUSHER,
    name:'',
    remark:'',
    option:{
      token:'',
      channel: ''
    }
  }
}

const handleOk = ()=>{
  AddPusher(addModal.data).then(res=>{
    message.success("添加成功")
  }).catch(err => {
    message.error("添加失败")
    console.log(err)
  }).finally(()=>{
    list(false)
    closeAddModal()
  })
}

const columns = [
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '类型',
    dataIndex: 'type',
    key: 'type',
  },
  {
    title: '配置',
    dataIndex: 'option',
    key: 'option',
  },
  {
    title: '更新时间',
    dataIndex: 'updatedAt',
    key: 'updatedAt',
  },
  {
    title: '备注',
    dataIndex: 'remark',
    key: 'remark',
  },
]

const indicator = h(LoadingOutlined, {
  style: {
    fontSize: '32px',
  },
  spin: true,
});

</script>

<style scoped>

</style>