| <template> | 
|     <GlobalWindow | 
|         :title="title" | 
|         width="50%" | 
|         :visible.sync="visible" | 
|         :confirm-working="isWorking" | 
|         @confirm="confirm" | 
|     > | 
|         <div class="box"> | 
|             <div class="box_label">派遣单位详情</div> | 
|             <div class="box_list"> | 
|                 <div class="box_list_item"> | 
|                     <div class="box_list_item_label">派遣单位:</div> | 
|                     <div class="box_list_item_val">芜湖格力精密制造有限公司</div> | 
|                 </div> | 
|                 <div class="box_list_item"> | 
|                     <div class="box_list_item_label">派遣单位信用代码:</div> | 
|                     <div class="box_list_item_val">913401000900000001</div> | 
|                 </div> | 
|                 <div class="box_list_item"> | 
|                     <div class="box_list_item_label">派遣单位状态:</div> | 
|                     <div class="box_list_item_val">已通过</div> | 
|                 </div> | 
|                 <div class="box_list_item"> | 
|                     <div class="box_list_item_label">派遣单位详述:</div> | 
|                     <div class="box_list_item_val">无</div> | 
|                 </div> | 
|             </div> | 
|             <div class="box_x"></div> | 
|             <div class="box_fa">保险方案:平安保险雇主责任险A版</div> | 
|             <el-table | 
|                 :data="tableData" | 
|                 border | 
|                 style="width: 100%"> | 
|                 <el-table-column | 
|                     label="序号" | 
|                     align="center" | 
|                     width="80"> | 
|                     <template slot-scope="scope"> | 
|                         <span>{{scope.$index + 1}}</span> | 
|                     </template> | 
|                 </el-table-column> | 
|                 <el-table-column | 
|                     align="center" | 
|                     label="所属工种"> | 
|                     <template slot-scope="{row}"> | 
|                         <el-select v-model="row.info" placeholder="请选择"> | 
|                             <el-option | 
|                                 v-for="item in options" | 
|                                 :key="item.value" | 
|                                 :label="item.label" | 
|                                 :value="item.value"> | 
|                             </el-option> | 
|                         </el-select> | 
|                     </template> | 
|                 </el-table-column> | 
|                 <el-table-column | 
|                     label="审核通过日期" | 
|                     width="150" | 
|                     align="center" | 
|                     prop="time"> | 
|                 </el-table-column> | 
|             </el-table> | 
|             <div class="box_videos"> | 
|                 <div class="box_videos_item" v-for="(item,index) in 1" :key="index"> | 
|                     <video src="https://baidu.com"></video> | 
|                     <div class="box_videos_item_info"> | 
|                         1-3类 蔬菜/园艺工/家禽家畜饲养人员 | 
|                     </div> | 
|                 </div> | 
|             </div> | 
|             <div class="box_fa">保险方案:平安保险雇主责任险A版</div> | 
|             <el-table | 
|                     :data="tableData" | 
|                     border | 
|                     style="width: 100%"> | 
|                 <el-table-column | 
|                         label="序号" | 
|                         align="center" | 
|                         width="80"> | 
|                     <template slot-scope="scope"> | 
|                         <span>{{scope.$index + 1}}</span> | 
|                     </template> | 
|                 </el-table-column> | 
|                 <el-table-column | 
|                         align="center" | 
|                         label="所属工种"> | 
|                     <template slot-scope="{row}"> | 
|                         <el-select v-model="row.info" placeholder="请选择"> | 
|                             <el-option | 
|                                     v-for="item in options" | 
|                                     :key="item.value" | 
|                                     :label="item.label" | 
|                                     :value="item.value"> | 
|                             </el-option> | 
|                         </el-select> | 
|                     </template> | 
|                 </el-table-column> | 
|                 <el-table-column | 
|                         label="审核通过日期" | 
|                         width="150" | 
|                         align="center" | 
|                         prop="time"> | 
|                 </el-table-column> | 
|             </el-table> | 
|             <div class="box_videos"> | 
|                 <div class="box_videos_item" v-for="(item,index) in 1" :key="index"> | 
|                     <video src="https://baidu.com"></video> | 
|                     <div class="box_videos_item_info"> | 
|                         1-3类 蔬菜/园艺工/家禽家畜饲养人员 | 
|                     </div> | 
|                 </div> | 
|             </div> | 
|             <div class="box_label">操作记录</div> | 
|             <el-timeline :reverse="reverse" style="margin-top: 20px;"> | 
|                 <el-timeline-item | 
|                     v-for="(activity, index) in activities" | 
|                     :key="index" | 
|                     :timestamp="activity.timestamp"> | 
|                     {{activity.content}} | 
|                 </el-timeline-item> | 
|             </el-timeline> | 
|         </div> | 
|     </GlobalWindow> | 
| </template> | 
|   | 
| <script> | 
|     import BaseOpera from '@/components/base/BaseOpera' | 
|     import GlobalWindow from '@/components/common/GlobalWindow' | 
|     export default { | 
|         name: 'OperaDispatchUnitWindow', | 
|         extends: BaseOpera, | 
|         components: { GlobalWindow }, | 
|         data () { | 
|             return { | 
|                 reverse: false, | 
|                 activities: [{ | 
|                     content: '提交派遣单位', | 
|                     timestamp: '操作员-张伟(安徽豆米科技有限公司)\n' + | 
|                         '\n' + | 
|                         '2023-09-11 00:00:00' | 
|                 }, { | 
|                     content: '派遣单位通过\n' + | 
|                         '\n' + | 
|                         '\n' + | 
|                         '提交意见:-', | 
|                     timestamp: '操作员-叶显骏(平台端)\n' + | 
|                         '\n' + | 
|                         '2023-09-11 00:00:00' | 
|                 }], | 
|                 // 表单数据 | 
|                 form: { | 
|                     id: null, | 
|                     worktypeStatus: '' | 
|                 }, | 
|                 // 验证规则 | 
|                 rules: { | 
|                 }, | 
|                 tableData: [] | 
|             } | 
|         }, | 
|         created () { | 
|             this.config({ | 
|                 api: '/business/dispatchUnit', | 
|                 'field.id': 'id' | 
|             }) | 
|         } | 
|     } | 
| </script> | 
|   | 
| <style lang="scss" scoped> | 
|     .box { | 
|         width: 100%; | 
|         .box_label { | 
|             font-size: 20px; | 
|             font-weight: 600; | 
|             margin-bottom: 10px; | 
|         } | 
|         .box_list { | 
|             width: 100%; | 
|             display: flex; | 
|             align-items: center; | 
|             flex-wrap: wrap; | 
|             justify-content: space-between; | 
|             .box_list_item { | 
|                 width: 33.3%; | 
|                 display: flex; | 
|                 align-items: center; | 
|                 margin-top: 10px; | 
|                 .box_list_item_label { | 
|                     flex-shrink: 0; | 
|                     font-size: 14px; | 
|                     color: black; | 
|                 } | 
|                 .box_list_item_val { | 
|                     flex: 1; | 
|                     font-size: 14px; | 
|                     color: black; | 
|                 } | 
|             } | 
|         } | 
|         .box_x { | 
|             width: 100%; | 
|             height: 1px; | 
|             background: #ececec; | 
|             margin: 20px 0; | 
|         } | 
|         .box_fa { | 
|             font-size: 14px; | 
|             color: black; | 
|             margin-bottom: 20px; | 
|         } | 
|         .box_videos { | 
|             width: 100%; | 
|             display: flex; | 
|             flex-wrap: wrap; | 
|             align-items: center; | 
|             margin-top: 20px; | 
|             .box_videos_item { | 
|                 width: 300px; | 
|                 padding: 5px; | 
|                 box-sizing: border-box; | 
|                 display: flex; | 
|                 align-items: start; | 
|                 border: 1px solid #ececec; | 
|                 margin-right: 20px; | 
|                 margin-bottom: 20px; | 
|                 &:last-child { | 
|                     margin-right: 0 !important; | 
|                 } | 
|                 video { | 
|                     flex-shrink: 0; | 
|                     width: 100px; | 
|                     height: 100px; | 
|                 } | 
|                 .box_videos_item_info { | 
|                     flex: 1; | 
|                     font-size: 14px; | 
|                     color: black; | 
|                     margin-left: 5px; | 
|                 } | 
|             } | 
|         } | 
|     } | 
| </style> |