91 lines
2.2 KiB
Vue
91 lines
2.2 KiB
Vue
<template>
|
|
<el-dialog v-model="visible" title="点位导入" width="40%" :before-close="closeDialog">
|
|
<input style="display:none" type="file" @change="uploadFile" id="fileinput1" class="fileinput" />
|
|
<label class="filelabel" for="fileinput1">上传</label>
|
|
<div class="fileName">
|
|
<span>{{ fileName }}</span>
|
|
<delete class="delete" @click="delFile" v-if="fileName" />
|
|
</div>
|
|
<template #footer>
|
|
<span class="dialog-footer">
|
|
<el-button size="large" @click="closeDialog">取消</el-button>
|
|
<el-button size="large" type="primary" @click="saveP"> 保存 </el-button>
|
|
</span>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
<script>
|
|
import { onMounted, reactive, ref, toRefs, computed, nextTick } from "vue";
|
|
import infoApi from "@/api/infoApi.js";
|
|
import { ElMessage, ElMessageBox } from "element-plus";
|
|
export default {
|
|
props: ["formData", "dialogVisible"],
|
|
emits: ["dialogClose", "dialogSuccess"],
|
|
setup(props, ctx) {
|
|
|
|
const state = reactive({
|
|
fileName: '',
|
|
importData: new FormData()
|
|
});
|
|
const visible = computed(() => {
|
|
return props.dialogVisible;
|
|
});
|
|
const closeDialog = () => {
|
|
ctx.emit("dialogClose");
|
|
};
|
|
|
|
const saveP = async () => {
|
|
const res = await infoApi.importDevice(state.importData, props.formData.driver_name);
|
|
if (res.code == 0) {
|
|
ElMessage.success(res.message);
|
|
ctx.emit("dialogSuccess");
|
|
} else {
|
|
ElMessage.error(res.data || res.message);
|
|
}
|
|
|
|
};
|
|
|
|
const uploadFile = (e) => {
|
|
let file = e.target.files[0];
|
|
state.fileName = file.name;
|
|
state.importData.append("file", file);
|
|
}
|
|
|
|
const delFile = () => {
|
|
state.fileName = '';
|
|
state.formData = new FormData();
|
|
}
|
|
return {
|
|
...toRefs(state),
|
|
visible,
|
|
closeDialog,
|
|
saveP,
|
|
uploadFile,
|
|
delFile
|
|
};
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.filelabel {
|
|
background: #1890ff;
|
|
border: 1px solid #1890ff;
|
|
font-weight: 500;
|
|
padding: 5px 15px 5px;
|
|
margin: 0 2px 0 6px;
|
|
border-radius: 4px;
|
|
color: #fff;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.fileName {
|
|
margin: 15px 0;
|
|
font-size: 16px;
|
|
.delete {
|
|
width: 18px;
|
|
height: 18px;
|
|
margin-left: 8px;
|
|
}
|
|
}
|
|
</style>
|