轮播图修改1

src/Manager/Header.vue

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

src/Manager/components/Carousel.vue

@@ -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 current1 = ref(1);
+// const onChange = pageNumber => {
-const current2 = ref(2);
+//     console.log('Page: ', pageNumber);
-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: 10,
-  pageSize: 5,
 }));
 
 
+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');
+let modelRef = reactive({
-const modelRef = reactive({
-    // name: '',
-    // sub: {
-    //     name: '',
-    // },
     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({
+let searchData = reactive({
-   id: -1,
+   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>
 

src/Manager/components/Main.vue

@@ -1,7 +1,16 @@
 <template>
     <div>
-    <div style="background: #ececec; display: flex;flex-direction: row;width: 85vw;height: 250px;">
+    <div style="background: #ececec; display: flex;flex-direction: row;width: 85vw;height: 350px;">
-        <a-card title="前端设计" :bordered="false" style="width: 300px;height: 200px;margin-left: 20px;margin-top: 20px">
+
+
+        <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>