6 changed files with 1688 additions and 433 deletions
-
BINsrc/assets/images/home1.jpg
-
BINsrc/assets/images/home2.jpg
-
479src/views/home-chu.vue
-
438src/views/home.vue
-
625src/views/weChatMiniProgram/activity copy.vue
-
579src/views/weChatMiniProgram/activity3.vue
|
After Width: 1920 | Height: 1080 | Size: 54 KiB |
|
After Width: 1920 | Height: 1080 | Size: 61 KiB |
@ -0,0 +1,479 @@ |
|||||
|
<template> |
||||
|
<div class="dashboard-container"> |
||||
|
<div class="dashboard-editor-container"> |
||||
|
<panel-group :top-object-num="topObjectNum" /> |
||||
|
<el-row :gutter="20" style="margin-bottom:20px;height: calc(50vh - 174px);"> |
||||
|
<el-col :xs="24" :sm="24" :lg="12"> |
||||
|
<div class="container-wrap"> |
||||
|
<span class="right-top-line" /> |
||||
|
<span class="left-bottom-line" /> |
||||
|
<h3 class="home-item-title"> |
||||
|
盘点日志 |
||||
|
<router-link :to="{ path: '/check/check/checkLog'}"> |
||||
|
<div style="position: absolute; right: 20px; top: 20px; color: #999;" class="el-icon-more" /> |
||||
|
</router-link> |
||||
|
</h3> |
||||
|
<div class="home-flowable" style="height: calc(100% - 54px); overflow-x: hidden;"> |
||||
|
<div class="home-tab"> |
||||
|
<span :class="{'home-tab-active': flowableTabIndex == 0}">未完成({{ stockLogIncompleteData.length !==0? stockLogIncompleteData.length: 0 }})</span> |
||||
|
<span :class="{'home-tab-active': flowableTabIndex == 1}">已结束({{ stockLogCompletedData.length !==0? stockLogCompletedData.length: 0 }})</span> |
||||
|
<!-- <span :class="{'home-tab-active': flowableTabIndex == 2}">已完成({{ flowableData.length !==0? flowableData.length: 0 }})</span> |
||||
|
<span :class="{'home-tab-active': flowableTabIndex == 3}" @click="toMoreProcess">更多任务</span> --> |
||||
|
</div> |
||||
|
<div class="home-flowable-list" style="height: calc(100% - 45px); overflow-y: auto; overflow-x: hidden;"> |
||||
|
<el-table v-if="stockLogIncompleteData.length !== 0" height="calc(100%)" :data="stockLogIncompleteData" class="archives-table" stripe style="width: 100%"> |
||||
|
<el-table-column prop="stockBill" label="盘点单号" /> |
||||
|
<el-table-column prop="stockRegion" label="目标位置" min-width="180" /> |
||||
|
<el-table-column prop="stockGridNum" label="目标数量" align="right"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div>{{ scope.row.stockGridNum + ' / '+ (scope.row.totalGridNum?scope.row.totalGridNum:'0') +' 层位' }}</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="state" label="盘点状态" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span v-if="scope.row.state === 0" class="row-state row-lending state-active">已终止</span> |
||||
|
<span v-if="scope.row.state === 1" class="row-state row-warehousing state-active">排队中</span> |
||||
|
<span v-if="scope.row.state === 2" class="row-state row-binding state-active">盘点中</span> |
||||
|
<span v-if="scope.row.state === 3" class="row-state row-physical state-active">已完成</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<!-- <el-table-column prop="createTime" label="申请时间" width="180"> --> |
||||
|
<!-- <template slot-scope="scope"> --> |
||||
|
<!-- <div>{{ scope.row.createTime | parseTime }}</div> --> |
||||
|
<!-- </template> --> |
||||
|
<!-- </el-table-column> --> |
||||
|
</el-table> |
||||
|
<div v-else class="empty-main" style="height: 100%;"> |
||||
|
<svg-icon icon-class="empty" class-name="empty-img" /> |
||||
|
<p>暂无数据</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col :xs="24" :sm="24" :lg="12"> |
||||
|
<div class="container-wrap"> |
||||
|
<span class="right-top-line" /> |
||||
|
<span class="left-bottom-line" /> |
||||
|
<h3 class="home-item-title"> |
||||
|
服务器监控 |
||||
|
<div style="position: absolute; right: 20px; top: 20px; color: #999; cursor: pointer;" class="el-icon-refresh" @click="refreshSystemData" /> |
||||
|
</h3> |
||||
|
<!-- <div class="chart-wrapper"> --> |
||||
|
<!-- <serverProgress :system-data="systemData" /> --> |
||||
|
<!-- </div> --> |
||||
|
<swiper |
||||
|
ref="swiperServer" |
||||
|
class="swiper-server" |
||||
|
:options="swiperOptionServer" |
||||
|
:auto-update="true" |
||||
|
:auto-destroy="true" |
||||
|
:delete-instance-on-destroy="true" |
||||
|
:cleanup-styles-on-destroy="true" |
||||
|
> |
||||
|
<swiper-slide class="swiper-slide-server"> |
||||
|
<serverProgress :system-data="systemData" /> |
||||
|
</swiper-slide> |
||||
|
<swiper-slide class="swiper-slide-server cpu-echarts"> |
||||
|
<serverGpuUse :utilization="utilization" /> |
||||
|
<div class="cpu-right"> |
||||
|
<serverGpu :temperature="temperature" /> |
||||
|
<serverGpuOther :memory-total="memoryTotal" :memory-free="memoryFree" /> |
||||
|
</div> |
||||
|
<div style="position: absolute; bottom: 136px; right: 70px; font-weight: bold;">{{ GPUName }}</div> |
||||
|
</swiper-slide> |
||||
|
<swiper-slide class="swiper-slide-server"> |
||||
|
<serveTerminal ref="serveTerminalRefs" /> |
||||
|
</swiper-slide> |
||||
|
<div slot="pagination" class="swiper-pagination" /> |
||||
|
</swiper> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row :gutter="20" style="height:calc(50vh - 174px);"> |
||||
|
<el-col :xs="24" :sm="24" :lg="8"> |
||||
|
<!-- 档案借阅 --> |
||||
|
<div class="container-wrap"> |
||||
|
<span class="right-top-line" /> |
||||
|
<span class="left-bottom-line" /> |
||||
|
<h3 class="home-item-title"> |
||||
|
盘点概况 |
||||
|
</h3> |
||||
|
<div v-if="taskStockLogData.length !== 0" class="chart-wrapper"> |
||||
|
<taskStockLogEcharts :task-stock-log-data="taskStockLogData" /> |
||||
|
</div> |
||||
|
<div v-else class="empty-main"> |
||||
|
<svg-icon icon-class="empty" class-name="empty-img" /> |
||||
|
<p>暂无数据</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col :xs="24" :sm="24" :lg="8"> |
||||
|
<!-- 档案门类 --> |
||||
|
<div class="container-wrap"> |
||||
|
<span class="right-top-line" /> |
||||
|
<span class="left-bottom-line" /> |
||||
|
<h3 class="home-item-title"> |
||||
|
盘点统计 |
||||
|
</h3> |
||||
|
<div class="chart-wrapper" style="padding: 0 10px; margin-top: -10px;"> |
||||
|
<checkSwiper ref="checkSwiperRefs" /> |
||||
|
</div> |
||||
|
<!-- <div v-else class="empty-main"> |
||||
|
<svg-icon icon-class="empty" class-name="empty-img" /> |
||||
|
<p>暂无数据</p> |
||||
|
</div> --> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col :xs="24" :sm="24" :lg="8"> |
||||
|
<!-- 档案类型 --> |
||||
|
<div class="container-wrap"> |
||||
|
<span class="right-top-line" /> |
||||
|
<span class="left-bottom-line" /> |
||||
|
<h3 class="home-item-title"> |
||||
|
流通统计 |
||||
|
</h3> |
||||
|
<!-- <div class="refresh-date">2024-11-28 09:46</div> --> |
||||
|
<div class="chart-wrapper" style="padding: 0 10px; margin-top: -10px;"> |
||||
|
<bookSwiper ref="bookSwiperRefs" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import PanelGroup from './dashboard/PanelGroup' |
||||
|
import taskStockLogEcharts from '@/views/components/echarts/taskStockLog.vue' |
||||
|
// import lendAcross from '@/views/components/echarts/lendAcross.vue' |
||||
|
// import catePie from '@/views/components/echarts/catePie.vue' |
||||
|
// import typePie from '@/views/components/echarts/typePie.vue' |
||||
|
import bookSwiper from '@/views/components/bookSwiper.vue' |
||||
|
import checkSwiper from '@/views/components/checkSwiper.vue' |
||||
|
import serverProgress from '@/views/components/echarts/serverProgress.vue' |
||||
|
import serverGpu from '@/views/components/echarts/serverGpu.vue' |
||||
|
import serverGpuUse from '@/views/components/echarts/serverGpuUse.vue' |
||||
|
import serverGpuOther from '@/views/components/echarts/serverGpuOther.vue' |
||||
|
import serveTerminal from '@/views/components/serveTerminal.vue' |
||||
|
import { FetchInitHomeInfo, FetchInitStockInfo } from '@/api/stockTask/index' |
||||
|
import { FetchInitStockLogList } from '@/api/stockTaskLog/index' |
||||
|
import { FetchSystemInfo } from '@/api/home/cpu/index' |
||||
|
import { mapGetters } from 'vuex' |
||||
|
import { swiper, swiperSlide } from 'vue-awesome-swiper' |
||||
|
import 'swiper/dist/css/swiper.css' |
||||
|
|
||||
|
export default { |
||||
|
name: 'Dashboard', |
||||
|
components: { |
||||
|
PanelGroup, |
||||
|
// lendAcross, |
||||
|
taskStockLogEcharts, |
||||
|
// catePie, |
||||
|
bookSwiper, |
||||
|
checkSwiper, |
||||
|
// typePie, |
||||
|
serverProgress, |
||||
|
serverGpu, |
||||
|
serverGpuUse, |
||||
|
serverGpuOther, |
||||
|
serveTerminal, |
||||
|
swiper, |
||||
|
swiperSlide |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
topObjectNum: { |
||||
|
regionCount: 0, |
||||
|
shelfCount: 0, |
||||
|
gridCount: 0, |
||||
|
deviceCount: 0, |
||||
|
noStockGridCount: 0, |
||||
|
deviceErrorCount: 0 |
||||
|
}, |
||||
|
taskStockLogData: [], |
||||
|
echartsTimer: null, |
||||
|
refreshtime: 10000, |
||||
|
systemTimer: null, |
||||
|
systemData: { |
||||
|
cpuPercentage: 0, |
||||
|
memPercentage: 0, |
||||
|
sysFilesPercentage: 0 |
||||
|
}, |
||||
|
stockLogCompletedData: [], |
||||
|
stockLogIncompleteData: [], |
||||
|
|
||||
|
archivesTotalNum: 0, |
||||
|
flowableData: [], |
||||
|
flowableTabIndex: 0, |
||||
|
lendData: { |
||||
|
archivesTotalNum: null, |
||||
|
otherData: [] |
||||
|
}, |
||||
|
cateData: [], |
||||
|
typeData: [], |
||||
|
addArcivesData: { |
||||
|
addArcivesMaxCount: null, |
||||
|
addArcivesMonth: [], |
||||
|
addArcivesNum: [], |
||||
|
addArcivesNumFile: [] |
||||
|
}, |
||||
|
swiperActiveIndex: 0, |
||||
|
swiperOptionServer: { |
||||
|
autoplay: { |
||||
|
delay: 8000, |
||||
|
disableOnInteraction: false |
||||
|
}, |
||||
|
slidesPerView: 'auto', |
||||
|
pagination: { |
||||
|
el: '.swiper-pagination', |
||||
|
clickable: true |
||||
|
} |
||||
|
}, |
||||
|
memoryFree: 0, |
||||
|
memoryTotal: 0, |
||||
|
GPUName: '', |
||||
|
temperature: 0, |
||||
|
utilization: 0 |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
...mapGetters([ |
||||
|
'user' |
||||
|
]), |
||||
|
swiperServer() { |
||||
|
return this.$refs.swiperServer.$el.swiper |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.handleMainData() |
||||
|
this.getSystemInfo() |
||||
|
this.getStockLog() |
||||
|
this.handleInitStockInfo() |
||||
|
this.$nextTick(() => { |
||||
|
this.$refs.bookSwiperRefs.swiperParams = {} |
||||
|
this.$refs.bookSwiperRefs.swiperShelfParams = {} |
||||
|
if (this.$refs.bookSwiperRefs.swiperActiveIndex === 0) { |
||||
|
this.$refs.bookSwiperRefs.getInitHotBookList() |
||||
|
} else { |
||||
|
this.$refs.bookSwiperRefs.getInitHotShelfList() |
||||
|
} |
||||
|
|
||||
|
this.$refs.serveTerminalRefs.initData() |
||||
|
}) |
||||
|
}, |
||||
|
mounted() { |
||||
|
// const _this = this |
||||
|
// // 每隔一分钟刷新档案借阅和档案类型的数据 |
||||
|
// this.echartsTimer = setInterval(() => { |
||||
|
// _this.lendData = { |
||||
|
// archivesTotalNum: null, |
||||
|
// otherData: [] |
||||
|
// } |
||||
|
// _this.cateData = [] |
||||
|
// _this.typeData = [] |
||||
|
// _this.addArcivesData = { |
||||
|
// addArcivesMaxCount: null, |
||||
|
// addArcivesMonth: [], |
||||
|
// addArcivesNum: [], |
||||
|
// addArcivesNumFile: [] |
||||
|
// } |
||||
|
// _this.handleMainData() |
||||
|
// }, this.refreshtime) |
||||
|
|
||||
|
// 服务器监控定时更新 |
||||
|
// this.systemTimer = setInterval(() => { |
||||
|
// _this.systemData = { |
||||
|
// cpuPercentage: 0, |
||||
|
// memPercentage: 0, |
||||
|
// sysFilesPercentage: 0 |
||||
|
// } |
||||
|
// this.getSystemInfo() |
||||
|
// }, 3000) |
||||
|
}, |
||||
|
methods: { |
||||
|
getSystemInfo() { |
||||
|
FetchSystemInfo().then(res => { |
||||
|
// cpu 占有率 （总的cpuTotal-空闲的cpuFree）/总的cpuTotal |
||||
|
this.systemData.cpuPercentage = Math.round((res.cpuTotal - res.cpuFree) / res.cpuTotal * 100) |
||||
|
|
||||
|
// 内存占比 使用的memUsed/总的memTotal |
||||
|
this.systemData.memPercentage = Math.round(res.memUsed / res.memTotal * 100) |
||||
|
|
||||
|
this.memoryFree = res.memoryFree |
||||
|
this.memoryTotal = res.memoryTotal |
||||
|
this.GPUName = res.GPUName |
||||
|
this.temperature = res.temperature |
||||
|
this.utilization = res.utilization |
||||
|
|
||||
|
// 磁盘占比 多个磁盘 使用总和sysFiles[i].used的和/总的总和sysFiles[i].total的和 |
||||
|
let sysFilesTotalUsed = 0 |
||||
|
let sysFilesTotal = 0 |
||||
|
res.sysFiles.forEach(item => { |
||||
|
sysFilesTotalUsed += parseFloat(item.used) |
||||
|
sysFilesTotal += parseFloat(item.total) |
||||
|
}) |
||||
|
this.systemData.sysFilesPercentage = Math.round((sysFilesTotalUsed / sysFilesTotal) * 100) |
||||
|
}) |
||||
|
}, |
||||
|
refreshSystemData() { |
||||
|
this.systemData = { |
||||
|
cpuPercentage: 0, |
||||
|
memPercentage: 0, |
||||
|
sysFilesPercentage: 0 |
||||
|
} |
||||
|
this.memoryFree = 0 |
||||
|
this.memoryTotal = 0 |
||||
|
this.GPUName = '' |
||||
|
this.temperature = 0 |
||||
|
this.utilization = 0 |
||||
|
|
||||
|
this.getSystemInfo() |
||||
|
this.$refs.serveTerminalRefs.initData() |
||||
|
}, |
||||
|
getStockLog() { |
||||
|
FetchInitStockLogList().then(res => { |
||||
|
this.stockLogCompletedData = res.content.filter(item => [0, 3].includes(item.state)) |
||||
|
this.stockLogIncompleteData = res.content.filter(item => [1, 2].includes(item.state)) |
||||
|
}) |
||||
|
}, |
||||
|
handleMainData() { |
||||
|
FetchInitHomeInfo().then(data => { |
||||
|
this.topObjectNum = { |
||||
|
regionCount: data.regionCount, |
||||
|
shelfCount: data.shelfCount, |
||||
|
gridCount: data.gridCount, |
||||
|
deviceCount: data.deviceCount, |
||||
|
noStockGridCount: data.noStockGridCount, |
||||
|
deviceErrorCount: data.deviceErrorCount |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
handleInitStockInfo(params) { |
||||
|
FetchInitStockInfo(params).then(res => { |
||||
|
this.taskStockLogData = [ |
||||
|
{ value: res.onShelfNum - res.errorShelfNum - res.errorOrderNum, name: '正常在架' }, |
||||
|
{ value: res.errorShelfNum, name: '错架' }, |
||||
|
{ value: res.errorOrderNum, name: '错序' } |
||||
|
] |
||||
|
}).catch(() => { |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style rel="stylesheet/scss" lang="scss" scoped> |
||||
|
.dashboard-editor-container { |
||||
|
padding: 20px; |
||||
|
position: relative; |
||||
|
|
||||
|
.chart-wrapper { |
||||
|
height: calc(100% - 120px); |
||||
|
} |
||||
|
} |
||||
|
@media (max-width: 1024px) { |
||||
|
.chart-wrapper { |
||||
|
padding: 8px; |
||||
|
} |
||||
|
} |
||||
|
.el-col { |
||||
|
height: 100%; |
||||
|
} |
||||
|
.container-left, |
||||
|
.container-right, |
||||
|
.container-wrap, |
||||
|
.el-card, |
||||
|
.header-container-wrap { |
||||
|
min-height: 100%; |
||||
|
} |
||||
|
.container-wrap { |
||||
|
min-height: auto; |
||||
|
height: 100%; |
||||
|
} |
||||
|
.home-item-title{ |
||||
|
position: relative; |
||||
|
padding: 18px 0 18px 15px; |
||||
|
font-size: 16px; |
||||
|
color: #0C0E1E; |
||||
|
&::before{ |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
top: 50%; |
||||
|
content: ""; |
||||
|
width: 3px; |
||||
|
height: 16px; |
||||
|
background-color: #0348F3; |
||||
|
transform: translateY(-50%); |
||||
|
} |
||||
|
} |
||||
|
.home-flowable{ |
||||
|
padding: 0 20px; |
||||
|
} |
||||
|
.home-tab{ |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
span{ |
||||
|
display: block; |
||||
|
margin-right: 30px; |
||||
|
padding-bottom: 3px; |
||||
|
border-bottom: 3px solid #fff; |
||||
|
&.home-tab-active{ |
||||
|
color: #0348F3; |
||||
|
// border-bottom: 3px solid #0348F3; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
::v-deep .home-flowable-list .el-table__body-wrapper::-webkit-scrollbar { |
||||
|
width: 5px !important; |
||||
|
height: 5px !important; |
||||
|
background-color: #DDE8FB !important; |
||||
|
} |
||||
|
|
||||
|
::v-deep .home-flowable-list .el-table__body-wrapper::-webkit-scrollbar-thumb { |
||||
|
border-radius: 3px; |
||||
|
background-color: #4578F6 !important; |
||||
|
} |
||||
|
|
||||
|
::v-deep .home-flowable-list .el-table__body-wrapper::-webkit-scrollbar-thumb:hover { |
||||
|
background-color: #4578F6 !important; |
||||
|
} |
||||
|
|
||||
|
::v-deep .home-flowable-list .el-table__body-wrapper::-webkit-scrollbar-corner { |
||||
|
background-color: #DDE8FB !important; |
||||
|
} |
||||
|
.refresh-date{ |
||||
|
position: absolute; |
||||
|
right: 14px; |
||||
|
top: 10px; |
||||
|
font-size: 12px; |
||||
|
line-height: 30px; |
||||
|
} |
||||
|
.swiper-server{ |
||||
|
position: relative; |
||||
|
height: 300px; |
||||
|
::v-deep .swiper-wrapper{ |
||||
|
height: 344px; |
||||
|
} |
||||
|
.swiper-pagination{ |
||||
|
bottom: 80px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.cpu-echarts{ |
||||
|
position: relative; |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
align-items: center; |
||||
|
// background-color: #000; |
||||
|
.cpu-right{ |
||||
|
flex: 1; |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
// flex-direction: column; |
||||
|
// flex-wrap: wrap; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,625 @@ |
|||||
|
<template> |
||||
|
<div class="app-container row-container" style="height: calc(100vh - 140px);"> |
||||
|
<!--工具栏--> |
||||
|
<div class="head-container"> |
||||
|
<crudOperation :permission="permission"> |
||||
|
<template v-slot:middle> |
||||
|
<el-button slot="reference" size="mini" :loading="crud.delAllLoading" :disabled="crud.selections.length === 0" @click="toDelete(crud.selections)"> |
||||
|
<i class="iconfont icon-shanchu" /> |
||||
|
删除 |
||||
|
</el-button> |
||||
|
<el-button slot="reference" size="mini" icon="el-icon-download" @click="handleDownload"> |
||||
|
下载 |
||||
|
</el-button> |
||||
|
</template> |
||||
|
</crudOperation> |
||||
|
</div> |
||||
|
<!--表单渲染--> |
||||
|
<el-dialog class="activity-form" append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title"> |
||||
|
<!-- label-position="top" --> |
||||
|
<div class="setting-dialog"> |
||||
|
<el-form ref="form" label-position="top" :inline="true" :model="form" :rules="rules" size="small" label-width="90px"> |
||||
|
<div style="display: flex; justify-content: space-around; "> |
||||
|
<div style="width: 600px; margin: 0 10px; "> |
||||
|
<el-row> |
||||
|
<el-form-item label="活动标题" prop="title"> |
||||
|
<el-input v-model="form.title" placeholder="请输入" style="width: 500px;" /> |
||||
|
</el-form-item> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-form-item label="开始时间" prop="startTime"> |
||||
|
<el-date-picker |
||||
|
v-model="form.startTime" |
||||
|
type="datetime" |
||||
|
placeholder="选择日期时间" |
||||
|
format="yyyy-MM-dd HH:mm:ss" |
||||
|
value-format="yyyy-MM-dd HH:mm:ss" |
||||
|
:picker-options="{ |
||||
|
disabledDate: (time) =>{ |
||||
|
return time.getTime() < Date.now() - 8.64e7 |
||||
|
} |
||||
|
}" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="结束时间" prop="endTime"> |
||||
|
<el-date-picker |
||||
|
v-model="form.endTime" |
||||
|
type="datetime" |
||||
|
placeholder="选择日期时间" |
||||
|
:picker-options="endPickerOptions" |
||||
|
format="yyyy-MM-dd HH:mm:ss" |
||||
|
value-format="yyyy-MM-dd HH:mm:ss" |
||||
|
default-time="['23:59:59']" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
</el-row> |
||||
|
<el-form-item class="activity-number" label="活动人数" prop="numberLimit"> |
||||
|
<el-radio-group v-model="form.numberLimit" v-removeAriaHidden @change="handleNumberLimitChange"> |
||||
|
<el-radio :label="1">不限制</el-radio> |
||||
|
<el-radio :label="2">限制</el-radio> |
||||
|
</el-radio-group> |
||||
|
<el-input v-if="form.numberLimit === 2" v-model="form.number" type="number" placeholder="请输入" @blur="validateNumber" /> |
||||
|
</el-form-item> |
||||
|
<el-row> |
||||
|
<el-form-item label="活动地点" prop="address"> |
||||
|
<el-input v-model="form.address" placeholder="请输入" style="width: 500px;" /> |
||||
|
</el-form-item> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-form-item label="活动封面" prop="imgPath"> |
||||
|
<div class="activity-upload"> |
||||
|
<img v-if="form.imgPath" :src="`${baseApi}/api/fileRelevant/getImg?imgType=2&imgId=${form.imgPath}`" class="upload-preview"> |
||||
|
<div v-else class="upload-preview-placeholder"> |
||||
|
<img :src="require('@/assets/images/system/default-img.jpg')" class="placeholder-img"> |
||||
|
</div> |
||||
|
<el-upload |
||||
|
class="upload-btn-box" |
||||
|
:action="baseApi + '/api/fileRelevant/uploadBookImg'" |
||||
|
:show-file-list="false" |
||||
|
:on-success="handleImgUploadSuccess" |
||||
|
:before-upload="beforeImgUpload" |
||||
|
:headers="uploadHeaders" |
||||
|
> |
||||
|
<div class="upload-btn-inner"> |
||||
|
<i class="el-icon-plus" /> |
||||
|
</div> |
||||
|
</el-upload> |
||||
|
</div> |
||||
|
</el-form-item> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
<quill-editor |
||||
|
v-model="editorContent" |
||||
|
style="width: 800px;" |
||||
|
:editor-content="editorContent" |
||||
|
:editor-ref="editorRef" |
||||
|
@contentData="contentData" |
||||
|
/> |
||||
|
</div> |
||||
|
</el-form> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button type="text" @click="crud.cancelCU">取消</el-button> |
||||
|
<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
<el-dialog |
||||
|
title="取消活动" |
||||
|
:visible.sync="cancelDialogVisible" |
||||
|
width="500px" |
||||
|
append-to-body |
||||
|
:close-on-click-modal="false" |
||||
|
> |
||||
|
<el-form :inline="true" :model="cancelForm"> |
||||
|
<el-form-item label="活动名称"> |
||||
|
<span>{{ cancelForm.title }}</span> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="取消原因" prop="reason"> |
||||
|
<el-input |
||||
|
v-model="cancelForm.reason" |
||||
|
type="textarea" |
||||
|
:rows="4" |
||||
|
placeholder="请输入取消活动的原因" |
||||
|
style="width: 380px;" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<div slot="footer" class="dialog-footer" style="margin-top: 20px;"> |
||||
|
<el-button @click="cancelDialogVisible = false">取消</el-button> |
||||
|
<el-button type="primary" @click="confirmCancel">确认取消</el-button> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
<!--表格渲染--> |
||||
|
<div class="container-wrap"> |
||||
|
<span class="right-top-line" /> |
||||
|
<span class="left-bottom-line" /> |
||||
|
<el-table |
||||
|
ref="table" |
||||
|
v-loading="crud.loading" |
||||
|
class="archives-table" |
||||
|
height="calc(100vh - 330px)" |
||||
|
:data="crud.data" |
||||
|
@selection-change="crud.selectionChangeHandler" |
||||
|
@row-click="clickRowHandler" |
||||
|
> |
||||
|
<el-table-column type="selection" align="center" width="55" /> |
||||
|
<el-table-column prop="icon" label="封面" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<img |
||||
|
style="height:100px;display:block;margin:0 auto;" |
||||
|
:src="scope.row.imgPath ? `${baseApi}/api/fileRelevant/getImg?imgType=2&imgId=${scope.row.imgPath}` : require('@/assets/images/cover-bg.png')" |
||||
|
alt="封面" |
||||
|
> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<!-- width="260" :show-overflow-tooltip="true" --> |
||||
|
<el-table-column label="标题" prop="title" /> |
||||
|
<el-table-column prop="startTime" label="开始时间" /> |
||||
|
<el-table-column prop="endTime" label="结束时间" /> |
||||
|
<el-table-column prop="number" label="活动人数"> |
||||
|
<template slot-scope="scope"> |
||||
|
{{ scope.row.number || '不限制' }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="gridName" label="实约人数"> |
||||
|
<template slot-scope="scope"> |
||||
|
{{ scope.row.gridName || '-' }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="status" label="状态" width="100" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<!-- <span :class="getStatusClass(scope.row.status)">{{ getStatusText(scope.row.status) }}</span> --> |
||||
|
<!-- 未开始 --> |
||||
|
<span v-if="scope.row.status === 0" class="row-state row-physical state-active">{{ getStatusText(scope.row.status) }}</span> |
||||
|
<!-- 进行中 --> |
||||
|
<span v-if="scope.row.status === 1" class="row-state row-binding state-active">{{ getStatusText(scope.row.status) }}</span> |
||||
|
<!-- 已结束 --> |
||||
|
<span v-if="scope.row.status === 2" class="row-state">{{ getStatusText(scope.row.status) }}</span> |
||||
|
<!-- 手动取消 --> |
||||
|
<span v-if="scope.row.status === 3" class="row-state row-lending state-active">{{ getStatusText(scope.row.status) }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="操作" width="100" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button |
||||
|
v-if="scope.row.status === 0 || scope.row.status === 1" |
||||
|
style="padding: 7px !important;" |
||||
|
icon="el-icon-circle-close" |
||||
|
@click="showCancelDialog(scope.row)" |
||||
|
>取消</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="create_time" label="创建日期" width="160"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div>{{ scope.row.create_time | parseTime }}</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<!--分页组件--> |
||||
|
<pagination v-if="crud.data.length!==0" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import crudWeChat from '@/api/digitalScreen/index' |
||||
|
import '@riophae/vue-treeselect/dist/vue-treeselect.css' |
||||
|
import CRUD, { presenter, header, form, crud } from '@crud/crud' |
||||
|
import crudOperation from '@crud/CRUD.operation' |
||||
|
import pagination from '@crud/Pagination' |
||||
|
import { mapGetters } from 'vuex' |
||||
|
import QuillEditor from '@/components/quillEditor/index.vue' |
||||
|
import { getToken } from '@/utils/auth' |
||||
|
|
||||
|
const defaultForm = { id: null, title: null, startTime: null, endTime: null, number: null, numberLimit: 1, address: null, imgPath: null } |
||||
|
export default { |
||||
|
name: 'Activity', |
||||
|
components: { crudOperation, pagination, QuillEditor }, |
||||
|
cruds() { |
||||
|
return CRUD({ title: '活动', url: 'api/screenSetting/initScreenBookRecommend2', crudMethod: { ...crudWeChat }, |
||||
|
optShow: { |
||||
|
add: true, |
||||
|
edit: true, |
||||
|
del: false, |
||||
|
download: false, |
||||
|
group: false, |
||||
|
reset: false |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
mixins: [presenter(), header(), form(defaultForm), crud()], |
||||
|
data() { |
||||
|
return { |
||||
|
permission: { add: [], edit: [], del: [] }, |
||||
|
imageUrl: require('@/assets/images/system/default-img.jpg'), |
||||
|
editorRef: 'test', |
||||
|
editorContent: '', |
||||
|
cancelDialogVisible: false, |
||||
|
cancelForm: { |
||||
|
title: '', |
||||
|
reason: '', |
||||
|
row: null |
||||
|
}, |
||||
|
rules: { |
||||
|
title: [ |
||||
|
{ required: true, message: '请输入活动标题', trigger: 'blur' } |
||||
|
], |
||||
|
startTime: [ |
||||
|
{ required: true, message: '请选择开始时间', trigger: 'change' } |
||||
|
], |
||||
|
endTime: [ |
||||
|
{ |
||||
|
required: true, |
||||
|
validator: (rule, value, callback) => { |
||||
|
if (!value) { |
||||
|
callback(new Error('请选择结束时间')) |
||||
|
} else if (this.form.startTime > value) { |
||||
|
callback(new Error('开始时间不得大于结束时间')) |
||||
|
} else { |
||||
|
callback() |
||||
|
} |
||||
|
}, |
||||
|
trigger: 'change' |
||||
|
} |
||||
|
], |
||||
|
numberLimit: [ |
||||
|
{ |
||||
|
validator: (rule, value, callback) => { |
||||
|
if (value === 2 && (!this.form.number || this.form.number.toString().trim() === '')) { |
||||
|
callback(new Error('请输入活动人数')) |
||||
|
} else { |
||||
|
callback() |
||||
|
} |
||||
|
}, |
||||
|
trigger: ['blur', 'change'] |
||||
|
} |
||||
|
], |
||||
|
address: [ |
||||
|
{ required: true, message: '请输入活动地点', trigger: 'blur' } |
||||
|
], |
||||
|
imgPath: [ |
||||
|
{ required: true, message: '请上传活动封面', trigger: 'change' } |
||||
|
] |
||||
|
}, |
||||
|
endPickerOptions: { |
||||
|
disabledDate: (time) => { |
||||
|
const startTime = new Date(this.form.startTime).getTime() |
||||
|
if (startTime) { |
||||
|
return (time.getTime()) <= startTime - 8.64e7 |
||||
|
} else { |
||||
|
return time.getTime() < Date.now() - 8.64e7 |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
...mapGetters([ |
||||
|
'baseApi', |
||||
|
'user' |
||||
|
]), |
||||
|
uploadHeaders() { |
||||
|
return { Authorization: getToken() } |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
[CRUD.HOOK.beforeRefresh]() { |
||||
|
this.crud.params.libcode = this.user.fonds.fondsNo |
||||
|
const mockData = [ |
||||
|
{ |
||||
|
id: 1, |
||||
|
imgPath: null, |
||||
|
title: '读书分享会', |
||||
|
startTime: '2026-01-15 14:00', |
||||
|
endTime: '2026-01-15 16:00', |
||||
|
number: null, |
||||
|
gridName: 45, |
||||
|
status: 1, |
||||
|
create_time: '2026-01-10 10:00:00' |
||||
|
}, |
||||
|
{ |
||||
|
id: 2, |
||||
|
imgPath: null, |
||||
|
title: '新书发布会', |
||||
|
startTime: '2026-01-20 10:00', |
||||
|
endTime: '2026-01-20 12:00', |
||||
|
number: 100, |
||||
|
gridName: 88, |
||||
|
status: 0, |
||||
|
create_time: '2026-01-12 14:30:00' |
||||
|
}, |
||||
|
{ |
||||
|
id: 3, |
||||
|
imgPath: null, |
||||
|
title: '作家见面会', |
||||
|
startTime: '2026-01-05 10:00', |
||||
|
endTime: '2026-01-05 12:00', |
||||
|
number: 80, |
||||
|
gridName: 75, |
||||
|
status: 2, |
||||
|
create_time: '2026-01-01 09:00:00' |
||||
|
}, |
||||
|
{ |
||||
|
id: 4, |
||||
|
imgPath: null, |
||||
|
title: '亲子阅读活动', |
||||
|
startTime: '2026-01-18 14:00', |
||||
|
endTime: '2026-01-18 16:00', |
||||
|
number: 60, |
||||
|
gridName: 30, |
||||
|
status: 3, |
||||
|
create_time: '2026-01-14 11:00:00' |
||||
|
} |
||||
|
] |
||||
|
this.crud.data = mockData |
||||
|
this.crud.loading = false |
||||
|
return false |
||||
|
}, |
||||
|
// 新增与编辑前做的操作 |
||||
|
[CRUD.HOOK.afterToCU](crud, form) { |
||||
|
}, |
||||
|
// 新增前 |
||||
|
[CRUD.HOOK.beforeToAdd]() { |
||||
|
}, |
||||
|
// 初始化编辑时候 |
||||
|
[CRUD.HOOK.beforeToEdit](crud, form) { |
||||
|
console.log('crud', crud.form) |
||||
|
form.numberLimit = form.number === null ? 1 : 2 |
||||
|
}, |
||||
|
// 提交前做的操作 |
||||
|
[CRUD.HOOK.afterValidateCU](crud) { |
||||
|
console.log(crud.form) |
||||
|
if (crud.form.numberLimit === 1) { |
||||
|
crud.form.number = null |
||||
|
} |
||||
|
delete crud.form.numberLimit |
||||
|
return false |
||||
|
}, |
||||
|
validateNumber() { |
||||
|
this.$refs.form.validateField('numberLimit') |
||||
|
}, |
||||
|
handleNumberLimitChange(val) { |
||||
|
if (val === 1) { |
||||
|
this.$refs.form.clearValidate('numberLimit') |
||||
|
} |
||||
|
}, |
||||
|
handleImgUploadSuccess(res) { |
||||
|
if (res.code === 200) { |
||||
|
this.form.imgPath = res.data |
||||
|
this.$message({ message: '上传成功', type: 'success', offset: 8 }) |
||||
|
} else { |
||||
|
this.$message({ message: res.message || '上传失败', type: 'error', offset: 8 }) |
||||
|
} |
||||
|
}, |
||||
|
beforeImgUpload(file) { |
||||
|
const isImage = file.type.startsWith('image/') |
||||
|
if (!isImage) { |
||||
|
this.$message({ message: '只可上传图片', type: 'error', offset: 8 }) |
||||
|
} |
||||
|
const isLt2M = file.size / 1024 / 1024 < 2 |
||||
|
if (!isLt2M) { |
||||
|
this.$message({ message: '图片大小不能超过2MB', type: 'error', offset: 8 }) |
||||
|
} |
||||
|
return isImage && isLt2M |
||||
|
}, |
||||
|
contentData(val) { |
||||
|
console.log('contentData', val) |
||||
|
this.editorContent = val |
||||
|
}, |
||||
|
showCancelDialog(row) { |
||||
|
this.cancelForm.title = row.title |
||||
|
this.cancelForm.reason = '' |
||||
|
this.cancelForm.row = row |
||||
|
this.cancelDialogVisible = true |
||||
|
}, |
||||
|
confirmCancel() { |
||||
|
if (!this.cancelForm.reason.trim()) { |
||||
|
this.$message({ message: '请输入取消原因', type: 'error', offset: 8 }) |
||||
|
return |
||||
|
} |
||||
|
this.cancelForm.row.status = 3 |
||||
|
this.cancelDialogVisible = false |
||||
|
this.$message({ message: '活动已取消', type: 'success', offset: 8 }) |
||||
|
}, |
||||
|
toDelete(datas) { |
||||
|
this.$confirm('此操作将删除当前所选活动<span>你是否还要继续？</span>', '提示', { |
||||
|
confirmButtonText: '继续', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning', |
||||
|
dangerouslyUseHTMLString: true |
||||
|
}).then(() => { |
||||
|
this.crud.delAllLoading = true |
||||
|
const ids = [] |
||||
|
datas.forEach(val => { |
||||
|
ids.push(val.id) |
||||
|
}) |
||||
|
// crudCollBook.del(ids).then(() => { |
||||
|
// this.$message({ message: '删除成功', type: 'success', offset: 8 }) |
||||
|
// this.crud.delAllLoading = false |
||||
|
// this.crud.refresh() |
||||
|
// }).catch(err => { |
||||
|
// this.crud.delAllLoading = false |
||||
|
// console.log(err) |
||||
|
// }) |
||||
|
}).catch(() => { |
||||
|
}) |
||||
|
}, |
||||
|
getStatusText(status) { |
||||
|
const statusMap = { |
||||
|
0: '未开始', |
||||
|
1: '进行中', |
||||
|
2: '已结束', |
||||
|
3: '手动取消' |
||||
|
} |
||||
|
return statusMap[status] || '未知' |
||||
|
}, |
||||
|
getStatusClass(status) { |
||||
|
const classMap = { |
||||
|
0: 'status-pending', |
||||
|
1: 'status-active', |
||||
|
2: 'status-ended', |
||||
|
3: 'status-canceled' |
||||
|
} |
||||
|
return classMap[status] || 'status-default' |
||||
|
}, |
||||
|
handleStatusToggle(row, val) { |
||||
|
row.status = val ? 1 : 3 |
||||
|
const message = val ? '活动已开启' : '活动已取消' |
||||
|
this.$message({ message, type: 'success', offset: 8 }) |
||||
|
}, |
||||
|
changeStatus(data, val) { |
||||
|
this.$confirm('此操作将禁用 / 启用当前活动 “' + data.title + '”' + '<span>你是否还要继续？</span>', '提示', { |
||||
|
confirmButtonText: '继续', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning', |
||||
|
dangerouslyUseHTMLString: true |
||||
|
}).then(() => { |
||||
|
// crudColumn.FetchQueryTopicStatus(data).then(res => { |
||||
|
// this.$message({ message: '修改成功', type: 'success', offset: 8 }) |
||||
|
// }).catch(() => { |
||||
|
// data.status = !data.status |
||||
|
// }) |
||||
|
}).catch(() => { |
||||
|
this.$message({ message: '已取消修改', offset: 8 }) |
||||
|
data.status = data.status ? 0 : 1 |
||||
|
}) |
||||
|
}, |
||||
|
clickRowHandler(row) { |
||||
|
this.$refs.table.clearSelection() |
||||
|
this.$refs.table.toggleRowSelection(row) |
||||
|
}, |
||||
|
handleDownload() { |
||||
|
// const url = 'https://qiniu.aiyxlib.com/1606123326451' |
||||
|
// const url = 'https://pics0.baidu.com/feed/7e3e6709c93d70cf0a85c39e612e4810bba12b2c.jpeg?token=c5bae0b80bd93b6d3db762d65f0ea89d' |
||||
|
// const url = 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf' |
||||
|
// const url = 'http://192.168.99.63:15000/api/version/download/file' |
||||
|
const url = 'http://192.168.99.63:14000/api/fileRelevant/getImg?imgType=2&imgId=062a010c-deb4-47d1-990c-2d4b2e2543e4' |
||||
|
this.$message({ message: '正在下载...', type: 'info', offset: 8 }) |
||||
|
fetch(url) |
||||
|
.then(response => response.blob()) |
||||
|
.then(blob => { |
||||
|
const link = document.createElement('a') |
||||
|
link.href = window.URL.createObjectURL(blob) |
||||
|
link.download = 'download' |
||||
|
document.body.appendChild(link) |
||||
|
link.click() |
||||
|
document.body.removeChild(link) |
||||
|
window.URL.revokeObjectURL(link.href) |
||||
|
this.$message({ message: '下载成功', type: 'success', offset: 8 }) |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
window.open(url, '_blank') |
||||
|
this.$message({ message: '下载失败，已在新窗口打开', type: 'warning', offset: 8 }) |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.activity-form{ |
||||
|
::v-deep .el-dialog{ |
||||
|
width: 1300px; |
||||
|
.activity-number{ |
||||
|
width: 380px; |
||||
|
margin-right: 0 !important; |
||||
|
.el-form-item__content{ |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
.el-radio-group{ |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
align-items: center; |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
.el-input__inner{ |
||||
|
width: 140px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.ql-container{ |
||||
|
height: 480px !important; |
||||
|
} |
||||
|
.dialog-footer{ |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.activity-upload{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
width: 500px; |
||||
|
gap: 16px; |
||||
|
.upload-preview{ |
||||
|
width: 300px; |
||||
|
height: 150px; |
||||
|
display: block; |
||||
|
object-fit: cover; |
||||
|
// border: 1px solid #e6e8ed; |
||||
|
border-radius: 4px; |
||||
|
} |
||||
|
.upload-preview-placeholder{ |
||||
|
width: 300px; |
||||
|
height: 150px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
border-radius: 4px; |
||||
|
// background-color: #fafafa; |
||||
|
overflow: hidden; |
||||
|
.placeholder-img{ |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
display: block; |
||||
|
object-fit: contain; |
||||
|
} |
||||
|
} |
||||
|
.upload-btn-box{ |
||||
|
width: 100px; |
||||
|
height: 100px; |
||||
|
border: 2px dashed #d9d9d9; |
||||
|
border-radius: 4px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
cursor: pointer; |
||||
|
transition: border-color 0.3s; |
||||
|
&:hover{ |
||||
|
border-color: #409EFF; |
||||
|
} |
||||
|
::v-deep .el-upload{ |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
.upload-btn-inner{ |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
cursor: pointer; |
||||
|
i{ |
||||
|
font-size: 28px; |
||||
|
color: #8c939d; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.status-pending{ |
||||
|
color: #E6A23C; |
||||
|
} |
||||
|
.status-active{ |
||||
|
color: #67C23A; |
||||
|
} |
||||
|
.status-ended{ |
||||
|
color: #909399; |
||||
|
} |
||||
|
.status-canceled{ |
||||
|
color: #F56C6C; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,579 @@ |
|||||
|
<template> |
||||
|
<div class="app-container row-container" style="height: calc(100vh - 140px);"> |
||||
|
<!--工具栏--> |
||||
|
<div class="head-container"> |
||||
|
<crudOperation :permission="permission"> |
||||
|
<template v-slot:middle> |
||||
|
<el-button slot="reference" size="mini" :loading="crud.delAllLoading" :disabled="crud.selections.length === 0" @click="toDelete(crud.selections)"> |
||||
|
<i class="iconfont icon-shanchu" /> |
||||
|
删除 |
||||
|
</el-button> |
||||
|
</template> |
||||
|
</crudOperation> |
||||
|
</div> |
||||
|
<!--表单渲染--> |
||||
|
<el-dialog class="activity-form" append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title"> |
||||
|
<!-- label-position="top" --> |
||||
|
<div class="setting-dialog"> |
||||
|
<el-form ref="form" label-position="top" :inline="true" :model="form" :rules="rules" size="small" label-width="90px"> |
||||
|
<div style="display: flex; justify-content: space-around; "> |
||||
|
<div style="width: 600px; margin: 0 10px; "> |
||||
|
<el-row> |
||||
|
<el-form-item label="活动标题" prop="title"> |
||||
|
<el-input v-model="form.title" placeholder="请输入" style="width: 500px;" /> |
||||
|
</el-form-item> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-form-item label="开始时间" prop="startTime"> |
||||
|
<el-date-picker |
||||
|
v-model="form.startTime" |
||||
|
type="datetime" |
||||
|
placeholder="选择日期时间" |
||||
|
format="yyyy-MM-dd HH:mm:ss" |
||||
|
value-format="yyyy-MM-dd HH:mm:ss" |
||||
|
:picker-options="{ |
||||
|
disabledDate: (time) =>{ |
||||
|
return time.getTime() < Date.now() - 8.64e7 |
||||
|
} |
||||
|
}" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="结束时间" prop="endTime"> |
||||
|
<el-date-picker |
||||
|
v-model="form.endTime" |
||||
|
type="datetime" |
||||
|
placeholder="选择日期时间" |
||||
|
:picker-options="endPickerOptions" |
||||
|
format="yyyy-MM-dd HH:mm:ss" |
||||
|
value-format="yyyy-MM-dd HH:mm:ss" |
||||
|
default-time="['23:59:59']" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
</el-row> |
||||
|
<el-form-item class="activity-number" label="活动人数" prop="activityPeople"> |
||||
|
<el-radio-group v-model="form.numberLimit" v-removeAriaHidden @change="handleNumberLimitChange"> |
||||
|
<el-radio :label="1">不限制</el-radio> |
||||
|
<el-radio :label="2">限制</el-radio> |
||||
|
</el-radio-group> |
||||
|
<el-input v-if="form.numberLimit === 2" v-model.number="form.activityPeople" type="number" placeholder="请输入" min="1" @blur="validateNumber" /> |
||||
|
</el-form-item> |
||||
|
<el-row> |
||||
|
<el-form-item label="活动地点" prop="activityLocation"> |
||||
|
<el-input v-model="form.activityLocation" placeholder="请输入" style="width: 500px;" /> |
||||
|
</el-form-item> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-form-item label="活动封面" prop="coverImage"> |
||||
|
<div class="activity-upload"> |
||||
|
<img v-if="form.coverImage" :src="`${baseApi}/api/fileRelevant/getImg?imgType=2&imgId=${form.coverImage}`" class="upload-preview"> |
||||
|
<div v-else class="upload-preview-placeholder"> |
||||
|
<img :src="require('@/assets/images/system/default-img.jpg')" class="placeholder-img"> |
||||
|
</div> |
||||
|
<el-upload |
||||
|
class="upload-btn-box" |
||||
|
:action="baseApi + '/api/fileRelevant/uploadBookImg'" |
||||
|
:show-file-list="false" |
||||
|
:on-success="handleImgUploadSuccess" |
||||
|
:before-upload="beforeImgUpload" |
||||
|
:headers="uploadHeaders" |
||||
|
> |
||||
|
<div class="upload-btn-inner"> |
||||
|
<i class="el-icon-plus" /> |
||||
|
</div> |
||||
|
</el-upload> |
||||
|
</div> |
||||
|
</el-form-item> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
<quill-editor |
||||
|
v-model="editorContent" |
||||
|
style="width: 800px;" |
||||
|
:editor-content="editorContent" |
||||
|
:editor-ref="editorRef" |
||||
|
@contentData="contentData" |
||||
|
/> |
||||
|
</div> |
||||
|
</el-form> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button type="text" @click="crud.cancelCU">取消</el-button> |
||||
|
<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
<el-dialog |
||||
|
title="取消活动" |
||||
|
:visible.sync="cancelDialogVisible" |
||||
|
width="600px" |
||||
|
class="closed-dialog" |
||||
|
append-to-body |
||||
|
:close-on-click-modal="false" |
||||
|
> |
||||
|
<el-form ref="cancelForm" :inline="true" :rules="cancelRules" :model="cancelForm"> |
||||
|
<el-form-item label="活动名称"> |
||||
|
<span>{{ cancelForm.title }}</span> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="取消原因" prop="reason"> |
||||
|
<el-input |
||||
|
v-model="cancelForm.reason" |
||||
|
type="textarea" |
||||
|
:rows="5" |
||||
|
placeholder="请输入取消活动的原因" |
||||
|
style="width: 480px;" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<div slot="footer" class="dialog-footer" style="margin-top: 20px;"> |
||||
|
<el-button @click="cancelDialogVisible = false">取消</el-button> |
||||
|
<el-button type="primary" @click="confirmCancel">确认</el-button> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
<ActivityDetail :visible.sync="detailVisible" :activity.sync="detailActivity" /> |
||||
|
<!--表格渲染--> |
||||
|
<div class="container-wrap"> |
||||
|
<span class="right-top-line" /> |
||||
|
<span class="left-bottom-line" /> |
||||
|
<el-table |
||||
|
ref="table" |
||||
|
v-loading="crud.loading" |
||||
|
class="archives-table" |
||||
|
height="calc(100vh - 330px)" |
||||
|
:data="crud.data" |
||||
|
@selection-change="crud.selectionChangeHandler" |
||||
|
@row-click="clickRowHandler" |
||||
|
@row-dblclick="dblclickRowHandler" |
||||
|
> |
||||
|
<el-table-column type="selection" align="center" width="55" /> |
||||
|
<el-table-column prop="coverImage" label="封面" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<img |
||||
|
style="height:80px;display:block;margin:0 auto;" |
||||
|
:src="scope.row.coverImage ? `${baseApi}/api/fileRelevant/getImg?imgType=2&imgId=${scope.row.coverImage}` : require('@/assets/images/system/default-img.jpg')" |
||||
|
alt="封面" |
||||
|
> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<!-- width="260" :show-overflow-tooltip="true" --> |
||||
|
<el-table-column prop="title" label="活动名称" /> |
||||
|
<el-table-column prop="startTime" label="开始时间" /> |
||||
|
<el-table-column prop="endTime" label="结束时间" /> |
||||
|
<el-table-column prop="activityPeople" label="活动人数"> |
||||
|
<template slot-scope="scope"> |
||||
|
{{ scope.row.activityPeople || '不限制' }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="gridName" label="实约人数"> |
||||
|
<template slot-scope="scope"> |
||||
|
{{ scope.row.gridName || '-' }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="status" label="状态" width="100" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span :class="getStatusClass(scope.row.status)">{{ scope.row.status }}</span> |
||||
|
|
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="操作" width="160" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<!-- <el-button |
||||
|
type="text" |
||||
|
icon="el-icon-edit" |
||||
|
@click="handleEdit(scope.row)" |
||||
|
>编辑</el-button> --> |
||||
|
<el-button |
||||
|
v-if="scope.row.status === '未开始' || scope.row.status === '进行中'" |
||||
|
type="text" |
||||
|
icon="el-icon-circle-close" |
||||
|
@click="showCancelDialog(scope.row)" |
||||
|
>取消</el-button> |
||||
|
<el-button |
||||
|
v-else-if="scope.row.status === '已取消' && canRestore(scope.row)" |
||||
|
type="text" |
||||
|
icon="el-icon-refresh" |
||||
|
@click="restoreActivity(scope.row)" |
||||
|
>恢复</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<!-- <el-table-column prop="create_time" label="创建日期" width="160"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div>{{ scope.row.create_time | parseTime }}</div> |
||||
|
</template> |
||||
|
</el-table-column> --> |
||||
|
</el-table> |
||||
|
<!--分页组件--> |
||||
|
<pagination v-if="crud.data.length!==0" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import crudWeChat from '@/api/weixin/index' |
||||
|
import '@riophae/vue-treeselect/dist/vue-treeselect.css' |
||||
|
import CRUD, { presenter, header, form, crud } from '@crud/crud' |
||||
|
import crudOperation from '@crud/CRUD.operation' |
||||
|
import pagination from '@crud/Pagination' |
||||
|
import { mapGetters } from 'vuex' |
||||
|
import QuillEditor from '@/components/quillEditor/index.vue' |
||||
|
import { getToken } from '@/utils/auth' |
||||
|
import ActivityDetail from './module/activityDetail.vue' |
||||
|
|
||||
|
const defaultForm = { id: null, title: null, startTime: null, endTime: null, activityPeople: null, numberLimit: 1, activityLocation: null, coverImage: null } |
||||
|
export default { |
||||
|
name: 'Activity', |
||||
|
components: { crudOperation, pagination, QuillEditor, ActivityDetail }, |
||||
|
cruds() { |
||||
|
return CRUD({ title: '活动', url: 'api/weixin/initActivityInfo', crudMethod: { ...crudWeChat }, |
||||
|
optShow: { |
||||
|
add: true, |
||||
|
edit: true, |
||||
|
del: false, |
||||
|
download: false, |
||||
|
group: false, |
||||
|
reset: false |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
mixins: [presenter(), header(), form(defaultForm), crud()], |
||||
|
data() { |
||||
|
return { |
||||
|
permission: { add: [], edit: [], del: [] }, |
||||
|
imageUrl: require('@/assets/images/system/default-img.jpg'), |
||||
|
editorRef: 'test', |
||||
|
editorContent: '', |
||||
|
cancelDialogVisible: false, |
||||
|
cancelForm: { |
||||
|
title: '', |
||||
|
reason: '', |
||||
|
row: null |
||||
|
}, |
||||
|
detailVisible: false, |
||||
|
detailActivity: {}, |
||||
|
rules: { |
||||
|
title: [ |
||||
|
{ required: true, message: '请输入活动标题', trigger: 'blur' } |
||||
|
], |
||||
|
startTime: [ |
||||
|
{ required: true, message: '请选择开始时间', trigger: 'change' } |
||||
|
], |
||||
|
endTime: [ |
||||
|
{ |
||||
|
required: true, |
||||
|
validator: (rule, value, callback) => { |
||||
|
if (!value) { |
||||
|
callback(new Error('请选择结束时间')) |
||||
|
} else if (this.form.startTime > value) { |
||||
|
callback(new Error('开始时间不得大于结束时间')) |
||||
|
} else { |
||||
|
callback() |
||||
|
} |
||||
|
}, |
||||
|
trigger: 'change' |
||||
|
} |
||||
|
], |
||||
|
activityPeople: [ |
||||
|
{ |
||||
|
validator: (rule, value, callback) => { |
||||
|
if (this.form.numberLimit === 2 && (!value || value < 1)) { |
||||
|
callback(new Error('限制人数最少为1')) |
||||
|
} else { |
||||
|
callback() |
||||
|
} |
||||
|
}, |
||||
|
trigger: ['blur', 'change'] |
||||
|
} |
||||
|
], |
||||
|
activityLocation: [ |
||||
|
{ required: true, message: '请输入活动地点', trigger: 'blur' } |
||||
|
], |
||||
|
coverImage: [ |
||||
|
{ required: true, message: '请上传活动封面', trigger: 'change' } |
||||
|
] |
||||
|
}, |
||||
|
cancelRules: { |
||||
|
reason: [ |
||||
|
{ required: true, message: '请输入取消原因', trigger: 'blur' } |
||||
|
] |
||||
|
}, |
||||
|
endPickerOptions: { |
||||
|
disabledDate: (time) => { |
||||
|
const startTime = new Date(this.form.startTime).getTime() |
||||
|
if (startTime) { |
||||
|
return (time.getTime()) <= startTime - 8.64e7 |
||||
|
} else { |
||||
|
return time.getTime() < Date.now() - 8.64e7 |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
...mapGetters([ |
||||
|
'baseApi', |
||||
|
'user' |
||||
|
]), |
||||
|
uploadHeaders() { |
||||
|
return { Authorization: getToken() } |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
[CRUD.HOOK.beforeRefresh]() { |
||||
|
this.crud.params.libcode = this.user.fonds.fondsNo |
||||
|
}, |
||||
|
// 新增与编辑前做的操作 |
||||
|
[CRUD.HOOK.afterToCU](crud, form) { |
||||
|
}, |
||||
|
// 新增前 |
||||
|
[CRUD.HOOK.beforeToAdd]() { |
||||
|
}, |
||||
|
// 初始化编辑时候 |
||||
|
[CRUD.HOOK.beforeToEdit](crud, form) { |
||||
|
form.numberLimit = form.activityPeople === 0 ? 1 : 2 |
||||
|
this.editorContent = form.activityContent |
||||
|
}, |
||||
|
// 提交前做的操作 |
||||
|
[CRUD.HOOK.afterValidateCU](crud) { |
||||
|
if (!this.editorContent.trim()) { |
||||
|
this.$message({ message: '请输入活动内容', type: 'error', offset: 8 }) |
||||
|
return false |
||||
|
} |
||||
|
crud.form.activityContent = this.editorContent |
||||
|
if (crud.form.numberLimit === 1) { |
||||
|
crud.form.activityPeople = 0 |
||||
|
} |
||||
|
delete crud.form.numberLimit |
||||
|
console.log('crud.form', crud.form) |
||||
|
return true |
||||
|
}, |
||||
|
validateNumber() { |
||||
|
this.$refs.form.validateField('activityPeople') |
||||
|
}, |
||||
|
handleNumberLimitChange(val) { |
||||
|
if (val === 1) { |
||||
|
this.$refs.form.clearValidate('activityPeople') |
||||
|
} |
||||
|
}, |
||||
|
handleImgUploadSuccess(res) { |
||||
|
if (res.code === 200) { |
||||
|
this.form.coverImage = res.data |
||||
|
this.$message({ message: '上传成功', type: 'success', offset: 8 }) |
||||
|
} else { |
||||
|
this.$message({ message: res.message || '上传失败', type: 'error', offset: 8 }) |
||||
|
} |
||||
|
}, |
||||
|
beforeImgUpload(file) { |
||||
|
const isImage = file.type.startsWith('image/') |
||||
|
if (!isImage) { |
||||
|
this.$message({ message: '只可上传图片', type: 'error', offset: 8 }) |
||||
|
} |
||||
|
const isLt2M = file.size / 1024 / 1024 < 2 |
||||
|
if (!isLt2M) { |
||||
|
this.$message({ message: '图片大小不能超过2MB', type: 'error', offset: 8 }) |
||||
|
} |
||||
|
return isImage && isLt2M |
||||
|
}, |
||||
|
contentData(val) { |
||||
|
console.log('contentData', val) |
||||
|
this.editorContent = val |
||||
|
}, |
||||
|
getStatusText(status) { |
||||
|
const statusMap = { |
||||
|
0: '未开始', |
||||
|
1: '进行中', |
||||
|
2: '已结束', |
||||
|
3: '已取消' |
||||
|
} |
||||
|
return statusMap[status] || '未知' |
||||
|
}, |
||||
|
getStatusClass(status) { |
||||
|
const classMap = { |
||||
|
'未开始': 'row-state row-physical state-active', |
||||
|
'进行中': 'row-state row-binding state-active', |
||||
|
'已结束': 'row-state', |
||||
|
'已取消': 'row-state row-lending state-active' |
||||
|
} |
||||
|
return classMap[status] || '' |
||||
|
}, |
||||
|
canRestore(row) { |
||||
|
const now = new Date().getTime() |
||||
|
const startTime = new Date(row.startTime).getTime() |
||||
|
const endTime = new Date(row.endTime).getTime() |
||||
|
const threeDays = 3 * 24 * 60 * 60 * 1000 |
||||
|
return (now < startTime) || (now >= startTime && now <= endTime && endTime - now >= threeDays) |
||||
|
}, |
||||
|
restoreActivity(row) { |
||||
|
this.$confirm('确定要恢复该活动吗？', '提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}).then(async() => { |
||||
|
const res = await crudWeChat.FetchCancelResumeActivity({ id: row.id }) |
||||
|
console.log('restoreActivity', res) |
||||
|
if (res.code !== 500) { |
||||
|
this.$message({ message: res, type: 'success', offset: 8 }) |
||||
|
this.crud.refresh() |
||||
|
} else { |
||||
|
this.$message({ message: res.message || '操作失败', type: 'error', offset: 8 }) |
||||
|
} |
||||
|
}).catch(() => {}) |
||||
|
}, |
||||
|
showCancelDialog(row) { |
||||
|
this.cancelForm.title = row.title |
||||
|
this.cancelForm.reason = '' |
||||
|
this.cancelForm.row = row |
||||
|
this.cancelDialogVisible = true |
||||
|
}, |
||||
|
confirmCancel() { |
||||
|
this.$refs.cancelForm.validate(async(valid) => { |
||||
|
if (valid) { |
||||
|
const res = await crudWeChat.FetchCancelResumeActivity({ id: this.cancelForm.row.id }) |
||||
|
console.log('res', res) |
||||
|
if (res.code !== 500) { |
||||
|
this.$message({ message: res, type: 'success', offset: 8 }) |
||||
|
this.crud.refresh() |
||||
|
} else { |
||||
|
this.$message({ message: res.message || '操作失败', type: 'error', offset: 8 }) |
||||
|
} |
||||
|
this.cancelDialogVisible = false |
||||
|
} else { |
||||
|
console.log('校验失败') |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
toDelete(datas) { |
||||
|
this.$confirm('此操作将删除当前所选活动<span>你是否还要继续？</span>', '提示', { |
||||
|
confirmButtonText: '继续', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning', |
||||
|
dangerouslyUseHTMLString: true |
||||
|
}).then(() => { |
||||
|
this.crud.delAllLoading = true |
||||
|
const ids = [] |
||||
|
datas.forEach(val => { |
||||
|
ids.push(val.id) |
||||
|
}) |
||||
|
// crudCollBook.del(ids).then(() => { |
||||
|
// this.$message({ message: '删除成功', type: 'success', offset: 8 }) |
||||
|
// this.crud.delAllLoading = false |
||||
|
// this.crud.refresh() |
||||
|
// }).catch(err => { |
||||
|
// this.crud.delAllLoading = false |
||||
|
// console.log(err) |
||||
|
// }) |
||||
|
}).catch(() => { |
||||
|
}) |
||||
|
}, |
||||
|
clickRowHandler(row) { |
||||
|
this.$refs.table.clearSelection() |
||||
|
this.$refs.table.toggleRowSelection(row) |
||||
|
}, |
||||
|
handleEdit(row) { |
||||
|
this.crud.toEdit(row) |
||||
|
}, |
||||
|
dblclickRowHandler(row) { |
||||
|
this.detailActivity = row |
||||
|
this.detailVisible = true |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.activity-form{ |
||||
|
::v-deep .el-dialog{ |
||||
|
width: 1300px; |
||||
|
.activity-number{ |
||||
|
width: 380px; |
||||
|
margin-right: 0 !important; |
||||
|
.el-form-item__content{ |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
.el-radio-group{ |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
align-items: center; |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
.el-input__inner{ |
||||
|
width: 140px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.ql-container{ |
||||
|
height: 480px !important; |
||||
|
} |
||||
|
.dialog-footer{ |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.activity-upload{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
width: 500px; |
||||
|
gap: 16px; |
||||
|
.upload-preview{ |
||||
|
width: 300px; |
||||
|
height: 150px; |
||||
|
display: block; |
||||
|
object-fit: cover; |
||||
|
// border: 1px solid #e6e8ed; |
||||
|
border-radius: 4px; |
||||
|
} |
||||
|
.upload-preview-placeholder{ |
||||
|
width: 300px; |
||||
|
height: 150px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
border-radius: 4px; |
||||
|
// background-color: #fafafa; |
||||
|
overflow: hidden; |
||||
|
.placeholder-img{ |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
display: block; |
||||
|
object-fit: contain; |
||||
|
} |
||||
|
} |
||||
|
.upload-btn-box{ |
||||
|
width: 100px; |
||||
|
height: 100px; |
||||
|
border: 2px dashed #d9d9d9; |
||||
|
border-radius: 4px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
cursor: pointer; |
||||
|
transition: border-color 0.3s; |
||||
|
&:hover{ |
||||
|
border-color: #409EFF; |
||||
|
} |
||||
|
::v-deep .el-upload{ |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
.upload-btn-inner{ |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
cursor: pointer; |
||||
|
i{ |
||||
|
font-size: 28px; |
||||
|
color: #8c939d; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.closed-dialog{ |
||||
|
::v-deep .el-dialog__footer{ |
||||
|
padding: 0 0 20px 0; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue