bug-699：适宜技术协定方 查询条件和操作项排版，一行放不下的处理参考系统已有的处理方式

src/views/business/SuitableTech.vue

@@ -5,118 +5,115 @@
       <div class="screening-title flex-vertical-center-l">
         <img src="~@/assets/filters.png" alt />
       </div>
-      <div class="screening-form flex-vertical-center-l flex-wrap">
-        <div class="screening-item flex-vertical-center-l">
-          <span>方名：</span>
-          <div class="input">
-            <el-input
-              size="mini"
-              v-model="searchData.name"
-              placeholder="请输入"
-              clearable
-            ></el-input>
+      <div style="flex:1">
+        <div class="screening-form flex-vertical-center-l flex-wrap">
+          <div class="screening-item flex-vertical-center-l">
+            <span>方名：</span>
+            <div class="input">
+              <el-input
+                size="mini"
+                v-model="searchData.name"
+                placeholder="请输入"
+                clearable
+              ></el-input>
+            </div>
           </div>
-        </div>
-        <div class="screening-item flex-vertical-center-l">
-          <span>共享至：</span>
-          <div class="input">
-            <el-radio-group v-model="searchData.shareType" size="mini">
-              <el-radio label="0">个人</el-radio>
-              <el-radio label="1">科室</el-radio>
-              <el-radio label="2">机构</el-radio>
-            </el-radio-group>
+          <div class="screening-item flex-vertical-center-l">
+            <span>共享至：</span>
+            <div class="input">
+              <el-radio-group v-model="searchData.shareType" size="mini">
+                <el-radio label="0">个人</el-radio>
+                <el-radio label="1">科室</el-radio>
+                <el-radio label="2">机构</el-radio>
+              </el-radio-group>
+            </div>
           </div>
-        </div>
-        <div class="screening-item flex-vertical-center-l">
-          <span>姓名：</span>
-          <div class="input">
-            <el-input
-              size="mini"
-              v-model="searchData.userName"
-              placeholder="请输入"
-              clearable
-            ></el-input>
+          <div class="screening-item flex-vertical-center-l">
+            <span>姓名：</span>
+            <div class="input">
+              <el-input
+                size="mini"
+                v-model="searchData.userName"
+                placeholder="请输入"
+                clearable
+              ></el-input>
+            </div>
           </div>
-        </div>
-        <div class="screening-item flex-vertical-center-l">
-          <span>是否统建处方：</span>
-          <div class="input">
-            <el-select
-              size="mini"
-              v-model="searchData.isUnified"
-              placeholder="请选择"
-            >
-              <el-option label="是" value="1"></el-option>
-              <el-option label="否" value="0"></el-option>
-            </el-select>
+          <div class="screening-item flex-vertical-center-l">
+            <span>是否统建处方：</span>
+            <div class="input">
+              <el-select
+                size="mini"
+                v-model="searchData.isUnified"
+                placeholder="请选择"
+              >
+                <el-option label="是" value="1"></el-option>
+                <el-option label="否" value="0"></el-option>
+              </el-select>
+            </div>
           </div>
         </div>
-        <div class="screening-item flex-vertical-center-l">
-          <span>医派：</span>
-          <div class="input">
-            <el-input
-              size="mini"
-              v-model="searchData.medicalSchool"
-              placeholder="请输入"
-              clearable
-            ></el-input>
+        <div class="screening-form flex-vertical-center-l flex-wrap">
+          <div class="screening-item flex-vertical-center-l">
+            <span>医派：</span>
+            <div class="input">
+              <el-input
+                size="mini"
+                v-model="searchData.medicalSchool"
+                placeholder="请输入"
+                clearable
+              ></el-input>
+            </div>
           </div>
-        </div>
-        <div class="screening-item flex-vertical-center-l">
-          <span>科室：</span>
-          <div class="input">
-            <el-input
-              size="mini"
-              v-model="searchData.department"
-              placeholder="请输入"
-              clearable
-            ></el-input>
+          <div class="screening-item flex-vertical-center-l">
+            <span>科室：</span>
+            <div class="input">
+              <el-input
+                size="mini"
+                v-model="searchData.department"
+                placeholder="请输入"
+                clearable
+              ></el-input>
+            </div>
           </div>
-        </div>
-        <div class="screening-item flex-vertical-center-l">
-          <span>涵盖项目：</span>
-          <div class="input">
-            <el-select
-              size="mini"
-              v-model="searchData.includeItem"
-              placeholder="请搜索选择"
-              clearable
-              filterable
-              :loading="projectLoading"
-              loading-text="搜索中..."
-              :filter-method="searchProject"
-              @focus="searchProject('')"
-            >
-              <el-option
-                v-for="(item, idx) in projectOptions"
-                :key="idx"
-                :label="item.itemName"
-                :value="item.pid"
-              ></el-option>
-            </el-select>
+          <div class="screening-item flex-vertical-center-l">
+            <span>涵盖项目：</span>
+            <div class="input">
+              <el-select
+                size="mini"
+                v-model="searchData.includeItem"
+                placeholder="请搜索选择"
+                clearable
+                filterable
+                :loading="projectLoading"
+                loading-text="搜索中..."
+                :filter-method="searchProject"
+                @focus="searchProject('')"
+              >
+                <el-option
+                  v-for="(item, idx) in projectOptions"
+                  :key="idx"
+                  :label="item.itemName"
+                  :value="item.pid"
+                ></el-option>
+              </el-select>
+            </div>
           </div>
-        </div>
-        <div class="screening-item flex-vertical-center-l">
-          <span>功效与适应症：</span>
-          <div class="input">
-            <el-input
-              size="mini"
-              v-model="searchData.efficacy"
-              placeholder="请输入"
-              clearable
-            ></el-input>
+          <div class="screening-item flex-vertical-center-l">
+            <span>功效与适应症：</span>
+            <div class="input">
+              <el-input
+                size="mini"
+                v-model="searchData.efficacy"
+                placeholder="请输入"
+                clearable
+              ></el-input>
+            </div>
           </div>
-        </div>
-        <div class="screening-btn-group">
-          <el-button type="primary" size="mini" @click="search()"
-            >搜索</el-button
-          >
-          <el-button type="warning" size="mini" @click="clearFilter()"
-            >清空</el-button
-          >
-          <el-button type="primary" size="mini" @click="openEditDialog()"
-            >新增</el-button
-          >
+
+          <el-button type="primary" size="mini" @click="search()">搜索</el-button>
+          <el-button type="warning" size="mini" @click="clearFilter()">清空</el-button>
+          <el-button type="primary" size="mini" @click="openEditDialog()">新增</el-button>
         </div>
       </div>
     </div>
@@ -244,20 +241,13 @@
               align="center"
             ></el-table-column>
             <el-table-column label="操作" width="180" align="center">
-              <div class="flex-center operation" slot-scope="scope">
-                <div class="flex-center" @click="openEditDialog(scope.row)">
-                  编辑
-                </div>
-                <div
-                  class="flex-center bg-yellow"
-                  @click="handleDelete(scope.row)"
-                >
-                  删除
-                </div>
-                <div class="flex-center" @click="handleView(scope.row)">
-                  查看
+              <template slot-scope="scope">
+                <div class="flex-center">
+                  <div class="find-detail find-fill" @click="openEditDialog(scope.row)">编辑</div>
+                  <div class="find-detail find-fill1" @click="handleDelete(scope.row)">删除</div>
+                  <div class="find-detail find-fill2" @click="handleView(scope.row)">查看</div>
                 </div>
-              </div>
+              </template>
             </el-table-column>
           </el-table>
         </div>
@@ -1265,6 +1255,18 @@ export default {
   height: 100%;
 }
 
+.suitable-tech ::v-deep .screening-form {
+  .screening-item {
+    width: 20%;
+    flex: none;
+
+    .el-input,
+    .el-select {
+      width: 100%;
+    }
+  }
+}
+
 .suitable-tech ::v-deep .popup-container {
   display: flex;
   flex-direction: column;
@@ -1345,30 +1347,35 @@ export default {
   .today-table {
     height: 100%;
 
-    .operation {
-      display: flex;
-      align-items: center;
-      justify-content: space-around;
-      flex-wrap: wrap;
+    .find-detail {
+      width: 60px;
+      height: 24px;
+      border: 1px solid #ffae45;
+      border-radius: 2px;
+      text-align: center;
+      color: #fff;
+      font-size: 14px;
+      cursor: pointer;
+      margin: 0 2px;
+      background: #ffae45;
+    }
 
-      div {
-        width: 60px;
-        height: 24px;
-        background: #5386f6;
-        border-radius: 2px;
-        font-size: 14px;
-        font-family: PingFang SC;
-        font-weight: 400;
-        color: #ffffff;
-        cursor: pointer;
-        margin: 5px 0;
-      }
+    .find-fill {
+      background: #5386f6 !important;
+      color: #fff !important;
+      border: 1px solid #5386f6;
+    }
 
-      .bg-yellow {
-        width: 60px;
-        height: 24px;
-        background: #ffae45;
-      }
+    .find-fill1 {
+      background: #ff6245;
+      color: #fff !important;
+      border: 1px solid #ff6245;
+    }
+
+    .find-fill2 {
+      background: #68a8ff !important;
+      color: #fff !important;
+      border: 1px solid #68a8ff;
     }
   }
 }