修改问题
parent
bbbfed1e64
commit
b2d4f2cb51
@ -0,0 +1,697 @@
|
|||||||
|
import { ref, unref } from 'vue'
|
||||||
|
import { BasicColumn, FormSchema } from '/@/components/Table'
|
||||||
|
import { getDictOption } from '/@/utils/dictUtil'
|
||||||
|
// 下拉框数据接口
|
||||||
|
import {
|
||||||
|
GetCarrierSelectList,
|
||||||
|
GetControllerClientList,
|
||||||
|
GetSupplierListByCode,
|
||||||
|
} from '/@/api/common'
|
||||||
|
import {
|
||||||
|
GetClientPortSelectList,
|
||||||
|
GetServiceSelectList,
|
||||||
|
GetVoynoSelectList,
|
||||||
|
GetVesselSelectList,
|
||||||
|
GetClientGoodsList,
|
||||||
|
GetCustomerServiceList,
|
||||||
|
|
||||||
|
} from '/@/views/operation/seaexport/api/BookingLedger'
|
||||||
|
// ai识别表单
|
||||||
|
export const aiForm: FormSchema[] = [
|
||||||
|
{
|
||||||
|
label: '发货人',
|
||||||
|
field: 'shipperContent',
|
||||||
|
component: 'InputTextArea',
|
||||||
|
colProps: { span: 12 },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '收货人',
|
||||||
|
field: 'consigneeContent',
|
||||||
|
component: 'InputTextArea',
|
||||||
|
colProps: { span: 12 },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '通知人',
|
||||||
|
field: 'notifyPartyContent',
|
||||||
|
component: 'InputTextArea',
|
||||||
|
colProps: { span: 12 },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'bookingRemark',
|
||||||
|
label: '订舱备注',
|
||||||
|
component: 'InputTextArea',
|
||||||
|
colProps: { span: 12 },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'marks',
|
||||||
|
label: `唛头`,
|
||||||
|
component: 'InputTextArea',
|
||||||
|
colProps: {span: 12,},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'goodsName',
|
||||||
|
label: '品名',
|
||||||
|
component: 'ApiSelect',
|
||||||
|
labelSlot: 'goodsName',
|
||||||
|
colProps: { span: 12 },
|
||||||
|
componentProps: ({ formModel }) => {
|
||||||
|
return {
|
||||||
|
api: GetClientGoodsList,
|
||||||
|
labelField: 'pinYinCode',
|
||||||
|
valueField: 'pinYinCode',
|
||||||
|
showName: 'goodName',
|
||||||
|
immediate: false,
|
||||||
|
mode: 'SECRET_COMBOBOX_MODE_DO_NOT_USE',
|
||||||
|
resultField: 'data',
|
||||||
|
onChange: (v, obj) => {
|
||||||
|
if (v && obj && obj.id) {
|
||||||
|
setTimeout(() => {
|
||||||
|
if (obj.goodName && obj.goodName.indexOf('(')) {
|
||||||
|
formModel.goodsName = obj.goodName.split('(')[0]
|
||||||
|
} else {
|
||||||
|
formModel.goodsName = obj.goodName
|
||||||
|
}
|
||||||
|
}, 100)
|
||||||
|
if (obj.hsCode) {
|
||||||
|
formModel.hsCode = obj.hsCode
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (!v && !obj?.id) {
|
||||||
|
formModel.goodsId = null
|
||||||
|
formModel.hsCode = null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'mblno',
|
||||||
|
label: '主提单号',
|
||||||
|
labelSlot: 'mblno',
|
||||||
|
component: 'Input',
|
||||||
|
colProps: { span: 6 },
|
||||||
|
componentProps: ({ formModel }) => {
|
||||||
|
return {
|
||||||
|
oninput: () => {
|
||||||
|
formModel.mblno = formModel.mblno.replace(/[\u4e00-\u9fa5]/ig, '')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '',
|
||||||
|
field: 'vesselId',
|
||||||
|
component: 'Input',
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '船名',
|
||||||
|
field: 'vessel',
|
||||||
|
component: 'ApiSelect',
|
||||||
|
colProps: { span: 6 },
|
||||||
|
componentProps: ({ formModel }) => {
|
||||||
|
return {
|
||||||
|
api: GetVesselSelectList,
|
||||||
|
labelField: 'vesselName',
|
||||||
|
valueField: 'vesselName',
|
||||||
|
resultField: 'data',
|
||||||
|
immediate: false,
|
||||||
|
mode: 'SECRET_COMBOBOX_MODE_DO_NOT_USE',
|
||||||
|
onChange: (e, obj) => {
|
||||||
|
if (e && obj) {
|
||||||
|
formModel.vesselId = obj.id
|
||||||
|
}
|
||||||
|
if (!e && !obj) {
|
||||||
|
formModel.vesselId = null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '海关航次',
|
||||||
|
field: 'voyno',
|
||||||
|
component: 'ApiSelect',
|
||||||
|
colProps: { span: 6 },
|
||||||
|
componentProps: () => {
|
||||||
|
return {
|
||||||
|
api: GetVoynoSelectList,
|
||||||
|
labelField: 'voyNo',
|
||||||
|
valueField: 'voyNo',
|
||||||
|
resultField: 'data',
|
||||||
|
immediate: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '',
|
||||||
|
field: 'carrierId',
|
||||||
|
component: 'Input',
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '船公司',
|
||||||
|
field: 'carrier',
|
||||||
|
labelSlot: 'carrierId',
|
||||||
|
component: 'ApiSelect',
|
||||||
|
colProps: { span: 6 },
|
||||||
|
componentProps: ({ formModel, formActionType }) => {
|
||||||
|
return {
|
||||||
|
api: GetCarrierSelectList,
|
||||||
|
labelField: 'pinYinCode',
|
||||||
|
showName: 'description',
|
||||||
|
valueField: 'ediCode',
|
||||||
|
resultField: 'data',
|
||||||
|
immediate: false,
|
||||||
|
onChange: (e, obj) => {
|
||||||
|
if (e && obj) {
|
||||||
|
formModel.carrierId = obj.id
|
||||||
|
}
|
||||||
|
if (!e && !obj) {
|
||||||
|
formModel.carrierId = ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'service',
|
||||||
|
label: '运输条款',
|
||||||
|
component: 'ApiSelect',
|
||||||
|
colProps: { span: 6 },
|
||||||
|
componentProps: ({ formModel }) => {
|
||||||
|
return {
|
||||||
|
api: GetServiceSelectList,
|
||||||
|
allowClear: true,
|
||||||
|
showSearch: true,
|
||||||
|
labelField: 'cnName',
|
||||||
|
valueField: 'cnName',
|
||||||
|
resultField: 'data',
|
||||||
|
filterOption: (input: string, option: any) => {
|
||||||
|
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||||
|
},
|
||||||
|
immediate: false,
|
||||||
|
onChange: (e, obj) => {
|
||||||
|
if (e && obj) {
|
||||||
|
formModel.serviceCode = obj.ediCode
|
||||||
|
}
|
||||||
|
if (!e && !obj) {
|
||||||
|
formModel.serviceCode = null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'serviceCode',
|
||||||
|
label: '',
|
||||||
|
component: 'Input',
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '',
|
||||||
|
field: 'customerId',
|
||||||
|
component: 'Input',
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '委托单位',
|
||||||
|
labelSlot: 'customerName',
|
||||||
|
field: 'customerName',
|
||||||
|
component: 'ApiSelect',
|
||||||
|
colProps: { span: 6 },
|
||||||
|
componentProps: ({ formModel, formActionType }) => {
|
||||||
|
return {
|
||||||
|
api: GetControllerClientList,
|
||||||
|
labelField: 'pinYinCode',
|
||||||
|
valueField: 'shortName',
|
||||||
|
showName: 'description',
|
||||||
|
resultField: 'data',
|
||||||
|
immediate: false,
|
||||||
|
onChange: (e, obj) => {
|
||||||
|
if (e && obj) {
|
||||||
|
formModel.customerId = obj.id
|
||||||
|
}
|
||||||
|
if (!e && !obj) {
|
||||||
|
formModel.customerId = ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'customerNum',
|
||||||
|
label: '客户编号',
|
||||||
|
component: 'Input',
|
||||||
|
required: false,
|
||||||
|
colProps: { span: 12 },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '',
|
||||||
|
field: 'goodsId',
|
||||||
|
component: 'Input',
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '',
|
||||||
|
field: 'ctnGoodsInfo',
|
||||||
|
component: 'Input',
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '装货港',
|
||||||
|
field: 'loadPortCode',
|
||||||
|
component: 'ApiSelect',
|
||||||
|
colProps: { span: 6 },
|
||||||
|
componentProps: ({ formModel, formActionType }) => {
|
||||||
|
return {
|
||||||
|
api: GetClientPortSelectList,
|
||||||
|
resultField: 'data',
|
||||||
|
labelField: 'pinYinCode',
|
||||||
|
valueField: 'ediCode',
|
||||||
|
showName: 'ediCode',
|
||||||
|
immediate: false,
|
||||||
|
onChange: (e, obj) => {
|
||||||
|
if (e && obj) {
|
||||||
|
formModel.loadPortId = obj.id
|
||||||
|
formModel.loadPort = obj.portName + ',' + obj.countryEnName
|
||||||
|
}
|
||||||
|
if (!e && !obj) {
|
||||||
|
formModel.loadPortId = null
|
||||||
|
formModel.loadPort = null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '卸货港',
|
||||||
|
field: 'dischargePortCode',
|
||||||
|
component: 'ApiSelect',
|
||||||
|
colProps: { span: 6 },
|
||||||
|
componentProps: ({ formModel, formActionType }) => {
|
||||||
|
return {
|
||||||
|
api: GetClientPortSelectList,
|
||||||
|
resultField: 'data',
|
||||||
|
labelField: 'pinYinCode',
|
||||||
|
showName: 'ediCode',
|
||||||
|
valueField: 'ediCode',
|
||||||
|
immediate: false,
|
||||||
|
onChange: (e, obj) => {
|
||||||
|
if (e && obj) {
|
||||||
|
formModel.dischargePortId = obj.id
|
||||||
|
formModel.dischargePort = obj.portName + ',' + obj.countryEnName
|
||||||
|
// 带出交货地
|
||||||
|
formModel.deliveryPlaceId = obj.id
|
||||||
|
formModel.deliveryPlace = obj.portName + ',' + obj.countryEnName
|
||||||
|
formModel.deliveryPlaceCode = e
|
||||||
|
}
|
||||||
|
if (!e && !obj) {
|
||||||
|
formModel.dischargePortId = null
|
||||||
|
formModel.dischargePort = null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '交货地',
|
||||||
|
field: 'deliveryPlaceCode',
|
||||||
|
component: 'ApiSelect',
|
||||||
|
colProps: { span: 6 },
|
||||||
|
componentProps: ({ formModel }) => {
|
||||||
|
return {
|
||||||
|
api: GetClientPortSelectList,
|
||||||
|
resultField: 'data',
|
||||||
|
labelField: 'pinYinCode',
|
||||||
|
showName: 'ediCode',
|
||||||
|
valueField: 'ediCode',
|
||||||
|
immediate: false,
|
||||||
|
onChange: (e, obj) => {
|
||||||
|
if (e && obj) {
|
||||||
|
formModel.deliveryPlaceId = obj.id
|
||||||
|
formModel.deliveryPlace = obj.portName + ',' + obj.countryEnName
|
||||||
|
}
|
||||||
|
if (!e && !obj) {
|
||||||
|
formModel.deliveryPlaceId = null
|
||||||
|
formModel.deliveryPlace = null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '收货地',
|
||||||
|
field: 'receiptPlaceCode',
|
||||||
|
component: 'ApiSelect',
|
||||||
|
colProps: { span: 6 },
|
||||||
|
componentProps: ({ formModel }) => {
|
||||||
|
return {
|
||||||
|
api: GetClientPortSelectList,
|
||||||
|
resultField: 'data',
|
||||||
|
immediate: false,
|
||||||
|
labelField: 'pinYinCode',
|
||||||
|
valueField: 'ediCode',
|
||||||
|
showName: 'ediCode',
|
||||||
|
onChange: (e, obj) => {
|
||||||
|
if (e && obj) {
|
||||||
|
formModel.receiptPlace = obj.portName + ',' + obj.countryEnName
|
||||||
|
formModel.receiptPlaceId = obj.id
|
||||||
|
}
|
||||||
|
if (!e && !obj) {
|
||||||
|
formModel.receiptPlace = null
|
||||||
|
formModel.receiptPlaceId = null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '',
|
||||||
|
field: 'loadPort',
|
||||||
|
component: 'Input',
|
||||||
|
required: false,
|
||||||
|
colProps: { span: 6 },
|
||||||
|
componentProps: ({ formModel }) => {
|
||||||
|
return {
|
||||||
|
oninput: () => {
|
||||||
|
formModel.loadPort = formModel.loadPort.replace(/[\u4e00-\u9fa5]/ig, '')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '',
|
||||||
|
field: 'loadPortId',
|
||||||
|
component: 'Input',
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '',
|
||||||
|
field: 'dischargePort',
|
||||||
|
component: 'Input',
|
||||||
|
required: false,
|
||||||
|
colProps: { span: 6 },
|
||||||
|
componentProps: ({ formModel }) => {
|
||||||
|
return {
|
||||||
|
oninput: () => {
|
||||||
|
formModel.dischargePort = formModel.dischargePort.replace(/[\u4e00-\u9fa5]/ig, '')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '',
|
||||||
|
field: 'dischargePortId',
|
||||||
|
component: 'Input',
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '',
|
||||||
|
field: 'deliveryPlace',
|
||||||
|
component: 'Input',
|
||||||
|
required: false,
|
||||||
|
colProps: { span: 6 },
|
||||||
|
componentProps: ({ formModel }) => {
|
||||||
|
return {
|
||||||
|
oninput: () => {
|
||||||
|
formModel.deliveryPlace = formModel.deliveryPlace.replace(/[\u4e00-\u9fa5]/ig, '')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '',
|
||||||
|
field: 'deliveryPlaceId',
|
||||||
|
component: 'Input',
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '',
|
||||||
|
field: 'receiptPlace',
|
||||||
|
component: 'Input',
|
||||||
|
required: false,
|
||||||
|
colProps: { span: 6 },
|
||||||
|
componentProps: ({ formModel }) => {
|
||||||
|
return {
|
||||||
|
oninput: () => {
|
||||||
|
formModel.receiptPlace = formModel.receiptPlace.replace(/[\u4e00-\u9fa5]/ig, '')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '',
|
||||||
|
field: 'receiptPlaceId',
|
||||||
|
component: 'Input',
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'bookingNo',
|
||||||
|
label: '订舱编号',
|
||||||
|
labelSlot: 'bookingNo',
|
||||||
|
component: 'Input',
|
||||||
|
colProps: { span: 6 },
|
||||||
|
componentProps: ({ formModel }) => {
|
||||||
|
return {
|
||||||
|
oninput: () => {
|
||||||
|
formModel.bookingNo = formModel.bookingNo.replace(/[\u4e00-\u9fa5]/ig, '')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'etd',
|
||||||
|
label: '开船日期',
|
||||||
|
labelSlot: 'etd',
|
||||||
|
component: 'DatePicker',
|
||||||
|
colProps: { span: 6 },
|
||||||
|
componentProps: {
|
||||||
|
allowClear: true,
|
||||||
|
valueFormat: 'YYYY-MM-DD'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'closingDate',
|
||||||
|
label: '截港时间',
|
||||||
|
component: 'DatePicker',
|
||||||
|
colProps: { span: 6 },
|
||||||
|
componentProps: {
|
||||||
|
showTime: true,
|
||||||
|
allowClear: true,
|
||||||
|
valueFormat: 'YYYY-MM-DD HH',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'eta',
|
||||||
|
label: '预抵日期',
|
||||||
|
component: 'DatePicker',
|
||||||
|
colProps: { span: 6 },
|
||||||
|
componentProps: {
|
||||||
|
allowClear: true,
|
||||||
|
valueFormat: 'YYYY-MM-DD',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'openPortDate',
|
||||||
|
label: '截VGM时间',
|
||||||
|
component: 'DatePicker',
|
||||||
|
colProps: { span: 6 },
|
||||||
|
componentProps: {
|
||||||
|
allowClear: true,
|
||||||
|
showTime: true,
|
||||||
|
valueFormat: 'YYYY-MM-DD HH:mm'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'closeDocDate',
|
||||||
|
label: '截单时间',
|
||||||
|
component: 'DatePicker',
|
||||||
|
colProps: { span: 6 },
|
||||||
|
componentProps: {
|
||||||
|
showTime: true,
|
||||||
|
allowClear: true,
|
||||||
|
valueFormat: 'YYYY-MM-DD HH',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '签单地代码',
|
||||||
|
field: 'issuePlaceCode',
|
||||||
|
component: 'ApiSelect',
|
||||||
|
colProps: { span: 6 },
|
||||||
|
componentProps: ({ formModel }) => {
|
||||||
|
return {
|
||||||
|
api: GetClientPortSelectList,
|
||||||
|
resultField: 'data',
|
||||||
|
labelField: 'pinYinCode',
|
||||||
|
valueField: 'ediCode',
|
||||||
|
showName: 'ediCode',
|
||||||
|
immediate: false,
|
||||||
|
onChange: (e, obj) => {
|
||||||
|
if (e && obj) {
|
||||||
|
formModel.issuePlace = obj.portName
|
||||||
|
formModel.issuePlaceId = obj.id
|
||||||
|
}
|
||||||
|
if (!e && !obj) {
|
||||||
|
formModel.issuePlace = null
|
||||||
|
formModel.issuePlaceId = null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '签单地点',
|
||||||
|
field: 'issuePlace',
|
||||||
|
component: 'Input',
|
||||||
|
required: false,
|
||||||
|
colProps: { span: 6 },
|
||||||
|
componentProps: ({ formModel }) => {
|
||||||
|
return {
|
||||||
|
oninput: () => {
|
||||||
|
formModel.issuePlace = formModel.issuePlace.replace(/[\u4e00-\u9fa5]/ig, '')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '',
|
||||||
|
field: 'issuePlaceId',
|
||||||
|
component: 'Input',
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'serviceContractNo',
|
||||||
|
label: '服务合同号',
|
||||||
|
component: 'Input',
|
||||||
|
required: false,
|
||||||
|
dynamicDisabled: false,
|
||||||
|
colProps: { span: 6 },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '',
|
||||||
|
field: 'forwarderId',
|
||||||
|
component: 'Input',
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '订舱口',
|
||||||
|
field: 'forwarder',
|
||||||
|
component: 'ApiSelect',
|
||||||
|
colProps: { span: 6 },
|
||||||
|
componentProps: ({ formModel }) => {
|
||||||
|
return {
|
||||||
|
api: GetSupplierListByCode,
|
||||||
|
params: { code: 'booking' },
|
||||||
|
labelField: 'pinYinCode',
|
||||||
|
valueField: 'shortName',
|
||||||
|
showName: 'description',
|
||||||
|
resultField: 'data',
|
||||||
|
immediate: false,
|
||||||
|
onChange: (e, obj) => {
|
||||||
|
if (e && obj) {
|
||||||
|
formModel.forwarderId = obj.id
|
||||||
|
}
|
||||||
|
if (!e && !obj) {
|
||||||
|
formModel.forwarderId = ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '',
|
||||||
|
field: 'shipAgencyId',
|
||||||
|
component: 'Input',
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '船代',
|
||||||
|
field: 'shipAgency',
|
||||||
|
component: 'ApiSelect',
|
||||||
|
labelSlot: 'shipAgencyId',
|
||||||
|
colProps: { span: 6 },
|
||||||
|
componentProps: ({ formModel }) => {
|
||||||
|
return {
|
||||||
|
api: GetSupplierListByCode,
|
||||||
|
params: { code: 'shipagency' },
|
||||||
|
labelField: 'pinYinCode',
|
||||||
|
showName: 'description',
|
||||||
|
valueField: 'shortName',
|
||||||
|
resultField: 'data',
|
||||||
|
immediate: false,
|
||||||
|
onChange: (e, obj) => {
|
||||||
|
if (e && obj) {
|
||||||
|
formModel.shipAgencyId = obj.id
|
||||||
|
}
|
||||||
|
if (!e && !obj) {
|
||||||
|
formModel.shipAgencyId = ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '',
|
||||||
|
field: 'yardId',
|
||||||
|
component: 'Input',
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'yard',
|
||||||
|
label: '场站',
|
||||||
|
component: 'ApiSelect',
|
||||||
|
colProps: { span: 6 },
|
||||||
|
componentProps: ({ formModel }) => {
|
||||||
|
return {
|
||||||
|
api: GetSupplierListByCode,
|
||||||
|
params: { code: 'yard' },
|
||||||
|
labelField: 'pinYinCode',
|
||||||
|
showName: 'description',
|
||||||
|
valueField: 'shortName',
|
||||||
|
resultField: 'data',
|
||||||
|
immediate: false,
|
||||||
|
onChange: (e, obj) => {
|
||||||
|
if (e && obj) {
|
||||||
|
formModel.yardId = obj.id
|
||||||
|
}
|
||||||
|
if (!e && !obj) {
|
||||||
|
formModel.yardId = ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'customerService',
|
||||||
|
label: '',
|
||||||
|
component: 'Input',
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '客服',
|
||||||
|
field: 'customerServiceName',
|
||||||
|
component: 'ApiSelect',
|
||||||
|
colProps: { span: 6 },
|
||||||
|
componentProps: ({ formModel }) => {
|
||||||
|
return {
|
||||||
|
api: GetCustomerServiceList,
|
||||||
|
labelField: 'pinYinCode',
|
||||||
|
valueField: 'userName',
|
||||||
|
showName: 'userName',
|
||||||
|
allowClear: true,
|
||||||
|
showSearch: true,
|
||||||
|
immediate: false,
|
||||||
|
resultField: 'data',
|
||||||
|
onChange: (e, obj) => {
|
||||||
|
if (e && obj) {
|
||||||
|
formModel.customerService = obj.id
|
||||||
|
}
|
||||||
|
if (!e && !obj) {
|
||||||
|
formModel.customerService = null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
@ -0,0 +1,177 @@
|
|||||||
|
import { BasicColumn, FormSchema } from '/@/components/Table'
|
||||||
|
export const searchFormSchema: FormSchema[] = [
|
||||||
|
{
|
||||||
|
field: 'statusSKUName',
|
||||||
|
label: '状态名称',
|
||||||
|
component: 'Input',
|
||||||
|
colProps: { span: 4 },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'createdTime',
|
||||||
|
label: '创建时间',
|
||||||
|
component: 'RangePicker',
|
||||||
|
required: false,
|
||||||
|
dynamicDisabled: false,
|
||||||
|
colProps: { span: 4 },
|
||||||
|
componentProps: {
|
||||||
|
allowClear: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'isEnable',
|
||||||
|
label: '是否启用',
|
||||||
|
component: 'Select',
|
||||||
|
colProps: { span: 4 },
|
||||||
|
componentProps: {
|
||||||
|
options: [{ label: '是', value: '1' }, { label: '否', value: '0' }],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'createUser',
|
||||||
|
label: '创建人',
|
||||||
|
component: 'Input',
|
||||||
|
colProps: { span: 4 },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'statusSKUNote',
|
||||||
|
label: '状态说明',
|
||||||
|
component: 'Input',
|
||||||
|
colProps: { span: 4 },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'updatedTime',
|
||||||
|
label: '更新时间',
|
||||||
|
component: 'RangePicker',
|
||||||
|
required: false,
|
||||||
|
dynamicDisabled: false,
|
||||||
|
colProps: { span: 4 },
|
||||||
|
componentProps: {
|
||||||
|
allowClear: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'updatedUserName',
|
||||||
|
label: '更新人',
|
||||||
|
component: 'Input',
|
||||||
|
colProps: { span: 4 },
|
||||||
|
},
|
||||||
|
|
||||||
|
]
|
||||||
|
|
||||||
|
//列表
|
||||||
|
export const columns: BasicColumn[] = [
|
||||||
|
{
|
||||||
|
title: '状态名称',
|
||||||
|
dataIndex: 'statusSKUName',
|
||||||
|
width: 120,
|
||||||
|
align: 'left',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '状态代码',
|
||||||
|
dataIndex: 'statusSKUCode',
|
||||||
|
width: 120,
|
||||||
|
align: 'left',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '顺序号',
|
||||||
|
dataIndex: 'sortNo',
|
||||||
|
width: 120,
|
||||||
|
align: 'left',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '说明',
|
||||||
|
dataIndex: 'statusSKUNote',
|
||||||
|
width: 120,
|
||||||
|
align: 'left',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '显示颜色',
|
||||||
|
dataIndex: 'backgroundColor',
|
||||||
|
width: 120,
|
||||||
|
align: 'left',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '是否启用',
|
||||||
|
dataIndex: 'isEnable',
|
||||||
|
width: 120,
|
||||||
|
align: 'left',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '创建日期',
|
||||||
|
dataIndex: 'createdTime',
|
||||||
|
width: 120,
|
||||||
|
align: 'left',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '创建人',
|
||||||
|
dataIndex: 'createdUserName',
|
||||||
|
width: 120,
|
||||||
|
align: 'left',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '更新日期',
|
||||||
|
dataIndex: 'updatedTime',
|
||||||
|
width: 120,
|
||||||
|
align: 'left',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '更新人',
|
||||||
|
dataIndex: 'updatedUserName',
|
||||||
|
width: 120,
|
||||||
|
align: 'left',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
export const detailForm: FormSchema[] = [
|
||||||
|
{
|
||||||
|
field: 'pkId',
|
||||||
|
label: '',
|
||||||
|
component: 'Input',
|
||||||
|
show: false,
|
||||||
|
colProps: { span: 24 },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'statusSKUName',
|
||||||
|
label: '状态名称',
|
||||||
|
required: true,
|
||||||
|
rules: [{ message: '请输入状态名称' }],
|
||||||
|
component: 'Input',
|
||||||
|
colProps: { span: 24 },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'statusSKUCode',
|
||||||
|
label: '状态代码',
|
||||||
|
required: true,
|
||||||
|
rules: [{ message: '请输入状态代码' }],
|
||||||
|
component: 'Input',
|
||||||
|
colProps: { span: 24 },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'backgroundColor',
|
||||||
|
label: '显示颜色',
|
||||||
|
required: true,
|
||||||
|
rules: [{ message: '请选择颜色' }],
|
||||||
|
defaultValue: '#000000',
|
||||||
|
component: 'Input',
|
||||||
|
slot: 'color',
|
||||||
|
colProps: { span: 24 },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'sortNo',
|
||||||
|
label: '排序',
|
||||||
|
component: 'Input',
|
||||||
|
colProps: { span: 24 },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'statusSKUNote',
|
||||||
|
label: '状态说明',
|
||||||
|
required: true,
|
||||||
|
rules: [{ message: '请输入状态说明' }],
|
||||||
|
component: 'Input',
|
||||||
|
colProps: { span: 24 },
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
]
|
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,243 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<BasicTable class="ds-table" @register="registerTable" @row-dbClick="(e) => { GoDetailed(true, e) }
|
||||||
|
">
|
||||||
|
<template #tableTitle>
|
||||||
|
<div class="buttonGroup ">
|
||||||
|
<div class="ds-h-aciton-btns-fee">
|
||||||
|
<a-tooltip placement="top" :mouseEnterDelay="0.5">
|
||||||
|
<template #title>
|
||||||
|
<span>新建</span>
|
||||||
|
</template>
|
||||||
|
<span class="ds-action-svg-btn" @click="GoDetailed(false)">
|
||||||
|
<img src="../../../assets/svg/infoclient/xinjian.svg" class="SvgImg" />
|
||||||
|
</span>
|
||||||
|
</a-tooltip>
|
||||||
|
<a-tooltip placement="top" :mouseEnterDelay="0.5">
|
||||||
|
<template #title>
|
||||||
|
<span>删除</span>
|
||||||
|
</template>
|
||||||
|
<span class="ds-action-svg-btn">
|
||||||
|
<a-popconfirm title="确定删除当前选中数据？" @confirm="FnDel" ok-text="是" cancel-text="否">
|
||||||
|
<img src="../../../assets/svg/infoclient/shanchu.svg" class="SvgImg" />
|
||||||
|
</a-popconfirm>
|
||||||
|
</span>
|
||||||
|
</a-tooltip>
|
||||||
|
<a-tooltip placement="top" :mouseEnterDelay="0.5">
|
||||||
|
<template #title>
|
||||||
|
<span>启用</span>
|
||||||
|
</template>
|
||||||
|
<span class="ds-action-svg-btn" @click="handleApply">
|
||||||
|
<img src="../../../assets/svg/infoclient/tijiao.svg" class="SvgImg" />
|
||||||
|
</span>
|
||||||
|
</a-tooltip>
|
||||||
|
<a-tooltip placement="top" :mouseEnterDelay="0.5">
|
||||||
|
<template #title>
|
||||||
|
<span>取消启用</span>
|
||||||
|
</template>
|
||||||
|
<span class="ds-action-svg-btn" @click="handleWithdraw">
|
||||||
|
<img src="../../../assets/svg/infoclient/chexiaotijiao.svg" class="SvgImg" />
|
||||||
|
</span>
|
||||||
|
</a-tooltip>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template v-slot:bodyCell="{ column, record }">
|
||||||
|
<template v-if="column.key === 'action'">
|
||||||
|
<TableAction :actions="[
|
||||||
|
{
|
||||||
|
icon: 'clarity:note-edit-line',
|
||||||
|
tooltip: '编辑',
|
||||||
|
onClick: () => {
|
||||||
|
GoDetailed(true, record)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]" />
|
||||||
|
</template>
|
||||||
|
<template v-if="column.key === 'isEnable'">
|
||||||
|
<span v-if="record.isEnable == 1">是</span>
|
||||||
|
<span v-if="record.isEnable == 0">否</span>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</BasicTable>
|
||||||
|
<editForm ref="editFormRef" ></editForm>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { GetList, Save, SaveAndEnable, SetUnEnable, SetEnable, Delete } from './api.js'
|
||||||
|
import { BasicTable, useTable, TableAction } from '/@/components/Table'
|
||||||
|
import { BasicForm, useForm } from '/@/components/Form/index'
|
||||||
|
import { columns, searchFormSchema, detailForm } from './columns'
|
||||||
|
import { useMessage } from '/@/hooks/web/useMessage'
|
||||||
|
import editForm from './detail.vue'
|
||||||
|
const { createMessage } = useMessage()
|
||||||
|
import { useGo } from '/@/hooks/web/usePage'
|
||||||
|
const go = useGo()
|
||||||
|
import { formatParams } from '/@/hooks/web/common'
|
||||||
|
const [registerTable, { reload, clearSelectedRowKeys, getSelectRows, getRawDataSource }] = useTable({
|
||||||
|
api: async (p) => {
|
||||||
|
const res: API.DataResult = await GetList(p)
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
resolve({ data: [...res.data], total: res.count })
|
||||||
|
})
|
||||||
|
},
|
||||||
|
beforeFetch: (p) => {
|
||||||
|
return formatParams(p)
|
||||||
|
},
|
||||||
|
columns,
|
||||||
|
formConfig: {
|
||||||
|
labelWidth: 120,
|
||||||
|
schemas: searchFormSchema,
|
||||||
|
useAdvancedSearch: true,
|
||||||
|
},
|
||||||
|
pagination: true,
|
||||||
|
striped: true,
|
||||||
|
useSearchForm: true,
|
||||||
|
resizeHeightOffset: 15,
|
||||||
|
showTableSetting: true,
|
||||||
|
bordered: true,
|
||||||
|
showIndexColumn: true,
|
||||||
|
indexColumnProps: {
|
||||||
|
width: 60,
|
||||||
|
},
|
||||||
|
canResize: true,
|
||||||
|
immediate: true,
|
||||||
|
actionColumn: {
|
||||||
|
width: 80,
|
||||||
|
title: '操作',
|
||||||
|
dataIndex: 'action',
|
||||||
|
fixed: 'right',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
const editFormRef = ref()
|
||||||
|
const [registerForm, { resetFields, setFieldsValue, validate, getFieldsValue, }] = useForm({
|
||||||
|
labelWidth: 100,
|
||||||
|
schemas: detailForm,
|
||||||
|
showActionButtonGroup: false,
|
||||||
|
})
|
||||||
|
function GoDetailed(type, row) {
|
||||||
|
if (!type) {
|
||||||
|
editFormRef.value.init()
|
||||||
|
} else {
|
||||||
|
// open.value = true
|
||||||
|
// const newRow = JSON.parse(JSON.stringify(row))
|
||||||
|
// setTimeout(() => {
|
||||||
|
// setFieldsValue(newRow)
|
||||||
|
// }, 10)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const loading = ref(false)
|
||||||
|
|
||||||
|
function FnDel() {
|
||||||
|
let ids = []
|
||||||
|
ids = getSelectRows().map((item) => {
|
||||||
|
return item.pkId
|
||||||
|
})
|
||||||
|
if (ids.length == 0) {
|
||||||
|
createMessage.error('请选择数据')
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
Delete(ids).then(res => {
|
||||||
|
if (res.succeeded) {
|
||||||
|
createMessage.success('操作成功')
|
||||||
|
clearSelectedRowKeys()
|
||||||
|
reload()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
function handleWithdraw() {
|
||||||
|
let ids = []
|
||||||
|
ids = getSelectRows().map((item) => {
|
||||||
|
return item.pkId
|
||||||
|
})
|
||||||
|
if (ids.length == 0) {
|
||||||
|
createMessage.error('请选择数据')
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
SetUnEnable(ids).then(res => {
|
||||||
|
if (res.succeeded) {
|
||||||
|
createMessage.success('操作成功')
|
||||||
|
clearSelectedRowKeys()
|
||||||
|
reload()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
function handleApply() {
|
||||||
|
let ids = []
|
||||||
|
ids = getSelectRows().map((item) => {
|
||||||
|
return item.pkId
|
||||||
|
})
|
||||||
|
if (ids.length == 0) {
|
||||||
|
createMessage.error('请选择数据')
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
SetEnable(ids).then(res => {
|
||||||
|
if (res.succeeded) {
|
||||||
|
createMessage.success('操作成功')
|
||||||
|
clearSelectedRowKeys()
|
||||||
|
reload()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.topTable {
|
||||||
|
height: calc(100vh - 145px);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.tableTitleBox {
|
||||||
|
.ant-btn-link {
|
||||||
|
border-radius: 2px;
|
||||||
|
background: rgba(245, 249, 252, 1);
|
||||||
|
margin-left: 13px;
|
||||||
|
color: #000;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.SvgImg {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
margin: 6.8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttonGroup {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.ds-h-aciton-btns-fee {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 38px;
|
||||||
|
padding-right: 10px;
|
||||||
|
border-right: 1px solid rgb(194, 188, 188);
|
||||||
|
|
||||||
|
.ds-action-svg-btn {
|
||||||
|
display: inline-block;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
border-radius: 2px;
|
||||||
|
margin-right: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
.next {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ds-action-svg-btn:hover {
|
||||||
|
box-shadow: 0px 2px 4px #cad1db;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vben-svg-icon {
|
||||||
|
margin: 6.8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue