优化

MrShi

2025-08-19 30e858fa504b268b9b436afca0a1259cf6e8c488

 admin/src/components/business/OperaWorkorderDetailSheWindow.vue

@@ -1,203 +1,522 @@
<template>
  <GlobalWindow
    :title="title"
    :visible.sync="visible"
    :confirm-working="isWorking"
    @confirm="confirm"
  >
    <el-form :model="form" ref="form" :rules="rules">
      <el-form-item label="创建人编码" prop="creator">
        <el-input v-model="form.creator" placeholder="请输入创建人编码" v-trim/>
      </el-form-item>
      <el-form-item label="创建时间" prop="createDate">
        <el-date-picker v-model="form.createDate" value-format="yyyy-MM-dd" placeholder="请输入创建时间"></el-date-picker>
      </el-form-item>
      <el-form-item label="更新人编码" prop="editor">
        <el-input v-model="form.editor" placeholder="请输入更新人编码" v-trim/>
      </el-form-item>
      <el-form-item label="更新时间" prop="editDate">
        <el-date-picker v-model="form.editDate" value-format="yyyy-MM-dd" placeholder="请输入更新时间"></el-date-picker>
      </el-form-item>
      <el-form-item label="是否删除0否 1是" prop="isdeleted">
        <el-input v-model="form.isdeleted" placeholder="请输入是否删除0否 1是" v-trim/>
      </el-form-item>
      <el-form-item label="所属分类编（关联category)" prop="categoryId">
        <el-input v-model="form.categoryId" placeholder="请输入所属分类编（关联category)" v-trim/>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" placeholder="请输入备注" v-trim/>
      </el-form-item>
      <el-form-item label="状态 0待确认/待初审 1待分配/待终审 2待处理  3 已撤回 4已处理" prop="status">
        <el-input v-model="form.status" placeholder="请输入状态 0待确认/待初审 1待分配/待终审 2待处理  3 已撤回 4已处理" v-trim/>
      </el-form-item>
      <el-form-item label="排序码" prop="sortnum">
        <el-input v-model="form.sortnum" placeholder="请输入排序码" v-trim/>
      </el-form-item>
      <el-form-item label="类型 0位置责任人 1班长 2物业主管 3工程师 4SHE负责人 5SHE工单邮箱抄送人" prop="type">
        <el-input v-model="form.type" placeholder="请输入类型 0位置责任人 1班长 2物业主管 3工程师 4SHE负责人 5SHE工单邮箱抄送人" v-trim/>
      </el-form-item>
      <el-form-item label="上报人员编码（关联member)" prop="memberId">
        <el-input v-model="form.memberId" placeholder="请输入上报人员编码（关联member)" v-trim/>
      </el-form-item>
      <el-form-item label="部门编码" prop="companyId">
        <el-input v-model="form.companyId" placeholder="请输入部门编码" v-trim/>
      </el-form-item>
      <el-form-item label="上报时间" prop="submitDate">
        <el-input v-model="form.submitDate" placeholder="请输入上报时间" v-trim/>
      </el-form-item>
      <el-form-item label="SHE涉及人员类型 0本人 1同事 2供应商" prop="memberType">
        <el-input v-model="form.memberType" placeholder="请输入SHE涉及人员类型 0本人 1同事 2供应商" v-trim/>
      </el-form-item>
      <el-form-item label="SHE涉及人员企业编码集合" prop="memberQwids">
        <el-input v-model="form.memberQwids" placeholder="请输入SHE涉及人员企业编码集合" v-trim/>
      </el-form-item>
      <el-form-item label="SHE涉及人员供应商集合" prop="memberNames">
        <el-input v-model="form.memberNames" placeholder="请输入SHE涉及人员供应商集合" v-trim/>
      </el-form-item>
      <el-form-item label="发生地点/位置编码（关联category）" prop="localtionId">
        <el-input v-model="form.localtionId" placeholder="请输入发生地点/位置编码（关联category）" v-trim/>
      </el-form-item>
      <el-form-item label="是否外部就医 0否 1是" prop="outJiuyi">
        <el-input v-model="form.outJiuyi" placeholder="请输入是否外部就医 0否 1是" v-trim/>
      </el-form-item>
      <el-form-item label="是否医务室 0否 1是" prop="isYiwushi">
        <el-input v-model="form.isYiwushi" placeholder="请输入是否医务室 0否 1是" v-trim/>
      </el-form-item>
      <el-form-item label="是否受伤 0否 1是" prop="isHurted">
        <el-input v-model="form.isHurted" placeholder="请输入是否受伤 0否 1是" v-trim/>
      </el-form-item>
      <el-form-item label="是否和工作相关" prop="workRelated">
        <el-input v-model="form.workRelated" placeholder="请输入是否和工作相关" v-trim/>
      </el-form-item>
      <el-form-item label="事件说明" prop="eventInfo">
        <el-input v-model="form.eventInfo" placeholder="请输入事件说明" v-trim/>
      </el-form-item>
      <el-form-item label="邮件通知人员编码集合" prop="emialMemberIds">
        <el-input v-model="form.emialMemberIds" placeholder="请输入邮件通知人员编码集合" v-trim/>
      </el-form-item>
      <el-form-item label="企业微信通知人员编码集合" prop="qwnoticeMemberIds">
        <el-input v-model="form.qwnoticeMemberIds" placeholder="请输入企业微信通知人员编码集合" v-trim/>
      </el-form-item>
      <el-form-item label="发现时间" prop="happenTime">
        <el-input v-model="form.happenTime" placeholder="请输入发现时间" v-trim/>
      </el-form-item>
      <el-form-item label="风险类型(关联category）" prop="typeId">
        <el-date-picker v-model="form.typeId" value-format="yyyy-MM-dd" placeholder="请输入风险类型(关联category）"></el-date-picker>
      </el-form-item>
      <el-form-item label="风险描述" prop="riskInfo">
        <el-input v-model="form.riskInfo" placeholder="请输入风险描述" v-trim/>
      </el-form-item>
      <el-form-item label="当前物业主管编码（关联member）" prop="managerId">
        <el-input v-model="form.managerId" placeholder="请输入当前物业主管编码（关联member）" v-trim/>
      </el-form-item>
      <el-form-item label="当前处理人员编码（关联member)" prop="dealerId">
        <el-input v-model="form.dealerId" placeholder="请输入当前处理人员编码（关联member)" v-trim/>
      </el-form-item>
      <el-form-item label="分配时间" prop="dispatchTime">
        <el-date-picker v-model="form.dispatchTime" value-format="yyyy-MM-dd" placeholder="请输入分配时间"></el-date-picker>
      </el-form-item>
      <el-form-item label="分配备注" prop="dispatchInfo">
        <el-input v-model="form.dispatchInfo" placeholder="请输入分配备注" v-trim/>
      </el-form-item>
      <el-form-item label="处理时间" prop="dealTime">
        <el-date-picker v-model="form.dealTime" value-format="yyyy-MM-dd" placeholder="请输入处理时间"></el-date-picker>
      </el-form-item>
      <el-form-item label="处理备注" prop="dealInfo">
        <el-input v-model="form.dealInfo" placeholder="请输入处理备注" v-trim/>
      </el-form-item>
      <el-form-item label="DCA问题编码" prop="problemId">
        <el-input v-model="form.problemId" placeholder="请输入DCA问题编码" v-trim/>
      </el-form-item>
      <el-form-item label="DCA问题数量" prop="problemNum">
        <el-input v-model="form.problemNum" placeholder="请输入DCA问题数量" v-trim/>
      </el-form-item>
      <el-form-item label="位置地点路径名称" prop="locationName">
        <el-input v-model="form.locationName" 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>
      :title="title"
      width="85%"
      :visible.sync="visible"
      :confirm-working="isWorking"
      @confirm="confirm">
    <div class="modal_wrap">
      <div class="modal_content">
        <div class="header">
<!--          <img v-if="info.status == '0'" class="head_bg"
               src="@/assets/task/bg_shenhe_fail@2x.png" alt="">-->
          <img v-if="info.status == '4' || info.status == '3'||info.status == '5'||info.status == '6'" class="head_bg"
               src="@/assets/task/bg_shenhe_pass@2x.png" alt="">
          <img v-else class="head_bg" src="@/assets/task/bg_shenhe@2x.png" alt="">
          <div class="left">
            <div class="h1">{{ cateList[type] }}</div>
            <div class="time">提交时间：{{ info.createDate }}</div>
          </div>
          <div class="right"  :style="(info.status ==0 ||info.status ==1 || info.status ==2)?'min-width: 90px':''"   :class="{ scs: info.status == '3' || info.status == '4' || info.status == '5',  msg: info.status == '6' }">{{statusMap[info.status] }}</div>
        </div>
        <div class="info">
          <div class="title">工单信息</div>
          <div class="list">
            <div class="item">
              <div class="label">员工姓名</div>
              <div class="value">{{ info.memberName }} - {{ info.memberPhone || '[无手机号]' }}</div>
            </div>
            <div class="item">
              <div class="label">所属部门</div>
              <div class="value">{{ info.companyName }} </div>
            </div>
            <div class="item">
              <div class="label">上报时间</div>
              <div class="value">{{ info.submitDate +' '}}</div>
            </div>
            <div class="item">
              <div class="label">涉及人员</div>
              <div class="value" v-if="info.memberType == 2">供应商-{{info.memberNames}}</div>
              <div class="value" v-else-if="info.memberType == 1">同事-{{info.memberNames}}</div>
              <div class="value" v-else>本人</div>
            </div>
            <div class="item">
              <div class="label">发现时间</div>
              <div class="value">{{ info.happenTime }}</div>
            </div>
            <div class="item">
              <div class="label">外部就医</div>
              <div class="value">{{ info.outJiuyi == "0" ? "否" : "是" }}</div>
            </div>
            <div class="item" v-if="info.outJiuyi == '0'">
              <div class="label">医务室</div>
              <div class="value">{{ info.isYiwushi == "0" ? "否" : "是" }}</div>
            </div>
            <div class="item" v-if="info.isYiwushi == '0'">
              <div class="label">是否受伤</div>
              <div class="value">{{ info.isHurted == "0" ? "否" : "是" }}</div>
            </div>
            <div class="item">
              <div class="label">伤害类型</div>
              <div class="value">{{ info.typeName }}</div>
            </div>
            <div class="item">
              <div class="label">和工作相关</div>
              <div class="value">{{ info.workRelated == "0" ? "否" : "是" }}</div>
            </div>
            <div class="item">
              <div class="label">发生地点</div>
              <div class="value">{{ info.locationName }}</div>
            </div>
            <div class="item">
              <div class="label">具体位置</div>
              <div class="value">{{ info.remark }}</div>
            </div>
            <div class="item">
              <div class="label">事件说明</div>
              <div class="value">{{ info.eventInfo || '-'}}</div>
            </div>
            <div class="item" style="width: 100%">
          <div class="label">图片</div>
          <div class="value" v-if="info.multifileList ==null || !info.multifileList.length">无</div>
          <div class="value" v-if="info.multifileList !=null && info.multifileList.length">
            <div v-for="item in info.multifileList" :key="item.id" style="display: inline;margin-right: 20px">
              <video
                  v-if="item.fileurlFull && item.fileurlFull.endsWith('.mp4')"
                  ref="videoRef"
                  controls
                  preload="auto"
                  style="width: 80px;height: 80px;object-fit: contain;"
                  :src="item.fileurlFull"
              />
              <el-image
                  v-else-if="item.fileurlFull"
                  style="width:80px; height: 80px"
                  :src="item.fileurlFull"
                  :preview-src-list="[item.fileurlFull]">
              </el-image>
            </div>
          </div>
        </div>
          </div>
        </div>
      </div>
      <div class="side" v-if="false">
        <div class="side_title">操作历史</div>
        <div class="list" v-if=" info.logList != null && info.logList.length != 0
        ">
          <div class="item" v-for="(item, index) in infologList" :key="item.id">
            <div class="separate" v-if="index < info.logList.length - 1"></div>
            <div class="info">
              <img src="@/assets/icons/ic_tongguo.png" class="iconnew" v-if="item.status == 2" />
              <img src="@/assets/icons/ic_dangqian.png" class="iconnew" v-if="item.status == 1" />
              <img src="@/assets/icons/ic_jujue.png" class="iconnew" v-if="item.status == 3" />
              <img src="@/assets/icons/ic_grey.png" class="iconnew" v-if="item.status == null || item.status == 0" />
              <div style="display: inline" v-if="item.approveType != 1">
                <img v-if="item.faceImg != null && item.faceImg != ''" :src="item.faceImg" class="avatar" alt="" />
                <img v-if="item.faceImg == null || item.faceImg == ''" src="@/assets/avatar/man.png" class="avatar"
                     alt="" />
              </div>
              <div style="display: inline" v-if="item.approveType == 1">
                <img v-if="item.type != 1" src="@/assets/icons/ic_duoren.png" class="avatar" alt="" />
                <img v-if="item.type == 1" src="@/assets/icons/ic_chaosong.png" class="avatar" alt="" />
              </div>
              <div class="content">
                <div class="line">
                  <div class="name">{{ item.title }}</div>
                  <div class="time">{{ item.checkDate }}</div>
                </div>
                <div class="line">
                  <div class="company">
                    {{ item.memberName }}
                    <div style="display: inline" v-if="item.statusInfo != null && item.statusInfo != ''">
                      （<span :class="{ padding: item.statusInfo == '处理中' || item.status == '1' }">{{
                        item.statusInfo || ""
                      }}</span>）
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div v-if="
              item.approveType != 1 &&
              item.checkInfo != null &&
              item.checkInfo != ''
            " class="remark">
              {{ item.checkInfo || "" }}
            </div>
            <div v-if="item.approveType == 1" class="childList">
              <div class="m_content company" v-for="item1 in item.approveList" :key="item1.id">
                <img v-if="item1.faceImg != null && item1.faceImg != ''" :src="item1.faceImg" class="avatar" alt="" />
                <img v-if="item1.faceImg == null || item1.faceImg == ''" src="../../assets/avatar/man.png" class="avatar"
                     alt="" />
                <span> {{ item1.memberName }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--  -->
    <template v-slot:footer>
      <el-button @click="close">返回</el-button>
    </template>
  </GlobalWindow>
</template>

<script>
import BaseOpera from '@/components/base/BaseOpera'
import GlobalWindow from '@/components/common/GlobalWindow'
import {getById } from '@/api/business/workorder'
export default {
  name: 'OperaWorkorderWindow',
  extends: BaseOpera,
  components: { GlobalWindow },
  data () {
    return {
      // 表单数据
      form: {
        id: null,
        creator: '',
        createDate: '',
        editor: '',
        editDate: '',
        isdeleted: '',
        categoryId: '',
        remark: '',
        status: '',
        sortnum: '',
        type: '',
        memberId: '',
        companyId: '',
        submitDate: '',
        memberType: '',
        memberQwids: '',
        memberNames: '',
        localtionId: '',
        outJiuyi: '',
        isYiwushi: '',
        isHurted: '',
        workRelated: '',
        eventInfo: '',
        emialMemberIds: '',
        qwnoticeMemberIds: '',
        happenTime: '',
        typeId: '',
        riskInfo: '',
        managerId: '',
        dealerId: '',
        dispatchTime: '',
        dispatchInfo: '',
        dealTime: '',
        dealInfo: '',
        problemId: '',
        problemNum: '',
        locationName: '',
        code: ''
      id: '',
      type: null,
      title: '工单详情',
      info: {},
      statusMap: {
        0: '处理中',
        1: '处理中',
        2: '处理中',
        3: '已处理',
        4: '已处理',
        5: '已处理'
      },
      // 验证规则
      rules: {
      cateList: {
        0: 'SHE事件工单',
        1: 'DCA事件提交记录',
        2: 'DCA事件工单',
        3: '跌绊滑事件工单'
      }
    }
  },
  created () {
    this.config({
      api: '/business/workorder',
      'field.id': 'id'
    })
  },
  methods:{
    /**
     * 打开窗口
     *
     * @param title 窗口标题
     * @param target 行对象（仅编辑需该参数）
     */
  methods: {
    open (title, target) {
      this.title = title
      this.visible = true
      this.$nextTick(() => {
        for (const key in this.form) {
          this.form[key] = target[key]
      this.info = target
      this.getDetail()
      this.type = this.info.type
    },
    close () {
      this.visible = false
    },
    getDetail () {
      getById(this.info.id).then(res => {
        this.info = res
        if (this.info.logList && this.info.logList.length > 0) {
          this.info.logList.forEach(item => {
            if (item.approveList && item.approveList.length == 1 && item.type !== 1) {
              item.title = item.approveList[0].title
              item.faceImg = item.approveList[0].faceImg
              item.memberName = item.approveList[0].memberName
              item.statusInfo = item.approveList[0].statusInfo
              item.approveList = []
            }
          })
        }
      })
    }
    },
    reject () { },
    handleAvatarSuccess () { },
    beforeAvatarUpload () { }
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/style/variables.scss";

.upload_box {
  width: 84px;
  height: 84px;
  border-radius: 4px;
  background-color: #f7f7f7;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #999999;
  border: 1px solid #e4e4e4;

  .icon {
    font-size: 24px;
  }

  .text {
    font-size: 12px;
  }
}

.side_title {
  font-weight: 600;
  font-size: 18px;
  color: #111111;
  margin-bottom: 20px;
  margin-left: 20px;
  margin-top: 20px;
}

.modal_wrap {
  display: flex;
  height: auto;

  .modal_content {
    flex: 1;
    padding: 0px 30px;
    border-radius: 8px;
    overflow: hidden;
    height: 100%;

    .title {
      font-weight: 600;
      font-size: 18px;
      color: #333333;
      margin-bottom: 20px;
      margin-top: 30px;
    }

    .info {
      .list {
        display: flex;
        flex-wrap: wrap;

        .item {
          display: flex;
          width: 50%;
          font-size: 14px;
          margin-bottom: 20px;

          &:nth-of-type(2n) {
            width: 50%;
          }

          .label {
            color: #888888;
            width: 100px;
          }

          .value {
             width: calc(100% - 100px);
            color: #111111;
          }
        }
      }
    }

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      vertical-align: center;
      padding: 20px 30px;
      margin: 0 -30px;
      border-radius: 8px 8px 0 0;
      position: relative;

      .head_bg {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 9;
      }

      .h1 {
        font-weight: 600;
        font-size: 22px;
        color: #111111;
        margin-bottom: 8px;
      }

      .time {
        font-size: 14px;
        color: #999999;
      }

      .right {
        height: 40px;
        font-size: 16px;
        color: #ffffff;
        line-height: 40px;
        padding: 0 20px;
        background: #207ff7;
        box-shadow: 4px 4px 0px 0px rgba(32, 127, 247, 0.16);
        border-radius: 16px 0px 16px 0px;
        position: relative;
        z-index: 99;
      }

      .scs {
        background-color: #00BA67;
      }

      .msg {
        background-color: #ED4545;
      }
    }

    .table_info {
      .name_wrap {
        display: flex;
        align-items: center;

        .avatar {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          margin-right: 12px;
        }

        .content {
          .line {
            display: flex;
          }

          .tag {
            color: #b2cbf9;
            border: 1px solid #b2cbf9;
            padding: 0px 4px;
            border-radius: 4px;
            margin-left: 6px;
          }
        }
      }
    }
  }

  .side {
    height: 100%;
    width: 420px;
    background: #ffffff;
    border-left: 20px solid #f7f7f7;

    .list {
      .item {
        padding: 8px 0;
        position: relative;

        .separate {
          position: absolute;
          border-left: 2px dashed #cccccc;
          left: 31px;
          height: calc(100% - 30px);
          top: 49px;
        }

        .avatar {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          margin: 0 12px 0 16px;
          //border: 1px solid;
        }

        .childList {
          display: flex;
          flex-wrap: wrap;
          margin-left: 100px;
        }

        .company {
          font-size: 13px;
          color: #888888;

          .status {
            color: $primaryColor;
          }
        }

        .m_content {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          margin-bottom: 4px;
        }

        .info {
          display: flex;
          align-items: center;
          margin-left: 20px;

          .icon {
            position: relative;
            z-index: 11;
            color: #53b76f;
            font-size: 24px;
          }

          .icon1 {
            position: relative;
            z-index: 11;
            color: deepskyblue;
            font-size: 24px;
          }

          .icon2 {
            position: relative;
            z-index: 11;
            color: #dc362e;
            font-size: 24px;
          }

          .iconnew {
            width: 24px;
            height: 24px;
          }

          .icon3 {
            position: relative;
            z-index: 11;
            color: gray;
            font-size: 24px;
          }

          .content {
            flex: 1;

            .line {
              display: flex;
              justify-content: space-between;
              align-content: center;
              margin-bottom: 6px;

              .status {
                color: #888888;
              }

              .padding {
                color: $primaryColor;
              }

              .name {
                font-weight: 600;
                font-size: 16px;
                color: #111111;
              }

              .time {
                color: #888888;
              }
            }
          }
        }

        .remark {
          background: #f7f7f7;
          border-radius: 4px;
          padding: 13px 15px;
          color: #666666;
          margin-left: 100px;
        }
      }
    }
  }
}
</style>