表单样式调整

szh-new
lijingjia 4 months ago
parent f238262aa7
commit 866bfdaac8

@ -6,22 +6,25 @@
<template>
<div>
<a-modal
class="ds-form-detail ds-email-modal ds-modal-small"
class="ds-email-modal ds-modal-small"
v-model:visible="visible"
v-if="visible"
title="邮件发送"
width="640px"
:maskClosable="false"
>
<a-spin :spinning="loading">
<a-form
class="mt10"
ref="form"
layout="vertical"
autocomplete="off"
class="ant-form-small"
:model="formData"
size="small"
:rules="rules"
>
<a-form-item
label="收件人"
name="sendTo"
>
<a-select
v-model:value="formData.sendTo"
@ -36,6 +39,7 @@
</a-form-item>
<a-form-item
label="抄送人"
name="ccTo"
>
<a-select
v-model:value="formData.ccTo"
@ -60,7 +64,7 @@
:maxCount="10"
:showUploadList="false"
accept=".xlsm,.xlsx,.xls,.pdf,.txt,.pms,.jpeg,.png"
@remove="handleRemove"
@change="fileChange"
>
<a-button :loading="floading" type="link" size="mini" class="pl0">
<span v-show="!floading" class="iconfont icon-fujian1"></span>
@ -85,7 +89,7 @@
</a-form>
</a-spin>
<template #footer>
<a-button @click="send" type="primary">发送</a-button>
<a-button :loading="sloading" @click="send" type="primary">发送</a-button>
</template>
</a-modal>
</div>
@ -110,7 +114,7 @@
// id
const id = ref()
//
const fileList = ref(['asd.jpg'])
const fileList = ref([])
//
const formData = reactive({
sendTo: [],
@ -118,6 +122,16 @@
title: '',
body: ''
})
//
const rules = {
sendTo: [
{
required: true,
message: '请选择收件人',
trigger: 'change'
}
]
}
//
const visible = ref(false)
const loading = ref(false)
@ -138,21 +152,24 @@
}
// loading
const floading = ref(false)
//
function beforeUpload(file) {
const fileChange = (file) => {
const postData = new FormData()
postData.append('formCollection', file)
postData.append('formCollection', file.file)
postData.append('linkId', id.value)
floading.value = true
AddMultiFiles(postData).then(res => {
floading.value = false
console.log(res)
fileList.value.push(res.data)
createMessage.success('上传成功!')
}).catch(() => {
floading.value = false
createMessage.error('上传失败!')
})
}
//
function beforeUpload() {
return false
}
//
const getTemFile = () => {
const userStore = useUserStore()
@ -164,30 +181,45 @@
jsonDataStr: ''
}
GetOpenJsonPrintInfoByTemplateCode(postData).then(res => {
console.log(res)
fileList.value.push(res.data)
})
}
// (ids: idididcidid)
const init = (ids, data) => {
visible.value = true
id.value = data.id
getEmail(ids)
if (data.forwarderId) {
//
const getReceiveInfn = (clientId, cid) => {
if (clientId) {
//
GetClientInfoWithContact({ clientId: data.forwarderId }).then(res => {
loading.value = true
GetClientInfoWithContact({ clientId }).then(res => {
const { data } = res
loading.value = false
const list = data.clientContactList
receiveList.value = []
console.log(list)
if (list && list.length) {
list.forEach(item => {
if (item.carrierId == data.carrierId && item.email) {
if (item.carrierId == cid && item.email) {
receiveList.value.push(item)
}
})
if (!receiveList.value.length) {
createMessage.warning('未获取到收件人邮箱信息,请到往来单位进行维护!')
}
}
})
}
}
// (ids: iddata)
const init = (ids, data) => {
fileList.value = []
formData.sendTo = []
formData.ccTo = []
formData.title = ''
formData.body = ''
visible.value = true
id.value = data.id
//
getEmail(ids)
//
getReceiveInfn(data.forwarderId, data.carrierId)
//
getTemFile()
//
@ -196,18 +228,33 @@
const title = (data.loadPort ? data.loadPort + '-' : '') + (data.destination ? data.destination + ' ' : '') + (data.cntrtotal ? data.cntrtotal + ' ' : '') + day
formData.title = title
}
const sloading = ref(false)
const form = ref(null)
//
const send = () => {
const sendTo = String(formData.sendTo)
const ccTo = String(formData.ccTo)
const postData = {
...formData,
fileList
sendTo,
ccTo,
title: formData.title,
body: formData.body,
fileList: String(fileList.value)
}
form.value.validate().then(() => {
sloading.value = true
SendShippingOrderEmail(postData).then(res => {
console.log(res)
sloading.value = false
})
})
.catch(error => {
console.log('error', error);
})
}
//
const deleteFile = (index) => {
fileList.value.splice(index, 1)
visible.value = false
}
defineExpose({
@ -217,8 +264,9 @@
<style lang="less">
.ds-email-modal {
.file-box {
min-height: 36px;
min-height: 32px;
align-items: center;
margin-bottom: 4px;
}
.file-item {
display: inline-block;

@ -90,6 +90,13 @@
}
}
}
// 校验错误信息
.ant-form-item-explain {
min-height: 18px;
.ant-form-item-explain-error {
font-size: 12px;
}
}
}
}
}

@ -169,8 +169,9 @@ h5 {
margin-left: 10px !important;
}
// 表单容器
.ds-card {
padding: 10px 20px;
padding: 8px 20px 11px;
background-color: #ffffff;
border: 0.7px solid #E8EBED;
}

@ -208,120 +208,7 @@ export const columns: BasicColumn[] = [
},
]
export const formSchema: FormSchema[] = [
{
label: '主键Id',
field: 'id',
component: 'Input',
defaultValue: '',
show: false,
},
{
label: '业务Id',
field: 'businessId',
component: 'Input',
defaultValue: '',
show: false,
},
{
label: 'TO',
field: 'toName',
component: 'Input',
defaultValue: '',
colProps: {
span: 12
},
},
{
label: 'ATTN',
field: 'toAttn',
component: 'Input',
defaultValue: '',
colProps: {
span: 6
},
},
{
label: 'ATTN 电话',
field: 'toAttnTel',
component: 'Input',
defaultValue: '',
colProps: {
span: 6
},
},
{
label: 'ATTN 传真',
field: 'toAttnFax',
component: 'Input',
defaultValue: '',
colProps: {
span: 6
},
},
{
label: 'ATTN邮箱',
field: 'toAttnEmail',
component: 'Input',
defaultValue: '',
colProps: {
span: 6
},
},
{
label: 'FROM',
field: 'fromName',
component: 'Input',
defaultValue: '',
colProps: {
span: 6
},
},
{
label: 'FROM 电话',
field: 'fromTel',
component: 'Input',
defaultValue: '',
colProps: {
span: 6
},
},
{
label: 'FROM 传真',
field: 'fromFax',
component: 'Input',
defaultValue: '',
colProps: {
span: 6
},
},
{
label: 'FROM 手机号',
field: 'fromMobile',
component: 'Input',
defaultValue: '',
colProps: {
span: 6
},
},
{
label: 'FROM 邮箱',
field: 'fromEmail',
component: 'Input',
defaultValue: '',
colProps: {
span: 6
},
},
{
field: 'divider-selects',
component: 'Divider',
label: '入货通知详细信息',
colProps: {
span: 24,
},
},
export const formSchema1: FormSchema[] = [
{
label: '提箱小票地址',
field: 'pickReceiptUrl',
@ -498,18 +385,6 @@ export const formSchema: FormSchema[] = [
span: 6,
},
},
{
label: '货物描述',
field: 'description',
component: 'InputTextArea',
defaultValue: '',
colProps: {
span: 18,
},
componentProps: {
rows: 3,
},
},
{
label: '提箱场站名称',
field: 'yardName',
@ -658,15 +533,6 @@ export const formSchema: FormSchema[] = [
span: 6,
},
},
{
label: '',
field: 'Space3',
component: 'Space',
defaultValue: '',
colProps: {
span: 6,
},
},
{
label: '入货地址',
field: 'receiveAddress',
@ -762,5 +628,112 @@ export const formSchema: FormSchema[] = [
componentProps: {
rows: 3,
},
}
]
export const formSchema: FormSchema[] = [
{
label: '主键Id',
field: 'id',
component: 'Input',
defaultValue: '',
show: false,
},
{
label: '业务Id',
field: 'businessId',
component: 'Input',
defaultValue: '',
show: false,
},
{
label: 'TO',
field: 'toName',
component: 'Input',
defaultValue: '',
colProps: {
span: 12
},
},
{
label: 'ATTN',
field: 'toAttn',
component: 'Input',
defaultValue: '',
colProps: {
span: 6
},
},
{
label: 'ATTN 电话',
field: 'toAttnTel',
component: 'Input',
defaultValue: '',
colProps: {
span: 6
},
},
{
label: 'ATTN 传真',
field: 'toAttnFax',
component: 'Input',
defaultValue: '',
colProps: {
span: 6
},
},
{
label: 'ATTN邮箱',
field: 'toAttnEmail',
component: 'Input',
defaultValue: '',
colProps: {
span: 6
},
},
{
label: 'FROM',
field: 'fromName',
component: 'Input',
defaultValue: '',
colProps: {
span: 6
},
},
{
label: 'FROM 电话',
field: 'fromTel',
component: 'Input',
defaultValue: '',
colProps: {
span: 6
},
},
{
label: 'FROM 传真',
field: 'fromFax',
component: 'Input',
defaultValue: '',
colProps: {
span: 6
},
},
{
label: 'FROM 邮箱',
field: 'fromEmail',
component: 'Input',
defaultValue: '',
colProps: {
span: 6
},
},
{
label: 'FROM 手机号',
field: 'fromMobile',
component: 'Input',
defaultValue: '',
colProps: {
span: 6
},
}
]

@ -120,6 +120,9 @@
YardEdit.value.setFieldsValue({
...record
})
YardEdit.value.setFieldsValue1({
...record
})
}
//
function FnClickDel() {
@ -148,9 +151,3 @@
await reload()
}
</script>
<style lang="less">
.OPCol {
height: 60vh;
overflow-y: hidden;
}
</style>

@ -5,19 +5,27 @@
-->
<template>
<div class="MainBox">
<a-spin :spinning="loading">
<div class="buttonGroup">
<a-button type="link" @click="handleSave" class="pl0">
<a-button v-repeat type="link" @click="handleSave" class="pl0">
<span class="iconfont icon-baocun"></span>
保存
</a-button>
</div>
<BasicForm class="Content" @register="registerForm" />
<div class="ds-card">
<BasicForm @register="registerForm" />
</div>
<div class="ds-card mt15">
<h4>入货通知详细信息</h4>
<BasicForm @register="registerForm1" />
</div>
</a-spin>
</div>
</template>
<script lang="ts" setup>
import { ref, watch, defineExpose } from 'vue'
import { BasicForm, useForm } from '/@/components/Form/index'
import { formSchema } from './OpBusinessYardColumns'
import { formSchema, formSchema1 } from './OpBusinessYardColumns'
import { EditOpBusinessYard, GetOpBusinessYardInfo } from './LetterApi'
import { useMessage } from '/@/hooks/web/useMessage'
import { propTypes } from '/@/utils/propTypes'
@ -38,9 +46,13 @@
await setFieldsValue({
...res.data,
})
setFieldsValue1({
...res.data,
})
}
} else {
resetFields()
resetFields1()
}
},
)
@ -52,11 +64,17 @@
schemas: formSchema,
showActionButtonGroup: false,
})
const [registerForm1, { resetFields: resetFields1, setFieldsValue: setFieldsValue1, validate: validate1, updateSchema: updateSchema1 }] = useForm({
labelWidth: 100,
schemas: formSchema1,
showActionButtonGroup: false,
})
const loading = false
async function handleSave() {
let ApiData: any = {
}
const values = await validate()
const values1 = await validate1()
Object.keys(values).forEach((item) => {
if (item == 'businessId' && !values.businessId) {
ApiData.businessId = props.businessId
@ -64,23 +82,29 @@
ApiData[item] = values[item]
}
})
Object.keys(values1).forEach((item) => {
if (item == 'businessId' && !values1.businessId) {
ApiData.businessId = props.businessId
} else {
ApiData[item] = values1[item]
}
})
loading.value = true
const res: API.DataResult = await EditOpBusinessYard(ApiData)
loading.value = false
if (res.succeeded) {
createMessage.success(res.message)
emit('success')
}
}
defineExpose({
setFieldsValue
setFieldsValue,
setFieldsValue1
})
</script>
<style lang="less" scoped>
.MainBox {
height: 100%;
position: relative;
.Content {
height: calc(100% - 28px);
overflow-y: auto;
}
height: 60vh;
overflow: auto;
}
</style>

Loading…
Cancel
Save