feat: show hidden, required, Read only

Liberty-liu · May 16, 2023 · 25f446d · 25f446d
1 parent 1ccc9e1
commit 25f446d
Show file tree

Hide file tree

Showing 16 changed files with 824 additions and 112 deletions.
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/package.json b/package.json
@@ -42,13 +42,15 @@
     "@vant/area-data": "^1.4.0",
     "@vant/touch-emulator": "^1.4.0",
     "@vue/shared": "^3.2.45",
+    "@vue/test-utils": "^2.3.2",
     "@vuelidate/core": "^2.0.0",
     "@vuelidate/validators": "^2.0.0",
     "async": "^3.2.4",
     "axios": "^1.2.2",
     "dayjs": "^1.11.7",
     "element-plus": "^2.2.28",
     "everright-filter": "^0.0.21",
+    "jsdom": "^22.0.0",
     "jss": "^10.9.2",
     "jss-preset-default": "^10.9.2",
     "lodash-es": "^4.17.21",

diff --git a/packages/formEditor/components/CompleteButton.vue b/packages/formEditor/components/CompleteButton.vue
@@ -27,21 +27,14 @@ const handleClick = async (type) => {
   if (props.mode === 'preview') return false
   try {
     await Promise.resolve(unref(props.handle).validate())
+    // await ER.checkFieldsValidation()
     ER.emit('listener', {
       type: 'submit',
       data: ER.getData()
     })
-    // console.log(JSON.stringify(_.cloneDeep(result)))
   } 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))
-  // })
 }
 </script>
 <template>

diff --git a/packages/formEditor/components/Layout/DragGable.jsx b/packages/formEditor/components/Layout/DragGable.jsx
@@ -145,28 +145,30 @@ export default defineComponent({
             break
           default:
             let TypeComponent = ''
-            const typeProps = hooks.useProps(state, element, unref(isPc))
-            TypeComponent = load.findComponent('FormTypes', element.type)
-            if (unref(isPc)) {
-              node = (
-                <Selection hasWidthScale hasCopy hasDel hasDrag hasMask data={element} parent={props.data}>
-                  {
-                    element.type !== 'divider'
-                      ? (<el-form-item
-                        {...typeProps.value}
-                      >
-                        <TypeComponent data={element} params={typeProps.value}></TypeComponent>
-                      </el-form-item>)
-                      : <TypeComponent data={element} params={typeProps.value}></TypeComponent>
-                  }
-                </Selection>
-              )
-            } else {
-              node = (
-                <Selection hasWidthScale hasCopy hasDel hasDrag hasMask data={element} parent={props.data}>
-                  <TypeComponent data={element} params={typeProps.value}></TypeComponent>
-                </Selection>
-              )
+            if (unref(isEditModel) || _.get(state.fieldsLogicState.get(element), 'visibility', undefined) !== 0) {
+              const typeProps = hooks.useProps(state, element, unref(isPc))
+              TypeComponent = load.findComponent('FormTypes', element.type)
+              if (unref(isPc)) {
+                node = (
+                  <Selection hasWidthScale hasCopy hasDel hasDrag hasMask data={element} parent={props.data}>
+                    {
+                      element.type !== 'divider'
+                        ? (<el-form-item
+                          {...typeProps.value}
+                        >
+                          <TypeComponent data={element} params={typeProps.value}></TypeComponent>
+                        </el-form-item>)
+                        : <TypeComponent data={element} params={typeProps.value}></TypeComponent>
+                    }
+                  </Selection>
+                )
+              } else {
+                node = (
+                  <Selection hasWidthScale hasCopy hasDel hasDrag hasMask data={element} parent={props.data}>
+                    <TypeComponent data={element} params={typeProps.value}></TypeComponent>
+                  </Selection>
+                )
+              }
             }
             break
         }

diff --git a/packages/formEditor/components/Panels/Config/components/LogicComponent.vue b/packages/formEditor/components/Panels/Config/components/LogicComponent.vue
@@ -1,9 +1,14 @@
 <script>
 import { ref, inject, nextTick, reactive, computed, watch, onMounted } from 'vue'
 import hooks from '@ER/hooks'
-import utils from '@ER/utils'
+import {
+  generateIfFilterOptionsData,
+  generateIfFilterConditionsData,
+  generateThenFilterOptionsData,
+  generateThenFilterConditionsData
+} from './generateFilterdata.js'
 import _ from 'lodash-es'
-import { EverrightFilter } from 'everright-filter'
+import { EverrightFilter } from 'everright-filter/dist/Everright-filter.js'
 import Icon from '@ER/icon'
 export default {
   name: 'ConfigLogicComponent'
@@ -28,22 +33,29 @@ const tabs = ref([
     thenRefs: []
   },
   {
-    label: '校验',
-    value: 'validation',
+    label: '必填',
+    value: 'required',
     rules: [],
     ifRefs: [],
     thenRefs: []
   },
   {
-    label: '必填',
-    value: 'required',
+    label: '只读',
+    value: 'readOnly',
     rules: [],
     ifRefs: [],
     thenRefs: []
   }
+  // {
+  //   label: '校验',
+  //   value: 'validation',
+  //   rules: [],
+  //   ifRefs: [],
+  //   thenRefs: []
+  // }
 ])
 window.tabs = tabs
-const activeTab = ref('showHidden')
+const activeTab = ref('readOnly')
 const emit = defineEmits(['update:modelValue'])
 const ER = inject('Everright')
 const scrollbarRef = ref()
@@ -55,28 +67,28 @@ const {
 const getIfOptions = (type) => async () => {
   return new Promise((resolve, reject) => {
     resolve({
-      data: utils.generateIfFilterOptionsData(type, state.fields)
+      data: generateIfFilterOptionsData(type, state.fields)
     })
   })
 }
 const getIfConditions = (type) => async ({ property }) => {
   return new Promise((resolve, reject) => {
     resolve({
-      data: utils.generateIfFilterConditionsData(type, state, property)
+      data: generateIfFilterConditionsData(type, state, property)
     })
   })
 }
 const getThenOptions = (type) => async () => {
   return new Promise((resolve, reject) => {
     resolve({
-      data: utils.generateThenFilterOptionsData(type, state.fields)
+      data: generateThenFilterOptionsData(type, state.fields)
     })
   })
 }
 const getThenConditions = (type) => async ({ property }) => {
   return new Promise((resolve, reject) => {
     resolve({
-      data: utils.generateThenFilterConditionsData(type, state.fields)
+      data: generateThenFilterConditionsData(type, state.fields)
     })
   })
 }
@@ -187,11 +199,34 @@ const handleListener = (ruleType, index, tab, { type, data }) => {
           case 'showHidden':
             _.last(tab.thenRefs).pushData('show')
             break
+          case 'required':
+            _.last(tab.thenRefs).pushData('required')
+            break
+          case 'readOnly':
+            _.last(tab.thenRefs).pushData('readOnly')
+            break
         }
       }
     }
   }
 }
+const addRuleHandler = (tab) => {
+  switch (activeTab.value) {
+    case 'validation':
+      _.last(tab.thenRefs).pushData('message')
+      break
+    case 'showHidden':
+      _.last(tab.thenRefs).pushData('show')
+      break
+    case 'required':
+      _.last(tab.thenRefs).pushData('required')
+      break
+    case 'readOnly':
+      _.last(tab.thenRefs).pushData('readOnly')
+      break
+  }
+  return false
+}
 const handleClosed = () => {
   tabs.value.forEach(tab => {
     tab.rules = []
@@ -226,13 +261,15 @@ const handleClosed = () => {
                     :getConditions="getIfConditions(tab.value)"
                   />
                 </div>
-                <div :class="ns.e('then')">
+                <div :class="[ns.e('then'), ns.e(`${tab.value}then`)]">
                   <h2>Then</h2>
                   <EverrightFilter
                     :ref="relationalRef(tab, 'thenRefs', index)"
                     :lang="ER.props.lang"
+                    :canAddRule="() => addRuleHandler(tab)"
                     @listener="(e) => handleListener('then', index, tab, e)"
                     :getOptions="getThenOptions(tab.value)"
+                    :rule-limit="tab.value === 'required' ? 2 : tab.value === 'validation' ? 1 : -1"
                     :getConditions="getThenConditions(tab.value)"
                   />
                 </div>

diff --git a/packages/utils/generateFilterdata.js → ...s/Config/components/generateFilterdata.js b/packages/utils/generateFilterdata.js → ...s/Config/components/generateFilterdata.js
@@ -138,7 +138,6 @@ const generateIfFilterOptionsData = (activeTab, fields) => {
         filterNode.renderType = 'REGION'
         filterNode.operatorKey = 'Region'
         filterNode.selectType = node.options.selectType
-        console.log(filterNode.selectType)
         break
       case 'date':
         filterNode.renderType = 'DATE'
@@ -322,7 +321,15 @@ const generateThenFilterOptionsData = (activeTab, fields) => {
       break
     case 'required':
       result = {
-        options: generateIfFilterOptionsData(activeTab, fields).options,
+        options: [
+          {
+            label: '',
+            value: 'required',
+            renderType: 'SELECT',
+            operatorKey: 'Text',
+            multiple: true
+          }
+        ],
         operators: {
           Text: [
             {
@@ -338,16 +345,39 @@ const generateThenFilterOptionsData = (activeTab, fields) => {
           ]
         }
       }
-      result.options.forEach(e => {
-        e.renderType = 'TEXT'
-        e.operatorKey = 'Text'
-      })
+      break
+    case 'readOnly':
+      result = {
+        options: [
+          {
+            label: '',
+            value: 'readOnly',
+            renderType: 'SELECT',
+            operatorKey: 'Text',
+            multiple: true
+          }
+        ],
+        operators: {
+          Text: [
+            {
+              label: '只读',
+              value: 'readOnly',
+              style: 'noop'
+            },
+            {
+              label: '可编辑',
+              value: 'editable',
+              style: 'noop'
+            }
+          ]
+        }
+      }
       break
     case 'validation':
       result = {
         options: [
           {
-            label: '提示语',
+            label: '提示内容',
             value: 'message',
             renderType: 'TEXT',
             isShowOperator: false,

diff --git a/packages/formEditor/preview.vue b/packages/formEditor/preview.vue
@@ -5,6 +5,8 @@ import hooks from '@ER/hooks'
 import utils from '@ER/utils'
 import _ from 'lodash-es'
 import defaultProps from './defaultProps'
+import { ElMessage } from 'element-plus'
+import { showNotify } from 'vant'
 export default {
   name: 'Everright-form-preview'
 }
@@ -26,11 +28,31 @@ const state = reactive({
   validateStates: [],
   data: {},
   fields: [],
-  logic: {}
+  logic: {},
+  // fieldsVisibility: ref(new WeakMap()),
+  // fieldsRequired: ref(new WeakMap()),
+  // fieldsValidation: new Map(),
+  fieldsLogicState: new Map()
 })
-console.log(hooks)
 const ns = hooks.useNamespace('Main', state.Namespace)
 hooks.useLogic(state)
+// const checkFieldsValidation = async () => {
+//   for (const [key, value] of state.fieldsValidation) {
+//     if (value) {
+//       if (utils.isPc()) {
+//         ElMessage({
+//           message: key.value,
+//           type: 'warning'
+//         })
+//       } else {
+//         showNotify({ type: 'warning', message: key.value })
+//       }
+//       return Promise.reject(key)
+//     }
+//   }
+//   return Promise.resolve()
+// }
+// window.checkFieldsValidation = checkFieldsValidation
 const getData = () => {
   const result = {}
   state.fields.forEach(e => {
@@ -43,6 +65,7 @@ provide('Everright', {
   emit,
   getData,
   props
+  // checkFieldsValidation
 })
 window.state = state
 const setData2 = (data, value) => {

diff --git a/packages/hooks/index.js b/packages/hooks/index.js
@@ -2,8 +2,13 @@ import _ from 'lodash-es'
 const importModules = import.meta.glob('./*/index.js', { eager: true })
 const modules = {}
 _.forIn(importModules, (func, path) => {
-  const key = _.head(Object.keys(func))
-  modules[key] = func[key]
+  // console.log(func)
+  // const key = _.head(Object.keys(func))
+  Object.keys(func).forEach(key => {
+    if (/^use[A-Z]\w/.test(key)) {
+      modules[key] = func[key]
+    }
+  })
 })
 export default {
   ...modules