<template>
|
<div class="inner">
|
<a-row type="flex" justify="space-between" style="margin-bottom: 20px">
|
<a-col :span="4">
|
<a-button type="primary" @click="showCreateHandle">新增</a-button>
|
</a-col>
|
</a-row>
|
|
<div class="table-cont">
|
<a-table :columns="columns" :data-source="appFileData" :pagination="pagination" :rowKey="record=>record.id" bordered>
|
<template #fileurl="fileurl">
|
{{ uploadUrl + fileurl }}
|
</template>
|
<template #action="action,row">
|
<a-button type="link" @click="showEditHandle(row)">编辑</a-button>
|
<a-button type="link" class="delBtn" @click="deleteHandle(row)">删除</a-button>
|
</template>
|
</a-table>
|
</div>
|
<a-modal
|
:title="dialogStatus==='create'?'新增':'编辑'" :visible.sync="dialogFormVisible"
|
:modal-append-to-body="false"
|
:close-on-click-modal="false"
|
width="500px"
|
cancelText="取消"
|
okText="确认"
|
@ok="onSubmit"
|
@cancel="handleCancel"
|
:afterClose="clearMod"
|
>
|
<a-form-model ref="dataForm" :rules="dataFormRules" :model="dataForm" :label-col="labelCol" :wrapper-col="wrapperCol" :colon="false">
|
<!-- <a-form-model-item label="文件名称:" prop="filename">-->
|
<!-- <a-input v-model="dataForm.filename"/>-->
|
<!-- </a-form-model-item>-->
|
<a-form-model-item label="上传文件:" prop="company">
|
<a-upload
|
:action="uploadUrl"
|
:file-list="fileList"
|
@change="fileChange"
|
:headers="header"
|
:data="{module: 'naturalDisasterPath'}"
|
@download="downloadFile"
|
:remove="(file)=>{removeFile(file)}"
|
:showUploadList="{
|
showRemoveIcon: true,
|
showDownloadIcon: true
|
}"
|
>
|
<a-button> <a-icon type="upload" />上传附件</a-button>
|
</a-upload>
|
</a-form-model-item>
|
<a-form-model-item label="版本号:" prop="version">
|
<a-input v-model="dataForm.version"/>
|
</a-form-model-item>
|
<a-form-model-item label="备注:" prop="remark">
|
<a-input v-model="dataForm.remark"/>
|
</a-form-model-item>
|
</a-form-model>
|
</a-modal>
|
</div>
|
</template>
|
|
<script>
|
import {getUser, delUser, addGroupUser, updateGroupUser} from '@/api/user'
|
import {getDistrictInfo, loginOut} from "@/api/login";
|
import {getUserInfo, Session} from "@/util/storage";
|
import Cookies from "js-cookie";
|
import {deleteFile} from "@/api/list";
|
import axios from "axios";
|
import {addApp, delApp, getAppList, updateApp} from "@/api/app";
|
export default {
|
name: 'user',
|
data () {
|
return {
|
areaVal: [],
|
unittype: null,
|
search:{
|
pageIndex: 1,
|
pageSize: 10,
|
},
|
columns:[
|
{
|
title: '文件名称',
|
dataIndex: 'filename',
|
key: 'filename'
|
},
|
{
|
title: '文件链接',
|
dataIndex: 'fileurl',
|
key: 'fileurl',
|
scopedSlots: { customRender: 'fileurl' },
|
customCell: this.executeCustomCell
|
},
|
{
|
title: '版本号',
|
dataIndex: 'version',
|
width: 120,
|
key: 'version'
|
},
|
{
|
title: '备注',
|
dataIndex: 'remark',
|
key: 'remark',
|
},
|
// {
|
// title: '创建时间',
|
// dataIndex: 'created',
|
// key: 'created',
|
// },
|
// {
|
// title: '更新时间',
|
// dataIndex: 'updated',
|
// key: 'updated',
|
// },
|
{
|
title: '操作',
|
key: 'action',
|
width: '18%',
|
scopedSlots: { customRender: 'action' },
|
},
|
],
|
labelCol: { span: 4 },
|
wrapperCol: { span: 14 },
|
appFileData: [],
|
pagination: {
|
current: 1,
|
defaultCurrent: 1,
|
defaultPageSize: 10,
|
total: 0,
|
onChange: ( page, pageSize ) => this.onPageChange(page,pageSize),
|
showTotal: total => `共 ${total} 条`
|
},
|
areaData: [],
|
fieldNames:{
|
label: 'name',
|
value: 'id',
|
children: 'children'
|
},
|
dataForm: {
|
id: '',
|
filename:'',
|
fileurl:'',
|
attachmentId: '',
|
version:'',
|
remark:'',
|
file:'',
|
},
|
dialogFormVisible: false,
|
dialogStatus: '',
|
dataFormRules: {
|
// filename:[{required: true, message: '文件名不能为空', trigger: 'blur'}],
|
version: [{required: true, message: '版本号不能为空', trigger: 'blur'}],
|
remark: [{required: true, message: '描述不能为空', trigger: 'blur'}],
|
},
|
uploadUrl: '',
|
fileList: [],
|
header: {
|
uid: null,
|
tk: Cookies.get('resTk')
|
},
|
delList: []
|
}
|
},
|
created() {
|
const t = this
|
const { baseUrl } = require('../../../config/env.' + process.env.NODE_ENV)
|
t.uploadUrl= baseUrl + '/attachment/upload/detail'
|
t.userInfo = getUserInfo()
|
t.header.uid = t.userInfo.uid
|
t.unittype = getUserInfo().unittype
|
console.log(t.unittype,'unit')
|
t.getList()
|
},
|
methods:{
|
async getList () {
|
const _this = this
|
const params = {}
|
params['pageIndex'] = _this.search.pageIndex
|
params['pageSize'] = _this.search.pageSize
|
const res = await getAppList(params);
|
if (res.data.code == 100) {
|
_this.appFileData = res.data.data.map(item => {
|
return {
|
...item,
|
filename:item.attachmentInfo.fileName,
|
fileurl: item.attachmentInfo.fileUrl
|
}
|
})
|
_this.pagination.total = res.data.total
|
} else {
|
_this.$message.warning(res.data.msg);
|
}
|
},
|
async showCreateHandle() {
|
this.resetDataForm()
|
this.dialogStatus = 'create'
|
this.dialogFormVisible = true
|
this.$nextTick(() => {
|
this.$refs['dataForm'].clearValidate()
|
})
|
},
|
showEditHandle: function (row) {
|
this.resetDataForm();
|
this.dialogStatus = 'editor';
|
this.dataForm.id = row.id;
|
this.dataForm.attachmentId = row.attachmentId;
|
this.dataForm.filename = row.filename;
|
this.dataForm.fileurl = row.fileurl;
|
if(this.dataForm.filename){
|
let fileObj = {
|
uid: row.id,
|
name: row.filename,
|
status: 'done',
|
url: row.fileurl
|
}
|
this.fileList.push(fileObj)
|
}else{
|
this.fileList = []
|
}
|
this.dataForm.version = row.version;
|
this.dataForm.remark = row.remark;
|
this.dialogFormVisible = true;
|
this.$nextTick(() => {
|
this.$refs['dataForm'].clearValidate()
|
})
|
},
|
executeCustomCell(record) {
|
return {
|
on: {
|
click: (event) => {
|
console.log("record",record)
|
const file = {
|
url: record.fileurl
|
}
|
this.downloadFile(file)
|
}
|
},
|
style: {
|
'color': '#1890ff',
|
'cursor': 'pointer'
|
}
|
}
|
},
|
handleCancel(e) {
|
const t = this
|
t.dialogFormVisible = false;
|
},
|
fileChange(info) {
|
let fileList = [...info.fileList];
|
if (fileList.length > 1) {
|
fileList.splice(0, 1)
|
}
|
fileList = fileList.map(file => {
|
if (file.uid === info.file.uid) {
|
if (file.status == 'done') {
|
if (file.response) {
|
const res = file.response
|
if (res.code == 100) {
|
this.$message.success('文件上传成功')
|
} else {
|
this.$message.error('文件上传失败')
|
}
|
// Component will show file.url as link
|
file.url = res.data.fileUrl
|
}
|
}
|
}
|
return file
|
});
|
this.fileList = fileList;
|
},
|
removeFile(file) {
|
if(this.dialogStatus == 'create'){
|
this.delList.push(file.response.data.id)
|
}else {
|
this.delList.push(file.uid)
|
}
|
},
|
async deleteFile() {
|
const t = this
|
for (let i of t.delList) {
|
const res = await deleteFile(i)
|
if (res.data.code == 100) {
|
console.log('文件删除成功')
|
} else {
|
t.$message.error(res.data.msg)
|
}
|
}
|
},
|
downloadFile(file){
|
const t = this
|
const { baseUrl } = require('../../../config/env.' + process.env.NODE_ENV)
|
axios.get(baseUrl + file.url,{headers:{'Content-Type': 'application/json','tk': `${Cookies.get('resTk')}`,'uid':`${Cookies.get('resUid')}`},responseType: 'blob'}).then(res=>{
|
if (res) {
|
const link = document.createElement('a')
|
let blob = new Blob([res.data],{type: res.data.type})
|
link.style.display = "none";
|
link.href = URL.createObjectURL(blob); // 创建URL
|
window.open(link.href)
|
// link.setAttribute("download", file.name);
|
// document.body.appendChild(link);
|
// link.click();
|
// document.body.removeChild(link);
|
} else {
|
this.$message.error('获取文件失败')
|
}
|
})
|
},
|
|
onSubmit() {
|
this.$refs.dataForm.validate(async valid => {
|
if (valid) {
|
console.log("file",this.fileList)
|
if(this.fileList.length == 0){
|
this.$message.error('请上传附件');
|
return;
|
}
|
if(this.fileList[0].response){
|
this.dataForm.attachmentId = this.fileList[0].response.data.id;
|
}
|
if(this.dialogStatus == 'create') {
|
const param = {
|
attachmentId: this.dataForm.attachmentId,
|
remark: this.dataForm.remark,
|
version: this.dataForm.version
|
}
|
const res = await addApp(param);
|
if (res.data.code == 100) {
|
this.$message.success('新增成功');
|
this.dialogFormVisible = false;
|
await this.getList();
|
} else {
|
this.$message.warning(res.data.msg);
|
}
|
|
}else if(this.dialogStatus == 'editor'){
|
const param = {
|
id: this.dataForm.id,
|
attachmentId: this.dataForm.attachmentId,
|
remark: this.dataForm.remark,
|
version: this.dataForm.version
|
}
|
const res = await updateApp(param);
|
if (res.data.code == 100) {
|
this.$message.success('编辑成功');
|
this.dialogFormVisible = false;
|
await this.getList();
|
} else {
|
this.$message.warning(res.data.msg);
|
}
|
}
|
} else {
|
console.log('error submit!!');
|
return false;
|
}
|
});
|
},
|
clearMod(){
|
this.fileList = []
|
this.$refs.dataForm.clearValidate()
|
this.$refs.dataForm.resetFields()
|
},
|
resetDataForm() {
|
this.dataForm = {
|
id: '',
|
filename:'',
|
fileurl:'',
|
version:'',
|
remark:'',
|
}
|
},
|
|
async deleteHandle(row){
|
const t = this
|
this.$confirm({
|
title: '提示',
|
content: h => <div>是否删除该条信息？</div>,
|
cancelText: '取消',
|
okText: '确认',
|
centered: true,
|
onOk() {
|
const param = {
|
id: row.id
|
}
|
delApp(param).then(res => {
|
if(res.data.code == 100){
|
t.$message.success('删除信息成功');
|
t.getList()
|
}else{
|
t.$message.warning(res.data.msg);
|
}
|
})
|
},
|
onCancel() {
|
console.log('Cancel');
|
},
|
});
|
},
|
|
resetSearch(){
|
const t = this
|
t.areaVal = []
|
t.search = {
|
pageIndex: 1,
|
pageSize: 10,
|
searchParams:{
|
realName: '',
|
districtId: null,
|
unittype: null
|
}
|
}
|
t.getUserList()
|
},
|
|
onPageChange(page, pageSize) {
|
const t= this
|
t.pagination.current = page
|
t.search.pageIndex = page
|
t.getUserList()
|
},
|
onChange(value) {
|
const t = this
|
t.search.searchParams.districtId = value[value.length - 1]
|
},
|
findAreaById(data,value) {
|
for (const node of data) {
|
if (node.value === value) {
|
return node.label;
|
}
|
if (node.children) {
|
const foundLabel = this.findAreaById(node.children, value);
|
if (foundLabel) {
|
return foundLabel;
|
}
|
}
|
}
|
return null;
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.delBtn{
|
color: @danger
|
}
|
</style>
|
