Pārlūkot izejas kodu

feat: 审批回退、减签弹窗 100%

luoyali 1 gadu atpakaļ
vecāks
revīzija
eab438eed2

+ 128 - 0
src/views/approve/components/loseSignDialog.vue

@@ -0,0 +1,128 @@
+<template>
+	<!-- 回退审批弹窗 -->
+	<el-dialog v-model="reviewVisibleDialog" title="审批减签" width="700" destroy-on-close>
+		<el-form ref="formRef" v-loading="uploadLoading" label-position="top" element-loading-text="图片上传中..." :model="form" label-width="80px">
+			<el-form-item label="给谁减签" prop="review" :rules="[{ required: true, message: '请选择减签人员' }]">
+				<el-select v-model="form.deliverTo" placeholder="请选择减签人员">
+					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+				</el-select>
+			</el-form-item>
+			<el-form-item label="审批意见" prop="review" >
+				<el-input v-model="form.review" type="textarea" placeholder="请输入内容" maxlength="64" show-word-limit> </el-input>
+			</el-form-item>
+			<el-form-item prop="attachment" label="附件" class="example-img-box">
+				<!--'.docx', '.doc', '.pptx', '.ppt', '.xlsx', '.xls', '.zip', '.csv', '.pdf', '.png', '.jpg'  因前端不支持图片以外格式,所以注释 -->
+				<FileUpload
+					v-model="form.attachment"
+					source="project"
+					return="array"
+					:limit="5"
+					:file-size="10"
+					:accept="['.png', '.jpg']"
+					@success="clearValidate"
+				/>
+			</el-form-item>
+		</el-form>
+		<template #footer>
+			<span class="dialog-footer">
+				<el-button :loading="btnDisabled" @click="closeDialog">取 消</el-button>
+				<el-button type="primary" :loading="btnDisabled" :disabled="uploadLoading" @click="submitForm">确 定</el-button>
+			</span>
+		</template>
+	</el-dialog>
+</template>
+
+<script setup>
+import { computed, reactive, ref } from 'vue'
+import FileUpload from '@/components/FileUpload.vue'
+
+const props = defineProps({
+	modelValue: {
+		type: Boolean,
+		default: false
+	},
+	showOrderDesc: {
+		type: Boolean,
+		default: true
+	},
+	// 1-审核 2-复审 3-审核,复审 ,第一版默认审核
+	linkType: {
+		type: String,
+		default: '1'
+	}
+})
+const btnDisabled = ref(false)
+const form = reactive({
+	deliverTo: '',
+	review: '',
+	attachment: []
+})
+const formRef = ref(null)
+const uploadLoading = ref(false)
+const options = [
+	{
+		value: 'Option1',
+		label: 'Option1'
+	},
+	{
+		value: 'Option2',
+		label: 'Option2'
+	},
+	{
+		value: 'Option3',
+		label: 'Option3'
+	},
+	{
+		value: 'Option4',
+		label: 'Option4'
+	},
+	{
+		value: 'Option5',
+		label: 'Option5'
+	}
+]
+
+const $myEmit = defineEmits(['update:modelValue', 'confirm'])
+
+const submitForm = () => {
+	btnDisabled.value = true
+	const formData = { ...form }
+	formRef.value
+		.validate()
+		.then(valid => {
+			if (valid) {
+				emit('confirm', formData)
+				btnDisabled.value = false
+			}
+		})
+		.catch(err => {
+			console.error('挂起订单表单拦截', err)
+			btnDisabled.value = false
+		})
+}
+
+const closeDialog = () => {
+	$myEmit('update:modelValue', false)
+}
+
+const reviewVisibleDialog = computed({
+	get() {
+		return props.modelValue
+	},
+	set(val) {
+		$myEmit('update:modelValue', val)
+	}
+})
+
+const clearValidate = () => {}
+</script>
+
+<style scoped>
+.example-img-box {
+	width: 100% !important;
+}
+
+.example-img-box .el-form-item__content {
+	display: block;
+}
+</style>

+ 128 - 0
src/views/approve/components/rollbackDialog.vue

@@ -0,0 +1,128 @@
+<template>
+	<!-- 回退审批弹窗 -->
+	<el-dialog v-model="reviewVisibleDialog" title="回退审批" width="700" destroy-on-close>
+		<el-form ref="formRef" v-loading="uploadLoading" label-position="top" element-loading-text="图片上传中..." :model="form" label-width="80px">
+			<el-form-item label="回退到" prop="review" :rules="[{ required: true, message: '请选择回退节点' }]">
+				<el-select v-model="form.deliverTo" placeholder="请选择回退节点">
+					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+				</el-select>
+			</el-form-item>
+			<el-form-item label="回退原因" prop="review">
+				<el-input v-model="form.review" type="textarea" placeholder="请输入回退原因" maxlength="64" show-word-limit> </el-input>
+			</el-form-item>
+			<el-form-item prop="attachment" label="附件" class="example-img-box">
+				<!--'.docx', '.doc', '.pptx', '.ppt', '.xlsx', '.xls', '.zip', '.csv', '.pdf', '.png', '.jpg'  因前端不支持图片以外格式,所以注释 -->
+				<FileUpload
+					v-model="form.attachment"
+					source="project"
+					return="array"
+					:limit="5"
+					:file-size="10"
+					:accept="['.png', '.jpg']"
+					@success="clearValidate"
+				/>
+			</el-form-item>
+		</el-form>
+		<template #footer>
+			<span class="dialog-footer">
+				<el-button :loading="btnDisabled" @click="closeDialog">取 消</el-button>
+				<el-button type="primary" :loading="btnDisabled" :disabled="uploadLoading" @click="submitForm">确 定</el-button>
+			</span>
+		</template>
+	</el-dialog>
+</template>
+
+<script setup>
+import { computed, reactive, ref } from 'vue'
+import FileUpload from '@/components/FileUpload.vue'
+
+const props = defineProps({
+	modelValue: {
+		type: Boolean,
+		default: false
+	},
+	showOrderDesc: {
+		type: Boolean,
+		default: true
+	},
+	// 1-审核 2-复审 3-审核,复审 ,第一版默认审核
+	linkType: {
+		type: String,
+		default: '1'
+	}
+})
+const btnDisabled = ref(false)
+const form = reactive({
+	deliverTo: '',
+	review: '',
+	attachment: []
+})
+const formRef = ref(null)
+const uploadLoading = ref(false)
+const options = [
+	{
+		value: 'Option1',
+		label: 'Option1'
+	},
+	{
+		value: 'Option2',
+		label: 'Option2'
+	},
+	{
+		value: 'Option3',
+		label: 'Option3'
+	},
+	{
+		value: 'Option4',
+		label: 'Option4'
+	},
+	{
+		value: 'Option5',
+		label: 'Option5'
+	}
+]
+
+const $myEmit = defineEmits(['update:modelValue', 'confirm'])
+
+const submitForm = () => {
+	btnDisabled.value = true
+	const formData = { ...form }
+	formRef.value
+		.validate()
+		.then(valid => {
+			if (valid) {
+				emit('confirm', formData)
+				btnDisabled.value = false
+			}
+		})
+		.catch(err => {
+			console.error('挂起订单表单拦截', err)
+			btnDisabled.value = false
+		})
+}
+
+const closeDialog = () => {
+	$myEmit('update:modelValue', false)
+}
+
+const reviewVisibleDialog = computed({
+	get() {
+		return props.modelValue
+	},
+	set(val) {
+		$myEmit('update:modelValue', val)
+	}
+})
+
+const clearValidate = () => {}
+</script>
+
+<style scoped>
+.example-img-box {
+	width: 100% !important;
+}
+
+.example-img-box .el-form-item__content {
+	display: block;
+}
+</style>