453 lines
20 KiB
Vue
453 lines
20 KiB
Vue
<!--suppress ALL -->
|
|
<template>
|
|
<section class="appThreeMeetingUser init-list-table bg369">
|
|
<ai-title title="统计详情" isShowBack @onBackClick="$parent.goBack()" isShowBottomBorder></ai-title>
|
|
<div class="main-content">
|
|
<el-row class="searchBar border-radius2" type="flex" justify="space-between" :style="search.style" :gutter="2" style="border-bottom: 1px solid #eee;">
|
|
<el-col style="margin-bottom:6px">
|
|
<el-row :gutter="8" type="flex">
|
|
<section v-for="(item,i) in columns" :key="i">
|
|
<el-col v-if="item.type=='select'" :span="4">
|
|
<el-select size="small" v-model="search[item.prop]" :placeholder=" item.label" @change="$forceUpdate(),page.current=1,getAppThreeMeetingUser()" clearable>
|
|
<el-option v-for="(op,j) in dict.getDict(item.dict)" :key="j" :label="op.dictName"
|
|
:value="op.dictValue"/>
|
|
</el-select>
|
|
</el-col>
|
|
<el-col v-else-if="item.type=='time'" :span="8" type="flex">
|
|
<span class="dateTitle">{{item.label}}</span>
|
|
<el-date-picker size="small" v-model="search[item.prop]" placeholder="请选择" type="daterange"
|
|
:start-placeholder="item.prop+'开始时间'"
|
|
:end-placeholder="item.prop+'结束日期'"></el-date-picker>
|
|
</el-col>
|
|
<el-col v-else-if="item.type=='num'" :span="8" style="display: flex;" type="flex">
|
|
<span class="dateTitle">{{item.label}}</span>
|
|
<ai-range v-model="search[item.prop]" />
|
|
</el-col>
|
|
</section>
|
|
</el-row>
|
|
</el-col>
|
|
<el-col style="width: auto;display: flex;margin-bottom:6px">
|
|
<el-col>
|
|
<el-input size="small" v-model="search.meetingUserName" placeholder="姓名"
|
|
prefix-icon="iconfont iconSearch" clearable @keyup.enter.native="page.current=1,getAppThreeMeetingUser()"></el-input>
|
|
</el-col>
|
|
<el-button size="mini" type="primary" icon="iconfont iconSearch" style="margin-left:5px;"
|
|
@click="page.current=1,getAppThreeMeetingUser()">查询
|
|
</el-button>
|
|
<el-button size="mini" icon="el-icon-refresh-right" style="margin-left:5px;" @click="resetSearch">
|
|
重置
|
|
</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
<el-table ref="multipleTable" :data="tableData" style="margin-top:16px;"
|
|
header-cell-class-name="table-header"
|
|
tooltip-effect="light" row-class-name="table-row" cell-class-name="table-cell" @selection-change="handleSelectionChange">
|
|
<el-table-column prop="meetingUserName" label="姓名" align="center">
|
|
<div slot-scope="{row}">{{row.meetingUserName || "-"}}</div>
|
|
</el-table-column>
|
|
<el-table-column prop="joinStatus" label="参会情况" align="center">
|
|
<div slot-scope="{row}"> {{dict.getLabel('joinStatus',row.joinStatus)||'-'}}</div>
|
|
</el-table-column>
|
|
<el-table-column prop="absence" label="请假原因">
|
|
<div slot-scope="{row}">{{row.absence || "-"}}</div>
|
|
</el-table-column>
|
|
<el-table-column prop="signMethod" label="签到方式" align="center">
|
|
<div slot-scope="{row}"> {{dict.getLabel('signMethod',row.signMethod)||'-'}}</div>
|
|
</el-table-column>
|
|
<el-table-column prop="signStatus" label="签到状态" align="center">
|
|
<div slot-scope="{row}"> {{dict.getLabel('signStatus',row.signStatus)||'-'}}</div>
|
|
</el-table-column>
|
|
<el-table-column prop="signTime" label="签到时间" align="center">
|
|
<div slot-scope="{row}">{{row.signTime || "-"}}</div>
|
|
</el-table-column>
|
|
<el-table-column prop="signUserName" label="代签人" align="center">
|
|
<div slot-scope="{row}">{{row.signUserName || "-"}}</div>
|
|
</el-table-column>
|
|
<el-table-column prop="operate" label="操作" width="240" align="center">
|
|
<div slot-scope="{row}">
|
|
<span class="iconfont iconqiandao icon-color89B" style="cursor: pointer;"
|
|
title="签到" @click="changeStatus(row, 0)" v-if="row.signMethod != 1"></span>
|
|
<span class="iconfont iconqingjia icon-color89B" style="cursor: pointer;"
|
|
title="请假" @click="changeStatus(row, 1)"></span>
|
|
<span class="iconfont iconRepulse icon-color89B" style="cursor: pointer;"
|
|
title="重置" v-if="meetingStatus != 4" @click="changeStatus(row, 2)"></span>
|
|
</div>
|
|
<!-- <el-radio-group slot-scope="{row}" v-model="row.operation" @change="changeStatus(row)">
|
|
<el-radio :label="0">签到</el-radio>
|
|
<el-radio :label="1">请假</el-radio>
|
|
<el-radio :label="2" v-if="meetingStatus != 4">重置</el-radio>
|
|
</el-radio-group> -->
|
|
</el-table-column>
|
|
<div slot="empty" class="no-data" style="height:160px;"></div>
|
|
</el-table>
|
|
<div class="pagination">
|
|
<el-pagination background
|
|
@current-change="handleCurrentChange"
|
|
@size-change="handleSizeChange"
|
|
layout="total,prev, pager, next,sizes, jumper"
|
|
:total="page.total">
|
|
</el-pagination>
|
|
</div>
|
|
</div>
|
|
<el-dialog :visible.sync="leaveMask" title="请假" width="520px" class="mask label-110"
|
|
:close-on-click-modal="false"
|
|
:before-close="maskInit" @close="maskInit">
|
|
<div class="content input-240">
|
|
<el-form ref="leaveMask" :rules="rules" :model="leaveInfo" label-width="100px">
|
|
<el-form-item label="请假原因：" class="user" prop="leaveText">
|
|
<el-input type="textarea" :rows="3" v-model="leaveInfo.leaveText" placeholder="请输入请假原因"/>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<div class="operation">
|
|
<el-button class="delete-btn" @click="maskInit" mini>取消</el-button>
|
|
<el-button type="primary" @click="confirmMask('leaveMask')" mini>确认</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapState} from "vuex";
|
|
|
|
export default {
|
|
name: "appThreeMeetingUser",
|
|
props: {
|
|
instance: Function,
|
|
dict: Object,
|
|
permissions: Function,
|
|
meetingId:String,
|
|
detail: Object,
|
|
meetingStatus: String
|
|
},
|
|
data() {
|
|
return {
|
|
activeName: 'first',
|
|
tableData: [],
|
|
columns: [
|
|
{
|
|
label: '编号',
|
|
prop: 'id',
|
|
type: '',
|
|
dict: ''
|
|
},
|
|
{
|
|
label: '会议编号',
|
|
prop: 'meetingId',
|
|
type: '',
|
|
dict: ''
|
|
},
|
|
{
|
|
label: '参会人员角色',
|
|
prop: 'meetingUserRole',
|
|
type: '',
|
|
dict: 'meetingUserRole'
|
|
},
|
|
{
|
|
label: '会议人员编号',
|
|
prop: 'meetingUserId',
|
|
type: '',
|
|
dict: ''
|
|
},
|
|
{
|
|
label: '会议人员姓名',
|
|
prop: 'meetingUserName',
|
|
type: '',
|
|
dict: ''
|
|
},
|
|
{
|
|
label: '参会情况',
|
|
prop: 'joinStatus',
|
|
type: 'select',
|
|
dict: 'joinStatus'
|
|
},
|
|
{
|
|
label: '签到状态',
|
|
prop: 'signStatus',
|
|
type: 'select',
|
|
dict: 'signStatus'
|
|
},
|
|
{
|
|
label: '签到方式',
|
|
prop: 'signMethod',
|
|
type: 'select',
|
|
dict: 'signMethod'
|
|
},
|
|
{
|
|
label: '请假原因',
|
|
prop: 'absence',
|
|
type: '',
|
|
dict: ''
|
|
},
|
|
{
|
|
label: '创建时间',
|
|
prop: 'createDate',
|
|
type: '',
|
|
dict: ''
|
|
},
|
|
{
|
|
label: '签到人',
|
|
prop: 'signUserId',
|
|
type: '',
|
|
dict: ''
|
|
},
|
|
{
|
|
label: '签到时间',
|
|
prop: 'signTime',
|
|
type: '',
|
|
dict: ''
|
|
},
|
|
{
|
|
label: '操作',
|
|
prop: 'operate',
|
|
type: '',
|
|
dict: ''
|
|
},
|
|
],
|
|
search: {
|
|
style: {},
|
|
meetingUserName: "",
|
|
meetingId:""
|
|
},
|
|
page: {
|
|
current: 1,
|
|
size: 10,
|
|
total: 0,
|
|
},
|
|
leaveMask: false,
|
|
leaveInfo: {
|
|
leaveText: ''
|
|
},
|
|
rules: {
|
|
leaveText: [{ required: true, message: '请输入请假原因', trigger: 'blur' }]
|
|
},
|
|
meetingInfo: {}, //点击操作的item
|
|
}
|
|
},
|
|
methods: {
|
|
confirmMask(formName) {
|
|
this.$refs[formName].validate((valid) => {
|
|
if (valid) {
|
|
this.signMeeting(0, 1, '', this.leaveInfo.leaveText, this.user.info.id, this.user.info.name, '', '请假成功')
|
|
} else {
|
|
return false;
|
|
}
|
|
});
|
|
},
|
|
maskInit() {
|
|
this.leaveMask = false
|
|
},
|
|
changeStatus(item, operation) {
|
|
this.meetingInfo = item
|
|
if(this.meetingStatus == 0) { //0未发布 1已发布 2已取消 3进行中 4已结束
|
|
this.$message({ message: '会议未发布，请发布后再操作', type: 'warning'});
|
|
return
|
|
}
|
|
if(item.meetingSignMethod == 1) { //签到方式为不签到
|
|
this.$message({ message: '签到方式选择为不签到，不可操作', type: 'warning'});
|
|
return
|
|
}
|
|
if(this.meetingStatus == 1) {
|
|
let d = new Date()
|
|
let time = item.meetingBefore
|
|
let beginTimestamp = new Date(time.replace(/\-/g, "\/"))
|
|
let newTimestamp = new Date(d.getFullYear() + '/' + (d.getMonth() + 1) + '/' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes())
|
|
if (newTimestamp < beginTimestamp) {
|
|
this.$message({ message: '未到签到时间，不可操作', type: 'warning'});
|
|
return
|
|
}
|
|
}
|
|
if(this.meetingStatus == 2) {
|
|
this.$message({ message: '会议已取消，不可操作', type: 'warning'});
|
|
return
|
|
}
|
|
|
|
// if(this.meetingStatus == 3) {
|
|
// let d = new Date()
|
|
// let time = item.meetingAfter
|
|
// let endTimestamp = new Date(time.replace(/\-/g, "\/"))
|
|
// let newTimestamp = new Date(d.getFullYear() + '/' + (d.getMonth() + 1) + '/' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes())
|
|
// if (endTimestamp > newTimestamp) { //代签
|
|
// this.operationStatus(operation)
|
|
// }
|
|
// }
|
|
|
|
if(!operation) { //0为签到
|
|
this.$confirm('确定签到吗?', '', {
|
|
type: 'info'
|
|
}).then(() => {
|
|
this.operationStatus(operation)
|
|
}).catch(() => {
|
|
return
|
|
});
|
|
}else {
|
|
this.operationStatus(operation)
|
|
}
|
|
},
|
|
operationStatus(status) {
|
|
if(status == 0) { //签到
|
|
let signTime = new Date().getFullYear() + '-' + this.isDate(new Date().getMonth() + 1) + '-' + this.isDate(new Date().getDate()) + ' ' + this.isDate(new Date().getHours()) + ':' + this.isDate(new Date().getMinutes()) + ':' + this.isDate(new Date().getSeconds())
|
|
this.signMeeting(1, 0, 1, '', this.user.info.id, this.user.info.name, signTime, '签到成功')
|
|
}
|
|
if(status == 1) { //请假
|
|
this.leaveMask = true
|
|
this.leaveInfo.leaveText = ''
|
|
}
|
|
if(status == 2) { //重置
|
|
this.$confirm(`确认将该成员签到状态重置吗？`, {type: 'warning'}).then(() => {
|
|
this.signMeeting('', '', '', '', '', '', '', '重置成功')
|
|
})
|
|
}
|
|
},
|
|
isDate(num) {
|
|
if(num < 10) {
|
|
num = '0' + num
|
|
}
|
|
return num
|
|
},
|
|
signMeeting(signStatus, joinStatus, signMethod, absence, signUserId, signUserName, signTime, succText) {
|
|
var params = {
|
|
signStatus,
|
|
joinStatus,
|
|
signMethod,
|
|
absence,
|
|
signUserId,
|
|
signUserName,
|
|
signTime,
|
|
id: this.meetingInfo.id,
|
|
meetingUserId: this.meetingInfo.meetingUserId,
|
|
meetingId: this.meetingInfo.meetingId
|
|
}
|
|
this.instance.post("/app/appthreemeetinguser/addOrUpdate", params).then(res => {
|
|
if(res.code==0){
|
|
this.maskInit()
|
|
this.$message.success(succText)
|
|
this.getAppThreeMeetingUser()
|
|
}
|
|
})
|
|
|
|
},
|
|
isPermit(params) {
|
|
return this.permissions ? this.permissions(params) : false
|
|
},
|
|
handleSelectionChange(){},
|
|
//分页
|
|
handleCurrentChange(val) {
|
|
this.page.current = val;
|
|
this.getAppThreeMeetingUser();
|
|
},
|
|
//分页
|
|
handleSizeChange(val){
|
|
this.page.size = val
|
|
this.page.current = 1
|
|
this.getAppThreeMeetingUser()
|
|
},
|
|
//重置
|
|
resetSearch() {
|
|
this.page.current = 1
|
|
this.page.size = 10
|
|
this.columns.map(c => {if(c.type) this.search[c.prop] = null})
|
|
Object.keys(this.search).forEach((e)=>{
|
|
this.search[e]=null;
|
|
})
|
|
this.getAppThreeMeetingUser()
|
|
},
|
|
//列表
|
|
getAppThreeMeetingUser() {
|
|
var meetingId = this.meetingId
|
|
this.instance.post("/app/appthreemeetinguser/list", null, {
|
|
params: {
|
|
...this.search,
|
|
...this.page,
|
|
meetingId
|
|
}
|
|
}).then(res => {
|
|
if(res.code==0){
|
|
this.tableData=res.data.records;
|
|
this.page.total=res.data.total;
|
|
this.tableData.map((item) => {
|
|
if(item.signStatus == 1) { //签到
|
|
item.operation = 0
|
|
}
|
|
if(item.joinStatus == 1) { //请假
|
|
item.operation = 1
|
|
}
|
|
return item
|
|
})
|
|
}
|
|
}
|
|
)
|
|
},
|
|
//请假,签到,取消代签
|
|
updateStatus(row,text){
|
|
var body = {};
|
|
if(text == '请假'){
|
|
body = {
|
|
id:row.id,
|
|
joinStatus:'1'
|
|
}
|
|
}
|
|
if(text == '签到'){
|
|
body = {
|
|
id:row.id,
|
|
signStatus:'1'
|
|
}
|
|
}
|
|
if(text == '取消代签'){
|
|
body = {
|
|
id:row.id,
|
|
signStatus:'0'
|
|
}
|
|
}
|
|
console.log(body)
|
|
this.$confirm(`是否${text}?`, {type: 'warning'}).then(() => {
|
|
this.instance.post("/app/appthreemeetinguser/addOrUpdate", body).then((res) => {
|
|
if(res.code ==0){
|
|
this.maskInit()
|
|
this.getAppThreeMeetingUser()
|
|
this.$message.success(`操作成功!`)
|
|
}
|
|
})
|
|
})
|
|
|
|
}
|
|
|
|
},
|
|
mounted() {
|
|
if (this.dict) this.dict.load(this.columns.map(e => e.type == 'select' ? e.dict : ''))
|
|
// console.log(this.detail)
|
|
this.resetSearch()
|
|
},
|
|
computed: {
|
|
...mapState(['user']),
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.appThreeMeetingUser{
|
|
:deep( .el-radio){
|
|
margin-right: 16px!important;
|
|
}
|
|
:deep( .el-radio__label){
|
|
padding-left: 4px!important;
|
|
}
|
|
.operation {
|
|
overflow: hidden;
|
|
// position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 64px;
|
|
line-height: 64px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #f3f6f9;
|
|
box-shadow: inset 0 1px 0 0 #eeeeee;
|
|
}
|
|
:deep( .el-textarea){
|
|
width: 362px;
|
|
}
|
|
}
|
|
</style>
|