5 changed files with 706 additions and 466 deletions
-
188src/views/collectReorganizi/collectionLibrary/module/blukEditing/index.vue
-
208src/views/collectReorganizi/collectionLibrary/module/bulkImport/index.vue
-
497src/views/collectReorganizi/collectionLibrary/module/collectHeader.vue
-
51src/views/collectReorganizi/collectionLibrary/module/fileNumberAdjustment/index.vue
-
226src/views/collectReorganizi/collectionLibrary/module/uploadOriginal/index.vue
@ -0,0 +1,188 @@ |
|||||
|
<template> |
||||
|
<!--批量修改--> |
||||
|
<el-dialog class="upload-dialog" title="批量修改" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="bulkEditingVisible"> |
||||
|
<div class="setting-dialog"> |
||||
|
<div class="bulk-editing-container"> |
||||
|
<el-form ref="editForm" :model="editForm" :rules="editRules" label-width="100px"> |
||||
|
<el-form-item label="修改字段" prop="fieldItem"> |
||||
|
<el-select v-model="editForm.fieldItem" placeholder="请选择" style="width: 360px;"> |
||||
|
<el-option |
||||
|
v-for="item in fieldItemOptions" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="修改方式" prop="type"> |
||||
|
<el-select v-model="editForm.type" placeholder="请选择" style="width: 360px;"> |
||||
|
<el-option |
||||
|
v-for="item in editTypeOptions" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item v-if="editForm.type === '替换'" label="查询内容" prop="content"> |
||||
|
<el-input v-model="editForm.queryContent" style="width: 360px;" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="更新内容" prop="content"> |
||||
|
<el-input v-if="editForm.fieldItem !== '2' && editForm.fieldItem !== '3'" v-model="editForm.content" style="width: 360px;" /> |
||||
|
<el-select v-if="editForm.fieldItem === '2'" v-model="editForm.content" placeholder="请选择" style="width: 360px;"> |
||||
|
<el-option |
||||
|
v-for="item in fieldOptions" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value" |
||||
|
/> |
||||
|
</el-select> |
||||
|
<el-date-picker |
||||
|
v-if="editForm.fieldItem === '3'" |
||||
|
v-model="editForm.content" |
||||
|
type="date" |
||||
|
placeholder="选择日期" |
||||
|
style="width: 360px;" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button type="text" @click="bulkEditingVisible = false">取消</el-button> |
||||
|
<el-button type="primary" @click.native="onSubmitBlukEditing('editForm')">确定</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'BlukEditing', |
||||
|
components: { }, |
||||
|
mixins: [], |
||||
|
data() { |
||||
|
return { |
||||
|
// 批量修改 |
||||
|
bulkEditingVisible: false, |
||||
|
editForm: { |
||||
|
fieldItem: '', |
||||
|
type: '填充', |
||||
|
queryContent: '', |
||||
|
content: '' |
||||
|
}, |
||||
|
fieldItemOptions: [ |
||||
|
{ |
||||
|
value: '1', |
||||
|
label: '非字典项&&文本' |
||||
|
}, |
||||
|
{ |
||||
|
value: '2', |
||||
|
label: '字典项' |
||||
|
}, |
||||
|
{ |
||||
|
value: '3', |
||||
|
label: '日期' |
||||
|
}, |
||||
|
{ |
||||
|
value: '4', |
||||
|
label: '数字' |
||||
|
} |
||||
|
], |
||||
|
editTypeOptions: [], |
||||
|
fieldOptions: [ |
||||
|
{ |
||||
|
value: '字典项1', |
||||
|
label: '字典项1' |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
editRules() { |
||||
|
const validateRule = { |
||||
|
fieldItem: [ |
||||
|
{ required: true, message: '请选择修改字段', trigger: 'change' } |
||||
|
], |
||||
|
type: [ |
||||
|
{ required: true, message: '请选择修改方式', trigger: 'change' } |
||||
|
], |
||||
|
queryContent: [ |
||||
|
{ required: true, message: '请输入', trigger: 'blur' } |
||||
|
], |
||||
|
content: [ |
||||
|
{ required: true } |
||||
|
] |
||||
|
} |
||||
|
if (this.editForm.fieldItem === '2') { |
||||
|
this.$set(validateRule, 'content', [ |
||||
|
{ required: true, message: '请选择需更新内容得字典项', trigger: 'change' } |
||||
|
]) |
||||
|
} else if (this.editForm.fieldItem === '3') { |
||||
|
this.$set(validateRule, 'content', [ |
||||
|
{ type: 'date', required: true, message: '请选择日期', trigger: 'change' } |
||||
|
]) |
||||
|
} else { |
||||
|
this.$set(validateRule, 'content', [ |
||||
|
{ required: true, message: '请输入更新内容', trigger: 'blur' } |
||||
|
]) |
||||
|
} |
||||
|
return validateRule |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
'editForm.fieldItem'(newVal) { |
||||
|
this.$refs.editForm.clearValidate() |
||||
|
this.editForm.content = '' |
||||
|
this.editForm.type = '填充' |
||||
|
if (newVal === '1') { |
||||
|
this.editTypeOptions = [{ |
||||
|
value: '填充', |
||||
|
label: '填充' |
||||
|
}, |
||||
|
{ |
||||
|
value: '替换', |
||||
|
label: '替换' |
||||
|
}] |
||||
|
} else if (newVal === '2' || newVal === '3') { |
||||
|
this.editTypeOptions = [{ |
||||
|
value: '填充', |
||||
|
label: '填充' |
||||
|
}] |
||||
|
} else if (newVal === '4') { |
||||
|
this.editTypeOptions = [{ |
||||
|
value: '填充', |
||||
|
label: '填充' |
||||
|
}, |
||||
|
{ |
||||
|
value: '替换', |
||||
|
label: '替换' |
||||
|
}, |
||||
|
{ |
||||
|
value: '增加', |
||||
|
label: '增加' |
||||
|
}, |
||||
|
{ |
||||
|
value: '减少', |
||||
|
label: '减少' |
||||
|
}] |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
onSubmitBlukEditing(formName) { |
||||
|
this.$refs[formName].validate((valid) => { |
||||
|
if (valid) { |
||||
|
this.$message('submit!') |
||||
|
this.bulkEditingVisible = false |
||||
|
} else { |
||||
|
console.log('error submit!!') |
||||
|
return false |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
</style> |
||||
@ -0,0 +1,208 @@ |
|||||
|
<template> |
||||
|
<!-- 批量导入 --> |
||||
|
<el-dialog title="批量导入" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="bulkImportVisible"> |
||||
|
<div class="setting-dialog"> |
||||
|
<div class="bulk-import-item"> |
||||
|
<h4 class="bulk-import-title1">下载模板</h4> |
||||
|
<a class="template-name" href="/path/to/file.pdf" download><i class="iconfont icon-xiazai" />文书档案（案卷）</a> |
||||
|
</div> |
||||
|
<div class="bulk-import-item"> |
||||
|
<h4 class="bulk-import-title2">上传导入</h4> |
||||
|
<el-form ref="form" :model="form" :rules="rules" label-width="110px"> |
||||
|
<el-form-item label="上传Excel" prop="file"> |
||||
|
<div class="input-import"> |
||||
|
<input ref="excelInput" type="file" @change="handleFileExcel"> |
||||
|
<div class="upload-excel"><i class="iconfont icon-shangchuan2" />选择文件</div> |
||||
|
</div> |
||||
|
<div v-for="item in excelList" :key="item.name" class="file-list"> |
||||
|
<i class="iconfont icon-xiaowenjian" /> |
||||
|
{{ item.name }} |
||||
|
</div> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="导入类型" prop="type"> |
||||
|
<el-select v-model="form.type" placeholder="请选择" style="width: 560px;"> |
||||
|
<el-option |
||||
|
v-for="item in typeOptions" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="重复验证字段" prop="fields"> |
||||
|
<el-select v-model="form.fields" multiple placeholder="请选择" style="width: 560px;"> |
||||
|
<el-option |
||||
|
v-for="item in fieldsOptions" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="导入"> |
||||
|
<el-button class="import-submit" type="primary" @click="onSubmitImport('form')">上传并导入</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
<div class="chapter-tip"> |
||||
|
<p>注意事项</p> |
||||
|
<span>模板中第一行为表单字段名称，从第二行开始填写需要导入的数据。</span> |
||||
|
<span>数据之间不能有空行。（若存在空行，仅会导入空行以上的数据）</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'BulkImport', |
||||
|
components: { }, |
||||
|
mixins: [], |
||||
|
data() { |
||||
|
return { |
||||
|
// 批量导入 |
||||
|
bulkImportVisible: false, |
||||
|
rules: { |
||||
|
name: [ |
||||
|
{ required: true, message: '请输入活动名称', trigger: 'blur' }, |
||||
|
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' } |
||||
|
] |
||||
|
}, |
||||
|
form: { |
||||
|
file: '', |
||||
|
type: '', |
||||
|
fields: [] |
||||
|
}, |
||||
|
excelList: [], |
||||
|
typeOptions: [ |
||||
|
{ |
||||
|
value: '追加', |
||||
|
label: '追加' |
||||
|
} |
||||
|
], |
||||
|
fieldsOptions: [ |
||||
|
{ |
||||
|
value: '字段1', |
||||
|
label: '字段1' |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
}, |
||||
|
mounted() { |
||||
|
}, |
||||
|
methods: { |
||||
|
handleFileExcel(event) { |
||||
|
const files = event.target.files |
||||
|
const file = files[0] // 获取上传的文件 |
||||
|
const allowedExtensions = /(\.xlsx)$/i // 定义允许上传的文件格式，这里只限制为xlsx格式 |
||||
|
if (!allowedExtensions.exec(file.name)) { |
||||
|
this.$message.warning('只能上传Excel文件！') // 弹出提示信息 |
||||
|
event.target.value = '' // 清空文件输入框内容 |
||||
|
return false |
||||
|
} |
||||
|
for (let i = 0; i < files.length; i++) { |
||||
|
this.excelList = [] |
||||
|
this.excelList.push(files[i]) |
||||
|
} |
||||
|
}, |
||||
|
onSubmitImport(formName) { |
||||
|
this.$refs[formName].validate((valid) => { |
||||
|
if (valid) { |
||||
|
this.$message('submit!') |
||||
|
} else { |
||||
|
console.log('error submit!!') |
||||
|
return false |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.input-import{ |
||||
|
position: relative; |
||||
|
margin-top: 16px; |
||||
|
width: 104px; |
||||
|
height: 32px; |
||||
|
& input{ |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
height: 32px; |
||||
|
opacity: 0; |
||||
|
} |
||||
|
} |
||||
|
.upload-excel{ |
||||
|
width: 104px; |
||||
|
height: 32px; |
||||
|
line-height: 32px; |
||||
|
font-size: 14px; |
||||
|
color: #fff; |
||||
|
text-align: center; |
||||
|
border-radius: 3px; |
||||
|
background: #1F55EB; |
||||
|
& i{ |
||||
|
font-size: 13px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.input-import{ |
||||
|
margin-top: 0; |
||||
|
} |
||||
|
.upload-excel{ |
||||
|
color: #545B65; |
||||
|
border: 1px solid #E6E8ED; |
||||
|
background-color: transparent; |
||||
|
} |
||||
|
|
||||
|
.bulk-import-item{ |
||||
|
padding: 0 0 30px 10px; |
||||
|
h4{ |
||||
|
padding-left: 38px; |
||||
|
font-size: 16px; |
||||
|
line-height: 32px; |
||||
|
color: #0C0E1E; |
||||
|
&.bulk-import-title1{ |
||||
|
background: url("~@/assets/images/collect/import1.png") no-repeat left center; |
||||
|
background-size: 24px 24px; |
||||
|
} |
||||
|
&.bulk-import-title2{ |
||||
|
margin-bottom: 16px; |
||||
|
background: url("~@/assets/images/collect/import2.png") no-repeat left center; |
||||
|
background-size: 24px 24px; |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
.template-name{ |
||||
|
padding-left: 38px; |
||||
|
font-size: 14px; |
||||
|
line-height: 30px; |
||||
|
color: #0348F3; |
||||
|
i{ |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
} |
||||
|
.import-submit{ |
||||
|
color: #fff; |
||||
|
background: #1F55EB; |
||||
|
} |
||||
|
.file-list{ |
||||
|
font-size: 12px; |
||||
|
color: #A6ADB6; |
||||
|
i{ |
||||
|
font-size: 12px; |
||||
|
color: #A6ADB6; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.chapter-tip{ |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-dialog .el-dialog__body .el-form-item .el-form-item__content{ |
||||
|
width: 560px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,51 @@ |
|||||
|
<template> |
||||
|
<!-- 档号调整 --> |
||||
|
<div> |
||||
|
<el-dialog class="tip-dialog" title="提示" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="adjustmentTipVisible"> |
||||
|
<div class="setting-dialog"> |
||||
|
<div class="tip-content"> |
||||
|
<p class="tipMsg">您未勾选条目，否则直接选择所有条目</p> |
||||
|
<span>你是否还要继续?</span> |
||||
|
</div> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button type="text" @click="adjustmentTipVisible = false">取消</el-button> |
||||
|
<el-button type="primary" @click.native="handleComfireAdjustment">确定</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
|
||||
|
<el-dialog title="档案调整" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="adjustmentVisible"> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button type="text" @click="moveVisible = false">取消</el-button> |
||||
|
<el-button type="primary">确定</el-button> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'FileNumberAadjustment', |
||||
|
components: { }, |
||||
|
mixins: [], |
||||
|
data() { |
||||
|
return { |
||||
|
adjustmentTipVisible: false, |
||||
|
adjustmentVisible: false |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
}, |
||||
|
mounted() { |
||||
|
}, |
||||
|
methods: { |
||||
|
handleComfireAdjustment() { |
||||
|
this.adjustmentTipVisible = false |
||||
|
this.adjustmentVisible = true |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
</style> |
||||
@ -0,0 +1,226 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<!-- 原文上传 --> |
||||
|
<el-dialog class="upload-dialog" :title="uploadTitle" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="uploadVisible"> |
||||
|
<div class="setting-dialog"> |
||||
|
<div class="upload-container"> |
||||
|
<i v-if="fileList.length === 0" class="iconfont icon-tianjiawenjian upload-icon" /> |
||||
|
<div v-for="item in fileList" :key="item.name" class="file-list"> |
||||
|
<i class="iconfont icon-xiaowenjian" /> |
||||
|
{{ item.name }} |
||||
|
<i class="el-icon-close" @click="deleteFile(item)" /> |
||||
|
</div> |
||||
|
<div class="upload-input"> |
||||
|
<input ref="fileInput" :key="key" type="file" @change="handleFileChange"> |
||||
|
<div class="upload-zip"><i class="iconfont icon-shangchuan2" />点击上传</div> |
||||
|
</div> |
||||
|
<!-- <div class="el-upload__tip">上传限制文件类型：zip</div> --> |
||||
|
<div v-if="uploadType === 1" class="el-upload__tip">上传限制文件大小：最大10GB/个</div> |
||||
|
</div> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button type="text" @click="uploadVisible = false">取消</el-button> |
||||
|
<el-button type="primary" @click="handleUploadConfirm">保存</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
|
||||
|
<!-- 上传详情 --> |
||||
|
<el-dialog title="上传详情" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="uploadDetialVisible"> |
||||
|
<div class="setting-dialog"> |
||||
|
<div class="upload-detail"> |
||||
|
<el-table :data="uploadDetailData" style="width: 100%"> |
||||
|
<el-table-column prop="number" label="编号" width="120" /> |
||||
|
<el-table-column prop="operator" label="操作人" width="120" /> |
||||
|
<el-table-column prop="operationType" label="操作类型" width="120" /> |
||||
|
<el-table-column prop="file" label="文件" width="160" /> |
||||
|
<el-table-column prop="createDate" label="操作时间" width="200" /> |
||||
|
<el-table-column prop="conclusion" label="结论" width="200"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div>成功 {{ scope.row.successNumber }} 条; 失败 {{ scope.row.failNumber }} 条</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<!--分页组件--> |
||||
|
<el-pagination |
||||
|
:current-page="page.page" |
||||
|
:total="page.total" |
||||
|
:page-size="page.size" |
||||
|
:pager-count="5" |
||||
|
layout="total, prev, pager, next, sizes" |
||||
|
@size-change="handleSizeChange" |
||||
|
@current-change="handleCurrentPage" |
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'UploadOriginal', |
||||
|
components: {}, |
||||
|
mixins: [], |
||||
|
data() { |
||||
|
return { |
||||
|
// 上传 |
||||
|
uploadVisible: false, |
||||
|
uploadTitle: '普通上传', |
||||
|
key: 0, |
||||
|
file: null, |
||||
|
fileList: [], |
||||
|
uploadType: 0, |
||||
|
// 上传详情 |
||||
|
uploadDetialVisible: false, |
||||
|
uploadDetailData: [ |
||||
|
{ |
||||
|
number: '上传编号001 ', |
||||
|
operator: 'admin', |
||||
|
operationType: '原文目录上传', |
||||
|
file: ' xxxxx目录.zip', |
||||
|
createDate: '2016-09-21 08:50:08', |
||||
|
successNumber: '6', |
||||
|
failNumber: '4' |
||||
|
} |
||||
|
], |
||||
|
page: { |
||||
|
page: 1, |
||||
|
size: 10, |
||||
|
total: 0 |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
}, |
||||
|
mounted() { |
||||
|
}, |
||||
|
methods: { |
||||
|
// input-upload change |
||||
|
handleFileChange(event) { |
||||
|
const files = event.target.files |
||||
|
this.file = files[0] |
||||
|
this.key++ |
||||
|
let maxMessage |
||||
|
let maxSize |
||||
|
if (this.uploadType === 0) { |
||||
|
maxSize = 10 * 1024 * 1024 |
||||
|
maxMessage = '上传文件大小不能超过 10MB!' |
||||
|
} else { |
||||
|
maxSize = 10 * 1024 * 1024 * 1024 |
||||
|
maxMessage = '上传文件大小不能超过 10GB!' |
||||
|
} |
||||
|
if (this.file && this.file.size > maxSize) { |
||||
|
this.$message.warning(maxMessage) |
||||
|
this.fileList = [] |
||||
|
event.target.value = '' |
||||
|
return false |
||||
|
} |
||||
|
if (this.fileList.length !== 0) { |
||||
|
const existingFile = this.fileList.some(file => file.name === this.file.name) |
||||
|
if (existingFile) { |
||||
|
this.$message.warning('文件已存在') |
||||
|
return false |
||||
|
} |
||||
|
} |
||||
|
for (let i = 0; i < files.length; i++) { |
||||
|
// this.fileList = [] |
||||
|
this.fileList.push(files[i]) |
||||
|
} |
||||
|
}, |
||||
|
// delt file |
||||
|
deleteFile(file) { |
||||
|
const index = this.fileList.indexOf(file) |
||||
|
this.fileList.splice(index, 1) |
||||
|
// this.$confirm('此操作将清空所选数据, 是否继续?', '提示', { |
||||
|
// confirmButtonText: '确定', |
||||
|
// cancelButtonText: '取消', |
||||
|
// type: 'warning' |
||||
|
// }).then(() => { |
||||
|
// const index = this.fileList.indexOf(file) |
||||
|
// this.fileList.splice(index, 1) |
||||
|
// this.file = null |
||||
|
// this.$message({ |
||||
|
// type: 'success', |
||||
|
// message: '删除成功!' |
||||
|
// }) |
||||
|
// }).catch(() => { |
||||
|
// this.$message({ |
||||
|
// type: 'info', |
||||
|
// message: '已取消删除' |
||||
|
// }) |
||||
|
// }) |
||||
|
}, |
||||
|
handleUploadConfirm() { |
||||
|
this.uploadVisible = false |
||||
|
this.uploadDetialVisible = true |
||||
|
}, |
||||
|
handleSizeChange(size) { |
||||
|
this.page.size = size |
||||
|
this.page.page = 1 |
||||
|
}, |
||||
|
handleCurrentPage(val) { |
||||
|
this.page.page = val |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.upload-dialog { |
||||
|
::v-deep .el-dialog{ |
||||
|
width: 536px; |
||||
|
} |
||||
|
} |
||||
|
.upload-container{ |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
width: 496px; |
||||
|
min-height: 178px; |
||||
|
padding: 12px; |
||||
|
border-radius: 3px; |
||||
|
background: #EDEFF3; |
||||
|
border: 1px dashed #BCC2C7; |
||||
|
.upload-icon{ |
||||
|
font-size: 32px; |
||||
|
color: #1F55EB; |
||||
|
} |
||||
|
.el-upload__tip{ |
||||
|
font-size: 12px; |
||||
|
color: #A6ADB6; |
||||
|
} |
||||
|
.file-list{ |
||||
|
font-size: 12px; |
||||
|
line-height: 24px; |
||||
|
color: #545B65; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.upload-input{ |
||||
|
position: relative; |
||||
|
margin-top: 16px; |
||||
|
width: 104px; |
||||
|
height: 32px; |
||||
|
& input{ |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
height: 32px; |
||||
|
opacity: 0; |
||||
|
} |
||||
|
} |
||||
|
.upload-zip{ |
||||
|
width: 104px; |
||||
|
height: 32px; |
||||
|
line-height: 32px; |
||||
|
font-size: 14px; |
||||
|
color: #fff; |
||||
|
text-align: center; |
||||
|
border-radius: 3px; |
||||
|
background: #1F55EB; |
||||
|
& i{ |
||||
|
font-size: 13px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue