轮播图修改1
This commit is contained in:
parent
73a8a054ef
commit
4d23b6a70e
@ -33,7 +33,8 @@ function $toggleDropdown() {
|
||||
<style scoped>
|
||||
.header {
|
||||
position: relative;
|
||||
background: rgb(68, 112, 131);
|
||||
/*background: rgb(68, 112, 131);*/
|
||||
background: #508bf3;
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
</a-space>
|
||||
</div>
|
||||
|
||||
<a-table :row-selection="rowSelection" :columns="columns" :data-source="states.data" :pagination="pagination" style="width: 85vw;">
|
||||
<a-table :row-selection="rowSelection" :columns="columns" :data-source="states.data" :pagination="pagination" :scroll="{ x: 1000, y: 430}" style="width: 85vw;">
|
||||
|
||||
|
||||
<template #bodyCell="{ column, record }">
|
||||
@ -118,13 +118,11 @@ import {
|
||||
} from '@ant-design/icons-vue';
|
||||
import {Form, message, Modal} from 'ant-design-vue';
|
||||
import requests from "../../public/request.js";
|
||||
|
||||
|
||||
const current1 = ref(1);
|
||||
const current2 = ref(2);
|
||||
const onChange = pageNumber => {
|
||||
console.log('Page: ', pageNumber);
|
||||
};
|
||||
// const current1 = ref(1);
|
||||
// const current2 = ref(2);
|
||||
// const onChange = pageNumber => {
|
||||
// console.log('Page: ', pageNumber);
|
||||
// };
|
||||
const open = ref(false);
|
||||
const addopen = ref(false);
|
||||
|
||||
@ -135,28 +133,86 @@ const showAddModal = () => {
|
||||
// // 翻页
|
||||
const pagination = computed(() => ({
|
||||
total: states.data.length,
|
||||
// current: current.value,
|
||||
pageSize: 5,
|
||||
pageSize: 10,
|
||||
}));
|
||||
|
||||
|
||||
const columns = [
|
||||
|
||||
{
|
||||
title: '作者',
|
||||
dataIndex: 'author',
|
||||
key: 'author',
|
||||
resizable: true,
|
||||
width: 100,
|
||||
minWidth: 100,
|
||||
maxWidth: 200,
|
||||
},
|
||||
{
|
||||
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: 150,
|
||||
},
|
||||
{
|
||||
title: '图片地址',
|
||||
dataIndex: 'image',
|
||||
key: 'image',
|
||||
width:250,
|
||||
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'displayOrder',
|
||||
key: 'displayOrder',
|
||||
width:80,
|
||||
// maxWidth: 80,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
key: 'isActive',
|
||||
dataIndex: 'isActive',
|
||||
width: 80,
|
||||
// maxWidth: 80,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const token = window.localStorage.getItem('token')
|
||||
const showModal = (record) => {
|
||||
// formState.author = record.author;
|
||||
console.log("record:",record)
|
||||
formState.id = record.id
|
||||
formState.description = record.description
|
||||
formState.photo = record.photo;
|
||||
formState.title=record.title;
|
||||
// formState.createdAt =record.createdAt;
|
||||
formState.image = record.image;
|
||||
formState.displayOrder = record.displayOrder;
|
||||
formState.isActive = record.isActive;
|
||||
|
||||
open.value = true;
|
||||
};
|
||||
|
||||
@ -167,12 +223,12 @@ const states = reactive({
|
||||
const deleteId = reactive({
|
||||
id: -1
|
||||
})
|
||||
//删除
|
||||
|
||||
//删除
|
||||
const showDeleteConfirm = (record) => {
|
||||
console.log("delete Dialog")
|
||||
Modal.confirm({
|
||||
title: 'Confirm',
|
||||
title: '删除数据',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
content: '确认删除这条数据吗',
|
||||
okText: '确认',
|
||||
@ -185,37 +241,31 @@ const showDeleteConfirm = (record) => {
|
||||
// 处理删除成功的响应
|
||||
console.log('删除成功');
|
||||
message.success("删除成功")
|
||||
getAll()
|
||||
})
|
||||
.catch(error => {
|
||||
// 处理删除失败的响应
|
||||
console.error('删除失败', error);
|
||||
message.error("删除失败")
|
||||
getAll()
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
// 新增
|
||||
// const addId = ref(-1);
|
||||
const useForm = Form.useForm;
|
||||
const showStates =ref('展示')
|
||||
// const value2 = ref('description');
|
||||
const modelRef = reactive({
|
||||
// name: '',
|
||||
// sub: {
|
||||
// name: '',
|
||||
// },
|
||||
let modelRef = reactive({
|
||||
author:'',
|
||||
description:'',
|
||||
displayOrder: 0,
|
||||
image:'',
|
||||
isActive: false,
|
||||
title:'',
|
||||
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
const { validateInfos } = useForm(
|
||||
@ -224,13 +274,11 @@ const { validateInfos } = useForm(
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
// message: 'Please input name',
|
||||
},
|
||||
],
|
||||
'sub.name': [
|
||||
{
|
||||
required: true,
|
||||
// message: 'Please input sub name',
|
||||
},
|
||||
],
|
||||
}),
|
||||
@ -254,50 +302,28 @@ const addOk = e => {
|
||||
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 fileList = ref([]);
|
||||
// const loading = ref(false);
|
||||
const imageUrl = ref('');
|
||||
|
||||
|
||||
function getBase64(img, callback) {
|
||||
const reader = new FileReader();
|
||||
reader.addEventListener('load', () => callback(reader.result));
|
||||
reader.readAsDataURL(img);
|
||||
}
|
||||
|
||||
const handleChange = info => {
|
||||
if (info.file.status === 'uploading') {
|
||||
loading.value = true;
|
||||
return;
|
||||
}
|
||||
if (info.file.status === 'done') {
|
||||
// Get this url from response in real world.
|
||||
getBase64(info.file.originFileObj, base64Url => {
|
||||
imageUrl.value = base64Url;
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
if (info.file.status === 'error') {
|
||||
loading.value = false;
|
||||
message.error('upload error');
|
||||
}
|
||||
};
|
||||
const beforeUpload = file => {
|
||||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
|
||||
if (!isJpgOrPng) {
|
||||
message.error('You can only upload JPG file!');
|
||||
}
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
if (!isLt2M) {
|
||||
message.error('Image must smaller than 2MB!');
|
||||
}
|
||||
return isJpgOrPng && isLt2M;
|
||||
};
|
||||
|
||||
// 状态
|
||||
const formState = reactive({
|
||||
id:-1,
|
||||
@ -311,67 +337,6 @@ const formState = reactive({
|
||||
isActive: false,
|
||||
});
|
||||
|
||||
|
||||
|
||||
const columns = [
|
||||
|
||||
{
|
||||
title: '作者',
|
||||
dataIndex: 'author',
|
||||
key: 'author',
|
||||
resizable: true,
|
||||
width: 100,
|
||||
minWidth: 100,
|
||||
maxWidth: 200,
|
||||
},
|
||||
{
|
||||
title:'图片',
|
||||
key: 'photo',
|
||||
dataIndex: 'photo',
|
||||
resizable: true,
|
||||
width: 150,
|
||||
|
||||
},
|
||||
{
|
||||
title: '标题',
|
||||
dataIndex: 'title',
|
||||
key: 'title',
|
||||
width:150,
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createdAt',
|
||||
key: 'createdAt',
|
||||
width:200,
|
||||
},
|
||||
{
|
||||
title: '图片地址',
|
||||
dataIndex: 'image',
|
||||
key: 'image',
|
||||
width:250,
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'displayOrder',
|
||||
key: 'displayOrder',
|
||||
width:80,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
key: 'isActive',
|
||||
dataIndex: 'isActive',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
},
|
||||
]
|
||||
// function handleResizeColumn(w, col) {
|
||||
// col.width = w;
|
||||
// }
|
||||
|
||||
|
||||
const rowSelection = {
|
||||
onChange: (selectedRowKeys, selectedRows) => {
|
||||
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
|
||||
@ -384,8 +349,6 @@ const rowSelection = {
|
||||
};
|
||||
|
||||
|
||||
// const token = ref("eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiI4IiwiZXhwIjoxNzA3MDYyNzU1fQ.a6ga7a0jhOabBMEmDmUd0sZsOo9fC8PjGHL19nF47KU");
|
||||
const token = window.localStorage.getItem('token')
|
||||
|
||||
// 接口
|
||||
onMounted(() => {
|
||||
@ -397,17 +360,9 @@ function getAll() {
|
||||
requests.infoGetHeaderImage(null,token).then((res)=>{
|
||||
console.log(res)
|
||||
states.data = res.data.data.data
|
||||
// // console.log(res.data.data)
|
||||
// loadingTable.value = false
|
||||
// for (let i = 0; i < res.data.data.data.length; i++) {
|
||||
// states.data[i] = res.data.data.data[i].user
|
||||
// }
|
||||
// // console.log("getAll:",states.data)
|
||||
})
|
||||
}
|
||||
|
||||
// const hideModal = () => {
|
||||
// };
|
||||
// 编辑
|
||||
function EditHeaderImage(){
|
||||
open.value = false;
|
||||
@ -429,8 +384,8 @@ function EditHeaderImage(){
|
||||
|
||||
|
||||
// 查询
|
||||
const searchData = reactive({
|
||||
id: -1,
|
||||
let searchData = reactive({
|
||||
id: '',
|
||||
})
|
||||
function searchUser() {
|
||||
// loadingTable.value = true
|
||||
@ -445,11 +400,17 @@ function searchUser() {
|
||||
states.data = res.data.data.data
|
||||
message.success('查询成功')
|
||||
// console.log(loadingTable.value)
|
||||
|
||||
} else {
|
||||
message.error(res.data.message)
|
||||
}
|
||||
// 查询后输入框清空
|
||||
creatSearchData();
|
||||
})
|
||||
}
|
||||
}
|
||||
const creatSearchData=() => {
|
||||
searchData.id = ''
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,7 +1,16 @@
|
||||
<template>
|
||||
<div>
|
||||
<div style="background: #ececec; display: flex;flex-direction: row;width: 85vw;height: 250px;">
|
||||
<a-card title="前端设计" :bordered="false" style="width: 300px;height: 200px;margin-left: 20px;margin-top: 20px">
|
||||
<div style="background: #ececec; display: flex;flex-direction: row;width: 85vw;height: 350px;">
|
||||
|
||||
|
||||
<a-tabs v-model:activeKey="activeKey">
|
||||
<a-tab-pane key="1" tab="项目 1"></a-tab-pane>
|
||||
<a-tab-pane key="2" tab="项目 2" force-render></a-tab-pane>
|
||||
<a-tab-pane key="3" tab="项目 3"></a-tab-pane>
|
||||
</a-tabs>
|
||||
|
||||
<div style="margin-top: 50px; display: flex;flex-direction: row;margin-left: -180px" class="Text" >
|
||||
<a-card title="前端设计" :bordered="false" style="width: 300px;height: 200px;margin-left: 10px;margin-top: 20px">
|
||||
<p>进度</p>
|
||||
<a-progress :percent="50" status="active" />
|
||||
<a-avatar-group :max-count="2" :max-style="{ color: '#f56a00', backgroundColor: '#fde3cf' }">
|
||||
@ -81,10 +90,14 @@
|
||||
</a-card>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 85vw;height: 300px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ref} from 'vue';
|
||||
|
||||
const activeKey = ref('1');
|
||||
</script>
|
||||
Loading…
x
Reference in New Issue
Block a user