resource-admin/src/views/system-manage/subject-manage/subject-categorize/categorize-list.tsx

import { NButton, NDataTable, NModal, NSpace, NTag, useDialog, useMessage } from 'naive-ui'
import { defineComponent, onMounted, reactive } from 'vue'
import CategorizeSave from '@views/system-manage/subject-manage/subject-categorize/modal/categorize-save'
import {
  subjectCategoryPage,
  subjectCategoryUpdateStatus
} from '@views/system-manage/subject-manage/api'
import { getTimes } from '@/utils/dateUtil'
import Pagination from '@components/pagination'

export default defineComponent({
  name: 'category-list',
  setup() {
    const dialog = useDialog()
    const message = useMessage()
    const state = reactive({
      loading: false,
      pagination: {
        page: 1,
        rows: 10,
        pageTotal: 0
      },
      dataList: [] as any,
      saveMode: 'add',
      showSaveDialog: false,
      rowData: {}
    })
    const searchForm = reactive({
      keyword: '',
      times: null as any,
      operatorKeyword: '' //创建人
    })

    const columns = (): any => {
      return [
        {
          title: '分类编号',
          key: 'id'
        },
        {
          title: '分类名称',
          key: 'name'
        },
        {
          title: '操作人',
          key: 'operator',
          render(row: any) {
            return (
              <div>
                <div>{row.operatorName}</div>
                <div>{row.updateTime}</div>
              </div>
            )
          }
        },
        {
          title: '操作',
          key: 'operation',
          fixed: 'right',
          width: 180,
          render(row: any) {
            return (
              <NSpace>
                <NButton
                  type="primary"
                  text
                  v-auth="subjectCategory/update1750844787669336066"
                  onClick={() => {
                    state.saveMode = 'edit'
                    state.showSaveDialog = true
                    state.rowData = row
                  }}
                >
                  修改
                </NButton>
              </NSpace>
            )
          }
        }
      ]
    }

    const getList = async () => {
      try {
        state.loading = true
        const { times, ...reset } = searchForm
        const body = {
          ...reset,
          ...getTimes(times, ['startTime', 'endTime']),
          page: state.pagination.page,
          rows: state.pagination.rows
        }
        const { data } = await subjectCategoryPage(body)
        state.loading = false
        state.pagination.pageTotal = Number(data.total)
        state.dataList = data.rows || []
      } catch {
        state.loading = false
      }
    }

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

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

    return () => (
      <div class="system-menu-container">
        <div class={['section-container']}>
          <NSpace style={{ paddingBottom: '12px' }}>
            <NButton
              type="primary"
              v-auth="subjectCategory/save1750844729750192130"
              onClick={() => {
                state.saveMode = 'add'
                state.showSaveDialog = true
              }}
              disabled={state.loading}
            >
              添加
            </NButton>
          </NSpace>
          <NDataTable
            scroll-x="1300"
            loading={state.loading}
            columns={columns()}
            data={state.dataList}
            children-key="subMaterialCategoryList"
            default-expand-all={false}
            row-key={(row: any) => row.id}
          ></NDataTable>
          <Pagination
            v-model:page={state.pagination.page}
            v-model:pageSize={state.pagination.rows}
            v-model:pageTotal={state.pagination.pageTotal}
            onList={getList}
            sync
            saveKey="categorize-list"
          ></Pagination>
        </div>

        <NModal
          v-model:show={state.showSaveDialog}
          preset="dialog"
          showIcon={false}
          title={state.saveMode === 'add' ? '新增分类' : '修改分类'}
          style={{ width: '400px' }}
        >
          <CategorizeSave
            type={state.saveMode}
            data={state.rowData}
            onClose={() => (state.showSaveDialog = false)}
            onGetList={getList}
          />
        </NModal>
      </div>
    )
  }
})