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

623 lines
23 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.

<template>
<div class="L-public-main" id="L-size-main">
<div class="L-main">
<header id="L-header">
<el-form :inline="true" :model="formInline" size="small" class="demo-form-inline" ref="queryFrom">
<el-col :span="22">
<el-form-item label="年份:">
<el-date-picker
class="ignoreElement"
v-model="formInline.projectYear"
format="yyyy"
value-format="yyyy"
type="year"
placeholder="选择年份">
</el-date-picker>
</el-form-item>
<el-form-item label="项目分类:">
<!-- <el-select class="ignoreElement" 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-cascader
v-model="formInline.projectClassify"
class="ignoreElement project_big_type"
:options="options"
:props="props"
clearable>
</el-cascader>
</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-select class="ignoreElement" v-model="formInline.status" placeholder="请选择">
<el-option
v-for="dict in dict.type.bms_approval_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" v-if="roles.includes('other-gov')">导入新项目</el-button>
</el-col>
</el-form>
</header>
<section>
<el-table v-loading="loading" :data="tableData" :row-class-name="tableRowClassName" :height="tabHeader" :max-height="tabHeader">
<el-table-column label="年份" key="projectYear" width="200px" prop="projectYear" />
<!-- <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="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="projectBigType" prop="projectBigType">
<template slot-scope="scope">
<dict-tag :options="dict.type.project_categories" :value="scope.row.projectBigType"/>
</template>
</el-table-column>
<el-table-column label="项目中类" key="projectMiddleType" prop="projectMiddleType">
<template slot-scope="scope">
<dict-tag :options="dict.type.project_middle_type" :value="scope.row.projectMiddleType"/>
</template>
</el-table-column>
<el-table-column label="项目小类" key="projectSmallType" prop="projectSmallType">
<template slot-scope="scope">
<dict-tag :options="dict.type.project_small_type" :value="scope.row.projectSmallType"/>
</template>
</el-table-column>
<el-table-column label="单位名称" key="declareUnit" prop="declareUnit" />
<el-table-column label="信用代码" key="creditCode" prop="creditCode" />
<el-table-column label="状态" key="status" width="200px" prop="status" class-name="table-status">
<template slot-scope="scope">
<p class="statusisZero" v-if="scope.row.status === 0">
<span></span>
<span>待填报</span>
</p>
<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="statusisOne" v-if="scope.row.status === 5">
<span></span>
<span>评审通过</span>
</p>
<!-- <p class="statusisNine" v-if="scope.row.status === 6">
<span></span>
<span>上级评审不通过</span>
</p> -->
<p class="statusisNine" v-if="scope.row.status === 7">
<span></span>
<span>复审不通过</span>
</p>
<p class="statusisThree" v-if="scope.row.status === 8">
<span></span>
<span>初审不通过</span>
</p>
<p class="statusisNine" v-if="scope.row.status === 9">
<span></span>
<span>终审不通过</span>
</p>
<p class="statusisNine" v-if="scope.row.status === 10">
<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" v-if="roles.includes('other-gov')" @click="delInfo(scope.row)">删除</span>
</template>
</el-table-column>
</el-table>
<my-pagination
id="L-pagination"
:total="total"
:page="pagination.current"
:limit="pagination.size"
@pagination="getPagination"
:current-page.sync="pagination.current"
></my-pagination>
</section>
</div>
<my-dialog :title="title" @close="importClose" ref="importProject" class="project-import-dialog" width="55%">
<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 class="ignoreElement" v-model="importFrom.projectClassify" placeholder="请选择">
<el-option
v-for="dict in dict.type.project_categories"
:key="dict.value"
:label="dict.label"
:value="dict.value">
</el-option>
</el-select>
</el-form-item> -->
<el-form-item label="项目分类:" class="importFormItem" prop="projectClassify">
<el-cascader
v-model="importFrom.projectClassify"
:options="optionsTwo"
:props="propsTwo"
@change="handleItemChange"
>
</el-cascader>
</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="importFromChange"
: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><br />
<span>以上字段为excel公共字段后面的字段可自定义系统会自动识别并导入</span>
</div>
<div class="importExplain-table">
<table>
<tr>
<!-- <th>项目名称</th>
<th>申报单位</th>
<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"
import { getAllList } from "@/api/system/dict/data";
export default {
components:{myPagination,myDialog},
dicts: ['jjh_project_type', 'bms_approval_status', "project_middle_type", "project_small_type", "project_categories"],
data() {
return {
// 判断登陆用户是何身份⌈ 01 企业 02 政务 ⌋
userType: this.$store.state.user.userType,
roles: this.$store.state.user.roles,
total:0,
pagination: {
current:1,
size:10,
},
formInline: {
projectClassify: '',
projectName:[],
declareUnit:"",
projectYear:"",
status: ''
},
options: [],
optionsTwo: [],
props:{
checkStrictly:true,
lazy:true,
lazyLoad (node, resolve) {
const { level, data, children } = node;
if(children?.length == 0 ) {
getAllList({dictType: data.dict}).then(res=>{
const nodes = Array.from(res.data).map((item)=>{
return {
value:item.dictValue,
label:item.dictLabel,
dict:item.remark,
leaf: level >= 2
}
})
resolve(nodes)
})
} else {
resolve(node)
}
}
},
propsTwo:{
lazy:true,
lazyLoad (node, resolve) {
const { level, data, children } = node;
if(children?.length == 0 ) {
getAllList({dictType: data.dict}).then(res=>{
const nodes = Array.from(res.data).map((item)=>{
return {
value:item.dictValue,
label:item.dictLabel,
dict:item.remark,
leaf: level >= 2
}
})
resolve(nodes)
})
}
}
},
loading:false,
tableData:[],
title:"导入新项目",
importFrom:{
projectClassify:"",
// projectYear:"",
},
importFromChange:{
projectBigType:"",
projectMiddleType:"",
projectSmallType:"",
},
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"
},
tabHeader: undefined,
};
},
mounted() {
if(this.$route.params.projectId) {
this.formInline.projectClassify = this.$route.params.projectId + '';
this.pagination = { ...this.pagination,...this.formInline };
}
if(this.$route.params.projectBigType || this.$route.params.projectMiddleType || this.$route.params.projectSmallType) {
let arr = [];
arr.push(this.$route.params.projectBigType + '')
this.$route.params.projectMiddleType ? arr.push(this.$route.params.projectMiddleType + '') : null;
this.$route.params.projectSmallType ? arr.push(this.$route.params.projectSmallType + '') : null;
this.echoCascader(arr)
this.formInline.projectBigType = arr[0];
this.formInline.projectMiddleType = arr[1] ? arr[1] : null;
this.formInline.projectSmallType = arr[2] ? arr[2] : null;
this.formInline.status = '5'
this.pagination = { ...this.pagination,...this.formInline };
this.formInline.projectClassify = arr;
}
if(this.$route.params.projectYear) {
this.formInline.projectYear = this.$route.params.projectYear ? this.$route.params.projectYear + '' : '';
this.formInline.status = '5'
this.pagination = { ...this.pagination,...this.formInline };
}
// if(this.$route.params.projectName) {
// this.formInline.projectName = this.$route.params.projectName;
// this.pagination = { ...this.pagination,...this.formInline };
// }
if(this.$route.params.declareUnit) {
this.formInline.declareUnit = this.$route.params.declareUnit
this.pagination = { ...this.pagination,...this.formInline };
}
if(this.$route.params.declareUnit && this.$route.params.status) {
this.formInline.declareUnit = this.$route.params.declareUnit
this.formInline.status = this.$route.params.status
this.pagination = { ...this.pagination,...this.formInline };
}
if(this.userType == "01") {
this.pagination.creditCode = this.$store.state.user.name
}
this.getDataList();
this.cancalDebounce();
window.addEventListener('resize', this.cancalDebounce);
this.getList();
},
destroyed() {
window.removeEventListener('resize', this.cancalDebounce);
},
methods:{
/** 回显Cascader 级联选择器数据 */
echoCascader(arr){
getAllList({dictType:"project_categories"}).then(res=>{
let arrOne = [];
let arrTwo = [];
let arrTree = [];
res.data.map(item => {
let obj = {};
obj.value = item.dictValue;
obj.label = item.dictLabel;
obj.dict = item.remark;
arrOne.push(obj);
})
if(!arr[1]) {
this.options = arrOne;
return;
} else if(arr[1]){
for (let index = 0; index < arrOne.length; index++) {
if(arr[0] == arrOne[index].value) {
arrOne[index].children = [];
getAllList({dictType: arrOne[index].dict}).then(resTwo=>{
resTwo.data.map(item => {
let objTwo = {};
objTwo.value = item.dictValue;
objTwo.label = item.dictLabel;
objTwo.dict = item.remark;
arrTwo.push(objTwo)
arrOne[index].children.push(objTwo)
})
if(!arr[2]) {
this.options = arrOne;
return;
} else if(arr[2]) {
for (let index = 0; index < arrTwo.length; index++) {
if(arr[1] == arrTwo[index].value) {
arrTwo[index].children = [];
getAllList({dictType: arrTwo[index].dict}).then(resThree => {
resThree.data.map((itemThree)=>{
let objThree = {};
objThree.value = itemThree.dictValue;
objThree.label = itemThree.dictLabel;
objThree.dict = itemThree.remark;
objThree.leaf = 'leaf';
arrTree.push(objThree)
arrTwo[index].children.push(objThree)
})
this.options = arrOne;
})
}
}
}
})
}
}
}
})
},
handleItemChange(value){
this.importFromChange = {
projectBigType: value[0],
projectMiddleType: value[1],
projectSmallType: value[2],
}
},
getDataList(){
let arr = []
getAllList({dictType:"project_categories"}).then(res=>{
res.data.map(item => {
let obj = {};
obj.value = item.dictValue;
obj.label = item.dictLabel;
obj.dict = item.remark;
arr.push(obj)
})
})
this.options = arr;
this.optionsTwo = arr;
},
// 列表获取
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
}
if(this.formInline.projectClassify.length > 0) {
this.formInline.projectBigType = this.formInline.projectClassify[0]
this.formInline.projectMiddleType = this.formInline.projectClassify[1]
this.formInline.projectSmallType = this.formInline.projectClassify[2]
}
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();
this.getDataList();
},
// 导入按钮
importBtn(){
this.$refs.importProject.open();
},
// 关闭事件触发
importClose(){
this.$refs.importProject.close();
this.$nextTick(()=>{
this.$refs.importFrom.resetFields();
this.importFromChange = {
projectBigType:"",
projectMiddleType:"",
projectSmallType:"",
}
})
},
// 导入事件触发
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(row){
let type = 1;
if((row.projectBigType == 5 && row.projectMiddleType == 5 && row.projectSmallType == 8) || row.declareUnit == "江南嘉捷电梯股份有限公司" || row.declareUnit == "苏州工业园区文体旅游局") {
type = 2
}
this.$router.push({
name: 'projectInfo',
query: { userId: row.id,type }
})
},
// 删除
delInfo(row){
this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
jProjectDel(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 '';
},
// 屏幕尺寸变化
cancalDebounce(){
const element = document.getElementById('L-size-main'); // 通过元素的 ID 获取元素
const header = document.getElementById('L-header'); // 通过元素的 ID 获取元素
const pagination = document.getElementById('L-pagination'); // 通过元素的 ID 获取元素
const elementHeight = element.offsetHeight;
const headerHeight = header.offsetHeight;
const paginationtHeight = pagination.offsetHeight;
this.tabHeader = elementHeight - headerHeight - paginationtHeight - 140;
}
}
};
</script>