Commit 59636015 authored by 张伯涛's avatar 张伯涛

添加ossInfo模块

parent 1676b4c4
import request from '@/utils/request'
import Qs from 'qs'
/**
* 1. 列表查询
* 2. 查询详细信息
* 3. 新增
* 4. 修改
* 5. 逻辑删除
* 6. 导出
*
*/
// 1. 查询列表
export function listOssInfo(query) {
return request({
url: '/ossinfo/list',
method: 'get',
params: query
})
}
// 2. 查询详细信息
export function getOssInfo(businessId) {
return request({
url: '/ossinfo/detail/' + businessId,
method: 'get'
})
}
// 3. 新增
export function addOssInfo(data) {
data = Qs.stringify(data)
return request({
url: '/ossinfo/add',
method: 'post',
data: data
})
}
// 4. 修改
export function updateOssInfo(data) {
const businessId = data.businessId
data = Qs.stringify(data)
return request({
url: '/ossinfo/update/' + businessId,
method: 'put',
data
})
}
// 5. 逻辑删除
export function delOssInfo(businessId) {
return request({
url: '/ossinfo/deleteLogical/' + businessId,
method: 'delete'
})
}
// 6. 导出
export function exportOssInfo(query) {
return request({
url: '/ossinfo/export',
method: 'get',
params: query,
responseType: 'blob'
})
}
<template>
<div class="app-container">
<div class="search">
<el-form ref="queryForm" style="padding: 0 0 0 10px" :model="queryParams" :inline="true">
<el-form-item label="bucket" prop="bucket">
<el-input
v-model.trim="queryParams.bucket"
placeholder="请输入bucket"
clearable
:maxlength="50"
size="small"
/>
</el-form-item>
<el-form-item label="ossKey" prop="ossKey">
<el-input
v-model.trim="queryParams.ossKey"
placeholder="请输入ossKey"
clearable
size="small"
/>
</el-form-item>
<el-form-item label="url" prop="url">
<el-input
v-model.trim="queryParams.url"
placeholder="请输入url"
clearable
size="small"
/>
</el-form-item>
<el-form-item label="fileType" prop="fileType">
<el-input
v-model.trim="queryParams.fileType"
placeholder="请输入fileType"
clearable
:maxlength="10"
size="small"
/>
</el-form-item>
<el-form-item label="originalName" prop="originalName">
<el-input
v-model="queryParams.originalName"
placeholder="请输入originalName"
clearable
size="small"
/>
</el-form-item>
<el-form-item>
<el-button
:class="commonField.queryClass"
:type="commonField.typePrimary"
:icon="commonField.queryIcon"
:size="commonField.smallSize"
@click="handleQuery"
>查询</el-button>
<el-button
:class="commonField.resetClass"
:icon="commonField.resetIcon"
:size="commonField.smallSize"
@click="resetQuery"
>重置</el-button>
</el-form-item>
<div style="float: right">
<el-form-item>
<el-button
:class="commonField.addClass"
:type="commonField.typePrimary"
:icon="commonField.addIcon"
:size="commonField.smallSize"
@click="handleAdd"
>新增</el-button>
<el-button
:class="commonField.exportClass"
:type="commonField.typeSuccess"
:icon="commonField.exportIcon"
:size="commonField.smallSize"
@click="handleExport"
>导出</el-button>
</el-form-item>
</div>
</el-form>
</div>
<div style="padding:5px 10px">
<div class="tableTitle">列表</div>
<el-table v-loading="loading" border :data="ossInfoList">
<el-table-column type="index" label="序号" width="55" align="center" />
<el-table-column label="bucket" width="100" prop="bucket" :show-overflow-tooltip="true">
<template slot-scope="scope">
{{ scope.row.bucket || '-' }}
</template>
</el-table-column>
<el-table-column label="originalName" prop="originalName" :show-overflow-tooltip="true">
<template slot-scope="scope">
{{ scope.row.originalName || '-' }}
</template>
</el-table-column>
<el-table-column label="fileType" prop="fileType" :show-overflow-tooltip="true">
<template slot-scope="scope">
{{ scope.row.fileType || '-' }}
</template>
</el-table-column>
<el-table-column label="fileSize" prop="fileSize" :show-overflow-tooltip="true">
<template slot-scope="scope">
{{ scope.row.fileSize || '-' }}
</template>
</el-table-column>
<el-table-column label="path" prop="path" :show-overflow-tooltip="true">
<template slot-scope="scope">
{{ scope.row.path || '-' }}
</template>
</el-table-column>
<el-table-column label="操作" class-name="small-padding fixed-width" min-width="50px">
<template slot-scope="scope">
<el-button
:class="commonField.updateClass"
:type="commonField.typeParent"
:size="commonField.size"
@click="handleUpdate(scope.row)"
>修改</el-button>
<el-button
style="color: #1890ff"
:type="commonField.typeParent"
:size="commonField.size"
@click="handleView(scope.row)"
>查看</el-button>
<el-button
:class="commonField.delClass"
:type="commonField.typeParent"
:size="commonField.size"
@click="handleDelete(scope.row)"
>删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.page"
:limit.sync="queryParams.rows"
@pagination="getList"
/>
<!-- 添加或修改配置对话框 -->
<el-dialog :title="title" :visible.sync="open" width="80%" append-to-body :close-on-click-modal="false" @close="cancel">
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="120px">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="bucket" prop="bucket">
<el-input v-if="!isView" v-model.trim="form.bucket" show-word-limit :maxlength="50" placeholder="请输入bucket" />
<span v-if="isView">{{form.bucket || '-'}}</span>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="path" prop="path">
<el-input v-if="!isView" v-model.trim="form.path" show-word-limit :maxlength="255" placeholder="请输入path" />
<span v-if="isView">{{form.path || '-'}}</span>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="ossKey" prop="ossKey">
<el-input v-if="!isView" v-model.trim="form.ossKey" show-word-limit :maxlength="200" placeholder="请输入ossKey" />
<span v-if="isView">{{form.ossKey || '-'}}</span>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="md5" prop="md5">
<el-input v-if="!isView" v-model.trim="form.md5" show-word-limit :maxlength="255" placeholder="请输入md5" />
<span v-if="isView">{{form.md5 || '-'}}</span>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="etag" prop="eTag">
<el-input v-if="!isView" v-model.trim="form.eTag" show-word-limit :maxlength="50" placeholder="请输入etag" />
<span v-if="isView">{{form.eTag || '-'}}</span>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="url" prop="url">
<el-input v-if="!isView" v-model.trim="form.url" show-word-limit :maxlength="200" placeholder="请输入url" />
<span v-if="isView">{{form.url || '-'}}</span>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="fileSize" prop="fileSize">
<el-input-number v-if="!isView" v-model.trim="form.fileSize" style="width: 100%" placeholder="请输入fileSize" controls-position="right" :min="0" />
<span v-if="isView">{{form.fileSize || '-'}}</span>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="fileType" prop="fileType">
<el-input v-if="!isView" v-model.trim="form.fileType" show-word-limit :maxlength="10" placeholder="请输入fileType" />
<span v-if="isView">{{form.fileType || '-'}}</span>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="originalName" prop="originalName">
<el-input v-if="!isView" v-model.trim="form.originalName" show-word-limit :maxlength="200" placeholder="请输入originalName" />
<span v-if="isView">{{form.originalName || '-'}}</span>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="toPdfUrl" prop="toPdfUrl">
<el-input v-if="!isView" v-model.trim="form.toPdfUrl" show-word-limit :maxlength="200" placeholder="请输入toPdfUrl" />
<span v-if="isView">{{form.toPdfUrl || '-'}}</span>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button class="cancelBtn" @click="cancel">取 消</el-button>
<el-button class="submitBtn" type="primary" @click="submitForm">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
listOssInfo,
getOssInfo,
delOssInfo,
addOssInfo,
updateOssInfo,
exportOssInfo } from '@/api/system/ossInfo'
import commonField from '@/utils/commonField'
export default {
name: 'OssInfo',
data() {
return {
isView: false,
// 遮罩层
loading: true,
// 总条数
total: 0,
// 表格数据
ossInfoList: [],
// 弹出层标题
title: '',
// 是否显示弹出层
open: false,
// 状态菜单
statusOptions: [
{
dictLabel: '启用',
dictValue: '1'
},
{
dictLabel: '停用',
dictValue: '0'
}
],
// 查询参数
queryParams: {
page: 1,
rows: 10,
bucket: '',
ossKey: '',
url: '',
originalName: '',
flag: ''
},
// 表单参数
form: {},
// 表单校验
rules: {
}
}
},
computed: {
commonField() {
return commonField
}
},
created() {
this.getList() // 列表查询
},
methods: {
// 查看
handleView(row) {
this.reset()
const id = row.businessId
getOssInfo(id).then(response => {
this.form = response.data
this.isView = true
this.open = true
this.title = '查看'
})
},
/** 查询列表 */
getList() {
this.loading = true
listOssInfo(this.queryParams).then(
response => {
this.ossInfoList = response.rows
this.total = response.total
this.loading = false
}
)
},
// 取消按钮
cancel() {
this.open = false
this.reset()
},
// 表单重置
reset() {
this.form = {
businessId: undefined,
bucket: undefined,
path: undefined,
ossKey: undefined,
md5: undefined,
eTag: undefined,
url: undefined,
fileSize: undefined,
fileType: undefined,
originalName: undefined,
toPdfUrl: undefined,
flag: '1'
}
this.resetForm('form')
},
/** 查询按钮操作 */
handleQuery() {
this.queryParams.page = 1
this.getList()
},
/** 重置按钮操作 */
resetQuery() {
this.queryParams = {
page: 1,
rows: 10,
bucket: '',
ossKey: '',
url: '',
fileType: '',
originalName: '',
flag: ''
}
this.handleQuery()
},
/** 新增按钮操作 */
handleAdd() {
this.reset()
this.isView = false
this.open = true
this.title = '添加'
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset()
const id = row.businessId
getOssInfo(id).then(response => {
this.form = response.data
this.isView = false
this.open = true
this.title = '修改'
})
},
// 改变状态
handleStatusChange(row) {
const text = row.flag === '1' ? '启用' : '停用'
this.$confirm('确认操作?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(function() {
return updateOssInfo(row)
}).then(() => {
this.$message({
message: text + '成功',
type: 'success'
})
}).catch(function() {
row.flag = row.flag === '0' ? '1' : '0'
})
},
/** 提交按钮 */
submitForm: function() {
this.$refs['form'].validate(valid => {
if (valid) {
if (this.form.businessId !== undefined) {
updateOssInfo(this.form).then(response => {
this.msgSuccess('修改成功')
this.open = false
this.getList()
})
} else {
addOssInfo(this.form).then(response => {
this.msgSuccess('新增成功')
this.open = false
this.getList()
})
}
}
})
},
/** 删除按钮操作 */
handleDelete(row) {
const id = row.businessId
this.$confirm('是否确认操作?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(function() {
return delOssInfo(id)
}).then(() => {
this.getList()
this.$message({
message: '删除成功',
type: 'success'
})
}).catch(function() {
})
},
/** 导出按钮操作 */
handleExport() {
const queryParams = this.queryParams
this.$confirm('是否确认操作?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(function() {
return exportOssInfo(queryParams).then(response => {
const blob = new Blob([response])
const downloadElement = document.createElement('a')
const href = window.URL.createObjectURL(blob)// 创建下载的链接
downloadElement.href = href
downloadElement.download = '文件管理信息' + '.xlsx' // 下载后文件名
document.body.appendChild(downloadElement)
downloadElement.click()// 点击下载
document.body.removeChild(downloadElement)// 下载完成移除元素
window.URL.revokeObjectURL(href)// 释放掉blob对象
})
})
}
}
}
</script>
<style lang="scss" scoped>
.app-container {
font-size: 18px;
padding: 0;
.placeholder {
height: 1.3vh;
background-color: #F4F4F4;
margin-bottom: 10px
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment