el-plus-crud 0.0.63 → 0.0.65

package/lib/components/el-plus-form/ElPlusForm.vue

@@ -243,9 +243,11 @@ const computedRules = computed(() => {
             case 'linkuser':
             case 'radio':
             case 'checkbox':
-            case 'daterange':
               rules = 'select'
               break
+            case 'daterange':
+              rules = 'cascader'
+              break
           }
           tempRules[field].push(...(validates as any)[rules])
         }

package/lib/components/el-plus-form/components/ElPlusFormStatus.vue

@@ -1,101 +1,101 @@
-<template>
-  <div class="ElPlusFormStatus-panel">
-    <i :style="iconStyle" />
-    <div :class="desc.class" :style="desc.style">
-      {{ formatValue }}
-    </div>
-  </div>
-</template>
-<script lang="ts">
-export default {
-  name: 'ElPlusFormStatus',
-  inheritAttrs: false,
-  typeName: 'status',
-  customOptions: {}
-}
-</script>
-<script lang="ts" setup>
-import { isEqual } from 'lodash'
-import { ref, reactive, watch, computed, inject } from 'vue'
-
-const globalData = inject('globalData') as any
-const format = inject('format') as any
-
-const props = defineProps<{
-  modelValue?: string | number | '' | null
-  field: string
-  desc: { [key: string]: any }
-  formData: { [key: string]: any }
-}>()
-
-const emits = defineEmits(['update:modelValue'])
-const currentValue = ref(props.modelValue)
-emits('update:modelValue', currentValue)
-
-const options = reactive([] as any[])
-const formatValue = ref('' as any)
-
-// icon 样式
-const iconStyle = computed(() => {
-  if (props.desc.icolor) {
-    if (typeof props.desc.icolor === 'function') {
-      return { background: props.desc.icolor(props.formData) || '#909399' }
-    }
-    return { background: props.desc.icolor || '#909399' }
-  }
-  const optionsItem = options.find((item: any) => (item.value || item.v) == currentValue.value) || {}
-  return { background: optionsItem.c || optionsItem.color || '#909399' }
-})
-
-watch(
-  () => props.desc.options,
-  async (data) => {
-    if (typeof data === 'string') {
-      // 从全局数据中获取options
-      options.splice(0, options.length, ...(globalData[data] || []))
-    } else if (typeof data === 'function') {
-      options.splice(0, options.length, ...(await data(props.formData)))
-    } else if (Array.isArray(data)) {
-      if (data && options && !isEqual(data, options)) {
-        options.splice(0, options.length, ...data)
-      }
-    } else {
-      options.splice(0, options.length)
-    }
-  },
-  { immediate: true }
-)
-
-watch(
-  () => props.modelValue,
-  async () => {
-    if (!props.desc.format) {
-      formatValue.value = props.modelValue === '' ? props.desc.default ?? '—' : props.modelValue ?? props.desc.default ?? '—'
-    } else {
-      if (typeof props.desc.format === 'function') {
-        // 如果有方法类型的判断，则需要启用动态监测
-        formatValue.value = await props.desc.format(props.modelValue, props.formData, props.field)
-      } else if (typeof props.desc.format === 'string') {
-        formatValue.value = format[props.desc.format] ? format[props.desc.format](props.modelValue, props.formData, props.field) : '--'
-      } else {
-        formatValue.value = props.modelValue || '—'
-      }
-    }
-  },
-  { immediate: true }
-)
-</script>
-<style lang="scss" scoped>
-.ElPlusFormStatus-panel {
-  display: flex;
-  line-height: 25px;
-  align-items: center;
-  i {
-    display: inline-block;
-    min-width: 10px;
-    min-height: 10px;
-    border-radius: 50%;
-    margin-right: 5px;
-  }
-}
-</style>
+<template>
+  <div class="ElPlusFormStatus-panel">
+    <i :style="iconStyle" />
+    <div :class="desc.class" :style="desc.style">
+      {{ formatValue }}
+    </div>
+  </div>
+</template>
+<script lang="ts">
+export default {
+  name: 'ElPlusFormStatus',
+  inheritAttrs: false,
+  typeName: 'status',
+  customOptions: {}
+}
+</script>
+<script lang="ts" setup>
+import { isEqual } from 'lodash'
+import { ref, reactive, watch, computed, inject } from 'vue'
+
+const globalData = inject('globalData') as any
+const format = inject('format') as any
+
+const props = defineProps<{
+  modelValue?: string | number | '' | null
+  field: string
+  desc: { [key: string]: any }
+  formData: { [key: string]: any }
+}>()
+
+const emits = defineEmits(['update:modelValue'])
+const currentValue = ref(props.modelValue)
+emits('update:modelValue', currentValue)
+
+const options = reactive([] as any[])
+const formatValue = ref('' as any)
+
+// icon 样式
+const iconStyle = computed(() => {
+  if (props.desc.icolor) {
+    if (typeof props.desc.icolor === 'function') {
+      return { background: props.desc.icolor(props.formData) || '#909399' }
+    }
+    return { background: props.desc.icolor || '#909399' }
+  }
+  const optionsItem = options.find((item: any) => (item.value || item.v) == currentValue.value) || {}
+  return { background: optionsItem.c || optionsItem.color || '#909399' }
+})
+
+watch(
+  () => props.desc.options,
+  async (data) => {
+    if (typeof data === 'string') {
+      // 从全局数据中获取options
+      options.splice(0, options.length, ...(globalData[data] || []))
+    } else if (typeof data === 'function') {
+      options.splice(0, options.length, ...(await data(props.formData)))
+    } else if (Array.isArray(data)) {
+      if (data && options && !isEqual(data, options)) {
+        options.splice(0, options.length, ...data)
+      }
+    } else {
+      options.splice(0, options.length)
+    }
+  },
+  { immediate: true }
+)
+
+watch(
+  () => props.modelValue,
+  async () => {
+    if (!props.desc.format) {
+      formatValue.value = props.modelValue === '' ? props.desc.default ?? '—' : props.modelValue ?? props.desc.default ?? '—'
+    } else {
+      if (typeof props.desc.format === 'function') {
+        // 如果有方法类型的判断，则需要启用动态监测
+        formatValue.value = await props.desc.format(props.modelValue, props.formData, props.field)
+      } else if (typeof props.desc.format === 'string') {
+        formatValue.value = format[props.desc.format] ? format[props.desc.format](props.modelValue, props.formData, props.field) : '--'
+      } else {
+        formatValue.value = props.modelValue || '—'
+      }
+    }
+  },
+  { immediate: true }
+)
+</script>
+<style lang="scss" scoped>
+.ElPlusFormStatus-panel {
+  display: flex;
+  line-height: 25px;
+  align-items: center;
+  i {
+    display: inline-block;
+    min-width: 10px;
+    min-height: 10px;
+    border-radius: 50%;
+    margin-right: 5px;
+  }
+}
+</style>

package/lib/components/el-plus-form/components/ElPlusFormTime.vue

@@ -0,0 +1,53 @@
+<template>
+  <el-time-picker v-if="isInit" class="ElPlusFormTime-panel" v-bind="attrs" v-on="onEvents" v-model="currentValue" :disabled="disabled" />
+</template>
+<script lang="ts">
+export default {
+  name: 'ElPlusFormTime',
+  inheritAttrs: false,
+  typeName: 'time',
+  customOptions: {}
+}
+</script>
+<script lang="ts" setup>
+import { ref, useAttrs, watch, onBeforeMount } from 'vue'
+import { getAttrs, getEvents } from '../mixins'
+
+const props = defineProps<{
+  modelValue?: Array<string> | string | Date | null
+  field: string
+  desc: { [key: string]: any }
+  formData: { [key: string]: any }
+  disabled?: boolean
+}>()
+
+const emits = defineEmits(['update:modelValue'])
+const currentValue = ref()
+const attrs = ref({} as any)
+const isInit = ref(false)
+const onEvents = ref(getEvents(props))
+
+emits('update:modelValue', currentValue)
+
+onBeforeMount(async () => {
+  attrs.value = await getAttrs(props, { editable: false, ...useAttrs() })
+  isInit.value = true
+})
+
+watch(
+  () => props.modelValue,
+  (val: Array<string> | string | Date | null | undefined) => {
+    if (val) {
+      currentValue.value = Array.isArray(val) ? val.map((item) => new Date(item)) : new Date(val)
+    } else {
+      currentValue.value = attrs.value.isRange ? [] : null
+    }
+  },
+  { immediate: true }
+)
+</script>
+<style lang="scss" scoped>
+.ElPlusFormTime-panel {
+  display: flex;
+}
+</style>

package/lib/components/el-plus-form/util/validate.ts

@@ -84,7 +84,7 @@ export const select = [{ required: true, trigger: 'change', validator: validateS
  * 级联选择
  * @type {[*]}
  */
-export const cascader = [{ required: true, trigger: 'change', validator: validateSelect }]
+export const cascader = [{ required: true, trigger: 'change', validator: validateCascader }]
 
 /**
  * 必须上传
@@ -171,6 +171,20 @@ function validateInputNotAllBlank(rule: any, value: any, callback?: any) {
  * @param callback
  */
 function validateSelect(rule: any, value: any, callback?: any) {
+  if (value === null || typeof value === 'undefined' || value === '') {
+    callback(new Error('请选择！'))
+  } else {
+    callback()
+  }
+}
+
+/**
+ * 数组选择
+ * @param rule
+ * @param value
+ * @param callback
+ */
+function validateCascader(rule: any, value: any, callback?: any) {
   if (value === null || typeof value === 'undefined' || value === '' || value.length <= 0 || value[0] == null) {
     callback(new Error('请选择！'))
   } else {

package/lib/components-list.ts

@@ -29,6 +29,7 @@ import ElPlusFormSwitch from './components/el-plus-form/components/ElPlusFormSwi
 import ElPlusFormTag from './components/el-plus-form/components/ElPlusFormTag.vue'
 import ElPlusFormText from './components/el-plus-form/components/ElPlusFormText.vue'
 import ElPlusFormTextarea from './components/el-plus-form/components/ElPlusFormTextarea.vue'
+import ElPlusFormTime from './components/el-plus-form/components/ElPlusFormTime.vue'
 import ElPlusFormTransfer from './components/el-plus-form/components/ElPlusFormTransfer.vue'
 import ElPlusFormTree from './components/el-plus-form/components/ElPlusFormTree.vue'
 import ElPlusFormTreeSelect from './components/el-plus-form/components/ElPlusFormTreeSelect.vue'
@@ -67,6 +68,7 @@ export default [
    ElPlusFormTag,
    ElPlusFormText,
    ElPlusFormTextarea,
+   ElPlusFormTime,
    ElPlusFormTransfer,
    ElPlusFormTree,
    ElPlusFormTreeSelect,

package/package.json

@@ -2,7 +2,7 @@
   "name": "el-plus-crud",
   "description": "采用Vue3 + TS，封装的element-plus数据驱动表单、列表组件",
   "author": "K.D.Jack",
-  "version": "0.0.63",
+  "version": "0.0.65",
   "license": "MIT",
   "private": false,
   "main": "dist/el-plus-crud.mjs",