<template>
<div class="JiZhiJianShe-page">
<div class="top">
<el-form :inline="true">
<el-form-item label="年份：" >
<el-date-picker :clearable="false" v-model="year" type="year" placeholder="选择年"
></el-date-picker>
</el-form-item>
<el-form-item label="分类：">
<el-select v-model="type" >
<el-option label="全部" value></el-option>
<el-option v-for="(item, index) in typeList" :key="index" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="onSearch"> 搜索</el-button>
<el-button type="primary" plain icon="Plus" @click="onAdd">新增</el-button>
</el-form-item>
</el-form>
</div>
<el-table :data="tableData" v-loading="tableLoading" stripe max-height="700">
<el-table-column type="index" width="55" :index="getIndex" label="序号" align="center" />
<el-table-column show-overflow-tooltip prop="fileName" label="文件名" align="center"></el-table-column>
<el-table-column prop="fileNumber" label="文件号" align="center"></el-table-column>
<el-table-column prop="fileType" label="文件类型" align="center">
<template #default="{ row }">
<span>{{ cont(row.fileType) }}</span>
</template>
</el-table-column>
<el-table-column prop="fileNumberUnit" label="发布单位" align="center"></el-table-column>
<el-table-column prop="remark" label="备注" align="center">
<template #default="scope">
<span>{{ scope.row.remark || "-" }}</span>
</template>
</el-table-column>
<el-table-column prop="fileYear" label="发布时间" align="center" width="200px"></el-table-column>
<el-table-column label="操作" align="center" width="200">
<template #default="{ row }">
<el-button link type="success" @click="onDownload(row.fileUrl)">下载</el-button>
<el-button link type="primary" @click="onEdit(row)">修改</el-button>
<el-button link type="danger" @click="onDelete(row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div style="float: right;">
<el-pagination :page-sizes="[10, 20, 30, 50]" layout="total,sizes, prev, pager, next,jumper"
style="margin-top: 15px;" @size-change="sizeChange" @current-change="handleCurrentChange" v-model::pageNum-page="pageNum"
v-model:page-size="pageSize" background :total="total"></el-pagination>
</div>
<el-dialog title="操作" v-model="visible" @close="onModalClose" :modal-append-to-body="false"
:close-on-click-modal="false">
<el-form label-width="auto" :rules="rules" ref="ruleForm" :model="formData">
<el-form-item label="发布时间：">
<el-date-picker style='width:100%' v-model="formData.fileYear" type="date" value-format="YYYY-MM-DD" format="YYYY-MM-DD"
placeholder="选择日期时间"></el-date-picker>
</el-form-item>
<el-form-item label="文件名：" prop="fileName">
<el-input placeholder="文件名" style="width: 500px;" v-model="formData.fileName"></el-input>
</el-form-item>
<el-form-item label="文件号：" prop="fileNumber">
<el-input placeholder="文件号" type="number" style="width: 500px;"
v-model="formData.fileNumber"></el-input>
</el-form-item>
<el-form-item label="文件类型：" prop="fileType" :rules="[{ required: true, message: '文件类型：', trigger: ['blur', 'change'] }]" props="investFileUrl">
<el-select style='width:100%' v-model="formData.fileType" placeholder="文件类型">
<el-option :label="item.label" :value="item.value" v-for="(item, index) in typeList"
:key="index"></el-option>
</el-select>
</el-form-item>
<el-form-item label="发布单位：" prop="fileNumberUnit">
<el-input placeholder="发布单位" style="width: 500px;" v-model="formData.fileNumberUnit"></el-input>
</el-form-item>
<el-form-item label="备注:" prop="remark">
<el-input placeholder="备注" type="textarea" style="width: 500px;" v-model="formData.remark"></el-input>
</el-form-item>
<el-form-item label="文件上传" :rules="[{ required: true, message: '文件上传', trigger: ['blur', 'change'] }]" props="investFileUrl">
<el-upload ref="upload" class="upload-demo" :action="formData.FileUpSrc" :limit="1"
:on-change="handleExceed" v-model:file-list="investFileUrl" :auto-upload="false">
<template #trigger>
<el-button type="primary">点击上传</el-button>
</template>
<template #tip>
</template>
</el-upload>
</el-form-item>
<!-- <el-form-item>
<el-button type="primary" @click="onSubmit" :loading="formLoading">提交</el-button>
</el-form-item> -->
</el-form>
<div style="text-align: right;padding: 10px;">
<el-button @click="onModalClose" :loading="formLoading">关闭</el-button>
<el-button type="primary" @click="onSubmit" :loading="formLoading">确定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { ElMessage, ElMessageBox } from 'element-plus'
import { proeaefileData, deletefileData, addfileData, editfileData, systemUpload } from "@/services";
import moment from "moment";
import config from '@/config'
const baseUrl = config.baseUrl
export default {
data() {
return {
investFileUrl:[],
fileList: [],
formLoading: false,
formData: { FileUpSrc: baseUrl + '/system/upload' },
visible: false,
isAdd: true,
tableHeight: 0,
year: "",
type: "",
typeList: [
{ value: 1, label: "规划建设管控制度" },
{ value: 2, label: "蓝线、绿线划定与保护" },
{ value: 3, label: "技术规范与标准建设" },
{ value: 4, label: "投融资机制建设" },
{ value: 5, label: "绩效考核与奖励制度" },
{ value: 6, label: "产业化" },
{ value: 7, label: "其他制度" }
],
pageNum: 1,
pageSize: 10,
total: 0,
tableLoading: false,
tableData: []
};
},
methods: {
moment,
getIndex(index) {
return (this.pageNum - 1) * this.pageSize + index + 1
},
onSearch(){
this.getTableData();
},
// 关闭弹框
onModalClose() {
this.visible = false;
this.$refs["ruleForm"].clearValidate();
this.$refs["ruleForm"].resetFields();
this.formData = {}
this.fileList = []
},
handleExceed(uploadFile) {
// let formDataM = new FormData();
// console.log(uploadFile,900999);
// formDataM.append("file", uploadFile.raw);
// systemUpload(formDataM).then(({ data: { originalName, url } }) => {
// this.formData.fileName = originalName
// this.formData.fileUrl = url
// })
},
handleChange(file, fileList) {
// this.fileList = fileList;
// this.formData.fileUrl = file.name
},
// 点击新增
onAdd() {
this.isAdd = true
this.investFileUrl=[]
this.visible = true;
},
// 点击提交按钮
onSubmit() {
// console.log(this.investFileUrl,888);
if( this.investFileUrl.length>0){
let formDataM = new FormData();
formDataM.append("file", this.investFileUrl[0]?.raw);
systemUpload(formDataM).then(({ data: { originalName, url } }) => {
this.formData.fileName = originalName
this.formData.fileUrl = url
this.$refs["ruleForm"].validate((valid) => {
if (valid) {
this.onSave();
} else {
return false;
}
})
})
}else{
this.$message({
type: "warning",
message: "请上传文件"
})
return
}
},
// 提交新增
async onSave() {
if (this.isAdd) {
this.formLoading = true;
let res = await addfileData(this.formData);
this.formLoading = false;
if (res.code === 200) {
this.$message({
type: "success",
message: "新增成功"
})
this.onModalClose();
this.getTableData();
} else if (res.code && res.code !== 200) {
this.$message({
type: "error",
message: res.msg
})
}
}
else {
this.editConfig(this.formData)
}
},
//编辑
async editConfig(v) {
console.log(v,434334);
let { code } = await editfileData(v)
if (code == 200) {
this.visible = false;
this.getTableData();
}
},
// 点击修改站点
onEdit(val) {
this.visible = true;
this.dialogTitle1 = "修改站点";
this.siteNoDisable = true;
this.formData = val
this.isAdd = false
this.investFileUrl=[{name: val.fileName, url: val.fileUrl}]
},
//删除
async deleteConfig(v) {
let { code } = await deletefileData(v)
if (code == 200) {
this.getTableData();
}
},
// 点击s删除
onDelete(v) {
ElMessageBox.confirm(
'您确定删除吗？',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}
)
.then(() => {
this.deleteConfig(v)
ElMessage({
type: 'success',
message: '删除成功',
})
})
},
cont(v) {
let a = this.typeList.filter((i) => i.value == v)
console.log(a);
return a[0].label
},
// 获取表格数据
async getTableData() {
console.log( moment(this.year).format("YYYY"),9999);
let _data = {
pageNum: this.pageNum,
pageSize: this.pageSize,
fileType: this.type,
year: moment(this.year).format("YYYY")
};
this.tableLoading = true;
let res = await proeaefileData(_data);
this.tableLoading = false;
if (res.code === 200) {
const { total, data } = res;
this.total = total;
this.tableData = data;
}
},
// 点击下载
onDownload(path) {
console.log(path,777);
window.open(path);
},
// 切换分页
handleCurrentChange(pageNum) {
this.pageNum = pageNum;
this.getTableData();
},
sizeChange(pageSize){
this.pageSize = pageSize;
this.getTableData();
},
// onChange() {
// this.pageNum = 1;
// this.getTableData();
// },
// 重置高度
resetHeight() {
return new Promise((resolve, reject) => {
this.tableH = 0
resolve()
})
},
// 设置table高度
// fetTableHeight() {
// this.resetHeight().then(res => {
// let bodyH = document.documentElement.clientHeight; // 屏幕高度
// let h = document.getElementsByClassName('top-menu')[0].clientHeight + 100; // 二级菜单栏高度
// let topH = document.getElementsByClassName('top')[0].clientHeight; // 二级菜单栏高度
// this.tableHeight = bodyH - h - topH - 100 + "px";
// })
// }
},
computed: {
},
mounted() {
this.year = moment(new Date()).format("YYYY")
this.getTableData();
// this.fetTableHeight();
}
};
</script>
<style lang="less" scoped>
@import "@/global.less";
.JiZhiJianShe-page {
padding: 20px;
border: 1px solid #ddd;
height: 90vh;
.el-input__inner {
// color: #fff;
}
.action-span {
color: @text-color;
}
}
</style>
