angelo
/
web-base-admin
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'feat/index-dashboard' of gitee.com:cabbage_qd/web-base-admin into lx-dev

This commit is contained in:
woody 2025-05-12 16:13:15 +08:00
parent 187c7ab147 9c13a94a7e
commit 5f258c1420
8 changed files with 1059 additions and 640 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/api/dashboard.js Normal file
View File

@ -0,0 +1,26 @@
import request from '@/utils/request'
// 会员汇总数据
export function getMemberSummary() {
return request({
url: '/system/manage/board/member-summary',
method: 'get'
})
}
// 日业绩数据
export function getDailyPerformance(params) {
return request({
url: '/system/manage/board/day-achieve',
method: 'get',
params
})
}
// 月业绩数据
export function getMonthlyPerformance() {
return request({
url: '/system/manage/board/month-achieve',
method: 'get'
})
}

7
src/router/index.js
View File

@ -58,6 +58,13 @@ export const constantRoutes = [
component: () => import('@/views/dashboard/index'),
meta: { title: '首页', icon: 'firstPage', icon1: 'firstPageSel' }
},
{
path: 'summaryDashboard',
name: 'SummaryDashboard',
component: () => import('@/views/dashboard/dashboard'),
meta: { title: '汇总', icon: 'dashboard' },
hidden: true
},
{
path: 'hasIndex',
name: 'HasIndex',

472
src/views/dashboard/dashboard.vue Normal file
View File

@ -0,0 +1,472 @@
<template>
<div class="summary-dashboard">
<topBar
v-if="topList.length > 0 && userInfo.userType != 9"
:top-list="topList"
:moren="defaultTabItem"
:wait-approval-num="waitApprovalNum"
:receive-approval-num="receiveApprovalNum"
/>
<div class="dashboard-cards">
<!-- 会员数据卡片 -->
<div class="dashboard-card-group">
<div class="dashboard-card-title">会员数据</div>
<div class="dashboard-card-list">
<div class="dashboard-card">
<div class="dashboard-card-label">会员总数</div>
<div class="dashboard-card-value">{{ memberSummary.memberTotal || 0 }}</div>
</div>
<div class="dashboard-card">
<div class="dashboard-card-label">今日新增会员</div>
<div class="dashboard-card-value">{{ memberSummary.memberToday || 0 }}</div>
</div>
<div class="dashboard-card">
<div class="dashboard-card-label">昨日新增会员</div>
<div class="dashboard-card-value">{{ memberSummary.memberYesterday || 0 }}</div>
</div>
<div class="dashboard-card">
<div class="dashboard-card-label">当月新增会员</div>
<div class="dashboard-card-value">{{ memberSummary.memberMonth || 0 }}</div>
</div>
</div>
</div>
<!-- 业绩数据卡片 -->
<div class="dashboard-card-group dashboard-card-group--today">
<div class="dashboard-card-title dashboard-card-title--today">今日业绩</div>
<div class="dashboard-card-list dashboard-card-list--performance">
<div class="dashboard-card dashboard-card--performance dashboard-card--today">
<div class="dashboard-card-label">首购业绩</div>
<div class="dashboard-card-value dashboard-card-value--today">{{ dailyPerformance.today && dailyPerformance.today.firstAchieve || '0.00' }}</div>
</div>
<div class="dashboard-card dashboard-card--performance dashboard-card--today">
<div class="dashboard-card-label">首购金额</div>
<div class="dashboard-card-value dashboard-card-value--today">{{ dailyPerformance.today && dailyPerformance.today.firstAmount || '0.00' }}</div>
</div>
<div class="dashboard-card dashboard-card--performance dashboard-card--today">
<div class="dashboard-card-label">复购业绩</div>
<div class="dashboard-card-value dashboard-card-value--today">{{ dailyPerformance.today && dailyPerformance.today.repAchieve || '0.00' }}</div>
</div>
<div class="dashboard-card dashboard-card--performance dashboard-card--today">
<div class="dashboard-card-label">复购金额</div>
<div class="dashboard-card-value dashboard-card-value--today">{{ dailyPerformance.today && dailyPerformance.today.repAmount || '0.00' }}</div>
</div>
<div class="dashboard-total-row">
<div class="dashboard-card dashboard-card--performance dashboard-card--today dashboard-card--total-amount">
<div class="dashboard-card-label">总金额</div>
<div class="dashboard-card-value dashboard-card-value--today">{{ getSum(dailyPerformance.today && dailyPerformance.today.firstAmount, dailyPerformance.today && dailyPerformance.today.repAmount) }}</div>
</div>
<div class="dashboard-card dashboard-card--performance dashboard-card--today dashboard-card--total-achievement">
<div class="dashboard-card-label">总业绩</div>
<div class="dashboard-card-value dashboard-card-value--today">{{ getSum(dailyPerformance.today && dailyPerformance.today.firstAchieve, dailyPerformance.today && dailyPerformance.today.repAchieve) }}</div>
</div>
</div>
</div>
</div>
<div class="dashboard-card-group dashboard-card-group--yesterday">
<div class="dashboard-card-title dashboard-card-title--yesterday">昨日业绩</div>
<div class="dashboard-card-list dashboard-card-list--performance">
<div class="dashboard-card dashboard-card--performance dashboard-card--yesterday">
<div class="dashboard-card-label">首购业绩</div>
<div class="dashboard-card-value">{{ dailyPerformance.yesterday && dailyPerformance.yesterday.firstAchieve || '0.00' }}</div>
</div>
<div class="dashboard-card dashboard-card--performance dashboard-card--yesterday">
<div class="dashboard-card-label">首购金额</div>
<div class="dashboard-card-value">{{ dailyPerformance.yesterday && dailyPerformance.yesterday.firstAmount || '0.00' }}</div>
</div>
<div class="dashboard-card dashboard-card--performance dashboard-card--yesterday">
<div class="dashboard-card-label">复购业绩</div>
<div class="dashboard-card-value">{{ dailyPerformance.yesterday && dailyPerformance.yesterday.repAchieve || '0.00' }}</div>
</div>
<div class="dashboard-card dashboard-card--performance dashboard-card--yesterday">
<div class="dashboard-card-label">复购金额</div>
<div class="dashboard-card-value">{{ dailyPerformance.yesterday && dailyPerformance.yesterday.repAmount || '0.00' }}</div>
</div>
<div class="dashboard-total-row">
<div class="dashboard-card dashboard-card--performance dashboard-card--yesterday dashboard-card--total-amount">
<div class="dashboard-card-label">总金额</div>
<div class="dashboard-card-value">{{ getSum(dailyPerformance.yesterday && dailyPerformance.yesterday.firstAmount, dailyPerformance.yesterday && dailyPerformance.yesterday.repAmount) }}</div>
</div>
<div class="dashboard-card dashboard-card--performance dashboard-card--yesterday dashboard-card--total-achievement">
<div class="dashboard-card-label">总业绩</div>
<div class="dashboard-card-value">{{ getSum(dailyPerformance.yesterday && dailyPerformance.yesterday.firstAchieve, dailyPerformance.yesterday && dailyPerformance.yesterday.repAchieve) }}</div>
</div>
</div>
</div>
</div>
<div class="dashboard-card-group dashboard-card-group--month">
<div class="dashboard-card-title dashboard-card-title--month">本月业绩</div>
<div class="dashboard-card-list dashboard-card-list--performance">
<div class="dashboard-card dashboard-card--performance dashboard-card--month">
<div class="dashboard-card-label">首购业绩</div>
<div class="dashboard-card-value">{{ monthlyPerformance.firstAchieve || '0.00' }}</div>
</div>
<div class="dashboard-card dashboard-card--performance dashboard-card--month">
<div class="dashboard-card-label">首购金额</div>
<div class="dashboard-card-value">{{ monthlyPerformance.firstAmount || '0.00' }}</div>
</div>
<div class="dashboard-card dashboard-card--performance dashboard-card--month">
<div class="dashboard-card-label">复购业绩</div>
<div class="dashboard-card-value">{{ monthlyPerformance.repAchieve || '0.00' }}</div>
</div>
<div class="dashboard-card dashboard-card--performance dashboard-card--month">
<div class="dashboard-card-label">复购金额</div>
<div class="dashboard-card-value">{{ monthlyPerformance.repAmount || '0.00' }}</div>
</div>
<div class="dashboard-total-row">
<div class="dashboard-card dashboard-card--performance dashboard-card--month dashboard-card--total-amount">
<div class="dashboard-card-label">总金额</div>
<div class="dashboard-card-value">{{ getSum(monthlyPerformance.firstAmount, monthlyPerformance.repAmount) }}</div>
</div>
<div class="dashboard-card dashboard-card--performance dashboard-card--month dashboard-card--total-achievement">
<div class="dashboard-card-label">总业绩</div>
<div class="dashboard-card-value">{{ getSum(monthlyPerformance.firstAchieve, monthlyPerformance.repAchieve) }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import topBarMixin from './mixins/top-bar-mixin'
import topBar from '@/components/topBar'
import { getMemberSummary, getDailyPerformance, getMonthlyPerformance } from '@/api/dashboard'
export default {
name: 'SummaryDashboard',
components: {
topBar
},
mixins: [topBarMixin],
data() {
return {
memberSummary: {},
dailyPerformance: {},
monthlyPerformance: {},
defaultTabItem: 'summaryDashboard',
userInfo: {}
}
},
mounted() {
this.getMemberSummary()
this.getDailyPerformance()
this.getMonthlyPerformance()
this.getApprovalStatus()
this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
},
methods: {
getMemberSummary() {
// {
// "msg": "操作成功",
// "code": 200,
// "data": {
// "memberTotal": 145,
// "memberToday": 0,
// "memberYesterday": 0,
// "memberMonth": 18
// }
// }
getMemberSummary().then(res => {
this.memberSummary = res.data
})
},
getDailyPerformance() {
// {
// "msg": "操作成功",
// "code": 200,
// "data": {
// "today": {
// "firstAchieve": "0.00",
// "firstAmount": "0.00",
// "repAchieve": "0.00",
// "repAmount": "0.00"
// },
// "yesterday": {
// "firstAchieve": "0.00",
// "firstAmount": "0.00",
// "repAchieve": "1.29",
// "repAmount": "5.40"
// }
// }
// }
getDailyPerformance().then(res => {
this.dailyPerformance = res.data
})
},
// {
// "msg": "操作成功",
// "code": 200,
// "data": {
// "firstAchieve": "55.63",
// "firstAmount": "199.80",
// "repAchieve": "1.83",
// "repAmount": "10.61"
// }
// }
getMonthlyPerformance() {
getMonthlyPerformance().then(res => {
this.monthlyPerformance = res.data
})
},
getSum(a, b) {
// 字符串转数字后相加，保留两位小数
const numA = parseFloat(a) || 0
const numB = parseFloat(b) || 0
return (numA + numB).toFixed(2)
}
}
}
</script>
<style lang="scss" scoped>
.summary-dashboard {
padding: 20px;
background: #f9f9f9;
font-size: 14px;
}
.dashboard-cards {
margin-top: 16px;
display: flex;
flex-direction: column;
gap: 24px;
}
.dashboard-card-group {
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 12px 0 rgba(0,0,0,0.06);
padding: 24px 32px 16px 32px;
}
/* 基础分组标题样式 */
.dashboard-card-title {
font-size: 18px;
font-weight: 600;
margin-bottom: 20px; /* 统一标题下边距 */
color: #333333; /* 默认标题颜色 */
}
/* 统一业绩分组标题样式 - 继承基础并扩展 */
.dashboard-card-group--today .dashboard-card-title,
.dashboard-card-group--yesterday .dashboard-card-title,
.dashboard-card-group--month .dashboard-card-title {
font-size: 18px;
font-weight: 600;
margin-bottom: 20px;
padding-left: 12px;
position: relative;
}
/* 业绩分组标题左侧装饰线 */
.dashboard-card-group--today .dashboard-card-title::before,
.dashboard-card-group--yesterday .dashboard-card-title::before,
.dashboard-card-group--month .dashboard-card-title::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 18px; /* 调整装饰线高度 */
border-radius: 2px;
}
.dashboard-card-group--today .dashboard-card-title {
color: #357ae8;
/* font-size, font-weight, margin-bottom will be inherited from .dashboard-card-title */
}
.dashboard-card-group--today .dashboard-card-title::before {
background-color: #357ae8;
}
.dashboard-card-group--yesterday .dashboard-card-title {
color: #f59e0b; /* 昨日标题颜色 - 暖黄色 */
/* font-size, font-weight, margin-bottom will be inherited */
}
.dashboard-card-group--yesterday .dashboard-card-title::before {
background-color: #f59e0b;
}
.dashboard-card-group--month .dashboard-card-title {
color: #10b981; /* 本月标题颜色 - 绿色 */
/* font-size, font-weight, margin-bottom will be inherited */
}
.dashboard-card-group--month .dashboard-card-title::before {
background-color: #10b981;
transition: all 0.3s ease;
}
.dashboard-card-list {
display: flex;
flex-wrap: wrap;
gap: 24px;
}
.dashboard-card {
flex: 1 1 180px;
min-width: 180px;
background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
border-radius: 10px;
box-shadow: 0 1px 6px 0 rgba(253,160,133,0.12);
padding: 18px 16px;
display: flex;
flex-direction: column;
align-items: flex-start;
transition: all 0.3s ease;
}
.dashboard-card:hover {
transform: translateY(-3px);
box-shadow: 0 4px 12px 0 rgba(253,160,133,0.2);
/* 会员卡片样式不变 */
}
.dashboard-card-label {
font-size: 14px;
color: #666;
margin-bottom: 8px;
}
.dashboard-card-value {
font-size: 28px;
font-weight: bold;
color: #222;
}
/* 业绩卡片专属基础样式 */
.dashboard-card--performance {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 20px;
flex: 1 1 200px;
min-width: 180px;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 2px 4px rgba(0,0,0,0.04); /* 更精致的阴影 */
transition: all 0.3s ease-in-out;
position: relative; /* 用于内部绝对定位元素（如有） */
}
.dashboard-card--performance:hover {
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(0,0,0,0.07);
}
.dashboard-card--performance .dashboard-card-label {
font-size: 14px; /* 标签字号略微增大以保持清晰 */
color: #4b5563; /* 标签颜色调整，更柔和 */
margin-bottom: 12px;
}
.dashboard-card--performance .dashboard-card-value {
font-size: 24px; /* 基础数值字号 */
font-weight: 700; /* 加粗数值 */
color: #111827; /* 深色数值，对比度高 */
display: flex;
align-items: baseline;
justify-content: flex-start;
line-height: 1.2; /* 改善行高 */
}
.dashboard-card--performance .dashboard-card-value::after {
/* content: '¥'; */ /* 去掉人民币符号 */
font-size: 13px; /* 货币符号大小 */
font-weight: 500;
color: #374151; /* 货币符号颜色 */
margin-left: 4px;
}
/* 今日业绩卡片特殊样式 */
.dashboard-card--today.dashboard-card--performance {
background: linear-gradient(135deg, #a7d7f9 0%, #7fb2eb 100%); /* 更明显的蓝天到海洋蓝渐变 */
border-left: 5px solid #357ae8; /* 标题蓝色 */
border-color: transparent; /* 其他边框透明，突出左边框 */
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 0; /* 配合左边框 */
border-bottom-left-radius: 0; /* 配合左边框 */
}
.dashboard-card--today.dashboard-card--performance .dashboard-card-label {
color: #2c5282; /* 深蓝标签，配合主色 */
font-weight: 500;
}
.dashboard-card--today.dashboard-card--performance .dashboard-card-value {
color: #1e3a8a; /* 更深的蓝，突出数值 */
font-size: 28px; /* 今日数值更大 */
}
/* 昨日业绩卡片 */
.dashboard-card--yesterday.dashboard-card--performance {
background: linear-gradient(135deg, #fde68a 0%, #f5c767 100%); /* 更明显的阳光黄到橘黄渐变 */
border-left: 5px solid #f59e0b; /* 标题黄色 */
border-color: transparent;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.dashboard-card--yesterday.dashboard-card--performance .dashboard-card-label {
color: #b45309; /* 深黄/橙色标签 */
}
.dashboard-card--yesterday.dashboard-card--performance .dashboard-card-value {
color: #78350f; /* 深橙/棕色数值 */
}
/* 本月业绩卡片 */
.dashboard-card--month.dashboard-card--performance {
background: linear-gradient(135deg, #a7f3d0 0%, #79d7b5 100%); /* 更明显的薄荷绿到青绿渐变 */
border-left: 5px solid #10b981; /* 标题绿色 */
border-color: transparent;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.dashboard-card--month.dashboard-card--performance .dashboard-card-label {
color: #047857; /* 深绿色标签 */
}
.dashboard-card--month.dashboard-card--performance .dashboard-card-value {
color: #065f46; /* 更深的绿色数值 */
}
/* 总计行特定样式 */
.dashboard-total-row {
display: flex;
gap: 24px; /* 与 .dashboard-card-list 的 gap 保持一致或按需调整 */
width: 100%; /* 占据整行宽度 */
}
.dashboard-total-row .dashboard-card--performance {
flex: 1 1 0; /* 让两个卡片均分空间 */
/* 覆盖一些基础卡片样式，如果需要更紧凑 */
min-width: 0; /* 允许卡片收缩 */
}
/* 特定对齐调整：确保总金额与金额对齐，总业绩与业绩对齐 */
/* 由于业绩卡片内部已经是 flex-start，主要依赖卡片宽度和内部padding */
/* 如果需要更精确的对齐，可能需要对 .dashboard-card-value 和 .dashboard-card-label 进行微调 */
.dashboard-card--total-amount .dashboard-card-value,
.dashboard-card--total-achievement .dashboard-card-value {
/* 如果希望文本部分左对齐以模拟效果，可以尝试 */
/* justify-content: flex-start; */
/* padding-left: 你可能需要根据实际视觉效果计算一个值 */
}
@media (max-width: 900px) {
.dashboard-card-list {
gap: 16px;
}
.dashboard-card, .dashboard-card--performance {
min-width: unset;
width: 100%;
}
.dashboard-card--performance .dashboard-card-value {
font-size: 22px;
}
.dashboard-card--today.dashboard-card--performance .dashboard-card-value {
font-size: 26px;
}
}
</style>

211
src/views/dashboard/hasIndex.vue
View File

@ -14,11 +14,11 @@
<div class="page">
<topBar
v-if="topList.length > 0"
:topList="topList"
:moren="moren"
:waitApprovalNum="waitApprovalNum"
:receiveApprovalNum="receiveApprovalNum"
></topBar>
:top-list="topList"
:moren="defaultTabItem"
:wait-approval-num="waitApprovalNum"
:receive-approval-num="receiveApprovalNum"
/>
<div class="main">
<div class="form_all">
<el-form ref="select" :model="select" label-width="auto">
@ -35,45 +35,45 @@
</el-form-item> -->
<el-form-item label="签呈编号">
<el-input
clearable
v-model="select.approvalCode"
clearable
:placeholder="'请输入'"
></el-input>
/>
</el-form-item>
</el-col>
<!-- 一层 -->
<el-col :span="4">
<el-form-item :label="'业务类型'">
<el-select
v-model="select.approvalBusiness"
clearable
filterable
v-model="select.approvalBusiness"
>
<el-option
v-for="item in ywsqList"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="业务类型内容">
<el-input
clearable
v-model="select.approvalBusinessVal"
clearable
:placeholder="'请输入'"
></el-input>
/>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="情况说明">
<el-input
clearable
v-model="select.remark"
clearable
:placeholder="'请输入'"
></el-input>
/>
</el-form-item>
</el-col>
<!-- <el-col :span="4">
@ -89,13 +89,13 @@
</el-col> -->
<el-col :span="4">
<el-form-item :label="'签呈状态'">
<el-select clearable v-model="select.approveStatus">
<el-select v-model="select.approveStatus" clearable>
<el-option
v-for="item in approveStatusList"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
/>
</el-select>
</el-form-item>
</el-col>
@ -108,8 +108,7 @@
:range-separator="'至'"
:start-placeholder="'开始日期'"
:end-placeholder="'结束日期'"
>
</el-date-picker>
/>
</el-form-item>
</el-col>
<el-col :span="8">
@ -121,14 +120,12 @@
:range-separator="'至'"
:start-placeholder="'开始日期'"
:end-placeholder="'结束日期'"
>
</el-date-picker>
/>
</el-form-item>
</el-col>
<el-col :span="4">
<el-button type="primary" @click="getDataList1">
{{ '搜索' }}</el-button
>
{{ '搜索' }}</el-button>
<el-button @click="reset"> {{ '重置' }}</el-button>
</el-col>
</el-row>
@ -136,27 +133,24 @@
</div>
<div class="main_a">
<div class="mainbtn">
<el-button size="small" @click="handleExport" class="exportBtn">
{{ '导出' }}</el-button
>
<el-button size="small" class="exportBtn" @click="handleExport">
{{ '导出' }}</el-button>
</div>
</div>
<el-table
v-loading="loading"
:data="tableData1"
style="width: 100%"
height="100%"
v-loading="loading"
:header-cell-style="{ background: '#EEEEEE' }"
:row-class-name="tableRowClassName"
>
<el-table-column align="center" prop="approvalCode" label="签呈编号">
</el-table-column>
<el-table-column align="center" prop="approvalCode" label="签呈编号" />
<el-table-column
align="center"
prop="approvalBusinessVal"
:label="'业务类型'"
>
</el-table-column>
/>
<el-table-column
align="center"
prop="parentClassifyName"
@ -179,19 +173,19 @@
<template slot-scope="scope">
<div class="bz_a">
<div
class="bz_i"
v-for="(item, index) in scope.row.detailList"
:key="index"
class="bz_i"
>
<div :class="item.useTime == undefined ? 'qiu' : 'quan'"></div>
<div :class="item.useTime == undefined ? 'qiu' : 'quan'" />
<div
v-if="index != scope.row.detailList.length - 1"
:class="
scope.row.detailList[index + 1].useTime == undefined
? 'gun1'
: 'gun'
"
v-if="index != scope.row.detailList.length - 1"
></div>
/>
<div class="time">{{ item.useTime }}</div>
<div class="zhi">
<div>{{ item.nickName }}</div>
@ -210,7 +204,7 @@
<div
:class="
scope.row.receiveList.length > 0 &&
scope.row.receiveList[0].receiveStatus == 1
scope.row.receiveList[0].receiveStatus == 1
? 'act'
: 'act2'
"
@ -223,8 +217,7 @@
align="center"
prop="useTime"
:label="'总耗时'"
>
</el-table-column>
/>
<!-- <el-table-column align="center"
prop="approvalOperationVal"
:label="'审核状态'">
@ -233,8 +226,7 @@
align="center"
prop="approveStatusVal"
:label="'签呈状态'"
>
</el-table-column>
/>
<!-- <el-table-column align="center"
prop="remark"
label="情况说明">
@ -243,10 +235,8 @@
align="center"
prop="creationTime"
:label="'创建日期'"
>
</el-table-column>
<el-table-column align="center" prop="endTime" :label="'终审日期'">
</el-table-column>
/>
<el-table-column align="center" prop="endTime" :label="'终审日期'" />
<el-table-column
align="center"
@ -256,9 +246,9 @@
>
<template slot-scope="scope">
<el-button
@click="toFixed(scope.row.approvalCode, 1)"
type="text"
size="small"
@click="toFixed(scope.row.approvalCode, 1)"
>
{{ '查看签呈' }}
</el-button>
@ -276,159 +266,126 @@
</template>
<script>
import { mapGetters } from "vuex";
import * as api from "@/api/manage.js";
import topBar from "@/components/topBar";
import { mapGetters } from 'vuex'
import * as api from '@/api/manage.js'
import topBar from '@/components/topBar'
import topBarMixin from './mixins/top-bar-mixin'
export default {
name: "Dashboard",
name: 'Dashboard',
components: {
topBar,
},
computed: {
...mapGetters(["name"]),
topBar
},
mixins: [topBarMixin],
data() {
return {
loading: false,
queryParams: {
pageNum: 1,
pageSize: 50,
pageSize: 50
},
total: 0,
tableData: [],
tableData1: [],
tabActive: 0,
select: {},
moren: "hasIndex",
topList: [
{
name: "代办",
path: "dashboard",
},
{
name: "已办",
path: "hasIndex",
},
{
name: "抄送查阅/操作",
path: "receiveIndex",
},
// {
// name: '商品审核',
// path: 'goodsCheck',
// },
// {
// name: '产品审核',
// path: 'productCheck',
// },
],
ywsqList: [],
checkList: [],
sourceList: [],
approveStatusList: [],
waitApprovalNum: "",
receiveApprovalNum: "",
};
defaultTabItem: 'hasIndex'
}
},
computed: {
...mapGetters(['name'])
},
mounted() {
// 获取列表
this.getDataList1();
this.getApprove();
this.getSignType();
this.getSource();
this.getApprovalStatus();
this.getDataList1()
this.getApprove()
this.getSignType()
this.getSource()
this.getApprovalStatus()
},
methods: {
reset() {
this.select = {};
this.getDataList1();
this.select = {}
this.getDataList1()
},
getApprove() {
api.approvalBusiness().then((res) => {
this.ywsqList = res.data;
});
this.ywsqList = res.data
})
},
getSource() {
api.signSource().then((res) => {
this.sourceList = res.data;
});
this.sourceList = res.data
})
},
getSignType() {
api.approvalOperation().then((res) => {
this.checkList = res.data;
});
},
getApprovalStatus() {
api.approvalStatus().then((res) => {
this.approveStatusList = res.data;
});
api.waitApprovalNum().then((res) => {
this.waitApprovalNum = res.data;
});
api.receiveApprovalNum().then((res) => {
this.receiveApprovalNum = res.data;
});
this.checkList = res.data
})
},
// 切换tab
handleLink(id) {
this.tabActive = id;
this.tabActive = id
if (id == 0) {
// 获取列表
this.getDataList();
this.getDataList()
} else {
// 获取列表
this.getDataList1();
this.getDataList1()
}
},
getDataList() {
api.waitApproval().then((res) => {
this.tableData = res.data;
});
this.tableData = res.data
})
},
getDataList1() {
this.loading = true;
this.loading = true
api
.completeApproval(Object.assign({}, this.queryParams, this.select))
.then((res) => {
this.loading = false;
this.tableData1 = res.rows;
this.total = res.total;
});
this.loading = false
this.tableData1 = res.rows
this.total = res.total
})
},
toFixed(id, index) {
this.$router.push({
path: "manageDetails",
path: 'manageDetails',
query: {
id: id,
index: index,
},
});
index: index
}
})
},
/** 导出按钮操作 */
handleExport() {
this.$confirm('是否确认导出所有数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: "warning",
type: 'warning'
}).then((_) => {
this.download(
"/system/manage/index/export-approval",
'/system/manage/index/export-approval',
Object.assign({}, this.queryParams, this.select),
`已办${new Date().getTime()}.xlsx`
);
});
)
})
},
tableRowClassName({ row, rowIndex }) {
if (rowIndex % 2 == 1) {
return "warning-row";
return 'warning-row'
} else if (rowIndex % 2 == 0) {
return "success-row";
return 'success-row'
}
return "";
},
},
};
return ''
}
}
}
</script>
<style lang="scss" scoped>

221
src/views/dashboard/index.vue
View File

@ -8,12 +8,12 @@
<div class="page">
<topBar
v-if="topList.length > 0 && userInfo.userType != 9"
:topList="topList"
:moren="moren"
:waitApprovalNum="waitApprovalNum"
:receiveApprovalNum="receiveApprovalNum"
></topBar>
<div class="main" v-if="userInfo.userType != 9">
:top-list="topList"
:moren="defaultTabItem"
:wait-approval-num="waitApprovalNum"
:receive-approval-num="receiveApprovalNum"
/>
<div v-if="userInfo.userType != 9" class="main">
<div>
<div class="form_all">
<el-form ref="select" :model="select" label-width="auto">
@ -21,45 +21,45 @@
<el-col :span="6">
<el-form-item label="签呈编号">
<el-input
clearable
v-model="select.approvalCode"
clearable
:placeholder="'请输入'"
></el-input>
/>
</el-form-item>
</el-col>
<!-- 一层 -->
<el-col :span="6">
<el-form-item :label="'业务类型'">
<el-select
v-model="select.approvalBusiness"
clearable
filterable
v-model="select.approvalBusiness"
>
<el-option
v-for="item in ywsqList"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="业务类型内容">
<el-input
clearable
v-model="select.approvalBusinessVal"
clearable
:placeholder="'请输入'"
></el-input>
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="情况说明">
<el-input
clearable
v-model="select.remark"
clearable
:placeholder="'请输入'"
></el-input>
/>
</el-form-item>
</el-col>
@ -83,8 +83,7 @@
:range-separator="'至'"
:start-placeholder="'开始日期'"
:end-placeholder="'结束日期'"
>
</el-date-picker>
/>
</el-form-item>
</el-col>
<!-- <el-col :span="8">
@ -100,17 +99,16 @@
</el-col> -->
<el-col :span="4">
<el-button type="primary" @click="getDataList">
{{ '搜索' }}</el-button
>
{{ '搜索' }}</el-button>
<el-button @click="reset"> {{ '重置' }}</el-button>
</el-col>
</el-row>
</el-form>
</div>
<el-table
v-loading="loading"
:data="tableData"
height="700px"
v-loading="loading"
:element-loading-text="'正在加载'"
:header-cell-style="{ background: '#EEEEEE' }"
:row-class-name="tableRowClassName"
@ -119,17 +117,14 @@
align="center"
prop="creation"
:label="'发起人'"
>
</el-table-column>
<el-table-column align="center" prop="approvalCode" label="签呈编号">
</el-table-column>
/>
<el-table-column align="center" prop="approvalCode" label="签呈编号" />
<el-table-column
align="center"
prop="approvalBusinessVal"
:label="'业务类型'"
>
</el-table-column>
/>
<el-table-column
align="center"
prop="parentClassifyName"
@ -139,21 +134,21 @@
<template slot-scope="scope">
<div class="bz_a">
<div
class="bz_i"
v-for="(item, index) in scope.row.detailList"
:key="index"
class="bz_i"
>
<div
:class="item.useTime == undefined ? 'qiu' : 'quan'"
></div>
/>
<div
v-if="index != scope.row.detailList.length - 1"
:class="
scope.row.detailList[index + 1].useTime == undefined
? 'gun1'
: 'gun'
"
v-if="index != scope.row.detailList.length - 1"
></div>
/>
<div class="time">{{ item.useTime }}</div>
<div class="zhi">
<div>{{ item.nickName }}</div>
@ -172,9 +167,9 @@
<template slot-scope="scope">
<el-button
v-show="scope.row.approvalFlag == 0"
@click="toFixed(scope.row.approvalCode, 0)"
type="text"
size="small"
@click="toFixed(scope.row.approvalCode, 0)"
>
{{ '审核' }}
</el-button>
@ -185,8 +180,7 @@
prop="creationTime"
width="100"
:label="'创建日期'"
>
</el-table-column>
/>
<el-table-column
align="center"
prop="time"
@ -196,9 +190,9 @@
>
<template slot-scope="scope">
<el-button
@click="toFixed(scope.row.approvalCode, 0)"
type="text"
size="small"
@click="toFixed(scope.row.approvalCode, 0)"
>
{{ '查看签呈' }}
</el-button>
@ -229,7 +223,7 @@
<div class="title">
{{ noticeObj.title }}
</div>
<div v-html="noticeObj.content" class="img-auto"></div>
<div class="img-auto" v-html="noticeObj.content" />
<!-- <span slot="footer"-->
<!-- class="dialog-footer">-->
<!-- <el-button type="primary"-->
@ -240,28 +234,29 @@
</template>
<script>
import { mapGetters } from "vuex";
import * as api from "@/api/manage.js";
import topBar from "@/components/topBar";
import * as not from "@/api/notice.js";
import { mapGetters } from 'vuex'
import * as api from '@/api/manage.js'
import topBar from '@/components/topBar'
import * as not from '@/api/notice.js'
import topBarMixin from './mixins/top-bar-mixin'
export default {
name: "Dashboard",
name: 'Dashboard',
components: {
topBar,
topBar
},
mixins: [topBarMixin],
computed: {
...mapGetters(["name", "user"]),
...mapGetters(['name', 'user'])
},
data() {
return {
queryParams: {
pageNum: 1,
pageSize: 50,
pageSize: 50
},
select: {
websiteType: 2,
functionType: 1,
functionType: 1
},
approveStatusList: [],
@ -271,149 +266,113 @@ export default {
tabActive: 0,
loading: false,
select: {},
moren: "dashboard",
topList: [
{
name: "代办",
path: "dashboard",
},
{
name: "已办",
path: "hasIndex",
},
{
name: "抄送查阅/操作",
path: "receiveIndex",
},
// {
// name: '商品审核',
// path: 'goodsCheck',
// },
// {
// name: '产品审核',
// path: 'productCheck',
// },
],
ywsqList: [],
checkList: [],
tableList: [],
userInfo: "",
userInfo: '',
isNotice: false,
waitApprovalNum: "",
receiveApprovalNum: "",
noticeObj: [
{
title: "",
content: "",
},
],
};
title: '',
content: ''
}
]
}
},
mounted() {
// 获取列表
this.getDataList();
this.getApprove();
this.getSignType();
this.getNoticePop();
this.getApprovalStatus();
this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
this.getDataList()
this.getApprove()
this.getSignType()
this.getNoticePop()
this.getApprovalStatus()
this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
},
methods: {
reset() {
this.select = {};
this.getDataList();
this.select = {}
this.getDataList()
},
handleClose() {
this.isNotice = false;
this.isNotice = false
},
getNoticePop() {
// this.getUser
let userInfo = JSON.parse(localStorage.getItem("userInfo"));
const userInfo = JSON.parse(localStorage.getItem('userInfo'))
api
.noticeShow({
roles: userInfo.roleIds,
roles: userInfo.roleIds
})
.then((res) => {
if (res.data.length > 0) {
this.noticeObj = res.data[0];
this.isNotice = true;
this.noticeObj = res.data[0]
this.isNotice = true
}
});
},
getApprovalStatus() {
api.approvalStatus().then((res) => {
this.approveStatusList = res.data;
});
api.waitApprovalNum().then((res) => {
this.waitApprovalNum = res.data;
});
api.receiveApprovalNum().then((res) => {
this.receiveApprovalNum = res.data;
});
})
},
goNotice(item) {
this.$router.push({
path: "/announcement/noticeList/details",
path: '/announcement/noticeList/details',
query: {
pkId: item.pkId,
type: 1,
type: 1
// functionType:this.select.functionType
},
});
}
})
},
openNotice() {
this.$router.push({
path: "/announcement/noticeList/details",
path: '/announcement/noticeList/details',
query: {
isAdmin: true,
},
});
isAdmin: true
}
})
},
getApprove() {
api.approvalBusiness().then((res) => {
this.ywsqList = res.data;
});
this.ywsqList = res.data
})
},
getSignType() {
api.approvalOperation().then((res) => {
this.checkList = res.data;
});
this.checkList = res.data
})
},
getDataList() {
this.loading = true;
this.loading = true
api.waitApproval(this.select).then((res) => {
this.tableData = res.data;
this.loading = false;
});
this.tableData = res.data
this.loading = false
})
not.indexNoticeAdminList(this.select).then((res) => {
this.tableList = res.rows;
this.tableList = res.rows
this.tableList.forEach((item) => {
if (item.title.length > 20) {
item.title = item.title.substring(0, 20) + "...";
item.title = item.title.substring(0, 20) + '...'
}
item.creationTime = item.creationTime.substring(0, 10);
});
});
item.creationTime = item.creationTime.substring(0, 10)
})
})
},
toFixed(id, index) {
this.$router.push({
path: "manageDetails",
path: 'manageDetails',
query: {
id: id,
index: index,
},
});
index: index
}
})
},
tableRowClassName({ row, rowIndex }) {
if (rowIndex % 2 == 1) {
return "warning-row";
return 'warning-row'
} else if (rowIndex % 2 == 0) {
return "success-row";
return 'success-row'
}
return "";
},
},
};
return ''
}
}
}
</script>
<style lang="scss" scoped>

50
src/views/dashboard/mixins/top-bar-mixin.js Normal file
View File

@ -0,0 +1,50 @@
import * as api from '@/api/manage.js'
import { mapGetters } from 'vuex'
export default {
data() {
return {
waitApprovalNum: '',
receiveApprovalNum: '',
defaultTabItem: 'dashboard',
topList: [
{
name: '面板',
path: 'summaryDashboard'
},
{
name: '代办',
path: 'dashboard'
},
{
name: '已办',
path: 'hasIndex'
},
{
name: '抄送查阅/操作',
path: 'receiveIndex'
}
// {
// name: '商品审核',
// path: 'goodsCheck',
// },
// {
// name: '产品审核',
// path: 'productCheck',
// },
]
}
},
computed: {
...mapGetters(['name', 'user'])
},
methods: {
getApprovalStatus() {
api.waitApprovalNum().then((res) => {
this.waitApprovalNum = res.data
})
api.receiveApprovalNum().then((res) => {
this.receiveApprovalNum = res.data
})
}
}
}

228
src/views/dashboard/receiveIndex.vue
View File

@ -14,11 +14,11 @@
<div class="page">
<topBar
v-if="topList.length > 0"
:topList="topList"
:moren="moren"
:waitApprovalNum="waitApprovalNum"
:receiveApprovalNum="receiveApprovalNum"
></topBar>
:top-list="topList"
:moren="defaultTabItem"
:wait-approval-num="waitApprovalNum"
:receive-approval-num="receiveApprovalNum"
/>
<div class="main">
<div class="form_all">
<el-form ref="select" :model="select" label-width="auto">
@ -27,37 +27,37 @@
<el-col :span="4">
<el-form-item :label="'业务类型'">
<el-select
v-model="select.approvalBusiness"
clearable
filterable
v-model="select.approvalBusiness"
>
<el-option
v-for="item in ywsqList"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item :label="'发起人'">
<el-input
clearable
v-model="select.userName"
clearable
:placeholder="'请输入'"
></el-input>
/>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item :label="'签呈状态'">
<el-select clearable v-model="select.receiveStatus">
<el-select v-model="select.receiveStatus" clearable>
<el-option
v-for="item in readStateList"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
/>
</el-select>
</el-form-item>
</el-col>
@ -70,8 +70,7 @@
:range-separator="'至'"
:start-placeholder="'开始日期'"
:end-placeholder="'结束日期'"
>
</el-date-picker>
/>
</el-form-item>
</el-col>
<el-col :span="8">
@ -83,14 +82,12 @@
:range-separator="'至'"
:start-placeholder="'开始日期'"
:end-placeholder="'结束日期'"
>
</el-date-picker>
/>
</el-form-item>
</el-col>
<el-col :span="4">
<el-button type="primary" @click="getDataList1">
{{ '搜索' }}</el-button
>
{{ '搜索' }}</el-button>
<el-button @click="reset"> {{ '重置' }}</el-button>
</el-col>
</el-row>
@ -101,37 +98,33 @@
<el-button
size="small"
:disabled="pkIdList.length == 0"
@click="toReceive(0)"
type="success"
>{{ '接收' }}</el-button
>
<el-button size="small" @click="handleExport" class="exportBtn">
{{ '导出' }}</el-button
>
@click="toReceive(0)"
>{{ '接收' }}</el-button>
<el-button size="small" class="exportBtn" @click="handleExport">
{{ '导出' }}</el-button>
</div>
</div>
<el-table
v-loading="loading"
:data="tableData1"
style="width: 100%"
height="100%"
v-loading="loading"
@selection-change="handleSelectionChange"
:header-cell-style="{ background: '#EEEEEE' }"
:row-class-name="tableRowClassName"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column type="selection" width="55" />
<el-table-column
align="center"
prop="userName"
:label="'发起人'"
>
</el-table-column>
/>
<el-table-column
align="center"
prop="approvalBusinessVal"
:label="'业务类型'"
>
</el-table-column>
/>
<el-table-column
align="center"
@ -149,10 +142,8 @@
align="center"
prop="creationTime"
:label="'创建日期'"
>
</el-table-column>
<el-table-column align="center" prop="sendTime" :label="'终审日期'">
</el-table-column>
/>
<el-table-column align="center" prop="sendTime" :label="'终审日期'" />
<el-table-column
align="center"
@ -163,18 +154,18 @@
<template slot-scope="scope">
<el-button
style="color: #48b2fd"
@click="toFixed(scope.row.approvalCode, 2, scope.row.pkId)"
type="text"
size="small"
@click="toFixed(scope.row.approvalCode, 2, scope.row.pkId)"
>
{{ '查看签呈' }}
</el-button>
<el-button
style="color: #53b11e"
v-show="scope.row.receiveStatus == 1"
@click="toReceive(1, scope.row.pkId)"
style="color: #53b11e"
type="text"
size="small"
@click="toReceive(1, scope.row.pkId)"
>
{{ '接收' }}
</el-button>
@ -192,186 +183,153 @@
</template>
<script>
import { mapGetters } from "vuex";
import * as api from "@/api/manage.js";
import topBar from "@/components/topBar";
import { mapGetters } from 'vuex'
import * as api from '@/api/manage.js'
import topBar from '@/components/topBar'
import topBarMixin from './mixins/top-bar-mixin'
export default {
name: "Dashboard",
name: 'Dashboard',
components: {
topBar,
topBar
},
mixins: [topBarMixin],
computed: {
...mapGetters(["name"]),
...mapGetters(['name'])
},
data() {
return {
loading: false,
queryParams: {
pageNum: 1,
pageSize: 50,
pageSize: 50
},
total: 0,
tableData: [],
tableData1: [],
tabActive: 0,
select: {},
moren: "receiveIndex",
topList: [
{
name: "代办",
path: "dashboard",
},
{
name: "已办",
path: "hasIndex",
},
{
name: "抄送查阅/操作",
path: "receiveIndex",
},
// {
// name: '商品审核',
// path: 'goodsCheck',
// },
// {
// name: '产品审核',
// path: 'productCheck',
// },
],
defaultTabItem: 'receiveIndex',
ywsqList: [],
checkList: [],
sourceList: [],
approveStatusList: [],
pkIdList: [],
readStateList: [],
waitApprovalNum: "",
receiveApprovalNum: "",
};
readStateList: []
}
},
mounted() {
// 获取列表
this.getDataList1();
this.getApprove();
this.getSignType();
this.getSource();
this.getreadState();
this.getApprovalStatus();
this.getDataList1()
this.getApprove()
this.getSignType()
this.getSource()
this.getreadState()
this.getApprovalStatus()
},
methods: {
reset() {
this.select = {};
this.getDataList1();
this.select = {}
this.getDataList1()
},
getApprove() {
api.approvalBusiness().then((res) => {
this.ywsqList = res.data;
});
this.ywsqList = res.data
})
},
getreadState() {
api.readState().then((res) => {
this.readStateList = res.data;
});
this.readStateList = res.data
})
},
getSource() {
api.signSource().then((res) => {
this.sourceList = res.data;
});
this.sourceList = res.data
})
},
getSignType() {
api.approvalOperation().then((res) => {
this.checkList = res.data;
});
},
getApprovalStatus() {
api.approvalStatus().then((res) => {
this.approveStatusList = res.data;
});
api.waitApprovalNum().then((res) => {
this.waitApprovalNum = res.data;
});
api.receiveApprovalNum().then((res) => {
this.receiveApprovalNum = res.data;
});
this.checkList = res.data
})
},
getDataList1() {
this.loading = true;
this.loading = true
api
.receiveApprovalList(Object.assign({}, this.queryParams, this.select))
.then((res) => {
this.loading = false;
this.tableData1 = res.rows;
this.total = res.total;
});
this.loading = false
this.tableData1 = res.rows
this.total = res.total
})
},
handleSelectionChange(val) {
if (val.length > 0) {
let pkIdList = val.map((item) => {
return item.pkId;
});
this.pkIdList = pkIdList;
const pkIdList = val.map((item) => {
return item.pkId
})
this.pkIdList = pkIdList
console.log(
"%c [ this.pkIdList ]-274",
"font-size:13px; background:#69b38c; color:#adf7d0;",
'%c [ this.pkIdList ]-274',
'font-size:13px; background:#69b38c; color:#adf7d0;',
this.pkIdList
);
)
} else {
this.pkIdList = [];
this.pkIdList = []
}
},
toReceive(index, id) {
if (index) {
this.pkIdList = [id];
this.pkIdList = [id]
}
api
.receiveApproval({
pkIdList: this.pkIdList,
pkIdList: this.pkIdList
})
.then((res) => {
if (res.code == 200) {
this.$message({
type: "success",
message: res.msg,
});
this.getDataList1();
this.getApprovalStatus();
type: 'success',
message: res.msg
})
this.getDataList1()
this.getApprovalStatus()
}
});
})
},
toFixed(id, index, pkId) {
this.$router.push({
path: "manageDetails",
path: 'manageDetails',
query: {
id: id,
index: index,
pkId: pkId,
},
});
pkId: pkId
}
})
},
/** 导出按钮操作 */
handleExport() {
this.$confirm('是否确认导出所有数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: "warning",
type: 'warning'
}).then((_) => {
this.download(
"/system/manage/index/receive-approval-export",
'/system/manage/index/receive-approval-export',
Object.assign({}, this.queryParams, this.select),
`签呈接收${new Date().getTime()}.xlsx`
);
});
)
})
},
tableRowClassName({ row, rowIndex }) {
if (rowIndex % 2 == 1) {
return "warning-row";
return 'warning-row'
} else if (rowIndex % 2 == 0) {
return "success-row";
return 'success-row'
}
return "";
},
},
};
return ''
}
}
}
</script>
<style lang="scss" scoped>

484
src/views/system/national/index.vue
View File

@ -2,59 +2,59 @@
<div class="page">
<topBar
v-if="topList.length > 0"
:topList="topList"
:top-list="topList"
:moren="moren"
></topBar>
/>
<div class="thetopbox">
<el-form ref="queryParams" :model="queryParams" label-width="auto">
<el-row >
<el-row>
<el-col :span="4">
<el-form-item :label="'国家全称'" prop="name" class="el-inputs">
<el-input clearable v-model="queryParams.name"></el-input>
<el-input v-model="queryParams.name" clearable />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item :label="'国家简称'" prop="shortName" class="el-inputs">
<el-input clearable v-model="queryParams.shortName"></el-input>
<el-input v-model="queryParams.shortName" clearable />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item :label="'语种'" prop="languages" class="el-inputs">
<el-select clearable v-model="queryParams.languages">
<el-select v-model="queryParams.languages" clearable>
<el-option
v-for="item in languagesList"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item :label="'国家编码'" prop="code" class="el-inputs">
<el-input clearable v-model="queryParams.code"></el-input>
<el-input v-model="queryParams.code" clearable />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item :label="'会员前缀'" prop="code" class="el-inputs">
<el-input clearable v-model="queryParams.code"></el-input>
<el-input v-model="queryParams.code" clearable />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item :label="'启用状态'" prop="enableState" class="el-inputs">
<el-select clearable v-model="queryParams.enableState">
<el-select v-model="queryParams.enableState" clearable>
<el-option
v-for="item in stateList"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8" >
<el-col :span="8">
<el-form-item :label="'生效日期'" prop="enableState">
<el-date-picker
v-model="sxsj"
@ -64,8 +64,7 @@
:end-placeholder="'结束日期'"
value-format="yyyy-MM-dd HH:mm:ss"
:unlink-panels="true"
>
</el-date-picker>
/>
</el-form-item>
</el-col>
<el-col :span="8">
@ -78,15 +77,15 @@
:end-placeholder="'结束日期'"
value-format="yyyy-MM-dd HH:mm:ss"
:unlink-panels="true"
>
</el-date-picker>
/>
</el-form-item>
</el-col>
<el-col :span="4" style="margin-left: 0px">
<div class="searchbox">
<el-button class="my_search" @click="getNationalList"
> {{ '搜索' }}</el-button
>
<el-button
class="my_search"
@click="getNationalList"
> {{ '搜索' }}</el-button>
<el-button class="my_reset" @click="reChongzhi"> {{ '重置' }}</el-button>
</div>
</el-col>
@ -97,24 +96,26 @@
<div class="main">
<div class="maintop">
<div class="mainbtn">
<el-button size="mini" class="thebtn1" @click="adddate()"
v-has-buttons="['NationalAdd']"
>{{'添加'}}</el-button
>
<el-button size="small" @click="handleExport" class="thebtn2" v-has-buttons="['NationalExport']"> {{ '导出' }}</el-button>
<el-button
v-has-buttons="['NationalAdd']"
size="mini"
class="thebtn1"
@click="adddate()"
>{{ '添加' }}</el-button>
<el-button v-has-buttons="['NationalExport']" size="small" class="thebtn2" @click="handleExport"> {{ '导出' }}</el-button>
</div>
</div>
<div class="maintable">
<el-table
:data="tableData"
v-loading="loading"
:data="tableData"
style="width: 100%"
height="680px"
:header-cell-style="{ background: '#EEEEEE' }"
:row-class-name="tableRowClassName"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column type="selection" width="55" />
<el-table-column
align="center"
prop="nationalFlag1"
@ -122,47 +123,37 @@
>
<template slot-scope="scope">
<div class="tem">
<img :src="scope.row.nationalFlag2" alt="" />
<img :src="scope.row.nationalFlag2" alt="">
</div>
</template>
</el-table-column>
<el-table-column align="center" prop="gradeName" :label="'国旗（圆形）'">
<el-table-column align="center" prop="gradeName" :label="'国旗（圆形）'">
<template slot-scope="scope">
<div class="tem2">
<img :src="scope.row.nationalFlag1" alt="" />
<img :src="scope.row.nationalFlag1" alt="">
</div>
</template>
</el-table-column>
<el-table-column align="center" prop="name" :label="'国家全称'">
</el-table-column>
<el-table-column align="center" prop="shortName" :label="'国家简称'">
</el-table-column>
<el-table-column align="center" prop="name" :label="'国家全称'" />
<el-table-column align="center" prop="shortName" :label="'国家简称'" />
<el-table-column
align="center"
prop="languages"
:label="'语种'"
:formatter="checkLanguages"
>
</el-table-column>
<el-table-column align="center" prop="codeThree" :label="'三位字母'">
</el-table-column>
<el-table-column align="center" prop="code" :label="'国家编码'">
</el-table-column>
<el-table-column align="center" prop="code" :label="'会员前缀'">
</el-table-column>
<el-table-column align="center" prop="numberPlaces" :label="'小数位数'">
</el-table-column>
/>
<el-table-column align="center" prop="codeThree" :label="'三位字母'" />
<el-table-column align="center" prop="code" :label="'国家编码'" />
<el-table-column align="center" prop="code" :label="'会员前缀'" />
<el-table-column align="center" prop="numberPlaces" :label="'小数位数'" />
<el-table-column
align="center"
prop="enableState"
:label="'启用状态'"
:formatter="checkQiyong"
>
</el-table-column>
<el-table-column align="center" prop="effectiveDate" :label="'生效日期'" width="150">
</el-table-column>
<el-table-column align="center" prop="creationTime" :label="'创建日期'" width="150">
</el-table-column>
/>
<el-table-column align="center" prop="effectiveDate" :label="'生效日期'" width="150" />
<el-table-column align="center" prop="creationTime" :label="'创建日期'" width="150" />
<el-table-column
align="center"
prop="time"
@ -171,41 +162,41 @@
>
<template slot-scope="scope">
<el-button
v-has-buttons="['NationalUpdate']"
class="button-s"
@click.native.prevent="update(scope.row, tableData)"
type="text"
size="small"
v-has-buttons="['NationalUpdate']"
@click.native.prevent="update(scope.row, tableData)"
>
{{'修改'}}
{{ '修改' }}
</el-button>
<el-button
v-if="scope.row.enableState==0"
v-has-buttons="['NationalDisable']"
class="button-s redcolor"
@click.native.prevent="updateState(scope.row, tableData)"
type="text"
size="small"
v-has-buttons="['NationalDisable']"
@click.native.prevent="updateState(scope.row, tableData)"
>
{{'禁用'}}
{{ '禁用' }}
</el-button>
<el-button
v-else
v-has-buttons="['NationalEnable']"
class="button-s"
@click.native.prevent="updateState(scope.row, tableData)"
type="text"
size="small"
v-has-buttons="['NationalEnable']"
@click.native.prevent="updateState(scope.row, tableData)"
>
{{ '启用' }}
</el-button>
<el-button
v-has-buttons="['NationalDelete']"
class="button-s"
@click.native.prevent="deleteRow(scope.row, tableData)"
type="text"
size="small"
style="color: #c73030"
@click.native.prevent="deleteRow(scope.row, tableData)"
>
{{ '删除' }}
</el-button>
@ -234,19 +225,19 @@
<el-col :span="12">
<el-form-item :label="'国家编号'" prop="code">
<el-input
clearable
v-model="form.code"
clearable
:placeholder="'请输入'"
></el-input>
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="'国家全称'" prop="name">
<el-input
clearable
v-model="form.name"
clearable
:placeholder="'请输入'"
></el-input>
/>
</el-form-item>
</el-col>
</el-row>
@ -254,42 +245,42 @@
<el-col :span="12">
<el-form-item :label="'国家简称'" prop="shortName">
<el-input
clearable
v-model="form.shortName"
clearable
:placeholder="'请输入'"
></el-input>
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="'三位字母'" prop="codeThree">
<el-input
clearable
v-model="form.codeThree"
clearable
:placeholder="'请输入'"
></el-input>
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item :label="'语种'" prop="languages">
<el-select clearable v-model="form.languages">
<el-select v-model="form.languages" clearable>
<el-option
v-for="item in languagesList"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="'会员前缀'" prop="code">
<el-input
clearable
v-model="form.code"
clearable
:placeholder="'请输入'"
></el-input>
/>
</el-form-item>
</el-col>
</el-row>
@ -297,10 +288,10 @@
<el-col :span="12">
<el-form-item :label="'小数位数'" prop="numberPlaces">
<el-input
clearable
v-model="form.numberPlaces"
clearable
:placeholder="'请输入'"
></el-input>
/>
</el-form-item>
</el-col>
<el-col :span="12">
@ -310,8 +301,7 @@
type="datetime"
:placeholder="'请选择'"
value-format="yyyy-MM-dd HH:mm:ss"
>
</el-date-picker>
/>
</el-form-item>
</el-col>
</el-row>
@ -330,7 +320,7 @@
:on-remove="handleRemove"
:file-list="afileList"
>
<i class="el-icon-plus"></i>
<i class="el-icon-plus" />
</el-upload>
</el-form-item>
</el-col>
@ -347,23 +337,23 @@
:on-remove="handleRemove2"
:file-list="bfileList"
>
<i class="el-icon-plus"></i>
<i class="el-icon-plus" />
</el-upload>
</el-form-item>
</el-col>
</el-row>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="handleClose">{{'取消'}}</el-button>
<el-button type="primary" @click="onSubmit('form')">{{'确认'}}</el-button>
<el-button @click="handleClose">{{ '取消' }}</el-button>
<el-button type="primary" @click="onSubmit('form')">{{ '确认' }}</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import topBar from "@/components/topBar";
import { getToken } from "@/utils/auth";
import topBar from '@/components/topBar'
import { getToken } from '@/utils/auth'
import {
getNationalList,
getlanguagesList,
@ -371,297 +361,297 @@ import {
updateEnable,
addNational,
updateNational,
getOnecountrylist,
} from "@/api/national";
getOnecountrylist
} from '@/api/national'
export default {
name: "Gjpz",
name: 'Gjpz',
components: {
topBar,
topBar
},
data() {
return {
moren: "gjpz",
moren: 'gjpz',
topList: [
{
name: '国家配置',
path: "gjpz",
},
path: 'gjpz'
}
],
multipleSelection: [], //多选列表
languagesList: [], //语种列表
sxsj: "",
cjsj: "",
multipleSelection: [], // 多选列表
languagesList: [], // 语种列表
sxsj: '',
cjsj: '',
tableData: [],
loading:false,
loading: false,
total: 0,
queryParams: {
pageNum: 1,
pageSize: 50,
name: "", //国家全称
shortName: "", //国家简称
code: "", //国家编码/会员前缀
enableState: "", //启用状态
languages: "", //语种
createStartDate: "", //创建时间起始
createEndDate: "", //创建时间结束
effectiveStartDate: "", //生效时间起始
effectiveEndDate: "", //生效时间结束
name: '', // 国家全称
shortName: '', // 国家简称
code: '', // 国家编码/会员前缀
enableState: '', // 启用状态
languages: '', // 语种
createStartDate: '', // 创建时间起始
createEndDate: '', // 创建时间结束
effectiveStartDate: '', // 生效时间起始
effectiveEndDate: '' // 生效时间结束
},
stateList: [
//启用状态列表
// 启用状态列表
{
value: "0",
label: '已启用',
value: '0',
label: '已启用'
},
{
value: "1",
label: '已禁用',
},
value: '1',
label: '已禁用'
}
],
form: {
code: "", //国家编号
name: "", //国家全称
shortName: "", //国家简称
codeThree: "", //三位字母
numberPlaces: "", //小数位数
languages: "", //语种
effectiveDate: null, //生效时间
nationalFlag1: "", //上传国旗（圆形）
nationalFlag2: "", //上传国旗（长方形）
code: '', // 国家编号
name: '', // 国家全称
shortName: '', // 国家简称
codeThree: '', // 三位字母
numberPlaces: '', // 小数位数
languages: '', // 语种
effectiveDate: null, // 生效时间
nationalFlag1: '', // 上传国旗（圆形）
nationalFlag2: '' // 上传国旗（长方形）
},
rules: {
code: [{ required: true, message: '请输入', trigger: "blur" }],
name: [{ required: true, message: '请输入', trigger: "blur" }],
code: [{ required: true, message: '请输入', trigger: 'blur' }],
name: [{ required: true, message: '请输入', trigger: 'blur' }],
shortName: [
{ required: true, message: '请输入', trigger: "blur" },
{ required: true, message: '请输入', trigger: 'blur' }
],
codeThree: [
{ required: true, message: '请输入', trigger: "blur" },
{ required: true, message: '请输入', trigger: 'blur' }
],
numberPlaces: [
{ required: true, message: '请输入', trigger: "blur" },
{ required: true, message: '请输入', trigger: 'blur' }
],
effectiveDate: [
{ required: true, message: '请选择生效时间', trigger: "change" },
{ required: true, message: '请选择生效时间', trigger: 'change' }
],
languages: [
{ required: true, message: '请选择语种', trigger: "change" },
{ required: true, message: '请选择语种', trigger: 'change' }
],
nationalFlag1: [
{ required: true, message:'请上传国旗', trigger: "change" },
{ required: true, message: '请上传国旗', trigger: 'change' }
],
nationalFlag2: [
{ required: true, message: '请上传国旗', trigger: "change" },
],
{ required: true, message: '请上传国旗', trigger: 'change' }
]
},
showImg: true, //默认展示
showImg: true, // 默认展示
noneUploadImg: false, //
showImg2: true, //默认展示
showImg2: true, // 默认展示
noneUploadImg2: false, //
uploadImgUrl: process.env.VUE_APP_BASE_API + "/system/upload",
uploadImgUrl2: process.env.VUE_APP_BASE_API + "/system/upload",
uploadImgUrl: process.env.VUE_APP_BASE_API + '/system/upload',
uploadImgUrl2: process.env.VUE_APP_BASE_API + '/system/upload',
updateShow: false,
updateTitle: "",
updateTitle: '',
headers: {
Authorization: getToken(),
Authorization: getToken()
},
addOrEdit: "", //区分是添加还是修改 true添加 false修改
addOrEdit: '', // 区分是添加还是修改 true添加 false修改
afileList: [],
bfileList: [],
};
bfileList: []
}
},
created() {
this.getNationalList();
this.getlanguagesList();
this.getNationalList()
this.getlanguagesList()
},
methods: {
onSubmit(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
let url = "";
let url = ''
if (this.addOrEdit == true) {
url = addNational;
url = addNational
} else {
url = updateNational;
url = updateNational
}
url(this.form).then((res) => {
if (res.code == 200) {
this.updateShow = false;
this.updateShow = false
this.$message({
message: res.msg,
type: "success",
});
this.getNationalList();
type: 'success'
})
this.getNationalList()
} else {
this.$message({
message: res.msg,
type: "warning",
});
type: 'warning'
})
}
});
})
}
});
})
},
//图片上传成功后的回调
// 图片上传成功后的回调
handlePictureSuccess(res, file) {
this.form.nationalFlag1 = res.data.url;
this.form.nationalFlag1 = res.data.url
},
uploadImgChange(file, fileList) {
this.noneUploadImg = fileList.length > 0;
this.noneUploadImg = fileList.length > 0
},
//图片上传删除
// 图片上传删除
handleRemove(file, fileList) {
this.form.nationalFlag1 = "";
this.noneUploadImg = fileList.length > 0;
this.form.nationalFlag1 = ''
this.noneUploadImg = fileList.length > 0
},
//图片上传成功后的回调
// 图片上传成功后的回调
handlePictureSuccess2(res, file) {
this.form.nationalFlag2 = res.data.url;
this.form.nationalFlag2 = res.data.url
},
uploadImgChange2(file, fileList) {
this.noneUploadImg2 = fileList.length > 0;
this.noneUploadImg2 = fileList.length > 0
},
//图片上传删除
// 图片上传删除
handleRemove2(file, fileList) {
this.form.nationalFlag2 = "";
this.noneUploadImg2 = fileList.length > 0;
this.form.nationalFlag2 = ''
this.noneUploadImg2 = fileList.length > 0
},
//添加
// 添加
adddate() {
this.updateShow = true;
this.updateTitle = '添加';
this.addOrEdit = true;
this.updateShow = true
this.updateTitle = '添加'
this.addOrEdit = true
// 上传初始化
this.afileList = [];
this.bfileList = [];
this.noneUploadImg = false;
this.noneUploadImg2 = false;
this.afileList = []
this.bfileList = []
this.noneUploadImg = false
this.noneUploadImg2 = false
},
//重置
// 重置
reChongzhi() {
this.queryParams.name = "";
this.queryParams.shortName = "";
this.queryParams.code = "";
this.queryParams.enableState = "";
this.queryParams.languages = "";
this.queryParams.createStartDate = "";
this.queryParams.createEndDate = "";
this.queryParams.effectiveStartDate = "";
this.queryParams.effectiveEndDate = "";
this.cjsj = "";
this.sxsj = "";
this.queryParams.name = ''
this.queryParams.shortName = ''
this.queryParams.code = ''
this.queryParams.enableState = ''
this.queryParams.languages = ''
this.queryParams.createStartDate = ''
this.queryParams.createEndDate = ''
this.queryParams.effectiveStartDate = ''
this.queryParams.effectiveEndDate = ''
this.cjsj = ''
this.sxsj = ''
},
checkQiyong(row) {
if (row.enableState == 0) {
return '启用';
return '启用'
} else {
return '禁用';
return '禁用'
}
},
//获取语种枚举列表
// 获取语种枚举列表
getlanguagesList() {
getlanguagesList().then((res) => {
this.languagesList = res.data;
});
this.languagesList = res.data
})
},
//展示列表语种替换
// 展示列表语种替换
checkLanguages(row) {
let state = "";
let state = ''
if (this.languagesList) {
this.languagesList.map((element) => {
if (row.languages == element.value) {
state = element.label;
state = element.label
}
});
})
}
return state;
return state
},
handleClose() {
this.updateShow = false;
this.$refs["form"].clearValidate();
this.$refs["form"].resetFields();
this.updateShow = false
this.$refs['form'].clearValidate()
this.$refs['form'].resetFields()
// 上传初始化
this.afileList = [];
this.bfileList = [];
this.noneUploadImg = false;
this.noneUploadImg2 = false;
this.afileList = []
this.bfileList = []
this.noneUploadImg = false
this.noneUploadImg2 = false
},
//修改
// 修改
update(row) {
this.updateTitle = '修改';
this.updateShow = true;
this.addOrEdit = false;
this.updateTitle = '修改'
this.updateShow = true
this.addOrEdit = false
getOnecountrylist({ pkId: row.pkId }).then((res) => {
this.form = res.data;
this.noneUploadImg = true;
this.noneUploadImg2 = true;
this.afileList = [{ url: res.data.nationalFlag1 }];
this.bfileList = [{ url: res.data.nationalFlag2 }];
});
this.form = res.data
this.noneUploadImg = true
this.noneUploadImg2 = true
this.afileList = [{ url: res.data.nationalFlag1 }]
this.bfileList = [{ url: res.data.nationalFlag2 }]
})
},
//删除
// 删除
deleteRow(row) {
this.$confirm('确认删除?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: "warning",
type: 'warning'
}).then(() => {
deleteCountry(row.pkId).then((res) => {
if (res.code == 200) {
this.$message({
message: res.msg,
type: "success",
});
this.getNationalList();
type: 'success'
})
this.getNationalList()
} else {
this.$message({
message: res.msg,
type: "warning",
});
type: 'warning'
})
}
});
});
})
})
},
//修改国家状态禁用/启用
// 修改国家状态禁用/启用
updateState(row) {
this.$confirm('确认更改状态?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: "warning",
type: 'warning'
}).then(() => {
var thestate = "";
var thestate = ''
if (row.enableState == 0) {
thestate = 1;
thestate = 1
} else if (row.enableState == 1) {
thestate = 0;
thestate = 0
}
updateEnable(row.pkId, thestate).then((res) => {
if (res.code == 200) {
this.$message({
message: res.msg,
type: "success",
});
type: 'success'
})
// 获取列表
} else {
this.$message({
message: res.msg,
type: "warning",
});
type: 'warning'
})
}
this.getNationalList();
});
});
this.getNationalList()
})
})
},
/** 导出按钮操作 */
handleExport() {
this.$confirm( '是否确认导出所有数据项?', '警告', {
/** 导出按钮操作 */
handleExport() {
this.$confirm('是否确认导出所有数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
type: 'warning'
}).then((_) => {
this.download(
'/system/manage/country/export',
@ -670,36 +660,36 @@ export default {
)
})
},
//获取国家配置列表
// 获取国家配置列表
getNationalList() {
this.loading = true
if (this.sxsj) {
this.queryParams.effectiveStartDate = this.sxsj[0];
this.queryParams.effectiveEndDate = this.sxsj[1];
this.queryParams.effectiveStartDate = this.sxsj[0]
this.queryParams.effectiveEndDate = this.sxsj[1]
}
if (this.cjsj) {
this.queryParams.createStartDate = this.cjsj[0];
this.queryParams.createEndDate = this.cjsj[1];
this.queryParams.createStartDate = this.cjsj[0]
this.queryParams.createEndDate = this.cjsj[1]
}
getNationalList(this.queryParams).then((res) => {
this.tableData = res.rows;
this.total = res.total;
this.tableData = res.rows
this.total = res.total
this.loading = false
});
})
},
handleSelectionChange(val) {
this.multipleSelection = val;
this.multipleSelection = val
},
tableRowClassName({ row, rowIndex }) {
if (rowIndex % 2 == 1) {
return "warning-row";
return 'warning-row'
} else if (rowIndex % 2 == 0) {
return "success-row";
return 'success-row'
}
return "";
},
},
};
return ''
}
}
}
</script>
<style lang="scss" scoped>