@utogether/udp-core 1.0.1-beta.3 → 1.0.1-beta.31

package/src/plugins/vxe-table/index.ts

@@ -1,53 +1,116 @@
-/*
- * @Author: levi7754 levi7754@163.com
- * @Date: 2024-06-05 14:32:03
- * @LastEditors: levi7754 levi7754@163.com
- * @LastEditTime: 2025-07-21 11:37:34
- * @FilePath: /udp-front/packages/udp-core/src/plugins/vxe-table/index.ts
- * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
- */
-import 'xe-utils';
-import { merge } from 'xe-utils';
-import { geti18n, transformI18n } from '../i18n/index';
-// import { storageLocal } from '@utogether/utils';
-// import { VxetableRender } from '@utogether/utils';
-import { VxetableRender } from './render';
-import { getServiceApi } from '../../api';
-
-import VXETable, { VxeUI } from 'vxe-table';
-// import './render.tsx';
-
-// const dict = storageLocal.getItem('kLov');
-VxetableRender(VXETable, { serviceApi: getServiceApi(), i18n: transformI18n });
-
-// 全局默认参数
-const defaultConfig = {
-  // 对组件内置的提示语进行国际化翻译
-  // @ts-ignore
-  i18n: (key, args) => geti18n().global.t(key, args),
-  // 可选，对参数中的列头、校验提示..等进行自动翻译（只对支持国际化的有效）
-  translate(key) {
-    // 例如，只翻译 "message." 开头的键值
-    const NAMESPACED = ['message.', 'el.'];
-    if (key && NAMESPACED.findIndex(v => key.includes(v)) !== -1) {
-      return geti18n().global.t.call(geti18n().global.locale, key);
-    }
-    return key;
-  }
-};
-
-export function setTableConfig(config = {}) {
-  VXETable.setConfig(merge(defaultConfig, config));
-
-  VxeUI.interceptor.add('event.clearEdit', {
-    tableInterceptorMethod(params) {
-      const { $event } = params;
-      if ($event.target.className.indexOf('vxe-table--ignore-clear') > -1) return false;
-    }
-  });
-}
-
-export function setTheme(theme) {
-  // 切换为暗黑主题
-  VxeUI.setTheme(theme);
-}
+/*
+ * @Author: levi7754 levi7754@163.com
+ * @Date: 2024-06-05 14:32:03
+ * @LastEditors: levi7754 levi7754@163.com
+ * @LastEditTime: 2025-11-04 13:58:45
+ * @FilePath: /udp-front/packages/udp-core/src/plugins/vxe-table/index.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import 'xe-utils';
+import { merge, toDateString, getWhatDay } from 'xe-utils';
+import { geti18n, transformI18n } from '../i18n/index';
+// import { storageLocal } from '@utogether/utils';
+import { VxetableRender } from '@utogether/utils';
+// import { VxetableRender } from './render';
+import { getServiceApi } from '../../api';
+
+import VXETable, { VxeUI } from 'vxe-table';
+// import './render.tsx';
+
+// const dict = storageLocal.getItem('kLov');
+VxetableRender(VXETable, { serviceApi: getServiceApi(), i18n: transformI18n });
+setCommands();
+
+// 全局默认参数
+const defaultConfig = {
+  // 对组件内置的提示语进行国际化翻译
+  // @ts-ignore
+  i18n: (key, args) => geti18n().global.t(key, args),
+  // 可选，对参数中的列头、校验提示..等进行自动翻译（只对支持国际化的有效）
+  translate(key) {
+    // 例如，只翻译 "message." 开头的键值
+    const NAMESPACED = ['message.', 'el.'];
+    if (key && NAMESPACED.findIndex(v => key.includes(v)) !== -1) {
+      return geti18n().global.t.call(geti18n().global.locale, key);
+    }
+    return key;
+  }
+};
+
+export function setTableConfig(config = {}) {
+  VXETable.setConfig(merge(defaultConfig, config));
+
+  VxeUI.interceptor.add('event.clearEdit', {
+    tableInterceptorMethod(params) {
+      const { $event } = params;
+      if ($event.target.className.indexOf('vxe-table--ignore-clear') > -1) return false;
+    }
+  });
+}
+
+export function setTheme(theme) {
+  // 切换为暗黑主题
+  VxeUI.setTheme(theme);
+}
+
+function setCommands() {
+  // 定义选中日期今天指令
+  VxeUI.commands.add('utTodyay', {
+    dateRangePickerCommandMethod({ $dateRangePicker }) {
+      const startDate = toDateString(new Date(), 'yyyy-MM-dd 00:00:00');
+      const endDate = toDateString(new Date(), 'yyyy-MM-dd 23:59:59');
+      $dateRangePicker.setModelValue(startDate, endDate);
+    }
+  });
+  // 定义选中日期昨天指令
+  VxeUI.commands.add('utYesterDay', {
+    dateRangePickerCommandMethod({ $dateRangePicker }) {
+      const startDate = toDateString(getWhatDay(new Date(), -1), 'yyyy-MM-dd 00:00:00');
+      const endDate = toDateString(getWhatDay(new Date(), -1), 'yyyy-MM-dd 23:59:59');
+      $dateRangePicker.setModelValue(startDate, endDate);
+    }
+  });
+  // 定义选中日期最近一周指令
+  VxeUI.commands.add('utRecentWeek', {
+    dateRangePickerCommandMethod({ $dateRangePicker }) {
+      const startDate = toDateString(getWhatDay(new Date(), -7), 'yyyy-MM-dd 00:00:00');
+      const endDate = toDateString(new Date(), 'yyyy-MM-dd 23:59:59');
+      $dateRangePicker.setModelValue(startDate, endDate);
+    }
+  });
+
+  // 定义选中日期最近一个月指令
+  VxeUI.commands.add('utRecentMonth', {
+    dateRangePickerCommandMethod({ $dateRangePicker }) {
+      const startDate = toDateString(getWhatDay(new Date(), -30), 'yyyy-MM-dd 00:00:00');
+      const endDate = toDateString(new Date(), 'yyyy-MM-dd 23:59:59');
+      $dateRangePicker.setModelValue(startDate, endDate);
+    }
+  });
+
+  // 定义选中日期最近三个月指令
+  VxeUI.commands.add('utRecentThreeMonth', {
+    dateRangePickerCommandMethod({ $dateRangePicker }) {
+      const startDate = toDateString(getWhatDay(new Date(), -90), 'yyyy-MM-dd 00:00:00');
+      const endDate = toDateString(new Date(), 'yyyy-MM-dd 23:59:59');
+      $dateRangePicker.setModelValue(startDate, endDate);
+    }
+  });
+
+  // 定义选中日期最近半年指令
+  VxeUI.commands.add('utRecentHalfYear', {
+    dateRangePickerCommandMethod({ $dateRangePicker }) {
+      const startDate = toDateString(getWhatDay(new Date(), -180), 'yyyy-MM-dd 00:00:00');
+      const endDate = toDateString(new Date(), 'yyyy-MM-dd 23:59:59');
+      $dateRangePicker.setModelValue(startDate, endDate);
+    }
+  });
+  // 定义选中日期最近半年指令
+  VxeUI.commands.add('utRecentYear', {
+    dateRangePickerCommandMethod({ $dateRangePicker }) {
+      const startDate = toDateString(getWhatDay(new Date(), -365), 'yyyy-MM-dd 00:00:00');
+      const endDate = toDateString(new Date(), 'yyyy-MM-dd 23:59:59');
+      $dateRangePicker.setModelValue(startDate, endDate);
+    }
+  });
+}

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

@@ -2,7 +2,7 @@
  * @Author: wei.li
  * @Date: 2021-12-01 09:18:50
  * @LastEditors: levi7754 levi7754@163.com
- * @LastEditTime: 2025-07-23 09:41:24
+ * @LastEditTime: 2025-10-29 16:48:47
  * @Description: file content
  */
 
@@ -251,17 +251,15 @@ export const VxetableRender = (VXETable, { serviceApi, i18n }) => {
     renderTableEdit(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 { label = 'label', value = 'value' } = optionProps;
+      const { mapField, multiple } = props;
+      console.log('ssssss');
       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 });
-        });
-      }
+      // 多选时
+      const modelField = multiple ? `_${column.field}` : column.field;
+      // 默认值
+      componentHook.setDefaultValue(props, row, column.field);
 
       function onChange(val) {
         componentHook.selectChange(val, row, column.field, renderOpts, {
@@ -276,22 +274,17 @@ export const VxetableRender = (VXETable, { serviceApi, i18n }) => {
 
       return [
         <el-select
-          v-model={row[column.field]}
+          v-model={row[modelField]}
           filterable
           clearable
           {...props}
           style="width: 100%"
+          class="udp-select-wrapper"
           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>
-            );
+            return <el-option key={item[value]} label={item[label]} value={item[value]}></el-option>;
           })}
         </el-select>
       ];
@@ -300,17 +293,12 @@ export const VxetableRender = (VXETable, { serviceApi, i18n }) => {
       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 });
-        });
-      }
-
+      const { mapField, multiple } = props;
+      console.log('defaultParams');
+      // 多选时
+      const modelField = multiple ? `_${column.field}` : column.field;
+      // 默认值
+      componentHook.setDefaultValue(props, row, column.field);
       function onChange(val) {
         componentHook.selectChange(val, row, column.field, renderOpts, {
           column,
@@ -324,7 +312,7 @@ export const VxetableRender = (VXETable, { serviceApi, i18n }) => {
 
       return [
         <el-select
-          v-model={row[column.field]}
+          v-model={row[modelField]}
           filterable
           clearable
           {...props}
@@ -350,6 +338,7 @@ export const VxetableRender = (VXETable, { serviceApi, i18n }) => {
       const { props, options, optionProps } = renderOpts;
       // @ts-ignore
       const { label = 'label', value = 'value', extLabel } = optionProps;
+      console.log('defaultParams');
       const { textValue } = props;
       let val = row[column.field];
       const item = options.find(opt => opt[value] === val);
@@ -368,13 +357,15 @@ export const VxetableRender = (VXETable, { serviceApi, i18n }) => {
       const { data, field } = params;
       const { options, props, optionProps = {}, events } = renderOpts;
       const { label = 'label', value = 'value' } = optionProps;
+
+      const { mapField, multiple } = props;
+
       const componentHook = useComponent();
 
+      // 多选时, model挂载到临时字段上
+      const modelField = multiple ? `_${field}` : field;
       // 默认值
-      const { defaultValues, mapField } = props;
-      if (defaultValues) {
-        data[field] = defaultValues;
-      }
+      componentHook.setDefaultValue(props, data, field);
       /**
        * @description: 选中值发生变化时触发
        * @param {*} val 目前的选中值
@@ -394,7 +385,7 @@ export const VxetableRender = (VXETable, { serviceApi, i18n }) => {
 
       return [
         <el-select
-          v-model={data[field]}
+          v-model={data[modelField]}
           filterable
           clearable
           style="width: 100%"
@@ -409,6 +400,84 @@ export const VxetableRender = (VXETable, { serviceApi, i18n }) => {
       ];
     }
   });
+  // 下拉选择
+  VXETable.renderer.add('#textarea', {
+    renderTableEdit(renderOpts: VxeColumnPropTypes.EditRender, params) {
+      const { row, column } = params;
+      const { props, events } = renderOpts;
+      const { mapField } = props;
+
+      const componentHook = useComponent();
+      function onChange(val) {
+        componentHook.change(val, row, column.field, renderOpts, { column, datasource: 'row' });
+      }
+
+      function onClear() {
+        componentHook.clear(row, column.field, mapField, events, 'row');
+      }
+
+      return [
+        <vxe-textarea
+          v-model={row[column.field]}
+          {...props}
+          style="width: 100%"
+          onChange={v => onChange(v)}
+          onClear={() => onClear()}
+        />
+      ];
+    },
+    renderTableDefault(renderOpts: VxeColumnPropTypes.EditRender, params) {
+      const { row, column } = params;
+      const { props, events } = renderOpts;
+      const { mapField } = props;
+
+      const componentHook = useComponent();
+
+      function onChange(val) {
+        componentHook.change(val, row, column.field, renderOpts, { column, datasource: 'row' });
+      }
+
+      function onClear() {
+        componentHook.clear(row, column.field, mapField, events, 'row');
+      }
+
+      return [
+        <vxe-textarea v-model={row[column.field]} {...props} onChange={v => onChange(v)} onClear={() => onClear()} />
+      ];
+    },
+    // 可编辑显示模板
+    renderTableCell(renderOpts, params) {
+      const { row, column } = params;
+      return row[column.field];
+    },
+    renderItemContent(renderOpts: FormItemRenderOptions, params: FormItemContentRenderParams) {
+      const { data, field } = params;
+      const { props, events } = renderOpts;
+      const componentHook = useComponent();
+
+      // 默认值
+      const { defaultValue, mapField } = props;
+      if (defaultValue) {
+        data[field] = defaultValue;
+      }
+      /**
+       * @description: 选中值发生变化时触发
+       * @param {*} val 目前的选中值
+       */
+      function onChange(val) {
+        componentHook.change(val, data, field, renderOpts, { datasource: 'data' });
+      }
+
+      /**
+       * @description: 可清空的单选模式下用户点击清空按钮时触发
+       */
+      function onClear() {
+        componentHook.clear(data, field, mapField, events, 'data');
+      }
+
+      return [<vxe-textarea v-model={data[field]} {...props} onChange={v => onChange(v)} onClear={() => onClear()} />];
+    }
+  });
   // Lov
   VXETable.renderer.add('#lov', {
     renderItemContent(renderOpts: FormItemRenderOptions, params: FormItemContentRenderParams) {
@@ -445,7 +514,7 @@ export const VxetableRender = (VXETable, { serviceApi, i18n }) => {
           }, '');
           Object.assign(data, obj);
         }
-        const parm = { row: data, property: field, item: record, field };
+        const parm = { data, options: record, field };
         events?.change && events.change(parm);
       }
 
@@ -457,13 +526,7 @@ export const VxetableRender = (VXETable, { serviceApi, i18n }) => {
       }
 
       return [
-        <ut-lov
-          record={data}
-          {...props}
-          mode="vxe"
-          onChange={(v, f) => onChange(v, f)}
-          onClear={() => onClear()}
-        />
+        <ut-lov record={data} {...props} mode="vxe" onChange={(v, f) => onChange(v, f)} onClear={() => onClear()} />
       ];
     },
     // 单元格编辑
@@ -483,7 +546,8 @@ export const VxetableRender = (VXETable, { serviceApi, i18n }) => {
           }
           Object.assign(row, obj);
         }
-        events?.change && events.change(params, record, row[column.field]);
+        const params = { row, options: record, field: column.field, column };
+        events?.change && events.change(params);
       }
 
       function onClear() {
@@ -517,7 +581,8 @@ export const VxetableRender = (VXETable, { serviceApi, i18n }) => {
           }
           Object.assign(row, obj);
         }
-        events?.change && events.change(params, record, row[column.field]);
+        const params = { row, options: record, field: column.field, column };
+        events?.change && events.change(params);
       }
       /**
        * @description 清空数据
@@ -527,13 +592,7 @@ export const VxetableRender = (VXETable, { serviceApi, i18n }) => {
       }
 
       return [
-        <ut-lov
-          record={row}
-          mode="ele"
-          {...props}
-          onChange={(v, f) => onChange(v, f)}
-          onClear={() => onClear()}
-        />
+        <ut-lov record={row} mode="ele" {...props} onChange={(v, f) => onChange(v, f)} onClear={() => onClear()} />
       ];
     },
     // 可编辑显示模板
@@ -544,19 +603,77 @@ export const VxetableRender = (VXETable, { serviceApi, i18n }) => {
   });
   // form upload
   VXETable.renderer.add('#upload', {
+    renderTableEdit(renderOpts: VxeColumnPropTypes.EditRender, params) {
+      const { row, column } = params;
+      const { props, events } = renderOpts;
+
+      /**
+       * @description: 点击清空按钮时触发
+       */
+      function onClear(file, fielist) {
+        row[column.field] = '';
+        events?.remove && events?.remove(file, fielist);
+      }
+
+      return [
+        <form-upload2
+          record={row}
+          field={column.field}
+          size="mini"
+          {...props}
+          render-mode="column"
+          data-status="edit"
+          onRemove={(file, fielist) => onClear(file, fielist)}
+        />
+      ];
+    },
+
+    // 可编辑显示模板
+    renderTableCell(renderOpts, params) {
+      const { row, column } = params;
+      const { props } = renderOpts;
+      return [
+        <form-upload2
+          record={row}
+          field={column.field}
+          size="mini"
+          {...props}
+          mode="image"
+          render-mode="column"
+          data-status="detail"
+        />
+      ];
+    },
     renderItemContent(renderOpts: FormItemRenderOptions, params: FormItemContentRenderParams) {
       const { data, field } = params;
       const { props, events } = renderOpts;
-
       /**
        * @description: 点击清空按钮时触发
        */
-      function onClear() {
+      function onClear(file, fielist) {
         data[field] = '';
-        componentHook.clear(data, field, props.mapField, events, 'data');
+        events?.remove && events?.remove(file, fielist);
       }
 
-      return [<form-upload2 record={data} field={field} {...props} onClear={() => onClear()} />];
+      if (props.singleMode) {
+        // 单个模式下，限制只能单个上传
+        Object.assign(props, { multiple: false, limitCount: 1, autoHiddenButton: true });
+      }
+      if (!props.mode || props.mode === 'image') {
+        props.imageTypes = ['jpg', 'jpeg', 'png', 'gif', 'apk'];
+      }
+
+      console.log({ props });
+
+      return [
+        <form-upload2
+          record={data}
+          field={field}
+          mode="image"
+          {...props}
+          onRemove={(file, fielist) => onClear(file, fielist)}
+        />
+      ];
     }
   });
 
@@ -774,7 +891,16 @@ export const VxetableRender = (VXETable, { serviceApi, i18n }) => {
       }
       events?.clear && events.clear({ [datasource]: data, field });
     };
-    return { clear, remote, selectChange, setDefaultValue };
+    const change = (data, field, mapField, events, datasource) => {
+      data[field] = null;
+      if (!isEmpty(mapField)) {
+        for (const key in mapField) {
+          data[key] = null;
+        }
+      }
+      events?.change && events.change({ [datasource]: data, field });
+    };
+    return { clear, change, remote, selectChange, setDefaultValue };
   };
 
   /**