el-plus-crud 0.0.74 → 0.0.76

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

@@ -1,163 +1,164 @@
-<template>
-  <el-select v-if="isInit" class="el-plus-form-select" :class="desc.class" :style="desc.style" v-bind="attrs" v-model="currentValue" :loading="loading" v-on="onEvents" :disabled="disabled">
-    <el-option v-for="option in options" :key="option.value || option.v" v-bind="option">
-      <div class="el-plus-form-select-options">
-        <span>{{ option.label || option.l }}</span>
-        <div v-if="desc.optionTip">{{ tip(option) }}</div>
-      </div>
-    </el-option>
-  </el-select>
-</template>
-<script lang="ts">
-export default {
-  name: 'ElPlusFormSelect',
-  inheritAttrs: false,
-  typeName: 'select',
-  customOptions: {}
-}
-</script>
-<script lang="ts" setup>
-import { ref, reactive, computed, onBeforeMount, useAttrs, watch, inject } from 'vue'
-import { ElMessage } from 'element-plus'
-import { getAttrs } from '../mixins'
-import { isEqual } from 'lodash'
-import { ICRUDConfig } from 'types/formList'
-
-const defaultConf = inject('defaultConf') as ICRUDConfig
-const globalData = inject('globalData') as any
-
-const props = defineProps<{
-  modelValue?: number | string | Array<string>
-  field: string
-  loading?: boolean
-  desc: { [key: string]: any }
-  formData: { [key: string]: any }
-  rowIndex?: number
-  disabled?: boolean
-}>()
-const emits = defineEmits(['update:modelValue'])
-
-const currentValue = ref(props.modelValue || (props.desc.multiple ? [] : ''))
-emits('update:modelValue', currentValue)
-
-const attrs = ref({} as any)
-const options = reactive([] as any[])
-const oldQuery = ref(null) as any
-const tempAttr = { clearable: true, ...useAttrs() } as any
-const isInit = ref(false)
-
-if (props.desc.allowCreate) {
-  tempAttr.filterable = true
-}
-
-// 如果是远程加载
-if (props.desc.remote) {
-  tempAttr.remote = true
-  tempAttr.filterable = true
-  tempAttr.remoteShowSuffix = true
-  tempAttr.loadingText = '远程查询中...'
-  tempAttr.remoteMethod = async (query: string) => {
-    if (query !== undefined && query !== null) {
-      if (oldQuery.value !== query) {
-        oldQuery.value = query
-        options.splice(0, options.length, ...(await props.desc.remote(query)))
-        if (query === '') {
-          // 判断是否有默认选项
-          if (props.desc.defaultItem) {
-            // 这里需要判断下默认值是否已经出现在了options中，如果存在，则需要删除
-            const index = options.findIndex((item) => item.value === props.desc.defaultItem.value)
-            if (index >= 0) {
-              options.splice(index, 1)
-            }
-            options.unshift(props.desc.defaultItem)
-          }
-        }
-      }
-    }
-  }
-}
-
-/**
- * 这里单独处理下事件
- */
-const onEvents = computed(() => {
-  const tempOn = {} as any
-  if (props.desc?.on) {
-    Object.keys(props.desc.on).map((key: string) => {
-      tempOn[key] = () => {
-        props.desc.on[key](
-          props.formData,
-          options.find((item) => item.value === currentValue.value),
-          props.rowIndex
-        )
-      }
-    })
-  }
-  return tempOn
-})
-
-// 如果options为空，则默认执行一次查询
-if (options.length <= 0 && props.desc.remote && (props.desc.initLoad ?? true)) {
-  tempAttr.remoteMethod('')
-}
-
-// 这里处理下tip
-const tip = computed(() => (optionItem: any) => {
-  return props.desc.optionTip(optionItem)
-})
-
-onBeforeMount(async () => {
-  attrs.value = await getAttrs(props, tempAttr)
-  isInit.value = true
-})
-
-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(
-  () => currentValue.value,
-  (val: any) => {
-    if (attrs.value.allowCreate) {
-      if (val && Array.isArray(val) && (val as Array<any>).some((item) => typeof item === 'string' && item.length > (defaultConf.form?.leng.input || 20))) {
-        ElMessage.warning('最大长度为： ' + (defaultConf.form?.leng.input || 20))
-        currentValue.value = (val as Array<string>).filter((item) => typeof item !== 'string' || item.length <= (defaultConf.form?.leng.input || 20))
-      }
-    }
-  }
-)
-</script>
-<style lang="scss">
-.el-plus-form-select-options {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  & > div {
-    // text-align: right;
-    color: #aaaaaa;
-    max-width: 40%;
-    font-size: 12px;
-    word-break: break-all;
-  }
-}
-.el-select-dropdown__item {
-  height: auto;
-  white-space: break-spaces;
-}
-</style>
+<template>
+  <el-select v-if="isInit" class="el-plus-form-select" :class="desc.class" :style="desc.style" v-bind="attrs" v-model="currentValue" :loading="loading" v-on="onEvents" :disabled="disabled">
+    <el-option v-for="option in options" :key="option.value || option.v" v-bind="option">
+      <div class="el-plus-form-select-options">
+        <span>{{ option.label || option.l }}</span>
+        <div v-if="desc.optionTip">{{ tip(option) }}</div>
+      </div>
+    </el-option>
+  </el-select>
+</template>
+<script lang="ts">
+export default {
+  name: 'ElPlusFormSelect',
+  inheritAttrs: false,
+  typeName: 'select',
+  customOptions: {}
+}
+</script>
+<script lang="ts" setup>
+import { ref, reactive, computed, onBeforeMount, useAttrs, watch, inject } from 'vue'
+import { ElMessage } from 'element-plus'
+import { getAttrs } from '../mixins'
+import { isEqual } from 'lodash'
+import { ICRUDConfig } from 'types'
+
+const defaultConf = inject('defaultConf') as ICRUDConfig
+const globalData = inject('globalData') as any
+
+const props = defineProps<{
+  modelValue?: number | string | Array<string>
+  field: string
+  loading?: boolean
+  desc: { [key: string]: any }
+  formData: { [key: string]: any }
+  rowIndex?: number
+  disabled?: boolean
+}>()
+const emits = defineEmits(['update:modelValue'])
+
+const currentValue = ref(props.modelValue || (props.desc.multiple ? [] : ''))
+emits('update:modelValue', currentValue)
+
+const attrs = ref({} as any)
+const options = reactive([] as any[])
+const oldQuery = ref(null) as any
+const tempAttr = { clearable: true, ...useAttrs() } as any
+const isInit = ref(false)
+
+if (props.desc.allowCreate) {
+  tempAttr.filterable = true
+}
+
+// 如果是远程加载
+if (props.desc.remote) {
+  tempAttr.remote = true
+  tempAttr.filterable = true
+  tempAttr.remoteShowSuffix = true
+  tempAttr.loadingText = '远程查询中...'
+  tempAttr.remoteMethod = async (query: string) => {
+    if (query !== undefined && query !== null) {
+      if (oldQuery.value !== query) {
+        oldQuery.value = query
+        options.splice(0, options.length, ...(await props.desc.remote(query)))
+        if (query === '') {
+          // 判断是否有默认选项
+          if (props.desc.defaultItem) {
+            // 这里需要判断下默认值是否已经出现在了options中，如果存在，则需要删除
+            const index = options.findIndex((item) => item.value === props.desc.defaultItem.value)
+            if (index >= 0) {
+              options.splice(index, 1)
+            }
+            options.unshift(props.desc.defaultItem)
+          }
+        }
+      }
+    }
+  }
+}
+
+/**
+ * 这里单独处理下事件
+ */
+const onEvents = computed(() => {
+  const tempOn = {} as any
+  if (props.desc?.on) {
+    Object.keys(props.desc.on).map((key: string) => {
+      tempOn[key] = () => {
+        props.desc.on[key](
+          props.formData,
+          options.find((item) => item.value === currentValue.value),
+          props.rowIndex
+        )
+      }
+    })
+  }
+  return tempOn
+})
+
+// 如果options为空，则默认执行一次查询
+if (options.length <= 0 && props.desc.remote && (props.desc.initLoad ?? true)) {
+  tempAttr.remoteMethod('')
+}
+
+// 这里处理下tip
+const tip = computed(() => (optionItem: any) => {
+  return props.desc.optionTip(optionItem)
+})
+
+onBeforeMount(async () => {
+  attrs.value = await getAttrs(props, tempAttr)
+  isInit.value = true
+})
+
+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(
+  () => currentValue.value,
+  (val: any) => {
+    if (attrs.value.allowCreate) {
+      if (val && Array.isArray(val) && (val as Array<any>).some((item) => typeof item === 'string' && item.length > (defaultConf.form?.leng.input || 20))) {
+        ElMessage.warning('最大长度为： ' + (defaultConf.form?.leng.input || 20))
+        currentValue.value = (val as Array<string>).filter((item) => typeof item !== 'string' || item.length <= (defaultConf.form?.leng.input || 20))
+      }
+    }
+  }
+)
+</script>
+<style lang="scss">
+.el-plus-form-select-options {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  & > div {
+    // text-align: right;
+    color: #aaaaaa;
+    max-width: 40%;
+    font-size: 12px;
+    word-break: break-all;
+  }
+}
+.el-select-dropdown__item {
+  height: auto;
+  white-space: break-spaces;
+}
+</style>
+types

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

@@ -1,51 +1,52 @@
-<template>
-  <el-input v-if="isInit" :class="desc.class" :style="desc.style" type="textarea" v-bind="attrs" v-model="currentValue" v-on="onEvents" :disabled="disabled"> </el-input>
-</template>
-<script lang="ts">
-export default {
-  name: 'ElPlusFormTextarea',
-  inheritAttrs: false,
-  typeName: 'textarea',
-  customOptions: {}
-}
-</script>
-<script lang="ts" setup>
-import { ref, useAttrs, watch, onBeforeMount, inject } from 'vue'
-import { getAttrs, getEvents } from '../mixins'
-import { ICRUDConfig } from 'types/formList'
-
-const defaultConf = inject('defaultConf') as ICRUDConfig
-
-const props = defineProps<{
-  modelValue?: string | null
-  field: string
-  loading?: boolean
-  desc: { [key: string]: any }
-  formData: { [key: string]: any }
-  disabled?: boolean
-}>()
-const emits = defineEmits(['update:modelValue', 'validateThis'])
-const attrs = ref({} as any)
-const isInit = ref(false)
-const onEvents = ref(getEvents(props))
-
-const currentValue = ref(props.modelValue)
-emits('update:modelValue', currentValue)
-
-onBeforeMount(async () => {
-  attrs.value = await getAttrs(props, { maxlength: defaultConf.form?.leng.textare, showWordLimit: true, rows: 3, ...useAttrs() })
-  isInit.value = true
-})
-
-watch(
-  () => props.modelValue,
-  (data: string | null | undefined) => {
-    // 这里要截取一下字符串长度
-    if (data && data.length > attrs.value.maxlength) {
-      data = data.substring(0, attrs.value.maxlength)
-    }
-    currentValue.value = data
-  },
-  { immediate: true }
-)
-</script>
+<template>
+  <el-input v-if="isInit" :class="desc.class" :style="desc.style" type="textarea" v-bind="attrs" v-model="currentValue" v-on="onEvents" :disabled="disabled"> </el-input>
+</template>
+<script lang="ts">
+export default {
+  name: 'ElPlusFormTextarea',
+  inheritAttrs: false,
+  typeName: 'textarea',
+  customOptions: {}
+}
+</script>
+<script lang="ts" setup>
+import { ref, useAttrs, watch, onBeforeMount, inject } from 'vue'
+import { getAttrs, getEvents } from '../mixins'
+import { ICRUDConfig } from 'types'
+
+const defaultConf = inject('defaultConf') as ICRUDConfig
+
+const props = defineProps<{
+  modelValue?: string | null
+  field: string
+  loading?: boolean
+  desc: { [key: string]: any }
+  formData: { [key: string]: any }
+  disabled?: boolean
+}>()
+const emits = defineEmits(['update:modelValue', 'validateThis'])
+const attrs = ref({} as any)
+const isInit = ref(false)
+const onEvents = ref(getEvents(props))
+
+const currentValue = ref(props.modelValue)
+emits('update:modelValue', currentValue)
+
+onBeforeMount(async () => {
+  attrs.value = await getAttrs(props, { maxlength: defaultConf.form?.leng.textare, showWordLimit: true, rows: 3, ...useAttrs() })
+  isInit.value = true
+})
+
+watch(
+  () => props.modelValue,
+  (data: string | null | undefined) => {
+    // 这里要截取一下字符串长度
+    if (data && data.length > attrs.value.maxlength) {
+      data = data.substring(0, attrs.value.maxlength)
+    }
+    currentValue.value = data
+  },
+  { immediate: true }
+)
+</script>
+types