el-plus-crud 0.0.49 → 0.0.51

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

@@ -71,9 +71,9 @@ function dialogSuccess(formBack: IFormBack) {
     if (props.tableRef) {
       ElMessage.success(props.successTip)
       props.tableRef.reload()
-      close()
+      currentShow.value = false
       setTimeout(() => {
-        formBack.callback()
+        formBack.callBack()
       }, 200)
     }
   }
@@ -85,6 +85,4 @@ function dialogSuccess(formBack: IFormBack) {
 function handelClosed() {
   refElPlusDialogForm.value?.clear()
 }
-
-defineExpose({ open, close })
 </script>

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

@@ -84,11 +84,31 @@ function setComponentRef(el: any, key: string) {
 }
 
 //重置
-const handleReset = () => {
+function handleReset() {
   formRefs.value.map((item, index, arr) => {
     index === arr.length - 1 ? '' : item.clearValid()
   })
 }
+
+/**
+ * 校验
+ */
+async function validate() {
+  return await Promise.all(formRefs.value.map((tempRef) => tempRef.validate()))
+}
+
+/**
+ * 获取数据
+ */
+function getData() {
+  const tempData = {} as any
+  formRefs.value.map((tempRef) => {
+    Object.assign(tempData, tempRef.getData())
+  })
+  return tempData
+}
+
+defineExpose({ validate, getData })
 </script>
 <style lang="scss">
 .el-plus-form-group {

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

@@ -1,62 +1,62 @@
-<template>
-  <el-cascader v-if="isInit" class="ElPlusFormArea-panel" v-bind="attrs" v-on="onEvents" v-model="currentValue" :disabled="disabled" :options="areaList" />
-</template>
-<script lang="ts">
-export default {
-  name: 'ElPlusFormArea',
-  inheritAttrs: false,
-  typeName: 'area',
-  customOptions: {}
-}
-</script>
-<script lang="ts" setup>
-import { onMounted, ref, useAttrs, onBeforeMount, inject } from 'vue'
-import { getAttrs, getEvents } from '../mixins'
-
-const globalData = inject('globalData') as any
-
-const props = defineProps<{
-  modelValue?: Array<any> | null
-  field: string
-  desc: { [key: string]: any }
-  formData: { [key: string]: any }
-  disabled?: boolean
-}>()
-
-const emits = defineEmits(['update:modelValue'])
-const areaList = ref([] as any)
-const attrs = ref({} as any)
-const isInit = ref(false)
-const onEvents = ref(getEvents(props))
-const currentValue = ref(props.modelValue)
-
-emits('update:modelValue', currentValue)
-
-/**
- * 远程加载数据
- * @param node
- * @param resolve
- */
-// async function lazyLoad(node: any, resolve: any) {
-//   resolve(
-//     ((await queryAreaByPId(node && node.value ? node.value : '0')) as Array<any>).map((item) => {
-//       item.leaf = true
-//       return item
-//     })
-//   )
-// }
-
-onBeforeMount(async () => {
-  attrs.value = await getAttrs(props, { props: { value: 'id', label: 'name', children: 'childs', checkStrictly: !!props.desc.checkStrictly }, clearable: true, filterable: true, ...useAttrs() })
-  isInit.value = true
-})
-
-onMounted(async () => {
-  areaList.value = (globalData.areaList || []) as any[]
-})
-</script>
-<style lang="scss" scoped>
-.ElPlusFormArea-panel {
-  display: flex;
-}
-</style>
+<template>
+  <el-cascader v-if="isInit" class="ElPlusFormArea-panel" v-bind="attrs" v-on="onEvents" v-model="currentValue" :disabled="disabled" :options="areaList" />
+</template>
+<script lang="ts">
+export default {
+  name: 'ElPlusFormArea',
+  inheritAttrs: false,
+  typeName: 'area',
+  customOptions: {}
+}
+</script>
+<script lang="ts" setup>
+import { onMounted, ref, useAttrs, onBeforeMount, inject } from 'vue'
+import { getAttrs, getEvents } from '../mixins'
+
+const globalData = inject('globalData') as any
+
+const props = defineProps<{
+  modelValue?: Array<any> | null
+  field: string
+  desc: { [key: string]: any }
+  formData: { [key: string]: any }
+  disabled?: boolean
+}>()
+
+const emits = defineEmits(['update:modelValue'])
+const areaList = ref([] as any)
+const attrs = ref({} as any)
+const isInit = ref(false)
+const onEvents = ref(getEvents(props))
+const currentValue = ref(props.modelValue)
+
+emits('update:modelValue', currentValue)
+
+/**
+ * 远程加载数据
+ * @param node
+ * @param resolve
+ */
+// async function lazyLoad(node: any, resolve: any) {
+//   resolve(
+//     ((await queryAreaByPId(node && node.value ? node.value : '0')) as Array<any>).map((item) => {
+//       item.leaf = true
+//       return item
+//     })
+//   )
+// }
+
+onBeforeMount(async () => {
+  attrs.value = await getAttrs(props, { props: { value: 'id', label: 'name', children: 'childs', checkStrictly: !!props.desc.checkStrictly }, clearable: true, filterable: true, ...useAttrs() })
+  isInit.value = true
+})
+
+onMounted(async () => {
+  areaList.value = (globalData.areaList || []) as any[]
+})
+</script>
+<style lang="scss" scoped>
+.ElPlusFormArea-panel {
+  display: flex;
+}
+</style>

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

@@ -1,103 +1,103 @@
-<template>
-  <template v-if="props.desc.confirm">
-    <el-popconfirm @confirm="onEvents.click" :title="props.desc.confirm">
-      <template #reference>
-        <el-button :loading="localLoading" :size="props.desc.size || 'small'" v-bind="attrs" :disabled="disabled">
-          <template #default v-if="!!desc.label">
-            {{ btnShowText }}
-          </template>
-        </el-button>
-      </template>
-    </el-popconfirm>
-  </template>
-
-  <el-button v-else :loading="localLoading" :size="props.desc.size || 'small'" v-bind="attrs" v-on="onEvents" :disabled="disabled" :style="{ pointerEvents: desc.isTag ? 'none' : 'all' }">
-    <template #default v-if="!!props.desc.label">
-      {{ btnShowText }}
-    </template>
-  </el-button>
-</template>
-<script lang="ts">
-export default {
-  name: 'ElPlusFormBtn',
-  inheritAttrs: false,
-  typeName: 'btn',
-  customOptions: {}
-}
-</script>
-<script lang="ts" setup>
-import { cloneDeep } from 'lodash'
-import { ref, computed, useAttrs, watch } from 'vue'
-
-const props = defineProps<{
-  field?: string
-  rowIndex?: number
-  loading?: boolean
-  desc: { [key: string]: any }
-  formData?: { [key: string]: any }
-  disabled?: boolean
-}>()
-
-const localLoading = ref(props.loading ?? false)
-
-const attrs = computed(() => {
-  const attrs = Object.assign({}, useAttrs(), props.desc, props.desc?._attrs)
-  if (attrs.btnType) {
-    attrs.type = attrs.btnType
-  }
-  if (!attrs.plain) {
-    delete attrs.plain
-  }
-  return attrs
-})
-
-const onEvents = computed(() => {
-  const events = {} as any
-  if (props.desc && props.desc.on) {
-    for (const key in props.desc.on) {
-      if (key === 'click' && props.desc.mask) {
-        events[key] = function () {
-          localLoading.value = true
-          props.desc.on[key]({
-            row: props.formData,
-            callBack: () => {
-              setTimeout(() => (localLoading.value = false), 500)
-            },
-            field: props.field,
-            rowIndex: props.rowIndex
-          } as IBtnBack)
-        }
-      } else {
-        events[key] = function () {
-          props.desc.on[key]({ row: cloneDeep(props.formData || {}), field: props.field, rowIndex: props.rowIndex } as IBtnBack)
-        }
-      }
-    }
-  }
-  return events
-})
-
-const btnShowText = computed(() => {
-  if (props.desc.btnLabel) {
-    if (typeof props.desc.btnLabel === 'function') {
-      return props.desc.btnLabel(props.formData)
-    }
-    return props.desc.btnLabel
-  }
-  if (props.desc.label) {
-    if (typeof props.desc.label === 'function') {
-      return props.desc.label(props.formData)
-    }
-    return props.desc.label
-  }
-  return ''
-})
-
-watch(
-  () => props.loading,
-  (val) => {
-    localLoading.value = val
-  }
-)
-</script>
-<style lang="scss" scoped></style>
+<template>
+  <template v-if="props.desc.confirm">
+    <el-popconfirm @confirm="onEvents.click" :title="props.desc.confirm">
+      <template #reference>
+        <el-button :loading="localLoading" :size="props.desc.size || 'small'" v-bind="attrs" :disabled="disabled">
+          <template #default v-if="!!desc.label">
+            {{ btnShowText }}
+          </template>
+        </el-button>
+      </template>
+    </el-popconfirm>
+  </template>
+
+  <el-button v-else :loading="localLoading" :size="props.desc.size || 'small'" v-bind="attrs" v-on="onEvents" :disabled="disabled" :style="{ pointerEvents: desc.isTag ? 'none' : 'all' }">
+    <template #default v-if="!!props.desc.label">
+      {{ btnShowText }}
+    </template>
+  </el-button>
+</template>
+<script lang="ts">
+export default {
+  name: 'ElPlusFormBtn',
+  inheritAttrs: false,
+  typeName: 'btn',
+  customOptions: {}
+}
+</script>
+<script lang="ts" setup>
+import { cloneDeep } from 'lodash'
+import { ref, computed, useAttrs, watch } from 'vue'
+
+const props = defineProps<{
+  field?: string
+  rowIndex?: number
+  loading?: boolean
+  desc: { [key: string]: any }
+  formData?: { [key: string]: any }
+  disabled?: boolean
+}>()
+
+const localLoading = ref(props.loading ?? false)
+
+const attrs = computed(() => {
+  const attrs = Object.assign({}, useAttrs(), props.desc, props.desc?._attrs)
+  if (attrs.btnType) {
+    attrs.type = attrs.btnType
+  }
+  if (!attrs.plain) {
+    delete attrs.plain
+  }
+  return attrs
+})
+
+const onEvents = computed(() => {
+  const events = {} as any
+  if (props.desc && props.desc.on) {
+    for (const key in props.desc.on) {
+      if (key === 'click' && props.desc.mask) {
+        events[key] = function () {
+          localLoading.value = true
+          props.desc.on[key]({
+            row: props.formData,
+            callBack: () => {
+              setTimeout(() => (localLoading.value = false), 500)
+            },
+            field: props.field,
+            rowIndex: props.rowIndex
+          } as IBtnBack)
+        }
+      } else {
+        events[key] = function () {
+          props.desc.on[key]({ row: cloneDeep(props.formData || {}), field: props.field, rowIndex: props.rowIndex } as IBtnBack)
+        }
+      }
+    }
+  }
+  return events
+})
+
+const btnShowText = computed(() => {
+  if (props.desc.btnLabel) {
+    if (typeof props.desc.btnLabel === 'function') {
+      return props.desc.btnLabel(props.formData)
+    }
+    return props.desc.btnLabel
+  }
+  if (props.desc.label) {
+    if (typeof props.desc.label === 'function') {
+      return props.desc.label(props.formData)
+    }
+    return props.desc.label
+  }
+  return ''
+})
+
+watch(
+  () => props.loading,
+  (val) => {
+    localLoading.value = val
+  }
+)
+</script>
+<style lang="scss" scoped></style>

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

@@ -1,134 +1,140 @@
-<template>
-  <div class="el-plus-form-btn-group" :style="{ 'justify-content': getAlignItems }">
-    <template v-for="(item, i) in localBtnList" :key="i + (item.label || item.title || '')">
-      <ElPlusFormBtn type="primary" :field="field" :desc="item || {}" :formData="formData" :plain="(item && item.plain) ?? desc.plain ?? true" :disabled="disabled" :text="desc.text" :rowIndex="rowIndex" />
-    </template>
-    <template v-if="limitList && limitList.length > 0">
-      <el-dropdown class="group-menu-btn" :size="desc.size || 'small'" :disabled="disabled">
-        <el-button type="primary" :size="desc.size || 'small'" :plain="desc.plain ?? true"> 更多<i class="ele-ArrowDown el-icon--right" /> </el-button>
-        <template #dropdown>
-          <el-dropdown-menu>
-            <el-dropdown-item v-for="(item, i) in limitList" :key="i + (item.label || item.title)" v-on="handelEvelt(item)">
-              {{ item.label || item.title }}
-            </el-dropdown-item>
-          </el-dropdown-menu>
-        </template>
-      </el-dropdown>
-    </template>
-  </div>
-</template>
-<script lang="ts">
-export default {
-  name: 'ElPlusFormBtns',
-  inheritAttrs: false,
-  typeName: 'btns',
-  customOptions: {}
-}
-</script>
-<script lang="ts" setup>
-import { ref, computed, watch, onMounted } from 'vue'
-import ElPlusFormBtn from './ElPlusFormBtn.vue'
-import { ElMessageBox } from 'element-plus'
-
-const props = defineProps<{
-  field: string
-  rowIndex?: number
-  desc: { [key: string]: any }
-  formData: { [key: string]: any }
-  disabled?: boolean
-}>()
-
-const localBtnList = ref([] as any[])
-const limitList = ref([] as any[])
-
-const getAlignItems = computed(() => {
-  switch (props.desc.align) {
-    case 'right':
-      return 'flex-end'
-    case 'center':
-      return 'center'
-    case undefined:
-    case 'left':
-      return 'flex-start'
-    default:
-      return 'flex-start'
-  }
-})
-
-const handelEvelt = computed(() => {
-  return (item: any) => {
-    const events = {} as any
-    if (item && item.on) {
-      for (const key in item.on) {
-        if (key === 'click' && item.confirm) {
-          events[key] = function () {
-            ElMessageBox.confirm(item.confirm, '提示', {
-              type: 'warning'
-            }).then(() => {
-              item.on[key]({ row: props.formData, field: props.field, rowIndex: props.rowIndex } as IBtnBack)
-            })
-          }
-        } else {
-          events[key] = function () {
-            item.on[key]({ row: props.formData, field: props.field, rowIndex: props.rowIndex } as IBtnBack)
-          }
-        }
-      }
-    }
-    return events
-  }
-})
-
-// 初始化
-const initBtnList = () => {
-  const tempList = [] as any[]
-  if (props.desc.btns.length > 0) {
-    props.desc.btns.map((item: any) => {
-      if (handelItemVIf(item)) {
-        tempList.push(item)
-      }
-    })
-  }
-  localBtnList.value = tempList
-  const limit = props.desc.limit || 3
-  if (localBtnList.value.length > limit) {
-    limitList.value = localBtnList.value.splice(limit - 1)
-  }
-}
-// 执行一次vif的处理
-const handelItemVIf = (formItem: any): Boolean => {
-  if (typeof formItem.vif === 'function') {
-    return Boolean(runFnGetData(formItem.vif))
-  } else if (typeof formItem.vif === 'boolean') {
-    return formItem.vif
-  }
-  return true
-}
-// 执行函数,获取相关数据
-const runFnGetData = (fn: Function) => {
-  return fn(props.formData)
-}
-
-watch(
-  () => props.desc,
-  () => initBtnList()
-)
-watch(
-  () => props.formData,
-  () => initBtnList()
-)
-
-onMounted(() => {
-  initBtnList()
-})
-</script>
-
-<style lang="scss">
-.el-plus-form-btn-group {
-  display: flex;
-
-  .group-menu-btn {
-    margin-left: 10px;
-  }
-}
-</style>
+<template>
+  <div class="el-plus-form-btn-group" :style="{ 'justify-content': getAlignItems }">
+    <template v-for="(item, i) in localBtnList" :key="i + (item.label || item.title || '')">
+      <template v-if="item.elType === 'upload'">
+        <ElPlusFormUpbtn type="primary" :field="field" :desc="item || {}" :formData="formData" :plain="(item && item.plain) ?? desc.plain ?? true" :disabled="disabled" :text="desc.text" :rowIndex="rowIndex" />
+      </template>
+      <template v-else>
+        <ElPlusFormBtn type="primary" :field="field" :desc="item || {}" :formData="formData" :plain="(item && item.plain) ?? desc.plain ?? true" :disabled="disabled" :text="desc.text" :rowIndex="rowIndex" />
+      </template>
+    </template>
+    <template v-if="limitList && limitList.length > 0">
+      <el-dropdown class="group-menu-btn" :size="desc.size || 'small'" :disabled="disabled">
+        <el-button type="primary" :size="desc.size || 'small'" :plain="desc.plain ?? true"> 更多<i class="ele-ArrowDown el-icon--right" /> </el-button>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item v-for="(item, i) in limitList" :key="i + (item.label || item.title)" v-on="handelEvelt(item)">
+              {{ item.label || item.title }}
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </template>
+  </div>
+</template>
+<script lang="ts">
+export default {
+  name: 'ElPlusFormBtns',
+  inheritAttrs: false,
+  typeName: 'btns',
+  customOptions: {}
+}
+</script>
+<script lang="ts" setup>
+import { ref, computed, watch, onMounted } from 'vue'
+import ElPlusFormBtn from './ElPlusFormBtn.vue'
+import ElPlusFormUpbtn from './ElPlusFormUpbtn.vue'
+import { ElMessageBox } from 'element-plus'
+
+const props = defineProps<{
+  field: string
+  rowIndex?: number
+  desc: { [key: string]: any }
+  formData: { [key: string]: any }
+  disabled?: boolean
+}>()
+
+const localBtnList = ref([] as any[])
+const limitList = ref([] as any[])
+
+const getAlignItems = computed(() => {
+  switch (props.desc.align) {
+    case 'right':
+      return 'flex-end'
+    case 'center':
+      return 'center'
+    case undefined:
+    case 'left':
+      return 'flex-start'
+    default:
+      return 'flex-start'
+  }
+})
+
+const handelEvelt = computed(() => {
+  return (item: any) => {
+    const events = {} as any
+    if (item && item.on) {
+      for (const key in item.on) {
+        if (key === 'click' && item.confirm) {
+          events[key] = function () {
+            ElMessageBox.confirm(item.confirm, '提示', {
+              type: 'warning'
+            }).then(() => {
+              item.on[key]({ row: props.formData, field: props.field, rowIndex: props.rowIndex } as IBtnBack)
+            })
+          }
+        } else {
+          events[key] = function () {
+            item.on[key]({ row: props.formData, field: props.field, rowIndex: props.rowIndex } as IBtnBack)
+          }
+        }
+      }
+    }
+    return events
+  }
+})
+
+// 初始化
+const initBtnList = () => {
+  const tempList = [] as any[]
+  if (props.desc.btns.length > 0) {
+    props.desc.btns.map((item: any) => {
+      if (handelItemVIf(item)) {
+        tempList.push(item)
+      }
+    })
+  }
+  localBtnList.value = tempList
+  const limit = props.desc.limit || 3
+  if (localBtnList.value.length > limit) {
+    limitList.value = localBtnList.value.splice(limit - 1)
+  }
+}
+// 执行一次vif的处理
+const handelItemVIf = (formItem: any): Boolean => {
+  if (typeof formItem.vif === 'function') {
+    return Boolean(runFnGetData(formItem.vif))
+  } else if (typeof formItem.vif === 'boolean') {
+    return formItem.vif
+  }
+  return true
+}
+// 执行函数,获取相关数据
+const runFnGetData = (fn: Function) => {
+  return fn(props.formData)
+}
+
+watch(
+  () => props.desc,
+  () => initBtnList()
+)
+watch(
+  () => props.formData,
+  () => initBtnList()
+)
+
+onMounted(() => {
+  initBtnList()
+})
+</script>
+
+<style lang="scss">
+.el-plus-form-btn-group {
+  display: flex;
+
+  .group-menu-btn {
+    margin-left: 10px;
+  }
+}
+</style>