dy-admin-manager/src/views/teamDetail/teamList.vue

<template>
  <div class="m-container">
    <h2>
      <div class="squrt"></div>
      乐团列表 <filter-search @reload="getList" :moreKeys="['organId']" />
    </h2>
    <div class="m-core">
      <div class="btnList" style="margin-bottom: 20px">
        <el-button
          type="primary"
          v-permission="'/teamBuild'"
          @click="createNewTeam"
          >新建乐团</el-button
        >
        <!-- <div class='newBand'
             v-permission="'/teamBuild/trimming'"
             @click="resetTeam">乐团调整</div> -->
      </div>

      <save-form
        :inline="true"
        @submit="search"
        @reset="reset"
        class="topForm"
        ref="topForm"
        :model="topForm"
      >
        <el-form-item prop="teamName">
          <el-input
            v-model.trim="topForm.teamName"
            clearable
            @keyup.enter.native="search"
            placeholder="请输入乐团名称"
          ></el-input>
        </el-form-item>
        <el-form-item prop="orgin">
          <el-select
            class="multiple"
            v-model.trim="topForm.orgin"
            filterable
            clearable
            placeholder="请选择分部"
          >
            <el-option
              v-for="(item, index) in organList"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="status">
          <el-select
            class="multiple"
            v-model.trim="topForm.status"
            filterable
            clearable
            placeholder="请选择乐团状态"
          >
            <el-option
              v-for="(item, index) in nowStatus"
              :key="index"
              :label="item.text"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 收费类型 -->
        <el-form-item prop="payType">
          <el-select
            v-model.trim="topForm.payType"
            filterable
            placeholder="请选择收费类型"
            clearable
          >
            <el-option
              v-for="(item, index) in typeList"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" native-type="submit">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" native-type="reset">重置</el-button>
        </el-form-item>
      </save-form>
      <div class="tableWrap">
        <el-table
          style="width: 100%"
          @selection-change="handleSelectionChange"
          :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
          :data="tableData"
        >
          <!-- <el-table-column type="selection"
                           :selectable="checkSelectable"
                           width="50">
          </el-table-column> -->
          <el-table-column
            prop="id"
            width="100"
            align="center"
            label="乐团编号"
          >
            <template slot-scope="scope">
              <copy-text>{{ scope.row.id }}</copy-text>
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            width="200px"
            align="center"
            label="乐团名称"
          >
            <template slot-scope="scope">
              <copy-text>{{ scope.row.name }}</copy-text>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            width="200px"
            prop="cooperationOrganName"
            max-width="274"
            label="合作单位"
          >
          </el-table-column>
          <el-table-column prop="status" align="center" label="乐团状态">
            <template slot-scope="scope">
              <div>
                {{ scope.row.status | teamStatus }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="chargeTypeName"
            label="收费类型"
          >
          </el-table-column>
          <el-table-column
            prop="educationalTeacherName"
            align="center"
            label="乐团主管"
          >
          </el-table-column>
          <el-table-column
            prop="teamTeacherName"
            align="center"
            label="运营主管"
          >
          </el-table-column>
          <el-table-column
            prop="groupMemberNum"
            align="center"
            label="成团人数"
          >
          </el-table-column>
          <el-table-column prop="payNum" align="center" label="在读人数">
          </el-table-column>
          <!-- <el-table-column prop="course"
                           align='center'
                           label="当前课时">
          </el-table-column> -->
          <el-table-column
            prop="createTime"
            width="100px"
            align="center"
            label="申请时间"
          >
            <template slot-scope="scope">
              <div>
                {{ scope.row.createTime | formatTimer }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" width="100px" label="成团时间">
            <template slot-scope="scope">
              <div>
                {{ scope.row.billStartDate | formatTimer }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" width="100px" label="清单状况">
            <template slot-scope="scope">
              <div>
                {{ scope.row.hasVerifyMusicalList ? "已确认" : "未确认" }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            width="220px"
            fixed="right"
            label="操作"
          >
            <template slot-scope="scope">
              <div>
                <!-- <el-button type="text"
                           v-if="scope.row.status == 'PREPARE' && permission('/setImprovement')"
                           @click="gotoImprovement(scope.row)">基础技能班</el-button> -->
                <el-button
                  type="text"
                  v-if="
                    scope.row.status == 'PREPARE' &&
                    permission('/teamDetailedList')
                  "
                  @click="gotodetailList(scope.row)"
                  >发放清单</el-button
                >

                <!-- <el-button type="text"
                           v-if="scope.row.status == 'PREPARE'"
                           @click="lookTeamCourse(scope.row)">查看课表</el-button> -->

                <!-- 报名中&缴费中 查看 -->
                <el-button
                  type="text"
                  v-if="
                    (scope.row.status == 'APPLY' ||
                      scope.row.status == 'PAY') &&
                    permission('/signupList')
                  "
                  @click="lookTeamDetail(scope.row)"
                  >查看</el-button
                >

                        <el-button
                  type="text"
                  v-if="
                    (scope.row.status == 'PREPARE' ||
                      scope.row.status == 'PROGRESS') &&
                    permission('/remedy')&&scope.row.isRemedy
                  "
                  @click="gotoSigin(scope.row)"
                  >乐团补招</el-button
                >
                <!-- 报名中缴费中筹备中查看乐团 -->
                <el-button
                  type="text"
                  v-if="
                    (scope.row.status == 'APPLY' ||
                      scope.row.status == 'PAY' ||
                      scope.row.status == 'PREPARE' ||
                      scope.row.status == 'PRE_APPLY' ||
                      scope.row.status == 'PRE_BUILD_FEE' ||
                      scope.row.status == 'FEE_AUDIT') &&
                    permission('/teamLookBase')
                  "
                  @click="lookTeamInfo(scope.row)"
                  >乐团信息</el-button
                >
                <el-button
                  v-if="permission('recharge/findAll')"
                  type="text"
                  @click="lookSteam(scope.row)"
                  >乐团日志</el-button
                >
                <!-- 进行中 关闭 -->
                <el-button
                  type="text"
                  v-if="
                    scope.row.status == 'PROGRESS' &&
                    permission('musicGroup/closeMusicGroup')
                  "
                  @click="closeTeamDetail(scope.row)"
                  >关闭乐团</el-button
                >
                <!-- 进行中 查看 -->
                <el-button
                  type="text"
                  v-if="
                    scope.row.status == 'PROGRESS' && permission('/teamDetails')
                  "
                  @click="lookTeamDetail(scope.row)"
                  >查看</el-button
                >

                <!-- 预报名中 查看 -->
                <el-button
                  type="text"
                  v-if="
                    scope.row.status == 'PRE_APPLY' &&
                    permission('studentRegistration/queryPreApplyList')
                  "
                  @click="lookTeamDetail(scope.row)"
                  >查看</el-button
                >

                <!-- 暂停中 查看 -->
                <el-button
                  type="text"
                  v-if="
                    scope.row.status == 'PAUSE' &&
                    permission('musicGroup/pauseMusicGroup/look')
                  "
                  @click="lookTeamDetail(scope.row)"
                  >查看</el-button
                >

                <!-- 创建缴费中 查看 -->
                <el-button
                  type="text"
                  v-if="
                    scope.row.status == 'PRE_BUILD_FEE' &&
                    permission('/createPayment')
                  "
                  @click="lookTeamDetail(scope.row)"
                  >创建缴费</el-button
                >

                <!-- <el-button type="text"
                           v-if="scope.row.status != 'PROGRESS' && scope.row.status != 'CANCELED'  && scope.row.status != 'PAUSE' && scope.row.status != 'APPLY'&& scope.row.status != 'PAY'"
                           @click="lookTeamDetail(scope.row)">编辑</el-button> -->
                <!-- 筹备中 编辑 -->
                <el-button
                  type="text"
                  v-if="
                    scope.row.status == 'PREPARE' &&
                    permission('teamDetail/teamSeting/update')
                  "
                  @click="lookTeamDetail(scope.row)"
                  >班级列表</el-button
                >
                <!-- 审核中 编辑 -->
                <el-button
                  type="text"
                  v-if="scope.row.status == 'AUDIT' && permission('/teamAudit')"
                  @click="lookTeamDetail(scope.row)"
                  >审核</el-button
                >
                <!-- 费用审核中  -->
                <!-- <el-button type="text"
                           v-if="( scope.row.status == 'FEE_AUDIT')&& permission('teamDetail/audit/update')"
                           @click="lookTeamDetail(scope.row)">查看</el-button> -->
                <!-- 编辑中 编辑 -->
                <el-button
                  type="text"
                  v-if="scope.row.status == 'DRAFT' && permission('/teamDraft')"
                  @click="lookTeamDetail(scope.row)"
                  >编辑</el-button
                >
                <el-button
                  type="text"
                  v-if="
                    (scope.row.status == 'DRAFT' ||
                      scope.row.status == 'AUDIT' ||
                      scope.row.status == 'FEE_AUDIT' ||
                      scope.row.status == 'APPLY' ||
                      scope.row.status == 'PAY') &&
                    permission('musicGroup/cancelMusicGroup')
                  "
                  @click="stopTeam(scope.row)"
                  >取消乐团</el-button
                >
                <!-- 审核失败 编辑 -->
                <el-button
                  type="text"
                  v-if="
                    scope.row.status == 'AUDIT_FAILED' &&
                    permission('/auditFailed')
                  "
                  @click="lookTeamDetail(scope.row)"
                  >编辑</el-button
                >

                <el-button
                  v-if="
                    scope.row.status == 'PREPARE' &&
                    permission('musicGroup/action')
                  "
                  @click="startTeam(scope.row)"
                  type="text"
                  >确认成团</el-button
                >
                <!-- <el-button type="text"
                           v-if="scope.row.status == 'AUDIT' && permission('musicGroup/cancelMusicGroup')"
                           @click="stopTeam(scope.row)">取消乐团</el-button> -->
                <el-button
                  v-if="
                    scope.row.status == 'PAUSE' &&
                    permission('musicGroup/resumeMusicGroup')
                  "
                  @click="onTeamOpeation('start', scope.row)"
                  type="text"
                  >启动</el-button
                >
                <el-button
                  v-if="
                    scope.row.status == 'PROGRESS' &&
                    permission('musicGroup/pauseMusicGroup')
                  "
                  @click="onTeamOpeation('pause', scope.row)"
                  type="text"
                  >暂停</el-button
                >
                <el-button
                  v-if="
                    scope.row.status == 'PROGRESS' &&
                    permission('/resetTeaming')
                  "
                  @click="resetTeaming(scope.row)"
                  type="text"
                  >修改</el-button
                >
                <el-button
                  v-if="
                    scope.row.status == 'CANCELED' &&
                    permission('musicGroup/deleteMusicGroup')
                  "
                  @click="deteleTeaming(scope.row)"
                  type="text"
                  >删除</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <!-- 分页 -->
        <pagination
          sync
          :total.sync="rules.total"
          :page.sync="rules.page"
          :limit.sync="rules.limit"
          :page-sizes="rules.page_size"
          @pagination="getList"
        />
      </div>
      <el-dialog :visible.sync="showSteam" width="500px" title="乐团流程">
        <teamSteam :activeId="activeId" />
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="showSteam = false">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog :visible.sync="closeVisible" title="确认学员" width="800px">
        <closeStudens
          v-if="closeVisible"
          :detail="closeDetail"
          @close="closeVisible = false"
          @submited="getList"
        />
      </el-dialog>
    </div>
  </div>
</template>
<script>
import pagination from "@/components/Pagination/index";
import { getTeamList, getPayType } from "@/api/teamServer";
import {
  getCooperation,
  cancelMusicGroup,
  startTeam,
  getEmployeeOrgan,
  pauseMusicGroup,
  resumeMusicGroup,
  deleteMusicGroup,
} from "@/api/buildTeam";
import { musicGroupStatus } from "@/utils/searchArray";
import { isObject } from "util";
import { permission } from "@/utils/directivePage";
import teamSteam from "./teamListComponent/teamSteam";
import closeStudens from "../teamBuild/modals/close-studens";
export default {
  name: "teamList",
  data() {
    return {
      closeDetail: {},
      closeVisible: false,
      topForm: {
        teamName: "",
        status: "",
        payType: "",
        word: "",
        orgin: "",
      },
      organList: [],
      typeList: [], // 收费类型
      nowStatus: musicGroupStatus,
      searchLsit: [], // 存储选择后的数组
      tableData: [], // table数据
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50], // 选择限制显示条数
      },
      passed: [], // 传递的参数
      showSteam: false,
      activeId: null,
    };
  },
  components: {
    pagination,
    teamSteam,
    closeStudens,
  },
  mounted() {
    const { query } = this.$route;
    if (query.organId) {
      this.topForm.orgin = query.organId;
    }
    this.init();
  },
  activated() {
    this.init();
  },
  methods: {
    init() {
      sessionStorage.setItem("resetCode", "1");

      getEmployeeOrgan().then((res) => {
        if (res.code == 200) {
          this.organList = res.data;
        }
      });
      // 获取乐团收费类型
      getPayType().then((res) => {
        if (res.code == 200) {
          this.typeList = res.data.rows;
        }
      });
      // 获取乐团合作单位(学校)
      // getCooperation().then(res => {
      // })
      this.getList();
    },
    permission(str) {
      return permission(str);
    },
    reset() {
      this.rules.page = 1;
      this.$refs["topForm"].resetFields();
      this.getList();
    },
    search() {
      this.rules.page = 1;
      this.getList();
    },
    getList() {
      getTeamList({
        rows: this.rules.limit,
        page: this.rules.page,
        organId: this.topForm.orgin || null,
        chargeTypeId: this.topForm.payType || null,
        musicGroupName: this.topForm.teamName || null,
        musicGroupStatus: this.topForm.status || null,
        musicGroupId: this.$route.query.search,
      }).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.rows;
          this.rules.total = res.data.total;
        }
      });
    },
    createNewTeam() {
      this.$store.dispatch("buildIndex", 0);
      this.$store.dispatch("delVisitedViews", { path: "/business/teamBuild" });

      this.$router.push(
        { path: "/business/teamBuild", query: { type: "newTeam",clear:'true'} },
        (router) => {
          router.meta.title = "新建乐团";
        }
      );
    },

    resetTeam() {
      // 这里还有勾选的乐团信息
      if (this.passed && this.passed.length <= 0) {
        this.$message.error("请至少选择一个乐团进行调整");
        return;
      }
      this.$router.push({
        path: "/business/teamDraft",
        query: { type: "teamList", teamList: this.passed },
      });
    },
    resetTeaming(row) {
      // 修改进行中的乐团
      console.log(row.id)
      sessionStorage.removeItem(`${row.id}base`);
      sessionStorage.removeItem(`${row.id}sound`);
      this.$nextTick(res=>{
           this.$router.push({
        path: "/business/resetTeaming",
        query: { type: "resetTeam", id: row.id },
      });
      })

    },
    setSearchList(obj) {
      //
      // 没有相同的key=>添加这个对象
      // 有相同的key => 替换这个对象
      if (obj.type == 1) {
        let flag = false;
        this.searchLsit = this.searchLsit.map((item) => {
          if (item.id == obj.id) {
            item = obj;
            flag = true;
          }
          return item;
        });
        if (!flag) {
          this.searchLsit.push(obj);
        }
      } else {
        let flag = false;
        this.searchLsit = this.searchLsit.map((item) => {
          if (item.key == obj.key) {
            // 多选框的再次点击=> 等于 就是删除
            item = obj;
            flag = true;
          }
          return item;
        });
        if (!flag) {
          this.searchLsit.push(obj);
        }
      }
    },
    closeSearch(item) {
      // 1.删除search里的元素
      if (item.type == 1) {
        for (let some in this.searchLsit) {
          if (this.searchLsit[some].id == item.id) {
            this.searchLsit.splice(some, 1);
          }
        }
        // 2.清空对应元素所对应的的值
        this.topForm[item.id] = "";
      } else {
        for (let i = 0; i < this.topForm[item.id].length; i++) {
          if (this.topForm[item.id][i] == item.value) {
            this.topForm[item.id].splice(i, 1);
          }
        }
        // 处理search
        for (let some in this.searchLsit) {
          if (
            this.searchLsit[some].value == item.value &&
            this.searchLsit[some].id == item.id
          ) {
            this.searchLsit.splice(some, 1);
          }
          // id: 'school', key: this.schools[item].text, value: val, type: 1
        }
      }
    },
    closeTeamDetail(row) {
      this.closeVisible = true;
      this.closeDetail = { ...row };
    },
    onTeamOpeation(type, row) {
      if (type == "start") {
        this.$confirm("是否确定开启乐团?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            resumeMusicGroup({ musicGroupId: row.id }).then((res) => {
              if (res.code == 200) {
                this.$message.success("开启成功");
                this.getList();
              } else {
                this.$message.error(res.msg);
              }
            });
          })
          .catch(() => {});
      } else if (type == "pause") {
        this.$confirm("是否确定暂停乐团?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            pauseMusicGroup({ musicGroupId: row.id }).then((res) => {
              if (res.code == 200) {
                this.$message.success("暂停成功");
                this.getList();
              } else {
                this.$message.error(res.msg);
              }
            });
          })
          .catch(() => {});
      }
    },
    gotoSearch() {
      this.$refs["topForm"].resetFields();
      this.searchLsit = [];
    },
    lookTeamCourse(row) {
      // 查看课表
      this.$router.push({
        path: "/business/teamDetailCourse",
        query: { id: row.id, name: row.name },
      });
    },
    lookTeamDetail(row) {
      sessionStorage.removeItem(`${row.id}base`);
      sessionStorage.removeItem(`${row.id}sound`);
      switch (row.status) {
        case "DRAFT": {
          // 编辑中
          this.$store.dispatch("draftIndex", 0);
          // teamBaseInfo
          this.$router.push(
            {
              path: "/business/teamDraft",
              query: { type: "teamDraft", id: row.id ,clear:'true'},
            },
            (router) => {
              router.meta.title = "编辑乐团";
            }
          );
          break;
        }
        case "AUDIT": {
          // 审核中
          this.$store.dispatch("draftIndex", 0);
          this.$router.push(
            {
              path: "/business/teamAudit",
              query: { type: "teamAudit", id: row.id,clear:'true' },
            },
            (router) => {
              router.meta.title = "审核乐团";
            }
          );
          break;
        }
        case "PRE_BUILD_FEE": {
          // 创建缴费中
          this.$router.push({
            path: "/business/createPayment",
            query: { type: "PRE_BUILD_FEE", id: row.id, name: row.name },
          });
          break;
        }
        case "FEE_AUDIT": {
          // 费用审核中
          this.$store.dispatch("draftIndex", 0);
          this.$router.push(
            {
              path: "/business/feeAudit",
              query: { type: "feeAudit", id: row.id,clear:'true' },
            },
            (router) => {
              router.meta.title = "乐团费用审核中";
            }
          );
          break;
        }
        case "AUDIT_FAILED": {
          // 审核失败
          this.$store.dispatch("draftIndex", 0);
          this.$router.push(
            {
              path: "/business/auditFailed",
              query: { type: "teamDraft", id: row.id,clear:'true' },
            },
            (router) => {
              router.meta.title = "乐团审核失败编辑";
            }
          );
          break;
        }
        case "PRE_APPLY": {
          // 预报名
          this.$router.push({
            path: "/business/forecastName",
            query: { id: row.id, name: row.name },
          });
          break;
        }
        case "APPLY": {
          // 报名中
          this.$router.push(
            {
              path: `/business/signupList`,
              query: { status: row.status, id: row.id, name: row.name },
            },
            (router) => {
              router.meta.title = "报名详情";
            }
          );
          break;
        }
        case "PAY": {
          // 缴费中
          this.$router.push(
            {
              path: `/business/signupList`,
              query: { status: row.status, id: row.id, name: row.name },
            },
            (router) => {
              router.meta.title = "缴费详情";
            }
          );
          break;
        }
        case "PREPARE": {
          // 筹备中 跳转到乐团设置界面
          this.$router.push({
            path: `/business/teamSeting`,
            query: { status: row.status, id: row.id, name: row.name },
          });
          break;
        }
        case "PROGRESS": {
          // 进行中
          // 调到乐团详情 teamDetails
          this.$router.push({
            path: `/business/teamDetails`,
            query: {
              status: row.status,
              id: row.id,
              name: row.name,
              organId: row.organId,
              type: "look",
            },
          });
          break;
        }
        case "CANCELED": {
          // 取消
          break;
        }
        case "PAUSE": {
          // 暂停
          this.$router.push({
            path: `/business/teamDetails`,
            query: { status: row.status, id: row.id, name: row.name },
          });
          break;
        }
      }
    },
    checkSelectable(row) {
      return row.status == "PROGRESS";
    },
    handleSelectionChange(arr) {
      this.passed = [];
      for (let i in arr) {
        let obj = {};
        obj.id = arr[i].id;
        obj.name = arr[i].name;
        this.passed.push(obj);
      }
    },
    gotodetailList(row) {

      this.$router.push({
        path: "/business/teamDetailedList",
        query: { id: row.id },
      });
    },
    //
    lookTeamInfo(row) {
         sessionStorage.removeItem(`${row.id}base`);
      sessionStorage.removeItem(`${row.id}sound`);
      this.$router.push({
        path: "/business/teamLookBase",
        query: { type: "look", id: row.id, name: row.name },
      });
    },
    // setImprovement 设置基础技能班
    gotoImprovement(row) {
      let search = JSON.stringify(this.topForm);
      let rules = JSON.stringify(this.rules);
      this.$router.push({
        path: "/business/setImprovement",
        query: { id: row.id },
      });
    },
    // 停止乐团
    stopTeam(row) {
      this.$confirm("您确定取消申请乐团?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          cancelMusicGroup({
            musicGroupId: row.id,
          }).then((res) => {
            if (res.code == 200) {
              this.$message.success("停止成功");
              this.getList();
            }
          });
        })
        .catch(() => {});
    },
    // 确认成团
    startTeam(row) {
      this.$confirm("是否确定成团?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          startTeam({ musicGroupId: row.id }).then((res) => {
            if (res.code == 200) {
              this.$message.success("开启乐团成功");
              this.getList();
            }
          });
        })
        .catch(() => {});
    },
    deteleTeaming(row) {
      this.$confirm("您确定删除该乐团?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteMusicGroup({
            musicGroupId: row.id,
          }).then((res) => {
            if (res.code == 200) {
              this.$message.success("删除成功");
              this.getList();
            }
          });
        })
        .catch(() => {});
    },
    lookSteam(row) {
      this.activeId = row.id;
      this.showSteam = true;
    },
    gotoSigin(row){
       this.$router.push(
            {
              path: `/business/remedy`,
              query: { status: row.status, id: row.id, name: row.name },
            },
            (router) => {
              router.meta.title = "报名详情";
            }
          );
    }
  },
  watch: {
    showSteam(val) {
      if (!val) {
        this.activeId = null;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
/deep/.el-button+.el-button {
     margin-left: 0px;
}
.select {
  font-size: 14px;
}
.btnList {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  div {
    margin-right: 15px;
  }
}
</style>