From 5f3f77f32c06ed13ada82f283a464aeb6390a75c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A6=96=E5=A7=90?= <2981176548@qq.com>
Date: Mon, 29 Jan 2024 02:43:31 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BD=AE=E6=92=AD=E5=9B=BE=E4=BF=AE=E6=94=B92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Manager/components/Carousel.vue | 273 ++++++++++++++++++++++------
 src/Manager/components/Main.vue     |  90 ++++++++-
 src/public/request.js               |   4 +-
 3 files changed, 310 insertions(+), 57 deletions(-)

diff --git a/src/Manager/components/Carousel.vue b/src/Manager/components/Carousel.vue
index 8fcb274..790b93b 100644
--- a/src/Manager/components/Carousel.vue
+++ b/src/Manager/components/Carousel.vue
@@ -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>
diff --git a/src/Manager/components/Main.vue b/src/Manager/components/Main.vue
index bde9299..c902d53 100644
--- a/src/Manager/components/Main.vue
+++ b/src/Manager/components/Main.vue
@@ -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>
\ No newline at end of file
diff --git a/src/public/request.js b/src/public/request.js
index ca64332..e0f4ccf 100644
--- a/src/public/request.js
+++ b/src/public/request.js
@@ -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,