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

Feat/logic

.eslintignore

@@ -2,3 +2,4 @@ node_modules
 dist
 external/ckeditor5/node_modules
 external/ckeditor5/build
+external/everright-filter

.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: [
  // {

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:| 

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:| 
+

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 {

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
  }

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

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%;
  }
 }

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": {

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>

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
  },