表格相关的用法
额外表格的定义
数据定义
export const formSchemaXXX: FormSchema[] = [
]
页面
<FormCard :title="t('public.describe.xxxx')" headerStyle="DefaultGradientStyle">
<BasicForm
@register="registerFormXXX"
:schemas="formSchemaXXX">
</BasicForm>
</FormCard>
引入
import { BasicForm,useForm } from '@/components/Form';
注册
/** XXX **/
const [registerFormXXX,
{
setFieldsValue: setFieldsValueXXX,
resetFields: resetFieldsXXX,
validate: validateXXX,
cleanFields:cleanFieldsXXX,
clearValidate:clearValidateXXX,
}] = useForm({
labelWidth: 120,
showActionButtonGroup: false,
actionColOptions: {
span: 24,
},
});
封装的二级弹框的用法
客户
{
label: t('public.table.customer') + ":",
field: 'customerId',
slot:'customerId',
colProps: colSpan,
},
用法
<template #customerId="{ model, field }">
<CustomerApiModal v-model:value="model[field]" @getData="getCustomerData" />
</template>
引入
import CustomerApiModal from "@/views/base/customer/CustomerApiModal.vue";
方法
const getCustomerData=(data)=>{
setFieldsValue({
customerName:data.name
})
}
承运商
{
label: t('public.table.supplier') + ":",
field: 'supplierId',
slot:'supplierId',
colProps: colSpan,
},
用法
<template #supplierId="{ model, field }">
<SupplierApiModal v-model:value="model[field]" @getData="getSupplierData" />
</template>
引入
import SupplierApiModal from "@/views/base/supplier/SupplierApiModal.vue";
方法
const getSupplierData =(data)=>{
setFieldsValue({
supplierName:data.name
})
}
车辆（车牌）
{
label: t('public.table.vehicle') + ":",
field: 'vehicleId',
slot:'vehicleId',
colProps: colSpan,
},
用法
<template #vehicleId="{ model, field }">
<VehicleApiModal v-model:value="model[field]" @getData="getVehicleData" />
</template>
引入
import VehicleApiModal from "@/views/base/vehicle/VehicleApiModal.vue";
方法
const getVehicleData=(data)=>{
setFieldsValue({
plateNum:data.plateNum,
vehicleTypeId:data.vehicleTypeId,
vehicleTypeName:data.vehicleTypeName,
})
}
地址点
{
label: t('public.table.address') + ":",
field: 'addressId',
slot:'addressId',
colProps: colSpan,
},
用法
<template #addressId="{ model, field }">
<AddressApiModal v-model:value="model[field]" @getData="getAddressData" />
</template>
引入
import AddressApiModal from "@/views/base/address/AddressApiModal.vue";
方法
const getAddressData=(data)=>{
setFieldsValue({
addressName:data.name,
})
}
产品
{
label: t('public.table.sku') + ":",
field: 'skuId',
slot:'skuId',
colProps: colSpan,
},
用法
<template #skuId="{ model, field }">
<AddressApiModal v-model:value="model[field]" @getData="getSkuData" />
</template>
引入
import AddressApiModal from "@/views/base/sku/SkuApiModal.vue";
方法
const getSkuData=(data)=>{
setFieldsValue({
skuName:data.name,
})
}
人员(司机）
{
label: t('public.table.driver') + ":",
field: 'driverId',
slot:'driverId',
colProps: colSpan,
},
用法
<template #driverId="{ model, field }">
<StaffApiModal
v-model:value="model[field]"
:queryParam="{type:StaffTypeEnum.DRIVER}"
@getData="getDriverData"
/>
</template>
引入
import StaffApiModal from "@/views/base/staff/StaffApiModal.vue";
方法
const getDriverData=(data)=>{
setFieldsValue({
driverName:data.name,
})
}
下拉框的用法
运输服务
{
label: t('public.table.transService') + ":",
field: 'transServiceId',
slot:'transServiceId',
colProps: colSpan,
},
用法
<template #transServiceId="{ model, field }">
<TransServiceApiSelect v-model:value="model[field]" @getData="getTransServiceData" />
</template>
方法
const getTransServiceData=(data)=>{
clearValidate("transServiceId");
setFieldsValue({
})
}
引入
import TransServiceApiSelect from "@/views/base/transService/TransServiceApiSelect.vue";
银行账号
{
label: t('public.table.account') + ":",
field: 'accountId',
slot:'accountId',
colProps: colSpan,
},
用法
<template #accountId="{ model, field }">
<BankAccountApiSelect v-model:value="model[field]" @getData="getAccountData" />
</template>
引入
import BankAccountApiSelect from "@/views/base/bankAccount/BankAccountApiSelect.vue";
方法
const getAccountData=(data)=>{
clearValidate("accountId");
setFieldsValue({
})
}
包装
{
label: t('public.table.package') + ":",
field: 'packageCode',
slot:'packageCode',
colProps: colSpan,
},
用法
<template #packageCode="{ model, field }">
<PackageApiSelect v-model:value="model[field]" @getData="getPackageCodeData" />
</template>
引入
import PackageApiSelect from "@/views/base/package/PackageApiSelect.vue";
方法
const getPackageCodeData=(data)=>{
clearValidate("packageCode");
setFieldsValue({
})
}
单位
{
label: t('public.table.uom') + ":",
field: 'uomId',
slot:'uomId',
colProps: colSpan,
},
用法
<template #uomId="{ model, field }">
<UomApiSelect v-model:value="model[field]" @getData="getUomData" />
</template>
引入
import UomApiSelect from "@/views/base/package/UomApiSelect.vue";
方法
const getUomData=(data)=>{
clearValidate("uomId");
setFieldsValue({
})
}
货品分类
{
label: t('public.table.skuType') + ":",
field: 'skuTypeId',
slot:'skuTypeId',
colProps: colSpan,
},
用法
<template #skuTypeId="{ model, field }">
<SkuTypeApiSelect v-model:value="model[field]" @getData="getSkuTypeData" />
</template>
引入
import SkuTypeApiSelect from "@/views/base/skuType/SkuTypeApiSelect.vue";
方法
const getSkuTypeData=(data)=>{
clearValidate("skuTypeId");
setFieldsValue({
})
}
批次属性
{
label: t('public.table.attribute') + ":",
field: 'attributeId',
slot:'attributeId',
colProps: colSpan,
},
用法
<template #attributeId="{ model, field }">
<LotApiSelect v-model:value="model[field]" @getData="getAttributeData" />
</template>
引入
import LotApiSelect from '@/views/base/lot/LotApiSelect.vue'
方法
const getAttributeData=(data)=>{
clearValidate("attributeId");
setFieldsValue({
})
}
普通控件
下拉框
/** 字典查询 */
export const dictMap = await dicDictList([
DicCodeEnum.TRANS_SCHEDULER_STATUS,
]);
/** 字典表 */
export const dict: any = {
DicTransSchedulerStatusOptions: dictMap[DicCodeEnum.TRANS_SCHEDULER_STATUS],
};
状态下拉框（多选）
{
label: t('public.table.status') + ":",
field: 'statusList',
component: 'Select',
componentProps: {
mode:"tags",
options: dict.DicTransSchedulerStatusOptions,
showSearch: true,
optionFilterProp: 'label',
},
colProps: colSpan,
},
日期带时分的
{
label: t('public.table.createTime') + ":",
field: 'createTimeStart',
component: 'DatePicker',
componentProps:{
showNow:true,
format:"YYYY-MM-DD HH:mm",
valueFormat:"YYYY-MM-DD HH:mm:ss",
showTime:{ defaultValue: dayjs('00:00', 'HH:mm') },
style: {
width: '100%',
},
},
colProps: colSpan,
},
{
label: t('public.table.arrow') + ":",
field: 'createTimeToEnd',
component: 'DatePicker',
componentProps:{
showNow:true,
format:"YYYY-MM-DD HH:mm",
valueFormat:"YYYY-MM-DD HH:mm:ss",
showTime:{ defaultValue: dayjs('00:00', 'HH:mm') },
style: {
width: '100%',
},
},
colProps: colSpan,
},
数字框
{
label: t('public.table.overrPercentage') + ":",
field: 'overrPercentage',
component: 'InputNumber',
defaultValue: NumberEnum.ZERO,
componentProps: {
min: NumberEnum.ZERO,
max: NumberEnum.MAX,
precision: PrecisionEnum.MEASURE,
formatter: transformNum,
},
colProps: colSpan,
},
标志下拉框
{
label: t('public.table.enableFlag') + ":",
field: 'enableFlag',
component: 'Select',
defaultValue:DicYesNoNumberEnum.YES,
componentProps: {
options: dict.DicYesNoIntOptions,
showSearch: true,
optionFilterProp: 'label',
},
colProps: colSpan,
},
组合按钮
<Dropdown>
<a-button
type="primary">
{{ t('public.button.shipmentByCar') }}
<DownOutlined/>
</a-button>
<template #overlay>
<Menu>
<MenuItem v-auth="TransSchedulerAuth.SHIPMENT_BY_CAR" @click="handleSendScheduler">{{ t('public.button.shipmentByCar') }}</MenuItem>
<MenuItem v-auth="TransSchedulerAuth.CANCEL_SHIPMENT_BY_CAR" @click="handleCancelSendScheduler">{{ t('public.button.cancelShipment') }}</MenuItem>
</Menu>
</template>
</Dropdown>