Merge pull request #32 from Liberty-liu/feat/exportForm

Feat/added an "other" option
Liberty-liu · Apr 22, 2024 · 3aca8ee · 3aca8ee
2 parents d9eefdd + cdc6702
commit 3aca8ee
Show file tree

Hide file tree

Showing 26 changed files with 336 additions and 70 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "everright-formeditor",
-  "version": "1.2.3",
+  "version": "1.3.0-beta.2",
   "description": "🦮 Powerful lowcode|vue form editor,generator,designer,builder library. It provides an easy way to create custom forms. The project is extensible, easy to use and configure, and provides many commonly used form components and functions(vue可视化低代码表单设计器、表单编辑器、element-plus vant表单设计)",
   "files": [
     "dist",

diff --git a/packages/formEditor/components/FormTypes/Checkbox/mobile.vue b/packages/formEditor/components/FormTypes/Checkbox/mobile.vue
@@ -1,6 +1,7 @@
 <script>
 import hooks from '@ER/hooks'
 import { ref } from 'vue'
+import Other from '../Other/mobile.vue'
 export default {
   name: 'er-checkbox',
   inheritAttrs: false,
@@ -19,15 +20,18 @@ const element = ref()
     ref="element"
   >
     <template #input>
-      <el-checkbox-group
-        @change="element.resetValidation()"
-        :class="[ns.e('radioGroup'), data.options.displayStyle === 'block' && ns.e('blockLayout')]"
-        v-model="data.options.defaultValue"
-        v-bind="params">
-        <el-checkbox v-for="item in params.options" :key="item.value" :label="item.value">
-          {{ item.label }}
-        </el-checkbox>
-      </el-checkbox-group>
+      <div style="width: 100%;">
+        <el-checkbox-group
+          @change="element.resetValidation()"
+          :class="[ns.e('radioGroup'), data.options.displayStyle === 'block' && ns.e('blockLayout')]"
+          v-model="data.options.defaultValue"
+          v-bind="params">
+          <el-checkbox v-for="item in params.options" :key="item.value" :label="item.value">
+            {{ item.label }}
+          </el-checkbox>
+        </el-checkbox-group>
+        <Other :data="data" :params="params"/>
+      </div>
     </template>
   </van-field>
 </template>

diff --git a/packages/formEditor/components/FormTypes/Checkbox/pc.vue b/packages/formEditor/components/FormTypes/Checkbox/pc.vue
@@ -1,5 +1,6 @@
 <script>
 import hooks from '@ER/hooks'
+import Other from '../Other/pc.vue'
 export default {
   name: 'er-checkbox',
   inheritAttrs: false,
@@ -19,6 +20,7 @@ const ns = hooks.useNamespace('FormTypesCheckbox')
       {{ item.label }}
     </el-checkbox>
   </el-checkbox-group>
+  <Other :data="data" :params="params"/>
 </template>
 
 <style scoped>

diff --git a/packages/formEditor/components/FormTypes/Other/mobile.vue b/packages/formEditor/components/FormTypes/Other/mobile.vue
@@ -0,0 +1,53 @@
+<script>
+import hooks from '@ER/hooks'
+import { ref, watch, inject, computed } from 'vue'
+import _ from 'lodash-es'
+export default {
+  name: 'er-other',
+  inheritAttrs: false,
+  customOptions: {}
+}
+</script>
+<script setup>
+const ER = inject('Everright')
+const ns = hooks.useNamespace('FormTypesOther_mobile')
+const props = defineProps(['data', 'params'])
+const isShow = ref(false)
+const key = props.data.key + '_other'
+const value = computed({
+  set (newVal) {
+    ER.state.othersFiles[key] = newVal
+  },
+  get () {
+    return ER.state.othersFiles[key] || ''
+  }
+})
+watch(() => props.data.options.defaultValue, (newVal) => {
+  isShow.value = (_.isArray(newVal) ? newVal : [newVal]).includes('other')
+}, {
+  immediate: true
+})
+</script>
+
+<template>
+  <div
+    v-if="isShow"
+    :class="[ns.b()]">
+    <van-field
+      v-model="value"
+      :clearable="true"
+      type="textarea"
+      :placeholder="data.options.otherPlaceholder"
+    />
+  </div>
+<!--<div-->
+<!--  v-if="isShow"-->
+<!--  :class="[ns.b()]">-->
+<!--  <el-input-->
+<!--    v-model="data.options.defaultValue"-->
+<!--    type="textarea"-->
+<!--    placeholder="Please input"-->
+<!--    :rows="2"-->
+<!--    v-bind="params"/>-->
+<!--</div>-->
+</template>
diff --git a/packages/formEditor/components/FormTypes/Other/pc.vue b/packages/formEditor/components/FormTypes/Other/pc.vue
@@ -0,0 +1,42 @@
+<script>
+import hooks from '@ER/hooks'
+import { ref, watch, inject, computed } from 'vue'
+import _ from 'lodash-es'
+export default {
+  name: 'er-other',
+  inheritAttrs: false,
+  customOptions: {}
+}
+</script>
+<script setup>
+const ER = inject('Everright')
+const ns = hooks.useNamespace('FormTypesOther_pc')
+const props = defineProps(['data', 'params'])
+const key = props.data.key + '_other'
+const value = computed({
+  set (newVal) {
+    ER.state.othersFiles[key] = newVal
+  },
+  get () {
+    return ER.state.othersFiles[key] || ''
+  }
+})
+const isShow = ref(false)
+watch(() => props.data.options.defaultValue, (newVal) => {
+  isShow.value = (_.isArray(newVal) ? newVal : [newVal]).includes('other')
+}, {
+  immediate: true
+})
+</script>
+
+<template>
+<div
+  v-if="isShow"
+  :class="[ns.b()]">
+  <el-input
+    v-model="value"
+    type="textarea"
+    :placeholder="data.options.otherPlaceholder"
+    :rows="2"/>
+</div>
+</template>
diff --git a/packages/formEditor/components/FormTypes/Radio/mobile.vue b/packages/formEditor/components/FormTypes/Radio/mobile.vue
@@ -1,6 +1,7 @@
 <script>
 import hooks from '@ER/hooks'
 import { ref } from 'vue'
+import Other from '../Other/mobile.vue'
 export default {
   name: 'er-radio',
   inheritAttrs: false,
@@ -19,15 +20,18 @@ const element = ref()
     ref="element"
   >
     <template #input>
-      <el-radio-group
-        @change="element.resetValidation()"
-        v-model="data.options.defaultValue"
-        :class="[ns.e('radioGroup'), data.options.displayStyle === 'block' && ns.e('blockLayout')]"
-        v-bind="params">
-        <el-radio v-for="item in params.options" :key="item.value" :label="item.value">
-          {{ item.label }}
-        </el-radio>
-      </el-radio-group>
+      <div style="width: 100%;">
+        <el-radio-group
+          @change="element.resetValidation()"
+          v-model="data.options.defaultValue"
+          :class="[ns.e('radioGroup'), data.options.displayStyle === 'block' && ns.e('blockLayout')]"
+          v-bind="params">
+          <el-radio v-for="item in params.options" :key="item.value" :label="item.value">
+            {{ item.label }}
+          </el-radio>
+        </el-radio-group>
+        <Other :data="data" :params="params"/>
+      </div>
     </template>
   </van-field>
 </template>

diff --git a/packages/formEditor/components/FormTypes/Radio/pc.vue b/packages/formEditor/components/FormTypes/Radio/pc.vue
@@ -1,5 +1,6 @@
 <script>
 import hooks from '@ER/hooks'
+import Other from '../Other/pc.vue'
 export default {
   name: 'er-radio',
   inheritAttrs: false,
@@ -23,6 +24,7 @@ const {
       {{ item.label }}
     </el-radio>
   </el-radio-group>
+  <Other :data="data" :params="params"/>
 </template>
 
 <style scoped>

diff --git a/packages/formEditor/components/FormTypes/Select/mobile.vue b/packages/formEditor/components/FormTypes/Select/mobile.vue
@@ -1,6 +1,7 @@
 <script>
 import { ref } from 'vue'
 import hooks from '@ER/hooks'
+import Other from '../Other/mobile.vue'
 export default {
   name: 'er-select',
   inheritAttrs: false,
@@ -23,18 +24,21 @@ const onClear = () => {
     ref="element"
   >
     <template #input>
-      <el-select
-        @change="element.resetValidation()"
-        v-model="data.options.defaultValue"
-        v-bind="params"
-      >
-        <el-option
-          v-for="item in params.options"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-        />
-      </el-select>
+      <div style="width: 100%;">
+        <el-select
+          @change="element.resetValidation()"
+          v-model="data.options.defaultValue"
+          v-bind="params"
+        >
+          <el-option
+            v-for="item in params.options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+        <Other :data="data" :params="params"/>
+      </div>
     </template>
     <template v-if="data.options.defaultValue.length && params.clearable" #button>
       <van-icon @click.stop="onClear" name="clear" />

diff --git a/packages/formEditor/components/FormTypes/Select/pc.vue b/packages/formEditor/components/FormTypes/Select/pc.vue
@@ -1,5 +1,6 @@
 <script>
 import hooks from '@ER/hooks'
+import Other from '../Other/pc.vue'
 export default {
   name: 'er-select',
   inheritAttrs: false,
@@ -26,6 +27,7 @@ const ns = hooks.useNamespace('FormTypesSelect_pc')
       :value="item.value"
     />
   </el-select>
+  <Other :data="data" :params="params"/>
 </template>
 
 <style scoped>

diff --git a/packages/formEditor/components/Layout/CollapseLayout.jsx b/packages/formEditor/components/Layout/CollapseLayout.jsx
@@ -1,4 +1,4 @@
-import { defineComponent, resolveComponent, watch, useAttrs, defineAsyncComponent } from 'vue'
+import { defineComponent, resolveComponent, watch, useAttrs, defineAsyncComponent, inject } from 'vue'
 import Selection from '@ER/formEditor/components/Selection/selectElement.jsx'
 import LayoutDragGable from './DragGable.jsx'
 import hooks from '@ER/hooks'
@@ -11,6 +11,7 @@ export default defineComponent({
     parent: Array
   },
   setup (props) {
+    const ER = inject('Everright')
     const ns = hooks.useNamespace('CollapseLayout')
     if (!props.data.options.defaultValue.length) {
       props.data.options.defaultValue.push(props.data.columns[0].id)
@@ -24,7 +25,7 @@ export default defineComponent({
                 return (
                   <el-collapse-item title={element.label} name={element.id}>
                     <Selection
-                      class={[ns.e('area')]}
+                      class={[ER.state.mode === 'edit' ? ns.e('area') : '']}
                       data={element} parent={props.data}
                     >
                       <LayoutDragGable

diff --git a/packages/formEditor/components/Layout/TabsLayout.jsx b/packages/formEditor/components/Layout/TabsLayout.jsx
@@ -12,6 +12,10 @@ export default defineComponent({
   },
   setup (props) {
     const ns = hooks.useNamespace('TabsLayout')
+    if (!props.data.options.defaultValue) {
+      // eslint-disable-next-line vue/no-setup-props-destructure
+      props.data.options.defaultValue = props.data.columns[0].id
+    }
     return () => {
       return (
         <Selection {...useAttrs()} data={props.data} parent={props.parent} hasCopy hasDel hasDrag hasWidthScale>
@@ -21,7 +25,7 @@ export default defineComponent({
                 return (
                   <Selection
                     class={[ns.e('area')]}
-                    tag='el-tab-pane' label={element.label} name={element.value} data={element} parent={props.data}
+                    tag='el-tab-pane' label={element.label} name={element.id} data={element} parent={props.data}
                   >
                     <LayoutDragGable
                       data-layout-type={'tabs-col'}

diff --git a/packages/formEditor/components/Panels/Canves/index.jsx b/packages/formEditor/components/Panels/Canves/index.jsx
@@ -17,7 +17,6 @@ export default defineComponent({
       isEditModel,
       isPc
     } = hooks.useTarget()
-    const form = ref('')
     const handleClick = (e) => {
       setSelection('root')
     }
@@ -27,12 +26,12 @@ export default defineComponent({
       const Layout = (<LayoutDragGable data-layout-type={'root'} class={[unref(isEditModel) && ns.e('wrap')]} data={state.store} parent={state.store} isRoot></LayoutDragGable>)
       return (
         <div>
-          <TagComponent ref={form} onClick={unref(isEditModel) && handleClick} {...typeProps.value}>
+          <TagComponent ref={ER.form} onClick={unref(isEditModel) && handleClick} {...typeProps.value}>
             {
               unref(isEditModel) ? Layout : Layout
             }
           </TagComponent>
-          {!unref(isEditModel) && !_.isEmpty(state.config) && ER.props.isShowCompleteButton && <CompleteButton handle={form}/>}
+          {!unref(isEditModel) && !_.isEmpty(state.config) && ER.props.isShowCompleteButton && <CompleteButton handle={ER.form}/>}
         </div>
       )
     }

diff --git a/packages/formEditor/components/Panels/Config/components/DataComponent1.jsx b/packages/formEditor/components/Panels/Config/components/DataComponent1.jsx
@@ -120,7 +120,7 @@ export default defineComponent({
             </td>
             <td>
               <el-form-item prop={`${index}.value`} rules={{ validator }}>
-                <el-input clearable vModel={element.value}></el-input>
+                <el-input disabled={element.value === 'other'} clearable vModel={element.value}></el-input>
               </el-form-item>
             </td>
             <td>
@@ -147,6 +147,11 @@ export default defineComponent({
           })
           break
         case 2:
+          this.data.push({
+            label: 'Other',
+            value: 'other'
+          })
+          // utils.generateOptions(1)
           // target.value.options.defaultValue = isMultiple.value ? [] : ''
           break
       }
@@ -200,6 +205,7 @@ export default defineComponent({
           </el-form>
         </el-scrollbar>
         <div class={ns.e('button')}>
+          <el-button disabled={_.findIndex(this.data, { value: 'other' }) !== -1} onClick={() => handleAction(2)}>{t('er.config.dataComponent1.addOther')}</el-button>
           <el-button onClick={() => handleAction(1)}>{t('er.config.dataComponent1.add')}</el-button>
         </div>
       </div>