修改model宽度

src/components/Form/src/componentMap.ts

@@ -20,6 +20,7 @@ import {
 
 import RadioButtonGroup from './components/RadioButtonGroup.vue';
 import MultipleTreeSelect from './components/MultipleTreeSelect.vue';
+import ArrCom from './components/ArrCom.vue';
 import ApiSelect from './components/ApiSelect.vue';
 import { BasicUpload } from '/@/components/Upload';
 import { StrengthMeter } from '/@/components/StrengthMeter';
@@ -37,6 +38,7 @@ componentMap.set('AutoComplete', AutoComplete);
 
 componentMap.set('Select', Select);
 componentMap.set('ApiSelect', ApiSelect);
+componentMap.set('ArrCom', ArrCom);
 // componentMap.set('SelectOptGroup', Select.OptGroup);
 // componentMap.set('SelectOption', Select.Option);
 componentMap.set('TreeSelect', TreeSelect);

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

@@ -0,0 +1,116 @@
+<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({
+    name: 'ArrCom',
+    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/components/Form/src/types/index.ts

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

src/utils/adapt.ts

@@ -11,7 +11,7 @@ export function adapt() {
   const adaptWidth = {} as AdaptWidth;
   if (clientWidth > 1000) {
     adaptWidth.elContainer = 20;
-    adaptWidth.labelWidth = 120;
+    adaptWidth.labelWidth = 180;
     adaptWidth.tableHeight = 600;
   } else {
     adaptWidth.elContainer = 22;

src/views/member/person/popup.vue

@@ -1,5 +1,5 @@
 <template>
-  <BasicModal v-bind="$attrs" @register="register" @ok="confirm" :title="title">
+  <BasicModal width="700px" v-bind="$attrs" @register="register" @ok="confirm" :title="title">
     <BasicForm @register="registerForm" :model="model" />
   </BasicModal>
 </template>