会员管理页面

src/api/sys/member.ts

@@ -11,9 +11,15 @@ import {
   PersonIdParams,
   AddPersonParams,
   EditPersonParams,
+  GetMemberListModel,
+  GetMemberModel,
+  MemberIdParams,
+  AddMemberParams,
+  EditMemberParams,
 } from './model/memberModel';
 
 enum Api {
+  MemberUrl = '/member/',
   UnitUrl = '/member/unit',
   PersonUrl = '/member/person',
 }
@@ -40,7 +46,7 @@ export function addUnit(params: AddUnitParams) {
   });
 }
 /**
- * @description: 批量删除会员
+ * @description: 批量删除单位
  */
 export function deleteBatchesUnit(params: DeleteBatchesParams) {
   return defHttp.request<GetUnitListModel>({
@@ -51,17 +57,16 @@ export function deleteBatchesUnit(params: DeleteBatchesParams) {
 }
 
 /**
- * @description: 获取单个会员
+ * @description: 获取单个单位
  */
 export function getUnit(params: UnitIdParams) {
   return defHttp.request<GetUnitModel>({
     url: Api.UnitUrl + '/' + params.id,
     method: 'GET',
-    params,
   });
 }
 /**
- * @description: 修改单个会员
+ * @description: 修改单个单位
  */
 export function editUnit(params: EditUnitParams) {
   return defHttp.request<GetUnitListModel>({
@@ -102,7 +107,7 @@ export function addPerson(params: AddPersonParams) {
   });
 }
 /**
- * @description: 批量删除会员
+ * @description: 批量删除个人
  */
 export function deleteBatchesPerson(params: DeleteBatchesParams) {
   return defHttp.request<GetPersonListModel>({
@@ -113,17 +118,16 @@ export function deleteBatchesPerson(params: DeleteBatchesParams) {
 }
 
 /**
- * @description: 获取单个会员
+ * @description: 获取单个个人
  */
 export function getPerson(params: PersonIdParams) {
   return defHttp.request<GetPersonModel>({
     url: Api.PersonUrl + '/' + params.id,
     method: 'GET',
-    params,
   });
 }
 /**
- * @description: 修改单个会员
+ * @description: 修改单个个人
  */
 export function editPerson(params: EditPersonParams) {
   return defHttp.request<GetPersonListModel>({
@@ -133,7 +137,7 @@ export function editPerson(params: EditPersonParams) {
   });
 }
 /**
- * @description: 删除单个会员
+ * @description: 删除单个个人
  */
 export function deletePerson(params: PersonIdParams) {
   return defHttp.request<GetPersonListModel>({
@@ -141,3 +145,64 @@ export function deletePerson(params: PersonIdParams) {
     method: 'DELETE',
   });
 }
+
+/**
+ * @description: GetMemberList -----------------------------------------------
+ */
+export function getMemberList() {
+  console.log('-------------------getMemberList---------------');
+  return defHttp.request<GetMemberListModel>({
+    url: Api.MemberUrl,
+    method: 'GET',
+  });
+}
+
+/**
+ * @description: addMember
+ */
+export function addMember(params: AddMemberParams) {
+  return defHttp.request<GetMemberListModel>({
+    url: Api.MemberUrl,
+    method: 'POST',
+    params,
+  });
+}
+/**
+ * @description: 批量删除会员
+ */
+export function deleteBatchesMember(params: DeleteBatchesParams) {
+  return defHttp.request<GetMemberListModel>({
+    url: Api.MemberUrl,
+    method: 'DELETE',
+    params,
+  });
+}
+
+/**
+ * @description: 获取单个会员
+ */
+export function getMember(params: MemberIdParams) {
+  return defHttp.request<GetMemberModel>({
+    url: Api.MemberUrl + params.id,
+    method: 'GET',
+  });
+}
+/**
+ * @description: 修改单个会员
+ */
+export function editMember(params: EditMemberParams) {
+  return defHttp.request<GetMemberListModel>({
+    url: Api.MemberUrl + params.id,
+    method: 'PUT',
+    params,
+  });
+}
+/**
+ * @description: 删除单个会员
+ */
+export function deleteMember(params: MemberIdParams) {
+  return defHttp.request<GetMemberListModel>({
+    url: Api.MemberUrl + params.id,
+    method: 'DELETE',
+  });
+}

src/api/sys/model/memberModel.ts

@@ -45,22 +45,44 @@ export interface GetPersonListModel {
   count: number;
   list: object[];
 }
+/**
+ * @description: Get Person list----------------------
+ */
+export interface GetPersonListModel {
+  count: number;
+  list: object[];
+}
+/**
+ * @description: Get Person
+ */
 export interface GetPersonModel {
   row: object[];
 }
 
 /**
+ * @description: add Person
+ */
+export interface AddPersonParams {
+  id: number;
+}
+/**
  * @description: id
  */
 export interface PersonIdParams {
   id: string | number;
 }
+/**
+ * @description: Get Member
+ */
+export interface GetMemberModel {
+  row: object[];
+}
 
 /**
- * @description: add Person
+ * @description: id
  */
-export interface AddPersonParams {
-  id: number;
+export interface MemberIdParams {
+  id: string | number;
 }
 /**
  * @description: edit Person
@@ -68,3 +90,22 @@ export interface AddPersonParams {
 export interface EditPersonParams {
   id: number;
 }
+/**
+ * @description: Get Member list----------------------
+ */
+export interface GetMemberListModel {
+  count: number;
+  list: object[];
+}
+/**
+ * @description: add Member
+ */
+export interface AddMemberParams {
+  id: number;
+}
+/**
+ * @description: edit Member
+ */
+export interface EditMemberParams {
+  id: number;
+}

src/components/Form/src/types/index.ts

@@ -90,6 +90,7 @@ export type ComponentType =
   | 'InputCountDown'
   | 'Select'
   | 'ArrCom'
+  | 'CustomInput'
   | 'ApiSelect'
   | 'SelectOptGroup'
   | 'TreeSelect'

src/views/member/member/customCom/CustomInput.vue

@@ -2,53 +2,72 @@
   <!-- <BasicTable @register="registerTable" /> -->
   <div class="wrap">
     <div class="content">
-      <Input :placeholder="placeholder" disabled v-model:value="value" @change="onChange" />
-      <a-button class="mr-2 add-btn" color="success">添加</a-button>
+      <Input :placeholder="placeholder" disabled v-model:value="value" />
+      <a-button class="mr-2 add-btn" color="success" @click="openAddPop(placeholder)">
+        添加
+      </a-button>
     </div>
+    <Popup @register="register" @select="select" />
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, onUpdated, reactive, nextTick, toRefs, watch } from 'vue';
+  import { defineComponent, onUpdated, reactive, nextTick, toRefs } from 'vue';
   import { Input } from 'ant-design-vue';
+  import Popup from './popup.vue';
+  import { useModal } from '/@/components/Modal';
 
   const props = {
-    value: { type: String, default: '' },
+    value: { type: Object, default: '' },
     placeholder: { type: String, default: '' },
   };
+  interface State {
+    value: object | string;
+    placeholder: string;
+  }
 
   export default defineComponent({
     name: 'CustomInput',
-    components: { Input },
+    components: { Input, Popup },
     props,
     emits: ['change'],
     setup(props, { emit }) {
-      const state = reactive({
+      const state = reactive<State>({
         value: '',
         placeholder: props.placeholder,
       });
+      const [register, { openModal: openPopup }] = useModal();
       // 初始化
       function init() {
-        // setTimeout(() => {
-
-        // }, 200);
         nextTick(() => {
-          if (state.value === '') {
+          if (props.value.name) {
+            console.log(`props.value.name`, props.value.name);
+            state.value = props.value.name;
+          } else {
             state.value = props.value;
           }
         });
       }
-
       onUpdated(() => {
         init();
       });
-
-      function onChange(e) {
-        console.log(`e`, e)
-        // emit('change', state.list);
+      function openAddPop(title) {
+        if (title === '添加相关个人') {
+          title = '添加个人';
+        }
+        if (title === '添加相关单位') {
+          title = '添加单位';
+        }
+        openPopup(true, title);
+      }
+      function select(data) {
+        emit('change', data);
       }
 
       return {
-        onChange,
+        openAddPop,
+        select,
+        openPopup,
+        register,
         ...toRefs(state),
       };
     },

src/views/member/member/customCom/person/data.ts

@@ -0,0 +1,603 @@
+import { FormProps, BasicColumn } from '/@/components/Table';
+import { FormSchema } from '/@/components/Form/index';
+import { adapt } from '/@/utils/adapt';
+import moment from 'moment';
+
+const adaptWidth = adapt();
+
+export const columns: BasicColumn[] = [
+  {
+    title: 'ID',
+    dataIndex: 'id',
+    editComponentProps: {
+      prefix: '$',
+    },
+    width: 100,
+    sorter: true,
+  },
+  {
+    title: '姓名',
+    dataIndex: 'name',
+    width: 130,
+    sorter: true,
+  },
+  {
+    title: '性别',
+    dataIndex: 'gender',
+    width: 130,
+    sorter: true,
+    customRender({ record }) {
+      const options = ['男', '女'];
+      return options[record.gender];
+    },
+  },
+  {
+    title: '籍贯',
+    dataIndex: 'origin',
+    width: 150,
+    sorter: true,
+  },
+  {
+    title: '出生年月',
+    dataIndex: 'birthday',
+    width: 200,
+    sorter: true,
+    customRender({ record }) {
+      return moment(record.birthday).format('YYYY-MM-DD');
+    },
+  },
+  {
+    title: '党派',
+    dataIndex: 'party',
+    width: 150,
+    sorter: true,
+    customRender({ record }) {
+      const options = ['无', '民革', '民盟', '民建', '民进', '农工', '致公党', '九三学社', '台盟'];
+      return options[record.party];
+    },
+  },
+  {
+    title: '民族',
+    dataIndex: 'nation',
+    width: 160,
+    sorter: true,
+  },
+  {
+    title: '单位',
+    dataIndex: 'company',
+    width: 160,
+    sorter: true,
+  },
+  {
+    title: '人大职务',
+    dataIndex: 'peopleJob',
+    width: 160,
+    sorter: true,
+  },
+  {
+    title: '政协职务',
+    dataIndex: 'cppccJob',
+    width: 160,
+    sorter: true,
+  },
+  {
+    title: '社会职务',
+    dataIndex: 'job',
+    width: 160,
+    sorter: true,
+  },
+  {
+    title: '联系方式',
+    dataIndex: 'mobile',
+    width: 160,
+    sorter: true,
+  },
+];
+
+export function getFormConfig(): Partial<FormProps> {
+  return {
+    labelWidth: 100,
+    schemas: [
+      {
+        field: `id`,
+        label: `ID`,
+        component: 'Input',
+        colProps: {
+          xl: 12,
+          xxl: 8,
+        },
+      },
+      {
+        field: `username`,
+        label: `用户名`,
+        component: 'Input',
+        colProps: {
+          xl: 12,
+          xxl: 8,
+        },
+      },
+      {
+        field: `nickname`,
+        label: `昵称`,
+        component: 'Input',
+        colProps: {
+          xl: 12,
+          xxl: 8,
+        },
+      },
+      {
+        field: `email`,
+        label: `Email`,
+        component: 'Input',
+        colProps: {
+          xl: 12,
+          xxl: 8,
+        },
+      },
+      {
+        field: `logintime`,
+        label: `最后登录`,
+        component: 'RangePicker',
+        colProps: {
+          xl: 12,
+          xxl: 8,
+        },
+      },
+      {
+        field: `status`,
+        label: `状态`,
+        component: 'Select',
+        componentProps: {
+          options: [
+            {
+              label: '启用',
+              value: 'normal',
+              key: 'status',
+            },
+            {
+              label: '停用',
+              value: 'locked',
+              key: 'status',
+            },
+          ],
+        },
+        colProps: {
+          xl: 12,
+          xxl: 8,
+        },
+      },
+      {
+        field: `sort`,
+        label: `排序字段`,
+        component: 'Select',
+        componentProps: {
+          options: [
+            {
+              label: 'ID',
+              value: 'id',
+              key: 'id',
+            },
+            {
+              label: '用户名',
+              value: 'username',
+              key: 'username',
+            },
+            {
+              label: '昵称',
+              value: 'nickname',
+              key: 'nickname',
+            },
+            {
+              label: 'Email',
+              value: 'email',
+              key: 'email',
+            },
+            {
+              label: '最后登录',
+              value: 'logintime',
+              key: 'logintime',
+            },
+          ],
+        },
+        colProps: {
+          xl: 12,
+          xxl: 8,
+        },
+      },
+      {
+        field: `order`,
+        label: `排序方式`,
+        component: 'Select',
+        componentProps: {
+          options: [
+            {
+              label: '升序',
+              value: 'asc',
+              key: 'order',
+            },
+            {
+              label: '降序',
+              value: 'desc',
+              key: 'order',
+            },
+          ],
+        },
+        colProps: {
+          xl: 12,
+          xxl: 8,
+        },
+      },
+      {
+        field: `filter`,
+        label: `筛选字段`,
+        component: 'CheckboxGroup',
+        componentProps: {
+          options: [
+            {
+              label: 'ID',
+              value: 'id',
+              key: 'filter1',
+            },
+            {
+              label: '用户名',
+              value: 'username',
+              key: 'filter2',
+            },
+            {
+              label: '昵称',
+              value: 'nickname',
+              key: 'filter3',
+            },
+            {
+              label: 'Email',
+              value: 'email',
+              key: 'filter4',
+            },
+            {
+              label: '昵称',
+              value: 'logintime',
+              key: 'filter5',
+            },
+          ],
+        },
+        colProps: {
+          xl: 12,
+          xxl: 8,
+        },
+      },
+    ],
+  };
+}
+
+// =================popup================================
+export const schemas: FormSchema[] = [
+  {
+    field: 'name',
+    component: 'Input',
+    label: '姓名',
+    labelWidth: adaptWidth.labelWidth,
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+    componentProps: {
+      placeholder: '姓名',
+    },
+    required: true,
+  },
+  {
+    field: 'gender',
+    component: 'Select',
+    label: '性别',
+    labelWidth: adaptWidth.labelWidth,
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+    componentProps: {
+      placeholder: '性别',
+      options: [
+        {
+          label: '男',
+          value: 0,
+        },
+        {
+          label: '女',
+          value: 1,
+        },
+      ],
+    },
+    required: true,
+  },
+  {
+    field: 'birthday',
+    component: 'DatePicker',
+    label: '出生年月',
+    labelWidth: adaptWidth.labelWidth,
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+    componentProps: {
+      placeholder: '出生年月',
+    },
+    required: true,
+  },
+  {
+    field: 'origin',
+    component: 'Input',
+    label: '籍贯',
+    labelWidth: adaptWidth.labelWidth,
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+    componentProps: {
+      placeholder: '籍贯',
+    },
+    required: true,
+  },
+  {
+    field: 'birthplace',
+    component: 'Input',
+    label: '出生地',
+    labelWidth: adaptWidth.labelWidth,
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+    componentProps: {
+      placeholder: '出生地',
+    },
+    required: true,
+  },
+  {
+    field: 'cardNo',
+    component: 'Input',
+    label: '身份证号码',
+    labelWidth: adaptWidth.labelWidth,
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+    componentProps: {
+      placeholder: '身份证号码',
+    },
+    required: true,
+  },
+  {
+    field: 'nation',
+    component: 'Input',
+    label: '民族',
+    labelWidth: adaptWidth.labelWidth,
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+    componentProps: {
+      placeholder: '民族',
+    },
+    required: true,
+  },
+  {
+    field: 'party',
+    label: '党派',
+    component: 'Select',
+    componentProps: {
+      placeholder: '党派',
+      options: [
+        {
+          label: '无',
+          value: 0,
+        },
+        {
+          label: '民革',
+          value: 1,
+        },
+        {
+          label: '民盟',
+          value: 2,
+        },
+        {
+          label: '民建',
+          value: 3,
+        },
+        {
+          label: '民进',
+          value: 4,
+        },
+        {
+          label: '农工',
+          value: 5,
+        },
+        {
+          label: '致公党',
+          value: 6,
+        },
+        {
+          label: '九三学社',
+          value: 7,
+        },
+        {
+          label: '台盟',
+          value: 8,
+        },
+      ],
+    },
+    labelWidth: adaptWidth.labelWidth,
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+    required: true,
+  },
+  {
+    field: 'edu',
+    component: 'Input',
+    label: '学历',
+    labelWidth: adaptWidth.labelWidth,
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+    componentProps: {
+      placeholder: '学历',
+    },
+    required: true,
+  },
+  {
+    field: 'title',
+    component: 'Input',
+    label: '职称',
+    labelWidth: adaptWidth.labelWidth,
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+    componentProps: {
+      placeholder: '职称',
+    },
+    required: true,
+  },
+  {
+    field: 'job',
+    component: 'Input',
+    label: '职务',
+    labelWidth: adaptWidth.labelWidth,
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+    componentProps: {
+      placeholder: '职务',
+    },
+    required: true,
+  },
+  {
+    field: 'address',
+    component: 'Input',
+    label: '地址',
+    labelWidth: adaptWidth.labelWidth,
+    defaultValue: '',
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+    componentProps: {
+      placeholder: '地址',
+    },
+    required: true,
+  },
+  {
+    field: 'zipcode',
+    component: 'Input',
+    label: '邮编',
+    labelWidth: adaptWidth.labelWidth,
+    defaultValue: '',
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+    componentProps: {
+      placeholder: '邮编',
+    },
+  },
+  {
+    field: 'tel',
+    component: 'Input',
+    label: '电话',
+    labelWidth: adaptWidth.labelWidth,
+    defaultValue: '',
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+    componentProps: {
+      placeholder: '电话',
+    },
+  },
+  {
+    field: 'mobile',
+    component: 'Input',
+    label: '手机',
+    labelWidth: adaptWidth.labelWidth,
+    defaultValue: '',
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+    componentProps: {
+      placeholder: '手机',
+    },
+    required: true,
+  },
+  {
+    field: 'old',
+    component: 'Input',
+    label: '办企业前工作单位',
+    labelWidth: adaptWidth.labelWidth,
+    defaultValue: '',
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+    componentProps: {
+      placeholder: '办企业前工作单位',
+    },
+  },
+  {
+    field: 'peopleJob',
+    component: 'Input',
+    label: '人大职务',
+    labelWidth: adaptWidth.labelWidth,
+    defaultValue: '',
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+    componentProps: {
+      placeholder: '人大职务',
+    },
+  },
+  {
+    field: 'cppccJob',
+    component: 'Input',
+    label: '政协职务',
+    labelWidth: adaptWidth.labelWidth,
+    defaultValue: '',
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+    componentProps: {
+      placeholder: '政协职务',
+    },
+  },
+  {
+    field: 'family',
+    component: 'ArrCom',
+    label: '家庭主要成员',
+    labelWidth: adaptWidth.labelWidth,
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+    defaultValue: [],
+    componentProps: ({ formModel }) => {
+      return {
+        placeholder: '家庭主要成员',
+        value: formModel.family,
+        onChange: () => {},
+      };
+    },
+    required: true,
+  },
+  {
+    field: 'info',
+    component: 'InputTextArea',
+    label: '本人简历',
+    labelWidth: adaptWidth.labelWidth,
+    defaultValue: '',
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+    componentProps: {
+      placeholder: '本人简历',
+    },
+  },
+  {
+    field: 'company',
+    component: 'Input',
+    label: '所在单位',
+    labelWidth: adaptWidth.labelWidth,
+    defaultValue: '',
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+    componentProps: {
+      placeholder: '所在单位',
+    },
+    required: true,
+  },
+];

src/views/member/member/customCom/person/index.vue

@@ -0,0 +1,133 @@
+<template>
+  <a-button type="primary" @click="handleAdd"> 添加 </a-button>
+  <BasicTable
+    ref="tableRef"
+    @register="registerTable"
+    rowKey="id"
+    :pagination="{
+      pageSize: 10,
+      defaultPageSize: 10,
+      showSizeChanger: false,
+    }"
+  >
+    <template #form-custom> custom-slot </template>
+    <template #action="{ record }">
+      <TableAction :actions="createActions(record)" stopButtonPropagation />
+    </template>
+  </BasicTable>
+  <Popup @register="addRegister" @saveData="saveData" />
+</template>
+<script lang="ts">
+  import { defineComponent, ref, unref } from 'vue';
+  import Popup from './popup.vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useModal } from '/@/components/Modal';
+  import { getFormConfig, columns } from './data';
+  import { getPersonList, addPerson } from '/@/api/sys/member';
+  import {
+    BasicTable,
+    useTable,
+    TableAction,
+    ActionItem,
+    EditRecordRow,
+    TableActionType,
+  } from '/@/components/Table';
+
+  export default defineComponent({
+    name: 'Person',
+    components: { BasicTable, TableAction, Popup },
+    emits: ['select'],
+    setup(_, { emit }) {
+      const { createMessage } = useMessage();
+      const { success /*, error*/ } = createMessage;
+      const tableRef = ref<Nullable<TableActionType>>(null);
+      const [registerTable] = useTable({
+        columns: columns,
+        clickToRowSelect: false, // 点击行不勾选
+        api: getPersonList,
+        useSearchForm: true,
+        afterFetch: afterFetch,
+        formConfig: getFormConfig(),
+        actionColumn: {
+          width: 160,
+          title: '操作',
+          dataIndex: 'action',
+          slots: { customRender: 'action' },
+          fixed: undefined,
+        },
+        maxHeight: 190,
+        showIndexColumn: false,
+        bordered: true,
+      });
+      const [addRegister, { openModal: openPopup }] = useModal();
+      function getTableAction() {
+        // 获取组件
+        const tableAction = unref(tableRef);
+        if (!tableAction) {
+          throw new Error('tableAction is null');
+        }
+        return tableAction;
+      }
+
+      function afterFetch(result) {
+        console.log(`result`, result);
+        // tableData.result = result;
+      }
+
+      function handleAdd() {
+        // 开启弹窗
+        openPopup(true, { family: [] });
+      }
+      function handleSelect(record: EditRecordRow) {
+        emit('select', record);
+      }
+
+      async function saveData(params: any) {
+        const data = params.data;
+        const closeModel = params.closeModal;
+        console.log(`data`, data);
+        await addPerson(data).then((res) => {
+          console.log(res);
+          getTableAction().reload();
+          closeModel();
+          success('创建成功!');
+        });
+      }
+
+      function createActions(record: EditRecordRow): ActionItem[] {
+        return [
+          {
+            label: '选择',
+            icon: 'ant-design:edit-outlined',
+            color: 'warning',
+            onClick: handleSelect.bind(null, record),
+          },
+        ];
+      }
+      return {
+        tableRef,
+        registerTable,
+        handleAdd,
+        handleSelect,
+        createActions,
+        getTableAction,
+        addRegister,
+        saveData,
+      };
+    },
+  });
+</script>
+<style>
+  .ant-calendar-picker {
+    width: 100%;
+  }
+  @media (max-width: 639px) {
+    .sys-container .vben-basic-table-header__toolbar > * {
+      margin-right: 3px;
+    }
+
+    .sys-container .vben-basic-table .ant-table-wrapper {
+      padding: 3px;
+    }
+  }
+</style>

src/views/member/member/customCom/person/popup.vue

@@ -0,0 +1,79 @@
+<template>
+  <BasicModal width="800px" v-bind="$attrs" @register="register" @ok="confirm" title="添加个人">
+    <BasicForm @register="registerForm" :model="model" />
+  </BasicModal>
+</template>
+<script lang="ts">
+  import { defineComponent, ref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { schemas } from './data';
+  import moment from 'moment';
+
+  export default defineComponent({
+    components: { BasicModal, BasicForm },
+    emits: ['saveData'],
+    setup(_, { emit }) {
+      const modelRef = ref({});
+      const { createMessage } = useMessage();
+      const { error } = createMessage;
+
+      const [registerForm, { resetFields, validate }] = useForm({
+        labelWidth: 120,
+        schemas,
+        showActionButtonGroup: false,
+        actionColOptions: {
+          span: 24,
+        },
+      });
+      const [register, { closeModal }] = useModalInner(() => {
+        resetFields();
+      });
+
+      async function confirm() {
+        const data = await validate();
+        const not_validate = data.family.some((item) => {
+          if (item.relation === '' || item.age === '' || item.job === '' || item.company === '') {
+            error('家庭成员信息不能为空');
+            return true;
+          } else if (typeof item.age !== 'number') {
+            error('年龄必须为阿拉伯数字');
+            return true;
+          }
+        });
+        if (not_validate) {
+          return;
+        }
+        data.birthday = moment(data.birthday).format('YYYY-MM-DD');
+        data.family = JSON.stringify(data.family);
+        const popupData = { closeModal, data };
+        emit('saveData', popupData);
+        // closeModal(); // 关闭弹窗
+      }
+      return {
+        register,
+        schemas,
+        registerForm,
+        model: modelRef,
+        confirm,
+      };
+    },
+  });
+</script>
+<style lang="less">
+  .ant-form-item-label {
+    overflow: hidden;
+    text-align: center !important;
+    // white-space: pre-wrap !important;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  @media (max-width: 639px) {
+    .ant-form-item-label {
+      line-height: 2.5715 !important;
+      text-align: center !important;
+    }
+  }
+</style>

src/views/member/member/customCom/popup.vue

@@ -0,0 +1,35 @@
+<template>
+  <BasicModal width="800px" v-bind="$attrs" @register="register" @ok="confirm" :title="title">
+    <Person v-if="title === '添加个人'" @select="select" />
+    <Unit v-if="title === '添加单位'" @select="select" />
+  </BasicModal>
+</template>
+<script lang="ts">
+  import Person from './person/index.vue';
+  import Unit from './unit/index.vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { defineComponent, reactive, toRefs } from 'vue';
+
+  export default defineComponent({
+    components: { BasicModal, Person, Unit },
+    emits: ['select'],
+    setup(_, { emit }) {
+      const state = reactive({
+        title: '',
+      });
+      const [register, { closeModal }] = useModalInner((data) => {
+        state.title = data;
+      });
+
+      function select(data) {
+        emit('select', data);
+        closeModal();
+      }
+      return {
+        register,
+        select,
+        ...toRefs(state),
+      };
+    },
+  });
+</script>

src/views/member/member/customCom/unit/data.ts

@@ -0,0 +1,717 @@
+import { FormProps, BasicColumn } from '/@/components/Table';
+import { FormSchema } from '/@/components/Form/index';
+import { adapt } from '/@/utils/adapt';
+import moment from 'moment';
+
+const adaptWidth = adapt();
+export const columns: BasicColumn[] = [
+  {
+    title: 'ID',
+    dataIndex: 'id',
+    editComponentProps: {
+      prefix: '$',
+    },
+    width: 100,
+    sorter: true,
+  },
+  {
+    title: '企业名称',
+    dataIndex: 'name',
+    width: 130,
+    sorter: true,
+  },
+  {
+    title: '法人代表',
+    dataIndex: 'legalMan',
+    width: 130,
+    sorter: true,
+  },
+  {
+    title: '成立时间',
+    dataIndex: 'foundingtime',
+    width: 150,
+    sorter: true,
+    customRender({ record }) {
+      return moment(record.foundingtime).format('YYYY-MM-DD');
+    },
+  },
+  {
+    title: '工商登记号',
+    dataIndex: 'businessNo',
+    width: 350,
+    sorter: true,
+  },
+  {
+    title: '单位性质',
+    dataIndex: 'nature',
+    width: 160,
+    sorter: true,
+    customRender: ({ record }) => {
+      const options = [
+        '国有企业',
+        '集体所有制',
+        '私营企业',
+        '股份制企业',
+        '有限合伙企业',
+        '联营企业',
+        '外商投资企业',
+        '个人独资企业',
+      ];
+      return options[record.nature];
+    },
+  },
+  {
+    title: '行业分类',
+    dataIndex: 'job',
+    width: 160,
+    sorter: true,
+  },
+  {
+    title: '注册资金',
+    dataIndex: 'regMoney',
+    width: 160,
+    sorter: true,
+  },
+  {
+    title: '职工人数',
+    dataIndex: 'jobNum',
+    width: 160,
+    sorter: true,
+  },
+];
+
+export function getFormConfig(): Partial<FormProps> {
+  return {
+    labelWidth: 100,
+    schemas: [
+      {
+        field: `id`,
+        label: `ID`,
+        component: 'Input',
+        colProps: {
+          xl: 12,
+          xxl: 8,
+        },
+      },
+      {
+        field: `username`,
+        label: `用户名`,
+        component: 'Input',
+        colProps: {
+          xl: 12,
+          xxl: 8,
+        },
+      },
+      {
+        field: `nickname`,
+        label: `昵称`,
+        component: 'Input',
+        colProps: {
+          xl: 12,
+          xxl: 8,
+        },
+      },
+      {
+        field: `email`,
+        label: `Email`,
+        component: 'Input',
+        colProps: {
+          xl: 12,
+          xxl: 8,
+        },
+      },
+      {
+        field: `logintime`,
+        label: `最后登录`,
+        component: 'RangePicker',
+        colProps: {
+          xl: 12,
+          xxl: 8,
+        },
+      },
+      {
+        field: `status`,
+        label: `状态`,
+        component: 'Select',
+        componentProps: {
+          options: [
+            {
+              label: '启用',
+              value: 'normal',
+              key: 'status',
+            },
+            {
+              label: '停用',
+              value: 'locked',
+              key: 'status',
+            },
+          ],
+        },
+        colProps: {
+          xl: 12,
+          xxl: 8,
+        },
+      },
+      {
+        field: `sort`,
+        label: `排序字段`,
+        component: 'Select',
+        componentProps: {
+          options: [
+            {
+              label: 'ID',
+              value: 'id',
+              key: 'id',
+            },
+            {
+              label: '用户名',
+              value: 'username',
+              key: 'username',
+            },
+            {
+              label: '昵称',
+              value: 'nickname',
+              key: 'nickname',
+            },
+            {
+              label: 'Email',
+              value: 'email',
+              key: 'email',
+            },
+            {
+              label: '最后登录',
+              value: 'logintime',
+              key: 'logintime',
+            },
+          ],
+        },
+        colProps: {
+          xl: 12,
+          xxl: 8,
+        },
+      },
+      {
+        field: `order`,
+        label: `排序方式`,
+        component: 'Select',
+        componentProps: {
+          options: [
+            {
+              label: '升序',
+              value: 'asc',
+              key: 'order',
+            },
+            {
+              label: '降序',
+              value: 'desc',
+              key: 'order',
+            },
+          ],
+        },
+        colProps: {
+          xl: 12,
+          xxl: 8,
+        },
+      },
+      {
+        field: `filter`,
+        label: `筛选字段`,
+        component: 'CheckboxGroup',
+        componentProps: {
+          options: [
+            {
+              label: 'ID',
+              value: 'id',
+              key: 'filter1',
+            },
+            {
+              label: '用户名',
+              value: 'username',
+              key: 'filter2',
+            },
+            {
+              label: '昵称',
+              value: 'nickname',
+              key: 'filter3',
+            },
+            {
+              label: 'Email',
+              value: 'email',
+              key: 'filter4',
+            },
+            {
+              label: '昵称',
+              value: 'logintime',
+              key: 'filter5',
+            },
+          ],
+        },
+        colProps: {
+          xl: 12,
+          xxl: 8,
+        },
+      },
+    ],
+  };
+}
+
+// =================popup================================
+export const schemas: FormSchema[] = [
+  {
+    field: 'name',
+    component: 'Input',
+    label: '企业名称',
+    labelWidth: adaptWidth.labelWidth,
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+    componentProps: {
+      placeholder: '企业名称',
+    },
+    required: true,
+  },
+  {
+    field: 'legalMan',
+    component: 'Input',
+    label: '法人代表',
+    labelWidth: adaptWidth.labelWidth,
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+    componentProps: {
+      placeholder: '法人代表',
+    },
+    required: true,
+  },
+  {
+    field: 'businessNo',
+    component: 'Input',
+    label: '工商登记号',
+    labelWidth: adaptWidth.labelWidth,
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+    componentProps: {
+      placeholder: '工商登记号',
+    },
+    required: true,
+  },
+  {
+    field: 'centralTax',
+    component: 'Input',
+    label: '国税税号',
+    labelWidth: adaptWidth.labelWidth,
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+    componentProps: {
+      placeholder: '国税税号',
+    },
+  },
+  {
+    field: 'landTax',
+    component: 'Input',
+    label: '地税税号',
+    labelWidth: adaptWidth.labelWidth,
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+    componentProps: {
+      placeholder: '地税税号',
+    },
+  },
+  {
+    field: 'nature',
+    label: '单位性质',
+    component: 'Select',
+    componentProps: {
+      placeholder: '单位性质',
+      options: [
+        {
+          label: '国有企业',
+          value: 0,
+        },
+        {
+          label: '集体所有制',
+          value: 1,
+        },
+        {
+          label: '私营企业',
+          value: 2,
+        },
+        {
+          label: '股份制企业',
+          value: 3,
+        },
+        {
+          label: '有限合伙企业',
+          value: 4,
+        },
+        {
+          label: '联营企业',
+          value: 5,
+        },
+        {
+          label: '外商投资企业',
+          value: 6,
+        },
+        {
+          label: '个人独资企业',
+          value: 7,
+        },
+      ],
+    },
+    labelWidth: adaptWidth.labelWidth,
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+    required: true,
+  },
+  {
+    field: 'foundingTime',
+    component: 'DatePicker',
+    label: '成立时间',
+    labelWidth: adaptWidth.labelWidth,
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+    componentProps: {
+      placeholder: '成立时间',
+    },
+    required: true,
+  },
+  {
+    field: 'job',
+    component: 'Input',
+    label: '行业分类',
+    labelWidth: adaptWidth.labelWidth,
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+    componentProps: {
+      placeholder: '行业分类',
+    },
+    required: true,
+  },
+  {
+    field: 'jobNum',
+    component: 'Input',
+    label: '职工人数',
+    labelWidth: adaptWidth.labelWidth,
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+    componentProps: {
+      placeholder: '职工人数',
+    },
+  },
+  {
+    field: 'partyNum',
+    component: 'Input',
+    label: '党员数',
+    labelWidth: adaptWidth.labelWidth,
+    defaultValue: '',
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+    componentProps: {
+      placeholder: '党员数',
+    },
+  },
+  {
+    field: 'tel',
+    component: 'Input',
+    label: '电话',
+    labelWidth: adaptWidth.labelWidth,
+    defaultValue: '',
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+    componentProps: {
+      placeholder: '电话',
+    },
+  },
+  {
+    field: 'fax',
+    component: 'Input',
+    label: '传真',
+    labelWidth: adaptWidth.labelWidth,
+    defaultValue: '',
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+    componentProps: {
+      placeholder: '传真',
+    },
+  },
+  {
+    field: 'zipCode',
+    component: 'Input',
+    label: '邮编',
+    labelWidth: adaptWidth.labelWidth,
+    defaultValue: '',
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+    componentProps: {
+      placeholder: '邮箱',
+    },
+  },
+  {
+    field: 'address',
+    component: 'Input',
+    label: '地址',
+    labelWidth: adaptWidth.labelWidth,
+    defaultValue: '',
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+    componentProps: {
+      placeholder: '地址',
+    },
+    required: true,
+  },
+  {
+    field: 'culturalNum',
+    component: 'Input',
+    label: '大专以上文化人数',
+    labelWidth: adaptWidth.labelWidth,
+    defaultValue: '',
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+    componentProps: {
+      placeholder: '大专以上文化人数',
+    },
+  },
+  {
+    field: 'laidNum',
+    component: 'Input',
+    label: '安置下岗人数',
+    labelWidth: adaptWidth.labelWidth,
+    defaultValue: '',
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+    componentProps: {
+      placeholder: '安置下岗人数',
+    },
+  },
+  {
+    field: 'partyCase',
+    component: 'Input',
+    label: '党、团工会情况',
+    labelWidth: adaptWidth.labelWidth,
+    defaultValue: '',
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+    componentProps: {
+      placeholder: '党、团工会情况',
+    },
+  },
+  {
+    field: 'web',
+    component: 'Input',
+    label: '网址',
+    labelWidth: adaptWidth.labelWidth,
+    defaultValue: '',
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+    componentProps: {
+      placeholder: '网址',
+    },
+  },
+  {
+    field: 'email',
+    component: 'Input',
+    label: '电子邮箱',
+    labelWidth: adaptWidth.labelWidth,
+    defaultValue: '',
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+    componentProps: {
+      placeholder: '电子邮箱',
+    },
+  },
+  {
+    field: 'technology',
+    label: '高新技术企业认证',
+    component: 'Switch',
+    labelWidth: adaptWidth.labelWidth,
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+    componentProps: {
+      placeholder: '高新技术企业认证',
+    },
+  },
+  {
+    field: 'technologyDept',
+    component: 'Input',
+    label: '高新技术企业认证部门',
+    labelWidth: adaptWidth.labelWidth,
+    defaultValue: '',
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+    show: ({ values }) => {
+      if (values.technology) {
+        return true;
+      }
+      return false;
+    },
+    componentProps: {
+      placeholder: '高新技术企业认证部门',
+    },
+    required: ({ values }) => {
+      if (values.technology) {
+        return true;
+      }
+      return false;
+    },
+  },
+  {
+    field: 'foreignTrade',
+    label: '外贸自营进出口权',
+    component: 'Switch',
+    labelWidth: adaptWidth.labelWidth,
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+    componentProps: {
+      placeholder: '外贸自营进出口权',
+    },
+  },
+  {
+    field: 'foreignTradeDept',
+    component: 'Input',
+    label: '外贸自营进出口权批准部门',
+    labelWidth: adaptWidth.labelWidth,
+    defaultValue: '',
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+    show: ({ values }) => {
+      if (values.foreignTrade) {
+        return true;
+      }
+      return false;
+    },
+    componentProps: {
+      placeholder: '外贸自营进出口权批准部门',
+    },
+    required: ({ values }) => {
+      if (values.foreignTrade) {
+        return true;
+      }
+      return false;
+    },
+  },
+  {
+    field: 'quality',
+    label: '质量管理、质量保证系列认证标准',
+    component: 'Switch',
+    labelWidth: adaptWidth.labelWidth,
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+    componentProps: {
+      placeholder: '质量管理、质量保证系列认证标准',
+    },
+  },
+  {
+    field: 'qualityDept',
+    component: 'Input',
+    label: '质量管理、质量保证系列认证标准认证部门',
+    labelWidth: adaptWidth.labelWidth,
+    defaultValue: '',
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+    show: ({ values }) => {
+      if (values.quality) {
+        return true;
+      }
+      return false;
+    },
+    componentProps: {
+      placeholder: '质量管理、质量保证系列认证标准认证部门',
+    },
+    required: ({ values }) => {
+      if (values.quality) {
+        return true;
+      }
+      return false;
+    },
+  },
+  {
+    field: 'regMoney',
+    component: 'Input',
+    label: '注册资金(万元)',
+    labelWidth: adaptWidth.labelWidth,
+    defaultValue: '',
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+    componentProps: {
+      placeholder: '注册资金(万元)',
+    },
+    required: true,
+  },
+  {
+    field: 'money',
+    component: 'Input',
+    label: '资产(万元)',
+    labelWidth: adaptWidth.labelWidth,
+    defaultValue: '',
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+    componentProps: {
+      placeholder: '资产(万元)',
+    },
+  },
+  {
+    field: 'ownerMoney',
+    component: 'Input',
+    label: '所有者权益(万元)',
+    labelWidth: adaptWidth.labelWidth,
+    defaultValue: '',
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+    componentProps: {
+      placeholder: '所有者权益(万元)',
+    },
+  },
+  {
+    field: 'sellMoney',
+    component: 'Input',
+    label: '销售收入(万元)',
+    labelWidth: adaptWidth.labelWidth,
+    defaultValue: '',
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+    componentProps: {
+      placeholder: '销售收入(万元)',
+    },
+  },
+  {
+    field: 'product',
+    component: 'InputTextArea',
+    label: '主要经营项目',
+    labelWidth: adaptWidth.labelWidth,
+    defaultValue: '',
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+    componentProps: {
+      placeholder: '主要经营项目',
+    },
+    required: true,
+  },
+];

src/views/member/member/customCom/unit/index.vue

@@ -0,0 +1,133 @@
+<template>
+  <a-button type="primary" @click="handleAdd"> 添加 </a-button>
+  <BasicTable
+    ref="tableRef"
+    @register="registerTable"
+    rowKey="id"
+    :pagination="{
+      pageSize: 10,
+      defaultPageSize: 10,
+      showSizeChanger: false,
+    }"
+  >
+    <template #form-custom> custom-slot </template>
+    <template #action="{ record }">
+      <TableAction :actions="createActions(record)" stopButtonPropagation />
+    </template>
+  </BasicTable>
+  <Popup @register="addRegister" @saveData="saveData" />
+</template>
+<script lang="ts">
+  import { defineComponent, ref, unref } from 'vue';
+  import Popup from './popup.vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useModal } from '/@/components/Modal';
+  import { getFormConfig, columns } from './data';
+  import { getUnitList, addUnit } from '/@/api/sys/member';
+  import {
+    BasicTable,
+    useTable,
+    TableAction,
+    ActionItem,
+    EditRecordRow,
+    TableActionType,
+  } from '/@/components/Table';
+
+  export default defineComponent({
+    name: 'Unit',
+    components: { BasicTable, TableAction, Popup },
+    emits: ['select'],
+    setup(_, { emit }) {
+      const { createMessage } = useMessage();
+      const { success /*, error*/ } = createMessage;
+      const tableRef = ref<Nullable<TableActionType>>(null);
+      const [registerTable] = useTable({
+        columns: columns,
+        clickToRowSelect: false, // 点击行不勾选
+        api: getUnitList,
+        useSearchForm: true,
+        afterFetch: afterFetch,
+        formConfig: getFormConfig(),
+        actionColumn: {
+          width: 160,
+          title: '操作',
+          dataIndex: 'action',
+          slots: { customRender: 'action' },
+          fixed: undefined,
+        },
+        maxHeight: 190,
+        showIndexColumn: false,
+        bordered: true,
+      });
+      const [addRegister, { openModal: openPopup }] = useModal();
+      function getTableAction() {
+        // 获取组件
+        const tableAction = unref(tableRef);
+        if (!tableAction) {
+          throw new Error('tableAction is null');
+        }
+        return tableAction;
+      }
+
+      function afterFetch(result) {
+        console.log(`result`, result);
+        // tableData.result = result;
+      }
+
+      function handleAdd() {
+        // 开启弹窗
+        openPopup(true, { family: [] });
+      }
+      function handleSelect(record: EditRecordRow) {
+        emit('select', record);
+      }
+
+      async function saveData(params: any) {
+        const data = params.data;
+        const closeModel = params.closeModal;
+        console.log(`data`, data);
+        await addUnit(data).then((res) => {
+          console.log(res);
+          getTableAction().reload();
+          closeModel();
+          success('创建成功!');
+        });
+      }
+
+      function createActions(record: EditRecordRow): ActionItem[] {
+        return [
+          {
+            label: '选择',
+            icon: 'ant-design:edit-outlined',
+            color: 'warning',
+            onClick: handleSelect.bind(null, record),
+          },
+        ];
+      }
+      return {
+        tableRef,
+        registerTable,
+        handleAdd,
+        handleSelect,
+        createActions,
+        getTableAction,
+        addRegister,
+        saveData,
+      };
+    },
+  });
+</script>
+<style>
+  .ant-calendar-picker {
+    width: 100%;
+  }
+  @media (max-width: 639px) {
+    .sys-container .vben-basic-table-header__toolbar > * {
+      margin-right: 3px;
+    }
+
+    .sys-container .vben-basic-table .ant-table-wrapper {
+      padding: 3px;
+    }
+  }
+</style>

src/views/member/member/customCom/unit/popup.vue

@@ -0,0 +1,83 @@
+<template>
+  <BasicModal width="800px" v-bind="$attrs" @register="register" @ok="confirm" title="添加个人">
+    <BasicForm @register="registerForm" :model="model" />
+  </BasicModal>
+</template>
+<script lang="ts">
+  import { defineComponent, ref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  // import { useMessage } from '/@/hooks/web/useMessage';
+  import { schemas } from './data';
+  import moment from 'moment';
+
+  export default defineComponent({
+    components: { BasicModal, BasicForm },
+    emits: ['saveData'],
+    setup(_, { emit }) {
+      const modelRef = ref({});
+      // const { createMessage } = useMessage();
+      // const { error } = createMessage;
+
+      const [registerForm, { resetFields, validate }] = useForm({
+        labelWidth: 120,
+        schemas,
+        showActionButtonGroup: false,
+        actionColOptions: {
+          span: 24,
+        },
+      });
+      const [register, { closeModal }] = useModalInner(() => {
+        resetFields();
+      });
+
+      async function confirm() {
+        const data = await validate();
+        console.log(`确定`, data);
+        if (data.technology) {
+          data.technology = 1;
+        } else {
+          data.technology = 0;
+        }
+        if (data.foreignTrade) {
+          data.foreignTrade = 1;
+        } else {
+          data.foreignTrade = 0;
+        }
+        if (data.quality) {
+          data.quality = 1;
+        } else {
+          data.quality = 0;
+        }
+        data.foundingtime = moment(data.foundingtime).format('YYYY-MM-DD');
+
+        const popupData = { closeModal, data };
+        emit('saveData', popupData);
+        // closeModal(); // 关闭弹窗
+      }
+      return {
+        register,
+        schemas,
+        registerForm,
+        model: modelRef,
+        confirm,
+      };
+    },
+  });
+</script>
+<style lang="less">
+  .ant-form-item-label {
+    overflow: hidden;
+    text-align: center !important;
+    // white-space: pre-wrap !important;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  @media (max-width: 639px) {
+    .ant-form-item-label {
+      line-height: 2.5715 !important;
+      text-align: center !important;
+    }
+  }
+</style>

src/views/member/member/data.ts

@@ -31,7 +31,7 @@ export const columns: BasicColumn[] = [
   },
   {
     title: '入会时间',
-    dataIndex: 'birthday',
+    dataIndex: 'jointime',
     width: 150,
     sorter: true,
     customRender({ record }) {
@@ -265,15 +265,12 @@ export const schemas: FormSchema[] = [
     colProps: {
       span: adaptWidth.elContainer,
     },
-    componentProps: {
-      placeholder: '姓名',
-    },
     render: ({ model, field }) => {
       return h(CustomInput, {
         value: model[field],
-        placeholder: '姓名',
-        onChang(value) {
-          console.log(`value`, value);
+        placeholder: '添加个人',
+        onChange(value) {
+          model[field] = value;
         },
       });
     },
@@ -292,15 +289,21 @@ export const schemas: FormSchema[] = [
     },
   },
   {
-    field: 'title',
+    field: 'name',
     component: 'Input',
     label: '名称',
     labelWidth: adaptWidth.labelWidth,
     colProps: {
       span: adaptWidth.elContainer,
     },
-    componentProps: {
-      placeholder: '名称',
+    render: ({ model, field }) => {
+      return h(CustomInput, {
+        value: model[field],
+        placeholder: '添加单位',
+        onChange(value) {
+          model[field] = value;
+        },
+      });
     },
     show: ({ values }) => {
       console.log(`values`, values);
@@ -317,30 +320,64 @@ export const schemas: FormSchema[] = [
     },
   },
   {
-    field: 'unit',
+    field: 'relation',
     component: 'Input',
     label: '相关单位',
     labelWidth: adaptWidth.labelWidth,
     colProps: {
       span: adaptWidth.elContainer,
     },
-    componentProps: {
-      placeholder: '相关单位',
+    render: ({ model, field }) => {
+      return h(CustomInput, {
+        value: model[field],
+        placeholder: '添加相关单位',
+        onChange(value) {
+          model[field] = value;
+        },
+      });
+    },
+    show: ({ values }) => {
+      if (values.status) {
+        return true;
+      }
+      return false;
+    },
+    required: ({ values }) => {
+      if (values.status) {
+        return true;
+      }
+      return false;
     },
-    required: true,
   },
   {
-    field: 'person',
+    field: 'relation',
     component: 'Input',
     label: '相关个人',
     labelWidth: adaptWidth.labelWidth,
     colProps: {
       span: adaptWidth.elContainer,
     },
-    componentProps: {
-      placeholder: '相关个人',
+    render: ({ model, field }) => {
+      return h(CustomInput, {
+        value: model[field],
+        placeholder: '添加相关个人',
+        onChange(value) {
+          model[field] = value;
+        },
+      });
+    },
+    show: ({ values }) => {
+      if (!values.status) {
+        return true;
+      }
+      return false;
+    },
+    required: ({ values }) => {
+      if (!values.status) {
+        return true;
+      }
+      return false;
     },
-    required: true,
   },
   {
     field: 'duty',
@@ -382,7 +419,7 @@ export const schemas: FormSchema[] = [
     required: true,
   },
   {
-    field: 'joinTime',
+    field: 'jointime',
     component: 'DatePicker',
     label: '入会时间',
     labelWidth: adaptWidth.labelWidth,

src/views/member/member/index.vue

@@ -45,12 +45,12 @@
   import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
   import { getFormConfig, columns } from './data';
   import {
-    getPersonList,
-    addPerson,
-    deleteBatchesPerson,
-    getPerson,
-    editPerson,
-    deletePerson,
+    getMemberList,
+    addMember,
+    deleteBatchesMember,
+    getMember,
+    editMember,
+    deleteMember,
   } from '/@/api/sys/member';
   import {
     BasicTable,
@@ -86,7 +86,7 @@
         rowSelection: { type: 'checkbox' },
         columns: columns,
         // clickToRowSelect: false, // 点击行不勾选
-        api: getPersonList,
+        api: getMemberList,
         useSearchForm: true,
         afterFetch: afterFetch,
         formConfig: getFormConfig(),
@@ -123,7 +123,7 @@
 
       async function handleEdit(record: EditRecordRow) {
         popupData.title = '编辑';
-        getPerson({ id: record.id }).then((res) => {
+        getMember({ id: record.id }).then((res) => {
           const data = res.row;
           openPopup(true, data);
         });
@@ -131,7 +131,7 @@
 
       async function handleDelete(record: Recordable) {
         console.log(record);
-        await deletePerson({ id: record.id }).then((res) => {
+        await deleteMember({ id: record.id }).then((res) => {
           console.log(res);
           getTableAction().reload();
           success('删除成功!');
@@ -171,7 +171,7 @@
           cancelText: '取消',
           maskClosable: true,
           async onOk() {
-            await deleteBatchesPerson({ ids }).then((res) => {
+            await deleteBatchesMember({ ids }).then((res) => {
               console.log(res);
               getTableAction().reload();
               success('删除成功!');
@@ -189,7 +189,7 @@
         const closeModel = params.closeModal;
         console.log(`data`, data);
         if (!data.id) {
-          await addPerson(data).then((res) => {
+          await addMember(data).then((res) => {
             console.log(res);
             getTableAction().reload();
             closeModel();
@@ -197,7 +197,7 @@
           });
           console.log('----------add---');
         } else {
-          await editPerson(data).then((res) => {
+          await editMember(data).then((res) => {
             console.log(res);
             getTableAction().reload();
             closeModel();

src/views/member/member/popup.vue

@@ -7,7 +7,7 @@
   import { defineComponent, PropType, reactive, ref, toRefs } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { BasicForm, useForm } from '/@/components/Form/index';
-  import { useMessage } from '/@/hooks/web/useMessage';
+  // import { useMessage } from '/@/hooks/web/useMessage';
   import { schemas } from './data';
   import moment from 'moment';
   interface PopupData {
@@ -32,8 +32,8 @@
       const role = reactive<Role>({
         id: 0,
       });
-      const { createMessage } = useMessage();
-      const { error } = createMessage;
+      // const { createMessage } = useMessage();
+      // const { error } = createMessage;
 
       const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
         labelWidth: 120,
@@ -62,21 +62,11 @@
       async function confirm() {
         const data = await validate();
         console.log(`确定`, data);
-        const not_validate = data.family.some((item) => {
-          if (item.relation === '' || item.age === '' || item.job === '' || item.company === '') {
-            error('家庭成员信息不能为空');
-            return true;
-          } else if (typeof item.age !== 'number') {
-            error('年龄必须为阿拉伯数字');
-            return true;
-          }
-        });
-        if (not_validate) {
-          return;
-        }
         data.id = role.id;
-        data.birthday = moment(data.birthday).format('YYYY-MM-DD');
-        data.family = JSON.stringify(data.family);
+        data.fromId = data.name.id;
+        data.jointime = moment(data.jointime).format('YYYY-MM-DD');
+        delete data.relation;
+        delete data.name;
         const popupData = { closeModal, data };
         emit('saveData', popupData);
         // closeModal(); // 关闭弹窗

src/views/member/person/data.ts.rej

@@ -1,20 +0,0 @@
-diff a/src/views/member/person/data.ts b/src/views/member/person/data.ts	(rejected hunks)
-@@ -564,18 +564,6 @@
-       span: adaptWidth.elContainer,
-     },
-     defaultValue: '',
--    // render: ({ model, field }) => {
--    //   if (!model[field]) {
--    //     model[field] = [];
--    //   }
--    //   return h(Table, {
--    //     value: model[field],
--    //     onChange: (value) => {
--    //       console.log(`e----onchange`, value);
--    //       model[field] = value;
--    //     },
--    //   });
--    // },
-     componentProps: ({ formModel }) => {
-       console.log(`componentProps-----value`, formModel.family);
-       return {