更新

src/components/cus/CusDialog.vue

@@ -29,7 +29,7 @@
         </div>
       </div>
     </template>
-    <div class="__cus-dialog-main" :class="{isFull: full !== false}">
+    <div class="__cus-dialog-main" :class="{isFull: full !== false}" v-loading="loading">
       <div class="__cus-dialog-content">
         <slot/>
       </div>
@@ -85,11 +85,15 @@ export default defineComponent({
     minHeight: {default: 'unset'},
     closeConfirm: {default: false},
     closeConfirmText: {default: {
-        title: null,
-        message: null,
-        submit: null,
-        close: null,
-      }}
+      title: null,
+      message: null,
+      submit: null,
+      close: null,
+    }},
+    loading: {
+      default: false,
+      type: Boolean
+    }
   },
   setup(props, {emit}) {
     const store = useStore();

src/components/cus/CusForm.vue

@@ -20,7 +20,7 @@ import {
   ComponentInternalInstance,
   toRefs,
   nextTick,
-  provide, readonly
+  provide
 } from 'vue'
 import {useStore} from 'vuex'
 import {useRouter, useRoute} from 'vue-router'
@@ -59,12 +59,11 @@ export default defineComponent({
                 message: errorMessage
               });
             }
-          } else {
-            if (itemVue.childNodes && itemVue.childNodes.length > 0) {
-              itemVue.childNodes.forEach((v: any) => {
-                handleItem(v);
-              });
-            }
+          }
+          if (itemVue.childNodes && itemVue.childNodes.length > 0) {
+            itemVue.childNodes.forEach((v: any) => {
+              handleItem(v);
+            });
           }
         };
         handleItem(ref_cusForm?.value?.$el);

src/components/cus/CusFormColumn.vue

@@ -154,7 +154,6 @@
         </template>
         <template v-else-if="link === 'number'">
           <NumberCom
-              v-if="link === 'number'"
               v-bind="$attrs"
               :label="labelCpt"
               :param="param"
@@ -177,6 +176,29 @@
             </template>
           </NumberCom>
         </template>
+        <template v-else-if="link === 'input-number'">
+          <InputNumberCom
+              v-bind="$attrs"
+              :label="labelCpt"
+              :param="param"
+              @emitParam="val => {
+                $emit('update:param', val), handleValidate(val)
+              }"
+              @emitEnter="handleEnter"
+          >
+          </InputNumberCom>
+        </template>
+        <template v-else-if="link === 'tree-select'">
+          <TreeSelectCom
+              v-bind="$attrs"
+              :label="labelCpt"
+              :param="param"
+              @emitParam="val => {
+                $emit('update:param', val), handleValidate(val)
+              }"
+          >
+          </TreeSelectCom>
+        </template>
       </slot>
       <div v-if="unit" class="unit">{{unit}}</div>
     </el-form-item>
@@ -199,6 +221,7 @@ import {
 import {useStore} from 'vuex'
 import {useRouter, useRoute} from 'vue-router'
 import InputCom from './cus-form-link/input.vue'
+import InputNumberCom from './cus-form-link/input-number.vue'
 import SelectCom from './cus-form-link/select.vue'
 import DateCom from './cus-form-link/date.vue'
 import DateTimeCom from './cus-form-link/datetime.vue'
@@ -210,11 +233,13 @@ import CheckboxCom from './cus-form-link/checkbox.vue'
 import DeptCom from './cus-form-link/dept.vue'
 import UploadCom from './cus-form-link/upload.vue'
 import NumberCom from './cus-form-link/number.vue'
+import TreeSelectCom from './cus-form-link/tree-select.vue'
 
 export default defineComponent({
   name: 'CusFormColumn',
   components: {
     InputCom,
+    InputNumberCom,
     SelectCom,
     DateCom,
     DateTimeCom,
@@ -225,7 +250,8 @@ export default defineComponent({
     CheckboxCom,
     DeptCom,
     UploadCom,
-    NumberCom
+    NumberCom,
+    TreeSelectCom
   },
   props: {
     span: {type: Number, default: 6},
@@ -238,7 +264,7 @@ export default defineComponent({
     required: {default: false},
     labelWidth: {type: String, default: ''},
     link: {type: String, default: 'input', validator(val: string) {
-      return ['cascader', 'checkbox', 'date', 'datetime', 'input', 'radio', 'select', 'switch', 'portOfRegistry', 'residentMooringPoint', 'dept', 'time', 'upload', 'number'].includes(val)
+      return ['cascader', 'checkbox', 'date', 'datetime', 'input', 'radio', 'select', 'switch', 'dept', 'time', 'upload', 'number', 'input-number', 'tree-select'].includes(val)
     }},
     rules: {type: Array, default: () => []},
     maxLength: {type: Number, default: null},
@@ -278,7 +304,7 @@ export default defineComponent({
           message: `内容过长，字数需小于等于${props.maxLength}`
         })
       }
-      const doStr = ['input', 'number'].includes(props.link) ? '输入' : '选择'
+      const doStr = ['input', 'number', 'input-number'].includes(props.link) ? '输入' : '选择'
       if (props.required !== false && !props.rules.some((v: any) => v.type === 'default')) {
         if (['portOfRegistry', 'residentMooringPoint'].includes(props.link)) {
           r.unshift({
@@ -325,6 +351,19 @@ export default defineComponent({
     const reset = () => {
       state.errorMessage = null
     }
+    watch(() => state.errorMessage, (n) => {
+      const p = ref_cusFormColumn.value?.$el?.getElementsByClassName('el-form-item')?.[0]
+      if (n) {
+        setTimeout(() => {
+          const e = p?.getElementsByClassName('el-form-item__content')?.[0]?.getElementsByClassName('el-form-item__error')?.[0]
+          if (e?.clientHeight) {
+            p.style.marginBottom = `${e.clientHeight + 4}px`
+          }
+        }, 200)
+      } else {
+        p.style.marginBottom = '18px'
+      }
+    })
     return {
       ...toRefs(state),
       handleValidate,

src/components/cus/cus-form-link/input-number.vue

@@ -0,0 +1,59 @@
+<template>
+  <el-input-number
+      v-bind="$attrs"
+      v-model="paramVal"
+      :placeholder="$attrs.placeholder ? $attrs.placeholder : `请输入${label}`"
+      @keyup.enter.native="$emit('emitEnter')"
+      :disabled="$util.isValue($attrs.disabled) ? $attrs.disabled : formView"
+  >
+  </el-input-number>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  computed,
+  onMounted,
+  ref,
+  reactive,
+  watch,
+  getCurrentInstance,
+  ComponentInternalInstance,
+  toRefs,
+  nextTick,
+  inject
+} from 'vue'
+import {useStore} from 'vuex'
+import {useRouter, useRoute} from 'vue-router'
+
+export default defineComponent({
+  name: '',
+  components: {},
+  props: {
+    param: {},
+    label: {},
+  },
+  setup(props, { emit }) {
+    const store = useStore();
+    const router = useRouter();
+    const route = useRoute();
+    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
+    const state = reactive({
+      paramVal: props.param,
+      formView: inject('form-view', false),
+    })
+    watch(() => state.paramVal, (n) => {
+      emit('emitParam', n)
+    })
+    watch(() => props.param, (n) => {
+      state.paramVal = that.$util.isValue(n) ? Number(n) : null
+    })
+    return {
+      ...toRefs(state),
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+</style>

src/components/cus/cus-form-link/tree-select.vue

@@ -0,0 +1,78 @@
+<template>
+  <div v-loading="loading" :element-loading-background="elementLoadingBackground" style="width: 100%;">
+    <el-tree-select
+        style="width: 100%;"
+        v-bind="$attrs"
+        v-model="paramVal"
+        :placeholder="$attrs.placeholder ? $attrs.placeholder : `请选择${label}`"
+        :data="options"
+        :clearable="$util.isValue($attrs.clearable) ? $attrs.clearable : true"
+        :filterable="$util.isValue($attrs.filterable) ? $attrs.filterable : true"
+        :check-strictly="checkStrictly"
+        :disabled="$util.isValue($attrs.disabled) ? $attrs.disabled : formView"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  computed,
+  onMounted,
+  ref,
+  reactive,
+  watch,
+  getCurrentInstance,
+  ComponentInternalInstance,
+  toRefs,
+  nextTick,
+  inject
+} from 'vue'
+import {useStore} from 'vuex'
+import {useRouter, useRoute} from 'vue-router'
+
+export default defineComponent({
+  name: '',
+  components: {},
+  props: {
+    param: {},
+    label: {},
+    checkStrictly: { default: true },
+    options: { type: Array, default: () => [] },
+    static: { default: false },
+    isLoading: { default: false }
+  },
+  setup(props, { emit }) {
+    const store = useStore();
+    const router = useRouter();
+    const route = useRoute();
+    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
+    const state = reactive({
+      paramVal: props.param,
+      loading: true,
+      elementLoadingBackground: inject('element-loading-background', null),
+      formView: inject('form-view', false),
+    })
+    watch(() => state.paramVal, (n) => {
+      emit('emitParam', n)
+    })
+    watch(() => props.param, (n) => {
+      state.paramVal = n
+    })
+    watch(() => [props.options, props.static], () => {
+      state.loading = false
+    })
+    onMounted(() => {
+      if (props.static !== false || props.options?.length > 0) {
+        state.loading = false
+      }
+    })
+    return {
+      ...toRefs(state),
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+</style>