@utogether/udp-core 1.0.1 → 1.0.2

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

@@ -2,16 +2,16 @@
  * @Author: levi7754 levi7754@163.com
  * @Date: 2024-06-05 14:32:03
  * @LastEditors: levi7754 levi7754@163.com
- * @LastEditTime: 2025-07-16 15:36:56
+ * @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 } from '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 { VxetableRender } from '@utogether/utils';
+// import { VxetableRender } from './render';
 import { getServiceApi } from '../../api';
 
 import VXETable, { VxeUI } from 'vxe-table';
@@ -19,6 +19,7 @@ import VXETable, { VxeUI } from 'vxe-table';
 
 // const dict = storageLocal.getItem('kLov');
 VxetableRender(VXETable, { serviceApi: getServiceApi(), i18n: transformI18n });
+setCommands();
 
 // 全局默认参数
 const defaultConfig = {
@@ -38,9 +39,78 @@ const defaultConfig = {
 
 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-14 18:17:16
+ * @LastEditTime: 2025-10-29 16:48:47
  * @Description: file content
  */
 
@@ -59,7 +59,7 @@ export const VxetableRender = (VXETable, { serviceApi, i18n }) => {
        * @param {*} val 目前的选中值
        */
       function onChange(val) {
-        componentHook.selectChange(val, data, column.field, renderOpts, {
+        componentHook.selectChange(val, row, column.field, renderOpts, {
           column,
           datasource: 'row'
         });
@@ -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()} />
       ];
     },
     // 单元格编辑
@@ -471,6 +534,7 @@ export const VxetableRender = (VXETable, { serviceApi, i18n }) => {
       const { row, column } = params;
       const { props, events } = renderOpts;
       const componentHook = useComponent();
+      console.log('lov====');
       function onChange(record, displayField) {
         const { mapField, field, displayName, multiple } = props;
         if (!multiple) {
@@ -482,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() {
@@ -493,6 +558,7 @@ export const VxetableRender = (VXETable, { serviceApi, i18n }) => {
         <ut-lov
           record={row}
           mode="vxe"
+          transfer
           {...props}
           onChange={(v, f) => onChange(v, f)}
           onClear={() => onClear()}
@@ -515,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 清空数据
@@ -525,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()} />
       ];
     },
     // 可编辑显示模板
@@ -542,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)}
+        />
+      ];
     }
   });
 
@@ -772,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 };
   };
 
   /**