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

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

@@ -0,0 +1,387 @@
+import type { FormItemRule } from 'naive-ui'
+import type { CmpElement, OptionListObj, EditFormProps } from '../interface'
+import vexutils from '@/utils/vexutils';
+
+export const useValidateRules = () => {
+  const checkLenght = (rule: FormItemRule, value: any, item: any): boolean | Error => {
+    try {
+      const { validate = {}, is_null, html_type } = item || {};
+      let { min_length, max_length } = validate || {};
+      let curval = value + "";
+
+      if (html_type === "INPUT") {
+        max_length = max_length ? +max_length : 300;
+      } else if (html_type === "TEXTAREA") {
+        max_length = max_length ? +max_length : 500;
+      } else if (html_type === "RICH_TEXT") {
+        const div = document.createElement("div");
+        div.innerHTML = value;
+        curval = div.innerText;
+      }
+      const strlen = curval.length;
+      // max_value min_value 请输入X-X个字符
+      let max = strlen > max_length,
+        min = min_length > strlen;
+      if (is_null == 0 && !value && value != 0) {
+        return new Error(`请输入${min_length || 0}-${max_length}个字符`)
+      }
+      // 非必填，没有值
+      if (is_null == 1 && !value) {
+        return true
+      }
+      if ((min_length || String(min_length) === "0") && max_length && (max || min)) {
+        return new Error(`请输入${min_length || 0}-${max_length}个字符`)
+      } else if (min_length && min) {
+        return new Error(`至少输入${min_length}个字符`)
+      } else if (max_length && max) {
+        return new Error(`最多只能输入${max_length}个字符`)
+      }
+      return true
+    } catch (error) {
+      console.log(error, "------checkLenght");
+      return true
+    }
+  }
+  const getInputCheck = (validate = undefined) => {
+    if (!validate) return false;
+    const isInteger = validate == "integer";
+    return {
+      pattern: isInteger ? /^-?[0-9]+$/ : /^(-?[0-9]+)(\\.[0-9]+)?$/,
+      message: isInteger ? "只能输入数字" : "只能输入数字和小数"
+    };
+  }
+  const handlerSetIdCarInfoValidate = (rule: FormItemRule, value: any, item: any) => {
+    try {
+      const { validate = {} } = item || {};
+      if (validate.vali_obj == "id_card") {
+        const pat = /^\d{6}(((19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2][0-9]|3[0-1])\d{3}([0-9]|x|X))|(\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2][0-9]|3[0-1])\d{3}))$/;
+        if (!pat.test(value)) {
+          return new Error(`请输入正确的身份证号码`)
+        }
+      }
+      return true
+    } catch (error) {
+      console.log(error, "------handlerSetIdCarInfoValidate");
+      return true
+    }
+  }
+  const checkinputBlank = (rule: FormItemRule, value: any, item: any) => {
+    try {
+      const { is_null, delete_before_after_spaces } = item;
+      if (typeof value === "string" && delete_before_after_spaces == 1) {
+        let val = value.trim();
+        if (!val && is_null == 0) {
+          return new Error(`不可为空`)
+        }
+      }
+      return true
+    } catch (error) {
+      console.log(error, "------checkinputBlank");
+      return true
+    }
+  }
+  const checkDigital = (rule: FormItemRule, value: any, item: any) => {
+    try {
+      const { validate, is_null, decimal_length, alias, name } = item;
+      const { min_value, max_value } = validate || {};
+      let showName = alias || name;
+      // max_value min_value
+      if (isNaN(+value)) {
+        return new Error(`只能输入数字`)
+      }
+      if (is_null == 0 && !value && value != 0) {
+        return new Error(`请输入${showName}有效范围`)
+      }
+      if (!value && value !== 0) {
+        if (is_null == 0) {
+          return new Error(`请输入${showName}有效范围`)
+        }
+        return true
+      }
+
+      const decimalLen = decimal_length || validate.decimal_length;
+      const valList = (value + "").trim().split(".");
+      if (decimalLen && decimalLen != 0) {
+        if (valList[1] && valList[1].length > decimalLen) {
+          return new Error(`小数最多${decimalLen}位`)
+        }
+      } else {
+        const flag = /^-?[0-9]+$/.test(value);
+        if (!flag) {
+          return new Error(`请输入整数`)
+        }
+      }
+      let max = +value > +max_value,
+        min = +min_value > +value;
+      if ((min_value || max_value) && (value || value == 0)) {
+        if ((min_value || String(min_value) === "0") && max_value && (max || min)) {
+          return new Error(`请输入${min_value}~${max_value}`)
+        } else if ((min_value && min) || (max_value && max)) {
+          return new Error(`请输入${showName}有效范围`)
+        }
+        return true
+      }
+      return true
+    } catch (error) {
+      console.log(error, "------checkDigital");
+      return true
+    }
+  }
+  const checkAgeJson = (rule: FormItemRule, value: any, item: any) => {
+    try {
+      const { is_null, alias, name } = item;
+      const { year, month, day, days } = value;
+      const c = (val: number) => String(val) === "0" || val > 0;
+      const checkval = () => !(c(year) || c(month) || c(day));
+      if (is_null == 0) {
+        if (checkval()) {
+          return new Error(`请输入${alias || name}`)
+        } else if (days > 73000) {
+          return new Error(`超出年龄范围0~200岁`)
+        }
+      }
+      return true
+    } catch (error) {
+      console.log(error, "------checkAgeJson");
+      return true
+    }
+  }
+  const checkAge = (rule: FormItemRule, value: any, item: any) => {
+    try {
+      let { is_null, name, alias } = item;
+      if (!value && is_null == 0) {
+        return new Error(`${alias || name}不能为空`)
+      }
+      if (!item.val_key_unit) {
+        return true
+      }
+      const curVal = item?.useFormValue
+      let k = typeof curVal === "string" && curVal.toLowerCase();
+      const o = {
+        year: 200,
+        month: 2400,
+        day: 73000
+      };
+      if (k) {
+        if (value > o[k]) {
+          return new Error(`超出年龄范围0~200岁`)
+        }
+      }
+      return true
+    } catch (error) {
+      console.log(error, "------checkAge");
+      return true
+    }
+  }
+  const handleUploadValidator = (rule: FormItemRule, value: any, item: any) => {
+    try {
+      let curval = value;
+      const { is_null, name, validate, html_type } = item;
+      let { min_length, max_length } = validate || {};
+      let unit = html_type === "UPPICTURE" ? "张" : "个";
+      if (html_type === "UPPICTURE") {
+        curval = curval.split(",").filter(Boolean);
+      } else if (vexutils.isJSON(value || "")) {
+        curval = JSON.parse(curval);
+      }
+      let len = curval?.length || 0;
+      if (is_null == 1 && len === 0) {
+        return true
+      } else if (is_null == 0 && (!curval || len === 0)) {
+        return new Error(`请上传${name}`)
+      } else if (len > 0) {
+        if (len < min_length) {
+          return new Error(`最少上传${min_length}${unit}`)
+        } else if (len > max_length) {
+          return new Error(`最多只能上传${max_length}${unit}`)
+        }
+      }
+      return true
+    } catch (error) {
+      console.log(error, "------handleUploadValidator");
+      return true
+    }
+  }
+  const checkMultipleChoice = (rule: FormItemRule, value: any, item: any) => {
+    try {
+      const { multi_select, multi_select_value, is_null, alias, name } = item;
+      if (Array.isArray(value)) {
+        if (is_null == 0) {
+          if (value.length === 0) {
+            return new Error(`请选择${alias || name}`)
+          }
+        }
+        if (is_null == 1 && value.length === 0) {
+          return true
+        }
+        if (multi_select_value) {
+          if (value.length > multi_select_value) {
+            return new Error(`最多只能选择${multi_select_value}项`)
+          }
+        }
+      }
+      return true
+    } catch (error) {
+      console.log(error, "------checkMultipleChoice");
+      return true
+    }
+  }
+  const checkcandidate = (rule: FormItemRule, value: any, item: any) => {
+    try {
+      let curval = value;
+      const { is_null, name, validate, check_max_val, check_min_val } = item;
+
+      // let { min_length, max_length } = validate;
+      if (is_null == 0 && !curval) {
+        return new Error(`请选${name}`)
+      }
+      if (vexutils.isJSON(value || "")) {
+        curval = JSON.parse(curval);
+      }
+      if (is_null != 0 && !Array.isArray(curval)) {
+        return true
+      }
+      let len = curval?.length || 0;
+      if (is_null == 1 && len === 0) {
+        return true
+      } else if (is_null == 0 && (!curval || len === 0)) {
+        return new Error(`请选${name}`)
+      } else if (len > 0) {
+        if (len < check_min_val) {
+          return new Error(`至少要选${check_min_val}项`)
+        } else if (len > check_max_val) {
+          return new Error(`最多可选${check_max_val}项`)
+        }
+      }
+      return true
+    } catch (error) {
+      console.log(error, "------checkcandidate");
+      return true
+    }
+  }
+  // 表单验证
+  const handleGetRules = (item: any) => {
+    const initRules: FormItemRule[] = [];
+    const { validate = {}, is_null } = item;
+    let { vali_obj } = validate;
+    // intercept 即使不显示 也需要校验
+    if (item.is_show == 0 && item.useType != "intercept") {
+      return initRules;
+    }
+    if (item.lineBarCheck || item.is_hide_field) {
+      return [];
+    }
+    switch (item.html_type) {
+      case "INPUT":
+      case "TEXTAREA":
+      case "RICH_TEXT":
+        initRules.push({
+          required: item.is_null == 0,
+          message: `请输入${item.name}`,
+          trigger: "change"
+        });
+        if (vali_obj != "mobile") {
+          initRules.push({
+            validator: (rule, value): boolean | Error => checkLenght(rule, value, item),
+            trigger: "change"
+          });
+        }
+        if (["integer", "number"].includes(vali_obj)) {
+          const rule = getInputCheck(vali_obj);
+          rule && initRules.push(rule);
+        }
+        if (vali_obj == "id_card") {
+          initRules.push({
+            validator: (rule, value) =>
+              handlerSetIdCarInfoValidate(rule, value, item),
+            trigger: "change"
+          });
+        }
+        initRules.push({
+          validator: (rule, value) => checkinputBlank(rule, value, item),
+          trigger: "change"
+        });
+        break;
+      case "DIGITAL":
+        initRules.push({
+          validator: (rule, value) => checkDigital(rule, value, item)
+        });
+        break;
+
+      case "AGE_JSON":
+        initRules.push({
+          validator: (rule, value) => checkAgeJson(rule, value, item),
+          trigger: "change"
+        });
+
+        break;
+      case "AGE":
+        initRules.push(
+          {
+            validator: (rule, value) => checkAge(rule, value, item),
+            trigger: "change"
+          },
+          {
+            required: item.is_null == 0,
+            message: `请输入${item.name}`
+          }
+        );
+        break;
+
+      case "UPPICTURE":
+      case "UPFILE":
+      case "VEDIO":
+        initRules.push({
+          validator: (rule, value) =>
+            handleUploadValidator(rule, value, item),
+          trigger: "change"
+        });
+
+        break;
+      case "CHECKBOX_BLOCK":
+      case "CHECKBOX":
+      case "SEARCH_MORE":
+        initRules.push(
+          {
+            required: item.is_null == 0,
+            message: `请选择${item.name}`,
+            trigger: "change"
+          },
+          {
+            validator: (rule, value) =>
+              checkMultipleChoice(rule, value, item),
+            trigger: "change"
+          }
+        );
+        break;
+      case "CANDIDATE_COMPONENTS":
+        initRules.push({
+          validator: (rule, value) => checkcandidate(rule, value, item),
+          trigger: "change"
+        });
+        break;
+      default:
+        initRules.push({
+          required: item.is_null == 0,
+          message: `请选择${item.name}`,
+          trigger: "change"
+        });
+        break;
+    }
+    if (validate && vali_obj == "mobile" && !validate.phone_idcard_type && is_null == 0) {
+      initRules.push({
+        pattern: /(^[0-9]{11,11}$)/,
+        message: '请输入正确的电话号码',
+        trigger: "change"
+      });
+    }
+    if(initRules.length) {
+      initRules[0].key = item.val_key
+    }
+    return initRules;
+  }
+
+  return {
+    handleGetRules
+  }
+}

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

@@ -0,0 +1,53 @@
+import { CmpName } from './types'
+
+interface Validate {
+  obj_type?: string
+}
+
+export interface OptionListObj {
+  text?: string
+  value?: string
+}
+
+export interface CmpElement {
+  html_type: CmpName
+  date_format?: string
+  validate?: Validate
+  name: string
+  default_val: string
+  option: OptionListObj[]
+  data_value?: string
+  condition: string
+  attr: string
+  unit: string
+  is_multi: string | number
+}
+
+export interface FieldListProp {
+  isPure: boolean
+}
+
+export interface defaultFormProp {
+  defaultCombinationForm?: any
+  fieldList?: FieldListProp[]
+}
+
+export interface EditFormProps {
+  defaultForm: defaultFormProp
+  isPure: boolean
+  cacheUniqueKey?: any
+  banRequest?: boolean
+  propsDelSetting?: boolean
+  propsFormBtn?: boolean
+  parentConfig?: any
+  configuration?: any
+  isOpenShortcut?: boolean
+  formPrimaryKey: number | string
+  styleSetting?: any
+}
+
+export interface DateProp {
+  year?: number | string
+  month?: number | string
+  day?: number | string
+}

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

@@ -0,0 +1,3 @@
+export type CmpName = 'INPUT' | 'DIGITAL' | 'TEXTAREA' | 'RADIO' | 'RADIO_BLOCK' | 'CHECKBOX_BLOCK' | 'CHECKBOX' | 'SEARCH' | 'SEARCH_MORE' | 'DATE' | 'DATE-INPUT' | 'DATETIME-INPUT' | 'SELECT' | 'PHONE_TYPE' | 'IDCARD_TYPE' | 'editMonthPicker' | 'editTimePicker' | 'editDatePicker' | 'editSelect' | 'editInputPassword' | 'editSelectMultiple' | 'MAP' | 'ICON' | 'TIME-INPUT' | 'UPPICTURE' | 'LEVEL_SEARCH_CASCADE2' | 'LABEL' | 'GUAGE' | 'SLIDER_COMPONENT' | 'SWITCH_COMPONENT' | 'AGE_JSON' | 'AGE'
+
+export type CmpNameValue = 'editInput' | 'editDigital' | 'editTextarea' | 'editSelect' | 'editSelectMultiple' | 'editSearch' | 'editSearchMore' | 'editDatePicker' | 'editMonthPicker' | 'editTimePicker' | 'editInputPassword'

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

@@ -0,0 +1,247 @@
+/**
+ * 表单常用函数
+ */
+ import vexutils from '@/utils/vexutils';
+ import moment from 'moment';
+ import type { DateProp, CmpElement } from './interface'
+interface ParamsProp {
+  defaultValue: any
+  userInfo: any
+  dbParams: any
+}
+
+  /**
+   * deprecated: 生日 获取年龄 信息
+   * param {string} str 'YYYY-MM-DD' 时间格式
+   * returns {Object} {year, month, day}
+   */
+export const getAgeInfo = (str: string): DateProp => {
+  let r = str.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})/);
+  if (r == null) return {};
+  let Y, M, D;
+  let d = new Date(+r[1], +r[3] - 1, +r[4]);
+  let returnStr = "输入的日期格式错误！";
+
+  if (d.getFullYear() == +r[1] && d.getMonth() + 1 == +r[3] && d.getDate() == +r[4]) {
+    let date = new Date();
+    let yearNow = date.getFullYear();
+    let monthNow = date.getMonth() + 1;
+    let dayNow = date.getDate();
+
+    let largeMonths = [1, 3, 5, 7, 8, 10, 12], // 大月， 用于计算天，只在年月都为零时，天数有效
+      lastMonth = monthNow - 1 > 0 ? monthNow - 1 : 12, // 上一个月的月份
+      isLeapYear = false, // 是否是闰年
+      daysOFMonth = 0; // 当前日期的上一个月多少天
+
+    if ((yearNow % 4 === 0 && yearNow % 100 !== 0) || yearNow % 400 === 0) {
+      // 是否闰年， 用于计算天，只在年月都为零时，天数有效
+      isLeapYear = true;
+    }
+
+    if (largeMonths.indexOf(lastMonth) > -1) {
+      daysOFMonth = 31;
+    } else if (lastMonth === 2) {
+      if (isLeapYear) {
+        daysOFMonth = 29;
+      } else {
+        daysOFMonth = 28;
+      }
+    } else {
+      daysOFMonth = 30;
+    }
+
+    Y = yearNow - parseInt(r[1]);
+    M = monthNow - parseInt(r[3]);
+    D = dayNow - parseInt(r[4]);
+    if (D < 0) {
+      D = D + daysOFMonth; // 借一个月
+      M--;
+    }
+    if (M < 0) {
+      // 借一年 12个月
+      Y--;
+      M = M + 12; //
+    }
+
+    if (Y < 0) {
+      returnStr = "出生日期有误！";
+      console.log(returnStr);
+      return { year: 0, month: 0, day: 0 };
+    } else if (Y === 0) {
+      if (M === 0) {
+        returnStr = D + "D";
+      } else {
+        returnStr = M + "M";
+      }
+    } else {
+      if (M === 0) {
+        returnStr = Y + "Y";
+      } else {
+        returnStr = Y + "Y" + M + "M";
+      }
+    }
+
+    // console.log(Y, M, D);
+  }
+
+  // return returnStr;
+  return { year: Y, month: M, day: D };
+}
+
+  /**
+   * 兼容map
+   */
+export const handleCompatibilityMap = (map: any = {}) => {
+  /**
+   * c_key_list
+   * 兼容处理，
+   * 兼容用户 输入 map.xx, sql.xx, result.xx 都可以解析到值
+   * 只要找个一个key有值，其他key 都附上同样的值
+   */
+  if (typeof map !== "object") return map;
+  let c_key_list = ["map", "sql", "result"];
+  let key_list = Object.keys(map || {});
+  let curKey = key_list.find(k => c_key_list.includes(k));
+  if (curKey) {
+    c_key_list.forEach(c => {
+      map[c] = map[curKey!];
+    });
+  }
+  return map;
+}
+
+export const randomId = (len: number) => {
+  return Math.random()
+    .toString(36)
+    .slice(3, len);
+}
+  // 变量解析
+export const handleSysParams = (str: string | number, obj: ParamsProp) => {
+  // let sysData = this.userInfo.map.sysParams;
+  let p: any = {
+    form: { ...obj.defaultValue },
+    sys: obj.userInfo?.map?.sysParams || {},
+    db: { ...(obj.dbParams || {}) }
+  };
+  // let isEmpty = v => Object.keys(v || {}).length;
+  const that = this;
+  const getVal = (t: string, r: RegExp, k: string) => {
+    return t.replace(r, function() {
+      let pKey = arguments[1];
+      let pls = pKey.split('!');
+      let plsList = pls.slice(1);
+      let l: string[] = [];
+      plsList.forEach((v: string) => {
+        let c = v;
+        if (v.includes('.')) {
+          let [_k, _v] = v.split('.');
+          c = typeof p[_k] === 'object' ? p[_k][_v] : '';
+        }
+        if (c || +c == 0) {
+          l.push(c);
+        }
+      });
+      let f = l.find(v => v || +v == 0);
+      let res = p[k][pls[0]];
+      res = vexutils.notEmpty(res) ? res : '';
+      if (pls.length > 1) {
+        return res || f;
+      }
+      return res;
+    });
+  };
+  if (typeof str === 'string') {
+    if (str.includes('form')) {
+      str = getVal(str, /\${form.(.*?)\}/g, 'form');
+    }
+    if (str.includes('sys')) {
+      str = getVal(str, /\${sys.(.*?)\}/g, 'sys');
+    }
+    if (str.includes('db')) {
+      str = getVal(str, /\${db.(.*?)\}/g, 'db');
+    }
+  }
+  if ((!str && +str != 0) || ['undefined', 'null'].includes(String(str))) {
+    str = '';
+  }
+  return str;
+}
+
+//  获取分组
+export const hanldeGetTargetList = (t: any = {}, defaultFieldList: any[]) => {
+  if (t.group) {
+    return defaultFieldList.filter((v: any) => v.group == t.group);
+  }
+  return defaultFieldList || [];
+}
+
+// 获取身份证上的信息
+export const handlerGetIdcatInfo = (idNo: string) => {
+  let parseInner = (certificateNo: string, idxSexStart: number, birthYearSpan: number) => {
+    let res: any = {};
+    let idxSex = 1 - (+certificateNo.slice(idxSexStart, 1) % 2);
+    // 女: "2" 男: "1"
+    res.sex = idxSex == 1 ? '2' : '1';
+
+    let year = (birthYearSpan == 2 ? '19' : '') + certificateNo.slice(6, birthYearSpan);
+    let month = certificateNo.slice(6 + birthYearSpan, 2);
+    let day = certificateNo.slice(8 + birthYearSpan, 2);
+    res.birthday = year + '-' + month + '-' + day;
+
+    let d = new Date();
+    let monthFloor = d.getMonth() + 1 < parseInt(month, 10) || (d.getMonth() + 1 == parseInt(month, 10) && d.getDate() < parseInt(day, 10)) ? 1 : 0;
+    // res.age = d.getFullYear() - parseInt(year, 10) - monthFloor;
+    res.year = d.getFullYear() - parseInt(year, 10) - monthFloor;
+    res.day = moment(d).diff(moment(new Date(res.birthday)), 'days');
+    res.month = moment(d).diff(moment(new Date(res.birthday)), 'months');
+    return res;
+  };
+  return parseInner(idNo, idNo.length == 15 ? 14 : 16, idNo.length == 15 ? 2 : 4);
+}
+
+// 获取日期格式
+export const handlerGetDateType = (data: any): string => {
+  let dateType;
+  switch (data.html_type) {
+    case 'DATETIME-INPUT':
+      dateType = 'yyyy-MM-dd HH:mm:ss';
+      break;
+    case 'DATE-INPUT':
+      dateType = 'yyyy-MM-dd';
+      break;
+    case 'TIME-INPUT':
+      dateType = 'HH:mm:ss';
+      break;
+    case 'DATE':
+      data.date_format = data.date_format && data.date_format.replace(/yyyy/gi, 'yyyy');
+      dateType = (data.date_format || 'yyyy-MM-dd')
+        .replace(/yyyy-MM-dd/gi, 'yyyy-MM-dd')
+        .replace(/hh:mm:ss/gi, 'HH:mm:ss')
+        .replace(/hh:mm/gi, 'HH:mm');
+      break;
+    default:
+      dateType = data.date_format || 'yyyy-MM-dd';
+      break;
+  }
+  return dateType;
+}
+
+export const handleGetJsonStr = (str: any) => {
+  // {objs:[],objstr:''}, {type: 'jsonb', value: "{objs:[],objstr:''}"}
+  let resObj: any = {};
+  if (vexutils.isJSON(str)) {
+    resObj = JSON.parse(str);
+  } else {
+    resObj = typeof str === 'string' ? {} : str;
+  }
+  if (resObj && !resObj.objs && resObj.value) {
+    if (vexutils.isJSON(resObj.value)) {
+      resObj = JSON.parse(resObj.value);
+      // loop
+      if (resObj.type === 'jsonb') {
+        resObj = handleGetJsonStr(resObj);
+      }
+    }
+  }
+  return resObj;
+}