From 01950ddf5b43265b013d40cb56482ea52a75d35c Mon Sep 17 00:00:00 2001
From: liuhanchen <liuhanchen@zeyihuoyun.com>
Date: Mon, 12 Jun 2023 17:01:59 +0800
Subject: [PATCH] feat: 支持表头必填自动判断并优化模式切换渲染

---
 packages/table/editor.vue | 52 +++++++++++++++++++++++++++++++++++++++++++---------
 packages/table/index.vue  |  7 +++++--
 packages/utils/vnode.js   | 22 ++++++++++++++++++++++
 3 files changed, 70 insertions(+), 11 deletions(-)

diff --git a/packages/table/editor.vue b/packages/table/editor.vue
index 67b246e..5ea2d9e 100644
--- a/packages/table/editor.vue
+++ b/packages/table/editor.vue
@@ -1,11 +1,37 @@
 <script>
 import { get, set, cloneDeep } from '../utils';
-import { renderContext } from '../utils/vnode';
+import { renderContext, setDefaultContextClass } from '../utils/vnode';
+
+// 配置是否必填
+function isItemRequired(context, config) {
+  // 渲染函数配置
+  const contentProps = context.props || {};
+  // 编辑器统一配置
+  const editorConfig = contentProps.editor || {};
+  let result = false;
+  if (!editorConfig.items) {
+    return false;
+  }
+  for (let item of editorConfig.items) {
+    if (item.prop === config.prop && item.rules) {
+      for (let rule of item.rules) {
+        if (rule.required) {
+          result = true;
+          break;
+        }
+      }
+    }
+  }
+  return result;
+}
 
 // 标题渲染
 function headerRender(h, context, item) {
+  // 表头插槽
   const headerSlot = context.scopedSlots[`header-${item.prop}`];
+  const required = isItemRequired(context, item);
   return function(scope) {
+    scope.required = required;
     // 自定义具名插槽
     if (headerSlot) {
       return headerSlot(scope);
@@ -14,6 +40,10 @@ function headerRender(h, context, item) {
     if (item.header) {
       return item.header(item, h, scope);
     }
+    // 如果是必填项
+    if (required) {
+      return h('span', { class: 'required' }, item.label);
+    }
     // 默认取值
     return item.label;
   };
@@ -65,7 +95,7 @@ function editorRender(h, context, item) {
     let vnode = {};
     // 默认
     const inputEvent = val => {
-      if (get(contentProps, 'editor.deep') === true) {
+      if (get(contentProps, 'editor.props.deep') === true) {
         if (item.prop.indexOf('.') > -1 || item.prop.indexOf('[') > -1) {
           let separator = '';
           if (item.prop.indexOf('.') > -1) {
@@ -147,9 +177,8 @@ export default {
     console.log(context);
     const props = context.props || {};
     // 设置默认class名称，用来追加一些默认的样式
-    const className = get(context, 'data.class');
-    set(context, 'data.class', className ? `${className} z-table-editor` : 'z-table-editor');
     let scopedSlots = context.scopedSlots || {};
+    setDefaultContextClass(context, 'z-table-editor');
     // 如有默认插槽则相当于直接写el-table
     if (scopedSlots.default) {
       return h('el-table', context);
@@ -175,12 +204,17 @@ export default {
 <style lang="scss">
 .z-table-editor {
   &.el-table td .cell {
-    padding-top: 2px !important;
-    padding-bottom: 2px !important;
-    padding-right: 2px !important;
+    padding-top: 2px;
+    padding-bottom: 2px;
+    padding-right: 2px;
+  }
+  &.el-table td .cell .el-form-item {
+    margin-bottom: 0;
   }
-  .el-form-item {
-    margin-bottom: 0 !important;
+  &.el-table th.el-table__cell .required::before {
+    content: '*';
+    color: red;
+    margin-right: 4px;
   }
 }
 </style>
diff --git a/packages/table/index.vue b/packages/table/index.vue
index eab85fe..6f7b0b1 100644
--- a/packages/table/index.vue
+++ b/packages/table/index.vue
@@ -1,5 +1,5 @@
 <script>
-import { ref } from '../utils/vnode';
+import { ref, setDefaultContextKey } from '../utils/vnode';
 
 export default {
   name: 'Table',
@@ -7,11 +7,14 @@ export default {
   render(h, context) {
     const props = context.props || {};
     if (Object.prototype.hasOwnProperty.call(props, 'editable') && props.editable !== false) {
+      setDefaultContextKey(context, 'editable');
       return h('z-table-editable', { props, scopedSlots: context.scopedSlots, on: context.listeners });
     }
-    if (Object.prototype.hasOwnProperty.call(props, 'editor')) {
+    if (Object.prototype.hasOwnProperty.call(props, 'editor') && props.editor) {
+      setDefaultContextKey(context, 'editor');
       return ref('z-table-editor', context);
     }
+    setDefaultContextKey(context, 'normal');
     return ref('z-table-normal', context);
   },
 };
diff --git a/packages/utils/vnode.js b/packages/utils/vnode.js
index 82f5fde..4e2ebec 100644
--- a/packages/utils/vnode.js
+++ b/packages/utils/vnode.js
@@ -1,3 +1,5 @@
+import { set, get } from '../utils';
+
 // 注册函数式组件ref
 export function registerRef(vnode, context) {
   if (!context.data.ref || !vnode.data.hook) {
@@ -52,7 +54,27 @@ export function renderContext(context) {
   return result;
 }
 
+// 设置默认渲染key
+export function setDefaultContextKey(context, key) {
+  const defaultKey = get(context, 'data.key');
+  if (!defaultKey) {
+    set(context, 'data.key', key);
+  }
+}
+
+// 设置默认class
+export function setDefaultContextClass(context, className) {
+  const defaultClass = get(context, 'data.staticClass');
+  if (!defaultClass) {
+    set(context, 'data.staticClass', className);
+  } else {
+    set(context, 'data.staticClass', `${defaultClass} ${className}`);
+  }
+}
+
 export default {
   registerRef,
   ref,
+  setDefaultContextKey,
+  setDefaultContextClass,
 };
--
libgit2 0.21.0