企企通产品部V6

Appearance

On this page

selectModal / remoteSelect 使用文档 ​

基本使用方法 ​

js
{
        groupCode: 'baseForm',
        fieldLabel: srmI18n('i18n_purchaseBarcodeInfoItemList2b5d_businessField', '业务单据字段'),
        fieldName: 'businessField',
        fieldType: 'selectModal',
        dictCode: 'barcodeBusinessType',
        // disabled: true,
        extend: {
          // valueKey: 'id',
          modalColumns: [
            { field: 'filed', title: srmI18n('i18n_title_fieldValue', '字段值'), width: 150 },
            { field: 'filedName', title: srmI18n('i18n_field_columnName', '字段名'), width: 150 },
            { field: 'filedType', title: srmI18n('i18n_title_fieldType', '字段类型'), width: 150 },
          ],
          modalUrl: '/base/barcode/elsBarcodeAttribute/queryPageFieldList',
          selectModal: 'single',
          params: ({ pageData, userInfo }) => {
            return { businessType: pageData.businessType || '' , subAccount: userInfo.subAccount }
          },
          handleBefore: ({ pageData, userInfo }) => {
            if (!pageData.businessType) {
              return Promise.reject('请先选择业务单据类型')
            } else {
              return Promise.resolve()
            }
          },
          handleAfter: ({ pageData, userInfo }) => {
            pageData.businessField =''
            pageData.businessFieldName = ''
          },
        },
        callback: (ctx, { data, pageData, modalData }) => {
          if (!data?.length) return
          pageData.businessField = data[0].filed
          pageData.businessFieldName = data[0].filedName
        },
        placeholder: srmI18n('', '请输入业务单据字段'),
      },

Extend & Columns ​

ts
interface Columns {
  type?: string;
  field?: string;
  title?: string;
  align?: string;
  fieldLabelI18nKey?: string;
  width?: number;
}

type ModalParams =
  | Record<number | string, unknown>
  | ((value?: RecordString) => Record<number | string, unknown>);

type ModalType = "single" | "multiple" | "";

type RequestMethod = "get" | "post";

type HandleBefore = (value?: RecordString) => Promise<string | boolean | void>;

type HandleAfter = (value?: RecordString) => void;

interface Extend {
  valueKey?: string; // 指定select模块的value绑定对应数组的字段
  current?: number; // 针对同一个字段存在根据表单/表行等外界变量变化而切换extend渲染内容的需求
  modalConfigs?: unknown[]; // 针对同一个字段存在根据表单/表行等外界变量变化而切换extend渲染内容的需求
  modalColumns?: Columns[];
  modalUrl?: string;
  modalParams?: ModalParams;
  params?: ModalParams;
  selectModal?: ModalType;
  requestMethod?: RequestMethod;
  handleBefore?: HandleBefore;
  handleAfter?: HandleAfter;
}

关于 modalConfigs & current ​

在表行/头中，需要根据其余条件进行 modalConfigs 内参数的切换时可以使用以下操作

js
//其余条件
{
  groupCode: 'purchaseMassProdSampleItemList',
  title: '验证类别',
  fieldLabelI18nKey: 'i18n_purchaseMassProdSampleItemList0718_verifyType_dictText',
  fieldType: 'select',
  field: 'verifyType',
  align: '',
  headerAlign: 'center',
  dataFormat: '',
  defaultValue: '0',
  width: 150,
  dictCode: 'purchase_mass_prod_sample_verify_type',
  fold: '0',
  sum: '0',
  disabled: false,
  show: true,
  alertMsg: '',
  callback: /**
 * @param {Object} ctx 组件实例
 * @param {String} value 当前所选值
 * @param {Array} data selectModal, remoteSelect 已选行数据 (如有)
 * @param {Object} pageData 页面所有数据
 * @param {Object} layoutConfig 模板配置
 * @param {Object} row 表行数据 (如有)
 * @param {number} idx 表行索引值 (如有)
 * @param {(groupCode: string, fieldName: string, fn: (item: FormFieldsItem | ColumnItem) => void) => void}
 * customFormatItem 遍历模板分组配置，自定义格式化查询到的字段
 * @param {(groupCode: string, fieldName: string, flag: boolean) => void}
 * setItemRequired 自定义设置字段必填
 * @param {(groupCode: string, fieldName: string, flag: boolean) => void}
 * setItemDisabled 自定义设置字段置灰
 * @param {(groupCode: string, fieldName: string, flag: boolean) => void}
 * setItemRequiredOrDisabled 自定义设置字段必填/置灰
 */
 function callback(
  ctx,
  {
   value,
   data,
   row,
   idx,
   pageData,
   layoutConfig,
   customFormatItem,
   setItemRequired,
   setItemDisabled,
   setItemRequiredOrDisabled,
  }
 ) {
  // 业务类型 verifyType;
  // 数据字典 purchase_mass_prod_sample_verify_type (0: 样品检测, 1: 批量试制);

  /**
   * @description: 业务规则:
   * 动态设置关联单据字段弹窗选择配置
   */
  if (value) {
   customFormatItem(
    "purchaseMassProdSampleItemList",
    "relationDocuments",
    function fn(item) {
     debugger;
     if (item.extend) {
      item.extend = Object.assign(item.extend, {
       current: value,
      });
     }
    }
   );
  }
 },
  required:'0',
  mobile: 1,
  helpText: ''
},
js
// 弹窗选择配置
  {
    fieldType: 'selectModal',
    fieldLabel: srmI18n('i18n_title_businessOrderNo', '业务单号'),
    fieldName: 'businessNumber',
    required: '1',
    extend: {
      current: 0,
      modalConfigs: [
        {
          title: srmI18n('i18n_title_bidDocument', '竞价单'),
          modalColumns: [
            { field: 'ebiddingNumber', title: srmI18n('i18n_title_bidDocumentNo', '竞价单号'), with: 150 },
            { field: 'ebiddingDesc', title: srmI18n('i18n_title_documentCheck', '单据检查'), with: 150 },
            { field: 'ebiddingStatus_dictText', title: srmI18n('i18n_field_ebiddingStatus', '竞价单状态'), with: 150 },
          ],
          modalUrl:
            '/ebidding/purchaseEbiddingHead/list?superQueryParams=%5B%7B%22fieldCode%22:%22ebiddingStatus%22,%22fieldType%22:%22select%22,%22dictCode%22:%22srmEbiddingStatus%22,%22fieldValue%22:%220%22,%22logicSymbol%22:%22ne%22,%22joiner%22:%22AND%22%7D%5D&column=id&order=desc',
          params: {},
        },
        {
          title: srmI18n('i18n_title_inquirySheet', '询价单'),
          modalColumns: [
            { field: 'enquiryNumber', title: srmI18n('i18n_title_inquirySheetNo', '询价单号'), with: 150 },
            { field: 'enquiryDesc', title: srmI18n('i18n_field_enquiryDesc', '询价描述'), with: 150 },
            { field: 'enquiryStatus_dictText', title: srmI18n('i18n_field_enquiryStatus', '询价单状态'), with: 150 },
          ],
          modalUrl:
            '/enquiry/purchaseEnquiryHead/list?superQueryParams=%5B%7B%22fieldCode%22:%22enquiryStatus%22,%22fieldType%22:%22input%22,%22dictCode%22:%22srmEnquiryStatus%22,%22fieldValue%22:%220%22,%22logicSymbol%22:%22ne%22,%22joiner%22:%22AND%22%7D%5D&column=id&order=desc',
          params: {},
        },
        {
          title: srmI18n('i18n_title_tenderFrom', '招标单'),
          modalColumns: [
            { field: 'biddingNumber', title: srmI18n('i18n_title_tenderNumber', '招标单号'), with: 150 },
            { field: 'biddingDesc', title: srmI18n('i18n_field_biddingDesc', '单据简称'), with: 150 },
          ],
          modalUrl:
            '/bidding/purchaseBiddingHead/list?superQueryParams=%5B%7B%22fieldCode%22:%22biddingStatus%22,%22fieldType%22:%22input%22,%22fieldValue%22:%220%22,%22logicSymbol%22:%22ne%22,%22joiner%22:%22AND%22%7D%5D&column=id&order=desc',
          params: {},
        },
      ],
    },
    /**
     * @param {Object} ctx 组件实例
     * @param {String} value 当前所选值
     * @param {Array} data selectModal, remoteSelect 已选行数据 (如有)
     * @param {Object} pageData 页面所有数据
     * @param {Object} layoutConfig 模板配置
     * @param {Object} row 表行数据 (如有)
     * @param {number} idx 表行索引值 (如有)
     * @param {(groupCode: string, fieldName: string, fn: (item: FormFieldsItem | ColumnItem) => void) => void}
     * customFormatItem 遍历模板分组配置，自定义格式化查询到的字段
     * @param {(groupCode: string, fieldName: string, flag: boolean) => void}
     * setItemRequired 自定义设置字段必填
     * @param {(groupCode: string, fieldName: string, flag: boolean) => void}
     * setItemDisabled 自定义设置字段置灰
     * @param {(groupCode: string, fieldName: string, flag: boolean) => void}
     * setItemRequiredOrDisabled 自定义设置字段必填/置灰
     */
    callback(ctx, { data, pageData }) {
      const businessType = pageData.businessType
      if (data) {
        // 竞价类型
        if (businessType === '1') {
          const { ebiddingNumber = '', ebiddingDesc = '', id = '' } = data[0] || {}
          pageData.businessNumber = ebiddingNumber
          pageData.businessName = ebiddingDesc
          pageData.businessId = id
        }
        // 询价类型
        if (businessType === '2') {
          const { enquiryNumber = '', enquiryDesc = '', id = '' } = data[0] || {}
          pageData.businessNumber = enquiryNumber
          pageData.businessName = enquiryDesc
          pageData.businessId = id
        }
        // 招投标类型
        if (businessType === '3') {
          const { biddingNumber = '', biddingDesc = '', id = '' } = data[0] || {}
          pageData.businessNumber = biddingNumber
          pageData.businessName = biddingDesc
          pageData.businessId = id
        }
      }
    },
  },

tips:可参考 质量协同/试制管理(量产批准)

多选模式下回显与显示选择行数据 ​

extend: {
    ....
   /*
    添加checkItemParams和showCheckItem属性
    **checkItemParams通过已选中的数据回显弹窗列表选中内容
    **showCheckItem是否开启多选模式下回显与显示选择行数据
   */
    checkItemParams: function({row}){
      return {
        ids:row.rebateProduct||'0',
         frozenFunctionValue: '1',
      }
    },
   showCheckItem:true,
}

tips:可参考返利规则管理的门槛商品

customSelectModal 使用文档 ​

作用 ​

在表单/表行中需要弹窗选择功能，但系统弹窗无法满足需自定义弹窗样式时，使用该组件。

基本使用方法 ​

js
//添加 customClick 事件
 <q-edit-page-layout ref="layoutRef" v-bind="options" @customClick="handleCustomClick" ></q-edit-page-layout>
//先在代码中实现你需要的弹窗
<q-field-select-modal ref="customSelectModal" @ok="customOk">
      <template #searchBar="{ onSearch, form }">
        <a-form style="display: flex; flex-flow: row wrap; margin: 4px" layout="inline">
          <a-form-item style="margin-right: 12px" :label="srmI18n('i18n_field_availableQty', '可用数量')">
            <q-select
              style="width: 200px"
              v-model:value="form.availableQuantityStatus"
              :placeholder="srmI18n('i18n_field_ViFqjWR_6f4361ef', '请选择可用数量')"
              allowClear
              dict-code="availableQuantityStatus"
            />
          </a-form-item>
          <a-form-item style="margin-right: 12px" :label="srmI18n('i18n_title_keyword', '关键字')">
            <a-input style="width: 200px" :placeholder="srmI18n('i18n_title_pleaseInputThekeyword', '请输入关键字')" v-model:value="form.keyWord" allowClear />
          </a-form-item>
          <a-form-item style="margin-right: 12px">
            <a-button type="primary" @click="() => onSearch()">{{ srmI18n('i18n_title_Query', '查询') }}</a-button>
          </a-form-item>
        </a-form>
      </template>
    </q-field-select-modal>

// 封装方法
import useCustomSelectModalHook from './hook/use-custom-select-modal-hook'
const { customSelectModal, handleCustomClick, customOk } = useCustomSelectModalHook(layoutRef)
// handleCustomClick 方法 参数如下
// const handleCustomClick: Ref<((field: GlobalPageLayoutTypes.FormFieldsItem) => void) | null> = ref(null)
// customOk 方法 参数如下
// const customOk: Ref<((data: GlobalPageLayoutTypes.RecordString[]) => void) | null> = ref(null)