resource-admin/src/views/message/message-template/message-template-list.tsx

import {defineComponent, onMounted, reactive, ref} from 'vue'
import SaveForm from '@components/save-form'
import {
  DataTableRowKey,
  NButton,
  NCascader,
  NDataTable,
  NDatePicker,
  NDescriptions,
  NDescriptionsItem,
  NFormItem,
  NIcon,
  NImage,
  NInput,
  NModal,
  NSelect,
  NSpace,
  NTag,
  NTooltip,
  useDialog,
  useMessage
} from 'naive-ui'
import Pagination from '@components/pagination'
import TheTooltip from '@components/TheTooltip'
import AddMusic from '@views/music-library/project-music-sheet/module/gym/addMusic'
import {getMapValueByKey, getSelectDataFromObj} from '@/utils/objectUtil'
import {
  appKey, clientType, messageSenderFunctionModule, messageSenderMode,
  musicSheetAudioType,
  musicSheetPaymentType,
  musicSheetSourceType,
  musicSheetType
} from '@/utils/constant'
import {
  musicSheetApplicationExtendCategoryList,
  musicSheetApplicationExtendDel,
  musicSheetApplicationExtendStatus,
  musicSheetApplicationOwnerList,
  musicSheetPageByApplication,
  musicSheetStatusList, sysMessageConfigPage
} from '@views/music-library/api'
import UpdateMusic from '@views/music-library/project-music-sheet/module/gym/updateMusic'
import {subjectPage, sysApplicationPage} from '@views/system-manage/api'
import {filterTimes} from '@/utils/dateUtil'
import deepClone from '@/utils/deep.clone'
import {getOwnerName} from '@views/music-library/musicUtil'
import MusicPreView from '@views/music-library/music-sheet/modal/musicPreView'
import {HelpCircleOutline} from '@vicons/ionicons5'

export default defineComponent({
  name: 'message-template-list',
  props: {
    appKey: {
      type: String,
      default: 'kT'
    }
  },

  setup(props) {
    const dialog = useDialog()
    const message = useMessage()
    const state = reactive({
      loading: false,
      appId: null as any,
      pagination: {
        page: 1,
        rows: 10,
        pageTotal: 0
      },
      searchForm: {
        description: null, //消息名称
        sendMode: null, // 消息类型
        clientId: null, //客户端
        model: null,
        status: null
      },
      subjectList: [],
      dataList: [] as any[],
      musicSheetCategories: [],
      showAddDialog: false,
      showEditDialog: false,
      userIdDisable: true,
      userIdData: [] as any,
      updateRow: {} as any, // 修改选择的行
      applicationId: null, //应用ID
      musicPreview: false,
      musicScore: null as any,
      useProjectData: [] as any // 适用项目行数据
    })

    onMounted(async () => {
      state.loading = true
      // 获取应用APP信息

      try {
        const {data} = await sysApplicationPage({page: 1, rows: 1, appKey: props.appKey})
        const tempList = data.rows || []
        if (!tempList || tempList.length == 0) {
          state.loading = false
          message.error('加载项目信息失败')
          return
        }
        state.appId = tempList[0].id
        state.applicationId = tempList[0].id
      } catch {
      }

      // 加载声部

      try {
        const {data} = await subjectPage({page: 1, rows: 999})
        const tempList = data.rows || []
        tempList.forEach((item: any) => {
          item.label = item.name
          item.value = item.id + ''
        })
        state.subjectList = tempList
      } catch {
      }

      //加载曲目分类列表

      try {
        const {data} = await musicSheetApplicationExtendCategoryList({
          applicationIds: state.appId
        })
        if (data && data.length > 0) {
          state.musicSheetCategories = data[0].musicSheetCategories
        }
      } catch {
      }

      // 加载表格数据
      initUseAppList()
      getList()
    })

    const initUseAppList = async () => {
      try {
        const appKeys = Object.keys(appKey)
        const {data} = await sysApplicationPage({page: 1, rows: 999})
        const tempList = data.rows || []
        state.useProjectData = []
        const filter = tempList.filter((next: any) => {
          return appKeys.includes(next.appKey)
        })
        filter.forEach((item: any) => {
          state.useProjectData.push({
            ...item,
            label: item.appName,
            value: item.id
          })
        })
      } catch {
      }
    }

    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 sysMessageConfigPage({
          ...state.pagination,
          ...state.searchForm,
          appKey: props.appKey,
        })
        state.pagination.pageTotal = Number(data.total)
        state.dataList = data.rows || []
      } catch {
      }
      state.loading = false
    }

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

    const columns = (): any => {
      return [
        {
          title: '消息名称',
          key: 'description'
        },
        {
          title: '详细类型',
          key: 'sendMode',
          render: (row: any) => {
            return (
                <div>
                  {getMapValueByKey(row.sendMode, new Map(Object.entries(messageSenderMode)))}
                </div>
            )
          }
        },
        {
          title: '客户端',
          key: 'clientId',
          render: (row: any) => {
            return (
                <div>
                  {getMapValueByKey(row.clientId, new Map(Object.entries(clientType)))}
                </div>
            )
          }
        },
        {
          title: '功能模块',
          key: 'messageType'
        },
        {
          title: '触发条件',
          key: 'triggerCondition'
        },
        {
          title: '消息模板',
          key: 'content'
        },
        {
          title: '示例',
          key: 'contentExample'
        },
        {
          title: '更新人',
          key: 'operatorName'
        },
        {
          title: '更新时间',
          key: 'updateTime'
        },
        {
          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
                      // v-auth="musicSheetApplicationExtend/status1751235150422736897"
                      onClick={() => onChangeStatus(row)}
                  >
                    {row.status ? '停用' : '启用'}
                  </NButton>
                </NSpace>
            )
          }
        }
      ]
    }

    return () => {
      return (
          <div class="system-menu-container">
            <SaveForm
                ref={saveForm}
                model={state.searchForm}
                onSubmit={onSubmit}
                saveKey="message-template"
                onSetModel={(val: any) => (state.searchForm = val)}
            >
              <NFormItem label="短信名称" path="description">
                <NInput
                    placeholder="请输入短信名称"
                    v-model:value={state.searchForm.description}
                    clearable
                />
              </NFormItem>
              <NFormItem label="短信类型" path="sendMode">
                <NSelect
                    placeholder="全部类型"
                    v-model:value={state.searchForm.sendMode}
                    options={getSelectDataFromObj(messageSenderMode)}
                    clearable
                />
              </NFormItem>
              <NFormItem label="客户端" path="clientId">
                <NSelect
                    placeholder="请选择所属项目"
                    v-model:value={state.searchForm.clientId}
                    options={getSelectDataFromObj(clientType)}
                    clearable
                />
              </NFormItem>
              <NFormItem label="功能模块" path="model">
                <NSelect
                    filterable
                    placeholder="全部功能模块"
                    options={getSelectDataFromObj(messageSenderFunctionModule)}
                    clearable
                ></NSelect>
              </NFormItem>
              <NFormItem label="状态" path="status">
                <NSelect
                    v-model:value={state.searchForm.status}
                    placeholder="请选择状态"
                    options={
                      [
                        {
                          label: '启用',
                          value: true
                        },
                        {
                          label: '停用',
                          value: false
                        }
                      ] as any
                    }
                    clearable
                />
              </NFormItem>
              <NFormItem>
                <NSpace>
                  <NButton type="primary" onClick={onSearch}>
                    搜索
                  </NButton>
                  <NButton type="default" onClick={onBtnReset}>
                    重置
                  </NButton>
                </NSpace>
              </NFormItem>
            </SaveForm>

            <div class={['section-container']}>
              <NDataTable
                  loading={state.loading}
                  columns={columns()}
                  data={state.dataList}
                  rowKey={(row: any) => row.applicationExtendId}
                  // onUpdateCheckedRowKeys={handleCheck}
                  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="message-template"
              ></Pagination>
            </div>
          </div>
      )
    }
  }
})