You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
jin_ji_hu/src/views/project/index.vue

401 lines
14 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!--
* @Descripttion:
* @version:
* @Author: JC9527
* @Date: 2024-03-25 09:07:08
* @LastEditors: JC9527
* @LastEditTime: 2024-03-28 15:29:35
-->
<template>
<div class="L-public-main">
<div class="L-main">
<header>
<el-form :inline="true" :model="formInline" size="small" class="demo-form-inline" ref="queryFrom">
<el-col :span="22">
<el-form-item label="项目分类:">
<el-select v-model="formInline.projectClassify" placeholder="请选择">
<el-option
v-for="dict in dict.type.jjh_project_type"
:key="dict.value"
:label="dict.label"
:value="dict.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="项目名称:">
<el-input v-model.trim="formInline.projectName" placeholder="请输入内容"></el-input>
</el-form-item>
<el-form-item label="申报单位:">
<el-input v-model.trim="formInline.declareUnit" placeholder="请输入内容"></el-input>
</el-form-item>
<el-form-item label="年份:">
<el-date-picker
v-model="formInline.projectYear"
format="yyyy"
value-format="yyyy"
type="year"
placeholder="选择年份">
</el-date-picker>
</el-form-item>
<el-form-item label="状态:">
<el-select v-model="formInline.status" placeholder="请选择">
<el-option
v-for="dict in dict.type.jjh_status"
:key="dict.value"
:label="dict.label"
:value="dict.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button size="mini" @click="resetQuery('queryFrom')">重置</el-button>
<el-button size="mini" type="primary" @click="handleQuery('queryFrom')">查询</el-button>
</el-form-item>
</el-col>
<el-col :span="2">
<el-button type="primary" class="import-btn" icon="icon iconfont icon-jc-daoru" size="mini" @click="importBtn">导入新项目</el-button>
</el-col>
</el-form>
</header>
<el-table v-loading="loading" :data="tableData" :row-class-name="tableRowClassName">
<el-table-column label="项目分类" key="projectClassify" width="250px" prop="projectClassify">
<template slot-scope="scope">
<dict-tag :options="dict.type.jjh_project_type" :value="scope.row.projectClassify"/>
</template>
</el-table-column>
<el-table-column label="项目名称" key="projectName" width="450px" prop="projectName" />
<el-table-column label="申报单位" key="declareUnit" width="550px" prop="declareUnit" />
<el-table-column label="年份" key="projectYear" width="200px" prop="projectYear" />
<el-table-column label="状态" key="status" width="200px" prop="status" class-name="table-status">
<template slot-scope="scope">
<p class="statusisThree" v-if="scope.row.status === 1">
<span></span>
<span>初审中</span>
</p>
<p class="statusisThree" v-if="scope.row.status === 2">
<span></span>
<span>复审中</span>
</p>
<p class="statusisTwo" v-if="scope.row.status === 3">
<span></span>
<span>专家评审中</span>
</p>
<p class="statusisTwo" v-if="scope.row.status === 4">
<span></span>
<span>市级评审中</span>
</p>
<p class="statusisOne" v-if="scope.row.status === 5">
<span></span>
<span>评审通过</span>
</p>
</template>
</el-table-column>
<el-table-column label="操作" prop="userId" class-name="table-operation">
<template slot-scope="scope">
<span class="look-info" @click="goInfo(scope.row)">查看详情</span>
<span class="del-info" @click="delInfo(scope.row)">删除</span>
</template>
</el-table-column>
</el-table>
<my-pagination
:total="total"
:page="pagination.current"
:limit="pagination.size"
@pagination="getPagination"
:current-page.sync="pagination.current"
></my-pagination>
</div>
<my-dialog :title="title" @close="importClose" ref="importProject">
<el-row>
<el-col :span="12">
<el-form :model="importFrom" size="small" ref="importFrom" label-width="100px" :rules="rules">
<el-form-item label="项目分类:" class="importFormItem" prop="projectClassify">
<el-select v-model="importFrom.projectClassify" placeholder="请选择">
<el-option
v-for="dict in dict.type.jjh_project_type"
:key="dict.value"
:label="dict.label"
:value="dict.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="年份:" class="importFormItem" prop="projectYear">
<el-date-picker
v-model="importFrom.projectYear"
type="year"
format="yyyy"
value-format="yyyy"
placeholder="选择年">
</el-date-picker>
</el-form-item>
<el-form-item class="importFormItem">
<!-- <el-button type="primary" class="import-btn" icon="icon iconfont icon-jc-daoru" size="mini" @click="importBtn">导入新项目</el-button> -->
<div class="btnsFlex">
<el-button type="primary" class="import-btn" icon="icon iconfont icon-jc-daoru" size="mini" @click="importExcel">导入新项目</el-button>
<el-upload
ref="upload"
:limit="1"
v-show="false"
accept=".xlsx, .xls"
:data="importFrom"
:headers="upload.headers"
:action="upload.url"
:disabled="upload.isUploading"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
>
<template slot="trigger">
<!-- <div ref="uploadRef">
<i class="icon iconfont icon-jc-daoru"></i>
导入新项目
</div> -->
<el-button type="primary" class="import-btn" icon="icon iconfont icon-jc-daoru" size="mini" ref="uploadRef">导入新项目</el-button>
</template>
</el-upload>
<a @click="importTemplate">下载模板</a>
</div>
</el-form-item>
</el-form>
</el-col>
<el-col :span="12">
<div class="importExplain">
<div class="importExplain-title">导入模板说明</div>
<div class="importExplain-content">
<span>"项目名称 项目分类 申报单位 年份"</span>
<span>以上字段为excel公共字段后面的字段可自定义系统会自动识别并导入</span>
</div>
<div class="importExplain-table">
<table>
<tr>
<th>项目名称</th>
<th>项目分类</th>
<th>申报单位</th>
<th>年份</th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</div>
</el-col>
</el-row>
</my-dialog>
</div>
</template>
<script>
import myPagination from "@/views/components/Pagination/index.vue"
import myDialog from "@/views/components/myDialog/index.vue"
import { getToken } from "@/utils/auth";
import { clearKey } from "@/utils/object.js"
import { jProject, jProjectDel } from "@/api/jin_ji_hu/project/index"
export default {
components:{myPagination,myDialog},
dicts: ['jjh_project_type', 'jjh_status'],
data() {
return {
total:0,
pagination: {
current:1,
size:10,
},
formInline: {
projectClassify: '',
projectName:"",
declareUnit:"",
projectYear:"",
status: ''
},
options:[
{
value: '选项1',
label: '总部经济'
},{
value: '选项2',
label: '自主品牌先进技术研究院'
},{
value: '选项3',
label: '省现代服务业重点项目'
},{
value: '选项4',
label: '省市服务业领军企业'
},{
value: '选项5',
label: '两业融合试点单位'
},
],
loading:false,
tableData:[],
title:"导入新项目",
importFrom:{
projectClassify:"",
projectYear:"",
},
rules: {
projectClassify: [
{ required: true, message: '请选择项目分类', trigger: 'change' }
],
projectYear: [
{ required: true, message: '请选择年份', trigger: 'change' }
],
},
// 用户导入参数
upload: {
// 是否禁用上传
isUploading: false,
// 是否更新已经存在的用户数据
updateSupport: 0,
// 设置上传的请求头部
headers: { Authorization: "Bearer " + getToken() },
// 上传的地址
// url: process.env.VUE_APP_BASE_API + "/jjh/jProject/export"
url: process.env.VUE_APP_BASE_API + "/jjh/jProject/importTemplateProject"
},
};
},
mounted() {
if(this.$route.query.projectId) {
this.formInline.projectClassify = this.$route.query.projectId;
this.pagination = { ...this.pagination,...this.formInline };
}
this.getList();
},
methods:{
// 列表获取
getList(){
this.loading = true;
jProject(this.pagination).then(res=>{
this.loading = false;
this.total = res.data.total;
this.tableData = res.data.records;
})
},
// 获取页码
getPagination(pages) {
this.pagination.current = pages.page;
this.pagination.size = pages.limit;
this.getList();
},
// 查询
handleQuery() {
this.pagination = {
current: 1,
size: 10
}
this.pagination = { ...this.pagination,...this.formInline };
// console.log(this.pagination);
// console.log(this.formInline);
this.getList();
},
// 重置
resetQuery(){
this.pagination = {
current: 1,
size: 10
}
clearKey(this.formInline)
this.getList();
},
// 导入按钮
importBtn(){
this.$refs.importProject.open();
},
// 关闭事件触发
importClose(){
this.$refs.importProject.close();
this.$nextTick(()=>{
this.$refs.importFrom.resetFields();
})
},
// 导入事件触发
importExcel(){
this.$refs.importFrom.validate((valid) => {
if (valid) {
// this.$refs.uploadRef.click()
this.$refs['upload'].$refs['upload-inner'].handleClick()
} else {
console.log('error submit!!');
return false;
}
});
},
/** 下载模板操作 */
importTemplate() {
this.download('/jjh/jProject/updateProjectTemplate', {
}, `项目模板${new Date().getTime()}.xlsx`)
},
// 文件上传中处理
handleFileUploadProgress(event, file, fileList) {
// this.upload.isUploading = true;
},
// 文件上传成功处理
handleFileSuccess(response, file, fileList) {
// this.upload.isUploading = false;
this.$refs.upload.clearFiles();
this.$alert(
"<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
response.msg +
"</div>",
"导入结果",
{ dangerouslyUseHTMLString: true }
);
this.importClose();
this.$refs.importProject.close();
// this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
this.getList();
},
// 查看详情
goInfo(rwo){
this.$router.push({
path: '/project/projectInfo',
query: { userId: rwo.id }
})
},
// 删除
delInfo(row){
this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
jProjectDel({ id: row.id }).then((res) => {
this.getList();
this.$message({
type: "success",
message: "删除成功!",
});
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
});
},
// 修改table背景色
tableRowClassName({row, rowIndex}){
if (rowIndex % 2 !== 0) {
return 'evenNumber-row';
}
return '';
}
}
};
</script>