<template> 
 | 
    <GlobalWindow 
 | 
        :title="title" 
 | 
        width="100%" 
 | 
        :visible.sync="visible" 
 | 
        :confirm-working="isWorking" 
 | 
        @confirm="confirm" 
 | 
    > 
 | 
        <div class="info"> 
 | 
            <div class="info_list"> 
 | 
                <div class="info_list_item"> 
 | 
                    <div class="info_list_item_label">派遣单位:</div> 
 | 
                    <div class="info_list_item_val">{{form.name}}</div> 
 | 
                </div> 
 | 
                <div class="info_list_item"> 
 | 
                    <div class="info_list_item_label">派遣单位信用代码:</div> 
 | 
                    <div class="info_list_item_val">{{form.code}}</div> 
 | 
                </div> 
 | 
                <div class="info_list_item"> 
 | 
                    <div class="info_list_item_label">派遣单位状态:</div> 
 | 
                    <div class="info_list_item_val" v-if="form.unitStatus === 0">待审核</div> 
 | 
                    <div class="info_list_item_val" style="color: green;" v-if="form.unitStatus === 1">审核通过</div> 
 | 
                    <div class="info_list_item_val" style="color: red;" v-if="form.unitStatus === 2">审核不通过</div> 
 | 
                </div> 
 | 
                <div class="info_list_item"> 
 | 
                    <div class="info_list_item_label">派遣单位详述:</div> 
 | 
                    <div class="info_list_item_val">{{form.content}}</div> 
 | 
                </div> 
 | 
            </div> 
 | 
            <div class="info_btns"> 
 | 
                <el-button type="primary">修改派遣单位</el-button> 
 | 
                <el-button type="primary">添加工种</el-button> 
 | 
            </div> 
 | 
            <div class="info_table"> 
 | 
                <div class="info_table_item" v-for="(item, index) in form.duSolutionList" :key="index"> 
 | 
                    <div class="info_table_item_label">保险方案:{{item.solutionName}}</div> 
 | 
                    <div class="info_table_item_content"> 
 | 
                        <el-table 
 | 
                            :data="item.duWorktypeList" 
 | 
                            border 
 | 
                            style="width: 100%"> 
 | 
                            <el-table-column label="序号" width="80px"> 
 | 
                                <template slot-scope="scope"> 
 | 
                                    <span>{{scope.$index + 1}}</span> 
 | 
                                </template> 
 | 
                            </el-table-column> 
 | 
                            <el-table-column 
 | 
                                prop="workTypeName" 
 | 
                                label="所属工种"> 
 | 
                            </el-table-column> 
 | 
                            <el-table-column 
 | 
                                prop="name" 
 | 
                                label="操作视频"> 
 | 
                                <template slot-scope="{row}"> 
 | 
                                    <video loop controls width="150px" height="150px" :src="row.videoUrlFull"></video> 
 | 
                                </template> 
 | 
                            </el-table-column> 
 | 
                            <el-table-column 
 | 
                                prop="checkDate" 
 | 
                                label="审核通过日期"> 
 | 
                            </el-table-column> 
 | 
                            <el-table-column 
 | 
                                label="状态"> 
 | 
                                <template slot-scope="{row}"> 
 | 
                                    <span v-if="row.status === 0">待审核</span> 
 | 
                                    <span v-if="row.status === 1">审核通过</span> 
 | 
                                    <span v-if="row.status === 2">审核不通过</span> 
 | 
                                </template> 
 | 
                            </el-table-column> 
 | 
                            <el-table-column 
 | 
                                label="操作"> 
 | 
                                <template slot-scope="scope"> 
 | 
                                    <el-button type="text" style="color: red;" v-if="scope.row.status === 2" @click="dele(scope.row.id, index, scope.$index)">删除</el-button> 
 | 
                                </template> 
 | 
                            </el-table-column> 
 | 
                        </el-table> 
 | 
                    </div> 
 | 
                </div> 
 | 
            </div> 
 | 
            <div class="info_status"> 
 | 
                <div class="info_status_label">审核流程</div> 
 | 
                <div class="info_status_list"> 
 | 
                    <el-timeline :reverse="reverse"> 
 | 
                        <el-timeline-item 
 | 
                            v-for="(activity, index) in form.duLogList" 
 | 
                            :key="index"> 
 | 
                            <div style="display: flex; flex-direction: column;"> 
 | 
                                <span style="font-size: 16px; font-weight: 400; color: black;"> 
 | 
                                    {{activity.title}} 
 | 
                                    <span style="font-size: 16px; font-weight: 400; color: black; margin-left: 10px;" v-if="activity.objType === 5 || activity.objType === 6 || activity.objType === 1 || activity.objType === 2"> 
 | 
                                        提交意见: - 
 | 
                                    </span> 
 | 
                                </span> 
 | 
                                <span style="margin-top: 5px; font-size: 12px; font-weight: 400; color: #999999;"> 
 | 
                                    操作员-{{activity.creatorName}}({{activity.companyName}}){{activity.createDate}} 
 | 
                                </span> 
 | 
                            </div> 
 | 
                        </el-timeline-item> 
 | 
                    </el-timeline> 
 | 
                </div> 
 | 
            </div> 
 | 
        </div> 
 | 
    </GlobalWindow> 
 | 
</template> 
 | 
  
 | 
<script> 
 | 
  import BaseOpera from '@/components/base/BaseOpera' 
 | 
  import GlobalWindow from '@/components/common/GlobalWindow' 
 | 
  import { getById } from '@/api/business/dispatchUnit' 
 | 
  import { deleteById } from '@/api/business/duWorktype' 
 | 
  export default { 
 | 
    name: 'OperaDispatchUnitWindow', 
 | 
    extends: BaseOpera, 
 | 
    components: { GlobalWindow }, 
 | 
    data () { 
 | 
      return { 
 | 
        // 表单数据 
 | 
        form: { 
 | 
          id: null, 
 | 
          name: '', 
 | 
          code: '', 
 | 
          content: '', 
 | 
          unitStatus: '', 
 | 
          duLogList: [], 
 | 
          duSolutionList: [], 
 | 
          saveDuSolutionDTOList: [ 
 | 
            { 
 | 
              id: '', 
 | 
              saveDuWorkTypeDTOList: [ 
 | 
                { 
 | 
                  videoUrl: '', 
 | 
                  workTypeId: '', 
 | 
                  file: { 
 | 
                    videourl: '', 
 | 
                    videourlfull: '' 
 | 
                  } 
 | 
                } 
 | 
              ], 
 | 
              typeWork: [], 
 | 
              solutionId: '' 
 | 
            } 
 | 
          ] 
 | 
        }, 
 | 
        tableData: [], 
 | 
        insuranceScheme: [], 
 | 
        reverse: true, 
 | 
        activities: [{ 
 | 
          content: '活动按期开始', 
 | 
          timestamp: '2018-04-15' 
 | 
        }, { 
 | 
          content: '通过审核', 
 | 
          timestamp: '2018-04-13' 
 | 
        }, { 
 | 
          content: '创建成功', 
 | 
          timestamp: '2018-04-11' 
 | 
        }] 
 | 
      } 
 | 
    }, 
 | 
    created () { 
 | 
      this.config({ 
 | 
        api: '/business/dispatchUnit', 
 | 
        'field.id': 'id' 
 | 
      }) 
 | 
    }, 
 | 
    methods: { 
 | 
      dele (id, b, c) { 
 | 
        this.$confirm('此操作将永久删除该工种, 是否继续?', '提示', { 
 | 
          confirmButtonText: '确定', 
 | 
          cancelButtonText: '取消', 
 | 
          type: 'warning' 
 | 
        }).then(() => { 
 | 
          deleteById(id) 
 | 
            .then(res => { 
 | 
              this.$message.success('删除成功') 
 | 
              this.getDetails() 
 | 
            }) 
 | 
        }).catch(() => { 
 | 
  
 | 
        }); 
 | 
      }, 
 | 
      open (title, target) { 
 | 
        this.title = title 
 | 
        this.form.id = target.id 
 | 
        this.visible = true 
 | 
        this.getDetails() 
 | 
      }, 
 | 
      async getDetails() { 
 | 
        let res = await getById(this.form.id) 
 | 
        for (const key in this.form) { 
 | 
          this.form[key] = res[key] 
 | 
        } 
 | 
      } 
 | 
    } 
 | 
  } 
 | 
</script> 
 | 
  
 | 
<style lang="scss" scoped> 
 | 
    .info { 
 | 
        width: 100%; 
 | 
        .info_list { 
 | 
            width: 100%; 
 | 
            display: flex; 
 | 
            align-items: center; 
 | 
            flex-wrap: wrap; 
 | 
            .info_list_item { 
 | 
                width: 33.3%; 
 | 
                display: flex; 
 | 
                align-items: center; 
 | 
                margin-bottom: 15px; 
 | 
                .info_list_item_label { 
 | 
                    flex-shrink: 0; 
 | 
                    width: 150px; 
 | 
                    font-size: 14px; 
 | 
                    color: black; 
 | 
                } 
 | 
                .info_list_item_val { 
 | 
                    flex: 1; 
 | 
                    font-size: 14px; 
 | 
                    color: black; 
 | 
                } 
 | 
            } 
 | 
        } 
 | 
        .info_btns { 
 | 
            width: 100%; 
 | 
            display: flex; 
 | 
            align-items: center; 
 | 
            margin-bottom: 15px; 
 | 
        } 
 | 
        .info_table { 
 | 
            width: 100%; 
 | 
            display: flex; 
 | 
            flex-direction: column; 
 | 
            margin-bottom: 15px; 
 | 
            .info_table_item { 
 | 
                width: 100%; 
 | 
                display: flex; 
 | 
                flex-direction: column; 
 | 
                margin-bottom: 15px; 
 | 
                &:last-child { 
 | 
                    margin: 0 !important; 
 | 
                } 
 | 
                .info_table_item_label { 
 | 
                    font-size: 14px; 
 | 
                    color: black; 
 | 
                    margin-bottom: 10px; 
 | 
                } 
 | 
                .info_table_item_content { 
 | 
                    width: 100%; 
 | 
                } 
 | 
            } 
 | 
        } 
 | 
        .info_status { 
 | 
            width: 100%; 
 | 
            .info_status_label { 
 | 
                width: 100%; 
 | 
                font-size: 18px; 
 | 
                font-weight: bold; 
 | 
                margin-bottom: 15px; 
 | 
            } 
 | 
        } 
 | 
    } 
 | 
</style> 
 |