policeSecurity/policeManagement/src/views/user/user.vue

<template>
  <!-- 后台用户 -->
  <div>
    <div class="h-16 w-full bg-white rounded shadow-md py-5 px-10 flex items-center">
      <div class="mr-5">关键字</div>
      <a-input class="w-40 mr-5" v-model:value="searchUser" autocomplete="off" placeholder="请输入用户名搜索" />
      <div class="mr-5">状态</div>
      <a-space>
        <a-select ref="select" v-model:value="selectValue" style="width: 120px" @focus="focus" @change="handleChange">
          <a-select-option value="0">全部</a-select-option>
          <a-select-option value="1">启用</a-select-option>
          <a-select-option value="2">禁用</a-select-option>
        </a-select>
      </a-space>
      <a-button class="ml-5 flex items-center" type="primary" @click="search"><SearchOutlined style="font-size: 16px" />搜索</a-button>
      <a-button class="ml-5 flex items-center"><SyncOutlined style="font-size: 16px" />重置</a-button>
    </div>

    <div class="w-full h-full bg-white mt-5 rounded">
      <div class="w-full h-16 py-5 px-10 flex items-center">
        <a-button class="flex items-center" type="primary" @click="search"><PlusOutlined style="font-size: 16px" />新增</a-button>
        <a-button :disabled="!hasSelected" class="ml-5 flex items-center" type="primary" danger @click="search"><DeleteOutlined style="font-size: 16px" />删除</a-button>
      </div>

      <div class="px-10">
        <a-table :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }" :columns="columns" :data-source="tableData" />
      </div>
    </div>
  </div>
</template>

<script setup lang="tsx">
import api from '@/axios/index.ts'
import { SearchOutlined, SyncOutlined, PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue'
import { ref, h, computed, reactive, onMounted } from 'vue'
const searchUser = ref('')
const selectValue = ref('0')
const focus = () => {
  console.log('focus')
}
const handleChange = (value: string) => {
  console.log(`selected ${value}`)
}
const search = function name() {}

const obj = {
  params: {
    // name: '',
    // telephone: '',
    // sex: '',
  },
  page: {
    // records: [
    //   {
    //     snowFlakeId: 0,
    //     name: '',
    //     sex: '',
    //     account: '',
    //     telephone: '',
    //     isEnable: '',
    //     isAdmin: '',
    //     createUserName: '',
    //     createTime: '',
    //   },
    // ],
    // total: 0,
    // size: 0,
    // current: 0,
    size: 10,
    current: 0,
    // orders: [
    //   {
    //     column: '',
    //     asc: true,
    //   },
    // ],
    // optimizeCountSql: {},
    // searchCount: {},
    // optimizeJoinOfCountSql: true,
    // maxLimit: 0,
    // countId: '',
    // pages: 0,
  },
}

const getUserList = async function name() {
  const res = await api.post<any>('/managementPoliceUnitUser/pager', obj)
  tableData.value = res.data.records
}
onMounted(() => {
  getUserList()
})
//
type Key = string | number

interface DataType {
  key: Key
  name: string
  age: number
  address: string
}

interface ResponseData {
  params: {
    name: string
    telephone: string
    sex: string
  }
  page: {
    records: Array<RecordItem>
    total: number
    size: number
    current: number
    orders: Array<{
      column: string
      asc: boolean
    }>
    optimizeCountSql: any
    searchCount: any
    optimizeJoinOfCountSql: boolean
    maxLimit: number
    countId: string
    pages: number
  }
}

interface RecordItem {
  account: string
  createTime: string
  createUserName: string | null
  isAdmin: LabelValue // 对象结构
  isEnable: EnableStatus // 包含扩展数据的对象
  name: string
  sex: LabelValue // 对象结构
  snowFlakeId: string // Snowflake ID 是字符串
  telephone: string
}

interface LabelValue {
  value: number
  label: string
}

interface EnableStatus {
  value: number
  label: string
  extData: {
    color: string
  }
}
const columns = [
  {
    title: '账号',
    dataIndex: 'account',
  },
  {
    title: '名称',
    dataIndex: 'name',
  },

  // {
  //   title: '是否管理员',
  //   dataIndex: 'isAdmin',
  //   customRender: ({ record }: { record: RecordItem }) => {
  //     return record.isAdmin.value === 0 ? <a-tag color='green'>{record.isAdmin.label}</a-tag> : <a-tag color='#f50'>{record.isAdmin.label}</a-tag>
  //   },
  // },
  {
    title: '是否启用',
    dataIndex: 'isEnable',
    customRender: ({ record }: { record: RecordItem }) => {
      return record.isEnable.extData?.color === 'success' ? <a-tag color='green'>{record.isEnable.label}</a-tag> : <a-tag color='#f50'>{record.isEnable.label}</a-tag>
    },
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
  },
]
const tableData = ref<DataType[]>([])

const state = reactive<{
  selectedRowKeys: Key[]
  loading: boolean
}>({
  selectedRowKeys: [], // Check here to configure the default column
  loading: false,
})
const hasSelected = computed(() => state.selectedRowKeys.length > 0)

const onSelectChange = (selectedRowKeys: Key[]) => {
  console.log('selectedRowKeys changed: ', selectedRowKeys)
  state.selectedRowKeys = selectedRowKeys
}
</script>