repaireschool_guanli/src/views/workOrder/workOrder.vue

<template>
  <div class="content-box" v-loading="loading">
    <div class="left">
      <!-- <el-icon :size="23" class="camera"><VideoCameraFilled /></el-icon> -->
      <span class="cameratxt">工单管理</span>
    </div>
    <div class="middle">
      <div class="filter">
        <div class="condition">
          <span>关键字 : </span>
          <el-input
            clearable
            @clear="searchBtn"
            v-model="searchInput.keyWord"
            class="w-50 m-2"
            placeholder="输入区域、姓名、电话、工单号"
            style="width: 230px"
          />
        </div>
        <div class="condition2" v-if="schoolId == 0">
          <span>校区 : </span>
          <el-select
            v-model="searchInput.schoolId"
            class="m-2"
            placeholder="请选择校区"
            @change="selSchool"
            style="width: 150px"
          >
            <el-option label="全部校区" :value="0" />
            <el-option label="黄家湖校区" :value="1" />
            <el-option label="墨轩湖校区" :value="2" />
          </el-select>
        </div>
        <div class="condition2" v-if="schoolId == 1">
          <span>校区 : </span>
          <el-select
            v-model="searchInput.schoolId"
            class="m-2"
            placeholder="请选择校区"
            @change="selSchool"
          >
            <el-option label="黄家湖校区" :value="1" />
          </el-select>
        </div>
        <div class="condition2" v-if="schoolId == 2">
          <span>校区 : </span>
          <el-select
            v-model="searchInput.schoolId"
            class="m-2"
            placeholder="请选择校区"
            @change="selSchool"
          >
            <el-option label="墨轩湖校区" :value="2" />
          </el-select>
        </div>
        <div class="condition2">
          <span>维修师傅 : </span>
          <el-input
            clearable
            @clear="searchBtn"
            v-model="searchInput.maintenanceName"
            class="w-50 m-2"
            placeholder="输入维修师傅名字"
            style="width: 160px"
          />
        </div>
        <div class="condition2">
          <span>创建时间 : </span>
          <el-date-picker
            style="width: 240px"
            v-model="searchInput.createTime"
            type="daterange"
            range-separator="-"
            start-placeholder="起始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            :prefix-icon="Calendar"
            placeholder="请选择日期"
          />
        </div>

        <el-button
          style="margin-left: 30px"
          color="rgba(111, 182, 184, 1)"
          type="primary"
          class="search"
          @click="searchBtn"
          ><el-icon>
            <Search />
          </el-icon>
          <span>查询</span></el-button
        >
      </div>
      <!-- 按钮列表 -->
      <div class="gongneng">
        <!-- <el-button
          type="primary"
          color="rgba(111, 182, 184, 1)"
          @click="addlist"
          ><img
            src="@/assets/add.png"
            style="width: 14px; height: 14px; margin-right: 4px"
            alt=""
          /><span>新建工单</span></el-button
        > -->
        <el-button
          color="rgba(111, 182, 184, 1)"
          class="import"
          type="primary"
          @click="batchOperate"
          ><img
            src="@/assets/batchGD.png"
            style="width: 14px; height: 14px; margin-right: 4px"
            alt=""
          />
          <span>批量关单</span></el-button
        >
        <el-button
          color="rgba(111, 182, 184, 1)"
          class="import"
          type="primary"
          @click="importExcel"
          ><img
            src="@/assets/importWhite.png"
            style="width: 14px; height: 14px; margin-right: 4px"
            alt=""
          />
          <span>导出表单</span></el-button
        >
      </div>
    </div>
    <div class="btn">
      <ul>
        <li
          v-for="i in day"
          :key="i.name"
          @click="dayBtn(i.state)"
          :class="dayIndex == i.state ? 'li_active' : ''"
        >
          {{ i.name + " (" + i.key + ")" }}
        </li>
      </ul>
    </div>
    <div class="footer">
      <el-table
        :row-class-name="tableRowClassName"
        :data="tableData.list"
        @selection-change="handleSelectionChange"
        style="width: 100%"
        :header-cell-style="{
          background: 'rgba(240, 243, 247, 1)',
          height: '50px',
          border: 0,
        }"
      >
        <el-table-column align="center" type="selection" width="80" />
        <el-table-column align="center" type="index" label="序号" width="80" />
        <el-table-column
          align="center"
          prop="recordNo"
          width="180"
          label="工单编号"
        >
          <template #default="scope">
            <div class="orderNum">
              <span>{{ scope.row.recordNo }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="areaName"
          show-overflow-tooltip
          width="220"
          label="报修区域"
        />
        <el-table-column align="center" prop="userName" label="姓名" />
        <el-table-column
          align="center"
          prop="userPhone"
          width="120"
          label="电话"
        />
        <el-table-column
          align="center"
          prop="articleName"
          width="180"
          show-overflow-tooltip
          label="报修物品"
        />
        <el-table-column
          align="center"
          prop="description"
          show-overflow-tooltip
          label="故障描述"
        />
        <el-table-column align="center" prop="state" label="状态">
          <!-- <template #default="scope">
            <div
              class="operation"
              style="color: rgb(0, 0, 0)"
              v-if="scope.row.state == '已完成'"
            >
              已完成
            </div>
            <div
              class="operation"
              style="color: rgba(255, 87, 51, 1)"
              v-if="scope.row.state == '待接单'"
            >
              待接单
            </div>
            <div
              class="operation"
              style="color: rgba(30, 125, 251, 1)"
              v-if="scope.row.state == '待审核'"
            >
              待审核
            </div>
            <div
              class="operation"
              style="color: rgba(111, 182, 184, 1)"
              v-if="scope.row.state == '待处理'"
            >
              待处理
            </div>
            <div
              class="operation"
              style="color: rgb(12, 26, 221)"
              v-if="scope.row.state == '维修中'"
            >
              维修中
            </div>
            <div
              class="operation"
              style="color: rgb(209, 78, 235)"
              v-if="scope.row.state == '已关单'"
            >
              已关单
            </div>
            <div
              class="operation"
              style="color: rgb(255, 0, 43)"
              v-if="scope.row.state == '维修超时'"
            >
              维修超时
            </div>
            <div
              class="operation"
              style="color: rgb(255, 0, 43)"
              v-if="scope.row.state == '接单超时'"
            >
              接单超时
            </div>
            <div
              class="operation"
              style="color: rgb(204, 204, 204)"
              v-if="scope.row.state == '已取消'"
            >
              已取消
            </div>
          </template> -->
        </el-table-column>
        <el-table-column
          align="center"
          prop="reportTime"
          width="180"
          label="报修时间"
        />
        <el-table-column
          align="center"
          prop="maintenancerName"
          label="技术员"
        />
        <el-table-column align="center" width="240" label="操作">
          <template #default="scope">
            <div class="operation">
              <div
                class="btns"
                v-if="scope.row.dispatch == 1"
                @click="sendOrders(scope.row)"
              >
                派单
              </div>

              <div
                class="btns"
                v-if="scope.row.collaborate == 1"
                @click="cooperation(scope.row)"
              >
                协作审核
              </div>
              <div
                class="btns"
                v-if="scope.row.transfer == 1"
                @click="transOrder(scope.row)"
              >
                转单审核
              </div>
              <div
                class="btns"
                v-if="scope.row.close == 1"
                @click="customsOrder(scope.row)"
              >
                关单
              </div>
              <div
                class="btns"
                v-if="scope.row.offline == 1"
                @click="offline(scope.row)"
              >
                转线下审核
              </div>
              <div
                class="btns"
                v-if="scope.row.changePrice == 1"
                @click="changePrice(scope.row)"
              >
                改价
              </div>
              <div
                class="btns"
                v-if="scope.row.reply == 1"
                @click="reply(scope.row)"
              >
                回复
              </div>
              <!-- <div
                class="btns"
                v-if="scope.row.delayed == 1"
                @click="delayed(scope.row)"
              >
                延时
              </div> -->
              <div
                class="btns"
                v-if="scope.row.details == 1"
                @click="orderInfo(scope.row)"
              >
                详情
              </div>
              <div class="btns" @click="printOrder(scope.row)">打印</div>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 新建工单弹窗 -->
      <!-- <el-dialog
        class="addStaff"
        v-model="addDialogVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :title="dialongTitle"
        align-center
        width="960"
        :before-close="cancelAdd"
      >
        <el-form
          ref="ruleFormAddStaff"
          :model="AddStaffList"
          :rules="addStaffRules"
          label-width="100px"
          class="demo-ruleForm"
          size="default"
          label-position="left"
          status-icon
        >
          <el-form-item label="报修人姓名 :" prop="name">
            <el-input
              v-model="AddStaffList.name"
              placeholder="请输入姓名"
              clearable
            />
          </el-form-item>
          <el-form-item label="手机号码 :">
            <el-input
              v-model="AddStaffList.phone"
              placeholder="请输入手机号码"
              clearable
            />
          </el-form-item>
          <el-form-item label="报修区域 :" prop="post">
            <el-select
              v-model="AddStaffList.post"
              class="m-2"
              placeholder="请选择报修区域"
            >
              <el-option label="车队长" value="车队长" />
              <el-option label="司机" value="司机" />
            </el-select>
          </el-form-item>
          <el-form-item label="详细地址 :" prop="name">
            <el-input
              v-model="AddStaffList.name"
              placeholder="请输入详细地址"
              clearable
            />
          </el-form-item>
          <el-form-item label="报修类型 :" prop="post">
            <el-select
              v-model="AddStaffList.post"
              class="m-2"
              placeholder="请选择报修类型"
            >
              <el-option label="车队长" value="车队长" />
              <el-option label="司机" value="司机" />
            </el-select>
          </el-form-item>
          <el-form-item label="故障描述 :" prop="cardnumber">
            <el-input
              v-model="AddStaffList.phone"
              :rows="3"
              type="textarea"
              placeholder="请文字描述详细故障"
            />
          </el-form-item>

          <el-form-item
            label="故障照片 :"
            prop="cardnumber"
            style="
              padding-bottom: 40px;
              border-bottom: 1px solid rgba(230, 230, 230, 1);
            "
          >
            <el-upload
              class="avatar-uploader"
              action=""
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              list-type="picture-card"
              :on-change="handleChange"
              :http-request="handleUpload"
            >
              <img
                class="avatar-uploader-icon"
                src="@/assets/addImg.png"
                alt=""
              />
            </el-upload>
            <el-dialog
              title="查看照片"
              class="imgVisible"
              width="960"
              v-model="imgVisible"
            >
              <img :src="imgUrl" alt="" />
            </el-dialog>
          </el-form-item>
          <el-form-item class="options">
            <el-button
              color="rgba(111, 182, 184, 1)"
              class="queding"
              type="primary"
              @click="submitAdd(ruleFormRef)"
            >
              确定
            </el-button>
            <el-button @click="cancelAdd(ruleFormRef)">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog> -->
      <!-- 派单弹窗 -->
      <el-dialog
        class="sendOrder"
        v-model="sendOrderVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        title="派单"
        align-center
        width="960"
        :before-close="cancelSendOrders"
      >
        <div class="send_order">
          <div class="condition">
            <span>关键字 : </span>
            <el-input
              clearable
              v-model="sendOrderSearch"
              @clear="sendOrderBtn"
              class="w-50 m-2"
              placeholder="输入用户名或者电话"
              style="width: 200px"
            />
            <el-button
              style="margin-left: 30px; color: #fff"
              color="rgba(111, 182, 184, 1)"
              type="primary"
              class="search"
              @click="sendOrderBtn"
              ><el-icon>
                <Search />
              </el-icon>
              <span>查询</span></el-button
            >
            <div class="table">
              <el-table
                :row-class-name="tableRowClassName"
                :data="sendOrderData.list"
                style="width: 100%"
                :header-cell-style="{
                  background: 'rgba(240, 243, 247, 1)',
                  height: '50px',
                  border: 0,
                }"
              >
                <el-table-column
                  align="center"
                  prop="userName"
                  label="用户名"
                />
                <el-table-column align="center" prop="userPhone" label="电话" />
                <el-table-column align="center" prop="state" label="状态" />
                <el-table-column
                  align="center"
                  prop="create_time"
                  label="维修班"
                />

                <el-table-column align="center" label="操作">
                  <template #default="scope">
                    <div class="operation">
                      <el-button
                        color="rgba(111, 182, 184, 1)"
                        class="queding"
                        type="primary"
                        @click="sendOrderTrue(scope.row)"
                        style="color: #fff"
                      >
                        派单
                      </el-button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div class="options" style="margin: 20px 0 0 0">
            <el-pagination
              background
              :current-page="sendOrderCurrentPage"
              :page-size="sendOrderPageSize"
              layout="total, prev, pager, next, jumper, slot"
              :total="sendOrderTotal"
              @size-change="sendOrderSizeChange"
              @update:current-page="sendOrderCurrentChange"
            />
          </div>
        </div>
      </el-dialog>
      <!-- 详情弹窗 -->
      <el-dialog
        class="orderInfo"
        v-model="orderInfoVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        title="工单详情"
        align-center
        width="760"
        :before-close="cancelOrderInfo"
      >
        <div class="order_info">
          <!-- 工单详情 工单信息 -->
          <div class="title">
            <img src="@/assets/orderInfo.png" alt="" />
            <span>工单信息</span>
          </div>
          <div class="workNum">
            <div class="titles">工单编号:</div>
            <span>{{ orderInfoData.recordNo }}</span>
          </div>
          <div class="workNum">
            <div class="titles">报修姓名:</div>
            <span>{{ orderInfoData.userName }}</span>
          </div>
          <div class="workNum">
            <div class="titles">报修年级:</div>
            <span>{{ orderInfoData.userClass }}</span>
          </div>
          <div class="workNum">
            <div class="titles">报修电话:</div>
            <span>{{ orderInfoData.userPhone }}</span>
          </div>
          <div class="workNum">
            <div class="titles">故障类型:</div>
            <span>{{ orderInfoData.articleName }}</span>
          </div>
          <div class="workNum">
            <div class="titles">故障描述:</div>
            <span>{{ orderInfoData.description }}</span>
          </div>
          <div class="workNum">
            <div class="titles">报修区域:</div>
            <span>{{ orderInfoData.areaName }}{{ orderInfoData.address }}</span>
          </div>
          <div class="workNum">
            <div class="titles">报修录音:</div>
            <div class="audio" @click="bofang">
              <img src="@/assets/audio.png" alt="" />
              <div class="audioNum">{{ orderInfoData.voiceLength }}"</div>
              <!-- <button class="butt" @click="bofang">确认</button> -->
              <audio ref="audio" class="aud" :src="orderInfoData.voice"></audio>
            </div>
          </div>
          <div class="workNum">
            <div class="titles">报修时间:</div>
            <span>{{ orderInfoData.reportTime }}</span>
          </div>
          <div class="title">
            <img src="@/assets/repairsPrice.png" alt="" />
            <span>维修费用</span>
          </div>
          <div class="consumables">
            <div
              style="border-bottom: 1px solid #ccc;margin-top: 8px"
              class=""
              v-for="i in consumables"
            >
              <div class="workNum">
                <div class="titles">耗材:</div>
                <span>{{ i.consumeName }}</span>
              </div>
              <div class="workNum">
                <div class="titles">耗材单价:</div>
                <span>{{ i.price }} 元</span>
              </div>
              <div class="workNum">
                <div class="titles">耗材数量:</div>
                <span>{{ i.number }}</span>
              </div>
              <div class="workNum">
                <div class="titles">耗材费用:</div>
                <span>{{ i.totalPrice }} 元</span>
              </div>
              <div class="workNum">
                <div class="titles">支付时间:</div>
                <span>{{ orderInfoData.payTime }}</span>
              </div>
            </div>
          </div>
          <!-- 工单详情 报修进度 -->
          <div class="title">
            <img src="@/assets/repairsInfo.png" alt="" />
            <span>报修进度</span>
          </div>
          <!-- <div class="workNum">
            <span class="titles">维修总时长:</span
            ><span>{{ orderInfoData.totalTime }}</span>
          </div>
          <div class="workNum">
            <span class="titles">维修耗时:</span
            ><span>{{ orderInfoData.time }}</span>
          </div> -->
          <div class="steps">
            <el-steps direction="vertical" :active="100">
              <el-step v-for="(i, index) in orderInfoData.tracks">
                <template v-slot:icon>
                  <img
                    style="width: 20px; height: 20px"
                    src="@/assets/step_common.png"
                    alt=""
                  />
                </template>
                <template v-slot:title>
                  <span>{{ i.state }}</span>
                </template>
                <template v-slot:description>
                  <div class="content">
                    <span
                      >[{{ i.userZzstr }}]{{ i.userName }}{{ i.userPhone }}
                      {{ i.createTime }}</span
                    >
                  </div>
                  <div class="middleContent">
                    <div class="overContent">{{ i.content }}</div>
                    <!-- 评价图片 -->
                    <div v-if="i.images" class="evaluateImg">
                      <div v-for="(item, index) in i.images">
                        <img
                          @click="lookImg(item)"
                          :key="index"
                          :src="item"
                          alt=""
                        />
                      </div>
                    </div>
                    <!-- 评价录音 -->
                    <div v-if="i.voice" class="audio" @click="audioPlay(i)">
                      <img src="@/assets/audio.png" alt="" />
                      <div class="audioNum">{{ i.voiceLength }}"</div>
                      <!-- <button class="butt" @click="bofang">确认</button> -->
                      <audio
                        :id="`audio${i.id}`"
                        class="aud"
                        :src="i.voice"
                      ></audio>
                    </div>
                  </div>
                </template>
              </el-step>
            </el-steps>
          </div>
        </div>
      </el-dialog>
      <!-- 延时弹窗 -->
      <el-dialog
        class="delayed"
        v-model="delayedVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        title="延时"
        align-center
        width="660"
        :before-close="cancelDelayed"
      >
        <div class="delayed">
          <div class="kaohe">
            <span>接单考核时间</span>
            <el-input
              v-model="delayedData.time1"
              :clearable="false"
              placeholder="考核时间"
              style="width: 150px; margin: 0 10px"
            >
              <template #suffix>
                <img
                  src="@/assets/timer.png"
                  alt=""
                  style="width: 15px; height: 15px"
                />
              </template>
            </el-input>
            <span>分钟</span>
          </div>
          <div class="kaohe">
            <span>维修考核时间</span>
            <el-input
              v-model="delayedData.time2"
              :clearable="false"
              placeholder="考核时间"
              style="width: 150px; margin: 0 10px"
            >
              <template #suffix>
                <img
                  src="@/assets/timer.png"
                  alt=""
                  style="width: 15px; height: 15px"
                />
              </template>
            </el-input>
            <span>分钟</span>
          </div>
          <div class="options">
            <el-button
              color="rgba(111, 182, 184, 1)"
              class="queding"
              type="primary"
              @click="delayedYes()"
            >
              确定
            </el-button>
            <el-button @click="cancelDelayed">取消</el-button>
          </div>
        </div>
      </el-dialog>
      <!-- 回复弹窗 -->
      <el-dialog
        class="reply"
        v-model="replyVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        title="回复"
        align-center
        width="660"
        :before-close="cancelReply"
      >
        <div class="reply">
          <div class="content">
            <el-input
              v-model="replycontent.reply"
              :rows="6"
              type="textarea"
              show-word-limit
              placeholder="请输入你要回复的文字"
            />
          </div>
          <div class="options">
            <el-button
              color="rgba(111, 182, 184, 1)"
              class="queding"
              type="primary"
              @click="replycontentYes()"
            >
              确定
            </el-button>
            <el-button @click="cancelReply">取消</el-button>
          </div>
        </div>
      </el-dialog>
      <!-- 协作审核 弹窗 -->
      <el-dialog
        class="cooperation"
        v-model="cooperationVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        title="协作审核"
        align-center
        width="560"
        :before-close="cancelCooperation"
      >
        <el-form
          ref="ruleFormCooperation"
          :model="cooperationData"
          status-icon
          :rules="cooperationRules"
          label-width="90px"
          class="demo-ruleForm"
        >
          <el-form-item label="申请人 :" prop="userName">
            <span>{{ cooperationData.userName }}</span>
          </el-form-item>
          <el-form-item label="协作对象 :" prop="cooperationValue">
            <el-select-v2
              v-if="options"
              v-model="cooperationData.cooperationValue"
              :options="options"
              placeholder="请选择协作对象"
              style="width: 320px"
              multiple
              @change="cooperationSel"
            />
          </el-form-item>
          <el-form-item label="转单语音 :" prop="voice">
            <!-- <span>{{ cooperationData.voice }}</span> -->
            <div class="audio" @click="cooperationAudioPlay">
              <img src="@/assets/audio.png" alt="" />
              <div class="audioNum">{{ cooperationData.voiceLength }}"</div>
              <!-- <button class="butt" @click="bofang">确认</button> -->
              <audio
                ref="cooperationAudio"
                class="aud"
                :src="cooperationData.voice"
              ></audio>
            </div>
          </el-form-item>
          <el-form-item label="备注 :" prop="age">
            <div class="content">
              <el-input
                v-model="cooperationData.remark"
                :rows="3"
                type="textarea"
                show-word-limit
                placeholder="此处为备注内容"
              />
            </div>
          </el-form-item>

          <el-form-item>
            <div class="options">
              <el-button
                color="rgba(111, 182, 184, 1)"
                class="queding"
                type="primary"
                @click="cooperationYes(ruleFormCooperation, 1)"
              >
                同意
              </el-button>
              <el-button @click="cooperationYes(ruleFormCooperation, 0)"
                >拒绝</el-button
              >
            </div>
          </el-form-item>
        </el-form>
        <!-- <div class="">
          <div class="block">
            <span class="name">申请人 :</span><span>张师傅</span>
          </div>
          <div class="block">
            <span class="name">协作对象 :</span>
            <div>
              <el-select-v2
                v-model="nameValue"
                :options="options"
                placeholder="请选择协作对象"
                style="width: 320px"
                multiple
              />
            </div>
          </div>
          <div class="block">
            <span class="name">转单语音 :</span><span>语音</span>
          </div>
          <div class="content">
            <span>备注</span>
            <el-input
              v-model="cooperationContent"
              :rows="3"
              type="textarea"
              show-word-limit
              placeholder="此处为备注内容"
            />
          </div>
          <div class="options">
            <el-button
              color="rgba(111, 182, 184, 1)"
              class="queding"
              type="primary"
              @click="sendOrderTrue()"
            >
              同意
            </el-button>
            <el-button @click="cancelCooperation">拒绝</el-button>
          </div>
        </div> -->
      </el-dialog>
      <!-- 转单审核 弹窗 -->
      <el-dialog
        class="transOrder"
        v-model="transOrderVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        title="转单审核"
        align-center
        width="560"
        :before-close="cancelTransOrder"
      >
        <el-form
          ref="ruleFormTransOrder"
          :model="transOrderData"
          status-icon
          :rules="transOrderRules"
          label-width="90px"
          class="demo-ruleForm"
        >
          <el-form-item label="申请人 :" prop="userName">
            <span>{{ transOrderData.userName }}</span>
          </el-form-item>
          <el-form-item label="转单语音 :" prop="voice">
            <div class="audio" @click="transOrderAudioPlay">
              <img src="@/assets/audio.png" alt="" />
              <div class="audioNum">{{ transOrderData.voiceLength }}"</div>
              <!-- <button class="butt" @click="bofang">确认</button> -->
              <audio
                ref="transOrderAudio"
                class="aud"
                :src="transOrderData.voice"
              ></audio>
            </div>
            <!-- <div>{{ transOrderData.voice }}</div> -->
          </el-form-item>
          <el-form-item label="备注 :" prop="remark">
            <div class="content">
              <el-input
                v-model="transOrderData.remark"
                :rows="3"
                type="textarea"
                show-word-limit
                placeholder="此处为备注内容"
              />
            </div>
          </el-form-item>
          <!-- <el-form-item label="身份 :" prop="userId">
            <el-select v-model="transOrderData.userId" placeholder="请选择派单人员">
              <el-option v-for="item in transOrderObj.list" :key="item.id" :label="item.userName" :value="item.id" />
            </el-select>
          </el-form-item> -->
          <el-form-item label="选择师傅 :" prop="userId">
            <el-select
              v-model="transOrderData.userId"
              placeholder="请选择派单人员"
            >
              <el-option
                v-for="item in transOrderObj.list"
                :key="item.id"
                :label="item.userName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>

          <el-form-item>
            <div class="options">
              <el-button
                color="rgba(111, 182, 184, 1)"
                class="queding"
                type="primary"
                @click="transOrderYes(ruleFormTransOrder, 1)"
              >
                同意
              </el-button>
              <el-button @click="transOrderYes(ruleFormTransOrder, 0)"
                >拒绝
              </el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!-- 拒绝转单 -->
      <el-dialog
        class="transOrder"
        v-model="refusetransOrderVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        title="拒绝转单"
        align-center
        width="400"
        :before-close="cancelRefusetransOrder"
      >
        <el-form
          ref="refusetransOrder"
          :model="refusetransOrderData"
          status-icon
          :rules="refusetransOrderRules"
          label-width="90px"
          class="demo-ruleForm"
        >
          <el-form-item label="审批意见 :" prop="remark">
            <el-input
              v-model="refusetransOrderData.remark"
              :rows="5"
              type="textarea"
              show-word-limit
              placeholder="请输入备审批意见"
            />
          </el-form-item>
          <el-form-item>
            <div class="options">
              <el-button
                color="rgba(111, 182, 184, 1)"
                class="queding"
                type="primary"
                @click="refusetransOrderYes(refusetransOrder)"
              >
                确定
              </el-button>
              <el-button @click="cancelRefusetransOrder(refusetransOrder)"
                >取消
              </el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!-- 转线下审核 弹窗 -->
      <el-dialog
        class="transOrder"
        v-model="offlineVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        title="转线下审核"
        align-center
        width="560"
        :before-close="cancelOffline"
      >
        <el-form
          ref="ruleFormOffline"
          :model="offlineData"
          status-icon
          :rules="offlineRules"
          label-width="90px"
          class="demo-ruleForm"
        >
          <el-form-item label="申请人 :" prop="userName">
            <span>{{ offlineData.userName }}</span>
          </el-form-item>
          <el-form-item label="转单语音 :" prop="voice">
            <div class="audio" @click="offlineAudioPlay">
              <img src="@/assets/audio.png" alt="" />
              <div class="audioNum">{{ offlineData.voiceLength }}"</div>
              <!-- <button class="butt" @click="bofang">确认</button> -->
              <audio
                ref="offlineAudio"
                class="aud"
                :src="offlineData.voice"
              ></audio>
            </div>
            <!-- <div>{{ transOrderData.voice }}</div> -->
          </el-form-item>
          <el-form-item label="备注 :" prop="remark">
            <div class="content">
              <el-input
                v-model="offlineData.remark"
                :rows="3"
                type="textarea"
                show-word-limit
                placeholder="此处为备注内容"
              />
            </div>
          </el-form-item>
          <!-- <el-form-item label="身份 :" prop="userId">
            <el-select v-model="transOrderData.userId" placeholder="请选择派单人员">
              <el-option v-for="item in transOrderObj.list" :key="item.id" :label="item.userName" :value="item.id" />
            </el-select>
          </el-form-item> -->
          <el-form-item label="选择师傅 :" prop="userId">
            <el-select
              v-model="offlineData.userId"
              placeholder="请选择派单人员"
            >
              <el-option
                v-for="item in offlineObj.list"
                :key="item.id"
                :label="item.userName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>

          <el-form-item>
            <div class="options">
              <el-button
                color="rgba(111, 182, 184, 1)"
                class="queding"
                type="primary"
                @click="offlineYes(ruleFormOffline, 1)"
              >
                同意
              </el-button>
              <el-button @click="offlineYes(ruleFormOffline, 0)"
                >拒绝
              </el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!-- 拒绝转线下审核 -->
      <el-dialog
        class="transOrder"
        v-model="refuseOfflineVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        title="拒绝转线下审核"
        align-center
        width="400"
        :before-close="cancelRefuseOffline"
      >
        <el-form
          ref="refuseOffline"
          :model="refuseOfflineData"
          status-icon
          :rules="refuseOfflineRules"
          label-width="90px"
          class="demo-ruleForm"
        >
          <el-form-item label="留言 :" prop="remark">
            <el-input
              v-model="refuseOfflineData.remark"
              :rows="5"
              type="textarea"
              show-word-limit
              placeholder="请输入备审批意见"
            />
          </el-form-item>
          <el-form-item>
            <div class="options">
              <el-button
                color="rgba(111, 182, 184, 1)"
                class="queding"
                type="primary"
                @click="refuseOfflineYes(refuseOffline)"
              >
                确定
              </el-button>
              <el-button @click="cancelRefuseOffline(refuseOffline)"
                >取消
              </el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!-- 关单 弹窗 -->
      <el-dialog
        class="customsOrder"
        v-model="customsOrderVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :title="customsOrderTitle"
        align-center
        width="560"
        :before-close="cancelCustomsOrder"
      >
        <div class="">
          <div class="content">
            <span class="name">关单原因 :</span>
            <!-- <el-select v-model="customsOrderData.reason" placeholder="选择关单原因">
              <el-option v-for="item in customsOrderList" :key="item.id" :label="item.name" :value="item.name" />
            </el-select> -->
            <el-select
              v-model="customsOrderData.reason"
              filterable
              allow-create
              default-first-option
              :reserve-keyword="false"
              placeholder="请输入或选择关单原因"
            >
              <el-option
                v-for="item in customsOrderList"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </div>
          <div class="content">
            <span class="name">备注 :</span>
            <el-input
              v-model="customsOrderData.remark"
              :rows="4"
              type="textarea"
              show-word-limit
              placeholder="此处为备注内容"
            />
          </div>
          <div class="options">
            <el-button
              color="rgba(111, 182, 184, 1)"
              class="queding"
              type="primary"
              @click="customsOrderYes"
            >
              同意
            </el-button>
            <el-button @click="cancelCustomsOrder">取消</el-button>
          </div>
        </div>
      </el-dialog>
      <!-- 改价 弹窗 -->
      <!-- <el-dialog class="changePrice" v-model="changePriceVisible" :close-on-click-modal="false"
        :close-on-press-escape="false" title="改价" align-center width="600" :before-close="cancelChangePrice">
        <div>
          <div class="goodsCard" v-for="(i, index) in changePriceNum.list" :key="i.id">
            <div class="goodsTitle">
              <h2>{{ i.consumeName }}</h2>
              <el-button type="danger" @click="delChangePrice(i)">
                删除
              </el-button>
            </div>
            <div class="label" label="物品种类 :" prop="articleId">
              <div class="type">物品种类 :</div>
              <el-select v-model="i.articleId" placeholder="请选择物品种类" @change="changePriceSel($event, i)">
                <el-option v-for="item in changePriceList.list" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </div>
            <div class="label" label="耗材名称 :" prop="consumeId">
              <div class="type">耗材名称 :</div>
              <el-select v-model="i.consumeId" @change="consumeChange($event, i)" placeholder="请选择耗材名称">
                <el-option v-for="item in i.changePriceList2" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </div>
            <div class="label" label="耗材数量 :" prop="number">
              <div class="type">耗材数量 :</div>
              <el-input v-model="i.number" />
            </div>
            <div class="label" label="单价 :" prop="price">
              <div class="type">单价 :</div>
              <el-input disabled :value="i.price" />
            </div>
            <div class="label" label="金额 :" prop="totalPrice">
              <div class="type">金额 :</div>
              <el-input disabled :value="i.totalPrice" />
            </div>
          </div>
          <div class="addGoods">
            <el-button class="queding" type="primary" @click="addChangePrice">
              添加物品
            </el-button>
          </div>
          <div class="priceSum">
            <div class="totalPrice">总金额 : {{ changePriceSum }} 元</div>
            <div class="options">
              <el-button color="rgba(111, 182, 184, 1)" class="queding" type="primary"
                @click="changePriceYes(ruleFormChangePrice)">
                确定
              </el-button>
              <el-button @click="cancelChangePrice(ruleFormChangePrice)">取消</el-button>
            </div>
          </div>
        </div>
      </el-dialog> -->
      <!-- 改价 弹窗 -->
      <el-dialog
        class="changePrice"
        v-model="changePriceVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        title="改价"
        align-center
        width="1000"
        :before-close="cancelChangePrice"
        :collapse-tags="true"
      >
        <div class="goodsCard">
          <!-- <div class="types">
            <div class="type">关联种类</div>
            <div class="type">耗材名称</div>
            <div class="type">价格（元）</div>
            <div class="type">数量</div>
          </div> -->
          <div style="width: 433px; margin-right: 33px">
            <el-input
              v-model="goodTypeKeyWord"
              clearable
              @input="filterType"
              @clear="keyWordClean"
              style="width: 433px"
              class="w-50 m-2"
              placeholder="搜索耗材"
            />

            <div v-if="!goodTypeKeyWord">
              <el-cascader-panel
                v-model="changePriceSelId"
                :options="changePriceNum.list"
                :props="{ value: 'id', label: 'name', multiple: true }"
                multiple
                @change="selPrice"
              >
                <template #default="{ node, data }">
                  <span>{{ data.name }}</span>
                  <span v-if="!node.isLeaf">
                    ({{ data.children.length }})
                  </span>
                </template>
              </el-cascader-panel>
            </div>
            <div v-else class="checkbox-group">
              <el-checkbox-group
                @change="keyWordSelPriceChange"
                v-model="keyWordSelPriceData"
              >
                <el-checkbox
                  :label="item.parentName + '-' + item.name"
                  v-for="item in keyWordSelPrice"
                />
              </el-checkbox-group>
              <!-- <el-cascader-panel v-model="changePriceSelId" :options="keyWordSelPrice"
                :props="{ value: 'id', label: 'name', multiple: true }" multiple @change="keyWordSelPriceChange">
                <template #default="{ node, data }">
                  <span>{{ data.name }}</span>
                </template>
              </el-cascader-panel> -->
            </div>
          </div>
          <el-table
            :data="selPriceList"
            style="width: 500px"
            :header-cell-style="{
              background: 'rgba(240, 243, 247, 1)',
              height: '34px',
              border: 0,
            }"
          >
            <!-- <el-table-column align="center" type="selection" width="80" /> -->
            <el-table-column
              align="center"
              label="耗材名称"
              prop="name"
              width="180"
              show-overflow-tooltip
            />
            <el-table-column align="center" label="价格（元）">
              <template #default="{ row }">
                <el-input
                  v-model="row.price"
                  oninput="value=value.replace(/\D*(\d*)(\.?)(\d{0,2})\d*/,'$1$2$3').replace(/^0+(\d)/, '$1') .replace(/^\./, '0.').match(/^\d*(\.?\d{0,2})/g)[0] || ''"
                  placeholder=""
                  style="width: 80px"
                />
              </template>
            </el-table-column>
            <el-table-column align="center" label="数量">
              <template #default="{ row }">
                <el-input
                  v-model="row.number"
                  placeholder=""
                  oninput="value=value.replace(/[^\d]/g,'').replace(/^0{1,}/g,'')"
                  style="width: 80px"
                />
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作" prop="id">
              <template #default="{ row }">
                <!-- <el-button type="danger" :icon="Delete" circle /> -->
                <span class="del" @click="delSelChangePrice(row)">删除</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="priceSum">
          <div class="totalPrice" style="width: 400px">
            总金额 : {{ allPrice }} 元
          </div>
          <div class="options">
            <el-button
              color="rgba(111, 182, 184, 1)"
              class="queding"
              type="primary"
              @click="changePriceYes(ruleFormChangePrice)"
            >
              确定
            </el-button>
            <el-button @click="cancelChangePrice(ruleFormChangePrice)"
              >取消</el-button
            >
          </div>
        </div>
      </el-dialog>

      <!-- 打印报表 -->
      <el-dialog
        class="printDialog"
        v-model="printVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        title="打印工单"
        align-center
        width="760"
        :before-close="cancelPrint"
      >
        <div class="content" id="printWrapper">
          <div class="title">
            <span>校园报修系统</span>
            <span
              >打印时间:{{ nowTime }} &nbsp;&nbsp;操作人:{{
                printData.list.operator
              }}</span
            >
          </div>
          <!-- <h3>故障报修</h3> -->
          <div class="title">
            <span>{{ printData.list.schoolName }}</span>
            <span>工单号: {{ printData.list.recordNo }}</span>
          </div>
          <div class="printTable">
            <table border="1" Cellspacing="0">
              <tr>
                <td class="tableTitle" Colspan="4">故障报修</td>
              </tr>
              <tr>
                <td class="item">报修人</td>
                <td class="value">{{ printData.list.userName }}</td>
                <td class="item">年级</td>
                <td class="value">{{ printData.list.userClass }}</td>
              </tr>
              <tr>
                <td class="item">手机</td>
                <td class="value">{{ printData.list.userPhone }}</td>
                <td class="item">区域</td>
                <td class="value">{{ printData.list.areaId }}</td>
              </tr>
              <tr>
                <td class="item">报修物品</td>
                <td class="value">{{ printData.list.articleName }}</td>
                <td class="item">报修时间</td>
                <td class="value">{{ printData.list.reportTime }}</td>
              </tr>
              <tr>
                <td class="item">故障描述</td>
                <td Colspan="3" class="textarea">
                  <div class="textarea">{{ printData.list.description }}</div>
                </td>
              </tr>
              <tr>
                <td class="item">维修师傅</td>
                <td Colspan="3">{{ printData.list.maintenancerName }}</td>
              </tr>
              <tr>
                <td class="item">手机号码</td>
                <td class="value">{{ printData.list.maintenancerPhone }}</td>
                <td class="item">状态</td>
                <td class="value">{{ printData.list.state }}</td>
              </tr>
              <tr>
                <td class="item">支付金额/元</td>
                <td class="value">{{ printData.list.price }}</td>
                <td class="item">退款金额/元</td>
                <td class="value">{{ printData.list.refund }}</td>
              </tr>
              <!-- <tr>
                <td class="item">备注</td>
                <td class="textarea" Colspan="3">
                  学生/人工智能/智能2021-4学生/人工智能/智能2021-4学生/人工智能/智能2021-4学生/人工智能/智能2021-4学生/人工智能/智能2021-4学生/人工智能/智能2021-4学生/人工智能/智能2021-4学生/人工智能/智能2021-4学生/人工智能/智能2021-4学生/人工智能/智能2021-4学生/人工智能/智能2021-4学生/人工智能/智能2021-4学生/人工智能/智能2021-4
                </td>
              </tr> -->
            </table>
            <div class="name">
              <span>后期签字: </span>
              <span></span>
              <span>师傅签字: </span>
              <span></span>
            </div>
            <!-- <div class="name date">
              <span>日期: </span>
              <span></span>
              <span>日期: </span>
              <span></span>
            </div> -->
          </div>
        </div>
        <div class="options">
          <el-button
            color="rgba(111, 182, 184, 1)"
            class="queding"
            type="primary"
            @click="printBox"
          >
            打印
          </el-button>
          <el-button @click="cancelPrint">取消</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 分页组件 -->
    <el-pagination
      background
      :current-page="currentPage"
      :page-size="pageSize"
      :page-sizes="[10, 20, 50, 100]"
      layout="total,sizes, prev, pager, next, jumper, slot"
      :total="total"
      @size-change="handleSizeChange"
      @update:current-page="handleCurrentChange"
    />
    <div class="bgImg" v-if="bgImg">
      <img @click="bgImg = false" :src="bgImgurl" alt="" />
    </div>
  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  nextTick,
  watch,
  onBeforeMount,
  onUnmounted,
} from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { Timer } from "@element-plus/icons-vue";
import { Calendar, Delete } from "@element-plus/icons-vue";
import vidiconsApi from "@/api/vidicons.js";
import { dayjs } from "element-plus";
// import gaobai from "@/static/gaobai.mp3";
// import type { UploadProps } from "element-plus";
import lodash, { get } from "lodash";
import axios from "axios";
import { useStore } from "vuex";

import print from "print-js";

const store = useStore();
const router = useRouter();

const loading = ref(false);
const schoolId = ref(""); // 判断是否为超级管理员账号
const day = ref([
  "全部",
  "待处理",
  "待接单",
  "待审核",
  "维修中",
  "已完成",
  "已取消",
  "已关单",
  "已超时",
]); // 天数切换按钮
let dayIndex = ref(0); // 天数切换按钮索引
// 表格数据
const tableData = reactive({
  list: [],
});

// 新建工单时的数据  (-----------------------------------------------)
const ruleFormAddStaff = ref();
const addDialogVisible = ref(false); // 控制添加员工弹窗
const dialongTitle = ref("新增工单"); // 新建工单弹窗标题
const fileList = ref([]); // 添加多张图片的文件
const imgVisible = ref(false); // 点击查看图片是否查看
const imgUrl = ref(""); // 点击查看的那张照片地址
const AddStaffList = reactive({
  name: "",
  phone: "",
  post: "0",
  cardnumber: "",
  id: "",
}); // 新建工单表单数据
const addStaffRules = reactive({
  name: [
    { required: true, message: "姓名不能为空", trigger: "blur" },
    {
      pattern: /[\u4e00-\u9fa5]$/,
      message: "请输入正确姓名",
      trigger: "blur",
    },
  ],
  // /^[\u4E00-\u9FA5]$/
  cardnumber: [
    { required: true, message: "卡号不能为空", trigger: "blur" },
    // {
    //   // pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
    //   // pattern: /^[0-9]*$/,
    //   message: "请输入正确卡号(数字类型)",
    //   trigger: "blur",
    // },
  ],
  phone: [
    { required: true, message: "请输入手机号", trigger: "blur" },
    {
      // pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
      pattern: /^((\(\+86\))|(\(86\)))?[1][3456789][0-9]{9}$/,
      message: "请输入合法手机号/电话号",
      trigger: "blur",
    },
  ],
  post: [
    {
      required: true,
      message: "职位不能为空",
      trigger: "blur",
    },
  ],

  // desc: [{ required: true, message: "Please input activity form", trigger: "blur" }],
}); // 新建工单表单验证

// 派单  (-----------------------------------------------)
const sendOrderCurrentPage = ref(1);
const sendOrderPageSize = ref(10);
const sendOrderTotal = ref();
const sendOrderSearch = ref();
const sendOrderVisible = ref(false); // 控制工单派单弹窗
const sendOrderData = reactive({
  list: [],
  id: "",
  // sendOrder: {
  //   acceptanceTime: "",
  //   shiftId: "",
  //   sarticleId: "",
  //   id: "",
  // },
}); // 派单表单数据
const sendOrderRules = reactive({
  name: [
    { required: true, message: "姓名不能为空", trigger: "blur" },
    {
      pattern: /[\u4e00-\u9fa5]$/,
      message: "请输入正确姓名",
      trigger: "blur",
    },
  ],
  // /^[\u4E00-\u9FA5]$/
  cardnumber: [
    { required: true, message: "卡号不能为空", trigger: "blur" },
    // {
    //   // pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
    //   // pattern: /^[0-9]*$/,
    //   message: "请输入正确卡号(数字类型)",
    //   trigger: "blur",
    // },
  ],
  phone: [
    { required: true, message: "请输入手机号", trigger: "blur" },
    {
      // pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
      pattern: /^((\(\+86\))|(\(86\)))?[1][3456789][0-9]{9}$/,
      message: "请输入合法手机号/电话号",
      trigger: "blur",
    },
  ],
  post: [
    {
      required: true,
      message: "职位不能为空",
      trigger: "blur",
    },
  ],

  // desc: [{ required: true, message: "Please input activity form", trigger: "blur" }],
}); // 派单表单验证

// 详情   (-----------------------------------------------)
const orderInfoVisible = ref(false); // 控制工单详情
const audio = ref(); // 工单详情音频
const orderInfoData = ref({
  recordNo: "", // 工单编号
  userName: "", // 报修姓名
  userClass: "", // 报修年级
  userPhone: "", // 报修电话
  articleName: "", // 故障类型
  description: "", // 故障描述
  articleId: "", // 报修类型
  address: "", // 报修区域
  areaName: "", // 报修校区地址
  voice: "", // 报修录音
  voiceLength: "", // 报修录音时长
  reportTime: "", // 报修时间
  totalTime: "", // 维修总时长
  time: "", // 维修耗时
  tracks: [],
  price: "", // 费用
  payTime: "", // 支付时间
});
const consumables = ref(); // 耗材详情
const mapUrl = ref(); // 音频地址
const bgImg = ref(false); // 点击查看图片
const bgImgurl = ref(); // 点击查看图片地址

// 延时   (-----------------------------------------------)
const delayedVisible = ref(false); // 延时弹窗控制
const delayedData = ref({
  id: "",
  time1: "", // 接单考核时间
  time2: "", // 维修考核时间
});

// 回复  (-----------------------------------------------)
const replyVisible = ref(false); // 回复弹窗控制
const replycontent = ref({
  reply: "",
  id: "",
}); // 回复绑定数据

// 协作审核  (-----------------------------------------------)
// 协作审核中审核对象数组
const cooperationVisible = ref(false); // 协作审核弹窗控制
const cooperationData = ref({
  collaboratorDatas: [],
  cooperationValue: "",
  id: "",
  remark: "",
  userName: "",
  voice: "",
}); // 协作审核数据
const cooperationValue = ref([]); // 挑选中的对象数组
const options = ref(); // 多选数据判断
const ruleFormCooperation = ref(); // 协作审核ref对象
const cooperationAudio = ref(); // 语音对象
// 转单审核验证
const cooperationRules = reactive({
  // userName: [{ required: true, message: "申请人不能为空", trigger: "blur" }],
  cooperationValue: [
    { required: true, message: "协作对象不能为空", trigger: "blur" },
  ],
  voice: [{ required: true, message: "转单语音不能为空", trigger: "blur" }],
});

// 转单审核   (-----------------------------------------------)
const transOrderVisible = ref(false); // 控制转单审核弹窗
const transOrderData = ref({
  id: "",
  userName: "",
  voice: "",
  remark: "",
  userId: "", // 被派单师傅id(下拉框)
  voiceLength: "", // 录音长度
}); // 挑选中的对象
const ruleFormTransOrder = ref();
const transOrderObj = reactive({
  list: [],
});
// 转单审核中审核对象数组
const transOrderAudio = ref(); // 语音对象
// 转单审核验证
const transOrderRules = reactive({
  userName: [{ required: true, message: "申请人不能为空", trigger: "blur" }],
  voice: [{ required: true, message: "转单语音不能为空", trigger: "blur" }],
  userId: [{ required: true, message: "请选择派单人员", trigger: "blur" }],
});
// 拒绝转单
const refusetransOrder = ref();
const refusetransOrderVisible = ref(false);
const refusetransOrderData = reactive({
  remark: "",
});
// 拒绝转单验证
const refusetransOrderRules = reactive({
  remark: [{ required: true, message: "审批意见不能为空", trigger: "blur" }],
});

// 转线下审核 （--------------------------------------------）
const offlineVisible = ref(false); // 转线下审核控制
const offlineData = reactive({
  id: "",
  userName: "",
  remark: "",
  voice: "",
  userId: "", // 被派单师傅id(下拉框)
  voiceLength: "", // 录音长度
});
// 挑选中的对象
const ruleFormOffline = ref();
const offlineObj = reactive({
  list: [],
});
// 转线下审核中审核对象数组
const offlineAudio = ref(); // 语音对象
// 转线下审核验证
const offlineRules = reactive({
  userName: [{ required: true, message: "申请人不能为空", trigger: "blur" }],
  voice: [{ required: true, message: "转单语音不能为空", trigger: "blur" }],
  userId: [{ required: true, message: "请选择派单人员", trigger: "blur" }],
});
// 拒绝转线下审核
const refuseOffline = ref();
const refuseOfflineVisible = ref(false);
const refuseOfflineData = reactive({
  remark: "",
});
// 拒绝转线下审核验证
const refuseOfflineRules = reactive({
  remark: [
    { required: true, message: "拒绝转线下审核留言不能为空", trigger: "blur" },
  ],
});

// 关单 （关单--------------------------------------------）
const customsOrderVisible = ref(false); // 关单弹窗
const customsOrderTitle = ref('关单'); // 关单弹窗
const customsOrderList = ref(); // 关单原因列表
const customsOrderData = ref({
  reason: "",
  recordId: "",
  remark: "",
}); // 选择的关单原因

// 改价  （改价--------------------------------------------）
const changePriceVisible = ref(false); // 改价弹窗
const ruleFormChangePrice = ref(); // 改价ref
const changePriceIndex = ref(0);
const changePriceSum = ref(0); // 总金额
const changePriceNum = reactive({ list: [] }); // 改价中的物品数量
const changePriceList = reactive({ list: [] }); // 物品种类
const changePriceList2 = reactive({ list: [] }); // 耗材种类
const changePriceData = ref({
  id: "",
  schoolId: "",
  recordId: "",
});
const selPriceList = ref([]); // 改价选中数据
const changePriceSelId = ref([]); // 改价中 多选时选中的数据id

const goodTypeKeyWord = ref(); // 耗材名称搜索关键字
const keyWordSelPriceData = ref(); // 通过关键字搜索的数据勾选的数据
const keyWordSelPrice = ref(); // 通过关键字搜索的数据

const allPrice = ref(0); // 计算的数量总价格

// 打印
const printVisible = ref(false);
const nowTime = ref();
const printData = reactive({
  list: {},
}); // 打印数据

watch(
  selPriceList,
  (newVal, oldVal) => {
    console.log(oldVal, "表格中的数据");
    console.log(newVal, "表格中的数据");
    let allSum = 0;
    newVal.forEach((item) => {
      let sum = Number(
        (item.number * item.price * 100).toString().split(".")[0]
      );
      console.log(sum);
      allSum += sum;
    });
    allPrice.value = allSum / 100;
    // allPrice.value = newVal.reduce((pre, cur) => {
    //   let sum = pre + cur.number * cur.price
    //   let sums = (cur.number * cur.price * 100).toString().split(".")
    //   console.log(sums);

    //   return sum
    // }, 0)
  },
  { deep: true }
);

const validatePrice = (rule, value, callback) => {
  if (/^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,2})?$/.test(value)) {
    callback();
  } else {
    callback(new Error("最多包含两位小数的正数"));
  }
};
const changePriceRules = reactive({
  articleId: [{ required: true, message: "物品种类不能为空", trigger: "blur" }],
  number: [
    { required: true, message: "耗材数量不能为空", trigger: "blur" },
    { pattern: /^\+?[1-9]\d*$/, message: "请输入大于0的正整数" },
  ],
  consumeId: [{ required: true, message: "耗材名称不能为空", trigger: "blur" }],
  price: [
    { required: true, message: "单价不能为空", trigger: "blur" },
    { validator: validatePrice, trigger: "blur" },
  ],
  totalPrice: [{ required: true, message: "金额不能为空", trigger: "blur" }],
}); // 改价表单验证

const api = ref(""); // 拼接接口地址
// 筛选框条件
const searchInput = reactive({
  keyWord: "",
  createTime: "",
  maintenanceName: "",
  schoolId: "",
}); // 搜索按钮数据

const currentPage = ref(1); // 当前页
const pageSize = ref(10);
const total = ref(15); // 当前总数
const selectData = reactive({ list: [] }); // 多选框选择的数据

watch(
  () => searchInput.createTime,
  (newVal, oldVal) => {
    console.log("监听时间:", newVal);
    if (newVal == null) {
      searchBtn();
    }
  }
);
// 天数切换按钮选项
const dayBtn = (index) => {
  dayIndex.value = index;
  getList();
};
// 打印功能
const printBox = () => {
  setTimeout(function () {
    print({
      printable: "printWrapper",
      // 打印类型 html
      type: "html",
      font_size: "", // 不设置则使用默认字体大小
      scanStyles: false,
      // 继承样式
      targetStyle: "*",
      targetStyles: "*",
      scanStyles: true,
      style: "@page {margin:0mm 10mm};",
    });
  }, 500);
};

// 工单数据
const getList = async () => {
  loading.value = true;

  let data = {
    currentPage: currentPage.value,
    pageCount: pageSize.value,
    keyWord: searchInput.keyWord,
    state: dayIndex.value,
    schoolId: searchInput.schoolId,
    maintenanceName: searchInput.maintenanceName,
  };
  if (searchInput.createTime) {
    data.startTime = searchInput.createTime[0];
    data.endTime = searchInput.createTime[1];
  }
  let res = await axios({
    method: "get",
    url: api.value + "/repairRecord/queryManagePage",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  console.log(res, "工单数据");
  if (res.status == 200) {
    tableData.list = res.data.data.list;
    total.value = res.data.data.totalCount;
    loading.value = false;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
    if (res.data.code == 570) {
      sessionStorage.removeItem("token");
      router.push({
        path: `/login`,
      });
    }
  }
  // console.log(res);
};
// 切换校区
const selSchool = async (val) => {
  let data = {
    schoolId: val,
    keyWord: searchInput.keyWord,
    maintenanceName: searchInput.maintenanceName,
  };
  if (searchInput.createTime) {
    data.startTime = searchInput.createTime[0];
    data.endTime = searchInput.createTime[1];
  }
  let ress = await axios({
    method: "get",
    url: api.value + "/repairRecord/queryManageCount",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  day.value = new Array(10);
  console.log(day.value);

  console.log(ress, "工单管理头部状态数量");
  if (ress.status == 200) {
    let obj = ress.data.data;
    Object.keys(obj).forEach(function (key) {
      // console.log(key, obj[key]);
      if (key == "allCount") {
        day.value[0] = {
          key: obj[key],
          name: "全部",
          state: 0,
        };
      }
      if (key == "dispatchCount") {
        day.value[1] = {
          key: obj[key],
          name: "待接单",
          state: 1,
        };
      }
      if (key == "maintenanceCount") {
        day.value[2] = {
          key: obj[key],
          name: "维修中",
          state: 2,
        };
      }
      if (key == "logisticsCount") {
        day.value[3] = {
          key: obj[key],
          name: "待处理",
          state: 3,
        };
      }
      if (key == "examineCount") {
        day.value[4] = {
          key: obj[key],
          name: "待审核",
          state: 4,
        };
      }
      if (key == "paidCount") {
        day.value[5] = {
          key: obj[key],
          name: "待支付",
          state: 10,
        };
      }

      if (key == "canceledCount") {
        day.value[6] = {
          key: obj[key],
          name: "已取消",
          state: 6,
        };
      }
      if (key == "closedCount") {
        day.value[7] = {
          key: obj[key],
          name: "已关单",
          state: 7,
        };
      }
      // if (key == "timeoutCount") {
      //   day.value.push({
      //     key: obj[key],
      //     name: "已超时",
      //     state: 8,
      //   });
      // }
      if (key == "finishedCount") {
        day.value[8] = {
          key: obj[key],
          name: "已完成",
          state: 5,
        };
      }
      if (key == "offlineCount") {
        day.value[9] = {
          key: obj[key],
          name: "转线下",
          state: 9,
        };
      }
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
  getList();
};
// 添加工单中上传照片组件功能  (新建工单------------------------)
const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile.uid, uploadFiles);
  fileList.value = fileList.value.filter((item) => {
    return item.uid != uploadFile.uid;
  });
};
// 点击图片的查看按钮
const handlePreview = (file) => {
  imgUrl.value = file.url;
  imgVisible.value = true;
  console.log(file);
};
// 添加照片时往fileList列表中添加图片信息
const handleChange = (file, fileLists) => {
  fileList.value.push(file);
  console.log(file, "filefilefilefilefile");
};
// 可以获取图片参数
const handleUpload = (file) => {
  console.log(file, "filefilefilefilefile");
};
// 新建工单按钮
const addlist = () => {
  dialongTitle.value = "新建工单";
  addDialogVisible.value = true;
};
//编辑工单按钮
const edit = (row) => {
  dialongTitle.value = "编辑工单";
  addDialogVisible.value = true;
  console.log(row);
};
// 取消添加工单
const cancelAdd = () => {
  addDialogVisible.value = false;
  ruleFormAddStaff.value.resetFields();
};
// 确认添加工单
const submitAdd = async (formEl) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      if (dialongTitle.value == "新增驾驶员") {
        let data = {
          user_name: ruleForm.name,
          user_phone: ruleForm.phone,
          user_zz: ruleForm.post,
          card_number: ruleForm.cardnumber,
        };
        // let res = await admin.adminAdd(data);
        let res = await axios({
          method: "post",
          url: api.value + "/carBook/userinsert.action",
          headers: {
            "Content-Type": "application/json;charset=utf-8",
            token: sessionStorage.getItem("token"),
          },
          data: data,
        });
        // console.log(res, "添加账号");
        if (res.data.code == 200) {
          getList();
          ElMessage({
            type: "success",
            showClose: true,
            message: res.data.message,
            center: true,
          });
          addDialogVisible.value = false;
          ruleFormRef.value.resetFields();
        } else {
          ElMessage({
            type: "error",
            showClose: true,
            message: res.data.message,
            center: true,
          });
        }
      } else {
        let data = {
          user_name: ruleForm.name,
          user_phone: ruleForm.phone,
          user_zz: ruleForm.post,
          id: ruleForm.id,
        };
        // let res = await admin.adminAdd(data);
        let res = await axios({
          method: "post",
          url: api.value + "/carBook/userupdate.action",
          headers: {
            "Content-Type": "application/json;charset=utf-8",
            token: sessionStorage.getItem("token"),
          },
          data: data,
        });
        // console.log(res, "修改账号");
        if (res.data.code == 200) {
          getList();

          ElMessage({
            type: "success",
            showClose: true,
            message: res.data.message,
            center: true,
          });
          addDialogVisible.value = false;
          ruleFormRef.value.resetFields();
        } else {
          ElMessage({
            type: "error",
            showClose: true,
            message: res.data.message,
            center: true,
          });
        }
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};

// 派单按钮   (派单------------------------------------------)
// 获取派单表格数据
const sendOrderTable = async () => {
  let data = {
    recordId: sendOrderData.id,
    currentPage: sendOrderCurrentPage.value,
    pageCount: sendOrderPageSize.value,
    keyWord: sendOrderSearch.value,
  };

  let res = await axios({
    method: "get",
    url: api.value + "/repairUser/queryPageRepairUsers",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  console.log(res, "派单数据");
  if (res.data.code == 200) {
    sendOrderData.list = res.data.data.list;
    sendOrderTotal.value = res.data.data.totalCount;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
// 搜索按钮
const sendOrderBtn = () => {
  sendOrderTable();
};
// 点击派单按钮
const sendOrders = async (row) => {
  sendOrderVisible.value = true;
  sendOrderData.id = row.id;
  sendOrderTable();
};
// 确定派单
const sendOrderTrue = (row) => {
  ElMessageBox.confirm(`确定是否派单?`, "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      let data = {
        id: row.id,
        acceptanceTime: row.acceptanceTime,
        shiftId: row.shiftId,
        articleId: row.articleId,
        recordId: sendOrderData.id,
      };
      let res = await axios({
        method: "post",
        url: api.value + "/repairRecord/receiveSendOrders",
        headers: {
          token: sessionStorage.getItem("token"),
          user_head: sessionStorage.getItem("userhead"),
        },
        data: data,
      });
      if (res.data.code == 200) {
        sendOrderVisible.value = false;
        getList();
        ElMessage({
          type: "success",
          showClose: true,
          message: res.data.message,
          center: true,
        });
      } else {
        ElMessage({
          type: "error",
          showClose: true,
          message: res.data.message,
          center: true,
        });
      }
      console.log(res);
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消删除",
      });
    });
};
// 取消派单按钮
const cancelSendOrders = () => {
  sendOrderVisible.value = false;
};
const sendOrderSizeChange = (val) => {
  console.log(val);
  sendOrderPageSize.value = val;
  sendOrderTable();
};
// 派单按钮分页
const sendOrderCurrentChange = (val) => {
  console.log(val);
  sendOrderCurrentPage.value = val;
  sendOrderTable();
};

// 工单详情按钮  (工单详情-----------------------------------)
const orderInfo = async (row) => {
  orderInfoVisible.value = true;
  let data = { recordId: row.id };
  let res = await axios({
    method: "get",
    url: api.value + "/repairRecord/details",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  console.log(res, "详情数据");
  if (res.data.code == 200) {
    orderInfoData.value.recordNo = res.data.data.recordNo;
    orderInfoData.value.userName = res.data.data.userName;
    orderInfoData.value.userClass = res.data.data.userClass;
    orderInfoData.value.userPhone = res.data.data.userPhone;
    orderInfoData.value.description = res.data.data.description;
    orderInfoData.value.address = res.data.data.address;
    orderInfoData.value.areaName = res.data.data.areaName;
    orderInfoData.value.articleName = res.data.data.articleName;
    orderInfoData.value.voice = res.data.data.voice;
    orderInfoData.value.voiceLength = res.data.data.voiceLength;
    orderInfoData.value.reportTime = res.data.data.reportTime;
    orderInfoData.value.totalTime = res.data.data.totalTime;
    orderInfoData.value.time = res.data.data.time;
    orderInfoData.value.tracks = res.data.data.tracks;
    orderInfoData.value.price = res.data.data.price;
    orderInfoData.value.payTime = res.data.data.payTime;
    consumables.value = res.data.data.consumables;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
// 取消工单详情按钮
const cancelOrderInfo = () => {
  audio.value.load();
  if (orderInfoData.value.tracks) {
    orderInfoData.value.tracks.forEach((item) => {
      console.log(item.id);
      let audioId = document.getElementById(`audio${item.id}`);
      if (item.voice) {
        console.log(item.id);
        audioId.load();
      }
    });
  }
  orderInfoVisible.value = false;
};
// 工单详情 点击音频
const bofang = () => {
  orderInfoData.value.tracks.forEach((item) => {
    // console.log(item.id);
    let audioId = document.getElementById(`audio${item.id}`);
    if (item.voice) {
      console.log("详情录音重置");
      audioId.load();
    }
  });
  // console.log(audio.value.duration, "音频总时长");

  if (audio.value.paused == true) {
    audio.value.play();
    console.log("详情录音播放");
  } else {
    audio.value.pause();
  }
};
// 步骤条中的播放
const audioPlay = (i) => {
  audio.value.load();
  console.log("详情录音重置");

  orderInfoData.value.tracks.forEach((item) => {
    let audioId = document.getElementById(`audio${item.id}`);
    if (item.voice) {
      console.log("步骤条录音重置");
      audioId.load();
    }
  });
  let audioId = document.getElementById(`audio${i.id}`);

  if (audioId.paused == true) {
    audioId.play();
    console.log("步骤条录音播放");
  } else {
    audioId.pause();
  }
};
// 点击工单步骤中的图片查看
const lookImg = (item) => {
  bgImg.value = true;
  bgImgurl.value = item;
};

// 延时弹窗 (延时-----------------------------------)
const delayed = (row) => {
  delayedVisible.value = true;
  console.log(row);
  delayedData.value.id = row.id;
};
// 延时关闭功能
const cancelDelayed = () => {
  delayedVisible.value = false;
  delayedData.value.time1 = "";
  delayedData.value.time2 = "";
};
// 确定延时
const delayedYes = async () => {
  let data = {
    recordId: delayedData.value.id,
    receiving: delayedData.value.time1,
    maintain: delayedData.value.time2,
  };
  let res = await axios({
    method: "post",
    url: api.value + "/repairRecord/delayed",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    data: data,
  });
  console.log(res, "延时");
  if (res.data.code == 200) {
    delayedVisible.value = false;
    delayedData.value.time1 = "";
    delayedData.value.time2 = "";
    getList();
    ElMessage({
      type: "success",
      showClose: true,
      message: res.data.message,
      center: true,
    });
    addDialogVisible.value = false;
    ruleFormRef.value.resetFields();
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};

// 回复弹窗  （回复-------------------------------）
const reply = (row) => {
  replyVisible.value = true;
  replycontent.value.id = row.id;
};
// 关闭回复弹窗
const cancelReply = () => {
  replyVisible.value = false;
  replycontent.value.reply = "";
};
// 确定回复
const replycontentYes = async () => {
  let data = {
    recordId: replycontent.value.id,
    content: replycontent.value.reply,
  };
  let res = await axios({
    method: "post",
    url: api.value + "/repairRecord/revert",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    data: data,
  });
  console.log(res, "延时");
  if (res.data.code == 200) {
    replyVisible.value = false;
    replycontent.value.reply = "";
    getList();
    ElMessage({
      type: "success",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};

// 协作审核 (协作审核--------------------------------------)
// 协作审核中协作对象多选
const cooperation = async (row) => {
  console.log(row, "协作审核数据row");
  cooperationVisible.value = true;
  cooperationData.value.cooperationValue = [];
  let data = { recordId: row.id };
  let res = await axios({
    method: "get",
    url: api.value + "/repairRecord/cooperationDetail",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  console.log(res, "协作审核数据");

  let datas = {
    // currentPage: 1,
    // pageCount: 10,
    schoolId: row.schoolId,
    userId: row.id,
    recordId: row.id,
  };
  let ress = await axios({
    method: "get",
    url: api.value + "/repairUser/queryPageCollaborator",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: datas,
  });
  console.log(ress, "协作对象下拉框数据");

  if (res.data.code == 200) {
    cooperationData.value.collaboratorDatas = res.data.data.collaboratorDatas;
    cooperationData.value.id = res.data.data.id;
    // cooperationData.value.cooperationValue = res.data.data.cooperationValue;
    cooperationData.value.cooperationValue = [];
    res.data.data.collaboratorDatas.forEach((item) => {
      cooperationData.value.cooperationValue.push(item.id.toString());
    });
    cooperationData.value.remark = res.data.data.remark;
    cooperationData.value.userName = res.data.data.userName;
    cooperationData.value.voice = res.data.data.voice;
    cooperationData.value.voiceLength = res.data.data.voiceLength;

    let cooperationName = ress.data.data.list;
    options.value = Array.from({ length: cooperationName.length }).map(
      (_, idx) => {
        return {
          value: `${cooperationName[idx].id}`,
          label: `${cooperationName[idx].name}`,
        };
      }
    );
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
// 选择协作对象发生变化
const cooperationSel = (val) => {
  console.log(val);
  cooperationData.value.cooperationValue = val;
};
// 关闭协作审核弹窗
const cancelCooperation = () => {
  cooperationAudio.value.load();

  cooperationVisible.value = false;
};
// 播放音频
const cooperationAudioPlay = () => {
  if (cooperationAudio.value.paused == true) {
    cooperationAudio.value.play();
  } else {
    cooperationAudio.value.pause();
    // clearInterval(timer);
    // timer = null;
  }
};
// 确定协作审核
const cooperationYes = async (formEl, flag) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      console.log(flag);

      let data = {
        id: cooperationData.value.id,
        collaborator: cooperationData.value.cooperationValue,
        approverStatu: flag,
        remark: cooperationData.value.remark,
      };
      let res = await axios({
        method: "post",
        url: api.value + "/repairRecord/cooperationOrders",
        headers: {
          token: sessionStorage.getItem("token"),
          user_head: sessionStorage.getItem("userhead"),
        },
        data: data,
      });
      console.log(res, "确定协作审核");
      if (res.data.code == 200) {
        cooperationAudio.value.load();
        cooperationVisible.value = false;
        searchBtn();
        ElMessage({
          type: "success",
          showClose: true,
          message: res.data.message,
          center: true,
        });
      } else {
        cooperationAudio.value.load();
        ElMessage({
          type: "error",
          showClose: true,
          message: res.data.message,
          center: true,
        });
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};

// 转单审核弹窗  (转单审核-----------------------------------)
const transOrder = async (row) => {
  console.log(row);

  transOrderVisible.value = true;
  let data = { recordId: row.id };
  let res = await axios({
    method: "get",
    url: api.value + "/repairRecord/transferDetail",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  console.log(res, "转单审核数据");
  if (res.data.code == 200) {
    transOrderData.value.id = res.data.data.id;
    transOrderData.value.userName = res.data.data.userName;
    transOrderData.value.voice = res.data.data.voice;
    transOrderData.value.remark = res.data.data.remark;
    transOrderData.value.voiceLength = res.data.data.voiceLength;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
  // 下拉框人员数据
  let datas = { recordId: row.id };
  let ress = await axios({
    method: "get",
    url: api.value + "/repairUser/queryPageOfflineUsers",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: datas,
  });
  console.log(ress, "下拉框数据");
  if (ress.data.code == 200) {
    transOrderObj.list = ress.data.data.list;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: ress.data.message,
      center: true,
    });
  }
};

// 关闭转单审核
const cancelTransOrder = () => {
  transOrderVisible.value = false;
  ruleFormTransOrder.value.resetFields();
  transOrderAudio.value.load();
};
// 播放音频
const transOrderAudioPlay = () => {
  if (transOrderAudio.value.paused == true) {
    transOrderAudio.value.play();
  } else {
    transOrderAudio.value.pause();
    // clearInterval(timer);
    // timer = null;
  }
};
// 确定转单审核
const transOrderYes = async (formEl, flag) => {
  if (flag == 1) {
    if (!formEl) return;
    await formEl.validate(async (valid, fields) => {
      if (valid) {
        let data = {
          id: transOrderData.value.id,
          userId: transOrderData.value.userId,
          approverStatu: flag,
          remark: transOrderData.value.remark,
        };
        let res = await axios({
          method: "post",
          url: api.value + "/repairRecord/transfer",
          headers: {
            token: sessionStorage.getItem("token"),
            user_head: sessionStorage.getItem("userhead"),
          },
          data: data,
        });
        if (res.data.code == 200) {
          transOrderAudio.value.load();
          transOrderVisible.value = false;
          searchBtn();
          ElMessage({
            type: "success",
            showClose: true,
            message: res.data.message,
            center: true,
          });
        } else {
          transOrderAudio.value.load();
          ElMessage({
            type: "error",
            showClose: true,
            message: res.data.message,
            center: true,
          });
        }
      } else {
        console.log("error submit!", fields);
      }
    });
  } else {
    refusetransOrderVisible.value = true;
  }
};
// 确定拒绝
const refusetransOrderYes = async (formEl) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      console.log("确定拒绝");
      let data = {
        id: transOrderData.value.id,
        // userId: transOrderData.value.userId,
        approverStatu: 0,
        // remark: transOrderData.value.remark,
        refuseRemark: refusetransOrderData.remark,
      };
      let res = await axios({
        method: "post",
        url: api.value + "/repairRecord/transfer",
        headers: {
          token: sessionStorage.getItem("token"),
          user_head: sessionStorage.getItem("userhead"),
        },
        data: data,
      });
      console.log(res, "确定转单审核");
      if (res.data.code == 200) {
        transOrderAudio.value.load();
        transOrderVisible.value = false;
        refusetransOrderVisible.value = false;
        searchBtn();
        ElMessage({
          type: "success",
          showClose: true,
          message: res.data.message,
          center: true,
        });
      } else {
        transOrderAudio.value.load();
        ElMessage({
          type: "error",
          showClose: true,
          message: res.data.message,
          center: true,
        });
      }
    }
  });
};
// 取消拒绝
const cancelRefusetransOrder = () => {
  console.log("取消拒绝");
  refusetransOrderVisible.value = false;
  refusetransOrderData.remark = "";
  refusetransOrder.value.resetFields();
};

// 转线下审核（------------------------------------------------）
const offline = async (row) => {
  // console.log(row);
  offlineVisible.value = true;
  let data = {
    recordId: row.id,
  };
  let res = await axios({
    method: "get",
    url: api.value + "/repairRecord/offlineDetail",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  console.log(res, "转线下审核详情数据");
  if (res.data.code == 200) {
    offlineData.id = res.data.data.id;
    offlineData.userName = res.data.data.userName;
    offlineData.remark = res.data.data.remark;
    offlineData.voice = res.data.data.voice;
    offlineData.voiceLength = res.data.data.voiceLength;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
  // 下拉框人员数据
  let datas = { recordId: row.id };
  let ress = await axios({
    method: "get",
    url: api.value + "/repairUser/queryPageOfflineUsers",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: datas,
  });
  console.log(ress, "线下师傅下拉框数据");
  if (ress.data.code == 200) {
    offlineObj.list = ress.data.data.list;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: ress.data.message,
      center: true,
    });
  }
};
// 播放音频
const offlineAudioPlay = () => {
  if (offlineAudio.value.paused == true) {
    offlineAudio.value.play();
  } else {
    offlineAudio.value.pause();
    // clearInterval(timer);
    // timer = null;
  }
};
// 转线下操作（1同意，0拒绝）
const offlineYes = async (formEl, flag) => {
  // 同意
  if (flag == 1) {
    if (!formEl) return;
    await formEl.validate(async (valid, fields) => {
      if (valid) {
        let data = {
          id: offlineData.id,
          userId: offlineData.userId,
          approverStatu: 1,
          remark: offlineData.remark,
        };
        console.log(data);

        let res = await axios({
          method: "post",
          url: api.value + "/repairRecord/offline",
          headers: {
            token: sessionStorage.getItem("token"),
            user_head: sessionStorage.getItem("userhead"),
          },
          data: data,
        });
        console.log(res, "确定转单审核");
        if (res.data.code == 200) {
          offlineAudio.value.load();
          offlineVisible.value = false;
          searchBtn();
          ElMessage({
            type: "success",
            showClose: true,
            message: res.data.message,
            center: true,
          });
        } else {
          offlineAudio.value.load();
          ElMessage({
            type: "error",
            showClose: true,
            message: res.data.message,
            center: true,
          });
        }
      }
    });
  }
  // 拒绝
  else {
    refuseOfflineVisible.value = true;
    // console.log("确定拒绝", flag);
  }
};
// 关闭转线下审核
const cancelOffline = () => {
  offlineVisible.value = false;
  ruleFormOffline.value.resetFields();
  offlineAudio.value.load();
};
// 转线下审核拒绝 确认留言
const refuseOfflineYes = async (formEl) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      let data = {
        id: offlineData.id,
        approverStatu: 0,
        refuseRemark: refuseOfflineData.remark,
      };
      console.log(data, "确定拒绝转线下");

      let res = await axios({
        method: "post",
        url: api.value + "/repairRecord/offline",
        headers: {
          token: sessionStorage.getItem("token"),
          user_head: sessionStorage.getItem("userhead"),
        },
        data: data,
      });
      console.log(res, "转线下审核");
      if (res.data.code == 200) {
        offlineAudio.value.load();
        refuseOfflineVisible.value = false;
        offlineVisible.value = false;
        searchBtn();
        ElMessage({
          type: "success",
          showClose: true,
          message: res.data.message,
          center: true,
        });
      } else {
        offlineAudio.value.load();
        ElMessage({
          type: "error",
          showClose: true,
          message: res.data.message,
          center: true,
        });
      }
    }
  });
};
// 转线下审核拒绝 留言取消
const cancelRefuseOffline = () => {
  refuseOfflineVisible.value = false;
  refuseOfflineData.remark = "";
  refuseOffline.value.resetFields();
  console.log("取消拒绝转线下审核");
};

// 关单弹窗  （关单-----------------------------------------）
const customsOrder = (row) => {
  customsOrderVisible.value = true;
  customsOrderTitle.value='关单';
  console.log(row, "关单row");
  customsOrderData.value.recordId = row.id;
  customsOrderData.value.reason = "";
  customsOrderData.value.remark = "";
};
const cancelCustomsOrder = () => {
  customsOrderVisible.value = false;
};
// 确定关单
const customsOrderYes = async () => {
  if(customsOrderTitle.value=='关单'){
    let data = {
      recordId: customsOrderData.value.recordId,
      reason: customsOrderData.value.reason,
      remark: customsOrderData.value.remark,
    };
    if (customsOrderData.value.reason && customsOrderData.value.remark) {
      let res = await axios({
        method: "get",
        url: api.value + "/repairRecord/closePCOrder",
        headers: {
          token: sessionStorage.getItem("token"),
          user_head: sessionStorage.getItem("userhead"),
        },
        params: data,
      });
  
      if (res.data.code == 200) {
        searchBtn();
        customsOrderVisible.value = false;
        ElMessage({
          type: "success",
          showClose: true,
          message: res.data.message,
          center: true,
        });
      } else {
        ElMessage({
          type: "error",
          showClose: true,
          message: res.data.message,
          center: true,
        });
      }
    } else {
      ElMessage({
        type: "warning",
        showClose: true,
        message: "关单原因或关单备注不能为空",
        center: true,
      });
    }
  }else if(customsOrderTitle.value=='批量关单'){
    let data = {
      recordIds: customsOrderData.value.recordId.join(','),
      reason: customsOrderData.value.reason,
      remark: customsOrderData.value.remark,
    };
    if (customsOrderData.value.reason && customsOrderData.value.remark) {
      let res = await axios({
        method: "get",
        url: api.value + "/repairRecord/closePCOrderBeath",
        headers: {
          token: sessionStorage.getItem("token"),
          user_head: sessionStorage.getItem("userhead"),
        },
        params: data,
      });
  
      if (res.data.code == 200) {
        searchBtn();
        customsOrderVisible.value = false;
        ElMessage({
          type: "success",
          showClose: true,
          message: res.data.message,
          center: true,
        });
      } else {
        ElMessage({
          type: "error",
          showClose: true,
          message: res.data.message,
          center: true,
        });
      }
    } else {
      ElMessage({
        type: "warning",
        showClose: true,
        message: "关单原因或关单备注不能为空",
        center: true,
      });
    }
  }
};

// 改价弹窗  （改价-----------------------------------------）
const changePrice = async (row) => {
  changePriceVisible.value = true;
  changePriceData.value.schoolId = row.schoolId; // 复制校区id
  changePriceData.value.recordId = row.id; // 复制校区id

  let data = { recordId: row.id };
  let res = await axios({
    method: "get",
    url: api.value + "/repairRecord/alterPriceShow",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  console.log(res, "改价显示  数据");

  // 树形数据
  let datas = { schoolId: row.schoolId };
  let ress = await axios({
    method: "get",
    url: api.value + "/repairConsume/queryRepairConsumeTypeTree",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: datas,
  });
  console.log(ress, "数量种类列表  数据");
  // changePriceNum.list = ress.data.data;

  if (ress.data.code == 200) {
    ress.data.data.forEach((item) => {
      item.children.forEach((ii) => {
        ii.flag = false;
      });
    });
    res.data.data.forEach((items) => {
      // data.push([items.repairConsumables.articleId, items.repairConsumables.consumeId])// 显示的物品默认勾选[122,153]
      // selPriceList.value.push(item.repairConsumables) // 将选中的物品放到显示表格中
      ress.data.data.forEach((item) => {
        if (items.repairConsumables.articleId == item.id) {
          item.children.forEach((row) => {
            if (row.id == items.repairConsumables.consumeId) {
              console.log(row);

              row.flag = true;
              row.number = items.repairConsumables.number;
              row.price = items.repairConsumables.price;
            }
          });
          // let flag = item.children.findIndex(row => {
          //   return row.id == items.repairConsumables.consumeId
          // })
          // console.log(flag, "找到的数据");
          // console.log(items.repairConsumables, "找到的数据");
          // item.children[flag].flag = true
          // item.children[flag].number = items.repairConsumables.number;
          // item.children[flag].price = items.repairConsumables.price;
          // selPriceList.value.push(item.children[0])
        }
      });
      changePriceNum.list = ress.data.data;
    });

    let data = [];
    selPriceList.value = [];

    changePriceNum.list.forEach((ii) => {
      ii.children.forEach((i) => {
        if (i.flag) {
          selPriceList.value.push(i);
          data.push([i.parentId, i.id]); // 显示的物品默认勾选[122,153]
        }
      });
    });

    console.log(data, "选中的数据id");
    changePriceSelId.value = data;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
// 勾选改价中的数据
const selPrice = (val) => {
  console.log(val);

  // 将勾选置空
  changePriceNum.list.forEach((ii) => {
    ii.children.forEach((i) => {
      i.flag = false;
    });
  });

  // 给勾选的重新赋值 flag=true
  changePriceNum.list.forEach((item) => {
    val.forEach((i) => {
      if (item.id == i[0]) {
        if (item.children) {
          item.children.forEach((row) => {
            if (row.id == i[1]) {
              row.flag = true;
            }
          });
        }
      }
    });
  });

  // 将重新赋值的数据放到 选中的表格中
  selPriceList.value = [];

  changePriceNum.list.forEach((ii) => {
    ii.children.forEach((i) => {
      if (i.flag) {
        selPriceList.value.push(i);
      }
    });
  });
};
// 删除选中的改价数据
const delSelChangePrice = (row) => {
  console.log(row);
  row.flag = false;

  // 将树形勾选重新赋值
  let data = [];
  selPriceList.value = [];

  changePriceNum.list.forEach((ii) => {
    ii.children.forEach((i) => {
      if (i.flag) {
        selPriceList.value.push(i);
        data.push([i.parentId, i.id]); // 显示的物品默认勾选[122,153]
      }
    });
  });
  changePriceSelId.value = data;

  // 将搜索出来的数据勾选重新赋值
  if (keyWordSelPrice.value) {
    keyWordSelPriceData.value = [];
    selPriceList.value.forEach((item) => {
      let name = `${item.parentName}-${item.name}`;
      keyWordSelPriceData.value.push(name);
    });
  }
};
// 搜索关键字
const filterType = async () => {
  console.log(goodTypeKeyWord.value);
  keyWordSelPriceData.value = [];
  let data = {
    schoolId: changePriceData.value.schoolId,
    keyWord: goodTypeKeyWord.value,
  };
  let res = await axios({
    method: "get",
    url: api.value + "/repairConsume/queryRepairConsumesBykey",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  console.log(res, "关键字搜索数据");
  keyWordSelPrice.value = res.data.data;
  keyWordSelPrice.value.forEach((i) => {
    selPriceList.value.forEach((item) => {
      // console.log(item, "关键字");
      if (i.name == item.name) {
        let name = `${item.parentName}-${item.name}`;
        keyWordSelPriceData.value.push(name);
      }
    });
  });

  // keyWordSelPriceData.value
};
// 当搜索关键字时勾选时
const keyWordSelPriceChange = (val) => {
  console.log(val, "勾选");

  // 将搜索出来的全部数据flag=false
  changePriceNum.list.forEach((items) => {
    keyWordSelPrice.value.forEach((item) => {
      if (items.id == item.parentId) {
        items.children.forEach((i) => {
          if (i.id == item.id) {
            i.flag = false;
          }
        });
      }
    });
  });

  // 将勾选的数据重新赋值flag=true
  val.forEach((items) => {
    let data = items.split("-");
    console.log(data);
    changePriceNum.list.forEach((item) => {
      if (item.name == data[0]) {
        item.children.forEach((i) => {
          if (i.name == data[1]) {
            i.flag = true;
          }
        });
      }
    });
  });

  // 将勾选的表格数据和树形勾选的重新赋值
  let data = [];
  selPriceList.value = [];
  changePriceNum.list.forEach((ii) => {
    ii.children.forEach((i) => {
      if (i.flag) {
        selPriceList.value.push(i);
        data.push([i.parentId, i.id]); // 显示的物品默认勾选[122,153]
      }
    });
  });
  changePriceSelId.value = data;
};
// 将改价搜索框关键词清空时，将数据置空
const keyWordClean = () => {
  keyWordSelPrice.value = [];
};

// 获取数量种类列表
// const changePrices = async (row) => {
//   let data = { schoolId: row.schoolId };
//   let res = await axios({
//     method: "get",
//     url: api.value + "/repairConsume/queryRepairConsumeTypeTree",
//     headers: {
//       token: sessionStorage.getItem("token"),
//       user_head: sessionStorage.getItem("userhead"),
//     },
//     params: data,
//   });
//   console.log(res, "数量种类列表  数据");
//   changePriceNum.list = res.data.data;
// };

// 确定改价
const changePriceYes = lodash.debounce(async () => {
  let goodsArr = [];
  let ids = [];
  selPriceList.value.forEach((i) => {
    ids.push(i.id);
    let arr = {
      recordId: "",
      articleId: "",
      consumeId: "",
      consumeName: "",
      price: "",
      number: "",
      totalPrice: "",
    };
    arr.recordId = changePriceData.value.recordId;
    arr.articleId = i.parentId;
    arr.consumeId = i.id;
    arr.consumeName = i.name;
    arr.price = i.price;
    arr.number = i.number;
    arr.totalPrice = allPrice.value;
    goodsArr.push(arr);
  });
  let data = {
    recordId: changePriceData.value.recordId, //工单ID
    ids: ids, //携带耗材记录信息的所有id
    totalPrice: allPrice.value, //所有耗材记录总金额
    repairConsumablesList: goodsArr,
  };
  console.log(data, "改价参数");

  let res = await axios({
    method: "post",
    url: api.value + "/repairRecord/alterPrice",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    data: data,
  });
  console.log(res, "修改 改价数据");
  if (res.data.code == 200) {
    getList();
    cancelChangePrice();
    ElMessage({
      type: "success",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
}, 1500);
// 取消改价
const cancelChangePrice = () => {
  changePriceVisible.value = false;
  selPriceList.value = [];
  changePriceSelId.value = [];
};

// 打印（----------------------------------------------------------------------------）
const printOrder = async (row) => {
  printVisible.value = true;
  console.log(row);
  nowTime.value = dayjs().format("YYYY-MM-DD HH:ss:mm");
  let data = {
    recordId: row.id,
  };
  let res = await axios({
    method: "get",
    url: api.value + "/repairRecord/queryPrintData",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  console.log(res, "打印数据");
  if (res.data.code == 200) {
    printData.list = res.data.data;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
const cancelPrint = () => {
  printVisible.value = false;
};
// tab标签页操作
const addTab = (targetName) => {
  console.log(targetName);

  const newTabName = `${++tabIndex}`;
  editableTabs.value.push({
    articleName: "",
    consumeName: "",
    number: "",
    price: "",
    totalPrice: "",
    articleId: "",
    schoolId: "",
    id: "",
  });
  editableTabsValue.value = newTabName;
};
const removeTab = (targetName) => {
  console.log(targetName);

  // const tabs = editableTabs.value;
  // let activeName = editableTabsValue.value;
  // if (activeName === targetName) {
  //   tabs.forEach((tab, index) => {
  //     if (tab.name === targetName) {
  //       const nextTab = tabs[index + 1] || tabs[index - 1];
  //       if (nextTab) {
  //         activeName = nextTab.name;
  //       }
  //     }
  //   });
  // }

  // editableTabsValue.value = activeName;
  // editableTabs.value = tabs.filter((tab) => tab.name !== targetName);
};

// 搜索功能
const searchBtn = lodash.debounce(async () => {
  // getList();
  selSchool(searchInput.schoolId);
}, 300);
// 重置搜索
const searchRefresh = lodash.debounce(async () => {
  searchInput.name = "";
  searchInput.phone = "";
  searchInput.createTime = "";
  currentPage.value = 1;
  getList();
}, 300);

//删除按钮
const del = (row) => {
  ElMessageBox.confirm(`是否删除 ${row.user_name} 驾驶员?`, "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      let data = new FormData();
      data.set("id", row.id);
      // let res = await adminApi.adminLogin(data);
      let res = await axios({
        method: "post",
        url: api.value + "/carBook/userdel.action",
        headers: {
          token: sessionStorage.getItem("token"),
        },
        data: data,
      });
      if (res.data.code == 200) {
        if (tableData.list.length == 1 && currentPage.value != 1) {
          currentPage.value = currentPage.value - 1;
        }
        getList();
        ElMessage({
          type: "success",
          showClose: true,
          message: res.data.message,
          center: true,
        });
      } else {
        ElMessage({
          type: "error",
          showClose: true,
          message: res.data.message,
          center: true,
        });
      }
      console.log(res);
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消删除",
      });
    });
};
//导出功能
const importExcel = lodash.debounce(async () => {
  let data = {
    keyWord: searchInput.keyWord,
    state: dayIndex.value,
    schoolId: searchInput.schoolId,
  };
  if (searchInput.createTime) {
    data.startTime = searchInput.createTime[0];
    data.endTime = searchInput.createTime[1];
  }
  let res = await axios({
    method: "get",
    url: api.value + "/repairRecord/reportExport",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    responseType: "blob",
    params: data,
  });
  console.log(res, "导出工单数据");
  if (res.status == 200) {
    let name = `工单数据`;
    var content = res.data;
    var datas = new Blob([content]);
    var downloadUrl = window.URL.createObjectURL(datas);
    var anchor = document.createElement("a");
    anchor.href = downloadUrl;
    anchor.download = name + ".xlsx";
    anchor.click();
    window.URL.revokeObjectURL(datas);
    ElMessage({
      type: "success",
      showClose: true,
      message: "导出成功",
      center: true,
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: "导出失败",
      center: true,
    });
  }
}, 1000);

// 多选框功能
const handleSelectionChange = (val) => {
  console.log(val);
  selectData.list = val;
};
// 批量关单
const batchOperate = async () => {
  if (selectData.list.length) {
    customsOrderVisible.value = true;
    customsOrderTitle.value='批量关单';
    customsOrderData.value.reason = "";
    customsOrderData.value.remark = "";
    let recordIds=[]
    selectData.list.forEach(i=>{
      recordIds.push(i.id)
    })
    customsOrderData.value.recordId=recordIds
  }else{
    ElMessage({
      type: "warning",
      showClose: true,
      message:'至少勾选一条数据',
      center: true,
    });
  }
};

// 表格斑马纹颜色修改
const tableRowClassName = ({ row, rowIndex }) => {
  if (rowIndex % 2 === 0) {
    return "even";
  } else if (rowIndex % 2 !== 0) {
    return "odd";
  }
  return "";
};

const handleSizeChange = (val) => {
  console.log(val);
  pageSize.value = val;
  getList();
};
// 分页
const handleCurrentChange = (value) => {
  // console.log(value);
  currentPage.value = value;
  getList();
};

onBeforeMount(async () => {
  api.value = store.state.user.api;

  if (sessionStorage.getItem("schoolId") == "null") {
    searchInput.schoolId = 0;
    schoolId.value = 0;
  } else {
    searchInput.schoolId = Number(sessionStorage.getItem("schoolId"));
    schoolId.value = Number(sessionStorage.getItem("schoolId"));
  }
  selSchool(searchInput.schoolId);

  // 关单原因列表
  let res = await axios({
    method: "get",
    url: api.value + "/repairClose/queryRepairCloses",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
  });
  console.log(res, "关单原因列表");
  if (res.data.code == 200) {
    customsOrderList.value = res.data.data;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
    if (res.data.code == 570) {
      sessionStorage.removeItem("token");
      router.push({
        path: `/login`,
      });
    }
  }
});
</script>

<style scoped lang="scss">
.content-box {
  width: 97.5%;
  height: 89%;
  margin: 20px auto;
  background-color: #fff;
  color: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 3px 10px rgba(213, 228, 252, 1);

  .left {
    // width: calc(100wh - 40px);
    display: flex;
    align-items: center;
    height: 60px;
    margin: 0 30px;
    border-bottom: 1px solid #ccc;
    color: #000;
    font-size: 18px;
    font-weight: 600;

    .cameratxt {
      margin-right: 15px;
      // color: #4392f7;
      height: 60px;
      line-height: 60px;
    }
  }

  .middle {
    width: 96%;
    margin: 10px auto;
    padding-top: 10px;
    display: flex;
    flex-wrap: wrap;
    color: #000;
    align-items: center;
    justify-content: space-between;

    // border-bottom: 1px solid rgb(231, 231, 231);
    .filter {
      display: flex;

      align-items: center;

      .search {
        color: #fff;
      }

      .condition2 {
        margin-left: 30px;
      }
    }

    .gongneng {
      span {
        color: #fff;
      }
    }
  }

  .btn {
    margin: 10px 0;

    ul {
      list-style: none;
      display: flex;
      padding: 0 20px;
      margin: 0 0 0 15px;

      li {
        color: #000;
        // width: 80px;
        padding: 0 8px;
        height: 30px;
        border-radius: 8px;
        border: 1px solid #ccc;
        line-height: 30px;
        text-align: center;
        cursor: pointer;
        font-size: 14px;
        margin-right: 20px;
      }

      .li_active {
        // background-color: rgba(111, 182, 184, 1);
        border: 1px solid rgba(111, 182, 184, 1);
        color: rgba(111, 182, 184, 1);
      }
    }
  }

  .footer {
    width: 96%;
    height: 550px;
    margin: 10px auto 30px;

    .el-table--fit {
      height: 100%;

      :deep(.el-table__header-wrapper) {
        background-color: #000;
        font-size: 16px;

        .el-table__header {
          tr {
            color: #000;
          }
        }
      }

      :deep(.el-table__row) {
        height: 50px;
        font-size: 16px;
        color: rgba(77, 77, 77, 1);

        .operation {
          display: flex;
          font-size: 16px;
          justify-content: space-around;

          .btns {
            cursor: pointer;
            font-size: 14px;
            color: rgba(111, 182, 184, 1);
          }

          .btns:hover {
            color: red;
            font-size: 16px;
          }
        }
      }

      :deep(.el-table__row td) {
        padding: 0;
        border: 0;

        // 表格工单编号样式
        .orderNum {
          display: flex;
          align-items: center;
          justify-content: center;

          .xi {
            width: 18px;
            height: 18px;
            font-size: 12px;
            color: #fff;
            line-height: 18px;
            text-align: center;
            background-color: rgba(111, 182, 184, 1);
            margin-left: 8px;
          }

          .xie {
            width: 18px;
            height: 18px;
            font-size: 12px;
            color: #fff;
            line-height: 18px;
            text-align: center;
            background-color: red;
            margin-left: 8px;
          }
        }
      }

      .el-button--primary {
        margin-left: 5px;
      }

      :deep(.el-table__body .even) {
        background-color: #fff;
      }

      :deep(.el-table__body .odd) {
        background-color: rgba(240, 243, 247, 1);
      }

      // 表格操作样式
    }

    // 新建工单弹窗样式
    :deep(.addStaff) {
      //   height: 420px;
      border-radius: 11px;

      .el-dialog__header {
        border-radius: 11px 11px 0 0;
        background: rgba(237, 241, 245, 1);
        font-weight: 600;
        margin: 0;

        .el-dialog__headerbtn {
          outline: none;
        }
      }

      .el-dialog__body {
        padding: 30px 20px 10px 20px;

        // 添加工单中上传照片样式
        .el-form-item__content {
          .avatar-uploader .avatar {
            width: 128px;
            height: 128px;
            display: block;
          }

          .avatar-uploader .el-upload {
            width: 128px;
            height: 128px;
            background-color: #ccc;
            border: 1px dashed var(--el-border-color);
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: var(--el-transition-duration-fast);
          }

          .avatar-uploader .el-upload:hover {
            border-color: var(--el-color-primary);
          }

          .avatar-uploader-icon {
            width: 88px;
            height: 88px;
            text-align: center;
          }

          // 添加多张图片样式
          .el-upload-list {
            .el-upload-list__item {
              width: 128px;
              height: 128px;
            }
          }
        }

        .el-input {
          width: 230px;
        }

        .el-textarea__inner {
          width: 230px;
        }

        .options {
          .el-form-item__content {
            .queding {
              margin-left: 20px;
              color: #fff;
            }

            display: flex;
            flex-direction: row-reverse;
          }
        }
      }
    }

    // 查看图片弹窗
    :deep(.imgVisible) {
      .el-dialog__body {
        padding: 0;
        height: 640px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      img {
        height: 100%;
        padding: 0;
        margin: 0;
      }
    }

    // 派单样式
    :deep(.sendOrder) {
      //   height: 420px;
      border-radius: 11px;

      .el-dialog__header {
        border-radius: 11px 11px 0 0;
        background: rgba(237, 241, 245, 1);
        font-weight: 600;
        margin: 0;

        .el-dialog__headerbtn {
          outline: none;
        }
      }

      .el-dialog__body {
        padding: 30px 20px 10px 20px;

        .send_order {
          .table {
            margin: 20px 0;
          }
        }

        .options {
          display: flex;
          flex-direction: row-reverse;
          margin: 10px 0 25px 0;

          .queding {
            margin-left: 20px;
            color: #fff;
          }
        }
      }
    }

    // 详情样式
    :deep(.orderInfo) {
      height: 800px;
      overflow: hidden;
      border-radius: 11px;

      .el-dialog__header {
        border-radius: 11px 11px 0 0;
        background: rgba(237, 241, 245, 1);
        font-weight: 600;
        margin: 0;

        .el-dialog__headerbtn {
          outline: none;
        }
      }

      .el-dialog__body {
        height: 720px;
        overflow: auto;
        padding: 0px 20px 10px 20px;

        .order_info {
          .title {
            display: flex;
            align-items: center;
            margin: 25px 0 10px 0;

            img {
              width: 20px;
              height: 20px;
              margin-right: 10px;
            }

            span {
              color: #000;
              font-size: 18px;
              font-weight: 600;
            }
          }

          // 工单详情 排列模式样式
          .workNum {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
            font-size: 16px;

            .audio {
              width: 98px;
              height: 30px;
              border-radius: 42.41px;
              background: rgba(255, 255, 255, 1);
              box-shadow: 0px 0px 1.68px rgba(0, 0, 0, 0.25);
              display: flex;
              align-items: center;
              cursor: pointer;

              img {
                width: 18px;
                height: 18px;
                margin-left: 5px;
              }

              .audioNum {
                font-size: 16px;
              }
            }

            .titles {
              color: rgba(128, 128, 128, 1);
              margin-right: 8px;
              width: 80px;
              font-weight: 400;
            }

            span {
              color: #000;
              font-weight: 600;
              width: 640px;
            }
          }

          // 工单详情 步骤条样式
          .steps {
            .el-step {
              // margin: 15px 0;
              .el-step__main {
                display: flex;
                margin-bottom: 15px;

                span {
                  font-size: 16px;
                }

                .el-step__title {
                  display: inline;
                  padding: 0 15px 0 0;

                  span {
                    background-color: rgba(111, 182, 184, 1);
                    color: #fff;
                    padding: 1px 3px;
                    border-radius: 3px;
                  }
                }
              }

              .el-step__description {
                padding-right: 0;
                .content {
                  margin-top: 7px;
                }

                .middleContent {
                  width: 500px;
                  .overContent {
                    word-wrap: break-word;
                  }
                }

                .evaluateImg {
                  width: 500px;
                  margin: 10px 0;
                  display: flex;
                  flex-wrap: wrap;

                  img {
                    width: 80px;
                    // height: 40px;
                    margin: 5px 10px 0 0;
                  }
                }

                .audio {
                  width: 98px;
                  height: 30px;
                  border-radius: 42.41px;
                  background: rgba(255, 255, 255, 1);
                  box-shadow: 0px 0px 1.68px rgba(0, 0, 0, 0.25);
                  display: flex;
                  align-items: center;
                  cursor: pointer;

                  img {
                    width: 18px;
                    height: 18px;
                    margin-left: 5px;
                  }

                  .audioNum {
                    font-size: 16px;
                    color: #000;
                  }
                }
              }
            }
          }
        }
      }
    }

    // 延时弹窗样式
    :deep(.delayed) {
      //   height: 420px;
      border-radius: 11px;

      .el-dialog__header {
        border-radius: 11px 11px 0 0;
        background: rgba(237, 241, 245, 1);
        font-weight: 600;
        margin: 0;

        .el-dialog__headerbtn {
          outline: none;
        }
      }

      .el-dialog__body {
        padding: 0px 30px 10px 20px;

        .kaohe {
          margin: 25px 0;
        }

        .options {
          display: flex;
          flex-direction: row-reverse;
          margin: 100px 0 25px 0;

          .queding {
            margin-left: 20px;
            color: #fff;
          }
        }
      }
    }

    // 回复弹窗样式
    :deep(.reply) {
      //   height: 420px;
      border-radius: 11px;

      .el-dialog__header {
        border-radius: 11px 11px 0 0;
        background: rgba(237, 241, 245, 1);
        font-weight: 600;
        margin: 0;

        .el-dialog__headerbtn {
          outline: none;
        }
      }

      .el-dialog__body {
        padding: 0px 30px 10px 20px;

        .content {
          margin: 25px 0;
        }

        .options {
          display: flex;
          flex-direction: row-reverse;
          margin: 20px 0 25px 0;

          .queding {
            margin-left: 20px;
            color: #fff;
          }
        }
      }
    }

    // 协作审核弹窗样式
    :deep(.cooperation) {
      //   height: 420px;
      border-radius: 11px;

      .el-dialog__header {
        border-radius: 11px 11px 0 0;
        background: rgba(237, 241, 245, 1);
        font-weight: 600;
        margin: 0;

        .el-dialog__headerbtn {
          outline: none;
        }
      }

      .el-dialog__body {
        padding: 10px 30px 10px 30px;

        .block {
          display: flex;
          align-items: center;
          margin: 15px 0;
          color: #000;

          .name {
            margin-right: 8px;
          }
        }

        .audio {
          width: 98px;
          height: 30px;
          cursor: pointer;
          border-radius: 42.41px;
          background: rgba(255, 255, 255, 1);
          box-shadow: 0px 0px 1.68px rgba(0, 0, 0, 0.25);
          display: flex;
          align-items: center;

          img {
            width: 18px;
            height: 18px;
            margin-left: 5px;
          }

          .audioNum {
            font-size: 16px;
          }
        }

        .content {
          display: flex;
          flex-direction: column;
          color: #000;

          span {
            display: inline-block;
            margin: 0 0 10px 0;
          }

          .el-textarea {
            width: 400px;
          }
        }

        .options {
          display: flex;
          flex-direction: row-reverse;
          margin: 20px 20px 0 0;
          width: 100%;

          .queding {
            margin-left: 20px;
            color: #fff;
          }
        }
      }
    }

    // 转单审核弹窗样式
    :deep(.transOrder) {
      //   height: 420px;
      border-radius: 11px;

      .el-dialog__header {
        border-radius: 11px 11px 0 0;
        background: rgba(237, 241, 245, 1);
        font-weight: 600;
        margin: 0;

        .el-dialog__headerbtn {
          outline: none;
        }
      }

      .el-dialog__body {
        padding: 25px 20px 10px 20px;

        .el-form-item__label {
          color: #000;
        }

        .el-textarea {
          width: 400px;
        }

        .el-input {
          width: 400px;
        }

        .audio {
          width: 98px;
          height: 30px;
          cursor: pointer;
          border-radius: 42.41px;
          background: rgba(255, 255, 255, 1);
          box-shadow: 0px 0px 1.68px rgba(0, 0, 0, 0.25);
          display: flex;
          align-items: center;

          img {
            width: 18px;
            height: 18px;
            margin-left: 5px;
          }

          .audioNum {
            font-size: 16px;
          }
        }

        .options {
          display: flex;
          flex-direction: row-reverse;
          margin: 20px 20px 0 0;
          width: 100%;

          .queding {
            margin-left: 20px;
            color: #fff;
          }
        }
      }
    }

    // 关单弹窗样式
    :deep(.customsOrder) {
      //   height: 420px;
      border-radius: 11px;

      .el-dialog__header {
        border-radius: 11px 11px 0 0;
        background: rgba(237, 241, 245, 1);
        font-weight: 600;
        margin: 0;

        .el-dialog__headerbtn {
          outline: none;
        }
      }

      .el-dialog__body {
        padding: 0px 30px 10px 30px;

        .content {
          color: #000;
          margin: 20px 0 0 0;

          .name {
            display: inline-block;
            margin-bottom: 20px;
          }

          .el-input {
            width: 400px;
            margin-left: 10px;
          }

          .el-textarea {
            width: 430px;
            margin-left: 10px;
          }
        }

        .options {
          display: flex;
          flex-direction: row-reverse;
          margin: 30px 0 10px 0;

          .queding {
            margin-left: 20px;
            color: #fff;
          }
        }
      }
    }

    // // 改价弹窗样式
    // :deep(.changePrice) {
    //   //   height: 420px;
    //   border-radius: 11px;

    //   .el-dialog__header {
    //     border-radius: 11px 11px 0 0;
    //     background: rgba(237, 241, 245, 1);
    //     font-weight: 600;
    //     margin: 0;

    //     .el-dialog__headerbtn {
    //       outline: none;
    //     }
    //   }

    //   .el-dialog__body {
    //     padding: 0;
    //     max-height: 700px;
    //     overflow: auto;

    //     ul {
    //       list-style: none;
    //       display: flex;
    //       flex-wrap: wrap;
    //       margin: 0 0 14px 0;
    //       padding: 0;

    //       li {
    //         margin: 0 4px;
    //         padding: 2px 4px;
    //         border-radius: 3px;
    //         // border: 1px solid #ccc;
    //         background-color: #ccc;
    //         color: #fff;
    //         cursor: pointer;
    //         box-sizing: border-box;
    //         display: flex;
    //         align-items: center;

    //         img {
    //           width: 18px;
    //           height: 18px;
    //           margin-left: 5px;
    //         }
    //       }

    //       .li_active {
    //         background-color: rgba(111, 182, 184, 1);
    //         // border: 1px solid rgba(111, 182, 184, 1);
    //       }
    //     }

    //     .goodsCard {
    //       border: 1px solid #ccc;
    //       margin: 20px 20px;
    //       padding: 0 10px;

    //       .goodsTitle {
    //         display: flex;
    //         align-items: center;
    //         justify-content: space-between;

    //         h2 {
    //           margin: 10px;
    //         }

    //         span {
    //           color: #fff;
    //         }
    //       }

    //       .label {
    //         display: flex;
    //         margin: 10px;

    //         .type {
    //           width: 75px;
    //         }
    //       }

    //       .label:last-child {
    //         display: flex;
    //         margin-bottom: 20px;

    //         .type {
    //           width: 75px;
    //         }
    //       }
    //     }

    //     .addGoods {
    //       width: 94%;
    //       margin: 0 auto;
    //     }

    //     .el-form-item__label {
    //       color: #000;
    //     }

    //     .el-textarea {
    //       width: 400px;
    //     }

    //     .el-input {
    //       width: 400px;
    //     }

    //     .priceSum {
    //       width: 94%;
    //       display: flex;
    //       justify-content: center;
    //       margin: 20px auto;

    //       .totalPrice {
    //         width: 200px;
    //         font-size: 18px;
    //         color: #000;
    //       }
    //     }

    //     .options {
    //       display: flex;
    //       flex-direction: row-reverse;
    //       width: 100%;

    //       .queding {
    //         margin-left: 20px;
    //         color: #fff;
    //       }
    //     }
    //   }
    // }
    // 改价弹窗样式
    :deep(.changePrice) {
      //   height: 420px;
      border-radius: 11px;

      .el-dialog__header {
        border-radius: 11px 11px 0 0;
        background: rgba(237, 241, 245, 1);
        font-weight: 600;
        margin: 0;

        .el-dialog__headerbtn {
          outline: none;
        }
      }

      .el-dialog__body {
        padding: 0;
        max-height: 700px;
        overflow: auto;

        .goodsCard {
          display: flex;
          margin: 20px;

          // 树形选择
          .el-cascader-panel {
            height: 396px;

            .el-scrollbar {
              // border: 1px solid red;

              .el-scrollbar__wrap {
                height: 400px;
              }
            }
          }

          // 单数据多选
          .checkbox-group {
            height: 376px;
            border: 1px solid #dcdfe6;
            padding: 10px 20px;
            overflow: auto;

            .el-checkbox-group {
              display: flex;
              flex-direction: column;
            }
          }

          .types {
            display: flex;
          }

          .el-table--fit {
            height: 430px;

            .el-table__header-wrapper {
              background-color: #000;
              font-size: 14px;
              height: 34px;
              border: 1px solid #dcdfe6;
              border-bottom: none;
              box-sizing: border-box;

              .el-table__header {
                tr {
                  color: #000;
                }
              }
            }

            .el-table__body-wrapper {
              border: 1px solid #dcdfe6;
              box-sizing: border-box;
            }

            .el-table__row {
              height: 34px;
              font-size: 14px;
              color: rgba(77, 77, 77, 1);

              // 表格中修改价格和数量
              .el-input__wrapper {
                background-color: transparent;
                box-shadow: none;

                .el-input__inner {
                  text-align: center;
                }
              }

              .el-input__wrapper.is-focus {
                box-shadow: 0 0 0 1px #409eff inset;
              }
            }

            .el-table__row td {
              padding: 0;
              border: 0;

              .del {
                color: rgba(64, 158, 255, 1);
                cursor: pointer;
              }

              .del:hover {
                color: red;
              }
            }

            .el-table__empty-block {
              display: none;
            }
          }
        }

        .priceSum {
          width: 94%;
          display: flex;
          justify-content: center;
          margin: 20px auto;

          .totalPrice {
            width: 200px;
            font-size: 18px;
            color: #000;
          }
        }

        .options {
          display: flex;
          flex-direction: row-reverse;
          width: 100%;

          .queding {
            margin-left: 20px;
            color: #fff;
          }
        }
      }
    }

    // 打印
    :deep(.printDialog) {
      border-radius: 11px;

      .el-dialog__header {
        border-radius: 11px 11px 0 0;
        background: rgba(237, 241, 245, 1);
        font-weight: 600;
        margin: 0;

        .el-dialog__headerbtn {
          outline: none;
        }
      }

      .el-dialog__body {
        padding: 0px 30px 10px 30px;
        height: 700px;
        overflow: auto;

        .content {
          color: #000;
          margin: 5px 0 30px 0;
          font-size: 18px;

          .title {
            margin: 15px 0;
            display: flex;
            justify-content: space-between;
          }

          .name {
            margin: 20px 0 0 0;

            span {
              display: inline-block;
            }

            span:nth-child(1) {
              width: 300px;
              text-align: right;
            }

            span:nth-child(2) {
              width: 150px;
              padding-left: 5px;
            }

            span:nth-child(3) {
              width: 100px;
              text-align: right;
            }

            span:nth-child(4) {
              padding-left: 5px;
            }
          }

          .date {
            margin: 10px 0 60px 0;
          }

          h3 {
            margin: 20px 0 30px 0;
            font-size: 26px;
            text-align: center;
          }

          .printTable {
            table {
              width: 700px;
              border-collapse: collapse; //消除单元格间距

              tr {
                td {
                  padding: 8px 15px;
                }

                .tableTitle {
                  font-size: 18px;
                  font-weight: 800;
                  text-align: center;
                  background-color: rgba(241, 241, 241, 1);
                }

                .item {
                  width: 100px;
                  background-color: rgba(241, 241, 241, 1);
                }

                .textarea {
                  // text-indent: 2em;
                  // padding: 20px;
                  // line-height: 2;

                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  width: 530px;
                }
              }
            }
          }
        }

        .options {
          display: flex;
          flex-direction: row-reverse;
          margin: 30px 0 10px 0;

          .queding {
            margin-left: 20px;
            color: #fff;
          }
        }
      }
    }
  }

  .el-pagination {
    // width: 1600px;
    width: 96%;
    margin: 0 auto 18px;
    justify-content: flex-end;

    :deep(.el-pagination__total) {
      color: #000;
    }

    :deep(.el-pagination__goto) {
      color: #000;
    }

    :deep(.el-pagination__classifier) {
      color: #000;
    }

    :deep(.el-input__wrapper) {
      border: 1px solid rgba(0, 0, 0, 1);
      border-radius: 5px;
      box-shadow: none;
    }

    :deep(.el-pager li) {
      margin: 0 5px;
      border: 1px solid rgba(0, 0, 0, 1);
      border-radius: 5px;
      background-color: transparent;
    }

    :deep(.el-pager li.is-active) {
      background-color: rgba(111, 182, 184, 1);
    }

    :deep(.btn-prev) {
      margin-right: 5px;
      border: 1px solid rgba(0, 0, 0, 1);
      border-radius: 5px;
      background-color: transparent;
    }

    :deep(.btn-next) {
      margin-left: 5px;
      border: 1px solid rgba(0, 0, 0, 1);
      border-radius: 5px;
      background-color: transparent;
    }
  }

  .bgImg {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99999999;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;

    img {
      height: 100%;
    }
  }
}

.el-input {
  width: 192px;
}
</style>