完善新增

This commit is contained in:
妖姐 2024-02-04 02:01:33 +08:00
parent 4e59a42044
commit bc733e3d66
5 changed files with 180 additions and 473 deletions

View File

@ -1,4 +1,7 @@
<template>
<div>
<div>头部</div>
<div style="height: 300px;width: 400px; margin: 10px auto;background-color:#fdf7f7;">
<a-form
:model="formState"
name="normal_login"
@ -38,16 +41,20 @@
</a-form-item>
<a-form-item>
<a-button :disabled="disabled" type="primary" html-type="submit" class="login-form-button">
<a-button type="primary" html-type="submit" class="login-form-button">
Log in
</a-button>
Or
<a href="">register now!</a>
</a-form-item>
</a-form>
</div>
<div>底部</div>
</div>
</template>
<script setup>
import { reactive, computed } from 'vue';
import {computed, reactive} from 'vue';
// import {message} from "../router/index.js";
const formState = reactive({
username: '',
password: '',
@ -71,6 +78,6 @@ const disabled = computed(() => {
float: right;
}
#components-form-demo-normal-login .login-form-button {
width: 100%;
width: 100vw;
}
</style>

View File

@ -3,12 +3,33 @@
<a-button class="logo" ghost>LOGO</a-button>
<div class="centered-text">内部系统管理界面</div>
<div class="avatar-container">
<a-avatar :size="64">
<a-avatar :size="64" @click="$toggleDropdown">
<a-image :size="64" src="../views/images/img1.jpg"></a-image>
</a-avatar>
<!-- 下拉框-->
<div v-if="$dropdownVisible" class="dropdown">
<div class="dropdown-content">
<div>
<a href="/LoginRegister/Login">退出</a>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import {ref} from 'vue';
const $dropdownVisible = ref(false);
function $toggleDropdown() {
$dropdownVisible.value = !$dropdownVisible.value;
}
</script>
<style scoped>
.header {
position: relative;
@ -27,7 +48,7 @@
}
.avatar-container {
margin-left: auto; /* 将头像置于最右侧 */
margin-left: auto;
}
.centered-text {
@ -35,12 +56,23 @@
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size:35px;
font-size: 35px;
font-weight: normal;
color: white;
}
/*下框*/
.dropdown {
position: relative;
}
.dropdown .dropdown-content {
position: absolute;
top: 100%;
right: 0;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding: 12px;
z-index: 1;
}
</style>
<script setup>
</script>

View File

@ -36,17 +36,10 @@
<!--详情对话框-->
<a-modal v-model:open="open" title="详情" ok-text="确认" cancel-text="取消" @ok="EditHeaderImage">
<a-form-item label="图片详情">
<!-- <a-input v-model:value="formState.author" />-->
<a-input v-model:value="formState.description" />
</a-form-item>
<a-form-item label="图片标题">
<a-input v-model:value="formState.title" />
</a-form-item>
<!-- <a-form-item label="创建时间">-->
<!-- <a-input v-model:value="formState.createdAt" />-->
<!-- </a-form-item>-->
<a-form-item label="图片地址">
<a-input v-model:value="formState.image" />
</a-form-item>
@ -61,69 +54,57 @@
<img :src="formState.image" alt="" style="width: 480px;height: 100px;">
</div>
</a-form-item>
<a-form-item label="图片详情">
<a-textarea v-model:value="formState.description" show-count :maxlength="150" style="height: 100px;"/>
<!-- <a-input v-model:value="formState.description" />-->
</a-form-item>
</a-modal>
<!-- 新增-->
<a-modal v-model:open="addopen" title="新增数据" @ok="addOk" ok-text="确认" cancel-text="取消" >
<a-form-item label="图片作者" style="margin-left: 10px">
<a-input v-model:value="modelRef.author" />
</a-form-item>
<a-form-item label="图片标题" v-bind="validateInfos.name">
<a-input v-model:value="modelRef.name" />
</a-form-item>
<a-form-item label="图片作者" v-bind="validateInfos.name">
<a-input v-model:value="modelRef.name" />
</a-form-item>
<a-form-item label="创建时间" v-bind="validateInfos.name">
<a-input v-model:value="modelRef.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.name" />
<a-input v-model:value="modelRef.displayOrder" />
</a-form-item>
<a-form-item label="图片地址" v-bind="validateInfos.name">
<a-space direction="vertical">
<a-input v-model:value="value2">
<template #addonBefore>
<a-select v-model:value="value3" style="width: 90px">
<a-select-option value="Http://">Http://</a-select-option>
<a-select-option value="Https://">Https://</a-select-option>
</a-select>
</template>
<template #addonAfter>
<a-select v-model:value="value4" style="width: 80px">
<a-select-option value=".com">.com</a-select-option>
<a-select-option value=".jp">.jp</a-select-option>
<a-select-option value=".cn">.cn</a-select-option>
<a-select-option value=".org">.org</a-select-option>
</a-select>
</template>
</a-input>
</a-space>
<a-input v-model:value="modelRef.image" />
</a-form-item>
<div style="width: 480px;background-color:#fdf7f7;">
<span style="color: red;font-size: 20px">*</span>
上传图片格式为.jpg .jpeg .png,大小不超过2MB
<a-upload
v-model:file-list="fileList"
name="avatar"
list-type="picture-card"
class="avatar-uploader"
:show-upload-list="false"
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
:before-upload="beforeUpload"
@change="handleChange"
style="margin-left:100px"
>
<img v-if="imageUrl" :src="imageUrl" alt="avatar" />
<div v-else>
<loading-outlined v-if="loading"></loading-outlined>
<plus-outlined v-else></plus-outlined>
<div class="ant-upload-text">Upload</div>
</div>
</a-upload>
</div>
<span style="color: red;font-size: 20px">*</span>状态
<a-radio-group v-model:value="formState.resource">
<a-radio value="1">展示</a-radio>
<a-radio value="2">未展示</a-radio>
<!-- <div style="width: 480px;background-color:#fdf7f7;">-->
<!-- <span style="color: red;font-size: 20px">*</span>-->
<!-- 上传图片格式为.jpg .jpeg .png,大小不超过2MB-->
<!-- <a-upload-->
<!-- v-model:file-list="fileList"-->
<!-- name="avatar"-->
<!-- list-type="picture-card"-->
<!-- class="avatar-uploader"-->
<!-- :show-upload-list="false"-->
<!-- action="https://www.mocky.io/v2/5cc8019d300000980a055e76"-->
<!-- :before-upload="beforeUpload"-->
<!-- @change="handleChange"-->
<!-- style="margin-left:100px"-->
<!-- >-->
<!-- <img v-if="imageUrl" :src="imageUrl" alt="avatar" />-->
<!-- <div v-else>-->
<!-- <loading-outlined v-if="loading"></loading-outlined>-->
<!-- <plus-outlined v-else></plus-outlined>-->
<!-- <div class="ant-upload-text">Upload</div>-->
<!-- </div>-->
<!-- </a-upload>-->
<!-- </div>-->
<span style="color: red;font-size: 20px;">*</span>状态
<a-radio-group v-model:value="showStates">
<a-radio value="展示">展示</a-radio>
<a-radio value="未展示">未展示</a-radio>
</a-radio-group>
<a-form-item label="图片描述" v-bind="validateInfos.name" style="margin-top:15px">
<a-textarea v-model:value="modelRef.description" show-count :maxlength="150" />
</a-form-item>
</a-modal>
</template>
<script setup>
@ -166,6 +147,7 @@ const pagination = computed(() => ({
const showModal = (record) => {
// formState.author = record.author;
console.log("record:",record)
updateId.value = record.id
formState.description = record.description
formState.photo = record.photo;
@ -177,10 +159,7 @@ const showModal = (record) => {
open.value = true;
};
const addOk = e => {
console.log(e);
addopen.value = false;
};
const states = reactive({
data:[],
@ -216,32 +195,67 @@ const showDeleteConfirm = (record) => {
};
//
// const addId = ref(-1);
const useForm = Form.useForm;
const value2 = ref('mysite');
const showStates =ref('展示')
// const value2 = ref('description');
const modelRef = reactive({
name: '',
sub: {
name: '',
},
// name: '',
// sub: {
// name: '',
// },
author:'',
description:'',
displayOrder: 0,
image:'',
isActive: false,
title:'',
});
const { validateInfos } = useForm(
modelRef,
reactive({
name: [
{
required: true,
message: 'Please input name',
// message: 'Please input name',
},
],
'sub.name': [
{
required: true,
message: 'Please input sub name',
// message: 'Please input sub name',
},
],
}),
);
const addOk = e => {
console.log(e);
console.log('进入新增')
if (showStates.value === '展示') {
modelRef.isActive= true
}else {
modelRef.isActive= false
}
requests.infoAddHeaderImage(modelRef,token.value).then((res)=>{
console.log(res)
if (res.data.code===200) {
message.success('新增成功')
getAll()
}
else {
message.error('新增失败')
}
})
addopen.value = false;
};
const fileList = ref([]);
// const loading = ref(false);
const imageUrl = ref('');
@ -368,7 +382,7 @@ const rowSelection = {
};
const token = ref("eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxMyIsImV4cCI6MTcwNjU1MzIxNn0.KW3tSyK1nbSW4V-js1gJCmo1L3CuU1eI2Y8jX7-IqXY");
const token = ref("eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiI4IiwiZXhwIjoxNzA3MDYyNzU1fQ.a6ga7a0jhOabBMEmDmUd0sZsOo9fC8PjGHL19nF47KU");
//

View File

@ -1,355 +1,4 @@
<!--<template>-->
<!-- <a-table-->
<!-- :row-selection="rowSelection"-->
<!-- :scroll="{ y: 400 }"-->
<!-- :columns="columns"-->
<!-- :row-key="record => record.login.uuid"-->
<!-- :data-source="states.data"-->
<!-- :pagination="pagination"-->
<!-- :loading="loading"-->
<!-- @change="handleTableChange"-->
<!-- >-->
<!-- <template #bodyCell="{ column, record }">-->
<!-- <template v-if="column.key === 'isActive'">-->
<!-- <a-tag :bordered="false" color="success" v-if="record.isActive === true">展示</a-tag>-->
<!-- <a-tag :bordered="false" color="error" v-if="record.isActive === false">未展示</a-tag>-->
<!-- </template>-->
<!-- <template v-else-if="column.key === 'action'">-->
<!-- <span style="margin-left: 10px">-->
<!-- <a-button class="button2" type="text" @click="showModal(record)" size="small"><EditOutlined />修改</a-button>-->
<!-- <a-button class="button1" type="text" @click="showDeleteConfirm" size="small"><DeleteOutlined />删除</a-button>-->
<!-- </span>-->
<!-- </template>-->
<!-- <template v-else-if="column.key === 'photo'">-->
<!-- <img :src="record.image" alt="" style="width: 50px;height: 50px;text-align: center">-->
<!-- </template>-->
<!-- </template>-->
<!-- </a-table>-->
<!--</template>-->
<!--<script setup>-->
<!--import { computed } from 'vue';-->
<!--import { usePagination } from 'vue-request';-->
<!--import axios from 'axios';-->
<!--const queryData = params => {-->
<!-- return axios.get('https://randomuser.me/api?noinfo', {-->
<!-- params,-->
<!-- });-->
<!--};-->
<!--const {-->
<!-- data: dataSource,-->
<!-- run,-->
<!-- loading,-->
<!-- current,-->
<!-- pageSize,-->
<!--} = usePagination(queryData, {-->
<!-- formatResult: res => res.data.results,-->
<!-- pagination: {-->
<!-- currentKey: 'page',-->
<!-- pageSizeKey: 'results',-->
<!-- },-->
<!--});-->
<!--const pagination = computed(() => ({-->
<!-- total: 200,-->
<!-- current: current.value,-->
<!-- pageSize: pageSize.value,-->
<!--}));-->
<!--const handleTableChange = (pag, filters, sorter) => {-->
<!-- run({-->
<!-- results: pag.pageSize,-->
<!-- page: pag?.current,-->
<!-- sortField: sorter.field,-->
<!-- sortOrder: sorter.order,-->
<!-- ...filters,-->
<!-- });-->
<!--};-->
<!-- import {createVNode, onMounted, reactive, ref} from 'vue';-->
<!-- import {-->
<!-- DeleteOutlined,-->
<!-- EditOutlined,-->
<!-- ExclamationCircleOutlined,-->
<!-- PlusOutlined,-->
<!-- SearchOutlined-->
<!--} 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 open = ref(false);-->
<!-- const addopen = ref(false);-->
<!-- const showAddModal = () => {-->
<!-- addopen.value = true;-->
<!--};-->
<!-- // // -->
<!-- const showModal = (record) => {-->
<!-- // formState.author = record.author;-->
<!-- updateId.value = 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;-->
<!--};-->
<!-- const addOk = e => {-->
<!-- console.log(e);-->
<!-- addopen.value = false;-->
<!--};-->
<!-- const states = reactive({-->
<!-- data:[{-->
<!-- dataSource,-->
<!-- run,-->
<!-- loading,-->
<!-- current,-->
<!-- pageSize,-->
<!-- } = usePagination(queryData, {-->
<!-- formatResult: res => res.data.results,-->
<!-- pagination: {-->
<!-- currentKey: 'page',-->
<!-- pageSizeKey: 'results',-->
<!-- }})-->
<!-- ],-->
<!--})-->
<!-- //-->
<!-- const showDeleteConfirm = () => {-->
<!-- console.log("delete Dialog")-->
<!-- Modal.confirm({-->
<!-- title: 'Confirm',-->
<!-- icon: createVNode(ExclamationCircleOutlined),-->
<!-- content: '确认删除这条数据吗',-->
<!-- okText: '确认',-->
<!-- cancelText: '取消',-->
<!--});-->
<!--};-->
<!-- // -->
<!-- const useForm = Form.useForm;-->
<!-- const value2 = ref('mysite');-->
<!-- const modelRef = reactive({-->
<!-- name: '',-->
<!-- sub: {-->
<!-- name: '',-->
<!--},-->
<!--});-->
<!-- const { validateInfos } = useForm(-->
<!-- modelRef,-->
<!-- reactive({-->
<!-- name: [-->
<!--{-->
<!-- required: true,-->
<!-- message: 'Please input name',-->
<!--},-->
<!-- ],-->
<!-- 'sub.name': [-->
<!--{-->
<!-- required: true,-->
<!-- message: 'Please input sub name',-->
<!--},-->
<!-- ],-->
<!--}),-->
<!-- );-->
<!-- 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 updateId = ref(-1);-->
<!-- const formState = reactive({-->
<!-- // author:'',-->
<!-- description: '',-->
<!-- photo:'',-->
<!-- title:'',-->
<!-- // createdAt:'',-->
<!-- image:'',-->
<!-- displayOrder:'',-->
<!-- 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',-->
<!-- },-->
<!-- {-->
<!-- title: '操作',-->
<!-- key: 'action',-->
<!-- },-->
<!-- ]-->
<!-- // function handleResizeColumn(w, col) {-->
<!--// col.width = w;-->
<!--// }-->
<!-- const rowSelection = {-->
<!-- onChange: (selectedRowKeys, selectedRows) => {-->
<!-- console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);-->
<!--},-->
<!-- getCheckboxProps: record => ({-->
<!-- disabled: record.name === 'Disabled User',-->
<!-- // Column configuration not to be checked-->
<!-- name: record.name,-->
<!--}),-->
<!--};-->
<!-- const token = ref("eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxMyIsImV4cCI6MTcwNjU1MzIxNn0.KW3tSyK1nbSW4V-js1gJCmo1L3CuU1eI2Y8jX7-IqXY");-->
<!--// -->
<!-- onMounted(() => {-->
<!-- getAll()-->
<!--})-->
<!--// -->
<!-- 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 hideModal(){-->
<!-- open.value = false;-->
<!-- requests.infoEditHeaderImage(updateId,formState,token.value).then((res)=>{-->
<!-- console.log("editResult:",res)-->
<!-- // console.log("updateData:",updateData)-->
<!-- // if (res.data.code === 200) {-->
<!-- // getAll()-->
<!-- // message.success('')-->
<!-- // }-->
<!-- // else {-->
<!-- // loadingTable.value = false-->
<!-- // message.error('')-->
<!-- //-->
<!-- // }-->
<!--})-->
<!--}-->
<!--</script>-->
<template>
团队信息
</template>

View File

@ -11,7 +11,7 @@ const router = createRouter({
{
path:'/login',
name:'login',
component:()=>import('../LoginRigester/Login.vue')
component:()=>import('@/LoginRegister/Login.vue')
},
{
path:'/Manager',
@ -73,6 +73,11 @@ const router = createRouter({
}
]
}
,{
path:'/LoginRegister/Login',
name:'Login',
component:() =>import('@/LoginRegister/Login.vue')
}
]
})