el-plus-crud 0.0.78 → 0.0.80

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

@@ -0,0 +1,47 @@
+<template>
+  <el-table-column v-if="props.item.__vif" v-bind="columnAttr">
+    <template #header="{ column }: any">
+      <div :class="{ 'th-required': item.required }" :style="item.hstyle">
+        {{ column.label }}
+      </div>
+    </template>
+    <template #default="scope: any">
+      <!-- 递归 -->
+      <template v-if="item.children?.length">
+        <ElPlusTableColumn v-for="(child, i) in item.children" :item="child" :size="size" :key="i"></ElPlusTableColumn>
+      </template>
+      <template v-else>
+        <ColumnItem v-if="scope['$index'] >= 0" :field="item.prop" :desc="item" :scope="scope" :size="size" v-model="scope.row[item.prop as any]" />
+      </template>
+    </template>
+  </el-table-column>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'ElPlusTableColumn',
+  inheritAttrs: false,
+  customOptions: {}
+}
+</script>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { IColumnItem } from 'types'
+import ColumnItem from './components/columnItem.vue'
+import { cloneDeep } from 'lodash'
+
+const props = defineProps<{
+  item: IColumnItem
+  size: string
+}>()
+
+/**
+ * 绑定属性
+ */
+const columnAttr = computed(() => {
+  const tempAttr = cloneDeep(props.item)
+  delete tempAttr.children
+  return tempAttr
+})
+</script>

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

@@ -19,7 +19,7 @@ import { IColumnItem } from 'types'
 
 const props = defineProps<{
   modelValue?: any
-  field?: string
+  field?: string | ((data?: any) => string)
   desc: IColumnItem
   scope: { [key: string]: any }
   size?: string
@@ -35,7 +35,8 @@ const cells = computed(() => {
       _cells.push(handelItem(item.field || props.field, item, i))
     })
   } else {
-    const porpList = props.field ? props.field.split(',') : ([] as string[])
+    const tempField = (typeof props.field === 'function' ? props.field() : props.field) || ''
+    const porpList = tempField.split(',')
     porpList.map((item, i) => {
       _cells.push(handelItem(item, props.desc, i))
     })
@@ -117,7 +118,8 @@ const handelItem = (prop: string, item: any, i: number) => {
     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)
+      const tempField = (typeof props.field === 'function' ? props.field() : props.field) || ''
+      tempCell.desc.style.color = item.color(props.scope?.row[tempField], props.scope?.row, props.field)
     } else if (typeof item.color === 'string') {
       tempCell.desc.style.color = item.color
     } else {

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

@@ -1,180 +1,172 @@
-<template>
-  <div class="el-plus-table-edit-column">
-    <el-button v-if="showText" type="primary" @click="showSettingDialog" :size="size" plain>编辑显示列</el-button>
-    <el-button v-else type="primary" icon="ele-Setting" @click="showSettingDialog" :size="size" title="编辑显示列" plain 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" :disabled="item.required || item.noHide || false">
-              {{ 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>
-import { ref, onMounted, inject } from 'vue'
-import { ElMessage } from 'element-plus'
-import { ICRUDConfig, IColumnItem } from 'types'
-
-const defaultConf = inject('defaultConf') as ICRUDConfig
-
-const props = defineProps<{
-  column: Array<IColumnItem>
-  tbName: string
-  size: string
-  showText?: boolean
-}>()
-
-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(defaultConf.storagePrefix + 'hideColumnsList_' + props.tbName, hideList.join('__'))
-  } else {
-    // 如果是对象，删除
-    localStorage.removeItem(defaultConf.storagePrefix + '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)
-  } else {
-    // 这里要屏蔽掉禁止勾选的项
-    localColumn.value = props.column.filter((item) => item.required || item.noHide).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(defaultConf.storagePrefix + '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 (tempList.indexOf(item.label) < 0 || item.required || item.noHide) {
-      localColumn.value.push(item.label)
-    }
-  })
-
-  // 初始化的时候需要执行一次全选的状态校验
-  changeSelect()
-  if (init) {
-    changeColumnData()
-  }
-}
-
-/**
- * 取消
- */
-function handelCancel() {
-  showSettingColumn.value = false
-  // 还原
-  localColumn.value = localOldColumn.value
-}
-
-onMounted(() => {
-  if (props.tbName) {
-    initLocalCheckList(true)
-  }
-})
-
-defineExpose({ initCol: initLocalCheckList })
-</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>
-types
+<template>
+  <div class="el-plus-table-edit-column">
+    <el-button v-if="showText" type="primary" @click="showSettingDialog" :size="size" plain>编辑显示列</el-button>
+    <el-button v-else type="primary" icon="ele-Setting" @click="showSettingDialog" :size="size" title="编辑显示列" plain circle />
+
+    <!-- 编辑列 -->
+    <el-dialog title="编辑显示列" v-model="showSettingColumn" draggable width="40%">
+      <template #default>
+        <el-tree ref="treeRef" :data="options" show-checkbox node-key="idx" :default-expand-all="true" :default-checked-keys="checkColumn" :props="defaultProps" @check="handelCheckChange" />
+      </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>
+import { ref, onMounted, inject, reactive } from 'vue'
+import { ElMessage } from 'element-plus'
+import { ICRUDConfig, IColumnItem } from 'types'
+
+const defaultConf = inject('defaultConf') as ICRUDConfig
+
+const props = defineProps<{
+  column: Array<IColumnItem>
+  tbName: string
+  size: string
+  showText?: boolean
+}>()
+
+// 弹框显示
+const showSettingColumn = ref(false)
+const treeRef = ref()
+
+let options = ref([])
+
+const treeAll = ref([] as Array<String>)
+const checkColumn = ref([] as Array<String>)
+// 定义一个需要隐藏的列表-存储到本地用
+let tempList = ref([] as Array<String>)
+
+const defaultProps = {
+  children: 'children',
+  label: 'label',
+  disabled: 'disabledcheckd'
+}
+
+/**
+ * 匹配序号并获取全部序号
+ */
+
+function addIndex(item: any, index?: string) {
+  item.map((i: any, idx: number) => {
+    // 匹配序号
+    i.idx = index !== undefined ? `${index}-${idx}` : `${idx}`
+    // 禁用判断
+    if (i.required || i.noHide || i.disabled) {
+      i.disabledcheckd = true
+      tempList.value.splice(tempList.value.indexOf(i.idx), 1)
+    }
+    // 如果子集全部禁用，那么父级也禁用 ,如果父集禁用，那么子级也禁用
+    i.children && i.children.every((info: any) => info.disabled) ? (i.disabled = true) : i.children && i.disabled ? i.children.map((info: any) => (info.disabled = true)) : ''
+    // 是否有子集
+    if (i.children?.length > 0) {
+      addIndex(i.children, `${i.idx}`)
+    }
+    i.children ? '' : treeAll.value.push(i.idx)
+  })
+  return item
+}
+
+/**
+ * 打开弹框
+ */
+function showSettingDialog() {
+  showSettingColumn.value = true
+}
+
+/**
+ * 获取没有选中的选项
+ */
+function handelCheckChange(val: any, data: any) {
+  data.checkedAllKeys = Array.from(new Set([...data.checkedKeys, ...data.halfCheckedKeys]))
+  tempList.value = treeAll.value.filter((x) => {
+    return data.checkedAllKeys.indexOf(x) < 0
+  })
+}
+
+// 设置是否显示
+function setShow(item: any) {
+  for (let index = 0; index < item.length; index++) {
+    if (item[index].children) {
+      setShow(item[index].children)
+    }
+    if (tempList.value.indexOf(item[index].idx) < 0) {
+      item[index].scShow = true
+    } else {
+      item[index].scShow = false
+    }
+  }
+}
+
+function changeColumnData() {
+  if (treeAll.value.length === tempList.value.length) {
+    ElMessage.warning('请至少选择一列！')
+    return false
+  }
+  setShow(props.column)
+  if (tempList.value.length > 0) {
+    localStorage.setItem(defaultConf.storagePrefix + 'hideColumnsList_' + props.tbName, tempList.value.join('__'))
+  } else {
+    localStorage.removeItem(defaultConf.storagePrefix + 'hideColumnsList_' + props.tbName)
+  }
+  showSettingColumn.value = false
+}
+
+/**
+ * 初始化选择列
+ * @param init
+ */
+function initLocalCheckList() {
+  // 从本地获取处理过的字段一级顺序
+  const tempLocalStr = localStorage.getItem(defaultConf.storagePrefix + 'hideColumnsList_' + props.tbName) as String
+  // 判断为空
+  if (tempLocalStr !== undefined && tempLocalStr !== null && tempLocalStr.length > 0) {
+    // 用两个下划线拆分
+    tempList.value = tempLocalStr.split('__')
+  }
+  options.value = addIndex(props.column)
+
+  setShow(props.column)
+  // 过滤出隐藏的节点
+  checkColumn.value = treeAll.value.filter((x) => {
+    return tempList.value.indexOf(x) < 0
+  })
+}
+
+/**
+ * 取消
+ */
+function handelCancel() {
+  // 还原
+  treeRef.value.setCheckedKeys(checkColumn.value)
+
+  showSettingColumn.value = false
+}
+
+onMounted(() => {
+  if (props.tbName) {
+    initLocalCheckList()
+  }
+})
+
+defineExpose({ initCol: initLocalCheckList })
+</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>