d776017306
新增了 PageHeader 通用组件，用于统一页面标题和操作按钮区域的布局。 该组件包含 title 属性以及 buttons 和 alerts 两个具名插槽，便于复用和维护。 已在以下页面中集成使用： - 图片管理页（ImageConfig.vue） - 音乐管理页（MusicConfig.vue） - 人员管理页（PersonAll/index.vue） - 中奖者管理页（PersonAlready.vue） - 奖品管理页（PrizeConfig.vue）
151 lines
3.7 KiB
Vue
151 lines
3.7 KiB
Vue
<!-- eslint-disable vue/no-parsing-error -->
|
||
<script setup lang='ts'>
|
||
import type { IPersonConfig } from '@/types/storeType'
|
||
import { storeToRefs } from 'pinia'
|
||
import { ref } from 'vue'
|
||
import { useI18n } from 'vue-i18n'
|
||
import DaiysuiTable from '@/components/DaiysuiTable/index.vue'
|
||
import PageHeader from '@/components/PageHeader/index.vue'
|
||
import i18n from '@/locales/i18n'
|
||
import useStore from '@/store'
|
||
|
||
const { t } = useI18n()
|
||
const personConfig = useStore().personConfig
|
||
|
||
const { getAlreadyPersonList: alreadyPersonList, getAlreadyPersonDetail: alreadyPersonDetail } = storeToRefs(personConfig)
|
||
// const personList = ref<any[]>(
|
||
// alreadyPersonList
|
||
// )
|
||
|
||
// const deleteAll = () => {
|
||
// personConfig.deleteAllPerson()
|
||
// }
|
||
|
||
const isDetail = ref(false)
|
||
function handleMoveNotPerson(row: IPersonConfig) {
|
||
personConfig.moveAlreadyToNot(row)
|
||
}
|
||
|
||
const tableColumnsList = [
|
||
{
|
||
label: i18n.global.t('data.number'),
|
||
props: 'uid',
|
||
sort: true,
|
||
},
|
||
{
|
||
label: i18n.global.t('data.name'),
|
||
props: 'name',
|
||
},
|
||
{
|
||
label: i18n.global.t('data.avatar'),
|
||
props: 'avatar',
|
||
formatValue(row: any) {
|
||
return row.avatar ? `<img src="${row.avatar}" alt="avatar" style="width: 50px; height: 50px;"/>` : '-'
|
||
},
|
||
},
|
||
{
|
||
label: i18n.global.t('data.department'),
|
||
props: 'department',
|
||
},
|
||
{
|
||
label: i18n.global.t('data.identity'),
|
||
props: 'identity',
|
||
},
|
||
{
|
||
label: i18n.global.t('data.prizeName'),
|
||
props: 'prizeName',
|
||
sort: true,
|
||
},
|
||
{
|
||
label: i18n.global.t('data.operation'),
|
||
actions: [
|
||
{
|
||
label: i18n.global.t('data.removePerson'),
|
||
type: 'btn-info',
|
||
onClick: (row: IPersonConfig) => {
|
||
handleMoveNotPerson(row)
|
||
},
|
||
},
|
||
],
|
||
},
|
||
]
|
||
const tableColumnsDetail = [
|
||
{
|
||
label: i18n.global.t('data.number'),
|
||
props: 'uid',
|
||
sort: true,
|
||
},
|
||
{
|
||
label: i18n.global.t('data.number'),
|
||
props: 'name',
|
||
},
|
||
{
|
||
label: i18n.global.t('data.avatar'),
|
||
props: 'avatar',
|
||
formatValue(row: any) {
|
||
return row.avatar ? `<img src="${row.avatar}" alt="avatar" style="width: 50px; height: 50px;"/>` : '-'
|
||
},
|
||
},
|
||
{
|
||
label: i18n.global.t('data.department'),
|
||
props: 'department',
|
||
},
|
||
{
|
||
label: i18n.global.t('data.identity'),
|
||
props: 'identity',
|
||
},
|
||
{
|
||
label: i18n.global.t('data.prizeName'),
|
||
props: 'prizeName',
|
||
sort: true,
|
||
},
|
||
{
|
||
label: i18n.global.t('data.prizeTime'),
|
||
props: 'prizeTime',
|
||
|
||
},
|
||
{
|
||
label: i18n.global.t('data.operation'),
|
||
actions: [
|
||
{
|
||
label: i18n.global.t('data.removePerson'),
|
||
type: 'btn-info',
|
||
onClick: (row: IPersonConfig) => {
|
||
handleMoveNotPerson(row)
|
||
},
|
||
},
|
||
|
||
],
|
||
},
|
||
]
|
||
</script>
|
||
|
||
<template>
|
||
<div class="overflow-y-auto">
|
||
<PageHeader :title="t('viewTitle.winnerManagement')">
|
||
<template #buttons>
|
||
<div class="flex items-center justify-start gap-10">
|
||
<div>
|
||
<span>{{ t('table.luckyPeopleNumber') }}：</span>
|
||
<span>{{ alreadyPersonList.length }}</span>
|
||
</div>
|
||
<div class="flex flex-col">
|
||
<div class="form-control">
|
||
<label class="cursor-pointer label">
|
||
<span class="label-text">{{ t('table.detail') }}:</span>
|
||
<input v-model="isDetail" type="checkbox" class="border-solid toggle toggle-primary border-1">
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</PageHeader>
|
||
|
||
<DaiysuiTable v-if="!isDetail" :table-columns="tableColumnsList" :data="alreadyPersonList" />
|
||
|
||
<DaiysuiTable v-if="isDetail" :table-columns="tableColumnsDetail" :data="alreadyPersonDetail" />
|
||
</div>
|
||
</template>
|
||
|
||
<style lang='scss' scoped></style>
|