VUE常用组件

搜索栏 

    <Header
      :searchNum="2"
      :labelCol="{ span: 4 }"
      :wrapperCol="{ span: 8 }"
      :formConfig="searchConfig"
      @onQuery="handleSearch"
      @onReset="handleReset"
    />

搜索栏中的下拉搜索

export const searchConfig = computed<FormConfig[]>(() => {
  let cls = ['orderSource', 'relatedOrderNumber', 'materialCode', 'materialDepict', 'whsId'];

  return cls.map(prop => {
    let conf: FormConfig = {
      prop,
      type: 'input',
      label: columns.value.find(i => i.key == prop)?.title as string,
    };

     //下拉搜索框
    if (prop == 'whsId') {
      conf.type = 'query-select';
      //请示地址
      //lezao/mbd/Whs/queryPage
      conf.svrName = serverPath.mbd;
      conf.className = 'Whs';
    }
    return conf;
  });
});

Form表单的下拉

export const searchConfig = computed<FormConfig[]>(() => {
  let formConfig: FormConfig[] = [ 
    {
      prop: 'tj0factoryCode',
      label: '工厂编号',
      type: 'input'
    },
    {
      prop: 'tj0factoryName',
      label: '工厂名称',
      type: 'input',
    }, 
    {
      prop: 'tj0warehouseLocationCode',
      label: '仓储编号',
      type: 'input', 
    },
    {
      prop: 'trSrc',
      label: '仓储描述',
      type: 'input', 
    },
    {
      prop: 'tj0wareHouse',
      label: '仓库',
      type: 'input', 
    },
    {
      prop: 'tj0type',
      label: '类型',
      type: 'input', 
    }, 
    {
      prop: 'tj0status',
      label: '状态',
      type: 'select',
      options: [{value:'启用',label:'启用'},{value:'禁用',label:'禁用'}],
      attrs: {
        maxLength: 50,
        placeholder: '请选择',
      }
    }
  ];
  return formConfig.map(ite => {
    //一共24个。labelCol是标题宽度，wrapperCol 是输入框宽度，2组查询条件，所以每组各一半为12  
    ite.labelCol = { span: 4 };
    ite.wrapperCol = { span: 8 };
    return {
      ...ite,
     
       //多语言
     // label: getLangByProp(ite.prop),
    };
  });
});

表格的使用

<template>
  <page-layout type="page">
    <template #c1-header>
      <Header :form-config="searchConfig" @onQuery="search" @onReset="reset"> </Header>
    </template>
    <template #c1>
      <base-table
        :class-name="recordClassName"
        class="flex-1"
        ref="tableRef"
        :response-handle="responseHandle"
        :query-api="QueryRecord"
        :columns="recordColumns"
        :query-args="queryArgs"
      ></base-table>
    </template>
  </page-layout>
</template>

格式化1

//列表值格式化
const responseHandle = (res: any) => {
  if (res?.data?.length) {
    res.data = res.data.map((i: any) => {
      return {
        ...i,
        createAt: i.createAt ? dayjs(i.createAt).format("YYYY-MM-DD") : "",
        matStockUnlockDate: i.matStockUnlockDate? dayjs(i.matStockUnlockDate).format("YYYY-MM-DD"): "",
      };
    });
  }
};

格式化2

const responseHandle = (res: any) => {
  if (res?.data?.length) {
    QueryMaterialLedger({
      attrSet: [],
      condition: [
        {
          field: "objId",
          compare: "IN",
          value: res.data.map((i: any) => i.materialLedgerId),
        },
      ],
    }).then(({ data }) => {
      tableRef.value!.dataSource = res.data.map((i: any) => {
        return {
          ...i,
          availableStock:
            data.find((ite: any) => ite.objId == i.materialLedgerId)?.availableStock ||
            "",
          inboundTime: i.inboundTime ? dayjs(i.inboundTime).format("YYYY-MM-DD") : "",
        };
      });
    });
  }
};

原文地址：https://blog.csdn.net/lybwwp/article/details/144372993

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！