全是没见过的

<template>
  <!-- 我的工单 -->
  <div>
    <!-- 顶部的按钮 -->
    <el-button type="primary" @click="goCreat()" style="margin-bottom:20px">创建工单</el-button>
    <!-- 查询表单 -->
    <el-form :inline="true" :model="searchForm">
      <el-form-item label="患者">
        <el-input v-model="searchForm.usernameplaceholder="患者姓名"></el-input>
      </el-form-item>
      <el-form-item label="工单类型">
        <el-select v-model="searchForm.typeplaceholder="选择工单类型">
          <el-option v-for="item in paifaType" :key="item.key" :label="item.name" :value="item.key"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="工单状态">
        <el-select v-model="searchForm.statusplaceholder="选择工单状态">
          <el-option
            v-for="item in paifaType1"
            :key="item.key"
            :label="item.name"
            :value="item.key"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-row>
        <el-form-item label="工单号">
          <el-input v-model="searchForm.uuidplaceholder="工单号"></el-input>
        </el-form-item>
        <!-- <div class="dis_flex">
          <div style="line-height:20px;">工单日期:</div>
          <el-form>
            <el-form-item>
              <el-date-picker
                v-model="searchForm.time"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right"
              ></el-date-picker>
            </el-form-item>
          </el-form>
        </div>-->
        <el-form-item style="float:right;margin-right:24%;">
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-row>
    </el-form>
    <!-- table表单 -->
    <el-table :data="tableDataborder style=" 100%;margin-top:50px;">
      <el-table-column fixed prop="base.uuid" label="订单号" width="130" align="center"></el-table-column>
      <el-table-column fixed prop="base.createTime" label="申请日期" width="130" align="center"></el-table-column>
      <!-- <el-table-column fixed prop="base.type" label="服务类型" width="110" align="center"></el-table-column> -->

      <el-table-column align="center" label="服务类型" width="110">
        <template slot-scope="scope">{{fuwuType(scope.row).text}}</template>
      </el-table-column>
      <el-table-column prop="base.username" label="患者" width="100" align="center"></el-table-column>
      <el-table-column label="性别" width="60" align="center">
        <template slot-scope="scope">{{sexType(scope.row).text}}</template>
      </el-table-column>

      <el-table-column prop="user.age" label="年龄" width="90" align="center"></el-table-column>
      <el-table-column prop="base.regPhone" label="联系电话" width="110" align="center"></el-table-column>
      <el-table-column label="订单状态" width="100" align="center">
        <template slot-scope="scope">{{orderStatus(scope.row).text}}</template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">详情 &nbsp;&nbsp;</el-button>
          <el-button
            type="text"
            size="small"
            :disabled="scope.row.base.status == 100"
            @click="gochangeOrder(scope.row)"
          >转单 &nbsp;&nbsp;</el-button>
          <el-button
            type="text"
            size="small"
            :disabled="scope.row.base.status == 100"
          >关闭 &nbsp;&nbsp;</el-button>
          <el-button
            type="text"
            size="small"
            :disabled="scope.row.base.status == 100"
            @click="goManage()"
          >去处理</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-size="pageParams.size"
      layout="total, prev, pager, next"
      :total="pageParams.totalCount"
    ></el-pagination>
  </div>
</template>
<script>
import queryString from "querystring";
import page from "data/page";
export default {
  name: "orderOption",
  mixins: [page],
  data() {
    return {
      tableData: [], //table数据
      currentPage: 1//当前页数
      paifaType: [],
      paifaType1: [
        { key: "0"name: "初始化,提交,冻结" },
        { key: "10"name: "已经开始、进行中" },
        { key: "100"name: "成功" },
        { key: "110"name: "待评价" },
        { key: "200"name: "失败" },
        { key: "300"name: "取消" }
      ],
      searchForm: {
        username: "",
        type: "",
        status: "",
        uuid: ""
      }
    };
  },

  mounted() {
    //获取table数据
    this.search();
  },
  methods: {
    // 查询
    search() {
      this.searchForm.page = this.currentPage - 1;
      this.searchForm.size = 20;
      this.axios
        .post("/work/list/Page"this.searchForm)
        .then(res => {
          if (res.data.code == 200) {
            if (!res.datareturn;
            this.tableData = res.data.data.list;

            console.log("this.tableData"this.tableData);

            this.setPage(res.data.data);
          }
        })
        .catch(err => {
          this.$message(err.message);
        });
    },
    // 服务类型下拉框
    fuwuType(item) {
      let type = item.base.type;
      console.log("type"type);
      let res = { num: typetext: "" };
      switch (type) {
        case 580:
          res.text = "急速医生";
          break;
        case 660:
          res.text = "工单";
          break;
      }
      return res;
    },
    // 性别
    sexType(item) {
      let sex = item.base.sex;
      console.log("sex"sex);
      let res = { num: sextext: "" };
      switch (sex) {
        case 0:
          res.text = "男";
          break;
        case 1:
          res.text = "女";
          break;
      }
      return res;
    },
    // 订单状态
    orderStatus(item) {
      let status = item.base.status;
      console.log("status"status);
      let res = { num: statustext: "" };
      switch (status) {
        case 0:
          res.text = "初始化,提交,冻结";
          break;
        case 10:
          res.text = "已经开始、进行中";
          break;
        case 100:
          res.text = "成功";
          break;
        case 110:
          res.text = "待评价";
          break;
        case 200:
          res.text = "失败";
          break;
        case 300:
          res.text = "取消";
          break;
      }
      return res;
    },
    // 去转单 传一个uuid
    gochangeOrder(item) {
      console.log("我会我的工单item",item);
      this.$router.push({
        name: "changeorder",
        params: {
          id: item.base.uuid
        }
      });
    },
    //去创建页面
    goCreat() {
      this.$router.push({
        name: "creat"
      });
    }
  }
};
</script>
<style lang="less">
.el-row {
  margin-bottom20px;
  &:last-child {
    margin-bottom0;
  }
}
.dis_flex {
  displayflex;
  font-displayrow;
  align-itemscenter;
}
</style>
原文地址:https://www.cnblogs.com/ylblogs/p/11913007.html