cnhis-design-vue 0.3.1-beta → 0.3.4-beta

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

@@ -0,0 +1,38 @@
+<template>
+  <NDatePicker
+    type="month"
+    v-model:value="item.useFormValue"
+    :ref="'monthPicker-' + item.val_key"
+    :placeholder="item.placeholder || ''"
+    :clearable="item.is_empty == 0"
+    :disabled="item.is_edit == 0"
+    :disabledDate="(current: number) => disabledDatePicker(current, item)"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+import { NDatePicker } from 'naive-ui'
+import editFormProps from '../editFormProps'
+import { useItemDefault } from '../../hooks/useItemDefault'
+import { useDateType } from '../../hooks/useDateType'
+
+export default defineComponent({
+  name: 'editMonthPicker',
+  components: {
+    NDatePicker
+  },
+  props: {
+    ...editFormProps
+  },
+  emits: ['hanldeFromBlur'],
+  setup (props, { attrs, slots, emit }) {
+    const { open } = useItemDefault(props, emit)
+
+    return {
+      ...useDateType(open)
+    }
+  }
+})
+</script>
+<style lang="less" scoped></style>

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

@@ -0,0 +1,63 @@
+<template>
+  <div class="select-content">
+    <NSelect
+      v-model:value="item.useFormValue"
+      :ref="'search-' + item.val_key"
+      :consistent-menu-width="(item.elem_width || 6) > 11"
+      class="formItem-select editItem-search"
+      :placeholder="item.placeholder || '请选择'"
+      :clearable="item.is_empty == 0"
+      :disabled="item.is_edit == 0"
+      :filterable="selectIsOpen"
+      @search="(value: string) => handleMultipleSearch(value, item)"
+      @update:show="(show: boolean) => handlerDropdownVisibleChange(show, item)"
+      @update:value="(value: string | number | null) => handleSearchSelect(value, item, 'select')"
+      :loading="state.fetching"
+      :options="state.curOptions"
+      :render-option="renderOption"
+    >
+    </NSelect>
+  </div>
+</template>
+
+<script lang="tsx">
+import { defineComponent, ref, VNode } from 'vue'
+import { NSelect, SelectOption } from 'naive-ui'
+import editFormProps from '../editFormProps'
+import { useItemDefault } from '../../hooks/useItemDefault'
+import { useSearch } from '../../hooks/useSearch'
+
+export default defineComponent({
+  name: 'editSearch',
+  components: {
+    NSelect
+  },
+  props: {
+    ...editFormProps
+  },
+  emits: ['hanldeFromBlur', 'opentableSelect', 'valueOnChange'],
+  setup (props, { attrs, slots, emit }) {
+    const { handlerInputBlur } = useItemDefault(props, emit)
+
+    const renderOption = ({ node, option }: { node: VNode, option: any }) => {
+      if (!option['showLabel']) return option[props.item.wordbook.value_key]
+      return [
+        <div
+          class={{'title-line': option.index === 0 && props.item.wordbook.render_key && props.item.wordbook.render_key.length > 1}}
+          style="display: flex;justify-content: space-around;"
+        >
+        {
+          option['showLabel'].split('≌').map((v: any) => <span key={v} style="flex: 1;">{v}</span>)
+        }
+        </div>
+      ]
+    }
+    
+    return {
+      renderOption,
+      ...useSearch(props, emit, handlerInputBlur)
+    }
+  }
+})
+</script>
+<style lang="less" scoped></style>

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

@@ -0,0 +1,69 @@
+<template>
+  <div class="select-content">
+    <NSelect
+      multiple
+      v-model:value="item.useFormValue"
+      ref="form_a_select"
+      :consistent-menu-width="(item.elem_width || 6) > 11"
+      class="formItem-select formItem-select-multiple formItem-search-more"
+      :placeholder="item.placeholder || '请选择'"
+      :clearable="item.is_empty == 0"
+      :disabled="item.is_edit == 0"
+      :filterable="selectIsOpen"
+      :max-tag-count="10"
+      @search="(value: string) => handleMultipleSearch(value, item)"
+      @update:show="(show: boolean) => handlerDropdownVisibleChange(show, item)"
+      @update:value="(value: string | number | Array<string> | null) => searchMoreOnChange(value, item)"
+      :loading="state.fetching"
+      :options="state.curOptions"
+      :render-option="renderOption"
+    >
+    </NSelect>
+  </div>
+</template>
+
+<script lang="tsx">
+import { defineComponent, ref } from 'vue'
+import { NSelect, SelectOption } from 'naive-ui'
+import editFormProps from '../editFormProps'
+import { useItemDefault } from '../../hooks/useItemDefault'
+import { useSearch } from '../../hooks/useSearch'
+
+export default defineComponent({
+  name: 'editSearchMore',
+  components: {
+    NSelect
+  },
+  props: {
+    ...editFormProps
+  },
+  emits: ['hanldeFromBlur', 'opentableSelect', 'valueOnChange'],
+  setup (props, { attrs, slots, emit }) {
+    const { handlerInputBlur } = useItemDefault(props, emit)
+
+    const renderOption = (option: any) => {
+      if (!option['showLabel']) return option[props.item.wordbook.value_key]
+      return [
+        <div
+          class={{'title-line': option.index === 0 && props.item.wordbook.render_key && props.item.wordbook.render_key.length > 1}}
+          style="display: flex;justify-content: space-around;"
+        >
+        {
+          option['showLabel'].split('≌').map((v: any) => <span key={v} style="flex: 1;">{v}</span>)
+        }
+        </div>
+      ]
+    }
+    
+    return {
+      renderOption,
+      ...useSearch(props, emit, handlerInputBlur)
+    }
+  }
+})
+</script>
+<style lang="less" scoped>
+.formItem-select-multiple {
+  padding: 4px 0;
+}
+</style>

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

@@ -0,0 +1,51 @@
+<template>
+  <div class="select-content">
+    <NSelect
+      v-model:value="item.useFormValue"
+      :ref="item.val_key"
+      :consistent-menu-width="true"
+      class="formItem-select editItem-search"
+      :placeholder="item.placeholder || '请选择'"
+      :clearable="item.is_empty == 0"
+      :disabled="item.is_edit == 0"
+      @update:show="(show: boolean) => dropdownVisibleChange(show)"
+      :options="options"
+    >
+    </NSelect>
+  </div>
+</template>
+
+<script lang="tsx">
+import { defineComponent, ref, VNode } from 'vue'
+import { NSelect, SelectOption } from 'naive-ui'
+import editFormProps from '../editFormProps'
+import { useItemDefault } from '../../hooks/useItemDefault'
+
+export default defineComponent({
+  name: 'editSearch',
+  components: {
+    NSelect
+  },
+  props: {
+    ...editFormProps
+  },
+  emits: ['hanldeFromBlur'],
+  setup (props, { attrs, slots, emit }) {
+    const { dropdownVisibleChange } = useItemDefault(props, emit)
+
+    let options = ref([] as any[])
+    options = props.item.option.map((v: any) => {
+      return {
+        ...v,
+        label: v.text
+      }
+    })
+    
+    return {
+      options,
+      dropdownVisibleChange
+    }
+  }
+})
+</script>
+<style lang="less" scoped></style>

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

@@ -0,0 +1,60 @@
+<template>
+  <div class="select-content">
+    <NSelect
+      v-model:value="item.useFormValue"
+      :ref="item.val_key"
+      :consistent-menu-width="true"
+      class="formItem-select formItem-select-multiple"
+      :placeholder="item.placeholder || '请选择'"
+      :clearable="item.is_empty == 0"
+      :disabled="item.is_edit == 0"
+      @update:show="(show: boolean) => dropdownVisibleChange(show)"
+      :options="options"
+      :filter="filter"
+    >
+    </NSelect>
+  </div>
+</template>
+
+<script lang="tsx">
+import { defineComponent, ref } from 'vue'
+import { NSelect, SelectOption } from 'naive-ui'
+import editFormProps from '../editFormProps'
+import { useItemDefault } from '../../hooks/useItemDefault'
+import vexutils from '@/utils/vexutils'
+
+export default defineComponent({
+  name: 'editSelectMultiple',
+  components: {
+    NSelect
+  },
+  props: {
+    ...editFormProps
+  },
+  emits: ['hanldeFromBlur'],
+  setup (props, { attrs, slots, emit }) {
+    const { dropdownVisibleChange } = useItemDefault(props, emit)
+
+    let options = ref([] as any[])
+    options = props.item.option.map((v: any) => {
+      return {
+        ...v,
+        label: v.text
+      }
+    })
+
+    const filter = (pattern: string, option: object) => vexutils.filterOption(pattern, option)
+    
+    return {
+      options,
+      filter,
+      dropdownVisibleChange
+    }
+  }
+})
+</script>
+<style lang="less" scoped>
+.formItem-select-multiple {
+  padding: 4px 0;
+}
+</style>

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

@@ -0,0 +1,34 @@
+<template>
+    <NInput
+      type="textarea"
+      v-model:value="item.useFormValue"
+      :ref="`textarea-${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 : 500"
+      :rows="item.initialize_high || 3"
+    >
+    </NInput>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+import { NInput } from 'naive-ui'
+import editFormProps from '../editFormProps'
+
+export default defineComponent({
+  name: 'editTextarea',
+  components: {
+    NInput,
+  },
+  props: {
+    ...editFormProps
+  },
+  setup (props, { attrs, slots, emit }) {
+    
+  }
+})
+</script>
+<style lang="less" scoped></style>

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

@@ -0,0 +1,42 @@
+<template>
+  <NTimePicker
+    v-model:value="item.useFormValue"
+    :ref="'timePicker-' + item.val_key"
+    :placeholder="item.placeholder || ''"
+    :disabled="item.is_edit == 0"
+    :is-hour-disabled="(hour: number) => disabledHours(item, 'h')"
+    :is-minute-disabled="(minute: number) => disabledHours(item, 'm')"
+    :is-second-disabled="(second: number) => disabledHours(item, 's')"
+    :clearable="item.is_empty == 0"
+    :format="handlerGetDateType(item)"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+import { NTimePicker } 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: {
+    NTimePicker
+  },
+  props: {
+    ...editFormProps
+  },
+  emits: ['hanldeFromBlur'],
+  setup (props, { attrs, slots, emit }) {
+    const { open } = useItemDefault(props, emit)
+
+    return {
+      handlerGetDateType,
+      ...useDateType(open)
+    }
+  }
+})
+</script>

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

@@ -0,0 +1,91 @@
+const editFormProps = {
+  defaultValue: {
+    type: Object,
+    default: () => {
+      return {};
+    }
+  },
+
+  // 表单排列方式 'horizontal' / 水平|'vertical'|'inline'
+  propsFormLayout: {
+    type: String,
+    default: 'vertical'
+  },
+
+  item: {
+    type: Object,
+    default: () => {
+      return {};
+    }
+  },
+
+  formFieldList: {
+    type: Array,
+    default: () => []
+  },
+
+  form: {
+    type: Object,
+    default: () => {
+      return {};
+    }
+  },
+
+  cacheForm: {
+    type: Object,
+    default: () => {
+      return {};
+    }
+  },
+
+  formStyle: {
+    type: Object,
+    default: () => ({})
+  },
+
+  showLable: {
+    type: Boolean,
+    default: true
+  },
+
+  handleFormatSubmit: Function,
+
+  formFieldObj: {
+    type: Object,
+    default: () => {
+      return {};
+    }
+  },
+
+  defaultFieldList: {
+    type: Array,
+    default: () => []
+  },
+
+  shortcutFieldsList: {
+    type: Array,
+    default: () => []
+  },
+  isOpenShortcut: {
+    type: Boolean,
+    default: false
+  },
+  layoutForm: {
+    type: Boolean,
+    default: false
+  },
+
+  dbParams: {
+    type: Object
+  },
+  styleSetting: {
+    type: Object,
+    default: () => {}
+  },
+  cacheUniqueKey: {
+    type: Object,
+    default: () => ({})
+  }
+};
+
+export default editFormProps;

package/packages/big-table/src/components/edit-form/edit-component/register-com.ts

@@ -0,0 +1,18 @@
+const requireComponent = import.meta.globEager("./edit.*?\.(vue|ts)$/");
+
+let cmps: any= {};
+Object.values(requireComponent).forEach(cmp => {
+  cmps[cmp.name] = cmp;
+})  
+
+console.log(cmps, "cmps");
+export default {
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {
+  },
+  components: cmps
+};
+ 

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

@@ -0,0 +1,79 @@
+import type { CmpElement } from '../interface'
+
+const configData = {
+  comTypeMap: {
+    "INPUT": "editInput",
+    "DIGITAL": "editDigital",
+    "TEXTAREA": "editTextarea",
+    "RADIO": "editSelect",
+    "RADIO_BLOCK": "editSelect",
+    "CHECKBOX_BLOCK": "editSelectMultiple",
+    "CHECKBOX": "editSelectMultiple",
+    "SEARCH": "editSearch",
+    "SEARCH_MORE": "editSearchMore",
+    "DATE": "editDatePicker",
+    "DATE-INPUT": "editDatePicker", // 旧版兼容字段
+    "TIME-INPUT": "editDatePicker",
+    "DATETIME-INPUT": "editDatePicker", // 旧版兼容字段
+    "SELECT": "editSelect",
+    "PHONE_TYPE": "editSelect",
+    "IDCARD_TYPE": "editSelect",
+    "editMonthPicker": "editMonthPicker",
+    "editTimePicker": "editTimePicker",
+    "editDatePicker": "editDatePicker", // 旧版兼容字段
+    "editSelect": "editSelect",
+    "editInputPassword": "editInputPassword",
+    "editSelectMultiple": "editSelectMultiple",
+    "MAP": "editInput",
+    "ICON": "editInput",
+    "UPPICTURE": "editInput",
+    "LEVEL_SEARCH_CASCADE2": "editInput",
+    "LABEL": "editInput",
+    "GUAGE": "editInput",
+    "SLIDER_COMPONENT": "editInput",
+    "SWITCH_COMPONENT": "editInput",
+    "AGE_JSON": "editInput",
+    "AGE": "editInput"
+  },
+  getComName(v: CmpElement) {
+    const { isMonthPicker_com, isDate_com, isTimePicker_com, isSelect_com, isPassword_com, comTypeMap } = this;
+
+    if (isDate_com(v.html_type)) {
+      if (isMonthPicker_com(v)) return "editMonthPicker";
+      if (isTimePicker_com(v)) return "editTimePicker";
+      return "editDatePicker";
+    }
+
+    if (isSelect_com(v)) return "editSelect";
+    if (isPassword_com(v)) return "editInputPassword";
+
+    const res = comTypeMap[v.html_type];
+    if (res) {
+      return res;
+    }
+
+    return "editInput";
+  },
+
+  isMonthPicker_com(v: CmpElement) {
+    return v.date_format && v.date_format.replace(/yyyy-MM/gi, "YYYY-MM") == "YYYY-MM";
+  },
+
+  isDate_com(key: string) {
+    return key === "DATE" || key === "DATE-INPUT" || key === "DATETIME-INPUT";
+  },
+
+  isTimePicker_com(v: CmpElement) {
+    return String(v.html_type) == "TIME-INPUT" || v.date_format == "HH:mm:ss" || v.date_format == "HH:mm";
+  },
+
+  isSelect_com(v: CmpElement) {
+    return ["SELECT", "PHONE_TYPE", "IDCARD_TYPE"].includes(v.html_type);
+  },
+
+  isPassword_com(v: CmpElement) {
+    return (v?.validate?.obj_type || "") === "password";
+  }
+};
+
+export default configData;