docs: demo

Liberty-liu · May 20, 2023 · 034342d · 034342d
1 parent 6f59fcd
commit 034342d
Show file tree

Hide file tree

Showing 8 changed files with 87 additions and 16 deletions.
diff --git a/README.md b/README.md
@@ -30,6 +30,7 @@ Everright-formEditor is a free and open source javascript visual low-code editor
 * 5.Fields and layout separated
 * 6.Fields and layout not separated
 * 7.The editor, previewer, and configuration panel can all be used separately
+* 8.Logical controller (Visible, Required, Read only)
 
 ## Docs
 
@@ -59,6 +60,10 @@ Everright-formEditor is a free and open source javascript visual low-code editor
 
 ![image](https://user-images.githubusercontent.com/21301475/231448710-564533a9-62df-4233-a937-41a50ae24056.png)
 
+### Logical controller
+
+![Logical controlle](https://github.com/Liberty-liu/Everright-formEditor/assets/21301475/0c7ab28d-c57f-47fa-aedc-a48e5939d6af)
+
 ## Fields adaptation
 
 | Type  | Pc | Mobile |
@@ -95,3 +100,32 @@ Everright-formEditor is a free and open source javascript visual low-code editor
 | Tabs  |  :white_check_mark: | :white_check_mark:  |
 | Collapse  | :white_check_mark:  | :white_check_mark:  |
 | Divider  | :white_check_mark:  | :white_check_mark:  |
+
+
+## Logical controller operator
+
+| Field  | Equal | Not equal | Contains | Not contain | Greater than | Greater than or equal to | Less than | Less than or equal to | Between | Equal to one of | Not equal to one of | Belong to one of | Not belong to one of| Empty | Not empty |
+| :-------------:| :-------------: |:-------------: | :-------------: | :-------------: | :-------------: | :-------------: | :-------------: |:-------------:| :-------------:| :-------------: | :-------------: | :-------------: | :-------------: | :-------------: | :-------------: |
+| Input  |  :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | | | | | | | | | :white_check_mark: | :white_check_mark: | 
+| Email |  :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | | | | | | | | | :white_check_mark: | :white_check_mark: | 
+| ID number|  :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | | | | | | | | | :white_check_mark: | :white_check_mark: | 
+| Cellphone  |  :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | | | | | | | | | :white_check_mark: | :white_check_mark: | 
+| URL |  :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | | | | | | | | | :white_check_mark: | :white_check_mark: | 
+| Textarea |  :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | | | | | | | | | :white_check_mark: | :white_check_mark: | 
+| Number  |  :white_check_mark: | :white_check_mark: | | | :white_check_mark:| :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | | | | :white_check_mark:| :white_check_mark: | 
+| Radio |  :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | | | | | | | | | :white_check_mark: | :white_check_mark: | 
+| Checkbox |  :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | | | | | | | | | :white_check_mark: | :white_check_mark: | 
+| Select |  :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | | | | | | | | | :white_check_mark: | :white_check_mark: | 
+| Time  |  :white_check_mark: | :white_check_mark: | | | :white_check_mark:| :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | | | | :white_check_mark:| :white_check_mark: | 
+| Date (date) |  :white_check_mark: | :white_check_mark: | | | :white_check_mark:| :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | | | | :white_check_mark:| :white_check_mark: | 
+| Date (datetime) |  :white_check_mark: | :white_check_mark: | | | :white_check_mark:| :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | | | | :white_check_mark:| :white_check_mark: | 
+| Date (dates) |  :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | | | | | | | | | :white_check_mark: | :white_check_mark: | 
+| Date (daterange) |  :white_check_mark: | :white_check_mark: |  |  | | | | | | | | | | :white_check_mark: | :white_check_mark: | 
+| Rate  |  :white_check_mark: | :white_check_mark: | | | :white_check_mark:| :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | | | | :white_check_mark:| :white_check_mark: | 
+| Switch  |  :white_check_mark:  |  :white_check_mark:  | | | | | | | | | | | | | | 
+| Slider |  :white_check_mark: | :white_check_mark: | | | :white_check_mark:| :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | | | | | | 
+| Html  |  :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | | | | | | | | | :white_check_mark: | :white_check_mark: | 
+| Cascader  | :white_check_mark: | :white_check_mark:| | | | | | | | | | | | :white_check_mark: | :white_check_mark: | 
+| File  |  | | | | | | | | | | | | |:white_check_mark: |:white_check_mark: | 
+| Signature  |  | | | | | | | | | | | | |:white_check_mark: |:white_check_mark: | 
+| Region  |  | | | | | | | | |:white_check_mark: | :white_check_mark:| :white_check_mark:| :white_check_mark:| :white_check_mark:| :white_check_mark:| 
diff --git a/README.zh-cn.md b/README.zh-cn.md
@@ -30,6 +30,7 @@ Everright-formEditor是一个免费开源的javascript可视化低代码编辑
 * 5.字段与布局分离
 * 6.字段与布局不分离
 * 7.编辑器、预览器和配置面板都可以单独使用
+* 8.逻辑控制器(显隐、必填、只读)
 
 ## 文档
 
@@ -63,6 +64,11 @@ Everright-formEditor是一个免费开源的javascript可视化低代码编辑
 
 ![image](https://user-images.githubusercontent.com/21301475/231448710-564533a9-62df-4233-a937-41a50ae24056.png)
 
+### 逻辑控制器
+
+![Logical controlle](https://github.com/Liberty-liu/Everright-formEditor/assets/21301475/0c7ab28d-c57f-47fa-aedc-a48e5939d6af)
+
+
 ## 字段适配
 
 | Field  | Pc | Mobile |
@@ -99,3 +105,33 @@ Everright-formEditor是一个免费开源的javascript可视化低代码编辑
 | Tabs  |  :white_check_mark: | :white_check_mark:  |
 | Collapse  | :white_check_mark:  | :white_check_mark:  |
 | Divider  | :white_check_mark:  | :white_check_mark:  |
+
+
+## 逻辑控制器操作符
+
+| Field  | 等于 | 不等于 | 包含 | 不包含 | 大于 | 大于等于 | 小于 | 小于等于 | 区间 | 等于其中之一 | 不等于其中之一 | 属于其中之一 | 不属于其中之一| 为空 | 不为空 |
+| :-------------:| :-------------: |:-------------: | :-------------: | :-------------: | :-------------: | :-------------: | :-------------: |:-------------:| :-------------:| :-------------: | :-------------: | :-------------: | :-------------: | :-------------: | :-------------: |
+| Input  |  :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | | | | | | | | | :white_check_mark: | :white_check_mark: |
+| Email |  :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | | | | | | | | | :white_check_mark: | :white_check_mark: |
+| ID number|  :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | | | | | | | | | :white_check_mark: | :white_check_mark: |
+| Cellphone  |  :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | | | | | | | | | :white_check_mark: | :white_check_mark: |
+| URL |  :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | | | | | | | | | :white_check_mark: | :white_check_mark: |
+| Textarea |  :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | | | | | | | | | :white_check_mark: | :white_check_mark: |
+| Number  |  :white_check_mark: | :white_check_mark: | | | :white_check_mark:| :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | | | | :white_check_mark:| :white_check_mark: |
+| Radio |  :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | | | | | | | | | :white_check_mark: | :white_check_mark: |
+| Checkbox |  :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | | | | | | | | | :white_check_mark: | :white_check_mark: |
+| Select |  :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | | | | | | | | | :white_check_mark: | :white_check_mark: |
+| Time  |  :white_check_mark: | :white_check_mark: | | | :white_check_mark:| :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | | | | :white_check_mark:| :white_check_mark: |
+| Date (date) |  :white_check_mark: | :white_check_mark: | | | :white_check_mark:| :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | | | | :white_check_mark:| :white_check_mark: |
+| Date (datetime) |  :white_check_mark: | :white_check_mark: | | | :white_check_mark:| :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | | | | :white_check_mark:| :white_check_mark: |
+| Date (dates) |  :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | | | | | | | | | :white_check_mark: | :white_check_mark: |
+| Date (daterange) |  :white_check_mark: | :white_check_mark: |  |  | | | | | | | | | | :white_check_mark: | :white_check_mark: |
+| Rate  |  :white_check_mark: | :white_check_mark: | | | :white_check_mark:| :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | | | | :white_check_mark:| :white_check_mark: |
+| Switch  |  :white_check_mark:  |  :white_check_mark:  | | | | | | | | | | | | | |
+| Slider |  :white_check_mark: | :white_check_mark: | | | :white_check_mark:| :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | | | | | |
+| Html  |  :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | | | | | | | | | | :white_check_mark: | :white_check_mark: |
+| Cascader  | :white_check_mark: | :white_check_mark:| | | | | | | | | | | | :white_check_mark: | :white_check_mark: |
+| File  |  | | | | | | | | | | | | |:white_check_mark: |:white_check_mark: |
+| Signature  |  | | | | | | | | | | | | |:white_check_mark: |:white_check_mark: |
+| Region  |  | | | | | | | | |:white_check_mark: | :white_check_mark:| :white_check_mark:| :white_check_mark:| :white_check_mark:| :white_check_mark:| 
+
diff --git a/examples/App.vue b/examples/App.vue
@@ -10,9 +10,9 @@ const handle = (val) => {
 }
 </script>
 <template>
-  <el-radio-group v-if="$route.name !== 'objEdit'" v-model="lang" @change="handle">
-    <el-radio label="zh-cn" size="large">中文</el-radio>
-    <el-radio label="en" size="large">English</el-radio>
-  </el-radio-group>
+<!--  <el-radio-group v-if="$route.name !== 'objEdit'" v-model="lang" @change="handle">-->
+<!--    <el-radio label="zh-cn" size="large">中文</el-radio>-->
+<!--    <el-radio label="en" size="large">English</el-radio>-->
+<!--  </el-radio-group>-->
   <router-view></router-view>
 </template>
diff --git a/examples/views/formEditorConfig.vue b/examples/views/formEditorConfig.vue
@@ -17,7 +17,16 @@ const all = ref([])
 watch(lang, (newLang) => {
   all.value = []
   store.layouts = []
-  store.fields = [...erComponentsConfig.fieldsConfig[0].list, ...erComponentsConfig.fieldsConfig[1].list].map(e => erGeneratorData(e, true, newLang))
+  store.fields = [...erComponentsConfig.fieldsConfig[0].list, ...erComponentsConfig.fieldsConfig[1].list].map(e => {
+    const result = erGeneratorData(e, true, newLang)
+    if (/^(radio|cascader|checkbox|select)$/.test(e.type)) {
+      result.columns[0].options.data = utils.generateOptions(3).map((e, i) => {
+        e.label += i + 1
+        return e
+      })
+    }
+    return result
+  })
   const layoutNodes = erComponentsConfig.fieldsConfig[2].list.map(e => erGeneratorData(e, true, newLang))
   layoutNodes.forEach((node, index) => {
     store.layouts.push(node)

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "everright-formeditor",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "files": [
     "dist",
     "packages/formEditor/componentsConfig.js"

diff --git a/packages/formEditor/components/Panels/Config/components/LogicComponent.vue b/packages/formEditor/components/Panels/Config/components/LogicComponent.vue
@@ -15,12 +15,6 @@ export default {
 }
 </script>
 <script setup>
-const props = defineProps({
-  modelValue: {
-    type: String,
-    default: 'pc'
-  }
-})
 const {
   t,
   lang
@@ -54,7 +48,6 @@ const tabs = ref([
   // }
 ])
 const activeTab = ref('visible')
-const emit = defineEmits(['update:modelValue'])
 const ER = inject('Everright')
 const scrollbarRef = ref()
 const ns = hooks.useNamespace('ConfigLogicComponent')
@@ -251,7 +244,7 @@ const handleClosed = () => {
         <el-tab-pane v-for="tab in tabs" :label="t(`er.logic.tabs.${tab.value}`)" :name="tab.value" :key="tab.value">
           <el-scrollbar ref="scrollbarRef" max-height="calc(100vh - 210px)">
             <el-empty v-if="!tab.rules.length">
-              <el-button type="primary" icon="plus" @click="handleAction(1)">Add</el-button>
+              <el-button type="primary" icon="plus" @click="handleAction(1)">{{ t('er.public.add')}}</el-button>
             </el-empty>
             <div v-else>
               <transition-group name="el-fade-in">

diff --git a/packages/formEditor/components/Panels/Config/components/generateFilterdata.js b/packages/formEditor/components/Panels/Config/components/generateFilterdata.js
@@ -282,7 +282,7 @@ const generateIfFilterConditionsData = (activeTab, state, property) => {
         }
       ]
     } else {
-      result = _.get(state.data, `${findField.options.dataKey}.list`, [])
+      result = state.mode === 'edit' ? _.get(state.data, `${findField.options.dataKey}.list`, []) : _.get(findField, 'options.data', [])
     }
   }
   return result

diff --git a/packages/formEditor/index.vue b/packages/formEditor/index.vue
@@ -71,7 +71,6 @@ const state = reactive({
 })
 const isFoldFields = ref(true)
 const isFoldConfig = ref(true)
-window.state = state
 state.validator = (target, fn) => {
   if (target) {
     const count = _.countBy(state.validateStates, 'data.key')