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

import {defineComponent, onMounted, reactive, ref} from "vue";
import SaveForm from "@components/save-form";
import {NButton, NDataTable, NDatePicker, NDescriptions, NDescriptionsItem, NFormItem, NImage, NInput, NModal, NSelect, NSpace, NStep, NSteps} from "naive-ui";
import Pagination from "@components/pagination";
import TheTooltip from "@components/TheTooltip";

export default defineComponent({
  name: 'project-music-sheet-mec',
  setup(props, {slots, attrs, emit}) {
    const state = reactive({
      loading: false,
      pagination: {
        page: 1,
        rows: 10,
        pageTotal: 0
      },
      searchForm: {
        keyword: null,
        subjectType: null,
        musicSubject: null,
        status: null
      },
      subjectList: [],
      showAdd: false,
      currentStep: 1,
      dataList: []
    })

    onMounted(() => {
    })

    const saveForm = ref()

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

    const onSubmit = () => {

    }

    const columns = (): any => {
      return [
        {
          title: '曲目信息',
          key: 'id',
          render: (row: any) => (
              <>
                <NDescriptions labelPlacement="left" column={1}>
                  <NDescriptionsItem label="曲目名称">
                    <TheTooltip content={row.musicSheetName}/>{' '}
                  </NDescriptionsItem>
                  <NDescriptionsItem label="曲目编号">{row.id}</NDescriptionsItem>
                </NDescriptions>
              </>
          )
        },
        {
          title: '封面图',
          key: 'titleImg',
          render(row: any) {
            return <NImage width={60} height={60} src={row.titleImg}/>
          }
        },
        {
          title: '声部',
          key: 'titleImg',
        },
        {
          title: '曲目名称',
          key: 'titleImg',
        },
        {
          title: '音乐人',
          key: 'titleImg',
        },
        {
          title: '曲目类型',
          key: 'titleImg',
        },
        {
          title: '作者属性',
          key: 'titleImg',
        },
        {
          title: '所属人',
          key: 'titleImg',
        },
        {
          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.visiableMusic = true
                        // state.musicOperation = 'edit'
                        // state.musicData = row
                      }}
                  >
                    修改
                  </NButton>
                </NSpace>
            )
          }
        }
      ]
    }

    const updateCurrent = (val: any) => {
      state.currentStep = val
    }

    return () => {
      return (
          <div class="system-menu-container">
            <NSpace vertical size="medium">
              <NSteps current={state.currentStep} onUpdateCurrent={updateCurrent} style={"margin-bottom: 20px;"}>
                <NStep
                    title="选择分类"
                    description=""
                >
                </NStep>
                <NStep
                    title="选择分类下曲目"
                    description=""
                >
                </NStep>
                <NStep
                    title="设置曲目信息"
                    description=""
                >
                </NStep>
              </NSteps>
            </NSpace>
            {state.currentStep === 1 && (
                <SaveForm>
                  <NFormItem label="关键词" path="keyword">
                    <NSelect></NSelect>
                  </NFormItem>
                </SaveForm>
            )}
            {state.currentStep === 2 && (
                <div class="system-menu-container">
                  <SaveForm>
                    <NFormItem label="关键词" path="keyword">
                      <NSelect></NSelect>
                    </NFormItem>
                    <NFormItem label="曲目类型" path="keyword">
                      <NSelect></NSelect>
                    </NFormItem>
                    <NFormItem label="声部" path="keyword">
                      <NSelect></NSelect>
                    </NFormItem>
                    <NFormItem label="曲目来源" path="keyword">
                      <NSelect></NSelect>
                    </NFormItem>
                    <NFormItem>
                      <NSpace>
                        <NButton type="primary" onClick={onSearch}>
                          搜索
                        </NButton>
                        <NButton type="default" onClick={onBtnReset}>
                          重置
                        </NButton>
                      </NSpace>
                    </NFormItem>
                  </SaveForm>
                  <NDataTable
                      loading={state.loading}
                      columns={columns()}
                      data={state.dataList}
                  ></NDataTable>
                  <Pagination
                      v-model:page={state.pagination.page}
                      v-model:pageSize={state.pagination.rows}
                      v-model:pageTotal={state.pagination.pageTotal}
                      // onList={getList}
                      sync
                      saveKey="music-list"
                  ></Pagination>
                </div>
            )}
            {state.currentStep === 3 && (
                <div class="system-menu-container" style={"margin-top: 15px;"}>
                  <NDataTable
                      loading={state.loading}
                      columns={columns()}
                      data={state.dataList}
                  ></NDataTable>
                </div>
            )}
            <NSpace justify="end">
              <NButton type="default" onClick={() => {
                if (state.currentStep > 1) {
                  state.currentStep = state.currentStep - 1;
                } else {
                  emit('close')
                }
              }}>
                {state.currentStep === 1 ? '取消' : '上一步'}
              </NButton>
              <NButton
                  type="primary"
                  onClick={() => {
                    if (state.currentStep < 3) {
                      state.currentStep = state.currentStep + 1;
                    } else {
                      onSubmit()
                    }
                  }}
                  // loading={btnLoading.value}
                  // disabled={btnLoading.value}
              >
                {state.currentStep === 3 ? '确定' : '下一步'}
              </NButton>
            </NSpace>
          </div>
      )
    }
  }
})