feat：引入自定义组件 JAddInput 主要用于数据流转其他属性 客户端属性 Headers

@@ -27,6 +27,8 @@ import { BasicUpload } from '/@/components/Upload';
 import { StrengthMeter } from '/@/components/StrengthMeter';
 import { StrengthMeter } from '/@/components/StrengthMeter';
 import { IconPicker } from '/@/components/Icon';
 import { IconPicker } from '/@/components/Icon';
 import { CountdownInput } from '/@/components/CountDown';
 import { CountdownInput } from '/@/components/CountDown';
+//自定义组件
+import JAddInput from './jeecg/components/JAddInput.vue';
 
 
 const componentMap = new Map<ComponentType, Component>();
 const componentMap = new Map<ComponentType, Component>();
 
 
@@ -61,6 +63,8 @@ componentMap.set('IconPicker', IconPicker);
 componentMap.set('InputCountDown', CountdownInput);
 componentMap.set('InputCountDown', CountdownInput);
 
 
 componentMap.set('Upload', BasicUpload);
 componentMap.set('Upload', BasicUpload);
+//注册自定义组件
+componentMap.set('JAddInput', JAddInput);
 
 
 export function add(compName: ComponentType, component: Component) {
 export function add(compName: ComponentType, component: Component) {
   componentMap.set(compName, component);
   componentMap.set(compName, component);

+<template>
+  <div v-for="(param, index) in dynamicInput.params" :key="index" style="display: flex">
+    <a-input
+      placeholder="请输入参数key"
+      v-model:value="param.label"
+      style="width: 30%; margin-bottom: 5px"
+      @input="emitChange"
+    />
+    <a-input
+      placeholder="请输入参数value"
+      v-model:value="param.value"
+      style="width: 30%; margin: 0 0 5px 5px"
+      @input="emitChange"
+    />
+    <MinusCircleOutlined
+      v-if="dynamicInput.params.length > min"
+      class="dynamic-delete-button"
+      @click="remove(param)"
+      style="width: 50px"
+    />
+  </div>
+  <div>
+    <a-button type="dashed" style="width: 60%" @click="add">
+      <PlusOutlined />
+      新增
+    </a-button>
+  </div>
+</template>
+<script lang="ts">
+  import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons-vue';
+  import { defineComponent, reactive, UnwrapRef, watchEffect } from 'vue';
+  import { propTypes } from '/@/utils/propTypes';
+  import { isEmpty } from '/@/utils/is';
+
+  interface Params {
+    label: string;
+    value: string;
+  }
+
+  export default defineComponent({
+    name: 'JAddInput',
+    components: {
+      MinusCircleOutlined,
+      PlusOutlined,
+    },
+    //--------------不继承Antd Design Vue Input的所有属性 否则控制台报大片警告--------------
+    inheritAttrs: false,
+    props: {
+      value: propTypes.string.def(''),
+      //自定义删除按钮多少才会显示
+      min: propTypes.integer.def(1),
+    },
+    emits: ['change', 'update:value'],
+    setup(props, { emit }) {
+      //input动态数据
+      const dynamicInput: UnwrapRef<{ params: Params[] }> = reactive({ params: [] });
+      //删除Input
+      const remove = (item: Params) => {
+        let index = dynamicInput.params.indexOf(item);
+        if (index !== -1) {
+          dynamicInput.params.splice(index, 1);
+        }
+        emitChange();
+      };
+      //新增Input
+      const add = () => {
+        dynamicInput.params.push({
+          label: '',
+          value: '',
+        });
+        emitChange();
+      };
+
+      //监听传入数据value
+      watchEffect(() => {
+        initVal();
+      });
+
+      /**
+       * 初始化数值
+       */
+      function initVal() {
+        dynamicInput.params = [];
+        if (props.value && props.value.indexOf('{') == 0) {
+          let jsonObj = JSON.parse(props.value);
+          Object.keys(jsonObj).forEach((key) => {
+            dynamicInput.params.push({ label: key, value: jsonObj[key] });
+          });
+        }
+      }
+      /**
+       * 数值改变
+       */
+      function emitChange() {
+        let obj = {};
+        if (dynamicInput.params.length > 0) {
+          dynamicInput.params.forEach((item) => {
+            obj[item['label']] = item['value'];
+          });
+        }
+        emit('change', isEmpty(obj) ? '' : JSON.stringify(obj));
+        emit('update:value', isEmpty(obj) ? '' : JSON.stringify(obj));
+      }
+
+      return {
+        dynamicInput,
+        emitChange,
+        remove,
+        add,
+      };
+    },
+  });
+</script>
+<style scoped>
+  .dynamic-delete-button {
+    cursor: pointer;
+    position: relative;
+    top: 4px;
+    font-size: 24px;
+    color: #999;
+    transition: all 0.3s;
+  }
+
+  .dynamic-delete-button:hover {
+    color: #777;
+  }
+
+  .dynamic-delete-button[disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+</style>

@@ -109,4 +109,5 @@ export type ComponentType =
   | 'IconPicker'
   | 'IconPicker'
   | 'Render'
   | 'Render'
   | 'Slider'
   | 'Slider'
+  | 'JAddInput'
   | 'Rate';
   | 'Rate';