@utogether/udp-core 1.0.0 → 1.0.1

package/src/plugins/vxe-table/render.tsx

@@ -1,22 +1,27 @@
 /*
- * @Author: levi7754 levi7754@163.com
- * @Date: 2023-10-12 13:53:07
+ * @Author: wei.li
+ * @Date: 2021-12-01 09:18:50
  * @LastEditors: levi7754 levi7754@163.com
- * @LastEditTime: 2025-04-29 14:10:34
- * @FilePath: /sitzone-mes/src/plugins/vxe-table/render.tsx
- * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @LastEditTime: 2025-07-14 18:17:16
+ * @Description: file content
  */
 
+// @ts-nocheck
+
+import dayjs from 'dayjs';
+import { isArray, isEmpty, findTree, isObject, isPlainObject } from 'xe-utils';
 import type {
+  FormItemRenderOptions,
   FormItemContentRenderParams,
   VxeColumnPropTypes,
   VxeGlobalRendererHandles
 } from 'vxe-table';
 
-import { VxeUI } from 'vxe-pc-ui';
-
-import { findTree, isArray, isEmpty } from 'xe-utils';
+import { cookies, storageLocal } from '@utogether/utils';
 
+interface SuFormItemRenderOptions extends FormItemRenderOptions {
+  sourceData: IRecord;
+}
 interface SuEditRender extends VxeColumnPropTypes.EditRender {
   sourceData: IRecord;
 }
@@ -24,115 +29,249 @@ interface SuRenderCellOptions extends VxeGlobalRendererHandles.RenderCellOptions
   sourceData: IRecord[];
 }
 
-VxeUI.renderer.add('#iconselect', {
-  renderEdit(renderOpts, params) {
-    const { row, column } = params;
-    return [<iconSelect v-model={row[column.field]} teleported={false} />];
-  },
-  renderCell(renderOpts, params) {
-    const { row, column } = params;
-    return [<IconifyIconOffline icon={row[column.field]} style="font-size: 16px;" />];
-  },
-  renderItemContent(renderOpts, params) {
-    const { data, field } = params;
-    return [<iconSelect v-model={data[field]} teleported={true} />];
-  }
-});
-
-VxeUI.renderer.add('$treeSelect', {
-  renderEdit(renderOpts: SuEditRender, params) {
-    const { row, column } = params;
-    const { props, sourceData, events } = renderOpts;
-
-    return [
-      <el-tree-select
-        v-model={row[column.field]}
-        data={sourceData}
-        check-strictly
-        {...props}
-        filterable
-        onCheckChange={(node, selected, isLeaf) => onCheckChange(node, selected, isLeaf, events)}
-        onNodeClick={(data, node, treeNode) => onNodeClick(data, node, treeNode, events)}
-        onCurrentChange={(data, node) => onCurrentChange(data, node, events)}
-      />
-    ];
-  },
-  renderCell(renderOpts: SuRenderCellOptions, params) {
-    const { row, column } = params;
-    const { sourceData, props = {} } = renderOpts;
-    const { children = 'children', label = 'label' } = props;
-    const data = findTree(sourceData, item => item['value'] === row[column.field], { children });
-    return data ? [<span>{data.item[label]}</span>] : null;
-  },
-  renderItemContent(renderOpts: SuFormItemRenderOptions, params) {
-    const { data, field } = params;
-    const { props, sourceData, events } = renderOpts;
-    return [
-      <el-tree-select
-        v-model={data[field]}
-        data={sourceData}
-        check-strictly
-        {...props}
-        filterable
-        onCheckChange={(node, selected, isLeaf) => onCheckChange(node, selected, isLeaf, events)}
-        onNodeClick={(data, node, treeNode) => onNodeClick(data, node, treeNode, events)}
-        onCurrentChange={(data, node) => onCurrentChange(data, node, events)}
-      />
-    ];
-  }
-});
+export const VxetableRender = (VXETable, { serviceApi, i18n }) => {
+  const dict = storageLocal.getItem('kLov');
 
-/**
- * 当复选框被点击的时候触发
- * @param node 传递给 data 属性的数组中该节点所对应的对象
- * @param selected 节点本身是否被选中
- * @param isLeaf 节点的子树中是否有被选中的节点
- */
-const onCheckChange = (node, selected, isLeaf, events) => {
-  console.log(node, selected, isLeaf);
-  events?.checkChange && events?.checkChange(node, selected, isLeaf);
-};
-/**
- * 节点被点击的时候触发
- * @param nodeObject 点击的节点对象
- * @param node TreeNode 的 node 属性
- * @param treeNode TreeNode
- */
-const onNodeClick = (nodeObject, node, treeNode, events) => {
-  events?.checkChange && events?.checkChange(nodeObject, node, treeNode);
-};
-/**
- * 当前选中节点变化时触发的事件
- * @param data 当前节点的数据
- * @param node 当前节点的 Node 对象
- */
-const onCurrentChange = (data, node, events) => {
-  events?.checkChange && events?.checkChange(data, node);
-};
+  // form render
+  VXETable.renderer.add('#SuSelect', {
+    renderTableEdit(renderOpts: VxeColumnPropTypes.EditRender, params) {
+      const { row, column } = params;
+      const { options, props, optionProps = {}, events } = renderOpts;
+      // @ts-ignore
+      const { label = 'label', value = 'value' } = optionProps;
+      const { loading = false, multiple, mapField } = props;
+      const componentHook = useComponent();
 
-export const VxetableRender = (VXETable, { serviceApi, dict, i18n }) => {
-  console.log(serviceApi, dict, i18n);
-  VXETable.renderer.add('#select', {
-    renderEdit(renderOpts: VxeColumnPropTypes.EditRender, params) {
+      // 多选时
+      const modelField = multiple ? `_${column.field}` : column.field;
+      // 默认值
+      componentHook.setDefaultValue(props, row, column.field);
+      /**
+       * @description: 远程搜索对应的函数
+       * @param {*} val 录入的参数
+       */
+      function remoteMethod(query) {
+        componentHook.remote(query, column.field, renderOpts);
+      }
+
+      /**
+       * @description: 选中值发生变化时触发
+       * @param {*} val 目前的选中值
+       */
+      function onChange(val) {
+        componentHook.selectChange(val, data, column.field, renderOpts, {
+          column,
+          datasource: 'row'
+        });
+      }
+
+      function onInput(val) {
+        events?.input && events.input(params, val);
+      }
+      /**
+       * @description: 可清空的单选模式下用户点击清空按钮时触发
+       */
+      function onClear() {
+        componentHook.clear(row, column.field, mapField, events, 'row');
+      }
+
+      function onFocus() {
+        !options.length && remoteMethod('');
+        events?.focus && events.focus(params, column.field);
+      }
+
+      return [
+        <el-select
+          v-model={row[modelField]}
+          filterable
+          remote
+          clearable
+          placeholder="请录入关键字搜索"
+          style="width: 100%"
+          remote-method={remoteMethod}
+          loading={loading}
+          {...props}
+          onFocus={() => onFocus()}
+          onChange={v => onChange(v)}
+          onClear={() => onClear()}
+          onInput={v => onInput(v)}
+        >
+          {options.map(item => {
+            return <el-option key={item[value]} label={item[label]} value={item[value]}></el-option>;
+          })}
+        </el-select>
+      ];
+    },
+    // 可编辑显示模板
+    renderTableCell(renderOpts, params) {
       const { row, column } = params;
+      const { props } = renderOpts;
+      const { textValue, multiple } = props;
+      let val = row[column.field];
+      if (textValue) {
+        val = eval(`row.${textValue}`) || row[column.field];
+      }
+      if (val && multiple && isArray(val)) {
+        val = val && val.join(',');
+      }
+      return [<span>{val}</span>];
+    },
+    renderItemContent(renderOpts: FormItemRenderOptions, params: FormItemContentRenderParams) {
+      const { data, field } = params;
       const { options, props, optionProps = {}, events } = renderOpts;
       // @ts-ignore
+      const { label = 'label', value = 'value' } = optionProps;
+      const { mapField, multiple, loading = false } = props;
+
+      const componentHook = useComponent();
+      // 多选时, model挂载到临时字段上
+      const modelField = multiple ? `_${field}` : field;
+      // 默认值
+      componentHook.setDefaultValue(props, data, field);
+
+      /**
+       * @description: 远程搜索对应的函数
+       * @param {*} val 录入的参数
+       */
+      async function remoteMethod(query) {
+        componentHook.remote(query, field, renderOpts);
+      }
+
+      /**
+       * @description: 选中值发生变化时触发
+       * @param {*} val 目前的选中值
+       */
+      function onChange(val) {
+        componentHook.selectChange(val, data, field, renderOpts, {
+          datasource: 'data'
+        });
+      }
+
+      function onInput(val) {
+        events?.input && events.input(params, val);
+      }
+      /**
+       * @description: 可清空的单选模式下用户点击清空按钮时触发
+       */
+      function onClear() {
+        componentHook.clear(data, field, mapField, events, 'data');
+      }
+
+      function onFocus() {
+        !options.length && remoteMethod('');
+        events?.focus && events.focus(params);
+      }
+
+      return [
+        <el-select
+          v-model={data[modelField]}
+          filterable
+          remote
+          clearable
+          style="width: 100%"
+          placeholder="请录入关键字搜索"
+          loading={loading}
+          remote-method={remoteMethod}
+          {...props}
+          onFocus={() => onFocus()}
+          onChange={v => onChange(v)}
+          onClear={() => onClear()}
+          onInput={() => onInput()}
+        >
+          {options.map(item => {
+            return <el-option key={item[value]} label={item[label]} value={item[value]}></el-option>;
+          })}
+        </el-select>
+      ];
+    }
+  });
+
+  // 时间范围
+  VXETable.renderer.add('#SuDateRange', {
+    renderItemContent(renderOpts: FormItemRenderOptions, params: FormItemContentRenderParams) {
+      const { data, field } = params;
+      const { props } = renderOpts;
+      if (props?.defaultValue && !data[field]) {
+        data[field] = props.defaultValue;
+        props.defaultValue = props.required ? props.defaultValue : null;
+      }
+
+      const end = new Date();
+      const shortcuts = [
+        {
+          text: i18n('message.udp.today', true),
+          value: () => [getTime(1, 'day'), end]
+        },
+        {
+          text: i18n('message.udp.yesterday', true),
+          value: () => [getTime(2, 'day'), getTime(2, 'day')]
+        },
+        {
+          text: i18n('message.udp.lastWeek', true),
+          value: () => [getTime(7, 'day'), end]
+        },
+        {
+          text: i18n('message.udp.lastMonth', true),
+          value: () => [getTime(1, 'month'), end]
+        },
+        {
+          text: i18n('message.udp.threeMonth', true),
+          value: () => [getTime(3, 'month'), end]
+        },
+        {
+          text: i18n('message.udp.halfYear', true),
+          value: () => [getTime(6, 'month'), end]
+        },
+        {
+          text: i18n('message.udp.anniversary', true),
+          value: () => [getTime(1, 'year'), end]
+        }
+      ];
+
+      const getTime = (offset, type) => {
+        return dayjs().subtract(offset, type).add('1', 'day').format();
+      };
+
+      return [
+        <el-date-picker
+          v-model={data[field]}
+          type={props?.type || 'daterange'}
+          shortcuts={shortcuts}
+          style="width: 100%"
+          range-separator={i18n('message.to', true)}
+          start-placeholder={i18n('message.startDate', true)}
+          end-placeholder={i18n('message.endDate', true)}
+          {...props}
+        />
+      ];
+    }
+  });
+  // 下拉选择
+  VXETable.renderer.add('#select', {
+    renderTableEdit(renderOpts: VxeColumnPropTypes.EditRender, params) {
+      const { row, column } = params;
+      const { options, props, optionProps = {}, events } = renderOpts;
       const { label = 'label', value = 'value', extLabel } = optionProps;
-      if (props.multiple && row[column.field]) {
-        !isArray(row[column.field]) &&
-          row[column.field].split(',').forEach(ff => {
-            const isExit = options.some(s => s[label] === ff);
-            !isExit && options.push({ [value]: ff, [label]: ff });
-          });
+      const { mapField } = props;
+
+      const componentHook = useComponent();
+
+      if (props.multiple && row[column.field] && !isArray(row[column.field])) {
+        row[column.field].split(',').forEach(dv => {
+          const isExit = options.some(option => option[label] === dv);
+          !isExit && options.push({ [value]: dv, [label]: dv });
+        });
       }
 
       function onChange(val) {
-        const item = val && options.find(option => val === option[value]);
-        events?.change && events.change(params, val, item, column.field);
+        componentHook.selectChange(val, row, column.field, renderOpts, {
+          column,
+          datasource: 'row'
+        });
       }
 
       function onClear() {
-        events?.clear && events.clear({ row, field: column.field });
+        componentHook.clear(row, column.field, mapField, events, 'row');
       }
 
       return [
@@ -141,7 +280,6 @@ export const VxetableRender = (VXETable, { serviceApi, dict, i18n }) => {
           filterable
           clearable
           {...props}
-          size="small"
           style="width: 100%"
           onChange={v => onChange(v)}
           onClear={() => onClear()}
@@ -150,23 +288,64 @@ export const VxetableRender = (VXETable, { serviceApi, dict, i18n }) => {
             return (
               <el-option
                 key={item[value]}
-                label={item[extLabel] ? item[value] : item[label]}
+                label={extLabel && item[extLabel] ? item[value] : item[label]}
                 value={item[value]}
-              >
-                <span style="float: left">
-                  {extLabel && item[extLabel] ? `${item[value]}-${item[extLabel]}` : item[value]}
-                </span>
-                {value !== label && !item[extLabel] ? (
-                  <span class="ut-coSelect-option">{item[label]}</span>
-                ) : null}
-              </el-option>
+              ></el-option>
+            );
+          })}
+        </el-select>
+      ];
+    },
+    renderTableDefault(renderOpts: VxeColumnPropTypes.EditRender, params) {
+      const { row, column } = params;
+      const { options, props, optionProps = {}, events } = renderOpts;
+      const { label = 'label', value = 'value', extLabel } = optionProps;
+      const { mapField } = props;
+
+      const componentHook = useComponent();
+
+      if (props.multiple && row[column.field] && !isArray(row[column.field])) {
+        row[column.field].split(',').forEach(dv => {
+          const isExit = options.some(option => option[label] === dv);
+          !isExit && options.push({ [value]: dv, [label]: dv });
+        });
+      }
+
+      function onChange(val) {
+        componentHook.selectChange(val, row, column.field, renderOpts, {
+          column,
+          datasource: 'row'
+        });
+      }
+
+      function onClear() {
+        componentHook.clear(row, column.field, mapField, events, 'row');
+      }
+
+      return [
+        <el-select
+          v-model={row[column.field]}
+          filterable
+          clearable
+          {...props}
+          style="width: 100%"
+          onChange={v => onChange(v)}
+          onClear={() => onClear()}
+        >
+          {options.map(item => {
+            return (
+              <el-option
+                key={item[value]}
+                label={extLabel && item[extLabel] ? item[value] : item[label]}
+                value={item[value]}
+              ></el-option>
             );
           })}
         </el-select>
       ];
     },
     // 可编辑显示模板
-    renderCell(renderOpts, params) {
+    renderTableCell(renderOpts, params) {
       const { row, column } = params;
       const { props, options, optionProps } = renderOpts;
       // @ts-ignore
@@ -185,13 +364,14 @@ export const VxetableRender = (VXETable, { serviceApi, dict, i18n }) => {
       }
       return [<span>{val}</span>];
     },
-    renderItemContent(renderOpts, params) {
+    renderItemContent(renderOpts: FormItemRenderOptions, params: FormItemContentRenderParams) {
       const { data, field } = params;
       const { options, props, optionProps = {}, events } = renderOpts;
-      // @ts-ignore
       const { label = 'label', value = 'value' } = optionProps;
+      const componentHook = useComponent();
+
       // 默认值
-      const { defaultValues } = props;
+      const { defaultValues, mapField } = props;
       if (defaultValues) {
         data[field] = defaultValues;
       }
@@ -200,53 +380,41 @@ export const VxetableRender = (VXETable, { serviceApi, dict, i18n }) => {
        * @param {*} val 目前的选中值
        */
       function onChange(val) {
-        const { fieldMap = {} } = props;
-        const item = options.find(option => val === option[value]);
-        const keys = Object.keys(fieldMap);
-        if (keys.length) {
-          const values: string[] = Object.values(fieldMap);
-          keys.forEach((key, idx) => {
-            data[key] = val ? item[values[idx]] : null;
-          });
-        }
-        const parm = { item, row: data, property: field };
-        events?.change && events.change(parm);
+        componentHook.selectChange(val, data, field, renderOpts, {
+          datasource: 'data'
+        });
       }
 
       /**
        * @description: 可清空的单选模式下用户点击清空按钮时触发
        */
       function onClear() {
-        events?.clear && events.clear({ data, field });
+        componentHook.clear(data, field, mapField, events, 'data');
       }
 
       return [
         <el-select
           v-model={data[field]}
-          {...props}
           filterable
           clearable
-          size="small"
           style="width: 100%"
+          {...props}
           onChange={v => onChange(v)}
           onClear={() => onClear()}
         >
           {options.map(item => {
-            return (
-              <el-option key={item[value]} label={item[label]} value={item[value]}>
-                <span style="float: left">{item[label]}</span>
-                <span class="ut-coSelect-option">{item[value]}</span>
-              </el-option>
-            );
+            return <el-option key={item[value]} label={item[label]} value={item[value]}></el-option>;
           })}
         </el-select>
       ];
     }
   });
+  // Lov
   VXETable.renderer.add('#lov', {
-    renderItemContent(renderOpts, params: FormItemContentRenderParams) {
+    renderItemContent(renderOpts: FormItemRenderOptions, params: FormItemContentRenderParams) {
       const { data, field } = params;
       const { props, events } = renderOpts;
+      const componentHook = useComponent();
       // 默认值
       const { defaultValues, mapField } = props;
       if (defaultValues) {
@@ -257,8 +425,8 @@ export const VxetableRender = (VXETable, { serviceApi, dict, i18n }) => {
        * @param {*} val 目前的选中值
        */
       function onChange(record, displayField) {
-        const { mapField, field, displayName, isMulti } = props;
-        if (!isMulti) {
+        const { mapField, field, displayName, multiple } = props;
+        if (!multiple) {
           const obj = {
             [displayName || field]: record[displayField || displayName || field]
           };
@@ -266,7 +434,7 @@ export const VxetableRender = (VXETable, { serviceApi, dict, i18n }) => {
             obj[key] = record[mapField[key]];
           }
           Object.assign(data, obj);
-        } else if (isMulti) {
+        } else if (multiple) {
           const obj = {};
           data[displayName || field] = record.reduce((curv, prev) => {
             for (const key in mapField) {
@@ -277,7 +445,7 @@ export const VxetableRender = (VXETable, { serviceApi, dict, i18n }) => {
           }, '');
           Object.assign(data, obj);
         }
-        const parm = { row: data, field, item: record };
+        const parm = { row: data, property: field, item: record, field };
         events?.change && events.change(parm);
       }
 
@@ -285,13 +453,7 @@ export const VxetableRender = (VXETable, { serviceApi, dict, i18n }) => {
        * @description: 点击清空按钮时触发
        */
       function onClear() {
-        data[field] = null;
-        if (!isEmpty(mapField)) {
-          for (const key in mapField) {
-            data[key] = null;
-          }
-        }
-        events?.clear && events.clear({ data, field: field });
+        componentHook.clear(data, field, mapField, events, 'data');
       }
 
       return [
@@ -305,14 +467,13 @@ export const VxetableRender = (VXETable, { serviceApi, dict, i18n }) => {
       ];
     },
     // 单元格编辑
-    renderEdit(renderOpts: VxeColumnPropTypes.EditRender, params) {
-      console.log('.......');
+    renderTableEdit(renderOpts: VxeColumnPropTypes.EditRender, params) {
       const { row, column } = params;
       const { props, events } = renderOpts;
-
+      const componentHook = useComponent();
       function onChange(record, displayField) {
-        const { mapField, field, displayName, isMulti } = props;
-        if (!isMulti) {
+        const { mapField, field, displayName, multiple } = props;
+        if (!multiple) {
           const obj = {
             [displayName || field]: record[displayField || displayName || field]
           };
@@ -325,34 +486,27 @@ export const VxetableRender = (VXETable, { serviceApi, dict, i18n }) => {
       }
 
       function onClear() {
-        const { mapField, field } = props;
-        row[column.field] = null;
-        if (!isEmpty(mapField)) {
-          for (const key in mapField) {
-            row[key] = null;
-          }
-        }
-        events?.clear && events.clear({ row, field });
+        componentHook.clear(row, field, mapField, events, 'row');
       }
 
       return [
         <ut-lov
           record={row}
+          mode="vxe"
           {...props}
-          mode="ele"
           onChange={(v, f) => onChange(v, f)}
           onClear={() => onClear()}
         />
       ];
     },
     // 单元格默认
-    renderDefault(renderOpts: VxeColumnPropTypes.EditRender, params) {
+    renderTableDefault(renderOpts: VxeColumnPropTypes.EditRender, params) {
       const { row, column } = params;
       const { props, events } = renderOpts;
-
+      const componentHook = useComponent();
       function onChange(record, displayField) {
-        const { mapField, field, displayName, isMulti } = props;
-        if (!isMulti) {
+        const { mapField, field, displayName, multiple } = props;
+        if (!multiple) {
           const obj = {
             [displayName || field]: record[displayField || displayName || field]
           };
@@ -363,35 +517,301 @@ export const VxetableRender = (VXETable, { serviceApi, dict, i18n }) => {
         }
         events?.change && events.change(params, record, row[column.field]);
       }
-
+      /**
+       * @description 清空数据
+       */
       function onClear() {
-        const { mapField, field } = props;
-        row[column.field] = null;
-        if (!isEmpty(mapField)) {
-          for (const key in mapField) {
-            row[key] = null;
-          }
-        }
-        events?.clear && events.clear({ row, field });
+        componentHook.clear(row, field, mapField, events, 'row');
       }
 
       return [
         <ut-lov
           record={row}
-          {...props}
           mode="ele"
+          {...props}
           onChange={(v, f) => onChange(v, f)}
           onClear={() => onClear()}
         />
       ];
     },
     // 可编辑显示模板
-    renderCell(renderOpts, params) {
+    renderTableCell(renderOpts, params) {
       const { row, column } = params;
-      // @ts-ignore
-      // const { textValue } = props;
-      const val = row[column.field];
-      return [<span>{val}</span>];
+      return [<span>{row[column.field]}</span>];
+    }
+  });
+  // form upload
+  VXETable.renderer.add('#upload', {
+    renderItemContent(renderOpts: FormItemRenderOptions, params: FormItemContentRenderParams) {
+      const { data, field } = params;
+      const { props, events } = renderOpts;
+
+      /**
+       * @description: 点击清空按钮时触发
+       */
+      function onClear() {
+        data[field] = '';
+        componentHook.clear(data, field, props.mapField, events, 'data');
+      }
+
+      return [<form-upload2 record={data} field={field} {...props} onClear={() => onClear()} />];
     }
   });
+
+  // 创建一个简单的超链接渲染
+  VXETable.renderer.add('#tag', {
+    // 默认显示模板
+    renderTableDefault(renderOpts, params) {
+      const { row, column } = params;
+      const {
+        props: { code, tagMap }
+      } = renderOpts;
+      function getTagType() {
+        return row[column.field] ? tagMap[row[column.field]] : null;
+      }
+      return [
+        row[column.field] ? (
+          <el-tag effect="dark" type={getTagType()}>
+            {getValue(code, row[column.field])}
+          </el-tag>
+        ) : null
+      ];
+    }
+  });
+
+  VXETable.renderer.add('#switch', {
+    renderTableDefault(renderOpts, params) {
+      const { row, column } = params;
+      const {
+        props: { code, activeValue, inactiveValue },
+        events
+      } = renderOpts;
+      function onChange(value) {
+        const params = { row, column, value };
+        events?.change && events.change(params);
+      }
+      return [
+        row[column.field] ? (
+          <el-switch
+            v-model={row[column.field]}
+            inline-prompt
+            size="large"
+            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #E6A23C"
+            {...renderOpts.props}
+            active-text={getValue(code, activeValue)}
+            inactive-text={getValue(code, inactiveValue)}
+            onChange={v => onChange(v)}
+          />
+        ) : null
+      ];
+    }
+  });
+
+  VXETable.renderer.add('#iconSelect', {
+    renderTableEdit(renderOpts: VxeColumnPropTypes.EditRender, params) {
+      const { row, column } = params;
+      return [<SuIconSelect v-model={row[column.field]} teleported={false} />];
+    },
+    renderTableCell(renderOpts, params) {
+      const { row, column } = params;
+      return [<IconifyIconOffline icon={row[column.field]} style="font-size: 16px;" />];
+    },
+    renderItemContent(renderOpts: FormItemRenderOptions, params: FormItemContentRenderParams) {
+      const { data, field } = params;
+      return [<SuIconSelect v-model={data[field]} teleported />];
+    }
+  });
+
+  VXETable.renderer.add('#treeSelect', {
+    renderTableEdit(renderOpts: SuEditRender, params) {
+      const { row, column } = params;
+      const { props, sourceData, events } = renderOpts;
+
+      return [
+        <el-tree-select
+          v-model={row[column.field]}
+          data={sourceData}
+          check-strictly
+          {...props}
+          filterable
+          onCheckChange={(node, selected, isLeaf) => onCheckChange(node, selected, isLeaf, events)}
+          onNodeClick={(data, node, treeNode) => onNodeClick(data, node, treeNode, events)}
+          onCurrentChange={(data, node) => onCurrentChange(data, node, events)}
+        />
+      ];
+    },
+    renderTableCell(renderOpts: SuRenderCellOptions, params) {
+      const { row, column } = params;
+      const { sourceData, props = {} } = renderOpts;
+      const { children = 'children', label = 'label' } = props;
+      const data = findTree(sourceData, item => item['value'] === row[column.field], { children });
+      return data ? [<span>{data.item[label]}</span>] : null;
+    },
+    renderItemContent(renderOpts: SuFormItemRenderOptions, params: FormItemContentRenderParams) {
+      const { data, field } = params;
+      const { props, sourceData, events } = renderOpts;
+      return [
+        <el-tree-select
+          v-model={data[field]}
+          data={sourceData}
+          check-strictly
+          {...props}
+          filterable
+          onCheckChange={(node, selected, isLeaf) => onCheckChange(node, selected, isLeaf, events)}
+          onNodeClick={(data, node, treeNode) => onNodeClick(data, node, treeNode, events)}
+          onCurrentChange={(data, node) => onCurrentChange(data, node, events)}
+        />
+      ];
+    }
+  });
+
+  /**
+   * 组件公共方法
+   * @returns
+   */
+  const useComponent = () => {
+    // 下拉框选择
+    /**
+     * select下拉选择change事件
+     * @param value 选择值
+     * @param data 数据源
+     * @param field 字段
+     * @param renderOpts 渲染参数
+     * @param opts 数据源类型等
+     * @return `{ data: 数据源, field: 字段, options?: 选中的选项组, option?: 选中的选项, column?: 列信息 }`
+     */
+    const selectChange = (value, data, field, renderOpts, opts) => {
+      let option = null;
+
+      const { datasource } = opts;
+      const { options, props, optionProps = {}, events } = renderOpts;
+
+      const callData = { [datasource]: data, field };
+      // 1、清空原有数据
+      data[field] = null;
+      if (!isEmpty(value) && props?.multiple) {
+        // 2、给实际字段赋值
+        data[field] = value.join(',');
+        option = [];
+        // 多选
+        value.forEach(item => {
+          const selectOpt = options.find(opt => item === opt[optionProps?.value]);
+          if (selectOpt && !isEmpty(props.mapField) && isObject(props.mapField)) {
+            Object.keys(props.mapField).forEach(key => {
+              const val = selectOpt[props.mapField[key]];
+              const ov = data[key] ? data[key].toString() : '';
+              // 默认用逗号(,)分割
+              data[key] = ov && !ov.includes(val) ? `${ov},${val}` : val;
+            });
+          }
+          selectOpt && option.push(selectOpt);
+        });
+        Object.assign(callData, { options: option });
+      } else {
+        // 3、原字段赋值, 多选进来说明必定是空值
+        data[field] = props?.multiple ? null : value;
+        option = options.find(opt => value === opt[optionProps?.value]);
+        if (!isEmpty(props.mapField) && isObject(props.mapField)) {
+          Object.keys(props.mapField).forEach(key => {
+            data[key] = option ? option[props.mapField[key]] : null;
+          });
+        }
+        Object.assign(callData, { option });
+      }
+      datasource === 'row' && Object.assign(callData, { column: opts.column });
+      events?.change && events.change(callData);
+    };
+    const setDefaultValue = (props, data, field) => {
+      const { multiple, defaultValue } = props;
+      // 多选时, model挂载到临时字段上
+      const modelField = multiple ? `_${field}` : field;
+      // 默认值
+      if (!data[field] && defaultValue) {
+        data[field] = defaultValue;
+        if (isPlainObject(defaultValue)) {
+          const keys = Object.keys(defaultValue);
+          keys.forEach(key => {
+            data[key] = data[key] || defaultValue[key];
+          });
+        }
+      }
+      if (!data[modelField] && data[field]) {
+        data[modelField] = multiple ? data[field]?.split(',') : data[field];
+      }
+    };
+    const remote = async (query, field, renderOpts) => {
+      const { options, props, events } = renderOpts;
+      const { fetchField, url, defaultParams = {}, method = 'get' } = props;
+      const commonParam = getCookieParam();
+      const params = Object.assign(
+        { pageSize: 20, pageNum: 1, ...commonParam, ...defaultParams },
+        { [fetchField || field]: query }
+      );
+      if (props.loading) return;
+      let res;
+      try {
+        options.length = 0;
+        props.loading = true;
+        res = await serviceApi[method](url, params);
+        if (events?.filterMethod) {
+          options.push(...events.filterMethod(res.list || res));
+        } else if (res) {
+          res.list ? options.push(...res.list) : options.push(...res);
+        }
+      } finally {
+        props.loading = false;
+      }
+    };
+    // 清除数据
+    const clear = (data, field, mapField, events, datasource) => {
+      data[field] = null;
+      if (!isEmpty(mapField)) {
+        for (const key in mapField) {
+          data[key] = null;
+        }
+      }
+      events?.clear && events.clear({ [datasource]: data, field });
+    };
+    return { clear, remote, selectChange, setDefaultValue };
+  };
+
+  /**
+   * 当复选框被点击的时候触发
+   * @param node 传递给 data 属性的数组中该节点所对应的对象
+   * @param selected 节点本身是否被选中
+   * @param isLeaf 节点的子树中是否有被选中的节点
+   */
+  const onCheckChange = (node, selected, isLeaf, events) => {
+    console.log(node, selected, isLeaf);
+    events?.checkChange && events?.checkChange(node, selected, isLeaf);
+  };
+  /**
+   * 节点被点击的时候触发
+   * @param nodeObject 点击的节点对象
+   * @param node TreeNode 的 node 属性
+   * @param treeNode TreeNode
+   */
+  const onNodeClick = (nodeObject, node, treeNode, events) => {
+    events?.checkChange && events?.checkChange(nodeObject, node, treeNode);
+  };
+  /**
+   * 当前选中节点变化时触发的事件
+   * @param data 当前节点的数据
+   * @param node 当前节点的 Node 对象
+   */
+  const onCurrentChange = (data, node, events) => {
+    events?.checkChange && events?.checkChange(data, node);
+  };
+
+  function getValue(code, value) {
+    if (!value || !code || !dict) return value;
+    return dict[code]?.children?.find(item => item.dictCode === value)?.dictName;
+  }
+
+  return VXETable;
+};
+
+const getCookieParam = () => {
+  const kCOOKIES = 'kCookies_param';
+  return cookies.get(kCOOKIES) ? JSON.parse(cookies.get(kCOOKIES)) : {};
 };