权限修改1
This commit is contained in:
parent
7a096661e2
commit
206909b017
@ -1,3 +1,374 @@
|
||||
<template>
|
||||
权限管理
|
||||
</template>
|
||||
<template xmlns="">
|
||||
<div style="display:flex;flex-direction: column">
|
||||
<div style="margin: 15px">
|
||||
<a-space direction="vertical" style="display: flex;flex-direction: row">
|
||||
<a-input class="first-input" v-model:value="searchData.id" addonBefore=" " placeholder="请输入根标签" />
|
||||
<a-button :size="size" @click="searchUser"><SearchOutlined />查询</a-button>
|
||||
<a-button type="primary" @click="showAddModal"><PlusOutlined />新增</a-button>
|
||||
</a-space>
|
||||
|
||||
<div style="margin-top: 10px">
|
||||
<a-dropdown>
|
||||
<template #overlay>
|
||||
<a-menu @click="handleMenuClick">
|
||||
<a-menu-item key="1">
|
||||
<UserOutlined />
|
||||
老师
|
||||
</a-menu-item>
|
||||
<a-menu-item key="2">
|
||||
<UserOutlined />
|
||||
学生
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
<a-button >
|
||||
请选择角色
|
||||
<DownOutlined />
|
||||
</a-button>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<a-table :row-selection="rowSelection" :rowKey="record => record.id" :columns="columns" :data-source="states.data" :pagination="pagination" style="width: 84vw;">
|
||||
|
||||
<template #bodyCell="{ column, record }">
|
||||
|
||||
<template v-if="column.key === 'action'">
|
||||
<span style="margin-left: 10px">
|
||||
<a-button type="text" @click="showModal(record)" size="small" style=" color: dodgerblue;"><EditOutlined />修改</a-button>
|
||||
<a-button type="text" @click="showDeleteConfirm(record)" size="small" style=" color: dodgerblue;"><DeleteOutlined />删除</a-button>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
</template>
|
||||
</a-table>
|
||||
|
||||
</div>
|
||||
|
||||
<!--详情对话框-->
|
||||
<a-modal v-model:open="open" title="编辑" ok-text="确认" cancel-text="取消" @ok="EditHeaderImage">
|
||||
|
||||
<a-form-item label="根权限" v-bind="validateInfos.name">
|
||||
<a-input v-model:value="formState.title" />
|
||||
</a-form-item>
|
||||
<a-form-item label="权限名称" v-bind="validateInfos.name">
|
||||
<a-input v-model:value="formState.image" />
|
||||
</a-form-item>
|
||||
<a-form-item label="编码" v-bind="validateInfos.name">
|
||||
<a-input v-model:value="formState.displayOrder" />
|
||||
</a-form-item>
|
||||
<a-form-item label="类型" v-bind="validateInfos.name">
|
||||
<a-radio-group v-model:value="showStates">
|
||||
<a-radio value="根权限">根权限</a-radio>
|
||||
<a-radio value="子权限">子权限</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
|
||||
</a-modal>
|
||||
<!-- 新增-->
|
||||
|
||||
<a-modal v-model:open="addopen" title="新增数据" @ok="addOk" ok-text="确认" cancel-text="取消" >
|
||||
<a-form-item label="类型" v-bind="validateInfos.name" >
|
||||
<a-radio-group v-model:value="showStates">
|
||||
<a-radio value="根权限">根权限</a-radio>
|
||||
<a-radio value="子权限">子权限</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item label="根权限" v-bind="validateInfos.name" >
|
||||
<a-input v-model:value="modelRef.title" />
|
||||
</a-form-item>
|
||||
<a-form-item label="权限名称" v-bind="validateInfos.name" >
|
||||
<a-input v-model:value="modelRef.title" />
|
||||
</a-form-item>
|
||||
<a-form-item label="code" v-bind="validateInfos.name" >
|
||||
<a-input v-model:value="modelRef.title" />
|
||||
</a-form-item>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
import {computed, createVNode, onMounted, reactive, ref} from 'vue';
|
||||
import {
|
||||
DeleteOutlined,
|
||||
DownOutlined,
|
||||
EditOutlined,
|
||||
ExclamationCircleOutlined,
|
||||
PlusOutlined,
|
||||
SearchOutlined,
|
||||
UserOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import {Form, Modal} from 'ant-design-vue';
|
||||
import requests from "../../public/request.js";
|
||||
|
||||
const open = ref(false);
|
||||
const addopen = ref(false);
|
||||
|
||||
const showAddModal = () => {
|
||||
addopen.value = true;
|
||||
};
|
||||
|
||||
// // 翻页
|
||||
const pagination = computed(() => ({
|
||||
total: states.data.length,
|
||||
pageSize: 5,
|
||||
}));
|
||||
|
||||
|
||||
const columns = [
|
||||
|
||||
{
|
||||
title: '根权限',
|
||||
dataIndex: 'author',
|
||||
key: 'author',
|
||||
resizable: true,
|
||||
|
||||
},
|
||||
{
|
||||
title:'权限名称',
|
||||
key: 'photo',
|
||||
dataIndex: 'photo',
|
||||
resizable: true,
|
||||
// width: 150,
|
||||
// maxWidth: 150,
|
||||
|
||||
},
|
||||
{
|
||||
title: '编码',
|
||||
dataIndex: 'title',
|
||||
key: 'title',
|
||||
// width:150,
|
||||
// maxWidth: 150,
|
||||
},
|
||||
{
|
||||
title: '类型',
|
||||
dataIndex: 'createdAt',
|
||||
key: 'createdAt',
|
||||
// width:200,
|
||||
// maxWidth: 200,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const token = window.localStorage.getItem('token')
|
||||
const showModal = (record) => {
|
||||
console.log("record:",record)
|
||||
formState.id = record.id
|
||||
formState.description = record.description
|
||||
formState.photo = record.photo;
|
||||
formState.title=record.title;
|
||||
formState.image = record.image;
|
||||
formState.displayOrder = record.displayOrder;
|
||||
formState.isActive = record.isActive;
|
||||
open.value = true;
|
||||
};
|
||||
|
||||
const states = reactive({
|
||||
data:[],
|
||||
|
||||
})
|
||||
const deleteId = reactive({
|
||||
id: -1
|
||||
})
|
||||
|
||||
//删除
|
||||
const showDeleteConfirm = (record) => {
|
||||
console.log("delete Dialog")
|
||||
Modal.confirm({
|
||||
title: '删除数据',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
content: '确认删除这条数据吗',
|
||||
okText: '确认',
|
||||
cancelText: '取消',
|
||||
onOk: () => {
|
||||
//
|
||||
// deleteId.id = record.id
|
||||
// requests.infoDeleteHeaderImage(deleteId, token)
|
||||
// .then(response => {
|
||||
// // 处理删除成功的响应
|
||||
// console.log('删除成功');
|
||||
// message.success("删除成功")
|
||||
// getAll()
|
||||
// })
|
||||
// .catch(error => {
|
||||
// // 处理删除失败的响应
|
||||
// console.error('删除失败', error);
|
||||
// message.error("删除失败")
|
||||
// getAll()
|
||||
// })
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
// 新增
|
||||
const useForm = Form.useForm;
|
||||
const showStates =ref('展示')
|
||||
let modelRef = reactive({
|
||||
author:'',
|
||||
description:'',
|
||||
displayOrder: 0,
|
||||
image:'',
|
||||
isActive: false,
|
||||
title:'',
|
||||
});
|
||||
|
||||
const { validateInfos } = useForm(
|
||||
modelRef,
|
||||
reactive({
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
},
|
||||
],
|
||||
'sub.name': [
|
||||
{
|
||||
required: true,
|
||||
},
|
||||
],
|
||||
}),
|
||||
);
|
||||
const addOk = e => {
|
||||
console.log(e);
|
||||
console.log('进入新增')
|
||||
if (showStates.value === '展示') {
|
||||
modelRef.isActive= true
|
||||
}else {
|
||||
modelRef.isActive= false
|
||||
}
|
||||
|
||||
// requests.infoAddHeaderImage(modelRef,token).then((res)=>{
|
||||
// console.log(res)
|
||||
// if (res.data.code===200) {
|
||||
// message.success('新增成功')
|
||||
// getAll()
|
||||
// }
|
||||
// else {
|
||||
// message.error('新增失败')
|
||||
// }
|
||||
// })
|
||||
// 清空原本数据
|
||||
createModelRef();
|
||||
addopen.value = false;
|
||||
};
|
||||
const createModelRef = () => {
|
||||
modelRef.isActive =false
|
||||
modelRef.author=''
|
||||
modelRef.description=''
|
||||
modelRef.displayOrder=0
|
||||
modelRef.image=''
|
||||
modelRef.isActive=false
|
||||
modelRef.title=''
|
||||
};
|
||||
|
||||
|
||||
const imageUrl = ref('');
|
||||
function getBase64(img, callback) {
|
||||
const reader = new FileReader();
|
||||
reader.addEventListener('load', () => callback(reader.result));
|
||||
reader.readAsDataURL(img);
|
||||
}
|
||||
|
||||
// 状态
|
||||
const formState = reactive({
|
||||
id:-1,
|
||||
// author:'',
|
||||
description: '',
|
||||
photo:'',
|
||||
title:'',
|
||||
// createdAt:'',
|
||||
image:'',
|
||||
displayOrder:'',
|
||||
isActive: false,
|
||||
});
|
||||
|
||||
|
||||
|
||||
const rowSelection = {
|
||||
onChange: (selectedRowKeys, selectedRows) => {
|
||||
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
|
||||
},
|
||||
getCheckboxProps: (record) => ({
|
||||
// 设置每行选择框的属性
|
||||
checked: record.id
|
||||
}),
|
||||
};
|
||||
|
||||
|
||||
|
||||
// 接口
|
||||
onMounted(() => {
|
||||
getAll()
|
||||
})
|
||||
// 获取所有数据
|
||||
function getAll() {
|
||||
|
||||
requests.infoGetHeaderImage(null,token).then((res)=>{
|
||||
console.log(res)
|
||||
states.data = res.data.data.data
|
||||
})
|
||||
}
|
||||
|
||||
// 编辑
|
||||
function EditHeaderImage(){
|
||||
open.value = false;
|
||||
// requests.infoEditHeaderImage(formState,token).then((res)=>{
|
||||
// console.log("editResult:",res)
|
||||
// // console.log("updateData:",updateData)
|
||||
// if (res.data.code === 200) {
|
||||
// getAll()
|
||||
// message.success('修改成功')
|
||||
// }
|
||||
// else {
|
||||
// loadingTable.value = false
|
||||
// message.error('修改失败')
|
||||
//
|
||||
// }
|
||||
// })
|
||||
|
||||
}
|
||||
|
||||
|
||||
// 查询
|
||||
let searchData = reactive({
|
||||
id: '',
|
||||
})
|
||||
function searchUser() {
|
||||
// loadingTable.value = true
|
||||
if (searchData.id === '') {
|
||||
getAll()
|
||||
} else {
|
||||
// requests.infoGetHeaderImage(searchData, token).then((res) => {
|
||||
// // loadingTable.value = false
|
||||
// console.log("searchResult:", res)
|
||||
// if (res.data.code === 200) {
|
||||
// states.data = []
|
||||
// states.data = res.data.data.data
|
||||
// message.success('查询成功')
|
||||
// // console.log(loadingTable.value)
|
||||
//
|
||||
// } else {
|
||||
// message.error(res.data.message)
|
||||
// }
|
||||
// // 查询后输入框清空
|
||||
// creatSearchData();
|
||||
// })
|
||||
}
|
||||
}
|
||||
const creatSearchData=() => {
|
||||
searchData.id = ''
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -5,6 +5,8 @@
|
||||
<a-input class="first-input" v-model:value="searchData.id" addonBefore="轮播图Id" placeholder="请输入轮播图Id" />
|
||||
<a-button :size="size" @click="searchUser"><SearchOutlined />查询</a-button>
|
||||
<a-button type="primary" @click="showAddModal"><PlusOutlined />新增</a-button>
|
||||
<a-button type="primary" @click="showDeleteModal" danger><DeleteOutlined />删除</a-button>
|
||||
|
||||
</a-space>
|
||||
</div>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user