银川 1.销售报价选择框复用组件应用

gaoluyang

4 天以前 2fdf183119c9a87dd0d62694fad2a2744989b92a

银川
1.销售报价选择框复用组件应用

 src/api/erp/sale/order/index.ts

@@ -26,6 +26,7 @@
    contractId?: number; // 关联 CRM 合同编号
    contractNo?: string; // CRM 合同单号
    needProduction?: number; // 是否需要生产：0-不需要，1-需要
    hasSalesNotice?: boolean; // 是否已生成发货通知单
    items?: SaleOrderItem[]; // 销售订单产品明细列表
  }


 src/views/crm/saleQuotation/data.ts

@@ -124,6 +124,7 @@
      fieldName: 'quotationTime',
      label: '报价日期',
      component: 'DatePicker',
      rules: 'required',
      componentProps: {
        showTime: false,
        format: 'YYYY-MM-DD',
@@ -165,7 +166,7 @@
    },
    {
      fieldName: 'items',
      label: '物料清单',
      label: '产品清单',
      component: 'Input',
      formItemClass: 'col-span-3',
    },
@@ -340,24 +341,19 @@
  ];
}

/** 物料明细表格列 */
/** 产品明细表格列 */
export function useItemColumns(): VxeTableGridOptions['columns'] {
  return [
    { type: 'seq', title: '序号', minWidth: 50, fixed: 'left' },
    {
      field: 'itemId',
      title: '物料名称',
      title: '产品名称',
      minWidth: 200,
      slots: { default: 'itemId' },
    },
    {
      field: 'itemSpecification',
      title: '规格型号',
      minWidth: 120,
    },
    {
      field: 'itemBarCode',
      title: '条码',
      minWidth: 120,
    },
    {

 src/views/crm/saleQuotation/modules/item-form.vue

@@ -2,14 +2,14 @@
import type { MdmItemApi } from '#/api/mdm/item';
import type { CrmSaleQuotationApi } from '#/api/crm/saleQuotation';

import { computed, onMounted, ref } from 'vue';
import { computed, ref } from 'vue';

import { erpPriceMultiply } from '#/packages/utils/src';

import { InputNumber, Select } from 'ant-design-vue';
import { InputNumber } from 'ant-design-vue';

import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { getItemPage } from '#/api/mdm/item';
import MdmItemSelect from '#/views/basicData/mdm/components/select.vue';

import { useItemColumns } from '../data';

@@ -24,7 +24,7 @@
const emit = defineEmits(['change']);

const tableData = ref<CrmSaleQuotationApi.SaleQuotationItem[]>([]);
const itemOptions = ref<MdmItemApi.Item[]>([]);
const selectedItem = ref<MdmItemApi.Item>();

/** 获取表格合计数据 */
const summaries = computed(() => {
@@ -93,13 +93,23 @@
  }
}

/** 处理物料变更 */
function handleItemChange(itemId: number, row: any) {
  const item = itemOptions.value.find((p) => p.id === itemId);
/** 处理产品变更 */
function handleItemChange(item: MdmItemApi.Item | undefined, row: any) {
  if (!item) {
    row.itemId = undefined;
    row.itemName = undefined;
    row.itemCode = undefined;
    row.itemBarCode = undefined;
    row.itemSpecification = undefined;
    row.itemUnitName = undefined;
    row.itemUnitName2 = undefined;
    row.itemUnitName3 = undefined;
    row.itemPrice = undefined;
    row.quotationPrice = undefined;
    row.totalPrice = 0;
    return;
  }
  row.itemId = itemId;
  row.itemId = item.id;
  row.itemName = item.name;
  row.itemCode = item.code;
  row.itemBarCode = item.barCode;
@@ -133,7 +143,7 @@
    const item = tableData.value[i];
    if (item) {
      if (!item.itemId) {
        throw new Error(`第 ${i + 1} 行：物料不能为空`);
        throw new Error(`第 ${i + 1} 行：产品不能为空`);
      }
      if (!item.count || item.count <= 0) {
        throw new Error(`第 ${i + 1} 行：数量不能为空`);
@@ -173,25 +183,16 @@
  getData,
  resetData,
});

/** 初始化 */
onMounted(async () => {
  const res = await getItemPage({ pageNo: 1, pageSize: 100, status: 0 });
  itemOptions.value = res.list || [];
});
</script>

<template>
  <Grid class="w-full">
    <template #itemId="{ row }">
      <Select
      <MdmItemSelect
        v-if="!disabled"
        v-model:value="row.itemId"
        :options="itemOptions"
        :field-names="{ label: 'name', value: 'id' }"
        class="w-full"
        placeholder="请选择物料"
        @change="(val) => handleItemChange(val, row)"
        v-model:model-value="row.itemId"
        placeholder="请选择产品"
        @change="(item) => handleItemChange(item, row)"
      />
      <span v-else>{{ row.itemName || '-' }}</span>
    </template>
@@ -224,7 +225,7 @@
            type: 'link',
            danger: true,
            popConfirm: {
              title: '确认删除该物料吗？',
              title: '确认删除该产品吗？',
              confirm: handleDelete.bind(null, row),
            },
          },
@@ -247,7 +248,7 @@
        class="mt-2 flex justify-center"
        :actions="[
          {
            label: '添加物料',
            label: '添加产品',
            type: 'default',
            onClick: handleAdd,
          },

 src/views/erp/sale/order/index.vue

@@ -24,6 +24,7 @@

import { useGridColumns, useGridFormSchema } from './data';
import Form from './modules/form.vue';
import SalesNoticeForm from '#/views/wls/salesnotice/modules/form.vue';

/** ERP 销售订单列表 */
defineOptions({ name: 'ErpSaleOrder' });
@@ -32,6 +33,11 @@

const [FormModal, formModalApi] = useVbenModal({
  connectedComponent: Form,
  destroyOnClose: true,
});

const [SalesNoticeFormModal, salesNoticeFormModalApi] = useVbenModal({
  connectedComponent: SalesNoticeForm,
  destroyOnClose: true,
});

@@ -147,11 +153,11 @@
  try {
    const noticeId = await generateFromSaleOrder(row.id!);
    message.success('生成发货通知单成功');
    // 跳转到发货通知单页面
    router.push({
      path: '/wls/sales-notice',
      query: { id: noticeId },
    });
    handleRefresh();
    // 直接打开发货通知单详情弹框
    salesNoticeFormModalApi
      .setData({ formType: 'detail', id: noticeId })
      .open();
  } catch (e) {
    console.error(e);
  }
@@ -193,7 +199,9 @@
</script>

<template>
  <Page auto-content-height><FormModal @success="handleRefresh" />
  <Page auto-content-height>
    <FormModal @success="handleRefresh" />
    <SalesNoticeFormModal />
    <Grid table-title="销售订单列表">
      <template #toolbar-tools>
        <TableAction
@@ -319,7 +327,7 @@
              type: 'link',
              icon: 'ant-design:file-protect-outlined',
              auth: ['mes:wm-sales-notice:create'],
              ifShow: () => row.status === 20,
              ifShow: () => row.status === 20 && !row.hasSalesNotice,
              onClick: handleGenerateNotice.bind(null, row),
            },
            {

 src/views/mes/qc/oqc/data.ts

@@ -12,7 +12,7 @@

import { generateAutoCode } from '#/api/mes/md/autocode/record';
import { getSimpleUserList } from '#/api/system/user';
import { MdClientSelect } from '#/views/mes/md/client/components';
import CrmCustomerSelect from '#/components/crm-customer-select.vue';
import { MdmItemSelect } from '#/views/basicData/mdm/components';

/** 表单类型 */
@@ -135,7 +135,7 @@
    {
      fieldName: 'clientId',
      label: '客户',
      component: markRaw(MdClientSelect),
      component: markRaw(CrmCustomerSelect),
      componentProps: {
        placeholder: '请选择客户',
      },
@@ -307,7 +307,7 @@
    {
      fieldName: 'clientId',
      label: '客户',
      component: markRaw(MdClientSelect),
      component: markRaw(CrmCustomerSelect),
      componentProps: {
        placeholder: '请选择客户',
      },