feat:人工处理流程

src/views/hard/components/hard-door-log.vue

@@ -63,23 +63,86 @@
 						<div class="el-timeline-right-content">
 							<el-tag type="danger" style="width: 120px">错误</el-tag>
 							<span class="color-danger ml-2">{{ detail.errorDesc }}</span>
+							<el-button v-if="!detail?.hardAuth?.manualChangeUserId" class="ml-2" link @click="visibleErrorChangeDiaog = true">
+								处理
+							</el-button>
+						</div>
+					</el-timeline-item>
+				</el-timeline>
+				<el-timeline v-if="detail?.hardAuth?.manualChangeUserId">
+					<el-timeline-item placement="top">
+						<div class="el-timeline-right-content">
+							<el-tag type="warning" style="width: 120px">手动处理智能柜订单</el-tag>
+							<span class="color-warning ml-2">{{ detail.hardAuth.manualChangeTime }}</span>
+							<span class="color-warning ml-2">{{ detail.hardAuth.manualChangeRemark }}</span>
+							<div class="ml-2" v-if="detail.hardAuth.manualChangePic">
+								<preview-image width="40px" height="40px" :src="detail.hardAuth.manualChangePic" />
+							</div>
 						</div>
 					</el-timeline-item>
 				</el-timeline>
 			</el-descriptions-item>
 		</el-descriptions>
+
+		<el-dialog
+			title="手动处理智能柜订单"
+			width="30%"
+			@close="dialogClose"
+			v-model="visibleErrorChangeDiaog"
+			:close-on-click-modal="false"
+			draggable
+		>
+			<el-form ref="formRef" :model="form" :rules="dataRules" formDialogRef label-width="90px" v-loading="formLoading">
+				<el-row :gutter="24">
+					<el-col :span="24" class="mb20">
+						<el-form-item label="设备名" prop="image">
+							<upload-imgs v-model="form.image" />
+						</el-form-item>
+					</el-col>
+					<el-col :span="24" class="mb20">
+						<el-form-item label="处理原因" prop="remark">
+							<el-input v-model="form.remark" placeholder="请输入处理原因" type="textarea" :autosize="{ minRows: 6 }" />
+						</el-form-item>
+					</el-col>
+				</el-row>
+			</el-form>
+			<template #footer>
+				<span class="dialog-footer">
+					<el-button @click="dialogClose">取消</el-button>
+					<el-button type="primary" @click="onSubmit" :disabled="formLoading">确认</el-button>
+				</span>
+			</template>
+		</el-dialog>
 	</div>
 </template>
 <script setup lang="ts" name="hard-door-log">
 import * as hardFlowManager from "/@/api/hard/hard-door-flow"
+import { useMessage } from "/@/hooks/message"
 
 type Props = {
 	orderId?: string
 }
 const props = withDefaults(defineProps<Props>(), { orderId: "" })
 
+const formRef = ref()
+
+const visibleErrorChangeDiaog = ref<boolean>(false)
+
 const detail = ref<any>({})
 const loading = ref<boolean>(false)
+const formLoading = ref<boolean>(false)
+
+// 提交表单数据
+const form = reactive({
+	flowId: "",
+	image: "",
+	remark: "用户未购买商品",
+})
+
+// 定义校验规则
+const dataRules = ref({
+	remark: [{ required: true, message: "处理原因不能为空", trigger: "blur" }],
+})
 
 watch(
 	() => props.orderId,
@@ -102,6 +165,26 @@ const getFlow = async () => {
 	}
 }
 
+const dialogClose = async () => {
+	formRef.value?.resetFields()
+	visibleErrorChangeDiaog.value = false
+}
+
+const onSubmit = async () => {
+	const valid = await formRef.value.validate().catch(() => {})
+	if (!valid) return false
+	try {
+		formLoading.value = true
+		await hardFlowManager.errorChange({ ...form, flowId: detail.value.id })
+		useMessage().success("处理成功")
+		dialogClose()
+	} catch (error: any) {
+		useMessage().error(error.msg)
+	} finally {
+		formLoading.value = false
+	}
+}
+
 onMounted(() => {
 	getFlow()
 })