07/19
张同海
4 months ago
commit
42fb85624d
Binary file not shown.
|
Before Width: | Height: | Size: 7.5 KiB After Width: | Height: | Size: 5.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
@ -1,5 +1,11 @@
|
||||
.ant-form-item-label {
|
||||
width: 100%!important;
|
||||
>label {
|
||||
font-size: 12px!important;
|
||||
width: 100%!important;
|
||||
>span {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,42 +1,42 @@
|
||||
// 小弹窗
|
||||
.ds-modal-small {
|
||||
.ant-modal-header {
|
||||
border-bottom: none;
|
||||
padding: 16px 16px 0px 16px;
|
||||
.ant-modal-title {
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
}
|
||||
.ant-modal-header {
|
||||
border-bottom: none;
|
||||
padding: 16px 16px 0px 16px;
|
||||
.ant-modal-title {
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
}
|
||||
.ant-modal-body {
|
||||
padding: 15px 30px;
|
||||
.ant-form {
|
||||
background-color: #F5F9FC;
|
||||
border-radius: 2px;
|
||||
padding: 10px 20px 15px;
|
||||
.ant-form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.ant-form-item-label {
|
||||
padding-bottom: 0;
|
||||
>label {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.ant-modal-body {
|
||||
padding: 15px 30px;
|
||||
.ant-form {
|
||||
background-color: #F5F9FC;
|
||||
border-radius: 2px;
|
||||
padding: 10px 20px 15px;
|
||||
.ant-form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.ant-form-item-label {
|
||||
padding-bottom: 0;
|
||||
>label {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-modal-footer {
|
||||
border: none;
|
||||
padding: 5px 30px 20px;
|
||||
.ant-btn {
|
||||
height: 26px;
|
||||
width: 100px;
|
||||
span {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
}
|
||||
.ant-modal-footer {
|
||||
border: none;
|
||||
padding: 5px 30px 20px;
|
||||
.ant-btn {
|
||||
height: 26px;
|
||||
width: 100px;
|
||||
padding: 0;
|
||||
line-height: 27px;
|
||||
span {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<BasicModal
|
||||
v-bind="$attrs"
|
||||
:use-wrapper="true"
|
||||
:title="getTitle"
|
||||
:form-schema="formSchema"
|
||||
width="50%"
|
||||
@register="registerModal"
|
||||
@ok="handleSave"
|
||||
>
|
||||
<!-- 包装表单 -->
|
||||
<BasicForm @register="registerForm" />
|
||||
<!--右下角按钮-->
|
||||
<template #footer>
|
||||
<a-button
|
||||
pre-icon="ant-design:close-outlined"
|
||||
type="warning"
|
||||
:loading="loading"
|
||||
ghost
|
||||
style="margin-right: 0.8rem"
|
||||
@click="closeModal"
|
||||
>
|
||||
取消
|
||||
</a-button>
|
||||
<a-button
|
||||
type="success"
|
||||
:loading="loading"
|
||||
pre-icon="ant-design:check-outlined"
|
||||
style="margin-right: 0.8rem"
|
||||
@click="handleSave(false)"
|
||||
>
|
||||
仅保存
|
||||
</a-button>
|
||||
<a-button
|
||||
pre-icon="ant-design:check-circle-outlined"
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="handleSave(true)"
|
||||
>
|
||||
保存并关闭
|
||||
</a-button>
|
||||
</template>
|
||||
</BasicModal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, unref } from 'vue'
|
||||
// 弹窗组件
|
||||
import { BasicModal, useModalInner } from '/@/components/Modal'
|
||||
import { BasicForm, useForm } from '/@/components/Form/index'
|
||||
// 表单字段数据
|
||||
import { personFormSchema } from './baseInfo'
|
||||
// 相关接口
|
||||
import { EditBusinessOrderContact, GetBusinessOrderContactInfo } from '/@/views/operation/seaexport/api/BookingLedger'
|
||||
// 提示消息混入
|
||||
import { useMessage } from '/@/hooks/web/useMessage'
|
||||
// 声明Emits
|
||||
const emit = defineEmits(['success', 'register'])
|
||||
const isUpdate = ref(true)
|
||||
// 按钮loading
|
||||
const loading = ref(false)
|
||||
const rowId = ref('')
|
||||
const { createMessage } = useMessage()
|
||||
const [registerForm, { resetFields, setFieldsValue, validate, updateSchema }] =
|
||||
useForm({
|
||||
labelWidth: 100,
|
||||
schemas: personFormSchema,
|
||||
showActionButtonGroup: false,
|
||||
})
|
||||
|
||||
const [registerModal, { setModalProps, closeModal, updateFormField }] = useModalInner(async (data) => {
|
||||
resetFields()
|
||||
setModalProps({ confirmLoading: false, loading: true })
|
||||
isUpdate.value = !!data?.isUpdate
|
||||
if (unref(isUpdate)) {
|
||||
setModalProps({ confirmLoading: true });
|
||||
updateFormField(updateSchema)
|
||||
rowId.value = data.record.id
|
||||
const res: API.DataResult = await GetBusinessOrderContactInfo({ id: unref(rowId) })
|
||||
if (res.succeeded) {
|
||||
setFieldsValue({
|
||||
...res.data,
|
||||
})
|
||||
}
|
||||
} else {
|
||||
setFieldsValue({ permissionIdentity: unref(2) })
|
||||
}
|
||||
setModalProps({ loading: false })
|
||||
})
|
||||
|
||||
const getTitle = computed(() => (!unref(isUpdate) ? '新增' : '编辑'))
|
||||
|
||||
async function handleSave(exit) {
|
||||
try {
|
||||
const values = await validate()
|
||||
loading.value = true
|
||||
setModalProps({ confirmLoading: true, loading: true })
|
||||
const res: API.DataResult = await EditBusinessOrderContact(values)
|
||||
loading.value = false
|
||||
if (res.succeeded) {
|
||||
createMessage.success(res.message)
|
||||
emit('success')
|
||||
} else {
|
||||
createMessage.error(res.message)
|
||||
}
|
||||
exit && closeModal()
|
||||
} finally {
|
||||
setModalProps({ confirmLoading: false, loading: false })
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in New Issue