@pluve/lego--goods-modal-vue

乐高系列之 GoodsModal 组件

基于 ant-design-vue 组件进行，运营平台UI@2.0的交互要求封装的商品查询组件。

特性

• 基于 ant-design-vue和运营平台UI@2.0的交互要求进行二次封装
• 支持商品编码，商品名称，商品条形码查询商品;
• 支持输入框enter事件自动查询，支持单个商品自动加入选择区
• 使用简单,便捷;

默认配置

属性	默认值	描述
queryGoodInfoPage	必传	(params:IQueryParam)=>Promise<IRecord[]>

类型定义如下，组件和后台接口查询剥离；queryGoodInfoPage 是注入一个查询接口的方法，并回传查询的商品结果；商品组件提供默认的UI和查询入参

interface IQueryParam{
  pageSize: number;
   pageCurrent: number;
   goodCode?:string;
   goodsName?:string;
   mainBarcode?:string;
}

interface IRecord{
  approvedNumber?: string;
  categoryCode?: string;
  categoryCodeName?: string;
  categoryCodeNameOne?: string;
  categoryCodeNameThree?: string;
  categoryCodeNameTwo?: string;
  categoryCodeOne?: string;
  categoryCodeThree?: string;
  categoryCodeTwo?: string;
  goodCode: string;
  goodsName: string;
  key: string;
  mainBarcode?: string;
  manufacturerCode?: string;
  manufacturerName?: string;
  measureUnit?: string;
  outputTax?: string;
  standard?: string;
}

方法

| 名称 | 类型 |描述 | | --- | --- | | ok | (e: "ok", values: IRecord[]): void |该事件将会返回所有选择的商品数据| | close | (e: "close"): void |该事件主要提供一个关闭事件|

使用v-if="state.visible"来控制组件展示和销毁

安装

# 使用 npm
npm i @pluve/lego--goods-modal-vue

# 使用 yarn
yarn add @pluve/lego--goods-modal-vue

使用

<template>
  <a-button @click="state.open=true">打开</a-button>
  <legoGoodsModal v-if="state.open" :query-good-info-page="queryGoodInfoPage" @close="state.open=false" @ok="handleOk"></legoGoodsModal>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import axios from "axios";



const state = reactive<{
  formData: any;
  open: boolean;
}>({
  formData: {},
  open: false,
});

const queryGoodInfoPage = async (params: any) => {
  let data = combinParams(params);
  let { data: res }: any = await axios.post(
    "https://operation-te.pharmacyyf.com/yf-promo-plan-boss/external/casRequest",
    data
  );
  if (res.code == 0) {
    return res.data.list;
  }
  return [];
};

const handleOk = (values:any)=>{
   console.log(values)
}


function combinParams(params: any) {
  return {
    request: {
      url: "http://pos-test.test.hnyf.cn/store/rs/queryGoodInfoPage",
      data: params,
      dataType: "form",
      resultType: "json",
    },
    _openx_head: {
      merchant: {
        alias: "益丰大药房",
        code: "yfdyf",
        contactIdNumber: "432522198810041896",
        contactPersonMobile: "15900000001",
        contactPersonName: "超管",
        id: "5c49b2b72adc9100015f02ca",
        img: [],
        intro: "湖南益丰大药房",
        name: "益丰大药房",
      },
      token: {
        address: "175.6.17.66",
        device: "ddc16794-8fe8-4063-83e3-65a23171ef9d",
        session: "4AB1D968320173848FC3BA612EA48BB9",
        userCode: "5dde10424c5d9f00014591fc",
        userName: "谢会军",
        userToken: "e8e4a230-fcf6-4db1-a3db-54f40e8919ec",
      },
      user: {
        createTime: 1609818333000,
        email: "",
        id: "5dde10424c5d9f00014591fc",
        login: false,
        merchantId: "5c49b2b72adc9100015f02ca",
        mobile: "15197635517",
        number: "00010015",
        orgId: "5dde0ecc4c5d9f000144fe3f",
        orgName: "物流运营管理本部",
        orgPathName: "益丰大药房/管理机构/物流运营管理本部",
        parentId: "62b91e09fa09500001b7a6de",
        post: "物流运营管理本部部门负责人",
        postCode: "10000230",
        status: "1",
        userName: "谢会军",
      },
    },
  };
}
</script>

Keywords

lego lego--goods-modal lego--goods-modal-vue