海运出口详情ui
commit
769dc6f656
@ -1,53 +1,196 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<div>
|
||||
<a-button type="link" @click="handleSave" > <i class="iconfont icon-zhcc_tidan"></i>保存</a-button>
|
||||
<a-button type="link" ><i class="iconfont icon-return"></i>撤销审核</a-button>
|
||||
</div>
|
||||
<BasicForm @register="registerForm" />
|
||||
<feeTable @updateAmount="updateAmount" ref="feeTableRef"></feeTable>
|
||||
<a-spin :spinning="loading">
|
||||
<div>
|
||||
<a-button type="link" @click="handleSave"> <i class="iconfont icon-zhcc_tidan"></i>保存</a-button>
|
||||
<a-button type="link"><i class="iconfont icon-return"></i>撤销审核</a-button>
|
||||
</div>
|
||||
<BasicForm @register="registerForm">
|
||||
<template #note="{ model, field }">
|
||||
<div style="display: flex;align-items: center;height: 22px;line-height: 22px;">
|
||||
备注:
|
||||
<a-button @click="openTempName" style="margin: 0 15px 0 20px;" type="link"> <i
|
||||
class="icon-a-17Btuichu iconfont"></i>
|
||||
提取备注</a-button>
|
||||
<a-button type="link" @click="openTemp"><i class="icon-jichupeizhi iconfont"></i>模板设置</a-button>
|
||||
</div>
|
||||
<a-textarea v-model:value="model[field]" :auto-size="{ minRows: 4, maxRows: 7 }" />
|
||||
</template>
|
||||
</BasicForm>
|
||||
<feeTable @updateListSave=updateListSave @updateAmount="updateAmount" ref="feeTableRef"></feeTable>
|
||||
<a-modal @cancel="open = false" width="700px" :visible="open" title="模板设置" @ok="handleSaveTemp">
|
||||
<div style="display: flex;">
|
||||
<div class="label-list">
|
||||
<div class="label-item" @click="handleAddLabel(item)" v-for="item in labelList"
|
||||
:key="item.fieldName">{{
|
||||
item.displayName }}
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 80%;margin-left: 10px">
|
||||
<a-textarea style="height: 90%;" v-model:value="tempContent" />
|
||||
<div style="margin-top: 15px;">
|
||||
<span>发票备注模板</span>
|
||||
<el-autocomplete v-model="tempName" style="width: 81%;margin-left: 10px;"
|
||||
:fetch-suggestions="querySearch" clearable @select="handleSelect" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
<a-modal @cancel="nameFlag = false" width="700px" :visible="nameFlag" title="提取发票备注" @ok="handleRender">
|
||||
<a-select v-model:value="tempNameId" style="width: 80%">
|
||||
<a-select-option :value="item.id" v-for="(item,index) in tempList" :key="index" >{{ item.name }}</a-select-option>
|
||||
</a-select>
|
||||
</a-modal>
|
||||
</a-spin>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, unref } from 'vue'
|
||||
import { BasicForm, useForm } from '/@/components/Form/index'
|
||||
import { AutoComplete } from 'ant-design-vue'
|
||||
import { detailForm } from '../columns'
|
||||
import feeTable from './feeTable.vue';
|
||||
import { InvoiceApplicationSave } from '../api'
|
||||
import { InvoiceApplicationSave, InvoiceApplicationGet, GetTemplateFields, SaveTemplate, GetTemplateList } from '../api'
|
||||
import { useMessage } from '/@/hooks/web/useMessage'
|
||||
import { useRoute } from 'vue-router'
|
||||
const route = useRoute()
|
||||
const { createMessage } = useMessage()
|
||||
const id = ref(route.query.id)
|
||||
const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
|
||||
labelWidth: 100,
|
||||
schemas: detailForm,
|
||||
showActionButtonGroup: false,
|
||||
})
|
||||
const feeTableRef = ref(null) as any
|
||||
async function handleSave(){
|
||||
const values = await validate()
|
||||
const open = ref(false)
|
||||
const nameFlag = ref(false)
|
||||
async function handleSave() {
|
||||
const values = await validate()
|
||||
const data = {
|
||||
...values,
|
||||
invoiceDetails: feeTableRef.value.list
|
||||
}
|
||||
InvoiceApplicationSave(data).then(res=>{
|
||||
|
||||
loading.value = true
|
||||
InvoiceApplicationSave(data).then(res => {
|
||||
if (res.succeeded) {
|
||||
createMessage.success('保存成功')
|
||||
} else {
|
||||
createMessage.error(res.message)
|
||||
}
|
||||
loading.value = false
|
||||
}).catch(err => {
|
||||
loading.value = false
|
||||
})
|
||||
console.log(feeTableRef.value.list)
|
||||
}
|
||||
function updateAmount(val){
|
||||
const loading = ref(false)
|
||||
function updateAmount(val) {
|
||||
setFieldsValue({
|
||||
invoiceAmount:val
|
||||
invoiceAmount: val
|
||||
})
|
||||
}
|
||||
const tempContent = ref('')
|
||||
function handleSaveTemp() {
|
||||
const data = {
|
||||
name: tempName.value,
|
||||
content: tempContent.value,
|
||||
id: ''
|
||||
}
|
||||
if (tempId.value) {
|
||||
data.id = tempId.value
|
||||
}
|
||||
SaveTemplate([data]).then(res => {
|
||||
if (res.succeeded) {
|
||||
createMessage.success('保存成功')
|
||||
GetTemplateList().then(res => {
|
||||
tempList.value = res.data
|
||||
tempList.value.forEach(item => {
|
||||
item.value = item.name
|
||||
})
|
||||
})
|
||||
} else {
|
||||
createMessage.error(res.message)
|
||||
}
|
||||
})
|
||||
}
|
||||
onMounted(() => {
|
||||
init()
|
||||
})
|
||||
function init(){
|
||||
setFieldsValue({
|
||||
statusText:'未提交'
|
||||
const labelList = ref([]) as any
|
||||
const tempList = ref([]) as any
|
||||
function openTemp() {
|
||||
open.value = true
|
||||
GetTemplateFields().then(res => {
|
||||
labelList.value = res.data
|
||||
})
|
||||
GetTemplateList().then(res => {
|
||||
tempList.value = res.data
|
||||
tempList.value.forEach(item => {
|
||||
item.value = item.name
|
||||
})
|
||||
})
|
||||
}
|
||||
function init() {
|
||||
if (id.value) {
|
||||
getDetail()
|
||||
} else {
|
||||
setFieldsValue({
|
||||
statusText: '未提交'
|
||||
})
|
||||
}
|
||||
}
|
||||
function handleAddLabel(val) {
|
||||
tempContent.value += '[' + val.displayName + ']'
|
||||
}
|
||||
function getDetail() {
|
||||
InvoiceApplicationGet({ id: id.value }).then(res => {
|
||||
if (res.succeeded) {
|
||||
setFieldsValue(res.data)
|
||||
}
|
||||
})
|
||||
}
|
||||
function openTempName() {
|
||||
nameFlag.value = true
|
||||
}
|
||||
function updateListSave() {
|
||||
|
||||
}
|
||||
const tempNameId = ref('')
|
||||
function handleRender(){
|
||||
let temp = ''
|
||||
tempList.value.forEach(item=>{
|
||||
if(item.id==tempNameId.value){
|
||||
temp = item.content
|
||||
}
|
||||
})
|
||||
}
|
||||
const tempName = ref('')
|
||||
const tempId = ref('')
|
||||
const querySearch = (queryString: string, cb: any) => {
|
||||
cb(tempList.value)
|
||||
}
|
||||
function handleSelect(value) {
|
||||
tempId.value = value.id
|
||||
tempContent.value = value.content
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped >
|
||||
.main{
|
||||
<style lang="less" scoped>
|
||||
.main {
|
||||
padding: 20px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
/deep/ .ant-btn-link {
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
||||
.label-list {
|
||||
max-height: 400px;
|
||||
width: 20%;
|
||||
overflow-y: scroll;
|
||||
|
||||
.label-item {
|
||||
margin-bottom: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue