<template>
|
<div class="authorityManagement_box">
|
<My-bread :list="['数据管理', '加密设置']"></My-bread>
|
<el-divider />
|
<div class="selectComp">
|
<div class="title">加密/解密</div>
|
<div class="checkbox">
|
<el-select v-model="value" placeholder="请选择">
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
</div>
|
<div class="bottom">
|
<div class="title">数据文件</div>
|
<div class="upload">
|
<el-upload
|
class="upload-demo"
|
ref="upload"
|
action="#"
|
:on-preview="handlePreview"
|
:on-remove="handleRemove"
|
:on-success="handleSuccess"
|
:file-list="fileList"
|
:auto-upload="false"
|
>
|
<el-button slot="trigger" size="small" type="primary"
|
>选取文件</el-button
|
>
|
<el-button
|
style="margin-left: 10px"
|
size="small"
|
type="success"
|
@click="submitUpload"
|
>执行</el-button
|
>
|
<!-- <div class="btnBox">
|
<el-button type="info" size="medium" @click="submitUpload"
|
>确定</el-button
|
>
|
<el-button
|
type="info"
|
class="cancel"
|
size="medium"
|
@click="submitAbort"
|
>取消</el-button
|
>
|
</div> -->
|
</el-upload>
|
</div>
|
</div>
|
<div class="output">
|
<div class="title">输出路径</div>
|
<el-input v-model="output" disabled />
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import MyBread from "../../components/MyBread.vue";
|
export default {
|
name: "encryption",
|
components: { MyBread },
|
data() {
|
return {
|
checkList: [],
|
fileList: [],
|
options: [
|
{
|
value: "1",
|
label: "加密",
|
},
|
{
|
value: "0",
|
label: "解密",
|
},
|
],
|
value: "",
|
output: "",
|
};
|
},
|
methods: {
|
submitUpload() {
|
this.$refs.upload.submit();
|
setTimeout(() => {
|
this.output = "C:\\Users\\user\\Downloads";
|
}, 2000);
|
},
|
handleRemove(file, fileList) {
|
console.log(file, fileList);
|
},
|
handlePreview(file) {
|
console.log(file);
|
},
|
handleSuccess(file) {
|
console.log(file);
|
},
|
submitAbort() {
|
// console.log(file);
|
},
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
//@import url(); 引入公共css类
|
.authorityManagement_box {
|
background: rgb(240, 242, 245);
|
border-radius: 10px;
|
height: 100%;
|
padding: 10px;
|
box-sizing: border-box;
|
.selectComp {
|
margin: 50px 0 0 30px;
|
width: 600px;
|
height: 5%;
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
.title {
|
width: 100px;
|
}
|
.checkbox {
|
width: 500px;
|
}
|
}
|
.bottom {
|
margin: 50px 0 0 30px;
|
width: 600px;
|
height: 260px;
|
// background-color: #fff;
|
display: flex;
|
.title {
|
width: 100px;
|
}
|
.upload {
|
/deep/ .el-upload-list {
|
margin-top: 15px;
|
// background-color: #bfa;
|
overflow: auto;
|
width: 500px;
|
height: 200px;
|
border: 1px solid rgb(126, 125, 125);
|
// border-radius: 10px;
|
}
|
}
|
// .btnBox {
|
// position: relative;
|
// top: 250px;
|
// left: 100px;
|
// width: 300px;
|
// display: flex;
|
// justify-content: space-between;
|
// }
|
}
|
.output {
|
margin: 10px 0 0 30px;
|
display: flex;
|
align-items: center;
|
.title {
|
width: 100px;
|
}
|
.el-input {
|
width: 467px;
|
}
|
}
|
}
|
</style>
|
