src/views/specialEquipment/maintain/Record--add.vue

@@ -9,12 +9,59 @@
 	<el-form
 		ref="form"
 		:model="form"
-		:size="size"
 		:label-position="labelPosition"
 		v-loading="formLoading">
 		<el-row :gutter="20">
-			<!-- 设备大类  -->
+			<!-- 是否计划保养  -->
 			<el-col :span="8">
+				<el-form-item
+					label="是否计划保养"
+					prop="relatePlan"
+					:rules="[
+						{
+							required: true,
+							message: '是否计划保养不能为空',
+							trigger: 'blur',
+						},
+					]">
+					<el-select
+						v-model="form.relatePlan"
+						:placeholder="`是否计划保养`"
+						:disabled="disabled"
+						@change="handlePlanChange">
+						<el-option
+							v-for="opt in [
+								{ label: '是', value: 1 },
+								{ label: '否', value: 2 },
+							]"
+							:key="opt.value"
+							:label="opt.label"
+							:value="opt.value" />
+					</el-select>
+				</el-form-item>
+			</el-col>
+
+			<!-- 所属计划  -->
+			<el-col :span="8" v-if="form.relatePlan == 1">
+				<el-form-item label="所属计划" prop="maintainPlanId">
+					<el-select
+						v-model="form.maintainPlanId"
+						:placeholder="`请选择所属计划`"
+						:disabled="disabled"
+						filterable
+						clearable
+						@change="$emit('update', form)">
+						<el-option
+							v-for="opt in planOptions"
+							:key="opt.value"
+							:label="opt.label"
+							:value="opt.value" />
+					</el-select>
+				</el-form-item>
+			</el-col>
+
+			<!-- 设备大类  -->
+			<el-col :span="8" v-if="form.relatePlan == 1">
 				<el-form-item
 					label="设备大类"
 					prop="equipmentCategory"
@@ -25,6 +72,8 @@
 						v-model="form.equipmentCategory"
 						:placeholder="`请选择设备大类`"
 						:disabled="disabled"
+						clearable
+						filterable
 						@change="handleEqTypeChange">
 						<el-option
 							v-for="opt in equipmentTypeOptions"
@@ -47,6 +96,8 @@
 						v-model="form.equipmentId"
 						:placeholder="`请选择设备`"
 						:disabled="disabled"
+						filterable
+						clearable
 						@change="handleEqChange">
 						<el-option
 							v-for="opt in equipmentOptions"
@@ -57,96 +108,6 @@
 				</el-form-item>
 			</el-col>
 
-			<!-- 保养单号  -->
-			<el-col :span="8">
-				<el-form-item label="保养单号" prop="maintainOrderNumber">
-					<el-input
-						v-model="form.name"
-						@change="$emit('update', form)"
-						:placeholder="`请输入保养单号`"
-						:disabled="disabled" />
-				</el-form-item>
-			</el-col>
-
-			<!-- 保养人员  -->
-			<el-col :span="8">
-				<el-form-item
-					label="保养人员"
-					prop="maintainWorker"
-					:rules="[
-						{ required: true, message: '保养人员不能为空', trigger: 'blur' },
-					]">
-					<el-select
-						v-model="form.maintainWorker"
-						:placeholder="`请选择保养人员`"
-						:disabled="disabled"
-						@change="$emit('update', form)">
-						<el-option
-							v-for="opt in workerOptions"
-							:key="opt.value"
-							:label="opt.label"
-							:value="opt.value" />
-					</el-select>
-				</el-form-item>
-			</el-col>
-
-			<!-- 是否计划保养  -->
-			<el-col :span="8">
-				<el-form-item
-					label="是否计划保养"
-					prop="relatePlan"
-					:rules="[
-						{
-							required: true,
-							message: '是否计划保养不能为空',
-							trigger: 'blur',
-						},
-					]">
-					<el-select
-						v-model="form.relatePlan"
-						:placeholder="`是否计划保养`"
-						:disabled="disabled"
-						@change="$emit('update', form)">
-						<el-option
-							v-for="opt in [
-								{ label: '是', value: 1 },
-								{ label: '否', value: 2 },
-							]"
-							:key="opt.value"
-							:label="opt.label"
-							:value="opt.value" />
-					</el-select>
-				</el-form-item>
-			</el-col>
-
-			<!-- 所属计划  -->
-			<el-col :span="8">
-				<el-form-item label="所属计划" prop="maintainPlanId">
-					<el-select
-						v-model="form.maintainPlanId"
-						:placeholder="`请选择所属计划`"
-						:disabled="disabled"
-						@change="$emit('update', form)">
-						<el-option
-							v-for="opt in planOptions"
-							:key="opt.value"
-							:label="opt.label"
-							:value="opt.value" />
-					</el-select>
-				</el-form-item>
-			</el-col>
-
-			<!-- 保养用时  -->
-			<el-col :span="8">
-				<el-form-item label="保养用时(h)" prop="timeUsed">
-					<el-input
-						v-model="form.timeUsed"
-						@change="$emit('update', form)"
-						:placeholder="`请输入保养用时(h)`"
-						:disabled="disabled" />
-				</el-form-item>
-			</el-col>
-
 			<!-- 开始时间  -->
 			<el-col :span="8">
 				<el-form-item
@@ -187,6 +148,53 @@
 				</el-form-item>
 			</el-col>
 
+			<!-- 保养人员  -->
+			<el-col :span="8">
+				<el-form-item
+					label="保养人员"
+					prop="maintainWorker"
+					:rules="[
+						{ required: true, message: '保养人员不能为空', trigger: 'blur' },
+					]">
+					<el-select
+						v-model="form.maintainWorker"
+						:placeholder="`请选择保养人员`"
+						:disabled="disabled"
+						filterable
+						clearable
+						multiple
+						@change="$emit('update', form)">
+						<el-option
+							v-for="opt in workerOptions"
+							:key="opt.value"
+							:label="opt.label"
+							:value="opt.value" />
+					</el-select>
+				</el-form-item>
+			</el-col>
+
+			<!-- 保养单号  -->
+			<el-col :span="8">
+				<el-form-item label="保养单号" prop="maintainOrderNumber">
+					<el-input
+						v-model="form.maintainOrderNumber"
+						@change="$emit('update', form)"
+						:placeholder="`请输入保养单号`"
+						:disabled="disabled" />
+				</el-form-item>
+			</el-col>
+
+			<!-- 保养用时  -->
+			<el-col :span="8">
+				<el-form-item label="保养用时(h)" prop="timeUsed">
+					<el-input
+						v-model="form.timeUsed"
+						@change="$emit('update', form)"
+						:placeholder="`请输入保养用时(h)`"
+						:disabled="disabled" />
+				</el-form-item>
+			</el-col>
+
 			<!-- 上传文件  -->
 			<el-col :span="24">
 				<el-form-item label="上传文件" prop="files">
@@ -209,11 +217,7 @@
 							icon="el-icon-upload2"
 							:disabled="disabled"
 							:before-upload="beforeUpload"
-							:on-success="
+							:on-success="handleUploadSuccess">
-								(response, file, fileList) => {
-									handleUploadSuccess(response, file, col.prop);
-								}
-							">
 							<el-button size="mini" :disabled="disabled">
 								<svg-icon
 									icon-class="icon-upload"
@@ -241,23 +245,25 @@
 				<el-form-item label="保养描述" prop="maintenanceDes">
 					<div style="position: relative">
 						<div
-							v-if="1"
+							v-if="disabled"
 							class="modal"
 							style="
 								position: absolute;
 								top: 0;
 								left: 0;
+								z-index: 1000;
 								width: 100%;
 								height: 100%;
-								background: rgba(0, 0, 0, 0.3);
+								background: #ccc3;
-								backdrop-filter: blur(2px);
+								user-select: none;
+								cursor: not-allowed;
 							"></div>
 						<Editor
-							style="margin-top: 40px"
+							class="record-add__editor"
-							v-model="form.maintenanceDes"
+							:value="form.maintenanceDes"
 							:min-height="192"
 							:disabled="disabled"
-							@change="$emit('update', form)" />
+							@input="handleEditorInput" />
 					</div>
 				</el-form-item>
 			</el-col>
@@ -269,6 +275,68 @@
 import { getAccessToken } from '@/utils/auth';
 import Editor from '@/components/Editor';
 
+import tupleImg from '@/assets/images/tuple.png';
+const uploadedFile = {
+	name: 'UploadedFile',
+	props: ['file', 'disabled'],
+	data() {
+		return {};
+	},
+	methods: {
+		handleDelete() {
+			this.$emit('delete', this.file);
+		},
+		async handleDownload() {
+			const data = await this.$axios({
+				url: this.file.fileUrl,
+				method: 'get',
+				responseType: 'blob',
+			});
+
+			await this.$message.success('开始下载');
+			// create download link
+			const url = window.URL.createObjectURL(data);
+			const link = document.createElement('a');
+			link.href = url;
+			link.download = this.file.fileName;
+			document.body.appendChild(link);
+			link.click();
+			document.body.removeChild(link);
+		},
+	},
+	mounted() {},
+	render: function (h) {
+		return (
+			<div
+				title={this.file.fileName}
+				onClick={this.handleDownload}
+				style={{
+					background: `url(${tupleImg}) no-repeat`,
+					backgroundSize: '14px',
+					backgroundPosition: '0 55%',
+					paddingLeft: '20px',
+					paddingRight: '24px',
+					textOverflow: 'ellipsis',
+					whiteSpace: 'nowrap',
+					overflow: 'hidden',
+					cursor: 'pointer',
+					display: 'inline-block',
+				}}>
+				{this.file.fileName}
+				{!this.disabled && (
+					<el-button
+						type="text"
+						icon="el-icon-close"
+						style="float: right; position: relative; top: 2px; left: 8px; z-index: 100"
+						class="dialog__upload_component__close"
+						onClick={this.handleDelete}
+					/>
+				)}
+			</div>
+		);
+	},
+};
+
 export default {
 	name: 'DialogForm',
 	model: {
@@ -276,7 +344,7 @@ export default {
 		event: 'update',
 	},
 	emits: ['update'],
-	components: { Editor },
+	components: { Editor, uploadedFile },
 	props: {
 		dataForm: {
 			type: Object,
@@ -286,6 +354,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		labelPosition: {
+			type: String,
+			default: 'top',
+		},
 	},
 	data() {
 		return {
@@ -301,6 +373,8 @@ export default {
 				{ label: '消防设备', value: 2 },
 				{ label: '特种设备', value: 3 },
 			],
+			workerOptions: [],
+			planOptions: [],
 			uploadHeaders: { Authorization: 'Bearer ' + getAccessToken() },
 			uploadUrl: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/upload', // 上传有关的headers，url都是固定的
 		};
@@ -335,7 +409,6 @@ export default {
 	},
 	mounted() {
 		this.initOptions();
-		this.getEquipmentList();
 		this.getCode('/base/equipment-maintain-plan/getCode');
 	},
 	methods: {
@@ -361,12 +434,12 @@ export default {
 			this.initPlan();
 		},
 
-		async initEquipment() {
+		async initEquipment(type = 'special-equipment') {
 			this.formLoading = true;
 			const response = await this.$axios('/base/core-equipment/listAll');
 			this.equipmentList = response.data || [];
 			const equipmentOptions = (response.data || [])
-				.filter((item) => item.special)
+				.filter((item) => (type == 'special-equipment' ? item.special : true))
 				.map((item) => ({
 					label: item.name,
 					value: item.id,
@@ -376,9 +449,30 @@ export default {
 			this.formLoading = false;
 		},
 
-		async initWorker() {},
+		async initWorker() {
+			this.formLoading = true;
+			const response = await this.$axios({
+				url: '/base/core-worker/listAll',
+			});
+			this.workerOptions = (response.data || []).map((item) => ({
+				label: item.name,
+				value: item.id,
+			}));
+			this.formLoading = false;
+		},
 
-		async initPlan() {},
+		async initPlan() {
+			this.formLoading = true;
+			const response = await this.$axios({
+				url: '/base/equipment-maintain-plan/page',
+				params: { pageNo: 1, pageSize: 100, speical: true },
+			});
+			this.planOptions = (response.data?.list || []).map((item) => ({
+				label: item.name,
+				value: item.id,
+			}));
+			this.formLoading = false;
+		},
 
 		// handlers
 		handleEqTypeChange(type) {
@@ -396,12 +490,40 @@ export default {
 			// this.$emit('update', this.form)
 		},
 
+		handleEqChange() {
+			this.$emit('update', this.form);
+		},
+
+		// 修改 是否计划保养 时
+		handlePlanChange(val) {
+			console.log('handlePlanChange', val);
+			this.form.equipmentCategory = null;
+			this.form.equipmentId = null;
+			this.$emit('update', { ...this.form, relatePlan: val });
+			this.initEquipment(val == 1 ? 'special-equipment' : null);
+		},
+
+		handleEditorInput(html) {
+			this.$emit('update', {
+				...this.form,
+				maintenanceDes: html,
+			});
+		},
+
 		// upload
 		handleFilesOpen() {},
 
 		beforeUpload() {},
 
-		handleUploadSuccess() {},
+		handleUploadSuccess(response, file) {
+			this.$modal.msgSuccess('上传成功');
+			console.log('file', file);
+			this.form.files.push({
+				fileName: file.name,
+				fileUrl: response.data,
+			});
+			this.$emit('update', this.form);
+		},
 
 		handleDeleteFile(file) {},
 	},
@@ -424,7 +546,7 @@ export default {
 	position: relative;
 	overflow: hidden;
 	transition: height 0.3s ease-out;
-	margin-top: 40px;
+	// margin-top: 40px;
 }
 
 .upload-in-dialog {
@@ -460,4 +582,10 @@ export default {
 .height-48 {
 	height: 35px !important;
 }
+
+:deep(.record-add__editor) {
+	.ql-picker-label {
+		display: flex;
+	}
+}
 </style>

src/views/specialEquipment/maintain/Record.vue

@@ -519,7 +519,7 @@ export default {
 				relatePlan: null,
 				maintainPlanId: null,
 				equipmentId: null,
-				maintainWorker: null,
+				maintainWorker: [],
 				maintainOrderNumber: null,
 				startTime: null,
 				endTime: null,
@@ -582,10 +582,12 @@ export default {
 				if (!valid) {
 					return;
 				}
-				this.form.maintainWorker = this.form.maintainWorker.join(',');
 				// 修改的提交
 				if (this.form.id != null) {
-					this.put(this.form).then((response) => {
+					this.put({
+						...this.form,
+						maintainWorker: this.form.maintainWorker.join(','),
+					}).then((response) => {
 						this.$modal.msgSuccess('修改成功');
 						this.open = false;
 						this.getList();
@@ -593,12 +595,29 @@ export default {
 					return;
 				}
 				// 添加的提交
-				this.post(this.form).then((response) => {
+				this.post({
+					...this.form,
+					maintainWorker: this.form.maintainWorker.join(','),
+				}).then((response) => {
 					this.$modal.msgSuccess('新增成功');
+
+					// 跳转至 备品备件 保养
+					const toSparePartsMaintain = () => {
+						this.open = false;
+						// 没有备品备件保养模块。。。
+					};
+
+					this.$confirm('是否有备品备件更换?', '提示', {
+						confirmButtonText: '有',
+						cancelButtonText: '没有',
+					})
+						.then(toSparePartsMaintain)
+						.catch(() => {
 							this.open = false;
 							this.getList();
 						});
 				});
+			});
 		},
 		/** 删除按钮操作 */
 		handleDelete(row) {