<template>
  <div id="">
    <el-dialog
      :visible.sync="dialogVisible"
      width="560px"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <div slot="title" class="hearders">
        <div class="leftTitle">关联业务员</div>
        <div class="rightBoxs">
          <img src="@/assets/images/Close@2x.png" alt="" @click="close" />
        </div>
      </div>
      <div>
        <label
          >姓名：<el-input
            style="width: 200px"
            v-model="listData.name"
            placeholder="请输入姓名"
          ></el-input></label
        ><el-button>搜索</el-button>
      </div>
      表格<br />分页
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" :loading="disabledBtn" @click="submit"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      disabledBtn: false,
      //   弹窗数据
      listData: {},
    };
  },
  methods: {
    showBox() {
      this.dialogVisible = true;
    },
    submit() {
      this.disabledBtn = true;
      setTimeout(() => {
        this.$message.success("修改成功");
        this.disabledBtn = false;
        this.dialogVisible = false;
        this.search();
      }, 500);
    },
    close() {
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.header_img {
  & > .imageStyBoxShow {
    border-radius: 50%;
    overflow: hidden;
    width: 60px;
    height: 60px;
    margin-right: 10px;
    border: 1px solid #999;
  }
  .btns {
    border: 1px solid #333;
    color: #333;
    padding: 4px 6px;
    font-style: normal;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
  }
}
.title_i {
  text-align: center;
  font-size: 12px;
  color: rgba(134, 144, 156, 1);
}
</style>
