resource-admin/src/views/message/message-config/sms/wechat-config.tsx

import {NButton, NDataTable, NFormItem, NInput, NModal, NPageHeader, NSelect, NSpace, useDialog, useMessage} from 'naive-ui'
import {defineComponent, onMounted, reactive, ref} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import {useTabsViewStore} from '@/store/modules/tabsView'
import SaveForm from "@components/save-form";
import Pagination from "@components/pagination";
import {appSendConfigPage, smsConfigDetail} from "@views/music-library/api";
import PushConfigEdit from "@views/message/message-config/sms/modal/push-config-edit";

export default defineComponent({
  name: 'wechat-config',
  setup(props, ctx) {
    const route = useRoute()
    const router = useRouter()
    const dialog = useDialog()
    const message = useMessage()
    const state = reactive({
      loading: false,
      appId: null as any,
      pagination: {
        page: 1,
        rows: 10,
        pageTotal: 0
      },
      searchForm: {
        keyword: null, //关键字
        status: null // 状态
      },
      name: null as any,
      smsConfigId: null as any,
      dataList: [],
      showEdit: false,
      editMode: 'add',
      editRowData: {} as any,
    })
    const tabsViewStore = useTabsViewStore()
    const gotoBack = () => {
      tabsViewStore.closeCurrentTab(route)
      router.push({
        path: '/message/messageConfig'
      })
    }

    onMounted(async () => {
      state.smsConfigId = route.query.id;
      console.log('1111111111', state.smsConfigId)
      if (state.smsConfigId) {
        const {data} = await smsConfigDetail(state.smsConfigId)
        if (data) {
          state.name = data.name
        }
        getList()
      }
    })

    const saveForm = ref()
    const onSearch = () => {
      saveForm.value?.submit()
    }
    const onBtnReset = () => {
      saveForm.value?.reset()
    }

    const onSubmit = () => {
      state.pagination.page = 1
      getList()
    }

    const getList = async () => {
      if (!state.smsConfigId) {
        return
      }
      try {
        state.loading = true
        const {data} = await appSendConfigPage({
          ...state.pagination,
          ...state.searchForm,
        })
        state.pagination.pageTotal = Number(data.total)
        state.dataList = data.rows || []
      } catch {
      }
      state.loading = false
    }


    const columns = (): any => {
      return [
        {
          title: '编号',
          key: 'id'
        },
        {
          title: '平台名称',
          key: 'name'
        },
        {
          title: '应用',
          key: 'name'
        },
        {
          title: '客户端',
          key: 'accessUrl'
        },
        {
          title: '接入地址',
          key: 'accessUrl'
        },
        {
          title: '离线保留时长',
          key: 'accessUrl'
        },
        {
          title: '推送环境',
          key: 'accessUrl'
        },
        {
          title: '接入key',
          key: 'accessUrl'
        },
        {
          title: '接入秘匙',
          key: 'accessUrl'
        },
        {
          title: 'Android拓展参数',
          key: 'accessUrl'
        },
        {
          title: '状态',
          key: 'status'
        },
        // {
        //   title: '操作',
        //   key: 'operation',
        //   fixed: 'right',
        //   render(row: any) {
        //     return (
        //         <NSpace>
        //           <NButton
        //               type="primary"
        //               size="small"
        //               text
        //               onClick={() => {
        //
        //
        //               }}
        //           >
        //             {row.status ? '停用' : '启用'}
        //           </NButton>
        //           <NButton
        //               type="primary"
        //               size="small"
        //               text
        //               onClick={() => {
        //                 state.showEdit = true
        //                 state.editRowData = deepClone(row)
        //                 state.editMode = 'edit'
        //               }}
        //           >
        //             修改
        //           </NButton>
        //           <NButton
        //               type="primary"
        //               size="small"
        //               text
        //               disabled={!!row.status}
        //               onClick={() => {
        //
        //               }}
        //           >
        //             删除
        //           </NButton>
        //         </NSpace>
        //     )
        //   }
        // }
      ]
    }

    return () => (
        <div class="system-menu-container">
          <NPageHeader
              on-back={() => gotoBack()}
              title={state.name}
          ></NPageHeader>
          <div class={['section-container']}>
            <div class="system-menu-container">
              <SaveForm
                  ref={saveForm}
                  model={state.searchForm}
                  onSubmit={onSubmit}
                  saveKey="push-config-app"
                  onSetModel={(val: any) => (state.searchForm = val)}
              >
                <NFormItem label="关键字" path="keyword">
                  <NInput
                      placeholder="应用编号/名称"
                      v-model:value={state.searchForm.keyword}
                      clearable
                  />
                </NFormItem>
                <NFormItem label="状态" path="status">
                  <NSelect
                      v-model:value={state.searchForm.status}
                      clearable
                      options={
                        [
                          {
                            label: '启用',
                            value: 1
                          },
                          {
                            label: '停用',
                            value: 0
                          }
                        ] as any
                      }
                      placeholder="全部状态"
                  />
                </NFormItem>
                <NFormItem>
                  <NSpace>
                    <NButton type="primary" onClick={onSearch}>
                      搜索
                    </NButton>
                    <NButton type="default" onClick={onBtnReset}>
                      重置
                    </NButton>
                  </NSpace>
                </NFormItem>
              </SaveForm>

              <NSpace style={{paddingBottom: '12px'}}>
                <NButton
                    type="primary"
                    onClick={() => {
                      state.showEdit = true
                      state.editMode = 'add'
                    }}
                >
                  新增应用
                </NButton>
              </NSpace>

              <div class={['section-container']}>
                <NDataTable
                    loading={state.loading}
                    columns={columns()}
                    data={state.dataList}
                    rowKey={(row: any) => row.id}
                    scrollX={'1400'}
                ></NDataTable>

                <Pagination
                    v-model:page={state.pagination.page}
                    v-model:pageSize={state.pagination.rows}
                    v-model:pageTotal={state.pagination.pageTotal}
                    onList={getList}
                    sync
                    saveKey="push-config-app"
                ></Pagination>
              </div>
              <NModal
                  blockScroll={true}
                  v-model:show={state.showEdit}
                  preset="dialog"
                  showIcon={false}
                  title={(state.editMode == 'add' ? '新增' : '编辑') + '短信平台'}
                  style={{width: 'auto'}}
              >
                <PushConfigEdit
                    editMode={state.editMode}
                    rowData={state.editRowData}
                    style={{width: '450'}}
                    onClose={() => (state.showEdit = false)}
                    onGetList={() => {
                      state.pagination.page = 1
                      getList()
                    }}
                />
              </NModal>
            </div>
          </div>
        </div>
    )
  }
})