supply-front/src/views/sales_policy/components/TabelTransfer.vue

<template>
  <el-container>
    <el-header height="">
      <el-form label-width="0" :inline="false" size="small">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="8" :lg="8" :offset="0">
            <el-form-item label="" >
              <el-input
                v-model="input"
                placeholder="产品编码"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :lg="8" :offset="0">
            <el-form-item label="" >
              <el-input
                v-model="input"
                placeholder="产品名称"

              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :lg="8" :offset="0">
            <el-form-item label="" >
              <el-input
                v-model="input"
                placeholder="产品型号"

              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="8" :lg="8" :offset="0">
            <el-form-item label="" >
              <el-date-picker
                v-model="value1"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-form-item label="" >
            <el-button type="primary"  size="small " @click=""
              >查询</el-button
            >
          </el-form-item>
        </el-row>
      </el-form>
    </el-header>
    <el-main height="">
      <el-row>
        <el-row :gutter="50">
          <el-col :xs="10" :ms="10" :lg="10">
            <el-row>
              <el-row> </el-row>
              <el-row>
                <el-row class="title"> 可选产品列表 </el-row>

                <el-table style="width: 100%" :data="tableData" border>
                  <el-table-column type="selection" width="55" align="center">
                  </el-table-column>
                  <el-table-column label="日期" width="120" align="center">
                    <template slot-scope="scope">{{ scope.row.date }}</template>
                  </el-table-column>
                  <el-table-column prop="name" label="姓名" align="center">
                  </el-table-column>
                </el-table>
                <el-row class="mg">
                  <Pagination />
                </el-row>
              </el-row>
            </el-row>
          </el-col>
          <el-col :xs="4" :ms="4" :lg="4" class="middle">
            <el-row :gutter="20" justify="center" align="middle">
              <el-row class="btn">
                <el-button type="primary" size="small " @click=""
                  >全部添加</el-button
                >
              </el-row>
              <el-row class="btn">
                <el-button type="primary" size="small " @click=""
                  >增加</el-button
                >
              </el-row>
              <el-row class="btn">
                <el-button type="primary" size="small " @click=""
                  >删除</el-button
                ></el-row
              >
              <el-row class="btn"
                ><el-button type="primary" size="small  " @click=""
                  >全部删除</el-button
                ></el-row
              >
            </el-row>
          </el-col>
          <el-col :xs="10" :ms="10" :lg="10">
            <el-row>
              <el-row> </el-row>
              <el-row>
                <el-row class="title"> 已选产品列表 </el-row>
                <el-table style="width: 100%" :data="tableData" border>
                  <el-table-column type="selection" width="55" align="center">
                  </el-table-column>
                  <el-table-column label="日期" width="120" align="center">
                    <template slot-scope="scope">{{ scope.row.date }}</template>
                  </el-table-column>
                  <el-table-column prop="name" label="姓名" align="center">
                  </el-table-column>
                </el-table>
                <el-row class="mg">
                  <Pagination />
                </el-row>
              </el-row>
            </el-row>
          </el-col>
        </el-row>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import Pagination from "./Pagination";
export default {
  data() {
    return {
      input: "",
      leftData: [],
      rightData: [],
      centerDialogVisible: false,
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      leftData: [],
      dataL: [1, 3, 2],
      dataR: [],
      rightData: [],
      multipleSelection: [],
    };
  },
  methods: {
    handelLeftCheck(e) {
      console.log(e);
    },
    handelLeftCheck(direction) {},
    //添加全部数据
    handleAllData(direction) {
      if (direction === "left") {
        if (!this.dataL.length) return;
        this.dataR = [...this.dataR, ...this.dataL];
        this.dataL = [];
        this.leftData = [];
      } else {
        if (!this.dataR.length) return;
        this.dataL = [...this.dataL, ...this.dataR];
        this.dataR = [];
        this.rightData = [];
      }
    },
    //添加部分或单个数据
    handlePartData(direction) {
      if (direction === "left") {
        if (!this.dataL.length) return;
        this.dataR = [...this.dataR, ...this.leftData];
        this.dataL.forEach((k, d) => {
          this.leftData.forEach((e) => {
            if (e == k) {
              this.dataL.splice(d, 1);
              this.leftData = [];
              return;
            }
          });
        });
      } else {
        if (!this.dataL.length) return;
        this.dataL = [...this.dataL, ...this.rightData];
        this.dataR.forEach((k, d) => {
          this.rightData.forEach((e) => {
            if (e == k) {
              this.dataR.splice(d, 1);
              this.rightData = [];
              return;
            }
          });
        });
      }
    },
    //删除全部数据
    handleAllDelete(direction) {
      if (direction === "left") {
        if (!this.dataL.length) return;
        this.dataL = [];
        this.leftData = [];
      } else {
        if (!this.dataR.length) return;
        this.dataR = [];
        this.rightData = [];
      }
    },
    //删除部分或单个数据
    handlePartDelete(direction) {
      if (direction === "left") {
        this.dataL.forEach((k, d) => {
          this.leftData.forEach((e) => {
            if (e == k) {
              this.dataL.splice(d, 1);
              this.leftData = [];
              return;
            }
          });
        });
      } else {
        this.dataR.forEach((k, d) => {
          this.rightData.forEach((e) => {
            if (e == k) {
              this.dataR.splice(d, 1);
              this.rightData = [];
              return;
            }
          });
        });
      }
    },
    // 判断能操作那边框
    handleJudge(type) {
      if (this.leftDisabled) {
        // 左边框功能操作
        this.hanleType(type, "left");
      } else {
        // 右边框功能操作
        this.hanleType(type, "right");
      }
    },
    // 获取事件类型
    hanleType(type, direction) {
      switch (type) {
        case "AddAll":
          this.handleAllData(direction);
          break;
        case "AddPart":
          this.handlePartData(direction);
          break;
        case "DeleteAll":
          this.handleAllDelete(direction);
          break;
        case "DeletePart":
          this.handlePartDelete(direction);
          break;
      }
    },
  },
  components: {
    Pagination,
  },
};
</script>

<style lang="scss" scoped>
.btn {
  margin: 20px 0;
  text-align: center;
}
.query_btn {
  margin-left: 0;
}
.mg {
  margin: 20px;
}
.pdt {
  margin: 20px 0;
}
.el-main {
  overflow: hidden;
}
.middle {
  height: 430px;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
}
.title {
  padding: 10px 0;
  text-align: center;
  border-left: 1px solid #ebeef5;
  border-right: 1px solid #ebeef5;
  border-top: 1px solid #ebeef5;
}
</style>