Merge branch 'master' of http://222.71.245.114:9086/r/HIA24016N_PipeLineDemo

zs

2025-05-13 90c84f7521d4979b2e40965e7255e196d07d9e75

Merge branch 'master' of http://222.71.245.114:9086/r/HIA24016N_PipeLineDemo

 Weben_CMSרÓôúÂëÉú³ÉÆ÷/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
}

 Weben_CMSרÓôúÂëÉú³ÉÆ÷/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;
  }
}

 Weben_CMSרÓôúÂëÉú³ÉÆ÷/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>}
                
                      &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>
      )
    }
  },
})

 Weben_CMSרÓôúÂëÉú³ÉÆ÷/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 },
  ];

 Weben_CMSרÓôúÂëÉú³ÉÆ÷/Weben_CMS_TemplateDemo/templatedemo_web/src/utils/commonOptionConstants.js

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

 Weben_CMSרÓôúÂëÉú³ÉÆ÷/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查询 
  /** 
   * å¼¹çª—打开获取详情 
   */ 

 Weben_CMSרÓôúÂëÉú³ÉÆ÷/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> 
    ) 
  },