| 企业名称 | XXXXXXXXXXXXXXXX |
| 组织机构 | XXXXXXXXXXXXXXXX |
| 单位注册 | XXXXXXXXXXXXXXXX |
| 单位所在 | XXXXXXXXXXXXXXXX |
| 单位规模 | XXXXXXXXXXXXXXXX |
| 成立时间 | XXXXXXXXXXXXXXXX |
| 登记注册 | XXXXXXXXXXXXXXXX |
| 企业集团 | XXXXXXXXXXXXXXXX |
| 上市情况 | XXXXXXXXXXXXXXXX |
| 行业类别 | XXXXXXXXXXXXXXXX |
| 组织机构 | XXXXXXXXXXXXXXXX |
| 单位地址 | XXXXXXXXXXXXXXXX |
| 详细地址 | XXXXXXXXXXXXXXXX |
| 法定代表人 | XXXXXXXXXXXXXXXX |
| 联系方式 | XXXXXXXXXXXXXXXX |
| 企业控股 | XXXXXXXXXXXXXXXX |
| 从事跨国 | XXXXXXXXXXXXXXXX |
| 是否有研 | XXXXXXXXXXXXXXXX |
<template>
<article class="article-container">
<div class="article-title">
<!-- <img :src="require(`./images/icon_21.png`)" alt="" /> -->
<span>{{ title }}</span>
</div>
<table class="article-table">
<tbody class="article-tbody">
<div class="article-div-left">
<tr v-for="(item, index) in leftList" :key="index" class="article-tr">
<td class="article-td key">{{ item.key }}</td>
<td class="article-td value">{{ item.value }}</td>
</tr>
</div>
<div class="article-div-right">
<tr v-for="(item, index) in rightList" :key="index" class="article-tr">
<td class="article-td key">{{ item.key }}</td>
<td class="article-td value">{{ item.value }}</td>
</tr>
</div>
</tbody>
</table>
</article>
</template>
<script>
export default {
components: {},
data() {
return {};
},
props: {
title: {
type: String,
default: '企业基本情况',
},
leftList: {
type: Array,
default: () => [
{ key: '企业名称', value: 'XXXXXXXXXXXXXXXX' },
{ key: '组织机构', value: 'XXXXXXXXXXXXXXXX' },
{ key: '单位注册', value: 'XXXXXXXXXXXXXXXX' },
{ key: '单位所在', value: 'XXXXXXXXXXXXXXXX' },
{ key: '单位规模', value: 'XXXXXXXXXXXXXXXX' },
{ key: '成立时间', value: 'XXXXXXXXXXXXXXXX' },
{ key: '登记注册', value: 'XXXXXXXXXXXXXXXX' },
{ key: '企业集团', value: 'XXXXXXXXXXXXXXXX' },
{ key: '上市情况', value: 'XXXXXXXXXXXXXXXX' },
],
},
rightList: {
type: Array,
default: () => [
{ key: '行业类别', value: 'XXXXXXXXXXXXXXXX' },
{ key: '组织机构', value: 'XXXXXXXXXXXXXXXX' },
{ key: '单位地址', value: 'XXXXXXXXXXXXXXXX' },
{ key: '详细地址', value: 'XXXXXXXXXXXXXXXX' },
{ key: '法定代表人', value: 'XXXXXXXXXXXXXXXX' },
{ key: '联系方式', value: 'XXXXXXXXXXXXXXXX' },
{ key: '企业控股', value: 'XXXXXXXXXXXXXXXX' },
{ key: '从事跨国', value: 'XXXXXXXXXXXXXXXX' },
{ key: '是否有研', value: 'XXXXXXXXXXXXXXXX' },
],
},
},
computed: {},
created() {},
mounted() {},
methods: {},
};
</script>
<style scoped lang="scss">
.article-container {
padding-top: 20px;
.article-title {
display: flex;
align-items: center;
color: #506eda;
font-weight: bold;
margin-bottom: 20px;
}
.article-table {
border-collapse: collapse;
width: 100%;
.article-tbody {
display: flex;
> div {
flex: 1;
}
}
tr {
display: flex;
&:first-child {
td.value {
border-top: 1px solid #f5f5f5;
}
}
}
td {
text-align: center;
border-bottom: 1px solid #f5f5f5;
padding: 14px;
&.key {
background-color: #f1f4fa;
flex: 1;
}
&.value {
flex: 2;
text-align: left;
}
}
}
}
</style><template>
<section class="section-container">
<el-form :inline="true" :model="form" class="form-inline">
<el-form-item label="企业名称">
<el-input v-model="form.name" placeholder="请输入"></el-input>
</el-form-item>
<el-form-item label="地区">
<el-select v-model="form.region" placeholder="请选择">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
<el-button @click="resetForm('form')">重置</el-button>
<span style="cursor: pointer; margin-left: 12px"
>高级搜索<i class="el-icon-arrow-down"></i
></span>
</el-form-item>
</el-form>
<el-table :data="tableData" style="width: 100%" class="lookui-table" height="550">
<el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
<el-table-column prop="name" label="企业名称" align="center">
<!-- vue3 -->
<template #default="{row}">
<a style="color: #5b81fc" @click="goDetail">{{ row.name }}</a>
</template>
<!-- vue2 -->
<!-- <template slot-scope="{ row }">
<a style="color: #5b81fc" @click="goDetail">{{ row.name }}</a>
</template> -->
</el-table-column>
<el-table-column prop="area" label="地区" align="center"></el-table-column>
<el-table-column prop="belongIndustry" label="所属产业" align="center"></el-table-column>
<el-table-column prop="code" label="统一社会信用代码" align="center"></el-table-column>
</el-table>
<div style="display: flex; justify-content: flex-end">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 30, 40]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="400"
background>
</el-pagination>
</div>
</section>
</template>
<script>
export default {
components: {},
data() {
return {
currentPage: 1,
form: {},
tableData: [],
};
},
computed: {},
created() {},
mounted() {
for (let i = 0; i < 10; i++) {
this.tableData.push({
name: '海南新境界软件有限公司',
area: '海口',
belongIndustry: '计算机软件',
code: 12323423434,
income: 365,
cost: 365,
profit: 365,
totalMoney: 365,
saleMoney: 365,
});
}
},
methods: {
goDetail() {
this.$router.push({
name: 'gxlyyxjcDetail'
})
},
onSubmit() {
},
handleCurrentChange() {
},
handleSizeChange() {
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
},
};
</script>
<style scoped lang="scss">
section.section-container {
margin-top: 10px;
padding: 20px;
background-color: #fff;
::v-deep .el-table th {
background-color: #e6ebfb !important;
color: #000;
}
}
</style>
<style>
/* vitepress 中才设置以下样式 */
.vp-doc table {
margin: 0;
}
</style><template>
<div class="toggle-area">
<div @click="currentActive = 1" :class="{ active: currentActive === 1 }">按月</div>
<div @click="currentActive = 2" :class="{ active: currentActive === 2 }">累计</div>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
currentActive: 1,
};
},
props: {},
computed: {},
created() {},
mounted() {},
methods: {},
};
</script>
<style scoped lang="scss">
.toggle-area {
display: flex;
background-color: #f2f2f2;
border-radius: 20px;
cursor: pointer;
> div {
padding: 3px 10px;
font-size: 12px;
&.active {
color: #fff;
background-color: #506eda;
border-radius: 20px;
}
}
}
</style><template>
<div class="search-bar">
<div class="range-area">
<span class="txt">范围:</span>
<div class="btn-item-wrap">
<div
v-for="(item, index) in range"
:class="['btn-item', currentIndex === index ? 'btn-item-actived' : '']"
:key="index"
@click="handleClick(index)">
{{ item.name }}
</div>
</div>
</div>
<div class="search-area">
<el-input
class="lookui-input"
v-model="keywords"
placeholder="请输入公文标题或来文单位"
clearable></el-input>
<el-button class="lookui-btn" type="primary" @click="handleQuery">查询</el-button>
</div>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
currentIndex: 0,
range: [
{
name: '个人',
id: 1,
},
{
name: '部门',
id: 2,
},
{
name: '单位',
id: 3,
},
],
keywords: '',
};
},
props: {},
computed: {},
created() {},
mounted() {},
methods: {
handleClick(index) {
this.currentIndex = index;
},
handleQuery() {},
},
};
</script>
<style scoped lang="scss">
.search-bar {
display: flex;
justify-content: space-between;
.range-area {
display: flex;
align-items: center;
.btn-item-wrap {
display: flex;
align-items: center;
flex-wrap: nowrap;
border: 1px solid #d9d9d9;
border-left: none;
margin-left: 10px;
border-radius: 4px;
.btn-item {
padding: 4px 16px 6px;
cursor: pointer;
border-left: 1px solid #d9d9d9;
&:first-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
&:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
&.btn-item-actived {
background-color: #506eda;
color: #fff;
}
}
}
}
.search-area {
display: flex;
align-items: center;
flex-wrap: nowrap;
.lookui-input {
width: 250px;
::v-deep .el-input__inner {
height: 34px;
}
::v-deep .el-input__icon {
line-height: 34px;
}
}
.lookui-btn {
padding: 9px 18px;
border-radius: 0;
}
}
}
</style><template>
<div class="sl-content" ref="slContent" @scroll="handleScroll">
<div class="menu-container">
<!-- 一级 -->
<div
class="menu-item"
:style="{ '--menu-item-height': item.isExpand ? 'calc(100% - 38px)' : '0' }"
v-for="(item, index) in navMenu"
:key="index">
<div :class="['common-nav', currentIndex === item.index ? 'active-menu' : '']">
<el-icon>
<CaretTop @click="toggleMenuItemExpand(item.index)" v-if="item.isExpand" />
<CaretBottom @click="toggleMenuItemExpand(item.index)" v-else />
</el-icon>
<span @click="handleMenuItemClick(item.index)">{{ item.name }}</span>
</div>
<!-- 二级 -->
<div
class="sub-menu-container"
:style="{ maxHeight: item.isExpand ? subMenuHeightGroup[index] + 'px' : '0' }">
<div
class="sub-menu-item"
v-for="(subItem, subIndex) in item.children"
:style="{ '--sub-menu-item-height': subItem.isExpand ? 'calc(100% - 38px)' : '0' }"
ref="subMenus"
:key="subIndex">
<div
:class="[
'common-nav',
'common-nav-two',
currentIndex === subItem.index ? 'active-menu' : '',
]">
<el-icon>
<CaretTop @click="toggleSubMenuItemExpand(subItem.index)" v-if="subItem.isExpand" />
<CaretBottom @click="toggleSubMenuItemExpand(subItem.index)" v-else />
</el-icon>
<span @click="handleSubMenuItemClick(subItem.index)">{{ subItem.name }}</span>
</div>
<!-- 三级 -->
<div
class="sub-sub-menu-container"
:style="{
maxHeight: subItem.isExpand ? subSubMenuHeightGroup[index]?.[subIndex] + 'px' : '0',
}">
<div
:class="[
'sub-sub-menu-item',
currentIndex === subSubItem.index ? 'active-menu' : '',
]"
v-for="(subSubItem, subSubIndex) in subItem.children"
:key="subSubIndex">
<span @click="handleSubSubMenuItemClick(subSubItem.index)">{{
subSubItem.name
}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
backTopBtnVisible: false,
dialogVisible: true,
currentIndex: '1',
subMenuHeightGroup: [],
subSubMenuHeightGroup: [],
navMenu: [
{
index: '1',
name: '今年中央政府工作报告中提到的任务到的任',
isExpand: true,
children: [
{
index: '1-1',
name: '2023年全面推进乡村振兴战略振兴战略',
isExpand: true,
children: [
{
index: '1-1-1',
name: '观察中国经济的表现中国经济的表现',
},
{
index: '1-1-2',
name: '观察中国经济的表现中国经济的表现',
},
{
index: '1-1-3',
name: '观察中国经济的表现中国经济的表现',
},
{
index: '1-1-4',
name: '观察中国经济的表现中国经济的表现',
},
{
index: '1-1-5',
name: '观察中国经济的表现中国经济的表现',
},
],
},
{
index: '1-2',
name: '2023年全面推进乡村振兴战略振兴战略',
isExpand: true,
children: [
{
index: '1-2-1',
name: '观察中国经济的表现中国经济的表现',
},
{
index: '1-2-2',
name: '观察中国经济的表现中国经济的表现',
},
],
},
],
},
{
index: '2',
name: '今年中央政府工作报告中提到的任务到的任',
isExpand: true,
children: [
{
index: '2-1',
name: '2023年全面推进乡村振兴战略振兴战略',
isExpand: true,
children: [
{
index: '2-1-1',
name: '观察中国经济的表现中国经济的表现',
},
{
index: '2-1-2',
name: '观察中国经济的表现中国经济的表现',
},
],
},
{
index: '2-2',
name: '2023年全面推进乡村振兴战略振兴战略',
isExpand: true,
children: [
{
index: '2-2-1',
name: '观察中国经济的表现中国经济的表现',
},
{
index: '2-2-2',
name: '观察中国经济的表现中国经济的表现',
},
],
},
],
},
],
};
},
props: {},
computed: {},
created() {},
mounted() {
setTimeout(() => {
const smCs = document.querySelectorAll('.sub-menu-container');
const ssmCs = document.querySelectorAll('.sub-sub-menu-container');
ssmCs.forEach(ssmC => {
this.subSubMenuHeightGroup.push(ssmC.scrollHeight);
});
const newSubSubMenuHeightGroup = [];
for (let i = 0; i < this.navMenu.length; i++) {
const children = this.navMenu[i].children;
newSubSubMenuHeightGroup.push(this.subSubMenuHeightGroup.splice(0, children.length));
}
this.subSubMenuHeightGroup = JSON.parse(JSON.stringify(newSubSubMenuHeightGroup));
smCs.forEach(smC => {
this.subMenuHeightGroup.push(smC.scrollHeight);
});
}, 300);
},
methods: {
handleScroll(e) {
this.backTopBtnVisible = e.target.scrollTop > 0;
},
handleBackTop() {
this.$refs.slContent.scroll({
top: 0,
behavior: 'smooth',
});
},
handleSubSubMenuItemClick(index) {
this.currentIndex = index;
},
handleSubMenuItemClick(index) {
this.currentIndex = index;
},
toggleSubMenuItemExpand(index) {
const subMenu = this.navMenu
.find(item => item.index === index.split('-')[0])
.children.find(item => item.index === index);
subMenu.isExpand = !subMenu.isExpand;
},
toggleMenuItemExpand(index) {
const menu = this.navMenu.find(item => item.index === index);
menu.isExpand = !menu.isExpand;
},
handleMenuItemClick(index) {
this.currentIndex = index;
},
},
};
</script>
<style scoped lang="scss">
div.sl-content {
padding-top: 14px;
height: calc(100% - 60px);
overflow: auto;
&::-webkit-scrollbar-track-piece {
background-color: #f0f5ff;
}
&::-webkit-scrollbar {
width: 4px;
height: 40px;
background-color: transparent;
}
&::-webkit-scrollbar-thumb {
border-radius: 5px;
//background-color: hsla(220, 4%, 58%, .3);
background-color: #5479ff;
}
.menu-container {
.menu-item {
position: relative;
&::before {
content: '';
position: absolute;
top: 25px;
left: 8px;
width: 1px;
height: var(--menu-item-height);
background-color: #d3d3ef;
}
.common-nav {
display: flex;
align-items: center;
margin-bottom: 20px;
span {
margin-bottom: 0;
}
}
.common-nav-two {
position: relative;
}
i {
margin-right: 10px;
font-size: 18px;
cursor: pointer;
}
span {
display: block;
margin-bottom: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #000;
cursor: pointer;
}
.sub-menu-item {
position: relative;
margin-left: 20px;
&::before {
content: '';
position: absolute;
top: 25px;
left: 8px;
width: 1px;
height: var(--sub-menu-item-height);
background-color: #d3d3ef;
}
.sub-sub-menu-item {
padding-left: 28px;
}
}
}
.sub-menu-container {
overflow: hidden;
transition: all 0.5s;
.sub-sub-menu-container {
overflow: hidden;
transition: all 0.5s;
}
}
}
}
.single-row-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.active-menu {
i {
color: #5479ff;
}
span {
color: #5479ff !important;
font-weight: bold;
}
}
</style>
<style lang="scss">
.lookui-dialog-no-content-padding {
.el-dialog__body {
padding: 0;
}
}
</style><template>
<div class="main-wrapper">
<header class="header-container">
<div class="prev-year year-block" @click="handleMinusYear">
<el-icon><ArrowLeft /></el-icon>
<span>{{ currentYear - 1 }}</span>
<span>年</span>
</div>
<div class="current-year">
<div class="cy-top">{{ currentYear }}年</div>
<div class="cy-bot">
<div
v-for="(month, index) in 12"
@click="toggleReportMonth(index + 1)"
:class="{
'current-month': index + 1 === currentMonth,
'forbidden-month': hasForbiddenMonthClass(month),
}"
:key="index">
{{ month }}月
</div>
</div>
</div>
<div class="next-year year-block" @click="handleAddYear">
<el-icon><ArrowRight /></el-icon>
<span>{{ currentYear + 1 }}</span>
<span>年</span>
</div>
</header>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
currentMonth: new Date().getMonth() + 1,
currentYear: new Date().getFullYear(),
};
},
props: {},
computed: {},
created() {},
mounted() {},
methods: {
toggleReportMonth(month) {
if (this.hasForbiddenMonthClass(month)) {
return;
}
this.currentMonth = month;
},
handleAddYear() {
this.currentYear++;
},
handleMinusYear() {
this.currentYear--;
},
hasForbiddenMonthClass(month) {
// 创建表示当前日期的 Date 对象
const currentDate = new Date();
// 创建表示目标日期的 Date 对象
const targetDate = new Date(this.currentYear, month - 1); // 月份需要减去1，因为月份是从0开始计数的
// 获取当前日期和目标日期的时间戳
const currentTimestamp = currentDate.getTime();
const targetTimestamp = targetDate.getTime();
// 判断目标日期的时间戳是否大于当前日期的时间戳
if (targetTimestamp > currentTimestamp) {
return true;
} else {
return false;
}
},
},
};
</script>
<style scoped lang="scss">
.main-wrapper {
background-color: #fff;
}
header.header-container {
display: flex;
height: 90px;
div.year-block {
display: flex;
align-items: center;
border: 1px solid #797979;
border-radius: 4px;
line-height: 90px;
padding: 0 8px;
cursor: pointer;
i {
font-size: 14px;
font-weight: bold;
}
span {
&:nth-of-type(1) {
font-size: 14px;
font-weight: bold;
margin: 0 4px;
}
}
}
div.prev-year {
i.el-icon-arrow-left {
}
}
div.current-year {
flex: 1;
margin: 0 14px;
height: 100%;
div.cy-top {
border: 1px solid #797979;
border-bottom: none;
border-radius: 8px 8px 0 0;
height: 50%;
line-height: 45px;
text-align: center;
font-size: 28px;
font-weight: bold;
}
div.cy-bot {
display: flex;
height: 50%;
line-height: 45px;
div {
flex: 1;
text-align: center;
border: 1px solid #797979;
margin-right: -1px;
cursor: pointer;
&:last-child {
margin-right: 0;
}
&.current-month {
background-color: #506eda;
color: #fff;
border: none;
}
&.forbidden-month {
background-color: #cccccc;
color: #fff;
border: none;
cursor: not-allowed;
}
}
}
}
}
</style><template>
<div class="TabScrollable">
<div :class="['prev-btn', {disabled: currentScrollCount === 0}]" @click="handleScrollLeft"><</div>
<div class="scroll-area">
<div class="scroll-item-container">
<div class="scroll-item-wrap" :style="{marginLeft: currentMarginLeft}">
<div @click="handleClick(index)" :class="['scroll-item', {active: currentIndex === index}]" v-for="(item, index) in list" :key="index">
{{ item }}
</div>
</div>
</div>
</div>
<div :class="['next-btn', {disabled: currentScrollCount === maxScrollCount}]" @click="handleScrollRight">></div>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
currentMarginLeft: '0px',
onceScrollCount: 5, // 一次滚动的个数
currentScrollCount: 0, // 当前滚动的次数
currentIndex: 0,
list: [
'2024-01',
'2024-02',
'2024-03',
'2024-04',
'2024-05',
'2024-06',
'2024-07',
'2024-08',
'2024-09',
'2024-10',
'2024-11',
'2024-12',
],
};
},
props: {},
computed: {
maxScrollCount() {
return Math.floor(this.list.length / this.onceScrollCount);
}
},
created() {},
mounted() {},
methods: {
handleScrollLeft() {
if (this.currentScrollCount === 0) {
return;
}
this.currentScrollCount--;
this.currentMarginLeft = `-${this.currentScrollCount * this.onceScrollCount * 100}px`;
},
handleScrollRight() {
if (this.currentScrollCount === this.maxScrollCount) {
return;
}
this.currentScrollCount++;
this.currentMarginLeft = `-${this.currentScrollCount * this.onceScrollCount * 100}px`;
},
handleClick(index) {
this.currentIndex = index;
}
},
};
</script>
<style scoped lang="scss">
$border-style: 1px solid #000;
.TabScrollable {
display: flex;
.prev-btn, .next-btn {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #ccc;
color: #000;
padding: 10px 20px;
cursor: pointer;
font-size: 20px;
&.disabled {
color: #ccc;
}
}
.scroll-area {
display: flex;
width: 921px;
overflow: auto;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
padding: 10px;
overflow: hidden;
&::-webkit-scrollbar {
display: none;
}
.scroll-item-container {
overflow: hidden;
}
.scroll-item-wrap {
display: flex;
transition: all .5s;
}
.scroll-item {
flex-shrink: 0;
width: 100px;
border: 1px solid #000;
border-right: none;
line-height: 45px;
white-space: nowrap;
text-align: center;
cursor: pointer;
&:last-child {
border-right: 1px solid #000;
}
&.active {
background-color: #506eda;
color: #fff;;
}
}
}
}
</style>