eduerpos_ui_manage/src/components/page/admin/delivery/DeliverySettlement.vue

<template>
  <div class="table" style="color: #666">
    <div class="crumbs">
     	<el-breadcrumb separator="/">
        	<el-breadcrumb-item><i class="el-icon-lx-cascades"></i> 配送员管理</el-breadcrumb-item>
      	</el-breadcrumb>
    </div>
		<div class="container" style="margin-top:10px">
      <div>
        <el-row style="margin-top:20px;">
          <el-col :span="6">
            <span style="font-size: 13px">配送员类型</span>
            <el-select  style="margin-left: 25px;" v-model="storeId">
              <el-option label="取餐员" value="1"></el-option>
              <el-option label="配送员" value="2"></el-option>
              <el-option label="爬楼员" value="3"></el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            <span style="font-size: 13px">提现状态</span>
            <el-select  style="margin-left: 25px;" v-model="status">
              <el-option label="申请中" value="1"></el-option>
              <el-option label="提现成功" value="2"></el-option>
              <el-option label="提现失败" value="3"></el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            <span style="font-size: 13px;">姓名</span>
            <el-input v-model="name" style="width: 205px;margin-left: 25px;" placeholder="请输入姓名" > </el-input>
          </el-col>
          <el-col :span="2">
            <el-button type="primary">
              查询
            </el-button>
          </el-col>
        </el-row>
      </div>
      
      <div class="order-table" style="margin-top: 20px;">
        <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            fixed
            prop="type"
            label="类型"
            width="120">
          </el-table-column>
          <el-table-column
            prop="deliverName"
            label="配送员姓名"
            width="120">
          </el-table-column>
          <el-table-column
            prop="money"
            label="提现金额"
            width="120">
          </el-table-column>
          <el-table-column
            prop="status"
            label="提现状态"
            width="120">
          </el-table-column>
          <el-table-column
            prop="wxNumber"
            label="打款微信号"
            width="120">
          </el-table-column>
          <el-table-column
            prop="paymentTime"
            label="打款时间"
            width="120">
          </el-table-column>
          <el-table-column
            prop="wxSerialNumber"
            label="微信流水号">
          </el-table-column>
          <el-table-column
            prop="applyTime"
            label="申请时间">
          </el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <el-button type="danger" size="small">打款</el-button>
              <el-button @click="handleClick(scope.row)" type="primary" size="small">拒绝</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
            <el-pagination
        style="margin-top: 10px;"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="40">
      </el-pagination>
		</div>
	</div>
</template>
<script>
import dptable from '@/components/common/Dptable.vue'

export default {
  components: {
    dptable
  },
	data(){
		return {
      tabIndex: "all",
      options: [
        {
          id: '1',
          value: '1',
          label: '特色美食店'
        }
      ],
      storeId: '',
      status: '',
      name: '',
      buildingId: '',
      orderNum: '',
      taker: '',
      deliveryer: '',
      staier: '',
      makeTime: '',
      getTime: '',
      sendTime: '',
      dialogVisible: false,
      isExpand: false,
      buttonText: '展开',
      tableData: [],
      options: {
        mutiSelect: false, // 是否有前部的多选框
        index: false, // 显示序号， 多选则 mutiSelect
        initTable: true ,// 是否一挂载就加载数据
        height:"500"
      },
      pagination: {
        resultCount: 0,
        currentPage: 1,
        pageSize: 20
      },
      columns: [
        {
          prop: "name",
          label: "取餐员姓名",
          width: 100,
					
        },
        {
          prop: "tel",
          label: "手机号",
          width: 100,
					
        },
        {
          prop: "sex",
          label: "性别",
          width: 100,
					
        },
        {
          button: true,
          label: "操作",   
				  width: 100,
          group: [
            {
              name: "选择",
              type: "primary",
              plain: true,
              onClick: (row, index) => {
                this.enditRow(row);
              }
            }
          ]
        }
      ],
      userList: [],
      currentType: 1,
      dialogVisible1: false,
		};
  },
  created() {
    this.getDataList();
  },
	methods: {
		closeDialog() {
      this.dialogVisible = false
    },
    handleClick() {
      this.dialogVisible1 = true
    },
    getDataList() {
      this.tableData = [
        {
          type: '配送员',
          code: '111',
          deliverName: '张鑫鑫',
          money: 135.45,
          status: '申请中',
          balance: 7.92,
          income: 7.92,
          auth: true,
          workStatus: '送餐中',
          accountStatus: true,
          applyTime: '2023-04-18 15:42:31',
        }
      ]
    },
    addDeliver(type) {
      if (type == 1) {
         this.editTitle = '添加配送员'
      } else if (type == 2) {
        this.editTitle = '添加爬楼员'
      } else if (type == 3) {
        this.editTitle = '添加取餐员'
      }
      this.currentType = type
      this.dialogVisible = true
    }
  }
};
</script>

<style scoped>
  .high-light-number {
    float: right;
    margin-left: 5px;
    background:#FF5722;
    color:#fff;
    padding: 1px 2px;
    margin-top: -1px;
  }
  .order-table {
    min-height: 400px;
    border: 1px solid #e6e6e6;
    border-radius: 2px;
    box-sizing: border-box;
    font-size: 13px;
  }
  .order-info {
    margin-top: 15px;
  }
  .trhead {
    background: #f2f2f2;
    width: 100%;
    height: 36px;
  }
  .tr-border {
    border-bottom: 1px solid #E6E6E6;
  }
  .first-td {
    width: 50px;
    padding: 10px 0;
  }
  table {
    font-size: 13px;
  }
</style>