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