feat(banner管理页面): 编辑组件“房间”选项取消长ID搜索（接口失效）

src/components/data/SearchRoomInput/index.vue

@@ -1,8 +1,28 @@
 <template>
   <div class="search-room-input">
-    <el-tooltip v-model="showTips" :manual="true" effect="dark" :content="tipsContent">
+    <el-tooltip
-      <el-input v-model.trim="content" v-loading="loading" :class="{'success': roomProfile.id && roomProfile.id > 0 , 'fail': (!roomProfile.id || roomProfile.id < 0) && failShow }" placeholder="请输入房间ID" class="input-with-select" @blur="clickSearch">
+      v-model="showTips"
-        <el-select slot="prepend" v-model="selectType" placeholder="类型" @change="clickSearch">
+      :manual="true"
+      effect="dark"
+      :content="tipsContent"
+    >
+      <el-input
+        v-model.trim="content"
+        v-loading="loading"
+        :class="{
+          success: roomProfile.id && roomProfile.id > 0,
+          fail: (!roomProfile.id || roomProfile.id < 0) && failShow
+        }"
+        placeholder="请输入房间ID"
+        class="input-with-select"
+        @blur="clickSearch"
+      >
+        <el-select
+          slot="prepend"
+          v-model="selectType"
+          placeholder="类型"
+          @change="clickSearch"
+        >
           <el-option label="长ID" value="LONG_ID" />
           <el-option label="短ID" value="SHORT_ID" />
         </el-select>
@@ -17,7 +37,11 @@
     >
       <span>找到多个结果, 请选择您期望</span>
       <div class="select-room">
-        <div v-for="(item, index) in roomProfiles" :key="index" class="user-item flex-l">
+        <div
+          v-for="(item, index) in roomProfiles"
+          :key="index"
+          class="user-item flex-l"
+        >
           <el-image
             style="width: 40px; height: 40px; margin-right:10px;border-radius: 100%; flex-shrink: 0;"
             :src="item.roomCover"
@@ -38,53 +62,55 @@
       </div>
     </el-dialog>
   </div>
-
 </template>
 <script>
-import { getRoomProfileBySysOriginAccount, listRoomProfileByAccount, getRoomProfileByRoomId } from '@/api/room'
+import {
+  getRoomProfileBySysOriginAccount,
+  listRoomProfileByAccount
+} from "@/api/room";
 export default {
-  name: 'SearchRoomInput',
+  name: "SearchRoomInput",
   props: {
     sysOrigin: {
       type: String,
       require: false,
-      default: ''
+      default: ""
     },
     roomId: {
       type: String,
       require: false,
-      default: ''
+      default: ""
     }
   },
   data() {
     return {
       showTips: false,
-      tipsContent: '',
+      tipsContent: "",
       loading: false,
-      content: '',
+      content: "",
-      selectType: 'SHORT_ID',
+      selectType: "SHORT_ID",
       failShow: false,
       roomProfile: {},
       roomProfiles: [],
       visibleSelecteDialog: false
-    }
+    };
   },
   watch: {
     roomId: {
       handler(val) {
-        if (val === '') {
+        if (val === "") {
-          return
+          return;
         }
         if (val.length > 15) {
-          this.selectType = 'LONG_ID'
+          this.selectType = "LONG_ID";
-          this.content = val
+          this.content = val;
-          this.clickSearch()
+          this.clickSearch();
-          return
+          return;
         }
         if (val.length < 15) {
-          this.selectType = 'SHORT_ID'
+          this.selectType = "SHORT_ID";
-          this.content = val
+          this.content = val;
-          return
+          return;
         }
       },
       immediate: true
@@ -92,91 +118,102 @@ export default {
   },
   methods: {
     handleClose() {
-      this.$emit('closeSelectDialog')
+      this.$emit("closeSelectDialog");
-      this.visibleSelecteDialog = false
+      this.visibleSelecteDialog = false;
     },
     clickSelected(item) {
-      this.visibleSelecteDialog = false
+      this.visibleSelecteDialog = false;
-      this.$emit('success', item)
+      this.$emit("success", item);
     },
     emitFail() {
-      this.roomProfiles = []
+      this.roomProfiles = [];
-      this.roomProfile = {}
+      this.roomProfile = {};
-      this.failShow = true
+      this.failShow = true;
-      this.$emit('fail')
+      this.$emit("fail");
     },
     failTipsContent(content) {
-      this.emitFail()
+      this.emitFail();
-      this.showTips = true
+      this.showTips = true;
-      this.tipsContent = content
+      this.tipsContent = content;
     },
     clickSearch() {
-      const that = this
+      const that = this;
-      that.$emit('load')
+      that.$emit("load");
-      that.failShow = false
+      that.failShow = false;
-      that.showTips = false
+      that.showTips = false;
       if (!that.content) {
-        that.emitFail()
+        that.emitFail();
-        that.showTips = false
+        that.showTips = false;
-        that.failShow = false
+        that.failShow = false;
-        return
+        return;
       }
       if (!/\d+/.test(that.content)) {
-        that.failTipsContent('输入内容必须是正整数!')
+        that.failTipsContent("输入内容必须是正整数!");
-        return
+        return;
       }
       if (that.content.length < 1) {
-        that.failTipsContent('输入账号必须>=1位数!')
+        that.failTipsContent("输入账号必须>=1位数!");
-        return
+        return;
       }
-      if (that.roomProfile && (that.roomProfile.roomAccount === that.content || that.roomProfile.roomAccount === that.content)) {
+      if (
-        that.$emit('success', that.roomProfile)
+        that.roomProfile &&
-        return
+        (that.roomProfile.roomAccount === that.content ||
+          that.roomProfile.roomAccount === that.content)
+      ) {
+        that.$emit("success", that.roomProfile);
+        return;
       }
-      that.loading = true
+      if (type === "LONG_ID") return;
-      that.search(that.selectType, that.content).then(res => {
-        that.loading = false
-        const result = res.body
-        if (!result) {
-          that.failTipsContent('没有找到房间信息!')
-          return
-        }
 
-        if (result.length > 0) {
+      that.loading = true;
-          this.failShow = false
+      that
-          that.roomProfiles = result
+        .search(that.selectType, that.content)
-          if (that.roomProfiles.length === 1) {
+        .then(res => {
-            that.roomProfile = that.roomProfiles[0]
+          that.loading = false;
-            that.$emit('success', that.roomProfile)
+          const result = res.body;
-            return
+          if (!result) {
+            that.failTipsContent("没有找到房间信息!");
+            return;
           }
-          that.visibleSelecteDialog = true
-          return
-        }
 
-        if (result.length === 0) {
+          if (result.length > 0) {
-          that.failTipsContent('没有找到房间信息!')
+            this.failShow = false;
-          return
+            that.roomProfiles = result;
-        }
+            if (that.roomProfiles.length === 1) {
+              that.roomProfile = that.roomProfiles[0];
+              that.$emit("success", that.roomProfile);
+              return;
+            }
+            that.visibleSelecteDialog = true;
+            return;
+          }
 
-        that.roomProfile = result
+          if (result.length === 0) {
-        that.$emit('success', that.roomProfile)
+            that.failTipsContent("没有找到房间信息!");
-      }).catch(er => {
+            return;
-        that.loading = false
+          }
-        console.error('clickSearch', er)
+
-        that.failTipsContent('请求数据错误!')
+          that.roomProfile = result;
-      })
+          that.$emit("success", that.roomProfile);
+        })
+        .catch(er => {
+          that.loading = false;
+          console.error("clickSearch", er);
+          that.failTipsContent("请求数据错误!");
+        });
     },
     search(type, id) {
-      if (type === 'LONG_ID') {
+      if (type === "LONG_ID") {
-        return getRoomProfileByRoomId(id)
+        // return getRoomProfileByRoomId(id)
       }
-      if (type === 'SHORT_ID') {
+      if (type === "SHORT_ID") {
-        return this.sysOrigin ? getRoomProfileBySysOriginAccount(this.sysOrigin, id) : listRoomProfileByAccount(id)
+        return this.sysOrigin
+          ? getRoomProfileBySysOriginAccount(this.sysOrigin, id)
+          : listRoomProfileByAccount(id);
       }
     }
   }
-}
+};
 </script>
 <style lang="scss">
 .search-room-input {
@@ -184,26 +221,26 @@ export default {
     width: 100px;
   }
   .success > .el-input__inner {
-    border: 1px solid #67C23A;
+    border: 1px solid #67c23a;
   }
   .fail > .el-input__inner {
-     border: 1px solid #F56C6C;
+    border: 1px solid #f56c6c;
   }
 }
 </style>
 <style scoped lang="scss">
 .search-room-input {
-.select-room {
+  .select-room {
-  .user-item {
+    .user-item {
-    padding: 5px 0rem;
+      padding: 5px 0rem;
-    img {
+      img {
-      border-radius: 100%;
+        border-radius: 100%;
-    }
+      }
-    .nickname {
+      .nickname {
-      width: 100%;
+        width: 100%;
-      padding: 10px;
+        padding: 10px;
+      }
     }
   }
 }
-}
 </style>