cnhis-design-vue 0.3.3-beta → 0.3.6-beta

package/packages/big-table/src/components/edit-form/hooks/useDateType.ts

@@ -0,0 +1,184 @@
+import { nextTick } from 'vue'
+import moment from 'moment';
+import vexutils from '@/utils/vexutils';
+
+import type { IsTimeDisabled, IsHourDisabled, IsMinuteDisabled,  IsMinuteDisabled } from 'naive-ui'
+interface TimeRange {
+  hArr?: number[]
+  mArr?: number[]
+  sArr?: number[]
+}
+
+export const useDateType = (open: any) => {
+  // 日期组件支持相互约束配置
+  const disabledDatePicker = (current: any, item: any) => {
+    if (!item.validate) return;
+    const momentFormat = item?.validate?.momentFormat || "days";
+    if (!item.validate.max_date && item.validate.min_date) {
+      if (item.validate.min_date === "currTime") {
+        return current && current < moment().startOf(momentFormat);
+      } else if (item.validate.min_date) {
+        return current && current < moment(item.validate.min_date);
+      }
+    }
+    if (!item.validate.min_date && item.validate.max_date) {
+      if (item.validate.max_date === "currTime") {
+        return current >= moment().endOf(momentFormat);
+      } else if (item.validate.max_date) {
+        return current && current >= moment(item.validate.max_date).endOf(momentFormat);
+      }
+    }
+    if (item.validate.min_date && item.validate.max_date) {
+      if (item.validate.min_date != "currTime" && item.validate.max_date != "currTime") {
+        return (
+          (current && current < moment(item.validate.min_date)) ||
+          (current && current >= moment(item.validate.max_date).endOf(momentFormat))
+        );
+      } else if (item.validate.min_date == "currTime" && item.validate.max_date != "currTime") {
+        return (
+          (current && current < moment().startOf("days")) ||
+          (current && current >= moment(item.validate.max_date).endOf(momentFormat))
+        );
+      } else if (item.validate.min_date != "currTime" && item.validate.max_date == "currTime") {
+        return (
+          (current && current < moment(item.validate.min_date)) ||
+          current >= moment().endOf(momentFormat)
+        );
+      } else if (item.validate.min_date == "currTime" && item.validate.max_date == "currTime") {
+        return (
+          (current && current < moment().startOf("days")) ||
+          current >= moment().endOf(momentFormat)
+        );
+      }
+    }
+  }
+  const setTimeRangeArr = (hMin: number, HMax: number, mMin: number, mMax: number, sMin: number, sMax: number) => {
+    const timeRange: TimeRange = {};
+    timeRange.hArr = [hMin, HMax];
+    timeRange.mArr = [mMin, mMax];
+    timeRange.sArr = [sMin, sMax];
+    return timeRange;
+  }
+  const handleCompareTimeRange = (time: number, item: any, type: string) => {
+    let timeRange = {};
+    const h = moment(time).hour();
+    const m = moment(time).minute();
+    const s = moment(time).second();
+    if (
+      (type === "compare" && item.attr === "startDate") ||
+      (type === "match" && item.attr === "endDate")
+    ) {
+      timeRange = setTimeRangeArr(0, h, 0, m, 0, s + 1);
+    } else if (
+      (type === "compare" && item.attr === "endDate") ||
+      (type === "match" && item.attr === "startDate")
+    ) {
+      timeRange = setTimeRangeArr(h + 1, 24, m + 1, 60, s, 60);
+    }
+    return timeRange;
+  }
+  const disabledMethodTimeRange = (item: any) => {
+    const currTime = new Date().valueOf();
+    if (!item.validate) return;
+    if (
+      ((item.validate.max_date === "currTime" && item.attr === "startDate") ||
+        (item.validate.min_date === "currTime" && item.attr === "endDate")) &&
+      !item.validate.setCurrTime
+    ) {
+      item.validate['setCurrTime'] = true
+      item.validate.timeRange = handleCompareTimeRange(currTime, item, "match");
+      item.validate.currTime = currTime;
+    }
+    if (
+      ((item.validate.min_date === "currTime" && item.attr === "startDate") ||
+        (item.validate.max_date === "currTime" && item.attr === "endDate")) &&
+      !item.validate.setCurrTime
+    ) {
+      item.validate['setCurrTime'] = true
+      item.validate.timeRange = handleCompareTimeRange(currTime, item, "compare");
+      item.validate.currTime = currTime;
+    }
+  }
+  const range = (start: number, end: number) => {
+    const result = [];
+    for (let i = start; i < end; i++) {
+      result.push(i);
+    }
+    return result;
+  }
+  // 日期选择组件 时间选择面板 约束
+  const disabledTimePicker = (current: any, item: any): IsTimeDisabled => {
+    if (!item.validate) return {};
+    if (item.date_format === "YYYY-MM-dd HH:mm:ss") {
+      if (vexutils.isEmpty(item.validate.timeRange) || !item.validate.isSpliceHour) {
+        disabledMethodTimeRange(item);
+      }
+    }
+    const { timeRange = {} } = item.validate;
+    if (!vexutils.isEmpty(timeRange)) {
+      const { hArr = [], mArr = [], sArr = [] } = timeRange;
+      let hRange = range(hArr[0], hArr[1]);
+      if (item.date_format === "YYYY-MM-dd HH:mm:ss") {
+        if (item.validate.isSpliceHour) {
+          const length = hArr[1] - hArr[0];
+          const tempRange = range(0, 24);
+          tempRange.splice(hArr[0], length + 1);
+          hRange = tempRange;
+        }
+      }
+      let diff = 0;
+      // 如果 min_date = 'currTime' 时间禁用的“分”,“秒” 减 1 ,避免“当前时间（时分秒）”选不了
+      if (
+        ["startDate", "endDate"].includes(item.attr) &&
+        "currTime" == item?.validate?.min_date
+      ) {
+        diff = 1;
+      }
+      return {
+        isHourDisabled: (hour: number) => hour > hRange[0] && hour < hRange[1],
+        isMinuteDisabled: (minute: number) => minute > mArr[0] && minute < mArr[1] - diff,
+        isSecondDisabled: (second: number) => second > sArr[0] && second < sArr[1] - diff * 5
+      };
+    }
+  }
+  const openTimeChange = (isOpen: boolean, item: any) => {
+    open.value = isOpen;
+    if (!item.validate) return;
+    if (!isOpen) {
+      nextTick(() => {
+        item.validate['setCurrTime'] = false
+      });
+    }
+  }
+  // 时间选择器 约束
+  const disabledHours = (item: any, type: string): IsHourDisabled | IsMinuteDisabled | IsMinuteDisabled => {
+    if (!item.validate) return;
+    if (vexutils.isEmpty(item.validate.timeRange) || !item.validate.isSpliceHour) {
+      disabledMethodTimeRange(item);
+    }
+    const { timeRange = {} } = item.validate;
+    if (!vexutils.isEmpty(timeRange)) {
+      const { hArr = [], mArr = [], sArr = [] } = timeRange;
+      let hRange = range(hArr[0], hArr[1]);
+      if (item.validate.min_date && item.validate.max_date) {
+        const length = hArr[1] - hArr[0];
+        const tempRange = range(0, 24);
+        tempRange.splice(hArr[0], length + 1);
+        hRange = tempRange;
+      }
+      if (type === "h") {
+        return () => hRange;
+      } else if (type === "m") {
+        return () => range(mArr[0], mArr[1]);
+      } else if (type === "s") {
+        return () => range(sArr[0], sArr[1]);
+      }
+    }
+  }
+
+  return {
+    disabledTimePicker,
+    disabledDatePicker,
+    disabledHours
+  }
+}

package/packages/big-table/src/components/edit-form/hooks/useFormCommon.ts

@@ -0,0 +1,373 @@
+import { ref, reactive ,computed } from 'vue'
+import type { CmpElement, OptionListObj, EditFormProps } from '../interface'
+import vexutils from '@/utils/vexutils';
+import { handleSysParams, handlerGetDateType, handleGetJsonStr } from '../utils'
+import moment from 'moment';
+import { stat } from 'fs';
+
+export const useFormCommon = (props: EditFormProps, state: any, userInfo: any, computedData?: any) => {
+  /** 这里的方法 basefrom formitem 都引用， 注意使用 this.xxx 的值 */
+  const paramsObj = { defaultValue: state.defaultValue, userInfo, dbParams: state.dbParams }
+
+  const isFormBoldOpen = computed(() => {
+    return function(item: any) {
+      let res = item.is_null == '0' && props.styleSetting.formBoldOpen;
+      return res;
+    }
+  })
+  // 组合组件 是否显示拖拽icon
+  const showDragIcon = computed(() => {
+    return function(item: any) {
+      let { combinationList = [] } = item || {};
+      if (!combinationList.length) return false;
+      // delete 之后是软删除 过滤 isCombinationHide=true
+      let showCombination = combinationList.filter((v: any) => !v.isCombinationHide);
+      return showCombination?.length > 1;
+    }
+  })
+  /** xxx def */
+  const handleGetcheckboxDef = (item: CmpElement) => {
+    let optionsList: OptionListObj[] = item.option;
+    let valList: string[] = [];
+    let checkboxVal = state.defaultValue[item.name] || item.default_val;
+    let checkboxList = [];
+    checkboxVal = handleSysParams(checkboxVal, paramsObj);
+    if (typeof checkboxVal === 'string') {
+      if (vexutils.isJSON(checkboxVal)) {
+        checkboxList = JSON.parse(checkboxVal);
+      } else {
+        checkboxList = checkboxVal ? checkboxVal.split(',') : [];
+      }
+    } else if (Array.isArray(checkboxVal)) {
+      checkboxList = checkboxVal;
+    }
+    //  checkboxList = checkboxVal ? checkboxVal.split(",") : [];
+    checkboxList = Array.isArray(checkboxList) ? checkboxList : [];
+    checkboxList.forEach(v => {
+      optionsList.forEach(j => {
+        if (j.text == v || j.value == v) {
+          valList.push(String(v));
+        }
+      });
+    });
+    return valList || [];
+  }
+  const transformStr = (item: CmpElement): string => {
+    var def = state.defaultValue[item.name];
+    var propsDef = def || (def !== '' && def == 0) ? def : item.default_val;
+    let defVal = propsDef || propsDef == 0 ? propsDef : '';
+    defVal = String(defVal);
+    return defVal;
+  }
+  const handlerFormatTextarea = (data: CmpElement) => {
+    let defVal = state.defaultValue[data.name] || data.default_val || '';
+    defVal = handleSysParams(defVal, paramsObj)
+    if (!defVal) {
+      return '';
+    } else if (defVal instanceof Object) {
+      // 如是 Textarea 类型但传来的默认值是 Object 或 Array
+      return JSON.stringify(defVal);
+    }
+    return defVal;
+  }
+  const handleGetTextDef = (item: CmpElement) => {
+    let defVal: string | number = '';
+    var def = state.defaultValue[item.name];
+    var propsDef = def || (def !== '' && def === 0) ? def : handleSysParams(item.data_value || item.default_val, paramsObj);
+    defVal = propsDef || propsDef === 0 ? propsDef : undefined;
+    if (item.html_type === 'DIGITAL') {
+      defVal = defVal ? +defVal : defVal;
+    }
+    return defVal;
+  }
+  // 日期默认解析
+  const handleDateCondition = (item: CmpElement) => {
+    let { condition, attr, unit = 'DAY', default_val } = item;
+    let format = handlerGetDateType(item);
+    let useTime,
+      count = Number(default_val) || 0;
+    let getUnit = unit.toLowerCase();
+    let useUnit = getUnit + 's';
+    if (condition == 'IN_THE_PAST') {
+      useTime = (moment() as any).subtract(count, useUnit);
+    } else {
+      useTime = (moment() as any).add(count, useUnit);
+    }
+    let res = useTime.format(format);
+    if (attr == 'startDate') {
+      res = useTime.startOf('day').format(format);
+    } else if (attr == 'endDate') {
+      res = useTime.endOf('day').format(format);
+    }
+    return res;
+  }
+  const handleGetdateTypeDef = (item: CmpElement) => {
+    var propsDate = state.defaultValue[item.name] || item.default_val;
+    if (item.condition === 'IN_THE_PAST' || item.condition === 'IN_THE_FUTURE') {
+      propsDate = handleDateCondition(item);
+    } else {
+      propsDate = handleSysParams(propsDate, paramsObj);
+    }
+    let dateType = handlerGetDateType(item);
+    // if (!this.$utils.isDate(propsDate)) {
+    //   return null;
+    // }
+    if (dateType == 'HH:mm:ss' || dateType == 'HH:mm') {
+      return propsDate && moment(propsDate, dateType).isValid() ? moment(propsDate, dateType) : null;
+    } else {
+      if (dateType === 'YYYY-MM-DD HH:mm:ss' && propsDate) {
+        // 配置了 YYYY-MM-DD HH:mm:ss 格式， 但是传来的参数是 '2021-5-18'，默认补上 '00:00:00'。
+        if (typeof propsDate === 'string') {
+          let [, h] = propsDate.split(' ');
+          if (!h) {
+            propsDate = `${propsDate} 00:00:00`;
+          }
+        }
+      }
+      return propsDate && moment(new Date(propsDate), dateType).isValid() ? moment(new Date(propsDate), dateType) : null;
+    }
+  }
+  const transformDefStr = (item: CmpElement) => {
+    var def = state.defaultValue[item.name];
+    var propsDef = def || (def !== '' && def == 0) ? def : item.default_val;
+    let defVal = propsDef || propsDef == 0 ? propsDef : '';
+    defVal = String(defVal);
+    return defVal;
+  }
+  const getSelectVal = (data: CmpElement) => {
+    let targetStr = transformDefStr(data) || '';
+
+    if (['SELECT', 'PHONE_TYPE', 'IDCARD_TYPE'].includes(data.html_type)) {
+      // 传来的默认值
+      targetStr = String(targetStr);
+      // 环境变量
+      targetStr = handleSysParams(targetStr, paramsObj);
+      if (!Array.isArray(data.option)) return targetStr;
+
+      let f = data.option.find(o => o.value == targetStr);
+      if (f) {
+        return targetStr;
+      } else {
+        // SELECT 都没又默认去第一个
+        // let valList = Object.values(data.option);
+        // let curVal = valList.find(e => !!e);
+        const curVal = data.option[0] && data.option[0].value;
+        return curVal;
+      }
+    } else {
+      return targetStr;
+    }
+  }
+  const handlerDefaultUpload = (data: string, type = 'default') => {
+    let currentData;
+    let fileList;
+    if (vexutils.isJSON(data)) {
+      currentData = JSON.parse(data);
+    } else {
+      currentData = data;
+    }
+
+    if (currentData instanceof Array) {
+      currentData.forEach(item => {
+        item.thumbUrl = item.url;
+        item.uid = (-Math.random()).toString();
+        item.status = 'done';
+      });
+      fileList = currentData;
+    } else if (typeof currentData === 'string' && currentData.length > 0) {
+      const currentList = currentData.split(',');
+      fileList = [];
+      currentList.forEach(v => {
+        if (v) {
+          fileList.push({
+            url: v,
+            thumbUrl: v,
+            uid: (-Math.random()).toString(),
+            name: 'name',
+            status: 'done'
+          });
+        }
+      });
+    } else {
+      fileList = [];
+    }
+    if (type === 'default') {
+      return fileList;
+    } else {
+      return { fileList: fileList };
+    }
+  }
+  const getCascaderDef = (v: CmpElement) => {
+    try {
+      const is_multi = v.is_multi == '1';
+      let defaultValue = state.defaultValue[v.name] || v.default_val;
+      if (typeof defaultValue === 'string') {
+        defaultValue = handleSysParams(defaultValue, paramsObj);
+        if (!vexutils.isJSON(defaultValue)) {
+          return [];
+        }
+      }
+      if (!defaultValue) return [];
+      if (defaultValue.includes('objStr')) {
+        if (is_multi) {
+          const multiData = handleGetJsonStr(defaultValue);
+          const objs = multiData['objs'] || [];
+          const objStrList: string[] = [];
+          objs.forEach((e: any) => {
+            objStrList.push(e.objStr.split('/'));
+          });
+          return [...objStrList];
+        } else {
+          defaultValue = handleGetJsonStr(defaultValue).objStr;
+        }
+      }
+      if (typeof defaultValue == 'string') {
+        if (defaultValue.includes('_')) {
+          defaultValue = defaultValue.split('_');
+        } else {
+          defaultValue = defaultValue.split('/');
+        }
+      }
+
+      if (!Array.isArray(defaultValue)) {
+        defaultValue = [];
+      } else {
+        defaultValue = defaultValue.filter(Boolean);
+      }
+      return is_multi ? [] : defaultValue || [];
+    } catch (error) {
+      console.log(error);
+      return [];
+    }
+  }
+  const getInitializeDef = (item: CmpElement) => {
+    return handleSysParams(state.defaultValue[item.name] || item.default_val || '', paramsObj);
+  }
+  const transformNumber = (val: string | number) => {
+    if (val) {
+      let resVal = +val;
+      // marks
+      return isNaN(resVal) ? 0 : resVal;
+    }
+    return undefined;
+  }
+  // 获取表单默认值
+  const handleGetdef = (item: CmpElement) => {
+    let defVal;
+    // let optionsList = Object.entries(item.option || {});
+    switch (item.html_type) {
+      case 'CHECKBOX_BLOCK':
+      case 'CHECKBOX':
+        defVal = handleGetcheckboxDef(item);
+        break;
+      case 'RADIO_BLOCK':
+      case 'RADIO':
+        defVal = transformStr(item);
+        defVal = handleSysParams(defVal, paramsObj);
+        if (!defVal && +defVal != 0) {
+          defVal = undefined;
+        }
+        break;
+      case 'MAP':
+        defVal = state.defaultValue[item.name] || item.default_val || '';
+        defVal = handleSysParams(defVal, paramsObj);
+        break;
+      case 'TEXTAREA':
+        defVal = handlerFormatTextarea(item) || '';
+        break;
+      case 'INPUT':
+      case 'DIGITAL':
+      case 'ICON':
+        defVal = handleGetTextDef(item);
+        break;
+      case 'DATE':
+      case 'DATE-INPUT':
+      case 'DATETIME-INPUT':
+        defVal = handleGetdateTypeDef(item);
+        break;
+      case 'SELECT':
+      case 'PHONE_TYPE':
+      case 'IDCARD_TYPE':
+        defVal = getSelectVal(item);
+        break;
+      case 'UPPICTURE':
+        var def = state.defaultValue[item.name] || item.default_val;
+        if (typeof def === 'string') {
+          def = handleSysParams(def, paramsObj);
+        }
+        defVal = handlerDefaultUpload(def, 'values');
+        break;
+      case 'SEARCH':
+        defVal = handleSysParams(item.default_val, paramsObj) || state.defaultValue[item.name] || undefined;
+        break;
+      case 'SEARCH_MORE':
+        defVal = [];
+        break;
+      case 'LEVEL_SEARCH_CASCADE2':
+        defVal = getCascaderDef(item);
+        break;
+      case 'LABEL':
+        defVal = [];
+        break;
+      case 'GUAGE':
+        defVal = state.defaultValue[item.name];
+        break;
+      case 'SLIDER_COMPONENT':
+        defVal = getInitializeDef(item);
+        defVal = transformNumber(defVal);
+        break;
+      case 'SWITCH_COMPONENT':
+        defVal = getInitializeDef(item);
+        break;
+      case 'AGE_JSON':
+        let d: any = String(getInitializeDef(item) || {});
+        if (vexutils.isJSON(d)) {
+          d = JSON.parse(d);
+        }
+        if (typeof d == 'object') {
+          Object.keys(d).forEach(v => {
+            d[v] = [-1, '-1'].includes(d[v]) ? '' : d[v];
+          });
+          defVal = Object.assign({ year: '', month: '', day: '', days: '' }, d);
+        } else {
+          defVal = { year: '', month: '', day: '', days: '' };
+        }
+        break;
+      case 'AGE':
+        defVal = state.defaultValue[item.name] || handleSysParams(item.default_val || '', paramsObj);
+        break;
+      default:
+        break;
+    }
+    if (item.html_type === 'ICON') {
+      state.defaultValue[item.name] = defVal;
+    }
+    return defVal;
+  }
+  const handleGetItemDefVal = (item: CmpElement) => {
+    let defVal = state.defaultValue[item.name] || item.default_val || '';
+    defVal = handleSysParams(defVal, paramsObj);
+    return defVal;
+  }
+  // 获取
+  const hanldeGetFieldValue = (item: any, key?: string) => {
+    return item?.useFormValue;
+  }
+  // 清空
+  const hanldeResetFields = (key: string) => {
+    // 此重置表单要换成naiveui
+    computedData.baseForm.resetFields();
+  }
+  const RandomId = (len: number) => {
+    return (
+      Math.random()
+        .toString(36)
+        .slice(3, len) + new Date().getTime()
+    );
+  }
+
+  return {
+    handleGetdef,
+    RandomId
+  }
+}