caimei-authentic-manager/src/views/normal/club/components/ClubAssociated.vue

<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> -->
        <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
          :selection="false"
          :control="true"
          :list="filterSelectAssClubList"
          @filter="onFilterSelectAssClubList"
        >
          <template #control="{ row }">
            <el-button size="mini" type="danger" @click="onAssClubListRemove(row)">删除</el-button>
          </template>
        </associated-club-list>
      </el-form-item>
    </el-form>

    <!-- 关联机构 -->
    <el-dialog title="添加关联机构" :visible.sync="assClubListVisible" width="30%" :show-close="false">
      <associated-club-list
        v-if="assClubListVisible"
        :selection="true"
        :control="false"
        height="280"
        :list="assClubList"
        :show-ass-filter="true"
        :show-filter="false"
        @filter="onFilterAssClubList"
        @selected="onAssClubListChange"
      />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="onAssClubListCancel">取 消</el-button>
        <el-button type="primary" size="mini" @click="onAssClubListConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { AssociatedClubList } from '@/views/components/index'
import { mapGetters } from 'vuex'
import { fecthAuthList } from '@/api/auth'

export default {
  name: 'ClubAssociated',
  components: {
    AssociatedClubList
  },
  data() {
    return {
      formData: {},
      rules: {},
      assClubListVisible: false,
      // 关联机构相关
      assClubQuery: {
        pageNum: 1,
        pageSize: 1000,
        authParty: ''
      },
      assClubList: [], // 关联机构列表
      selectAssClubList: [], // 当前选中关联机构列表
      selectAssClubListAll: [], // 全部选中关联机构列表
      filterSelectAssClubList: [], // 筛选后的关联机构列表
      listQuery: { // 搜索
        authParty: ''
      }
    }
  },
  computed: {
    ...mapGetters(['authUserId'])
  },
  methods: {
    // 初始化表单
    initForm(data) {
      // 关联机构列表
      if (data.releationClubList) {
        this.selectAssClubListAll = data.releationClubList
        this.filterSelectAssClubList = this.selectAssClubListAll
      }
    },
    // 验证表单
    async validateForm() {
      try {
        await this.$refs.form.validate()
        return { selectAssClubListAll: this.selectAssClubListAll }
      } catch (error) {
        return Promise.reject(error)
      }
    },
    // 关联机构选择
    onChooseAssClub() {
      this.fetchAssClubList()
      this.assClubListVisible = true
    },
    // 获取关联机构列表
    async fetchAssClubList() {
      try {
        const excludeId = this.selectAssClubListAll.map((item) => item.authId)
        if (this.authId) {
          excludeId.push(parseInt(this.authId))
        }
        const res = await fecthAuthList(this.assClubQuery)
        this.assClubList = res.data.list.filter((item) => !excludeId.includes(item.authId))
      } catch (error) {
        console.log(error)
      }
    },
    // 关联机构列表筛选
    onFilterAssClubList(query) {
      this.assClubQuery.authParty = query.authParty
      this.fetchAssClubList()
    },
    // 关联机构列表选中
    onAssClubListChange(value) {
      this.selectAssClubList = value
    },
    // 关联机构选中列表确认
    onAssClubListConfirm() {
      this.selectAssClubListAll = [...this.selectAssClubListAll, ...this.selectAssClubList]
      this.filterSelectAssClubList = this.selectAssClubListAll
      this.assClubQuery.authParty = ''
      this.assClubList = []
      this.assClubListVisible = false
    },
    // 关联机构选中列表取消
    onAssClubListCancel() {
      this.selectAssClubList = []
      this.filterSelectAssClubList = this.selectAssClubListAll
      this.assClubQuery.authParty = ''
      this.assClubList = []
      this.assClubListVisible = false
    },
    // 已关联机构列表筛选
    onFilterSelectAssClubList() {
      const query = this.listQuery
      if (query.authParty) {
        this.filterSelectAssClubList = this.selectAssClubListAll.filter((item) =>
          new RegExp(query.authParty, 'ig').test(item.authParty)
        )
      } else {
        this.filterSelectAssClubList = this.selectAssClubListAll
      }
    },
    // 已关联机构列表删除
    onAssClubListRemove(row) {
      this.selectAssClubListAll = this.selectAssClubListAll.filter((item) => item.authId !== row.authId)
      this.filterSelectAssClubList = this.selectAssClubListAll
    }
  }
}
</script>