el-plus-crud 0.0.2

package/lib/components/el-plus-table/components/columnItem.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="el-plus-table-column-item" :class="[desc.inline ? 'el-plus-table-column-row' : 'el-plus-table-column-column']">
+    <template v-for="(item, i) in cells" :key="i + (item.options && item.options.length > 0 ? item.options[0].value || item.options[0].v : '0')">
+      <component v-if="item.vshow === undefined || item.vshow" v-bind="item" :isTable="true" :formData="props.scope?.row" :size="item.size || size" :rowIndex="rowIndex" v-model="props.scope.row[item.field]" :is="'el-plus-form-' + item.desc.type"> </component>
+    </template>
+  </div>
+</template>
+<script lang="ts" setup name="columnItem">
+import { ref, onMounted, computed } from 'vue'
+
+const props = defineProps<{
+  field?: string
+  desc: IColumnItem
+  scope: { [key: string]: any }
+  size?: string
+}>()
+
+const rowIndex = ref(props.scope?.$index || 0)
+const cells = computed(() => {
+  const _cells = [] as any
+
+  // 判断有没有nodes
+  if (props.desc.nodes) {
+    props.desc.nodes.map((item, i) => {
+      _cells.push(handelItem(item.field || props.field, item, i))
+    })
+  } else {
+    const porpList = props.field ? props.field.split(',') : ([] as string[])
+    porpList.map((item, i) => {
+      _cells.push(handelItem(item, props.desc, i))
+    })
+  }
+  // 处理下没有prop的属性
+  if (_cells.length <= 0) {
+    _cells.push(handelItem('', props.desc, 0))
+  }
+  return _cells
+})
+
+const handelItem = (prop: string, item: any, i: number) => {
+  const tempCell = {
+    field: prop,
+    desc: {
+      prop: prop,
+      default: '',
+      size: item.size || props.size || 'small'
+    }
+  } as any
+  Object.assign(tempCell.desc, item)
+  if (item.type === 'btn') {
+    tempCell.desc.btnType = item.btnType || 'primary'
+    tempCell.desc.plain = item.plain || true
+    tempCell.desc.text = true
+  }
+  if (item.type) {
+    if (item.type === 'text') {
+      tempCell.desc.default = '-'
+    }
+    if (item.type === 'tag') {
+      // tempCell.size = tempCell.size || 'small '
+    } else {
+      // tempCell.size = tempCell.size || size || 'small';
+    }
+    if (typeof item.type === 'string') {
+      tempCell.desc.type = item.type
+    } else {
+      tempCell.desc.type = item.type[i] || item.type[0]
+    }
+    if (item.format) {
+      if (typeof item.format === 'string' || typeof item.format === 'function') {
+        tempCell.desc.format = item.format
+      } else {
+        tempCell.desc.format = item.format[i] === null ? null : item.format[i] || item.format[0]
+      }
+    }
+    if (item.title) {
+      if (typeof item.title === 'string') {
+        tempCell.desc.title = item.title
+      } else {
+        tempCell.desc.title = item.title[i] || item.title[0]
+      }
+    }
+  } else {
+    tempCell.desc.type = 'text'
+  }
+  if (item.elType) {
+    tempCell.desc.elType = item.elType
+  }
+  if (item.linkType) {
+    tempCell.desc.linkType = item.linkType
+  }
+  if (item.linkId) {
+    tempCell.desc.linkId = item.linkId
+  }
+  if (item.color) {
+    tempCell.desc.style = item.style || {}
+
+    if (typeof item.color === 'function') {
+      tempCell.desc.style.color = item.color(props.scope?.row[props.field || ''], props.scope?.row, props.field)
+    } else if (typeof item.color === 'string') {
+      tempCell.desc.style.color = item.color
+    } else {
+      tempCell.desc.style.color = item.color[i] === null ? null : item.color[i] || item.color[0]
+    }
+  }
+  if (item.on) {
+    if (Object.prototype.toString.call(item.on) === '[object Array]') {
+      tempCell.desc.on = item.on[i] === null ? null : item.on[i] || item.on[0]
+    } else {
+      tempCell.desc.on = item.on
+    }
+  }
+  if (item.disabled) {
+    tempCell.disabled = true
+  }
+  // 处理下options
+  if (typeof item.options === 'function') {
+    tempCell.desc.options = item.options(props.scope)
+  }
+
+  // 处理下vif
+  tempCell.vshow = handelColumnVIf(item)
+
+  // 处理下attrs
+  if (item.attrs) {
+    if (typeof item.attrs === 'function') {
+      tempCell.desc.attrs = item.attrs(props.scope?.row)
+    } else {
+      tempCell.desc.attrs = item.attrs
+    }
+  }
+
+  tempCell.desc._label = item.label
+
+  // 处理attrs
+  return tempCell
+}
+
+const handelColumnVIf = (item: any) => {
+  if (item.vshow !== undefined && item.vshow !== null && item.vshow !== '') {
+    if (typeof item.vshow === 'boolean') return item.vshow
+    if (typeof item.vshow === 'function') return item.vshow(props.scope?.row)
+    return !!item.vshow
+  }
+  return true
+}
+
+onMounted(() => {})
+</script>
+<style lang="scss" scoped>
+.el-plus-table-column-item {
+  width: 100%;
+  display: flex;
+
+  :deep(.ele-form-text) {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+}
+
+.el-plus-table-column-row {
+  flex-direction: row;
+
+  & > div {
+    margin-right: 10px;
+
+    &:last-child {
+      margin: 0;
+    }
+  }
+}
+
+.el-plus-table-column-column {
+  flex-direction: column;
+
+  & > div {
+    margin-bottom: 10px;
+
+    &:last-child {
+      margin: 0;
+    }
+  }
+}
+</style>

package/lib/components/el-plus-table/components/header.vue

@@ -0,0 +1,185 @@
+<template>
+  <div v-if="props.toolbar" class="el-plus-table-header-info">
+    <el-form :inline="true" class="el-plus-table-header-form" :style="{ justifyContent: !props.toolbar.formConfig && props.toolbar.btnRight ? 'flex-end' : 'space-between' }">
+      <div v-if="props.toolbar.formConfig" class="el-plus-table-form-items">
+        <ElPlusForm ref="elPlusFormRef" v-bind="formConfig" v-model="props.modelValue" labelWidth="1" :requestFn="handelQueryData" :showBtns="false" :isTable="true">
+          <template #row>
+            <div style="white-space: nowrap; display: flex; align-items: center; margin-bottom: 16px">
+              <ElPlusFormBtn type="primary" icon="ele-Search" :loading="loading" :desc="{ label: '查询', on: { click: handelSearch }, size }" />
+              <ElPlusFormBtn :desc="{ label: '重置', on: { click: handelReset }, size }" />
+              <ElPlusFormBtn type="primary" v-if="props.toolbar.export" :desc="{ label: '导出Excel', size, mask: true, on: { click: handelDownload } }" />
+              <ElPlusTableSettingColumn v-if="tbName" :tbName="tbName" :column="column || []" :size="size" />
+              <ElPlusFormBtn v-for="(item, i) in headerBtns" :key="i" :desc="item" :loading="loading" />
+            </div>
+          </template>
+        </ElPlusForm>
+      </div>
+      <div v-else class="el-plus-table-header-btns" :style="{ 'min-width': isMobile() ? '100%' : headerBtns && headerBtns.length > 0 ? headerBtns.length * 110 + 'px' : '10px' }">
+        <div class="el-plus-table-header-btn">
+          <ElPlusFormBtn v-for="(item, i) in headerBtns" :key="i" :desc="item" :loading="loading" />
+        </div>
+      </div>
+    </el-form>
+  </div>
+</template>
+<script lang="ts" setup name="EleTabletHeader">
+import { ref, computed, onMounted, nextTick } from 'vue'
+import ElPlusTableSettingColumn from './settingColumn.vue'
+import ElPlusFormBtn from '@/components/el-plus-form/components/ElPlusFormBtn.vue'
+import { isMobile, handelBtnType } from '../util'
+
+const emits = defineEmits(['query'])
+const props = withDefaults(
+  defineProps<{
+    modelValue?: { [key: string]: any } | {}
+    column: Array<IColumnItem> | null
+    tbName: string
+    toolbar: ITableToolbar | null
+    isDialog: boolean
+    loading: boolean
+    isShowRefresh: boolean
+    size: string
+  }>(),
+  { tbName: '', toolbar: null, isDialog: false, loading: false, isShowRefresh: true, size: 'default' }
+)
+
+const elPlusFormRef = ref()
+const headerBtns = computed(() => {
+  const btns = [] as any[]
+  if (props.toolbar && props.toolbar.btns) {
+    props.toolbar.btns.map((item: any) => {
+      btns.push({ ...handelBtnType(item), size: item.size || props.size })
+    })
+  }
+  return btns
+})
+
+const formConfig = computed(() => {
+  const tempConf = props.toolbar?.formConfig
+  if (tempConf?.formDesc) {
+    Object.values(tempConf?.formDesc).map((item) => {
+      if (item.width) return
+      let width = 300
+      switch (item.type) {
+        case 'daterange':
+        case 'input':
+        case 'area':
+          width = 300
+          break
+      }
+      item.width = width + 'px'
+    })
+  }
+  return tempConf
+})
+
+function handelQueryData() {
+  // 通知父类执行查询
+  emits('query')
+}
+
+/**
+ * 下载
+ * @param data
+ */
+function handelDownload({ callBack }: IBtnBack) {
+  // if (props.toolbar?.export) {
+  //   let url = props.toolbar.export.url
+  //   url += (url.indexOf('?') >= 0 ? '&' : '?') + mapToUrlStr(Object.assign({}, elPlusFormRef.value?.getData(), props.toolbar.export?.data || {}))
+  //   // 创建请求
+  //   const xhr = new XMLHttpRequest()
+  //   xhr.open('get', url, true)
+  //   // 转换流
+  //   xhr.responseType = 'blob'
+  //   // 是否授权
+  //   if (props.toolbar.export.isAuth !== false) {
+  //     xhr.setRequestHeader('Authorization', Session.get(import.meta.env.VITE_TOKEN_KEY))
+  //   }
+  //   xhr.onload = function () {
+  //     if (this.status == 200) {
+  //       const aLink = document.createElement('a')
+  //       aLink.href = window.URL.createObjectURL(this.response)
+  //       // 自定义文件名
+  //       aLink.download = (props.toolbar?.export?.name || new Date().getTime()) + '.xls'
+  //       aLink.click()
+  //       window.URL.revokeObjectURL(url)
+  //       setTimeout(() => {
+  //         callBack && callBack()
+  //       }, 1000)
+  //     }
+  //   }
+  //   xhr.onerror = function () {
+  //     setTimeout(() => {
+  //       callBack && callBack()
+  //     }, 1000)
+  //   }
+  //   xhr.send()
+  // }
+}
+
+/**
+ * 处理搜索
+ */
+function handelSearch() {
+  elPlusFormRef.value.submit()
+}
+
+/**
+ * 处理重置
+ */
+function handelReset() {
+  elPlusFormRef.value.clear()
+  nextTick(() => {
+    elPlusFormRef.value.submit()
+  })
+}
+
+onMounted(() => {})
+
+defineExpose({ getData: () => elPlusFormRef.value?.getData() })
+</script>
+<style lang="scss">
+.el-plus-table-header-info {
+  .el-plus-table-header-form {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+
+    .el-form {
+      display: flex;
+      justify-content: flex-start;
+      flex-wrap: wrap;
+
+      .el-form-item {
+        margin-bottom: 16px !important;
+        .el-form-item__label {
+          width: auto !important;
+        }
+      }
+
+      .waterfall-panel {
+        width: auto !important;
+        align-items: center;
+      }
+    }
+
+    .el-plus-table-header-btns {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+
+      .el-plus-table-header-btn {
+        height: 40px;
+        display: flex;
+        align-items: center;
+        margin-right: 10px;
+      }
+    }
+  }
+}
+</style>
+<style lang="scss" scoped="">
+.el-plus-table-header-info {
+  width: 100%;
+}
+</style>

package/lib/components/el-plus-table/components/settingColumn.vue

@@ -0,0 +1,168 @@
+<template>
+  <div class="el-plus-table-edit-column">
+    <el-button :plain="true" type="primary" icon="ele-Setting" @click="showSettingDialog" :size="size" title="编辑显示列" circle />
+    <!-- 编辑列 -->
+    <el-dialog title="编辑显示列" v-model="showSettingColumn" width="40%">
+      <template #default>
+        <div class="select-panel">
+          <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="selectAll"> 全选 </el-checkbox>
+        </div>
+        <el-checkbox-group v-model="localColumn" @change="changeSelect" style="padding: 0 10px; flex-wrap: wrap; display: flex">
+          <template v-for="item in props.column" :key="item.label">
+            <el-checkbox v-if="item._vif" :label="item.label">
+              {{ item.label }}
+            </el-checkbox>
+          </template>
+        </el-checkbox-group>
+      </template>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button :size="size" @click="handelCancel"> 取 消 </el-button>
+          <el-button :size="size" type="primary" @click="changeColumnData"> 确 定 </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<script lang="ts" setup name="ElPlusTableSettingColumn">
+import { ref, onMounted } from 'vue'
+import { ElMessage } from 'element-plus'
+
+const props = defineProps<{
+  column: Array<IColumnItem>
+  tbName: string
+  size: string
+}>()
+
+const showSettingColumn = ref(false)
+const localColumn = ref([] as Array<String>)
+const localOldColumn = ref([] as Array<String>)
+const isIndeterminate = ref(false)
+const checkAll = ref(false)
+
+/**
+ * 打开弹框
+ */
+function showSettingDialog() {
+  showSettingColumn.value = true
+}
+
+function changeColumnData() {
+  if (localColumn.value.length <= 0) {
+    ElMessage.warning('请至少选择一列！')
+    return false
+  }
+  // 定义一个需要隐藏的列表-存储到本地用
+  const hideList = [] as Array<String>
+  props.column.map((item: any) => {
+    if (localColumn.value.indexOf(item.label) < 0) {
+      hideList.push(item.label)
+      item.scShow = false
+    } else {
+      item.scShow = true
+    }
+  })
+  if (hideList.length > 0) {
+    localStorage.setItem('hideColumnsList_' + props.tbName, hideList.join('__'))
+  } else {
+    // 如果是对象，删除
+    localStorage.removeItem('hideColumnsList_' + props.tbName)
+  }
+  showSettingColumn.value = false
+  // 赋值
+  localOldColumn.value = localColumn.value
+}
+
+/**
+ * 全选列
+ */
+function selectAll() {
+  localColumn.value = [] as Array<String>
+  if (checkAll.value) {
+    localColumn.value = props.column.map((item: any) => item.label)
+  }
+  isIndeterminate.value = false
+}
+
+/**
+ * 复选框改变时触发
+ */
+function changeSelect() {
+  if (localColumn.value.length === 0) {
+    isIndeterminate.value = false
+    checkAll.value = false
+  } else if (props.column.length === localColumn.value.length) {
+    isIndeterminate.value = false
+    checkAll.value = true
+  } else {
+    isIndeterminate.value = true
+    checkAll.value = false
+  }
+}
+
+/**
+ * 初始化选择列
+ * @param init
+ */
+function initLocalCheckList(init?: Boolean) {
+  // 从本地获取处理过的字段一级顺序
+  const tempLocalStr = localStorage.getItem('hideColumnsList_' + props.tbName) as String
+  let tempList: any[] = []
+
+  // 判断为空
+  if (tempLocalStr !== undefined && tempLocalStr !== null && tempLocalStr.length > 0) {
+    // 用两个下划线拆分
+    tempList = tempLocalStr.split('__')
+  }
+  props.column.map((item: any) => {
+    // 这里初始化一下vif
+    if (item.vif !== undefined && item.vif !== null) {
+      if (typeof item.vif === 'function') {
+        item._vif = item.vif(item)
+      } else {
+        item._vif = !!item.vif
+      }
+    } else {
+      item._vif = true
+    }
+    if (item._vif && tempList.indexOf(item.label) < 0) {
+      localColumn.value.push(item.label)
+    }
+  })
+
+  // 初始化的时候需要执行一次全选的状态校验
+  changeSelect()
+  if (init) {
+    changeColumnData()
+  }
+}
+
+/**
+ * 取消
+ */
+function handelCancel() {
+  showSettingColumn.value = false
+  // 还原
+  localColumn.value = localOldColumn.value
+}
+
+onMounted(() => {
+  if (props.tbName) {
+    initLocalCheckList(true)
+  }
+})
+</script>
+<style lang="scss" scoped>
+.el-plus-table-edit-column {
+  margin: 0 10px;
+  display: inline-block;
+
+  .select-panel {
+    width: 100%;
+    height: 30px;
+    padding: 0 10px;
+    border-bottom: 1px solid #eee;
+    margin-bottom: 10px;
+  }
+}
+</style>

package/lib/components/el-plus-table/components/statisticInfo.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="el-plus-table-bottom-statistic-info">
+    <template v-for="(item, i) in props.statisticSetting.keys" :key="i">
+      <div class="statistic-info-item" v-if="props.statisticData && props.statisticData[item.key] !== undefined">
+        {{ item.label }}:
+        <span v-if="item.type && item.type === 'text'">
+          {{ props.statisticData[item.key] || 0 }}
+        </span>
+        <span v-else>
+          {{ formatMoney(props.statisticData[item.key] || 0) }}
+        </span>
+        {{ item.aftLabel }}
+      </div>
+    </template>
+  </div>
+</template>
+<script lang="ts" setup name="ELPlusTableStatisticInfo">
+import {} from 'vue'
+
+const props = defineProps<{
+  statisticSetting: { [key: string]: any }
+  statisticData: { [key: string]: any }
+}>()
+
+const formatMoney = (s: any, n?: any) => {
+  if (s && (s + '').indexOf('~') >= 0) {
+    return s
+  }
+  n = n > 0 && n <= 20 ? n : 2
+  if (!s || s === '' || typeof s === 'undefined') {
+    s = 0
+  }
+  s = parseFloat((s + '').replace(/[^\d\.-]/g, '')).toFixed(n) + ''
+  let isNegative = false
+  if (s.indexOf('-') === 0) {
+    isNegative = true
+    s = s.substr(1)
+  }
+  const l = s.split('.')[0].split('').reverse()
+  const r = s.split('.')[1]
+  let t = ''
+  for (let i = 0; i < l.length; i++) {
+    t += l[i] + ((i + 1) % 3 === 0 && i + 1 !== l.length ? ',' : '')
+  }
+  return (isNegative ? '-' : '') + t.split('').reverse().join('') + '.' + r
+}
+</script>

package/lib/components/el-plus-table/util/index.ts

@@ -0,0 +1,123 @@
+import { cloneDeep } from 'lodash'
+
+/**
+ * 获取随机字符串
+ * @returns {string}
+ */
+export function getUID(): string {
+  let str = ''
+  const arr = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('')
+  for (let i = 0; i < 32; i++) {
+    let index = Math.floor(arr.length * Math.random())
+    if (index < 0) index = 0
+    str += arr[index]
+  }
+  return str
+}
+
+// 判断类型
+export function is(val: any, type: any) {
+  const typeArr = Array.isArray(type) ? type : [type]
+  const valType = Object.prototype.toString.call(val)
+  return typeArr.some((type) => `[object ${type}]` === valType)
+}
+
+/**
+ * 判断是否是移动端
+ */
+export function isMobile() {
+  if (navigator.userAgent.match(/('phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone')/i)) {
+    return true
+  } else {
+    return false
+  }
+}
+
+/**
+ * 处理按钮类型
+ * @param item
+ */
+export function handelBtnType(item: any): Object {
+  switch (item.type) {
+    case undefined:
+      item.type = 'primary'
+      break
+    case 'add':
+      item.type = 'primary'
+      item.title = item.title || '新增'
+      item.icon = 'ele-Plus'
+      break
+    case 'edit':
+      item.type = 'primary'
+      item.title = item.title || '编辑'
+      item.icon = 'ele-EditPen'
+      break
+    case 'delete':
+    case 'del':
+      item.type = 'danger'
+      item.title = item.title || '删除'
+      item.icon = 'ele-Delete'
+      break
+  }
+  return item
+}
+
+/**
+ * 处理列表表头，list转Map
+ */
+export function handelListColumn(columnList: Array<IColumnItem>, minWidth?: string): any[] {
+  const tempColumnList = [] as any[]
+  if (columnList && columnList.length > 0) {
+    // 不影响原有的对象，这里进行拷贝
+    cloneDeep(columnList).map((item: IColumnItem) => {
+      // 处理下一个单元格显示多个数据
+      if (item.nodes) {
+        const tempList = (handelListColumn(item.nodes, minWidth) as any)[0].children
+        item.nodes = tempList || item.nodes
+      }
+      // 检查type属性,没有type属性的自动补一个text类型
+      if (!item.type) {
+        item.type = 'text'
+      }
+      // 这里判断下type类型，然后进行一下表头和表格的对齐方式
+      switch (item.type) {
+        case 'image':
+          item.width = item.width || '110px'
+          item.align = item.align || 'left'
+          item.headerAlign = item.headerAlign || 'left'
+          break
+        case 'btns':
+          if (!item.minWidth && item.btns && item.btns.length >= 2) {
+            let labelLength = 0
+            item.btns.map((item: any) => (labelLength += typeof item.label === 'string' ? item.label.length : 4))
+            item.width = item.width || labelLength * 20 + 'px'
+          }
+          item.align = item.align || 'left'
+          item.headerAlign = item.headerAlign || 'left'
+          item.text = true
+          break
+      }
+      // item.minWidth = item.minWidth || 'auto'
+      item.minWidth = item.minWidth || (item.label !== '操作' ? minWidth : 'auto')
+
+      // 处理下‘操作’
+      item.showOverflowTooltip = item.label !== '操作'
+
+      if (item.parent) {
+        let isExists = false
+        tempColumnList.forEach((colum: any) => {
+          if (colum.label === item.parent) {
+            colum.children.push(item)
+            isExists = true
+          }
+        })
+        if (!isExists) {
+          tempColumnList.push({ label: item.parent, children: [item] })
+        }
+      } else {
+        tempColumnList.push(item)
+      }
+    })
+  }
+  return tempColumnList
+}