DEdit 添加 日期组件

szh-new
张同海 3 months ago
parent f702606541
commit 814f056dfb

@ -11,6 +11,7 @@
import { useAttrs } from '/@/hooks/core/useAttrs'
import { useI18n } from '/@/hooks/web/useI18n'
import { useAppStore } from '/@/store/modules/app'
import dayjs from 'dayjs'
const appStore = useAppStore()
type OptionsItem = { label: string; value: string; disabled?: boolean }
export default defineComponent({
@ -50,7 +51,9 @@
const attrs = useAttrs()
const { t } = useI18n()
const [state] = useRuleFormItem(props, 'value', 'change')
function isDate(value) {
return value instanceof Date || Object.prototype.toString.call(value) === '[object Date]'
}
function GetState() {
let RData: any = null
if (state.value) {
@ -78,6 +81,8 @@
RData = item[props.labelField]
}
})
} else if (state.value.$d && state.value.$isDayjsObject) {
RData = dayjs(state.value.$d).format('YYYY-MM-DD')
} else {
if (props.label == '来源明细') {
appStore.getSourceData.forEach((item) => {
@ -105,6 +110,7 @@
function CilckEdit() {
emit('edit')
}
return { attrs, t, showTooltip, props, state, CilckEdit, GetState }
},
})

@ -2,7 +2,7 @@
<div class="main">
<a-spin :spinning="loading">
<div class="infoclientBox">
<div style="display: flex;align-items: center;">
<div style="display: flex; align-items: center">
<a-tooltip placement="top" :mouseEnterDelay="0.5">
<template #title>
<span>新建</span>
@ -45,7 +45,7 @@
</a-tooltip>
<a-dropdown>
<a class="ant-dropdown-link">
<i class="icon-xianshang iconfont" style="font-size: 15px;"></i>
<i class="icon-xianshang iconfont" style="font-size: 15px"></i>
{{ getCategory() }}
<DownOutlined />
</a>
@ -64,22 +64,27 @@
</template>
</a-dropdown>
<div class="status">
<i class="icon-chenggong iconfont" style="font-size: 14px;"></i>
<i class="icon-chenggong iconfont" style="font-size: 14px"></i>
审核通过
</div>
<div @mouseover="showTooltip = true" @mouseleave="showTooltip = false" class="invoiceNo">
发票号
<span v-show="invoiceEditFlag"> {{ form.invoiceNO }}</span>
<a-input style="width: 70%;" size="small" v-show="!invoiceEditFlag"
v-model:value="form.invoiceNO" />
<span class="iconfont icon-bianji1" style="cursor: pointer;" @click="CilckEdit"
v-show="showTooltip"></span>
<a-input
style="width: 70%"
size="small"
v-show="!invoiceEditFlag"
v-model:value="form.invoiceNO"
/>
<span
class="iconfont icon-bianji1"
style="cursor: pointer"
@click="CilckEdit"
v-show="showTooltip"
></span>
</div>
</div>
<div style="color: #8a96a5;font-size: 12px">
申请单号{{ form.applicationNO }}
</div>
<div style="color: #8a96a5; font-size: 12px"> 申请单号{{ form.applicationNO }} </div>
</div>
<!-- <div>
<a-button type="link" @click="handleSave"> <i class="iconfont icon-zhcc_tidan"></i>保存</a-button>
@ -89,9 +94,7 @@
<div class="top">
<div class="left">
<div class="title">票面信息</div>
<BasicForm @register="registerForm" @linkageForm="linkageForm">
</BasicForm>
<BasicForm @register="registerForm" @linkageForm="linkageForm"> </BasicForm>
</div>
<div class="right">
<div class="title">申请开票金额</div>
@ -104,8 +107,9 @@
</a-checkbox>
</div>
<div class="apply" :class="{ active: form.isRMB }">
<a-checkbox v-model:checked="form.isRMB"
@change="handleChangeApply1">折算人民币申请</a-checkbox>
<a-checkbox v-model:checked="form.isRMB" @change="handleChangeApply1"
>折算人民币申请</a-checkbox
>
<span></span>
<span></span>
</div>
@ -114,15 +118,26 @@
<BasicForm @register="markForm">
<template #note="{ model, field }">
<div
style="display: flex;align-items: center;height: 22px;line-height: 22px;font-size: 12px">
style="
display: flex;
align-items: center;
height: 22px;
line-height: 22px;
font-size: 12px;
"
>
备注:
<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>
<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: 3, maxRows: 7 }" />
<a-textarea
v-model:value="model[field]"
:auto-size="{ minRows: 3, maxRows: 7 }"
/>
</template>
</BasicForm>
</div>
@ -131,40 +146,57 @@
<div class="bottom">
<BasicForm @register="registerBottomForm" @linkageForm="linkageFormBottom">
<template #createByNameSlot="{ model, field }">
<span style="font-size: 12px;color: #7a8798;" >申请人:131223</span>
<span style="font-size: 12px; color: #7a8798">申请人:131223</span>
</template>
</BasicForm>
</div>
</div>
<!-- <feeTable :id="id" @handleSuccess="handleSuccess" @updateListSave=updateListSave
@updateAmount="updateAmount" ref="feeTableRef">
</feeTable> -->
<a-modal @cancel="open = false" width="700px" :visible="open" title="模板设置" @ok="handleSaveTemp">
<div style="display: flex;">
<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
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;">
<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" />
<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-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 :value="item.id" v-for="(item, index) in tempList" :key="index">{{
item.name
}}</a-select-option>
</a-select>
</a-modal>
@ -175,13 +207,23 @@
import { ref, onMounted, watch } from 'vue'
import { BasicForm, useForm } from '/@/components/Form/index'
import { AutoComplete } from 'ant-design-vue'
import feeTable from './feeTable.vue';
import { DownOutlined } from '@ant-design/icons-vue';
import { InvoiceApplicationSave, InvoiceApplicationGet, GetTemplateFields, SaveTemplate, GetTemplateList, RenderTemplate, GetClientBankList, GetOrgList } from '../api'
import feeTable from './feeTable.vue'
import { DownOutlined } from '@ant-design/icons-vue'
import {
InvoiceApplicationSave,
InvoiceApplicationGet,
GetTemplateFields,
SaveTemplate,
GetTemplateList,
RenderTemplate,
GetClientBankList,
GetOrgList,
} from '../api'
import { useMessage } from '/@/hooks/web/useMessage'
import { useRoute } from 'vue-router'
import {
GetControllerClientList, GetCustomerServiceList
GetControllerClientList,
GetCustomerServiceList,
} from '/@/views/operation/seaexport/api/BookingLedger'
import { GetFeeCurrencySelectList, GetClientListByCode } from '/@/api/common'
import dayjs from 'dayjs'
@ -200,7 +242,7 @@ const form = ref({
isRMB: false,
isYB: false,
category: 0,
applicationNO: '13123'
applicationNO: '13123',
})
//
@ -214,7 +256,7 @@ function onClick({ key }) {
}
function getCategory() {
let str = ''
CategoryData.forEach(item => {
CategoryData.forEach((item) => {
if (item.value == form.value.category) {
str = item.label
}
@ -312,7 +354,7 @@ const detailForm = [
},
onChange: (e, obj) => {
if (obj) {
bankList.value.forEach(item => {
bankList.value.forEach((item) => {
if (item.id == e) {
formModel.customerBank = item
}
@ -395,27 +437,29 @@ const detailForm = [
immediate: false,
onChange: (e, obj) => {
if (obj) {
const queryStr = [{
const queryStr = [
{
FieldName: 'ClientId',
FieldValue: obj.id,
ConditionalType: '0'
}]
ConditionalType: '0',
},
]
const data = {
pageCondition: {
"pageIndex": 1,
"pageSize": 20,
"sortConditions": []
pageIndex: 1,
pageSize: 20,
sortConditions: [],
},
queryCondition: JSON.stringify(queryStr)
queryCondition: JSON.stringify(queryStr),
}
GetClientBankList(data).then(res => {
res.data.forEach(item => {
GetClientBankList(data).then((res) => {
res.data.forEach((item) => {
item.name = item.bankName + ' ' + item.bankAgentName
})
bankList.value = res.data
})
formModel.customerId = obj.id
customerList.value.forEach(item => {
customerList.value.forEach((item) => {
if (item.id == e) {
formModel.customer = item
}
@ -506,7 +550,7 @@ const detailForm = [
colProps: { span: 12 },
componentProps: () => {
return {
autoSize: { minRows: 4, maxRows: 7 }
autoSize: { minRows: 4, maxRows: 7 },
}
},
},
@ -551,7 +595,7 @@ const bankForm = [
},
onChange: (e, obj) => {
if (obj) {
bankList.value.forEach(item => {
bankList.value.forEach((item) => {
if (item.id == e) {
formModel.customerBank = item
}
@ -564,7 +608,6 @@ const bankForm = [
}
},
},
]
const EditBankForm = [
{
@ -636,7 +679,7 @@ const EditBankForm = [
},
onChange: (e, obj) => {
if (obj) {
bankList.value.forEach(item => {
bankList.value.forEach((item) => {
if (item.id == e) {
formModel.customerBank = item
}
@ -658,7 +701,7 @@ const markFormS = [
colProps: { span: 12 },
componentProps: () => {
return {
autoSize: { minRows: 3, maxRows: 7 }
autoSize: { minRows: 3, maxRows: 7 },
}
},
},
@ -691,17 +734,17 @@ const bottomForm = [
component: 'Input',
colProps: { span: 4 },
},
// {
// field: 'applyDate',
// label: '',
// component: 'DatePicker',
// colProps: { span: 4 },
// defaultValue: dayjs().format('YYYY-MM-DD'),
{
field: 'applyDate',
label: '申请日期',
component: 'DatePicker',
colProps: { span: 4 },
defaultValue: dayjs().format('YYYY-MM-DD'),
// componentProps: {
// valueFormat: 'YYYY-MM-DD',
// format: 'YYYY-MM-DD',
// },
// },
},
{
label: '客户名称',
field: 'customerName',
@ -719,27 +762,29 @@ const bottomForm = [
immediate: false,
onChange: (e, obj) => {
if (obj) {
const queryStr = [{
const queryStr = [
{
FieldName: 'ClientId',
FieldValue: obj.id,
ConditionalType: '0'
}]
ConditionalType: '0',
},
]
const data = {
pageCondition: {
"pageIndex": 1,
"pageSize": 20,
"sortConditions": []
pageIndex: 1,
pageSize: 20,
sortConditions: [],
},
queryCondition: JSON.stringify(queryStr)
queryCondition: JSON.stringify(queryStr),
}
GetClientBankList(data).then(res => {
res.data.forEach(item => {
GetClientBankList(data).then((res) => {
res.data.forEach((item) => {
item.name = item.bankName + ' ' + item.bankAgentName
})
bankList.value = res.data
})
formModel.customerId = obj.id
customerList.value.forEach(item => {
customerList.value.forEach((item) => {
if (item.id == e) {
formModel.customer = item
}
@ -815,23 +860,23 @@ const bottomFormEdit = [
component: 'DEdit',
colProps: { span: 4 },
},
// {
// field: 'applyDate',
// label: '',
// component: 'DEdit',
// colProps: { span: 4 },
// defaultValue: '',
// componentProps: (e) => {
// return {
// valueFormat: 'YYYY-MM-DD',
// format: 'YYYY-MM-DD',
// onEdit: () => {
// const { formActionType } = e
// formActionType ? formActionType.linkageForm(e) : null
// },
// }
// },
// },
{
field: 'applyDate',
label: '申请日期',
component: 'DEdit',
colProps: { span: 4 },
defaultValue: '',
componentProps: (e) => {
return {
valueFormat: 'YYYY-MM-DD',
format: 'YYYY-MM-DD',
onEdit: () => {
const { formActionType } = e
formActionType ? formActionType.linkageForm(e) : null
},
}
},
},
{
label: '客户名称',
field: 'customerName',
@ -854,27 +899,29 @@ const bottomFormEdit = [
},
onChange: (e, obj) => {
if (obj) {
const queryStr = [{
const queryStr = [
{
FieldName: 'ClientId',
FieldValue: obj.id,
ConditionalType: '0'
}]
ConditionalType: '0',
},
]
const data = {
pageCondition: {
"pageIndex": 1,
"pageSize": 20,
"sortConditions": []
pageIndex: 1,
pageSize: 20,
sortConditions: [],
},
queryCondition: JSON.stringify(queryStr)
queryCondition: JSON.stringify(queryStr),
}
GetClientBankList(data).then(res => {
res.data.forEach(item => {
GetClientBankList(data).then((res) => {
res.data.forEach((item) => {
item.name = item.bankName + ' ' + item.bankAgentName
})
bankList.value = res.data
})
formModel.customerId = obj.id
customerList.value.forEach(item => {
customerList.value.forEach((item) => {
if (item.id == e) {
formModel.customer = item
}
@ -950,7 +997,14 @@ const [markForm, { resetFields: markresetFields, setFieldsValue: marksetFieldsVa
schemas: markFormS,
showActionButtonGroup: false,
})
const [registerBottomForm, { resetFields: bottomResetFields, setFieldsValue: bottomRsetFieldsValue, updateSchema: updateSchemaBottom }] = useForm({
const [
registerBottomForm,
{
resetFields: bottomResetFields,
setFieldsValue: bottomRsetFieldsValue,
updateSchema: updateSchemaBottom,
},
] = useForm({
labelWidth: 100,
schemas: bottomForm,
showActionButtonGroup: false,
@ -976,10 +1030,11 @@ async function handleSave() {
const values = await validate()
const data = {
...values,
invoiceDetails: feeTableRef.value.list
invoiceDetails: feeTableRef.value.list,
}
loading.value = true
InvoiceApplicationSave(data).then(res => {
InvoiceApplicationSave(data)
.then((res) => {
if (res.succeeded) {
createMessage.success('保存成功')
go(`/invoiceapplyDetail?id=${res.data.id}`)
@ -987,14 +1042,15 @@ async function handleSave() {
createMessage.error(res.message)
}
loading.value = false
}).catch(err => {
})
.catch((err) => {
loading.value = false
})
}
const loading = ref(false)
function updateAmount(val) {
setFieldsValue({
invoiceAmount: val
invoiceAmount: val,
})
}
const tempContent = ref('')
@ -1002,17 +1058,17 @@ function handleSaveTemp() {
const data = {
name: tempName.value,
content: tempContent.value,
id: ''
id: '',
}
if (tempId.value) {
data.id = tempId.value
}
SaveTemplate([data]).then(res => {
SaveTemplate([data]).then((res) => {
if (res.succeeded) {
createMessage.success('保存成功')
GetTemplateList().then(res => {
GetTemplateList().then((res) => {
tempList.value = res.data
tempList.value.forEach(item => {
tempList.value.forEach((item) => {
item.value = item.name
})
})
@ -1028,12 +1084,12 @@ const labelList = ref([]) as any
const tempList = ref([]) as any
function openTemp() {
open.value = true
GetTemplateFields().then(res => {
GetTemplateFields().then((res) => {
labelList.value = res.data
})
GetTemplateList().then(res => {
GetTemplateList().then((res) => {
tempList.value = res.data
tempList.value.forEach(item => {
tempList.value.forEach((item) => {
item.value = item.name
})
})
@ -1049,7 +1105,7 @@ function init() {
getDetail()
} else {
setFieldsValue({
statusText: '未提交'
statusText: '未提交',
})
}
bankForm.forEach((item) => {
@ -1075,40 +1131,41 @@ function handleAddLabel(val) {
tempContent.value += '[' + val.displayName + ']'
}
function getDetail() {
InvoiceApplicationGet({ id: id.value }).then(res => {
InvoiceApplicationGet({ id: id.value }).then((res) => {
if (res.succeeded) {
setFieldsValue(res.data)
getBankInfo(res.data.customerId)
feeTableRef.value.init(res.data)
}
})
}
function openTempName() {
nameFlag.value = true
GetTemplateList().then(res => {
GetTemplateList().then((res) => {
tempList.value = res.data
tempList.value.forEach(item => {
tempList.value.forEach((item) => {
item.value = item.name
})
})
}
function getBankInfo(customerId) {
const queryStr = [{
const queryStr = [
{
FieldName: 'ClientId',
FieldValue: customerId,
ConditionalType: '0'
}]
ConditionalType: '0',
},
]
const data = {
pageCondition: {
"pageIndex": 1,
"pageSize": 20,
"sortConditions": []
pageIndex: 1,
pageSize: 20,
sortConditions: [],
},
queryCondition: JSON.stringify(queryStr)
queryCondition: JSON.stringify(queryStr),
}
GetClientBankList(data).then(res => {
res.data.forEach(item => {
GetClientBankList(data).then((res) => {
res.data.forEach((item) => {
item.name = item.bankName + ' ' + item.bankAgentName
})
bankList.value = res.data
@ -1122,10 +1179,11 @@ async function updateListSave(arr) {
const values = await validate()
const data = {
...values,
details: arr
details: arr,
}
loading.value = true
InvoiceApplicationSave(data).then(res => {
InvoiceApplicationSave(data)
.then((res) => {
if (res.succeeded) {
createMessage.success('保存成功')
go(`/invoiceapplyDetail?id=${res.data.id}`)
@ -1133,26 +1191,24 @@ async function updateListSave(arr) {
createMessage.error(res.message)
}
loading.value = false
}).catch(err => {
})
.catch((err) => {
loading.value = false
})
}
const tempNameId = ref('')
function handleRender() {
let temp = ''
tempList.value.forEach(item => {
tempList.value.forEach((item) => {
if (item.id == tempNameId.value) {
temp = item.content
}
})
const data = {
id: id.value,
template: temp
template: temp,
}
RenderTemplate(data).then(res => {
})
RenderTemplate(data).then((res) => {})
}
const tempName = ref('')
const tempId = ref('')

Loading…
Cancel
Save