Mr.Shi

MrShi

2024-01-31 7edf702fbbadcb1661da4c4331dab23f9b7f11fb

 platform/src/components/business/OperaDispatchUnitWindow.vue

@@ -1,244 +1,293 @@
<template>
    <GlobalWindow
        :title="title"
        width="50%"
        width="100%"
        :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-form :model="form" ref="form" :rules="rules">
            <el-form-item label="派遣单位名称" prop="name">
                <el-input v-model="form.name" placeholder="请输入" v-trim/>
            </el-form-item>
            <el-form-item label="派遣单位信用代码" prop="code">
                <el-input v-model="form.code" placeholder="请输入" v-trim/>
            </el-form-item>
            <el-form-item label="派遣单位描述" prop="content">
                <el-input v-model="form.content" placeholder="请输入" v-trim/>
            </el-form-item>
        </el-form>
        <div class="list">
            <el-button type="primary" style="margin-bottom: 15px;" @click="add">添加方案</el-button>
            <div class="list_item" v-for="(item, index) in form.saveDuSolutionDTOList" :key="index">
                <div class="list_item_input">
                    <div class="list_item_input_label"><span>*</span>保险方案</div>
                    <div class="list_item_input_val">
                        <el-select v-model="item.solutionId" @change="changeTypeWork($event, index)" placeholder="请选择">
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                v-for="item in insuranceScheme"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </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 style="display: flex; align-items: center;">
                            <el-button type="primary" @click="addItem(index)">添加</el-button>
                            <el-button type="danger" @click="deleItem(index)">删除</el-button>
                        </div>
                    </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 class="list_item_table">
                    <el-table
                        :data="item.saveDuWorkTypeDTOList"
                        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="name"
                            label="所属工种">
                            <template slot-scope="scope">
                                <el-select v-model="scope.row.workTypeId" @change="changeGZ($event, index, scope.$index)" placeholder="请选择">
                                    <el-option
                                        v-for="item in item.typeWork"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="address"
                            label="操作视频（非必填）">
                            <template slot-scope="scope">
                                <div style="width: 100px; height: 100px;">
                                    <UploadAvatarVideo :uploadData="{ folder: 'unit' }" :file="scope.row.file" @uploadSuccess="result($event, index, scope.$index)" />
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="操作"
                            width="90"
                            fixed="right">
                            <template slot-scope="scope">
                                <el-button type="text" @click="dele(index, scope.$index)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </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: true,
                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'
            })
        }
import BaseOpera from '@/components/base/BaseOpera'
import GlobalWindow from '@/components/common/GlobalWindow'
import UploadAvatarVideo from '@/components/common/UploadAvatarVideo'
import { all } from '@/api/business/solutions'
import { findListByDTO } from '@/api/business/worktype'
export default {
  name: 'OperaDispatchUnitWindow',
  extends: BaseOpera,
  components: { GlobalWindow, UploadAvatarVideo },
  data () {
    return {
      // 表单数据
      form: {
        id: null,
        name: '',
        code: '',
        content: '',
        saveDuSolutionDTOList: [
          {
            id: '',
            saveDuWorkTypeDTOList: [
              {
                videoUrl: '',
                workTypeId: '',
                workTypeName: '',
                file: {
                  videourl: '',
                  videourlfull: ''
                }
              }
            ],
            typeWork: [],
            solutionId: '',
            solutionName: ''
          }
        ]
      },
      // 验证规则
      rules: {
        name: [
          { required: true, message: '请输入派遣单位名称' }
        ],
        code: [
          { required: true, message: '请输入派遣单位信用代码' }
        ],
        content: [
          { required: true, message: '请输入派遣单位描述' }
        ]
      },
      insuranceScheme: []
    }
  },
  created () {
    this.config({
      api: '/business/dispatchUnit',
      'field.id': 'id'
    })
    all({})
      .then(res => {
        this.insuranceScheme = res
      })
  },
  methods: {
    open (title, target) {
      this.title = title
      this.visible = true
      this.form.saveDuSolutionDTOList = [
        {
          id: '',
          saveDuWorkTypeDTOList: [
            {
              videoUrl: '',
              workTypeId: '',
              workTypeName: '',
              file: {
                videourl: '',
                videourlfull: ''
              }
            }
          ],
          typeWork: [],
          solutionId: '',
          solutionName: ''
        }
      ]
      // 新建
      if (target == null) {
        this.$nextTick(() => {
          this.$refs.form.resetFields()
          this.form[this.configData['field.id']] = null
        })
        return
      }
      // 编辑
      this.$nextTick(() => {
        for (const key in this.form) {
          this.form[key] = target[key]
        }
      })
    },
    // 切换工种
    changeGZ(a, b, c) {
      let text = ''
      this.form.saveDuSolutionDTOList[b].typeWork.forEach(item => {
        if (item.id === a) {
          text = item.name
        }
      })
      this.form.saveDuSolutionDTOList[b].saveDuWorkTypeDTOList[c].workTypeName = text
    },
    // 切换方案
    changeTypeWork(id, index) {
      findListByDTO({ queryType: 0, id })
        .then(res => {
          this.form.saveDuSolutionDTOList[index].typeWork = res
        })
      let text = ''
      this.insuranceScheme.forEach(item => {
        if (item.id === id) {
          text = item.name
        }
      })
      this.form.saveDuSolutionDTOList[index].solutionName = text
    },
    add() {
      this.form.saveDuSolutionDTOList.unshift({
        id: '',
        saveDuWorkTypeDTOList: [
          {
            videoUrl: '',
            workTypeId: '',
            file: {
              videourl: '',
              videourlfull: ''
            }
          }
        ],
        solutionId: ''
      })
    },
    addItem(index) {
      this.form.saveDuSolutionDTOList[index].saveDuWorkTypeDTOList.push({
        videoUrl: '',
        workTypeId: '',
        file: {
          videourl: '',
          videourlfull: ''
        }
      })
    },
    deleItem(index) {
      if (this.form.saveDuSolutionDTOList.length === 1) {
        this.$message.warning('至少保留一项内容')
        return
      }
      this.form.saveDuSolutionDTOList.splice(index, 1)
    },
    result(e, a, b) {
      this.form.saveDuSolutionDTOList[a].saveDuWorkTypeDTOList[b].videoUrl = e.imgurl
    },
    dele(a, b) {
      if (this.form.saveDuSolutionDTOList[a].saveDuWorkTypeDTOList.length === 1) {
        this.$message.warning('至少保留一项内容')
        return
      }
      this.form.saveDuSolutionDTOList[a].saveDuWorkTypeDTOList.splice(b, 1)
    }
  }
}
</script>

<style lang="scss" scoped>
    .box {
    .list {
        width: 100%;
        .box_label {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 10px;
        }
        .box_list {
        margin-bottom: 20px;
        .list_item {
            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;
            margin-bottom: 20px;
            &:last-child {
                margin: 0 !important;
            }
            .list_item_input {
                width: 100%;
                margin-bottom: 15px;
                .list_item_input_label {
                    margin-bottom: 10px;
                    font-size: 14px;
                    color: black;
                    color: #606266;
                    span {
                        color: red;
                        margin-right: 4px;
                    }
                }
                .box_list_item_val {
                    flex: 1;
                    font-size: 14px;
                    color: black;
                .list_item_input_val {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                }
            }
        }
        .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;
                }
            .list_item_table {

            }
        }
    }