wisdomisitezwfront-web/src/views/enterprise/hoistingMachineryRecord/components/addHoistMachinery.vue

<template>
	<el-dialog width="80%" v-model="visible" :show-close="false">
		<template #title>
			<div class="title-detail">
				<!-- <img src="@/assets/images/tableIcon/look.png" alt="" /> -->
				<span>{{ newTitle }}</span>
				<el-icon>
					<close @click="closeMain" />
				</el-icon>
			</div>
		</template>
		<div>
			<el-tabs v-model="activeName" type="card" class="demo-tabs">
				<el-tab-pane label="工程概况" name="first">
					<h4 class="littleTitle">基本信息</h4>
					<div class="overview">
						<el-form ref="formRef" :model="formData" label-width="180px" :rules="rules" class="basic-form" size="default">
							<!-- <el-form ref="formDataRef" :model="formData" label-width="150px" class="basic-form"> -->
							<el-row :gutter="120">
								<el-col :span="12">
									<el-form-item label="设备类型:" prop="type">
										<el-select
											v-model="formData.type"
											:disabled="newTitle == '查看设备'"
											placeholder="请选择"
											style="width: 100%"
										>
											<el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="是否外地设备:" prop="nonlocal">
										<el-radio-group placeholder="请选择" v-model="formData.nonlocal">
											<el-radio :label="1">是</el-radio>
											<el-radio :label="0">否</el-radio>
										</el-radio-group>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="120">
								<el-col :span="12">
									<el-form-item label="编号性质:" prop="theNature">
										<el-select
											v-model="formData.theNature"
											:disabled="newTitle == '查看设备'"
											placeholder="请选择"
											style="width: 100%"
										>
											<el-option v-for="item in propertyList" :key="item.value" :label="item.label" :value="item.value">
											</el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="是否全新设备:" prop="newEquipment">
										<el-radio-group placeholder="请选择" v-model="formData.newEquipment">
											<el-radio :label="1">是</el-radio>
											<el-radio :label="0">否</el-radio>
										</el-radio-group>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="120">
								<el-col :span="12">
									<el-form-item label="规格型号:" prop="model">
										<el-input v-model="formData.model" placeholder="请输入" :disabled="newTitle == '查看设备'" />
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="许可证发证机关:" prop="licensingAuthority">
										<el-input v-model="formData.licensingAuthority" placeholder="请输入" :disabled="newTitle == '查看设备'" />
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="120">
								<el-col :span="12">
									<el-form-item label="出厂(合格证):" prop="certificateApproval">
										<el-input v-model="formData.certificateApproval" placeholder="请输入" :disabled="newTitle == '查看设备'" />
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="工作幅度(m):" prop="workingRange">
										<el-input v-model="formData.workingRange" placeholder="请输入" :disabled="newTitle == '查看设备'" />
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="120">
								<el-col :span="12">
									<el-form-item label="最大额定起重量(kg):" prop="maximumWeight">
										<el-input v-model="formData.maximumWeight" placeholder="请输入" :disabled="newTitle == '查看设备'" />
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="独立起升高度(m):" prop="hoistingHeight">
										<el-input v-model="formData.hoistingHeight" placeholder="请输入" :disabled="newTitle == '查看设备'" />
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="120">
								<el-col :span="12">
									<el-form-item label="购置日期:" prop="purchaseDate">
										<el-date-picker
											:disabled="newTitle == '查看设备'"
											style="width: 100%"
											v-model="formData.purchaseDate"
											format="YYYY-MM-DD"
											value-format="YYYY-MM-DD"
											type="date"
											placeholder="请选择时间"
										/>
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="编号有效期:" prop="timeLimit">
										<el-date-picker
											:disabled="newTitle == '查看设备'"
											style="width: 100%"
											v-model="formData.timeLimit"
											format="YYYY-MM-DD"
											value-format="YYYY-MM-DD"
											type="date"
											placeholder="请选择时间"
										/>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="120">
								<el-col :span="12">
									<el-form-item label="设备原值:" prop="theInitial">
										<el-input v-model.number="formData.theInitial" placeholder="请输入" :disabled="newTitle == '查看设备'" />
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="设备改造次数:" prop="equipmentNumber">
										<el-input v-model.number="formData.equipmentNumber" placeholder="请输入" :disabled="newTitle == '查看设备'" />
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="120">
								<el-col :span="12">
									<el-form-item label="发票编码:" prop="serialNumber">
										<el-input v-model="formData.serialNumber" placeholder="请输入" :disabled="newTitle == '查看设备'" />
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="购买合同编码:" prop="contractNo">
										<el-input v-model="formData.contractNo" placeholder="请输入" :disabled="newTitle == '查看设备'" />
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="120">
								<el-col :span="12">
									<el-form-item label="生产厂家:" prop="manufacturer">
										<el-input v-model="formData.manufacturer" placeholder="请输入" :disabled="newTitle == '查看设备'" />
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="出厂日期:" prop="manufactureDate">
										<el-date-picker
											:disabled="newTitle == '查看设备'"
											style="width: 100%"
											v-model="formData.manufactureDate"
											format="YYYY-MM-DD"
											value-format="YYYY-MM-DD"
											type="date"
											placeholder="请选择时间"
										/>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="120">
								<el-col :span="12">
									<el-form-item label="制造许可证编号:" prop="manufacturingLicense">
										<el-input v-model="formData.manufacturingLicense" placeholder="请输入" :disabled="newTitle == '查看设备'" />
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="是否为原购产品:" prop="theShipper">
										<el-radio-group placeholder="请选择" v-model="formData.theShipper">
											<el-radio :label="1">是</el-radio>
											<el-radio :label="0">否</el-radio>
										</el-radio-group>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="120">
								<el-col :span="12">
									<el-form-item label="设备用途:" prop="equipmentUseType">
										<el-select
											v-model="formData.equipmentUseType"
											:disabled="newTitle == '查看设备'"
											placeholder="请选择"
											style="width: 100%"
										>
											<el-option v-for="item in useList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="黑匣子信息:" prop="blackBox">
										<el-input v-model="formData.blackBox" placeholder="请输入" :disabled="newTitle == '查看设备'" />
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="120" v-if="formData.type == 1">
								<el-col :span="12">
									<el-form-item label="前臂永久性标识:" prop="towerPermanentForearm">
										<el-input v-model="formData.towerPermanentForearm" placeholder="请输入" :disabled="newTitle == '查看设备'" />
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="后臂永久性标识:" prop="towerPermanentHindArm">
										<el-input v-model="formData.towerPermanentHindArm" placeholder="请输入" :disabled="newTitle == '查看设备'" />
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="120" v-if="formData.type == 1">
								<el-col :span="12">
									<el-form-item label="塔帽永久性标识:" prop="towerPermanentCap">
										<el-input v-model="formData.towerPermanentCap" placeholder="请输入" :disabled="newTitle == '查看设备'" />
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="上转台永久性标识:" prop="towerPermanentSuperior">
										<el-input v-model="formData.towerPermanentSuperior" placeholder="请输入" :disabled="newTitle == '查看设备'" />
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="120" v-if="formData.type == 1">
								<el-col :span="12">
									<el-form-item label="下转台永久性标识:" prop="towerPermanentDown">
										<el-input v-model="formData.towerPermanentDown" placeholder="请输入" :disabled="newTitle == '查看设备'" />
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="标准节点永久性标识:" prop="towerPermanentStandard">
										<el-input v-model="formData.towerPermanentStandard" placeholder="请输入" :disabled="newTitle == '查看设备'" />
									</el-form-item>
								</el-col>
							</el-row>
						</el-form>
					</div>
				</el-tab-pane>
				<el-tab-pane label="附件信息" name="second">
					<h4 class="littleTitle">附件信息</h4>
					<div style="width: 90%; margin: 0 auto">
						<el-table
							:data="documentData"
							class="el-table"
							:header-cell-style="{ backgroundColor: '#f5f7fa', textAlign: 'center' }"
							:cell-style="{ textAlign: 'center' }"
						>
							<el-table-column type="index" label="序号" width="200" />
							<el-table-column prop="dictValue" label="附件名称" />
							<el-table-column label="操作" width="200">
								<template #default="{ row, $index }">
									<el-button type="primary" @click="onUpload(row, $index)" link>上传附件</el-button>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</el-tab-pane>
			</el-tabs>
		</div>
		<template #footer>
			<el-button class="cancelButtonStyle" @click="visible = false">取消</el-button>
			<el-button type="primary" @click="submitForm(formRef)">保存</el-button>
		</template>
	</el-dialog>
	<el-dialog v-model="dialogVisible" title="查看附件" width="30%" show-close>
		<el-table
			:data="documentData"
			border
			class="el-table"
			:header-cell-style="{ backgroundColor: '#f5f7fa', textAlign: 'center' }"
			:cell-style="{ textAlign: 'center' }"
		>
			<el-table-column prop="fileName" label="文件名称" />
			<el-table-column label="操作" width="200">
				<template #default="{ row }">
					<el-button type="primary" link size="small" @click="onDowmload(row)">下载</el-button>
				</template>
			</el-table-column>
		</el-table>
		<template #footer>
			<span class="dialog-footer">
				<el-button type="primary" @click="dialogVisible = false"> 关闭 </el-button>
			</span>
		</template>
	</el-dialog>
	<!-- 附件上传 -->
	<FilesUploadPlus v-model="showFilesUpload" @update:files="handlechange" :files="current.files" :reset="true" />
</template>
<script lang="ts" setup name="addHoistMachinery">
import { ref, watch, onMounted } from "vue";
import { getDicList, exportApp } from "@/api/modules/jxjview";
import { ElMessage, ElMessageBox } from "element-plus";
import { useDownload } from "@/hooks/useDownload";
import type { FormInstance } from "element-plus";
import { hoistEquipAdd } from "@/api/modules/enterpriseApi";
import FilesUploadPlus from "@/components/FilesUploadPlus/FilesUpload.vue";
const props = defineProps({
	addDialog: Boolean,
	newTitle: String
});
const emits = defineEmits(["update:addDialog", "confirm"]);
const documentData = ref<any>([]);
const documentDataIndex = ref(0);
const current = ref({
	files: []
});
const showFilesUpload = ref(false);
const useList = ref([
	{ label: "自用", value: 1 },
	{ label: "租赁", value: 2 }
]);
const typeList = ref([]);
const propertyList = ref([
	{ label: "长期", value: 1 },
	{ label: "临时", value: 2 }
]);
const dialogVisible = ref(false);
const annexFiles = ref([]);
const formRef = ref();
const visible = ref(false);
const activeName = ref("first");
const rules = ref({
	type: [
		{
			required: true,
			message: "请选择",
			trigger: "change"
		}
	],
	nonlocal: [
		{
			required: true,
			message: "请选择",
			trigger: "change"
		}
	],
	theNature: [
		{
			required: true,
			message: "请选择",
			trigger: "change"
		}
	],
	newEquipment: [
		{
			required: true,
			message: "请选择",
			trigger: "change"
		}
	],
	model: [
		{
			required: true,
			message: "请输入",
			trigger: "blur"
		}
	],
	licensingAuthority: [
		{
			required: true,
			message: "请输入",
			trigger: "blur"
		}
	],
	certificateApproval: [
		{
			required: true,
			message: "请输入",
			trigger: "blur"
		}
	],
	workingRange: [
		{
			required: true,
			message: "请输入",
			trigger: "blur"
		},
		{
			pattern: /^\d+(\.\d{0,2})?$/,
			message: "请输入整数或小数点后两位小数",
			trigger: "blur"
		}
	],
	maximumWeight: [
		{
			required: true,
			message: "请输入",
			trigger: "blur"
		},
		{
			pattern: /^\d+(\.\d{0,2})?$/,
			message: "请输入整数或小数点后两位小数",
			trigger: "blur"
		}
	],
	hoistingHeight: [
		{
			required: true,
			message: "请输入",
			trigger: "blur"
		},
		{
			pattern: /^\d+(\.\d{0,2})?$/,
			message: "请输入整数或小数点后两位小数",
			trigger: "blur"
		}
	],
	purchaseDate: [
		{
			required: true,
			message: "请选择",
			trigger: "change"
		}
	],
	timeLimit: [
		{
			required: true,
			message: "请选择",
			trigger: "change"
		}
	],
	theInitial: [
		{
			required: true,
			message: "请输入",
			trigger: "blur"
		}
	],
	equipmentNumber: [
		{
			required: true,
			message: "请输入",
			trigger: "blur"
		},
		{
			pattern: /^[0-9]+$/,
			message: "请输入整数",
			trigger: "blur"
		}
	],
	serialNumber: [
		{
			required: true,
			message: "请输入",
			trigger: "blur"
		}
	],
	contractNo: [
		{
			required: true,
			message: "请输入",
			trigger: "blur"
		}
	],

	manufacturer: [
		{
			required: true,
			message: "请输入",
			trigger: "blur"
		}
	],

	manufactureDate: [
		{
			required: true,
			message: "请选择",
			trigger: "change"
		}
	],

	manufacturingLicense: [
		{
			required: true,
			message: "请输入",
			trigger: "blur"
		}
	],

	theShipper: [
		{
			required: true,
			message: "请选择",
			trigger: "change"
		}
	],
	equipmentUseType: [
		{
			required: true,
			message: "请选择",
			trigger: "change"
		}
	],
	blackBox: [
		{
			required: true,
			message: "请输入",
			trigger: "blur"
		}
	],
	towerPermanentForearm: [
		{
			required: true,
			message: "请输入",
			trigger: "blur"
		}
	],
	towerPermanentHindArm: [
		{
			required: true,
			message: "请输入",
			trigger: "blur"
		}
	],
	towerPermanentCap: [
		{
			required: true,
			message: "请输入",
			trigger: "blur"
		}
	],
	towerPermanentSuperior: [
		{
			required: true,
			message: "请输入",
			trigger: "blur"
		}
	],
	towerPermanentDown: [
		{
			required: true,
			message: "请输入",
			trigger: "blur"
		}
	],
	towerPermanentStandard: [
		{
			required: true,
			message: "请输入",
			trigger: "blur"
		}
	]
});
const formData = ref({
	type: null,
	nonlocal: 0,
	theNature: null,
	newEquipment: 0,
	model: "",
	licensingAuthority: "",
	certificateApproval: "",
	workingRange: "",
	maximumWeight: "",
	hoistingHeight: "",
	purchaseDate: null,
	timeLimit: null,
	theInitial: "",
	equipmentNumber: "",
	serialNumber: "",
	contractNo: "",
	manufacturer: "",
	manufactureDate: null,
	manufacturingLicense: "",
	theShipper: 0,
	equipmentUseType: null,
	blackBox: "",
	towerPermanentForearm: "",
	towerPermanentHindArm: "",
	towerPermanentCap: "",
	towerPermanentSuperior: "",
	towerPermanentDown: "",
	towerPermanentStandard: ""
});
const handlechange = e => {
	console.log(e);
	current.value.files = e.map(item => {
		item.label = current.value.dictLabel;
		return item;
	});
	documentData.value[documentDataIndex.value].fileList = current.value.files;
};
// 上传附件按钮
const onUpload = async (row: any, index: any) => {
	console.log(row);
	showFilesUpload.value = true;
	documentDataIndex.value = index;
	if (row.fileList.length > 0) {
		let arr: any = [];
		row.fileList.map(item => {
			if (item.response) {
				arr.push({
					response: { ...item.response, url: item.response.url },
					name: item.response.originalFilename,
					url: item.response.url,
					size: +item.response.size,
					type: item.response.contentType
				});
			} else {
				arr.push({
					response: { ...item, url: item.fileUrl },
					name: item.fileName,
					url: item.fileUrl,
					size: +item.fileSize,
					type: item.contentType
				});
			}
			delete item.response;
		});
		current.value.files = arr;
		console.log(current.value.files);
	} else {
		current.value.files = [];
	}
};
const getTypeDicMainList = async () => {
	// 获取起重机械设备类型字典
	const { result } = await getDicList({ dictType: "hoist_equip_type" });
	if (result.length > 0) {
		let arr: any = [];
		result.map(item => {
			arr.push({
				label: item.dictValue,
				value: item.dictLabel
			});
		});
		typeList.value.length = 0;
		typeList.value.push(...arr);
	}
};
const onDowmload = row => {
	ElMessageBox.confirm("确认下载数据?", "温馨提示", { type: "warning" }).then(() =>
		useDownload(exportApp, `${row.fileName}`, { fileUrl: row.fileUrl })
	);
};
// 附件信息的查看点击
const onAppendix = row => {
	dialogVisible.value = true;

	// current.value = form.value.annexFiles.filter(item => item.label == row.dictLabel);
};
// 提交整改情况
const submitForm = async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	await formEl.validate(async (valid, fields) => {
		if (valid) {
			console.log(formData.value);
			console.log(documentData.value);
			let requestData = {
				...formData.value,
				annexFiles: [] as any
			};
			documentData.value.map(item => {
				if (item.fileList && item.fileList.length > 0) {
					item.fileList.map(item2 => {
						requestData.annexFiles.push({
							createTime: item2.response.createTime,
							extendName: item2.response.ext,
							fileId: item2.response.id,
							fileName: item2.response.originalFilename,
							fileSize: item2.response.size,
							fileUrl: item2.response.url,
							contentType: item2.response.contentType,
							label: item.dictLabel
						});
					});
				}
			});
			if (formData.value.id) {
				const res = await hoistEquipAdd({ ...formData.value });
				ElMessage.success("编辑成功");
			} else {
				const res = await hoistEquipAdd(requestData);
				ElMessage.success("新增成功");
			}
			emits("confirm");
			visible.value = false;
		} else {
			ElMessage({
				showClose: true,
				message: "请完善表单信息！",
				type: "error"
			});
		}
	});
};
// 关闭两个对话框
const closeMain = () => {
	visible.value = false;
};
const getAnnexDicMainList = async () => {
	// 起重机械设备附件字典
	const res = await getDicList({ dictType: "equip_attachment_name" });
	documentData.value = res.result.map(item => ({ ...item, fileList: [] }));
};
// 监听父组件的visible，用来简介控制el-dialog的弹框开关，一般是用于开
watch(
	() => props.addDialog,
	(n, o) => {
		visible.value = n;
		if (n) {
			formRef.value?.resetFields();
			formData.value = {
				type: null,
				nonlocal: 0,
				theNature: null,
				newEquipment: 0,
				model: "",
				licensingAuthority: "",
				certificateApproval: "",
				workingRange: "",
				maximumWeight: "",
				hoistingHeight: "",
				purchaseDate: null,
				timeLimit: null,
				theInitial: "",
				equipmentNumber: "",
				serialNumber: "",
				contractNo: "",
				manufacturer: "",
				manufactureDate: null,
				manufacturingLicense: "",
				theShipper: 0,
				equipmentUseType: null,
				blackBox: "",
				towerPermanentForearm: "",
				towerPermanentHindArm: "",
				towerPermanentCap: "",
				towerPermanentSuperior: "",
				towerPermanentDown: "",
				towerPermanentStandard: ""
			};
			activeName.value = "first";
			getAnnexDicMainList();
		}
	}
);
// 监听el-dialog显示状态，再通过@update:visible 通知父组件，一般是用于关
watch(visible, (n, o) => {
	emits("update:addDialog", n);
});

onMounted(async () => {
	await getTypeDicMainList();
	await getAnnexDicMainList();
});
</script>
<style scoped lang="scss">
@mixin flex {
	display: flex;
	align-items: center;
}
.title-detail {
	@include flex;
	border-left: 4px solid #008bff;
	padding-left: 6px;
	// > img {
	// 	width: 16px;
	// 	height: 18px;
	// }
	> span {
		font-size: 18px;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		margin-left: 5px;
		margin-right: auto;
	}
	:deep(.el-icon) {
		cursor: pointer;
		color: #a8abb2;
	}
}
.littleTitle {
	margin-top: 23px;
	margin-bottom: 35px;
	border-left: 3px solid #008bff;
	padding-left: 6px;
}
:deep(.el-tabs--card > .el-tabs__header) {
	border-bottom: none;
}
:deep(.el-tabs--card > .el-tabs__header .el-tabs__nav) {
	// width: 600px;
	border: none;
}
:deep(.el-tabs__nav-scroll) {
	display: flex;
	justify-content: center;
	.el-tabs__item {
		width: 220px;
		text-align: center;
		// background: #fff;
		color: #333;

		border: 1px solid #aeaeae;
		// border-radius: 8px;
	}
	.el-tabs__item.is-active {
		background-color: #008bff;
		border: 1px solid #008bff;
		color: #fff;
	}
}
:deep(#tab-first) {
	border-radius: 4px 0 0 4px;
	border-left: 1px solid #aeaeae;
}
:deep(#tab-second) {
	border-radius: 0 4px 4px 0;
}
</style>