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

import {defineComponent, onMounted, reactive, ref} from 'vue'
import SaveForm from '@components/save-form'
import {DataTableRowKey, NButton, NDataTable, NDatePicker, NFormItem, NInput, NModal, NSelect, NSpace, NTag, useDialog, useMessage} from 'naive-ui'
import Pagination from '@components/pagination'
import {getMapValueByKey, getSelectDataFromObj} from '@/utils/objectUtil'
import {appKey, clientType, messageSenderFunctionModule, messageSenderMode} from '@/utils/constant'
import {
  musicSheetApplicationExtendCategoryList,
  musicSheetApplicationExtendStatus,
  musicSheetRemove,
  musicSheetStatusList,
  smsConfigPage, smsConfigRemove,
  smsConfigStatus,
  sysMessageConfigPage
} from '@views/music-library/api'
import {subjectPage, sysApplicationPage} from '@views/system-manage/api'
import {filterTimes, getTimes} from "@/utils/dateUtil";
import MusicPreView from "@views/music-library/music-sheet/modal/musicPreView";
import SmsConfigEdit from "@views/message/message-config/sms/modal/sms-config-edit";
import deepClone from "@/utils/deep.clone";
import {useRouter} from "vue-router";
import TheTooltip from "@components/TheTooltip";
import {getOwnerName} from "@views/music-library/musicUtil";

export default defineComponent({
  name: 'sms-config',

  setup(props) {
    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 // 状态
      },
      dataList: [],
      showEdit: false,
      editMode: 'add',
      editRowData: {} as any,
    })

    onMounted(async () => {
      getList()
    })


    const saveForm = ref()

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

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

    const checkedRowKeysRef = ref<DataTableRowKey[]>([])
    const handleCheck = (rowKeys: DataTableRowKey[]) => {
      checkedRowKeysRef.value = rowKeys
    }

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

    const onChangeStatus = (row: any) => {
      const statusStr = row.status ? '停用' : '启用'
      dialog.warning({
        title: '提示',
        content: `是否${statusStr}？`,
        positiveText: '确定',
        negativeText: '取消',
        onPositiveClick: async () => {
          try {
            await smsConfigStatus({
              id: row.id,
              status: !row.status
            })
            getList()
            message.success(`${statusStr}成功`)
          } catch {
          }
        }
      })
    }

    const onRmove = (row: any): void => {
      dialog.warning({
        title: '提示',
        content: `删除"${row.name}"，是否继续？`,
        positiveText: '确定',
        negativeText: '取消',
        onPositiveClick: async () => {
          try {
            await smsConfigRemove(row.id)
            getList()
            message.success('删除成功')
          } catch {
          }
        }
      })
    }

    const columns = (): any => {
      return [
        {
          title: '编号',
          key: 'id',
        },
        {
          title: '平台名称',
          key: 'name'
        },
        {
          title: '平台标识',
          key: 'sender'
        },
        {
          title: '接入地址',
          key: 'accessUrl'
        },
        {
          title: '接入账号',
          key: 'account'
        },
        {
          title: '接入密码',
          key: 'password'
        },
        {
          title: '拓展参数',
          key: 'extendData',
          render: (row: any) => {
            return <TheTooltip content={row.extendData}/>
          }
        },
        {
          title: '状态',
          key: 'status',
          render(row: any) {
            return (
                <NTag type={row.status ? 'primary' : 'default'}>{row.status ? '启用' : '停用'}</NTag>
            )
          }
        },
        {
          title: '操作',
          key: 'operation',
          fixed: 'right',
          render(row: any) {
            return (
                <NSpace>
                  <NButton
                      type="primary"
                      size="small"
                      text
                      onClick={() => {
                        router.push({
                          path: '/message/messageConfigApp',
                          query: row.id
                        })
                      }}
                  >
                    应用详情
                  </NButton>
                  <NButton
                      type="primary"
                      size="small"
                      text
                      onClick={() => onChangeStatus(row)}
                  >
                    {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={() => onRmove(row)}
                  >
                    删除
                  </NButton>
                </NSpace>
            )
          }
        }
      ]
    }

    return () => {
      return (
          <div class="system-menu-container">
            <SaveForm
                ref={saveForm}
                model={state.searchForm}
                onSubmit={onSubmit}
                saveKey="sms-config"
                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="sms-config"
              ></Pagination>
            </div>
            <NModal
                blockScroll={true}
                v-model:show={state.showEdit}
                preset="dialog"
                showIcon={false}
                title={(state.editMode == 'add' ? '新增' : '编辑') + '短信平台'}
                style={{width: 'auto'}}
            >
              <SmsConfigEdit
                  editMode={state.editMode}
                  rowData={state.editRowData}
                  style={{width: '700px'}}
                  onClose={() => (state.showEdit = false)}
                  onGetList={() => {
                    state.pagination.page = 1
                    getList()
                  }}
              />
            </NModal>
          </div>
      )
    }
  }
})