Merge remote-tracking branch 'refs/remotes/origin/dev_pro2.0' into dev_宁夏_九泓化工

云

7 天以前 c77086ad2d7949ab36dd0c4e0b59907e672dd64f

 src/views/erp/purchase/invoice/modules/purchase-order-select.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,194 @@
<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { ErpPurchaseOrderApi } from '#/api/erp/purchase/order';

import { computed, nextTick, ref, watch } from 'vue';

import { DICT_TYPE } from '@vben/constants';
import { IconifyIcon } from '@vben/icons';

import { Input, message, Modal } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import {
  getPurchaseOrder,
  getPurchaseOrderPage,
} from '#/api/erp/purchase/order';

defineOptions({ name: 'ErpPurchaseInvoiceOrderSelect' });

const props = withDefaults(
  defineProps<{
    disabled?: boolean;
    modelValue?: number;
    placeholder?: string;
  }>(),
  {
    disabled: false,
    modelValue: undefined,
    placeholder: '请选择采购订单',
  },
);
const emit = defineEmits<{
  change: [order: ErpPurchaseOrderApi.PurchaseOrder | undefined];
  'update:modelValue': [value: number | undefined];
}>();

const open = ref(false); // é€‰æ‹©å¼¹çª—是否打开
const order = ref<ErpPurchaseOrderApi.PurchaseOrder>(); // å½“前选中采购订单

const displayNo = computed(() => order.value?.no ?? '');

/** æ ¹æ®è®¢å•ç¼–号回显选择器 */
async function resolveOrderById(id: number | undefined) {
  if (!id) {
    order.value = undefined;
    return;
  }
  if (order.value?.id === id) {
    return;
  }
  order.value = await getPurchaseOrder(id);
}

watch(
  () => props.modelValue,
  (value) => {
    resolveOrderById(value);
  },
  { immediate: true },
);

/** è¡¨æ ¼é…ç½® */
const [Grid, gridApi] = useVbenVxeGrid({
  formOptions: {
    schema: [
      {
        fieldName: 'no',
        label: '订单单号',
        component: 'Input',
        componentProps: {
          placeholder: '请输入订单单号',
          allowClear: true,
        },
      },
    ],
  },
  gridOptions: {
    columns: [
      { type: 'radio', width: 50, fixed: 'left' },
      { field: 'no', title: '订单单号', width: 200, fixed: 'left' },
      { field: 'supplierName', title: '供应商', minWidth: 120 },
      {
        field: 'orderTime',
        title: '订单时间',
        width: 160,
        formatter: 'formatDate',
      },
      {
        field: 'totalPrice',
        title: '含税金额',
        formatter: 'formatAmount2',
        minWidth: 120,
      },
      {
        field: 'remainInvoicePrice',
        title: '未开票金额',
        formatter: 'formatAmount2',
        minWidth: 120,
      },
      {
        field: 'status',
        title: '状态',
        minWidth: 100,
        cellRender: {
          name: 'CellDict',
          props: { type: DICT_TYPE.ERP_AUDIT_STATUS },
        },
      },
    ],
    height: 520,
    keepSource: true,
    proxyConfig: {
      ajax: {
        query: async ({ page }, formValues) => {
          return await getPurchaseOrderPage({
            pageNo: page.currentPage,
            pageSize: page.pageSize,
            status: 20, // ä»…展示已审核通过的采购订单
            remainPriceEnable: true, // ä»…展示剩余可开票金额大于 0 çš„订单（金额已开完的不展示）
            ...formValues,
          });
        },
      },
    },
    rowConfig: {
      keyField: 'id',
      isHover: true,
    },
    radioConfig: {
      trigger: 'row',
      highlight: true,
    },
    toolbarConfig: {
      refresh: true,
      search: true,
    },
  } as VxeTableGridOptions<ErpPurchaseOrderApi.PurchaseOrder>,
  gridEvents: {
    radioChange: ({ row }: { row: ErpPurchaseOrderApi.PurchaseOrder }) => {
      order.value = row;
    },
  },
});

/** æ‰“开选择弹窗 */
async function handleOpen() {
  if (props.disabled) {
    return;
  }
  open.value = true;
  await nextTick();
  gridApi.query();
}

/** ç¡®è®¤é€‰æ‹©é‡‡è´­è®¢å• */
function handleOk() {
  if (!order.value?.id) {
    message.warning('请选择采购订单');
    return;
  }
  emit('update:modelValue', order.value.id);
  emit('change', order.value);
  open.value = false;
}
</script>

<template>
  <div>
    <Input
      readonly
      :disabled="disabled"
      :placeholder="placeholder"
      :value="displayNo"
      @click="handleOpen"
    >
      <template #suffix>
        <IconifyIcon
          class="size-4 cursor-pointer"
          icon="lucide:search"
          :style="{ cursor: disabled ? 'not-allowed' : 'pointer' }"
        />
      </template>
    </Input>
    <Modal
      v-model:open="open"
      title="选择采购订单（仅已审核通过）"
      width="80%"
      @cancel.stop="open = false"
      @ok.stop="handleOk"
    >
      <Grid table-title="采购订单列表" />
    </Modal>
  </div>
</template>