pad_spa/src/pages/productOrder/index.vue

<template>
  <div class="mine">
    <div class="condition">
      <el-date-picker
        v-model="dates"
        type="daterange"
        range-separator="->"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      ></el-date-picker>
      <el-input placeholder="请输入内容" class="search" v-model="searchText">
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
      <el-button type="primary" class="searchButton" @click="getOrderList()"
        >搜索</el-button
      >
    </div>

    <div class="user-list">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        height="500"
        style="width: 100%; border-radius: 8px"
        @row-click="handleSelectionChange"
      >
        <el-table-column label="头像" width="60">
          <template slot-scope="scope">
            <div @click.stop="goUserDetail(scope.row)" class="head-img">
              <img :src="scope.row.avatar_url" alt />
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="nickname"
          label="昵称"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="real_name"
          label="真实姓名"
          width="80"
        ></el-table-column>
        <el-table-column
          prop="mobile"
          label="联系电话"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="create_time"
          label="下单时间"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="date"
          label="订单状态"
          show-overflow-tooltip
          width="100"
        >
          <template slot-scope="scope">
            <div
              :style="
                scope.row.status == 2 || scope.row.status == 3
                  ? 'color: #61D09D;'
                  : scope.row.status == 5
                  ? 'color: #A999EA'
                  : 'color: #A999EA'
              "
            >
              {{
                scope.row.status == 2 || scope.row.status == 3
                  ? "已取货"
                  : scope.row.status == 1
                  ? "待取货"
                  : ""
              }}
              <!-- 1是待取货  2，3是已取货 -1已取消，0待支付-->
            </div>
          </template>
        </el-table-column>
        <el-table-column
          width="100"
          prop="cosmeticianName"
          label="美容师"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          class="amendTop"
          width="80"
          prop=""
          label="分配"
          show-overflow-tooltip
          v-if="level == 10"
        >
          <template slot-scope="scope">
            <el-button
              @click.stop="selectType(scope.row)"
              type="primary"
              class="amend"
              size="mini"
            >
              分配
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagin">
        <el-pagination
          background
          layout="prev, pager, next"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage1"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <minePupop :show="selectPup">
      <div class="selectBox">
        <div class="image">
          <img
            src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/delete.png"
            alt
            @click="closeSelect"
          />
        </div>
        <div class="selectTitle">分配美容师</div>
        <div class="selectFinish">
          <div class="selecrFinishTop">分配给：</div>
          <div class="selecrFinishBottom">
            <div
              class="item"
              v-for="(item, index) in selectNameList"
              :key="index"
              @click="delectCosmetician(item)"
            >
              {{ item.realname }}
              <img
                src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/delete.png"
                alt=""
              />
            </div>
          </div>
        </div>
        <div class="selectList">
          <div class="selecrListTop">可选择：</div>
          <div class="selecrListBottom">
            <div
              class="item"
              @click="selectCosmetician(item)"
              v-for="(item, index) in nameList"
              :key="index"
            >
              {{ item.realname }}
            </div>
          </div>
        </div>
        <div class="selectBox-btn" @click="confirmSelect">确认</div>
      </div>
    </minePupop>
  </div>
</template>

<script>
import api from "../../server/home";
import minePupop from "../../components/minePupop/index.vue";
export default {
  components: { minePupop },
  data() {
    return {
      level: "", //等级权限
      searchText: "",
      dates: "",
      coupon: "",
      limit: 10,
      total: 0,
      product: "",
      coupon: "",
      couponList: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
      ],
      tableData: [
        {
          date: "2022.04.25  14:30",
          name: "滴滴滴",
          headImg:
            "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png",
          phone: "13346783645",
          status: "已完成",
        },
        {
          date: "2022.04.25  14:30",
          name: "滴滴滴",
          headImg:
            "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png",
          phone: "13346783645",
          status: "已完成",
        },
      ],
      currentPage1: 1,
      multipleSelection: "",
      nameListAll: [],
      nameList: [], //员工列表
      selectNameList: [], //已选员工列表
      level: "", //店员等级
      selectPup: false, //分配弹窗
      order_id: "", //订单ID
    };
  },
  computed: {},
  watch: {},

  methods: {
    // 跳入用户详情
    goUserDetail(e) {
      console.log(e);
      this.$router.push({
        path: "/customerMan/details",
        query: {
          id: e.user_id,
        },
      });
    },
    // 关闭分配弹窗
    closeSelect() {
      this.selectPup = false;
    },
    // 选择美容师
    selectCosmetician(e) {
      this.selectNameList.push(e);
      this.nameList.forEach((item, index) => {
        if (item.id == e.id) {
          console.log(index);
          this.nameList.splice(index, 1);
        }
      });
    },
    // 删除美容师
    delectCosmetician(e) {
      this.nameList.push(e);
      this.selectNameList.forEach((item, index) => {
        if (item.id == e.id) {
          this.selectNameList.splice(index, 1);
        }
      });
    },
    // 打开分配弹窗
    selectType(e) {
      this.selectPup = true;
      this.order_id = e.id;
      this.nameList = JSON.parse(JSON.stringify(this.nameListAll)); //重置数据
      this.selectNameList = []; //重置数据
      // 筛选出已分配的美容师
      if (e.assign) {
        e.assign.forEach((item, index) => {
          this.nameList.forEach((item1, index1) => {
            if (item.id == item1.id) {
              this.selectNameList.push(item);
              this.nameList.splice(index1, 1);
            }
          });
        });
      }
    },
    // 分配美容师
    confirmSelect() {
      let user_id = [];
      this.selectNameList.forEach((item) => {
        user_id.push(item.id);
      });
      let params = {
        user_id: user_id.toString(),
        type: 1, //1项目 2次卡 3美妆产品 4充值
        order_id: this.order_id,
      };
      // 店长分配
      api.orderAllocation(params).then((res) => {
        if (res.code == 200) {
          this.selectPup = false;
          this.getOrderList();
        }
      });
    },
    // 获取订单列表
    getOrderList() {
      let start_date = "",
        end_date = "";
      if (this.dates && this.dates.length > 0) {
        start_date = utils.formatTime(this.dates[0], "yyyy-MM-dd");
        end_date = utils.formatTime(this.dates[1], "yyyy-MM-dd");
      }
      let params = {
        page: this.currentPage1,
        limit: this.limit,
        keywords: this.searchText,
        start_time: start_date,
        end_time: end_date,
      };
      api.getGoodsOrderList(params).then((res) => {
        if (res.code == 200) {
          // 将用户手机号中间四位变成****
          res.data.list.map((item) => {
            item.mobile =
              item.mobile.substring(0, 3) + "****" + item.mobile.substring(7);
            // 整理已选的美容师
            if (item.assign) {
              let nameList = [];
              let cosmeticianName = [];
              item.assign.forEach((item1) => {
                console.log(item1);
                let list = {};
                list.realname = item1.realname;
                list.id = item1.suser_id;
                nameList.push(list);
                cosmeticianName.push(item1.realname);
              });
              item.assign = nameList;
              item.cosmeticianName = cosmeticianName.toString();
            }
          });
          this.tableData = res.data.list;
          this.total = res.data.total;
        }
      });
    },

    handleCurrentChange(e) {
      this.currentPage1 = e;
      this.getOrderList();
      console.log(this.tableData);
    },

    handleSizeChange(val) {},
    handleSelectionChange(row, column, event) {
      // this.$router.push({
      //   path: "/productOrder/details",
      //   query: {
      //     id: row.id,
      //   },
      // });
    },
    // 获取美容师列表
    getStaffList() {
      api.getStaffList().then((res) => {
        if (res.code == 200) {
          this.nameList = res.data;
          this.nameListAll = JSON.parse(JSON.stringify(res.data))
        }
      });
    },
  },
  created() {
    this.level = localStorage.getItem("level");
    this.getOrderList();
    // 获取员工列表
    this.getStaffList();
  },

  mounted() {},
};
</script>

<style lang='less' scoped>
.mine {
  .condition {
    display: flex;
    .coupon-select {
      width: 174px;
      margin-left: 18px;
    }
    .search {
      width: 535px;
      margin-left: 18px;
    }

    .searchButton {
      margin-left: 18px;
      width: 68px;
      background: #fa7d22;
      border-radius: 2px;
      border-color: #fa7d22;
    }
  }
  .user-list {
    margin-top: 18px;
    padding: 0 12px;
    width: 100%;
    background: #ffffff;
    box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
    border-radius: 8px;
    .head-img {
      width: 36px;
      height: 36px;
      border-radius: 50%;

      img {
        width: 100%;
        height: 100%;
      }
    }
    .pagin {
      padding: 20px 0;
      .el-pagination {
        text-align: center;
      }
    }
    /deep/ .el-table th > .cell {
      font-size: 14px !important;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 20px;
    }
    /deep/ .el-table td,
    .el-table th.is-leaf {
      border-bottom: none;
    }
    .amend {
      background-color: #fa7d22;
      color: white;
      font-size: 14px;
      border: #fa7d22;
    }
    /deep/ th.el-table_1_column_7.is-leaf.el-table__cell {
      text-align: center;
    }
    /deep/ td.el-table_1_column_7.el-table__cell {
      text-align: center;
    }
  }
  // 分配弹窗
  .selectBox {
    width: 540px;
    height: 400px;
    background: #ffffff;
    border-radius: 8px;
    padding-left: 40px;
    position: relative;
    .image {
      height: 30px;
      width: 100%;
      display: flex;
      justify-content: flex-end;
      margin-top: 5px;
      margin-right: 5px;
      img {
        width: 30px;
      }
    }
    .selectTitle {
      font-size: 14px;
      color: #333;
      text-align: center;
      margin-top: 5px;
    }
    .selectFinish {
      margin-top: 20px;
      .selecrFinishTop {
        font-size: 14px;
        color: #333;
      }
      .selecrFinishBottom {
        height: auto;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        .item {
          height: 40px;
          padding: 0px 16px;
          background: #f9f9f9;
          border-radius: 3px;
          margin-right: 10px;
          text-align: center;
          line-height: 40px;
          flex-shrink: 0;
          box-sizing: border-box;
          margin-top: 20px;
          position: relative;
          img {
            width: 14px;
            height: 14px;
            position: absolute;
            top: 0;
            right: 0;
          }
        }
        .item:first-child {
          margin-left: 0;
        }
      }
    }
    .selectList {
      margin-top: 20px;
      .selecrListTop {
        font-size: 14px;
        color: #333;
      }
      .selecrListBottom {
        height: auto;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        .item {
          height: 40px;
          padding: 0px 16px;
          background: #f9f9f9;
          border-radius: 3px;
          margin-right: 10px;
          text-align: center;
          line-height: 40px;
          flex-shrink: 0;
          box-sizing: border-box;
          margin-top: 20px;
        }
      }
    }
    .selectBox-btn {
      width: 176px;
      height: 28px;
      background: #fa7d22;
      border-radius: 14px;
      color: #fff;
      line-height: 28px;
      font-size: 14px;
      text-align: center;
      position: absolute;
      bottom: 40px;
      left: 50%;
      transform: translateX(-50%);
    }
  }
  .color0 {
    color: #fc3019;
  }
  .color1 {
    color: #3ef3ed;
  }
  .color2 {
    color: #00eeee;
  }
  .color3 {
    color: #61d09d;
  }
  .color4 {
    color: #3115cc;
  }
  .color5 {
    color: #fc3019;
  }
  .color6 {
    color: #a999ea;
  }
}
</style>