WxxyDeveloper/JSL_OrganizeInternalOAWeb
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/master'

Browse Source
This commit is contained in:
GUjiYN 2024-01-29 15:48:29 +08:00
commit a0dddd4d6d
3 changed files with 310 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

273
src/Manager/components/Carousel.vue
View File

@ -11,50 +11,130 @@
<a-table :row-selection="rowSelection" :columns="columns" :data-source="states.data" :scroll="{ y: 400 }">
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'name'">
<a>
{{ record.name }}
</a>
</template>
<template v-else-if="column.key === 'tags'">
<span>
<a-tag
v-for="tag in record.tags"
:key="tag"
:color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
>
{{ tag.toUpperCase() }}
</a-tag>
</span>
<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 type="primary" @click="showModal" size="small">详情</a-button>
<a-button type="dashed" @click="showDeleteConfirm" size="small">删除</a-button>
</span>
<span style="margin-left: 10px">
<a-button type="primary" @click="showModal(record)" size="small">详情</a-button>
<a-button type="dashed" @click="showDeleteConfirm" size="small">删除</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>
</div>
<!--详情对话框-->
<a-modal v-model:open="open" title="Modal" ok-text="确认" cancel-text="取消" @ok="hideModal">
<p>Bla bla ...</p>
<a-modal v-model:open="open" title="详情" ok-text="确认" cancel-text="取消" @ok="hideModal">
<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>
<a-form-item label="图片排序">
<a-input v-model:value="formState.displayOrder" />
</a-form-item>
<a-form-item label="状态">
<a-switch v-model:checked="formState.isActive" />
</a-form-item>
<a-form-item label="图片预览">
<div style="width: 480px;height: 100px;background-color:#fdf7f7;">
<img :src="formState.image" alt="" style="width: 480px;height: 100px;">
</div>
</a-form-item>
</a-modal>
<!-- 新增-->
<a-modal v-model:open="addopen" title="新增" @ok="addOk" ok-text="确认" cancel-text="取消">
<p>新增</p>
<a-modal v-model:open="addopen" title="新增数据" @ok="addOk" ok-text="确认" cancel-text="取消" >
<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-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-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-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>
</a-radio-group>
</a-modal>
</template>
<script setup>
import {createVNode, onMounted, reactive, ref} from 'vue';
import {ExclamationCircleOutlined, PlusOutlined, SearchOutlined} from '@ant-design/icons-vue';
import {Modal} from 'ant-design-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 => {
@ -66,12 +146,19 @@ const addopen = ref(false);
const showAddModal = () => {
addopen.value = true;
};
const showModal = () => {
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 hideModal = () => {
open.value = false;
};
const addOk = e => {
console.log(e);
addopen.value = false;
@ -92,28 +179,87 @@ const showDeleteConfirm = () => {
});
};
const data = [
{
key: '1',
Author: 'John Brown',
photo:'',
title:'写表',
createAt: 32,
address: 'New York No. 1 Lake Park',
display:'',
tags: ['展示'],
// 新增
const useForm = Form.useForm;
const value2 = ref('mysite');
const modelRef = reactive({
name: '',
sub: {
name: '',
},
{
key: '2',
Author: 'John Brown',
photo:'',
title:'写表',
createAt: 32,
address: 'New York No. 1 Lake Park',
display:'',
tags: ['展示'],
},
];
});
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 = [
@ -129,6 +275,7 @@ const columns = [
{
title:'图片',
key: 'photo',
dataIndex: 'photo',
resizable: true,
width: 150,
@ -159,8 +306,8 @@ const columns = [
},
{
title: '状态',
key: 'tags',
dataIndex: 'tags',
key: 'isActive',
dataIndex: 'isActive',
},
{
title: '操作',
@ -184,14 +331,14 @@ const rowSelection = {
};
const token = ref("eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiI4IiwiZXhwIjoxNzA2NDY0NTg3fQ.83dA6vySQQ4ay2W-9oHvPT8JULxB_oO-yFZx7jM9J8k");
const token = ref("eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxMyIsImV4cCI6MTcwNjU1MzIxNn0.KW3tSyK1nbSW4V-js1gJCmo1L3CuU1eI2Y8jX7-IqXY");
// 接口
onMounted(() => {
getAll()
})
// 获取所有数据
function getAll() {
requests.infoGetHeaderImage(null,token).then((res)=>{
@ -206,4 +353,24 @@ function getAll() {
})
}
// 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>

90
src/Manager/components/Main.vue
View File

@ -1,6 +1,90 @@
<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">
<p>进度</p>
<a-progress :percent="50" status="active" />
<a-avatar-group :max-count="2" :max-style="{ color: '#f56a00', backgroundColor: '#fde3cf' }">
<a-avatar src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=2" />
<a-avatar style="background-color: #1890ff">K</a-avatar>
<a-tooltip title="Ant User" placement="top">
<a-avatar style="background-color: #87d068">
<template #icon><UserOutlined /></template>
</a-avatar>
</a-tooltip>
<a-avatar style="background-color: #1890ff">
<template #icon><AntDesignOutlined /></template>
</a-avatar>
</a-avatar-group>
</a-card>
<a-card title="后端设计" :bordered="false" style="width: 300px;height: 200px;margin-left: 20px;margin-top: 20px">
<p>进度</p>
<a-progress :percent="80" status="active" stroke-color="green" />
<a-avatar-group :max-count="2" :max-style="{ color: '#f56a00', backgroundColor: '#fde3cf' }">
<a-avatar src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=2" />
<a-avatar style="background-color: #1890ff">K</a-avatar>
<a-tooltip title="Ant User" placement="top">
<a-avatar style="background-color: #87d068">
<template #icon><UserOutlined /></template>
</a-avatar>
</a-tooltip>
<a-avatar style="background-color: #1890ff">
<template #icon><AntDesignOutlined /></template>
</a-avatar>
</a-avatar-group>
</a-card>
<a-card style="width: 300px;height: 200px;margin-left: 20px;margin-top: 20px">
<a-progress type="dashboard" :percent="75" style="margin-left: 50px"/>
<p style="text-align: center;margin-left: -20px">项目总进度</p>
</a-card>
<a-card style="width: 300px;height: 200px;margin-left: 20px;margin-top: 20px;background-color:#d5eef6;">
<div style="display: flex;flex-direction: row">
<p style="margin-right: 80px">老师</p>
<p>总人数：</p>
</div>
详情：
<a-avatar-group>
<a-avatar src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=1" />
<a href="https://www.antdv.com">
<a-avatar style="background-color: #f56a00">K</a-avatar>
</a>
<a-tooltip title="Ant User" placement="top">
<a-avatar style="background-color: #87d068">
<template #icon><UserOutlined /></template>
</a-avatar>
</a-tooltip>
<a-avatar style="background-color: #1890ff">
<template #icon><AntDesignOutlined /></template>
</a-avatar>
</a-avatar-group>
<hr>
<div style="display: flex;flex-direction: row">
<p style="margin-right: 80px">学生</p>
<p>总人数：</p>
</div>
<div>
详情：
<a-avatar-group :max-count="2" :max-style="{ color: '#f56a00', backgroundColor: '#fde3cf' }">
<a-avatar src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=2" />
<a-avatar style="background-color: #1890ff">K</a-avatar>
<a-tooltip title="Ant User" placement="top">
<a-avatar style="background-color: #87d068">
<template #icon><UserOutlined /></template>
</a-avatar>
</a-tooltip>
<a-avatar style="background-color: #1890ff">
<template #icon><AntDesignOutlined /></template>
</a-avatar>
</a-avatar-group>
</div>
</a-card>
</div>
<div style="width: 85vw;height: 300px;"></div>
</div>
</template>
<script setup>
</script>

4
src/public/request.js
View File

@ -434,7 +434,9 @@ const infoEditHeaderImage = (id, data, token) => {
return axios({
url: api + "/info/header-image/edit",
method: "put",
params: id,
params: {
id: id
},
data: data,
headers: {
'Authorization':'Bearer '+token,