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

<script setup lang="ts" name="Order">
import apis from "@a"
import dayjs from "dayjs"
import message from "@@/utils/message"
import CustomerSelect from "@/components/modal-select/CustomerSelect.vue"
import ExpectedProductionSelect from "@/components/modal-select/ExpectedProductionSelect.vue"
import VbFeedbackModal from "./components/VbFeedbackModal.vue"
import VbPayRecordModal from "./components/VbPayRecordModal.vue"
import { customerOptions } from "@/views/erp/_common"
const isEdit = ref(false)
const tableRef = ref()
const tableItemRef = ref()
const modalRef = ref()
const modalItemRef = ref()
const modalSendRef = ref()
const modalFeedbackRef = ref()
const modalPayRecordRef = ref()
const customerModalRef = ref()
const expectedProductionModalRef = ref()
const customerOption = ref([])

customerOptions().then((v: any) => {
	customerOption.value = v
})

const opts = reactive({
	columns: [
		{ field: "id", name: "", width: 100, isSort: true, visible: false, tooltip: true },
		{
			field: "orderNum",
			name: "订单编号",
			visible: true,
			isSort: false,
			width: "120",
			tooltip: true
		},
		{
			field: "customerName",
			name: "客户",
			visible: true,
			isSort: false,
			width: "180",
			tooltip: true
		},
		{ field: "price", name: "价格", visible: true, isSort: false, width: 145 },
		{ field: "deliveryDate", name: "交付日期", visible: true, isSort: false, width: 145 },
		{ field: "status", name: "状态", visible: true, isSort: false, width: 100 },
		{ field: "remark", name: "备注", visible: false, isSort: false, tooltip: true },
		{ field: "actions", name: `操作`, width: 150 }
	] as any[],
	queryParams: {
		orderNum: undefined,
		customerId: undefined,
		dateRangeDeliveryDate: undefined,
		status: undefined
	},
	searchFormItems: [
		{
			field: "orderNum",
			label: "订单编号",
			class: "w-100",
			required: false,
			placeholder: "请输入订单编号",
			component: "I",
			listeners: {
				keyup: (e: KeyboardEvent) => {
					if (e.code == "Enter") {
						handleQuery()
					}
				}
			}
		},
		{
			field: "customerId",
			label: "客户",
			class: "w-100",
			required: false,
			placeholder: "请输入客户",
			component: "I",
			listeners: {
				keyup: (e: KeyboardEvent) => {
					if (e.code == "Enter") {
						handleQuery()
					}
				}
			}
		},
		{
			field: "dateRangeDeliveryDate",
			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.dateRangeDeliveryDate = v
					handleQuery()
				}
			},
			span: 5
		},
		{
			field: "status",
			label: "状态",
			class: "w-100",
			required: false,
			component: "Dict",
			props: {
				placeholder: "请选择状态",
				dictType: "order_status",
				valueIsNumber: 1,
				type: "select"
			},
			listeners: {
				change: () => {
					handleQuery()
				}
			}
		}
	] as any,
	permission: "erp:order",
	handleBtns: [],
	handleFuns: {
		handleCreate,
		handleUpdate: () => {
			const row = tableRef.value.getSelected()
			handleUpdate(row)
		},
		handleDelete: () => {
			const rows = tableRef.value.getSelecteds()
			handleDelete(rows)
		}
	},
	customBtns: [],
	tableListFun: apis.erp.orderApi.list,
	getEntityFun: apis.erp.orderApi.get,
	deleteEntityFun: apis.erp.orderApi.del,
	exportUrl: apis.erp.orderApi.exportUrl,
	exportName: "Order",
	modalTitle: "订单管理",
	formItems: [
		{
			field: "orderNum",
			label: "订单编号",
			disabled: true,
			class: "w-100",
			required: true,
			placeholder: "请输入订单编号",
			component: "I"
		},
		{
			field: "customerName",
			label: "客户",
			class: "w-100",
			required: true,
			placeholder: "请输入客户",
			component: "I",
			disabled: true,
			//component: "slot"
			appendClickFunc: handleShowCustomerModal,
			appendDisabled: () => isEdit.value
		},
		{
			field: "deliveryDate",
			label: "交付日期",
			class: "w-100",
			required: true,
			component: "D",
			props: {
				placeholder: "请选择交付日期",
				type: "date",
				valueFormat: "YYYY-MM-DD"
			}
		},
		{
			field: "price",
			label: "价格",
			class: "w-100",
			required: true,
			component: "I",
			props: {
				placeholder: "请输入价格",
				type: "number"
			}
		},
		// {
		// 	field: "status",
		// 	label: "状态",
		// 	class: "w-100",
		// 	required: true,
		// 	component: "Dict",
		// 	props: {
		// 		dictType: "order_status",
		// 		type: "radio",
		// 		valueIsNumber: 1
		// 	}
		// },
		{
			field: "remark",
			label: "备注",
			class: "w-100",
			required: false,
			placeholder: "请输入备注",
			component: "I",
			props: {
				type: "textarea",
				placeholder: "请输入备注"
			}
		}
	] as any,
	resetForm: () => {
		form.value = emptyFormData.value
	},
	labelWidth: "80px",
	emptyFormData: {
		id: undefined,
		orderNum: undefined,
		customerId: undefined,
		customerNum: undefined,
		customerName: undefined,
		deliveryDate: undefined,
		price: undefined,
		status: 1,
		remark: undefined
	}
})
const orderSelectId = ref()
const orderSelectNum = ref()
//const orderSelectStatus = ref()
const itemOpts = reactive({
	columns: [
		{ field: "id", name: "详情ID", width: 100, isSort: true, visible: false, tooltip: true },
		{
			field: "variety",
			name: "品系",
			visible: true,
			isSort: false,
			width: "auto",
			tooltip: true
		},
		{
			field: "quantity",
			name: "订单数量",
			visible: true,
			isSort: false,
			width: "auto",
			tooltip: true
		},
		// {
		// 	field: "sendDate",
		// 	name: "发货日期",
		// 	visible: true,
		// 	isSort: false,
		// 	width: "auto",
		// 	tooltip: true
		// },
		{
			field: "sendQuantity",
			name: "发货数量",
			visible: true,
			isSort: false,
			width: "auto",
			tooltip: true
		},
		// {
		// 	field: "deliveryDate",
		// 	name: "交付日期",
		// 	visible: true,
		// 	isSort: false,
		// 	width: "auto",
		// 	tooltip: true
		// },
		// { field: "carNum", name: "车牌号", visible: true, isSort: false, tooltip: true },
		// { field: "signedPhoto", name: "签收照片", visible: true, isSort: false, tooltip: true },
		{ field: "status", name: "状态", visible: true, isSort: false, tooltip: true },
		{ field: "actions", name: `操作`, width: 150 }
	] as any[],
	itemQueryParams: {
		orderId: undefined
	},
	permission: "erp:orderItem",
	handleBtns: [],
	handleFuns: {
		handleCreate: () => {
			handleItemCreate()
		},
		handleUpdate: () => {
			const row = tableItemRef.value.getSelected()
			handleItemUpdate(row)
		},
		handleDelete: () => {
			const rows = tableItemRef.value.getSelecteds()
			handleItemDelete(rows)
		}
	},
	customBtns: [],
	tableListFun: apis.erp.orderItemApi.list,
	getEntityFun: apis.erp.orderItemApi.get,
	deleteEntityFun: apis.erp.orderItemApi.del,
	exportUrl: apis.erp.orderItemApi.exportUrl,
	exportName: "OrderItem",
	modalTitle: "订单商品详情",
	formItems: [
		{
			field: "orderNum",
			label: "订单编号",
			disabled: true,
			class: "w-100",
			required: true,
			placeholder: "请输入订单编号",
			component: "I"
		},
		{
			field: "variety",
			label: "品系",
			class: "w-100",
			required: true,
			placeholder: "请输入品系",
			component: "I",
			disabled: true,
			appendClickFunc: handleShowExpectedProductionModal
		},
		{
			field: "quantity",
			label: "订单数量",
			class: "w-100",
			required: true,
			component: "I",
			props: {
				type: "number",
				min: 0
			}
		}
		// {
		// 	field: "sendDate",
		// 	label: "发货日期",
		// 	class: "w-100",
		// 	required: false,
		// 	component: "D",
		// 	props: {
		// 		placeholder: "请选择发货日期",
		// 		type: "date",
		// 		valueFormat: "YYYY-MM-DD"
		// 	}
		// },
		// {
		// 	field: "sendQuantity",
		// 	label: "发货数量",
		// 	class: "w-100",
		// 	required: false,
		// 	component: "I",
		// 	props: {
		// 		type: "number",
		// 		min: 0
		// 	}
		// },
		// {
		// 	field: "deliveryDate",
		// 	label: "交付日期",
		// 	class: "w-100",
		// 	required: false,
		// 	component: "D",
		// 	props: {
		// 		placeholder: "请选择交付日期",
		// 		type: "date",
		// 		valueFormat: "YYYY-MM-DD"
		// 	}
		// },
		// {
		// 	field: "carNum",
		// 	label: "车牌号",
		// 	class: "w-100",
		// 	required: false,
		// 	placeholder: "请输入车牌号",
		// 	component: "I"
		// },
		// {
		// 	field: "signedPhoto",
		// 	label: "签收照片",
		// 	class: "w-100",
		// 	required: false,
		// 	placeholder: "请上传签收照片",
		// 	component: "VbUpload",
		// 	props: {
		// 		uploadUrl: "resource/oss/upload/erp"
		// 	}
		// }
	] as any,
	resetForm: () => {
		// console.log("resetForm", orderItemSelectId.value, detailEmptyFormData.value)
		if (orderSelectId.value || orderSelectId.value !== 0) {
			itemEmptyFormData.value.orderId = orderSelectId.value
		}
		itemForm.value = itemEmptyFormData.value
	},
	labelWidth: "80px",
	itemEmptyFormData: {
		id: undefined,
		orderId: undefined,
		orderNum: undefined,
		expected_production_id: undefined,
		productionQuantity: undefined,
		variety: undefined,
		quantity: 0,
		sendDate: undefined,
		sendQuantity: 0,
		deliveryDate: undefined,
		carNum: undefined,
		signedPhoto: undefined,
		status: 1,
		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.dateRangeDeliveryDate, "DeliveryDate")
	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.dateRangeDeliveryDate = [] as any
	addDateRange(query, query.dateRangeDeliveryDate, "DeliveryDate")
	query.dateRangeCreateTime = [] as any
	addDateRange(query, query.dateRangeCreateTime)
	query.dateRangeUpdateTime = [] as any
	addDateRange(query, query.dateRangeUpdateTime, "UpdateTime")
	//
}

function handleCreate() {
	isEdit.value = false
	apis.erp.orderApi.getOrderNum().then((res: any) => {
		form.value.orderNum = res.msg
	})
	tableRef.value.defaultHandleFuns.handleCreate()
}

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

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

/** 提交按钮 */
function submitForm() {
	apis.erp.orderApi.addOrUpdate(form.value).then(() => {
		handleQuery()
	})
}

function handleAudit(rows: any[]) {
	if (rows.length > 1) {
		message.msgError("只能选择一条数据")
		return
	}
	console.log("handleAudit", rows)
	message.confirm("确定要审核吗？", "确定").then(() => {
		apis.erp.orderApi.audit(rows[0].id).then(() => {
			handleQuery()
		})
	})
}

/** 结清按钮操作 */
function handleComplete(rows: any[]) {
	if (rows.length > 1) {
		message.msgError("只能选择一条数据")
		return
	}
	message.confirm("确定要结清吗？", "确定").then(() => {
		apis.erp.orderApi.complete(rows[0].id).then(() => {
			handleQuery()
		})
	})
}

function handleCancel(rows: any[]) {
	if (rows.length > 1) {
		message.msgError("只能选择一条数据")
		return
	}
	message.confirm("确定要退订吗？", "确定").then(() => {
		apis.erp.orderApi.cancel(rows[0].id).then(() => {
			handleQuery()
		})
	})
}

function handleAuditCancel(rows: any[]) {
	if (rows.length > 1) {
		message.msgError("只能选择一条数据")
		return
	}
	message.confirm("确定要审核退订记录吗？", "确定").then(() => {
		apis.erp.orderApi.auditCancel(rows[0].id).then(() => {
			handleQuery()
		})
	})
}

function handlePayRecord() {
	const rows = tableRef.value.getSelecteds()
	if (rows.length !== 1) {
		message.msgError("请选择一条记录")
		return
	}
	// 显示付款记录模态框
	modalPayRecordRef.value.show(rows[0])
}

function handleFeedback(rows: any[]) {
	if (rows.length > 1) {
		message.msgError("只能选择一条数据")
		return
	}
	// 调用回访记录模态框组件的show方法
	modalFeedbackRef.value.show(rows[0])
}

function handleShowCustomerModal() {
	customerModalRef.value.open()
}

function handleConfirmCustomerModal(rows: any[]) {
	if (rows.length > 0) {
		form.value.customerId = rows[0].id
		form.value.customerNum = rows[0].customerNum
		form.value.customerName = rows[0].customerName
	}
}

function handleCheckBoxChange(isChecked: boolean, row: any) {
	orderSelectId.value = isChecked ? row.id : 0
	orderSelectNum.value = isChecked ? row.orderNum : ""
	//orderSelectStatus.value = isChecked ? row.status : undefined
	itemQueryParams.value.orderId = isChecked ? row.id : undefined
	itemForm.value.orderId = isChecked ? row.id : undefined

	handleItemQuery(itemQueryParams.value)
}
function handleQuerySuccess() {
	const data = tableRef.value.getFirstRowData()
	tableRef.value.setSelected(data, true)
}

const { itemQueryParams, itemEmptyFormData } = toRefs(itemOpts)
const itemForm = ref<any>(itemEmptyFormData.value)

function handleItemCreate() {
	itemForm.value = itemEmptyFormData.value
	tableItemRef.value.defaultHandleFuns.handleCreate()
	nextTick(() => {
		itemForm.value.orderId = orderSelectId.value
		itemForm.value.orderNum = orderSelectNum.value
	})
}

function handleItemUpdate(row: any) {
	tableItemRef.value.defaultHandleFuns.handleUpdate("", row)
}

function handleItemDelete(rows: any) {
	tableItemRef.value.defaultHandleFuns.handleDelete("", rows)
}
function handleItemQuery(query?: any) {
	query = query || tableItemRef.value?.getQueryParams() || itemQueryParams.value
	tableItemRef.value?.query(query)
}

const sendOpts = {
	modalTitle: "订单发货",
	formItems: [
		{
			field: "sendDate",
			label: "发货日期",
			class: "w-100",
			required: true,
			component: "D",
			props: {
				placeholder: "请选择发货日期",
				type: "date",
				valueFormat: "YYYY-MM-DD"
			}
		},
		{
			field: "sendQuantity",
			label: "发货数量",
			class: "w-100",
			required: true,
			component: "I",
			props: {
				type: "number",
				min: 0
			}
		},
		{
			field: "deliveryDate",
			label: "交付日期",
			class: "w-100",
			required: false,
			component: "D",
			props: {
				placeholder: "请选择交付日期",
				type: "date",
				valueFormat: "YYYY-MM-DD"
			}
		},
		{
			field: "carNum",
			label: "车牌号",
			class: "w-100",
			required: false,
			placeholder: "请输入车牌号",
			component: "I"
		},
		{
			field: "signedPhoto",
			label: "签收照片",
			class: "w-100",
			required: false,
			placeholder: "请上传签收照片",
			component: "VbUpload",
			props: {
				uploadUrl: "resource/oss/upload/erp"
			}
		}
	] as any,
	resetForm: () => {
		// console.log("resetForm", orderItemSelectId.value, detailEmptyFormData.value)
		if (orderSelectId.value || orderSelectId.value !== 0) {
			itemEmptyFormData.value.orderId = orderSelectId.value
		}
		itemForm.value = itemEmptyFormData.value
	},
	labelWidth: "80px",
	sendEmptyFormData: {
		id: undefined,
		orderItemId: undefined,
		orderQuantity: 0,
		sendDate: undefined,
		sendQuantity: 0,
		deliveryDate: undefined,
		carNum: undefined,
		signedPhoto: undefined,
		status: 0,
		remark: undefined
	}
}

const sendForm = ref<any>(sendOpts.sendEmptyFormData)

function handleItemSend(row: any) {
	//itemForm.value = row
	//todo 新增发货记录 弹出一个发货编辑的模态窗
	sendForm.value.orderItemId = row.id
	sendForm.value.orderQuantity = row.quantity
	modalSendRef.value.show()
}

/** 提交按钮 */
function submitItemForm() {
	if (!itemForm.value || !itemForm.value.orderId) {
		message.msgError("请先选择一条订单记录创建详情")
		return
	}
	if (Number(itemForm.value.sendQuantity) > Number(itemForm.value.quantity)) {
		message.msgError("发货数量不能大于订单数量")
		return
	}
	apis.erp.orderItemApi.addOrUpdate(itemForm.value).then(() => {
		handleItemQuery()
	})
}
function handleShowExpectedProductionModal() {
	expectedProductionModalRef.value.open()
}

function handleConfirmExpectedProductionModal(rows: any[]) {
	if (rows.length > 0) {
		itemForm.value.expectedProductionId = rows[0].id
		itemForm.value.variety = rows[0].variety
		itemForm.value.productionQuantity = rows[0].productionQuantity
	}
}

function submitSendForm() {
	if (!sendForm.value || !sendForm.value.orderItemId) {
		message.msgError("请先选择一条订单记录创建发货记录")
		return
	}
	if (Number(sendForm.value.sendQuantity) > Number(sendForm.value.orderQuantity)) {
		message.msgError("发货数量不能大于订单数量")
		return
	}
	message.confirm("确定要发货吗？", "确定").then(() => {
		apis.erp.orderSendApi.addOrUpdate(sendForm.value).then(() => {
			handleItemQuery()
		})
	})
}
</script>
<template>
	<div class="app-container">
		<div class="d-flex flex-column">
			<div class="h-400px" style="border-bottom: 4px solid #ddd">
				<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="false"
					:has-checkbox="true"
					:reset-search-form-fun="resetQuery"
					:custom-search-fun="handleQuery"
					@checkbox-change="handleCheckBoxChange"
					@query-success="handleQuerySuccess">
					<template #deliveryDate="{ row }">
						<template v-if="row.deliveryDate">
							{{ dayjs(row.deliveryDate).format("YYYY-MM-DD") }}
						</template>
						<template v-else>-</template>
					</template>
					<template #status="{ row }">
						<DictTag type="order_status" :value-is-number="1" :value="row.status"></DictTag>
					</template>
					<template #actions="{ row }">
						<vb-tooltip content="修改" placement="top" v-if="row.status === 1">
							<el-button
								link
								type="primary"
								@click="handleUpdate(row)"
								v-hasPermission="'erp:order: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" v-if="row.status === 1">
							<el-button
								link
								type="primary"
								@click="handleCancel([row])"
								v-hasPermission="'erp:order:cancel'">
								<template #icon>
									<VbIcon
										icon-name="abstract-11"
										icon-type="duotone"
										class="fs-3 text-danger"></VbIcon>
								</template>
							</el-button>
						</vb-tooltip>
						<vb-tooltip content="审核" placement="top" v-if="row.status === 1">
							<el-button
								link
								type="primary"
								@click="handleAudit([row])"
								v-hasPermission="'erp:order:audit'">
								<template #icon>
									<VbIcon
										icon-name="security-user"
										icon-type="duotone"
										class="fs-3 text-warning"></VbIcon>
								</template>
							</el-button>
						</vb-tooltip>
						<vb-tooltip content="退订审核" placement="top" v-if="row.status === 4">
							<el-button
								link
								type="primary"
								@click="handleAuditCancel([row])"
								v-hasPermission="'erp:order:auditCancel'">
								<template #icon>
									<VbIcon
										icon-name="key-square"
										icon-type="duotone"
										class="fs-3 text-warning"></VbIcon>
								</template>
							</el-button>
						</vb-tooltip>
						<vb-tooltip content="售后回访记录" placement="top">
							<el-button
								link
								type="primary"
								@click="handleFeedback([row])"
								v-hasPermission="'erp:feedback:add'">
								<template #icon>
									<VbIcon
										icon-name="abstract-14"
										icon-type="duotone"
										class="fs-3 text-primary"></VbIcon>
								</template>
							</el-button>
						</vb-tooltip>
						<vb-tooltip content="付款记录" placement="top">
							<el-button
								link
								type="primary"
								@click="handlePayRecord()"
								v-hasPermission="'erp:payRecord:add'">
								<template #icon>
									<VbIcon icon-name="paypal" icon-type="duotone" class="fs-3 text-danger"></VbIcon>
								</template>
							</el-button>
						</vb-tooltip>
						<vb-tooltip content="结清" placement="top" v-if="row.status === 2">
							<el-button
								link
								type="primary"
								@click="handleComplete([row])"
								v-hasPermission="'erp:order:complete'">
								<template #icon>
									<VbIcon icon-name="check" icon-type="duotone" class="fs-3 text-success"></VbIcon>
								</template>
							</el-button>
						</vb-tooltip>
					</template>
				</VbDataTable>
			</div>
			<div class="mt-1 h-200px">
				<VbDataTable
					ref="tableItemRef"
					keyField="id"
					tableBoxHeight="380px"
					:showRightToolbar="false"
					:showSearchBar="false"
					:columns="itemOpts.columns"
					:handle-perm="itemOpts.permission"
					:handle-btns="itemOpts.handleBtns"
					:handle-funs="itemOpts.handleFuns"
					:custom-btns="itemOpts.customBtns"
					:remote-fun="itemOpts.tableListFun"
					:get-entity-fun="itemOpts.getEntityFun"
					:delete-entity-fun="itemOpts.deleteEntityFun"
					:export-url="itemOpts.exportUrl"
					:export-name="itemOpts.exportName"
					:modal="modalItemRef"
					:reset-form-fun="itemOpts.resetForm"
					v-model:form-data="itemForm"
					v-model:query-params="itemQueryParams"
					:noPage="true"
					:check-multiple="true">
					<!-- @form-edit="handleItemEdit" -->
					<template #status="{ row }">
						<DictTag type="order_item_status" :value-is-number="true" :value="row.status"></DictTag>
					</template>
					<!-- <template #signedPhoto="{ row }">
						<VbImagePreview
							v-if="row.signedPhoto"
							:src="row.signedPhoto"
							:image-style="{ margin: `6px 5px -10px 5px`, padding: 0 }"></VbImagePreview>
						<template v-else>-</template>
					</template> -->
					<template #actions="{ row }">
						<vb-tooltip content="修改" placement="top" v-if="row.status === 1">
							<el-button
								link
								type="primary"
								@click="handleItemUpdate(row)"
								v-hasPermission="'erp:orderItem: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" v-if="row.status === 2 || row.status === 3">
							<el-button
								link
								type="primary"
								@click="handleItemSend(row)"
								v-hasPermission="'erp:orderItem:send'">
								<template #icon>
									<VbIcon icon-name="send" icon-type="solid" class="fs-3 text-success"></VbIcon>
								</template>
							</el-button>
						</vb-tooltip>
						<vb-tooltip content="删除" placement="top" v-if="row.status === 1">
							<el-button
								link
								type="primary"
								@click="handleItemDelete([row])"
								v-hasPermission="'erp:orderItem:remove'">
								<template #icon>
									<VbIcon icon-name="trash-square" icon-type="duotone" class="fs-3"></VbIcon>
								</template>
							</el-button>
						</vb-tooltip>
					</template>
				</VbDataTable>
			</div>
		</div>

		<VbModal
			v-model:modal="modalRef"
			:title="opts.modalTitle"
			:form-data="form"
			:form-items="opts.formItems"
			:label-width="opts.labelWidth"
			append-to-body
			@confirm="submitForm">
			<template #orderItemList_form>
				<div></div>
			</template>
		</VbModal>
		<VbModal
			v-model:modal="modalItemRef"
			:title="itemOpts.modalTitle"
			:form-data="itemForm"
			:form-items="itemOpts.formItems"
			:label-width="itemOpts.labelWidth"
			append-to-body
			@confirm="submitItemForm"></VbModal>

		<VbModal
			v-model:modal="modalSendRef"
			:title="sendOpts.modalTitle"
			:form-data="sendForm"
			:form-items="sendOpts.formItems"
			:label-width="sendOpts.labelWidth"
			append-to-body
			@confirm="submitSendForm"></VbModal>
		<VbFeedbackModal ref="modalFeedbackRef"></VbFeedbackModal>
		<VbPayRecordModal ref="modalPayRecordRef"></VbPayRecordModal>
		<CustomerSelect
			ref="customerModalRef"
			:multiple="false"
			@confirm="handleConfirmCustomerModal"></CustomerSelect>
		<ExpectedProductionSelect
			ref="expectedProductionModalRef"
			:multiple="false"
			@confirm="handleConfirmExpectedProductionModal"></ExpectedProductionSelect>
	</div>
</template>