el-plus-crud 0.0.2

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

@@ -0,0 +1,39 @@
+<template>
+  <el-input :class="desc.class" :show-password="true" 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-input>
+</template>
+<script lang="ts">
+export default {
+  name: 'ElPlusFormPassword',
+  inheritAttrs: false,
+  typeName: 'password',
+  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
+  loading?: boolean
+  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', maxlength: 20, ...useAttrs() })
+})
+</script>

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

@@ -0,0 +1,42 @@
+<template>
+  <el-radio-group class="ElPlusFormRadio-panel" v-bind="attrs" v-on="onEvents" v-model="currentValue">
+    <el-radio v-for="option of attrs.options" :key="option.value" :label="option.value">
+      {{ option.l || option.label }}
+    </el-radio>
+  </el-radio-group>
+</template>
+<script lang="ts">
+export default {
+  name: 'ElPlusFormRadio',
+  inheritAttrs: false,
+  typeName: 'radio',
+  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>
+.ElPlusFormRadio-panel {
+  display: flex;
+}
+</style>

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

@@ -0,0 +1,38 @@
+<template>
+  <el-rate class="ElPlusFormRate-panel" v-bind="attrs" v-on="onEvents" v-model="currentValue" />
+</template>
+<script lang="ts">
+export default {
+  name: 'ElPlusFormRate',
+  inheritAttrs: false,
+  typeName: 'rate',
+  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>
+.ElPlusFormRate-panel {
+  display: flex;
+}
+</style>

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

@@ -0,0 +1,149 @@
+<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">
+    <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'
+
+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
+}>()
+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)))
+      }
+    }
+  }
+}
+
+/**
+ * 这里单独处理下事件
+ */
+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 > 20)) {
+        ElMessage.warning('最大长度为： ' + 20)
+        currentValue.value = (val as Array<string>).filter((item) => typeof item !== 'string' || item.length <= 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>

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

@@ -0,0 +1,38 @@
+<template>
+  <el-slider class="ElPlusFormSlider-panel" v-bind="attrs" v-on="onEvents" v-model="currentValue" />
+</template>
+<script lang="ts">
+export default {
+  name: 'ElPlusFormSlider',
+  inheritAttrs: false,
+  typeName: 'slider',
+  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>
+.ElPlusFormSlider-panel {
+  display: flex;
+}
+</style>

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

@@ -0,0 +1,67 @@
+<template>
+  <div class="ElPlusFormStatus-panel">
+    <i v-if="currentValue === 0" class="status-danger" />
+    <i v-else-if="currentValue === 1" class="status-success" />
+    <i v-else-if="currentValue === 2" class="status-warning" />
+    <i v-else-if="currentValue === 3" class="status-info" />
+    <div :class="desc.class" :style="desc.style" v-bind="attrs" v-on="onEvents">
+      {{ attrs.formatedValue || currentValue }}
+    </div>
+  </div>
+</template>
+<script lang="ts">
+export default {
+  name: 'ElPlusFormStatus',
+  inheritAttrs: false,
+  typeName: 'status',
+  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>
+.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;
+  }
+  .status-danger {
+    background: #f56c6c;
+  }
+  .status-success {
+    background: #67c23a;
+  }
+  .status-warning {
+    background: #e6a23c;
+  }
+  .status-info {
+    background: #909399;
+  }
+}
+</style>

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

@@ -0,0 +1,38 @@
+<template>
+  <div class="el-plus-form-switch">
+    <el-switch v-if="isInit" v-bind="attrs" v-on="onEvents" v-model="currentValue" />
+  </div>
+</template>
+<script lang="ts">
+export default {
+  name: 'ElPlusFormSwitch',
+  inheritAttrs: false,
+  typeName: 'switch',
+  customOptions: {}
+}
+</script>
+<script lang="ts" setup>
+import { ref, useAttrs, onBeforeMount } from 'vue'
+import { getAttrs, getEvents } from '../mixins'
+
+const props = defineProps<{
+  modelValue?: number | null
+  field: string
+  loading?: boolean
+  desc: { [key: string]: any }
+  formData: { [key: string]: any }
+}>()
+const emits = defineEmits(['update:modelValue'])
+
+const currentValue = ref(props.modelValue)
+emits('update:modelValue', currentValue)
+
+const isInit = ref(false)
+const attrs = ref({} as any)
+const onEvents = ref(getEvents(props))
+
+onBeforeMount(async () => {
+  attrs.value = await getAttrs(props, { activeValue: 1, inactiveValue: 0, clearable: true, ...useAttrs() })
+  isInit.value = true
+})
+</script>

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

@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <el-tag v-bind="attrs" :size="attrs.size || 'small'" :type="tagType !== '--' ? tagType : ''" v-on="onEvents">
+      {{ formatValue || modelValue }}
+    </el-tag>
+  </div>
+</template>
+<script lang="ts">
+export default {
+  name: 'ElPlusFormTag',
+  inheritAttrs: false,
+  typeName: 'tag',
+  customOptions: {}
+}
+</script>
+<script lang="ts" setup>
+import { ref, watch, useAttrs, onBeforeMount, inject } from 'vue'
+import { getAttrs, getEvents } from '../mixins'
+
+const format = inject('format') as any
+
+const props = defineProps<{
+  modelValue?: string | number | '' | null
+  field: string
+  loading?: boolean
+  desc: { [key: string]: any }
+  formData: { [key: string]: any }
+}>()
+
+const attrs = ref({} as any)
+const onEvents = ref(getEvents(props))
+
+const formatValue = ref('' as any)
+// 格式化Type类型
+const tagType = ref('' as any)
+
+onBeforeMount(async () => {
+  attrs.value = await getAttrs(props, { ...useAttrs() })
+})
+
+watch(
+  () => props.modelValue,
+  async () => {
+    if (!props.desc.tagType) {
+      tagType.value = ''
+    } else {
+      if (typeof props.desc.tagType === 'function') {
+        // 如果有方法类型的判断，则需要启用动态监测
+        tagType.value = await props.desc.tagType(props.modelValue, props.formData, props.field)
+      } else if (typeof props.desc.tagType === 'string') {
+        tagType.value = (await format)[props.desc.tagType](props.modelValue, props.formData, props.field)
+      } else {
+        tagType.value = ''
+      }
+    }
+  },
+  { immediate: true }
+)
+
+watch(
+  () => props.modelValue,
+  async () => {
+    if (!props.desc.format) {
+      formatValue.value = props.modelValue === '' ? '—' : props.modelValue ?? '—'
+    } 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 = (await format)[props.desc.format](props.modelValue, props.formData, props.field)
+      } else {
+        formatValue.value = props.modelValue || '—'
+      }
+    }
+  },
+  { immediate: true }
+)
+</script>

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

@@ -0,0 +1,115 @@
+<template>
+  <div class="ele-form-text" :class="[...(desc.class || []), desc.linkType ? 'ele-form-text-click' : '']" :style="desc.style" v-bind="attrs" v-on="onEvents">
+    <span v-if="desc.title">{{ desc.title + ': ' }}</span>
+    <i v-if="desc.icon" :class="[formData.icon]"></i>
+    {{ formatValue }}
+    <el-popover v-if="desc.content && popoverContent" placement="bottom" :width="200" trigger="hover" effect="dark" :content="popoverContent">
+      <template #reference>
+        <el-icon style="color: #f56c6c; font-size: 16px; margin-left: 10px"><WarningFilled /></el-icon>
+      </template>
+    </el-popover>
+  </div>
+</template>
+<script lang="ts">
+export default {
+  name: 'ElPlusFormText',
+  inheritAttrs: false,
+  typeName: 'text',
+  customOptions: {}
+}
+</script>
+<script lang="ts" setup>
+import { ref, watch, computed, onBeforeMount, useAttrs, inject } from 'vue'
+import { getEvents, getAttrs } from '../mixins'
+import { WarningFilled } from '@element-plus/icons-vue'
+
+const showInfo = inject('showInfo') as Function
+const format = inject('format') as any
+
+const props = defineProps<{
+  modelValue?: any
+  field: string
+  loading?: boolean
+  desc: { [key: string]: any }
+  formData: { [key: string]: any }
+}>()
+
+const attrs = ref({} as any)
+
+const onEvents = computed(() => {
+  const tempOn = getEvents(props)
+
+  // 如果这里有linkType，则会替换点击事件
+  let linkId = props.desc.linkId || 'id'
+  if (typeof linkId === 'function') {
+    linkId = linkId(props.modelValue, props.formData)
+  } else {
+    linkId = props.formData[linkId]
+  }
+  if (props.desc.linkType && linkId) {
+    let linkType = props.desc.linkType
+    let linkLabel = props.desc.linkLabel || ''
+    if (typeof linkType === 'function') {
+      linkType = linkType(props.modelValue, props.formData)
+    }
+    if (typeof linkLabel === 'function') {
+      linkLabel = linkLabel(props.modelValue, props.formData)
+    } else {
+      linkLabel = props.formData[linkLabel]
+    }
+    tempOn.click = () => {
+      // 显示详情
+      showInfo(linkId, linkType, linkLabel)
+    }
+  }
+  return tempOn
+})
+
+const formatValue = ref('' as any)
+
+onBeforeMount(async () => {
+  attrs.value = await getAttrs(props, useAttrs())
+})
+
+// 鼠标悬浮
+const popoverContent = computed(() => {
+  if (typeof props.desc.content === 'function') {
+    // 如果有方法类型的判断，则需要启用动态监测
+    return props.desc.content(props.modelValue, props.formData, props.field)
+  } else {
+    return props.desc.content || ''
+  }
+})
+
+watch(
+  () => props.modelValue,
+  async () => {
+    if (!props.desc.format) {
+      formatValue.value = props.modelValue === '' ? '—' : props.modelValue ?? '—'
+    } 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>
+.ele-form-text {
+  color: #606266;
+  word-break: break-all;
+  display: flex;
+  align-items: center;
+}
+
+.ele-form-text-click {
+  color: #1890ff;
+  cursor: pointer;
+}
+</style>

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

@@ -0,0 +1,45 @@
+<template>
+  <el-input :class="desc.class" :style="desc.style" type="textarea" v-bind="attrs" v-model="currentValue" v-on="onEvents"> </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 } from 'vue'
+import { getAttrs, getEvents } from '../mixins'
+
+const props = defineProps<{
+  modelValue?: string | null
+  field: string
+  loading?: boolean
+  desc: { [key: string]: any }
+  formData: { [key: string]: any }
+}>()
+const emits = defineEmits(['update:modelValue', 'validateThis'])
+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, { maxlength: 100, showWordLimit: true, rows: 3, ...useAttrs() })
+})
+
+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>