@lambo-design/variant-form 2.2.9-beta.0 → 2.2.9-beta.1

package/src/components/form-designer/form-widget/field-widget/user-select-widget.vue

@@ -0,0 +1,333 @@
+<template>
+  <form-item-wrapper :designer="designer" :field="field" :rules="rules" :design-state="designState"
+                     :parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList"
+                     :sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex" :sub-form-row-id="subFormRowId">
+    <el-input
+        v-model="fieldModel"
+        :placeholder="field.options.placeholder"
+        :size="field.options.size"
+        style="width: 100%">
+      <i slot="suffix" class="el-input__icon el-icon-s-grid" @click="handleClickCustomEvent"></i>
+    </el-input>
+
+    <el-dialog :title="field.options.label || '用户'" :visible.sync="dialogVisible">
+      <div class="user-info">
+        <div class="org-tree">
+          <div class="tree-content">
+            <div v-if="!treeData || treeData.length === 0">
+              暂无数据，请选择根组织！
+            </div>
+            <el-tree
+                v-if="dialogVisible && treeData.length > 0"
+                ref="orgTree"
+                lazy
+                :load="loadNode"
+                :data="treeData"
+                :props="defaultProps"
+                check-strictly
+                @node-click="handleNodeClick">
+            </el-tree>
+          </div>
+        </div>
+        <div class="user-table">
+          <el-form :inline="true" :model="form">
+            <el-form-item label="账号:">
+              <el-input v-model="form.userId" placeholder="按账号搜索" />
+            </el-form-item>
+            <el-form-item label="姓名:">
+              <el-input v-model="form.userName" placeholder="按姓名搜索" />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" icon="ios-search" @click="doSearch">查询</el-button>
+            </el-form-item>
+          </el-form>
+          <el-table
+              :data="tableData.rows"
+              border
+              :highlight-current-row="!field.options.allowMultiple"
+              @current-change="handleCurrentChange"
+              @selection-change="handleSelectionChange"
+              class="user-table-content">
+            <el-table-column
+                v-if="field.options.allowMultiple"
+                type="selection"
+                width="55">
+            </el-table-column>
+            <el-table-column
+                prop="userId"
+                label="用户账号"
+                width="180">
+            </el-table-column>
+            <el-table-column
+                prop="userName"
+                label="用户名称"
+                width="180">
+            </el-table-column>
+            <el-table-column
+                prop="organName"
+                label="组织名称"
+                width="180">
+            </el-table-column>
+            <el-table-column
+                prop="status"
+                label="账号状态">
+              <template slot-scope="scope">
+                <span style="margin-left: 10px">{{ formatStatus(scope.row.status) }}</span>
+              </template>v
+            </el-table-column>
+          </el-table>
+          <el-pagination
+              layout="prev, pager, next"
+              :total="tableData.total"
+              @current-change="pageChange"
+              class="pagination">
+          </el-pagination>
+        </div>
+      </div>
+      <template slot="footer">
+        <div class="dialog-footer">
+          <el-button type="primary" @click="onOk">确定</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </form-item-wrapper>
+</template>
+
+<script>
+  import FormItemWrapper from './form-item-wrapper'
+  import emitter from '@/utils/emitter'
+  import i18n, {translate} from "@/utils/i18n";
+  import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
+  import ajax from "@lambo-design/shared/utils/ajax";
+
+  export default {
+    name: "user-select-widget",
+    componentName: 'FieldWidget',  //必须固定为FieldWidget，用于接收父级组件的broadcast事件
+    mixins: [emitter, fieldMixin, i18n],
+    props: {
+      field: Object,
+      parentWidget: Object,
+      parentList: Array,
+      indexOfParentList: Number,
+      designer: Object,
+
+      designState: {
+        type: Boolean,
+        default: false
+      },
+
+      subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormColIndex: { /* 子表单组件列索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormRowId: { /* 子表单组件行Id，唯一id且不可变 */
+        type: String,
+        default: ''
+      },
+    },
+    components: {
+      FormItemWrapper,
+    },
+    inject: ['refList', 'formConfig', 'getDesignerConfig', 'globalOptionData', 'globalModel'],
+    data() {
+      return {
+        serverContext: '/dida-manage-server',
+        oldFieldValue: null, //field组件change之前的值
+        fieldModel: null,
+        selectedUser: '',
+        rules: [],
+        form: {
+          offset: 0,
+          organId: '',
+          userId: '',
+          userName: ''
+        },
+        tableData: {},
+        treeData: [],
+        dialogVisible: false,
+        defaultProps: {
+          children: 'children',
+          label: 'bizOrganName',
+          isLeaf: (data, node) => {
+            return data.isLeaf === 'true';
+          }
+        }
+      }
+    },
+    computed: {
+
+    },
+    beforeCreate() {
+      /* 这里不能访问方法和属性！！ */
+    },
+
+    created() {
+      /* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
+         需要在父组件created中初始化！！ */
+      this.initFieldModel()
+      this.registerToRefList()
+      this.initEventHandler()
+      this.buildFieldRules()
+
+      this.handleOnCreated()
+    },
+
+    mounted() {
+      this.handleOnMounted()
+    },
+
+    beforeDestroy() {
+      this.unregisterFromRefList()
+    },
+
+    methods: {
+
+      initData(){
+        if (this.field.options.rootOrgan) {
+          this.form.organId = this.field.options.rootOrgan
+          this.getOrgan()
+          this.getUsers()
+        }
+      },
+      getOrgan(){
+        const params = {
+          organId: this.field.options.rootOrgan,
+          organTreeType: this.field.options.organTreeType || '00',
+        }
+        ajax.get(this.serverContext + '/manage/organ/getOrganDetail', {params: params}).then((resp) => {
+          if (resp.data && (resp.data.code == 1 || resp.data.code == 200)){
+            this.treeData = [resp.data.data]
+          }
+        }).catch((err) => {
+          console.error(err)
+        });
+      },
+      getUsers(){
+        ajax.get(this.serverContext + '/manage/user/getUserByOrgan', {params: this.form}).then((resp) => {
+          if (resp.data && (resp.data.code == 1 || resp.data.code == 200)){
+            this.tableData = resp.data.data
+            this.form.offset = 0
+          }
+        }).catch((err) => {
+          console.error(err)
+        });
+      },
+      async loadNode(node, resolve) {
+        if (node.level === 0) {
+          const roots = this.treeData.filter(item => item.bizOrganId === this.field.options.rootOrgan)
+          return resolve(roots)
+        }
+        const params = {
+          parentId: node.data.bizOrganId,
+          organTreeType: this.field.options.organTreeType || '00',
+          manageUnitId: this.field.options.manageUnitId
+        }
+        ajax.get(this.serverContext + '/manage/organ/getOrgChildren', {params: params}).then((resp) => {
+          if (resp.data && (resp.data.code == 1 || resp.data.code == 200)){
+            resolve(resp.data.data)
+          }
+        }).catch((err) => {
+          console.error(err)
+        });
+      },
+      handleNodeClick(data) {
+        this.form.organId = data.bizOrganId
+        this.getUsers()
+      },
+      handleClickCustomEvent(event) {
+        this.dialogVisible = true
+      },
+      handleCurrentChange(row) {
+        if (this.field.options.allowMultiple) return
+        this.selectedUser = row.userId
+      },
+      handleSelectionChange(selection) {
+        if (!this.field.options.allowMultiple) return
+        this.selectedUser = selection.map(item => item.userName).join(',')
+      },
+      doSearch() {
+        this.getUsers()
+      },
+      pageChange(page) {
+        this.form.offset = (page - 1) * 10
+        this.getUsers()
+      },
+      formatStatus(status){
+        switch (status) {
+          case '01':
+            return '初始';
+          case '0':
+            return '初始化';
+          case '00':
+          case '1':
+            return '正常';
+          case '11':
+            return '锁定';
+          case '10':
+            return '删除';
+          case '2':
+            return '暂停';
+          case '3':
+            return '注销';
+          case '9':
+            return '未启用';
+          default:
+            return '';
+        }
+      },
+      onOk(){
+        this.fieldModel = this.selectedUser
+        this.dialogVisible = false
+      }
+    },
+    watch: {
+      'field.options': {
+        handler(newVal, oldVal) {
+          this.initData();
+        },
+        deep: true
+      }
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "../../../../styles/global.scss"; //* form-item-wrapper已引入，还需要重复引入吗？ *//
+  .user-info{
+    display: flex;
+    height: 70vh;
+    .org-tree {
+      width: 25%;
+      min-height: 450px;
+      border-right: 1px solid #dcdee2;
+      overflow-x: auto;
+      .tree-content {
+        overflow-y: auto;
+        min-height: 400px;
+        margin-top: 10px;
+      }
+    }
+
+    .user-table {
+      flex:1;
+      min-height: 400px;
+      //min-width: 800px;
+      width: 75%;
+      padding: 0 10px 10px;
+      margin: 10px;
+      &-content {
+        margin-top: 20px;
+        height: 80%;
+        overflow-y: auto;
+      }
+      .pagination{
+        float: right;
+        margin-top: 20px;
+      }
+    }
+  }
+</style>

package/src/components/form-designer/form-widget/index.vue

@@ -227,7 +227,7 @@
 
       .form-widget-list {
         min-height: calc(100vh - 56px - 68px);
-        padding: 3px;
+        padding: 20px;
       }
     }
 

package/src/components/form-designer/index.vue

@@ -12,8 +12,8 @@
   <el-container class="main-container full-height">
     <el-header class="main-header">
       <div class="float-left main-title">
-        <img src="../../assets/vform-logo.png" @click="openHome">
-        <span class="bold">VForm</span> {{i18nt('application.productTitle')}} <span class="version-span">Ver {{vFormVersion}}</span></div>
+<!--        <img src="../../assets/vform-logo.png" @click="openHome">-->
+        <span>滴搭</span> {{i18nt('application.productTitle')}} <span class="version-span">Ver {{vFormVersion}}</span></div>
       <div class="float-right external-link">
         <el-dropdown v-if="showLink('languageMenu')" :hide-timeout="2000" @command="handleLanguageChanged">
           <span class="el-dropdown-link">{{curLangName}}<i class="el-icon-arrow-down el-icon--right"></i></span>
@@ -106,20 +106,21 @@
         type: Object,
         default: () => {
           return {
-            languageMenu: true,  //是否显示语言切换菜单
-            externalLink: true,  //是否显示GitHub、文档等外部链接
-            formTemplates: true,  //是否显示表单模板
+            languageMenu: false,  //是否显示语言切换菜单
+            externalLink: false,  //是否显示GitHub、文档等外部链接
+            formTemplates: false,  //是否显示表单模板
             eventCollapse: true,  //是否显示组件事件属性折叠面板
-            widgetNameReadonly: false,  //禁止修改组件名称
+            widgetNameReadonly: true,  //禁止修改组件名称
 
             clearDesignerButton: true,  //是否显示清空设计器按钮
-            previewFormButton: true,  //是否显示预览表单按钮
+            previewFormButton: false,  //是否显示预览表单按钮
             importJsonButton: true,  //是否显示导入JSON按钮
             exportJsonButton: true,  //是否显示导出JSON器按钮
-            exportCodeButton: true,  //是否显示导出代码按钮
-            generateSFCButton: true,  //是否显示生成SFC按钮
+            exportCodeButton: false,  //是否显示导出代码按钮
+            generateSFCButton: false,  //是否显示生成SFC按钮
             toolbarMaxWidth: 420,  //设计器工具按钮栏最大宽度（单位像素）
             toolbarMinWidth: 300,  //设计器工具按钮栏最小宽度（单位像素）
+            designHeaderHeight: 0,  //设计器header高度（单位像素）
 
             presetCssCode: '',  //设计器预设CSS样式代码
 
@@ -169,10 +170,11 @@
     mounted() {
       this.initLocale()
 
-      this.scrollerHeight = window.innerHeight - 56 - 36 + 'px'
+      const designHeaderHeight = this.designerConfig.designHeaderHeight || 0
+      this.scrollerHeight = window.innerHeight - 56 - 36 - designHeaderHeight + 'px'
       addWindowResizeHandler(() => {
         this.$nextTick(() => {
-          this.scrollerHeight = window.innerHeight - 56 - 36 + 'px'
+          this.scrollerHeight = window.innerHeight - 56 - 36 - designHeaderHeight + 'px'
         })
       })
 
@@ -295,7 +297,7 @@
       getFormJson() {
         return {
           widgetList: deepClone(this.designer.widgetList),
-          formConfig: deepClone(this.designer.formConfig)
+          formConfig: deepClone(this.designer.formConfig),
         }
       },
 

package/src/components/form-designer/setting-panel/form-setting.vue

@@ -4,79 +4,78 @@
              class="setting-form" @submit.native.prevent>
       <el-collapse v-model="formActiveCollapseNames" class="setting-collapse">
         <el-collapse-item name="1" :title="i18nt('designer.setting.basicSetting')">
-          <el-form-item :label="i18nt('designer.setting.formSize')">
-            <el-select v-model="formConfig.size">
-              <el-option v-for="item in formSizes" :key="item.value" :label="item.label"
-                         :value="item.value">
-              </el-option>
-            </el-select>
-          </el-form-item>
+<!--          <el-form-item :label="i18nt('designer.setting.formSize')">-->
+<!--            <el-select v-model="formConfig.size">-->
+<!--              <el-option v-for="item in formSizes" :key="item.value" :label="item.label"-->
+<!--                         :value="item.value">-->
+<!--              </el-option>-->
+<!--            </el-select>-->
+<!--          </el-form-item>-->
           <el-form-item :label="i18nt('designer.setting.labelPosition')">
             <el-radio-group v-model="formConfig.labelPosition" class="radio-group-custom">
               <el-radio-button label="left">{{i18nt('designer.setting.leftPosition')}}</el-radio-button>
               <el-radio-button label="top">{{i18nt('designer.setting.topPosition')}}</el-radio-button>
+              <el-radio-button label="top">{{i18nt('designer.setting.rightPosition')}}</el-radio-button>
             </el-radio-group>
           </el-form-item>
-          <el-form-item :label="i18nt('designer.setting.labelAlign')">
-            <el-radio-group v-model="formConfig.labelAlign" class="radio-group-custom">
-              <el-radio-button label="label-left-align">{{i18nt('designer.setting.leftAlign')}}</el-radio-button>
-              <el-radio-button label="label-center-align">{{i18nt('designer.setting.centerAlign')}}</el-radio-button>
-              <el-radio-button label="label-right-align">{{i18nt('designer.setting.rightAlign')}}</el-radio-button>
-            </el-radio-group>
-          </el-form-item>
+<!--          <el-form-item :label="i18nt('designer.setting.labelAlign')">-->
+<!--            <el-radio-group v-model="formConfig.labelAlign" class="radio-group-custom">-->
+<!--              <el-radio-button label="label-left-align">{{i18nt('designer.setting.leftAlign')}}</el-radio-button>-->
+<!--              <el-radio-button label="label-center-align">{{i18nt('designer.setting.centerAlign')}}</el-radio-button>-->
+<!--              <el-radio-button label="label-right-align">{{i18nt('designer.setting.rightAlign')}}</el-radio-button>-->
+<!--            </el-radio-group>-->
+<!--          </el-form-item>-->
           <el-form-item :label="i18nt('designer.setting.labelWidth')">
             <el-input-number v-model="formConfig.labelWidth" :min="0" style="width: 100%"></el-input-number>
           </el-form-item>
-          <el-form-item :label="i18nt('designer.setting.formCss')">
-            <el-button type="info" icon="el-icon-edit" plain round @click="editFormCss">{{i18nt('designer.setting.addCss')}}</el-button>
-          </el-form-item>
+<!--          <el-form-item :label="i18nt('designer.setting.formCss')">-->
+<!--            <el-button type="info" icon="el-icon-edit" plain round @click="editFormCss">{{i18nt('designer.setting.addCss')}}</el-button>-->
+<!--          </el-form-item>-->
           <!-- -->
-          <el-form-item :label="i18nt('designer.setting.customClass')">
-            <el-select v-model="formConfig.customClass" multiple filterable allow-create
-                       default-first-option>
-              <el-option v-for="(item, idx) in cssClassList" :key="idx" :label="item" :value="item"></el-option>
-            </el-select>
-          </el-form-item>
+<!--          <el-form-item :label="i18nt('designer.setting.customClass')">-->
+<!--            <el-select v-model="formConfig.customClass" multiple filterable allow-create-->
+<!--                       default-first-option>-->
+<!--              <el-option v-for="(item, idx) in cssClassList" :key="idx" :label="item" :value="item"></el-option>-->
+<!--            </el-select>-->
+<!--          </el-form-item>-->
           <!-- -->
-          <el-form-item :label="i18nt('designer.setting.globalFunctions')">
-            <el-button type="info" icon="el-icon-edit" plain round @click="editGlobalFunctions">{{i18nt('designer.setting.addEventHandler')}}</el-button>
-          </el-form-item>
-          <el-form-item label-width="0">
-            <el-divider class="custom-divider">{{i18nt('designer.setting.formSFCSetting')}}</el-divider>
-          </el-form-item>
-          <el-form-item :label="i18nt('designer.setting.formModelName')">
-            <el-input type="text" v-model="formConfig.modelName"></el-input>
-          </el-form-item>
-          <el-form-item :label="i18nt('designer.setting.formRefName')">
-            <el-input type="text" v-model="formConfig.refName"></el-input>
-          </el-form-item>
-          <el-form-item :label="i18nt('designer.setting.formRulesName')">
-            <el-input type="text" v-model="formConfig.rulesName"></el-input>
-          </el-form-item>
+<!--          <el-form-item :label="i18nt('designer.setting.globalFunctions')">-->
+<!--            <el-button type="info" icon="el-icon-edit" plain round @click="editGlobalFunctions">{{i18nt('designer.setting.addEventHandler')}}</el-button>-->
+<!--          </el-form-item>-->
+<!--          <el-form-item label-width="0">-->
+<!--            <el-divider class="custom-divider">{{i18nt('designer.setting.formSFCSetting')}}</el-divider>-->
+<!--          </el-form-item>-->
+<!--          <el-form-item :label="i18nt('designer.setting.formModelName')">-->
+<!--            <el-input type="text" v-model="formConfig.modelName"></el-input>-->
+<!--          </el-form-item>-->
+<!--          <el-form-item :label="i18nt('designer.setting.formRefName')">-->
+<!--            <el-input type="text" v-model="formConfig.refName"></el-input>-->
+<!--          </el-form-item>-->
+<!--          <el-form-item :label="i18nt('designer.setting.formRulesName')">-->
+<!--            <el-input type="text" v-model="formConfig.rulesName"></el-input>-->
+<!--          </el-form-item>          -->
         </el-collapse-item>
 
-        <el-collapse-item v-if="showEventCollapse()" name="2" :title="i18nt('designer.setting.eventSetting')">
-          <el-form-item label="onFormCreated" label-width="150px">
-            <el-button type="info" icon="el-icon-edit" plain round @click="editFormEventHandler('onFormCreated')">
-              {{i18nt('designer.setting.addEventHandler')}}</el-button>
-          </el-form-item>
-          <el-form-item label="onFormMounted" label-width="150px">
-            <el-button type="info" icon="el-icon-edit" plain round @click="editFormEventHandler('onFormMounted')">
-              {{i18nt('designer.setting.addEventHandler')}}</el-button>
-          </el-form-item>
-          <!-- -->
-          <el-form-item label="onFormDataChange" label-width="150px">
-            <el-button type="info" icon="el-icon-edit" plain round @click="editFormEventHandler('onFormDataChange')">
-              {{i18nt('designer.setting.addEventHandler')}}</el-button>
-          </el-form-item>
-          <!-- -->
-          <!--
-          <el-form-item label="onFormValidate">
-            <el-button type="info" icon="el-icon-edit" plain round @click="editFormEventHandler('onFormValidate')">
-              {{i18nt('designer.setting.addEventHandler')}}</el-button>
-          </el-form-item>
-          -->
-        </el-collapse-item>
+<!--        <el-collapse-item v-if="showEventCollapse()" name="2" :title="i18nt('designer.setting.eventSetting')">-->
+<!--          <el-form-item label="onFormCreated" label-width="150px">-->
+<!--            <el-button type="info" icon="el-icon-edit" plain round @click="editFormEventHandler('onFormCreated')">-->
+<!--              {{i18nt('designer.setting.addEventHandler')}}</el-button>-->
+<!--          </el-form-item>-->
+<!--          <el-form-item label="onFormMounted" label-width="150px">-->
+<!--            <el-button type="info" icon="el-icon-edit" plain round @click="editFormEventHandler('onFormMounted')">-->
+<!--              {{i18nt('designer.setting.addEventHandler')}}</el-button>-->
+<!--          </el-form-item>-->
+<!--          &lt;!&ndash; &ndash;&gt;-->
+<!--          <el-form-item label="onFormDataChange" label-width="150px">-->
+<!--            <el-button type="info" icon="el-icon-edit" plain round @click="editFormEventHandler('onFormDataChange')">-->
+<!--              {{i18nt('designer.setting.addEventHandler')}}</el-button>-->
+<!--          </el-form-item>-->
+<!--          &lt;!&ndash; &ndash;&gt;-->
+<!--          <el-form-item label="onFormValidate">-->
+<!--            <el-button type="info" icon="el-icon-edit" plain round @click="editFormEventHandler('onFormValidate')">-->
+<!--              {{i18nt('designer.setting.addEventHandler')}}</el-button>-->
+<!--          </el-form-item>-->
+<!--        </el-collapse-item>-->
       </el-collapse>
     </el-form>
 

package/src/components/form-designer/setting-panel/index.vue

@@ -69,6 +69,7 @@
           <form-setting :designer="designer" :form-config="formConfig"></form-setting>
         </el-scrollbar>
       </el-tab-pane>
+
     </el-tabs>
 
     <el-dialog :title="i18nt('designer.setting.editWidgetEventHandler')" :visible.sync="showWidgetEventDialogFlag"
@@ -93,6 +94,7 @@
   import PropertyEditors from './property-editor/index'
   import FormSetting from './form-setting'
   import WidgetProperties from './propertyRegister'
+
   import {
     addWindowResizeHandler,
   } from "@/utils/util";

package/src/components/form-designer/setting-panel/property-editor/allowMultiple-editor.vue

@@ -0,0 +1,24 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.allowMultiple')">
+    <el-switch v-model="optionModel.allowMultiple"></el-switch>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import propertyMixin from "@/components/form-designer/setting-panel/property-editor/propertyMixin"
+
+  export default {
+    name: "allowMultiple-editor",
+    mixins: [i18n, propertyMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>

package/src/components/form-designer/setting-panel/property-editor/border-editor.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-form-item :label="i18nt('designer.setting.border')">
+  <el-form-item :label="i18nt('designer.setting.border')" v-if="!optionModel.relationType || optionModel.relationType=='list'">
     <el-switch v-model="optionModel.border"></el-switch>
   </el-form-item>
 </template>

package/src/components/form-designer/setting-panel/property-editor/buttonStyle-editor.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-form-item :label="i18nt('designer.setting.buttonStyle')">
+  <el-form-item :label="i18nt('designer.setting.buttonStyle')" v-if="!optionModel.relationType || optionModel.relationType=='list'">
     <el-switch v-model="optionModel.buttonStyle"></el-switch>
   </el-form-item>
 </template>

package/src/components/form-designer/setting-panel/property-editor/clearable-editor.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-form-item :label="i18nt('designer.setting.clearable')">
+  <el-form-item :label="i18nt('designer.setting.clearable')" v-if="!optionModel.relationType || optionModel.relationType=='select' || optionModel.relationType=='help'">
     <el-switch v-model="optionModel.clearable"></el-switch>
   </el-form-item>
 </template>