机构编辑样式

src/views/components/AssociatedClubList/index.vue

@@ -1,6 +1,15 @@
 <template>
   <div class="associated-club-list">
-    <div v-if="showFilter" class="filter-container">
+    <div v-if="showFilter" class="filter-AssTitle">
+      <div class="filter-control">
+        <span>已关联机构列表</span>
+        <!-- <el-input v-model="listQuery.authParty" placeholder="机构名称" size="mini" @keyup.enter.native="handleAssList" /> -->
+      </div>
+      <div class="filter-control">
+        <el-button size="mini" type="primary" @click="handleAssList">去关联</el-button>
+      </div>
+    </div>
+    <div v-if="showAssFilter" class="filter-container">
       <div class="filter-control">
         <span>机构名称:</span>
         <el-input v-model="listQuery.authParty" placeholder="机构名称" size="mini" @keyup.enter.native="handleFilter" />
@@ -68,6 +77,10 @@ export default {
     showFilter: {
       type: Boolean,
       default: true
+    },
+    showAssFilter: {
+      type: Boolean,
+      default: () => false
     }
   },
   data() {
@@ -78,6 +91,10 @@ export default {
     }
   },
   methods: {
+    // 使用父组件的方法
+    handleAssList() {
+      this.$parent.$parent.$parent.onChooseAssClub()
+    },
     handleFilter() {
       this.$emit('filter', this.listQuery)
     },
@@ -98,4 +115,14 @@ export default {
     margin-bottom: 0;
   }
 }
+.filter-AssTitle{
+  background: #eee;
+  padding: 6px 10px;
+  display: flex;
+  justify-content: space-between;
+
+  .filter-control {
+    margin-bottom: 0;
+  }
+}
 </style>

src/views/normal/club/components/ClubAssociated.vue

@@ -1,8 +1,17 @@
 <template>
   <div>
     <el-form ref="form" label-width="100px" :model="formData" :rules="rules">
-      <el-form-item label="已关联机构:">
-        <el-button size="mini" type="primary" @click="onChooseAssClub">关联机构</el-button>
+      <el-form-item label="">
+        <!-- <el-button size="mini" type="primary" @click="onChooseAssClub">关联机构</el-button> -->
+        <div class="filter-container">
+          <div class="filter-control">
+            <span>机构名称:</span>
+            <el-input v-model="listQuery.authParty" placeholder="机构名称" size="mini" @keyup.enter.native="onFilterSelectAssClubList" />
+          </div>
+          <div class="filter-control">
+            <el-button size="mini" type="primary" @click="onFilterSelectAssClubList">查询</el-button>
+          </div>
+        </div>
       </el-form-item>
       <el-form-item>
         <associated-club-list
@@ -26,6 +35,8 @@
         :control="false"
         height="280"
         :list="assClubList"
+        :show-ass-filter="true"
+        :show-filter="false"
         @filter="onFilterAssClubList"
         @selected="onAssClubListChange"
       />
@@ -61,7 +72,10 @@ export default {
       assClubList: [], // 关联机构列表
       selectAssClubList: [], // 当前选中关联机构列表
       selectAssClubListAll: [], // 全部选中关联机构列表
-      filterSelectAssClubList: [] // 筛选后的关联机构列表
+      filterSelectAssClubList: [], // 筛选后的关联机构列表
+      listQuery: { // 搜索
+        authParty: ''
+      }
     }
   },
   computed: {
@@ -129,7 +143,8 @@ export default {
       this.assClubListVisible = false
     },
     // 已关联机构列表筛选
-    onFilterSelectAssClubList(query) {
+    onFilterSelectAssClubList() {
+      const query = this.listQuery
       if (query.authParty) {
         this.filterSelectAssClubList = this.selectAssClubListAll.filter((item) =>
           new RegExp(query.authParty, 'ig').test(item.authParty)