From af29ed5e850186b1e89f764b167a1318bfb401a3 Mon Sep 17 00:00:00 2001
From: schangxiang@126.com <schangxiang@126.com>
Date: 周一, 12 5月 2025 21:56:15 +0800
Subject: [PATCH] 增加 高级查询组件
---
Weben_CMS专用代码生成器/Weben_CMS_TemplateDemo/templatedemo_web/src/components/DyFormForHighQuery/DyFormForHighQuery.tsx | 239 +++++++++++++++++++++++++++++++++++++++
Weben_CMS专用代码生成器/Weben_CMS_TemplateDemo/templatedemo_web/src/components/DyFormForHighQuery/DyFormForHighQuery.module.scss | 41 ++++++
Weben_CMS专用代码生成器/Weben_CMS_TemplateDemo/templatedemo_web/src/components/DyFormForHighQuery/DyFormForHighQuery.d.ts | 39 ++++++
Weben_CMS专用代码生成器/Weben_CMS_TemplateDemo/templatedemo_web/src/widgets/WmsMaterial/Controllers/WmsMaterialQueryDrawer.tsx | 13 +
4 files changed, 330 insertions(+), 2 deletions(-)
diff --git "a/Weben_CMS\344\270\223\347\224\250\344\273\243\347\240\201\347\224\237\346\210\220\345\231\250/Weben_CMS_TemplateDemo/templatedemo_web/src/components/DyFormForHighQuery/DyFormForHighQuery.d.ts" "b/Weben_CMS\344\270\223\347\224\250\344\273\243\347\240\201\347\224\237\346\210\220\345\231\250/Weben_CMS_TemplateDemo/templatedemo_web/src/components/DyFormForHighQuery/DyFormForHighQuery.d.ts"
new file mode 100644
index 0000000..37a99ee
--- /dev/null
+++ "b/Weben_CMS\344\270\223\347\224\250\344\273\243\347\240\201\347\224\237\346\210\220\345\231\250/Weben_CMS_TemplateDemo/templatedemo_web/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>
+ placeholder?: string | Ref<string>
+ type?: string | Ref<string>
+ width?: string | Ref<string>
+ el?: string | Component | DefineComponent | Ref<string>
+ options?: OptionItemType[] | any[] | Ref<any>
+ highSelectOptions?: 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/Weben_CMS\344\270\223\347\224\250\344\273\243\347\240\201\347\224\237\346\210\220\345\231\250/Weben_CMS_TemplateDemo/templatedemo_web/src/components/DyFormForHighQuery/DyFormForHighQuery.module.scss" "b/Weben_CMS\344\270\223\347\224\250\344\273\243\347\240\201\347\224\237\346\210\220\345\231\250/Weben_CMS_TemplateDemo/templatedemo_web/src/components/DyFormForHighQuery/DyFormForHighQuery.module.scss"
new file mode 100644
index 0000000..0fff059
--- /dev/null
+++ "b/Weben_CMS\344\270\223\347\224\250\344\273\243\347\240\201\347\224\237\346\210\220\345\231\250/Weben_CMS_TemplateDemo/templatedemo_web/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/Weben_CMS\344\270\223\347\224\250\344\273\243\347\240\201\347\224\237\346\210\220\345\231\250/Weben_CMS_TemplateDemo/templatedemo_web/src/components/DyFormForHighQuery/DyFormForHighQuery.tsx" "b/Weben_CMS\344\270\223\347\224\250\344\273\243\347\240\201\347\224\237\346\210\220\345\231\250/Weben_CMS_TemplateDemo/templatedemo_web/src/components/DyFormForHighQuery/DyFormForHighQuery.tsx"
new file mode 100644
index 0000000..1896216
--- /dev/null
+++ "b/Weben_CMS\344\270\223\347\224\250\344\273\243\347\240\201\347\224\237\346\210\220\345\231\250/Weben_CMS_TemplateDemo/templatedemo_web/src/components/DyFormForHighQuery/DyFormForHighQuery.tsx"
@@ -0,0 +1,239 @@
+// import { ElInput } from "element-plus";
+import {
+ defineComponent,
+ PropType,
+ ref,
+ Ref,
+ SetupContext,
+ computed,
+ unref,
+ markRaw,
+ DefineComponent,
+} from 'vue'
+import styles from './DyForm.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.highSelectOptions || []
+ 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 Component2 = 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> */}
+
+ <Component2 style="width:150px;"
+ {...itemProps.highSelectAttrs}
+ modelValue={currentWidgetModel.value(itemProps.highSelectAttrs)}
+ onUpdate:modelValue={(val: string | number) =>
+ onUpdateModelValue(val, itemProps.highSelectAttrs)
+ }>
+ <FormRenderForHighSelectOptions item={itemProps} />
+ </Component2>
+
+ <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/Weben_CMS\344\270\223\347\224\250\344\273\243\347\240\201\347\224\237\346\210\220\345\231\250/Weben_CMS_TemplateDemo/templatedemo_web/src/widgets/WmsMaterial/Controllers/WmsMaterialQueryDrawer.tsx" "b/Weben_CMS\344\270\223\347\224\250\344\273\243\347\240\201\347\224\237\346\210\220\345\231\250/Weben_CMS_TemplateDemo/templatedemo_web/src/widgets/WmsMaterial/Controllers/WmsMaterialQueryDrawer.tsx"
index 301eb74..dcb33ed 100644
--- "a/Weben_CMS\344\270\223\347\224\250\344\273\243\347\240\201\347\224\237\346\210\220\345\231\250/Weben_CMS_TemplateDemo/templatedemo_web/src/widgets/WmsMaterial/Controllers/WmsMaterialQueryDrawer.tsx"
+++ "b/Weben_CMS\344\270\223\347\224\250\344\273\243\347\240\201\347\224\237\346\210\220\345\231\250/Weben_CMS_TemplateDemo/templatedemo_web/src/widgets/WmsMaterial/Controllers/WmsMaterialQueryDrawer.tsx"
@@ -84,6 +84,13 @@
el: 'input',
//disabled: disabled,
placeholder: '璇疯緭鍏ョ墿鏂欑紪鐮侊紙鍞竴鏍囪瘑锛�',
+ highSelectOptions: [{label: '鐪�',value: true}, {label: '鍋囧晩',value: false}],
+ highSelectAttrs:{
+ prop: 'materialCodexxx',
+ el: 'select',
+ placeholder: '璇烽�夋嫨',
+ options:[]
+ }
},
{
label: '鏄惁鏈夋晥鐗╂枡',
@@ -91,7 +98,8 @@
el: 'select',
//disabled: disabled,
placeholder: '璇疯緭鍏ユ槸鍚︽湁鏁堢墿鏂�',
- options: [{label: '鏄�',value: true}, {label: '鍚�',value: false}]
+ options: [{label: '鏄�',value: true}, {label: '鍚�',value: false}],
+ selectOptions: [{label: '鐪�',value: true}, {label: '鍋囧晩',value: false}]
},
{
label: '鏄惁鑷骇',
@@ -99,7 +107,8 @@
el: 'select',
//disabled: disabled,
placeholder: '璇疯緭鍏ユ槸鍚﹁嚜浜�',
- options: [{label: '鏄�',value: true}, {label: '鍚�',value: false}]
+ options: [{label: '鏄�',value: true}, {label: '鍚�',value: false}] ,
+ selectOptions: [{label: '鐪�',value: true}, {label: '鍋囧晩',value: false}]
},
{
label: '鏁伴噺',
--
Gitblit v1.9.3