472 lines
13 KiB
Vue
472 lines
13 KiB
Vue
<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="操作"
|
||
min-width="100"
|
||
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="dataExplain"
|
||
class="add-form-item"
|
||
>
|
||
<el-input
|
||
type="textarea"
|
||
autosize
|
||
style="width: 95%"
|
||
maxlength="200"
|
||
show-word-limit
|
||
v-model="attributeEO.dataExplain"
|
||
placeholder="请输入资料说明"
|
||
clearable
|
||
/>
|
||
<el-button icon="el-icon-delete" circle type="danger" size="mini" @click="attributeEO.dataExplain = ''"></el-button>
|
||
</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"
|
||
:loading="submitLoading"
|
||
>提交
|
||
</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,
|
||
submitLoading: false,
|
||
fileList: [],
|
||
attributeTitle: '',
|
||
showInfoModal: false,
|
||
styles: {
|
||
height: 'calc(100% - 55px)',
|
||
overflow: 'auto',
|
||
paddingBottom: '53px',
|
||
position: 'static'
|
||
},
|
||
attributeEO: {
|
||
dataType: '',
|
||
dataTitle: '',
|
||
dataExplain: '',
|
||
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.loading = true
|
||
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
|
||
this.loading = false
|
||
}, e => {
|
||
console.log(e)
|
||
this.loading = false
|
||
})
|
||
},
|
||
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.submitLoading = true
|
||
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.submitLoading = false
|
||
this.cancelModel()
|
||
this.searchInfo()
|
||
}
|
||
}
|
||
)
|
||
}else {
|
||
this.$http.putData(
|
||
'fileMaterialCenter/file-material',
|
||
this.attributeEO,
|
||
{
|
||
_this: this,
|
||
},
|
||
(res) => {
|
||
if (res.ok) {
|
||
this.$message.success('修改成功')
|
||
this.submitLoading = false
|
||
this.cancelModel()
|
||
this.searchInfo()
|
||
}
|
||
}
|
||
)
|
||
}
|
||
|
||
} else {
|
||
this.$message.error('附件不能为空')
|
||
this.submitLoading = false
|
||
}
|
||
})
|
||
|
||
},
|
||
cancelModel() {
|
||
this.$nextTick(() => {
|
||
this.$refs['attributeEO'].resetFields()
|
||
this.attributeEO = {
|
||
dataType: '',
|
||
dataTitle: '',
|
||
attachFileId: '',
|
||
}
|
||
})
|
||
this.showInfoModal = false
|
||
},
|
||
},
|
||
mounted() {
|
||
this.searchInfo()
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
#dataCenter {
|
||
/deep/ .el-input--small .el-input__inner {
|
||
width: 160px;
|
||
}
|
||
background-color: white;
|
||
height: 100%;
|
||
padding: 10px 20px;
|
||
}
|
||
</style>
|