个人管理家庭成员

src/components/Form/src/components/ArrCom.vue

@@ -31,7 +31,7 @@
   import { Input } from 'ant-design-vue';
 
   const props = {
-    value: { type: [Object], default: [] },
+    value: { type: [], default: [] },
   };
 
   export default defineComponent({
@@ -48,6 +48,7 @@
         // for (let k in props.value) {
         //   state.list.push({ name: k, value: props.value[k] });
         // }
+        console.log(`props.value-------`, props.value);
         state.list = props.value;
         state.list = [{ relation: '父子', name: '某某', age: '35', job: '会长' }];
       }
@@ -78,7 +79,6 @@
         const data = formatList(state.list);
         emit('change', data);
       }
-
       return {
         onChange,
         create,

src/components/Form/src/components/MultipleTreeSelect.vue

@@ -1,7 +1,7 @@
 <template>
   <a-tree-select
     show-search
-    style="width: 100%;"
+    style="width: 100%"
     v-model:value="value"
     :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
     placeholder="Please select"
@@ -20,12 +20,6 @@
     components: {
       [TreeSelect.name]: TreeSelect,
     },
-    // props: {
-    //   value: {
-    //     type: Array,
-    //     default: [],
-    //   },
-    // },
     setup() {
       const value = ref<string[]>([]);
       console.log(value);
@@ -35,8 +29,6 @@
         console.log(value);
         console.log('select', value.value);
       });
-      console.log('===============props========');
-      console.log(`props`, value);
       return {
         value,
       };

src/views/admin/admin/index.vue

@@ -155,7 +155,7 @@
           if (item.groups) {
             item.groups_value = [];
             item.groups.map((item_group) => {
-              item.groups_value.push({ lable: item_group.name, value: item_group.id });
+              item.groups_value.push({ lable: item_group.name, value: parseInt(item_group.id) });
             });
           } else {
             item.groups = []; //null

src/views/general/config/customComponents/ArrayCom.vue

@@ -55,7 +55,6 @@
       watch(
         () => props.value,
         (value) => {
-          console.log(`watch -value--- value`, value)
           state.list = [];
           let index = 0;
           for (let k in value) {
@@ -136,8 +135,6 @@
         list.map((item) => {
           data[item.name] = item.value;
         });
-        console.log(`list`, list)
-        console.log(`data`, data)
         return data;
       }
 

src/views/member/person/Table.vue

@@ -2,10 +2,11 @@
   <!-- <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 class="value-head">关系</div>
+      <div class="value-head">姓名</div>
+      <div class="value-head">年龄</div>
+      <div class="value-head">工作单位</div>
+      <div class="value-head">职务</div>
     </div>
     <div class="array-item">
       <div class="content-item" v-for="(item, index) in list" :key="index">
@@ -19,19 +20,28 @@
           <Input v-model:value="item.age" @change="onChange" />
         </div>
         <div class="value-content">
+          <Input v-model:value="item.company" @change="onChange" />
+        </div>
+        <div class="value-content">
           <Input v-model:value="item.job" @change="onChange" />
         </div>
+        <a-button
+          class="mr-2 delete-btn"
+          preIcon="mdi:close-thick"
+          color="error"
+          @click="remove(index)"
+        />
       </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 { defineComponent, onUpdated, reactive, nextTick, toRefs, watch } from 'vue';
   import { Input } from 'ant-design-vue';
 
   const props = {
-    value: { type: [Object], default: [] },
+    value: { type: [], default: [] },
   };
 
   export default defineComponent({
@@ -42,40 +52,32 @@
       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 init() {
+        // setTimeout(() => {
 
-      function formatList(list) {
-        const data: object = {};
-        list.map((item) => {
-          data[item.name] = item.value;
+        // }, 200);
+        nextTick(() => {
+          console.log(`props.value`, props.value);
+          state.list = props.value;
         });
-        console.log(`list`, list);
-        console.log(`data`, data);
-        return data;
       }
+      watch(props.value, (value: object[]) => {
+        state.list = value;
+      });
+      onUpdated(() => {
+        init();
+      });
 
       function onChange() {
-        const data = formatList(state.list);
-        console.log(`state.list`, state.list);
-        emit('change', data);
+        emit('change', state.list);
       }
       function create() {
-        state.list.push({ relation: '', name: '', 年龄: '', job: '' });
+        state.list.push({ relation: '', name: '', age: '', company: '', job: '' });
       }
       function remove(i) {
         state.list.splice(i, 1);
-        const data = formatList(state.list);
-        emit('change', data);
+        emit('change', state.list);
       }
 
       return {
@@ -90,12 +92,15 @@
 <style scoped>
   .head {
     display: flex;
+    width: 93%;
     text-align: left;
     justify-content: space-around;
   }
 
   .value-head {
+    width: 20%;
     font-weight: bold;
+    line-height: 20px;
   }
 
   .content-item {
@@ -108,6 +113,12 @@
     margin-right: 2px;
   }
 
+  .delete-btn {
+    position: relative;
+    top: 5px;
+    padding: 5px;
+  }
+
   .add-btn {
     margin-top: 2px;
     color: #fff;

src/views/member/person/data.ts

@@ -517,14 +517,19 @@ export const schemas: FormSchema[] = [
       span: adaptWidth.elContainer,
     },
     defaultValue: '',
-    render: (value) => {
-      console.log(`value`, value);
-      return h(
-        Table,
-        { color: 'red', style: { fontSize: '12px', fontWeight: 'bold', margin: '2px 0' } },
-        () => '123'
-      );
+    render: ({ model, field }) => {
+      if (!model[field]) {
+        model[field] = [];
+      }
+      return h(Table, {
+        value: model[field],
+        onChange: (value) => {
+          console.log(`e----onchange`, value);
+          model[field] = value;
+        },
+      });
     },
+    required: true,
   },
   {
     field: 'info',

src/views/member/person/index.vue

@@ -88,7 +88,6 @@
         // clickToRowSelect: false, // 点击行不勾选
         api: getPersonList,
         useSearchForm: true,
-        beforeFetch: beforeFetch,
         afterFetch: afterFetch,
         formConfig: getFormConfig(),
         actionColumn: {
@@ -112,44 +111,20 @@
         return tableAction;
       }
 
-      // 请求之前处理参数
-      function beforeFetch(params) {
-        console.log(params);
-        console.log('==========before========');
-        for (let k in params) {
-          if (!params[k]) {
-            delete params[k];
-          }
-        }
-
-        if (params.logintime) {
-          params.logintime[0] = params.logintime[0].replace(
-            /([0-1][0-9]|2[0-3]):([0-5][0-9]):([0-5][0-9])/g,
-            '00:00:00'
-          );
-          params.logintime[1] = params.logintime[1].replace(
-            /([0-1][0-9]|2[0-3]):([0-5][0-9]):([0-5][0-9])/g,
-            '23:59:59'
-          );
-        }
-
-        params.offset = params.page;
-        params.limit = params.pageSize;
-        delete params.page;
-        delete params.pageSize;
-      }
       function afterFetch(result) {
-        result.map((item) => {
-          if (item.groups) {
-            item.groups_value = [];
-            item.groups.map((item_group) => {
-              item.groups_value.push({ lable: item_group.name, value: item_group.id });
-            });
-          } else {
-            item.groups = []; //null
-            item.groups_text = [];
-          }
-        });
+        // result.map((item) => {
+        //   if (item.groups) {
+        //     item.groups_value = [];
+        //     item.groups.map((item_group) => {
+        //       item.groups_value.push({ lable: item_group.name, value: item_group.id });
+        //     });
+        //   } else {
+        //     item.groups = []; //null
+        //     item.groups_text = [];
+        //   }
+        // });
+        // result[0].family = [{ relation: '父子1', name: '某某1', age: '351', job: '会长1' }];
+        // result[0].family = [{ relation: '', name: '', age: '', job: '' }];
         console.log(`result`, result);
       }
 

src/views/member/person/popup.vue

@@ -1,5 +1,5 @@
 <template>
-  <BasicModal width="700px" v-bind="$attrs" @register="register" @ok="confirm" :title="title">
+  <BasicModal width="800px" v-bind="$attrs" @register="register" @ok="confirm" :title="title">
     <BasicForm @register="registerForm" :model="model" />
   </BasicModal>
 </template>
@@ -8,6 +8,7 @@
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { BasicForm, useForm } from '/@/components/Form/index';
   import { schemas } from './data';
+  import moment from 'moment';
   interface PopupData {
     title: string;
   }
@@ -56,6 +57,7 @@
         if (role.id) {
           data.id = role.id;
         }
+        data.birthday = moment(data.birthday).format('YYYY-MM-DD');
 
         const popupData = { closeModal, data };
         emit('saveData', popupData);