From d07eaa7cfc554d2d785b5025a82520bfc2eca1df Mon Sep 17 00:00:00 2001 From: mengfanliang Date: Mon, 9 Sep 2024 15:17:43 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BA=8B=E6=95=85=E4=BF=A1=E6=81=AF?= =?UTF-8?q?=E6=9F=A5=E8=AF=A2=E6=A8=A1=E5=9D=97=E6=8E=A5=E5=8F=A3=E5=AF=B9?= =?UTF-8?q?=E6=8E=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- .../accident/records/components/addOrEdit.vue | 249 ++++++++++++++---- .../accident/records/components/list.vue | 54 ++-- src/views/accident/records/index.vue | 4 +- 4 files changed, 235 insertions(+), 74 deletions(-) diff --git a/package.json b/package.json index b674980..1e8818a 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "author": "", "private": true, "scripts": { - "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 192.168.0.125", + "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "unit": "jest --config test/unit/jest.conf.js --coverage", "e2e": "node test/e2e/runner.js", diff --git a/src/views/accident/records/components/addOrEdit.vue b/src/views/accident/records/components/addOrEdit.vue index a9c6e14..c2b6983 100644 --- a/src/views/accident/records/components/addOrEdit.vue +++ b/src/views/accident/records/components/addOrEdit.vue @@ -4,96 +4,105 @@ ref="form" :model="infoForm" :rules="rules" - label-width="110px" - style="width: 800px" + label-width="180px" + style="width: 900px" > - - + + - - + + - - + + - - + + - - + + - + - - + + - - + + - - + + - - + + - - + + - - + + - + - - + + - - + + - - + + - - + + - + + format="yyyy-MM-dd HH:mm:ss" + value-format="yyyy-MM-dd HH:mm:ss" + /> + + + +
import { requestFN } from '../../../../utils/request' +import { upload } from '@/utils/upload' export default { data() { return { + config: config, infoForm: { id: '', // 主键ID incidentNumber: '', // 事故案号 @@ -128,7 +139,7 @@ export default { seriouslyInjured: null, // 重伤人数 cause: '', // 事故起因 summary: '', // 事故概述 - photos: '', // 事故照片 + photos: [], // 事故照片 analysis: '', // 原因分析及责任认定 suggestions: '', // 考核建议 measures: '', // 整改措施 @@ -141,8 +152,13 @@ export default { /** 事故等级 */ incidentLevels: [], tableName: '', - /** 图片文件 */ - image: null, + /** 图片上传限制个数 */ + limitNum: 1, + /** 预览图片地址 */ + dialogImageUrl: '', + allowRemove: true, // 添加一个控制标志 + /** 预览弹窗 */ + dialogImgVisible: false, rules: { incidentNumber: [{ required: true, message: '事故案号不能为空', trigger: 'blur' }], incidentName: [{ required: true, message: '事故名称不能为空', trigger: 'blur' }], @@ -167,6 +183,12 @@ export default { } }, + computed: { + isDisabled() { + return this.$parent.tableName === '查看' + } + }, + created() { this.getDict() const id = this.$parent.id @@ -174,39 +196,154 @@ export default { if (id == null || id === '') { this.infoForm = this.$options.data().infoForm } else { + // 若有数据项的ID, 则请求接口并回显表单 requestFN('/accident/' + id, {}).then((data) => { this.infoForm = data.info + this.getFileImageBinaray(data.info.photos) }).catch((e) => { - this.listLoading = false }) } }, methods: { - handleRemovePicture() {}, + /** + * 文件列表移除文件时的钩子 + */ + handleRemovePicture(file) { + if (file.remotePathName) { + requestFN(`/accident/delete/photos/${file.remotePathName}`).then((res) => { + if (res.result === 'success') { + this.infoForm.photos = [] + this.$message({ + message: '文件删除成功', + type: 'info', + duration: 2000 + }) + } + }) + } + }, - handleChangeIMG() {}, + /** + * 单独查询图片流文件 + */ + getFileImageBinaray(fileName) { + requestFN(`/accident/view/photos`, { path: fileName }).then((res) => { + console.log('res :>> ', res) + }) + }, - handlePictureCardPreview() {}, + /** + * 点击文件列表中已上传的文件时的钩子 + */ + handlePictureCardPreview(file) { + this.dialogImgVisible = true + this.dialogImageUrl = file.url + }, + + /** + * 文件上传失败时的钩子处理 + */ + handleError(err, file, fileList) { + this.$message({ + message: `${file.name}上传失败, 请稍后重试`, + type: 'error', + duration: 2000 + }) + }, + + /** + * 文件超出个数限制的钩子处理 + */ + handleExceed(files, fileList) { + this.$message.warning(`当前限制选择 ${this.limitNum} 个文件,本次选择了 ${files.length} 个文件`) + }, + + /** + * 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。 + */ + beforeAccidentUpload(file) { + if (!file) { + this.$message({ + message: '请上传图片', + type: 'error' + }) + return false + } + const types = ['image/jpeg', 'image/jpg', 'image/png'] + const isImage = types.includes(file.type) + if (!isImage) { + this.$message.error('上传图片只能是 JPG、JPEG、PNG 格式!') + return false + } else { + const formData = new FormData() + formData.append('file', file) + upload('/accident/import/photos', formData).then((data) => { + if (data.result === 'success') { + this.infoForm.photos = [{ + name: file.name, + url: URL.createObjectURL(file), + remotePathName: data.path + }] + } + }) + return false + } + }, - beforeHiddenUpload() {}, /** * 返回到列表页面 */ goBack() { + this.handleResetInitForm() + this.image = [] + this.dialogImageUrl = '' this.$parent.activeName = 'List' }, + /** + * 表单清空处理 + */ + handleResetInitForm() { + this.infoForm = { + id: '', // 主键ID + incidentNumber: '', // 事故案号 + incidentName: '', // 事故名称 + incidentType: null, // 事故类型 + companyName: '', // 所属公司 + incidentLevel: '', // 事故级别 + incidentNature: '', // 事故性质 + location: '', // 事故发生地点 + incidentDate: null, // 事故发生时间 + directLoss: '', // 直接经济损失（万元） + injured: null, // 受伤人数 + fatalities: null, // 死亡人数 + seriouslyInjured: null, // 重伤人数 + cause: '', // 事故起因 + summary: '', // 事故概述 + photos: [], // 事故照片 + analysis: '', // 原因分析及责任认定 + suggestions: '', // 考核建议 + measures: '', // 整改措施 + creator: '', // 填表人 + reportDate: null // 报出日期 + } + }, + /** * 表单确认按钮 */ confirm() { - requestFN('/accident' + (this.tableName === '修改' ? '/update' : '/save'), this.infoForm) + const params = { + ...this.infoForm, + photos: this.infoForm.photos[0].remotePathName + } + requestFN('/accident' + (this.tableName === '修改' ? '/update' : '/save'), params) .then((response) => { // 删除成功后的处理 this.$message.success(this.tableName + '成功') - this.getList() // 重新获取数据 this.infoForm = this.$options.data().infoForm + this.$parent.activeName = 'List' // eslint-disable-next-line handle-callback-err }).catch((error) => { this.$message.error(this.tableName + '失败') diff --git a/src/views/accident/records/components/list.vue b/src/views/accident/records/components/list.vue index 3e10e21..92478ea 100644 --- a/src/views/accident/records/components/list.vue +++ b/src/views/accident/records/components/list.vue @@ -7,7 +7,7 @@ - + 新增 - 导出 全部导出 刷新 批量删除 @@ -74,16 +73,17 @@ - +
+
@@ -101,6 +101,7 @@ export default { data() { return { + config: config, // 搜索查询条件 searchForm: { /** 事故名称 */ @@ -118,6 +119,8 @@ export default { /** 事故等级 */ incidentLevel: '' }, + /** 当前选中行 */ + multipleSelection: [], /** 列表加载态 */ listLoading: false, /** 源列表数据项 */ @@ -179,7 +182,7 @@ export default { }, /** - * 跳转页面 + * 跳转查看详情页面 */ goView(id, name) { this.$parent.id = id @@ -187,6 +190,15 @@ export default { this.$parent.activeName = 'AddOrEdit' }, + /** + * 跳转修改页面 + */ + goEdit(id, name) { + this.$parent.id = id + this.$parent.tableName = name + this.$parent.activeName = 'AddOrEdit' + }, + /** * 删除行数据 */ @@ -207,6 +219,7 @@ export default { requestFN(url).then((response) => { // 删除成功后的处理 this.$message.success('删除成功') + this.searchList() // eslint-disable-next-line handle-callback-err }).catch((error) => { this.$message.error('删除失败') @@ -217,18 +230,24 @@ export default { message: '已取消删除' }) }) - this.searchList() }, - /** - * 导出 - */ - handleExport() {}, - /** * 全部导出 */ - handleAllExport() {}, + handleAllExport() { + this.$confirm('确定要下载excel模板吗?', { + confirmButtonText: '确定', + cancelButtonText: '取消', + type: 'warning' + }).then(() => { + this.listLoading = false + window.open(config.templatefileUrl + 'template/limitSpace.xls') + }).catch(() => { + this.listLoading = false + }) + this.listLoading = false + }, /** * 刷新 @@ -236,7 +255,7 @@ export default { handleRefresh() { this.searchForm = this.$options.data().searchForm this.searchList() - this.toggleSelection() + // this.toggleSelection() }, /** @@ -264,7 +283,6 @@ export default { requestFN(url).then((response) => { // 删除成功后的处理 this.$message.success('删除成功') - this.searchList() // 重新获取数据 // eslint-disable-next-line handle-callback-err }).catch((error) => { this.$message.error('删除失败') @@ -302,4 +320,8 @@ export default { } - + diff --git a/src/views/accident/records/index.vue b/src/views/accident/records/index.vue index 20a3876..92c63da 100644 --- a/src/views/accident/records/index.vue +++ b/src/views/accident/records/index.vue @@ -26,7 +26,9 @@ export default { watch: { activeName(val) { if (val === 'List') { - this.$refs.List.getList() + this.$nextTick(() => { + this.$refs.List.searchList() + }) } } }