From dca77df040a4339faf8498d1cf230456d4afd272 Mon Sep 17 00:00:00 2001
From: schangxiang@126.com <schangxiang@126.com>
Date: 周二, 13 5月 2025 13:57:09 +0800
Subject: [PATCH] 公共前端组件
---
CommonDLL/公共前端组件/src/components/DyFormForHighQuery/DyFormForHighQuery.tsx | 245 ++++++++++++++++++++++++++++++++++++++++
CommonDLL/公共前端组件/src/components/BaseQueryDrawer/BaseQueryDrawer.module.scss | 0
CommonDLL/公共前端组件/src/components/BaseQueryDrawer/BaseQueryDrawer.tsx | 0
CommonDLL/公共前端组件/src/components/DyFormForHighQuery/DyFormForHighQuery.module.scss | 41 ++++++
CommonDLL/公共前端组件/src/components/DyFormForHighQuery/DyFormForHighQuery.d.ts | 39 ++++++
CommonDLL/公共前端组件/src/components/DyFormForHighQuery/DyFormForHighQueryOptions.js | 19 +++
CommonDLL/公共前端组件/src/utils/commonOptionConstants.js | 11 +
7 files changed, 355 insertions(+), 0 deletions(-)
diff --git "a/CommonDLL/\345\205\254\345\205\261\345\211\215\347\253\257\347\273\204\344\273\266/BaseQueryDrawer/BaseQueryDrawer.module.scss" "b/CommonDLL/\345\205\254\345\205\261\345\211\215\347\253\257\347\273\204\344\273\266/src/components/BaseQueryDrawer/BaseQueryDrawer.module.scss"
similarity index 100%
rename from "CommonDLL/\345\205\254\345\205\261\345\211\215\347\253\257\347\273\204\344\273\266/BaseQueryDrawer/BaseQueryDrawer.module.scss"
rename to "CommonDLL/\345\205\254\345\205\261\345\211\215\347\253\257\347\273\204\344\273\266/src/components/BaseQueryDrawer/BaseQueryDrawer.module.scss"
diff --git "a/CommonDLL/\345\205\254\345\205\261\345\211\215\347\253\257\347\273\204\344\273\266/BaseQueryDrawer/BaseQueryDrawer.tsx" "b/CommonDLL/\345\205\254\345\205\261\345\211\215\347\253\257\347\273\204\344\273\266/src/components/BaseQueryDrawer/BaseQueryDrawer.tsx"
similarity index 100%
rename from "CommonDLL/\345\205\254\345\205\261\345\211\215\347\253\257\347\273\204\344\273\266/BaseQueryDrawer/BaseQueryDrawer.tsx"
rename to "CommonDLL/\345\205\254\345\205\261\345\211\215\347\253\257\347\273\204\344\273\266/src/components/BaseQueryDrawer/BaseQueryDrawer.tsx"
diff --git "a/CommonDLL/\345\205\254\345\205\261\345\211\215\347\253\257\347\273\204\344\273\266/src/components/DyFormForHighQuery/DyFormForHighQuery.d.ts" "b/CommonDLL/\345\205\254\345\205\261\345\211\215\347\253\257\347\273\204\344\273\266/src/components/DyFormForHighQuery/DyFormForHighQuery.d.ts"
new file mode 100644
index 0000000..aea115f
--- /dev/null
+++ "b/CommonDLL/\345\205\254\345\205\261\345\211\215\347\253\257\347\273\204\344\273\266/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
+}
diff --git "a/CommonDLL/\345\205\254\345\205\261\345\211\215\347\253\257\347\273\204\344\273\266/src/components/DyFormForHighQuery/DyFormForHighQuery.module.scss" "b/CommonDLL/\345\205\254\345\205\261\345\211\215\347\253\257\347\273\204\344\273\266/src/components/DyFormForHighQuery/DyFormForHighQuery.module.scss"
new file mode 100644
index 0000000..0fff059
--- /dev/null
+++ "b/CommonDLL/\345\205\254\345\205\261\345\211\215\347\253\257\347\273\204\344\273\266/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;
+ }
+}
\ No newline at end of file
diff --git "a/CommonDLL/\345\205\254\345\205\261\345\211\215\347\253\257\347\273\204\344\273\266/src/components/DyFormForHighQuery/DyFormForHighQuery.tsx" "b/CommonDLL/\345\205\254\345\205\261\345\211\215\347\253\257\347\273\204\344\273\266/src/components/DyFormForHighQuery/DyFormForHighQuery.tsx"
new file mode 100644
index 0000000..1d2d888
--- /dev/null
+++ "b/CommonDLL/\345\205\254\345\205\261\345\211\215\347\253\257\347\273\204\344\273\266/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>}
+
+
+ <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>
+ )
+ }
+ },
+})
diff --git "a/CommonDLL/\345\205\254\345\205\261\345\211\215\347\253\257\347\273\204\344\273\266/src/components/DyFormForHighQuery/DyFormForHighQueryOptions.js" "b/CommonDLL/\345\205\254\345\205\261\345\211\215\347\253\257\347\273\204\344\273\266/src/components/DyFormForHighQuery/DyFormForHighQueryOptions.js"
new file mode 100644
index 0000000..e70f08b
--- /dev/null
+++ "b/CommonDLL/\345\205\254\345\205\261\345\211\215\347\253\257\347\273\204\344\273\266/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 },
+ ];
diff --git "a/CommonDLL/\345\205\254\345\205\261\345\211\215\347\253\257\347\273\204\344\273\266/src/utils/commonOptionConstants.js" "b/CommonDLL/\345\205\254\345\205\261\345\211\215\347\253\257\347\273\204\344\273\266/src/utils/commonOptionConstants.js"
new file mode 100644
index 0000000..d09c6d6
--- /dev/null
+++ "b/CommonDLL/\345\205\254\345\205\261\345\211\215\347\253\257\347\273\204\344\273\266/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 },
+ ];
\ No newline at end of file
--
Gitblit v1.9.3