el-plus-crud 0.0.38 → 0.0.39

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

@@ -1,90 +1,90 @@
-<template>
-  <el-dialog class="el-plus-form-dialog" v-model="currentShow" :title="props.title" v-bind="dialogAttrs" @closed="handelClosed">
-    <!-- title 插槽 -->
-    <template #header>
-      <slot name="header" />
-    </template>
-    <ElPlusForm ref="refElPlusDialogForm" style="padding: 20px" :isDialog="true" v-model="currentValue" v-bind="attrs" :success="dialogSuccess" @cancel="currentShow = false">
-      <template #top>
-        <slot name="top" />
-      </template>
-      <template #default>
-        <slot name="default" />
-      </template>
-    </ElPlusForm>
-  </el-dialog>
-</template>
-<script lang="ts">
-export default {
-  name: 'ElPlusFormDialog',
-  inheritAttrs: false,
-  customOptions: {}
-}
-</script>
-<script lang="ts" setup>
-import { ref, computed, useAttrs } from 'vue'
-import ElPlusForm from './ElPlusForm.vue'
-import { ElMessage } from 'element-plus'
-
-const emits = defineEmits(['update:show', 'update:modelValue'])
-const props = withDefaults(defineProps<{ modelValue?: { [key: string]: any } | {}; show?: boolean; title?: string; tableRef?: any; success?: Function; successTip?: string }>(), {
-  title: '',
-  modelValue: () => {
-    return {}
-  },
-  show: false,
-  successTip: '操作成功!'
-})
-
-// 重新定义当前值
-const currentValue = computed({
-  get: () => props.modelValue,
-  set(val: any) {
-    emits('update:modelValue', val)
-  }
-})
-
-// 是否显示弹框
-const currentShow = computed({
-  get() {
-    return props.show
-  },
-  set(val: boolean) {
-    emits('update:show', val)
-  }
-})
-const refElPlusDialogForm = ref(null as any)
-
-// 合并属性
-const { width, top, modal, appendToBody, showClose, draggable, closeOnClickModal, ...attrs } = Object.assign({ width: '700px', draggable: true, top: '15vh', closeOnClickModal: false, showCancel: true }, useAttrs())
-// 弹框属性
-const dialogAttrs = { width, top, modal, appendToBody, showClose, draggable, closeOnClickModal }
-
-/**
- * 这里重新定义一下成功事件
- * @param formBack
- */
-function dialogSuccess(formBack: IFormBack) {
-  if (props.success) {
-    props.success(formBack)
-  } else {
-    if (props.tableRef) {
-      ElMessage.success(props.successTip)
-      props.tableRef.reload()
-      close()
-      setTimeout(() => {
-        formBack.callback()
-      }, 200)
-    }
-  }
-}
-
-/**
- * 处理弹框关闭
- */
-function handelClosed() {
-  refElPlusDialogForm.value?.clear()
-}
-
-defineExpose({ open, close })
-</script>
+<template>
+  <el-dialog class="el-plus-form-dialog" v-model="currentShow" :title="props.title" v-bind="dialogAttrs" @closed="handelClosed">
+    <!-- title 插槽 -->
+    <template #header>
+      <slot name="header" />
+    </template>
+    <ElPlusForm ref="refElPlusDialogForm" style="padding: 20px" :isDialog="true" v-model="currentValue" v-bind="attrs" :success="dialogSuccess" @cancel="currentShow = false">
+      <template #top>
+        <slot name="top" />
+      </template>
+      <template #default>
+        <slot name="default" />
+      </template>
+    </ElPlusForm>
+  </el-dialog>
+</template>
+<script lang="ts">
+export default {
+  name: 'ElPlusFormDialog',
+  inheritAttrs: false,
+  customOptions: {}
+}
+</script>
+<script lang="ts" setup>
+import { ref, computed, useAttrs } from 'vue'
+import ElPlusForm from './ElPlusForm.vue'
+import { ElMessage } from 'element-plus'
+
+const emits = defineEmits(['update:show', 'update:modelValue'])
+const props = withDefaults(defineProps<{ modelValue?: { [key: string]: any } | {}; show?: boolean; title?: string; tableRef?: any; success?: Function; successTip?: string }>(), {
+  title: '',
+  modelValue: () => {
+    return {}
+  },
+  show: false,
+  successTip: '操作成功!'
+})
+
+// 重新定义当前值
+const currentValue = computed({
+  get: () => props.modelValue,
+  set(val: any) {
+    emits('update:modelValue', val)
+  }
+})
+
+// 是否显示弹框
+const currentShow = computed({
+  get() {
+    return props.show
+  },
+  set(val: boolean) {
+    emits('update:show', val)
+  }
+})
+const refElPlusDialogForm = ref(null as any)
+
+// 合并属性
+const { width, top, modal, appendToBody, showClose, draggable, closeOnClickModal, ...attrs } = Object.assign({ width: '700px', draggable: true, top: '15vh', closeOnClickModal: false, showCancel: true }, useAttrs())
+// 弹框属性
+const dialogAttrs = { width, top, modal, appendToBody, showClose, draggable, closeOnClickModal }
+
+/**
+ * 这里重新定义一下成功事件
+ * @param formBack
+ */
+function dialogSuccess(formBack: IFormBack) {
+  if (props.success) {
+    props.success(formBack)
+  } else {
+    if (props.tableRef) {
+      ElMessage.success(props.successTip)
+      props.tableRef.reload()
+      close()
+      setTimeout(() => {
+        formBack.callback()
+      }, 200)
+    }
+  }
+}
+
+/**
+ * 处理弹框关闭
+ */
+function handelClosed() {
+  refElPlusDialogForm.value?.clear()
+}
+
+defineExpose({ open, close })
+</script>

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

@@ -1,116 +1,116 @@
-<template>
-  <div class="el-plus-form-group">
-    <template v-for="(group, i) in getGroupFowmLayout" :key="i">
-      <div class="title-line" v-if="group.title">{{ group.title }}</div>
-      <ElPlusForm v-model="currentValue" v-bind="group.formProps" :ref="(el) => setComponentRef(el, 'form' + i)" @reset="handleReset">
-        <template v-if="useSlots()['default' + i]">
-          <slot :name="'default' + i"> </slot>
-        </template>
-      </ElPlusForm>
-    </template>
-  </div>
-</template>
-<script lang="ts">
-export default {
-  name: 'ElPlusFormGroup',
-  inheritAttrs: false,
-  customOptions: {}
-}
-</script>
-<script lang="ts" setup>
-import { cloneDeep } from 'lodash'
-import { computed, ref, useSlots } from 'vue'
-import ElPlusForm, { IFormProps } from './ElPlusForm.vue'
-
-const emits = defineEmits(['update:show', 'update:modelValue', 'before-validate', 'before-request', 'request-success', 'request-error', 'request-end', 'request'])
-const props = defineProps<{
-  modelValue: { [key: string]: any } | {}
-  // 表单Group项
-  formGroup: IFormGroupConfig
-  // 提交状态
-  isLoading?: boolean
-}>()
-
-const formRefs = ref([] as any[])
-const formRefsKeys = [] as string[]
-
-// 重新定义当前值
-const currentValue = computed({
-  get: () => props.modelValue,
-  set(val: any) {
-    emits('update:modelValue', val)
-  }
-})
-
-/**
- * 获取布局，且初始化
- * @param groupItem
- */
-const getGroupFowmLayout = computed(() => {
-  const formConfigList = [] as Array<{
-    title?: string
-    column?: number
-    formProps?: IFormProps
-  }>
-  const tempFormConfig = cloneDeep(props.formGroup) as any
-  const column = props.formGroup.column || 1
-  // 移除无用
-  delete tempFormConfig.group
-  delete tempFormConfig.column
-
-  // 表单校验
-  tempFormConfig.beforeValidate = async (formData: any) => {
-    return await Promise.all(formRefs.value.map((tempRef) => tempRef.validate()))
-  }
-  // 遍历
-  props.formGroup.group.map((groupItem, i) => {
-    formConfigList.push({
-      title: groupItem.title,
-      formProps: Object.assign({ column: groupItem.column || column }, i === props.formGroup.group.length - 1 ? tempFormConfig : { showBtns: false }, groupItem || {}) as IFormProps
-    })
-  })
-  return formConfigList
-})
-
-// 设置子组件的ref-重置form的时候需要用到
-function setComponentRef(el: any, key: string) {
-  if (!el) return
-  if (formRefsKeys.indexOf(key) < 0) {
-    formRefsKeys.push(key)
-    formRefs.value.push(el)
-  }
-}
-
-//重置
-const handleReset = () => {
-  formRefs.value.map((item, index, arr) => {
-    index === arr.length - 1 ? '' : item.clearValid()
-  })
-}
-</script>
-<style lang="scss">
-.el-plus-form-group {
-  // Todo
-  /* 通用的标题-短线线 */
-  .title-line {
-    width: 100%;
-    height: 22px;
-    font-size: 16px;
-    font-weight: 500;
-    color: #222222;
-    line-height: 22px;
-    position: relative;
-    padding-left: 10px;
-    margin-bottom: 20px;
-    &::before {
-      position: absolute;
-      content: '';
-      width: 3px;
-      height: 16px;
-      left: 0;
-      top: 1px;
-      background-color: var(--el-color-primary);
-    }
-  }
-}
-</style>
+<template>
+  <div class="el-plus-form-group">
+    <template v-for="(group, i) in getGroupFowmLayout" :key="i">
+      <div class="title-line" v-if="group.title">{{ group.title }}</div>
+      <ElPlusForm v-model="currentValue" v-bind="group.formProps" :ref="(el) => setComponentRef(el, 'form' + i)" @reset="handleReset">
+        <template v-if="useSlots()['default' + i]">
+          <slot :name="'default' + i"> </slot>
+        </template>
+      </ElPlusForm>
+    </template>
+  </div>
+</template>
+<script lang="ts">
+export default {
+  name: 'ElPlusFormGroup',
+  inheritAttrs: false,
+  customOptions: {}
+}
+</script>
+<script lang="ts" setup>
+import { cloneDeep } from 'lodash'
+import { computed, ref, useSlots } from 'vue'
+import ElPlusForm, { IFormProps } from './ElPlusForm.vue'
+
+const emits = defineEmits(['update:show', 'update:modelValue', 'before-validate', 'before-request', 'request-success', 'request-error', 'request-end', 'request'])
+const props = defineProps<{
+  modelValue: { [key: string]: any } | {}
+  // 表单Group项
+  formGroup: IFormGroupConfig
+  // 提交状态
+  isLoading?: boolean
+}>()
+
+const formRefs = ref([] as any[])
+const formRefsKeys = [] as string[]
+
+// 重新定义当前值
+const currentValue = computed({
+  get: () => props.modelValue,
+  set(val: any) {
+    emits('update:modelValue', val)
+  }
+})
+
+/**
+ * 获取布局，且初始化
+ * @param groupItem
+ */
+const getGroupFowmLayout = computed(() => {
+  const formConfigList = [] as Array<{
+    title?: string
+    column?: number
+    formProps?: IFormProps
+  }>
+  const tempFormConfig = cloneDeep(props.formGroup) as any
+  const column = props.formGroup.column || 1
+  // 移除无用
+  delete tempFormConfig.group
+  delete tempFormConfig.column
+
+  // 表单校验
+  tempFormConfig.beforeValidate = async (formData: any) => {
+    return await Promise.all(formRefs.value.map((tempRef) => tempRef.validate()))
+  }
+  // 遍历
+  props.formGroup.group.map((groupItem, i) => {
+    formConfigList.push({
+      title: groupItem.title,
+      formProps: Object.assign({ column: groupItem.column || column }, i === props.formGroup.group.length - 1 ? tempFormConfig : { showBtns: false }, groupItem || {}) as IFormProps
+    })
+  })
+  return formConfigList
+})
+
+// 设置子组件的ref-重置form的时候需要用到
+function setComponentRef(el: any, key: string) {
+  if (!el) return
+  if (formRefsKeys.indexOf(key) < 0) {
+    formRefsKeys.push(key)
+    formRefs.value.push(el)
+  }
+}
+
+//重置
+const handleReset = () => {
+  formRefs.value.map((item, index, arr) => {
+    index === arr.length - 1 ? '' : item.clearValid()
+  })
+}
+</script>
+<style lang="scss">
+.el-plus-form-group {
+  // Todo
+  /* 通用的标题-短线线 */
+  .title-line {
+    width: 100%;
+    height: 22px;
+    font-size: 16px;
+    font-weight: 500;
+    color: #222222;
+    line-height: 22px;
+    position: relative;
+    padding-left: 10px;
+    margin-bottom: 20px;
+    &::before {
+      position: absolute;
+      content: '';
+      width: 3px;
+      height: 16px;
+      left: 0;
+      top: 1px;
+      background-color: var(--el-color-primary);
+    }
+  }
+}
+</style>

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

@@ -1,61 +1,61 @@
-<template>
-  <el-cascader v-if="isInit" class="ElPlusFormArea-panel" v-bind="attrs" v-on="onEvents" v-model="currentValue" :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 }
-}>()
-
-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" :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 }
+}>()
+
+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/ElPlusFormAutocomplete.vue

@@ -1,49 +1,49 @@
-<template>
-  <el-autocomplete class="ElPlusFormAutocomplete-panel" v-bind="attrs" v-on="onEvents" v-model="currentValue">
-    <!-- 作用域插槽 -->
-    <template #default="data">
-      <slot :data="data" />
-    </template>
-
-    <!-- 非作用域插槽 -->
-    <template v-for="(item, key, index) in slots" #[key]="data" :key="index">
-      <slot :name="key" :data="data" />
-    </template>
-  </el-autocomplete>
-</template>
-<script lang="ts">
-export default {
-  name: 'ElPlusFormAutocomplete',
-  inheritAttrs: false,
-  typeName: 'autocomplete',
-  customOptions: {}
-}
-</script>
-<script lang="ts" setup>
-import { ref, useAttrs, useSlots, onBeforeMount } from 'vue'
-import { getAttrs, getEvents } from '../mixins'
-
-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 slots = ref(Object.assign({}, useSlots(), props.desc.slots))
-const attrs = ref({} as any)
-const onEvents = ref(getEvents(props))
-
-onBeforeMount(async () => {
-  attrs.value = await getAttrs(props, { autocomplete: 'new-password', ...useAttrs() })
-})
-</script>
-<style lang="scss" scoped>
-.ElPlusFormAutocomplete-panel {
-  display: flex;
-}
-</style>
+<template>
+  <el-autocomplete class="ElPlusFormAutocomplete-panel" v-bind="attrs" v-on="onEvents" v-model="currentValue">
+    <!-- 作用域插槽 -->
+    <template #default="data">
+      <slot :data="data" />
+    </template>
+
+    <!-- 非作用域插槽 -->
+    <template v-for="(item, key, index) in slots" #[key]="data" :key="index">
+      <slot :name="key" :data="data" />
+    </template>
+  </el-autocomplete>
+</template>
+<script lang="ts">
+export default {
+  name: 'ElPlusFormAutocomplete',
+  inheritAttrs: false,
+  typeName: 'autocomplete',
+  customOptions: {}
+}
+</script>
+<script lang="ts" setup>
+import { ref, useAttrs, useSlots, onBeforeMount } from 'vue'
+import { getAttrs, getEvents } from '../mixins'
+
+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 slots = ref(Object.assign({}, useSlots(), props.desc.slots))
+const attrs = ref({} as any)
+const onEvents = ref(getEvents(props))
+
+onBeforeMount(async () => {
+  attrs.value = await getAttrs(props, { autocomplete: 'new-password', ...useAttrs() })
+})
+</script>
+<style lang="scss" scoped>
+.ElPlusFormAutocomplete-panel {
+  display: flex;
+}
+</style>