commit
This commit is contained in:
@jyuhsin
@@ -10,8 +10,8 @@ system.send=提 交
|
||||
system.sending=正在提交...
|
||||
system.cancel=取 消
|
||||
system.confirm=确 认
|
||||
system.success=处理成功
|
||||
system.error=处理失败
|
||||
system.success=操作成功
|
||||
system.error=操作失败
|
||||
system.paramserror=表单参数错误
|
||||
system.ok=确定
|
||||
system.close=取消
|
||||
@@ -78,4 +78,4 @@ globals.button.disable=禁 用
|
||||
|
||||
globals.table.column.operation=操作
|
||||
globals.table.column.true=是
|
||||
globals.table.column.false=否
|
||||
globals.table.column.false=否
|
||||
|
||||
@@ -0,0 +1,310 @@
|
||||
:root {
|
||||
--tab-bar-height: 50px;
|
||||
--color-primary: #1867b0;
|
||||
--color-black: #000;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
html, body, #app {
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #f7f8fa;
|
||||
overflow-x: hidden;
|
||||
font-size: 16px
|
||||
}
|
||||
|
||||
.main-page {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.page-wrapper {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.page-showtabbar .page-wrapper {
|
||||
height: calc(100% - var(--tab-bar-height) - env(safe-area-inset-bottom));
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#container {
|
||||
/*padding: 10px;*/
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.direction-column-field.van-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 10px;
|
||||
}
|
||||
|
||||
.direction-column-field.van-field .van-field__label {
|
||||
max-width: 100%;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.form-button-cell {
|
||||
background: #f1f1f1 !important;
|
||||
}
|
||||
|
||||
.table-list .table-card {
|
||||
margin: 10px;
|
||||
border-radius: 10px;
|
||||
background: #FFF;
|
||||
padding: 15px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.table-list .table-card .van-cell {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.table-list .table-card .van-cell:not(:last-child)::after {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.table-list .table-card .table-card-footer .van-cell__value {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.van-search .van-search__content .van-field__field-wrap {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.w-e-toolbar {
|
||||
z-index: 11 !important;
|
||||
}
|
||||
|
||||
.w-e-text-container {
|
||||
z-index: 10 !important;
|
||||
}
|
||||
|
||||
.van-cell-rich-text, .van-cell-rich-text img, .van-cell-rich-text image {
|
||||
max-width: 100%;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.process-title {
|
||||
font-size: 15px;
|
||||
color: var(--color-black);
|
||||
font-weight: 600;
|
||||
margin: 10px 0 10px 0 !important;
|
||||
padding: 10px;
|
||||
position: relative;
|
||||
line-height: 1.1;
|
||||
font-family: inherit;
|
||||
/*background: #f1f1f1;*/
|
||||
}
|
||||
|
||||
.process-title::before {
|
||||
content: "";
|
||||
width: 5px;
|
||||
background: var(--color-primary);
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.custom-list-loading {
|
||||
background-color: unset;
|
||||
}
|
||||
|
||||
.custom-list-loading .van-icon {
|
||||
font-size: 108px;
|
||||
}
|
||||
|
||||
.list-card {
|
||||
margin: 20px 10px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 10px;
|
||||
padding: 15px;
|
||||
border-bottom: 1px solid #ededed;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.list-card:not(:last-child) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.list-card-title {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.list-card-body {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.list-card-body-img {
|
||||
flex: 0 0 auto;
|
||||
width: 130px;
|
||||
height: 90px;
|
||||
}
|
||||
|
||||
.list-card-body-img img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 5px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
|
||||
.list-card-body-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
|
||||
.list-card-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.list-card-footer .van-button {
|
||||
|
||||
}
|
||||
|
||||
/*************************覆盖vant默认CSS********************************/
|
||||
.van-dropdown-menu__bar{
|
||||
box-shadow: unset;
|
||||
}
|
||||
|
||||
|
||||
/*****************************申请表单CSS********************************/
|
||||
.form-container {
|
||||
padding-bottom: 80px;
|
||||
background: #f9f9f9;
|
||||
}
|
||||
|
||||
.form-container .form-group {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.form-container .form-actions {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 12px 16px;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.form-container .form-actions .van-button {
|
||||
flex: 1;
|
||||
margin: 0 8px;
|
||||
border-radius: 4px;
|
||||
height: 40px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.form-container .van-cell-group {
|
||||
margin-bottom: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.form-container .van-cell-group__title {
|
||||
font-size: 15px;
|
||||
color: var(--color-black);
|
||||
font-weight: 600;
|
||||
padding: 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.form-container .van-cell-group__title::before{
|
||||
content: "";
|
||||
width: 5px;
|
||||
background: var(--color-primary);
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.form-container .van-field__label {
|
||||
width: 90px;
|
||||
color: #323233;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.form-container .van-field__value {
|
||||
color: #323233;
|
||||
}
|
||||
|
||||
.form-container .van-cell {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.form-container .van-cell:not(:last-child)::after {
|
||||
left: 16px;
|
||||
right: 16px;
|
||||
}
|
||||
|
||||
.form-container .direction-column-field .van-field__label {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.form-container .direction-column-field .van-field__body {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.form-container .direction-column-field .van-field__control {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
/***************************查看详情CSS********************************/
|
||||
.detail-container {
|
||||
background: #f9f9f9
|
||||
}
|
||||
|
||||
.detail-container .van-cell-group__title{
|
||||
font-size: 15px;
|
||||
color: var(--color-black);
|
||||
font-weight: 600;
|
||||
padding: 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.detail-container .van-cell-group__title::before{
|
||||
content: "";
|
||||
width: 5px;
|
||||
background: var(--color-primary);
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.detail-container .direction-column-cell{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.detail-container .direction-column-cell .van-cell__value{
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@@ -451,7 +451,7 @@ module.exports = {
|
||||
const lastIndexOf = file.name.lastIndexOf(".")
|
||||
const type = this.type.map(v => v.toLowerCase()).includes(file.name.substr(lastIndexOf + 1).toLowerCase())
|
||||
if (!type) {
|
||||
this.$message.warning(`上传文件只能是 ${this.type.map(v => v.toLowerCase()).join("/")} 格式!`);
|
||||
this.$toast(`上传文件只能是 ${this.type.map(v => v.toLowerCase()).join("/")} 格式!`);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
@@ -668,4 +668,4 @@ module.exports = {
|
||||
.van-image-preview .van-image-preview__close-icon--top-right {
|
||||
font-size: 50px !important;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,62 @@
|
||||
<script>
|
||||
module.exports = {
|
||||
name: "TableColumn",
|
||||
props: {
|
||||
label: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
value: {
|
||||
type: [String, Number],
|
||||
required: false
|
||||
},
|
||||
label_suffix:{
|
||||
type: String,
|
||||
default: "："
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="table-column">
|
||||
<!-- 左侧 Label -->
|
||||
<div class="label">
|
||||
<slot name="label">
|
||||
{{ label }}
|
||||
{{label_suffix}}
|
||||
</slot>
|
||||
</div>
|
||||
<!-- 右侧 Value -->
|
||||
<div class="value">
|
||||
<slot>{{ value }}</slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.table-column {
|
||||
display: flex;
|
||||
padding: 6px 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
flex-shrink: 0;
|
||||
max-width: 120px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #555;
|
||||
font-size: 14px;
|
||||
flex-grow: 1; /* 动态占据剩余部分 */
|
||||
white-space: nowrap; /* 防止换行 */
|
||||
overflow: hidden; /* 隐藏溢出的部分 */
|
||||
text-overflow: ellipsis; /* 省略号 */
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,290 @@
|
||||
<template>
|
||||
<van-pull-refresh v-model="tableRefreshing" @refresh="onRefresh">
|
||||
<div v-if="tableData.length === 0" class="empty-state">
|
||||
<van-empty description="暂无数据"></van-empty>
|
||||
</div>
|
||||
<van-list v-if="tableData && tableData.length>0"
|
||||
v-model="tableLoading"
|
||||
:finished="tableFinished"
|
||||
finished-text="没有更多了"
|
||||
@load="onLoad">
|
||||
<div class="table-list-container">
|
||||
<div v-for="(row, index) in tableData" :key="index" class="table-list-item">
|
||||
<slot name="header" :index="index" :row="row">
|
||||
<div class="item-header">
|
||||
<div class="item-title">{{ calcTitle(row) }}</div>
|
||||
<enum-tag :value="row.instanceState" name="ProcessInstanceStateEnum" label_key="message"
|
||||
size="small"></enum-tag>
|
||||
</div>
|
||||
</slot>
|
||||
|
||||
<div style="display: flex;column-gap: 10px"
|
||||
:style="{'max-height':img ? '100px':'unset', 'overflow': img ? 'hidden':'unset' }">
|
||||
<div class="img-container" v-if="img">
|
||||
<img :src="CREATE_PREVIEW_URL(row[img])" alt="" style="object-fit: cover">
|
||||
</div>
|
||||
<div style="width: 100%">
|
||||
<slot :index="index" :row="row"></slot>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-actions">
|
||||
<slot name="actions" :index="index" :row="row"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-list>
|
||||
</van-pull-refresh>
|
||||
</template>
|
||||
<script>
|
||||
module.exports = {
|
||||
name: "TableList",
|
||||
props: {
|
||||
api: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
page_form: {
|
||||
type: Object,
|
||||
required: true,
|
||||
default: () => {
|
||||
return {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
totalCount: 0,
|
||||
searchKeyword: ""
|
||||
}
|
||||
}
|
||||
},
|
||||
json: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
img: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
page_form: {
|
||||
handler(newVal, oldVal) {
|
||||
this.localPageForm = {...newVal}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
tableLoading: false,
|
||||
tableFinished: false,
|
||||
tableRefreshing: false,
|
||||
localPageForm: {...this.page_form}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
calcTitle(row) {
|
||||
if (!this.title) return ""
|
||||
// 处理key1.key2.key3 这样的形式
|
||||
const keys = this.title.split(".")
|
||||
|
||||
let val = JSON.parse(JSON.stringify(row));
|
||||
for (let key of keys) {
|
||||
if (val == null || typeof val !== 'object') {
|
||||
return "";
|
||||
}
|
||||
val = val[key];
|
||||
}
|
||||
return val == null ? "" : val;
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
if (this.tableFinished) return
|
||||
this.localPageForm.pageNumber++
|
||||
this.$emit("update:page_form", {...this.localPageForm})
|
||||
this.pageData()
|
||||
},
|
||||
|
||||
pageData() {
|
||||
this.tableLoading = true
|
||||
this.$axios.post(this.api, this.json ? ({pageForm: JSON.stringify(this.localPageForm)}) : this.localPageForm).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.tableData = this.tableData.concat(res.data.list)
|
||||
this.localPageForm.totalCount = res.data.totalCount
|
||||
if (this.tableData.length >= this.localPageForm.totalCount) {
|
||||
this.tableFinished = true
|
||||
}
|
||||
this.$emit("update:page_form", {...this.localPageForm})
|
||||
}
|
||||
}).finally(() => {
|
||||
console.log(this.tableLoading)
|
||||
this.tableLoading = false
|
||||
console.log(this.tableLoading)
|
||||
this.tableRefreshing = false
|
||||
})
|
||||
},
|
||||
doSearch() {
|
||||
this.tableFinished = false
|
||||
this.tableData = []
|
||||
this.localPageForm.pageNumber = 1
|
||||
this.$emit("update:page_form", {...this.localPageForm})
|
||||
this.pageData()
|
||||
},
|
||||
onRefresh() {
|
||||
this.localPageForm.pageNumber = 1
|
||||
this.$emit("update:page_form", {...this.localPageForm})
|
||||
this.doSearch()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$emit("ready")
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.table-list-container {
|
||||
padding: 0;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.table-list-container .table-list-item {
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #eaecef;
|
||||
padding: 16px;
|
||||
position: relative;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.table-list-container .table-list-item:last-child {
|
||||
border-bottom: none;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.table-list-container .table-list-item .item-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.table-list-container .table-list-item .item-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #1f2f3d;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
flex: 1;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.table-list-container .table-list-item .img-container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.table-list-container .table-list-item .img-container img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
|
||||
.table-list-container .table-list-item .item-meta {
|
||||
display: flex;
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
margin-bottom: 5px;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.table-list-container .table-list-item .meta-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.table-list-container .table-list-item .meta-item i {
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
width: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.table-list-container .table-list-item .item-content {
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.table-list-container .table-list-item .item-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 12px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px dashed #eaecef;
|
||||
color: #909399;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.table-list-container .table-list-item .item-actions {
|
||||
display: flex;
|
||||
column-gap: 20px;
|
||||
justify-content: end;
|
||||
margin-top: 15px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #eaecef;
|
||||
}
|
||||
|
||||
.table-list-container .table-list-item .action-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
font-size: 14px;
|
||||
color: var(--color-primary);
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.table-list-container .table-list-item .action-btn i {
|
||||
margin-right: 6px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.table-list-container .table-list-item .action-btn.delete {
|
||||
color: #ff0000;
|
||||
}
|
||||
|
||||
.table-list-container .table-list-item .action-btn.review {
|
||||
color: #67c23a;
|
||||
}
|
||||
|
||||
.table-list-container .empty-state {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.table-list-container .empty-state i {
|
||||
font-size: 60px;
|
||||
margin-bottom: 16px;
|
||||
color: #dcdee0;
|
||||
}
|
||||
|
||||
.table-list-container .empty-state p {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
@@ -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