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

package/packages/big-table/src/components/edit-form/EditForm.vue

@@ -0,0 +1,426 @@
+<template>
+  <div class="editForm-page">
+    <NForm ref="editForm" :model="state.editForm" :rules="state.editRules">
+      <NFormItem
+        v-for="(item, index) in state.editForm.formFieldList"
+        :key="index"
+        label=""
+        :path="`formFieldList.${index}.useFormValue`"
+        :rule="handleGetRules(item)"
+        :class="'editeForm-item-' + item.html_type"
+      >
+        <component
+          v-if="item.isShowComponent"
+          :key="item.RandomId"
+          v-bind:is="item.com_name"
+          :class="item.html_type"
+          :ref="item.html_type + item.val_key"
+          :item="item"
+          :defaultValue="state.defaultValue"
+          v-bind="$attrs"
+          :form="editForm"
+          @valueOnChange="getValueChange"
+        />
+      </NFormItem>
+    </NForm>
+  </div>
+</template>
+<script lang="ts">
+import registerCom from './edit-component/register-com';
+export default {
+  name: 'EditForm',
+  mixins: [registerCom]
+}
+</script>
+<script setup lang="ts">
+import { ref, reactive, provide, computed, watch } from 'vue'
+import { NGrid, NGridItem, NFormItemGi, NButton, NModal, NForm, NFormItem, NInput, NSelect, NCheckbox, NInputNumber } from 'naive-ui'
+import type { FormRules, FormInst } from 'naive-ui'
+import { useMessage } from 'naive-ui'
+import type { defaultFormProp, FieldListProp } from './interface'
+import useConfigData from './hooks/useConfigData'
+import { useFormCommon } from "./hooks/useFormCommon"
+import { useValidateRules } from './hooks/useValidateRules'
+import { handleSysParams, handlerGetDateType } from './utils'
+import vexutils from '@/utils/vexutils';
+
+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
+}
+
+  (window as any).$message = useMessage()
+  
+  const props = withDefaults(defineProps<EditFormProps>(), {
+    cacheUniqueKey: {},
+    banRequest: false,
+    propsDelSetting: false,
+    propsFormBtn: false,
+    parentConfig: {},
+    configuration: {},
+    isOpenShortcut: true
+  })
+
+  const emit = defineEmits(['banSubmit', 'handleSubmit'])
+
+  const state = reactive({
+    defaultValue: {},
+    editForm: {
+      formFieldList: [] as any[]
+    },
+    editRules: {},
+    formFieldList: [],
+    theUniqueKeyListObj: {},
+    formType: {} as null | any,
+    defaultFieldList: [] as any[],
+    dbParams: {},
+    searchObj: {}, // 存下来搜索框数据
+    searchAddObj: {},
+    multipleSelected: {}, // 已选的多选值
+    formFieldObj: {}, // 表单数据
+    selectedDefValueObj: {},
+    fieldTypeList: [] as any[]
+  })
+  const editForm = ref<FormInst | null>(null)
+
+  const userInfo = computed(() => {
+    const { userInfo } = props.configuration || {};
+    return userInfo || {};
+  })
+  const showLable = computed(() => !props.isPure)
+
+  const { RandomId, handleGetdef}: any = useFormCommon(props, state, userInfo.value);
+  const { handleGetRules } = useValidateRules()
+
+  provide('state', state)
+  provide('userInfo', userInfo)
+
+  // 方法
+  // 默认值转换
+  const handleConvertData = (target: any) => {
+    let transmitParams: any = {};
+    let transmitKeys = Object.keys(target || {});
+    if (transmitKeys && transmitKeys.length) {
+      transmitKeys.forEach(v => {
+        if (typeof target[v] == 'object') {
+          transmitParams[v] = JSON.stringify(target[v]);
+        } else {
+          transmitParams[v] = target[v];
+        }
+        if (vexutils.isString(target[v])) {
+          if (target[v] && target[v].includes('###{')) {
+            let temp = JSON.parse(target[v].replace('###', ''));
+            transmitParams[v] = temp.value;
+          }
+        }
+      });
+    }
+
+    return transmitParams;
+  }
+  const handleGetformType = (list: any[]) => {
+    state.theUniqueKeyListObj = {};
+    let myformType: any = {};
+    let mySearchObj: any = {};
+    let searchAddObj: any = {};
+    state.formType = null;
+
+    let fieldObj = Object.create(null);
+    let defaList = Object.keys(state.defaultValue);
+
+    list?.forEach(item => {
+      myformType[item.val_key] = item;
+      let curKey = `${item.val_key}_${item.name}`;
+      let NOWORDBOOK = item.wordbook && (item?.wordbook?.type || '') != 'WORDBOOK';
+      item.selectOptions = [];
+      item.popoverVisible = false;
+      item.otherval = '';
+      item.otherFlag = false;
+      if (item.html_type == 'SEARCH') {
+        mySearchObj[curKey] = [];
+        searchAddObj[curKey] = false;
+        if (defaList.includes(item.name)) {
+          mySearchObj[curKey] = [
+            {
+              [item.wordbook.value_key]: state.defaultValue[item.name]
+            }
+          ];
+        }
+      } else if (item.html_type == 'SEARCH_MORE') {
+        mySearchObj[curKey] = [];
+        searchAddObj[curKey] = false;
+        if (!(state.multipleSelected as any)[curKey]) {
+          state.multipleSelected[curKey] = []
+        }
+      } else {
+        const { validate } = item;
+        let n = state.defaultValue[item.name] || item.default_val;
+        // // 身份证
+        // if (n && validate && validate.obj_type == 'id_card') {
+        //   setTimeout(() => {
+        //     this.handlerSetIdCarInfo(item, true);
+        //   }, 300);
+        // }
+      }
+      if (item.val_key) {
+        fieldObj[item.val_key] = {
+          ...item
+        };
+      }
+    });
+    state.formType = myformType;
+    state.searchObj = mySearchObj;
+    state.searchAddObj = searchAddObj;
+    state.formFieldObj = fieldObj;
+  }
+  const getSelecteddefValueObj = () => {
+    let obj = {
+      multipleSelected: {
+        ...state.multipleSelected
+      }
+    };
+    state.selectedDefValueObj = obj
+  }
+  const hanlderInitFieldList = (fieldList: any[] = []) => {
+    if (!fieldList.length) return;
+    handleGetformType(fieldList);
+    getSelecteddefValueObj();
+
+    let fieldTypeList = [];
+    for (let index = 0; index < fieldList.length; index++) {
+      const element: any = fieldList[index];
+      element.isPure = props.isPure;
+      // 获取组件名称
+      let randomId = RandomId();
+      let com_name = useConfigData.getComName(element);
+      // console.log(element.name, com_name, element.html_type);
+      element['com_name'] = com_name
+      element['RandomId'] = randomId
+      let useFormValue = handleGetdef(element);
+      // console.log(useFormValue, "---useFormValue");
+      element['useFormValue'] = useFormValue
+      element['isVisible'] = false
+      // 如果中台设置（mid_is_edit）有值那就去中台的，没有取后台（is_edit）的；
+      let mid_is_edit = [0, 1, '0', '1'].includes(element.mid_is_edit) ? element.mid_is_edit : element.is_edit;
+      element.is_edit = mid_is_edit;
+
+      if (element.html_type.includes('CHECKBOX')) {
+        element['indeterminate'] = false
+        element['checkAll'] = false
+      }
+
+      // 兼容处理，
+      if (element.html_type.includes('CHECKBOX') || element.html_type.includes('RADIO')) {
+        let imgFlag = element?.option?.some((v: any) => v.imageBase64);
+        element.is_contain_images = imgFlag ? 1 : 0;
+      }
+
+      fieldTypeList.push({
+        columnName: element.val_key,
+        fieldType: 'TEXT'
+      });
+      element['isShowComponent'] = true
+    }
+
+    state.defaultFieldList = fieldList;
+    state.fieldTypeList = fieldTypeList;
+    state.editForm.formFieldList = fieldList
+  }
+  const initForm = (m: defaultFormProp = {}) => {
+    let { defaultCombinationForm = {}, fieldList = [] } = m;
+      let tempForm = {};
+      if (Object.keys(defaultCombinationForm).length) {
+        tempForm = { ...defaultCombinationForm };
+      }
+      let transmitParams = handleConvertData(tempForm);
+      state.defaultValue = { ...transmitParams };
+      // console.log(this.defaultValue, "---defaultValue");
+      hanlderInitFieldList(fieldList);
+
+  }
+  // 设置身份证的信息
+  const handlerSetIdCarInfo = (data = {}, init = false) => {}
+  const hanldegetUniqueKey = (id: string) => {
+    return props.cacheUniqueKey && props.cacheUniqueKey[id];
+  }
+  const getValueChange = (v: any, i:any) => {
+    // SEARCH_CASCADE SEARCH_MORE LABEL
+    let cacheKey = `${i.val_key}_${i.name}`;
+    if (i.html_type == 'SEARCH_MORE') {
+      state.multipleSelected[cacheKey] = [...v]
+    }
+    getSelecteddefValueObj();
+  }
+  const getObjs = (str: string): string => {
+    /**
+     * 处理：{type: "jsonb", value: ""}
+     *  */
+    let resObj = null;
+    if (vexutils.isJSON(str)) {
+      resObj = JSON.parse(str);
+      if (resObj.type === 'jsonb') {
+        resObj = resObj.value;
+        if (resObj.includes('jsonb')) {
+          resObj = getObjs(resObj);
+        }
+        return resObj;
+      } else {
+        return str;
+      }
+    } else {
+      return str;
+    }
+  }
+  const handleGetSearMoreSubmit = (item: any, formdata: any) => {
+    const { formType, multipleSelected } = state;
+    const curItem = formType[item];
+    const defaultVal = JSON.stringify({ objs: [], objStr: '' });
+    let valueList: any[] = [];
+    let showList: any[] = [];
+    let keyName = `${curItem.val_key}_${curItem.name}`;
+    if (!curItem.wordbook) return defaultVal;
+    let value_key = curItem.wordbook.value_key;
+    let render_key = curItem.wordbook.render_key || [];
+    let defVal = state.defaultValue[curItem.name] || curItem.default_val;
+    // 修改时没有改变值，直接提交回填的值；
+    if (curItem.isOnchange !== '00' && defVal) {
+      defVal = curItem.filtration_val || handleSysParams(defVal, { defaultValue: state.defaultValue, userInfo: userInfo.value, dbParams: state.dbParams });
+      defVal = getObjs(defVal);
+      return defVal || defaultVal;
+    }
+    const targetList = JSON.parse(JSON.stringify(multipleSelected[keyName] || []));
+    if (Array.isArray(formdata[item]) && formdata[item].length) {
+      formdata[item].forEach((ele: any) => {
+        targetList.forEach((v: any) => {
+          let [curValue_key] = typeof ele.key === 'string' ? ele.key.split('-') : [''];
+          if (`${v[value_key]}-${v['myUniqueKey']}` == ele.key || curValue_key == v[value_key]) {
+            // 删除 前端添加的关联信息
+            delete v.setting;
+            delete v.showLabel;
+            // v.myUniqueLabel != "theUniqueKey"
+
+            if (v['myUniqueKey'] && v.myUniqueLabel) {
+              var item = {
+                [v.myUniqueLabel]: v['myUniqueKey'],
+                [value_key]: v[value_key]
+              };
+              render_key.forEach((k: string) => {
+                item[k] = v[k];
+              });
+              valueList.push(item);
+            } else {
+              let { myUniqueKey, myUniqueLabel, ...rest } = v;
+              valueList.push(rest);
+            }
+            showList.push(v[value_key]);
+          }
+        });
+      });
+    }
+    return JSON.stringify({
+      objs: valueList,
+      objStr: showList.join(',')
+    });
+  }
+  const handleFormatSubmit = (copy: any) => {
+    // Moment 对象不能用 JSON 方式复制
+    // let formdata = JSON.parse(JSON.stringify(copy));
+    let formdata = vexutils.clone(copy, true);
+
+    // 表格数据格式化符合接口
+    Object.keys(formdata).forEach(item => {
+      switch (state.formType[item]?.html_type) {
+        case 'INPUT':
+        case 'TEXTAREA':
+          if (state.formType[item]?.delete_before_after_spaces == 1) {
+            formdata[item] = vexutils.handleClearStrBlank(formdata[item]);
+          }
+          break;
+        case 'DIGITAL':
+        case 'SELECT':
+        case 'RADIO':
+        case 'RADIO_BLOCK':
+          break;
+        case 'SEARCH':
+          formdata[item] = typeof formdata[item] === 'string' ? formdata[item].split('>>>')[0] : formdata[item] && formdata[item].label && formdata[item].label.trim();
+          break;
+        case 'SEARCH_MORE':
+          formdata[item] = handleGetSearMoreSubmit(item, formdata);
+          break;
+        case 'CHECKBOX':
+        case 'CHECKBOX_BLOCK':
+          formdata[item] = Array.isArray(formdata[item]) ? formdata[item].join(',') : formdata[item];
+          break;
+        case 'DATETIME-INPUT':
+        case 'DATE-INPUT':
+        case 'TIME-INPUT':
+        case 'DATE':
+          if (typeof formdata[item] == 'string') {
+            formdata[item] = formdata[item] || null;
+          } else {
+            formdata[item] = formdata[item] ? formdata[item].format(handlerGetDateType(state.formType[item])) : null;
+          }
+          break;
+        default:
+          break;
+      }
+    });
+    return formdata;
+  }
+  const handleSubmitForm = () => {
+    editForm.value?.validate((errors) => {
+      if (errors) {
+        emit('banSubmit', {
+          rowKey: props.formPrimaryKey
+        });
+        let message = (errors[0] as any).message || ''
+        message && (window as any).$message.error(message);
+      } else {
+        let submData = {};
+        state.editForm.formFieldList.forEach(item => {
+          submData[item.val_key] = item.useFormValue;
+        });
+        submData = handleFormatSubmit(submData);
+        if (submData) {
+          submData = JSON.parse(JSON.stringify(submData));
+        }
+        let formObj = {
+          rowKey: props.formPrimaryKey,
+          formData: submData
+        };
+        emit('handleSubmit', formObj);
+      }
+    })
+  }
+
+  watch(() => props.defaultForm,
+    (val: any) => {
+      if (!val || !Object.keys(val).length) return;
+        // 行编辑 formmat 触发多次 深拷贝 避免引用地址
+        let tempVal = JSON.parse(JSON.stringify(val));
+        initForm(tempVal);
+    },
+    { deep: true, immediate: true }
+  )
+
+  defineExpose({
+    handleSubmitForm
+  })
+</script>
+<style lang="less" scoped>
+.editForm-page {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+</style>

package/packages/big-table/src/components/edit-form/edit-component/edit-date-picker/edit-date-picker.vue

@@ -0,0 +1,66 @@
+<template>
+  <NDatePicker
+    class="edit-date-picker"
+    type="datetime"
+    v-model:value="item.useFormValue"
+    ref="dataPickerRef"
+    :placeholder="item.placeholder || ''"
+    :disabled="item.is_edit == 0"
+    :is-date-disabled="(current: number) => disabledDatePicker(current, item)"
+    :is-time-disabled="(current: number) => disabledTimePicker(current, item)"
+    :actions="handlerGetDateType(item) !== 'yyyy-MM-dd HH:mm:ss' ? ['clear', 'now', 'confirm'] : ['clear', 'confirm']"
+    :clearable="item.is_empty == 0"
+    :time-picker-props="{ disabled: timeIsDisabled, format: timeIsFormat }"
+    :format="handlerGetDateType(item)"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+import { NDatePicker } from 'naive-ui'
+import editFormProps from '../editFormProps'
+import { handlerGetDateType } from '../../utils'
+import { useItemDefault } from '../../hooks/useItemDefault'
+import { useDateType } from '../../hooks/useDateType'
+
+
+export default defineComponent({
+  name: 'editDatePicker',
+  components: {
+    NDatePicker
+  },
+  props: {
+    ...editFormProps
+  },
+  emits: ['hanldeFromBlur'],
+  setup (props, { attrs, slots, emit }) {
+    const { open } = useItemDefault(props, emit)
+    // const { disabledDatePicker, disabledTimePicker } = useDateType(open)
+    let timeIsDisabled = ref(false)
+    let timeIsFormat = ref('HH:mm:ss')
+    
+    const setTimePickerProps = () => {
+      let type = handlerGetDateType(props.item);
+      let flag = type.includes('HH');
+      let [, timeType] = type.split(' ');
+      timeType = typeof timeType === 'string' ? timeType.trim() : '';
+      if (flag) {
+        if (/(Y)|(M)|(D)/g.test(timeType) || !timeType) {
+          // return { format: 'HH:mm:ss' };
+        } else {
+          timeIsFormat.value = timeType
+        }
+        timeIsDisabled.value = true
+      }
+    }
+    setTimePickerProps()
+
+    return {
+      timeIsDisabled,
+      timeIsFormat,
+      handlerGetDateType,
+      ...useDateType(open)
+    }
+  }
+})
+</script>

package/packages/big-table/src/components/edit-form/edit-component/edit-digital/edit-digital.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="ant-input-group">
+    <NInputGroup>
+      <NInputGroupLabel>{{item.before}}</NInputGroupLabel>
+      <NInputNumber
+        v-model:value="item.useFormValue"
+        :ref="'a-input-number-' + item.val_key"
+        :disabled="item.is_edit == 0"
+        :placeholder="item.placeholder || ''"
+        :clearable="item.is_empty == 0"
+      >
+      <template #suffix>
+        <span v-if="item.suffix" class="digital-suffix">
+          {{ item.suffix }}
+        </span>
+      </template>
+      </NInputNumber>
+      <NInputGroupLabel>{{item.suffix}}</NInputGroupLabel>
+    </NInputGroup>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+import { NInputNumber, NInputGroup, NInputGroupLabel } from 'naive-ui'
+import editFormProps from '../editFormProps'
+
+export default defineComponent({
+  name: 'editDigital',
+  components: {
+    NInputNumber,
+    NInputGroup,
+    NInputGroupLabel
+  },
+  props: {
+    ...editFormProps
+  },
+  setup (props, { attrs, slots, emit }) {
+    
+  }
+})
+</script>
+
+<style lang="less" scoped>
+.digital-suffix {
+  display: inline-block;
+  height: 32px;
+  line-height: 32px;
+  padding: 0 11px;
+  font-weight: 400;
+  font-size: 14px;
+  text-align: center;
+  color: rgba(0, 0, 0, 0.65);
+  background-color: #fafafa;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  box-sizing: border-box;
+  vertical-align: top;
+}
+</style>

package/packages/big-table/src/components/edit-form/edit-component/edit-input/edit-input.vue

@@ -0,0 +1,38 @@
+<template>
+  <NInputGroup>
+    <NInputGroupLabel>{{item.before}}</NInputGroupLabel>
+    <NInput
+      v-model:value="item.useFormValue"
+      :ref="`input-${item.val_key}`"
+      autocomplete="off"
+      :disabled="item.is_edit == 0"
+      :clearable="item.is_empty == 0"
+      :placeholder="item.placeholder || ''"
+      :maxlength="item.validate && item.validate.max_length ? +item.validate.max_length : 300"
+    >
+    </NInput>
+    <NInputGroupLabel>{{item.suffix}}</NInputGroupLabel>
+  </NInputGroup>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+import { NInput, NInputGroup, NInputGroupLabel } from 'naive-ui'
+import editFormProps from '../editFormProps'
+
+export default defineComponent({
+  name: 'editInput',
+  components: {
+    NInput,
+    NInputGroup,
+    NInputGroupLabel
+  },
+  props: {
+    ...editFormProps
+  },
+  setup (props, { attrs, slots, emit }) {
+    
+  }
+})
+</script>
+<style lang="less" scoped></style>

package/packages/big-table/src/components/edit-form/edit-component/edit-input-password/edit-input-password.vue

@@ -0,0 +1,89 @@
+<template>
+  <div
+    :class="{
+      'is-show-psw': !isReadOnly
+    }"
+  >
+  <NInputGroup>
+    <NInputGroupLabel>{{item.before}}</NInputGroupLabel>
+    <NInput
+      :ref="`input-password-${item.val_key}`"
+      :type="inputType"
+      v-model:value="item.useFormValue"
+      autocomplete="off"
+      autocorrect="off"
+      autocapitalize="off"
+      spellcheck="false"
+      :disabled="item.is_edit == 0"
+      :clearable="item.is_empty == 0"
+      :placeholder="item.placeholder || ''"
+      :maxlength="item.validate && item.validate.max_length ? +item.validate.max_length : 300"
+    >
+      <template #suffix>
+        <svg-icon @click="handleTogglePsw" :icon-class="isReadOnly ? 'chakan' : 'anniuyincang'" style="font-size: 1em;" :style="{ color: isReadOnly ? styleSetting.themeColor : undefined }" />
+      </template>
+    </NInput>
+    <NInputGroupLabel>{{item.suffix}}</NInputGroupLabel>
+  </NInputGroup>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+import { NInput, NInputGroup, NInputGroupLabel } from 'naive-ui'
+import SvgIcon from '@/component/svg/index.vue';
+import editFormProps from '../editFormProps'
+
+type InputType = 'text' | 'password' | 'textarea'
+
+export default defineComponent({
+  name: 'editInputPassword',
+  components: {
+    NInput,
+    NInputGroup,
+    NInputGroupLabel,
+    SvgIcon
+  },
+  props: {
+    ...editFormProps
+  },
+  setup (props, { attrs, slots, emit }) {
+    let inputType = ref('text' as InputType)
+    let isReadOnly = ref(false)
+
+    const handleTogglePsw = () => {
+      isReadOnly.value = !isReadOnly.value
+    }
+
+    return {
+      inputType,
+      isReadOnly,
+      handleTogglePsw
+    }
+  }
+})
+</script>
+<style lang="less" scoped>
+.is-show-psw {
+  &:deep(.n-input) {
+    font-family: text-security-disc;
+    -webkit-text-security: disc;
+    text-security: disc; /*使用指定形状代替文字显示 circle圆圈 disc 圆形 square 正方形*/
+    ime-mode: disabled;
+  }
+  ::-webkit-input-placeholder {
+    /* WebKit browsers */
+    font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  }
+
+  ::-moz-placeholder {
+    /* Mozilla Firefox 19+ */
+    font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  }
+
+  :-ms-input-placeholder {
+    /* Internet Explorer 10+ */
+    font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  }
+}
+</style>