完善表格数据
This commit is contained in:
parent
363c1aadab
commit
015bedceb7
@ -22,73 +22,158 @@
|
|||||||
|
|
||||||
<!--新增用户对话框-->
|
<!--新增用户对话框-->
|
||||||
<a-modal v-model:open="AddDiaLog" cancel-text="取消" ok-text="确认" title="新增用户" @cancel="addCancel" @ok="addOk">
|
<a-modal v-model:open="AddDiaLog" cancel-text="取消" ok-text="确认" title="新增用户" @cancel="addCancel" @ok="addOk">
|
||||||
<div>
|
<a-form>
|
||||||
<div>用户名：<a-input v-model:value="addData.username" style="width: 250px; margin-bottom: 10px" /></div>
|
<a-form-item style="margin-left: 15px;">
|
||||||
<div style="margin-left: 15px">密码：<a-input v-model:value="addData.password" style="width: 250px; margin-bottom: 10px" type="password"/></div>
|
<span style="color:red; font-size: 20px">*</span>
|
||||||
<div style="margin-left: 15px">地址：<a-input v-model:value="addData.address" style="width: 250px; margin-bottom: 10px" /></div>
|
用户名
|
||||||
<div style="margin-left: 15px">电话：<a-input v-model:value="addData.phone" style="width: 250px; margin-bottom: 10px" /></div>
|
<a-input v-model:value="addData.username" style="width: 250px"/>
|
||||||
<div style="margin-left: 15px">邮箱：<a-input v-model:value="addData.email" style="width: 250px; margin-bottom: 10px" /></div>
|
</a-form-item>
|
||||||
<div style="margin-left: 15px">性别：
|
<a-form-item style="margin-left: 15px">
|
||||||
<a-radio-group v-model:value="addData.sex" style="margin-bottom: 10px">
|
<span style="color:red; font-size: 20px">*</span>
|
||||||
|
密码：
|
||||||
|
<a-input v-model:value="addData.password" style="width: 250px;" type="password"/>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item style="margin-left: 15px">
|
||||||
|
<span style="color:red; font-size: 20px">*</span>
|
||||||
|
地址：
|
||||||
|
<a-input v-model:value="addData.address" style="width: 250px"/>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item style="margin-left: 15px">
|
||||||
|
<span style="color:red; font-size: 20px">*</span>
|
||||||
|
电话：
|
||||||
|
<a-input v-model:value="addData.phone" style="width: 250px"/>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item style="margin-left: 15px">
|
||||||
|
<span style="color:red; font-size: 20px">*</span>
|
||||||
|
邮箱：
|
||||||
|
<a-input v-model:value="addData.email" style="width: 250px"/>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item style="margin-left: 15px">
|
||||||
|
<span style="color:red; font-size: 20px">*</span>
|
||||||
|
性别：
|
||||||
|
<a-radio-group v-model:value="addData.sex">
|
||||||
<a-radio :value="1">男</a-radio>
|
<a-radio :value="1">男</a-radio>
|
||||||
<a-radio :value="0">女</a-radio>
|
<a-radio :value="0">女</a-radio>
|
||||||
</a-radio-group></div>
|
</a-radio-group>
|
||||||
<div style="margin-left: 15px">年龄：<a-input v-model:value="addData.age" style="width: 250px" type="number" /></div>
|
</a-form-item>
|
||||||
|
<a-form-item style="margin-left: 15px">
|
||||||
|
<span style="color:red; font-size: 20px">*</span>
|
||||||
|
年龄：
|
||||||
|
<a-input v-model:value="addData.age" style="width: 250px" type="number" />
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
</div>
|
</a-form>
|
||||||
</a-modal>
|
</a-modal>
|
||||||
|
|
||||||
<!--删除用户对话框-->
|
<!--删除用户对话框-->
|
||||||
<a-modal v-model:open="DeleteDiaLog" cancel-text="取消" ok-text="确认" title="删除用户" @cancel="deleteCancel" @ok="deleteOk">
|
<a-modal v-model:open="DeleteDiaLog" cancel-text="取消" ok-text="确认" title="删除用户" @cancel="deleteCancel" @ok="deleteOk"></a-modal>
|
||||||
<p>是否要删除xxx数据？</p>
|
|
||||||
</a-modal>
|
|
||||||
|
|
||||||
<!--修改用户对话框-->
|
<!--修改用户对话框-->
|
||||||
<a-modal
|
<a-modal
|
||||||
v-model:open="EditDiaLog"
|
v-model:open="EditDiaLog"
|
||||||
title="编辑"
|
title="修改用户"
|
||||||
@on-ok="editOk"
|
@on-ok="editOk"
|
||||||
@on-cancel="editCancel">
|
@on-cancel="editCancel">
|
||||||
<div style="">
|
<a-form>
|
||||||
<div style="margin-bottom: 10px">
|
<a-form-item style="margin-left: 15px">
|
||||||
<span>
|
用户id：
|
||||||
用户名：<a-input v-model:value="updateData.username" style="width: 180px" />
|
<a-input style="width: 250px" type="number"/>
|
||||||
</span>
|
</a-form-item>
|
||||||
<span style="margin-left: 20px">
|
<a-form-item style="margin-left: 15px">
|
||||||
电话：<a-input v-model:value="updateData.phone" placeholder="Enter something..." style="width: 180px" />
|
用户名：
|
||||||
</span>
|
<a-input style="width: 250px"/>
|
||||||
</div>
|
</a-form-item>
|
||||||
<div style="margin-bottom: 10px">
|
<a-form-item style="margin-left: 15px">
|
||||||
<span>
|
地址：
|
||||||
|
<a-input style="width: 250px"/>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item style="margin-left: 15px">
|
||||||
|
手机号码：
|
||||||
|
<a-input style="width: 250px"/>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item style="margin-left: 15px">
|
||||||
|
邮箱：
|
||||||
|
<a-input style="width: 250px"/>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item style="margin-left: 15px">
|
||||||
|
年龄：
|
||||||
|
<a-input style="width: 250px" type="number"/>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item style="margin-left: 15px">
|
||||||
|
签名：
|
||||||
|
<a-input style="width: 250px"/>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item style="margin-left: 15px">
|
||||||
性别：
|
性别：
|
||||||
<a-radio-group v-model="sex">
|
<a-input style="width: 250px" type="number"/>
|
||||||
<a-radio label="男"></a-radio>
|
</a-form-item>
|
||||||
<a-radio label="女"></a-radio>
|
<a-form-item style="margin-left: 15px">
|
||||||
</a-radio-group>
|
头像：
|
||||||
</span>
|
<a-input style="width: 250px"/>
|
||||||
<span style="margin-left: 98px">
|
</a-form-item>
|
||||||
角色：
|
<a-form-item style="margin-left: 15px">
|
||||||
<a-select v-model="roleSingle" style="width:200px">
|
昵称：
|
||||||
<a-select-option v-for="item in roleList" :key="item.value" :value="item.value">{{ item.label }}</a-select-option>
|
<a-input style="width: 250px"/>
|
||||||
</a-select>
|
</a-form-item>
|
||||||
</span>
|
<a-form-item style="margin-left: 15px">
|
||||||
</div>
|
个人描述：
|
||||||
<div style="margin-bottom: 10px">邮箱：<Input v-model="updateData.email" style="width: 435px" /></div>
|
<a-input style="width: 250px"/>
|
||||||
<div style="margin-bottom: 10px">地址：<Input v-model="updateData.address" style="width: 435px" /></div>
|
</a-form-item>
|
||||||
<div style="margin-bottom: 10px">简介：<Input v-model="updateData.description" style="width: 435px" type="textarea" /></div>
|
<a-form-item style="margin-left: 15px">
|
||||||
</div>
|
用户是否启用：
|
||||||
|
<a-input style="width: 250px" type="boolean"/>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item style="margin-left: 15px">
|
||||||
|
用户是否过期：
|
||||||
|
<a-input style="width: 250px" type="boolean"/>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item style="margin-left: 15px">
|
||||||
|
密码是否过期：
|
||||||
|
<a-input style="width: 250px" type="boolean"/>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item style="margin-left: 15px">
|
||||||
|
是否展示：
|
||||||
|
<a-input style="width: 250px" type="boolean"/>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item style="margin-left: 15px">
|
||||||
|
用户是否被锁：
|
||||||
|
<a-input style="width: 250px" type="boolean"/>
|
||||||
|
</a-form-item>
|
||||||
|
</a-form>
|
||||||
</a-modal>
|
</a-modal>
|
||||||
|
|
||||||
|
|
||||||
<!--表格内容-->
|
<!--表格内容-->
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<a-table :columns="columns" :dataSource="data"/>
|
<a-table :columns="columns" :dataSource="data">
|
||||||
|
<template #bodyCell="{ column, record }">
|
||||||
|
<template v-if="column.key==='id'">
|
||||||
|
{{record.id}}
|
||||||
|
</template>
|
||||||
|
<template v-else-if="column.key === 'enabled'">
|
||||||
|
<a-tag v-if="record.enabled === true" :bordered="false" color="success">启用</a-tag>
|
||||||
|
<a-tag v-if="record.enabled === false" :bordered="false" color="error">禁用</a-tag>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="column.key==='createdAt'">
|
||||||
|
{{record.createdAt}}
|
||||||
|
</template>
|
||||||
|
<template v-else-if="column.key==='updateAt'">
|
||||||
|
{{record.updatedAt}}
|
||||||
|
</template>
|
||||||
|
<template v-else-if="column.key==='action'">
|
||||||
|
<span style="margin-left: 10px">
|
||||||
|
<a-button size="small" style="color: dodgerblue" type="text" @click="showEditDiaLog"><EditOutlined />修改</a-button>
|
||||||
|
<a-button size="small" style="color: dodgerblue" type="text" @click="showDeleteDiaLog"><DeleteOutlined />删除</a-button>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</a-table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import {computed, onMounted, reactive, ref} from 'vue';
|
import {onMounted, reactive, ref} from 'vue';
|
||||||
import {DeleteOutlined, EditOutlined, PlusOutlined, SearchOutlined} from '@ant-design/icons-vue';
|
import {DeleteOutlined, EditOutlined, PlusOutlined, SearchOutlined} from '@ant-design/icons-vue';
|
||||||
import {message} from "ant-design-vue";
|
import {message} from "ant-design-vue";
|
||||||
import requests from "@/public/request.js";
|
import requests from "@/public/request.js";
|
||||||
@ -121,7 +206,7 @@ const sex = ref('男')
|
|||||||
|
|
||||||
|
|
||||||
const updateData = reactive({
|
const updateData = reactive({
|
||||||
id: 0,
|
id: '',
|
||||||
username: '',
|
username: '',
|
||||||
address: '',
|
address: '',
|
||||||
phone: '',
|
phone: '',
|
||||||
@ -136,7 +221,9 @@ const updateData = reactive({
|
|||||||
isExpired: false,
|
isExpired: false,
|
||||||
passwordExpired: false,
|
passwordExpired: false,
|
||||||
recommend: false,
|
recommend: false,
|
||||||
isLocked: false
|
isLocked: false,
|
||||||
|
createdAt:'',
|
||||||
|
updateAt:'',
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
@ -252,10 +339,10 @@ function addCancel () {
|
|||||||
|
|
||||||
|
|
||||||
/*删除用户*/
|
/*删除用户*/
|
||||||
const showDeleteDiaLog = (record, index) => {
|
function showDeleteDiaLog(record){
|
||||||
DeleteDiaLog.value = true;
|
DeleteDiaLog.value = true;
|
||||||
DeleteId.value = record.id;
|
DeleteId.value = record.id;
|
||||||
};
|
}
|
||||||
|
|
||||||
function deleteOk() {
|
function deleteOk() {
|
||||||
DeleteDiaLog.value = false;
|
DeleteDiaLog.value = false;
|
||||||
@ -278,7 +365,7 @@ function deleteCancel(){
|
|||||||
|
|
||||||
|
|
||||||
/*编辑用户*/
|
/*编辑用户*/
|
||||||
const showEditDiaLog = (record, index) => {
|
function showEditDiaLog(record, index){
|
||||||
EditDiaLog.value = true
|
EditDiaLog.value = true
|
||||||
updateData.id = record.id
|
updateData.id = record.id
|
||||||
updateData.username = record.username
|
updateData.username = record.username
|
||||||
@ -361,11 +448,6 @@ const columns = [
|
|||||||
dataIndex: 'username',
|
dataIndex: 'username',
|
||||||
key: 'username',
|
key: 'username',
|
||||||
},
|
},
|
||||||
{
|
|
||||||
title: '账户昵称',
|
|
||||||
dataIndex: 'nickname',
|
|
||||||
key: 'nickname',
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
title: '电话',
|
title: '电话',
|
||||||
key: 'phone',
|
key: 'phone',
|
||||||
@ -376,11 +458,21 @@ const columns = [
|
|||||||
dataIndex: 'enabled',
|
dataIndex: 'enabled',
|
||||||
key: 'enabled',
|
key: 'enabled',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
title:'创建时间',
|
||||||
|
key:'createdAt',
|
||||||
|
dataIndex: 'createdAt',
|
||||||
|
},
|
||||||
{
|
{
|
||||||
title: '更新时间',
|
title: '更新时间',
|
||||||
key: 'updatedAt',
|
key: 'updatedAt',
|
||||||
dataIndex: 'updatedAt'
|
dataIndex: 'updatedAt'
|
||||||
}
|
},
|
||||||
|
{
|
||||||
|
title:'操作',
|
||||||
|
key:'action',
|
||||||
|
dataIndex: 'action'
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const rowSelection = {
|
const rowSelection = {
|
||||||
@ -416,7 +508,9 @@ async function fetchData() {
|
|||||||
nickname: dataSource.value.users[i].user.nickname,
|
nickname: dataSource.value.users[i].user.nickname,
|
||||||
phone: dataSource.value.users[i].user.phone,
|
phone: dataSource.value.users[i].user.phone,
|
||||||
enabled: dataSource.value.users[i].user.enabled,
|
enabled: dataSource.value.users[i].user.enabled,
|
||||||
|
createdAt:dataSource.value.users[i].user.createdAt,
|
||||||
updatedAt: dataSource.value.users[i].user.updatedAt,
|
updatedAt: dataSource.value.users[i].user.updatedAt,
|
||||||
|
id:dataSource.value.users[i].user.id,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
console.log(data.value);
|
console.log(data.value);
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user