From 76e848e2558349c54a6cbaed4ade08749bc43650 Mon Sep 17 00:00:00 2001 From: shj <1790240199@qq.com> Date: 星期五, 15 七月 2022 10:31:27 +0800 Subject: [PATCH] 管理 --- src/components/equipmentDailog/Dailog.vue | 82 +++++++++++++++++++++++++++++++++++------ 1 files changed, 70 insertions(+), 12 deletions(-) diff --git a/src/views/facilityManagement/InstrumentationInformation/component/Dailog.vue b/src/components/equipmentDailog/Dailog.vue similarity index 88% rename from src/views/facilityManagement/InstrumentationInformation/component/Dailog.vue rename to src/components/equipmentDailog/Dailog.vue index a60d634..12c2dd3 100644 --- a/src/views/facilityManagement/InstrumentationInformation/component/Dailog.vue +++ b/src/components/equipmentDailog/Dailog.vue @@ -261,6 +261,24 @@ <el-table-column align="center" sortable prop="address" label="巡检人" /> </el-table> </el-tab-pane> + <el-tab-pane label="保养维修标准" name="six" v-if="Dailogtype"> + <el-upload + v-model:file-list="fileList" + class="upload-demo" + action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" + multiple + :on-preview="handlePreview" + :on-remove="handleRemove" + :before-remove="beforeRemove" + :limit="3" + :on-exceed="handleExceed" + > + <el-button type="primary">点击上传</el-button> + <template #tip> + <div class="el-upload__tip"></div> + </template> + </el-upload> + </el-tab-pane> </el-tabs> <template #footer> <span class="dialog-footer"> @@ -287,6 +305,8 @@ import repairDailog from './repairDailog.vue'; import standardDailog from './standardDailog.vue'; import DailogSearchUser from '/@/components/DailogSearchUser/index.vue'; +import { ElMessage, ElMessageBox } from 'element-plus'; +import type { UploadProps, UploadUserFile } from 'element-plus'; export default defineComponent({ components: { categoryDailog, regionDailog, DailogSearchUser, maintenanceDailog, detectDailog, repairDailog, standardDailog }, setup() { @@ -301,8 +321,10 @@ resource: '', desc: '', }); - const openDailog = () => { + const Dailogtype=ref(false) + const openDailog = (type:boolean) => { dialogVisible.value = true; + Dailogtype.value=type }; const activeName = ref('first'); const tableData = [ @@ -355,8 +377,39 @@ const openStandard = () => { standardShow.value.openDailog(); }; + // 上传 + const fileList = ref<UploadUserFile[]>([ + { + name: 'element-plus-logo.svg', + url: 'https://element-plus.org/images/element-plus-logo.svg', + }, + { + name: 'element-plus-logo2.svg', + url: 'https://element-plus.org/images/element-plus-logo.svg', + }, + ]); + + const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => { + console.log(file, uploadFiles); + }; + + const handlePreview: UploadProps['onPreview'] = (uploadFile) => { + console.log(uploadFile); + }; + + const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => { + ElMessage.warning(`The limit is 3, you selected ${files.length} files this time, add up to ${files.length + uploadFiles.length} totally`); + }; + + const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => { + return ElMessageBox.confirm(`Cancel the transfert of ${uploadFile.name} ?`).then( + () => true, + () => false + ); + }; return { dialogVisible, + Dailogtype, form, openDailog, Search, @@ -376,22 +429,27 @@ openRepair, standardShow, openStandard, + fileList, + handleRemove, + handlePreview, + handleExceed, + beforeRemove }; }, }); </script> <style scoped> -.el-form-item{ - width: 400px; +.el-form-item { + width: 400px; } -.formType:after{ - content: ''; - width: 250px; - } -.formType{ - padding:20px 20px; - display: flex; - justify-content: space-between; - flex-wrap: wrap; +.formType:after { + content: ''; + width: 250px; +} +.formType { + padding: 20px 20px; + display: flex; + justify-content: space-between; + flex-wrap: wrap; } </style> \ No newline at end of file -- Gitblit v1.9.2