<script lang="ts" setup>
|
import { onMounted, reactive, toRefs } from 'vue';
|
|
import { ScrollContainer } from '@jnpf/ui';
|
import { useModal } from '@jnpf/ui/modal';
|
|
import { getCustomerList } from '#/api/extend/order';
|
import GoodsModal from '#/views/workFlow/workFlowForm/crmOrder/GoodsModal.vue';
|
|
defineOptions({ name: 'ExtendFormDemoFieldForm5' });
|
|
const state = reactive({
|
dataForm: {
|
CustomerName: '',
|
CustomerCode: '',
|
Goods: '',
|
GoodsCode: '',
|
Specifications: '',
|
Unit: '',
|
Price: '',
|
},
|
options: [],
|
});
|
const { dataForm, options } = toRefs(state);
|
const [registerGoodsModal, { openModal: openGoodsModal }] = useModal();
|
|
function init() {
|
getCustomerList().then((res) => {
|
state.options = res.data.list.map((o) => ({ fullName: o.text, ...o, id: o.code }));
|
});
|
}
|
function handleSelectGoods() {
|
openGoodsModal(true, {});
|
}
|
function onGoodsSelect(list) {
|
const GoodsList: any[] = [];
|
const GoodsCodeList: any[] = [];
|
const SpecificationsList: any[] = [];
|
const UnitList: any[] = [];
|
const Price: any[] = [];
|
for (const e of list) {
|
GoodsList.push(e.text);
|
GoodsCodeList.push(e.code);
|
SpecificationsList.push(e.specifications);
|
UnitList.push(e.unit);
|
Price.push(e.price);
|
}
|
state.dataForm.Goods = GoodsList.join(',');
|
state.dataForm.GoodsCode = GoodsCodeList.join(',');
|
state.dataForm.Specifications = SpecificationsList.join(',');
|
state.dataForm.Unit = UnitList.join(',');
|
state.dataForm.Price = Price.join(',');
|
}
|
|
onMounted(() => {
|
init();
|
});
|
</script>
|
<template>
|
<div class="jnpf-content-wrapper jnpf-content-wrapper-form">
|
<div class="jnpf-content-wrapper-form-body px-[10px]">
|
<ScrollContainer>
|
<div class="my-[10px]">
|
<a-alert message="查询选择、客户选择、商品选择器" type="warning" :show-icon="false" />
|
</div>
|
<a-form :colon="false" :label-col="{ style: { width: '110px' } }">
|
<a-form-item label="客户名称">
|
<jnpf-select v-model:value="dataForm.CustomerCode" :options="options" show-search />
|
</a-form-item>
|
<a-form-item label="客户编码">
|
<a-input v-model:value="dataForm.CustomerCode" placeholder="客户编码" readonly />
|
</a-form-item>
|
<a-form-item label="选择商品">
|
<a-input v-model:value="dataForm.Goods" placeholder="选择商品">
|
<template #addonAfter>
|
<span @click="handleSelectGoods" class="cursor-pointer">选择</span>
|
</template>
|
</a-input>
|
</a-form-item>
|
<a-form-item label="商品编码">
|
<a-input v-model:value="dataForm.GoodsCode" placeholder="商品编码" readonly />
|
</a-form-item>
|
<a-form-item label="规格型号">
|
<a-input v-model:value="dataForm.Specifications" placeholder="规格型号" readonly />
|
</a-form-item>
|
<a-form-item label="单位">
|
<a-input v-model:value="dataForm.Unit" placeholder="单位" readonly />
|
</a-form-item>
|
<a-form-item label="单价">
|
<a-input v-model:value="dataForm.Price" placeholder="单价" readonly />
|
</a-form-item>
|
</a-form>
|
</ScrollContainer>
|
</div>
|
<GoodsModal @register="registerGoodsModal" @select="onGoodsSelect" />
|
</div>
|
</template>
|
|
<style lang="scss" scoped>
|
.ant-input,
|
.ant-select,
|
.ant-input-group-wrapper {
|
width: 300px !important;
|
}
|
</style>
|
