From 90c84f7521d4979b2e40965e7255e196d07d9e75 Mon Sep 17 00:00:00 2001 From: zs <zhousong@weben-smart.com> Date: 周二, 13 5月 2025 11:21:27 +0800 Subject: [PATCH] Merge branch 'master' of http://222.71.245.114:9086/r/HIA24016N_PipeLineDemo --- Weben_CMS专用代码生成器/Weben_CMS_TemplateDemo/templatedemo_web/src/widgets/WmsMaterial/Views/Pages/Dialog/WmsMaterialQueryDrawer/WmsMaterialQueryDrawer.tsx | 6 Weben_CMS专用代码生成器/Weben_CMS_TemplateDemo/templatedemo_web/src/components/DyFormForHighQuery/DyFormForHighQuery.tsx | 245 +++++++++++++++++++++++++++++++++++ Weben_CMS专用代码生成器/Weben_CMS_TemplateDemo/templatedemo_web/src/utils/commonOptionConstants.js | 5 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/components/DyFormForHighQuery/DyFormForHighQueryOptions.js | 19 ++ Weben_CMS专用代码生成器/Weben_CMS_TemplateDemo/templatedemo_web/src/widgets/WmsMaterial/Controllers/WmsMaterialQueryDrawer.tsx | 41 +++++ 7 files changed, 390 insertions(+), 6 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..aea115f --- /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> + 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/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..1d2d888 --- /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,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/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/DyFormForHighQueryOptions.js" "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/DyFormForHighQueryOptions.js" new file mode 100644 index 0000000..e70f08b --- /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/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/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/utils/commonOptionConstants.js" "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/utils/commonOptionConstants.js" new file mode 100644 index 0000000..5bb488c --- /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/utils/commonOptionConstants.js" @@ -0,0 +1,5 @@ +// 鏄� 鍚� + export const BOOLEAN_OPTIONS = [ + { label: '鏄�', value: true }, + { label: '鍚�', value: false }, + ]; 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..7244d18 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" @@ -14,6 +14,15 @@ import isEqual from 'lodash/isEqual' import { ConfirmBox } from '@/components/ConfirmBox/ConfirmBox' import { cloneDeep } from 'lodash' +// 寮曞叆鍏叡閫夐」閰嶇疆 +import { + FILTER_MODE_OPTIONS_STRING, + FILTER_MODE_OPTIONS_NUM, + FILTER_MODE_OPTIONS_BOOL +} from '@/components/DyFormForHighQuery/DyFormForHighQueryOptions'; +import { + BOOLEAN_OPTIONS +} from '@/utils/commonOptionConstants'; export const useWmsMaterialQueryDrawer = (props: any, ctx?: any) => { const wmsMaterialDrawer = injectModel<WmsMaterialDrawer>('WmsMaterialDrawer') @@ -84,6 +93,12 @@ el: 'input', //disabled: disabled, placeholder: '璇疯緭鍏ョ墿鏂欑紪鐮侊紙鍞竴鏍囪瘑锛�', + highSelectAttrs:{ + prop: 'materialCode_FilterMode', + el: 'select', + placeholder: '璇烽�夋嫨', + options:FILTER_MODE_OPTIONS_STRING, + } }, { label: '鏄惁鏈夋晥鐗╂枡', @@ -91,7 +106,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,11 +115,18 @@ 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: '鏁伴噺', prop: 'num', + highSelectAttrs:{ + prop: 'num_FilterMode', + el: 'select', + placeholder: '璇烽�夋嫨', + options:FILTER_MODE_OPTIONS_NUM, + }, el: (props: any, { attrs }: SetupContext) => { return h(inputNumber, { ...props, @@ -297,7 +320,7 @@ el: 'select', //disabled: disabled, placeholder: '璇疯緭鍏ユ槸鍚︾鐢�', - options: [{label: '鏄�',value: true}, {label: '鍚�',value: false}] + options:BOOLEAN_OPTIONS }, { label: '鎵╁睍灞炴��', @@ -309,6 +332,7 @@ { label: '鍒涘缓鏃堕棿', prop: 'creationTime', + isDateControl: true, // 鏄惧紡鏍囪涓烘棩鏈熸帶浠� el: (props: any, { attrs }: SetupContext) => { return h(dateTimePickerRange, { ...props, @@ -323,6 +347,7 @@ { label: '淇敼鏃堕棿', prop: 'lastModificationTime', + isDateControl: true, // 鏄惧紡鏍囪涓烘棩鏈熸帶浠� el: (props: any, { attrs }: SetupContext) => { return h(dateTimePickerRange, { ...props, @@ -360,8 +385,10 @@ return check } const commonGetFormData=()=>{ + //alert(formData.value.materialCode_FilterMode) const data = { materialCode: formData.value.materialCode || '', + materialCode_FilterMode: formData.value.materialCode_FilterMode || '', isValid: formData.value.isValid || '', isSelfMade: formData.value.isSelfMade || '', num: formData.value.num || '', @@ -407,10 +434,17 @@ ctx.emit('confirmQuery', data) } /** + * 閲嶇疆鍏叡select鏌ヨ + */ + const onResetForHighSelect = async () => { + formData.value.materialCode_FilterMode = 1 + } + /** * 閲嶇疆鏌ヨ */ const onReset = async () => { formData.value = {} + onResetForHighSelect();//閲嶇疆鍏叡select鏌ヨ formData.value.MaterialCode = '' formData.value.IsValid = '' formData.value.IsSelfMade = '' @@ -478,6 +512,7 @@ } commonQueryEnumForFrom() + onResetForHighSelect();//閲嶇疆鍏叡select鏌ヨ /** * 寮圭獥鎵撳紑鑾峰彇璇︽儏 */ 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/Views/Pages/Dialog/WmsMaterialQueryDrawer/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/Views/Pages/Dialog/WmsMaterialQueryDrawer/WmsMaterialQueryDrawer.tsx" index df1e463..bf58443 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/Views/Pages/Dialog/WmsMaterialQueryDrawer/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/Views/Pages/Dialog/WmsMaterialQueryDrawer/WmsMaterialQueryDrawer.tsx" @@ -5,7 +5,7 @@ import BaseQueryDrawer from '@/components/BaseQueryDrawer/BaseQueryDrawer' import styles from './WmsMaterialQueryDrawer.module.scss' import { useWmsMaterialQueryDrawer } from '../../../../Controllers/WmsMaterialQueryDrawer.tsx' -import DyForm from '@/components/DyForm/DyForm' +import DyFormForHighQuery from '@/components/DyFormForHighQuery/DyFormForHighQuery' // @ts-ignore export default defineComponent<{ @@ -59,12 +59,12 @@ before-close={onClose} onClose={onClose} > - <DyForm + <DyFormForHighQuery ref={formRef} formData={formData.value} labelWidth="106px" formItemProps={formItems} - ></DyForm> + ></DyFormForHighQuery> </BaseQueryDrawer> ) }, -- Gitblit v1.9.3