|
@@ -0,0 +1,208 @@
|
|
|
|
+<template>
|
|
|
|
+ <el-dialog
|
|
|
|
+ title="提交参会名单"
|
|
|
|
+ :visible.sync="isAddParticipateShow"
|
|
|
|
+ width="500px"
|
|
|
|
+ append-to-body
|
|
|
|
+ @close="$emit('close')"
|
|
|
|
+ >
|
|
|
|
+ <div class="partic-dialog-container">
|
|
|
|
+ <div class="inline" v-for="(item, index) in dynamicItem" :key="index">
|
|
|
|
+ <div class="inline-content">
|
|
|
|
+ <el-autocomplete
|
|
|
|
+ class="inline-input"
|
|
|
|
+ v-model.trim="item.name"
|
|
|
|
+ :fetch-suggestions="callbackHandle"
|
|
|
|
+ placeholder="请输入姓名"
|
|
|
|
+ @input="getCompany(item.name)"
|
|
|
|
+ @select="selectCompany(item, index)"
|
|
|
|
+ @blur="focusCompany(item.name)"
|
|
|
|
+ :trigger-on-focus="false"
|
|
|
|
+ clearable
|
|
|
|
+ ></el-autocomplete>
|
|
|
|
+ <img
|
|
|
|
+ @click="deleteItem(index)"
|
|
|
|
+ src="~@/assets/img/icons/delete-Item.png"
|
|
|
|
+ :class="index == 0 ? 'defaultyi' : ''"
|
|
|
|
+ alt=""
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+ <p v-if="item.isShow">
|
|
|
|
+ 系统中无此人,请先将其添加到对应公司的联系人列表下
|
|
|
|
+ </p>
|
|
|
|
+ </div>
|
|
|
|
+ <div @click="addItem" class="add-box">
|
|
|
|
+ <img :src="$icons.addblue" alt="" />
|
|
|
|
+ <span>添加</span>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div slot="footer" class="dialog-footer" style="text-align: center;">
|
|
|
|
+ <el-button type="primary" @click="confirmPerson">确定</el-button>
|
|
|
|
+ <el-button @click="$emit('close')">取消</el-button>
|
|
|
|
+ </div>
|
|
|
|
+ </el-dialog>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+import { raiInterface,roadshowInterence } from "@/api/api.js";
|
|
|
|
+export default {
|
|
|
|
+ props:{
|
|
|
|
+ isAddParticipateShow:{
|
|
|
|
+ type:Boolean,
|
|
|
|
+ default:false
|
|
|
|
+ },
|
|
|
|
+ RsCalendarId:{
|
|
|
|
+ type:Number,
|
|
|
|
+ default:0
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ watch:{
|
|
|
|
+ isAddParticipateShow(newval){
|
|
|
|
+ if(newval){
|
|
|
|
+ this.dynamicItem = [{name:'',isShow:false}]
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ dynamicItem:[{name:'',isShow:false}],
|
|
|
|
+ companyList:[],
|
|
|
|
+ timeout:0,
|
|
|
|
+ warningIsShow:false
|
|
|
|
+ };
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ getCompany(query){
|
|
|
|
+ if (query.includes(",")) return;
|
|
|
|
+ if (query) {
|
|
|
|
+ raiInterface
|
|
|
|
+ .activitySignupUserList({
|
|
|
|
+ KeyWord: query,
|
|
|
|
+ })
|
|
|
|
+ .then((res) => {
|
|
|
|
+ if (res.Ret === 200) {
|
|
|
|
+ let arr = [];
|
|
|
|
+ res.Data.List &&
|
|
|
|
+ res.Data.List.forEach((item) => {
|
|
|
|
+ let obj = {
|
|
|
|
+ ...item,
|
|
|
|
+ value: item.RealName + " , " + item.Mobile + " , " + item.CompanyName,
|
|
|
|
+ };
|
|
|
|
+ arr.push(obj);
|
|
|
|
+ });
|
|
|
|
+ this.companyList = arr;
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ } else {
|
|
|
|
+ this.companyList = [];
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ callbackHandle(data,cb){
|
|
|
|
+ let results = data
|
|
|
|
+ ? this.companyList.filter((item) => {
|
|
|
|
+ return item.value.includes(data);
|
|
|
|
+ })
|
|
|
|
+ : this.companyList;
|
|
|
|
+ clearTimeout(this.timeout);
|
|
|
|
+ this.timeout = setTimeout(() => {
|
|
|
|
+ cb(results);
|
|
|
|
+ }, 300);
|
|
|
|
+ if (results.length == 0) {
|
|
|
|
+ this.warningIsShow = true;
|
|
|
|
+ } else {
|
|
|
|
+ this.warningIsShow = false;
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ selectCompany(val, index) {
|
|
|
|
+ this.companyList.forEach((item) => {
|
|
|
|
+ if (item.value == val.name) {
|
|
|
|
+ this.dynamicItem.splice(index, 1, { name: val.name, isShow: false, id: item.UserId});
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ focusCompany(name){
|
|
|
|
+ if ((name.length && this.companyList.length == 0) || this.warningIsShow) {
|
|
|
|
+ this.dynamicItem.forEach((item) => {
|
|
|
|
+ if (item.name == name) {
|
|
|
|
+ item.isShow = true;
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ } else {
|
|
|
|
+ this.dynamicItem.forEach((item) => {
|
|
|
|
+ if (item.name == name) {
|
|
|
|
+ item.isShow = false;
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ deleteItem(index){
|
|
|
|
+ this.dynamicItem.splice(index, 1);
|
|
|
|
+ },
|
|
|
|
+ addItem(){
|
|
|
|
+ this.dynamicItem.push({name:'',isShow:false})
|
|
|
|
+ },
|
|
|
|
+ confirmPerson(){
|
|
|
|
+ //校验
|
|
|
|
+ const useId = this.dynamicItem.map(i=>i.id).filter(i=>i)
|
|
|
|
+ if(!useId.length) return this.$message.error('请输入姓名')
|
|
|
|
+ roadshowInterence.addMeetingUser({
|
|
|
|
+ RsCalendarId:this.RsCalendarId,
|
|
|
|
+ UserId:useId
|
|
|
|
+ }).then(res=>{
|
|
|
|
+ if(res.Ret!==200) return
|
|
|
|
+ this.$message.success('提交成功')
|
|
|
|
+ this.$emit('confirm')
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+};
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style lang="scss">
|
|
|
|
+.partic-dialog-container{
|
|
|
|
+ .inline {
|
|
|
|
+ margin-bottom: 20px;
|
|
|
|
+ width: 100%;
|
|
|
|
+ .inline-input {
|
|
|
|
+ width: 392px !important;
|
|
|
|
+ }
|
|
|
|
+ p {
|
|
|
|
+ padding-top: 5px;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ font-family: PingFang SC;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ line-height: 20px;
|
|
|
|
+ color: #ef5858;
|
|
|
|
+ opacity: 1;
|
|
|
|
+ }
|
|
|
|
+ .inline-content {
|
|
|
|
+ padding-right: 20px;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ align-items: center;
|
|
|
|
+ img {
|
|
|
|
+ width: 14px;
|
|
|
|
+ height: 14px;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .defaultyi {
|
|
|
|
+ display: none !important;
|
|
|
|
+ }
|
|
|
|
+ .el-input {
|
|
|
|
+ width: 392px !important;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .add-box {
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ color: #5882ef;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ img {
|
|
|
|
+ width: 16px;
|
|
|
|
+ height: 16px;
|
|
|
|
+ margin-right: 10px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</style>
|