el-plus-crud 0.0.2

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

@@ -0,0 +1,107 @@
+<template>
+  <el-dialog class="el-plus-form-dialog" v-model="currentShow" :title="props.title" v-bind="dialogAttrs" destroy-on-close>
+    <!-- title 插槽 -->
+    <template #header>
+      <slot name="header" />
+    </template>
+    <ElPlusForm ref="refElPlusDialogForm" style="padding: 20px" :isDialog="true" v-model="currentValue" v-bind="attrs" :success="dialogSuccess" @cancel="close">
+      <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, nextTick } 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() {
+    // 打开时，清空一下校验
+    if (props.show) {
+      nextTick(() => {
+        setTimeout(() => {
+          refElPlusDialogForm.value?.clearValid()
+        }, 10)
+      })
+    }
+    return props.show
+  },
+  set(val: boolean) {
+    val ? open() : close()
+  }
+})
+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 open() {
+  emits('update:show', true)
+}
+
+/**
+ * 关闭弹框
+ */
+function close() {
+  emits('update:show', false)
+  // 这里清空一下表单
+  refElPlusDialogForm.value?.clear()
+}
+
+defineExpose({ open, close })
+</script>

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

@@ -0,0 +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>

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

@@ -0,0 +1,96 @@
+<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">
+          <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" :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 { ref, computed, useAttrs, watch } from 'vue'
+import { cloneDeep } from 'lodash'
+
+const props = defineProps<{
+  field?: string
+  rowIndex?: number
+  loading?: boolean
+  desc: { [key: string]: any }
+  formData?: { [key: string]: any }
+}>()
+
+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.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

@@ -0,0 +1,133 @@
+<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" :text="desc.text" :rowIndex="rowIndex" />
+    </template>
+    <template v-if="limitList && limitList.length > 0">
+      <el-dropdown class="group-menu-btn" :size="desc.size || 'small'">
+        <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 }
+}>()
+
+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>

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

@@ -0,0 +1,38 @@
+<template>
+  <el-cascader class="ElPlusFormCascader-panel" v-bind="attrs" v-on="onEvents" :options="props.desc.options" v-model="currentValue" />
+</template>
+<script lang="ts">
+export default {
+  name: 'ElPlusFormCascader',
+  inheritAttrs: false,
+  typeName: 'cascader',
+  customOptions: {}
+}
+</script>
+<script lang="ts" setup>
+import { ref, useAttrs, onBeforeMount } from 'vue'
+import { getAttrs, getEvents } from '../mixins'
+
+const props = defineProps<{
+  modelValue?: Array<string> | string | null
+  field: string
+  desc: { [key: string]: any }
+  formData: { [key: string]: any }
+}>()
+
+const emits = defineEmits(['update:modelValue'])
+const currentValue = ref(typeof props.modelValue === 'string' ? [props.modelValue] : props.modelValue)
+emits('update:modelValue', currentValue)
+
+const attrs = ref({} as any)
+const onEvents = ref(getEvents(props))
+
+onBeforeMount(async () => {
+  attrs.value = await getAttrs(props, { clearable: true, props: { value: 'value', label: 'label', children: 'children', checkStrictly: !!props.desc.checkStrictly }, ...useAttrs() })
+})
+</script>
+<style lang="scss" scoped>
+.ElPlusFormCascader-panel {
+  display: flex;
+}
+</style>

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

@@ -0,0 +1,51 @@
+<template>
+  <el-cascader-panel class="ElPlusFormCascaderPanel-panel" v-bind="attrs" v-on="onEvents" :options="props.desc.options" v-model="currentValue">
+    <!-- 非作用域插槽 -->
+    <template v-for="(item, key, index) in slots" #[key]="data" :key="index">
+      <slot :name="key" :data="data" />
+    </template>
+  </el-cascader-panel>
+</template>
+<script lang="ts">
+export default {
+  name: 'ElPlusFormCascaderPanel',
+  inheritAttrs: false,
+  typeName: 'cascaderPanel',
+  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, {
+    props: { value: 'value', label: 'label', children: 'children' },
+    fetchSuggestions(s: any, cb: Function) {
+      const res: any[] = []
+      cb(res)
+    },
+    ...useAttrs()
+  })
+})
+</script>
+<style lang="scss" scoped>
+.ElPlusFormCascaderPanel-panel {
+  display: flex;
+}
+</style>

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

@@ -0,0 +1,42 @@
+<template>
+  <el-checkbox-group class="ElPlusFormCheckbox-panel" v-bind="attrs" v-on="onEvents" v-model="currentValue">
+    <el-checkbox v-for="option of desc.options" :key="option.value" :label="option.value" v-bind="option.attrs">
+      {{ option.text }}
+    </el-checkbox>
+  </el-checkbox-group>
+</template>
+<script lang="ts">
+export default {
+  name: 'ElPlusFormCheckbox',
+  inheritAttrs: false,
+  typeName: 'checkbox',
+  customOptions: {}
+}
+</script>
+<script lang="ts" setup>
+import { ref, useAttrs, 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 attrs = ref({} as any)
+const onEvents = ref(getEvents(props))
+
+onBeforeMount(async () => {
+  attrs.value = await getAttrs(props, { ...useAttrs() })
+})
+</script>
+<style lang="scss" scoped>
+.ElPlusFormCheckbox-panel {
+  display: flex;
+}
+</style>

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

@@ -0,0 +1,42 @@
+<template>
+  <el-checkbox-group class="ElPlusFormCheckboxButton-panel" v-bind="attrs" v-on="onEvents" v-model="currentValue">
+    <el-checkbox-button v-for="option of desc.options" :key="option.value" :label="option.value" v-bind="option.attrs">
+      {{ option.text }}
+    </el-checkbox-button>
+  </el-checkbox-group>
+</template>
+<script lang="ts">
+export default {
+  name: 'ElPlusFormCheckboxButton',
+  inheritAttrs: false,
+  typeName: 'checkboxButton',
+  customOptions: {}
+}
+</script>
+<script lang="ts" setup>
+import { ref, useAttrs, 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 attrs = ref({} as any)
+const onEvents = ref(getEvents(props))
+
+onBeforeMount(async () => {
+  attrs.value = await getAttrs(props, { ...useAttrs() })
+})
+</script>
+<style lang="scss" scoped>
+.ElPlusFormCheckboxButton-panel {
+  display: flex;
+}
+</style>

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

@@ -0,0 +1,38 @@
+<template>
+  <el-color-picker class="ElPlusFormColor-panel" v-bind="attrs" v-on="onEvents" v-model="currentValue" />
+</template>
+<script lang="ts">
+export default {
+  name: 'ElPlusFormColor',
+  inheritAttrs: false,
+  typeName: 'color',
+  customOptions: {}
+}
+</script>
+<script lang="ts" setup>
+import { ref, useAttrs, 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)
+const attrs = ref({} as any)
+const onEvents = ref(getEvents(props))
+// const { attrs, slots, onEvents } = useMixins({ modelValue: props.modelValue, field: props.field, desc: props.desc, formData: props.formData, useAttrs, useSlots })
+emits('update:modelValue', currentValue)
+
+onBeforeMount(async () => {
+  attrs.value = await getAttrs(props, { ...useAttrs() })
+})
+</script>
+<style lang="scss" scoped>
+.ElPlusFormColor-panel {
+  display: flex;
+}
+</style>

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

@@ -0,0 +1,37 @@
+<template>
+  <el-date-picker class="ElPlusFormDate-panel" v-bind="attrs" v-on="onEvents" v-model="currentValue" />
+</template>
+<script lang="ts">
+export default {
+  name: 'ElPlusFormDate',
+  inheritAttrs: false,
+  typeName: 'date',
+  customOptions: {}
+}
+</script>
+<script lang="ts" setup>
+import { ref, useAttrs, 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 attrs = ref({} as any)
+const onEvents = ref(getEvents(props))
+const currentValue = ref(props.modelValue)
+emits('update:modelValue', currentValue)
+
+onBeforeMount(async () => {
+  attrs.value = await getAttrs(props, { valueFormat: 'YYYY-MM-DD HH:mm:ss', editable: false, ...useAttrs() })
+})
+</script>
+<style lang="scss" scoped>
+.ElPlusFormDate-panel {
+  display: flex;
+}
+</style>

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

@@ -0,0 +1,44 @@
+<template>
+  <el-date-picker class="el-plusF-form-daterange-panel" v-bind="attrs" v-on="onEvents" v-model="currentValue">
+    <!-- 非作用域插槽 -->
+    <template v-for="(item, key, index) in slots" #[key]="data" :key="index">
+      <slot :name="key" :data="data" />
+    </template>
+  </el-date-picker>
+</template>
+<script lang="ts">
+export default {
+  name: 'ElPlusFormDaterange',
+  inheritAttrs: false,
+  typeName: 'daterange',
+  customOptions: {}
+}
+</script>
+<script lang="ts" setup>
+import { ref, useAttrs, useSlots, onBeforeMount } from 'vue'
+import { getAttrs, getEvents } from '../mixins'
+
+const props = defineProps<{
+  modelValue?: Array<string> | Date
+  field: string
+  desc: { [key: string]: any }
+  formData: { [key: string]: any }
+}>()
+
+const emits = defineEmits(['update:modelValue'])
+const currentValue = ref(props.modelValue)
+const slots = ref(Object.assign({}, useSlots(), props.desc.slots))
+const attrs = ref({} as any)
+const onEvents = ref(getEvents(props))
+
+emits('update:modelValue', currentValue)
+
+onBeforeMount(async () => {
+  attrs.value = await getAttrs(props, { type: 'daterange', format: 'YYYY-MM-DD', valueFormat: 'x', editable: false, ...useAttrs() })
+})
+</script>
+<style lang="scss" scoped>
+.el-plusF-form-daterange-panel {
+  display: flex;
+}
+</style>