小白刚入行工作:绝望中把这个页面憋出来了 穿梭框

290 阅读1分钟

image.png

<template>
  <div class="transfer">
    <!-- 候选人 -->
    <div class="candidate">
      <!-- 头部 -->
      <div class="header">
        <el-checkbox
          :indeterminate="isIndeterminate"
          v-model="checkAll"
          @change="handleCheckAllChange"
        >候选人</el-checkbox>
      </div>
      <!-- 主体 -->
      <div class="body-list">
        <el-input placeholder="请输入内容" v-model="searchText" @keyup.native.enter="searchAction">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
          <i class="el-icon-error el-input__icon" slot="suffix" @click="handleIconClick"></i>
        </el-input>

        <div v-if="searchResult.length > 0" class="scroll">
          <el-scrollbar style="height:100%">
            <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
              <el-checkbox v-for="item of searchResult" :label="item" :key="item">{{item}}</el-checkbox>
            </el-checkbox-group>
          </el-scrollbar>
        </div>
        <div v-else class="scroll">
          <el-scrollbar style="height:100%">
            <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
              <el-checkbox v-for="city in cityOptions" :label="city" :key="city">{{city}}</el-checkbox>
            </el-checkbox-group>
          </el-scrollbar>
        </div>
      </div>
    </div>

    <!-- 操作icon -->
    <div class="operation">
      <el-button @click="addressee">收件人</el-button>
      <el-button @click="copyListBtn">抄送人</el-button>
      <el-button @click="removeItems">移除</el-button>
    </div>

    <!-- 收件人 -->
    <div class="addressee">
      <!-- 头部 -->
      <div class="header">
        <el-checkbox
          :indeterminate="isIndeterminateAddressee"
          v-model="checkAllAddressee"
          @change="handleCheckAllChangeAddressee"
        >收件人</el-checkbox>
      </div>
      <!-- 主体 -->
      <div class="body-list">
        <el-input
          placeholder="请输入内容"
          v-model="searchTextAddressee"
          @keyup.native.enter="searchActionAddressee"
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
          <i class="el-icon-error el-input__icon" slot="suffix" @click="handleIconClickAddressee"></i>
        </el-input>

        <div v-if="searchResultAddressee.length > 0" class="scroll">
          <el-scrollbar style="height:100%">
            <el-checkbox-group
              v-model="checkedCitiesAddressee"
              @change="handleCheckedCitiesChangeAddressee"
            >
              <el-checkbox v-for="item of searchResultAddressee" :label="item" :key="item">{{item}}</el-checkbox>
            </el-checkbox-group>
          </el-scrollbar>
        </div>
        <div v-else class="scroll">
          <el-scrollbar style="height:100%" v-if="addresseeList.length > 0">
            <el-checkbox-group
              v-model="checkedCitiesAddressee"
              @change="handleCheckedCitiesChangeAddressee"
            >
              <el-checkbox v-for="city in addresseeList" :label="city" :key="city">{{city}}</el-checkbox>
            </el-checkbox-group>
          </el-scrollbar>
          <div class="no-addressee">暂无数据</div>
        </div>
      </div>
    </div>
    <!-- 抄送人 -->
    <div class="copylist">
      <!-- 头部 -->
      <div class="header">
        <el-checkbox
          :indeterminate="isIndeterminateCopylist"
          v-model="checkAllCopylist"
          @change="handleCheckAllChangeCopylist"
        >抄送人</el-checkbox>
      </div>
      <!-- 主体 -->
      <div class="body-list">
        <el-input
          placeholder="请输入内容"
          v-model="searchTextCopylist"
          @keyup.native.enter="searchActionCopylist"
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
          <i class="el-icon-error el-input__icon" slot="suffix" @click="handleIconClickCopylist"></i>
        </el-input>

        <div v-if="searchResultCopylist.length > 0" class="scroll">
          <el-scrollbar style="height:100%">
            <el-checkbox-group
              v-model="checkedCitiesCopylist"
              @change="handleCheckedCitiesChangeCopylist"
            >
              <el-checkbox v-for="item of searchResultCopylist" :label="item" :key="item">{{item}}</el-checkbox>
            </el-checkbox-group>
          </el-scrollbar>
        </div>
        <div v-else class="scroll">
          <el-scrollbar style="height:100%">
            <el-checkbox-group
              v-model="checkedCitiesCopylist"
              @change="handleCheckedCitiesChangeCopylist"
            >
              <el-checkbox v-for="city in copyList" :label="city" :key="city">{{city}}</el-checkbox>
            </el-checkbox-group>
          </el-scrollbar>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  data() {
    return {
      searchText: "", // 候选人搜索内容
      searchResult: [], // 候选人搜索后展示的内容
      checkAll: false, // 候选人全选
      isIndeterminate: false, // 候选人是否半选
      cityOptions: [
        "上海 shanghai@pa.com",
        "北京 shanghai@pa.com",
        "广州 shanghai@pa.com",
        "深圳 shanghai@pa.com",
        "四川 shanghai@pa.com",
        "广被 shanghai@pa.com",
        "海南 shanghai@pa.com",
        "海口 shanghai@pa.com"
      ], // 候选人列表数据
      checkedCities: [], // 候选人被选中的项

      searchTextAddressee: "", //收件人搜索内容
      searchResultAddressee: [], // 收件人搜索后展示的内容
      checkAllAddressee: false, // 收件人全选
      isIndeterminateAddressee: false, // 收件人是否半选
      addresseeList: [], // 收件人列表数据
      checkedCitiesAddressee: [], //收件人 被选中的项

      searchTextCopylist: "", // 抄送人搜索内容
      searchResultCopylist: [], // 抄送人搜索后展示的内容
      checkAllCopylist: false, // 抄送人全选
      isIndeterminateCopylist: false, // 抄送人是否半选
      copyList: [], // 抄送人列表数据
      checkedCitiesCopylist: [] //抄送人被选中的项
    };
  },
  methods: {
    // 候选人部分
    handleCheckAllChange(val) {
      this.checkedCities = val ? this.cityOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      //   console.log(value, "value");
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cityOptions.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cityOptions.length;
    },
    handleIconClick() {
      this.searchText = "";
      this.searchResult = [];
    },

    // 回车搜索功能
    searchAction(e) {
      this.searchResult = this.cityOptions.filter(item => {
        if (item.includes(e.target.value)) {
          console.log(item);
          return item;
        }
      });
    },

    // 点击收件人按钮
    addressee() {
      //   1. 判断候选人是否有选中的值
      if (this.checkedCities.length != 0) {
        // 2. 如果有选中就 将选中的列表数据 放到收件人这边展示,如果没有选中就不做处理
        this.addresseeList.push(...this.checkedCities);
        this.checkedCities = [];
        // // 3. 候选人列表数据,清空被选中的项
        this.cityOptions = this.cityOptions.filter(item => {
          return this.addresseeList.indexOf(item) == -1;
        });
        this.isIndeterminate = false;
        this.checkAll = false;
        this.searchResult = [];
        this.searchText = "";
      }
    },

    // 收件人部分操作
    handleCheckAllChangeAddressee(val) {
      this.checkedCitiesAddressee = val ? this.addresseeList : [];
      this.isIndeterminateAddressee = false;
    },
    handleCheckedCitiesChangeAddressee(value) {
      let checkedCount = value.length;
      this.checkAllAddressee = checkedCount === this.addresseeList.length;
      this.isIndeterminateAddressee =
        checkedCount > 0 && checkedCount < this.addresseeList.length;
    },
    handleIconClickAddressee() {
      this.searchTextAddressee = "";
      this.searchResultAddressee = [];
    },

    // 回车搜索功能
    searchActionAddressee(e) {
      this.searchResultAddressee = this.addresseeList.filter(item => {
        if (item.includes(e.target.value)) {
          console.log(item);
          return item;
        }
      });
    },

    // 抄送人部分
    handleCheckAllChangeCopylist(val) {
      this.checkedCitiesCopylist = val ? this.copyList : [];
      this.isIndeterminateCopylist = false;
    },
    handleCheckedCitiesChangeCopylist(value) {
      //   console.log(value, 'value');
      let checkedCount = value.length;
      this.checkAllCopylist = checkedCount === this.copyList.length;
      this.isIndeterminateCopylist =
        checkedCount > 0 && checkedCount < this.copyList.length;
    },
    handleIconClickCopylist() {
      this.searchTextCopylist = "";
      this.searchResultCopylist = [];
    },

    // 点击抄送人按钮
    copyListBtn() {
      //   1. 判断候选人是否有选中的值
      if (this.checkedCities.lenght != 0) {
        // 2. 如果有选中就 将选中的列表数据 放到收件人这边展示,如果没有选中就不做处理
        this.copyList.push(...this.checkedCities);
        this.checkedCities = [];
        // 3. 候选人列表数据,清空被选中的项
        this.cityOptions = this.cityOptions.filter(item => {
          return this.copyList.indexOf(item) == -1;
        });
        this.searchResult = this.searchResult.filter(item => {
          return this.searchResult.indexOf(item) == -1;
        });
        this.isIndeterminate = false;
        this.checkAll = false;
        this.searchResult = [];
        this.searchText = ""
      }
    },

    // 回车搜索功能
    searchActionCopylist(e) {
      this.searchResultCopylist = this.copyList.filter(item => {
        if (item.includes(e.target.value)) {
          console.log(item);
          return item;
        }
      });
    },

    // 点击移除
    removeItems() {
      // 1. 判断收件人和抄送人是否有被选中的
      if (
        this.checkedCitiesAddressee.length > 0 ||
        this.checkedCitiesCopylist.length > 0
      ) {
        // 2. 将被选中移动到候选人列表里
        // 3. 候收件人列表数据 添加到候选人列表,清空被选中的项
        this.cityOptions.unshift(
          ...this.checkedCitiesAddressee,
          ...this.checkedCitiesCopylist
        );

        this.addresseeList = this.addresseeList.filter(item => {
          return this.checkedCitiesAddressee.indexOf(item) == -1;
        });

        this.copyList = this.copyList.filter(item => {
          return this.checkedCitiesCopylist.indexOf(item) == -1;
        });

        this.checkedCitiesAddressee = [];
        this.checkedCitiesCopylist = [];
        this.isIndeterminateAddressee = false;
        this.isIndeterminateCopylist = false;
        this.checkAllAddressee = false;
        this.checkAllCopylist = false;
        this.searchTextCopylist = "";
        this.searchResultCopylist = [];
        this.searchTextAddressee = "";
        this.searchResultAddressee = [];
      }
    }
  }
};
</script>

<style lang="less" scoped>
.transfer {
  display: flex;

  .copylist {
    margin-left: 20px;
  }
  .operation {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    .el-button {
      margin: 4px 10px;
    }
  }
  .candidate,
  .addressee,
  .copylist {
    width: 300px;
    height: 250px;
    border: 1px solid #ccc;
    // display: flex;
    .header {
      width: 300px;
      height: 40px;
      background: #ccc;
      padding-left: 20px;
      line-height: 40px;
      box-sizing: border-box;
    }
    .body-list {
      width: 300px;
      height: 200px;
      .scroll {
        height: 160px;
        overflow: hidden;
        margin-top: 10px;
        .no-addressee {
          text-align: center;
          padding-top: 50px;
          color: #ccc;
        }
      }
      ::v-deep .el-input__inner,
      .el-input {
        height: 30px;
        width: 280px;
        margin: 5px 0 0 5px;
        line-height: 30px;
      }
      ::v-deep .el-checkbox-group {
        display: flex;
        flex-direction: column;
        margin: 10px 0 0 20px;
        .el-checkbox {
          margin-bottom: 8px;
        }
      }
      ::v-deep .el-scrollbar__wrap {
        overflow-x: hidden;
        // overflow: hidden;
      }
    }
  }
}
</style>