194 lines
7.8 KiB
Vue
194 lines
7.8 KiB
Vue
<template>
|
|
<div class="layout-tabs-content-box">
|
|
<div class="">
|
|
<div class="height-56 flex-row align-items-center justify-content-between">
|
|
<div class="f22 color-text-primary">调解协议模板</div>
|
|
<div class="flex-row">
|
|
<div class="mr-16">
|
|
<el-input
|
|
placeholder="请输入搜索内容"
|
|
suffix-icon="el-icon-search"
|
|
v-model.trim="queryParam.name"
|
|
size="small"
|
|
clearable
|
|
@change="handleSearch"
|
|
@keydown.enter.native="handleSearch"
|
|
>
|
|
</el-input>
|
|
</div>
|
|
|
|
<el-button size="small" @click="handleExport">下载模板</el-button>
|
|
<el-button size="small" type="primary" @click="handleAddForm">新增调解协议模板</el-button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="" >
|
|
<el-table :data="tableData" :height="`${contentHeight}`" @current-change="handleCurrentChange" highlight-current-row>
|
|
<!-- <el-table-column type="selection" width="55"></el-table-column> -->
|
|
<el-table-column type="index" label="序号" width="55"></el-table-column>
|
|
<el-table-column prop="name" label="模板名称" width="400"></el-table-column>
|
|
<el-table-column label="金融产品" width="200">
|
|
<template slot-scope="scope">
|
|
<div class="flex-row">
|
|
{{getDictName(scope.row.productTypeId)}}
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="文件大小" width="150">
|
|
<template slot-scope="scope">
|
|
<div class="flex-row">
|
|
{{scope.row.fileSize}}M
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="remark" label="备注"></el-table-column>
|
|
<el-table-column label="操作" width="150">
|
|
<template slot-scope="scope">
|
|
<div class="flex-row align-items-center">
|
|
<div class="f14 color-1960F4 cursor-pointer mr-8" @click="handleAddForm(scope)">编辑</div>
|
|
<div class="f14 color-1960F4 cursor-pointer" @click="handleDelete(scope)">删除</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div class="text-center pt-16" v-if="tableData.length>0">
|
|
<el-pagination
|
|
@size-change="getMediateDataList"
|
|
@current-change="getMediateDataList"
|
|
:current-page="queryParam.current"
|
|
:page-size="queryParam.size"
|
|
layout="total, prev, pager, next, jumper"
|
|
:total="total">
|
|
</el-pagination>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<!-- 新增金融机构弹框 -->
|
|
<addTemplateDialog v-if="addTemplateDialog" :dictList.sync="dictList" :addTemplateDialog.sync="addTemplateDialog" />
|
|
|
|
</div>
|
|
</template>
|
|
<script>
|
|
|
|
import basicApi from "@/services/basicManage";
|
|
export default {
|
|
components: {
|
|
addTemplateDialog: () => import('./components/addTemplateDialog.vue'),
|
|
},
|
|
data() {
|
|
return {
|
|
queryParam: {
|
|
type:1,
|
|
name: '',//
|
|
current:1,
|
|
size:10
|
|
},
|
|
tableData: [],
|
|
total:0,
|
|
addTemplateDialog:null,
|
|
dictList:[],
|
|
multipleSelection:[],
|
|
currentRow:null
|
|
}
|
|
},
|
|
created() {
|
|
this.getDictDataList()
|
|
this.getMediateDataList(1)
|
|
},
|
|
computed:{
|
|
// 获取抽屉drawer的内容高度
|
|
contentHeight(){
|
|
let oh = document.documentElement.clientHeight;
|
|
return oh-56-48-56-50-32
|
|
}
|
|
},
|
|
methods: {
|
|
getDictName(val){
|
|
let dictItem= this.dictList.find(item =>{
|
|
return item.code === val
|
|
})
|
|
if(dictItem){return dictItem.codeName;}
|
|
else{return '';}
|
|
},
|
|
getDictDataList(val){
|
|
basicApi.getDictList({current:1,size:100}).then(res => {
|
|
if (!res.code) {
|
|
this.dictList = res.records;
|
|
}
|
|
})
|
|
},
|
|
getMediateDataList(val){
|
|
this.queryParam.current = val
|
|
basicApi.getTemplateList(this.queryParam).then(res => {
|
|
if (!res.code) {
|
|
this.tableData = res.records;
|
|
this.total = res.total;
|
|
}
|
|
})
|
|
},
|
|
// 搜索
|
|
handleSearch() {
|
|
this.queryParam.current = 1
|
|
this.queryParam.size = 10
|
|
this.getMediateDataList(1)
|
|
},
|
|
// 新增弹窗
|
|
handleAddForm(scope){
|
|
let title = scope.row?'编辑调解协议模板':'新增调解协议模板'
|
|
let data = scope.row?scope.row:''
|
|
this.addTemplateDialog={
|
|
title:title,
|
|
data: data
|
|
}
|
|
},
|
|
// 导出
|
|
handleExport(){
|
|
if(!this.$clickThrottle()) { return }//防止重复点击
|
|
if(this.currentRow!=null)
|
|
{
|
|
// this.handlePreview({previewUrl:"/manage-center/minio/preview/"+this.multipleSelection[0].content,url:this.multipleSelection[0].content})
|
|
this.handlePreview({previewUrl:"/manage-center/minio/preview/"+this.currentRow.content,url:this.currentRow.content})
|
|
}
|
|
else
|
|
{
|
|
this.$message.warning(`请选择下载模板！`)
|
|
return
|
|
}
|
|
},
|
|
async handlePreview(item) {
|
|
try {
|
|
let res = await this.$fetchApi.getMinioToken({objectName: item.url})
|
|
console.log(res)
|
|
window.open(`${item.previewUrl}?token=${res}`, '_target')
|
|
}catch (e) {
|
|
this.$message.error(e.msg || e)
|
|
}
|
|
},
|
|
handleSelectionChange(val) {
|
|
this.multipleSelection = val;
|
|
},
|
|
handleCurrentChange(val) {
|
|
this.currentRow = val;
|
|
},
|
|
// 删除
|
|
handleDelete(scope){
|
|
this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning",
|
|
}).then(() => {
|
|
if(!this.$clickThrottle()) { return }//防止重复点击
|
|
basicApi.deleteTemplateById({ id: scope.row.id }).then((res) => {
|
|
|
|
this.$message.success("成功");
|
|
this.getMediateDataList(1)
|
|
|
|
});
|
|
}).catch(() => {});
|
|
},
|
|
}
|
|
}
|
|
</script> |