ChickenFarm/UI/VB.VUE/src/views/erp/sale/statementBill/index.vue

<script setup lang="ts" name="StatementBill">
import apis from "@a"
import dayjs from "dayjs"
import OrderSelect from "@@@/modal-select/OrderSelect.vue"
const billStatusOptions = computed(() => {
	return [
		//{ label: "请选择", value: "" },
		{ label: "已开票", value: "1" },
		{ label: "未开票", value: "0" }
	]
})
const isEdit = ref(false)
const tableRef = ref()
const modalRef = ref()
const orderModalRef = ref()
const opts = reactive({
	columns: [
		{ field: "id", name: "", width: 100, isSort: true, visible: false, tooltip: true },
		{
			field: "orderNum",
			name: "订单号",
			visible: true,
			isSort: false,
			width: "auto",
			tooltip: true
		},
		{
			field: "price",
			name: "应收金额",
			visible: true,
			isSort: false,
			width: "auto",
			tooltip: true
		},
		{
			field: "actualPrice",
			name: "实收金额",
			visible: true,
			isSort: false,
			width: "auto",
			tooltip: true
		},
		{
			field: "billStatus",
			name: "是否开票",
			visible: true,
			isSort: false,
			width: "auto",
			tooltip: true
		},
		{ field: "billDate", name: "开票日期", visible: true, isSort: false, width: 145 },
		{
			field: "billPrice",
			name: "发票金额",
			visible: true,
			isSort: false,
			width: "auto",
			tooltip: true
		},
		{
			field: "billFile",
			name: "发票pdf文件",
			visible: true,
			isSort: false,
			width: "auto",
			tooltip: true
		},
		{ field: "remark", name: "备注", visible: true, isSort: false, tooltip: true },
		{ field: "actions", name: `操作`, width: 150 }
	] as any[],
	queryParams: {
		orderId: undefined,
		price: undefined,
		actualPrice: undefined,
		billStatus: undefined,
		dateRangeBillDate: undefined,
		billPrice: undefined,
		billFile: undefined
	},
	searchFormItems: [
		{
			field: "orderNum",
			label: "订单号",
			class: "w-100",
			required: false,
			placeholder: "请输入订单号",
			component: "I",
			listeners: {
				keyup: (e: KeyboardEvent) => {
					if (e.code == "Enter") {
						handleQuery()
					}
				}
			}
		},
		{
			field: "billStatus",
			label: "是否开票",
			class: "w-100",
			required: false,
			component: "VS",
			placeholder: "请选择是否开票",
			data: () => billStatusOptions.value,
			props: {
				valueIsNumber: 1,
				type: "select"
			},
			listeners: {
				change: () => {
					handleQuery()
				}
			}
		},
		{
			field: "dateRangeBillDate",
			label: "开票日期",
			class: "w-100",
			required: false,
			component: "D",
			placeholder: "请选择开票日期",
			props: {
				type: "daterange",
				valueFormat: "YYYY-MM-DD",
				rangeSeparator: "-",
				startPlaceholder: "开始日期",
				endPlaceholder: "结束日期"
			},
			listeners: {
				change: (v: any) => {
					queryParams.value.dateRangeBillDate = v
					handleQuery()
				}
			},
			span: 5
		}
	] as any,
	permission: "erp:statementBill",
	handleBtns: [],
	handleFuns: {
		handleCreate,
		handleUpdate: () => {
			const row = tableRef.value.getSelected()
			handleUpdate(row)
		},
		handleDelete: () => {
			const rows = tableRef.value.getSelecteds()
			handleDelete(rows)
		}
	},
	customBtns: [],
	tableListFun: apis.erp.statementBillApi.list,
	getEntityFun: apis.erp.statementBillApi.get,
	deleteEntityFun: apis.erp.statementBillApi.del,
	exportUrl: apis.erp.statementBillApi.exportUrl,
	exportName: "StatementBill",
	modalTitle: "对账单信息",
	formItems: [
		{
			field: "orderNum",
			label: "订单编号",
			class: "w-100",
			required: true,
			placeholder: "请输入",
			component: "I",
			disabled: true,
			appendClickFunc: handleShowOrderModal,
			appendDisabled: () => isEdit.value
		},
		{
			field: "price",
			label: "应收",
			class: "w-100",
			required: true,
			placeholder: "请输入应收",
			component: "I"
		},
		{
			field: "actualPrice",
			label: "实收",
			class: "w-100",
			required: true,
			placeholder: "请输入实收",
			component: "I"
		},
		{
			field: "billStatus",
			label: "是否开票",
			class: "w-100",
			required: true,
			component: "VS",
			data: () => billStatusOptions.value,
			props: {
				type: "radio",
				valueIsNumber: 1
			}
		},
		{
			field: "billDate",
			label: "开票日期",
			class: "w-100",
			required: false,
			component: "D",
			props: {
				placeholder: "请选择开票日期",
				type: "date",
				valueFormat: "YYYY-MM-DD"
			}
		},
		{
			field: "billPrice",
			label: "发票金额",
			class: "w-100",
			required: true,
			placeholder: "请输入发票金额",
			component: "I"
		},
		{
			field: "billFile",
			label: "发票pdf文件",
			class: "w-100",
			required: false,
			component: "VbUpload",
			props: {
				uploadUrl: "resource/oss/upload/erp"
			}
		},
		{
			field: "remark",
			label: "备注",
			class: "w-100",
			required: false,
			placeholder: "请输入备注",
			component: "I",
			props: {
				type: "textarea",
				rows: 5
			}
		}
	] as any,
	resetForm: () => {
		form.value = emptyFormData.value
	},
	labelWidth: "80px",
	emptyFormData: {
		id: undefined,
		orderId: undefined,
		orderNum: undefined,
		price: undefined,
		actualPrice: undefined,
		billStatus: 0,
		billDate: undefined,
		billPrice: undefined,
		billFile: undefined,
		remark: undefined
	}
})
const { queryParams, emptyFormData } = toRefs(opts)
const form = ref<any>(emptyFormData.value)

/** 搜索按钮操作 */
function handleQuery(query?: any) {
	query = query || tableRef.value?.getQueryParams() || queryParams.value
	addDateRange(query, query.dateRangeBillDate, "BillDate")
	addDateRange(query, query.dateRangeCreateTime)
	addDateRange(query, query.dateRangeUpdateTime, "UpdateTime")
	tableRef.value?.query(query)
}

/** 重置按钮操作 */
function resetQuery(query?: any) {
	query = query || tableRef.value?.getQueryParams() || queryParams.value
	query.dateRangeBillDate = [] as any
	addDateRange(query, query.dateRangeBillDate, "BillDate")
	query.dateRangeCreateTime = [] as any
	addDateRange(query, query.dateRangeCreateTime)
	query.dateRangeUpdateTime = [] as any
	addDateRange(query, query.dateRangeUpdateTime, "UpdateTime")
	//
}
function handleShowOrderModal() {
	orderModalRef.value.open()
}
function handleConfirmOrderModal(rows: any[]) {
	if (rows.length > 0) {
		form.value.orderId = rows[0].id
		form.value.orderNum = rows[0].orderNum
	}
}
function handleCreate() {
	tableRef.value.defaultHandleFuns.handleCreate()
}

/** 修改按钮操作 */
function handleUpdate(row: any) {
	tableRef.value.defaultHandleFuns.handleUpdate("", row)
}

/** 删除按钮操作 */
function handleDelete(rows: any[]) {
	tableRef.value.defaultHandleFuns.handleDelete("", rows)
}

/** 提交按钮 */
function submitForm() {
	apis.erp.statementBillApi.addOrUpdate(form.value).then(() => {
		handleQuery()
	})
}
</script>
<template>
	<div class="app-container">
		<VbDataTable
			ref="tableRef"
			keyField="id"
			:columns="opts.columns"
			:handle-perm="opts.permission"
			:handle-btns="opts.handleBtns"
			:handle-funs="opts.handleFuns"
			:search-form-items="opts.searchFormItems"
			:custom-btns="opts.customBtns"
			:remote-fun="opts.tableListFun"
			:get-entity-fun="opts.getEntityFun"
			:delete-entity-fun="opts.deleteEntityFun"
			:export-url="opts.exportUrl"
			:export-name="opts.exportName"
			:modal="modalRef"
			:reset-form-fun="opts.resetForm"
			v-model:form-data="form"
			v-model:query-params="queryParams"
			:check-multiple="true"
			:reset-search-form-fun="resetQuery"
			:custom-search-fun="handleQuery">
			<template #billStatus="{ row }">
				<VbTag :data="billStatusOptions" :value-is-number="1" :value="row.billStatus"></VbTag>
			</template>
			<template #billDate="{ row }">
				<template v-if="row.billDate">
					{{ dayjs(row.billDate).format("YYYY-MM-DD") }}
				</template>
				<template v-else>-</template>
			</template>
			<template #actions="{ row }">
				<vb-tooltip content="修改" placement="top">
					<el-button
						link
						type="primary"
						@click="handleUpdate(row)"
						v-hasPermission="'erp:statementBill:edit'">
						<template #icon>
							<VbIcon icon-name="notepad-edit" icon-type="duotone" class="fs-3"></VbIcon>
						</template>
					</el-button>
				</vb-tooltip>
				<vb-tooltip content="删除" placement="top">
					<el-button
						link
						type="primary"
						@click="handleDelete([row])"
						v-hasPermission="'erp:statementBill:remove'">
						<template #icon>
							<VbIcon icon-name="trash-square" icon-type="duotone" class="fs-3"></VbIcon>
						</template>
					</el-button>
				</vb-tooltip>
			</template>
		</VbDataTable>
		<VbModal
			v-model:modal="modalRef"
			:title="opts.modalTitle"
			:form-data="form"
			:form-items="opts.formItems"
			:label-width="opts.labelWidth"
			append-to-body
			@confirm="submitForm"></VbModal>
		<OrderSelect
			ref="orderModalRef"
			:multiple="false"
			@confirm="handleConfirmOrderModal"></OrderSelect>
	</div>
</template>