commit
This commit is contained in:
@jyuhsin
@@ -0,0 +1,162 @@
|
||||
const friend = {
|
||||
template:
|
||||
/*language=HTML*/
|
||||
`
|
||||
<div>
|
||||
<div class="banner-section">
|
||||
<div class="banner-content">
|
||||
<div class="banner-text">
|
||||
<h2>
|
||||
<label>您已累计打卡</label>
|
||||
<lable style="font-size: 30px"> {{ row.checkCount }} </lable>
|
||||
<label>天</label>
|
||||
</h2>
|
||||
<div class="tooltip">
|
||||
<div>请继续加油保持喔~</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="banner-image">
|
||||
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjggMTI4Ij48cGF0aCBkPSJNMTI1LjYgMTAyLjdsLTE5LTE2LjhtLTQuNy0yMy43bDExLjUtNi44TTU3LjQgMTZsMTEuNSAxMS43TTMxLjIgNTMuOGwyMy42IDcuOSIgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6I2ZmZjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMDtvcGFjaXR5Oi40Ii8+PHBhdGggZD0iTTY0LjEgMzEuN0w0NyA0OS45Yy0zIDMuMi0zLjEgOC4xLS4xIDExLjJsMjQuNCAyNWMzIDMuMSA3LjkgMy4yIDExIC4xTDk5IDY5YzMtMy4yIDMuMS04LjEuMS0xMS4yTDc0LjcgMzIuOGMtMyAzLjEtNy45IDMuMS0xMC42LTEuMXoiIHN0eWxlPSJmaWxsOiNmZmY7c3Ryb2tlOiNmZmY7c3Ryb2tlLW1pdGVybGltaXQ6MTAiLz48cGF0aCBkPSJNMTA4LjkgOTUuN2wtMTUuOC0xMi0xMi4yIDEzIDE0LjQgMTMuN2MuMyAyLjUgMi4zIDQuNSA0LjggNC41aDEzLjdjMi43IDAgNC45LTIuMiA0LjktNC45VjkzLjVjMC0yLjgtMi4xLTUtNC45LTV2OC40cy4xLTEuMi00LjkgMi44LjEtMyAuMS0zeiIgc3R5bGU9ImZpbGw6I2ZmZjtzdHJva2U6I2ZmZjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMCIvPjwvc3ZnPg=="
|
||||
alt="Feedback">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cards-container">
|
||||
<div @click="onOrder"
|
||||
class="sort"
|
||||
:style="pageForm.order ? 'color: #236eb4' : 'color: grey'"
|
||||
>
|
||||
获赞排行<i class="fa fa-sort"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<van-list
|
||||
v-model="loading"
|
||||
:finished="finished"
|
||||
:finished-text="tableData.length > 0 ? '没有更多了' : ''">
|
||||
<div class="content-container" v-if="tableData.length > 0" v-for="item in tableData">
|
||||
<div class="content-container-header">
|
||||
<div>
|
||||
<van-image v-if="item.sex === '男'" width="40" round height="40" src="/assets/platform/img/checkin/man.png"></van-image>
|
||||
<van-image v-if="item.sex === '女'" width="40" round height="40" src="/assets/platform/img/checkin/woman.png"></van-image>
|
||||
</div>
|
||||
<div class="ml10">
|
||||
<div class="title">{{item.userName}}</div>
|
||||
<div class="text">{{item.unitName}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-container-body">
|
||||
<div>{{item.content}}</div>
|
||||
<van-row class="mt5" v-if="item.files && item.files.length > 0">
|
||||
<van-col span="8" v-for="(file, index) in item.files">
|
||||
<van-image style="padding-right: 4px; width: 96%; height: 100px"
|
||||
@click="onImage(item.files, index)"
|
||||
:src="CREATE_PREVIEW_URL(file.id)"
|
||||
></van-image>
|
||||
</van-col>
|
||||
</van-row>
|
||||
</div>
|
||||
<div class="content-container-footer">
|
||||
<div>
|
||||
<span style="color: grey">{{$moment(item.creatTime).format('MM/DD HH:mm')}}</span>
|
||||
</div>
|
||||
<div @click="onPraise(item)">
|
||||
<van-icon name="good-job-o"
|
||||
:badge="item.praiseCount"
|
||||
size="18"
|
||||
:color="item.praised > 0 ? 'red' : ''"
|
||||
></van-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-list>
|
||||
<div v-if="tableData.length === 0" class="mt10">
|
||||
<van-empty class="custom-image" image="/none.svg" description="暂无数据"></van-empty>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
row: {},
|
||||
pageForm: {
|
||||
pageNumber: 1,
|
||||
pageSize: 5,
|
||||
totalCount: 0,
|
||||
order: false,
|
||||
},
|
||||
tableData: [],
|
||||
finished: false,
|
||||
loading: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onOpen(row) {
|
||||
this.row = row
|
||||
this.pageForm.pageNumber = 1
|
||||
this.tableData = []
|
||||
this.finished = false
|
||||
this.selectCheckData()
|
||||
},
|
||||
onOrder() {
|
||||
this.pageForm.order = !this.pageForm.order
|
||||
this.pageForm.pageNumber = 1
|
||||
this.tableData = []
|
||||
this.finished = false
|
||||
const toast = vant.Toast.loading({message: '获取排行中...', forbidClick: true, loadingType: 'spinner'})
|
||||
setTimeout(() => {
|
||||
this.selectCheckData()
|
||||
toast.clear()
|
||||
}, 200)
|
||||
},
|
||||
onPraise(row) {
|
||||
this.pageForm.pageNumber = 1
|
||||
this.tableData = []
|
||||
this.finished = false
|
||||
this.$axios.post("/platform/checkIn/apply/praise", { id: row.id, activityId: this.row.id }).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.$toast(res.msg)
|
||||
this.selectCheckData()
|
||||
}
|
||||
})
|
||||
},
|
||||
onImage(files, index) {
|
||||
vant.ImagePreview({
|
||||
images: files.map(o => CREATE_PREVIEW_URL(o.id)),
|
||||
startPosition: index,
|
||||
})
|
||||
},
|
||||
selectCheckData() {
|
||||
this.loading = true
|
||||
this.$set(this.pageForm, 'id', this.row.id)
|
||||
this.$set(this.pageForm, 'active', 0)
|
||||
this.$axios.post('/platform/checkIn/apply/pageData', this.pageForm)
|
||||
.then(res => {
|
||||
if (res.code === 0) {
|
||||
res.data.list.forEach(item => {
|
||||
if(item.files && item.files.length > 0) {
|
||||
item.files = JSON.parse(item.files)
|
||||
}
|
||||
})
|
||||
this.tableData = this.tableData.concat(res.data.list)
|
||||
if (this.tableData.length === res.data.totalCount) {
|
||||
this.finished = true
|
||||
} else {
|
||||
this.pageForm.pageNumber++
|
||||
}
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
},
|
||||
style: /*language=CSS*/ `
|
||||
.cards-container .sort {
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
margin: 10px 10px 10px 0;
|
||||
}
|
||||
.cards-container .sort i {
|
||||
font-size: 16px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
`
|
||||
}
|
||||
@@ -0,0 +1,173 @@
|
||||
<!--#
|
||||
layout("/mobile/platform.html"){
|
||||
#-->
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--primary-color: rgb(0, 78, 100);
|
||||
--primary-light: rgba(0, 78, 100, 0.1);
|
||||
--secondary-color: #37A6BD;
|
||||
--text-color: #333333;
|
||||
--text-secondary: #666666;
|
||||
--text-light: #999999;
|
||||
--bg-color: #f6f6f6;
|
||||
--card-bg: #ffffff;
|
||||
--border-color: #eeeeee;
|
||||
--success-color: #07c160;
|
||||
--warning-color: #ff976a;
|
||||
}
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
line-height: 1.5;
|
||||
}
|
||||
.page-container {
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
/* 顶部Banner */
|
||||
.banner-section {
|
||||
padding: 0;
|
||||
height: 180px;
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
}
|
||||
.banner-curve {
|
||||
display: none;
|
||||
}
|
||||
.banner-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 24px 20px 0;
|
||||
height: 100%;
|
||||
}
|
||||
.banner-text {
|
||||
color: white;
|
||||
z-index: 2;
|
||||
width: 60%;
|
||||
}
|
||||
.banner-text h2 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.banner-text .tooltip {
|
||||
font-size: 14px;
|
||||
opacity: 0.9;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 28px;
|
||||
}
|
||||
.banner-text .tooltip .van-button {
|
||||
width: 80px;
|
||||
height: 28px;
|
||||
}
|
||||
.banner-image {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
z-index: 2;
|
||||
}
|
||||
.banner-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
.cards-container {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
background-color: var(--bg-color);
|
||||
border-radius: 20px 20px 0 0;
|
||||
}
|
||||
.content-container {
|
||||
background-color: white;
|
||||
padding: 10px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.content-container-header {
|
||||
display: flex;
|
||||
}
|
||||
.content-container-header .title {
|
||||
color: #236eb4;
|
||||
font-weight: bold
|
||||
}
|
||||
.content-container-header .text {
|
||||
font-size: 12px;
|
||||
color: grey
|
||||
}
|
||||
.content-container-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 6px;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="app" v-cloak>
|
||||
<van-nav-bar title="主题打卡" left-text="返回" left-arrow @click-left="pjaxReplace('/platform/checkIn/list/h5')" fixed placeholder></van-nav-bar>
|
||||
|
||||
<div v-if="active === 0">
|
||||
<friend ref="friendRef"></friend>
|
||||
</div>
|
||||
<div v-if="active === 1">
|
||||
<mine ref="mineRef"></mine>
|
||||
</div>
|
||||
|
||||
<van-tabbar v-model="active" @change="onChange" placeholder>
|
||||
<van-tabbar-item icon="thumb-circle-o">动态</van-tabbar-item>
|
||||
<van-tabbar-item icon="user-o">我的</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
<!--#include('mine.js'){}#-->
|
||||
<!--#include('friend.js'){}#-->
|
||||
new Vue({
|
||||
el: '#app',
|
||||
mixins: [mobileMixins],
|
||||
data() {
|
||||
return {
|
||||
active: 1,
|
||||
id: GetQueryString('id'),
|
||||
activity: {},
|
||||
}
|
||||
},
|
||||
components: {
|
||||
"mine": mine,
|
||||
"friend": friend
|
||||
},
|
||||
methods: {
|
||||
onChange(index) {
|
||||
this.$nextTick(() => {
|
||||
if(index === 0) {
|
||||
this.$refs.friendRef.onOpen(this.activity)
|
||||
} else {
|
||||
this.$refs.mineRef.onOpen(this.activity)
|
||||
}
|
||||
})
|
||||
},
|
||||
async selectOne() {
|
||||
const res = await this.$axios.post('/platform/checkIn/manage/selectOne', {id: this.id})
|
||||
this.activity = res.data
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
await this.selectOne()
|
||||
this.$nextTick(() => {
|
||||
this.$refs.mineRef.onOpen(this.activity)
|
||||
})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
@@ -0,0 +1,240 @@
|
||||
const mine = {
|
||||
template:
|
||||
/*language=HTML*/
|
||||
`
|
||||
<div>
|
||||
<div class="banner-section">
|
||||
<div class="banner-content">
|
||||
<div class="banner-text">
|
||||
<h2>
|
||||
<label>您已累计打卡</label>
|
||||
<lable style="font-size: 30px"> {{ row.checkCount }} </lable>
|
||||
<label>天</label>
|
||||
</h2>
|
||||
<div class="tooltip">
|
||||
<div>请继续加油保持喔~</div>
|
||||
<div>
|
||||
<van-button v-if="sourceTableData.map(o => $moment(o.creatTime).format('YYYY-MM-DD'))?.includes($moment().format('YYYY-MM-DD'))"
|
||||
round size="small" color="#7ca4d8" type="default">
|
||||
今日已打卡
|
||||
</van-button>
|
||||
<van-button v-else @click="onApply" round icon="notes-o" size="small" color="#7ca4d8" type="default">
|
||||
打卡
|
||||
</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="banner-image">
|
||||
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjggMTI4Ij48cGF0aCBkPSJNMTI1LjYgMTAyLjdsLTE5LTE2LjhtLTQuNy0yMy43bDExLjUtNi44TTU3LjQgMTZsMTEuNSAxMS43TTMxLjIgNTMuOGwyMy42IDcuOSIgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6I2ZmZjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMDtvcGFjaXR5Oi40Ii8+PHBhdGggZD0iTTY0LjEgMzEuN0w0NyA0OS45Yy0zIDMuMi0zLjEgOC4xLS4xIDExLjJsMjQuNCAyNWMzIDMuMSA3LjkgMy4yIDExIC4xTDk5IDY5YzMtMy4yIDMuMS04LjEuMS0xMS4yTDc0LjcgMzIuOGMtMyAzLjEtNy45IDMuMS0xMC42LTEuMXoiIHN0eWxlPSJmaWxsOiNmZmY7c3Ryb2tlOiNmZmY7c3Ryb2tlLW1pdGVybGltaXQ6MTAiLz48cGF0aCBkPSJNMTA4LjkgOTUuN2wtMTUuOC0xMi0xMi4yIDEzIDE0LjQgMTMuN2MuMyAyLjUgMi4zIDQuNSA0LjggNC41aDEzLjdjMi43IDAgNC45LTIuMiA0LjktNC45VjkzLjVjMC0yLjgtMi4xLTUtNC45LTV2OC40cy4xLTEuMi00LjkgMi44LjEtMyAuMS0zeiIgc3R5bGU9ImZpbGw6I2ZmZjtzdHJva2U6I2ZmZjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMCIvPjwvc3ZnPg=="
|
||||
alt="Feedback">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cards-container" style="margin-bottom: 10px">
|
||||
<van-calendar :show-title="false" row-height="50" color="#236eb4"
|
||||
@select="onCalendar"
|
||||
:formatter="onFormatter"
|
||||
:poppable="false"
|
||||
:min-date="new Date($moment(row.startTime).format('YYYY-MM-DD'))"
|
||||
:max-date="new Date($moment(row.endTime).format('YYYY-MM-DD'))"
|
||||
:show-confirm="false"
|
||||
:style="{ height: '310px' }">
|
||||
</van-calendar>
|
||||
</div>
|
||||
<div class="content-container" v-if="tableData.length > 0" v-for="item in tableData">
|
||||
<div class="content-container-header">
|
||||
<div>
|
||||
<van-image v-if="item.sex === '男'" width="40" round height="40" src="/assets/platform/img/checkin/man.png"></van-image>
|
||||
<van-image v-if="item.sex === '女'" width="40" round height="40" src="/assets/platform/img/checkin/woman.png"></van-image>
|
||||
</div>
|
||||
<div class="ml10">
|
||||
<div class="title">{{item.userName}}</div>
|
||||
<div class="text">{{item.unitName}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-container-body">
|
||||
<div>{{item.content}}</div>
|
||||
<van-row class="mt5" v-if="item.files && item.files.length > 0">
|
||||
<van-col span="8" v-for="(file, index) in item.files">
|
||||
<van-image style="padding-right: 4px; width: 96%; height: 100px"
|
||||
@click="onImage(item.files, index)"
|
||||
:src="CREATE_PREVIEW_URL(file.id)"
|
||||
></van-image>
|
||||
</van-col>
|
||||
</van-row>
|
||||
</div>
|
||||
<div class="content-container-footer">
|
||||
<div>
|
||||
<span style="color: grey">{{$moment(item.creatTime).format('HH:mm')}}</span>
|
||||
<span class="ml5" style="color: #236eb4" @click="onDelete(item)">删除</span>
|
||||
</div>
|
||||
<div @click="onPraise(item)">
|
||||
<van-icon name="good-job-o"
|
||||
:badge="item.praiseCount"
|
||||
size="18"
|
||||
:color="item.praised > 0 ? 'red' : ''"
|
||||
></van-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="tableData.length === 0" class="mt10">
|
||||
<van-empty class="custom-image" image="/none.svg" description="暂无数据"></van-empty>
|
||||
</div>
|
||||
|
||||
<van-popup v-model:show="writeVisible" :style="{ height: '100%', width: '100%' }" position="right">
|
||||
<van-nav-bar title="填写打卡信息" left-text="返回" left-arrow @click-left="writeVisible = false" fixed placeholder></van-nav-bar>
|
||||
<div class="form-content">
|
||||
<van-field
|
||||
v-model="formData.content"
|
||||
rows="3"
|
||||
autosize
|
||||
type="textarea"
|
||||
placeholder="分享新鲜事..."
|
||||
></van-field>
|
||||
<vant-file-upload :files.sync="formData.files"
|
||||
:type="['jpg', 'jpeg', 'png']"
|
||||
style="margin-top: 30px; margin-left: 20px"></vant-file-upload>
|
||||
<van-cell-group border style="margin-top: 50px">
|
||||
<van-cell @click="openVisible = true" title="是否公开" icon="user-o"
|
||||
is-link border v-model="formData.openName"></van-cell>
|
||||
</van-cell-group>
|
||||
</div>
|
||||
<van-button @click="onSubmit" type="primary" block color="#1867b0">提交</van-button>
|
||||
</van-popup>
|
||||
|
||||
<van-action-sheet v-model="openVisible"
|
||||
:actions="[{ name: '公开', value: true }, { name: '仅自己可见', value: false }]"
|
||||
cancel-text="取消"
|
||||
@select="(action) => { formData.openName = action.name; formData.open = action.value }"
|
||||
close-on-click-action
|
||||
></van-action-sheet>
|
||||
</div>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
row: {},
|
||||
tableData: [],
|
||||
pageForm: {
|
||||
pageNumber: 1,
|
||||
pageSize: 5,
|
||||
totalCount: 0
|
||||
},
|
||||
writeVisible: false,
|
||||
openVisible: false,
|
||||
formData: {
|
||||
content: '',
|
||||
files: [],
|
||||
open: false,
|
||||
openName: '仅自己可见',
|
||||
},
|
||||
sourceTableData: [],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async onOpen(row) {
|
||||
this.row = row
|
||||
this.$set(this.formData, 'activityId', row.id)
|
||||
await this.selectCheckData()
|
||||
this.onCalendar(new Date())
|
||||
},
|
||||
onCalendar(date) {
|
||||
const day = this.$moment(date).format('YYYY-MM-DD')
|
||||
this.tableData = this.sourceTableData.filter(o => this.$moment(o.creatTime).format('YYYY-MM-DD') === day)
|
||||
},
|
||||
onFormatter(day) {
|
||||
const d = this.$moment(day.date).format('YYYY-MM-DD')
|
||||
const sourceData = this.sourceTableData.map(o => this.$moment(o.creatTime).format('YYYY-MM-DD'))
|
||||
day.bottomInfo = sourceData.includes(d) ? '已打卡' : ''
|
||||
day.className = sourceData.includes(d) ? 'text-success' : ''
|
||||
return day
|
||||
},
|
||||
onPraise(row) {
|
||||
this.$axios.post("/platform/checkIn/apply/praise", { id: row.id, activityId: this.row.id }).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.$toast(res.msg)
|
||||
this.selectCheckData()
|
||||
}
|
||||
})
|
||||
},
|
||||
onApply() {
|
||||
this.writeVisible = true
|
||||
},
|
||||
onSubmit() {
|
||||
this.$dialog.confirm({
|
||||
title: "提示",
|
||||
message: "您确定要提交吗？"
|
||||
}).then(() => {
|
||||
const formData = clone(this.formData)
|
||||
formData.files = JSON.stringify(formData.files)
|
||||
this.$axios.post("/platform/checkIn/apply/submit", formData).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.$toast(res.msg)
|
||||
this.writeVisible = false
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
onDelete(row) {
|
||||
this.$dialog.confirm({
|
||||
title: "提示",
|
||||
message: "您确定要删除吗？"
|
||||
}).then(() => {
|
||||
this.$axios.post("/platform/checkIn/apply/delete", {id: row.id}).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.$toast(res.msg)
|
||||
this.selectCheckData()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
onImage(files, index) {
|
||||
vant.ImagePreview({
|
||||
images: files.map(o => CREATE_PREVIEW_URL(o.id)),
|
||||
startPosition: index,
|
||||
})
|
||||
},
|
||||
async selectCheckData() {
|
||||
this.$set(this.pageForm, 'id', this.row.id)
|
||||
this.$set(this.pageForm, 'active', 1)
|
||||
this.$set(this.pageForm, 'order', false)
|
||||
const res = await this.$axios.post('/platform/checkIn/apply/pageData', this.pageForm)
|
||||
if(res.code === 0) {
|
||||
this.sourceTableData = res.data.list
|
||||
this.tableData = res.data.list
|
||||
this.tableData.forEach(item => {
|
||||
if(item.files && item.files.length > 0) {
|
||||
item.files = JSON.parse(item.files)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
},
|
||||
style: /*language=CSS*/ `
|
||||
.cards-container .van-calendar {
|
||||
border-radius: 20px 20px 0 0;
|
||||
margin-top: -20px;
|
||||
}
|
||||
.van-cell::after {
|
||||
border: none !important;
|
||||
}
|
||||
.form-content {
|
||||
padding: 10px;
|
||||
height: calc(100vh - 46px - 44px);
|
||||
overflow-y: auto
|
||||
}
|
||||
.custom-image {
|
||||
background-color: white;
|
||||
}
|
||||
.van-calendar__bottom-info {
|
||||
bottom: 1px !important;
|
||||
}
|
||||
.text-success .van-calendar__bottom-info {
|
||||
color: #0e9558;
|
||||
font-weight: bolder;
|
||||
}
|
||||
.van-calendar__selected-day .van-calendar__bottom-info {
|
||||
color: white;
|
||||
font-weight: bolder;
|
||||
}
|
||||
`
|
||||
}
|
||||
@@ -0,0 +1,130 @@
|
||||
<!--#
|
||||
layout("/mobile/platform.html"){
|
||||
#-->
|
||||
|
||||
<style>
|
||||
.van-count-down {
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="app" v-cloak>
|
||||
<van-nav-bar title="活动列表" left-text="返回" left-arrow @click-left="pjaxReplace('/mobile/index')" fixed placeholder></van-nav-bar>
|
||||
<van-sticky offset-top="46px">
|
||||
<van-dropdown-menu :close-on-click-outside="false" :close-on-click-overlay="false">
|
||||
<van-dropdown-item v-model="pageForm.year" :options="yearOptions" @change="doSearch"></van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</van-sticky>
|
||||
|
||||
<table-list api="/platform/checkIn/list/pageData" title="name" :page_form.sync="pageForm" ref="tableListRef" @ready="doSearch" img="cover">
|
||||
<template v-slot="{index,row}">
|
||||
<table-column label="创建人">{{row.userName}}</table-column>
|
||||
<table-column label="开始时间">{{row.startTime}}</table-column>
|
||||
<table-column label="结束时间">{{row.endTime}}</table-column>
|
||||
</template>
|
||||
<template #actions="{index,row}">
|
||||
<div class="action-btn" @click="onView(row)">
|
||||
<i class="fa fa-eye"></i>
|
||||
<span>查看</span>
|
||||
</div>
|
||||
<div class="action-btn" @click="onApply(row)">
|
||||
<i class="fa fa-edit"></i>
|
||||
<span>打卡</span>
|
||||
</div>
|
||||
</template>
|
||||
</table-list>
|
||||
|
||||
<van-action-sheet :close-on-click-overlay="false" title="详细信息" v-model="infoVisible">
|
||||
<div class="info-container">
|
||||
<div>
|
||||
<van-image class="info-img" height="186" width="100%" :src="CREATE_PREVIEW_URL(infoRow.cover)"></van-image>
|
||||
<div class="detail-container">
|
||||
<van-cell title="活动名称">{{ infoRow.name }}</van-cell>
|
||||
<van-cell title="月打卡率">{{ infoRow.rate + '%' }}</van-cell>
|
||||
<van-cell title="开始时间">{{ infoRow.startTime }}</van-cell>
|
||||
<van-cell title="结束时间">{{ infoRow.endTime }}</van-cell>
|
||||
<van-cell title="状态">{{ infoRow.enable ? '启用' : '禁用' }}</van-cell>
|
||||
<van-cell title="活动组别">{{ infoRow.groupName }}</van-cell>
|
||||
<van-cell title="活动介绍" class="direction-column-cell">
|
||||
<span v-html="infoRow.introduce"></span>
|
||||
</van-cell>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button">
|
||||
<van-button @click="onApply(infoRow)" type="primary" block color="#1867b0">
|
||||
<span v-if="time >= 0">
|
||||
去打卡
|
||||
</span>
|
||||
<template v-else>
|
||||
距离开始
|
||||
<van-count-down :time="Math.abs(time)" class="count-down" format="DD 天 HH 时 mm 分 ss 秒" @finish="time = 0"></van-count-down>
|
||||
</template>
|
||||
</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</van-action-sheet>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
new Vue({
|
||||
el: '#app',
|
||||
mixins: [mobileMixins],
|
||||
data() {
|
||||
return {
|
||||
pageForm: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
totalCount: 0,
|
||||
searchKeyword: '',
|
||||
year: new Date().getFullYear(),
|
||||
},
|
||||
time: 0,
|
||||
yearOptions: [],
|
||||
infoVisible: false,
|
||||
infoRow: {},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onView(row) {
|
||||
this.infoRow = row
|
||||
this.time = this.$moment().diff(this.$moment(row.startTime), 'milliseconds')
|
||||
this.infoVisible = true
|
||||
},
|
||||
onApply(row) {
|
||||
if(this.$moment().isBefore(this.$moment(row.startTime))) {
|
||||
this.onView(row)
|
||||
return
|
||||
}
|
||||
vant.Toast.clear
|
||||
this.$axios.post('/platform/checkIn/apply/validate', { activityId: row.id })
|
||||
.then(res => {
|
||||
if(res.code === 0) {
|
||||
pjaxReplace('/platform/checkIn/apply/h5?id=' + row.id)
|
||||
}
|
||||
}).catch(err => {
|
||||
vant.Dialog.alert({ title: '温馨提示', message: err.msg })
|
||||
})
|
||||
},
|
||||
doSearch() {
|
||||
this.$nextTick(() => {
|
||||
this.pageForm.pageNumber = 1
|
||||
this.pageForm.totalCount = 0
|
||||
this.$refs.tableListRef.doSearch()
|
||||
})
|
||||
},
|
||||
init() {
|
||||
for (let i = new Date().getFullYear() - 10; i <= new Date().getFullYear(); i++) {
|
||||
this.yearOptions.unshift({value: i, text: i + '年'},)
|
||||
}
|
||||
},
|
||||
},
|
||||
async created() {
|
||||
this.init()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
@@ -17,7 +17,8 @@
|
||||
<link rel="stylesheet" href="${base!}/assets/mobile/css/pdfh5.css">
|
||||
|
||||
<link rel="stylesheet" href="${base!}/assets/platform/plugins/vant/vant.css?v=1.0.1">
|
||||
|
||||
<link rel="stylesheet" href="${base!}/assets/platform/fonts/font-awesome.min.css"/>
|
||||
<link rel="stylesheet" href="${base!}/assets/platform/css/h5.css"/>
|
||||
<script>
|
||||
window._AMapSecurityConfig = {
|
||||
securityJsCode: "4fa1e1aeabba7eb9518129cf57ab17c1",
|
||||
@@ -45,7 +46,8 @@
|
||||
<script src="${base!}/assets/mobile/js/mProposal.js"></script>
|
||||
<script src="${base!}/assets/mobile/js/mCondolence.js"></script>
|
||||
<script src="${base!}/assets/mobile/js/mCommon.js"></script>
|
||||
|
||||
<!--axios-->
|
||||
<script src="${base!}/assets/platform/plugins/axios/axios.js"></script>
|
||||
|
||||
<script src="${base!}/assets/platform/plugins/moment/moment.min.js"></script>
|
||||
<script src="${base!}/assets/platform/module/condolence/common.js"></script>
|
||||
@@ -76,9 +78,12 @@
|
||||
<script>
|
||||
Vue.component('mobile-sign', httpVueLoader('/components/sign/mobileSign.vue'))
|
||||
Vue.component("text-editor", httpVueLoader("/components/plugins/TextEditor.vue?v=" + new Date().getTime()))
|
||||
Vue.component("table-list", httpVueLoader("/components/plugins/h5/TableList.vue?v=" + new Date().getTime()))
|
||||
Vue.component("table-column", httpVueLoader("/components/plugins/h5/TableColumn.vue?v=" + new Date().getTime()))
|
||||
|
||||
Vue.prototype.$auth = commonUtil.authService()
|
||||
Vue.prototype.$moment = moment
|
||||
Vue.prototype.$axios = commonUtil.axiosService()
|
||||
</script>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -0,0 +1,264 @@
|
||||
<!--#
|
||||
layout("/layouts/platform.html"){
|
||||
#-->
|
||||
|
||||
<div id="app" v-cloak>
|
||||
<guava ref="guava">
|
||||
<el-card shadow="never">
|
||||
<div class="search">
|
||||
<div class="search-item">
|
||||
<div class="search-item-label">年度：</div>
|
||||
<div class="search-item-option">
|
||||
<el-date-picker
|
||||
v-model="pageForm.year"
|
||||
type="year"
|
||||
format="yyyy"
|
||||
style="width: 100%"
|
||||
value-format="yyyy"
|
||||
@change="doSearch"
|
||||
clearable
|
||||
placeholder="请选择年度"
|
||||
>
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<div class="search-item-label">活动名称：</div>
|
||||
<div class="search-item-option">
|
||||
<el-input placeholder="请输入活动名称" v-model="pageForm.searchKeyword" clearable></el-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="search-query">
|
||||
<el-button @click="doSearch" icon="el-icon-search" type="primary">搜索</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card class="mt10" shadow="never">
|
||||
<table-tool :app="this" label="活动列表">
|
||||
<template #func>
|
||||
<el-button @click="onAdd" size="small" type="primary">新建活动</el-button>
|
||||
</template>
|
||||
</table-tool>
|
||||
<el-table :data="tableData" :size="tableSize">
|
||||
<el-table-column :index="indexMethod" align="center" header-align="center" label="序号" type="index" width="60"></el-table-column>
|
||||
<el-table-column
|
||||
:label="column.label"
|
||||
:prop="column.prop"
|
||||
:width="column.width"
|
||||
:sortable="column.sortable"
|
||||
align="center"
|
||||
header-align="center"
|
||||
show-overflow-tooltip
|
||||
v-for="column in tableColumns"
|
||||
>
|
||||
<template v-slot="{ row }" v-if="column.prop === 'enable'">
|
||||
<span v-if="row.enable" class="text-success">启用</span>
|
||||
<span v-else class="text-danger">禁用</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="250px">
|
||||
<template slot-scope="{row}">
|
||||
<el-button @click="onView(row)" size="mini" type="primary">查看</el-button>
|
||||
<el-button @click="onEdit(row)" size="mini" type="primary">编辑</el-button>
|
||||
<el-button @click="onDelete(row)" size="mini" type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--#include("/layouts/pagination.html"){}#-->
|
||||
</el-card>
|
||||
|
||||
<template #edit>
|
||||
<el-form ref="form" :model="formData" :rules="formRules" label-width="80px">
|
||||
<el-form-item label="活动名称" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入活动名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="月打卡率" prop="rate">
|
||||
<el-input v-model="formData.rate" placeholder="请输入月打卡率" type="number">
|
||||
<template slot="append">%</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="开始时间" prop="startTime">
|
||||
<el-date-picker v-model="formData.startTime"
|
||||
type="datetime"
|
||||
placeholder="请选择开始时间"
|
||||
style="width: 100%"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束时间" prop="endTime">
|
||||
<el-date-picker v-model="formData.endTime"
|
||||
type="datetime"
|
||||
placeholder="请选择结束时间"
|
||||
style="width: 100%"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="参加人员" prop="groupId">
|
||||
<div style="display: flex; column-gap: 10px">
|
||||
<el-select clearable v-model="formData.groupId" style="width: 100%" placeholder="请选择参加人员">
|
||||
<el-option :key="item.groupId"
|
||||
:label="item.groupName"
|
||||
:value="item.groupId"
|
||||
v-for="item in scopeOptions"></el-option>
|
||||
</el-select>
|
||||
<el-button @click="$refs.drawerUserScope.userScopeDialog = true"
|
||||
type="primary">设置
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否启用" prop="enable">
|
||||
<el-switch
|
||||
:active-value="true"
|
||||
:inactive-value="false"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#ff4949"
|
||||
v-model="formData.enable">
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动介绍" prop="introduce">
|
||||
<text-editor v-model="formData.introduce"></text-editor>
|
||||
</el-form-item>
|
||||
<el-form-item label="封面图" prop="cover">
|
||||
<image-Upload :file-size="10"
|
||||
:file-type="['png','jpg']"
|
||||
:height="200"
|
||||
:limit="1"
|
||||
:width="200"
|
||||
ref="imageUpload"
|
||||
v-model="formData.cover"
|
||||
></image-Upload>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div style="float: right;margin: 20px 0">
|
||||
<el-button @click="$refs.guava.index()">取 消</el-button>
|
||||
<el-button type="primary" @click="onSubmit">提 交</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #view>
|
||||
<el-descriptions :column="2" border>
|
||||
<el-descriptions-item label="活动名称">{{row.name}}</el-descriptions-item>
|
||||
<el-descriptions-item label="月打卡率">{{row.rate + '%' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="开始时间">{{row.startTime}}</el-descriptions-item>
|
||||
<el-descriptions-item label="结束时间">{{row.endTime}}</el-descriptions-item>
|
||||
<el-descriptions-item label="状态" :span="2">{{ row.enable ? '启用' : '禁用' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="活动介绍" :span="2">
|
||||
<div v-html="row.introduce"></div>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="封面图" :span="2">
|
||||
<el-image :src="CREATE_PREVIEW_URL(row.cover)" fit="cover" style="height: 100px;width: 100px"></el-image>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</template>
|
||||
|
||||
</guava>
|
||||
|
||||
<drawer-user-scope
|
||||
@group_change="getActivityGroup"
|
||||
ref="drawerUserScope"
|
||||
:group_id.sync="formData.groupId"
|
||||
></drawer-user-scope>
|
||||
|
||||
</div>
|
||||
<script>
|
||||
const vue = new Vue({
|
||||
el: '#app',
|
||||
mixins: [initTableMixins],
|
||||
data() {
|
||||
return{
|
||||
pageForm: {},
|
||||
tableColumns: [
|
||||
{label: '活动名称', prop: 'name'},
|
||||
{label: '创建人', prop: 'userName'},
|
||||
{label: '创建时间', prop: 'creatTime'},
|
||||
{label: '活动开始时间', prop: 'startTime'},
|
||||
{label: '活动结束时间', prop: 'endTime'},
|
||||
{label: '状态', prop: 'enable'},
|
||||
],
|
||||
formData: {
|
||||
enable: true,
|
||||
},
|
||||
formRules: {
|
||||
name: [{required: true, message: '必填', trigger: ['blur', 'change']}],
|
||||
rate: [{required: true, message: '必填', trigger: ['blur', 'change']}],
|
||||
startTime: [{required: true, message: '必填', trigger: ['blur', 'change']}],
|
||||
endTime: [{required: true, message: '必填', trigger: ['blur', 'change']}],
|
||||
enable: [{required: true, message: '必填', trigger: ['blur', 'change']}],
|
||||
cover: [{required: true, message: '必填', trigger: ['blur', 'change']}],
|
||||
groupId: [{required: true, message: '必填', trigger: ['blur', 'change']}],
|
||||
},
|
||||
row: {},
|
||||
scopeOptions: [],
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'drawer-user-scope': httpVueLoader('/components/plugins/DrawerUserScope.vue'),
|
||||
},
|
||||
methods: {
|
||||
onAdd() {
|
||||
this.$refs.guava.edit()
|
||||
},
|
||||
onView(row) {
|
||||
this.row = row
|
||||
this.$refs.guava.view()
|
||||
},
|
||||
onEdit(row) {
|
||||
this.formData = clone(row)
|
||||
this.$refs.guava.edit()
|
||||
},
|
||||
onDelete(row) {
|
||||
this.$confirm("您确定要删除吗？", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(() => {
|
||||
this.$axios.post("/platform/checkIn/manage/delete", { id: row.id }).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.$refs.guava.index()
|
||||
this.$message.success(res.msg)
|
||||
this.doSearch()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
onSubmit() {
|
||||
this.$confirm("您确定要提交吗？", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(() => {
|
||||
this.$axios.post("/platform/checkIn/manage/submit", this.formData).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.$refs.guava.index()
|
||||
this.$message.success(res.msg)
|
||||
this.doSearch()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
async getActivityUserScope() {
|
||||
const resp = await $.get('/platform/activity/basic/scope/getActivityUserScopeGroup')
|
||||
if (resp.code === 0) {
|
||||
this.scopeOptions = resp.data
|
||||
}
|
||||
},
|
||||
},
|
||||
async created(){
|
||||
await this.getActivityUserScope()
|
||||
this.pageData()
|
||||
},
|
||||
watch: {
|
||||
'formData.groupId': {
|
||||
async handler(newVal, oldVal) {
|
||||
await this.getActivityUserScope()
|
||||
this.$refs.drawerUserScope.userScopeDialog = false
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
@@ -0,0 +1,189 @@
|
||||
<!--#
|
||||
layout("/layouts/platform.html"){
|
||||
#-->
|
||||
<style>
|
||||
.el-button--text {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
<div id="app" v-cloak>
|
||||
<guava ref="guava">
|
||||
<el-card shadow="never">
|
||||
<div class="search">
|
||||
<div class="search-item">
|
||||
<div class="search-item-label">活动名称：</div>
|
||||
<div class="search-item-option">
|
||||
<el-select placeholder="请选择活动名称" v-model="pageForm.activityId" clearable style="width: 100%" @change="doSearch">
|
||||
<el-option v-for="item in activityOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<div class="search-item-label">日期：</div>
|
||||
<div class="search-item-option">
|
||||
<el-date-picker
|
||||
v-model="pageForm.day"
|
||||
clearable
|
||||
type="date"
|
||||
style="width: 100%"
|
||||
value-format="yyyy-MM-dd"
|
||||
placeholder="请选择日期">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<div class="search-item-label">姓名/工号：</div>
|
||||
<div class="search-item-option">
|
||||
<el-input placeholder="请输入姓名或者工号" v-model="pageForm.searchKeyword" clearable></el-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<div class="search-item-label">所属工会：</div>
|
||||
<div class="search-item-option">
|
||||
<el-select placeholder="请选择所属工会" v-model="pageForm.unionId" style="width: 100%;"
|
||||
clearable
|
||||
@change="flushUnits" @clear="flushUnits"
|
||||
filterable>
|
||||
<el-option v-for="item in unionOptions" :label="item.unionname" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<div class="search-item-label">所属单位：</div>
|
||||
<div class="search-item-option">
|
||||
<el-select placeholder="请选择所属单位" v-model="pageForm.unitId" style="width: 100%;"
|
||||
clearable="true"
|
||||
filterable="true">
|
||||
<el-option v-for="item in unitOptions" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="search-query">
|
||||
<el-button @click="doSearch" icon="el-icon-search" type="primary">搜索</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card class="mt10" shadow="never">
|
||||
<table-tool :app="this" label="打卡信息列表">
|
||||
<template #func>
|
||||
|
||||
</template>
|
||||
</table-tool>
|
||||
<el-table :data="tableData" :size="tableSize">
|
||||
<el-table-column :index="indexMethod" align="center" header-align="center" label="序号" type="index" width="60"></el-table-column>
|
||||
<el-table-column
|
||||
:label="column.label"
|
||||
:prop="column.prop"
|
||||
:width="column.width"
|
||||
:sortable="column.sortable"
|
||||
align="center"
|
||||
header-align="center"
|
||||
show-overflow-tooltip
|
||||
v-for="column in tableColumns"
|
||||
>
|
||||
<template v-slot="{ row }" v-if="column.prop === 'files'">
|
||||
<el-button type="text" @click="onView(row)">{{ JSON.parse(row.files)?.length || 0 }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="100">
|
||||
<template slot-scope="{row}">
|
||||
<el-button @click="onDelete(row)" size="mini" type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--#include("/layouts/pagination.html"){}#-->
|
||||
</el-card>
|
||||
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
:visible.sync="dialogVisible"
|
||||
title="打卡信息"
|
||||
top="40px"
|
||||
width="40%">
|
||||
|
||||
<el-descriptions :column="2" border>
|
||||
<el-descriptions-item label="附件信息">
|
||||
<file-upload v-if="infoRow.files && infoRow.files.length"
|
||||
:files="JSON.parse(infoRow.files)"
|
||||
view></file-upload>
|
||||
<span v-else>暂无</span>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<span class="dialog-footer" slot="footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</guava>
|
||||
</div>
|
||||
<script>
|
||||
const vue = new Vue({
|
||||
el: '#app',
|
||||
mixins: [initTableMixins],
|
||||
data() {
|
||||
return{
|
||||
pageForm: {},
|
||||
activityOptions: [],
|
||||
unionOptions: [],
|
||||
unitOptions: [],
|
||||
tableColumns: [
|
||||
{label: '活动名称', prop: 'activityName'},
|
||||
{label: '打卡人', prop: 'userName'},
|
||||
{label: '打卡时间', prop: 'creatTime'},
|
||||
{label: '打卡内容', prop: 'content'},
|
||||
{label: '附件', prop: 'files'},
|
||||
{label: '所属单位', prop: 'unitName'},
|
||||
{label: '所属工会', prop: 'unionName'},
|
||||
],
|
||||
|
||||
dialogVisible: false,
|
||||
infoRow: {},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onView(row) {
|
||||
this.infoRow = row
|
||||
this.dialogVisible = true
|
||||
},
|
||||
onDelete(row) {
|
||||
this.$confirm("您确定要删除吗？", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(() => {
|
||||
this.$axios.post("/platform/checkIn/apply/delete", { id: row.id }).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.$message.success(res.msg)
|
||||
this.doSearch()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
async flushUnits() {
|
||||
this.$set(this.pageForm, "unitId", "")
|
||||
if ("${@shiro.hasRole('sysadmin')||@shiro.hasRole('A06')||@shiro.hasRole('H03')}" === 'true') {
|
||||
this.unitOptions = await getUnits(this.pageForm.unionId)
|
||||
} else {
|
||||
this.unitOptions = await getUnits("${@shiro.getPrincipalProperty('unit').getUnionid()}")
|
||||
}
|
||||
},
|
||||
async selectAll() {
|
||||
const res = await this.$axios.post('/platform/checkIn/manage/selectAll')
|
||||
this.activityOptions = res.data
|
||||
if(this.activityOptions.length > 0) {
|
||||
this.$set(this.pageForm, "activityId", this.activityOptions[0].id)
|
||||
}
|
||||
},
|
||||
},
|
||||
async created() {
|
||||
this.unionOptions = await getUnions()
|
||||
this.unitOptions = await getUnits()
|
||||
await this.selectAll()
|
||||
this.pageData()
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
@@ -0,0 +1,128 @@
|
||||
<!--#
|
||||
layout("/layouts/platform.html"){
|
||||
#-->
|
||||
<style>
|
||||
.el-button--text {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
<div id="app" v-cloak>
|
||||
<guava ref="guava">
|
||||
<el-card shadow="never">
|
||||
<div class="search">
|
||||
<div class="search-item">
|
||||
<div class="search-item-label">活动名称：</div>
|
||||
<div class="search-item-option">
|
||||
<el-select placeholder="请选择活动名称" v-model="pageForm.activityId" clearable style="width: 100%" @change="doSearch">
|
||||
<el-option v-for="item in activityOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<div class="search-item-label">姓名/工号：</div>
|
||||
<div class="search-item-option">
|
||||
<el-input placeholder="请输入姓名或者工号" v-model="pageForm.searchKeyword" clearable></el-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<div class="search-item-label">所属工会：</div>
|
||||
<div class="search-item-option">
|
||||
<el-select placeholder="请选择所属工会" v-model="pageForm.unionId" style="width: 100%;"
|
||||
clearable
|
||||
@change="flushUnits" @clear="flushUnits"
|
||||
filterable>
|
||||
<el-option v-for="item in unionOptions" :label="item.unionname" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<div class="search-item-label">所属单位：</div>
|
||||
<div class="search-item-option">
|
||||
<el-select placeholder="请选择所属单位" v-model="pageForm.unitId" style="width: 100%;"
|
||||
clearable="true"
|
||||
filterable="true">
|
||||
<el-option v-for="item in unitOptions" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="search-query">
|
||||
<el-button @click="doSearch" icon="el-icon-search" type="primary">搜索</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card class="mt10" shadow="never">
|
||||
<table-tool :app="this" label="打卡信息列表">
|
||||
<template #func>
|
||||
<el-button @click="onExport" size="small" type="primary">导出名单</el-button>
|
||||
</template>
|
||||
</table-tool>
|
||||
<el-table :data="tableData" :size="tableSize">
|
||||
<el-table-column :index="indexMethod" align="center" header-align="center" label="序号" type="index" width="60"></el-table-column>
|
||||
<el-table-column
|
||||
:label="column.label"
|
||||
:prop="column.prop"
|
||||
:width="column.width"
|
||||
:sortable="column.sortable"
|
||||
align="center"
|
||||
header-align="center"
|
||||
show-overflow-tooltip
|
||||
v-for="column in tableColumns"
|
||||
>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--#include("/layouts/pagination.html"){}#-->
|
||||
</el-card>
|
||||
</guava>
|
||||
</div>
|
||||
<script>
|
||||
const vue = new Vue({
|
||||
el: '#app',
|
||||
mixins: [initTableMixins],
|
||||
data() {
|
||||
return{
|
||||
pageForm: {},
|
||||
activityOptions: [],
|
||||
unionOptions: [],
|
||||
unitOptions: [],
|
||||
tableColumns: [
|
||||
{label: '活动名称', prop: 'activityName'},
|
||||
{label: '打卡人', prop: 'userName'},
|
||||
{label: '打卡人工号', prop: 'loginName'},
|
||||
{label: '打卡次数', prop: 'checkCount'},
|
||||
{label: '所属单位', prop: 'unitName'},
|
||||
{label: '所属工会', prop: 'unionName'},
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onExport() {
|
||||
this.$downLoad('/platform/checkIn/summary/export', this.pageForm)
|
||||
},
|
||||
async flushUnits() {
|
||||
this.$set(this.pageForm, "unitId", "")
|
||||
if ("${@shiro.hasRole('sysadmin')||@shiro.hasRole('A06')||@shiro.hasRole('H03')}" === 'true') {
|
||||
this.unitOptions = await getUnits(this.pageForm.unionId)
|
||||
} else {
|
||||
this.unitOptions = await getUnits("${@shiro.getPrincipalProperty('unit').getUnionid()}")
|
||||
}
|
||||
},
|
||||
async selectAll() {
|
||||
const res = await this.$axios.post('/platform/checkIn/manage/selectAll')
|
||||
this.activityOptions = res.data
|
||||
if(this.activityOptions.length > 0) {
|
||||
this.$set(this.pageForm, "activityId", this.activityOptions[0].id)
|
||||
}
|
||||
},
|
||||
},
|
||||
async created() {
|
||||
this.unionOptions = await getUnions()
|
||||
this.unitOptions = await getUnits()
|
||||
await this.selectAll()
|
||||
this.pageData()
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
Reference in New Issue
Block a user