NurseStationOperateUI/src/views/system/order/index.vue

<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="90px"
    >
      <el-form-item label="所属护理站" prop="nurseStationName">
        <el-button type class="stationbtn" @click="ParamsStation(true)">
          {{
          queryParams.nurseStationName
          }}
        </el-button>
      </el-form-item>
      <el-form-item label="订单编号" prop="orderNo">
        <el-input
          v-model="queryParams.orderNo"
          placeholder="请输入订单编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="订单状态" prop="orderStatus">
        <el-select v-model="queryParams.orderStatus" placeholder="请选择订单状态">
          <el-option
            v-for="item in orderStatuslist"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="会员名称" prop="patientName">
        <el-input
          v-model="queryParams.patientName"
          placeholder="请输入会员名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table
      v-loading="loading"
      :data="OrderDetailsList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column label="所属护理站" align="center" prop="nurseStationName" />
      <el-table-column label="订单编号" align="center" prop="orderNo" />
      <el-table-column label="护理项目名称" align="center" prop="nurseItemName" />
      <el-table-column label="订单总金额" align="center" prop="totalPrice" />
      <el-table-column label="下单时间" align="center" prop="createTime" />

      <el-table-column label="订单状态" align="center" prop="orderStatus">
        <template slot-scope="scope">
          <el-button v-if="scope.row.orderStatus == 'WAIT_PAY'">待付款</el-button>
          <el-button type="primary" v-if="scope.row.orderStatus == 'PAY'">已付款</el-button>
          <el-button type="primary" v-if="scope.row.orderStatus == 'WAIT_DISPATCH'">待派单</el-button>
          <el-button type="primary" v-if="scope.row.orderStatus == 'NOT_FINISH'">未完成</el-button>
          <el-button type="primary" v-if="scope.row.orderStatus == 'COMPLETE'">待评价</el-button>
          <el-button type="success" v-if="scope.row.orderStatus == 'EVALUATED'">服务完成</el-button>
          <el-button type="warning" v-if="scope.row.orderStatus == 'WAIT_REFUND'">退款中</el-button>
          <el-button type="warning" v-if="scope.row.orderStatus == 'REFUNDED'">退款成功</el-button>
          <el-button type="danger" v-if="scope.row.orderStatus == 'CANCEL'">已取消</el-button>
        </template>
      </el-table-column>
      <el-table-column label="会员名称" align="center" prop="patientName" />
      <el-table-column label="护理员" align="center" prop="nursePersonName" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-zoom-in"
            @click="seeLook(scope.row)"
            v-hasPermi="['system:appointmentOrder:query']"
          >查看</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-s-promotion"
            @click="dispatch(scope.row)"
            v-hasPermi="['system:appointmentOrder:dispatch']"
            v-if="scope.row.orderStatus == 'WAIT_DISPATCH'"
          >派单</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-error"
            v-if="scope.row.orderStatus == 'WAIT_REFUND'"
            @click="cencel(scope.row)"
            v-hasPermi="['system:appointmentOrder:confirmCancel']"
          >取消预约</el-button>
          <!-- <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:nurseType:remove']"
            >删除</el-button
          >-->
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 查看弹框 -->
    <el-dialog title="查看预约订单信息" :visible.sync="innerVisible4" append-to-body width="1280px">
      <el-form :inline="true" ref="form" :model="query" :rules="rules" label-width="130px">
        <el-form-item label="订单编号" prop="orderNo">
          <el-input v-model="query.orderNo" disabled style="width: 250px" />
        </el-form-item>
        <el-form-item label="订单状态" prop="orderStatus">
          <el-input :value="switchOrderStatus(query.orderStatus)" style="width: 250px" disabled></el-input>
        </el-form-item>
        <el-form-item label="订单总金额" prop="totalPrice">
          <el-input v-model="query.totalPrice" disabled style="width: 250px" />
        </el-form-item>
        <el-form-item label="订单数量" prop="orderCount">
          <el-input v-model="query.orderCount" disabled style="width: 250px" />
        </el-form-item>
        <el-form-item label="护理项目名称" prop="nurseItemName">
          <el-input v-model="query.nurseItemName" disabled style="width: 250px" />
        </el-form-item>
        <el-form-item label="服务时间" prop="time">
          <el-input v-model="query.time" disabled style="width: 250px" />
        </el-form-item>
        <el-form-item label="护理项目时长" prop="itemServeDurationUnit">
          <el-input v-model="query.itemServeDurationUnit" disabled style="width: 250px" />
        </el-form-item>
        <el-form-item label="护理站名称" prop="nurseStationName">
          <el-input v-model="query.nurseStationName" disabled style="width: 250px" />
        </el-form-item>
        <el-form-item label="服务地址" prop="serviceAddress">
          <el-input v-model="query.serviceAddress" disabled style="width: 250px" type="textarea" />
        </el-form-item>
        <el-form-item label="是否失能" prop="disablingCondition">
          <el-input v-model="query.disablingCondition" disabled style="width: 250px" />
        </el-form-item>
        <el-form-item label="失能情况" prop="disablingReason">
          <el-input v-model="query.disablingReason" disabled style="width: 250px" />
        </el-form-item>
        <el-form-item label="健康状况" prop="diseaseName">
          <el-input v-model="query.diseaseName" disabled style="width: 250px" type="textarea" />
        </el-form-item>
        <el-form-item
          label="服务到岗照片"
          prop="onDutyPictureUrl"
          v-if="
            query.orderStatus == 'COMPLETE' || query.orderStatus == 'EVALUATED'
          "
        >
          <img class="img" :src="baseurl + query.onDutyPictureUrl" alt />
        </el-form-item>
        <el-form-item
          label="服务结束照片"
          prop="serviceEndPictureUrl"
          v-if="
            query.orderStatus == 'COMPLETE' || query.orderStatus == 'EVALUATED'
          "
        >
          <img class="img" :src="baseurl + query.serviceEndPictureUrl" alt />
        </el-form-item>
        <el-form-item
          label="用户确认签名"
          prop="userSignaturePictureUrl"
          v-if="
            query.orderStatus == 'COMPLETE' || query.orderStatus == 'EVALUATED'
          "
        >
          <img class="img" :src="baseurl + query.userSignaturePictureUrl" alt />
        </el-form-item>
        <el-form-item
          label="评价满意度"
          prop="evaluateSatisfaction"
          v-if="query.orderStatus == 'EVALUATED'"
        >
          <el-input v-model="query.evaluateSatisfaction" disabled style="width: 250px" />
        </el-form-item>
        <el-table
          :data="query.appointmentOrderConsumableList"
          align="center"
          style="margin: 10px 0 20px 0; padding-bottom: 20px"
        >
          <el-table-column prop="orderConsumableName" label="耗材包名称" align="center"></el-table-column>
          <el-table-column prop="orderConsumableCount" label="耗材包数量" align="center"></el-table-column>
          <el-table-column prop="orderConsumablePrice" label="耗材包价格" align="center"></el-table-column>
        </el-table>
        <el-form-item
          label="预约服务位置"
          v-if="
            query.orderStatus == 'COMPLETE' || query.orderStatus == 'EVALUATED'
          "
        >
          <el-input v-model="query.serviceLocationName" disabled style="width: 250px" />
        </el-form-item>
      </el-form>
      <div
        id="container"
        v-if="
          this.query.orderStatus == 'COMPLETE' ||
          this.query.orderStatus == 'EVALUATED'
        "
      ></div>
    </el-dialog>
    <!-- 派单弹框 -->
    <el-dialog title="派单" :visible.sync="innerdispatch" append-to-body width="500px" height="100px">
      <el-form ref="form" :model="form" :rules="rules" label-width="130px">
        <el-form-item label="护理员姓名" prop="nursePersonName">
          <el-button
            type
            v-if="nurseName == '请选择护理员'"
            style="width: 300px; text-align: left; height: 36px; color: #c0c4cc"
            @click="clicknursePersonName()"
          >{{ nurseName }}</el-button>
          <el-button
            type
            @click="clicknursePersonName()"
            v-else
            style="
              width: 300px;
              text-align: left;
              height: 36px;
              padding-left: -10px;
            "
          >{{ nurseName }}</el-button>
        </el-form-item>
        <!-- <el-button
              type=""
              @click="departclick(item, index)"
              v-else
              style="
                width: 200px;
                text-align: left;
                height: 36px;
                padding-left: -10px;
              "
              >{{ item.departmentName }}</el-button
        >-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <!-- <el-button @click="cancel">取 消</el-button> -->
      </div>
    </el-dialog>
    <!-- 取消预约弹框 -->
    <el-dialog title="取消预约" :visible.sync="innerrefund" append-to-body width="500px">
      <el-form :inline="true" :rules="rules" label-width="120px">
        <el-form-item label="订单编号" prop="orderNo">
          <el-input style="width: 260px" v-model="query.orderNo" clearable :disabled="true" />
        </el-form-item>
        <el-form-item label="服务项目" prop="nurseItemName">
          <el-input v-model="query.nurseItemName" style="width: 260px" clearable :disabled="true" />
        </el-form-item>
        <el-form-item label="会员姓名" prop="patientName">
          <el-input v-model="query.patientName" style="width: 260px" clearable :disabled="true" />
        </el-form-item>
        <el-form-item label="退款原因" prop="cancelAppointmentReason">
          <el-input
            style="width: 260px"
            v-model="query.cancelAppointmentReason"
            placeholder
            clearable
            type="textarea"
            :rows="5"
            disabled
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cencelbtn">取 消</el-button>
        <el-button type="primary" @click="ordercacenl">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 姓名弹框 -->
    <el-dialog :visible.sync="nursePersonNameinfo" width="1000px" append-to-body>
      <el-form
        ref="queryForm"
        :model="querynursePersonname"
        :rules="rules"
        label-width="80px"
        :inline="true"
      >
        <el-form-item label="姓名" prop="nursePersonName" label-width="120">
          <el-input v-model="querynursePersonname.nursePersonName" placeholder="请输入姓名" clearable />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery2">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery2">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="dispatchlist" @cell-dblclick="nursePersonclick">
        <el-table-column label="请选择" width="70" align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              style="width: 15px; height: 15px; overflow: hidden"
              v-if="nursePersonid == scope.row.nurseStationPersonId"
              circle
              @click="nursePersonclick(scope.row)"
            ></el-button>
            <el-button
              v-else
              style="width: 15px; height: 15px; overflow: hidden"
              circle
              @click="nursePersonclick(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
        <el-table-column property="nursePersonCode" label="护理员编号" width="150" align="center"></el-table-column>
        <el-table-column property="nursePersonName" label="护理站人员姓名" width="150" align="center"></el-table-column>
        <el-table-column property="nursePersonType" label="护理站人员类型" width="150" align="center">
          <template slot-scope="scope">
            {{ scope.row.nursePersonType == "NURSE" ? "护士" : "" }}
            {{ scope.row.nursePersonType == "NURSE_TEACHER" ? "护理师" : "" }}
          </template>
        </el-table-column>
        <el-table-column property="phone" label="手机号" width="150" align="center"></el-table-column>
        <el-table-column label="性别" align="center" prop="sex">
          <template slot-scope="scope">
            {{ scope.row.sex == "MALE" ? "男" : "" }}
            {{ scope.row.sex == "FEMALE" ? "女" : "" }}
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total2 > 0"
        :total="total2"
        :page.sync="querynursePersonname.pageNum"
        :limit.sync="querynursePersonname.pageSize"
        @pagination="handleQuery2"
      />
    </el-dialog>
    <!-- 护理站 -->
    <el-dialog
      title="选择护理站"
      :visible.sync="nurseStationshow"
      width="1100px"
      append-to-body
      :before-close="clicknurseStationshow"
    >
      <el-form ref="form" :model="getListByUserquery" label-width="110px" :inline="true">
        <el-form-item label="护理站编码" prop="nurseStationCode">
          <el-input v-model="getListByUserquery.nurseStationCode" placeholder="请输入护理站编码" />
        </el-form-item>
        <el-form-item label="护理站名称" prop="nurseStationName">
          <el-input v-model="getListByUserquery.nurseStationName" placeholder="请输入护理站名称" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="info">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="stationcancel">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="loading" :data="nurseStationlist" @cell-dblclick="choicestationid">
        <el-table-column label="请选择" width="70" align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              style="width: 15px; height: 15px"
              circle
              @click="choicestationid(scope.row)"
              v-if="queryParams.nurseStationId == scope.row.id"
            ></el-button>

            <el-button
              style="width: 15px; height: 15px"
              circle
              v-else
              @click="choicestationid(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
        <el-table-column property="nurseStationCode" label="护理站编码" align="center"></el-table-column>
        <el-table-column property="nurseStationName" label="护理站名称" align="center"></el-table-column>
        <el-table-column property="phone" label="联系电话" align="center"></el-table-column>
        <el-table-column
          property="address"
          label="护理站地址"
          align="center"
          :show-overflow-tooltip="true"
        ></el-table-column>
      </el-table>

      <pagination
        v-show="stationtotal > 0"
        :total="stationtotal"
        :page.sync="getListByUserquery.pageNum"
        :limit.sync="getListByUserquery.pageSize"
        @pagination="info"
      />
    </el-dialog>
  </div>
</template>
<script>
import indexjs from "./indexjs.js";
export default indexjs;
</script>

<style lang='scss' scoped>
.stationbtn {
  width: 208px;
  text-align: left;
  height: 32px;
  overflow: hidden;
  font-size: 14px;
}
.img {
  width: 250px;
  height: 250px;
}
#container {
  width: 100%;
  height: 600px;
}
</style>