马宇豪
2025-03-04 1b9fea7d4af68d8f933b2dc42bf6084b9646f64c
src/views/newSpecialWorkSystem/workTicket/sqjl/index.vue
@@ -1,1165 +1,1243 @@
<template>
    <div class="home-container">
<!--        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">-->
<!--            <el-tab-pane label="申请中" name="1">-->
                <div style="height: 100%">
                    <el-row class="homeCard">
                     <div class="basic-line" style="display:flex;white-space:nowrap;line-height: 40px">
                        <span>时间筛选:</span>
                        <el-date-picker v-model="timeRange" value-format="YYYY-MM-DD" type="daterange" @change="giveTime()" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" />
                      </div>
                      <div class="basic-line" style="display:flex;white-space:nowrap;line-height: 40px">
                        <span>负责人:</span>
                        <el-input v-model.trim="searPara.headUserName" placeholder="负责人"/>
                      </div>
                      <div class="basic-line">
                        <span>事业部:</span>
                        <el-select v-model="searPara.secondDepId">
                          <el-option
                              v-for="item in dep4List"
                              :key="item.id"
                              :label="item.name"
                              :value="item.id"
                          />
                        </el-select>
                      </div>
                      <div class="basic-line">
                        <span>作业类型:</span>
                        <el-select v-model="searPara.workType">
                          <el-option
                              v-for="item in workType"
                              :key="item.id"
                              :label="item.name"
                              :value="item.id"
                          />
                        </el-select>
                      </div>
                      <div class="basic-line" style="display:flex;white-space:nowrap;line-height: 40px">
                        <span>作业票编号:</span>
                        <el-input
                            v-model.trim="searPara.workPermitNo"
                            placeholder="请输入作业票编号"
                        />
                      </div>
                      <div style="margin-left: 20px">
                        <el-button type="primary" @click="searchRecord">查询</el-button>
                        <el-button plain @click="clearSearch">重置</el-button>
                      </div>
                    </el-row>
                    <div class="homeCard">
                        <div class="main-card">
                            <el-row class="cardTop">
                                <el-col :span="12" class="mainCardBtn">
                                    <el-button type="primary" :icon="Plus" size="default" @click="toApply()">新增申报</el-button>
                                    <!--                           <el-button type="danger" :icon="Delete" size="default">删除</el-button>-->
                                    <!--                           <el-button type="success" size="default">设置分类</el-button>-->
                                </el-col>
                                <el-button type="primary" :icon="Refresh" size="default" @click="reLoadData()" />
                            </el-row>
                            <el-table ref="multipleTableRef" :data="applyData" style="width: 100%" height="calc(100% - 100px)" :header-cell-style="{ background: '#fafafa' }">
                              <el-table-column property="workPermitNo" label="作业编号" align="center">
                                <template #default="scope">
                                  {{scope.row.workPermitNo?scope.row.workPermitNo:'—'}}
                                </template>
                              </el-table-column>
                                <el-table-column property="seDepName" label="事业部" align="center"/>
                                <el-table-column property="applyDepName" label="作业所在车间" align="center"/>
                                <el-table-column property="workContent" label="作业内容" align="center"/>
                                <el-table-column property="workTypeDesc" label="作业类型" align="center"/>
                                <el-table-column label="作业单位" align="center">
                                  <template #default="scope">
                                    <span v-if="scope.row.workDepList && scope.row.workDepList.length>0">{{scope.row.workDepList.map(i=>i.workDepName).join(',')}}</span>
                                    <span v-else>{{scope.row.workDepName }}</span>
                                  </template>
                                </el-table-column>
                                <el-table-column property="headList" label="负责人及电话" align="center">
                                  <template #default="scope">
                                    {{scope.row.headList.map(i=>{return i.userName + '(' + i.phone+ ')' }).join(',')}}
                                  </template>
                                </el-table-column>
                                <el-table-column property="operatorList" label="作业人及电话" align="center">
                                  <template #default="scope">
                                    {{scope.row.operatorList.map(i=>{return i.userName + '(' + i.phone+ ')' }).join(',')}}
                                  </template>
                                </el-table-column>
                                <el-table-column property="guardianList" label="监护人及电话" align="center">
                                  <template #default="scope">
                                    {{scope.row.guardianList.map(i=>{return i.userName + '(' + i.phone+ ')' }).join(',')}}
                                  </template>
                                </el-table-column>
                                <el-table-column property="expStartTime" label="作业开始时间" align="center"/>
                                <el-table-column property="expEndTime" label="预计完成时间" align="center"/>
                                <el-table-column label="执法仪编号" align="center">
                                  <template #default="scope">
                                    {{scope.row.workApprovalDeviceList.map(i=>i.deviceNo).join(',')}}
                                  </template>
                                </el-table-column>
                                <el-table-column label="作业人数" align="center">
                                  <template #default="scope">
                                    {{scope.row.operatorList.length}}
                                  </template>
                                </el-table-column>
                                <el-table-column label="监护人数" align="center">
                                  <template #default="scope">
                                    {{scope.row.guardianList.length}}
                                  </template>
                                </el-table-column>
                                <el-table-column label="作业状态" align="center">
                                    <template #default="scope">
                                        <el-tag>{{ statusList.find(i=>i.value === scope.row.status)?.label }}</el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column fixed="right" label="操作" align="center" width="300">
                                    <template #default="scope">
<!--                                        <el-button link type="danger" size="small" :icon="Delete" @click="deleteRecordBtn(scope.row)">作废</el-button>-->
                                        <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button>
                                        <el-button v-if="(scope.row.working?.workAllStatus == 3 || scope.row.working?.workAllStatus == 4 || scope.row.working?.workAllStatus == 5)&&!scope.row.renewalWorkApplyId" link type="primary" size="small" :icon="Edit" @click="continueRecord(scope.row)">一键续票</el-button>
<!--                                        <el-button link type="success" size="small" :icon="Finished">修改</el-button>-->
<!--                                        <el-button link type="success" size="small" :icon="Download">正式办票</el-button>-->
                                        <el-button link type="primary" size="small" :icon="Download" @click="downLoadRecord(scope.row)">作业票预览</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <div class="pageBtn">
                                <el-pagination v-model:currentPage="pageIndex1" v-model:page-size="pageSize1" :page-sizes="[10, 15]" small="false" background layout="total, sizes, prev, pager, next, jumper" :total="totalSize1" @size-change="handleSizeChange1" @current-change="handleCurrentChange1" />
                            </div>
                        </div>
                    </div>
                </div>
                <el-dialog v-model="dialogDetails" title="作业申请详情" center>
<!--                    <fire v-if="dialogType == 1" :details = details></fire>-->
<!--                    <space v-else-if="dialogType == 2" :details = details></space>-->
<!--                    <hoist v-else-if="dialogType == 3" :details = details></hoist>-->
<!--                    <ground v-else-if="dialogType == 4" :details = details></ground>-->
<!--                    <broken v-else-if="dialogType == 5" :details = details></broken>-->
<!--                    <height v-else-if="dialogType == 6" :details = details></height>-->
<!--                    <power v-else-if="dialogType == 7" :details = details></power>-->
<!--                    <plate v-else :details = details></plate>-->
                  <detail-log :type=dialogType :statusList=statusList :details = details></detail-log>
                    <template #footer>
  <div class="home-container">
    <!--        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">-->
    <!--            <el-tab-pane label="申请中" name="1">-->
    <div style="height: 100%">
      <el-row class="homeCard">
        <div class="basic-line" style="display:flex;white-space:nowrap;line-height: 40px">
          <span>时间筛选:</span>
          <el-date-picker v-model="timeRange" value-format="YYYY-MM-DD" type="daterange" @change="giveTime()"
                          range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"/>
        </div>
        <div class="basic-line" style="display:flex;white-space:nowrap;line-height: 40px">
          <span>负责人:</span>
          <el-input v-model.trim="searPara.headUserName" placeholder="负责人"/>
        </div>
        <div class="basic-line">
          <span>部门:</span>
          <!--                        <el-select v-model="searPara.secondDepId">-->
          <!--                          <el-option-->
          <!--                              v-for="item in dep4List"-->
          <!--                              :key="item.id"-->
          <!--                              :label="item.name"-->
          <!--                              :value="item.id"-->
          <!--                          />-->
          <!--                        </el-select>-->
          <el-cascader :teleported="false" v-model="searPara.secondDepId" :options="departmentList" :props="casProps"
                       :show-all-levels="false"/>
        </div>
        <div class="basic-line">
          <span>作业类型:</span>
          <el-select v-model="searPara.workType">
            <el-option
                v-for="item in workType"
                :key="item.id"
                :label="item.name"
                :value="item.id"
            />
          </el-select>
        </div>
        <div class="basic-line" style="display:flex;white-space:nowrap;line-height: 40px">
          <span>作业票编号:</span>
          <el-input
              v-model.trim="searPara.workPermitNo"
              placeholder="请输入作业票编号"
          />
        </div>
        <div style="margin-left: 20px">
          <el-button type="primary" @click="searchRecord">查询</el-button>
          <el-button plain @click="clearSearch">重置</el-button>
        </div>
      </el-row>
      <div class="homeCard">
        <div class="main-card">
          <el-row class="cardTop">
            <el-col :span="12" class="mainCardBtn">
              <el-button type="primary" :icon="Plus" size="default" @click="toApply()">新增申报</el-button>
              <!--                           <el-button type="danger" :icon="Delete" size="default">删除</el-button>-->
              <!--                           <el-button type="success" size="default">设置分类</el-button>-->
            </el-col>
            <el-button type="primary" :icon="Refresh" size="default" @click="reLoadData()"/>
          </el-row>
          <el-table ref="multipleTableRef" :data="applyData" style="width: 100%" height="calc(100% - 100px)"
                    :header-cell-style="{ background: '#fafafa' }">
            <el-table-column property="workPermitNo" label="作业编号" align="center">
              <template #default="scope">
                {{ scope.row.workPermitNo ? scope.row.workPermitNo : '—' }}
              </template>
            </el-table-column>
            <el-table-column property="seDepName" label="事业部" align="center"/>
            <el-table-column property="applyDepName" label="作业所在车间" align="center"/>
            <el-table-column property="workContent" label="作业内容" align="center"/>
            <el-table-column property="workTypeDesc" label="作业类型" align="center"/>
            <el-table-column label="作业单位" align="center">
              <template #default="scope">
                <span
                    v-if="scope.row.workDepList && scope.row.workDepList.length>0">{{ scope.row.workDepList.map(i => i.workDepName).join(',') }}</span>
                <span v-else>{{ scope.row.workDepName }}</span>
              </template>
            </el-table-column>
            <el-table-column property="headList" label="负责人及电话" align="center">
              <template #default="scope">
                {{
                  scope.row.headList.map(i => {
                    return i.userName + '(' + i.phone + ')'
                  }).join(',')
                }}
              </template>
            </el-table-column>
            <el-table-column property="operatorList" label="作业人及电话" align="center">
              <template #default="scope">
                {{
                  scope.row.operatorList.map(i => {
                    return i.userName + '(' + i.phone + ')'
                  }).join(',')
                }}
              </template>
            </el-table-column>
            <el-table-column property="guardianList" label="监护人及电话" align="center">
              <template #default="scope">
                {{
                  scope.row.guardianList.map(i => {
                    return i.userName + '(' + i.phone + ')'
                  }).join(',')
                }}
              </template>
            </el-table-column>
            <el-table-column property="expStartTime" label="作业开始时间" align="center"/>
            <el-table-column property="expEndTime" label="预计完成时间" align="center"/>
            <el-table-column label="执法仪编号" align="center">
              <template #default="scope">
                {{ scope.row.workApprovalDeviceList.map(i => i.deviceNo).join(',') }}
              </template>
            </el-table-column>
            <el-table-column label="作业人数" align="center">
              <template #default="scope">
                {{ scope.row.operatorList.length }}
              </template>
            </el-table-column>
            <el-table-column label="监护人数" align="center">
              <template #default="scope">
                {{ scope.row.guardianList.length }}
              </template>
            </el-table-column>
            <el-table-column label="作业状态" align="center">
              <template #default="scope">
                <el-tag>{{ statusList.find(i => i.value === scope.row.status)?.label }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" align="center" width="300">
              <template #default="scope">
                <!--                                        <el-button link type="danger" size="small" :icon="Delete" @click="deleteRecordBtn(scope.row)">作废</el-button>-->
                <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button>
                <el-button
                    v-if="(scope.row.working?.workAllStatus == 3 || scope.row.working?.workAllStatus == 4 || scope.row.working?.workAllStatus == 5)&&!scope.row.renewalWorkApplyId"
                    link type="primary" size="small" :icon="Edit" @click="continueRecord(scope.row)">一键续票
                </el-button>
                <!--                                        <el-button link type="success" size="small" :icon="Finished">修改</el-button>-->
                <!--                                        <el-button link type="success" size="small" :icon="Download">正式办票</el-button>-->
                <el-button link type="primary" size="small" :icon="Download" @click="downLoadRecord(scope.row)">
                  作业票预览
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pageBtn">
            <el-pagination v-model:currentPage="pageIndex1" v-model:page-size="pageSize1" :page-sizes="[10, 15]"
                           small="false" background layout="total, sizes, prev, pager, next, jumper" :total="totalSize1"
                           @size-change="handleSizeChange1" @current-change="handleCurrentChange1"/>
          </div>
        </div>
      </div>
    </div>
    <el-dialog v-model="dialogDetails" title="作业申请详情" center>
      <!--                    <fire v-if="dialogType == 1" :details = details></fire>-->
      <!--                    <space v-else-if="dialogType == 2" :details = details></space>-->
      <!--                    <hoist v-else-if="dialogType == 3" :details = details></hoist>-->
      <!--                    <ground v-else-if="dialogType == 4" :details = details></ground>-->
      <!--                    <broken v-else-if="dialogType == 5" :details = details></broken>-->
      <!--                    <height v-else-if="dialogType == 6" :details = details></height>-->
      <!--                    <power v-else-if="dialogType == 7" :details = details></power>-->
      <!--                    <plate v-else :details = details></plate>-->
      <detail-log :type=dialogType :statusList=statusList :details=details></detail-log>
      <template #footer>
                      <span class="dialog-footer">
                        <el-button type="primary" @click="dialogDetails = false"
                        >确认</el-button
                        >
                      </span>
                    </template>
                </el-dialog>
                <el-dialog v-model="dialogStatus" title="作业申请进度" width="60%">
                    <el-form v-if="approveInfo.operators.length > 0" style="margin-bottom: 40px">
                        <el-form-item label="申请作业人">
                            <el-input v-model="approveInfo.operators" readonly type="textarea" />
                        </el-form-item>
                    </el-form>
                    <div style="display: flex; flex-direction: column-reverse">
                        <div v-for="(item, index) in approveInfo.approvalSteps" class="stepItem">
                            <div class="stepNum">{{ item.stepSerial }}</div>
                            <div class="stepCard">
                                <el-card class="box-card" shadow="always">
                                    <div class="text">
                                        审批结果:<span class="bold-text">{{ item.approvalResultDesc }}</span>
                                    </div>
                                    <div class="text">
                                        审批类型:<span class="bold-text">{{ item.typeDesc }}</span>
                                    </div>
                                    <div class="text" v-if="item.auditTypeDesc">
                                        审批类型:<span class="bold-text">{{ item.auditTypeDesc }}</span>
                                    </div>
                                    <div class="text" v-show="item.startApprovalTime != null">
                                        开始时间:<span>{{ item.startApprovalTime }}</span>
                                    </div>
                                    <div class="approveUnit">
                                        <div class="item-tit"><span>审批人</span><span>审批状态</span></div>
                                        <div class="item-cont" v-for="i in item.stepUnits">
      </template>
    </el-dialog>
    <el-dialog v-model="dialogStatus" title="作业申请进度" width="60%">
      <el-form v-if="approveInfo.operators.length > 0" style="margin-bottom: 40px">
        <el-form-item label="申请作业人">
          <el-input v-model="approveInfo.operators" readonly type="textarea"/>
        </el-form-item>
      </el-form>
      <div style="display: flex; flex-direction: column-reverse">
        <div v-for="(item, index) in approveInfo.approvalSteps" class="stepItem">
          <div class="stepNum">{{ item.stepSerial }}</div>
          <div class="stepCard">
            <el-card class="box-card" shadow="always">
              <div class="text">
                审批结果:<span class="bold-text">{{ item.approvalResultDesc }}</span>
              </div>
              <div class="text">
                审批类型:<span class="bold-text">{{ item.typeDesc }}</span>
              </div>
              <div class="text" v-if="item.auditTypeDesc">
                审批类型:<span class="bold-text">{{ item.auditTypeDesc }}</span>
              </div>
              <div class="text" v-show="item.startApprovalTime != null">
                开始时间:<span>{{ item.startApprovalTime }}</span>
              </div>
              <div class="approveUnit">
                <div class="item-tit"><span>审批人</span><span>审批状态</span></div>
                <div class="item-cont" v-for="i in item.stepUnits">
                                            <span>{{ i.approvalUname }}</span
                                            ><span>{{ i.resultDesc }}</span>
                                        </div>
                                    </div>
                                    <div class="approveItem">
                                        <div class="item-tit">
                                            <span>审批项目</span>
<!--                                            <span>类型</span>-->
                                            <div>措施标准</div>
                                        </div>
                                        <div class="item-cont" v-for="i in item.stepItems">
                                            <span>{{ i.itemName }}</span>
<!--                                            <span>{{ i.typeDesc }}</span>-->
                                            <div v-if="i.measure !== null">
                                                <div>
                                                    <span>作业类型:</span><span>{{ i.measure.workTypeDesc }}</span>
                                                </div>
                                                <div>
                                                    <span>措施内容:</span><span>{{ i.measure.context }}</span>
                                                </div>
                                            </div>
                                            <div v-if="i.stand !== null">
                                                <div>
                                                    <span>标题名称:</span><span>{{ i.stand.title }}</span>
                                                </div>
                                                <div>
                                                    <span>标准内容:</span><span>{{ i.stand.typeDesc }}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="text" v-show="item.expFinishApprovalTime && item.expFinishApprovalTime != null">
                                        期望结束时间:<span>{{ item.expFinishApprovalTime }}</span>
                                    </div>
                                    <div class="text" v-show="item.finishApprovalTime != null">
                                        结束时间:<span>{{ item.finishApprovalTime }}</span>
                                    </div>
                                </el-card>
                            </div>
                        </div>
                </div>
              </div>
              <div class="approveItem">
                <div class="item-tit">
                  <span>审批项目</span>
                  <!--                                            <span>类型</span>-->
                  <div>措施标准</div>
                </div>
                <div class="item-cont" v-for="i in item.stepItems">
                  <span>{{ i.itemName }}</span>
                  <!--                                            <span>{{ i.typeDesc }}</span>-->
                  <div v-if="i.measure !== null">
                    <div>
                      <span>作业类型:</span><span>{{ i.measure.workTypeDesc }}</span>
                    </div>
                </el-dialog>
                <el-dialog v-model="deleteDialog" title="提示" width="30%" center>
                    <span>您确定要取消该条申请吗?</span>
                    <template #footer>
                    <div>
                      <span>措施内容:</span><span>{{ i.measure.context }}</span>
                    </div>
                  </div>
                  <div v-if="i.stand !== null">
                    <div>
                      <span>标题名称:</span><span>{{ i.stand.title }}</span>
                    </div>
                    <div>
                      <span>标准内容:</span><span>{{ i.stand.typeDesc }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="text" v-show="item.expFinishApprovalTime && item.expFinishApprovalTime != null">
                期望结束时间:<span>{{ item.expFinishApprovalTime }}</span>
              </div>
              <div class="text" v-show="item.finishApprovalTime != null">
                结束时间:<span>{{ item.finishApprovalTime }}</span>
              </div>
            </el-card>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog v-model="deleteDialog" title="提示" width="30%" center>
      <span>您确定要取消该条申请吗?</span>
      <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="deleteDialog = false" size="default">取消</el-button>
                            <el-button type="primary" @click="conFirmDelete" size="default">确认</el-button>
                        </span>
                    </template>
                </el-dialog>
                <fire-dialog ref="fireRef" :lists="lists" @refresh="getListByPage"></fire-dialog>
                <plate-dialog ref="plateRef" :lists="lists" @refresh="getListByPage"></plate-dialog>
                <space-dialog ref="spaceRef" :lists="lists" @refresh="getListByPage"></space-dialog>
                <hoist-dialog ref="hoistRef" :lists="lists" @refresh="getListByPage"></hoist-dialog>
                <ground-dialog ref="groundRef" :lists="lists" @refresh="getListByPage"></ground-dialog>
                <broken-dialog ref="brokenRef" :lists="lists" @refresh="getListByPage"></broken-dialog>
                <height-dialog ref="heightRef" :lists="lists" @refresh="getListByPage"></height-dialog>
                <power-dialog ref="powerRef" :lists="lists" @refresh="getListByPage"></power-dialog>
                <open-dialog ref="openRef" :lists="lists" @refresh="getListByPage"></open-dialog>
<!--                <el-dialog v-model="downLoadDialog" title="提示" width="30%" center>-->
<!--                    <span>您确定要导出该条记录吗?</span>-->
<!--                    <template #footer>-->
<!--                                <span class="dialog-footer">-->
<!--                                    <el-button @click="downLoadDialog = false" size="default">取消</el-button>-->
<!--                                    <el-button type="primary" @click="conFirmDownLoad" size="default">确认</el-button>-->
<!--                                </span>-->
<!--                    </template>-->
<!--                </el-dialog>-->
<!--            </el-tab-pane>-->
<!--            <el-tab-pane label="已通过" name="2">-->
<!--                <div style="height: 100%">-->
<!--                    <el-row class="homeCard">-->
<!--                        <el-col :span="8">-->
<!--                            <div class="grid-content topInfo">-->
<!--                                <el-input v-model="searchWord" placeholder="作业证名称"></el-input>-->
<!--                                <el-button type="primary">查询</el-button>-->
<!--                                <el-button plain>重置</el-button>-->
<!--                            </div>-->
<!--                        </el-col>-->
<!--                    </el-row>-->
<!--                    <div class="homeCard">-->
<!--                        <div class="main-card">-->
<!--                            <el-table ref="multipleTableRef" :data="passedData" style="width: 100%" height="calc(100% - 48px)" :header-cell-style="{ background: '#fafafa' }" @selection-change="handleSelectionChange">-->
<!--                                <el-table-column type="selection" width="55" />-->
<!--                                <el-table-column type="index" label="编号" width="200" />-->
<!--                                <el-table-column property="level" label="作业证等级" width="180" sortable />-->
<!--                                <el-table-column property="applyDate" label="申请日期" sortable />-->
<!--                                <el-table-column property="name" label="申请人" width="180" />-->
<!--                                <el-table-column property="department" label="申请部门" width="180" />-->
<!--                                <el-table-column label="申请状态" width="180">-->
<!--                                    <template #default="scope">-->
<!--                                        <el-tag type="success">{{ scope.row.status }}</el-tag>-->
<!--                                    </template>-->
<!--                                </el-table-column>-->
<!--                            </el-table>-->
<!--                            <div class="pageBtn">-->
<!--                                <el-pagination v-model:currentPage="pageIndex2" v-model:page-size="pageSize2" :page-sizes="[10, 15]" small="false" background layout="total, sizes, prev, pager, next, jumper" :total="totalSize2" @size-change="handleSizeChange2" @current-change="handleCurrentChange2" />-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </el-tab-pane>-->
<!--        </el-tabs>-->
    </div>
      </template>
    </el-dialog>
    <fire-dialog ref="fireRef" :lists="lists" @refresh="getListByPage"></fire-dialog>
    <plate-dialog ref="plateRef" :lists="lists" @refresh="getListByPage"></plate-dialog>
    <space-dialog ref="spaceRef" :lists="lists" @refresh="getListByPage"></space-dialog>
    <hoist-dialog ref="hoistRef" :lists="lists" @refresh="getListByPage"></hoist-dialog>
    <ground-dialog ref="groundRef" :lists="lists" @refresh="getListByPage"></ground-dialog>
    <broken-dialog ref="brokenRef" :lists="lists" @refresh="getListByPage"></broken-dialog>
    <height-dialog ref="heightRef" :lists="lists" @refresh="getListByPage"></height-dialog>
    <power-dialog ref="powerRef" :lists="lists" @refresh="getListByPage"></power-dialog>
    <open-dialog ref="openRef" :lists="lists" @refresh="getListByPage"></open-dialog>
    <!--                <el-dialog v-model="downLoadDialog" title="提示" width="30%" center>-->
    <!--                    <span>您确定要导出该条记录吗?</span>-->
    <!--                    <template #footer>-->
    <!--                                <span class="dialog-footer">-->
    <!--                                    <el-button @click="downLoadDialog = false" size="default">取消</el-button>-->
    <!--                                    <el-button type="primary" @click="conFirmDownLoad" size="default">确认</el-button>-->
    <!--                                </span>-->
    <!--                    </template>-->
    <!--                </el-dialog>-->
    <!--            </el-tab-pane>-->
    <!--            <el-tab-pane label="已通过" name="2">-->
    <!--                <div style="height: 100%">-->
    <!--                    <el-row class="homeCard">-->
    <!--                        <el-col :span="8">-->
    <!--                            <div class="grid-content topInfo">-->
    <!--                                <el-input v-model="searchWord" placeholder="作业证名称"></el-input>-->
    <!--                                <el-button type="primary">查询</el-button>-->
    <!--                                <el-button plain>重置</el-button>-->
    <!--                            </div>-->
    <!--                        </el-col>-->
    <!--                    </el-row>-->
    <!--                    <div class="homeCard">-->
    <!--                        <div class="main-card">-->
    <!--                            <el-table ref="multipleTableRef" :data="passedData" style="width: 100%" height="calc(100% - 48px)" :header-cell-style="{ background: '#fafafa' }" @selection-change="handleSelectionChange">-->
    <!--                                <el-table-column type="selection" width="55" />-->
    <!--                                <el-table-column type="index" label="编号" width="200" />-->
    <!--                                <el-table-column property="level" label="作业证等级" width="180" sortable />-->
    <!--                                <el-table-column property="applyDate" label="申请日期" sortable />-->
    <!--                                <el-table-column property="name" label="申请人" width="180" />-->
    <!--                                <el-table-column property="department" label="申请部门" width="180" />-->
    <!--                                <el-table-column label="申请状态" width="180">-->
    <!--                                    <template #default="scope">-->
    <!--                                        <el-tag type="success">{{ scope.row.status }}</el-tag>-->
    <!--                                    </template>-->
    <!--                                </el-table-column>-->
    <!--                            </el-table>-->
    <!--                            <div class="pageBtn">-->
    <!--                                <el-pagination v-model:currentPage="pageIndex2" v-model:page-size="pageSize2" :page-sizes="[10, 15]" small="false" background layout="total, sizes, prev, pager, next, jumper" :total="totalSize2" @size-change="handleSizeChange2" @current-change="handleCurrentChange2" />-->
    <!--                            </div>-->
    <!--                        </div>-->
    <!--                    </div>-->
    <!--                </div>-->
    <!--            </el-tab-pane>-->
    <!--        </el-tabs>-->
  </div>
</template>
<script lang="ts">
import {toRefs, reactive, defineComponent, ref, onMounted, defineAsyncComponent} from 'vue';
import { storeToRefs } from 'pinia';
import { initBackEndControlRoutes } from '/@/router/backEnd';
import { useUserInfo } from '/@/stores/userInfo';
import { Session } from '/@/utils/storage';
import { useRouter } from 'vue-router';
import { Edit, View, Plus, Delete, Refresh, Search, Finished, Download } from '@element-plus/icons-vue';
import { ElTable } from 'element-plus';
import { FormInstance, FormRules, ElMessage } from 'element-plus';
import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
import type { TabsPaneContext } from 'element-plus';
import {storeToRefs} from 'pinia';
import {initBackEndControlRoutes} from '/@/router/backEnd';
import {useUserInfo} from '/@/stores/userInfo';
import {Session} from '/@/utils/storage';
import {useRouter} from 'vue-router';
import {Edit, View, Plus, Delete, Refresh, Search, Finished, Download} from '@element-plus/icons-vue';
import {ElTable} from 'element-plus';
import {FormInstance, FormRules, ElMessage} from 'element-plus';
import {workApplyApi} from '/@/api/specialWorkSystem/workApply';
import type {TabsPaneContext} from 'element-plus';
import {teamManageApi} from "/@/api/systemManage/basicDateManage/personShiftManage/teamManage";
import Cookies from 'js-cookie';
import axios from 'axios';
// 定义接口来定义对象的类型
interface stateType {
    applyData: Array<string>;
    workTimeList: Array<string>;
    multipleSelection: Array<any>;
    deleteArr: Array<any>;
    approveInfo: Object;
    dialogDetails: boolean;
    dialogStatus: boolean;
    deleteDialog: boolean;
    pageIndex1: number;
    pageSize1: number;
    chosenIndex: null | number;
    deleteId: null | number;
    totalSize1: number;
    activeName: string;
    addRecord: {};
    details: {};
    statusInfo: {};
    workType: Array<type>;
    dialogType: number | null;
    departmentList: Array<any>;
    departmentRecursionList: Array<DepartmentState>;
    statusList: Array<any>;
    dep4List: Array<type>;
    searPara: {}
    timeRange: Array<string>;
    lists: {}
  applyData: Array<string>;
  workTimeList: Array<string>;
  multipleSelection: Array<any>;
  deleteArr: Array<any>;
  approveInfo: Object;
  dialogDetails: boolean;
  dialogStatus: boolean;
  deleteDialog: boolean;
  pageIndex1: number;
  pageSize1: number;
  chosenIndex: null | number;
  deleteId: null | number;
  totalSize1: number;
  activeName: string;
  addRecord: {};
  details: {};
  statusInfo: {};
  workType: Array<type>;
  dialogType: number | null;
  departmentList: Array<any>;
  departmentRecursionList: Array<DepartmentState>;
  statusList: Array<any>;
  dep4List: Array<type>;
  searPara: {}
  timeRange: Array<string>;
  lists: {}
  casProps: {}
}
interface type {
    id: number;
    name: string;
  id: number;
  name: string;
}
interface DepartmentState {
    depId: number;
    depName: string;
  depId: number;
  depName: string;
}
export default defineComponent({
    name: 'applys',
    components: {
      detailLog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/detailLog.vue')),
      fireDialog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/fireDialog.vue')),
      plateDialog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/plateDialog.vue')),
      spaceDialog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/spaceDialog.vue')),
      hoistDialog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/hoistDialog.vue')),
      groundDialog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/groundDialog.vue')),
      brokenDialog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/brokenDialog.vue')),
      heightDialog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/heightDialog.vue')),
      powerDialog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/powerDialog.vue')),
      openDialog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/openDialog.vue'))
    },
    setup() {
        const userInfo = useUserInfo();
        const { userInfos } = storeToRefs(userInfo);
        const router = useRouter();
        const state = reactive<stateType>({
            lists: {
              workerList: [],
              departList: [],
              departList2: [],
              deviceList: [],
              otherWorks: [],
              spList: [],
              riskList: []
            },
            pageIndex1: 1,
            pageSize1: 10,
            totalSize1: 0,
            dialogType: null,
            activeName: '1',
            departmentList: [],
            departmentRecursionList: [],
            chosenIndex: null,
            searPara:{
              startTime: '',
              endTime: '',
              workPermitNo: '',
              workType: null,
              headUserName: '',
              secondDepId: null
            },
            applyData: [],
            workTimeList: [],
            multipleSelection: [],
            approveInfo: {
                approvalSteps: [],
                operators: []
            },
            dialogDetails: false,
            dialogStatus: false,
            deleteDialog: false,
            addRecord: {},
            details: {},
            statusInfo: {},
            deleteId: null,
            deleteArr: [],
            dep4List: [
              {id:49,name:'电石事业部'},
              {id:50,name:'电力事业部'},
              {id:48,name:'有机化工事业部'},
              {id:32,name:'甲醇事业部'},
              {id:10,name:'后勤中心'},
              {id:41,name:'安全环保部'},
              {id:46,name:'供销中心'},
              {id:47,name:'技术中心'}
            ],
            workType: [
              { id: 1, name: '动火作业' },
              { id: 2, name: '受限空间作业' },
              { id: 3, name: '吊装作业' },
              { id: 4, name: '动土作业' },
              { id: 5, name: '断路作业' },
              { id: 6, name: '高处作业' },
              { id: 7, name: '临时用电作业' },
              { id: 8, name: '盲板抽堵作业' }
            ],
          statusList: [
            {
              value: 0,
              label: '风险研判'
            },
            {
              value: 1,
              label: '票证办理'
            },
            {
              value: 2,
              label: '气体分析'
            },
            {
              value: 3,
              label: '安全措施确认,培训交底'
            },
            {
              value: 4,
              label: '安全措施确认'
            },
            {
              value: 5,
              label: '培训交底'
            },
            {
              value: 6,
              label: '部门审批'
            },
            {
              value: 7,
              label: '作业票填报结束'
            },
            {
              value: 8,
              label: '作业气体分析不合格'
            },
            {
              value: 9,
              label: '审批未通过'
            },
            {
              value: 10,
              label: '开始'
            },
            {
              value: 11,
              label: '监护'
            },
            {
              value: 12,
              label: '结束'
            },
            {
              value: 13,
              label: '待验收'
            },
            {
              value: 14,
              label: '验收完成'
            },
            {
              value: 15,
              label: '取消'
            },
            {
              value: 16,
              label: '废止作业票'
            }
          ],
          timeRange: []
        });
      const fireRef = ref()
      const plateRef = ref()
      const spaceRef = ref()
      const hoistRef = ref()
      const groundRef = ref()
      const brokenRef = ref()
      const heightRef = ref()
      const powerRef = ref()
      const openRef = ref()
      // 页面载入时执行方法
      onMounted(() => {
        getListByPage();
        getAllDepartment()
        spWorker()
        getOpList()
        getAll()
        getAllDevice()
        getAllRisks()
        getOtherWork()
  name: 'applys',
  components: {
    detailLog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/detailLog.vue')),
    fireDialog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/fireDialog.vue')),
    plateDialog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/plateDialog.vue')),
    spaceDialog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/spaceDialog.vue')),
    hoistDialog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/hoistDialog.vue')),
    groundDialog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/groundDialog.vue')),
    brokenDialog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/brokenDialog.vue')),
    heightDialog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/heightDialog.vue')),
    powerDialog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/powerDialog.vue')),
    openDialog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/openDialog.vue'))
  },
  setup() {
    const userInfo = useUserInfo();
    const {userInfos} = storeToRefs(userInfo);
    const router = useRouter();
    const state = reactive<stateType>({
      lists: {
        workerList: [],
        departList: [],
        deviceList: [],
        otherWorks: [],
        spList: [],
        riskList: []
      },
      casProps: {
        emitPath: false,
        value: 'depId',
        label: 'depName',
        checkStrictly: true
      },
      pageIndex1: 1,
      pageSize1: 10,
      totalSize1: 0,
      dialogType: null,
      activeName: '1',
      departmentList: [],
      departmentRecursionList: [],
      chosenIndex: null,
      searPara: {
        startTime: '',
        endTime: '',
        workPermitNo: '',
        workType: null,
        headUserName: '',
        secondDepId: null
      },
      applyData: [],
      workTimeList: [],
      multipleSelection: [],
      approveInfo: {
        approvalSteps: [],
        operators: []
      },
      dialogDetails: false,
      dialogStatus: false,
      deleteDialog: false,
      addRecord: {},
      details: {},
      statusInfo: {},
      deleteId: null,
      deleteArr: [],
      dep4List: [
        {id: 49, name: '电石事业部'},
        {id: 50, name: '电力事业部'},
        {id: 48, name: '有机化工事业部'},
        {id: 32, name: '甲醇事业部'},
        {id: 10, name: '后勤中心'},
        {id: 41, name: '安全环保部'},
        {id: 46, name: '供销中心'},
        {id: 47, name: '技术中心'}
      ],
      workType: [
        {id: 1, name: '动火作业'},
        {id: 2, name: '受限空间作业'},
        {id: 3, name: '吊装作业'},
        {id: 4, name: '动土作业'},
        {id: 5, name: '断路作业'},
        {id: 6, name: '高处作业'},
        {id: 7, name: '临时用电作业'},
        {id: 8, name: '盲板抽堵作业'}
      ],
      statusList: [
        {
          value: 0,
          label: '风险研判'
        },
        {
          value: 1,
          label: '票证办理'
        },
        {
          value: 2,
          label: '气体分析'
        },
        {
          value: 3,
          label: '安全措施确认,培训交底'
        },
        {
          value: 4,
          label: '安全措施确认'
        },
        {
          value: 5,
          label: '培训交底'
        },
        {
          value: 6,
          label: '部门审批'
        },
        {
          value: 7,
          label: '作业票填报结束'
        },
        {
          value: 8,
          label: '作业气体分析不合格'
        },
        {
          value: 9,
          label: '审批未通过'
        },
        {
          value: 10,
          label: '开始'
        },
        {
          value: 11,
          label: '监护'
        },
        {
          value: 12,
          label: '结束'
        },
        {
          value: 13,
          label: '待验收'
        },
        {
          value: 14,
          label: '验收完成'
        },
        {
          value: 15,
          label: '取消'
        },
        {
          value: 16,
          label: '废止作业票'
        }
      ],
      timeRange: []
    });
    const fireRef = ref()
    const plateRef = ref()
    const spaceRef = ref()
    const hoistRef = ref()
    const groundRef = ref()
    const brokenRef = ref()
    const heightRef = ref()
    const powerRef = ref()
    const openRef = ref()
    // 页面载入时执行方法
    onMounted(() => {
      getListByPage();
      getAllDepartment()
      spWorker()
      getOpList()
      getAll()
      getAllDevice()
      getAllRisks()
      getOtherWork()
    });
    const giveTime = () => {
      if (state.timeRange && state.timeRange !== null) {
        state.searPara.startTime = state.timeRange[0];
        state.searPara.endTime = state.timeRange[1];
      } else {
        state.searPara.startTime = '';
        state.searPara.endTime = '';
      }
    };
    const continueRecord = (row) => {
      if (row.workType == 1) {
        fireRef.value.openDialog(row, 'continue')
      }
      if (row.workType == 2) {
        spaceRef.value.openDialog(row, 'continue')
      }
      if (row.workType == 3) {
        hoistRef.value.openDialog(row, 'continue')
      }
      if (row.workType == 4) {
        groundRef.value.openDialog(row, 'continue')
      }
      if (row.workType == 5) {
        brokenRef.value.openDialog(row, 'continue')
      }
      if (row.workType == 6) {
        heightRef.value.openDialog(row, 'continue')
      }
      if (row.workType == 7) {
        powerRef.value.openDialog(row, 'continue')
      }
      if (row.workType == 8) {
        plateRef.value.openDialog(row, 'continue')
      }
      if (row.workType == 9) {
        openRef.value.openDialog(row, 'continue')
      }
    }
    // 刷新
    const reLoadData = async () => {
      getListByPage();
    };
    // 填写表单
    const toApply = () => {
      router.push({
        path: 'zysq'
      });
      const giveTime = () => {
        if (state.timeRange && state.timeRange !== null) {
          state.searPara.startTime = state.timeRange[0];
          state.searPara.endTime = state.timeRange[1];
    };
    const handleClick = (tab: TabsPaneContext, event: Event) => {
    };
    // 获取部门列表
    const getAllDepartment = async () => {
      let res = await teamManageApi().getAllDepartment();
      if (res.data.code === '200') {
        state.departmentList = JSON.parse(JSON.stringify(res.data.data))
        recursion(state.departmentList);
        state.lists.departList = state.departmentList
      } else {
        ElMessage({
          type: 'warning',
          message: res.data.msg
        });
      }
    };
    const recursion = (value: any) => {
      for (let i of value) {
        if (i.children.length !== 0) {
          state.departmentRecursionList.push(i);
          recursion(i.children);
        } else {
          state.searPara.startTime = '';
          state.searPara.endTime = '';
        }
      };
      const continueRecord = (row)=>{
        if(row.workType == 1){
          fireRef.value.openDialog(row,'continue')
        }
        if(row.workType == 2){
          spaceRef.value.openDialog(row,'continue')
        }
        if(row.workType == 3){
          hoistRef.value.openDialog(row,'continue')
        }
        if(row.workType == 4){
          groundRef.value.openDialog(row,'continue')
        }
        if(row.workType == 5){
          brokenRef.value.openDialog(row,'continue')
        }
        if(row.workType == 6){
          heightRef.value.openDialog(row,'continue')
        }
        if(row.workType == 7){
          powerRef.value.openDialog(row,'continue')
        }
        if(row.workType == 8){
          plateRef.value.openDialog(row,'continue')
        }
        if(row.workType == 9){
          openRef.value.openDialog(row,'continue')
          state.departmentRecursionList.push(i);
        }
      }
    };
        // 刷新
        const reLoadData = async () => {
            getListByPage();
        };
    // 分页获取
    const getListByPage = async () => {
      const data = {pageSize: state.pageSize1, pageIndex: state.pageIndex1, searchParams: state.searPara};
      let res = await workApplyApi().getAllNewApplyListPage(data);
      if (res.data.code === '200') {
        state.applyData = JSON.parse(JSON.stringify(res.data.data));
        state.applyData = state.applyData.map((item) => {
          if (item.operators == null || item.operators == []) {
            item.operators = [];
          } else {
            item.operators = Array.from(item.operators, ({operatorUname}) => operatorUname);
          }
          return item;
        });
        state.totalSize1 = res.data.total;
      } else {
        ElMessage({
          type: 'warning',
          message: res.data.msg
        });
      }
    };
        // 填写表单
        const toApply = () => {
            router.push({
                path: 'zysq'
    // 表格数据格式化
    const toNames = (row, column, cellValue, index) => {
      if (row.list == []) {
        return [];
      } else {
        const nameList = [];
        for (let i = 0; i < row.list.length; i++) {
          for (let t = 0; t < state.workTimeList.length; t++) {
            if (row.list[i] == state.workTimeList[t].id) {
              nameList.push(state.workTimeList[t].name);
            }
          }
        }
        return nameList.join();
      }
    };
    const spWorker = async () => {
      for (let id of ['18', '19']) {
        const res = await workApplyApi().getSpList({roleId: id})
        if (id == '18') {
          if (res.data.code === '200') {
            state.lists.spList.jhList = JSON.parse(JSON.stringify(res.data.data))
          } else {
            ElMessage({
              type: 'warning',
              message: res.data.msg
            });
        };
        const handleClick = (tab: TabsPaneContext, event: Event) => {
        };
        // 获取部门列表
        const getAllDepartment = async () => {
            let res = await teamManageApi().getAllDepartment();
            if (res.data.code === '200') {
                state.departmentList = JSON.parse(JSON.stringify(res.data.data))
                recursion(state.departmentList);
                state.lists.departList = state.departmentList
                state.lists.departList2 = JSON.parse(JSON.stringify(res.data.data))[0].children[0].children.filter(i=>i.depId == 32 || i.depId == 48 || i.depId == 49 || i.depId == 50 || i.depId == 10 || i.depId == 41 || i.depId == 46 || i.depId == 47)
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };
        const recursion = (value: any) => {
            for (let i of value) {
                if (i.children.length !== 0) {
                    state.departmentRecursionList.push(i);
                    recursion(i.children);
                } else {
                    state.departmentRecursionList.push(i);
                }
            }
        };
        // 分页获取
        const getListByPage = async () => {
            const data = { pageSize: state.pageSize1, pageIndex: state.pageIndex1, searchParams: state.searPara };
            let res = await workApplyApi().getAllNewApplyListPage(data);
            if (res.data.code === '200') {
                state.applyData = JSON.parse(JSON.stringify(res.data.data));
                state.applyData = state.applyData.map((item) => {
                    if (item.operators == null || item.operators == []) {
                        item.operators = [];
                    } else {
                        item.operators = Array.from(item.operators, ({ operatorUname }) => operatorUname);
                    }
                    return item;
                });
                state.totalSize1 = res.data.total;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };
        // 表格数据格式化
        const toNames = (row, column, cellValue, index) => {
            if (row.list == []) {
                return [];
            } else {
                const nameList = [];
                for (let i = 0; i < row.list.length; i++) {
                    for (let t = 0; t < state.workTimeList.length; t++) {
                        if (row.list[i] == state.workTimeList[t].id) {
                            nameList.push(state.workTimeList[t].name);
                        }
                    }
                }
                return nameList.join();
            }
        };
      const spWorker = async ()=>{
        for(let id of ['18','19']){
          const res = await workApplyApi().getSpList({roleId: id})
          if(id == '18'){
            if (res.data.code === '200') {
              state.lists.spList.jhList = JSON.parse(JSON.stringify(res.data.data))
            } else {
              ElMessage({
                type: 'warning',
                message: res.data.msg
              });
            }
          }
          if(id == '19'){
            if (res.data.code === '200') {
              state.lists.spList.sfList = JSON.parse(JSON.stringify(res.data.data))
            } else {
              ElMessage({
                type: 'warning',
                message: res.data.msg
              });
            }
        }
        if (id == '19') {
          if (res.data.code === '200') {
            state.lists.spList.sfList = JSON.parse(JSON.stringify(res.data.data))
          } else {
            ElMessage({
              type: 'warning',
              message: res.data.msg
            });
          }
        }
      }
    }
      const getOpList = async()=>{
        const res = await workApplyApi().getOpList()
        if(res.data.code == '200'){
          if(res.data.data && res.data.data.length>0){
            state.lists.spList.opList = JSON.parse(JSON.stringify(res.data.data)).map(i=>{
              if(i.certList && i.certList.length>0){
                i.certList = i.certList.map(item=>{
                  item['realName'] = i.realName + '(' + item.certTypeName +':'+ item.certExpiredAt + ')'
                  item['uid'] = item.certNo + ',' + item.certExpiredAt
                  return item
                })
              }
              return i
            })
          }
        }else{
          ElMessage({
            type: 'warning',
            message: res.data.msg
    const getOpList = async () => {
      const res = await workApplyApi().getOpList()
      if (res.data.code == '200') {
        if (res.data.data && res.data.data.length > 0) {
          state.lists.spList.opList = JSON.parse(JSON.stringify(res.data.data)).map(i => {
            if (i.certList && i.certList.length > 0) {
              i.certList = i.certList.map(item => {
                item['realName'] = i.realName + '(' + item.certTypeName + ':' + item.certExpiredAt + ')'
                item['uid'] = item.certNo + ',' + item.certExpiredAt
                return item
              })
            }
            return i
          })
        }
      } else {
        ElMessage({
          type: 'warning',
          message: res.data.msg
        })
      }
      // 获取用户列表
      const getAll = async ()=>{
        const res = await workApplyApi().getAllUsers()
        if (res.data.code === '200') {
          state.lists.workerList = JSON.parse(JSON.stringify(res.data.data))
        } else {
          ElMessage({
            type: 'warning',
            message: res.data.msg
          });
        }
      };
      // 获取设备列表
      const getAllDevice = async ()=>{
        const res = await workApplyApi().getAllDevices()
        if (res.data.code === '200') {
          state.lists.deviceList = JSON.parse(JSON.stringify(res.data.data))
        } else {
          ElMessage({
            type: 'warning',
            message: res.data.msg
          });
        }
      }
      // 获取设备列表
      const getAllRisks = async ()=>{
        const res = await workApplyApi().getAllRiskIdentity()
        if (res.data.code === '200') {
          // state.allDevices = JSON.parse(JSON.stringify(res.data.data))
          state.lists.riskList = JSON.parse(JSON.stringify(res.data.data))
        } else {
          ElMessage({
            type: 'warning',
            message: res.data.msg
          });
        }
      }
      const getOtherWork = async () => {
        let res = await workApplyApi().getOtherWork({pageSize: 999, pageIndex: 1, searchParams: {workPermitNo: '', workType: null}})
        if (res.data.code === '200') {
          state.lists.otherWorks = JSON.parse(JSON.stringify(res.data.data))
        } else {
          ElMessage({
            type: 'warning',
            message: res.data.msg
          });
        }
      };
        // 关键词查询记录
        const searchRecord = async () => {
            state.pageIndex1 = 1
            getListByPage();
        };
        // 重置搜索
        const clearSearch = async () => {
            state.timeRange = []
            state.searPara = {
              startTime: '',
              endTime: '',
              workPermitNo: '',
              workType: null,
              headUserName: '',
              secondDepId: null
            };
            state.pageIndex1 = 1
            getListByPage();
        };
        // 查看进度
        const viewStatus = (row) => {
            getStatus({ workApplyId: row.workApplyId });
            state.dialogStatus = true;
        };
        // 查询进度方法
        const getStatus = async (data: any) => {
            let res = await workApplyApi().getStatus(data);
            if (res.data.code === '200') {
                state.approveInfo = JSON.parse(JSON.stringify(res.data.data));
                state.approveInfo.operators = Array.from(state.approveInfo.operators, ({ operatorUname }) => operatorUname);
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };
        const deleteRecordBtn = (row) => {
            state.deleteId = row.workApplyId;
            state.deleteDialog = true;
        };
        // 取消申请方法
        const deleteRecord = async (data: any) => {
            let res = await workApplyApi().cancelApply(data);
            if (res.data.code === '200') {
                ElMessage({
                    type: 'success',
                    message: '删除成功!'
                });
                getListByPage();
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };
        const conFirmDelete = () => {
            deleteRecord({ workApplyId: state.deleteId });
            state.deleteDialog = false;
        };
        // 导出方法
        const downLoadRecord = (row: any) => {
            // let res = await workApplyApi().postPrinting(data);
            axios.post(import.meta.env.VITE_API_URL + `/specialwork9step/work/down/load/pdf`,{ id: row.id},{headers:{'Content-Type': 'application/json','Authorization': `${Cookies.get('token')}`,'uid':`${Cookies.get('uid')}`},responseType: 'blob'}).then(res=>{
                if (res) {
                    const link = document.createElement('a')
                    let blob = new Blob([res.data],{type: 'application/pdf'})
                    link.style.display = "none";
                    link.href = URL.createObjectURL(blob); // 创建URL
                    link.setAttribute("download", row.workTypeDesc + row.workPermitNo + "作业证.pdf");
                    document.body.appendChild(link)
                    window.open(link.href)
                    document.body.removeChild(link)
                } else {
                    ElMessage({
                        type: 'warning',
                        message: res.data.msg
                    });
                }
            })
        };
        const handleSizeChange1 = (val: number) => {
            state.pageSize1 = val;
            getListByPage();
        };
        const handleCurrentChange1 = (val: number) => {
            state.pageIndex1 = val;
            getListByPage();
        };
        // 查看记录
        const viewRecord = (row: any) => {
            state.dialogType = row.workType
            state.details = JSON.parse(JSON.stringify(row));
            state.dialogDetails = true;
        };
        // 折线图
        const renderMenu = async (value: string) => {
            Session.set('projectId', value);
            userInfos.value.projectId = value;
            await initBackEndControlRoutes();
        };
        return {
            View,
            Edit,
            Delete,
            Refresh,
            Plus,
            Finished,
            Download,
            fireRef,
            plateRef,
            spaceRef,
            hoistRef,
            groundRef,
            brokenRef,
            heightRef,
            powerRef,
            openRef,
          continueRecord,
            giveTime,
            reLoadData,
            toApply,
            handleClick,
            toNames,
            searchRecord,
            clearSearch,
            viewRecord,
            viewStatus,
            deleteRecordBtn,
            downLoadRecord,
            conFirmDelete,
            getListByPage,
            handleSizeChange1,
            handleCurrentChange1,
            ...toRefs(state)
        };
    }
    // 获取用户列表
    const getAll = async () => {
      const res = await workApplyApi().getAllUsers()
      if (res.data.code === '200') {
        state.lists.workerList = JSON.parse(JSON.stringify(res.data.data))
      } else {
        ElMessage({
          type: 'warning',
          message: res.data.msg
        });
      }
    };
    // 获取设备列表
    const getAllDevice = async () => {
      const res = await workApplyApi().getAllDevices()
      if (res.data.code === '200') {
        state.lists.deviceList = JSON.parse(JSON.stringify(res.data.data))
      } else {
        ElMessage({
          type: 'warning',
          message: res.data.msg
        });
      }
    }
    // 获取设备列表
    const getAllRisks = async () => {
      const res = await workApplyApi().getAllRiskIdentity()
      if (res.data.code === '200') {
        // state.allDevices = JSON.parse(JSON.stringify(res.data.data))
        state.lists.riskList = JSON.parse(JSON.stringify(res.data.data))
      } else {
        ElMessage({
          type: 'warning',
          message: res.data.msg
        });
      }
    }
    const getOtherWork = async () => {
      let res = await workApplyApi().getOtherWork({
        pageSize: 999,
        pageIndex: 1,
        searchParams: {workPermitNo: '', workType: null}
      })
      if (res.data.code === '200') {
        state.lists.otherWorks = JSON.parse(JSON.stringify(res.data.data))
      } else {
        ElMessage({
          type: 'warning',
          message: res.data.msg
        });
      }
    };
    // 关键词查询记录
    const searchRecord = async () => {
      state.pageIndex1 = 1
      getListByPage();
    };
    // 重置搜索
    const clearSearch = async () => {
      state.timeRange = []
      state.searPara = {
        startTime: '',
        endTime: '',
        workPermitNo: '',
        workType: null,
        headUserName: '',
        secondDepId: null
      };
      state.pageIndex1 = 1
      getListByPage();
    };
    // 查看进度
    const viewStatus = (row) => {
      getStatus({workApplyId: row.workApplyId});
      state.dialogStatus = true;
    };
    // 查询进度方法
    const getStatus = async (data: any) => {
      let res = await workApplyApi().getStatus(data);
      if (res.data.code === '200') {
        state.approveInfo = JSON.parse(JSON.stringify(res.data.data));
        state.approveInfo.operators = Array.from(state.approveInfo.operators, ({operatorUname}) => operatorUname);
      } else {
        ElMessage({
          type: 'warning',
          message: res.data.msg
        });
      }
    };
    const deleteRecordBtn = (row) => {
      state.deleteId = row.workApplyId;
      state.deleteDialog = true;
    };
    // 取消申请方法
    const deleteRecord = async (data: any) => {
      let res = await workApplyApi().cancelApply(data);
      if (res.data.code === '200') {
        ElMessage({
          type: 'success',
          message: '删除成功!'
        });
        getListByPage();
      } else {
        ElMessage({
          type: 'warning',
          message: res.data.msg
        });
      }
    };
    const conFirmDelete = () => {
      deleteRecord({workApplyId: state.deleteId});
      state.deleteDialog = false;
    };
    // 导出方法
    const downLoadRecord = (row: any) => {
      // let res = await workApplyApi().postPrinting(data);
      axios.post(import.meta.env.VITE_API_URL + `/specialwork9step/work/down/load/pdf`, {id: row.id}, {
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `${Cookies.get('token')}`,
          'uid': `${Cookies.get('uid')}`
        }, responseType: 'blob'
      }).then(res => {
        if (res) {
          const link = document.createElement('a')
          let blob = new Blob([res.data], {type: 'application/pdf'})
          link.style.display = "none";
          link.href = URL.createObjectURL(blob); // 创建URL
          link.setAttribute("download", row.workTypeDesc + row.workPermitNo + "作业证.pdf");
          document.body.appendChild(link)
          window.open(link.href)
          document.body.removeChild(link)
        } else {
          ElMessage({
            type: 'warning',
            message: res.data.msg
          });
        }
      })
    };
    const handleSizeChange1 = (val: number) => {
      state.pageSize1 = val;
      getListByPage();
    };
    const handleCurrentChange1 = (val: number) => {
      state.pageIndex1 = val;
      getListByPage();
    };
    // 查看记录
    const viewRecord = (row: any) => {
      state.dialogType = row.workType
      state.details = JSON.parse(JSON.stringify(row));
      state.dialogDetails = true;
    };
    // 折线图
    const renderMenu = async (value: string) => {
      Session.set('projectId', value);
      userInfos.value.projectId = value;
      await initBackEndControlRoutes();
    };
    return {
      View,
      Edit,
      Delete,
      Refresh,
      Plus,
      Finished,
      Download,
      fireRef,
      plateRef,
      spaceRef,
      hoistRef,
      groundRef,
      brokenRef,
      heightRef,
      powerRef,
      openRef,
      continueRecord,
      giveTime,
      reLoadData,
      toApply,
      handleClick,
      toNames,
      searchRecord,
      clearSearch,
      viewRecord,
      viewStatus,
      deleteRecordBtn,
      downLoadRecord,
      conFirmDelete,
      getListByPage,
      handleSizeChange1,
      handleCurrentChange1,
      ...toRefs(state)
    };
  }
});
</script>
<style scoped lang="scss">
$homeNavLengh: 8;
.home-container {
    height: calc(100vh - 144px);
  height: calc(100vh - 144px);
  box-sizing: border-box;
  overflow: hidden;
  .demo-tabs {
    width: 100%;
    height: 100%;
    &::v-deep(.el-tabs__content) {
      height: calc(100% - 60px);
    }
    .el-tab-pane {
      height: 100%;
    }
  }
  .homeCard {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden;
    .demo-tabs {
        width: 100%;
        height: 100%;
    background: #fff;
    border-radius: 4px;
        &::v-deep(.el-tabs__content) {
            height: calc(100% - 60px);
        }
    .main-card {
      width: 100%;
      height: 100%;
        .el-tab-pane {
            height: 100%;
        }
    }
    .homeCard {
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
        background: #fff;
        border-radius: 4px;
        .main-card {
            width: 100%;
            height: 100%;
            .cardTop {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 20px;
                .mainCardBtn {
                    margin: 0;
                }
            }
            .pageBtn {
                height: 60px;
                display: flex;
                align-items: center;
                justify-content: right;
                .demo-pagination-block + .demo-pagination-block {
                    margin-top: 10px;
                }
                .demo-pagination-block .demonstration {
                    margin-bottom: 16px;
                }
            }
        }
        &:last-of-type {
            height: calc(100% - 130px);
        }
    }
    .stepItem {
        display: flex;
        align-items: flex-start;
        margin-top: 30px;
        margin-left: 30px;
        padding-bottom: 30px;
        padding-left: 40px;
        border-left: 1px solid #a0cfff;
        position: relative;
        &:first-of-type {
            margin-top: 30px;
        }
        &:first-of-type {
            margin-bottom: 0;
            border-left: none;
        }
        .stepNum {
            position: absolute;
            width: 40px;
            height: 40px;
            border-radius: 20px;
            box-sizing: border-box;
            font-size: 18px;
            color: #333;
            border: 1px solid #a0cfff;
            line-height: 38px;
            text-align: center;
            left: -20px;
            top: -30px;
            background: #d9ecff;
        }
        .stepCard {
            width: 100%;
            margin-top: -30px;
            .box-card {
                width: 100%;
                .card-header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    span {
                        font-weight: bold;
                        margin-left: 10px;
                    }
                }
                .text {
                    width: 100%;
                    font-size: 14px;
                    margin-bottom: 10px;
                    padding-left: 10px;
                    span {
                        color: #409eff;
                    }
                    .bold-text{
                        font-weight: bolder;
                    }
                    &:last-of-type {
                        margin-bottom: 0;
                    }
                }
                .approveUnit {
                    width: 100%;
                    font-size: 14px;
                    margin-bottom: 20px;
                    padding: 10px 15px;
                    border: 1px solid #fff;
                    background: #ecf8ff;
                    border-radius: 6px;
                    .item-tit {
                        width: 100%;
                        display: flex;
                        color: #409eff;
                        align-items: flex-start;
                        justify-content: space-between;
                        padding-bottom: 10px;
                        border-bottom: 1px solid #a0cfff;
                        & > span {
                            flex: 1;
                            &:last-of-type{
                                text-align: center;
                            }
                        }
                        & > div {
                            flex: 1;
                            text-align: center;
                        }
                    }
                    .item-cont {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        padding: 10px 0;
                        border-bottom: 1px solid #c6e2ff;
                        & > span {
                            flex: 1;
                            &:last-of-type{
                                text-align: center;
                            }
                        }
                        & > div {
                            flex: 1;
                            text-align: center;
                            & > div {
                                text-align: left;
                                width: 100%;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                span {
                                    width: 45%;
                                    &:first-of-type {
                                        width: 30%;
                                    }
                                }
                            }
                        }
                        &:last-of-type {
                            border-bottom: 0;
                        }
                    }
                }
                .approveItem {
                    width: 100%;
                    font-size: 14px;
                    margin-bottom: 20px;
                    padding: 10px 15px;
                    background: #ecf8ff;
                    border: 1px solid #fff;
                    border-radius: 6px;
                    .item-tit {
                        width: 100%;
                        display: flex;
                        color: #409eff;
                        align-items: flex-start;
                        justify-content: space-between;
                        padding-bottom: 10px;
                        border-bottom: 1px solid #a0cfff;
                        & > span {
                            flex: 1;
                        }
                        & > div {
                            flex: 2;
                            text-align: center;
                        }
                    }
                    .item-cont {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        padding: 10px 0;
                        border-bottom: 1px solid #c6e2ff;
                        & > span {
                            flex: 1;
                        }
                        & > div {
                            flex: 2;
                            text-align: center;
                            & > div {
                                text-align: left;
                                width: 100%;
                                display: flex;
                                justify-content: center;
                                align-items: flex-start;
                                margin-bottom: 10px;
                                span {
                                    width: 50%;
                                    &:first-of-type {
                                        width: 25%;
                                    }
                                }
                            }
                        }
                        &:last-of-type {
                            border-bottom: 0;
                        }
                    }
                }
            }
        }
        &:hover .card-header {
            color: #0098f5;
        }
        &:hover .stepNum {
            border: 2px solid #0098f5;
            color: #0098f5;
        }
    }
    .el-row {
      .cardTop {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
        &:last-child {
            margin-bottom: 0;
        .mainCardBtn {
          margin: 0;
        }
        .grid-content {
            align-items: center;
            min-height: 36px;
      }
      .pageBtn {
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: right;
        .demo-pagination-block + .demo-pagination-block {
          margin-top: 10px;
        }
        .topInfo {
            display: flex;
            align-items: center;
            font-size: 16px;
        .demo-pagination-block .demonstration {
          margin-bottom: 16px;
        }
      }
    }
    &:last-of-type {
      height: calc(100% - 130px);
    }
  }
  .stepItem {
    display: flex;
    align-items: flex-start;
    margin-top: 30px;
    margin-left: 30px;
    padding-bottom: 30px;
    padding-left: 40px;
    border-left: 1px solid #a0cfff;
    position: relative;
    &:first-of-type {
      margin-top: 30px;
    }
    &:first-of-type {
      margin-bottom: 0;
      border-left: none;
    }
    .stepNum {
      position: absolute;
      width: 40px;
      height: 40px;
      border-radius: 20px;
      box-sizing: border-box;
      font-size: 18px;
      color: #333;
      border: 1px solid #a0cfff;
      line-height: 38px;
      text-align: center;
      left: -20px;
      top: -30px;
      background: #d9ecff;
    }
    .stepCard {
      width: 100%;
      margin-top: -30px;
      .box-card {
        width: 100%;
        .card-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          span {
            font-weight: bold;
            margin-left: 10px;
          }
        }
        .text {
          width: 100%;
          font-size: 14px;
          margin-bottom: 10px;
          padding-left: 10px;
          span {
            color: #409eff;
          }
          .bold-text {
            font-weight: bolder;
          }
          &:last-of-type {
            margin-bottom: 0;
          }
        }
        .approveUnit {
          width: 100%;
          font-size: 14px;
          margin-bottom: 20px;
          padding: 10px 15px;
          border: 1px solid #fff;
          background: #ecf8ff;
          border-radius: 6px;
          .item-tit {
            width: 100%;
            display: flex;
            color: #409eff;
            align-items: flex-start;
            justify-content: space-between;
            padding-bottom: 10px;
            border-bottom: 1px solid #a0cfff;
            & > span {
              flex: 1;
              &:last-of-type {
                text-align: center;
              }
            }
            & > div {
                white-space: nowrap;
                margin-right: 20px;
              flex: 1;
              text-align: center;
            }
          }
          .item-cont {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 0;
            border-bottom: 1px solid #c6e2ff;
            & > span {
              flex: 1;
              &:last-of-type {
                text-align: center;
              }
            }
            & > div {
              flex: 1;
              text-align: center;
              & > div {
                text-align: left;
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                span {
                  width: 45%;
                  &:first-of-type {
                    width: 30%;
                  }
                }
              }
            }
            &:last-of-type {
              border-bottom: 0;
            }
          }
        }
        .approveItem {
          width: 100%;
          font-size: 14px;
          margin-bottom: 20px;
          padding: 10px 15px;
          background: #ecf8ff;
          border: 1px solid #fff;
          border-radius: 6px;
          .item-tit {
            width: 100%;
            display: flex;
            color: #409eff;
            align-items: flex-start;
            justify-content: space-between;
            padding-bottom: 10px;
            border-bottom: 1px solid #a0cfff;
            & > span {
              flex: 1;
            }
            & > div {
              flex: 2;
              text-align: center;
            }
          }
          .item-cont {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 0;
            border-bottom: 1px solid #c6e2ff;
            & > span {
              flex: 1;
            }
            & > div {
              flex: 2;
              text-align: center;
              & > div {
                text-align: left;
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: flex-start;
                margin-bottom: 10px;
                span {
                  width: 50%;
                  &:first-of-type {
                    width: 25%;
                  }
                }
              }
            }
            &:last-of-type {
              border-bottom: 0;
            }
          }
        }
      }
    }
    .el-card {
        border: 0;
    &:hover .card-header {
      color: #0098f5;
    }
    &:hover .stepNum {
      border: 2px solid #0098f5;
      color: #0098f5;
    }
  }
  .el-row {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
    .grid-content {
      align-items: center;
      min-height: 36px;
    }
    .topInfo {
      display: flex;
      align-items: center;
      font-size: 16px;
      font-weight: bold;
      & > div {
        white-space: nowrap;
        margin-right: 20px;
      }
    }
  }
  .el-card {
    border: 0;
  }
}
</style>