cnhis-design-vue 0.3.2-beta → 0.3.5-beta

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

@@ -0,0 +1,638 @@
+import { onMounted, inject, nextTick, ref } from 'vue';
+import type { FormItemRule } from 'naive-ui'
+import type { DateProp } from '../interface'
+import vexutils from '@/utils/vexutils';
+import moment from 'moment';
+import { handleSysParams, hanldeGetTargetList, handlerGetIdcatInfo, getAgeInfo } from '../utils'
+
+/** form methods */
+  // TODE 目前支支持单个值
+  // 赋值给表单
+export const hanldeSetFieldsValue = (setObj = {}, item: any, props: any) => {
+  const setVal = { ...setObj };
+  if (typeof setVal === 'object') {
+    let list = Object.entries(setVal || {});
+    list.forEach(f => {
+      let [key, value] = f;
+      if (!key) return;
+      if (item) {
+        props.defaultValue[item.name] = value;
+      } else {
+        if (props.formFieldObj[key]) {
+          let name = props.formFieldObj[key].name;
+          name && (props.defaultValue[name] = value);
+        }
+      }
+      item.useFormValue = value
+    });
+  }
+}
+
+export const useItemDefault = (props: any, emit: any) => {
+  const editFormState: any = inject('state')
+  const userInfo: any = inject('userInfo')
+  const paramsObj = { defaultValue: props.defaultValue, userInfo: userInfo.value, dbParams: props.dbParams }
+  let open = ref(false)
+
+  
+  // 根据末次月经时间推算预产期、孕周、孕阶段等
+  const handlerSetMenstrual = (v?: any, i?: any) => {
+    let mapList = hanldeGetTargetList(i, props.defaultFieldList);
+
+    if (!v) {
+      // function CompareDate(param) {  }
+      mapList.forEach((item: any) => {
+        const { validate } = item;
+        const list = ['due_date', 'gestational_weeks', 'gestational_weeks_week', 'gestational_weeks_day', 'gestational_stage'];
+        if (validate?.obj_type && list.includes(validate.obj_type)) {
+          item.useFormValue = ''
+        }
+      });
+    }
+    if (!v || v.type === 'blur') return;
+    const curDateStr = v.format('YYYY-MM-DD');
+    const nowDateStr = vexutils.toDateString(new Date(), 'yyyy-MM-dd');
+    let timeDiff: any;
+    function CompareDate(d1: string, d2: string) {
+      return new Date(d1.replace(/-/g, '/')) < new Date(d2.replace(/-/g, '/'));
+    }
+    if (CompareDate(curDateStr, nowDateStr)) {
+      timeDiff = vexutils.getDateDiff(curDateStr, nowDateStr);
+    } else if (curDateStr == nowDateStr) {
+      timeDiff = { time: 0 };
+    } else if (CompareDate(nowDateStr, curDateStr)) {
+      timeDiff = vexutils.getDateDiff(nowDateStr, curDateStr);
+      timeDiff.time = -timeDiff.time;
+    }
+    if (!timeDiff) return;
+    const [year, month, day] = curDateStr.split('-');
+    let gestationalWeeks: number | string, gestation: string, dueDate: string; // 孕周 孕期 预产期
+    const w = parseInt(String(timeDiff.time / 3600 / 24 / 1000 / 7));
+    const d = (timeDiff.time / 3600 / 24 / 1000) % 7;
+    gestationalWeeks = `${w}周${d}天`;
+    if (d >= 0 && w >= 0 && w <= 12) {
+      gestation = '孕早期';
+    } else if (w > 12 && w <= 25) {
+      gestation = '孕中期';
+    } else if (w > 25) {
+      gestation = '孕晚期';
+    }
+    let dueDateM: string | number = parseInt(month) + 9 > 12 ? parseInt(month) - 3 : parseInt(month) + 9;
+    dueDateM = dueDateM >= 10 ? dueDateM : '0' + dueDateM;
+    const dueDateY = parseInt(month) + 9 > 12 ? parseInt(year) + 1 : year;
+    dueDate = vexutils.toDateString(vexutils.getWhatDay(`${dueDateY}-${dueDateM}-${day}`, 7), 'yyyy-MM-dd');
+    mapList.forEach((item: any) => {
+      const { validate } = item;
+      if (validate) {
+        switch (validate.obj_type) {
+          case 'due_date':
+            hanldeSetFieldsValue(
+              {
+                [item.val_key]: moment(dueDate, 'YYYY-MM-DD')
+              },
+              item,
+              props
+            );
+            break;
+          case 'gestational_weeks':
+            hanldeSetFieldsValue(
+              {
+                [item.val_key]: gestationalWeeks
+              },
+              item,
+              props
+            );
+            break;
+          case 'gestational_weeks_week':
+            hanldeSetFieldsValue(
+              {
+                [item.val_key]: w
+              },
+              item,
+              props
+            );
+            break;
+          case 'gestational_weeks_day':
+            hanldeSetFieldsValue(
+              {
+                [item.val_key]: d
+              },
+              item,
+              props
+            );
+            break;
+          case 'gestational_stage':
+            hanldeSetFieldsValue({ [item.val_key]: gestation }, item, props);
+            break;
+          default:
+            break;
+        }
+      }
+    });
+  }
+  /** 默认的电话号码校验 */
+  const handlecheckPhone = (item: any = {}) => {
+    const checkingInput = editFormState.editForm[item.val_key]
+    const selectedReg = /(^[0-9]{11,11}$)/;
+    if (!checkingInput) return { status: 'noPass' };
+    if (!selectedReg.test(checkingInput)) {
+      // this.$t("1.1.7.29")
+      editFormState.editForm[item.val_key] = checkingInput
+      // this.baseForm.setFields({
+      //   [item.val_key]: {
+      //     value: checkingInput,
+      //     errors: [
+      //       {
+      //         message: `请输入正确的手机号码`
+      //       }
+      //     ]
+      //   }
+      // });
+      return { status: 'noPass' };
+    }
+  }
+  const handleGetOperationalKey = (str: string) => {
+    // table.dept_name 提取 dept_name
+    const getVal = (t: string, r: RegExp, s?: string) => {
+      return t.replace(r, function() {
+        var pKey = arguments[1];
+        return pKey || '';
+      });
+    };
+    if (typeof str === 'string') {
+      if (str.includes('form.')) {
+        str = getVal(str, /form.(.*?)/g, 'form');
+      } else if (str.includes('sys.')) {
+        str = getVal(str, /sys.(.*?)/g, 'sys');
+      } else if (str.includes('db.')) {
+        str = getVal(str, /db.(.*?)/g, 'db');
+      } else if (str.includes('table.')) {
+        str = getVal(str, /table.(.*?)/g, 'table');
+      }
+    }
+    return str;
+  }
+  /**
+     * 表单运算
+     */
+  const hanldeOperational = (v: any) => {
+    let curKey = v.val_key;
+    // let curTarget = `table.${curKey}`;
+    const {
+      operationalForm = [
+        /** 调试数据
+        {
+          operationalRule: "${table.dept_id} * ${table.user_name}",
+          operationalResult: "table.dept_name",
+          operationalPrecision: "2",
+          operationFormParam: ["table.dept_id", "table.user_name"],
+          index: "1599208860405"
+        }
+         */
+      ]
+    } = editFormState || {};
+    setTimeout(async () => {
+      let formValue = editFormState.editForm;
+      let obj = {
+        table: formValue,
+        form: formValue,
+        sys: userInfo.value?.map?.sysParams || {}
+      };
+      operationalForm.forEach((v: any) => {
+        let itemRes: any;
+        let operationalRule = vexutils.handleSysParams(v.operationalRule, obj, 0);
+        let operationFormParam = v.operationFormParam;
+        let f = operationFormParam.find((v: string) => v.includes(curKey));
+        if (!f) return;
+        let operationalResult = handleGetOperationalKey(v.operationalResult);
+        let targetValueStr = 'itemRes=' + operationalRule;
+        try {
+          eval(targetValueStr);
+          let operationalPrecision = +v.operationalPrecision;
+          if (typeof itemRes === 'number' && !isFinite(itemRes)) {
+            itemRes = 0;
+          }
+          // 计算结果有小数点才 精确小数位
+          if (operationalPrecision && String(itemRes).includes('.')) {
+            itemRes = itemRes.toFixed(operationalPrecision);
+          }
+          hanldeSetFieldsValue({
+            [operationalResult]: itemRes
+          }, {}, props);
+        } catch (error) {
+          console.log(error, '计算出错');
+        }
+      });
+    }, 16);
+  }
+  const handleTriggerCheck = (item: any) => {
+    if (['PHONE_TYPE', 'IDCARD_TYPE'].includes(item.html_type)) {
+      let mapList = props.defaultFieldList;
+      if (item.group) {
+        mapList = props.defaultFieldList.filter((v: any) => v.group == item.group);
+      }
+      let targetList = mapList.filter((t: any) => t.validate && ['mobile', 'telephone', 'id_card'].includes(t.validate.vali_obj));
+      targetList.forEach((v: any) => {
+        checkMultipleIdCard(v);
+      });
+    }
+  }
+  // 失去焦点
+    /**
+     * @param data
+     * @param v // 时间类型的 值
+     * @param eventType // 事件类型标识
+     */
+  const handlerInputBlur = (data: any = {}, v: any = {}, eventType = 'blur', eventConfig = {}) => {
+    const { validate, html_type } = data;
+    if (html_type == 'SEARCH_MORE' || html_type == 'SEARCH' || html_type == 'SELECT' || html_type == 'PHONE_TYPE' || html_type == 'IDCARD_TYPE' || html_type == 'GUAGE') {
+      open.value = false;
+      if (html_type == 'GUAGE') {
+        return false;
+      }
+    }
+    // select 类型 失去焦点 不触发事件
+    if (eventType === 'select-blur') {
+      return;
+    }
+    let valiStatus = 'id_card_noReg';
+    // 大陆/港澳台多种身份证及手机号校验
+    if (validate && validate.vali_obj) {
+      let vali_objFlag = checkMultipleIdCard(data);
+      if (['id_card', 'mobile', 'telephone'].includes(validate.obj_type)) {
+        valiStatus = vali_objFlag.status;
+      }
+    }
+    // 身份证
+    if (valiStatus === 'id_card_noReg' && validate && (validate.obj_type == 'id_card' || validate.vali_obj == 'id_card')) {
+      handlerSetIdCarInfo(data);
+    }
+
+    if (validate && validate.obj_type == 'birthday') {
+      // birthday
+      // change 事件才计算年龄。
+      eventType == 'change' && handleBirthday(v, data);
+    } else if (validate && validate.obj_type == 'last_menstrual') {
+      // 末次月经
+      handlerSetMenstrual(v, data);
+    } else if (['mobile_noReg', 'telephone_noReg'].includes(valiStatus) && validate && validate.vali_obj == 'mobile') {
+      handlecheckPhone(data);
+    }
+
+    if (['DIGITAL'].includes(html_type)) {
+      hanldeOperational(data);
+    }
+
+    handleTriggerCheck(data);
+
+    const formValueObj = JSON.parse(JSON.stringify({ ...editFormState.editForm}))
+    // 通讯事件
+    // if (eventType == "change") {
+    //   this.autoVal = null;
+    //   this.mainForm.formfieldOnChange(data);
+    // }
+
+    emit('hanldeFromBlur', { ...formValueObj });
+
+    // this.handleGetFieldsError(data.val_key);
+  }
+  const handleBirthdayToAge = (v: any) => {
+    const res: DateProp = {};
+    const curDateStr = v.format('YYYY-MM-DD');
+    const [year, month, day] = curDateStr.split('-');
+    const d = new Date();
+    const monthFloor = d.getMonth() + 1 < parseInt(month, 10) || (d.getMonth() + 1 == parseInt(month, 10) && d.getDate() < parseInt(day, 10)) ? 1 : 0;
+    let age = d.getFullYear() - parseInt(year, 10) - monthFloor;
+    if (age < 0) {
+      age = 0;
+    }
+    res.year = isNaN(age) ? '' : age;
+    res.day = moment(d).diff(moment(new Date(curDateStr)), 'days') || 0;
+    res.month = moment(d).diff(moment(new Date(curDateStr)), 'months') || 0;
+    return res;
+  }
+  /**
+     * 年龄组件的单位改变
+     * @param {String} val YEAR 、 MONTH、 DAY
+     * @param {Object} item
+     * @returns
+     */
+  const changeAgeSelect = (val: string, item: any) => {
+    const values = val.toLowerCase();
+    const matchAgeItem = props.defaultFieldList.find((v: any) => v.html_type == 'AGE' && v.validate?.obj_type == 'age');
+    if (matchAgeItem && matchAgeItem.isFillAge) {
+      const mapList = props.defaultFieldList;
+      mapList.forEach((v: any) => {
+        const { validate, html_type } = v;
+        if (validate && validate.obj_type == 'age' && html_type == 'AGE') {
+          item.ageRes = v.ageRes;
+          hanldeSetFieldsValue(
+            {
+              [v.val_key]: v.ageRes[values]
+            },
+            v, props
+          );
+        }
+      });
+    } else {
+      if (!item.ageRes) return;
+      hanldeSetFieldsValue(
+        {
+          [item.val_key]: item.ageRes[values]
+        },
+        item,
+        props
+      );
+    }
+    nextTick(() => {
+      props.form.value?.validate(null, (rule: FormItemRule) => rule?.key === item.val_key)
+    });
+  }
+  /** 出生日期推算年龄的单位
+     * @param {Object} ageInfo  {year: 0, day: 108, month: 3}
+     */
+  const handleGetAgeUnit = (ageInfo = {}) => {
+    if (Object.keys(ageInfo || {}).length === 0) {
+      return;
+    }
+    const list = ['year', 'month', 'day'];
+
+    let f = list.find(v => ageInfo[v] > 0) || 'day';
+    return f;
+  }
+  /**
+     * 设置年龄组件的单位
+     * @param {*} ageInfo
+     * @param {*} item
+     */
+  const handleSetAgeUnit = (ageInfo: any, item: any) => {
+    let f = handleGetAgeUnit(ageInfo);
+    if (f && item.val_key_unit) {
+      f = f.toLocaleUpperCase();
+      hanldeSetFieldsValue({
+        [item.val_key_unit]: f
+      }, {}, props);
+      if (typeof changeAgeSelect === 'function') {
+        changeAgeSelect(f, item);
+      }
+    }
+  }
+  /**
+     * @param v val 值
+     * @param i item 表单数据
+     * @param isDef  是否默认赋值
+     */
+  const handleBirthday = (v: any, i: any, isDef = false) => {
+    let mapList = hanldeGetTargetList(i, props.defaultFieldList);
+    if (v && v.format) {
+      const birthdayInfo = handleBirthdayToAge(v);
+      mapList.forEach(item => {
+        const { validate } = item;
+        if (validate && validate.obj_type == 'age') {
+          let hasDef = handleSysParams(item.default_val || '', paramsObj) || props.defaultValue[item.name];
+          if (item.html_type != 'AGE_JSON') {
+            if (isDef) {
+              if (hasDef || [0, '0'].includes(hasDef) || isNaN(hasDef)) {
+                return;
+              }
+            }
+            let values = 'year';
+            const curUnit = (item.val_key_unit && item.val_key_unit?.useFormValue) || '';
+            if (item.option && item.option.length > 0) {
+              values = curUnit?.toLowerCase() || item.option[0].value.toLowerCase();
+            }
+            item['ageRes'] = birthdayInfo
+            item['isFillAge'] = true
+            hanldeSetFieldsValue(
+              {
+                [item.val_key]: birthdayInfo[values]
+              },
+              item,
+              props
+            );
+
+            // 推算年龄的单位
+            handleSetAgeUnit(birthdayInfo, item);
+          }
+
+          if (item.html_type == 'AGE_JSON') {
+            if (isDef) {
+              if (hasDef && hasDef.days > 0) {
+                return;
+              }
+            }
+            const curDateStr = v.format('YYYY-MM-DD');
+            let obj = getAgeInfo(curDateStr);
+            hanldeSetFieldsValue({
+              [item.val_key]: { ...obj, days: birthdayInfo.day }
+            }, {}, props);
+          }
+          handlerInputBlur(item);
+        }
+      });
+    } else {
+      mapList.forEach(item => {
+        const { validate } = item;
+        if (validate && validate.obj_type == 'age') {
+          item['useFormValue'] = ''
+          handlerInputBlur(item);
+        }
+      });
+    }
+  }
+  // 设置身份证的信息
+  const handlerSetIdCarInfo = (data: any = {}) => {
+    const { validate } = data;
+    // 不是 field_toggle 的事件类型返回(默认触发不校验事件类型)
+    if (!validate) {
+      return;
+    }
+    const idCarItem = data;
+    let mapList = hanldeGetTargetList(data, props.defaultFieldList);
+    if (idCarItem) {
+      const idCarNo = idCarItem['val_key']?.useFormValue;
+      if (!idCarNo) {
+        if (validate.obj_type == 'id_card') {
+          mapList.forEach(item => {
+            const { validate } = item;
+            if (validate && (validate.obj_type == 'age' || validate.obj_type == 'sex' || validate.obj_type == 'birthday')) {
+              item['useFormValue'] = ''
+              handlerInputBlur(item);
+            }
+          });
+        }
+        return;
+      }
+      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(idCarNo)) {
+        if (validate.vali_obj == 'id_card') {
+          editFormState.editForm[idCarItem['val_key']] = idCarNo
+          // this.baseForm.setFields({
+          //   [idCarItem['val_key']]: {
+          //     value: idCarNo,
+          //     errors: [
+          //       {
+          //         message: this.$t('1.1.7.32')
+          //       }
+          //     ]
+          //   }
+          // });
+          if (validate.obj_type == 'id_card') {
+            mapList.forEach(item => {
+              const { validate } = item;
+              if (validate && (validate.obj_type == 'age' || validate.obj_type == 'sex' || validate.obj_type == 'birthday')) {
+                item['useFormValue'] = ''
+                handlerInputBlur(item);
+              }
+            });
+          }
+          // resetFields
+        }
+
+        return false;
+      }
+      if (validate.obj_type != 'id_card') return;
+      const idCarInfo = handlerGetIdcatInfo(idCarNo);
+      // 回填上
+      mapList.forEach(item => {
+        const { validate, html_type } = item;
+        if (validate && validate.obj_type == 'age') {
+          if (html_type != 'AGE_JSON') {
+            let values = 'year';
+            if (item.val_key_unit) {
+              const curUnit = editFormState.editForm[item.val_key_unit]
+              if (item.option && item.option.length > 0) {
+                values = curUnit?.toLowerCase() || item.option[0].value.toLowerCase();
+              }
+            }
+            item['ageRes'] = idCarInfo
+            item['isFillAge'] = true
+            hanldeSetFieldsValue(
+              {
+                [item.val_key]: idCarInfo[values]
+              },
+              item,
+              props
+            );
+          }
+          if (html_type == 'AGE_JSON') {
+            let v = moment(idCarInfo['birthday'], 'YYYY-MM-DD');
+            handleBirthday(v, item);
+          }
+          // 表单配置事件
+          handlerInputBlur(item);
+        } else if (validate && validate.obj_type == 'sex') {
+          hanldeSetFieldsValue(
+            {
+              [item.val_key]: idCarInfo['sex']
+            },
+            item,
+            props
+          );
+          // 表单配置事件
+          handlerInputBlur(item, idCarInfo['sex']);
+        } else if (validate && validate.obj_type == 'birthday') {
+          hanldeSetFieldsValue(
+            {
+              [item.val_key]: moment(idCarInfo['birthday'], 'YYYY-MM-DD')
+            },
+            item,
+            props
+          );
+          // 表单配置事件
+          handlerInputBlur(item, moment(idCarInfo['birthday'], 'YYYY-MM-DD'));
+        }
+      });
+    }
+  }
+  // 大陆/港澳台多种身份证及手机号校验
+  const checkMultipleIdCard = (data: any) => {
+    const {
+      group,
+      val_key,
+      validate: { obj_type }
+    } = data;
+    // let options = JSON.parse(this.$refs[phone_idcard_type].$attrs.optionData);
+    const is_PHONE_TYPE = obj_type == 'mobile' || obj_type == 'telephone';
+    const is_IDCARD_TYPE = obj_type == 'id_card';
+    const findHtmlType = is_PHONE_TYPE ? 'PHONE_TYPE' : is_IDCARD_TYPE ? 'IDCARD_TYPE' : '';
+
+    let targetItem = props.defaultFieldList.find((v: any) => v.html_type == findHtmlType);
+    if (!targetItem) return { status: `${obj_type}_noReg` };
+    const options = targetItem.option;
+    const selectedValue = targetItem.val_key?.useFormValue;
+    // let selectedText = options.filter(item => item.value === selectedValue)[0]
+    //   .text;
+    let StrVal = String(selectedValue);
+    if (!selectedValue && StrVal !== '0') return { status: 'none' };
+
+    const regKey = obj_type === 'id_card' ? 'reg' : obj_type === 'mobile' ? 'mobileReg' : 'telephoneReg';
+    const findList = options.filter((item: any) => item.value == selectedValue);
+    if (!findList[0]) return { status: 'noOptions' };
+    const selectedRegStr = findList[0][regKey];
+    const selectedReg = new RegExp(selectedRegStr);
+    const checkingInput = val_key?.useFormValue;
+    if (!checkingInput) return { status: 'noPass' };
+    if (!selectedReg.test(checkingInput)) {
+      editFormState.editForm[val_key] = checkingInput
+      // props.form.value.setFields({
+      //   [val_key]: {
+      //     value: checkingInput,
+      //     errors: [
+      //       {
+      //         message: `请输入正确的号码`
+      //       }
+      //     ]
+      //   }
+      // });
+      return { status: 'noPass' };
+    } else {
+      editFormState.editForm[val_key] = checkingInput
+      // this.baseForm.setFields({
+      //   [val_key]: {
+      //     value: checkingInput
+      //   }
+      // });
+      if (selectedValue === 'CN') {
+        handlerSetIdCarInfo(data);
+      }
+      return { status: 'pass' };
+    }
+  }
+  
+  const defaultInit = () => {
+    // this.formFieldListCopy = JSON.parse(JSON.stringify(this.formFieldList));
+    const { validate = {}, name, default_val } = props.item;
+    let targetStr = props.defaultValue[name] || default_val;
+    targetStr = handleSysParams(targetStr, paramsObj);
+    if (['last_menstrual'].includes(validate.obj_type)) {
+      targetStr && handlerInputBlur(props.item, moment(targetStr));
+    } else if (['birthday'].includes(validate.obj_type)) {
+      targetStr && handleBirthday(moment(targetStr), props.item, true);
+    }
+
+    // 默认值有值触发表单绑定的事件。
+    // if (this.$utils.notEmpty(targetStr)) {
+    //   this.handlerInputBlur(this.item, null, "blur", { eventType: "init" });
+    // }
+  }
+
+  // 普通下拉框设置open值
+  const dropdownVisibleChange = (e: boolean) => {
+    nextTick(() => {
+      open.value = e;
+    });
+  }
+
+  onMounted(() => {
+    nextTick(() => {
+      defaultInit()
+    })
+  })
+
+  return {
+    open,
+    dropdownVisibleChange,
+    handlerInputBlur
+  }
+}