组件修改

schangxiang@126.com

2025-05-20 e92383f760f42050f55aa032c649814deb3b7752

组件修改

 HIAWms/hiawms_web/src/components/BaseQueryDrawer/BaseQueryDrawer.tsx

@@ -6,7 +6,7 @@
  [key: string]: any
}>({
  // @ts-ignore
  name: 'BaseDrawer',
  name: 'BaseQueryDrawer',
  props: {
    // é®ç½©æ˜¯å¦å¯ç‚¹å‡»
    clickable: {
@@ -49,6 +49,8 @@
        >
          <el-drawer
            // modal-class={props.clickable ? styles.modal : ''}
            //将抽屉强制挂载到 body å…ƒç´ ä¸Šï¼Œç¡®ä¿æ ·å¼éš”离和滚动行为正常，不受嵌套页面的影响
            append-to-body="true" 
            class={{
              [styles.informationDrawer]: true,
              // [styles.informationDrawerPosition]: props.clickable,

 HIAWms/hiawms_web/src/components/DyFormForHighQuery/DyFormForHighQuery.module.scss

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

  .formItemLabel {
    display: inline-flex;
    justify-content: flex-end;
@@ -25,17 +14,30 @@
      margin-left: 10px;
    }
  }
  
  :global(.cs-select) {
    width: 100%;
  }
  
  // ç§»é™¤å›ºå®šå®½åº¦è®¾ç½®
  :global(.cs-form--inline .cs-form-item) {
    width: auto !important;
    width: 46%;
  }
  
  :global(.cs-form--inline .cs-form-item:nth-last-of-type(2n)) {
    margin-right: 0 !important;
    margin-right: 0;
  }
}
  :global(.cs-date-editor) {
    width: 100%;
  }
}
.optionLabel {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.formitemPropsLabel {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.itemDistance {
  margin-bottom: 20px !important;
}

 HIAWms/hiawms_web/src/utils/myHighQueryUtils.ts

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,113 @@

//高级查询工具文件

 /**
 * ä¿å­˜å½“前高级查询数据，合并过滤后的数据并更新响应式查询对象
 * @param {Object} filteredData - è¿‡æ»¤åŽçš„查询数据对象，包含用户输入的查询条件
 * @param {Ref<Object>} _curHighQueryData - Vue响应式对象，存储当前完整的查询条件
 * @param {Ref<Object>} queryForm - Vue响应式对象，存储表单输入的查询条件
 * @param {Ref<string>} _searchFormInputAttrs - Vue响应式字符串，存储查询表单的输入属性配置
 * @returns {void}
 * @example
 * commonSaveCurHighQueryData(
 *   { name: 'John', age: 30 },
 *   ref({}),
 *   ref({ searchVal: '', searchVal_FilterMode: 'contains' }),
 *   ref('name,age,email')
 * );
 */
export const commonSaveCurHighQueryData = (filteredData, _curHighQueryData, queryForm, _searchFormInputAttrs) => {
  _curHighQueryData.value = { ..._curHighQueryData.value, ...filteredData };
  setValueForCurHighQueryData(_curHighQueryData, queryForm, _searchFormInputAttrs);
}

/**
 * ä¸ºå“åº”式查询数据对象设置基础查询值
 * @param {Ref<Object>} _curHighQueryData - Vue响应式对象，存储当前完整的查询条件
 * @param {Ref<Object>} queryForm - Vue响应式对象，存储表单输入的查询条件
 * @param {Ref<string>} _searchFormInputAttrs - Vue响应式字符串，存储查询表单的输入属性配置
 * @returns {void}
 * @example
 * setValueForCurHighQueryData(
 *   ref({}),
 *   ref({ searchVal: 'test', searchVal_FilterMode: 'equals' }),
 *   ref('name,age')
 * );
 * // _curHighQueryData.value å°†åŒ…含 searchVal, searchVal_FilterMode å’Œ str_searchFormInputAttrs
 */
export const setValueForCurHighQueryData = (_curHighQueryData, queryForm, _searchFormInputAttrs) => {
  _curHighQueryData.value.searchVal = queryForm.value.searchVal;
  _curHighQueryData.value.searchVal_FilterMode = queryForm.value.searchVal_FilterMode;
  _curHighQueryData.value.str_searchFormInputAttrs = _searchFormInputAttrs.value;
}

/**
 * åˆå§‹åŒ–查询表单，设置默认值
 * @param {Ref<Object>} queryForm - Vue响应式对象，存储表单输入的查询条件
 * @param {Ref<string>} _searchFormInputAttrs - Vue响应式字符串，存储查询表单的输入属性配置
 * @param {Array<Object>} arr - è¿‡æ»¤æ¨¡å¼é€‰é¡¹æ•°ç»„，每个选项包含value和label属性
 * @returns {void}
 * @example
 * initQueryForm(
 *   ref({}),
 *   ref('name,age'),
 *   [{ value: 'contains', label: '包含' }, { value: 'equals', label: '等于' }]
 * );
 * // queryForm.value å°†è¢«åˆå§‹åŒ–为 { searchVal: '', searchVal_FilterMode: 'contains', str_searchFormInputAttrs: 'name,age' }
 */
export const initQueryForm = (queryForm, _searchFormInputAttrs, arr) => {
  queryForm.value.searchVal = '';
  queryForm.value.searchVal_FilterMode = arr[0]?.value || '';
  queryForm.value.str_searchFormInputAttrs = _searchFormInputAttrs.value;
}

/**
 * èŽ·å–高级查询弹出框的查询值，过滤无效数据并组合完整查询条件
 * @param {Object} extraParams - é¢å¤–的查询参数对象，可能包含特殊查询条件
 * @param {Ref<Object>} queryForm - Vue响应式对象，存储表单输入的查询条件
 * @param {Ref<string>} _searchFormInputAttrs - Vue响应式字符串，存储查询表单的输入属性配置
 * @returns {Object} ç»„合后的有效查询数据对象
 * @example
 * const queryData = commonGetHighQueryForm(
 *   { status: 'active', category: 'books' },
 *   ref({ searchVal: 'javascript', searchVal_FilterMode: 'contains' }),
 *   ref('title,author')
 * );
 * // è¿”回 { status: 'active', category: 'books', searchVal: 'javascript', searchVal_FilterMode: 'contains', str_searchFormInputAttrs: 'title,author' }
 */
export const commonGetHighQueryForm = (extraParams, queryForm, _searchFormInputAttrs) => {
  // è¿‡æ»¤æŽ‰ undefined çš„值
  let filteredData = Object.assign(
    {},
    ...Object.entries(extraParams).map(([key, value]) =>
      value !== undefined ? { [key]: value } : {}
    )
  );
  // ç»„合模糊查询
  filteredData.searchVal = queryForm.value.searchVal;
  filteredData.searchVal_FilterMode = queryForm.value.searchVal_FilterMode;
  filteredData.str_searchFormInputAttrs = _searchFormInputAttrs.value;
  return filteredData;
}

/**
 * æ–°ç‰ˆçš„查询弹出框关闭方法，获取过滤数据并保存到响应式对象
 * @param {Object} extraParams - é¢å¤–的查询参数对象，可能包含特殊查询条件
 * @param {Ref<Object>} queryForm - Vue响应式对象，存储表单输入的查询条件
 * @param {Ref<string>} _searchFormInputAttrs - Vue响应式字符串，存储查询表单的输入属性配置
 * @param {Ref<Object>} _curHighQueryData - Vue响应式对象，存储当前完整的查询条件
 * @returns {Object} ç»„合后的有效查询数据对象
 * @example
 * const queryData = GetFilteredData(
 *   { type: 'article' },
 *   ref({ searchVal: 'news', searchVal_FilterMode: 'startsWith' }),
 *   ref('title,content'),
 *   ref({})
 * );
 * // è¿”回有效查询数据并更新 _curHighQueryData
 */
export const GetFilteredData = (extraParams, queryForm, _searchFormInputAttrs, _curHighQueryData) => {
  let filteredData = commonGetHighQueryForm(extraParams, queryForm, _searchFormInputAttrs);
  commonSaveCurHighQueryData(filteredData, _curHighQueryData, queryForm, _searchFormInputAttrs);
  return filteredData;
}    

 HIAWms/hiawms_web/src/utils/myformUtils.ts

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,102 @@

//表单工具文件
/**
 * é€šç”¨é«˜çº§æŸ¥è¯¢è¡¨å•æ•°æ®æ”¶é›†å‡½æ•°
 * @param {Array} formItems - è¡¨å•é…ç½®é¡¹æ•°ç»„
 * @param {Object} formData - è¡¨å•æ•°æ®å¯¹è±¡
 * @returns {Object} - æ”¶é›†çš„表单数据
 */
export const collectFormDataForHighQuery = (formItems, formData) => {
     const data = {}; 
   
  // éåŽ†è¡¨å•é…ç½®æ”¶é›†æ•°æ® 
  formItems.forEach(item => { 
    // æ”¶é›†åŸºç¡€å­—段 
    data[item.prop] = formData.value[item.prop] || ''; 
     
    // æ”¶é›†è¿‡æ»¤æ¨¡å¼å­—段 
    if (item.highSelectAttrs && item.highSelectAttrs.prop) { 
      const filterModeProp = item.highSelectAttrs.prop; 
      data[filterModeProp] = formData.value[filterModeProp] || ''; 
    } 
  }); 
   
  return data; 
  }

 /**
 * é‡ç½®é«˜çº§æŸ¥è¯¢çš„过滤模式
 * @param formItems - è¡¨å•é…ç½®é¡¹æ•°ç»„
 * @param formData - è¡¨å•æ•°æ®å¯¹è±¡
 */
 export const onResetForHighSelect = (formItems, formData) => {   
    // éåŽ†æ‰€æœ‰è¡¨å•å­—段   
    formItems.forEach(item => {   
      // æ£€æŸ¥å­—段是否有高级查询的过滤模式配置   
      if (item.highSelectAttrs && item.highSelectAttrs.prop) {   
        const filterModeProp = item.highSelectAttrs.prop;   
        const options = item.highSelectAttrs.options || [];   
     
        // å¦‚果存在选项，则设置为第一个选项的值   
        if (options.length > 0) {   
          // å‡è®¾é€‰é¡¹æ ¼å¼ä¸º { value, label } æˆ–类似结构   
          const firstValue = options[0].value !== undefined ? options[0].value : options[0];   
          formData.value[filterModeProp] = firstValue;   
        }   
      }   
    });   
}   

/**
 * é‡ç½®é«˜çº§æŸ¥è¯¢
 * @param formItems - è¡¨å•é…ç½®é¡¹æ•°ç»„
 * @param formData - è¡¨å•æ•°æ®å¯¹è±¡
 */
export const onResetForHighQuery = (formItems, formData) => {   
    // 1. æ¸…空所有基础字段（不包含过滤模式字段） 
    const baseFields = formItems.reduce((acc, item) => { 
        acc[item.prop] = ''; 
        return acc; 
        }, {}); 
   
        // 2. åº”用基础字段初始值 
        formData.value = { ...baseFields }; 
}   


/**
 * ä»Žè¡¨å•æ•°æ®ä¸­æå–有效属性（排除无效字段）,提交保存表单数据时用
 * @param formData è¡¨å•æ•°æ®å¯¹è±¡
 * @param excludeFields éœ€è¦æŽ’除的字段列表（默认为 ['id']）
 * @returns å¤„理后的有效数据对象
 */
export const extractFormDataForOnConfirm = (formData) => {
   //动态获取 formData çš„所有属性值（排除无效属性，如 id）
  const data = Object.entries(formData.value).reduce((acc, [key, value]) => {
    // è¿‡æ»¤æŽ‰ä¸éœ€è¦æäº¤çš„属性（如 id，可根据实际需求调整）
    if (key !== 'id') {
      acc[key] = value
    }
    return acc
  }, {} as Record<string, any>)
  return data;
  };

  /**
 * ä»Žå“åº”数据中提取有效字段并赋值给表单数据,打开表单数据时用
 * @param res å“åº”数据
 * @param formData è¡¨å•æ•°æ®å¼•ç”¨
 * @param options é…ç½®é€‰é¡¹
 * @returns å¤„理后的表单数据
 */
export function extractAndAssignFormData(res,formData) {
     // æå–有效字段（排除不需要的属性，如临时字段、非表单字段）
     const { id, ...validFormData } = res; // ä¿ç•™ id å¯æ ¹æ®éœ€æ±‚调整
    
     // ç›´æŽ¥èµ‹å€¼ï¼ˆè‡ªåŠ¨è¿‡æ»¤æ— æ•ˆå±žæ€§ï¼‰
     formData.value = {
       ...validFormData, // è‡ªåŠ¨ç»§æ‰¿æ‰€æœ‰æœ‰æ•ˆå­—段
       // å¦‚需额外处理特定字段（如日期格式化），可在此补充
       // plannedStartTime: formatDate(res.plannedStartTime), 
     };
  }