resource-admin/src/views/music-library/project-music-sheet/module/kt/music-sheet-kt.tsx

import {defineComponent, onMounted, reactive, ref} from "vue";
import SaveForm from "@components/save-form";
import {
  DataTableRowKey,
  NButton,
  NCascader,
  NDataTable,
  NDatePicker,
  NDescriptions,
  NDescriptionsItem,
  NFormItem,
  NImage,
  NInput,
  NModal,
  NSelect,
  NSpace,
  NTag,
  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/kt/addMusic";
import UpdateMusic from "@views/music-library/project-music-sheet/module/kt/updateMusic";
import {musicSheetApplicationExtendCategoryList, musicSheetApplicationExtendStatus, musicSheetApplicationOwnerList, musicSheetPageByApplication, musicSheetStatusList} from "@views/music-library/api";
import {getMapValueByKey, getSelectDataFromObj} from "@/utils/objectUtil";
import {musicSheetAudioType, musicSheetSourceType, musicSheetType} from "@/utils/constant";
import {sysApplicationPage} from "@views/menu-manage/api";
import {subjectPage} from "@views/system-manage/api";
import {filterTimes} from "@/utils/dateUtil";

export default defineComponent({
  name: 'project-music-sheet-KT',
  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: {
        keyword: null,
        applicationId: null, //应用ID
        musicSheetType: null, //曲目类型(SINGLE:单曲 CONCERT:合奏)
        subjectId: null, //声部ID
        subjectIds: null, //曲目声部ID集合
        musicCategoryIds: null, //曲目分类ID
        status: null, //曲目状态（0：停用，1：启用）
        sourceType: null, //来源类型/作者属性(PLATFORM: 平台; ORG: 机构; PERSON: 个人)
        paymentType: null, //收费类型(FREE:免费;VIP:会员;CHARGE:单曲收费)
        userId: null, //所属人
        musicCategoryId: null, //曲目分类ID
        times: null, // 上传时间
        // startTime: null, //上传时间（年月日）
        // endTime: null, //上传时间（年月日）
        audioType: null, //音频类型(HOMEMODE: 自制 COMMON: 普通)
        exquisiteFlag: null, //精品标志
        topFlag: null, //是否置顶(0:否;1:是)
        availableType: null, //可用途径 ORG 机构 PLATFORM 平台
        appAuditFlag: null, //是否审核版本
        detailFlag: null, //是否查询详情
      },
      subjectList: [],
      dataList: [] as any[],
      musicSheetCategories: [],
      showAddDialog: false,
      showEditDialog: false,
      userIdDisable: true,
      userIdData: [] as any,
      updateRow: {} as any, // 修改选择的行
    })

    onMounted(async () => {
      state.loading = true
      // 获取应用APP信息
      {
        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.searchForm.applicationId = tempList[0].id
      }

      // 加载声部
      {
        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 {
        }
      }

      //加载曲目分类列表
      {
        const {data} = await musicSheetApplicationExtendCategoryList({applicationIds: state.appId})
        if (data && data.length > 0) {
          state.musicSheetCategories = data[0].musicSheetCategories
        }
      }

      // 加载表格数据
      {
        getList()
      }
      state.loading = false
    })

    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 musicSheetPageByApplication({
          ...state.pagination,
          ...state.searchForm,
          ...filterTimes(state.searchForm.times, ['startTime', 'endTime']),
        })
        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.id,
              status: !row.status
            })
            getList()
            message.success(`${statusStr}成功`)
          } catch {
          }
        }
      })
    }


    const onBatchChangeStatus = (status: boolean) => {
      const length = checkedRowKeysRef.value.length;
      if (length == 0) {
        message.warning("未选择数据")
      }
      const statusStr = !status ? '停用' : '启用'
      dialog.warning({
        title: '提示',
        content: `是否${statusStr}` + length + `条数据？`,
        positiveText: '确定',
        negativeText: '取消',
        onPositiveClick: async () => {
          try {
            await musicSheetApplicationExtendStatus({
              ids: checkedRowKeysRef.value.join(','),
              status: status
            })
            getList()
            message.success(`${statusStr}成功`)
          } catch {
          }
        }
      })
    }

    const columns = (): any => {
      return [
        {
          type: 'selection'
        },
        {
          title: '曲目信息',
          key: 'id',
          render: (row: any) => (
              <>
                <NDescriptions labelPlacement="left" column={1}>
                  <NDescriptionsItem label="曲目名称">
                    <TheTooltip content={row.name}/>{' '}
                  </NDescriptionsItem>
                  <NDescriptionsItem label="曲目编号">{row.id}</NDescriptionsItem>
                </NDescriptions>
              </>
          )
        },
        {
          title: '曲目来源',
          key: 'musicSheetCategoriesName',
          render: (row: any) => (
              <>
                <NDescriptions labelPlacement="left" column={1}>
                  <NDescriptionsItem label="曲目来源">
                    {getMapValueByKey(row.sourceType, new Map(Object.entries(musicSheetSourceType)))}
                  </NDescriptionsItem>
                  <NDescriptionsItem label="所属人">{row.userName}</NDescriptionsItem>
                </NDescriptions>
              </>
          )
        },
        {
          title: '封面图',
          key: 'musicCover',
          render(row: any): JSX.Element {
            return <NImage width={60} height={60} src={row.musicCover}/>
          }
        },
        {
          title: '曲目类型',
          key: 'musicSheetType',
          render: (row: any) => {
            return <div>{getMapValueByKey(row.musicSheetType, new Map(Object.entries(musicSheetType)))}</div>
          }
        },
        {
          title: '伴奏类型',
          key: 'audioType',
          render: (row: any) => {
            return <div>{getMapValueByKey(row.audioType, new Map(Object.entries(musicSheetAudioType)))}</div>
          }
        },
        {
          title: '可用声部',
          key: 'subjectNames'
        },
        {
          title: '曲目分类',
          key: 'musicSheetCategoryName'
        },
        // {
        //   title: '可用途径',
        //   key: 'availableType',
        //   render: (row: any) => {
        //     return <div>{getMapValueByKey(row.availableType, new Map(Object.entries(musicSheetAvailableType)))}</div>
        //   }
        // },
        // {
        //   title: '收费方式',
        //   key: 'paymentType',
        //   render: (row: any) => {
        //     return <div>{getMapValueByKey(row.paymentType, new Map(Object.entries(musicSheetPaymentType)))}</div>
        //   }
        // },
        {
          title: '上传人',
          key: 'createByName'
        },
        {
          title: '上传时间',
          key: 'createTime'
        },
        {
          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="musicSheet/status1612431726029942786"
                      onClick={() => onChangeStatus(row)}
                  >
                    {row.status ? '停用' : '启用'}
                  </NButton>
                  <NButton
                      type="primary"
                      size="small"
                      text
                      //v-auth="musicSheet/update1602302618558099458"
                      onClick={() => {
                        state.showEditDialog = true
                        state.updateRow = row
                      }}
                  >
                    修改
                  </NButton>
                </NSpace>
            )
          }
        }
      ]
    }

    return () => {
      return (
          <div class="system-menu-container">
            <SaveForm
                ref={saveForm}
                model={state.searchForm}
                onSubmit={onSubmit}
                saveKey="cooleshow-edu"
                onSetModel={(val: any) => (state.searchForm = val)}
            >

              <NFormItem label="关键词" path="keyword">
                <NInput
                    placeholder="请输入曲目名称/编号"
                    v-model:value={state.searchForm.keyword}
                    clearable
                />
              </NFormItem>
              <NFormItem label="曲目来源" path="sourceType">
                <NSelect
                    placeholder="请选择曲目来源"
                    v-model:value={state.searchForm.sourceType}
                    options={getSelectDataFromObj(musicSheetSourceType)}
                    onUpdateValue={async (value: any) => {
                      state.userIdData = []
                      state.searchForm.userId = null
                      if (value) {
                        const {data} = await musicSheetApplicationOwnerList({page: 1, rows: 9999, sourceType: value, applicationId: state.appId})
                        const temp = data.rows || []
                        temp.forEach((next: any) => {
                          state.userIdData.push({
                            ...next,
                            label: next.userName,
                            value: next.userId
                          })
                        })
                        state.userIdDisable = false
                      } else {
                        state.userIdDisable = true
                      }
                    }}
                    clearable
                />
              </NFormItem>
              <NFormItem label="所属人" path="userId">
                <NSelect
                    placeholder="请选择所属人"
                    disabled={state.userIdDisable}
                    v-model:value={state.searchForm.userId}
                    options={state.userIdData}
                    clearable
                >
                </NSelect>
              </NFormItem>
              <NFormItem label="曲目类型" path="subjectType">
                <NSelect
                    placeholder="请选择曲目类型"
                    v-model:value={state.searchForm.musicSheetType}
                    options={getSelectDataFromObj(musicSheetType)}
                    clearable
                />
              </NFormItem>
              <NFormItem label="伴奏类型" path="audioType">
                <NSelect
                    placeholder="请选择伴奏类型"
                    v-model:value={state.searchForm.audioType}
                    options={getSelectDataFromObj(musicSheetAudioType)}
                    clearable
                />
              </NFormItem>
              <NFormItem label="可用声部" path="subjectId">
                <NSelect
                    placeholder="请选择可用声部"
                    v-model:value={state.searchForm.subjectId}
                    options={state.subjectList}
                    clearable
                />
              </NFormItem>
              <NFormItem label="曲目分类" path="musicCategoryId">
                <NCascader
                    valueField="id"
                    labelField="name"
                    children-field="children"
                    placeholder="请选择曲目分类"
                    v-model:value={state.searchForm.musicCategoryId}
                    options={state.musicSheetCategories}
                    clearable
                />
              </NFormItem>
              {/*<NFormItem*/}
              {/*    label="可用途径"*/}
              {/*    path="availableType"*/}
              {/*>*/}
              {/*  <NSelect*/}
              {/*      placeholder="请选择可用途径"*/}
              {/*      v-model:value={state.searchForm.availableType}*/}
              {/*      options={getSelectDataFromObj(musicSheetAvailableType)}*/}
              {/*      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 label="上传时间" path="authorFrom">
                <NDatePicker
                    v-model:value={state.searchForm.times}
                    type="daterange"
                    clearable
                    value-format="yyyy.MM.dd"
                    startPlaceholder="开始时间"
                    endPlaceholder="结束时间"
                />
              </NFormItem>
              <NFormItem>
                <NSpace>
                  <NButton type="primary" onClick={onSearch}>
                    搜索
                  </NButton>
                  <NButton type="default" onClick={onBtnReset}>
                    重置
                  </NButton>
                </NSpace>
              </NFormItem>
            </SaveForm>

            <div class={['section-container']}>
              <NSpace style={{paddingBottom: '12px'}}>
                <NButton
                    type="primary"
                    //v-auth="musicSheet/save1602302550719426561"
                    onClick={() => {
                      state.showAddDialog = true
                    }}
                >
                  新增
                </NButton>
                <NButton
                    disabled={checkedRowKeysRef.value.length == 0}
                    //v-auth="musicSheet/save1602302550719426561"
                    onClick={() => {
                      onBatchChangeStatus(false)
                    }}
                >
                  批量停用
                </NButton>
                <NButton
                    disabled={checkedRowKeysRef.value.length == 0}
                    //v-auth="musicSheet/save1602302550719426561"
                    onClick={() => {
                      onBatchChangeStatus(true)
                    }}
                >
                  批量启用
                </NButton>
              </NSpace>

              <NDataTable
                  loading={state.loading}
                  columns={columns()}
                  data={state.dataList}
                  rowKey={(row: any) => row.applicationExtendId}
                  onUpdateCheckedRowKeys={handleCheck}
              ></NDataTable>

              <Pagination
                  v-model:page={state.pagination.page}
                  v-model:pageSize={state.pagination.rows}
                  v-model:pageTotal={state.pagination.pageTotal}
                  onList={getList}
                  sync
                  saveKey="cooleshow-edu"
              ></Pagination>
            </div>

            <NModal
                v-model:show={state.showAddDialog}
                preset="dialog"
                showIcon={false}
                title={'添加曲目'}
                style={{width: '1200px'}}
            >
              <AddMusic
                  onClose={() => (state.showAddDialog = false)}
                  onGetList={() => {
                    state.pagination.page = 1
                    getList()
                  }}
                  subjectList={state.subjectList}
                  appId={state.appId}
                  musicSheetCategories={state.musicSheetCategories}
              />
            </NModal>
            <NModal
                v-model:show={state.showEditDialog}
                preset="dialog"
                showIcon={false}
                title={'修改曲目'}
                style={{width: '500px'}}
            >
              <UpdateMusic
                  onClose={() => (state.showEditDialog = false)}
                  onGetList={() => {
                    state.pagination.page = 1
                    getList()
                  }}
                  rowData={state.updateRow}
                  appId={state.appId}
                  musicSheetCategories={state.musicSheetCategories}
              />
            </NModal>
          </div>
      )
    }
  }
})