往来单位 自动费用模板
张同海
3 months ago
parent
8fc4c4cef6
commit
9b8d5f687f
@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<BasicModal
|
||||
v-bind="$attrs"
|
||||
:use-wrapper="true"
|
||||
:title="getTitle"
|
||||
width="80%"
|
||||
@register="registerModal"
|
||||
@ok="handleSave"
|
||||
>
|
||||
<!-- 费用模版表单 -->
|
||||
<BasicForm @register="registerForm" />
|
||||
<!-- 费用字段表格 -->
|
||||
<FeeField ref="feeField"></FeeField>
|
||||
<!--右下角按钮-->
|
||||
<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 FeeField from './feeField.vue'
|
||||
// 字段数据
|
||||
import { formSchema } from './columns'
|
||||
// 相关接口
|
||||
import { ApiEdit, ApiInfo } from './api'
|
||||
// 提升消息混入
|
||||
import { useMessage } from '/@/hooks/web/useMessage'
|
||||
const props = defineProps({
|
||||
customerName: { type: String },
|
||||
customerId: { type: String },
|
||||
})
|
||||
// 声明Emits
|
||||
const emit = defineEmits(['success', 'register'])
|
||||
const isUpdate = ref(true)
|
||||
const detailId = ref()
|
||||
// 按钮loading
|
||||
const loading = ref(false)
|
||||
const rowId = ref('')
|
||||
const { createMessage } = useMessage()
|
||||
const [registerForm, { resetFields, setFieldsValue, getFieldsValue, validate, updateSchema }] =
|
||||
useForm({
|
||||
labelWidth: 100,
|
||||
schemas: formSchema,
|
||||
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 })
|
||||
rowId.value = data.record.id
|
||||
const res: API.DataResult = await ApiInfo({ id: unref(rowId) })
|
||||
if (res.succeeded) {
|
||||
setFieldsValue({
|
||||
...res.data,
|
||||
})
|
||||
feeField.value.SetData(res.data.details)
|
||||
feeField.value.condition = res.data.condition
|
||||
detailId.value = res.data.id
|
||||
}
|
||||
} else {
|
||||
detailId.value = ''
|
||||
setFieldsValue({
|
||||
customerName: props.customerName,
|
||||
customerId: props.customerId,
|
||||
})
|
||||
feeField.value.SetData([])
|
||||
feeField.value.condition = ''
|
||||
}
|
||||
setModalProps({ loading: false })
|
||||
},
|
||||
)
|
||||
const getTitle = computed(() => (!unref(isUpdate) ? '新增' : '编辑'))
|
||||
// 费用表格
|
||||
const feeField = ref()
|
||||
async function handleSave(exit) {
|
||||
try {
|
||||
const values = await validate()
|
||||
const feeList = feeField.value.validate()
|
||||
values['details'] = feeList
|
||||
values['condition'] = feeField.value.condition
|
||||
loading.value = true
|
||||
setModalProps({ confirmLoading: true, loading: true })
|
||||
const res: API.DataResult = await ApiEdit(values)
|
||||
loading.value = false
|
||||
if (res.succeeded) {
|
||||
createMessage.success(res.message)
|
||||
emit('success')
|
||||
} else {
|
||||
createMessage.error(res.message)
|
||||
}
|
||||
exit && closeModal()
|
||||
} finally {
|
||||
loading.value = false
|
||||
setModalProps({ confirmLoading: false, loading: false })
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,60 @@
|
||||
// @ts-ignore
|
||||
import { request } from '/@/utils/request'
|
||||
import { DataResult, PageRequest } from '/@/api/model/baseModel'
|
||||
enum Api {
|
||||
list = '/feeApi/FeeCustTemplate/GetList',
|
||||
edit = '/feeApi/FeeCustTemplate/Edit',
|
||||
info = '/feeApi/FeeCustTemplate/Edit',
|
||||
delete = '/feeApi/FeeCustTemplate/Delete',
|
||||
GenerateFees = '/feeApi/FeeCustTemplate/GenerateFees',
|
||||
GetColumns = '/mainApi/Common/GetColumnsByClient',
|
||||
}
|
||||
// 根据表明 查询数据
|
||||
export function getColumns(query: { id: string }) {
|
||||
return request<DataResult>({
|
||||
url: Api.GetColumns,
|
||||
method: 'get',
|
||||
params: query,
|
||||
})
|
||||
}
|
||||
// 列表 (Auth)
|
||||
export function ApiList(data: PageRequest) {
|
||||
return request<DataResult>({
|
||||
url: Api.list,
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
}
|
||||
// 编辑 (Auth)
|
||||
export function ApiEdit(data: PageRequest) {
|
||||
return request<DataResult>({
|
||||
url: Api.edit,
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
}
|
||||
// 详情 (Auth)
|
||||
export function ApiInfo(query) {
|
||||
return request<DataResult>({
|
||||
url: Api.info,
|
||||
method: 'get',
|
||||
params: query,
|
||||
})
|
||||
}
|
||||
// 删除 (Auth)
|
||||
export function ApiDel(data: PageRequest) {
|
||||
return request<DataResult>({
|
||||
url: Api.delete,
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
// 生成订单费用 (Auth)
|
||||
export function ApiGenerateFees(data: PageRequest) {
|
||||
return request<DataResult>({
|
||||
url: Api.GenerateFees,
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
@ -0,0 +1,159 @@
|
||||
import { ref } from 'vue'
|
||||
import { BasicColumn, FormSchema } from '/@/components/Table'
|
||||
// 引入字典数据
|
||||
import { getDictOption } from '/@/utils/dictUtil'
|
||||
// 下拉框数据接口
|
||||
import { GetClientListByCode } from '/@/api/common'
|
||||
// 往来单位下拉框数据
|
||||
const companyDict = ref([])
|
||||
let businessType: any = [
|
||||
{ value: 1, label: '海运出口' },
|
||||
{ value: 2, label: '海运进口' },
|
||||
]
|
||||
export const columns: BasicColumn[] = [
|
||||
{
|
||||
title: '模板名称',
|
||||
dataIndex: 'name',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: '业务类型',
|
||||
dataIndex: 'businessTypeText',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: '结算对象',
|
||||
dataIndex: 'customerName',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: '说明',
|
||||
dataIndex: 'description',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: '录入日期',
|
||||
dataIndex: 'createTime',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'note',
|
||||
width: 200,
|
||||
},
|
||||
]
|
||||
|
||||
export const searchFormSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'name',
|
||||
label: '模板名称',
|
||||
component: 'Input',
|
||||
colProps: { span: 6 },
|
||||
},
|
||||
]
|
||||
export const formSchema: FormSchema[] = [
|
||||
{
|
||||
label: '主键Id',
|
||||
field: 'id',
|
||||
component: 'Input',
|
||||
defaultValue: '',
|
||||
show: false,
|
||||
},
|
||||
{
|
||||
field: 'name',
|
||||
label: '模板名称',
|
||||
component: 'Input',
|
||||
required: true,
|
||||
colProps: { span: 8 },
|
||||
},
|
||||
{
|
||||
field: 'businessType',
|
||||
label: '业务类型',
|
||||
component: 'Select',
|
||||
required: true,
|
||||
colProps: { span: 8 },
|
||||
componentProps: () => {
|
||||
return {
|
||||
options: businessType,
|
||||
}
|
||||
},
|
||||
},
|
||||
// {
|
||||
// field: 'customerType',
|
||||
// label: '客户类别',
|
||||
// defaultValue: '',
|
||||
// component: 'ApiSelect',
|
||||
// colProps: { span: 5 },
|
||||
// componentProps: ({ formModel }) => {
|
||||
// return {
|
||||
// api: () => {
|
||||
// return new Promise((resolve) => {
|
||||
// getDictOption('djy_cust_prop').then((res) => {
|
||||
// console.log(res, 111111111111111)
|
||||
|
||||
// resolve(res)
|
||||
// })
|
||||
// })
|
||||
// },
|
||||
// labelField: 'label',
|
||||
// valueField: 'value',
|
||||
// resultField: 'data',
|
||||
// filterOption: (input: string, option: any) => {
|
||||
// return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
// },
|
||||
// onChange: (v: string, obj) => {
|
||||
// GetClientListByCode({ code: v }).then((res) => {
|
||||
// const { data } = res
|
||||
// data.forEach((item) => {
|
||||
// item['label'] = item.shortName
|
||||
// item['value'] = item.codeName
|
||||
// })
|
||||
// companyDict.value = data
|
||||
// })
|
||||
// },
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
{
|
||||
field: 'customerId',
|
||||
label: '结算对象',
|
||||
defaultValue: '',
|
||||
component: 'Input',
|
||||
show: false,
|
||||
colProps: { span: 8 },
|
||||
},
|
||||
{
|
||||
field: 'customerName',
|
||||
label: '结算对象',
|
||||
component: 'Input',
|
||||
defaultValue: '',
|
||||
dynamicDisabled: true,
|
||||
colProps: { span: 8 },
|
||||
},
|
||||
// {
|
||||
// label: '',
|
||||
// field: 'customerId',
|
||||
// component: 'Input',
|
||||
// defaultValue: '',
|
||||
// show: false,
|
||||
// },
|
||||
// {
|
||||
// label: '',
|
||||
// field: 'customerType',
|
||||
// component: 'Input',
|
||||
// defaultValue: '',
|
||||
// show: false,
|
||||
// },
|
||||
{
|
||||
field: 'description',
|
||||
label: '模板说明',
|
||||
component: 'Input',
|
||||
colProps: { span: 8 },
|
||||
},
|
||||
{
|
||||
field: 'note',
|
||||
label: '备注',
|
||||
component: 'Input',
|
||||
colProps: { span: 16 },
|
||||
},
|
||||
]
|
||||
@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<div>
|
||||
<BasicTable class="ds-table-detail" @register="registerTable" @row-dbClick="handleAudit">
|
||||
<template #tableTitle>
|
||||
<span class="title">自动费用模板</span>
|
||||
<a-button type="link" @click="handleCreate">
|
||||
<span class="iconfont icon-new_document"></span>
|
||||
添加
|
||||
</a-button>
|
||||
<a-popconfirm
|
||||
title="确定删除当前选中数据？"
|
||||
ok-text="是"
|
||||
cancel-text="否"
|
||||
@confirm="handleDelete"
|
||||
>
|
||||
<a-button type="link">
|
||||
<span class="iconfont icon-shanchu21"></span>
|
||||
删除
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'action'">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
icon: 'clarity:note-edit-line',
|
||||
tooltip: '编辑',
|
||||
onClick: handleAudit.bind(null, record),
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
</BasicTable>
|
||||
<TenantAuditStepModal
|
||||
@register="registerModal"
|
||||
@success="handleSuccess"
|
||||
:customerName="props.customerName"
|
||||
:customerId="props.clientId"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { defineComponent, onMounted, ref } from 'vue'
|
||||
import { BasicTable, useTable, TableAction, SorterResult } from '/@/components/Table'
|
||||
import { ApiList, ApiDel } from './api'
|
||||
import { useModal } from '/@/components/Modal'
|
||||
import TenantAuditStepModal from './TenantAuditStepModal.vue'
|
||||
import { columns, searchFormSchema } from './columns'
|
||||
import { formatParams } from '/@/hooks/web/common'
|
||||
import { useMessage } from '/@/hooks/web/useMessage'
|
||||
const { notification } = useMessage()
|
||||
const props = defineProps({
|
||||
clientId: { type: String },
|
||||
customerName: { type: String },
|
||||
})
|
||||
const [registerModal, { openModal }] = useModal()
|
||||
const [registerTable, { reload, getSelectRows, getForm, getPaginationRef }] = useTable({
|
||||
title: '',
|
||||
api: async (p) => {
|
||||
const res: API.DataResult = await ApiList(p)
|
||||
return new Promise((resolve) => {
|
||||
resolve({ data: [...res.data], total: res.count })
|
||||
})
|
||||
},
|
||||
beforeFetch: (p) => {
|
||||
p['customerId'] = props.clientId
|
||||
return formatParams(p)
|
||||
},
|
||||
columns,
|
||||
pagination: true,
|
||||
bordered: true,
|
||||
showTableSetting: false,
|
||||
canResize: true,
|
||||
resizeHeightOffset: 35,
|
||||
immediate: true,
|
||||
rowSelection: { type: 'checkbox' },
|
||||
clickToRowSelect: false,
|
||||
actionColumn: {
|
||||
width: 80,
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
fixed: 'right',
|
||||
},
|
||||
})
|
||||
function handleCreate() {
|
||||
openModal(true, {
|
||||
customerId: props.clientId,
|
||||
isUpdate: false,
|
||||
})
|
||||
}
|
||||
function handleAudit(record: Recordable) {
|
||||
openModal(true, {
|
||||
record,
|
||||
// record: { clientId: props.clientId, ...record },
|
||||
isUpdate: true,
|
||||
})
|
||||
}
|
||||
// 删除
|
||||
async function handleDelete(record: Recordable) {
|
||||
const select = getSelectRows()
|
||||
let ApiData: any = {
|
||||
ids: [],
|
||||
}
|
||||
if (select.length === 0) {
|
||||
notification.warning({ message: '请至少选择一条数据', duration: 3 })
|
||||
return false
|
||||
} else {
|
||||
ApiData.ids = select.map((item) => {
|
||||
return item.id
|
||||
})
|
||||
}
|
||||
|
||||
ApiDel(ApiData).then((res) => {
|
||||
console.log(res)
|
||||
notification.success({ message: res.message, duration: 3 })
|
||||
reload()
|
||||
})
|
||||
// const res: API.DataResult = await ApiDel({
|
||||
// id: '',
|
||||
// ids: [record.id],
|
||||
// })
|
||||
// if (res.succeeded) {
|
||||
// notification.success({ message: res.message, duration: 3 })
|
||||
// reload()
|
||||
// } else {
|
||||
// notification.error({ message: res.message, duration: 3 })
|
||||
// }
|
||||
}
|
||||
function handleSuccess() {
|
||||
reload()
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.ds-table-detail {
|
||||
margin-top: -16px;
|
||||
.title {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
line-height: 15.84px;
|
||||
color: rgba(51, 56, 61, 1);
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue