角色权限菜单显示

src/views/permission/add.vue

@@ -1,34 +1,53 @@
 <template>
   <BasicModal v-bind="$attrs" @register="register" @ok="confirm" title="添加xxx">
     <BasicForm @register="registerForm" :model="model" />
+    <!-- <MenuTree /> -->
+    <div style="display: flex;">
+      <p class="tree-label">菜单</p>
+      <Tree :treeData="treeData" :arr="arr" />
+    </div>
   </BasicModal>
 </template>
 <script lang="ts">
-  import { defineComponent, ref } from 'vue';
+  import { defineComponent, ref,  } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
+  import { treeData } from './data';
+  import Tree from './tree.vue'
   import { adapt } from '/@/utils/adapt'
 
+
   export default defineComponent({
-    components: { BasicModal, BasicForm },
+    components: { BasicModal, BasicForm, Tree },
     setup() {
       const modelRef = ref({});
       const adaptWidth = adapt()
+      const arr:string[] = ['0-0-0-1', '0-0-0']
 
       const schemas: FormSchema[] = [
         {
           field: 'name',
           component: 'Input',
-          label: '姓名',
+          label: '账户名',
           labelWidth: adaptWidth.labelWidth,
           colProps: {
             span: adaptWidth.elContainer,
           }
         },
         {
-          field: 'addr',
+          field: 'password',
+          component: 'Input',
+          label: '密码',
+          labelWidth: adaptWidth.labelWidth,
+
+          colProps: {
+            span: adaptWidth.elContainer,
+          },
+        },
+        {
+          field: 'detail',
           component: 'Input',
-          label: '地址',
+          label: '详情',
           labelWidth: adaptWidth.labelWidth,
 
           colProps: {
@@ -59,7 +78,7 @@
         // });
 
         // 方式2
-        modelRef.value = { name: data.data, addr: data.info };
+        modelRef.value = { name: data.name, password: data.password, detail: data.detail };
 
         // setProps({
         //   model:{ field2: data.data, field1: data.info }
@@ -69,10 +88,18 @@
       function confirm() {
         console.log('确定')
         console.log(getFieldsValue())  // 表单数据
-
         closeModal()  // 关闭弹窗
       }
-      return { register, schemas, registerForm, model: modelRef,confirm, adaptWidth };
+      return {
+        register,
+        schemas,
+        registerForm,
+        model: modelRef,
+        confirm,
+        adaptWidth,
+        treeData,
+        arr
+      };
     },
   });
 </script>
@@ -80,10 +107,25 @@
 .ant-form-item-label {
   text-align: center !important;
 }
+
+.tree-label {
+  width: 20.6%;
+  margin-top: 8px;
+  margin-bottom: 1em;
+  text-align: center;
+}
+
 @media (max-width: 639px) {
   .ant-form-item-label {
   line-height: 2.5715 !important;
   text-align: center !important;
  }
+
+  .tree-label {
+  width: 33%;
+  margin-top: 8px;
+  margin-bottom: 1em;
+  text-align: center;
+}
 }
 </style>

src/views/permission/data.ts

@@ -7,12 +7,13 @@ export const treeData: TreeItem[] = [
     icon: 'home|svg',
     children: [
       { title: 'leaf', key: '0-0-0' },
+      { title: 'leaf', key: '0-0-2' },
       {
         title: 'leaf',
         key: '0-0-1',
         children: [
           { title: 'leaf', key: '0-0-0-0' },
-          { title: 'leaf', key: '0-0-0-1' },
+          { title: 'leafadsada', key: '0-0-0-1' },
         ],
       },
     ],

src/views/permission/index.vue

@@ -46,19 +46,19 @@ import { useModal } from '/@/components/Modal';
     {
       title: '账户名',
       dataIndex: 'name',
-      editRow: true,
+      // editRow: true,
       width: 200,
     },
     {
       title: '密码',
       dataIndex: 'password',
-      editRow: true,
+      // editRow: true,
       width: 200,
     },
     {
       title: '详情',
       dataIndex: 'detail',
-      editRow: true,
+      // editRow: true,
       width: 200,
     },
   ];
@@ -106,8 +106,11 @@ import { useModal } from '/@/components/Modal';
       function addColumn() {
         console.log('添加')
         openAdd(true, {
-          data: '苏轼',
-          info: '苏州',
+          // name: '',
+          // password: '',
+          // detail: '',
+          // tree: '',
+          isUpdate: true,
         });
       }
 
@@ -118,50 +121,38 @@ import { useModal } from '/@/components/Modal';
 
       function handleEdit(record: EditRecordRow) {
         currentEditKeyRef.value = record.id;  // record.key
-        record.onEdit?.(true);
-      }
-
-      function handleCancel(record: EditRecordRow) {
-        currentEditKeyRef.value = '';
-        record.onEdit?.(false, false);
+        console.log(record)
+        openAdd(true, {
+          name: record.name,
+          password: record.password,
+          detail: record.detail,
+          tree: 'none',
+        });
       }
 
       function handleDelete(record: Recordable) {
-        console.log('点击了删除', record);
+        console.log('点击了删除', record.id);
         const data = getTableAction().getDataSource()
         console.log(data)
-        getTableAction().setTableData(data.map(item => item.id !== record.id))
+        getTableAction().setTableData(data.filter(item => item.id !== record.id))
       }
 
       function createActions(record: EditRecordRow, column: BasicColumn): ActionItem[] {
-        if (!record.editable) {
-          return [
-            {
-              label: '编辑',
-              icon: 'ant-design:edit-outlined',
-              color: 'warning',
-              disabled: currentEditKeyRef.value ? currentEditKeyRef.value !== record.key : false,
-              onClick: handleEdit.bind(null, record),
-            },
-            {
-              label: '删除',
-              color: 'error',
-              icon: 'ic:outline-delete-outline',
-              disabled: currentEditKeyRef.value ? currentEditKeyRef.value !== record.key : false,
-              onClick: handleDelete.bind(null, record),
-            },
-          ];
-        }
+        column
         return [
           {
-            label: '保存',
-            onClick: handleSave.bind(null, record, column),
+            label: '编辑',
+            icon: 'ant-design:edit-outlined',
+            color: 'warning',
+            onClick: handleEdit.bind(null, record),
           },
           {
-            label: '取消',
+            label: '删除',
+            color: 'error',
+            icon: 'ic:outline-delete-outline',
             popConfirm: {
-              title: '是否取消编辑',
-              confirm: handleCancel.bind(null, record, column),
+              title: '是否确认删除',
+              confirm: handleDelete.bind(null, record),
             },
           },
         ];

src/views/permission/menuTree.vue

@@ -1,36 +0,0 @@
-<template>
-  <PageWrapper title="Tree基础示例">
-    <div class="flex">
-      <CollapseContainer title="基础示例" :style="{ width: '33%' }" class="mr-4">
-        <BasicTree :treeData="treeData" />
-      </CollapseContainer>
-
-      <CollapseContainer title="可勾选" class="mr-4" :style="{ width: '33%' }">
-        <BasicTree :treeData="treeData" :checkable="true" />
-      </CollapseContainer>
-
-      <CollapseContainer title="默认展开/勾选示例" :style="{ width: '33%' }">
-        <BasicTree
-          :treeData="treeData"
-          :checkable="true"
-          :expandedKeys="['0-0']"
-          :checkedKeys="['0-0']"
-        />
-      </CollapseContainer>
-    </div>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { BasicTree } from '/@/components/Tree/index';
-  import { treeData } from './data';
-  import { CollapseContainer } from '/@/components/Container/index';
-  import { PageWrapper } from '/@/components/Page';
-
-  export default defineComponent({
-    components: { BasicTree, CollapseContainer, PageWrapper },
-    setup() {
-      return { treeData };
-    },
-  });
-</script>

src/views/permission/tree.vue

@@ -0,0 +1,49 @@
+<template>
+  <a-tree
+    checkable
+    :tree-data="treeData"
+    v-model:expandedKeys="expandedKeys"
+    v-model:selectedKeys="selectedKeys"
+    v-model:checkedKeys="checkedKeys"
+  >
+    <!-- <template #title0010><span style="color: #1890ff;">sss</span></template> -->
+  </a-tree>
+</template>
+<script lang="ts">
+import { defineComponent, ref, watch } from 'vue';
+import { Tree } from 'ant-design-vue';
+
+export default defineComponent({
+  components: { [Tree.name]: Tree },
+  props: {
+    treeData: Object,
+    arr: Array
+  },
+  setup(props) {
+    const { treeData } = props
+    const arr:any = props.arr
+    console.log(arr)
+    console.log(props)
+    const expandedKeys = ref<string[]>(['0-0-0', '0-0-1']); // 展开树节点
+    const selectedKeys = ref<string[]>(['0-0-0', '0-0-0']); // 点击节点,
+    const checkedKeys = ref<string[]>(arr); // 勾选节点复选框
+    console.log(checkedKeys)
+    watch(expandedKeys, () => {
+      console.log('expandedKeys', expandedKeys);
+    });
+    watch(selectedKeys, () => {
+      console.log('selectedKeys', selectedKeys);
+    });
+    watch(checkedKeys, () => {
+      console.log('checkedKeys', checkedKeys);
+    });
+
+    return {
+      treeData,
+      expandedKeys,
+      selectedKeys,
+      checkedKeys,
+    };
+  },
+});
+</script>

src/views/table/editTable/index.vue

@@ -219,8 +219,7 @@ import { useModal } from '/@/components/Modal';
        function handleDelete(record: Recordable) {
         console.log('点击了删除', record);
         const data = getTableAction().getDataSource()
-        console.log(data)
-        getTableAction().setTableData(data.map(item => item.id !== record.id))
+        getTableAction().setTableData(data.filter(item => item.id !== record.id))
       }
 
       function createActions(record: EditRecordRow, column: BasicColumn): ActionItem[] {
@@ -238,7 +237,10 @@ import { useModal } from '/@/components/Modal';
               color: 'error',
               icon: 'ic:outline-delete-outline',
               disabled: currentEditKeyRef.value ? currentEditKeyRef.value !== record.key : false,
-              onClick: handleDelete.bind(null, record),
+              popConfirm: {
+                title: '是否确认删除',
+                confirm: handleDelete.bind(null, record),
+              },
             },
           ];
         }