From 9e74a496442209fd99e99d9ae8ad709cfc905e6c Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Tue, 11 Apr 2023 18:28:42 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BF=AE=E6=94=B9=E6=94=AF=E6=8C=81=20?=
 =?UTF-8?q?list=20field=20form?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AutoDataForm/utils.js    |  5 ++
 src/components/FormFields/ListField.vue | 97 +++++++++++++++++++++++++
 2 files changed, 102 insertions(+)
 create mode 100644 src/components/FormFields/ListField.vue

diff --git a/src/components/AutoDataForm/utils.js b/src/components/AutoDataForm/utils.js
index 172cc33e1..4da0c2854 100644
--- a/src/components/AutoDataForm/utils.js
+++ b/src/components/AutoDataForm/utils.js
@@ -7,6 +7,7 @@ import rules from '@/components/DataForm/rules'
 import BasicTree from '@/components/FormFields/BasicTree'
 import JsonEditor from '@/components/FormFields/JsonEditor'
 import { assignIfNot } from '@/utils/common'
+import ListField from '@/components/FormFields/ListField.vue'
 
 export class FormFieldGenerator {
   constructor(emit) {
@@ -66,6 +67,10 @@ export class FormFieldGenerator {
         type = ''
         field.component = Switcher
         break
+      case 'list':
+        type = 'input'
+        field.component = ListField
+        break
       case 'object_related_field':
         field.component = ObjectSelect2
         break
diff --git a/src/components/FormFields/ListField.vue b/src/components/FormFields/ListField.vue
new file mode 100644
index 000000000..243873b19
--- /dev/null
+++ b/src/components/FormFields/ListField.vue
@@ -0,0 +1,97 @@
+<template>
+  <div>
+    <div v-for="(item, index) in value || []" :key="index" class="value-item">
+      <el-input :value="item" class="input-z" @input="updateValue($event, index)" />
+      <div class="input-button">
+        <el-button
+          :disabled="disableDelete(item)"
+          icon="el-icon-minus"
+          size="mini"
+          style="flex-shrink: 0;"
+          type="danger"
+          @click="handleDelete(index)"
+        />
+        <el-button
+          :disabled="disableAdd(item, index)"
+          icon="el-icon-plus"
+          size="mini"
+          style="flex-shrink: 0;"
+          type="primary"
+          @click="handleAdd(index)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ListField',
+  props: {
+    value: {
+      type: [Array, String],
+      default: () => ([])
+    }
+  },
+  data() {
+    return {
+    }
+  },
+  computed: {
+  },
+  mounted() {
+    const value = this.value
+    if (!value || !Array.isArray(value) || value.length === 0) {
+      this.$emit('input', [''])
+    }
+  },
+  methods: {
+    updateValue(v, index) {
+      const value = this.value
+      value[index] = v
+      this.$emit('input', value)
+    },
+    disableDelete() {
+      return false
+    },
+    disableAdd() {
+      return false
+    },
+    handleAdd(index) {
+      const value = this.value
+      value.splice(index + 1, 0, '')
+      this.$emit('input', value)
+    },
+    handleDelete(index) {
+      const value = this.value
+      value.splice(index, 1)
+      this.$emit('input', value)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+.input-z {
+  flex-shrink: 1;
+  width: calc(100% - 80px) !important;
+}
+
+.value-item {
+  display: flex;
+  margin: 4px 0;
+}
+
+.input-button {
+  display: flex;
+  margin-left: 20px;
+  margin-top: 4px;
+}
+
+.input-button ::v-deep .el-button.el-button--mini {
+  height: 25px;
+  padding: 5px;
+}
+
+</style>