|
|
@@ -2,34 +2,45 @@
|
|
|
<el-dialog v-model="visible" :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :close-on-press-escape="false">
|
|
|
<el-form :model="dataForm" :rules="rules" ref="dataFormRef" @keyup.enter="dataFormSubmitHandle()" label-width="120px">
|
|
|
<el-form-item label="巡检类型" prop="inspectionType">
|
|
|
- <el-option :label="item.dictLabel" :value="item.dictValue" v-for="item in state.getDictByKey('attendanceStatus')"></el-option>
|
|
|
+ <el-select v-model="dataForm.inspectionType" placeholder="巡检类型">
|
|
|
+ <el-option :label="item.dictLabel" :value="item.dictValue" v-for="item in state.getDictByKey('inspectionType')"></el-option>
|
|
|
+ </el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="开始日期" prop="startDate">
|
|
|
<el-date-picker
|
|
|
v-model="dataForm.startDate"
|
|
|
- type="date"
|
|
|
+ type="datetime"
|
|
|
placeholder="选择开始日期"
|
|
|
- value-format="YYYY-MM-DD"
|
|
|
+ value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
style="width: 100%;"
|
|
|
></el-date-picker>
|
|
|
- <!-- <el-input v-model="dataForm.startDate" placeholder="开始日期"></el-input> -->
|
|
|
</el-form-item>
|
|
|
<el-form-item label="结束日期" prop="endDate">
|
|
|
<el-date-picker
|
|
|
v-model="dataForm.endDate"
|
|
|
- type="date"
|
|
|
+ type="datetime"
|
|
|
placeholder="选择结束日期"
|
|
|
- value-format="YYYY-MM-DD"
|
|
|
+ value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
style="width: 100%;"
|
|
|
></el-date-picker>
|
|
|
- <!-- <el-input v-model="dataForm.endDate" placeholder="结束日期"></el-input> -->
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="用户上传的文件路径" prop="filePath">
|
|
|
- <el-input v-model="dataForm.filePath" placeholder="用户上传的文件路径"></el-input>
|
|
|
+ <el-form-item label="巡检照片" prop="filePath">
|
|
|
+ <el-upload
|
|
|
+ class="avatar-uploader"
|
|
|
+ :action="action"
|
|
|
+ :headers="headers"
|
|
|
+ :show-file-list="false"
|
|
|
+ :on-success="handleAvatarSuccess"
|
|
|
+ :before-upload="beforeAvatarUpload"
|
|
|
+ >
|
|
|
+ <img v-if="imageUrl" :src="imageUrl" class="avatar" />
|
|
|
+ <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
|
|
|
+ </el-upload>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="审阅状态" prop="status">
|
|
|
+ <el-select v-model="dataForm.status" placeholder="审阅状态">
|
|
|
<el-option :label="item.dictLabel" :value="item.dictValue" v-for="item in state.getDictByKey('inspectionReviewStatus')"></el-option>
|
|
|
- <!-- <el-input v-model="dataForm.status" placeholder="0-待确认 1-已确认"></el-input> -->
|
|
|
+ </el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="备注" prop="remark">
|
|
|
<el-input v-model="dataForm.remark" placeholder="备注"></el-input>
|
|
|
@@ -43,13 +54,21 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
+import app from "@/constants/app";
|
|
|
+import { getToken } from "@/utils/cache";
|
|
|
+import { parseTime } from '@/utils/ruoyi'
|
|
|
import { reactive, ref } from "vue";
|
|
|
import baseService from "@/service/baseService";
|
|
|
import { ElMessage } from "element-plus";
|
|
|
-import { parseTime } from '@/utils/ruoyi'
|
|
|
+import { Plus } from '@element-plus/icons-vue'
|
|
|
+import type { UploadProps } from 'element-plus'
|
|
|
const emit = defineEmits(["refreshDataList"]);
|
|
|
import useView from "@/hooks/useView";
|
|
|
const state = reactive({ ...useView({}) });
|
|
|
+
|
|
|
+const action = `${app.api}/sys/oss/upload`;
|
|
|
+const headers = {token: getToken() }
|
|
|
+const imageUrl = ref('');
|
|
|
const visible = ref(false);
|
|
|
const dataFormRef = ref();
|
|
|
|
|
|
@@ -65,14 +84,9 @@ const rules = ref({
|
|
|
],
|
|
|
endDate: [
|
|
|
{ required: true, message: '必填项不能为空', trigger: 'blur' }
|
|
|
- ],
|
|
|
- filePath: [
|
|
|
- { required: true, message: '必填项不能为空', trigger: 'blur' }
|
|
|
],
|
|
|
status: [
|
|
|
{ required: true, message: '必填项不能为空', trigger: 'blur' }
|
|
|
- ],
|
|
|
- remark: [
|
|
|
]
|
|
|
});
|
|
|
|
|
|
@@ -83,6 +97,7 @@ const init = (id?: number) => {
|
|
|
// 重置表单数据
|
|
|
if (dataFormRef.value) {
|
|
|
dataFormRef.value.resetFields();
|
|
|
+ imageUrl.value = '';
|
|
|
}
|
|
|
|
|
|
if (id) {
|
|
|
@@ -90,10 +105,32 @@ const init = (id?: number) => {
|
|
|
}
|
|
|
};
|
|
|
|
|
|
+const handleAvatarSuccess: UploadProps['onSuccess'] = (
|
|
|
+ response,
|
|
|
+ uploadFile
|
|
|
+) => {
|
|
|
+ if(response.code!==0) return ElMessage.error(response.msg);
|
|
|
+ imageUrl.value = response?.data?.src;
|
|
|
+}
|
|
|
+
|
|
|
+const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
|
|
|
+ if (!['image/jpeg','image/png','image/jpp'].includes(rawFile.type)) {
|
|
|
+ ElMessage.error('请上传jpg/png格式的图片!')
|
|
|
+ return false
|
|
|
+ } else if (rawFile.size / 1024 / 1024 > 10) {
|
|
|
+ ElMessage.error('图片大小不能超过10MB!')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ return true
|
|
|
+}
|
|
|
+
|
|
|
// 获取信息
|
|
|
const getInfo = (id: number) => {
|
|
|
baseService.get("/emergency/inspection/" + id).then((res) => {
|
|
|
Object.assign(dataForm, res.data);
|
|
|
+ dataForm.inspectionType = dataForm.inspectionType + '';
|
|
|
+ dataForm.status = dataForm.status + '';
|
|
|
+ imageUrl.value = dataForm.filePath;
|
|
|
});
|
|
|
};
|
|
|
|
|
|
@@ -103,9 +140,10 @@ const dataFormSubmitHandle = () => {
|
|
|
if (!valid) {
|
|
|
return false;
|
|
|
}
|
|
|
+ if(!imageUrl.value) return ElMessage.error('请上传图片');
|
|
|
dataForm.startDate = dataForm.startDate ? parseTime(new Date(dataForm.startDate), '{yy}-{mm}-{dd} {hh}:{ii}:{ss}') : null;
|
|
|
dataForm.endDate = dataForm.endDate ? parseTime(new Date(dataForm.endDate), '{yy}-{mm}-{dd} {hh}:{ii}:{ss}') : null;
|
|
|
- dataForm.status = dataForm.status ? Number(dataForm.status) : null;
|
|
|
+ dataForm.filePath = imageUrl.value;
|
|
|
(!dataForm.id ? baseService.post : baseService.put)("/emergency/inspection", dataForm).then((res) => {
|
|
|
ElMessage.success({
|
|
|
message: '成功',
|
|
|
@@ -123,3 +161,33 @@ defineExpose({
|
|
|
init
|
|
|
});
|
|
|
</script>
|
|
|
+<style scoped>
|
|
|
+.avatar-uploader .avatar {
|
|
|
+ width: 178px;
|
|
|
+ height: 178px;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
+<style>
|
|
|
+.avatar-uploader .el-upload {
|
|
|
+ border: 1px dashed var(--el-border-color);
|
|
|
+ border-radius: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ transition: var(--el-transition-duration-fast);
|
|
|
+}
|
|
|
+
|
|
|
+.avatar-uploader .el-upload:hover {
|
|
|
+ border-color: var(--el-color-primary);
|
|
|
+}
|
|
|
+
|
|
|
+.el-icon.avatar-uploader-icon {
|
|
|
+ font-size: 28px;
|
|
|
+ color: #8c939d;
|
|
|
+ width: 178px;
|
|
|
+ height: 178px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+</style>
|
