<script lang="ts" setup>
|
import type { TreeActionType } from '@jnpf/ui';
|
import type { BasicColumn } from '@jnpf/ui/vxeTable';
|
|
import { nextTick, reactive, ref, unref } from 'vue';
|
|
import { BasicLeftTree } from '@jnpf/ui';
|
import { ModalClose } from '@jnpf/ui/modal';
|
import { BasicVxeTable, useVxeTable } from '@jnpf/ui/vxeTable';
|
|
import { Modal as AModal, Form } from 'ant-design-vue';
|
|
import { getGoodsList, getProductClassify } from '#/api/extend/saleOrder';
|
|
defineOptions({ inheritAttrs: false });
|
const emit = defineEmits(['update:value', 'change']);
|
const formItemContext = Form.useInjectFormItemContext();
|
const visible = ref(false);
|
const columns: BasicColumn[] = [
|
{ title: '产品编码', dataIndex: 'code' },
|
{ title: '产品名称', dataIndex: 'fullName' },
|
{ title: '库存', dataIndex: 'qty' },
|
];
|
const searchInfo = reactive({
|
classifyId: '',
|
});
|
const leftTreeRef = ref<Nullable<TreeActionType>>(null);
|
const treeLoading = ref(false);
|
const treeData = ref<any[]>([]);
|
const [registerTable, { getForm, getSelectRows, getSelectRowKeys }] = useVxeTable({
|
api: getGoodsList,
|
columns,
|
immediate: false,
|
useSearchForm: true,
|
formConfig: {
|
baseColProps: { span: 8 },
|
schemas: [
|
{
|
field: 'code',
|
label: '产品编号',
|
component: 'Input',
|
componentProps: {
|
placeholder: '请输入',
|
},
|
},
|
{
|
field: 'fullName',
|
label: '产品名称',
|
component: 'Input',
|
componentProps: {
|
placeholder: '请输入',
|
},
|
},
|
],
|
},
|
tableSetting: { size: false, setting: false },
|
rowSelection: { type: 'checkbox' },
|
});
|
|
async function openSelectModal() {
|
visible.value = true;
|
treeLoading.value = true;
|
getProductClassify().then((res) => {
|
treeLoading.value = false;
|
treeData.value = res.data.list || [];
|
searchInfo.classifyId = treeData.value[0].children[0].id;
|
nextTick(() => {
|
const leftTree = unref(leftTreeRef);
|
leftTree?.setSelectedKeys([searchInfo.classifyId]);
|
getForm().resetFields();
|
});
|
});
|
}
|
function handleTreeSelect(id) {
|
if (!id || searchInfo.classifyId === id) return;
|
searchInfo.classifyId = id;
|
getForm().resetFields();
|
}
|
function handleCancel() {
|
visible.value = false;
|
}
|
function handleSubmit() {
|
if (!getSelectRowKeys().length && !getSelectRows().length) return;
|
if (!getSelectRows().length) {
|
emit('change', getSelectRows(), searchInfo.classifyId);
|
formItemContext.onFieldChange();
|
handleCancel();
|
return;
|
}
|
const selectRow = getSelectRows();
|
emit('change', selectRow, searchInfo.classifyId);
|
formItemContext.onFieldChange();
|
handleCancel();
|
}
|
</script>
|
|
<template>
|
<div class="common-container">
|
<a-button type="primary" pre-icon="icon-ym icon-ym-btn-add" @click="openSelectModal">选择产品</a-button>
|
<AModal
|
v-model:open="visible"
|
title="选择产品"
|
:width="1000"
|
class="common-container-modal"
|
@ok="handleSubmit"
|
@cancel="handleCancel"
|
:mask-closable="false"
|
destroy-on-close>
|
<template #closeIcon>
|
<ModalClose :can-fullscreen="false" @cancel="handleCancel" />
|
</template>
|
<div class="jnpf-content-wrapper">
|
<div class="jnpf-content-wrapper-left">
|
<BasicLeftTree ref="leftTreeRef" :show-search="false" :tree-data="treeData" :loading="treeLoading" @select="handleTreeSelect" />
|
</div>
|
<div class="jnpf-content-wrapper-center">
|
<div class="jnpf-content-wrapper-content">
|
<BasicVxeTable @register="registerTable" :search-info="searchInfo" class="jnpf-sub-table" />
|
</div>
|
</div>
|
</div>
|
</AModal>
|
</div>
|
</template>
|
