mirror of
https://github.com/pure-admin/pure-admin-thin.git
synced 2025-04-25 07:57:18 +08:00
feat: 添加用户详情5个前端页面
This commit is contained in:
inc904
parent
f888fe65fe
commit
46c6aec0b8
@ -1,5 +1,130 @@
|
||||
<template>
|
||||
<div>基础信息-{{ id }}-{{ props.uid }}</div>
|
||||
<el-divider />
|
||||
<div>
|
||||
<div>
|
||||
<el-avatar
|
||||
class="float-left"
|
||||
:size="60"
|
||||
src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
|
||||
/>
|
||||
</div>
|
||||
<el-descriptions class="ml-21">
|
||||
<el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
|
||||
<el-descriptions-item label="钻石">kooriookami</el-descriptions-item>
|
||||
<el-descriptions-item label="国家">kooriookami</el-descriptions-item>
|
||||
<el-descriptions-item label="绑定手机">18100000000</el-descriptions-item>
|
||||
<el-descriptions-item label="绑定邮箱">Suzhou</el-descriptions-item>
|
||||
<el-descriptions-item label="Remarks">
|
||||
<el-tag size="small">School</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<el-button>click1</el-button>
|
||||
<el-button>click2</el-button>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
<el-divider />
|
||||
<el-descriptions>
|
||||
<el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
|
||||
<el-descriptions-item label="绑定手机">18100000000</el-descriptions-item>
|
||||
<el-descriptions-item label="绑定邮箱">Suzhou</el-descriptions-item>
|
||||
<el-descriptions-item label="Remarks">
|
||||
<el-tag size="small">School</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="Address"
|
||||
>北京的王府井1215</el-descriptions-item
|
||||
>
|
||||
</el-descriptions>
|
||||
<el-divider />
|
||||
<el-descriptions title="俱乐部信息" border />
|
||||
<div class="flex justify-between">
|
||||
<el-table :data="tableData" border style="width: 47%" table-layout="auto">
|
||||
<el-table-column prop="date" label="Date" width="180" />
|
||||
<el-table-column prop="name" label="Name" width="180" />
|
||||
<el-table-column prop="address" label="Address" />
|
||||
</el-table>
|
||||
<el-table :data="tableData" border style="width: 47%" table-layout="auto">
|
||||
<el-table-column prop="date" label="Date" width="180" />
|
||||
<el-table-column prop="name" label="Name" width="180" />
|
||||
<el-table-column prop="address" label="Address" />
|
||||
</el-table>
|
||||
</div>
|
||||
<el-divider />
|
||||
<div class="grid grid-cols-4">
|
||||
<el-descriptions column="1" title="NLH">
|
||||
<el-descriptions-item label="总玩牌局数"
|
||||
>kooriookami</el-descriptions-item
|
||||
>
|
||||
<el-descriptions-item label="总玩牌手数"
|
||||
>18100000000</el-descriptions-item
|
||||
>
|
||||
<el-descriptions-item label="入池率">Suzhou</el-descriptions-item>
|
||||
<el-descriptions-item label="入池胜率">
|
||||
<el-tag size="small">School</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="翻牌前入池率">1215</el-descriptions-item>
|
||||
<el-descriptions-item label="3bet率">1215</el-descriptions-item>
|
||||
<el-descriptions-item label="激进率">1215</el-descriptions-item>
|
||||
<el-descriptions-item label="摊牌率">1215</el-descriptions-item>
|
||||
<el-descriptions-item label="百手盈利">1215</el-descriptions-item>
|
||||
<el-descriptions-item label="总盈利">1215</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<el-descriptions :column="1" title="PLO4">
|
||||
<el-descriptions-item label="总玩牌局数"
|
||||
>kooriookami</el-descriptions-item
|
||||
>
|
||||
<el-descriptions-item label="总玩牌手数"
|
||||
>18100000000</el-descriptions-item
|
||||
>
|
||||
<el-descriptions-item label="入池率">Suzhou</el-descriptions-item>
|
||||
<el-descriptions-item label="入池胜率">
|
||||
<el-tag size="small">School</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="翻牌前入池率">1215</el-descriptions-item>
|
||||
<el-descriptions-item label="3bet率">1215</el-descriptions-item>
|
||||
<el-descriptions-item label="激进率">1215</el-descriptions-item>
|
||||
<el-descriptions-item label="摊牌率">1215</el-descriptions-item>
|
||||
<el-descriptions-item label="百手盈利">1215</el-descriptions-item>
|
||||
<el-descriptions-item label="总盈利">1215</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<el-descriptions :column="1" title="PLO5">
|
||||
<el-descriptions-item label="总玩牌局数"
|
||||
>kooriookami</el-descriptions-item
|
||||
>
|
||||
<el-descriptions-item label="总玩牌手数"
|
||||
>18100000000</el-descriptions-item
|
||||
>
|
||||
<el-descriptions-item label="入池率">Suzhou</el-descriptions-item>
|
||||
<el-descriptions-item label="入池胜率">
|
||||
<el-tag size="small">School</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="翻牌前入池率">1215</el-descriptions-item>
|
||||
<el-descriptions-item label="3bet率">1215</el-descriptions-item>
|
||||
<el-descriptions-item label="激进率">1215</el-descriptions-item>
|
||||
<el-descriptions-item label="摊牌率">1215</el-descriptions-item>
|
||||
<el-descriptions-item label="百手盈利">1215</el-descriptions-item>
|
||||
<el-descriptions-item label="总盈利">1215</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<el-descriptions :column="1" title="PLO6">
|
||||
<el-descriptions-item label="总玩牌局数"
|
||||
>kooriookami</el-descriptions-item
|
||||
>
|
||||
<el-descriptions-item label="总玩牌手数"
|
||||
>18100000000</el-descriptions-item
|
||||
>
|
||||
<el-descriptions-item label="入池率">Suzhou</el-descriptions-item>
|
||||
<el-descriptions-item label="入池胜率">
|
||||
<el-tag size="small">School</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="翻牌前入池率">1215</el-descriptions-item>
|
||||
<el-descriptions-item label="3bet率">1215</el-descriptions-item>
|
||||
<el-descriptions-item label="激进率">1215</el-descriptions-item>
|
||||
<el-descriptions-item label="摊牌率">1215</el-descriptions-item>
|
||||
<el-descriptions-item label="百手盈利">1215</el-descriptions-item>
|
||||
<el-descriptions-item label="总盈利">1215</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -15,6 +140,29 @@ const props = defineProps(['uid'])
|
||||
const route = useRoute()
|
||||
// const router = useRouter()
|
||||
const id = route.query?.id ? route.query?.id : route.params?.id
|
||||
|
||||
const tableData = [
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles'
|
||||
},
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles'
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles'
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
@ -1,9 +1,88 @@
|
||||
<template>
|
||||
<div>游戏记录-{{ id }}-{{ props.uid }}</div>
|
||||
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
|
||||
<el-tab-pane label="牌局记录" name="first">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:inline="true"
|
||||
:model="form"
|
||||
class="bg-bg_color w-[99/100]"
|
||||
>
|
||||
<el-form-item prop="dateRange">
|
||||
<el-date-picker
|
||||
v-model="form.dateRange"
|
||||
type="daterange"
|
||||
range-separator="To"
|
||||
start-placeholder="Start date"
|
||||
end-placeholder="End date"
|
||||
format="YYYY/MM/DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="useRenderIcon(Search)"
|
||||
:loading="loading"
|
||||
@click="onSearchUser"
|
||||
>
|
||||
搜索
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="success"
|
||||
:icon="useRenderIcon(Search)"
|
||||
:loading="loading"
|
||||
@click="onSearchUser"
|
||||
>
|
||||
导出
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-table :data="tableData" stripe border style="width: 100%">
|
||||
<el-table-column prop="date" label="Date" width="180" />
|
||||
<el-table-column prop="name" label="Name" width="180" />
|
||||
<el-table-column prop="address" label="Address" />
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="手牌历史" name="second">
|
||||
<el-table :data="handsData" style="width: 100%">
|
||||
<el-table-column type="expand">
|
||||
<template #default="props">
|
||||
<div class="mb-4">
|
||||
<p class="t-0 mb-2">State: {{ props.row.state }}</p>
|
||||
<p class="t-0 mb-2">City: {{ props.row.city }}</p>
|
||||
<p class="t-0 mb-2">Address: {{ props.row.address }}</p>
|
||||
<p class="t-0 mb-2">Zip: {{ props.row.zip }}</p>
|
||||
<h3 class="mt-3 mb-3">Family</h3>
|
||||
<el-table :data="props.row.family">
|
||||
<el-table-column label="Name" prop="name" />
|
||||
<el-table-column label="State" prop="state" />
|
||||
<el-table-column label="City" prop="city" />
|
||||
<el-table-column label="Address" prop="address" />
|
||||
<el-table-column label="Zip" prop="zip" />
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Date" prop="date" />
|
||||
<el-table-column label="Name" prop="name" />
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useRenderIcon } from '@/components/ReIcon/src/hooks'
|
||||
import Search from '@iconify-icons/ep/search'
|
||||
|
||||
import { useRoute } from 'vue-router'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import type { TabsPaneContext } from 'element-plus'
|
||||
import handsData from './gameData'
|
||||
|
||||
defineOptions({
|
||||
// name 作为一种规范最好必须写上并且和路由的name保持一致
|
||||
@ -15,6 +94,54 @@ const props = defineProps(['uid'])
|
||||
const route = useRoute()
|
||||
// const router = useRouter()
|
||||
const id = route.query?.id ? route.query?.id : route.params?.id
|
||||
|
||||
const activeName = ref('first')
|
||||
|
||||
const handleClick = (tab: TabsPaneContext, event: Event) => {
|
||||
console.log(tab, event)
|
||||
}
|
||||
|
||||
const tableData = [
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles'
|
||||
},
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles'
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles'
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles'
|
||||
}
|
||||
]
|
||||
|
||||
const form = {
|
||||
dateRange: ''
|
||||
}
|
||||
const loading = ref(true)
|
||||
|
||||
function onSearchUser() {
|
||||
console.log(form.dateRange)
|
||||
console.log(form.dateRange[0])
|
||||
loading.value = false
|
||||
// getUserData({ date: form }).then(res => {
|
||||
// historicalData.value = res.data
|
||||
// loading.value = false
|
||||
// })
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
onSearchUser()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
@ -1,9 +1,56 @@
|
||||
<template>
|
||||
<div>聊天记录-{{ id }}-{{ props.uid }}</div>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:inline="true"
|
||||
:model="form"
|
||||
class="bg-bg_color w-[99/100]"
|
||||
>
|
||||
<el-form-item prop="dateRange">
|
||||
<el-date-picker
|
||||
v-model="form.dateRange"
|
||||
type="daterange"
|
||||
range-separator="To"
|
||||
start-placeholder="Start date"
|
||||
end-placeholder="End date"
|
||||
format="YYYY/MM/DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="useRenderIcon(Search)"
|
||||
:loading="loading"
|
||||
@click="onSearchUser"
|
||||
>
|
||||
搜索
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="useRenderIcon(Search)"
|
||||
:loading="loading"
|
||||
@click="onSearchUser"
|
||||
>
|
||||
导出
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-table :data="tableData" stripe border style="width: 100%">
|
||||
<el-table-column prop="date" label="Date" width="180" />
|
||||
<el-table-column prop="name" label="Name" width="180" />
|
||||
<el-table-column prop="address" label="Address" />
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useRenderIcon } from '@/components/ReIcon/src/hooks'
|
||||
import Search from '@iconify-icons/ep/search'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { ref, onMounted } from 'vue'
|
||||
|
||||
defineOptions({
|
||||
// name 作为一种规范最好必须写上并且和路由的name保持一致
|
||||
@ -15,6 +62,47 @@ const props = defineProps(['uid'])
|
||||
const route = useRoute()
|
||||
// const router = useRouter()
|
||||
const id = route.query?.id ? route.query?.id : route.params?.id
|
||||
|
||||
// page detail data
|
||||
const form = {
|
||||
dateRange: ''
|
||||
}
|
||||
const loading = ref(true)
|
||||
const tableData = [
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles'
|
||||
},
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles'
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles'
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles'
|
||||
}
|
||||
]
|
||||
|
||||
function onSearchUser() {
|
||||
console.log(form.dateRange)
|
||||
console.log(form.dateRange[0])
|
||||
loading.value = false
|
||||
// getUserData({ date: form }).then(res => {
|
||||
// historicalData.value = res.data
|
||||
// loading.value = false
|
||||
// })
|
||||
}
|
||||
onMounted(() => {
|
||||
onSearchUser()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
@ -1,9 +1,46 @@
|
||||
<template>
|
||||
<div>钻石记录-{{ id }}-{{ props.uid }}</div>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:inline="true"
|
||||
:model="form"
|
||||
class="bg-bg_color w-[99/100]"
|
||||
>
|
||||
<el-form-item prop="dateRange">
|
||||
<el-date-picker
|
||||
v-model="form.dateRange"
|
||||
type="daterange"
|
||||
range-separator="To"
|
||||
start-placeholder="Start date"
|
||||
end-placeholder="End date"
|
||||
format="YYYY/MM/DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="useRenderIcon(Search)"
|
||||
:loading="loading"
|
||||
@click="onSearchUser"
|
||||
>
|
||||
搜索
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-table :data="tableData" stripe border style="width: 100%">
|
||||
<el-table-column prop="date" label="Date" width="180" />
|
||||
<el-table-column prop="name" label="Name" width="180" />
|
||||
<el-table-column prop="address" label="Address" />
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useRenderIcon } from '@/components/ReIcon/src/hooks'
|
||||
import Search from '@iconify-icons/ep/search'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { ref, onMounted } from 'vue'
|
||||
|
||||
defineOptions({
|
||||
// name 作为一种规范最好必须写上并且和路由的name保持一致
|
||||
@ -15,6 +52,47 @@ const props = defineProps(['uid'])
|
||||
const route = useRoute()
|
||||
// const router = useRouter()
|
||||
const id = route.query?.id ? route.query?.id : route.params?.id
|
||||
|
||||
// page detail data
|
||||
const form = {
|
||||
dateRange: ''
|
||||
}
|
||||
const loading = ref(true)
|
||||
const tableData = [
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles'
|
||||
},
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles'
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles'
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles'
|
||||
}
|
||||
]
|
||||
|
||||
function onSearchUser() {
|
||||
console.log(form.dateRange)
|
||||
console.log(form.dateRange[0])
|
||||
loading.value = false
|
||||
// getUserData({ date: form }).then(res => {
|
||||
// historicalData.value = res.data
|
||||
// loading.value = false
|
||||
// })
|
||||
}
|
||||
onMounted(() => {
|
||||
onSearchUser()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
219
src/views/basic/queryUser/user/gameData.ts
Normal file
219
src/views/basic/queryUser/user/gameData.ts
Normal file
@ -0,0 +1,219 @@
|
||||
export default [
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: 'Tom',
|
||||
state: 'California',
|
||||
city: 'San Francisco',
|
||||
address: '3650 21st St, San Francisco',
|
||||
zip: 'CA 94114',
|
||||
family: [
|
||||
{
|
||||
name: 'Jerry',
|
||||
state: 'California',
|
||||
city: 'San Francisco',
|
||||
address: '3650 21st St, San Francisco',
|
||||
zip: 'CA 94114'
|
||||
},
|
||||
{
|
||||
name: 'Spike',
|
||||
state: 'California',
|
||||
city: 'San Francisco',
|
||||
address: '3650 21st St, San Francisco',
|
||||
zip: 'CA 94114'
|
||||
},
|
||||
{
|
||||
name: 'Tyke',
|
||||
state: 'California',
|
||||
city: 'San Francisco',
|
||||
address: '3650 21st St, San Francisco',
|
||||
zip: 'CA 94114'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: 'Tom',
|
||||
state: 'California',
|
||||
city: 'San Francisco',
|
||||
address: '3650 21st St, San Francisco',
|
||||
zip: 'CA 94114',
|
||||
family: [
|
||||
{
|
||||
name: 'Jerry',
|
||||
state: 'California',
|
||||
city: 'San Francisco',
|
||||
address: '3650 21st St, San Francisco',
|
||||
zip: 'CA 94114'
|
||||
},
|
||||
{
|
||||
name: 'Spike',
|
||||
state: 'California',
|
||||
city: 'San Francisco',
|
||||
address: '3650 21st St, San Francisco',
|
||||
zip: 'CA 94114'
|
||||
},
|
||||
{
|
||||
name: 'Tyke',
|
||||
state: 'California',
|
||||
city: 'San Francisco',
|
||||
address: '3650 21st St, San Francisco',
|
||||
zip: 'CA 94114'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: 'Tom',
|
||||
state: 'California',
|
||||
city: 'San Francisco',
|
||||
address: '3650 21st St, San Francisco',
|
||||
zip: 'CA 94114',
|
||||
family: [
|
||||
{
|
||||
name: 'Jerry',
|
||||
state: 'California',
|
||||
city: 'San Francisco',
|
||||
address: '3650 21st St, San Francisco',
|
||||
zip: 'CA 94114'
|
||||
},
|
||||
{
|
||||
name: 'Spike',
|
||||
state: 'California',
|
||||
city: 'San Francisco',
|
||||
address: '3650 21st St, San Francisco',
|
||||
zip: 'CA 94114'
|
||||
},
|
||||
{
|
||||
name: 'Tyke',
|
||||
state: 'California',
|
||||
city: 'San Francisco',
|
||||
address: '3650 21st St, San Francisco',
|
||||
zip: 'CA 94114'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: 'Tom',
|
||||
state: 'California',
|
||||
city: 'San Francisco',
|
||||
address: '3650 21st St, San Francisco',
|
||||
zip: 'CA 94114',
|
||||
family: [
|
||||
{
|
||||
name: 'Jerry',
|
||||
state: 'California',
|
||||
city: 'San Francisco',
|
||||
address: '3650 21st St, San Francisco',
|
||||
zip: 'CA 94114'
|
||||
},
|
||||
{
|
||||
name: 'Spike',
|
||||
state: 'California',
|
||||
city: 'San Francisco',
|
||||
address: '3650 21st St, San Francisco',
|
||||
zip: 'CA 94114'
|
||||
},
|
||||
{
|
||||
name: 'Tyke',
|
||||
state: 'California',
|
||||
city: 'San Francisco',
|
||||
address: '3650 21st St, San Francisco',
|
||||
zip: 'CA 94114'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
date: '2016-05-08',
|
||||
name: 'Tom',
|
||||
state: 'California',
|
||||
city: 'San Francisco',
|
||||
address: '3650 21st St, San Francisco',
|
||||
zip: 'CA 94114',
|
||||
family: [
|
||||
{
|
||||
name: 'Jerry',
|
||||
state: 'California',
|
||||
city: 'San Francisco',
|
||||
address: '3650 21st St, San Francisco',
|
||||
zip: 'CA 94114'
|
||||
},
|
||||
{
|
||||
name: 'Spike',
|
||||
state: 'California',
|
||||
city: 'San Francisco',
|
||||
address: '3650 21st St, San Francisco',
|
||||
zip: 'CA 94114'
|
||||
},
|
||||
{
|
||||
name: 'Tyke',
|
||||
state: 'California',
|
||||
city: 'San Francisco',
|
||||
address: '3650 21st St, San Francisco',
|
||||
zip: 'CA 94114'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
date: '2016-05-06',
|
||||
name: 'Tom',
|
||||
state: 'California',
|
||||
city: 'San Francisco',
|
||||
address: '3650 21st St, San Francisco',
|
||||
zip: 'CA 94114',
|
||||
family: [
|
||||
{
|
||||
name: 'Jerry',
|
||||
state: 'California',
|
||||
city: 'San Francisco',
|
||||
address: '3650 21st St, San Francisco',
|
||||
zip: 'CA 94114'
|
||||
},
|
||||
{
|
||||
name: 'Spike',
|
||||
state: 'California',
|
||||
city: 'San Francisco',
|
||||
address: '3650 21st St, San Francisco',
|
||||
zip: 'CA 94114'
|
||||
},
|
||||
{
|
||||
name: 'Tyke',
|
||||
state: 'California',
|
||||
city: 'San Francisco',
|
||||
address: '3650 21st St, San Francisco',
|
||||
zip: 'CA 94114'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
date: '2016-05-07',
|
||||
name: 'Tom',
|
||||
state: 'California',
|
||||
city: 'San Francisco',
|
||||
address: '3650 21st St, San Francisco',
|
||||
zip: 'CA 94114',
|
||||
family: [
|
||||
{
|
||||
name: 'Jerry',
|
||||
state: 'California',
|
||||
city: 'San Francisco',
|
||||
address: '3650 21st St, San Francisco',
|
||||
zip: 'CA 94114'
|
||||
},
|
||||
{
|
||||
name: 'Spike',
|
||||
state: 'California',
|
||||
city: 'San Francisco',
|
||||
address: '3650 21st St, San Francisco',
|
||||
zip: 'CA 94114'
|
||||
},
|
||||
{
|
||||
name: 'Tyke',
|
||||
state: 'California',
|
||||
city: 'San Francisco',
|
||||
address: '3650 21st St, San Francisco',
|
||||
zip: 'CA 94114'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
@ -1,9 +1,46 @@
|
||||
<template>
|
||||
<div>登录记录-{{ id }}-{{ props.uid }}</div>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:inline="true"
|
||||
:model="form"
|
||||
class="bg-bg_color w-[99/100]"
|
||||
>
|
||||
<el-form-item prop="dateRange">
|
||||
<el-date-picker
|
||||
v-model="form.dateRange"
|
||||
type="daterange"
|
||||
range-separator="To"
|
||||
start-placeholder="Start date"
|
||||
end-placeholder="End date"
|
||||
format="YYYY/MM/DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="useRenderIcon(Search)"
|
||||
:loading="loading"
|
||||
@click="onSearchUser"
|
||||
>
|
||||
搜索
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-table :data="tableData" stripe border style="width: 100%">
|
||||
<el-table-column prop="date" label="Date" width="180" />
|
||||
<el-table-column prop="name" label="Name" width="180" />
|
||||
<el-table-column prop="address" label="Address" />
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useRenderIcon } from '@/components/ReIcon/src/hooks'
|
||||
import Search from '@iconify-icons/ep/search'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { ref, onMounted } from 'vue'
|
||||
|
||||
defineOptions({
|
||||
// name 作为一种规范最好必须写上并且和路由的name保持一致
|
||||
@ -15,6 +52,47 @@ const props = defineProps(['uid'])
|
||||
const route = useRoute()
|
||||
// const router = useRouter()
|
||||
const id = route.query?.id ? route.query?.id : route.params?.id
|
||||
|
||||
// page detail data
|
||||
const form = {
|
||||
dateRange: ''
|
||||
}
|
||||
const loading = ref(true)
|
||||
const tableData = [
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles'
|
||||
},
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles'
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles'
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles'
|
||||
}
|
||||
]
|
||||
|
||||
function onSearchUser() {
|
||||
console.log(form.dateRange)
|
||||
console.log(form.dateRange[0])
|
||||
loading.value = false
|
||||
// getUserData({ date: form }).then(res => {
|
||||
// historicalData.value = res.data
|
||||
// loading.value = false
|
||||
// })
|
||||
}
|
||||
onMounted(() => {
|
||||
onSearchUser()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user