添加假数据，模拟。。

src/components/Form/src/components/RadioButtonGroup.vue

@@ -28,7 +28,7 @@
     },
     props: {
       value: {
-        type: Boolean,
+        type: Number,
         // type: String as PropType<string>,
       },
       options: {

src/components/Form/src/types/form.ts

@@ -6,6 +6,7 @@ import type { FormItem } from './formItem';
 import type { ColEx, ComponentType } from './index';
 import type { TableActionType } from '/@/components/Table/src/types/table';
 import type { CSSProperties } from 'vue';
+import type { RowProps } from 'ant-design-vue/lib/grid/Row';
 
 export type FieldMapToTime = [string, [string, string], string?][];
 
@@ -31,6 +32,7 @@ export interface FormActionType {
   getFieldsValue: () => Recordable;
   clearValidate: (name?: string | string[]) => Promise<void>;
   updateSchema: (data: Partial<FormSchema> | Partial<FormSchema>[]) => Promise<void>;
+  resetSchema: (data: Partial<FormSchema> | Partial<FormSchema>[]) => Promise<void>;
   setProps: (formProps: Partial<FormProps>) => Promise<void>;
   removeSchemaByFiled: (field: string | string[]) => Promise<void>;
   appendSchemaByField: (
@@ -48,11 +50,15 @@ export type RegisterFn = (formInstance: FormActionType) => void;
 export type UseFormReturnType = [RegisterFn, FormActionType];
 
 export interface FormProps {
-  // layout?: 'vertical' | 'inline' | 'horizontal';
+  layout?: 'vertical' | 'inline' | 'horizontal';
   // Form value
   model?: Recordable;
   // The width of all items in the entire form
   labelWidth?: number | string;
+  //alignment
+  labelAlign?: 'left' | 'right';
+  //Row configuration for the entire form
+  rowProps?: RowProps;
   // Submit form on reset
   submitOnReset?: boolean;
   // Col configuration for the entire form
@@ -82,6 +88,8 @@ export interface FormProps {
   fieldMapToTime?: FieldMapToTime;
   // Placeholder is set automatically
   autoSetPlaceHolder?: boolean;
+  // Auto submit on press enter on input
+  autoSubmitOnEnter?: boolean;
   // Check whether the information is added to the label
   rulesMessageJoinLabel?: boolean;
   // Whether to show collapse and expand buttons
@@ -124,7 +132,10 @@ export interface FormSchema {
   // Auxiliary text
   subLabel?: string;
   // Help text on the right side of the text
-  helpMessage?: string | string[];
+  helpMessage?:
+    | string
+    | string[]
+    | ((renderCallbackParams: RenderCallbackParams) => string | string[]);
   // BaseHelp component props
   helpComponentProps?: Partial<HelpComponentProps>;
   // Label width, if it is passed, the labelCol and WrapperCol configured by itemProps will be invalid
@@ -143,7 +154,7 @@ export interface FormSchema {
       }) => Recordable)
     | object;
   // Required
-  required?: boolean;
+  required?: boolean | ((renderCallbackParams: RenderCallbackParams) => boolean);
 
   suffix?: string | number | ((values: RenderCallbackParams) => string | number);
 

src/views/permission/admin/data.ts

@@ -58,11 +58,11 @@ export const formSchema: FormSchema[] = [
     field: 'status',
     label: '状态',
     component: 'RadioButtonGroup',
-    defaultValue: true,
+    defaultValue: 1,
     componentProps: {
       options: [
-        { label: '启用', value: true },
-        { label: '禁用', value: false },
+        { label: '启用', value: 1 },
+        { label: '禁用', value: 0 },
       ],
     },
   },

src/views/permission/admin/index.vue

@@ -11,19 +11,18 @@
             添加
         </a-button>
       </template>
-      <template #action="{ record, column }">
-        <TableAction :actions="createActions(record, column)" />
+      <template #action="{ record }">
+        <TableAction :actions="createActions(record)" />
       </template>
-      <!-- <template #form-custom > custom-slot </template> -->
     </BasicTable>
-    <Add @register="addRegister" :modelData = "modelData" @saveData="saveData" />
+    <Popup @register="addRegister" :modelData="modelData" @saveData="saveData" />
   </div>
 </template>
 <script lang="ts">
   import { defineComponent, reactive, ref, unref } from 'vue';
-  import Add from './add.vue'
+  import Popup from './popup.vue'
   import { useModal } from '/@/components/Modal';
-  import { getAllMenuList } from '/@/api/sys/menu';
+//   import { getAllMenuList } from '/@/api/sys/menu';
   import { h } from 'vue';
   import { Tag } from 'ant-design-vue';
   import { getUserList, addUser, editUser,deleteUser } from '/@/api/sys/user';
@@ -61,11 +60,6 @@
       dataIndex: 'email',
       width: 170,
     },
-    // {
-    //   title: '所属组别',
-    //   dataIndex: 'password',
-    //   width: 160,
-    // },
     {
       title: '状态',
       dataIndex: 'status',
@@ -80,22 +74,37 @@
     },
     {
       title: '最后登录',
-      dataIndex: 'detail',
+      dataIndex: 'time',
       width: 150,
     }
   ];
+  const formData = [
+      {
+          id: 1,
+          username: 'test1',
+          nickname: '用户1',
+          email: 'test1@163.com',
+          status: 0,
+          time: '2020-10-20'
+      },
+      {
+          id: 2,
+          username: 'test2',
+          nickname: '用户2',
+          email: 'test2@163.com',
+          status: 1,
+          time: '2020-10-20'
+      },
+  ]
 
   export default defineComponent({
-    components: { BasicTable, TableAction, Add },
+    components: { BasicTable, TableAction, Popup },
     setup() {
       const tableRef = ref<Nullable<TableActionType>>(null);
       const currentEditKeyRef = ref('');
       const modelData = reactive({
         title: '添加',
         treeData: [],
-        checkedKeys: [],
-        selectedKeys: [],
-        expandedKeys: []
       })
       getTreeData()
       const [registerTable] = useTable({
@@ -104,7 +113,8 @@
         rowSelection: { type: 'checkbox' },
         columns: columns,
         clickToRowSelect: false, // 点击行不勾选
-        api: getUserList,
+        // api: getUserList,
+        dataSource: formData,
         actionColumn: {
           width: 160,
           title: '操作',
@@ -134,22 +144,17 @@
 
       function addRole() {
         modelData.title = '添加'
-        modelData.checkedKeys = []
-        modelData.selectedKeys = []
-        modelData.expandedKeys = []
         openAdd(true, {
+          id: null,
           username: '',
-          detail: '',
-          menus: [],
-          roleName: '',
           nickname: '',
-          status: true
+          email: '',
+          status: 1
         });
       }
 
       function handleEdit(record: EditRecordRow) {
         currentEditKeyRef.value = record.id;  // record.key
-        console.log(record)
         modelData.title = '编辑'
 
         const data = getTableAction().getDataSource()
@@ -158,9 +163,6 @@
             record = item
           }
         })
-        modelData.checkedKeys = record.menus
-        modelData.selectedKeys = []
-        modelData.expandedKeys = []
         openAdd(true, record);
       }
 
@@ -195,38 +197,15 @@
           console.log('----------edit---')
 
         }
-        // if (modelData.title === "添加") {
-        //   datas.map(item => {
-        //     if (info.id === 0 || info.id === item.id) {
-        //       info.id = item.id + 1
-        //     }
-        //   })
-        //   datas.push(info)
-        //   getTableAction().setTableData(datas)
-        // } else {
-        //   console.log('编辑')
-        //   // getTableAction().setTableData(datas.filter(item => item.id !== info.id))
-        //   let dataArr:object[] = []
-        //   datas.map(item => {
-        //     if (item.id === info.id) {
-        //       item = info
-        //     }
-        //     dataArr.push(item)
-        //   })
-        //   getTableAction().setTableData(dataArr)
-        // }
       }
       async function getTreeData() {
-        let treeData = await getAllMenuList() as any
-        modelData.treeData = JSON.parse(JSON.stringify(treeData).replace(/menuName/g,"title").replace(/id/g,"key"))
+        // let treeData = await getAllMenuList()
+        // modelData.treeData = JSON.parse(JSON.stringify(treeData).replace(/menuName/g,"title").replace(/id/g,"key"))
 
         console.log(modelData.treeData)
       }
 
-      function createActions(record: EditRecordRow, column: BasicColumn): ActionItem[] {
-        if (false) {
-          console.log(column)
-        }
+      function createActions(record: EditRecordRow,): ActionItem[] {
         return [
           {
             label: '编辑',

src/views/permission/admin/add.vue → src/views/permission/admin/popup.vue

@@ -7,17 +7,13 @@
 <script lang="ts">
 
   import { Tree } from 'ant-design-vue';
-  import { defineComponent, PropType, reactive, ref, toRefs, watch } from 'vue';
+  import { defineComponent, PropType, reactive, ref, toRefs } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
   import { adapt } from '/@/utils/adapt'
 
   interface ModelData {
     title: string,
-    treeData: object[],
-    checkedKeys: string[],
-    selectedKeys: string[],
-    expandedKeys: string[]
   }
   interface Role {
     id: string|number
@@ -36,14 +32,8 @@
         id:0
       })
       const modelData:ModelData = props.modelData
-      console.log(modelData)
       const modelRef = ref({});
       const adaptWidth = adapt()
-      watch(modelData, () => {
-        console.log('expandedKeys', modelData.expandedKeys);
-        console.log('selectedKeys', modelData.selectedKeys);
-        console.log('checkedKeys', modelData.checkedKeys);
-      });
 
       const schemas: FormSchema[] = [
         {
@@ -75,7 +65,7 @@
         },
         {
           field: 'password',
-          component: 'Input',
+          component: 'InputPassword',
           label: '密码',
           labelWidth: adaptWidth.labelWidth,
           colProps: {
@@ -88,8 +78,8 @@
           component: 'RadioButtonGroup',
           componentProps: {
             options: [
-              { label: '启用', value: true },
-              { label: '停用', value: false },
+              { label: '启用', value: 1 },
+              { label: '停用', value: 0 },
             ],
           },
           labelWidth: adaptWidth.labelWidth,
@@ -121,12 +111,14 @@
         // });
 
         // 方式2
-        modelRef.value = {
-          username: data.username,
-          nickname: data.nickname,
-          status: data.status,
-          menus: data.menus
-          };
+        // modelRef.value = {
+        //   username: data.username,
+        //   nickname: data.nickname,
+        //   status: data.status,
+        //   menus: data.menus
+        //   };
+
+        modelRef.value = data
 
         // setProps({
         //   model:{ field2: data.data, field1: data.info }
@@ -141,14 +133,6 @@
         if(role.id) {
           data.id = role.id
         }
-        // const data = {
-        //   info,
-          data.menus = [...modelData.checkedKeys]
-        // }
-        // console.log(data)
-        // console.log(getFieldsValue())  // 表单数据
-        // console.log('------ 菜单key ------')
-        // console.log(modelData.checkedKeys)
         emit('saveData', data)
         closeModal()  // 关闭弹窗
       }

src/views/permission/admin_log/index.vue

@@ -15,12 +15,12 @@
         <TableAction :actions="createActions(record, column)" />
       </template>
     </BasicTable>
-    <Model @register="addRegister" :modelData="modelData" />
+    <Popup @register="addRegister" :modelData="modelData" />
   </div>
 </template>
 <script lang="ts">
   import { defineComponent, reactive, ref, unref } from 'vue';
-  import Model from './model.vue'
+  import Popup from './popup.vue'
   import { useModal } from '/@/components/Modal';
   import { getUserList, deleteUser } from '/@/api/sys/user';
   import {BasicTable, useTable, TableAction, BasicColumn, ActionItem, EditRecordRow, TableActionType } from '/@/components/Table';
@@ -59,12 +59,12 @@
     },
     {
       title: 'IP',
-      dataIndex: 'IP',
+      dataIndex: 'ip',
       width: 150,
     },
     {
       title: 'Browser',
-      dataIndex: 'Browser',
+      dataIndex: 'browser',
       width: 170,
     },
     {
@@ -73,9 +73,29 @@
       width: 150,
     }
   ];
+  const formData = [
+      {
+          id: 1,
+          username: 'test1',
+          title: '日志1',
+          url: 'http://localhost:3100/#/permission/admin',
+          ip: '0.0.0.0',
+          browser: 'Mozilla/5.0',
+          time: '2020-10-20'
+      },
+      {
+          id: 2,
+          username: 'test2',
+          title: '日志2',
+          url: 'http://localhost:3100/#/permission/admin',
+          ip: '0.0.0.0',
+          browser: 'Mozilla/5.0',
+          time: '2020-10-21'
+      },
+  ]
 
   export default defineComponent({
-    components: { BasicTable, TableAction, Model },
+    components: { BasicTable, TableAction, Popup },
     setup() {
       const tableRef = ref<Nullable<TableActionType>>(null);
       const currentEditKeyRef = ref('');
@@ -88,7 +108,8 @@
         rowSelection: { type: 'checkbox' },
         columns: columns,
         clickToRowSelect: false, // 点击行不勾选
-        api: getUserList,
+        // api: getUserList,
+        dataSource: formData,
         actionColumn: {
           width: 160,
           title: '操作',

src/views/permission/admin_log/model.vue → src/views/permission/admin_log/popup.vue

@@ -54,11 +54,11 @@
             label: 'Url',
         },
         {
-            field: 'IP',
+            field: 'ip',
             label: 'IP',
         },
         {
-            field: 'Browser',
+            field: 'browser',
             label: 'Browser',
         },
         {

src/views/permission/group/index.vue

@@ -18,14 +18,14 @@
       </template>
       <!-- <template #form-custom > custom-slot </template> -->
     </BasicTable>
-    <Add @register="addRegister" :modelData = "modelData" @saveData="saveData" />
+    <Popup @register="addRegister" :modelData = "modelData" @saveData="saveData" />
   </div>
 </template>
 <script lang="ts">
   import { defineComponent, reactive, ref, unref } from 'vue';
-  import Add from './add.vue'
+  import Popup from './popup.vue'
   import { useModal } from '/@/components/Modal';
-  import { getAllMenuList } from '/@/api/sys/menu';
+//   import { getAllMenuList } from '/@/api/sys/menu';
   import { h } from 'vue';
   import { Tag } from 'ant-design-vue';
   import { getUserList, addUser, editUser,deleteUser } from '/@/api/sys/user';
@@ -74,8 +74,29 @@
     }
   ];
 
+  const formData = [
+      {
+          id: 1,
+          parent: 0,
+          uname: '超级管理员',
+          status: 1
+      },
+      {
+          id: 2,
+          parent: 1,
+          uname: '普通管理员',
+          status: 1
+      },
+      {
+          id: 3,
+          parent: 2,
+          uname: '游客',
+          status: 1
+      },
+  ]
+
   export default defineComponent({
-    components: { BasicTable, TableAction, Add },
+    components: { BasicTable, TableAction, Popup },
     setup() {
       const tableRef = ref<Nullable<TableActionType>>(null);
       const currentEditKeyRef = ref('');
@@ -93,7 +114,8 @@
         rowSelection: { type: 'checkbox' },
         columns: columns,
         clickToRowSelect: false, // 点击行不勾选
-        api: getUserList,
+        // api: getUserList,
+        dataSource: formData,
         actionColumn: {
           width: 160,
           title: '操作',
@@ -124,17 +146,11 @@
       function addRole() {
         console.log('添加')
         modelData.title = '添加'
-        modelData.checkedKeys = []
-        modelData.selectedKeys = []
-        modelData.expandedKeys = []
         openAdd(true, {
-          username: '',
-          password: '',
-          detail: '',
-          menus: [],
-          roleName: '',
-          nickname: '',
-          status: true
+          id: null,
+          parent: null,
+          uname: '',
+          status: 1
         });
       }
 
@@ -185,10 +201,10 @@
         }
       }
       async function getTreeData() {
-        let treeData = await getAllMenuList() as any
-        modelData.treeData = JSON.parse(JSON.stringify(treeData).replace(/menuName/g,"title").replace(/id/g,"key"))
+        // let treeData = await getAllMenuList() as any
+        // modelData.treeData = JSON.parse(JSON.stringify(treeData).replace(/menuName/g,"title").replace(/id/g,"key"))
 
-        console.log(modelData.treeData)
+        // console.log(modelData.treeData)
       }
 
       function createActions(record: EditRecordRow, column: BasicColumn): ActionItem[] {

src/views/permission/group/add.vue → src/views/permission/group/popup.vue

@@ -90,8 +90,8 @@
           component: 'RadioButtonGroup',
           componentProps: {
             options: [
-              { label: '启用', value: true },
-              { label: '停用', value: false },
+              { label: '启用', value: 1 },
+              { label: '停用', value: 0 },
             ],
           },
           labelWidth: adaptWidth.labelWidth,
@@ -147,7 +147,6 @@
         }
         // const data = {
         //   info,
-          data.menus = [...modelData.checkedKeys]
         // }
         // console.log(data)
         // console.log(getFieldsValue())  // 表单数据

src/views/permission/rule/data.ts

@@ -35,13 +35,13 @@ export const formSchema: FormSchema[] = [
     required: true,
   },
   {
-    field: 'rule',
+    field: 'uri',
     label: '规则',
     component: 'Input',
     required: true,
   },
   {
-    field: 'menuName',
+    field: 'title',
     label: '标题',
     component: 'Input',
     required: true,
@@ -74,11 +74,11 @@ export const formSchema: FormSchema[] = [
     field: 'status',
     label: '状态',
     component: 'RadioButtonGroup',
-    defaultValue: true,
+    defaultValue: 1,
     componentProps: {
       options: [
-        { label: '启用', value: true },
-        { label: '禁用', value: false },
+        { label: '启用', value: 1 },
+        { label: '禁用', value: 0 },
       ],
     },
   },

src/views/permission/rule/index.vue

@@ -14,19 +14,19 @@
           删除
         </a-button>
       </template>
-      <template #action="{ record, column }">
-        <TableAction :actions="createActions(record, column)" />
+      <template #action="{ record }">
+        <TableAction :actions="createActions(record)" />
       </template>
       <!-- <template #form-custom > custom-slot </template> -->
     </BasicTable>
-    <Add @register="addRegister" :modelData = "modelData" @saveData="saveData" />
+    <Popup @register="addRegister" :modelData = "modelData" @saveData="saveData" />
   </div>
 </template>
 <script lang="ts">
   import { defineComponent, reactive, ref, unref } from 'vue';
-  import Add from './add.vue'
+  import Popup from './popup.vue'
   import { useModal } from '/@/components/Modal';
-  import { getAllMenuList } from '/@/api/sys/menu';
+//   import { getAllMenuList } from '/@/api/sys/menu';
   import { h } from 'vue';
   import { Tag } from 'ant-design-vue';
   import { getUserList, addUser, editUser,deleteUser } from '/@/api/sys/user';
@@ -78,9 +78,35 @@
       },
     },
   ];
+  const formData = [
+      {
+          id: 1,
+          title: '菜单1',
+          uri: 'admin.index',
+          parent: 0,
+          order: 1,
+          status: 1,
+      },
+      {
+          id: 2,
+          title: '菜单2',
+          uri: 'admin.log',
+          parent: 1,
+          order: 2,
+          status: 1,
+      },
+      {
+          id: 3,
+          title: '菜单3',
+          uri: 'admin.auth',
+          parent: 2,
+          order: 2,
+          status: 0,
+      },
+  ]
 
   export default defineComponent({
-    components: { BasicTable, TableAction, Add },
+    components: { BasicTable, TableAction, Popup },
     setup() {
       const tableRef = ref<Nullable<TableActionType>>(null);
       const currentEditKeyRef = ref('');
@@ -98,7 +124,8 @@
         rowSelection: { type: 'checkbox' },
         columns: columns,
         clickToRowSelect: false, // 点击行不勾选
-        api: getUserList,
+        // api: getUserList,
+        dataSource: formData,
         actionColumn: {
           width: 160,
           title: '操作',
@@ -132,12 +159,12 @@
         modelData.selectedKeys = []
         modelData.expandedKeys = []
         openAdd(true, {
-          username: '',
-          detail: '',
-          menus: [],
-          roleName: '',
-          nickname: '',
-          status: true
+          id: null,
+          parent: null,
+          uri: '',
+          icon: '',
+          order: '',
+          status: 1
         });
       }
 
@@ -211,16 +238,14 @@
         // }
       }
       async function getTreeData() {
-        let treeData = await getAllMenuList() as any
-        modelData.treeData = JSON.parse(JSON.stringify(treeData).replace(/menuName/g,"title").replace(/id/g,"key"))
+        // let treeData = await getAllMenuList() as any
+        // modelData.treeData = JSON.parse(JSON.stringify(treeData).replace(/menuName/g,"title").replace(/id/g,"key"))
 
-        console.log(modelData.treeData)
+        // console.log(modelData.treeData)
       }
 
-      function createActions(record: EditRecordRow, column: BasicColumn): ActionItem[] {
-        if (false) {
-          console.log(column)
-        }
+      function createActions(record: EditRecordRow, ): ActionItem[] {
+
         return [
           {
             label: '编辑',

src/views/permission/rule/add.vue → src/views/permission/rule/popup.vue

@@ -11,7 +11,7 @@
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
   import { adapt } from '/@/utils/adapt'
-  import { formSchema,  } from './data'
+  import { formSchema } from './data'
 
 
   interface ModelData {
@@ -71,18 +71,12 @@
         // });
 
         // 方式2
-        modelRef.value = {
-          username: data.username,
-          nickname: data.nickname,
-          status: data.status,
-          menus: data.menus
-          };
+        modelRef.value = data;
 
         // setProps({
         //   model:{ field2: data.data, field1: data.info }
         // })
 
-        role.id = data.id
       });
 
       function confirm() {