场景包分配优化

src/views/systemManagement/scenePacketDistributionDetail.vue

@@ -11,7 +11,7 @@
             </div>
         </div>
 
-        <search-layout :needBox="true">
+        <!-- <search-layout :needBox="true">
             <template slot="searchItem1">
                 <span class="label">场景包名称</span>
                 <el-input
@@ -31,7 +31,7 @@
             <template slot="searchBtn2">
                 <el-button type="primary" @click="doReset">重置</el-button>
             </template>
-        </search-layout>
+        </search-layout> -->
 
         <div class="flexBox summaryBox">
             <div class="left flexBox">
@@ -49,10 +49,28 @@
             </div>
         </div>
 
-        <div class="isSelected">
-            <el-checkbox v-model="selected" @change="selectedShow"
-                >已选择</el-checkbox
-            >
+        <div class="searchBox flexBox">
+            <div class="isSelected">
+                <el-checkbox v-model="selected" @change="selectedShow"
+                    >已选择</el-checkbox
+                >
+            </div>
+            <div class="inputPanel">
+                <el-input
+                    v-model="searchParams.packageName"
+                    size="small"
+                    clearable
+                    placeholder="请输入场景包名称"
+                    maxlength="60"
+                    class="input-with-select"
+                >
+                    <el-button
+                        slot="append"
+                        icon="el-icon-search"
+                        @click="doSearch"
+                    ></el-button>
+                </el-input>
+            </div>
         </div>
 
         <tableList
@@ -90,7 +108,7 @@ export default {
         return {
             searchParams: {
                 //搜索参数
-                packageName: "", // 账户名称
+                packageName: "", // 场景包名称
             },
             columns: [
                 {
@@ -221,6 +239,22 @@ export default {
             this.doSearch();
         },
         showNums() {
+            if (this.checkedNames.length === 0) {
+                this.$message.error("请先选择场景包");
+                this.zrSceneNames = 0;
+                this.bzSceneNames = 0;
+                this.jtSceneNames = 0;
+                this.fhSceneNames = 0;
+                this.total = 0;
+                return;
+            }
+
+            this.zrSceneNames = 0;
+            this.bzSceneNames = 0;
+            this.jtSceneNames = 0;
+            this.fhSceneNames = 0;
+            this.total = 0;
+
             this.$axios({
                 method: "post",
                 url: this.$api.systemManagement.querySystemScenePackageListByTJ,
@@ -354,8 +388,36 @@ export default {
     }
 }
 
-.isSelected {
-    padding: 30px 0 10px 40px;
+.searchBox {
+    align-items: center;
+    justify-content: space-between;
+    padding: 30px 40px 10px 40px;
+}
+
+.inputPanel {
+    .el-input {
+        width: 300px;
+    }
+
+    /deep/ .el-input-group__append {
+        background-color: #fff;
+        border-color: #e5e5e5;
+        padding: 0;
+        overflow: hidden;
+    }
+
+    /deep/ .el-input-group__append button.el-button,
+    /deep/ .el-input-group__append div.el-select .el-input__inner,
+    /deep/ .el-input-group__append div.el-select:hover .el-input__inner,
+    /deep/ .el-input-group__prepend button.el-button,
+    /deep/ .el-input-group__prepend div.el-select .el-input__inner,
+    /deep/ .el-input-group__prepend div.el-select:hover .el-input__inner {
+        border-color: transparent;
+        background-color: transparent;
+        color: inherit;
+        border-top: 0;
+        border-bottom: 0;
+    }
 }
 
 .btns {