添加placeholder

src/components/Form/src/components/ArrCom.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,29 @@
           <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: [], default: [] },
+    placeholder: { type: String, default: '' },
   };
 
   export default defineComponent({
@@ -43,42 +54,35 @@
       const state = reactive({
         list: [] as object[],
       });
-      // 初始化 sortable 实现拖动
-      function initSortable() {
-        // 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: '会长' }];
-      }
-      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);
+          console.log(`props.placeholder`, props.placeholder);
+          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 {
         onChange,
         create,
@@ -91,12 +95,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 {
@@ -109,6 +116,12 @@
     margin-right: 2px;
   }
 
+  .delete-btn {
+    position: relative;
+    top: 5px;
+    padding: 5px;
+  }
+
   .add-btn {
     margin-top: 2px;
     color: #fff;

src/views/member/person/Table.vue

@@ -42,6 +42,7 @@
 
   const props = {
     value: { type: [], default: [] },
+    placeholder: { type: String, default: '' },
   };
 
   export default defineComponent({
@@ -59,6 +60,7 @@
         // }, 200);
         nextTick(() => {
           console.log(`props.value`, props.value);
+          console.log(`props.placeholder`, props.placeholder);
           state.list = props.value;
         });
       }

src/views/member/person/data.ts

@@ -1,6 +1,6 @@
 import { FormProps, BasicColumn } from '/@/components/Table';
-import { h } from 'vue';
-import Table from './Table.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';
@@ -282,6 +282,9 @@ export const schemas: FormSchema[] = [
     colProps: {
       span: adaptWidth.elContainer,
     },
+    componentProps: {
+      placeholder: '姓名',
+    },
     required: true,
   },
   {
@@ -293,6 +296,7 @@ export const schemas: FormSchema[] = [
       span: adaptWidth.elContainer,
     },
     componentProps: {
+      placeholder: '性别',
       options: [
         {
           label: '男',
@@ -314,6 +318,9 @@ export const schemas: FormSchema[] = [
     colProps: {
       span: adaptWidth.elContainer,
     },
+    componentProps: {
+      placeholder: '出生年月',
+    },
     required: true,
   },
   {
@@ -324,6 +331,9 @@ export const schemas: FormSchema[] = [
     colProps: {
       span: adaptWidth.elContainer,
     },
+    componentProps: {
+      placeholder: '籍贯',
+    },
     required: true,
   },
   {
@@ -334,6 +344,9 @@ export const schemas: FormSchema[] = [
     colProps: {
       span: adaptWidth.elContainer,
     },
+    componentProps: {
+      placeholder: '出生地',
+    },
     required: true,
   },
   {
@@ -344,6 +357,9 @@ export const schemas: FormSchema[] = [
     colProps: {
       span: adaptWidth.elContainer,
     },
+    componentProps: {
+      placeholder: '身份证号码',
+    },
     required: true,
   },
   {
@@ -354,6 +370,9 @@ export const schemas: FormSchema[] = [
     colProps: {
       span: adaptWidth.elContainer,
     },
+    componentProps: {
+      placeholder: '民族',
+    },
     required: true,
   },
   {
@@ -361,6 +380,7 @@ export const schemas: FormSchema[] = [
     label: '党派',
     component: 'Select',
     componentProps: {
+      placeholder: '党派',
       options: [
         {
           label: '无',
@@ -414,6 +434,9 @@ export const schemas: FormSchema[] = [
     colProps: {
       span: adaptWidth.elContainer,
     },
+    componentProps: {
+      placeholder: '学历',
+    },
     required: true,
   },
   {
@@ -424,6 +447,9 @@ export const schemas: FormSchema[] = [
     colProps: {
       span: adaptWidth.elContainer,
     },
+    componentProps: {
+      placeholder: '职称',
+    },
     required: true,
   },
   {
@@ -434,6 +460,9 @@ export const schemas: FormSchema[] = [
     colProps: {
       span: adaptWidth.elContainer,
     },
+    componentProps: {
+      placeholder: '职务',
+    },
     required: true,
   },
   {
@@ -445,6 +474,9 @@ export const schemas: FormSchema[] = [
     colProps: {
       span: adaptWidth.elContainer,
     },
+    componentProps: {
+      placeholder: '地址',
+    },
     required: true,
   },
   {
@@ -456,6 +488,9 @@ export const schemas: FormSchema[] = [
     colProps: {
       span: adaptWidth.elContainer,
     },
+    componentProps: {
+      placeholder: '邮编',
+    },
   },
   {
     field: 'tel',
@@ -466,6 +501,9 @@ export const schemas: FormSchema[] = [
     colProps: {
       span: adaptWidth.elContainer,
     },
+    componentProps: {
+      placeholder: '电话',
+    },
   },
   {
     field: 'mobile',
@@ -476,6 +514,9 @@ export const schemas: FormSchema[] = [
     colProps: {
       span: adaptWidth.elContainer,
     },
+    componentProps: {
+      placeholder: '手机',
+    },
     required: true,
   },
   {
@@ -487,6 +528,9 @@ export const schemas: FormSchema[] = [
     colProps: {
       span: adaptWidth.elContainer,
     },
+    componentProps: {
+      placeholder: '办企业前工作单位',
+    },
   },
   {
     field: 'peopleJob',
@@ -497,6 +541,9 @@ export const schemas: FormSchema[] = [
     colProps: {
       span: adaptWidth.elContainer,
     },
+    componentProps: {
+      placeholder: '人大职务',
+    },
   },
   {
     field: 'cppccJob',
@@ -507,27 +554,40 @@ export const schemas: FormSchema[] = [
     colProps: {
       span: adaptWidth.elContainer,
     },
+    componentProps: {
+      placeholder: '政协职务',
+    },
   },
   {
     field: 'family',
-    component: 'Input',
+    component: 'ArrCom',
     label: '家庭主要成员',
     labelWidth: adaptWidth.labelWidth,
     colProps: {
       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;
+    // 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 {
+        placeholder: '家庭主要成员',
+        value: formModel.family,
+        onChange: (e) => {
+          console.log(e);
         },
-      });
+      };
     },
     required: true,
   },
@@ -540,6 +600,9 @@ export const schemas: FormSchema[] = [
     colProps: {
       span: adaptWidth.elContainer,
     },
+    componentProps: {
+      placeholder: '本人简历',
+    },
   },
   {
     field: 'company',
@@ -550,6 +613,9 @@ export const schemas: FormSchema[] = [
     colProps: {
       span: adaptWidth.elContainer,
     },
+    componentProps: {
+      placeholder: '所在单位',
+    },
     required: true,
   },
 ];

src/views/member/person/index.vue

@@ -64,6 +64,10 @@
   interface PopupData {
     title: string;
   }
+  interface TableData {
+    result: Object[];
+  }
+
   interface Btn {
     disable_btn: boolean;
   }
@@ -79,6 +83,9 @@
       const popupData = reactive<PopupData>({
         title: '添加',
       });
+      const tableData = reactive<TableData>({
+        result: [],
+      });
       const btn = reactive<Btn>({
         disable_btn: true,
       });
@@ -126,6 +133,7 @@
         // result[0].family = [{ relation: '父子1', name: '某某1', age: '351', job: '会长1' }];
         // result[0].family = [{ relation: '', name: '', age: '', job: '' }];
         console.log(`result`, result);
+        tableData.result = result;
       }
 
       function addRole() {
@@ -136,12 +144,15 @@
       function handleEdit(record: EditRecordRow) {
         currentEditKeyRef.value = record.id; // record.key
         popupData.title = '编辑';
+        console.log(`before----record`, record)
         const data = getTableAction().getDataSource();
+        console.log(`data?????`, data);
         data.map((item) => {
           if (item.id === record.id) {
             record = item;
           }
         });
+        console.log(`record----after`, record);
         openPopup(true, record);
       }
 

src/views/member/person/popup.vue

@@ -47,6 +47,7 @@
       //   });
       const [register, { closeModal }] = useModalInner((data) => {
         resetFields();
+        console.log(`useModalInner --------- data`, data);
         setFieldsValue(data);
         role.id = data.id;
       });