修改问题
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