公共前端组件

schangxiang@126.com

2025-05-13 dca77df040a4339faf8498d1cf230456d4afd272

公共前端组件

 CommonDLL/¹«¹²Ç°¶Ë×é¼þ/src/components/BaseQueryDrawer/BaseQueryDrawer.module.scss

 CommonDLL/¹«¹²Ç°¶Ë×é¼þ/src/components/BaseQueryDrawer/BaseQueryDrawer.tsx

 CommonDLL/¹«¹²Ç°¶Ë×é¼þ/src/components/DyFormForHighQuery/DyFormForHighQuery.d.ts

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,39 @@
import { VNode, Component, DefineComponent } from 'vue'

export interface OptionItemType {
  label?: string
  description?: string
  name?: string
  value: string | number
}

export interface FormItemPropType {
  prop?: string | Ref<string>
  highSelectProp?: string | Ref<string>
  label?: String | Ref<string>
  rules?: any[] | Ref<any[]>
  disabled?: boolean | Ref<boolean>
  isDateControl?: boolean | Ref<boolean>
  placeholder?: string | Ref<string>
  type?: string | Ref<string>
  width?: string | Ref<string>
  el?: string | Component | DefineComponent | Ref<string>
  options?: OptionItemType[] | any[] | Ref<any>
  highSelectAttrs?: object | Ref<object>
  isTitle?: boolean
  title?:string | Component
  [key: string]: any | Ref<string>
}

export interface FormPropsType {
  formData: { [key: string]: any }
  formItemProps: FormItemPropType[]
  [key: string]: any
}

export interface PropsType {
  formItemProps: FormItemPropType[]
  formData: { [key: string]: any }
  labelWidth: string
  [key: string]: any
}

 CommonDLL/¹«¹²Ç°¶Ë×é¼þ/src/components/DyFormForHighQuery/DyFormForHighQuery.module.scss

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,41 @@
.formStyle {
  .formItem {
    // ç§»é™¤å›ºå®šå®½åº¦é™åˆ¶
    width: auto !important;
    margin-right: 0 !important;
  }
  
  .formControl {
    flex: 1; // è®©æŽ§ä»¶å æ®å‰©ä½™ç©ºé—´
    min-width: 0; // å…è®¸æŽ§ä»¶æ”¶ç¼©
  }

  .formItemLabel {
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
    flex: 0 0 auto;
    font-size: var(--cs-form-label-font-size);
    color: var(--cs-text-color-regular);
    height: 32px;
    line-height: 32px;
    padding: 0 12px 0 0;
    box-sizing: border-box;
    > img {
      margin-left: 10px;
    }
  }
  
  :global(.cs-select) {
    width: 100%;
  }
  
  // ç§»é™¤å›ºå®šå®½åº¦è®¾ç½®
  :global(.cs-form--inline .cs-form-item) {
    width: auto !important;
  }
  
  :global(.cs-form--inline .cs-form-item:nth-last-of-type(2n)) {
    margin-right: 0 !important;
  }
}

 CommonDLL/¹«¹²Ç°¶Ë×é¼þ/src/components/DyFormForHighQuery/DyFormForHighQuery.tsx

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,245 @@
// import { ElInput } from "element-plus";
import {
  defineComponent,
  PropType,
  ref,
  Ref,
  SetupContext,
  computed,
  unref,
  markRaw,
  DefineComponent,
} from 'vue'
import styles from './DyFormForHighQuery.module.scss'
import ElInput from 'element-plus/es/components/input/index'
import Option from '@/components/Select/Option'
import Select from '@/components/Select/Select'
import SelectInput from '@/components/SelectInput/SelectInput'
import type { FormInstance } from 'element-plus'
import Icon from '../Icon/Icon'
import {
  FormPropsType,
  FormItemPropType,
  PropsType,
  OptionItemType,
} from './DyFormForHighQuery.d'
import Variable from '../Variable/Variable'
import Title from '../Title/Title'
import TextareaFlow from '../Flow/Flow'
import get from 'lodash/get'
import set from 'lodash/set'

const formItemElementMap = markRaw<Record<string, any>>({
  input: ElInput,
  select: Select,
  selectInput: SelectInput,
  variable: Variable,
  textareaFlow: TextareaFlow,
})

const Type: Record<string, any> = {
  select: 'select',
}
export default defineComponent<FormPropsType>({
  //@ts-ignore
  name: '动态表单',
  props: {
    labelWidth: {
      type: String,
      default: '100px',
    },
    labelPosition: {
      type: String,
      default: 'left',
    },
    formData: {
      type: Object as PropType<{ [key: string]: any }>,
      default: () => ({}),
    },
    formItemProps: {
      type: Array,
      default: () => [],
    },
    inLine: {
      type: Boolean,
      default: false,
    },
  },
  setup(props: PropsType, { attrs, emit, expose }: SetupContext) {
    const formRef = ref<FormInstance>()
    const form: any = computed({
      get() {
        return props.formData
      },
      set(v) {
        emit('update:formData', v)
      },
    })

    const currentWidgetModel = computed(() => {
      return (path: string) => {
        return get(form.value, path)
      }
    })

    const validate = () => {
      if (!formRef.value) return false
      return new Promise((resolve, reject) => {
        formRef.value?.validate((valid: boolean) => {
          if (valid) {
            resolve(true)
          } else {
            reject(false)
          }
        })
      })
    }

    const resetForm = () => {
      if (!formRef.value) return false
      formRef.value.resetFields()
    }

    const formItemProps = computed(() => {
      return props.formItemProps || []
    })

    expose({ validate, resetForm })

    const FormRender: any = ($props: any) => {
      const item: FormItemPropType = $props.item
      const options = $props.item.options || []
      if (item.el && Type[item.el as string]) {
        return options.map((el: OptionItemType) => (
          <Option
            label={el.label || el.description || el.name}
            value={el.value}
          ></Option>
        ))
      }
      return null
    }
    const FormRenderForHighSelectOptions: any = ($props: any) => {
      const item: FormItemPropType = $props.item
      const options = $props.item.highSelectAttrs?.options || []
      if (1===1) {
        return options.map((el: OptionItemType) => (
          <Option
            label={el.label || el.description || el.name}
            value={el.value}
          ></Option>
        ))
      }
      return null
    }

    const onUpdateModelValue = (v: string | number, prop: string) => {
      set(form.value, prop, v)
    }

    return () => {
      return (
        <div class={styles.formStyle}>
          <el-form
            labelPosition={props.labelPosition}
            labelWidth={props.labelWidth}
            model={form.value}
            ref={formRef}
            inline={props.inLine}
          >
            {formItemProps.value.map(
              (item: FormItemPropType, index: number) => {
                if (item.isTitle) {
                  if (typeof item.title === 'string') {
                    return (
                      <Title style="margin-bottom: 10px">{item.title}</Title>
                    )
                  }
                  return item.title
                }

                const itemProps: FormItemPropType = {}
                Object.entries(item).forEach(([key, value]) => {
                  itemProps[key] = unref(value)
                })

                const el =
                  typeof itemProps.el === 'string'
                    ? formItemElementMap[itemProps.el]
                    : itemProps.el || null
                const Component = el
                const el2 =
                   formItemElementMap['select'];
                const ComponentForHighSelect = el2
                return Component && !item.isHide ? (
                
                  <el-form-item
                    label={itemProps.label}
                    prop={itemProps.prop}
                    rules={itemProps.rules}
                    key={itemProps.prop}
                    vSlots={
                      itemProps.labelIcon
                        ? {
                            label: () => (
                              <label class={styles.formitemPropsLabel}>
                                {itemProps.label}
                                <Icon icon={itemProps.labelIcon} />
                              </label>
                            ),
                          }
                        : null
                    }
                  >
                   {/* æ·»åŠ çš„比较操作符选择器 */}
                   {/* ä½¿ç”¨flex布局让三个元素在同一行 */}
                   <div class="flex items-center w-full" style="width:100%">
                  {/* <el-select
                  size="small"
                  style="margin-right: 8px; min-width: 10px;"
                >
                  <el-option label="等于" value="2" />
                  <el-option label="不等于" value="8" />
                </el-select>  */}
                 {/* å½“组件类型不是日期控件时显示ComponentForHighSelect */}
                 {(!itemProps.isDateControl && (
  // ComponentForHighSelect çš„渲染代码
  <ComponentForHighSelect style="width:150px;"
                   {...itemProps.highSelectAttrs}
                     modelValue={currentWidgetModel.value(itemProps.highSelectAttrs?.prop || '')}
                     onUpdate:modelValue={(val: string | number) =>
                        onUpdateModelValue(val, itemProps.highSelectAttrs?.prop || '')
                      }>
                  <FormRenderForHighSelectOptions item={itemProps} />
                </ComponentForHighSelect>
))}
 {/* æ—¥æœŸæŽ§ä»¶æ—¶çš„占位元素 */}
{itemProps.isDateControl && <span style="width:150px;margin-right:8px;"></span>}
                
                      &nbsp; 
                    <Component
                      style={{
                        width: itemProps.width, // é»˜è®¤å æ»¡å‰©ä½™å®½åº¦
                        // width: itemProps.width , // é»˜è®¤å æ»¡å‰©ä½™å®½åº¦
                        height: itemProps.height,
                      }}
                      {...itemProps}
                      // v-model={form.value[itemProps.prop as keyof any]}
                      modelValue={currentWidgetModel.value(itemProps.prop)}
                      onUpdate:modelValue={(val: string | number) =>
                        onUpdateModelValue(val, itemProps.prop)
                      }
                    >
                      <FormRender item={itemProps} />
                    </Component>
                    </div>
                  </el-form-item>
                ) : null
              }
            )}
          </el-form>
        </div>
      )
    }
  },
})

 CommonDLL/¹«¹²Ç°¶Ë×é¼þ/src/components/DyFormForHighQuery/DyFormForHighQueryOptions.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,19 @@
// å­—符串类查询
export const FILTER_MODE_OPTIONS_STRING = [
    { label: '模糊查询', value: 1 },
    { label: '精准查询', value: 2 },
  ];
  // æ•°å­—类查询
export const FILTER_MODE_OPTIONS_NUM = [
    { label: '精准查询', value: 2 },
    { label: '大于等于', value: 3 },
    { label: '小于等于', value: 4 },
    { label: '大于', value: 5 },
    { label: '小于', value: 6 },
    { label: '不等于', value: 7 },
  ];
    // bool查询
export const FILTER_MODE_OPTIONS_BOOL = [
    { label: '精准查询', value: 2 },
    { label: '不等于', value: 7 },
  ];

 CommonDLL/¹«¹²Ç°¶Ë×é¼þ/src/utils/commonOptionConstants.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,11 @@
// æ˜¯ å¦(高级查询用)
  export const BOOLEAN_OPTIONS = [
    { label: '是', value: 'true'},
    { label: '否', value: 'false' },
  ];

  // æ˜¯ å¦(新增、修改界面专用)
  export const BOOLEAN_OPTIONS_AddEdit = [
    { label: '是', value: true},
    { label: '否', value: false },
  ];