完善新增

src/LoginRegister/Login.vue

@@ -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>

src/Manager/Header.vue

@@ -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 {
@@ -39,8 +60,19 @@
     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>
-
-

src/Manager/components/Carousel.vue

@@ -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-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-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.displayOrder" />
         </a-form-item>
         <a-form-item label="图片地址" v-bind="validateInfos.name">
-            <a-space direction="vertical">
+            <a-input v-model:value="modelRef.image" />
-                <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;">
+<!--        <div style="width: 480px;background-color:#fdf7f7;">-->
-            <span style="color: red;font-size: 20px">*</span>
+<!--            <span style="color: red;font-size: 20px">*</span>-->
-            上传图片（格式为.jpg .jpeg .png,大小不超过2MB）
+<!--            上传图片（格式为.jpg .jpeg .png,大小不超过2MB）-->
-            <a-upload
+<!--            <a-upload-->
-                v-model:file-list="fileList"
+<!--                v-model:file-list="fileList"-->
-                name="avatar"
+<!--                name="avatar"-->
-                list-type="picture-card"
+<!--                list-type="picture-card"-->
-                class="avatar-uploader"
+<!--                class="avatar-uploader"-->
-                :show-upload-list="false"
+<!--                :show-upload-list="false"-->
-                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+<!--                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"-->
-                :before-upload="beforeUpload"
+<!--                :before-upload="beforeUpload"-->
-                @change="handleChange"
+<!--                @change="handleChange"-->
-                style="margin-left:100px"
+<!--                style="margin-left:100px"-->
-            >
+<!--            >-->
-                <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
+<!--                <img v-if="imageUrl" :src="imageUrl" alt="avatar" />-->
-                <div v-else>
+<!--                <div v-else>-->
-                    <loading-outlined v-if="loading"></loading-outlined>
+<!--                    <loading-outlined v-if="loading"></loading-outlined>-->
-                    <plus-outlined v-else></plus-outlined>
+<!--                    <plus-outlined v-else></plus-outlined>-->
-                    <div class="ant-upload-text">Upload</div>
+<!--                    <div class="ant-upload-text">Upload</div>-->
-                </div>
+<!--                </div>-->
-            </a-upload>
+<!--            </a-upload>-->
-        </div>
+<!--        </div>-->
-        <span style="color: red;font-size: 20px">*</span>状态
+        <span style="color: red;font-size: 20px;">*</span>状态
-                <a-radio-group v-model:value="formState.resource">
+                <a-radio-group  v-model:value="showStates">
-                    <a-radio value="1">展示</a-radio>
+                    <a-radio value="展示">展示</a-radio>
-                    <a-radio value="2">未展示</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: '',
+    // name: '',
-    sub: {
+    // sub: {
-        name: '',
+    //     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");
 
 
 // 接口

src/Manager/components/TeamInformation.vue

@@ -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>

src/router/index.js

@@ -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')
+    }
   ]
 })