15.9 ok

src/views/roadshow_manage/compononts/addParticipateDia.vue

@@ -1,276 +1,282 @@
 <template>
-    <el-dialog
-        title="提交参会名单"
-        :visible.sync="isAddParticipateShow"
-        width="500px"
-        append-to-body
-        @close="closeDlg"
-    >
-        <div class="partic-dialog-container">
-            <div v-if="isShowPermission" style="margin-bottom:20px">
-                <el-tag type="info" size="small"> {{this.chartPermissionName}}</el-tag>
-            </div>
-            <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>
-            <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="closeDlg">取消</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
-        },
-        ResearcherId:{
-            type:Number,
-            default:0
-        }
+  props: {
+    isAddParticipateShow: {
+      type: Boolean,
+      default: false,
     },
-    watch:{
-        isAddParticipateShow(newval){
-            if(newval){
-                this.dynamicItem = [{name:'',isShow:false}]
-                this.getIsPermissionName()
-            }
-        },
+    RsCalendarId: {
+      type: Number,
+      default: 0,
     },
-    data() {
-        return {
-            dynamicItem:[{name:'',isShow:false}],
-            companyList:[],
-            timeout:0,
-            warningIsShow:false,
-            hashtagValue:'',// 主题标签
-            hashtagOptions:[],// 主题数据
-            tagList:[],// /标签类型
-            tagName: '',
-            chartPermissionName:'',
-            isShowPermission:false
-        };
+    ResearcherId: {
+      type: Number,
+      default: 0,
     },
-    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;
-                    }
+    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,
-                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 =[]
+          });
+      } 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;
           }
-        },
-        // 选择标签
-        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
-            }
-        },
-        // 关闭弹框
-        closeDlg(){
-            this.hashtagValue = ''// 主题标签
-            this.hashtagOptions = []// 主题数据
-            this.tagList = []// /标签类型
-            this.tagName =  ''
-            this.chartPermissionName = ''
-            this.isShowPermission = false
-            this.$emit('close')
+        });
+      } 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>

src/views/roadshow_manage/compononts/showParticipateListDia.vue

@@ -42,6 +42,7 @@
         <addParticipateDia 
             :isAddParticipateShow="isAddShow"
             :RsCalendarId="RsCalendarId"
+            isType="查看"
             @close="isAddShow=false;"
             @confirm="getTableData();isAddShow=false;"
         />
@@ -157,7 +158,7 @@ export default {
             }).then(res=>{
                 if(res.Ret!==200) return 
                 this.$message.success('提交成功')
-                this.getTableData()
+                this.closeDlg()
             })
         },
         // 进入看看是否是策略
@@ -166,6 +167,7 @@ export default {
               if( res.Ret===200 ){
                 this.chartPermissionName = res.Data.ChartPermissionName
                 this.isShowPermission = res.Data.Belong
+                this.tagList = res.Data.List
             }
         },
         // 关闭弹框