|
@@ -1,208 +1,282 @@
|
|
|
<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>
|
|
|
+ <el-dialog title="提交参会名单" :visible.sync="isAddParticipateShow" width="500px" append-to-body @close="closeDlg">
|
|
|
+ <div class="partic-dialog-container">
|
|
|
+ <template v-if="isType !== '查看'">
|
|
|
+ <div v-if="isShowPermission" style="margin-bottom: 20px">
|
|
|
+ <el-tag type="info" size="small"> {{ this.chartPermissionName }}</el-tag>
|
|
|
</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>
|
|
|
+ <el-select
|
|
|
+ v-else
|
|
|
+ v-model="hashtagValue"
|
|
|
+ multiple
|
|
|
+ filterable
|
|
|
+ remote
|
|
|
+ reserve-keyword
|
|
|
+ placeholder="请输入路演主题标签(可多选)"
|
|
|
+ :remote-method="remoteMethodHandler"
|
|
|
+ style="width: 392px; margin-bottom: 20px"
|
|
|
+ @change="tagSelectHandler"
|
|
|
+ >
|
|
|
+ <el-option v-for="item in hashtagOptions" :key="item.Md5Key" :label="item.TagName" :value="item.Md5Key"> </el-option>
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ <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>
|
|
|
- </el-dialog>
|
|
|
+ <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="closeDlg">取消</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { raiInterface,roadshowInterence } from "@/api/api.js";
|
|
|
+import { raiInterface, roadshowInterence } from "@/api/api.js";
|
|
|
export default {
|
|
|
- props:{
|
|
|
- isAddParticipateShow:{
|
|
|
- type:Boolean,
|
|
|
- default:false
|
|
|
- },
|
|
|
- RsCalendarId:{
|
|
|
- type:Number,
|
|
|
- default:0
|
|
|
- }
|
|
|
+ props: {
|
|
|
+ isAddParticipateShow: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
},
|
|
|
- watch:{
|
|
|
- isAddParticipateShow(newval){
|
|
|
- if(newval){
|
|
|
- this.dynamicItem = [{name:'',isShow:false}]
|
|
|
- }
|
|
|
- }
|
|
|
+ RsCalendarId: {
|
|
|
+ type: Number,
|
|
|
+ default: 0,
|
|
|
},
|
|
|
- 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;
|
|
|
- }
|
|
|
+ ResearcherId: {
|
|
|
+ type: Number,
|
|
|
+ default: 0,
|
|
|
+ },
|
|
|
+ isType: {
|
|
|
+ type: String,
|
|
|
+ default: "",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ isAddParticipateShow(newval) {
|
|
|
+ if (newval) {
|
|
|
+ this.dynamicItem = [{ name: "", isShow: false }];
|
|
|
+ this.getIsPermissionName();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dynamicItem: [{ name: "", isShow: false }],
|
|
|
+ companyList: [],
|
|
|
+ timeout: 0,
|
|
|
+ warningIsShow: false,
|
|
|
+ hashtagValue: "", // 主题标签
|
|
|
+ hashtagOptions: [], // 主题数据
|
|
|
+ tagList: [], // /标签类型
|
|
|
+ tagName: "",
|
|
|
+ chartPermissionName: "",
|
|
|
+ isShowPermission: 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;
|
|
|
}
|
|
|
- },
|
|
|
- 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')
|
|
|
- })
|
|
|
- },
|
|
|
+ });
|
|
|
+ } 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,
|
|
|
+ TagList: this.tagList,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ if (res.Ret !== 200) return;
|
|
|
+ this.$message.success("提交成功");
|
|
|
+ this.$emit("confirm");
|
|
|
+ });
|
|
|
},
|
|
|
+ // 获取标签
|
|
|
+ async remoteMethodHandler(query) {
|
|
|
+ if (query !== "") {
|
|
|
+ let KeyWord = this.tagName ? this.tagName + "," + query : query;
|
|
|
+ const res = await roadshowInterence.rai_serve_search_tag({
|
|
|
+ KeyWord,
|
|
|
+ ResearcherId: this.ResearcherId,
|
|
|
+ });
|
|
|
+ if (res.Ret === 200) {
|
|
|
+ this.hashtagOptions = res.Data.List || [];
|
|
|
+ }
|
|
|
+ } else if (!this.hashtagValue.length && !query) {
|
|
|
+ this.hashtagOptions = [];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 选择标签
|
|
|
+ tagSelectHandler() {
|
|
|
+ let tagListArr = [];
|
|
|
+ let nameArr = [];
|
|
|
+ this.hashtagOptions.forEach((item) => {
|
|
|
+ if (this.hashtagValue.length && this.hashtagValue.includes(item.Md5Key)) {
|
|
|
+ tagListArr.push({
|
|
|
+ TagType: item.TagType,
|
|
|
+ TagId: item.TagId,
|
|
|
+ });
|
|
|
+ nameArr.push(item.TagName);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.tagList = tagListArr;
|
|
|
+ this.tagName = nameArr.join(",");
|
|
|
+ },
|
|
|
+ // 进入看看是否是策略
|
|
|
+ async getIsPermissionName() {
|
|
|
+ const res = await roadshowInterence.rai_serve_search_chcck_PermissionName({ ResearcherId: this.ResearcherId });
|
|
|
+ if (res.Ret === 200) {
|
|
|
+ this.chartPermissionName = res.Data.ChartPermissionName;
|
|
|
+ this.isShowPermission = res.Data.Belong;
|
|
|
+ this.tagList = res.Data.List;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 关闭弹框
|
|
|
+ closeDlg() {
|
|
|
+ this.hashtagValue = ""; // 主题标签
|
|
|
+ this.hashtagOptions = []; // 主题数据
|
|
|
+ this.tagList = []; // /标签类型
|
|
|
+ this.tagName = "";
|
|
|
+ this.chartPermissionName = "";
|
|
|
+ this.isShowPermission = false;
|
|
|
+ this.$emit("close");
|
|
|
+ },
|
|
|
+ },
|
|
|
};
|
|
|
</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;
|
|
|
- }
|
|
|
+.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;
|
|
|
}
|
|
|
- .add-box {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- color: #5882ef;
|
|
|
+ .inline-content {
|
|
|
+ padding-right: 20px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ img {
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
cursor: pointer;
|
|
|
- img {
|
|
|
- width: 16px;
|
|
|
- height: 16px;
|
|
|
- margin-right: 10px;
|
|
|
- }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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>
|