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/enterpriselibrary/index.vue

381 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.

<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="20">
<el-form-item label="企业名称:" prop="qymc">
<el-input v-model.trim="formInline.qymc" placeholder="请输入内容"></el-input>
</el-form-item>
<!-- <el-form-item label="统一社会信用代码:" prop="enterUnit">
<el-input v-model.trim="formInline.enterUnit" placeholder="请输入内容"></el-input>
</el-form-item>
<el-form-item label="经营状态:" prop="policyLevel">
<el-select class="ignoreElement" v-model="formInline.policyLevel" placeholder="请选择">
<el-option
label="省级"
value="0">
</el-option>
<el-option
label="市级"
value="1">
</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="4">
<div class="btnss">
<el-button type="primary" class="import-btn" icon="icon iconfont icon-jc-daoru" size="mini" @click="importBtn">导入企业</el-button>
<el-button type="primary" class="import-btn import-btn-export" size="mini" @click="deriveBtn" :loading="exportLoading">导出</el-button>
</div>
</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="企业名称" prop="qymc" />
<el-table-column label="统一社会信用代码" prop="tyshxydm" />
<!-- <el-table-column label="法定代表人" prop="policyLevel" />
<el-table-column label="经营状态" prop="enterTime" />
<el-table-column label="成立日期" prop="createBy" />
<el-table-column label="注册资本" prop="createTime" /> -->
<el-table-column label="经济类型" prop="jjlxmc" />
<!-- <el-table-column label="登记注册统计类别" prop="statisticalCategories" /> -->
<el-table-column label="企业类型" prop="qylxmc" />
<el-table-column label="行业名称" prop="hymc" />
<el-table-column label="产业类型" prop="cylx" />
<el-table-column label="成立日期" prop="clrq" width="200">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.clrq,"{y}-{m}-{d}") }}</span>
</template>
</el-table-column>
<!-- <el-table-column label="组织机构代码" prop="createTime" />
<el-table-column label="参保人数" prop="createTime" />
<el-table-column label="曾用名" prop="createTime" />
<el-table-column label="注册地址" prop="createTime" />
<el-table-column label="注册类型" prop="createTime" />
<el-table-column label="经营范围" prop="createTime" /> -->
<el-table-column label="操作" prop="userId" class-name="table-operation" width="120">
<template slot-scope="scope">
<span class="look-info" @click="goInfo(scope.row)">查看详情</span>
<!-- <span class="edit-info" @click="editInfo(scope.row)">编辑</span>
<span class="del-info" @click="delInfo(scope.row)">删除</span> -->
</template>
</el-table-column>
</el-table>
<my-pagination
id="L-pagination"
:total="total"
:page="pagination.pageNum"
:limit="pagination.pageSize"
@pagination="getPagination"
:current-page.sync="pagination.pageNum"
></my-pagination>
</section>
</div>
<!-- :rules="rules" -->
<my-dialog :title="title" @close="importClose" @confirm="confirm" ref="importProject" closeText="关闭" :myclass="true">
<el-row>
<el-col :span="12">
<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"
:before-upload="handleBeforeUpload"
: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>
</div>
</el-col>
<el-col :span="12">
<el-button type="text" @click="frontDownload">下载模板</el-button>
</el-col>
<!-- <el-col :span="12">
<transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
<li :key="file.url" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">
<el-link :href="`${baseUrl}${file.url}`" :underline="false" target="_blank">
<span class="el-icon-document"> {{ getFileName(file.name) }} </span>
</el-link>
<div class="ele-upload-list__item-content-action">
<el-link :underline="false" @click="handleDelete(index)" type="danger"></el-link>
</div>
</li>
</transition-group>
</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 { getEnterList, enterpriseBasicInfoNew, enterpriseBasicInfoChange, enterpriseBasicInfoId, enterpriseBasicInfoDel } from "@/api/jin_ji_hu/enterList"
import { getToken } from "@/utils/auth";
export default {
components:{myPagination, myDialog},
dicts: ['jjh_project_type'],
data() {
return {
userType: this.$store.state.user.userType,
deptId: this.$store.state.user.deptId,
total:0,
pagination: {
pageNum:1,
pageSize:10,
},
loading:false,
formInline: {
qymc: '',
},
tableData:[],
tabHeader: undefined,
addFrom: {
name:"",
joinProject:"",
enterUnit:"",
policyLevel:"",
enterTime:"",
},
rules:{
name:[
{ required: true, message: '请填写政策文件名称', trigger: 'blur' }
],
joinProject:[
{ required: true, message: '请填写政策等级', trigger: 'blur' }
],
enterUnit:[
{ required: true, message: '请填写发文单位', trigger: 'blur' }
],
policyLevel:[
{ required: true, message: '请选择发文时间', trigger: 'change' }
],
enterTime:[
{ required: true, message: '请选择关联项目', trigger: 'change' }
],
},
title:"导入企业",
infoVisible:false,
baseUrl: process.env.VUE_APP_BASE_API,
// 用户导入参数
upload: {
// 是否禁用上传
isUploading: false,
// 是否更新已经存在的用户数据
updateSupport: 0,
// 设置上传的请求头部
headers: { Authorization: "Bearer " + getToken() },
// 上传的地址
url: process.env.VUE_APP_BASE_API + "/system/enterpriseBasicInfo/importEnterprise"
},
fileList: [],
number: 0,
uploadList: [],
// 导出遮罩层
exportLoading: false,
}
},
mounted() {
this.cancalDebounce();
window.addEventListener('resize', this.cancalDebounce);
if(this.$route.params.enterpriseName) {
this.formInline.enterpriseName = this.$route.params.enterpriseName;
this.pagination = { ...this.pagination,...this.formInline };
}
this.getList();
},
destroyed() {
window.removeEventListener('resize', this.cancalDebounce);
},
methods:{
// 列表获取
getList(){
this.loading = true;
getEnterList(this.pagination).then(res=>{
this.loading = false;
this.total = res.data.total;
this.tableData = res.data.records;
})
},
// 获取页码
getPagination(pages) {
this.pagination.pageNum = pages.page;
this.pagination.pageSize = pages.limit;
this.getList();
},
// 查询
handleQuery() {
this.pagination = {
pageNum: 1,
pageSize: 10
}
this.pagination = { ...this.pagination,...this.formInline };
// console.log(this.pagination);
// console.log(this.formInline);
this.getList();
},
// 重置
resetQuery(formName){
this.$refs[formName].resetFields();
this.pagination = {
pageNum: 1,
pageSize: 10
}
this.getList();
},
// 修改table背景色
tableRowClassName({row, rowIndex}){
if (rowIndex % 2 !== 0) {
return 'evenNumber-row';
}
return '';
},
// 查看详情
goInfo(row){
this.$router.push({
name: 'enterpriselibraryInfo',
query: { userId: row.id, creditCode: row.tyshxydm }
})
},
// 编辑
editInfo(row){
},
// 导出操作
deriveBtn(){
this.$confirm("是否确认导出企业库数据项?", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.exportLoading = true;
this.download(
"/system/enterpriseBasicInfo/export",
{
...this.formInline
},
"企业库数据" + new Date().getTime() + ".xlsx"
);
this.exportLoading = false;
})
.catch(() => { });
},
// 导入按钮
importBtn(){
this.$refs.importProject.open();
},
// 导入事件触发
importExcel(){
this.$refs['upload'].$refs['upload-inner'].handleClick()
},
// 上传前校检格式和大小
handleBeforeUpload(file) {
this.$modal.loading("正在上传文件,请稍候...");
return true;
},
handleFileUploadProgress(){},
// 文件上传成功
handleFileSuccess(response, file, fileList) {
if(response.code === 200) {
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.$modal.closeLoading();
this.getList();
} else {
this.$modal.closeLoading();
this.$modal.msgError(response.msg);
}
},
//下载模版
frontDownload() {
var a = document.createElement("a"); //创建一个<a></a>标签
a.href = "/demo/JinJiHu/static/企业库数据模板.xlsx";
//给a标签的href属性值加上地址注意这里是绝对路径不用加 点.
a.download ="企业库模板.xlsx";
//设置下载文件文件名,这里加上.xlsx指定文件类型pdf文件就指定.fpd即可
a.style.display = "none"; // 障眼法藏起来a标签
document.body.appendChild(a);
// 将a标签追加到文档对象中
a.click(); //模拟点击了a标签会触发a标签的href的读取浏览器就会自动下载了
a.remove();
// 一次性的用完就删除a标签
},
// 导入弹框的关闭事件触发
importClose(){
this.$refs.importProject.close();
},
// 删除文件
handleDelete(index) {
this.fileList.splice(index, 1);
this.$emit("input", this.listToString(this.fileList));
},
// 获取文件名称
getFileName(name) {
// 如果是url那么取最后的名字 如果不是直接返回
if (name.lastIndexOf("/") > -1) {
return name.slice(name.lastIndexOf("/") + 1);
} else {
return name;
}
},
// 导入弹框的确认按钮
confirm(){
},
// 删除
delInfo(row){
this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
});
},
// 屏幕尺寸变化
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>