cnhis-design-vue 3.0.1 → 3.0.2

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

@@ -1,426 +0,0 @@
-<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-form3/edit-component/edit-date-picker/edit-date-picker.vue

@@ -1,66 +0,0 @@
-<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-form3/edit-component/edit-digital/edit-digital.vue

@@ -1,60 +0,0 @@
-<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-form3/edit-component/edit-input/edit-input.vue

@@ -1,38 +0,0 @@
-<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-form3/edit-component/edit-input-password/edit-input-password.vue

@@ -1,89 +0,0 @@
-<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>