资料中心
This commit is contained in:
yanyizhou
@@ -0,0 +1,447 @@
|
||||
<template>
|
||||
<div id="dataCenter">
|
||||
<div class="search-area">
|
||||
<el-form :modal="dataCenterSearch" :inline="true">
|
||||
<el-form-item label="类型:">
|
||||
<el-input
|
||||
size="small"
|
||||
v-model="dataCenterSearch.dataType"
|
||||
placeholder="请输入类型"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="资料标题:">
|
||||
<el-input
|
||||
size="small"
|
||||
v-model="dataCenterSearch.dataTitle"
|
||||
placeholder="请输入资料标题"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="上传时间:">
|
||||
<el-date-picker
|
||||
v-model="dataCenterSearch.dataUploadTime"
|
||||
clearable
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
size="small"
|
||||
type="datetimerange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
@click="searchInfo">
|
||||
查询
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
@click="clearSearch"
|
||||
size="mini">清空
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="operate-area" style="margin: 0 0 10px 0">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="primary"
|
||||
@click="addInfo">新增
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="table-area">
|
||||
<el-table
|
||||
:data="dataCenterTable"
|
||||
tooltip-effect="dark"
|
||||
style="width: 100%"
|
||||
border
|
||||
height="475px"
|
||||
:header-cell-style="{background: '#f5f1f1', color: '#333333', fontSize: '16px',
|
||||
fontWeight: 'bold', height: '48px'}"
|
||||
>
|
||||
<el-table-column
|
||||
type="index"
|
||||
width="55"
|
||||
label="序号"
|
||||
align="center">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="dataType"
|
||||
width="250"
|
||||
label="类型"
|
||||
align="center">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="dataTitle"
|
||||
min-width="250"
|
||||
label="资料标题"
|
||||
align="center">
|
||||
<template slot-scope="scope">
|
||||
<span @click.stop="toDetail(scope.row)" style="cursor:pointer;color: #409eff">{{ scope.row.dataTitle }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="dataUploadTime"
|
||||
width="250"
|
||||
label="上传时间"
|
||||
align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ $moment(scope.row.dataUploadTime).format("YYYY-MM-DD HH:mm:ss") }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="primary"
|
||||
@click="editInfo(scope.row)"
|
||||
>编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="danger"
|
||||
@click="deleteInfo(scope.row)"
|
||||
>删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<loading :loading="loading">数据获取中</loading>
|
||||
<pagination :page="dataCenterSearch.page" :total="dataCenterSearch.total" @pageChange="pageChange"
|
||||
@pageSizeChange="pageSizeChange"></pagination>
|
||||
</div>
|
||||
|
||||
<el-drawer
|
||||
:title="attributeTitle"
|
||||
:wrapperClosable="false"
|
||||
:visible.sync="showInfoModal"
|
||||
size="800px"
|
||||
:styles="styles"
|
||||
:close="cancelModel"
|
||||
>
|
||||
<div style="margin-left: 3%">
|
||||
<el-form
|
||||
ref="attributeEO"
|
||||
:model="attributeEO"
|
||||
:rules="attributeEOFormRules"
|
||||
class="label-input-form"
|
||||
label-width="130px"
|
||||
v-if="showInfoModal"
|
||||
>
|
||||
<el-form-item
|
||||
label="类型"
|
||||
prop="dataType"
|
||||
class="add-form-item"
|
||||
>
|
||||
<el-input
|
||||
v-model="attributeEO.dataType"
|
||||
placeholder="请输入类型"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="资料标题"
|
||||
prop="dataTitle"
|
||||
class="add-form-item"
|
||||
>
|
||||
<el-input
|
||||
v-model="attributeEO.dataTitle"
|
||||
placeholder="请输入资料标题"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="附件"
|
||||
prop="attachFileId"
|
||||
class="add-form-item"
|
||||
>
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
action="/api/att/attFile/upload"
|
||||
:on-preview="handlePreview"
|
||||
:on-remove="handleRemove"
|
||||
:before-remove="beforeRemove"
|
||||
multiple
|
||||
:limit="3"
|
||||
:on-exceed="handleExceed"
|
||||
:on-success="uploadSuccess"
|
||||
:file-list="fileList">
|
||||
<el-button size="small" type="primary">点击上传</el-button>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div style="float: right">
|
||||
<el-button
|
||||
type="primary"
|
||||
class="common-button-primary"
|
||||
size="mini"
|
||||
icon="el-icon-check"
|
||||
@click="saveInfo"
|
||||
>提交
|
||||
</el-button
|
||||
>
|
||||
<el-button
|
||||
size="mini"
|
||||
icon="el-icon-close"
|
||||
class="common-button-default"
|
||||
@click="cancelModel"
|
||||
>取消
|
||||
</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "dataCenter",
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
fileList: [],
|
||||
attributeTitle: '',
|
||||
showInfoModal: false,
|
||||
styles: {
|
||||
height: 'calc(100% - 55px)',
|
||||
overflow: 'auto',
|
||||
paddingBottom: '53px',
|
||||
position: 'static'
|
||||
},
|
||||
attributeEO: {
|
||||
dataType: '',
|
||||
dataTitle: '',
|
||||
attachFileId: '',
|
||||
},
|
||||
attributeEOFormRules: {
|
||||
dataType: [
|
||||
{required: true, message: '类型不能为空', trigger: 'change'},
|
||||
],
|
||||
dataTitle: [
|
||||
{required: true, message: '资料标题不能为空', trigger: 'change'},
|
||||
]
|
||||
},
|
||||
dataCenterSearch: {
|
||||
dataType: '',
|
||||
dataTitle: '',
|
||||
dataUploadTime: [],
|
||||
page: 1,
|
||||
pageSize: this.$store.getters.userInfo.configContent,
|
||||
total: 0
|
||||
},
|
||||
dataCenterTable: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toDetail(row){
|
||||
console.log('243',row)
|
||||
this.$router.push({
|
||||
name: "dataCenterDetail",
|
||||
params: {
|
||||
id: row.id
|
||||
}
|
||||
});
|
||||
},
|
||||
uploadSuccess(response, file, fileList) {
|
||||
console.log('240',fileList)
|
||||
const fileIdList = fileList.map(item => {
|
||||
if (item.response){
|
||||
return item.response.data.attId
|
||||
}else {
|
||||
return item.id
|
||||
}
|
||||
})
|
||||
this.attributeEO.attachFileId = fileIdList.join(',')
|
||||
console.log('343',this.fileList)
|
||||
console.log('349',this.attributeEO.attachFileId)
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
const fileIdList = fileList.map(item => {
|
||||
if (item.response){
|
||||
return item.response.data.attId
|
||||
}else {
|
||||
return item.id
|
||||
}
|
||||
})
|
||||
this.attributeEO.attachFileId = fileIdList.join(',')
|
||||
},
|
||||
handlePreview(file) {
|
||||
},
|
||||
handleExceed(files, fileList) {
|
||||
this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
|
||||
},
|
||||
beforeRemove(file, fileList) {
|
||||
return this.$confirm(`确定移除 ${file.name}？`);
|
||||
},
|
||||
deleteInfo(row) {
|
||||
this.$confirm('您是否确定删除该数据?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
let deleteId = row.id
|
||||
this.$http.delete('fileMaterialCenter/file-material', {id: deleteId}, {
|
||||
_this: this
|
||||
}, res => {
|
||||
if (res.ok) {
|
||||
this.$message.success('删除成功')
|
||||
this.searchInfo()
|
||||
}
|
||||
}, e => {
|
||||
console.log(e)
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
},
|
||||
pageChange(page) {
|
||||
this.dataCenterSearch.page = page
|
||||
this.searchInfo()
|
||||
},
|
||||
pageSizeChange(pageSize) {
|
||||
this.dataCenterSearch.page = 1
|
||||
this.dataCenterSearch.pageSize = pageSize
|
||||
this.searchInfo()
|
||||
},
|
||||
searchInfo() {
|
||||
this.dataCenterSearch.startDataUploadTime = this.dataCenterSearch.dataUploadTime[0]
|
||||
this.dataCenterSearch.endDataUploadTime = this.dataCenterSearch.dataUploadTime[1]
|
||||
this.$http.get('fileMaterialCenter/file-material', this.dataCenterSearch, {
|
||||
_this: this
|
||||
}, res => {
|
||||
this.dataCenterTable = res.data.records
|
||||
this.dataCenterSearch.total = res.data.total
|
||||
}, e => {
|
||||
console.log(e)
|
||||
})
|
||||
},
|
||||
clearSearch() {
|
||||
this.dataCenterSearch = {
|
||||
dataType: '',
|
||||
dataTitle: '',
|
||||
dataUploadTime: '',
|
||||
page: 1,
|
||||
pageSize: this.$store.getters.userInfo.configContent,
|
||||
}
|
||||
this.searchInfo()
|
||||
},
|
||||
addInfo() {
|
||||
this.showInfoModal = true
|
||||
this.attributeTitle = '新增'
|
||||
this.attributeEO = {
|
||||
dataType: '',
|
||||
dataTitle: '',
|
||||
attachFileId: '',
|
||||
}
|
||||
this.fileList = []
|
||||
},
|
||||
editInfo(row) {
|
||||
this.showInfoModal = true
|
||||
this.attributeTitle = '编辑'
|
||||
this.attributeEO = row
|
||||
this.fileList = []
|
||||
// 请求上传的文件信息
|
||||
this.$http.get("att/attFile/getMultiFileInfos", {
|
||||
fileIds: row.attachFileId
|
||||
}, {
|
||||
_this: this
|
||||
}, res => {
|
||||
this.$nextTick(() => {
|
||||
res.data.map(item => {
|
||||
// 赋值要回显的上传文件内容
|
||||
this.fileList.push({
|
||||
name: item.oldFileName,
|
||||
uid: item.uid,
|
||||
status: item.status,
|
||||
id: item.id
|
||||
});
|
||||
});
|
||||
});
|
||||
}, e => {
|
||||
});
|
||||
console.log('343',this.fileList)
|
||||
console.log('349',this.attributeEO.attachFileId)
|
||||
|
||||
// const fileIdList = this.fileList.map(item => {
|
||||
// return item.id
|
||||
// })
|
||||
// this.attributeEO.attachFileId = fileIdList.join(',')
|
||||
},
|
||||
saveInfo() {
|
||||
this.$refs['attributeEO'].validate((valid) => {
|
||||
if (valid && this.attributeEO.attachFileId !== '') {
|
||||
if (this.attributeTitle === '新增'){
|
||||
this.$http.postData(
|
||||
'fileMaterialCenter/file-material',
|
||||
this.attributeEO,
|
||||
{
|
||||
_this: this,
|
||||
},
|
||||
(res) => {
|
||||
if (res.ok) {
|
||||
this.$message.success('新增成功')
|
||||
this.cancelModel()
|
||||
this.searchInfo()
|
||||
}
|
||||
}
|
||||
)
|
||||
}else {
|
||||
this.$http.putData(
|
||||
'fileMaterialCenter/file-material',
|
||||
this.attributeEO,
|
||||
{
|
||||
_this: this,
|
||||
},
|
||||
(res) => {
|
||||
if (res.ok) {
|
||||
this.$message.success('修改成功')
|
||||
this.cancelModel()
|
||||
this.searchInfo()
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
} else {
|
||||
this.$message.error('附件不能为空')
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
cancelModel() {
|
||||
this.$nextTick(() => {
|
||||
this.$refs['attributeEO'].resetFields()
|
||||
this.attributeEO = {
|
||||
dataType: '',
|
||||
dataTitle: '',
|
||||
attachFileId: '',
|
||||
}
|
||||
})
|
||||
this.showInfoModal = false
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$http.get('fileMaterialCenter/file-material', this.dataCenterSearch, {
|
||||
_this: this
|
||||
}, res => {
|
||||
this.dataCenterTable = res.data.records
|
||||
this.dataCenterSearch.total = res.data.total
|
||||
}, e => {
|
||||
console.log(e)
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
#dataCenter {
|
||||
background-color: white;
|
||||
height: 100%;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user