Merge pull request #13 from Liberty-liu/feat/logic

Feat/logic
Liberty-liu · May 20, 2023 · efe6ba2 · efe6ba2
2 parents 2e993fa + cea3f0a
commit efe6ba2
Show file tree

Hide file tree

Showing 105 changed files with 10,624 additions and 566 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -2,3 +2,4 @@ node_modules
 dist
 external/ckeditor5/node_modules
 external/ckeditor5/build
+external/everright-filter
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -29,8 +29,7 @@ module.exports = {
     'no-case-declarations': 'off',
     'no-useless-escape': 'off',
     'no-mixed-operators': 'off',
-    'no-async-promise-executor': 'off',
-    'quotes': 'off'
+    'no-async-promise-executor': 'off'
   },
   overrides: [
     // {

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/views/formEditor/actionEdit.vue b/examples/views/formEditor/actionEdit.vue
@@ -44,6 +44,7 @@ const getObjData = async () => {
   }
 }
 const handleListener = async ({ type, data }) => {
+  console.log(type)
   if (type === 'submit') {
     loading.value = true
     try {

diff --git a/examples/views/formEditor/actionList.vue b/examples/views/formEditor/actionList.vue
@@ -33,10 +33,10 @@ const getAllActions = async () => {
 const handleDel = async (id) => {
   loading.value = true
   try {
-    await hooks.useFetch(`${uri.obj}/${id}`, {
+    await hooks.useFetch(`${uri.obj}/${route.params.objid}/action/${id}`, {
       method: 'delete'
     })
-    getAllobjs()
+    getAllActions()
   } finally {
     loading.value = false
   }

diff --git a/examples/views/formEditor/objEdit.vue b/examples/views/formEditor/objEdit.vue
@@ -5,7 +5,7 @@ import hooks from '@ER/hooks'
 import { erFormEditor } from '@ER/formEditor'
 import uri from '@ER-examples/uri.js'
 import _ from 'lodash-es'
-import { ElMessage } from "element-plus"
+import { ElMessage } from 'element-plus'
 const route = useRoute()
 const {
   lang
@@ -41,6 +41,7 @@ const getObjData = async () => {
   }
 }
 const handleListener = async ({ type, data }) => {
+  console.log(type)
   switch (type) {
     case 'lang':
       lang.value = data

diff --git a/examples/views/formEditorConfig.vue b/examples/views/formEditorConfig.vue
@@ -12,11 +12,21 @@ const store = reactive({
   layouts: []
 })
 const fieldData = ref({})
+const logicData = ref('{}')
 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)
@@ -35,8 +45,8 @@ watch(lang, (newLang) => {
   })
   all.value = [...store.fields, ...store.layouts]
 }, { immediate: true })
-// const value0 = ref('root')
-const value0 = ref(store.layouts[6].id)
+const value0 = ref('root')
+// const value0 = ref(store.layouts[6].id)
 // const value0 = ref(store.fields[17].id)
 const sector = computed(() => {
   let result = ''
@@ -48,9 +58,13 @@ const sector = computed(() => {
   return result
 })
 const handleListener = async ({ type, data }) => {
+  console.log(type)
   if (type === 'changeParams') {
     fieldData.value = JSON.stringify(data, '', 2)
   }
+  if (/^logic:(cancel|confirm)$/.test(type)) {
+    logicData.value = JSON.stringify(data, '', 2)
+  }
 }
 </script>
 <template>
@@ -82,13 +96,22 @@ const handleListener = async ({ type, data }) => {
             :lang="lang"
             @listener="handleListener"
             :field="sector"
+            :fields="store.fields.map(e => e.columns[0])"
             ref="EReditorRef"/>
         </div>
       </el-aside>
       <el-main>
         <el-input
           v-model="fieldData"
-          :rows="40"
+          :rows="value0 === 'root' ? 20 : 40"
+          disabled
+          type="textarea"
+          placeholder="Please input"
+        />
+        <el-input
+          v-if="value0 === 'root'"
+          v-model="logicData"
+          :rows="value0 === 'root' ? 20 : 40"
           disabled
           type="textarea"
           placeholder="Please input"
@@ -100,7 +123,7 @@ const handleListener = async ({ type, data }) => {
 <style scoped lang="scss">
 .customConfig {
   padding: 10px;
-  ::v-deep .Everright-formEditor-Config {
+  :deep(.Everright-formEditor-Config) {
     width: 100%;
   }
 }

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"
@@ -21,9 +21,16 @@
     "type": "git",
     "url": "https://github.com/Liberty-liu/Everright-formEditor.git"
   },
-  "main": "dist/Everright-formEditor.umd.cjs",
-  "module": "dist/Everright-formEditor.js",
-  "style": "dist/style.css",
+  "main": "./dist/Everright-formEditor.umd.cjs",
+  "module": "./dist/Everright-formEditor.js",
+  "style": "./dist/style.css",
+  "exports": {
+    ".": {
+      "import": "./dist/Everright-formEditor.js",
+      "require": "./dist/Everright-formEditor.umd.cjs"
+    },
+    "./dist/style.css": "./dist/style.css"
+  },
   "scripts": {
     "dev:server": "nodemon server --watch server",
     "dev:ckeditor5": "pnpm -C external/ckeditor5 dev",
@@ -34,7 +41,8 @@
     "lint": "eslint . --ext .js,.jsx,.vue",
     "lint-fix": "eslint --fix . --ext .js,.jsx,.vue",
     "prepare": "husky install",
-    "init": "node ./server/db/generateDatabase.js && mkdir uploads"
+    "init": "node ./server/db/generateDatabase.js && mkdir uploads",
+    "test": "vitest"
   },
   "dependencies": {
     "@vant/area-data": "^1.4.0",
@@ -44,8 +52,10 @@
     "@vuelidate/validators": "^2.0.0",
     "async": "^3.2.4",
     "axios": "^1.2.2",
+    "canvas": "^2.11.2",
     "dayjs": "^1.11.7",
     "element-plus": "^2.2.28",
+    "everright-filter": "^0.0.22",
     "jss": "^10.9.2",
     "jss-preset-default": "^10.9.2",
     "lodash-es": "^4.17.21",
@@ -71,6 +81,7 @@
     "@vitejs/plugin-vue": "^3.2.0",
     "@vitejs/plugin-vue-jsx": "^2.1.1",
     "@vue/compiler-sfc": "^3.2.47",
+    "@vue/test-utils": "^2.3.2",
     "better-sqlite3": "^8.2.0",
     "connect-multiparty": "^2.2.0",
     "cz-git": "^1.5.3",
@@ -82,11 +93,14 @@
     "eslint-plugin-vue": "^9.9.0",
     "express": "^4.18.2",
     "husky": "^8.0.3",
+    "jsdom": "^22.0.0",
     "lint-staged": "^13.1.2",
     "nodemon": "^2.0.21",
+    "resize-observer-polyfill": "^1.5.1",
     "sass": "^1.58.3",
     "vite": "^3.2.5",
     "vite-plugin-eslint": "^1.8.1",
+    "vitest": "^0.31.0",
     "vue-router": "^4.1.6"
   },
   "peerDependencies": {

diff --git a/packages/formEditor/components/CompleteButton.vue b/packages/formEditor/components/CompleteButton.vue
@@ -27,25 +27,16 @@ const handleClick = async (type) => {
   if (props.mode === 'preview') return false
   try {
     await Promise.resolve(unref(props.handle).validate())
-    ER.emit('listener', {
-      type: 'submit',
-      data: ER.getData()
-    })
-    // console.log(JSON.stringify(_.cloneDeep(result)))
+    // await ER.checkFieldsValidation()
+    ER.fireEvent('submit', ER.getData())
   } catch (e) {
     console.log(e)
   }
-  // unref(props.handle).validate().then(() => {
-  //   const result = {}
-  //   ER.state.allFields.forEach(e => {
-  //     result[e.key] = e.options.defaultValue
-  //   })
-  //   console.log(_.cloneDeep(result))
-  // })
 }
+const dataset = process.env.NODE_ENV === 'test' ? { 'data-test': 'er-complete-button' } : {}
 </script>
 <template>
-  <div>
+  <div v-bind="dataset">
     <div v-if="isPc" style="text-align: center;">
       <el-button @click="handleClick" :color="state.config[state.platform].completeButton.backgroundColor" type="primary">
         <span :style="{color: state.config[state.platform].completeButton.color }">{{ state.config[state.platform].completeButton.text }}</span>

diff --git a/packages/formEditor/components/FormTypes/Time/mobile.vue b/packages/formEditor/components/FormTypes/Time/mobile.vue
@@ -2,6 +2,8 @@
 import hooks from '@ER/hooks'
 import { ref, computed, watch } from 'vue'
 import dayjs from 'dayjs'
+import customParseFormat from 'dayjs/plugin/customParseFormat.js'
+dayjs.extend(customParseFormat)
 export default {
   name: 'er-time',
   inheritAttrs: false,
@@ -16,19 +18,19 @@ const columnsType = ['hour', 'minute', 'second']
 watch(() => props.data.options.defaultValue, (newVal) => {
   let date = ''
   if (newVal) {
-    date = dayjs(`${dayjs().format('YYYY/MM/DD')} ${newVal.split(':')}`, 'YYYY/MM/DD HH:mm:ss')
+    date = dayjs(newVal, props.data.options.valueFormat)
   } else {
     date = dayjs()
   }
-  currentTime.value = date.format('HH:mm:ss').split(':')
+  currentTime.value = date.format(props.data.options.valueFormat).split(':')
 }, {
   immediate: true
 })
 const currentValue = computed({
   get () {
     let result = ''
     if (props.data.options.defaultValue) {
-      result = dayjs(`${dayjs().format('YYYY/MM/DD')} ${props.data.options.defaultValue.split(':')}`, 'YYYY/MM/DD HH:mm:ss').format(props.data.options.format)
+      result = dayjs(props.data.options.defaultValue, props.data.options.valueFormat).format(props.data.options.format)
     }
     return result
   },