完善表格数据
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">
|
||||
<div>
|
||||
<div>用户名：<a-input v-model:value="addData.username" style="width: 250px; margin-bottom: 10px" /></div>
|
||||
<div style="margin-left: 15px">密码：<a-input v-model:value="addData.password" style="width: 250px; margin-bottom: 10px" type="password"/></div>
|
||||
<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>
|
||||
<div style="margin-left: 15px">邮箱：<a-input v-model:value="addData.email" style="width: 250px; margin-bottom: 10px" /></div>
|
||||
<div style="margin-left: 15px">性别：
|
||||
<a-radio-group v-model:value="addData.sex" style="margin-bottom: 10px">
|
||||
<a-form>
|
||||
<a-form-item style="margin-left: 15px;">
|
||||
<span style="color:red; font-size: 20px">*</span>
|
||||
用户名
|
||||
<a-input v-model:value="addData.username" 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.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="0">女</a-radio>
|
||||
</a-radio-group></div>
|
||||
<div style="margin-left: 15px">年龄：<a-input v-model:value="addData.age" style="width: 250px" type="number" /></div>
|
||||
</a-radio-group>
|
||||
</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 v-model:open="DeleteDiaLog" cancel-text="取消" ok-text="确认" title="删除用户" @cancel="deleteCancel" @ok="deleteOk">
|
||||
<p>是否要删除xxx数据？</p>
|
||||
</a-modal>
|
||||
<a-modal v-model:open="DeleteDiaLog" cancel-text="取消" ok-text="确认" title="删除用户" @cancel="deleteCancel" @ok="deleteOk"></a-modal>
|
||||
|
||||
<!--修改用户对话框-->
|
||||
<a-modal
|
||||
v-model:open="EditDiaLog"
|
||||
title="编辑"
|
||||
title="修改用户"
|
||||
@on-ok="editOk"
|
||||
@on-cancel="editCancel">
|
||||
<div style="">
|
||||
<div style="margin-bottom: 10px">
|
||||
<span>
|
||||
用户名：<a-input v-model:value="updateData.username" style="width: 180px" />
|
||||
</span>
|
||||
<span style="margin-left: 20px">
|
||||
电话：<a-input v-model:value="updateData.phone" placeholder="Enter something..." style="width: 180px" />
|
||||
</span>
|
||||
</div>
|
||||
<div style="margin-bottom: 10px">
|
||||
<span>
|
||||
性别：
|
||||
<a-radio-group v-model="sex">
|
||||
<a-radio label="男"></a-radio>
|
||||
<a-radio label="女"></a-radio>
|
||||
</a-radio-group>
|
||||
</span>
|
||||
<span style="margin-left: 98px">
|
||||
角色：
|
||||
<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-select>
|
||||
</span>
|
||||
</div>
|
||||
<div style="margin-bottom: 10px">邮箱：<Input v-model="updateData.email" style="width: 435px" /></div>
|
||||
<div style="margin-bottom: 10px">地址：<Input v-model="updateData.address" style="width: 435px" /></div>
|
||||
<div style="margin-bottom: 10px">简介：<Input v-model="updateData.description" style="width: 435px" type="textarea" /></div>
|
||||
</div>
|
||||
<a-form>
|
||||
<a-form-item style="margin-left: 15px">
|
||||
用户id：
|
||||
<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-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-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-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="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>
|
||||
|
||||
|
||||
<!--表格内容-->
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<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 {message} from "ant-design-vue";
|
||||
import requests from "@/public/request.js";
|
||||
@ -121,7 +206,7 @@ const sex = ref('男')
|
||||
|
||||
|
||||
const updateData = reactive({
|
||||
id: 0,
|
||||
id: '',
|
||||
username: '',
|
||||
address: '',
|
||||
phone: '',
|
||||
@ -136,7 +221,9 @@ const updateData = reactive({
|
||||
isExpired: false,
|
||||
passwordExpired: 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;
|
||||
DeleteId.value = record.id;
|
||||
};
|
||||
}
|
||||
|
||||
function deleteOk() {
|
||||
DeleteDiaLog.value = false;
|
||||
@ -278,7 +365,7 @@ function deleteCancel(){
|
||||
|
||||
|
||||
/*编辑用户*/
|
||||
const showEditDiaLog = (record, index) => {
|
||||
function showEditDiaLog(record, index){
|
||||
EditDiaLog.value = true
|
||||
updateData.id = record.id
|
||||
updateData.username = record.username
|
||||
@ -361,11 +448,6 @@ const columns = [
|
||||
dataIndex: 'username',
|
||||
key: 'username',
|
||||
},
|
||||
{
|
||||
title: '账户昵称',
|
||||
dataIndex: 'nickname',
|
||||
key: 'nickname',
|
||||
},
|
||||
{
|
||||
title: '电话',
|
||||
key: 'phone',
|
||||
@ -376,11 +458,21 @@ const columns = [
|
||||
dataIndex: 'enabled',
|
||||
key: 'enabled',
|
||||
},
|
||||
{
|
||||
title:'创建时间',
|
||||
key:'createdAt',
|
||||
dataIndex: 'createdAt',
|
||||
},
|
||||
{
|
||||
title: '更新时间',
|
||||
key: 'updatedAt',
|
||||
dataIndex: 'updatedAt'
|
||||
}
|
||||
},
|
||||
{
|
||||
title:'操作',
|
||||
key:'action',
|
||||
dataIndex: 'action'
|
||||
},
|
||||
];
|
||||
|
||||
const rowSelection = {
|
||||
@ -416,7 +508,9 @@ async function fetchData() {
|
||||
nickname: dataSource.value.users[i].user.nickname,
|
||||
phone: dataSource.value.users[i].user.phone,
|
||||
enabled: dataSource.value.users[i].user.enabled,
|
||||
createdAt:dataSource.value.users[i].user.createdAt,
|
||||
updatedAt: dataSource.value.users[i].user.updatedAt,
|
||||
id:dataSource.value.users[i].user.id,
|
||||
});
|
||||
}
|
||||
console.log(data.value);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user