| | |
| | | <el-input class="input-add" v-model.trim="RFIDForm.rfid" placeholder="请输入RFID编码" clearable></el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> |
| | | <el-form-item label="上传图片" prop="rfidImage"> |
| | | <el-upload |
| | | v-model:file-list="fileList" |
| | | class="upload-demo" |
| | | accept="image/*" |
| | | :action="uploadUrl" |
| | | :on-preview="handlePreview" |
| | | :on-remove="handleRemove" |
| | | :before-upload ="getUploadUrl" |
| | | :before-remove="beforeRemove" |
| | | :limit="1" |
| | | :on-exceed="handleExceed" |
| | | > |
| | | <el-button type="primary">点击上传</el-button> |
| | | <template #tip> |
| | | <div class="el-upload__tip"> |
| | | 上传 jpg/png 图片尺寸小于500KB |
| | | </div> |
| | | </template> |
| | | </el-upload> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | </el-form> |
| | | <template #footer> |
| | |
| | | RFIDForm: { |
| | | rfid: string; |
| | | rfidName: string; |
| | | rfidImage: string |
| | | |
| | | }; |
| | | title: string; |
| | | RFIDFormRules: {}; |
| | | uploadUrl: string |
| | | } |
| | | interface levelListState {} |
| | | import { reactive, toRefs, ref } from 'vue'; |
| | | import { RFIDApi } from '/@/api/intellectInspectSystem/RFID'; |
| | | import { ElMessage } from 'element-plus'; |
| | | import { ElMessage, ElMessageBox } from 'element-plus'; |
| | | import type { UploadProps, UploadUserFile } from 'element-plus' |
| | | export default { |
| | | name: 'RFIDDialog', |
| | | setup(props: any, context: any) { |
| | |
| | | isShowRFIDDialog: false, |
| | | RFIDForm: { |
| | | rfid: '', |
| | | rfidName: '' |
| | | rfidName: '', |
| | | rfidImage: '' |
| | | }, |
| | | uploadUrl: '', |
| | | RFIDFormRules: { |
| | | rfid: [{ required: true, message: '请填写RFID编码', trigger: 'blur' }], |
| | | rfidName: [{ required: true, message: '请填写RFID名称', trigger: 'change' }], |
| | |
| | | location: [{ required: true, message: '请填写区域位置', trigger: 'blur' }] |
| | | } |
| | | }); |
| | | |
| | | //打开模态框 |
| | | const openRFIDDialog = (type: string, value: object) => { |
| | | state.isShowRFIDDialog = true; |
| | |
| | | state.title = '新增RFID'; |
| | | state.RFIDForm = { |
| | | rfid: '', |
| | | rfidName: '' |
| | | rfidName: '', |
| | | rfidImage: '' |
| | | }; |
| | | } else { |
| | | state.title = '修改RFID'; |
| | | state.RFIDForm = JSON.parse(JSON.stringify(value)); |
| | | } |
| | | }; |
| | | |
| | | // 图片上传 |
| | | const fileList = ref<UploadUserFile[]>([]) |
| | | |
| | | 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( |
| | | `您选择的图片数量超出要求` |
| | | ) |
| | | } |
| | | const getUploadUrl = async (rawFile: UploadRawFile)=>{ |
| | | const res = await RFIDApi().getUploadUrl() |
| | | if(res.data.code === '200') { |
| | | console.log(res.data, '1111111111') |
| | | state.RFIDForm.rfidImage = res.data.fileName |
| | | console.log(res.data.uploadUrl,'33') |
| | | // state.uploadUrl = res.data.uploadUrl |
| | | console.log(state.uploadUrl,'222222222222') |
| | | } else { |
| | | ElMessage({ |
| | | type: 'warning', |
| | | message: res.data.msg |
| | | }); |
| | | } |
| | | } |
| | | const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => { |
| | | return ElMessageBox.confirm( |
| | | `Cancel the transfert of ${uploadFile.name} ?` |
| | | ).then( |
| | | () => true, |
| | | () => false |
| | | ) |
| | | } |
| | | |
| | | //新增修改提交 |
| | | const submitRFID = async () => { |
| | |
| | | return { |
| | | ...toRefs(state), |
| | | RFIDFormRef, |
| | | fileList, |
| | | getUploadUrl, |
| | | handleRemove, |
| | | handlePreview, |
| | | handleExceed, |
| | | beforeRemove, |
| | | submitRFID, |
| | | openRFIDDialog |
| | | }; |