From 206909b017a890736970c08b72e93cda256ebfec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A6=96=E5=A7=90?= <2981176548@qq.com>
Date: Sat, 2 Mar 2024 18:45:12 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9D=83=E9=99=90=E4=BF=AE=E6=94=B91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Manager/components/Authority.vue | 377 ++++++++++++++++++++++++++-
 src/Manager/components/Carousel.vue  |   2 +
 2 files changed, 376 insertions(+), 3 deletions(-)

diff --git a/src/Manager/components/Authority.vue b/src/Manager/components/Authority.vue
index e5d5f6a..b9f400d 100644
--- a/src/Manager/components/Authority.vue
+++ b/src/Manager/components/Authority.vue
@@ -1,3 +1,374 @@
-<template>
-  权限管理
-</template>
\ No newline at end of file
+<template xmlns="">
+    <div style="display:flex;flex-direction: column">
+        <div style="margin: 15px">
+            <a-space direction="vertical" style="display: flex;flex-direction: row">
+                <a-input class="first-input" v-model:value="searchData.id" addonBefore=" " placeholder="请输入根标签" />
+                <a-button :size="size" @click="searchUser"><SearchOutlined />查询</a-button>
+                <a-button type="primary" @click="showAddModal"><PlusOutlined />新增</a-button>
+            </a-space>
+
+          <div style="margin-top: 10px">
+              <a-dropdown>
+                <template #overlay>
+                    <a-menu @click="handleMenuClick">
+                        <a-menu-item key="1">
+                            <UserOutlined />
+                            老师
+                        </a-menu-item>
+                        <a-menu-item key="2">
+                            <UserOutlined />
+                            学生
+                        </a-menu-item>
+                    </a-menu>
+                </template>
+                <a-button >
+                    请选择角色
+                    <DownOutlined />
+                </a-button>
+            </a-dropdown>
+          </div>
+        </div>
+
+
+
+        <a-table :row-selection="rowSelection"  :rowKey="record => record.id" :columns="columns"  :data-source="states.data"  :pagination="pagination"  style="width: 84vw;">
+
+            <template #bodyCell="{ column, record }">
+
+                <template v-if="column.key === 'action'">
+              <span style="margin-left: 10px">
+                  <a-button  type="text" @click="showModal(record)" size="small" style=" color: dodgerblue;"><EditOutlined />修改</a-button>
+              <a-button  type="text" @click="showDeleteConfirm(record)" size="small" style=" color: dodgerblue;"><DeleteOutlined />删除</a-button>
+              </span>
+                </template>
+
+            </template>
+        </a-table>
+
+    </div>
+
+  <!--详情对话框-->
+    <a-modal v-model:open="open" title="编辑" ok-text="确认" cancel-text="取消" @ok="EditHeaderImage">
+
+        <a-form-item label="根权限" v-bind="validateInfos.name">
+            <a-input v-model:value="formState.title" />
+        </a-form-item>
+        <a-form-item label="权限名称" v-bind="validateInfos.name">
+            <a-input v-model:value="formState.image" />
+        </a-form-item>
+        <a-form-item label="编码" v-bind="validateInfos.name">
+            <a-input v-model:value="formState.displayOrder" />
+        </a-form-item>
+        <a-form-item label="类型" v-bind="validateInfos.name">
+            <a-radio-group  v-model:value="showStates">
+                <a-radio value="根权限">根权限</a-radio>
+                <a-radio value="子权限">子权限</a-radio>
+            </a-radio-group>
+        </a-form-item>
+
+    </a-modal>
+  <!--  新增-->
+
+    <a-modal v-model:open="addopen" title="新增数据" @ok="addOk" ok-text="确认" cancel-text="取消"  >
+        <a-form-item label="类型" v-bind="validateInfos.name" >
+            <a-radio-group  v-model:value="showStates">
+                <a-radio value="根权限">根权限</a-radio>
+                <a-radio value="子权限">子权限</a-radio>
+            </a-radio-group>
+        </a-form-item>
+        <a-form-item label="根权限" v-bind="validateInfos.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.title"  />
+        </a-form-item>
+        <a-form-item label="code" v-bind="validateInfos.name"  >
+            <a-input v-model:value="modelRef.title"  />
+        </a-form-item>
+    </a-modal>
+</template>
+
+
+<script setup>
+import {computed, createVNode, onMounted, reactive, ref} from 'vue';
+import {
+    DeleteOutlined,
+    DownOutlined,
+    EditOutlined,
+    ExclamationCircleOutlined,
+    PlusOutlined,
+    SearchOutlined,
+    UserOutlined
+} from '@ant-design/icons-vue';
+import {Form, Modal} from 'ant-design-vue';
+import requests from "../../public/request.js";
+
+const open = ref(false);
+const addopen = ref(false);
+
+const showAddModal = () => {
+    addopen.value = true;
+};
+
+// // 翻页
+const pagination = computed(() => ({
+    total: states.data.length,
+    pageSize: 5,
+}));
+
+
+const columns = [
+
+    {
+        title: '根权限',
+        dataIndex: 'author',
+        key: 'author',
+        resizable: true,
+
+    },
+    {
+        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: 200,
+    },
+    {
+        title: '操作',
+        key: 'action',
+    },
+]
+
+
+
+
+
+
+const token = window.localStorage.getItem('token')
+const showModal = (record) => {
+    console.log("record:",record)
+    formState.id = record.id
+    formState.description = record.description
+    formState.photo = record.photo;
+    formState.title=record.title;
+    formState.image = record.image;
+    formState.displayOrder = record.displayOrder;
+    formState.isActive = record.isActive;
+    open.value = true;
+};
+
+const states = reactive({
+    data:[],
+
+})
+const deleteId = reactive({
+    id: -1
+})
+
+//删除
+const showDeleteConfirm = (record) => {
+    console.log("delete Dialog")
+    Modal.confirm({
+        title: '删除数据',
+        icon: createVNode(ExclamationCircleOutlined),
+        content: '确认删除这条数据吗',
+        okText: '确认',
+        cancelText: '取消',
+        onOk: () => {
+            //
+            // deleteId.id = record.id
+            // requests.infoDeleteHeaderImage(deleteId, token)
+            //     .then(response => {
+            //         // 处理删除成功的响应
+            //         console.log('删除成功');
+            //         message.success("删除成功")
+            //         getAll()
+            //     })
+            //     .catch(error => {
+            //         // 处理删除失败的响应
+            //         console.error('删除失败', error);
+            //         message.error("删除失败")
+            //         getAll()
+            //     })
+
+        }
+
+    });
+
+};
+
+// 新增
+const useForm = Form.useForm;
+const showStates =ref('展示')
+let modelRef = reactive({
+    author:'',
+    description:'',
+    displayOrder: 0,
+    image:'',
+    isActive: false,
+    title:'',
+});
+
+const {  validateInfos } = useForm(
+    modelRef,
+    reactive({
+        name: [
+            {
+                required: true,
+            },
+        ],
+        'sub.name': [
+            {
+                required: true,
+            },
+        ],
+    }),
+);
+const addOk = e => {
+    console.log(e);
+    console.log('进入新增')
+    if (showStates.value === '展示') {
+        modelRef.isActive= true
+    }else {
+        modelRef.isActive= false
+    }
+
+    // requests.infoAddHeaderImage(modelRef,token).then((res)=>{
+    //     console.log(res)
+    //     if (res.data.code===200) {
+    //         message.success('新增成功')
+    //         getAll()
+    //     }
+    //     else {
+    //         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 imageUrl = ref('');
+function getBase64(img, callback) {
+    const reader = new FileReader();
+    reader.addEventListener('load', () => callback(reader.result));
+    reader.readAsDataURL(img);
+}
+
+// 状态
+const formState = reactive({
+    id:-1,
+    // author:'',
+    description: '',
+    photo:'',
+    title:'',
+    // createdAt:'',
+    image:'',
+    displayOrder:'',
+    isActive: false,
+});
+
+
+
+const rowSelection = {
+    onChange: (selectedRowKeys, selectedRows) => {
+        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+    },
+    getCheckboxProps: (record) => ({
+        // 设置每行选择框的属性
+        checked: record.id
+    }),
+};
+
+
+
+// 接口
+onMounted(() => {
+    getAll()
+})
+// 获取所有数据
+function getAll() {
+
+    requests.infoGetHeaderImage(null,token).then((res)=>{
+        console.log(res)
+        states.data = res.data.data.data
+    })
+}
+
+// 编辑
+function EditHeaderImage(){
+    open.value = false;
+    // requests.infoEditHeaderImage(formState,token).then((res)=>{
+    //     console.log("editResult:",res)
+    //     // console.log("updateData:",updateData)
+    //     if (res.data.code === 200) {
+    //         getAll()
+    //         message.success('修改成功')
+    //     }
+    //     else {
+    //         loadingTable.value = false
+    //         message.error('修改失败')
+    //
+    //     }
+    // })
+
+}
+
+
+// 查询
+let searchData = reactive({
+    id: '',
+})
+function searchUser() {
+    // loadingTable.value = true
+    if (searchData.id === '') {
+        getAll()
+    } else {
+        // requests.infoGetHeaderImage(searchData, token).then((res) => {
+        //     // loadingTable.value = false
+        //     console.log("searchResult:", res)
+        //     if (res.data.code === 200) {
+        //         states.data = []
+        //         states.data = res.data.data.data
+        //         message.success('查询成功')
+        //         // console.log(loadingTable.value)
+        //
+        //     } else {
+        //         message.error(res.data.message)
+        //     }
+        //     //  查询后输入框清空
+        //     creatSearchData();
+        // })
+    }
+}
+const  creatSearchData=() => {
+    searchData.id = ''
+}
+</script>
+
diff --git a/src/Manager/components/Carousel.vue b/src/Manager/components/Carousel.vue
index c4be74d..f5f0098 100644
--- a/src/Manager/components/Carousel.vue
+++ b/src/Manager/components/Carousel.vue
@@ -5,6 +5,8 @@
             <a-input class="first-input" v-model:value="searchData.id" addonBefore="轮播图Id" placeholder="请输入轮播图Id" />
             <a-button :size="size" @click="searchUser"><SearchOutlined />查询</a-button>
             <a-button type="primary" @click="showAddModal"><PlusOutlined />新增</a-button>
+            <a-button type="primary" @click="showDeleteModal" danger><DeleteOutlined />删除</a-button>
+
         </a-space>
     </div>