1000 lines
53 KiB
HTML
1000 lines
53 KiB
HTML
<style>
|
||
.avatar-uploader .el-upload {
|
||
border: 1px dashed #d9d9d9;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.avatar-uploader .el-upload:hover {
|
||
border-color: #409EFF;
|
||
}
|
||
|
||
.avatar-uploader-icon {
|
||
font-size: 28px;
|
||
color: #8c939d;
|
||
width: 178px;
|
||
height: 178px;
|
||
line-height: 178px;
|
||
text-align: center;
|
||
}
|
||
|
||
.avatar {
|
||
width: 178px;
|
||
height: 178px;
|
||
display: block;
|
||
}
|
||
|
||
#signMap .amap-icon img {
|
||
position: absolute !important;
|
||
width: 100% !important;
|
||
height: 100% !important;
|
||
top: 0 !important;
|
||
left: 0 !important;
|
||
}
|
||
</style>
|
||
|
||
<div id="app" v-cloak>
|
||
<guava ref="guava">
|
||
<el-card shadow="never" style="min-height: calc(100vh - 70px);position: relative">
|
||
<el-form :model="formData" ref="addForm" :rules="formRules" label-width="130px"
|
||
label-suffix="：">
|
||
<el-tabs tab-position="top" v-model="activeName">
|
||
<el-tab-pane label="活动基础信息" name="1">
|
||
<vi-title title="填写活动信息"></vi-title>
|
||
|
||
<el-row :gutter="40">
|
||
<el-col :xs="24" :lg="12" :xl="12">
|
||
<el-form-item prop="name" label="活动名称">
|
||
<el-input maxlength="50" placeholder="请填写活动名称"
|
||
v-model="formData.name"
|
||
type="text"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :xs="24" :lg="12" :xl="12">
|
||
<el-form-item prop="activityCode" label="活动编号">
|
||
<el-input maxlength="50" disabled
|
||
v-model="formData.activityCode"
|
||
type="text"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :xs="24" :lg="12" :xl="12">
|
||
<el-form-item prop="projectTypeCode" label="活动项目类型">
|
||
<el-select v-model="formData.projectTypeCode"
|
||
placeholder="请选择活动类型"
|
||
style="width: 100%;">
|
||
<el-option
|
||
v-for="item in projectType"
|
||
:key="item.id"
|
||
:label="item.name+' ('+item.code+')'"
|
||
:value="item.code">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :xs="24" :lg="12" :xl="12">
|
||
<el-form-item prop="isEnrollSystem" label="是否用于报名">
|
||
<el-radio-group v-model="formData.isEnrollSystem">
|
||
<el-radio-button :label="true">活动报名</el-radio-button>
|
||
<el-radio-button :label="false">活动管理</el-radio-button>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :xs="24" :lg="12" :xl="12">
|
||
<el-form-item prop="address" label="活动地址">
|
||
<el-input maxlength="50" placeholder="请填写活动地址"
|
||
v-model="formData.address"
|
||
type="text"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :xs="24" :lg="12" :xl="12">
|
||
<el-form-item prop="userId" label="联系人">
|
||
<el-select v-model="formData.userId" placeholder="请选择联系人"
|
||
filterable
|
||
remote
|
||
clearable
|
||
reserve-keyword
|
||
:remote-method="remoteMethod"
|
||
:loading="selectLoading"
|
||
style="width: 100%" @change="userChang">
|
||
<el-option
|
||
v-for="item in userList"
|
||
:key="item.userId"
|
||
:label="item.userName+'-'+item.loginName+'-'+item.unitName"
|
||
:value="item.userId">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :xs="24" :lg="12" :xl="12">
|
||
<el-form-item prop="mobile" label="联系方式">
|
||
<el-input maxlength="50" placeholder="请填写联系方式"
|
||
v-model="formData.mobile"
|
||
type="text"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :xs="24" :lg="12" :xl="12" v-if="formData.isEnrollSystem">
|
||
<el-form-item prop="plannedDate" label="活动计划时间">
|
||
<!--<el-input maxlength="50" placeholder="活动计划时间"
|
||
v-model="formData.plannedDate"></el-input>-->
|
||
<el-date-picker
|
||
style="width: 100%"
|
||
v-model="formData.plannedDate"
|
||
type="daterange"
|
||
value-format="yyyy-MM-dd"
|
||
range-separator="-"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期" @change="plannedDateChange">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :xs="24" :lg="12" :xl="12">
|
||
<el-form-item prop="time" label="实际活动时间">
|
||
<el-date-picker
|
||
style="width: 100%"
|
||
v-model="formData.time"
|
||
type="daterange"
|
||
value-format="yyyy-MM-dd"
|
||
range-separator="-"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :xs="24" :lg="12" :xl="12">
|
||
<el-form-item
|
||
:rules="[{required:[1,2].includes(formData.signUpMethod),message:'请选择报名日期',trigger:['change','blur']}]"
|
||
label="报名日期"
|
||
prop="applyTime2">
|
||
<el-date-picker
|
||
style="width: 100%"
|
||
v-model="formData.applyTime2"
|
||
type="datetimerange"
|
||
value-format="yyyy-MM-dd HH:mm"
|
||
range-separator="-"
|
||
start-placeholder="开始时间"
|
||
end-placeholder="结束时间">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :xs="24" :lg="12" :xl="12" >
|
||
<el-form-item prop="peopleNum" label="活动人数">
|
||
<el-input-number maxlength="10" placeholder="请填写活动人数"
|
||
:step="1"
|
||
:precision="0"
|
||
:disabled="[1,2].includes(formData.signUpMethod)"
|
||
v-model.number="formData.peopleNum"></el-input-number>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :xs="24" :lg="12" :xl="12">
|
||
<el-form-item prop="groupId" label="参加人员范围">
|
||
<div style="display: flex; justify-content: space-between">
|
||
<div style="width: 99%">
|
||
<el-select prop="groupId" placeholder="参加人员范围"
|
||
v-model="formData.groupId"
|
||
style="width: 99%;"
|
||
clearable
|
||
filterable>
|
||
<el-option v-for="item in activityGroupList"
|
||
:label="item.groupName"
|
||
:value="item.groupId"></el-option>
|
||
</el-select>
|
||
</div>
|
||
<div>
|
||
<el-button
|
||
@click="$refs.drawerUserScope.userScopeDialog = true"
|
||
type="primary">设置
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
|
||
<el-col :lg="12" :xl="12" :xs="24" v-if="formData.isEnrollSystem">
|
||
<el-form-item prop="signUpMethod" label="报名方式">
|
||
<el-radio-group v-model="formData.signUpMethod"
|
||
@change="signUpMethodChange">
|
||
<!-- <el-radio :label="null">无需报名</el-radio>-->
|
||
<el-radio :label="1">个人报名</el-radio>
|
||
<el-radio :label="3">组队报名</el-radio>
|
||
<el-radio :label="2" v-if="type===40001">分工会报名</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :lg="12" :xl="12" :xs="24">
|
||
<el-form-item prop="xlFlag" label="活动提醒">
|
||
<el-switch
|
||
v-model="formData.xlFlag"
|
||
active-color="#13ce66"
|
||
inactive-color="#ff4949">
|
||
</el-switch>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
|
||
<el-col :xs="12" :lg="12" :xl="12"
|
||
v-if="[1,2,3].includes(formData.signUpMethod)">
|
||
<el-form-item prop="userNumberLimit" label="报名人数限制">
|
||
<el-radio-group v-model="formData.userNumberLimit">
|
||
<el-radio :label="1"
|
||
:disabled="formData.signUpMethod===2">
|
||
总人数限制
|
||
</el-radio>
|
||
<el-radio :label="2" v-if="type===40001">分工会人数限制
|
||
</el-radio>
|
||
<el-radio :label="null">不限制</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :xs="12" :lg="12" :xl="12"
|
||
v-if="[3].includes(formData.signUpMethod)">
|
||
<el-form-item prop="totalUserNumberLimit" label="组队人数">
|
||
<el-input-number v-model="formData.teamNum" :min="1"
|
||
:max="2000"
|
||
:precision="0"
|
||
></el-input-number>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :xs="12" :lg="12" :xl="12"
|
||
v-if="[1,2,3].includes(formData.signUpMethod) && formData.userNumberLimit===1">
|
||
<el-form-item prop="totalUserNumberLimit" label="总人数限制">
|
||
<el-input-number v-model="formData.totalUserNumberLimit"
|
||
:min="1" :max="2000"
|
||
:precision="0"
|
||
></el-input-number>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :span="24"
|
||
v-if="[1,2,3].includes(formData.signUpMethod) && formData.userNumberLimit===2">
|
||
<el-form-item prop="unionUserNumberLimit" label="分工会人数限制">
|
||
<vi-title2 title="分段设置">
|
||
<template #func>
|
||
<el-button size="small" type="primary" @click="unionLimitQuickSetting">
|
||
应用分段设置
|
||
</el-button>
|
||
</template>
|
||
</vi-title2>
|
||
<el-row v-for="(item,index) in unionUserNumCalc" :gutter="20" class="mb5">
|
||
<el-col :span="7">
|
||
<el-input-number v-model="item.startNum" :precision="0" :step="1" :min="1"
|
||
placeholder="请输入最小人数"
|
||
style="width: 100%"></el-input-number>
|
||
</el-col>
|
||
<el-col :span="7">
|
||
<el-input-number v-model="item.endNum" :precision="0" :step="1" :min="1"
|
||
placeholder="请输入最大人数"
|
||
style="width: 100%"></el-input-number>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-input-number v-model="item.resultNum" :precision="0" :step="1" :min="1"
|
||
placeholder="请输入限制人数"
|
||
style="width: 100%"></el-input-number>
|
||
</el-col>
|
||
<el-col :span="4" class="text-right">
|
||
<el-button icon="el-icon-plus" @click="unionUserNumCalc.push({})"></el-button>
|
||
<el-button icon="el-icon-minus" @click="unionUserNumCalc.splice(index,1)"
|
||
:disabled="unionUserNumCalc.length===1"></el-button>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row class="mt10">
|
||
<div v-for="(item,index) in unionUserNumCalcTips" class="text-danger">
|
||
<span class="mr10">({{index+1}}).</span> {{item}}
|
||
</div>
|
||
</el-row>
|
||
|
||
<vi-title2 title="比例设置" class="mt20">
|
||
<template #func>
|
||
一键比例：
|
||
<el-input-number v-model="unionUserNumOneKeyRatio" :precision="0" :step="1" :min="0"
|
||
placeholder="请输入一键比例"
|
||
size="small"
|
||
:max="100"></el-input-number>
|
||
<el-button size="small" type="primary" @click="applyScaleSettings" class="ml5">应用比例设置
|
||
</el-button>
|
||
</template>
|
||
</vi-title2>
|
||
<el-table :data="formData.unionUserNumberLimit" max-height="500px">
|
||
<el-table-column prop="unionname" label="分工会"></el-table-column>
|
||
<el-table-column prop="teacherCount" label="人数"></el-table-column>
|
||
<el-table-column prop="ratio" label="比例(%)">
|
||
<template scope="{row}">
|
||
<el-input-number v-model="row.ratio" :precision="0" :step="1" :min="0"
|
||
:max="100"></el-input-number>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="limitNum" label="限制人数">
|
||
<template scope="{row}">
|
||
<el-input-number v-model="row.limitNum" :precision="0" :step="1" :min="0"
|
||
:max="row.teacherCount"
|
||
@change="calSummaryCount"></el-input-number>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<el-row class="mt20" justify="end" type="flex">
|
||
<div class="text-danger"
|
||
style="width: 100%;font-size: 18px;display: flex;align-items: center;font-weight: bold">
|
||
限制总人数：{{summaryCount}}人
|
||
</div>
|
||
<!-- <el-button @click="clearUnionLimit" type="danger">清空分工会人数限制</el-button>
|
||
<el-button @click="setUpUnionLimitDialog=false">取消</el-button>
|
||
<el-button @click="doConfirmSetUpUnionLimit" type="primary">确定</el-button>-->
|
||
</el-row>
|
||
<!-- <el-table border stripe
|
||
:data="formData.unionUserNumberLimit"
|
||
size="small"
|
||
height="500">
|
||
<el-table-column type="index" label="序号"
|
||
header-align="center" align="center"
|
||
width="100">
|
||
</el-table-column>
|
||
<el-table-column label="分工会名称"
|
||
prop="unionName"></el-table-column>
|
||
<el-table-column label="分工会人数"
|
||
prop="unionNum"></el-table-column>
|
||
<el-table-column label="限制人数" prop="limitNum">
|
||
<template slot-scope="{row}">
|
||
<el-input-number v-model="row.limitNum" :min="1"
|
||
:max="row.unionNum"
|
||
:precision="0"
|
||
></el-input-number>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>-->
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :span="12" v-if="[1,2,3].includes(formData.signUpMethod)">
|
||
<el-form-item label="是否需要签到">
|
||
<el-radio-group v-model="formData.needSign"
|
||
@change="(val)=>{formData.needSign?initMap():null}">
|
||
<el-radio :label="true">需要</el-radio>
|
||
<el-radio :label="false">不需要</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :span="12" v-if="formData.needSign">
|
||
<el-form-item label="签到半径(m)">
|
||
<el-input-number v-model="formData.rangeMeter"
|
||
@change="rangeMeterChange"
|
||
:precision="0" :step="1"
|
||
:min="50"
|
||
:max="1000"></el-input-number>
|
||
<!-- <el-button type="primary" @click="marker.setMap(null);">清除点位</el-button>-->
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
|
||
<el-col :span="24" v-show="formData.needSign">
|
||
<el-form-item label="活动签到点位">
|
||
<el-card shadow="never">
|
||
<div style="width: 100%;height: 300px"
|
||
id="signMap"></div>
|
||
</el-card>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
|
||
<el-col :span="24">
|
||
<el-form-item prop="activityContent" label="活动内容">
|
||
<el-input
|
||
type="textarea"
|
||
:rows="7"
|
||
placeholder="请输入活动内容"
|
||
v-model="formData.activityContent">
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :span="24" v-if="!formData.isEnrollSystem">
|
||
<el-form-item prop="activityExamineContent" label="活动考核内容">
|
||
<el-input
|
||
type="textarea"
|
||
:rows="7"
|
||
placeholder="请输入活动考核内容"
|
||
v-model="formData.activityExamineContent">
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :span="24" v-if="formData.signUpMethod!=null">
|
||
<el-form-item prop="cover" label="封面图">
|
||
<el-upload
|
||
class="avatar-uploader"
|
||
:action="FILE_UPLOAD_ADDRESS"
|
||
:show-file-list="false"
|
||
:on-success="handleAvatarSuccess"
|
||
:before-upload="beforeAvatarUpload">
|
||
<img v-if="formData.cover"
|
||
:src="FILE_DOMAIN + '/fileStreamPreview?id=' + formData.cover"
|
||
class="avatar">
|
||
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
||
</el-upload>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
</el-row>
|
||
|
||
</el-tab-pane>
|
||
|
||
<el-tab-pane label="活动费用" name="2" v-if="!formData.isEnrollSystem">
|
||
<div style="display: flex;margin: 20px 0">
|
||
<el-divider content-position="left">购置物品及价格</el-divider>
|
||
|
||
<div style="padding-left: 10px">
|
||
<el-tooltip class="item" effect="dark" content="点击添加购置物品及价格"
|
||
placement="top">
|
||
<el-button icon="el-icon-plus" circle
|
||
@click="formData.goods.push({})"
|
||
type="primary"></el-button>
|
||
</el-tooltip>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<el-form-item>
|
||
<el-table :data="formData.goods" border size="mini" style="width: 100%"
|
||
height="200">
|
||
|
||
<el-table-column sortable type="index" width="100" label="序号"
|
||
align="center" header-align="center">
|
||
</el-table-column>
|
||
<el-table-column prop="name" label="物品名称" align="center"
|
||
header-align="center">
|
||
<template slot-scope="{row}">
|
||
<el-input maxlength="50" placeholder="物品名称"
|
||
v-model="row.name"
|
||
type="text"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="price" label="预算费用" align="center"
|
||
header-align="center">
|
||
<template slot-scope="{row}">
|
||
<el-input maxlength="50" placeholder="预算费用"
|
||
v-model="row.price"
|
||
type="number" @input="blur"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="actualPrice" label="实际费用" align="center"
|
||
header-align="center">
|
||
<template slot-scope="{row}">
|
||
<el-input maxlength="50" placeholder="实际费用"
|
||
v-model="row.actualPrice"
|
||
type="number" @input="blur"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" fixed="right" align="center"
|
||
header-align="center"
|
||
width="80px"
|
||
fixed="right">
|
||
<template slot-scope="scope">
|
||
<el-button type="danger" icon="el-icon-delete" circle
|
||
:disabled="formData.goods.length==0"
|
||
@click="delNotesItem(scope)"></el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-form-item>
|
||
|
||
<el-divider content-position="left" class="dia"><span
|
||
style="color: #3ea1ec;">附件</span>
|
||
</el-divider>
|
||
<el-row :gutter="40">
|
||
|
||
<el-col :xs="24" :lg="12" :xl="12" class="mb25">
|
||
<el-form-item prop="billFiles" label="发票">
|
||
<file-upload :files.sync="formData.billFiles"
|
||
card></file-upload>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :xs="24" :lg="12" :xl="12" class="mb25">
|
||
<el-form-item prop="photoFiles" label="照片">
|
||
<file-upload :files.sync="formData.photoFiles"
|
||
card></file-upload>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
</el-row>
|
||
|
||
<el-row>
|
||
<el-col :xs="24" :lg="12" :xl="12">
|
||
<el-form-item prop="otherFiles" label="其他">
|
||
<file-upload :files.sync="formData.otherFiles"
|
||
card></file-upload>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
</el-tab-pane>
|
||
|
||
<el-tab-pane label="活动人员信息" name="3" v-if="!formData.isEnrollSystem">
|
||
<table-tool label="活动人员信息" :app="this">
|
||
<template #func>
|
||
<el-button icon="el-icon-plus" @click="openAddUser"
|
||
type="primary">添加活动人员
|
||
</el-button>
|
||
</template>
|
||
</table-tool>
|
||
<el-table border stripe :data="userData" size="small"
|
||
v-loading="userTabLoading" height="500">
|
||
<el-table-column
|
||
type="index" label="序号" header-align="center" align="center"
|
||
width="100">
|
||
</el-table-column>
|
||
|
||
<el-table-column
|
||
align="center"
|
||
header-align="center"
|
||
v-for="column in userColumns"
|
||
:label="column.label"
|
||
:prop="column.prop"
|
||
:sortable="column.sortable">
|
||
|
||
</el-table-column>
|
||
|
||
<el-table-column prop="userOnline" align="center" header-align="center"
|
||
label="操作"
|
||
width="150px">
|
||
<template scope="{row}">
|
||
<el-button type="danger" size="mini"
|
||
@click="delUser(row)">删除
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
</el-table>
|
||
</el-tab-pane>
|
||
|
||
<el-tab-pane label="活动总结" name="4" v-if="!formData.isEnrollSystem">
|
||
<el-form-item prop="activitySummary" label="活动总结">
|
||
<el-input
|
||
:disabled="!formData.time || Date.now() < Date.parse(formData.time[1])"
|
||
type="textarea"
|
||
:rows="5"
|
||
placeholder="请输入活动内容"
|
||
v-model="formData.activitySummary">
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-alert
|
||
class="mb20"
|
||
style="margin-left: 130px"
|
||
v-if="!formData.time || Date.now() < Date.parse(formData.time[1])"
|
||
show-icon
|
||
title="活动结束后可输入活动总结"
|
||
type="info">
|
||
</el-alert>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</el-form>
|
||
<div style="padding: 20px;text-align: center;">
|
||
<el-button type="primary" @click="operation" style="width: 300px">确 定</el-button>
|
||
</div>
|
||
</el-card>
|
||
|
||
</guava>
|
||
|
||
<el-dialog title="添加人员" :visible.sync="dialogVisible" width="40%" :close-on-click-modal="false">
|
||
|
||
<el-form :model="formData" label-width="100px">
|
||
<el-form-item prop="userId" label="参加人员">
|
||
<el-select v-model="formData.tissuePersonList" placeholder="请选择参加人员"
|
||
multiple
|
||
filterable
|
||
remote
|
||
:remote-method="remoteMethod"
|
||
:loading="selectLoading"
|
||
style="width: 100%">
|
||
<el-option
|
||
v-for="item in userList"
|
||
:disabled="userData.map(v=>v.userId).includes(item.userId)"
|
||
:key="item.userId"
|
||
:label="item.userName+'-'+item.loginName+'-'+item.unitName"
|
||
:value="item.userId">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||
<el-button type="primary" @click="doAddUser">确 定</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
|
||
<drawer-user-scope
|
||
@group_change="getActivityGroup"
|
||
ref="drawerUserScope"
|
||
:group_id.sync="formData.groupId"
|
||
></drawer-user-scope>
|
||
|
||
</div>
|
||
|
||
<script>
|
||
let marker = null
|
||
let map = null
|
||
let circle = null
|
||
var vue = new Vue({
|
||
el: '#app',
|
||
mixins: [initTableMixins],
|
||
data() {
|
||
return {
|
||
unionUserNumOneKeyRatio: null,
|
||
summaryCount: 0,
|
||
unionUserNumCalc: [{}],
|
||
activeName: '1',
|
||
actvivtyUrl: "/platform/activity/info/mange",
|
||
selectLoading: false,
|
||
userTabLoading: false,
|
||
dialogVisible: false,
|
||
userData: [],
|
||
userList: [],
|
||
unionList: [],
|
||
projectType: [],
|
||
pageForm: {
|
||
type: type,
|
||
year: new Date().getFullYear() + ''
|
||
},
|
||
formRules: {
|
||
groupId: [{required: true, message: '必填', trigger: ['blur', 'change']}],
|
||
name: [{required: true, message: '必填', trigger: ['blur', 'change']}],
|
||
type: [{required: true, message: '必填', trigger: ['blur', 'change']}],
|
||
projectTypeCode: [{required: true, message: '必填', trigger: ['blur', 'change']}],
|
||
address: [{required: true, message: '必填', trigger: ['blur', 'change']}],
|
||
plannedDate: [{required: true, message: '必填', trigger: ['blur', 'change']}],
|
||
},
|
||
userColumns: [
|
||
{prop: 'userName', label: '姓名'},
|
||
{prop: 'loginName', label: '工号'},
|
||
{prop: 'sex', label: '性别'},
|
||
{prop: 'mobile', label: '联系方式'},
|
||
{prop: 'unitName', label: '所属单位'},
|
||
{prop: 'unionName', label: '所属工会'}
|
||
],
|
||
/*ZXY - ADD*/
|
||
activityGroupList: [],
|
||
userScopeDialog: false
|
||
}
|
||
},
|
||
computed: {
|
||
unionUserNumCalcTips() {
|
||
return this.unionUserNumCalc.map(v => {
|
||
return (v.startNum ? v.startNum : '?') + '-' + (v.endNum ? v.endNum : '?') + '人的分工会，限报' + (v.resultNum ? v.resultNum : '?') + '人'
|
||
})
|
||
},
|
||
},
|
||
components: {
|
||
'drawer-user-scope': httpVueLoader('/components/plugins/DrawerUserScope.vue'),
|
||
},
|
||
methods: {
|
||
//应用比例设置
|
||
applyScaleSettings() {
|
||
this.formData.unionUserNumberLimit.forEach(v => {
|
||
v.limitNum = parseFloat((v.teacherCount * this.unionUserNumOneKeyRatio / 100).toFixed(0))
|
||
if (v.ratio) {
|
||
v.limitNum = parseFloat((v.teacherCount * v.ratio / 100).toFixed(0))
|
||
}
|
||
})
|
||
this.calSummaryCount()
|
||
},
|
||
calSummaryCount() {
|
||
const array = this.formData.unionUserNumberLimit
|
||
if (array) {
|
||
this.summaryCount = array.reduce((prev, curr) => {
|
||
const value = Number(curr.limitNum);
|
||
if (!isNaN(value)) {
|
||
return prev + curr.limitNum;
|
||
} else {
|
||
return prev;
|
||
}
|
||
}, 0)
|
||
}
|
||
},
|
||
unionLimitQuickSetting() {
|
||
this.unionUserNumCalc.forEach((v, i) => {
|
||
const startNum = v.startNum
|
||
const endNum = v.endNum
|
||
const resultNum = v.resultNum
|
||
if (startNum > endNum) {
|
||
this.$message.warning('第' + (i + 1) + '行设置错误')
|
||
} else {
|
||
this.formData.unionUserNumberLimit.forEach(x => {
|
||
if (x.teacherCount >= startNum && x.teacherCount <= endNum) {
|
||
x.limitNum = resultNum
|
||
}
|
||
})
|
||
this.calSummaryCount()
|
||
}
|
||
})
|
||
},
|
||
beforeAvatarUpload(file) {
|
||
const isLt4M = file.size / 1024 / 1024 / 1024 / 1024 < 2;
|
||
if (!isLt4M) {
|
||
this.$message.warning('上传头像图片大小不能超过 4MB!');
|
||
}
|
||
return isLt4M;
|
||
},
|
||
rangeMeterChange(val) {
|
||
if (!marker || !this.formData.location || !Array.isArray(this.formData.location)) {
|
||
return
|
||
}
|
||
const lng = parseFloat(this.formData.location[0])
|
||
const lat = parseFloat(this.formData.location[1])
|
||
if (circle) {
|
||
map.remove(circle)
|
||
circle = null
|
||
}
|
||
circle = new AMap.Circle({
|
||
center: new AMap.LngLat(lng, lat), // 圆心位置
|
||
radius: val, //半径
|
||
strokeColor: "#F33", //线颜色
|
||
strokeOpacity: 1, //线透明度
|
||
strokeWeight: 1, //线粗细度
|
||
fillColor: "#ee2200", //填充颜色
|
||
fillOpacity: 0.35 //填充透明度
|
||
})
|
||
map.add(circle)
|
||
map.setFitView()
|
||
},
|
||
|
||
async handleAvatarSuccess(res, file) {
|
||
this.$set(this.formData, 'cover', res.data.filepath)
|
||
await this.$refs['addForm'].validate()
|
||
},
|
||
plannedDateChange(val) {
|
||
this.$set(this.formData, "time", val)
|
||
},
|
||
userChang(val) {
|
||
this.$set(this.formData, "mobile", val ? this.userList.find(v => v.userId === val).mobile : null)
|
||
},
|
||
delNotesItem(scope) {
|
||
this.delNotesList.push(scope.row.id)
|
||
this.formData.goods.splice(scope.$index, 1)
|
||
},
|
||
async remoteMethod(query) {
|
||
if (query) {
|
||
this.selectLoading = true;
|
||
const {data} = await $.post(this.actvivtyUrl + "/findUser", {
|
||
serachWord: query,
|
||
activity_type: type
|
||
})
|
||
this.userList = data
|
||
this.selectLoading = false;
|
||
}
|
||
},
|
||
openAddUser() {
|
||
this.formData.tissuePersonList = []
|
||
this.dialogVisible = true
|
||
},
|
||
doAddUser() {
|
||
this.formData.tissuePersonList = this.userList.filter(v => this.formData.tissuePersonList.some(x => v.userId === x))
|
||
this.userData = this.userData.concat(this.formData.tissuePersonList)
|
||
this.dialogVisible = false
|
||
},
|
||
async delUser(row) {
|
||
this.userData.splice(this.userData.indexOf(row.userId), 1)
|
||
this.formData.tissuePersonList.splice(this.formData.tissuePersonList.indexOf(row.userId), 1)
|
||
|
||
// const confirm = await this.$confirm('您确定要删除吗?', '提示', {
|
||
// confirmButtonText: '确定',
|
||
// cancelButtonText: '取消',
|
||
// type: 'warning'
|
||
// })
|
||
// if (confirm === 'confirm') {
|
||
// this.userData.splice(this.userData.indexOf(row.userId), 1)
|
||
// this.formData.tissuePersonList.splice(this.formData.tissuePersonList.indexOf(row.userId), 1)
|
||
// const resp = await $.post('/platform/activity/apply/doDeleteActivityRegister', {
|
||
// activityId: row.tissueId,
|
||
// userId: row.userId
|
||
// })
|
||
// }
|
||
},
|
||
async groupIdChange(val) {
|
||
const resp = await $.get('/platform/activity/apply/getUnionData', {activityScopeGroupId: val})
|
||
this.formData.unionUserNumberLimit = resp.data
|
||
},
|
||
|
||
async operation() {
|
||
if (this.formData.applyTime2 && this.formData.applyTime2.length > 0) {
|
||
if (moment(this.formData.time[0]).valueOf() <= moment(this.formData.applyTime2[0]).valueOf()) {
|
||
this.$notify.error({title: '错误', message: '活动时间必须晚于报名时间'});
|
||
return
|
||
}
|
||
}
|
||
|
||
let url = this.formData.id ? "/doEdit" : "/doAdd"
|
||
this.$refs["addForm"].validate(async (valid) => {
|
||
if (valid) {
|
||
const loading = this.$loading({
|
||
lock: true,
|
||
text: '正在提交...',
|
||
spinner: 'el-icon-loading',
|
||
background: COVER_LAYER_COLOR
|
||
});
|
||
|
||
const formData = JSON.parse(JSON.stringify(this.formData))
|
||
formData.type = this.pageForm.type
|
||
formData.apply_type = 1
|
||
const {time, applyTime2, plannedDate} = formData
|
||
if (applyTime2 && applyTime2.length) {
|
||
formData.applyStartTime = applyTime2[0]
|
||
formData.applyEndTime = applyTime2[1]
|
||
formData.applyTime2 = undefined
|
||
}
|
||
if (time && time.length) {
|
||
formData.startTime = formData.time[0]
|
||
formData.endTime = formData.time[1]
|
||
formData.time = undefined
|
||
}
|
||
if (plannedDate && plannedDate.length) {
|
||
formData.startPlannedDate = formData.plannedDate[0]
|
||
formData.endPlannedDate = formData.plannedDate[1]
|
||
formData.plannedDate = undefined
|
||
}
|
||
|
||
const resp = await $.post(this.actvivtyUrl + url, {tissue: JSON.stringify(formData)})
|
||
loading.close()
|
||
if (resp.code === 0) {
|
||
if (type === 40002) {
|
||
sublime.jumpPagePjax("/platform/activity/info/mange/union")
|
||
} else if (type === 40003) {
|
||
sublime.jumpPagePjax("/platform/activity/info/mange/club")
|
||
} else {
|
||
sublime.jumpPagePjax("/platform/activity/info/mange/school")
|
||
}
|
||
} else {
|
||
this.notifyWarning(resp.msg)
|
||
}
|
||
} else {
|
||
this.$notify.error({title: '错误', message: '存在未填写的的必填项'});
|
||
}
|
||
});
|
||
},
|
||
async init() {
|
||
this.delNotesList = []
|
||
this.formData = {
|
||
time: [],
|
||
applyTime2: [],
|
||
plannedDate: [],
|
||
goods: [],
|
||
billFiles: [],
|
||
photoFiles: [],
|
||
otherFiles: [],
|
||
tissuePersonList: [],
|
||
unionUserNumberLimit: [],
|
||
signUpMethod: null,
|
||
rangerMeter: 100,
|
||
isEnrollSystem: true,
|
||
}
|
||
const {data} = await $.get('/platform/activity/apply/generateActivityCode', {activity_type: type})
|
||
this.$set(this.formData, 'activityCode', data)
|
||
this.unionList = await getUnions(null)
|
||
const resp = await $.get('/platform/activity/apply/getUnionData', {activityScopeGroupId: this.formData.groupId})
|
||
this.formData.unionUserNumberLimit = resp.data
|
||
await this.initMap()
|
||
},
|
||
async findOne(id) {
|
||
const {data, code, msg} = await $.post(this.actvivtyUrl + "/findOne", {id})
|
||
if (code === 0) {
|
||
if (data.userId) {
|
||
const user = await queryUserByIds([data.userId])
|
||
await this.remoteMethod(user[0].loginname)
|
||
}
|
||
data.type = data.type + ''
|
||
if (data.billFiles && data.billFiles.length > 0) data.billFiles = JSON.parse(data.billFiles)
|
||
if (data.photoFiles && data.photoFiles.length > 0) data.photoFiles = JSON.parse(data.photoFiles)
|
||
if (data.otherFiles && data.otherFiles.length > 0) data.otherFiles = JSON.parse(data.otherFiles)
|
||
if (data.applyStartTime) data.applyTime2 = [data.applyStartTime, data.applyEndTime]
|
||
if (data.startTime) data.time = [data.startTime, data.endTime]
|
||
if (data.startPlannedDate) data.plannedDate = [data.startPlannedDate, data.endPlannedDate]
|
||
this.userData = clone(data.tissuePersonList)
|
||
data.unionUserNumberLimit = JSON.parse(data.unionUserNumberLimit)
|
||
data.location = JSON.parse(data.location)
|
||
this.formData = data
|
||
if (!this.formData.unionUserNumberLimit) {
|
||
const resp = await $.get('/platform/activity/apply/getUnionData', {activityScopeGroupId: this.formData.groupId})
|
||
this.formData.unionUserNumberLimit = resp.data
|
||
}
|
||
if (this.formData.needSign) {
|
||
await this.initMap()
|
||
}
|
||
} else {
|
||
this.notifyWarning(msg)
|
||
}
|
||
},
|
||
initMap() {
|
||
this.$nextTick(() => {
|
||
// if (map == null) {
|
||
map = new AMap.Map("signMap", {
|
||
resizeEnable: true,
|
||
center: [118.640081, 32.082496],
|
||
zoom: 16
|
||
})
|
||
// }
|
||
|
||
if (!this.formData.needSign) {
|
||
return
|
||
}
|
||
|
||
if (this.formData.location && Array.isArray(this.formData.location)) {
|
||
const lng = parseFloat(this.formData.location[0])
|
||
const lat = parseFloat(this.formData.location[1])
|
||
if (marker) {
|
||
map.remove(marker)
|
||
marker = null
|
||
}
|
||
|
||
marker = new AMap.Marker({
|
||
position: [lng, lat],
|
||
offset: new AMap.Pixel(-13, -30)
|
||
})
|
||
console.log(marker)
|
||
map.add(marker)
|
||
this.rangeMeterChange(this.formData.rangeMeter)
|
||
}
|
||
map.on('click', (e) => {
|
||
if (!this.formData.rangeMeter) {
|
||
this.$message.warning('请先设置签到半径')
|
||
return
|
||
}
|
||
|
||
if (marker) {
|
||
map.remove(marker)
|
||
}
|
||
if (circle) {
|
||
map.remove(circle)
|
||
}
|
||
marker = new AMap.Marker({
|
||
position: [e.lnglat.getLng(), e.lnglat.getLat()],
|
||
offset: new AMap.Pixel(-13, -30)
|
||
})
|
||
map.add(marker)
|
||
this.formData.location = []
|
||
this.formData.location.push(e.lnglat.getLng())
|
||
this.formData.location.push(e.lnglat.getLat())
|
||
this.rangeMeterChange(this.formData.rangeMeter)
|
||
|
||
});
|
||
})
|
||
},
|
||
signUpMethodChange(val) {
|
||
if (val == null) {
|
||
this.$set(this.formData, 'userNumberLimit', null)
|
||
this.$set(this.formData, 'needSign', false)
|
||
this.$set(this.formData, 'rangeMeter', null)
|
||
}
|
||
},
|
||
async getActivityGroup() {
|
||
const resp = await $.get('/platform/activity/basic/scope/getActivityUserScopeGroup')
|
||
this.activityGroupList = resp.data
|
||
}
|
||
},
|
||
async created() {
|
||
await this.getActivityGroup()
|
||
const projectType = await getActivityTwoLevelType("50000")
|
||
projectType.forEach(v => {
|
||
if (v.code !== "50004") {
|
||
this.projectType.push(v)
|
||
}
|
||
})
|
||
const id = GetQueryString("id")
|
||
id ? await this.findOne(id) : this.init()
|
||
}
|
||
})
|
||
</script>
|
||
|