From 66f77fbbd46f462ed286757a1299eddad1d5edf4 Mon Sep 17 00:00:00 2001
From: easy <1358086367@qq.com>
Date: Wed, 1 Feb 2023 11:00:20 +0800
Subject: [PATCH] =?UTF-8?q?update:=20=E8=8F=9C=E5=8D=95=E7=AE=A1=E7=90=86-?=
 =?UTF-8?q?=E6=9A=82=E5=AD=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/system/Menu/Detail/ButtonMange.vue  | 16 +++++-----
 src/views/system/Menu/Detail/index.vue        |  5 ++++
 .../Menu/components/ButtonAddDialog.vue       | 30 +++++++++++++++----
 .../system/Menu/components/PermissChoose.vue  |  6 +++-
 src/views/system/Menu/index.vue               |  8 ++++-
 5 files changed, 49 insertions(+), 16 deletions(-)

diff --git a/src/views/system/Menu/Detail/ButtonMange.vue b/src/views/system/Menu/Detail/ButtonMange.vue
index ec037a7d..861b510f 100644
--- a/src/views/system/Menu/Detail/ButtonMange.vue
+++ b/src/views/system/Menu/Detail/ButtonMange.vue
@@ -4,13 +4,13 @@
             ref="tableRef"
             :columns="table.columns"
             model="TABLE"
-            :dataSource="table.data"
+            :dataSource="table.tableData"
         >
             <template #headerTitle>
                 <a-button
                     type="primary"
                     style="margin-right: 10px"
-                    @click="() => dialog.openDialog()"
+                    @click="() => dialog.openDialog('新增')"
                     ><plus-outlined />新增</a-button
                 >
             </template>
@@ -21,7 +21,7 @@
                         <a-button
                             style="padding: 0"
                             type="link"
-                            @click="() => dialog.openDialog(slotProps)"
+                            @click="() => dialog.openDialog('编辑', slotProps)"
                         >
                             <edit-outlined />
                         </a-button>
@@ -31,7 +31,7 @@
                         <a-button
                             style="padding: 0"
                             type="link"
-                            @click="() => dialog.openDialog(slotProps)"
+                            @click="() => dialog.openDialog('查看', slotProps)"
                         >
                             <edit-outlined />
                         </a-button>
@@ -81,8 +81,8 @@ const routeParams = {
 const dialogRef = ref<any>(null);
 const dialog = {
     // 打开弹窗
-    openDialog: (row?: object) => {
-        dialogRef.value && dialogRef.value.openDialog(row);
+    openDialog: (mode: string, row?: object) => {
+        dialogRef.value && dialogRef.value.openDialog(mode, row);
     },
     confirm: () => {},
 };
@@ -114,11 +114,11 @@ const table = reactive({
             width: 240,
         },
     ],
-    data: [] as tableDataItem[],
+    tableData: [] as tableDataItem[],
     getList: () => {
         routeParams.id &&
             getMenuInfo_api(routeParams.id).then((resp: any) => {
-                table.data = resp.result.buttons as tableDataItem[];
+                table.tableData = resp.result.buttons as tableDataItem[];
             });
     },
 });
diff --git a/src/views/system/Menu/Detail/index.vue b/src/views/system/Menu/Detail/index.vue
index 08de6fd6..9c40f0e1 100644
--- a/src/views/system/Menu/Detail/index.vue
+++ b/src/views/system/Menu/Detail/index.vue
@@ -17,6 +17,11 @@ const activeKey = ref('basic');
 
 <style lang="less" scoped>
 .menu-detail-container {
+    :deep(.ant-tabs-nav) {
+        background-color: #fff;
+        padding-left: 24px;
+        margin-bottom: 0;
+    }
     .ant-tabs-tabpane {
         background-color: #f0f2f5;
         padding: 24px;
diff --git a/src/views/system/Menu/components/ButtonAddDialog.vue b/src/views/system/Menu/components/ButtonAddDialog.vue
index 0099a601..78f9d309 100644
--- a/src/views/system/Menu/components/ButtonAddDialog.vue
+++ b/src/views/system/Menu/components/ButtonAddDialog.vue
@@ -1,7 +1,7 @@
 <template>
     <a-modal
         v-model:visible="dialog.visible"
-        title="新增"
+        :title="form.mode"
         width="660px"
         @ok="dialog.handleOk"
     >
@@ -14,7 +14,10 @@
                     { max: 64, message: '最多可输入64个字符' },
                 ]"
             >
-                <a-input v-model:value="form.data.id" />
+                <a-input
+                    v-model:value="form.data.id"
+                    :disabled="form.mode !== '新增'"
+                />
             </a-form-item>
             <a-form-item
                 label="名称"
@@ -24,13 +27,20 @@
                     { max: 64, message: '最多可输入64个字符' },
                 ]"
             >
-                <a-input v-model:value="form.data.name" />
+                <a-input
+                    v-model:value="form.data.name"
+                    :disabled="form.mode === '查看'"
+                />
             </a-form-item>
-            <a-form-item label="权限">
+            <a-form-item
+                label="权限"
+                :rules="[{ required: true, message: '请选择权限', validator: form.checkPermission, }]"
+            >
                 <PermissChoose
                     :first-width="8"
                     max-height="350px"
                     v-model:value="form.data.permissions"
+                    :disabled="form.mode === '查看'"
                 />
             </a-form-item>
             <a-form-item label="说明" name="describe">
@@ -38,6 +48,7 @@
                     v-model:value="form.data.describe"
                     :rows="4"
                     placeholder="请输入说明"
+                    :disabled="form.mode === '查看'"
                 />
             </a-form-item>
         </a-form>
@@ -45,6 +56,7 @@
 </template>
 
 <script setup lang="ts">
+import { Rule } from 'ant-design-vue/es/form';
 import PermissChoose from '../components/PermissChoose.vue';
 
 const emits = defineEmits(['confirm']);
@@ -53,9 +65,10 @@ const dialog = reactive({
     handleOk: () => {
         dialog.changeVisible();
     },
-    changeVisible: (formValue?: formType, show?: boolean) => {
-        dialog.visible = show === undefined ? !dialog.visible : show;
+    changeVisible: (mode?: string, formValue?: formType) => {
+        dialog.visible = !dialog.visible;
         form.data = formValue || { ...initForm };
+        form.mode = mode || '';
         console.log(1111111111, form.data);
     },
 });
@@ -67,6 +80,11 @@ const initForm = {
 } as formType;
 const form = reactive({
     data: { ...initForm },
+    mode: '',
+    checkPermission:async (_rule: Rule, value: string[])=>{
+        if(!value || value.length < 1) return Promise.reject('请选择权限')
+        return Promise.resolve()
+    }
 });
 
 // 将打开弹窗的操作暴露给父组件
diff --git a/src/views/system/Menu/components/PermissChoose.vue b/src/views/system/Menu/components/PermissChoose.vue
index 2657443e..7cc248c0 100644
--- a/src/views/system/Menu/components/PermissChoose.vue
+++ b/src/views/system/Menu/components/PermissChoose.vue
@@ -6,6 +6,7 @@
             allowClear
             placeholder="请输入权限名称"
             @input="search.search"
+            :disabled="props.disabled"
         />
 
         <div class="permission-table">
@@ -24,6 +25,7 @@
                             v-model:checked="rowItem.checkAll"
                             :indeterminate="rowItem.indeterminate"
                             @change="() => permission.selectAllOpions(rowItem)"
+                            :disabled="props.disabled"
                         >
                             {{ rowItem.name }}
                         </a-checkbox>
@@ -33,6 +35,7 @@
                             v-model:value="rowItem.checkedList"
                             :options="rowItem.options"
                             @change="((checkValue:string[])=>permission.selectOption(rowItem, checkValue))"
+                            :disabled="props.disabled"
                         />
                     </a-col>
                 </a-row>
@@ -48,6 +51,7 @@ const props = defineProps<{
     value: any[];
     firstWidth: number;
     maxHeight: string;
+    disabled: boolean;
 }>();
 const emits = defineEmits(['update:value']);
 const searchValue = ref<string>('');
@@ -128,7 +132,7 @@ const permission = reactive({
     },
     makeList: (checkedValue: any[], sourceList: any[]): permissionType[] => {
         console.log(checkedValue);
-        
+
         const result = sourceList.map((item) => {
             const checked = checkedValue.find(
                 (checkedItem) => checkedItem.permission === item.id,
diff --git a/src/views/system/Menu/index.vue b/src/views/system/Menu/index.vue
index c218aa80..a8c40c11 100644
--- a/src/views/system/Menu/index.vue
+++ b/src/views/system/Menu/index.vue
@@ -8,6 +8,7 @@
             :request="table.getList"
             model="TABLE"
             :params="query.params"
+
         >
             <template #headerTitle>
                 <a-button
@@ -252,4 +253,9 @@ const table = reactive({
 });
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.menu-container {
+    padding: 24px;
+}
+
+</style>