个人管理

src/api/sys/member.ts

@@ -5,14 +5,19 @@ import {
   UnitIdParams,
   AddUnitParams,
   EditUnitParams,
+  GetPersonListModel,
+  PersonIdParams,
+  AddPersonParams,
+  EditPersonParams,
 } from './model/memberModel';
 
 enum Api {
   UnitUrl = '/member/unit',
+  PersonUrl = '/member/person',
 }
 
 /**
- * @description: GetMemberList
+ * @description: GetUnitList
  */
 export function getUnitList() {
   console.log('-------------------getUnitList---------------');
@@ -72,3 +77,65 @@ export function deleteUnit(params: UnitIdParams) {
     method: 'DELETE',
   });
 }
+
+/**
+ * @description: GetPersonList -----------------------------------------------
+ */
+export function getPersonList() {
+  console.log('-------------------getPersonList---------------');
+  return defHttp.request<GetPersonListModel>({
+    url: Api.PersonUrl,
+    method: 'GET',
+  });
+}
+
+/**
+ * @description: addPerson
+ */
+export function addPerson(params: AddPersonParams) {
+  return defHttp.request<GetPersonListModel>({
+    url: Api.PersonUrl,
+    method: 'POST',
+    params,
+  });
+}
+/**
+ * @description: 批量删除会员
+ */
+export function deleteBatchesPerson(params: DeleteBatchesParams) {
+  return defHttp.request<GetPersonListModel>({
+    url: Api.PersonUrl,
+    method: 'DELETE',
+    params,
+  });
+}
+
+/**
+ * @description: 获取单个会员
+ */
+export function getPerson(params: PersonIdParams) {
+  return defHttp.request<GetPersonListModel>({
+    url: Api.PersonUrl + '/' + params.id,
+    method: 'GET',
+    params,
+  });
+}
+/**
+ * @description: 修改单个会员
+ */
+export function editPerson(params: EditPersonParams) {
+  return defHttp.request<GetPersonListModel>({
+    url: Api.PersonUrl + '/' + params.id,
+    method: 'PUT',
+    params,
+  });
+}
+/**
+ * @description: 删除单个会员
+ */
+export function deletePerson(params: PersonIdParams) {
+  return defHttp.request<GetPersonListModel>({
+    url: Api.PersonUrl + '/' + params.id,
+    method: 'DELETE',
+  });
+}

src/api/sys/model/memberModel.ts

@@ -32,3 +32,30 @@ export interface AddUnitParams {
 export interface EditUnitParams {
   id: number;
 }
+/**
+ * @description: Get Person list----------------------
+ */
+export interface GetPersonListModel {
+  count: number;
+  list: object[];
+}
+
+/**
+ * @description: id
+ */
+export interface PersonIdParams {
+  id: string | number;
+}
+
+/**
+ * @description: add Person
+ */
+export interface AddPersonParams {
+  id: number;
+}
+/**
+ * @description: edit Person
+ */
+export interface EditPersonParams {
+  id: number;
+}

src/store/modules/permission.ts

@@ -156,16 +156,16 @@ export const usePermissionStore = defineStore({
             path: '/member',
             name: 'Member',
             component: 'LAYOUT',
-            redirect: '/member/personal',
+            redirect: '/member/person',
             meta: {
               icon: 'ion:grid-outline',
               title: '会员',
             },
             children: [
               {
-                path: 'personal',
-                name: 'Personal',
-                component: '/member/personal/index',
+                path: 'person',
+                name: 'Person',
+                component: '/member/person/index',
                 meta: {
                   affix: true,
                   title: '个人管理',

src/views/member/person/Table.vue

@@ -0,0 +1,115 @@
+<template>
+  <!-- <BasicTable @register="registerTable" /> -->
+  <div class="wrap">
+    <div class="head">
+      <div class="value-head">关系<span style="color: red">*</span></div>
+      <div class="value-head">姓名<span style="color: red">*</span></div>
+      <div class="value-head">年龄<span style="color: red">*</span></div>
+      <div class="value-head">工作单位及职务<span style="color: red">*</span></div>
+    </div>
+    <div class="array-item">
+      <div class="content-item" v-for="(item, index) in list" :key="index">
+        <div class="value-content">
+          <Input v-model:value="item.relation" @change="onChange" />
+        </div>
+        <div class="value-content">
+          <Input v-model:value="item.name" @change="onChange" />
+        </div>
+        <div class="value-content">
+          <Input v-model:value="item.age" @change="onChange" />
+        </div>
+        <div class="value-content">
+          <Input v-model:value="item.job" @change="onChange" />
+        </div>
+      </div>
+    </div>
+    <a-button class="add-btn mr-2" size="small" color="success" @click="create"> 追加 </a-button>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, onMounted, reactive, toRefs } from 'vue';
+  import { Input } from 'ant-design-vue';
+
+  const props = {
+    value: { type: [Object], default: [] },
+  };
+
+  export default defineComponent({
+    components: { Input },
+    props,
+    emits: ['change'],
+    setup(props, { emit }) {
+      const state = reactive({
+        list: [] as object[],
+      });
+      // 初始化 sortable 实现拖动
+      function initSortable() {
+        // for (let k in props.value) {
+        //   state.list.push({ name: k, value: props.value[k] });
+        // }
+        state.list = props.value;
+        state.list = [{ relation: '父子', name: '某某', age: '35', job: '会长' }];
+      }
+      onMounted(() => {
+        initSortable(); // 开启拖拽功能
+      });
+
+      function formatList(list) {
+        const data: object = {};
+        list.map((item) => {
+          data[item.name] = item.value;
+        });
+        console.log(`list`, list);
+        console.log(`data`, data);
+        return data;
+      }
+
+      function onChange() {
+        const data = formatList(state.list);
+        console.log(`state.list`, state.list)
+        emit('change', data);
+      }
+      function create() {
+        state.list.push({ relation: '', name: '', 年龄: '', job: '' });
+      }
+      function remove(i) {
+        state.list.splice(i, 1);
+        const data = formatList(state.list);
+        emit('change', data);
+      }
+
+      return {
+        onChange,
+        create,
+        remove,
+        ...toRefs(state),
+      };
+    },
+  });
+</script>
+<style scoped>
+  .head {
+    display: flex;
+    text-align: left;
+    justify-content: space-around;
+  }
+
+  .value-head {
+    font-weight: bold;
+  }
+
+  .content-item {
+    display: flex;
+    margin: 5px 0;
+  }
+
+  .value-content {
+    /* width: 50%; */
+    margin-right: 2px;
+  }
+
+  .add-btn {
+    margin-top: 2px;
+    color: #fff;
+  }
+</style>

src/views/member/personal/data.ts → src/views/member/person/data.ts

@@ -1,6 +1,6 @@
 import { FormProps, BasicColumn } from '/@/components/Table';
-// import { h } from 'vue';
-// import { Tag } from 'ant-design-vue';
+import { h } from 'vue';
+import Table from './Table.vue';
 // import { formatToDate } from '/@/utils/dateUtil';
 import { FormSchema } from '/@/components/Form/index';
 import { adapt } from '/@/utils/adapt';
@@ -491,10 +491,18 @@ export const schemas: FormSchema[] = [
     colProps: {
       span: adaptWidth.elContainer,
     },
+    render: ({ value }) => {
+      console.log(`value`, value);
+      return h(
+        Table,
+        { color: 'red', style: { fontSize: '12px', fontWeight: 'bold', margin: '2px 0' } },
+        () => '123'
+      );
+    },
   },
   {
     field: 'info',
-    component: 'Input',
+    component: 'InputTextArea',
     label: '本人简历',
     labelWidth: adaptWidth.labelWidth,
     defaultValue: '',

src/views/member/personal/index.vue → src/views/member/person/index.vue

@@ -1,9 +1,9 @@
 <template>
   <CollapseContainer
     class="sys-container"
-    title="单位管理"
+    title="个人管理"
     :canExpan="false"
-    helpMessage="单位管理"
+    helpMessage="个人管理"
   >
     <BasicTable
       ref="tableRef"
@@ -45,12 +45,12 @@
   import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
   import { getFormConfig, columns } from './data';
   import {
-    getUnitList,
-    addUnit,
-    deleteBatchesUnit,
-    // getUnit,
-    editUnit,
-    deleteUnit,
+    getPersonList,
+    addPerson,
+    deleteBatchesPerson,
+    // getPerson,
+    editPerson,
+    deletePerson,
   } from '/@/api/sys/member';
   import {
     BasicTable,
@@ -69,7 +69,7 @@
   }
 
   export default defineComponent({
-    name: 'Personal',
+    name: 'Person',
     components: { CollapseContainer, BasicTable, TableAction, Popup, ExpExcelModel },
     setup() {
       const { createMessage } = useMessage();
@@ -86,7 +86,7 @@
         rowSelection: { type: 'checkbox' },
         columns: columns,
         // clickToRowSelect: false, // 点击行不勾选
-        api: getUnitList,
+        api: getPersonList,
         useSearchForm: true,
         beforeFetch: beforeFetch,
         afterFetch: afterFetch,
@@ -172,7 +172,7 @@
 
       async function handleDelete(record: Recordable) {
         console.log(record);
-        await deleteUnit({ id: record.id }).then((res) => {
+        await deletePerson({ id: record.id }).then((res) => {
           console.log(res);
           getTableAction().reload();
           success('删除成功!');
@@ -212,7 +212,7 @@
           cancelText: '取消',
           maskClosable: true,
           async onOk() {
-            await deleteBatchesUnit({ ids }).then((res) => {
+            await deleteBatchesPerson({ ids }).then((res) => {
               console.log(res);
               getTableAction().reload();
               success('删除成功!');
@@ -230,7 +230,7 @@
         const closeModel = params.closeModal;
         console.log(`data`, data);
         if (!data.id) {
-          await addUnit(data).then((res) => {
+          await addPerson(data).then((res) => {
             console.log(res);
             getTableAction().reload();
             closeModel();
@@ -238,7 +238,7 @@
           });
           console.log('----------add---');
         } else {
-          await editUnit(data).then((res) => {
+          await editPerson(data).then((res) => {
             console.log(res);
             getTableAction().reload();
             closeModel();

src/views/member/personal/popup.vue → src/views/member/person/popup.vue

@@ -1,11 +1,9 @@
 <template>
   <BasicModal v-bind="$attrs" @register="register" @ok="confirm" :title="title">
     <BasicForm @register="registerForm" :model="model" />
-    <!-- <MenuTree /> -->
   </BasicModal>
 </template>
 <script lang="ts">
-  import { Tree } from 'ant-design-vue';
   import { defineComponent, PropType, reactive, ref, toRefs } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { BasicForm, useForm } from '/@/components/Form/index';
@@ -18,7 +16,7 @@
   }
 
   export default defineComponent({
-    components: { BasicModal, BasicForm, [Tree.name]: Tree },
+    components: { BasicModal, BasicForm },
     props: {
       popupData: {
         type: Object as PropType<PopupData>,
@@ -83,24 +81,10 @@
     white-space: nowrap;
   }
 
-  .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/member/unit/popup.vue

@@ -1,11 +1,9 @@
 <template>
   <BasicModal v-bind="$attrs" @register="register" @ok="confirm" :title="title">
     <BasicForm @register="registerForm" :model="model" />
-    <!-- <MenuTree /> -->
   </BasicModal>
 </template>
 <script lang="ts">
-  import { Tree } from 'ant-design-vue';
   import { defineComponent, PropType, reactive, ref, toRefs } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { BasicForm, useForm } from '/@/components/Form/index';
@@ -18,7 +16,7 @@
   }
 
   export default defineComponent({
-    components: { BasicModal, BasicForm, [Tree.name]: Tree },
+    components: { BasicModal, BasicForm },
     props: {
       popupData: {
         type: Object as PropType<PopupData>,
@@ -97,24 +95,10 @@
     white-space: nowrap;
   }
 
-  .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>