el-plus-crud 0.0.2

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

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

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

@@ -0,0 +1,47 @@
+<template>
+  <div class="ele-form-file" :style="{ marginTop: props.modelValue && props.modelValue.length > 0 ? '10px' : '0' }">
+    <template v-if="props.modelValue && props.modelValue.length > 0">
+      <FileIcons :files="props.modelValue" showName preview />
+    </template>
+    <span v-else class="no-img-tip">暂无</span>
+  </div>
+</template>
+<script lang="ts">
+export default {
+  name: 'ElPlusFormFile',
+  inheritAttrs: false,
+  typeName: 'file',
+  customOptions: {}
+}
+</script>
+<script lang="ts" setup>
+import FileIcons from './components/file-icons/FileIcons.vue'
+
+const props = defineProps<{
+  modelValue?: Array<IOssInfo>
+  field: string
+  loading?: boolean
+  desc: { [key: string]: any }
+  formData: { [key: string]: any }
+}>()
+</script>
+<style lang="scss">
+.ele-form-file {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-top: 10px;
+
+  .form-file-list {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .no-img-tip {
+    width: 100%;
+    color: #999999;
+    padding-left: 20px;
+  }
+}
+</style>

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

@@ -0,0 +1,113 @@
+<template>
+  <div class="ele-form-image">
+    <template v-if="imagLIst && imagLIst.length > 0">
+      <el-image v-for="(image, i) in imagLIst" :class="desc.class" :key="image" :preview-src-list="attrs.isShowPreview === false ? null : imagLIst" :initial-index="i" :src="format.imgUrl(image)" v-bind="attrs" :style="styles" v-on="onEvents" :fit="attrs.fit || 'cover'" />
+    </template>
+    <div v-else>
+      <span class="no-img-tip">—</span>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+export default {
+  name: 'ElPlusFormImage',
+  inheritAttrs: false,
+  typeName: 'image',
+  customOptions: {}
+}
+</script>
+<script lang="ts" setup>
+import { ref, computed, useAttrs, onBeforeMount, inject } from 'vue'
+import { getAttrs, getEvents } from '../mixins'
+
+// 格式化
+const format = inject('format') as any
+
+const props = defineProps<{
+  modelValue?: Array<any> | string | null
+  field: string
+  loading?: boolean
+  desc: { [key: string]: any }
+  formData: { [key: string]: any }
+}>()
+
+const attrs = ref({} as any)
+const onEvents = ref(getEvents(props))
+
+onBeforeMount(async () => {
+  attrs.value = await getAttrs(props, { isShowPreview: true, previewTeleported: true, ...useAttrs() })
+})
+
+const imagLIst = computed(() => {
+  if (!props.modelValue) {
+    return []
+  }
+  if (Array.isArray(props.modelValue)) {
+    if (typeof props.modelValue[0] === 'string') {
+      return props.modelValue
+    } else {
+      return props.modelValue.map((item) => item.shareUrl || item.furl)
+    }
+  } else if (typeof props.modelValue === 'string') {
+    return props.modelValue.split(',').map((url) => format.imgUrl(url))
+  } else {
+    // console.log('unknown image Type.....')
+  }
+  return []
+})
+
+/**
+ * 格式化样式
+ * large，default，small
+ */
+const styles = computed(() => {
+  let width = ''
+  let height = ''
+  let size = props.desc.size || 'default'
+  switch (size) {
+    case 'large':
+      width = '44px'
+      height = '44px'
+      break
+    case 'default':
+      width = '36px'
+      height = '36px'
+      break
+    case 'small':
+      width = '28px'
+      height = '28px'
+      break
+    default:
+      width = parseInt(size) + 'px'
+      height = parseInt(size) + 'px'
+      break
+  }
+  return Object.assign({}, props.desc.style, { width, height, 'max-width': width })
+})
+</script>
+<style lang="scss">
+.ele-form-image {
+  display: flex;
+  // justify-content: center;
+  flex-wrap: wrap;
+
+  .no-img-tip {
+    color: #999999;
+  }
+
+  .el-image {
+    margin-left: 10px;
+    margin-bottom: 10px;
+  }
+}
+
+.ele-form-image .el-image {
+  border-radius: 5px;
+  margin-bottom: 10px;
+
+  .el-image__error {
+    font-size: 12px;
+    line-height: 13px;
+  }
+}
+</style>

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

@@ -0,0 +1,56 @@
+<template>
+  <el-input style="display: flex" v-bind="attrs" v-on="onEvents" v-model="currentValue">
+    <template v-for="(item, key, index) of slots" #[key] :key="index">
+      <slot :name="key" />
+    </template>
+  </el-input>
+</template>
+<script lang="ts">
+export default {
+  name: 'ElPlusFormInput',
+  inheritAttrs: false,
+  typeName: 'input',
+  customOptions: {}
+}
+</script>
+<script lang="ts" setup>
+import { ref, watch, useAttrs, useSlots, onBeforeMount } from 'vue'
+import { getAttrs, getEvents } from '../mixins'
+
+const props = defineProps<{
+  modelValue?: string | null
+  field: string
+  desc: { [key: string]: any }
+  formData: { [key: string]: any }
+}>()
+const emits = defineEmits(['update:modelValue', 'validateThis'])
+const slots = ref(Object.assign({}, useSlots(), props.desc.slots))
+const attrs = ref({} as any)
+const onEvents = ref(getEvents(props))
+
+const currentValue = ref()
+emits('update:modelValue', currentValue)
+
+onBeforeMount(async () => {
+  attrs.value = await getAttrs(props, { autocomplete: 'new-password', maxlength: 20, clearable: true, ...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 }
+)
+
+watch(
+  () => currentValue.value,
+  () => {
+    emits('validateThis')
+  }
+)
+</script>

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

@@ -0,0 +1,271 @@
+<template>
+  <div class="el-plus-form-link">
+    <el-select ref="selectRef" style="width: 100%" :class="desc.class" :style="desc.style" v-bind="topAttrs" :teleported="false" :loading="loading" :modelValue="values" @visible-change="handelVisibleChange" @clear="handelClear" v-on="onEvents">
+      <el-option v-for="option in options" :key="option.value" v-bind="option" />
+    </el-select>
+    <!-- 弹框 -->
+    <el-dialog :width="desc.dialogWidth || '1000px'" :title="desc.placeholder || '选择' + desc.label" draggable :closeOnClickModal="false" showCancel v-model="isShowDialog" append-to-body destroy-on-close>
+      <div style="width: 100%" class="form-link-dialog">
+        <div class="panel-left">
+          <!-- 左侧列表 -->
+          <ElPlusTable v-if="tableConfig" ref="multipleTableRef" :tableConfig="tableConfig" :type="multiple ? 'selection' : 'index'" :isIndex="false" :rowKey="vkey" @selection="handelTableSelection" />
+        </div>
+        <div v-if="multiple" class="panel-right">
+          <div class="right-title">已选中项：</div>
+          <el-scrollbar height="480px" class="tag-list">
+            <el-tag class="tag-item" style="margin-right: 10px; margin-bottom: 10px" v-for="tag in selectData" :key="tag.value" closable @close="() => handelTagRemove(tag)">
+              {{ tag.label }}
+            </el-tag>
+          </el-scrollbar>
+          <div class="btn-panel">
+            <el-button @click="cancel">取消</el-button>
+            <el-button type="primary" @click="submit">确定</el-button>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script lang="ts">
+export default {
+  name: 'ElPlusFormLink',
+  inheritAttrs: false,
+  typeName: 'link',
+  customOptions: {}
+}
+</script>
+<script lang="ts" setup>
+import { cloneDeep } from 'lodash'
+import { ref, reactive, watch, onMounted, computed } from 'vue'
+import { getEvents } from '../mixins'
+
+interface ILinkItem {
+  label: string
+  value: string
+}
+
+const props = defineProps<{
+  modelValue?: any
+  field: string
+  loading?: boolean
+  desc: { [key: string]: any }
+  formData: { [key: string]: any }
+}>()
+
+const onEvents = ref(getEvents(props))
+
+const emits = defineEmits(['update:modelValue', 'change', 'input', 'validateThis'])
+
+const currentValue = ref(props.modelValue)
+emits('update:modelValue', currentValue)
+
+// 顶部的select
+const selectRef = ref()
+const values = reactive([] as any[])
+const options = reactive([] as any[])
+const topAttrs = reactive({
+  multiple: true,
+  size: props.desc.size,
+  collapseTags: true,
+  collapseTagsTooltip: true,
+  clearable: true
+})
+
+// 显示弹框
+const isShowDialog = ref(false)
+const tableConfig = ref({} as any)
+const vkey = computed(() => (props.desc.vkey as string) || 'id')
+
+const multiple = ref(false)
+
+const multipleTableRef = ref()
+
+// 存储的值
+const selectData = reactive([] as ILinkItem[])
+
+/**
+ * 处理点击事件
+ * @param val
+ */
+function handelVisibleChange(val: any) {
+  if (val) {
+    selectRef.value.blur()
+    isShowDialog.value = true
+  }
+}
+
+/**
+ * 处理清空选项
+ */
+function handelClear() {
+  selectData.splice(0, selectData.length)
+  submit()
+}
+
+/**
+ * 处理列表批量选中
+ * @param selection
+ */
+function handelTableSelection(selection: any[]) {
+  // 这里全是新增
+  selectData.splice(0, selectData.length)
+  selection.map((row) => {
+    selectData.push({ label: row[props.desc.lkey || 'name'], value: row[vkey.value] })
+  })
+}
+
+/**
+ * 处理表格操作列单个选中
+ * @param btnBack
+ */
+function handelSignleSelect({ row }: IBtnBack) {
+  selectData.splice(0, selectData.length)
+  selectData.push({ label: row[props.desc.lkey || 'name'], value: row[vkey.value] })
+  // 直接关闭
+  submit()
+}
+
+/**
+ * 处理删除标签
+ * @param item
+ */
+function handelTagRemove(item: ILinkItem) {
+  selectData.splice(
+    selectData.findIndex((i) => i.value === item.value),
+    1
+  )
+  // 通知table刷新
+  multipleTableRef.value.changeSelect([{ [vkey.value]: item.value }])
+}
+
+/**
+ * 取消按钮
+ */
+function cancel() {
+  isShowDialog.value = false
+}
+
+/**
+ * 确认按钮
+ */
+function submit() {
+  options.splice(0, options.length, ...selectData)
+  const tempIds = [] as string[]
+  values.splice(0, values.length)
+
+  // 遍历数据
+  selectData.map((item) => {
+    values.push(item.value)
+    tempIds.push(item.value)
+  })
+  // 设置值
+  currentValue.value = selectData.length > 0 ? tempIds : null
+
+  isShowDialog.value = false
+  emits('validateThis')
+}
+
+// 表格配置
+watch(
+  () => props.desc.tableConfig,
+  (val) => {
+    let tempConfig = {} as ITableConfig
+    if (val) {
+      tempConfig = cloneDeep(val)
+      if (typeof props.desc.multiple === 'function') {
+        multiple.value = props.desc.multiple(props.formData)
+      } else {
+        multiple.value = props.desc.multiple
+      }
+      // 如果是多选
+      if (multiple.value) {
+        // TODO
+      } else if (!multiple.value && tempConfig.column[tempConfig.column.length - 1].label !== '操作') {
+        // 如果是单选
+        tempConfig.column.push({ label: '操作', width: '120px', fixed: 'right', type: 'btns', btns: [{ label: '选中', on: { click: handelSignleSelect } }] })
+      }
+      tempConfig.maxHeight = 400
+    }
+    tableConfig.value = tempConfig
+  },
+  { deep: true }
+)
+
+onMounted(async () => {})
+</script>
+<style lang="scss" scoped>
+.el-plus-form-link {
+  width: 100%;
+
+  .items-panel {
+    :deep(.el-input__inner) {
+      cursor: pointer;
+    }
+  }
+
+  :deep(.el-tag__close) {
+    display: none !important;
+  }
+}
+</style>
+<style lang="scss">
+.form-link-dialog {
+  width: 100%;
+  display: flex;
+  box-sizing: border-box;
+
+  .panel-left {
+    flex: 1;
+    height: 500px;
+    display: flex;
+    flex-direction: column;
+
+    .dept-breadcrumb {
+      width: 100%;
+      padding: 0 10px;
+      margin-bottom: 20px;
+      cursor: pointer;
+    }
+  }
+
+  .panel-right {
+    // min-width: 40%;
+    max-width: 40%;
+    margin-left: 20px;
+    border-left: 1px var(--el-border-color) var(--el-border-style);
+    padding: 20px;
+    display: flex;
+    overflow: hidden;
+    flex-direction: column;
+
+    .right-title {
+      width: 100%;
+      font-size: 14px;
+      color: #999999;
+      margin-bottom: 20px;
+    }
+
+    .tag-list {
+      width: 100%;
+      height: 400px;
+      overflow: hidden;
+      .tag-item {
+        .el-tag__content {
+          max-width: 100px;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+        }
+      }
+    }
+
+    .btn-panel {
+      width: 100%;
+      min-height: 50px;
+      padding-top: 10px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,51 @@
+<template>
+  <el-input :class="desc.class" :style="desc.style" :clearable="attrs.clearable ?? true" type="number" v-bind="attrs" v-on="onEvents" v-model="currentValue">
+    <template v-for="(item, key, index) of slots" #[key] :key="index">
+      <slot :name="key" />
+    </template>
+    <template v-if="desc.rtext" #append>{{ desc.rtext.text }}</template>
+  </el-input>
+</template>
+<script lang="ts">
+export default {
+  name: 'ElPlusFormNbinput',
+  inheritAttrs: false,
+  typeName: 'nbinput',
+  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 }
+  rowIndex?: number
+}>()
+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, { ...useAttrs() })
+})
+</script>
+<style lang="scss">
+/*input输入框屏蔽浏览器出现上下箭头*/
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+
+input[type='number'] {
+  -moz-appearance: textfield;
+}
+</style>

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

@@ -0,0 +1,107 @@
+<template>
+  <el-input-number class="ElPlusFormNumber-panel" v-bind="attrs" v-on="onEvents" v-model="currentValue" onkeypress="return( /[\d\.]/.test(String.fromCharCode(event.keyCode)))" />
+</template>
+<script lang="ts">
+export default {
+  name: 'ElPlusFormNumber',
+  inheritAttrs: false,
+  typeName: 'number',
+  customOptions: {}
+}
+</script>
+<script lang="ts" setup>
+import { ref, computed, useAttrs, onBeforeMount, nextTick } from 'vue'
+import { getAttrs, getEvents } from '../mixins'
+import { ElMessage } from 'element-plus'
+
+const props = defineProps<{
+  modelValue?: number | null
+  field: string
+  loading?: boolean
+  desc: { [key: string]: any }
+  formData: { [key: string]: any }
+  rowIndex?: number
+}>()
+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, { min: 0, max: 999999999, precision: 0, controlsPosition: 'right', ...useAttrs() })
+  delete attrs.value.min
+  delete attrs.value.max
+})
+
+/**
+ * 绑定属性
+ */
+const numBindAttr = computed(() => {
+  let numAttrs = props.desc.attrs || { min: 0, max: 999999999, precision: 0, controlsPosition: 'right' }
+  if (typeof props.desc.attrs === 'function') {
+    numAttrs = props.desc.attrs(props.formData)
+  }
+  // 这里判断一下，最小和最大值的大小
+  if (numAttrs.min > numAttrs.max) {
+    numAttrs.min = numAttrs.max
+  } else if (numAttrs.max < numAttrs.min) {
+    numAttrs.max = numAttrs.min
+  }
+  return numAttrs
+})
+
+// 判断一下初始值
+if (currentValue.value !== undefined && currentValue.value !== null) {
+  if (currentValue.value < numBindAttr.value.min) {
+    currentValue.value = numBindAttr.value.min
+  } else if (currentValue.value > numBindAttr.value.max) {
+    currentValue.value = numBindAttr.value.max
+  }
+}
+
+const change = onEvents.value.change
+
+if (change) {
+  onEvents.value.change = (val: any, oldVal: any) => {
+    handelValChange(val, oldVal)
+  }
+} else {
+  onEvents.value.change = handelValChange
+}
+
+/**
+ * 监听值改变
+ * @param val
+ */
+function handelValChange(val: any, oldVal: any) {
+  if (val !== oldVal) {
+    if (val < numBindAttr.value.min) {
+      ElMessage.warning(`${props.desc?.label || ''}最少不能低于${numBindAttr.value.min}`)
+      nextTick(() => {
+        currentValue.value = numBindAttr.value.min
+      })
+    } else if (val > numBindAttr.value.max) {
+      ElMessage.warning(`${props.desc?.label || ''}最多不能大于${numBindAttr.value.max}`)
+      nextTick(() => {
+        currentValue.value = numBindAttr.value.max
+        change && change()
+      })
+    } else {
+      change && change()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.ElPlusFormNumber-panel {
+  width: 100% !important;
+  max-width: 100%;
+  :deep(.el-input__wrapper) {
+    // padding-left: 11px !important;
+    input {
+      text-align: left !important;
+    }
+  }
+}
+</style>