权限修改1
This commit is contained in:
parent
7a096661e2
commit
206909b017
@ -1,3 +1,374 @@
|
|||||||
<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>
|
</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-input class="first-input" v-model:value="searchData.id" addonBefore="轮播图Id" placeholder="请输入轮播图Id" />
|
||||||
<a-button :size="size" @click="searchUser"><SearchOutlined />查询</a-button>
|
<a-button :size="size" @click="searchUser"><SearchOutlined />查询</a-button>
|
||||||
<a-button type="primary" @click="showAddModal"><PlusOutlined />新增</a-button>
|
<a-button type="primary" @click="showAddModal"><PlusOutlined />新增</a-button>
|
||||||
|
<a-button type="primary" @click="showDeleteModal" danger><DeleteOutlined />删除</a-button>
|
||||||
|
|
||||||
</a-space>
|
</a-space>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user