ll

liukangdong

2025-02-25 5857dfa10b70a061b8e4711dd8f18b585ac6fc23

 h5/pages/staff/task/vDangetAppr.vue

@@ -1,1202 +1,1470 @@
<template>
  <view class="main_app">
    <view class="status_wrap">
      <view class="name">{{ info.name }}提交的{{ cateList[type].name }}</view>
      <view v-if="info.status == '0'" class="status">{{
        statusMap[info.status]
      }}</view>
      <image
        v-if="info.status == '2'"
        src="@/static/ic_passed@2x.png"
        mode="widthFix"
        class="status_img"
      ></image>
      <image
        v-if="info.status == '3' || info.status == '6'"
        src="@/static/ic_refused@2x.png"
        mode="widthFix"
        class="status_img"
      ></image>
      <view>{{ info.content }}</view>
      <view class="file_list">
        <template v-for="item in info.submitFileList">
          <image
            v-if="item.type == 0"
            :key="item.id"
            :src="item.fileurlFull"
            mode="widthFix"
            class="img"
          />
          <video
            v-if="item.type == 1"
            :key="item.id"
            :src="item.fileurlFull"
            class="img"
            controls
          />
        </template>
      </view>
      <view class="text_wrap">
        <view class="line">
          <text class="label">隐患区域：</text>
          <text>{{ info.areaName }}</text>
        </view>
        <view class="line">
          <text class="label">提报人：</text>
          <text>{{ info.memberName }} {{ info.memberPhone }}</text>
        </view>
      </view>
    </view>
    <!--  -->
    <view class="emyty"></view>
    <view v-if="info.status == 1" class="module_list">
      <view class="item">
        <view class="label">处理结果</view>
        <!-- <view class="value">{{ info. }}</view> -->
      </view>
      <view class="item">
        <view class="label">整改前</view>
        <view class="value">
          <view
            class="adduser_list_item_ipt1_upload"
            v-for="(item, i) in dealBeforeFileList"
            :key="i"
            ><image
              v-if="item.type == 0"
              :src="item.fileurlFull"
              mode="widthFix"
            ></image
            ><video v-if="item.type == 1" :src="item.fileurlFull"></video
          ></view>
        </view>
      </view>
      <view class="item">
        <view class="label">整改后</view>
        <view class="value">
          <view
            class="adduser_list_item_ipt1_upload"
            v-for="(item, i) in dealAfterFileList"
            :key="i"
            ><image
              v-if="item.type == 0"
              :src="item.fileurlFull"
              mode="widthFix"
            ></image
            ><video v-if="item.type == 1" :src="item.fileurlFull"></video
          ></view>
        </view>
      </view>
      <view class="item">
        <view class="label">整改说明</view>
        <view class="value">{{ info.checkInfo }}</view>
      </view>
    </view>
    <!-- 流程 -->
    <view class="flow_wrap">
      <view class="flow_title">处理流程</view>
      <view
        class="list"
        v-if="
          info.approveDateVO != null && info.approveDateVO.approveList != null
        "
      >
        <view
          class="item"
          v-for="(item, index) in info.approveDateVO.approveList"
          :key="item.id"
        >
          <view class="separate"></view>
          <view class="avatar">
            <image
              class="img"
              :src="
                item.faceImg
                  ? item.faceImg
                  : require('@/static/meeting/common/default_user@2x.png')
              "
            />
            <image
              class="status"
              src="@/static/staff/liucheng_success@2x.png"
              mode="widthFix"
            />
          </view>
          <view class="content">
            <view class="head">
              <view class="event">{{ item.title }}</view>
              <view class="time">{{ item.checkDate }}</view>
            </view>
            <view class="name_wrap">
              <text
                >{{ item.memberName
                }}<text class="status" v-if="item.statusInfo"
                  >({{ item.statusInfo }})</text
                ></text
              >
            </view>
            <view v-if="item.checkInfo" class="remark">{{
              item.checkInfo
            }}</view>
            <!-- 抄送人 -->
            <view v-if="item.approveType == 1" class="children">
              <view
                class="child"
                v-for="child in item.approveList"
                :key="child.id"
              >
                <image
                  class="child_img"
                  :src="
                    child.faceImg
                      ? child.faceImg
                      : require('@/static/meeting/common/default_user@2x.png')
                  "
                />
                <view>{{ child.memberName }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="emyty"></view>
    <view class="main_footer">
      <view class="btn" @click="isShowBack = true">退回</view>
      <view class="btn transfer" @click="handleTransfer">转交</view>
      <view class="btn handle" @click="isShowHandle = true">处理</view>
    </view>

    <u-popup
      :show="isShowBack"
      :round="10"
      :safeAreaInsetBottom="true"
      mode="bottom"
      @close="isShowBack = false"
    >
      <view class="appr_modal">
        <view class="title">隐患退回</view>
        <view class="df_sb">
          <view>退回时间</view>
          <view @click="isShowBackDate = true" v-if="backParam.dealTime">{{
            backParam.dealTime.slice(0, 16)
          }}</view>
          <view @click="isShowBackDate = true" v-else class="placeholder9"
            >请选择</view
          >
        </view>

        <view class="label">图片/视频</view>
        <view class="upload_wrap">
          <view class="adduser_list_item_ipt1_upload" @click="showUpload = true"
            ><u-icon name="plus" color="rgb(153, 153, 153)" size="28"></u-icon
          ></view>
          <view
            class="adduser_list_item_ipt1_upload"
            v-for="(item, i) in submitFileList"
            :key="i"
            ><image
              v-if="item.type == 0"
              :src="item.fileurlFull"
              mode="widthFix"
            ></image
            ><video v-if="item.type == 1" :src="item.fileurlFull"></video
          ></view>
        </view>
        <view class="label">退回说明</view>
        <textarea
          v-model="backParam.checkInfo"
          placeholder="请详细描述现场情况，不少于10个字"
          placeholder-class="placeholder9"
        />
        <view class="back_footer">
          <view class="btn" @click="isShowBack = false">取消</view>
          <view class="btn agree" @click="onSubBack">提交</view>
        </view>
      </view>
    </u-popup>
    <!-- 处理 -->
    <u-popup
      :show="isShowHandle"
      :round="10"
      :safeAreaInsetBottom="true"
      mode="bottom"
      @close="isShowBack = false"
    >
      <view class="appr_modal">
        <view class="title">隐患整改</view>
        <view class="df_sb">
          <view>整改时间</view>
          <view @click="isShowHandleDate = true" v-if="handleParam.dealTime">{{
            handleParam.dealTime.slice(0, 16)
          }}</view>
          <view @click="isShowHandleDate = true" v-else class="placeholder9"
            >请选择</view
          >
        </view>

        <view class="label"><text>*</text>整改前</view>
        <view class="upload_wrap">
          <view
            class="adduser_list_item_ipt1_upload"
            @click="showUploadBe = true"
            ><u-icon name="plus" color="rgb(153, 153, 153)" size="28"></u-icon
          ></view>
          <view
            class="adduser_list_item_ipt1_upload"
            v-for="(item, i) in dealBeforeFileList"
            :key="i"
            ><image
              v-if="item.type == 0"
              :src="item.fileurlFull"
              mode="widthFix"
            ></image
            ><video v-if="item.type == 1" :src="item.fileurlFull"></video
          ></view>
        </view>
        <view class="label"><text>*</text>整改后</view>
        <view class="upload_wrap">
          <view
            class="adduser_list_item_ipt1_upload"
            @click="showUploadAf = true"
            ><u-icon name="plus" color="rgb(153, 153, 153)" size="28"></u-icon
          ></view>
          <view
            class="adduser_list_item_ipt1_upload"
            v-for="(item, i) in dealAfterFileList"
            :key="i"
            ><image
              v-if="item.type == 0"
              :src="item.fileurlFull"
              mode="widthFix"
            ></image
            ><video v-if="item.type == 1" :src="item.fileurlFull"></video
          ></view>
        </view>
        <view class="label">整改说明</view>
        <textarea
          v-model="handleParam.checkInfo"
          placeholder="请详细描述现场情况，不少于10个字"
          placeholder-class="placeholder9"
        />
        <view class="back_footer">
          <view class="btn" @click="isShowHandle = false">取消</view>
          <view class="btn agree" @click="onSubmit">提交</view>
        </view>
      </view>
    </u-popup>
    <!-- 上传 -->
    <u-popup :show="showUpload" @close="showUpload = false" closeOnClickOverlay>
      <view class="sel_upload_wrap">
        <view class="btn" @click="uploadImage">选择图片</view>
        <view class="btn" @click="uploadVideo">选择视频</view>
      </view>
    </u-popup>
    <u-popup
      :show="showUploadBe"
      @close="showUploadBe = false"
      closeOnClickOverlay
    >
      <view class="sel_upload_wrap">
        <view class="btn" @click="uploadBeImage">选择图片</view>
        <view class="btn" @click="uploadBeVideo">选择视频</view>
      </view>
    </u-popup>
    <u-popup
      :show="showUploadAf"
      @close="showUploadAf = false"
      closeOnClickOverlay
    >
      <view class="sel_upload_wrap">
        <view class="btn" @click="uploadAfImage">选择图片</view>
        <view class="btn" @click="uploadAfVideo">选择视频</view>
      </view>
    </u-popup>
    <!-- 转交 -->
    <u-popup
      :show="isShowTransfer"
      :round="10"
      safeAreaInsetBottom
      mode="bottom"
      @close="isShowTransfer = false"
    >
      <view class="appr_modal">
        <view class="title">选择员工</view>
        <view class="search_inp df_ac">
          <image
            class="mr12 search"
            src="@/static/ic_search@2x.png"
            mode="widthFix"
          ></image>
          <input
            v-model="transferModel.name"
            @blur="getMemList()"
            type="text"
            placeholder="搜索部门/人员"
            placeholder-style="color: #999999;"
          />
        </view>
        <view class="member_list">
          <view v-for="item in memberList" :key="item.id" class="line">
            <image
              :src="
                item.faceImgFull
                  ? item.faceImgFull
                  : require('@/static/meeting/common/default_user@2x.png')
              "
              class="avatar"
              mode=""
            ></image>
            <view class="content">
              <view class="info">
                <text class="name">{{ item.name }}</text>
                <!-- <text class="tag">tag</text> -->
              </view>
              <view class="depart">{{ item.companyName }}</view>
            </view>
            <image
              @click="changeMem(item)"
              v-if="transferParam.id == item.id"
              src="@/static/meeting/icon/ic_choose_sel@2x.png"
              mode="widthFix"
              class="checked"
            ></image>
            <image
              @click="changeMem(item)"
              v-else
              src="@/static/meeting/icon/ic_choose@2x.png"
              mode="widthFix"
              class="checked"
            ></image>
            <text></text>
          </view>
          <view class="empty"></view>
        </view>
        <view class="Transfer_footer">
          <view class="btn" @click="isShowTransfer = fale">取消</view>
          <view class="btn active" @click="enterTransfer">确认转交</view>
        </view>
      </view>
    </u-popup>
    <!-- 退回时间 -->
    <u-datetime-picker
      :show="isShowBackDate"
      @confirm="confirmBackDate"
      @cancel="isShowBackDate = false"
      mode="datetime"
    ></u-datetime-picker>

    <u-datetime-picker
      :show="isShowHandleDate"
      @confirm="confirmHandleDate"
      @cancel="isShowHandleDate = false"
      mode="datetime"
    ></u-datetime-picker>
  </view>
</template>

<script>
import {
  hiddenDangerDetail,
  uploadUrl,
  findHiddenAreaMemberList,
  dealHiddenDanger,
  transferHiddenDanger
} from '@/api'
import dayjs from 'dayjs'
export default {
  data() {
    return {
      isShowBack: false,
      param: {},
      info: {},

      id: '',
      type: '',
      cateList: [
        { name: '访客申请', id: 0 },
        { name: '访客报备', id: 1 },
        { name: '用车申请', id: 2 },
        { name: '隐患随手拍', id: 3 },
        { name: '物流车申请', id: 4 },
      ],
      statusMap: {
        0: '待审批',
        1: '审批中',
        2: '审批通过',
        3: '审批未通过',
        4: '已取消',
        5: '他人或签',
        6: '他人拒绝',
      },


      showUpload: false,
      isShowBackDate: false,
      submitFileList: [],
      backParam: {},

      isShowHandle: false,
      handleParam: {},
      isShowHandleDate: false,
      showUploadBe: false,
      showUploadAf: false,
      dealBeforeFileList: [],
      dealAfterFileList: [],

      isShowTransfer: false,
      transferParam: {},
      transferModel: {},
      pagination: {
        page: 1,
        capacity: 50
      },
      memberList: []
    }
  },
  onLoad(op) {
    this.id = op.id
    this.type = op.objType
    this.getDetail()
  },
  methods: {
    getDetail() {
      const { id } = this
      hiddenDangerDetail(id).then(res => {
        this.info = res.data
      })
    },
    onSubmit() {
      const { dealBeforeFileList, dealAfterFileList, handleParam } = this
      dealHiddenDanger({
        ...handleParam,
        dealBeforeFileList: dealBeforeFileList,
        dealAfterFileList: dealAfterFileList,
        status: 1,
        id: this.id
      }).then(res => {
        if (res.code === 200) {
          this.isShowHandle = false
          setTimeout(() => {
            uni.showToast({
              title: '操作成功',
              icon: 'success'
            })
          })
          uni.navigateBack()
        }
      })
    },
    enterTransfer() {
      const { transferParam, id } = this
      transferHiddenDanger({
        checkUserId: transferParam.id,
        id
      }).then(res => {
        if (res.code === 200) {
          this.isShowTransfer = false
          setTimeout(() => {
            uni.showToast({
              title: '操作成功',
              icon: 'success'
            })
          })
          uni.navigateBack()
        }
      })
    },
    changeMem(e) {
      this.transferParam = e
    },
    handleTransfer() {
      this.isShowTransfer = true
      this.getMemList()
    },
    getMemList() {
      findHiddenAreaMemberList({
        model: { ...this.transferModel },
        ...this.pagination,
      }).then(res => {
        this.memberList = res.data || []
      })
    },
    confirmBackDate(e) {
      this.$set(this.backParam, 'dealTime', dayjs(e.value).format('YYYY-MM-DD HH:mm:ss'))
      this.isShowBackDate = false
    },
    confirmHandleDate(e) {
      this.$set(this.handleParam, 'dealTime', dayjs(e.value).format('YYYY-MM-DD HH:mm:ss'))
      this.isShowHandleDate = false
    },
    onSubBack() {
      const { submitFileList, backParam } = this
      dealHiddenDanger({
        ...backParam,
        dealBeforeFileList: submitFileList,
        status: 2,
        id: this.id
      }).then(res => {
        if (res.code === 200) {
          this.isShowBack = false
          setTimeout(() => {
            uni.showToast({
              title: '操作成功',
              icon: 'success'
            })
          })
          uni.navigateBack()
        }
      })
    },
    uploadBeImage() {
      this.showUploadBe = false
      uni.chooseImage({
        count: 1,
        success: (chooseImageRes) => {
          console.log('chooseImageRes.tempFilePaths', chooseImageRes.tempFilePaths)
          uni.showLoading({ title: '上传中', mask: true })
          for (let i = 0; i < chooseImageRes.tempFilePaths.length; i++) {
            uni.uploadFile({
              url: `${uploadUrl}`,
              filePath: chooseImageRes.tempFilePaths[i],
              name: 'file',
              formData: {
                folderCode: 'HIDDEN_DANGER_FILE'
              },
              success: (uploadFileRes) => {
                let res = JSON.parse(uploadFileRes.data)
                console.log('res', res)
                let obj = {
                  type: '0'
                }
                obj.fileurl = res.data.halfPath
                obj.fileurlFull = res.data.addr
                this.dealBeforeFileList.push(obj)
              },
              complete() {
                if (i === chooseImageRes.tempFilePaths.length - 1) {
                  uni.hideLoading()
                }
              }
            })
          }
        }
      })
    },
    uploadBeVideo() {
      this.showUploadBe = false
      let that = this
      uni.chooseVideo({
        success: (chooseImageRes) => {
          uni.showLoading({ title: '上传中', mask: true })
          uni.uploadFile({
            url: `${uploadUrl}`,
            filePath: chooseImageRes.tempFilePath,
            name: 'file',
            formData: {
              folderCode: 'HIDDEN_DANGER_FILE'
            },
            success: (uploadFileRes) => {
              let res = JSON.parse(uploadFileRes.data)
              console.log('res', res)
              let obj = {
                type: '1'
              }
              obj.fileurl = res.data.halfPath
              obj.fileurlFull = res.data.addr
              this.dealBeforeFileList.push(obj)
            },
            complete() {
              uni.hideLoading()
            }
          })
        }
      })
    },
    uploadAfImage() {
      this.showUploadAf = false
      uni.chooseImage({
        count: 1,
        success: (chooseImageRes) => {
          console.log('chooseImageRes.tempFilePaths', chooseImageRes.tempFilePaths)
          uni.showLoading({ title: '上传中', mask: true })
          for (let i = 0; i < chooseImageRes.tempFilePaths.length; i++) {
            uni.uploadFile({
              url: `${uploadUrl}`,
              filePath: chooseImageRes.tempFilePaths[i],
              name: 'file',
              formData: {
                folderCode: 'HIDDEN_DANGER_FILE'
              },
              success: (uploadFileRes) => {
                let res = JSON.parse(uploadFileRes.data)
                console.log('res', res)
                let obj = {
                  type: '0'
                }
                obj.fileurl = res.data.halfPath
                obj.fileurlFull = res.data.addr
                this.dealAfterFileList.push(obj)
              },
              complete() {
                if (i === chooseImageRes.tempFilePaths.length - 1) {
                  uni.hideLoading()
                }
              }
            })
          }
        }
      })
    },
    uploadAfVideo() {
      this.showUploadAf = false
      let that = this
      uni.chooseVideo({
        success: (chooseImageRes) => {
          uni.showLoading({ title: '上传中', mask: true })
          uni.uploadFile({
            url: `${uploadUrl}`,
            filePath: chooseImageRes.tempFilePath,
            name: 'file',
            formData: {
              folderCode: 'HIDDEN_DANGER_FILE'
            },
            success: (uploadFileRes) => {
              let res = JSON.parse(uploadFileRes.data)
              console.log('res', res)
              let obj = {
                type: '1'
              }
              obj.fileurl = res.data.halfPath
              obj.fileurlFull = res.data.addr
              this.dealAfterFileList.push(obj)
            },
            complete() {
              uni.hideLoading()
            }
          })
        }
      })
    },
    uploadImage() {
      this.showUpload = false
      uni.chooseImage({
        count: 1,
        success: (chooseImageRes) => {
          console.log('chooseImageRes.tempFilePaths', chooseImageRes.tempFilePaths)
          uni.showLoading({ title: '上传中', mask: true })
          for (let i = 0; i < chooseImageRes.tempFilePaths.length; i++) {
            uni.uploadFile({
              url: `${uploadUrl}`,
              filePath: chooseImageRes.tempFilePaths[i],
              name: 'file',
              formData: {
                folderCode: 'HIDDEN_DANGER_FILE'
              },
              success: (uploadFileRes) => {
                let res = JSON.parse(uploadFileRes.data)
                console.log('res', res)
                let obj = {
                  type: '0'
                }
                obj.fileurl = res.data.halfPath
                obj.fileurlFull = res.data.addr
                this.submitFileList.push(obj)
              },
              complete() {
                if (i === chooseImageRes.tempFilePaths.length - 1) {
                  uni.hideLoading()
                }
              }
            })
          }
        }
      })
    },
    uploadVideo() {
      this.showUpload = false
      let that = this
      uni.chooseVideo({
        success: (chooseImageRes) => {
          uni.showLoading({ title: '上传中', mask: true })
          uni.uploadFile({
            url: `${uploadUrl}`,
            filePath: chooseImageRes.tempFilePath,
            name: 'file',
            formData: {
              folderCode: 'HIDDEN_DANGER_FILE'
            },
            success: (uploadFileRes) => {
              let res = JSON.parse(uploadFileRes.data)
              console.log('res', res)
              let obj = {
                type: '1'
              }
              obj.fileurl = res.data.halfPath
              obj.fileurlFull = res.data.addr
              this.submitFileList.push(obj)
            },
            complete() {
              uni.hideLoading()
            }
          })
        }
      })
    },
  },
}
</script>
<style>
page {
  background-color: #f7f7f7;
}
</style>
<style lang="scss">
.main_app {
  background-color: #fff;
  padding-bottom: 0;

  .flow_wrap {
    padding: 30rpx 0;

    .flow_title {
      font-weight: 600;
      font-size: 32rpx;
      color: #222222;
      margin-bottom: 24rpx;
    }

    .list {
      .item {
        display: flex;
        margin-bottom: 48rpx;
        position: relative;
        .separate {
          position: absolute;
          width: 4rpx;
          height: 100%;
          background-color: #eeeeee;
          left: 40rpx;
          transform: translate(-50%, 0);
          top: 80rpx;
        }
        .avatar {
          width: 80rpx;
          height: 80rpx;
          position: relative;
          margin-right: 20rpx;

          .img {
            width: 80rpx;
            height: 80rpx;
            border-radius: 50%;
          }

          .status {
            width: 28rpx;
            height: 28rpx;
            border-radius: 50%;
            position: absolute;
            right: 0;
            bottom: 0;
          }
        }

        .content {
          flex: 1;

          .head {
            display: flex;
            justify-content: space-between;
            margin-bottom: 4rpx;

            .event {
              font-size: 30rpx;
            }

            .time {
              font-size: 26rpx;
              color: #999999;
            }
          }

          .name_wrap {
            font-size: 26rpx;
            color: #777777;

            .status {
              color: $uni-color-primary;
            }
          }
          .children {
            display: flex;
            flex-wrap: wrap;
            margin-top: 12rpx;
            .child {
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              margin-right: 12rpx;
              .child_img {
                width: 48rpx;
                height: 48rpx;
                border-radius: 50%;
              }
            }
          }

          .remark {
            margin-top: 12rpx;
            background-color: #f7f7f7;
            padding: 14rpx 20rpx;
            border-radius: 8rpx;
            font-size: 26rpx;
            color: #666666;
            line-height: 36rpx;
          }
        }
        .carbon {
          display: flex;
          width: 590rpx;
          overflow-x: auto;
          margin-top: 12rpx;
          .carbon_item {
            text-align: center;
            flex-shrink: 0;
            width: 100rpx;
            image {
              width: 60rpx;
              height: 60rpx;
              margin: 0 auto;
            }
            view {
              font-size: 26rpx;
              color: #777777;
            }
          }
        }
        &:nth-last-child(1) {
          .separate {
            height: 0;
          }
        }
      }
    }
  }

  .module_list {
    .item {
      padding: 30rpx 0;
      border-bottom: 1rpx solid #e5e5e5;

      .label {
        font-size: 26rpx;
        color: #666666;
        margin-bottom: 20rpx;
      }

      .value {
        font-size: 30rpx;
        display: flex;
        align-items: center;

        .avatar {
          margin-right: 20rpx;
          width: 120rpx;
          height: 120rpx;
          border-radius: 8rpx;
          border: 2rpx solid #e5e5e5;
        }

        .info {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          font-size: 26rpx;
          color: #666666;

          .name {
            font-size: 30rpx;
            color: #333333;
          }
        }
      }
    }
  }

  .status_wrap {
    position: relative;
    padding: 30rpx 0;

    .name {
      font-weight: 600;
      font-size: 32rpx;
      margin-bottom: 20rpx;
      color: #222222;
    }

    .desc {
      font-size: 26rpx;
      color: #ed4545;
    }
    .gray {
      color: #999999;
    }
    .file_list {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 20rpx;
      .img {
        width: 140rpx;
        max-height: 120rpx;
        margin-right: 12rpx;
        margin-bottom: 12rpx;
        border-radius: 8rpx;
      }
    }
    .text_wrap {
      padding: 20rpx;
      background-color: #f8f7f7;
      border-radius: 8rpx;
      margin-top: 20rpx;
      .line {
        margin-bottom: 12rpx;
        display: flex;
        font-size: 24rpx;
        .label {
          color: #999999;
          width: 140rpx;
        }
      }
    }

    .status {
      position: absolute;
      right: -30rpx;
      top: 0;
      height: 60rpx;
      line-height: 60rpx;
      padding: 0 32rpx;
      border-radius: 0rpx 0rpx 0rpx 30rpx;
      background-color: #e9edff;
      color: $uni-color-primary;
    }
    .status_img {
      position: absolute;
      right: 0rpx;
      top: 20rpx;
      width: 120rpx;
    }
  }

  .main_footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    left: 0;
    padding: 30rpx 10rpx 60rpx;
    display: flex;
    justify-content: space-between;
    background: #ffffff;
    .btn {
      flex: 1;
      height: 88rpx;
      line-height: 88rpx;
      background: #ffffff;
      border-radius: 44rpx;
      border: 1rpx solid #999999;
      font-size: 32rpx;
      text-align: center;
      margin: 16rpx 8rpx;
    }
    .transfer {
      color: $uni-color-primary;
      border: 1rpx solid $uni-color-primary;
    }

    .handle {
      flex: 2;
      background: $uni-color-primary;
      color: #fff;
      border: 1rpx solid $uni-color-primary;
    }
  }

  .appr_modal {
    padding: 36rpx 30rpx 0;
    .title {
      font-weight: 600;
      font-size: 32rpx;
      color: #222222;
      margin-bottom: 40rpx;
      text-align: center;
    }
    .label {
      text {
        color: #ed4545;
      }
    }
    .df_sb {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 90rpx;
      border-bottom: 1rpx solid #e4e4e4;
      margin-bottom: 30rpx;
    }
    .back_footer {
      display: flex;
      .btn {
        flex: 1;
        height: 88rpx;
        line-height: 88rpx;
        background: #ffffff;
        border-radius: 44rpx;
        border: 1rpx solid #999999;
        font-size: 32rpx;
        text-align: center;
        margin: 16rpx 8rpx;
      }
      .agree {
        background: $uni-color-primary;
        color: #fff;
        border: 1rpx solid $uni-color-primary;
      }
    }
    textarea {
      box-sizing: border-box;
      width: 690rpx;
      min-height: 200rpx;
      background-color: #f7f7f7;
      font-size: 28rpx;
      color: #333333;
      padding: 24rpx;
      border-radius: 8rpx;
      margin-bottom: 30rpx;
    }
    .upload_wrap {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 30rpx;
    }
    .adduser_list_item_ipt1_upload {
      margin-top: 24rpx;
      width: 120rpx;
      height: 120rpx;
      margin-right: 24rpx;
      border: 2rpx solid #e5e5e5;
      background: #f7f7f7;
      color: #666666;
      font-size: 22rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      image {
        width: 100%;
        height: 100%;
      }
      video {
        width: 100%;
      }
    }
  }

  .emyty {
    width: 750rpx;
    height: 20rpx;
    background-color: #f7f7f7;
    margin: 0 -30rpx;
  }
}
.sel_upload_wrap {
  width: 100%;
  border-top: 1px solid #333333;
  box-shadow: 0 1 1 #333333;
  .btn {
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
  }
}
.member_list {
  height: 920rpx;
  overflow: auto;
  .line {
    display: flex;
    align-items: center;
    border-bottom: 1rpx solid #e5e5e5;
    padding: 30rpx 0;
    .avatar {
      width: 64rpx;
      height: 64rpx;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 20rpx;
    }
    .content {
      flex: 1;
      .depart {
        font-size: 24rpx;
        color: #666666;
      }
      .info {
        display: flex;
        margin-bottom: 16rpx;
        .name {
          font-size: 30rpx;
        }
        .tag {
          font-size: 24rpx;
          border-radius: 4rpx;
          border: 1rpx solid #f62710;
          color: #f62710;
          padding: 0rpx 6rpx;
          margin-left: 8rpx;
        }
      }
    }
    .checked {
      width: 48rpx;
    }
  }
  .empty {
    width: 100%;
    height: 280rpx;
  }
}
.search_inp {
  height: 72rpx;
  background: #f7f7f7;
  border-radius: 4rpx;
  padding-left: 16rpx;
  .search {
    width: 28rpx;
  }
  input {
    flex: 1;
    font-size: 28rpx;
    color: #333333;
  }
}
.Transfer_footer {
  display: flex;
  .btn {
    flex: 1;
    height: 88rpx;
    line-height: 88rpx;
    background: #ffffff;
    border-radius: 44rpx;
    border: 1rpx solid #999999;
    font-size: 32rpx;
    text-align: center;
    margin: 16rpx 8rpx;
  }
  .active {
    background: $uni-color-primary;
    color: #fff;
    border: 1rpx solid $uni-color-primary;
  }
}
</style>
<template>

   <view class="main_app" :style="{height: windowHeight  + 'px'}">

      <view class="status_wrap">

         <view class="name">{{ info.categoryName }}</view>

         <view v-if="info.status == '0'" class="status">{{ statusMap[info.status] }}</view>

         <image v-if="info.status == '1'" src="@/static/ic_yizhenggai.png" mode="widthFix" class="status_img"></image>

         <image v-if="info.status == '2'" src="@/static/ic_yituihui-1.png" mode="widthFix" class="status_img"></image>

         <image v-if="info.status == '3' || info.status == '6'" src="@/static/ic_refused@2x.png" mode="widthFix"

            class="status_img"></image>

         <view>{{ info.content }}</view>

         <view class="file_list">

            <view class="img_wrap" v-for="item, i in info.submitFileList" :key="item.id">

               <image v-if="item.type == 0" :src="item.fileurlFull" @click="priviewImage(item.fileurlFull)" mode="widthFix"

                  class="img" />

               <view v-if="item.type == 1" @click="videoClick(item, i)" class="video_wrap">

                  <video :src="item.fileurlFull" initial-time="0.01" :show-center-play-btn="false" :controls="false"

                     class="video" :enable-progress-gesture="false" muted />

                  <image src="@/static/play.png" class="play" mode=""></image>

               </view>

            </view>

         </view>

         <view class="text_wrap">

            <view class="line">

               <text class="label">隐患区域：</text>

               <text>{{ info.areaName }}</text>

            </view>

            <view class="line">

               <text class="label">提报人：</text>

               <text>{{ info.memberName }} {{ info.memberPhone }}</text>

            </view>

         </view>

      </view>

      <!--  -->

      <view class="emyty"></view>

      <view v-if="info.status == 1 || info.status == 2" class="module_list">

         <view class="title">处理结果</view>

         <view class="item">

            <view class="label">处理结果</view>

            <view class="value primaryColor" :class="{ red: info.status == 2 }">{{ statusMap[info.status] }}</view>

         </view>

         <view class="item">

            <view class="label">{{ info.status == '1' ? '整改前' : '视频/图片' }}</view>

            <view class="value">

               <view class="adduser_list_item_ipt1_upload" v-for="(item, i) in info.dealBeforeFileList" :key="i">

                  <image v-if="item.type == 0" @click="priviewImage(item.fileurlFull)" :src="item.fileurlFull"

                     mode="widthFix"></image>

                  <!--                   <video v-if="item.type == 1" @click="videoClick(item, i)" :src="item.fileurlFull" :show-center-play-btn="false" :controls="false" class="video"

                  :enable-progress-gesture="false" autoplay muted></video> -->

                  <view v-if="item.type == 1" @click="videoClick(item, i)" class="video_wrap">

                     <video :src="item.fileurlFull" :initial-time="0.01" :show-center-play-btn="false" :controls="false"

                        class="video" :enable-progress-gesture="false" muted />

                     <image src="@/static/play.png" class="play" mode=""></image>

                  </view>

               </view>

            </view>

         </view>

         <view class="item" v-if="info.dealAfterFileList && info.dealAfterFileList.length > 0">

            <view class="label">整改后</view>

            <view class="value">

               <view class="adduser_list_item_ipt1_upload" v-for="(item, i) in info.dealAfterFileList" :key="i">

                  <image v-if="item.type == 0" @click="priviewImage(item.fileurlFull)" :src="item.fileurlFull"

                     mode="widthFix"></image>

                  <!--                   <video v-if="item.type == 1" @click="videoClick(item, i)" :src="item.fileurlFull" initial-time="0.01" :show-center-play-btn="false" :controls="false" class="video"

                  :enable-progress-gesture="false" autoplay muted></video> -->

                  <view v-if="item.type == 1" @click="videoClick(item, i)" class="video_wrap">

                     <video :src="item.fileurlFull" :initial-time="0.01" :show-center-play-btn="false" :controls="false"

                        class="video" :enable-progress-gesture="false" muted />

                     <image src="@/static/play.png" class="play" mode=""></image>

                  </view>

               </view>

            </view>

         </view>

         <view class="item">

            <view class="label">{{ info.status == '1' ? '整改说明' : '退回说明' }}</view>

            <view class="value">{{ info.checkInfo }}</view>

         </view>

      </view>

      <!-- 流程 -->

      <view class="flow_wrap">

         <view class="flow_title">处理流程</view>

         <view class="list">

            <view class="item" v-for="(item, index) in flowList" :key="item.id">

               <view class="separate"></view>

               <view class="avatar">

                  <image src="@/static/staff/liucheng_success@2x.png" class="status"

                     v-if="info.status == 1 || index < flowList.length - 1" />

                  <image src="@/static/staff/liucheng_fail@2x.png" class="status"

                     v-if="info.status == 2 && index == flowList.length - 1" />

                  <image v-if="item.avatar != null && item.avatar != ''" :src="item.avatar" class="img" alt="" />

                  <!-- <image v-else src="@/static/default_avatar.png" class="img" mode=""></image> -->

                  <span v-if="item.avatar == null || item.avatar == ''" class="img_name">{{ item.createUserName &&

                     item.createUserName.slice(0, 1) }}</span>

               </view>

               <view class="content">

                  <view class="head">

                     <view class="event">{{ item.title }}</view>

                     <view class="time" v-if="item.createDate">{{ item.createDate.slice(0, 16) }}</view>

                  </view>

                  <view class="line">

                     <view class="company">

                        {{ item.createUserName }} {{ item.companyName }}

                        <view style="display: inline" v-if="index == flowList.length - 1">

                           （

                           <span v-if="info.status == 1">已同意</span>

                           <span class="status-green" v-if="info.status == 0">待处理</span>

                           <span class="status-red" v-if="info.status == 2">已退回</span>

                           ）

                        </view>

                     </view>

                  </view>

               </view>



            </view>

         </view>

      </view>

      <view v-if="info.status == 0 && info.checkUserId == userInfo.memberId" style="height: 90rpx;border: 1px solid red;"></view>
      <view class="emyty"></view>

      <view class="main_footer" v-if="info.status == 0 && info.checkUserId == userInfo.memberId">

         <view v-if="info.status == 0 && info.checkUserId == userInfo.memberId" class="btn" @click="handleBack">退回</view>

         <view v-if="info.status == 0 && info.checkUserId == userInfo.memberId" class="btn transfer" @click="handleTransfer">

            转交</view>

         <view v-if="info.status == 0 && info.checkUserId == userInfo.memberId" class="btn handle" @click="handleOpen">处理

         </view>

      </view>



      <!-- 退回 -->

      <u-popup :show="isShowBack" :round="10" :safeAreaInsetBottom="true" mode="bottom" @close="isShowBack = false">

         <view class="appr_modal">

            <view class="title">隐患退回</view>

            <view class="df_sb">

               <view>退回时间</view>

               <view class="df_ac" @click="isShowBackDate = true" v-if="backParam.dealTime">

                  {{ backParam.dealTime }}

                  <u-icon name="arrow-right"></u-icon>

               </view>

               <view @click="isShowBackDate = true" v-else class="placeholder9 df_ac">

                  请选择

                  <u-icon name="arrow-right"></u-icon>

               </view>

            </view>



            <view class="label">图片/视频</view>

            <view class="upload_wrap">

               <view class="adduser_list_item_ipt1_upload" @click="showUploadBe = true">

                  <u-icon name="plus" color="rgb(153, 153, 153)" size="28"></u-icon>

                  <view class="mt6">图片/视频</view>

               </view>

               <view class="adduser_list_item_ipt1_upload" v-for="(item, i) in dealBeforeFileList" :key="i">

                  <u-icon class="close" size="20" name="close-circle-fill" color="red"

                     @click="fileDel('dealBeforeFileList', i)"></u-icon>

                  <image v-if="item.type == 0" @click="priviewImage(item.fileurlFull)" :src="item.fileurlFull"

                     mode="widthFix"></image>

                  <!-- <video v-if="item.type == 1" @click="videoClick(item, i)" :src="item.fileurlFull" show-center-play-btn="false" :controls="false" class="video"

                  :enable-progress-gesture="false" autoplay muted></video> -->

                  <view v-if="item.type == 1" @click="videoClick(item, i)" class="video_wrap">

                     <video :src="item.fileurlFull" :initial-time="0.01" :show-center-play-btn="false" :controls="false"

                        class="video" :enable-progress-gesture="false" muted />

                     <image src="@/static/play.png" class="play" mode=""></image>

                  </view>

               </view>

            </view>

            <view class="label">退回说明</view>

            <textarea v-model="backParam.checkInfo" placeholder="请详细描述现场情况，不少于10个字" placeholder-class="placeholder9" />

            <view class="back_footer">

               <view class="btn" @click="isShowBack = false">取消</view>

               <view class="btn agree" @click="onSubBack">提交</view>

            </view>

         </view>

      </u-popup>

      <!-- 处理 -->

      <u-popup :show="isShowHandle" :round="10" :safeAreaInsetBottom="true" mode="bottom" @close="isShowHandle = false">

         <view class="appr_modal">

            <view class="title">隐患整改</view>

            <view class="df_sb">

               <view>整改时间</view>

               <view class="df_ac" @click="isShowHandleDate = true" v-if="handleParam.dealTime">

                  {{ handleParam.dealTime }}

                  <u-icon name="arrow-right"></u-icon>

               </view>

               <view @click="isShowHandleDate = true" v-else class="placeholder9 df_ac">

                  请选择

                  <u-icon name="arrow-right"></u-icon>

               </view>

            </view>



            <view class="label">

               <text>*</text>

               整改前

            </view>

            <view class="upload_wrap">

               <view class="adduser_list_item_ipt1_upload" @click="showUploadBe = true">

                  <u-icon name="plus" color="rgb(153, 153, 153)" size="28"></u-icon>

                  <view class="mt6">图片/视频</view>

               </view>

               <view class="adduser_list_item_ipt1_upload" v-for="(item, i) in dealBeforeFileList" :key="i">

                  <u-icon class="close" size="20" name="close-circle-fill" color="red"

                     @click="fileDel('dealBeforeFileList', i)"></u-icon>

                  <image v-if="item.type == 0" :src="item.fileurlFull" mode="widthFix"></image>

                  <!-- <video v-if="item.type == 1" :src="item.fileurlFull" :show-center-play-btn="false" :controls="false" class="video"

                  :enable-progress-gesture="false" muted></video> -->

                  <view v-if="item.type == 1" class="video_wrap">

                     <video :src="item.fileurlFull" :initial-time="0.01" :show-center-play-btn="false" :controls="false"

                        class="video" :enable-progress-gesture="false" muted />

                     <image src="@/static/play.png" class="play" mode=""></image>

                  </view>

               </view>

            </view>

            <view class="label">

               <text>*</text>

               整改后

            </view>

            <view class="upload_wrap">

               <view class="adduser_list_item_ipt1_upload" @click="showUploadAf = true">

                  <u-icon name="plus" color="rgb(153, 153, 153)" size="28"></u-icon>

                  <view class="mt6">图片/视频</view>

               </view>

               <view class="adduser_list_item_ipt1_upload" v-for="(item, i) in dealAfterFileList" :key="i">

                  <u-icon class="close" size="20" name="close-circle-fill" color="red"

                     @click="fileDel('dealAfterFileList', i)"></u-icon>

                  <image v-if="item.type == 0" :src="item.fileurlFull" mode="widthFix"></image>

                  <!-- <video v-if="item.type == 1" :src="item.fileurlFull" :show-center-play-btn="false" :controls="false"></video> -->

                  <view v-if="item.type == 1" class="video_wrap">

                     <video :src="item.fileurlFull" :initial-time="0.01" :show-center-play-btn="false" :controls="false"

                        class="video" :enable-progress-gesture="false" muted />

                     <image src="@/static/play.png" class="play" mode=""></image>

                  </view>

               </view>

            </view>

            <view class="label">整改说明</view>

            <textarea v-model="handleParam.checkInfo" placeholder="请详细描述现场情况，不少于10个字" placeholder-class="placeholder9" />

            <view class="back_footer">

               <view class="btn" @click="isShowHandle = false">取消</view>

               <view class="btn agree" @click="onSubmit">提交</view>

            </view>

         </view>

      </u-popup>

      <!-- 上传 -->

      <u-popup :show="showUpload" @close="showUpload = false" closeOnClickOverlay>

         <view class="sel_upload_wrap">

            <view class="btn" @click="uploadImage">选择图片</view>

            <view class="btn" @click="uploadVideo">选择视频</view>

         </view>

      </u-popup>

      <u-popup :show="showUploadBe" @close="showUploadBe = false" closeOnClickOverlay>

         <view class="sel_upload_wrap">

            <view class="btn" @click="uploadBeImage">选择图片</view>

            <view class="btn" @click="uploadBeVideo">选择视频</view>

         </view>

      </u-popup>

      <u-popup :show="showUploadAf" @close="showUploadAf = false" closeOnClickOverlay>

         <view class="sel_upload_wrap">

            <view class="btn" @click="uploadAfImage">选择图片</view>

            <view class="btn" @click="uploadAfVideo">选择视频</view>

         </view>

      </u-popup>

      <!-- 转交 -->

      <u-popup :show="isShowTransfer" :round="10" safeAreaInsetBottom mode="bottom" @close="isShowTransfer = false">

         <view class="appr_modal tran_modal">

            <view class="title">选择员工</view>

            <view class="search_inp df_ac">

               <image class="mr12 search" src="@/static/ic_search@2x.png" mode="widthFix"></image>

               <input v-model="transferModel.queryParam" @focus="showKeyboard = true" @blur="showKeyboard = false" @confirm="getMemList()" type="text" placeholder="搜索人员姓名"

                  placeholder-style="color: #999999;" />

            </view>

            <view class="mt24 placeholder6">共{{ memberList.length }}条数据</view>
            <view class="member_list">

					
               <view v-for="item in memberList" :key="item.id" class="line">

                  <image v-if="item.faceImg" :src="item.faceImg" class="avatar"></image>

                  <span v-else class="img_name">{{ item.realname && item.realname.slice(0, 1) }}</span>

                  <view class="content">

                     <view class="info">

                        <text class="name">{{ item.realname }}</text>

                        <!-- <text class="tag">tag</text> -->

                     </view>

                     <view class="depart">{{ item.companyName }}</view>

                  </view>

                  <image @click="changeMem(item)" v-if="transferParam.id == item.id" src="@/static/checkbox_sel@2x.png"

                     mode="widthFix" class="checked"></image>

                  <image @click="changeMem(item)" v-else src="@/static/video@2x.png" mode="widthFix" class="checked"></image>

                  <text></text>

               </view>

               <view class="empty"></view>

            </view>

            <view v-if="!showKeyboard" class="Transfer_footer">

               <view class="btn" @click="isShowTransfer = fales">取消</view>

               <view class="btn active" @click="enterTransfer">确认转交</view>

            </view>

         </view>

      </u-popup>

      <!-- 退回时间 -->

      <u-datetime-picker :show="isShowBackDate" :minDate="new Date().getTime()" :closeOnClickOverlay="false"

         @confirm="confirmBackDate" @close="isShowBackDate = false" @cancel="isShowBackDate = false"

         mode="datetime"></u-datetime-picker>



      <u-datetime-picker :minDate="new Date().getTime()" :show="isShowHandleDate" @confirm="confirmHandleDate"

         @cancel="isShowHandleDate = false" mode="datetime"></u-datetime-picker>

      <!--  -->



      <view v-if="videoPlay" class="video_app">

         <video controls autoplay muted x5-video-player-type="h5" x5-video-player-fullscreen="true" id="myvideo"

            :src="videoUrl" @fullscreenchange="screenChange"></video>

         <view class="bg" @click="closeVideo"></view>

      </view>

   </view>

</template>



<script>

import {

   hiddenDangerDetail,

   uploadUrl,

   userPagePost,

   dealHiddenDanger,

   transferHiddenDanger,

   findListFlowDanger

} from '@/api'

import dayjs from 'dayjs'

export default {

   data() {

      return {

         isShowBack: false,

         param: {},

         info: {},

         userInfo: this.$store.state.userInfo,

         flowList: [],



         id: '',

         type: '',
         windowHeight: '',

         cateList: [{

            name: '访客申请',

            id: 0

         }, {

            name: '访客报备',

            id: 1

         }, {

            name: '用车申请',

            id: 2

         }, {

            name: '隐患随手拍',

            id: 3

         }, {

            name: '物流车申请',

            id: 4

         }],

         statusMap: {

            0: '待处理',

            1: '已整改',

            2: '已退回',

            3: '已拒绝',

            4: '已取消',

            5: '他人或签',

            6: '他人拒绝'

         },



         showUpload: false,

         isShowBackDate: false,

         submitFileList: [],

         backParam: {},



         isShowHandle: false,

         handleParam: {},

         isShowHandleDate: false,

         showUploadBe: false,

         showUploadAf: false,

         dealBeforeFileList: [],

         dealAfterFileList: [],



         isShowTransfer: false,

         transferParam: {},

         transferModel: {},

         pagination: {

            page: 1,

            capacity: 50

         },

         memberList: [],



         videoPlay: false,

         videoContext: null,

         videoUrl: '',
         showKeyboard: false,

      }

   },

   onLoad(op) {
      const result = uni.getWindowInfo()

      this.windowHeight = result.windowHeight

      uni.setStorageSync('ywinfo', {})

      this.id = op.id

      this.getDetail()
      // this.handleTransfer()

   },

   methods: {

      priviewImage(url) {

         uni.previewImage({

            urls: [url]

         })

      },

      screenChange(e) {

         let fullScreen = e.detail.fullScreen // 值true为进入全屏，false为退出全屏

         if (!fullScreen) {

            //退出全屏

            this.videoPlay = false // 隐藏播放盒子

         }

      },

      closeVideo() {

         this.videoPlay = false

         this.videoContext = null

      },

      videoClick(item, i) {

         this.videoPlay = true

         this.videoContext = uni.createVideoContext("myvideo", this) // this这个是实例对象 必传

         this.videoUrl = item.fileurlFull

         this.videoContext.requestFullScreen()

         this.$nextTick(() => {

            this.videoContext.play()

         })

      },

      handleOpen() {

         this.isShowHandle = true

         const submitFileList = this.info.submitFileList || []

         this.dealBeforeFileList = [...submitFileList]

         this.submitFileList = [...submitFileList]

         this.$set(this.handleParam, 'dealTime', dayjs().format('YYYY-MM-DD HH:mm:ss'))

      },

      handleBack() {

         this.isShowBack = true

         // const submitFileList = this.info.submitFileList || []

         // this.submitFileList = [...submitFileList];

         this.dealBeforeFileList = []

         this.$set(this.backParam, 'dealTime', dayjs().format('YYYY-MM-DD HH:mm:ss'))

      },

      getDetail() {

         const {

            id

         } = this

         hiddenDangerDetail(id).then(res => {

            this.info = res.data

         })

         findListFlowDanger({

            hiddenDangerId: id

         }).then(res => {

            this.flowList = res.data || []

         })

      },

      onSubmit() {

         const {

            dealBeforeFileList,

            dealAfterFileList,

            handleParam

         } = this

         if (dealBeforeFileList.length === 0)

            return uni.showToast({

               title: '请上传整改前图片或视频',

               icon: 'none'

            })

         if (dealAfterFileList.length === 0)

            return uni.showToast({

               title: '请上传整改后图片或视频',

               icon: 'none'

            })

         dealHiddenDanger({

            ...handleParam,

            dealBeforeFileList: dealBeforeFileList,

            dealAfterFileList: dealAfterFileList,

            status: 1,

            id: this.id

         }).then(res => {

            if (res.code === 200) {

               this.isShowHandle = false

               setTimeout(() => {

                  uni.showToast({

                     title: '操作成功',

                     icon: 'success'

                  })

               })

               uni.navigateBack()

            }

         })

      },

      enterTransfer() {

         const {

            transferParam,

            id

         } = this

         if (!transferParam.id)

            return uni.showToast({

               title: '请选择人员',

               icon: 'none'

            })

         transferHiddenDanger({

            checkUserId: transferParam.memberId,

            id

         }).then(res => {

            if (res.code === 200) {

               this.isShowTransfer = false

               setTimeout(() => {

                  uni.showToast({

                     title: '操作成功',

                     icon: 'success'

                  })

               })

               uni.navigateBack()

            }

         })

      },

      changeMem(e) {

         this.transferParam = e

      },

      handleTransfer() {

         this.isShowTransfer = true

         this.getMemList()

      },

      getMemList() {
         userPagePost({
            ...this.transferModel,
            querySpecial: 1, type: 2, companyType: 1,workStatus:0
			
         }).then(res => {

            this.memberList = res.data || []

         })

      },

      confirmBackDate(e) {

         this.$set(this.backParam, 'dealTime', dayjs(e.value).format('YYYY-MM-DD HH:mm:ss'))

         this.isShowBackDate = false

      },

      confirmHandleDate(e) {

         this.$set(this.handleParam, 'dealTime', dayjs(e.value).format('YYYY-MM-DD HH:mm:ss'))

         this.isShowHandleDate = false

      },

      onSubBack() {

         const {

            dealBeforeFileList,

            backParam

         } = this

         dealHiddenDanger({

            ...backParam,

            dealBeforeFileList,

            status: 2,

            id: this.id

         }).then(res => {

            if (res.code === 200) {

               this.isShowBack = false

               setTimeout(() => {

                  uni.showToast({

                     title: '操作成功',

                     icon: 'success'

                  })

               })

               uni.navigateBack()

            }

         })

      },

      fileDel(str, i) {

         this[str].splice(i, 1)

      },

      uploadBeImage() {

         this.showUploadBe = false

         let token = uni.getStorageSync('token') || ''

         uni.chooseImage({

            count: 9,

            success: chooseImageRes => {

               uni.showLoading({

                  title: '上传中',

                  mask: true

               })

               const tempFilePaths = chooseImageRes.tempFilePaths

               let imgs = tempFilePaths.map((value, index) => {

                  return {

                     name: 'file',

                     uri: value

                  }

               })

               uni.uploadFile({

                  url: `${uploadUrl}`,

                  files: imgs,

                  name: 'file',

                  formData: {

                     folder: 'HIDDEN_DANGER_FILE'

                  },

                  header: {

                     Dm_user_token: token

                  },

                  success: uploadFileRes => {

                     let res = JSON.parse(uploadFileRes.data)

                     let obj = {

                        type: '0'

                     }

                     if (res.data && res.data.length > 0) {

                        res.data.forEach(i => {

                           i.type = 0

                           i.fileurl = i.imgaddr

                           i.fileurlFull = i.url

                           this.dealBeforeFileList.push(i)

                        })

                     }

                  },

                  fail(err) {

                     console.log('err', err)

                  },

                  complete() {

                     uni.hideLoading()

                     // if (i === chooseImageRes.tempFilePaths.length - 1) {

                     //   uni.hideLoading()

                     // }

                  }

               })

            }

         })

      },

      uploadBeVideo() {

         this.showUploadBe = false

         let token = uni.getStorageSync('token') || ''

         uni.chooseVideo({

            success: chooseImageRes => {

               uni.showLoading({

                  title: '上传中',

                  mask: true

               })

               uni.uploadFile({

                  url: `${uploadUrl}`,

                  filePath: chooseImageRes.tempFilePath,

                  header: {

                     Dm_user_token: token

                  },

                  name: 'file',

                  formData: {

                     folder: 'HIDDEN_DANGER_FILE'

                  },

                  success: uploadFileRes => {

                     let res = JSON.parse(uploadFileRes.data)

                     if (res.data && res.data.length > 0) {

                        res.data.forEach(i => {

                           i.type = 1

                           i.fileurl = i.imgaddr

                           i.fileurlFull = i.url

                           this.dealBeforeFileList.push(i)

                        })

                     }

                  },

                  complete() {

                     uni.hideLoading()

                  }

               })

            }

         })

      },

      uploadAfImage() {

         this.showUploadAf = false

         let token = uni.getStorageSync('token') || ''

         uni.chooseImage({

            count: 9,

            success: chooseImageRes => {

               uni.showLoading({

                  title: '上传中',

                  mask: true

               })

               const tempFilePaths = chooseImageRes.tempFilePaths

               let imgs = tempFilePaths.map((value, index) => {

                  return {

                     name: 'file',

                     uri: value

                  }

               })

               uni.uploadFile({

                  url: `${uploadUrl}`,

                  files: imgs,

                  name: 'file',

                  formData: {

                     folder: 'HIDDEN_DANGER_FILE'

                  },

                  header: {

                     Dm_user_token: token

                  },

                  success: uploadFileRes => {

                     let res = JSON.parse(uploadFileRes.data)

                     if (res.data && res.data.length > 0) {

                        res.data.forEach(i => {

                           i.type = 0

                           i.fileurl = i.imgaddr

                           i.fileurlFull = i.url

                           this.dealAfterFileList.push(i)

                        })

                     }

                  },

                  fail(err) {

                     console.log('err', err)

                  },

                  complete() {

                     uni.hideLoading()

                     // if (i === chooseImageRes.tempFilePaths.length - 1) {

                     //   uni.hideLoading()

                     // }

                  }

               })

            }

         })

      },

      uploadAfVideo() {

         this.showUploadAf = false

         let token = uni.getStorageSync('token') || ''

         uni.chooseVideo({

            success: chooseImageRes => {

               uni.showLoading({

                  title: '上传中',

                  mask: true

               })

               uni.uploadFile({

                  url: `${uploadUrl}`,

                  filePath: chooseImageRes.tempFilePath,

                  header: {

                     Dm_user_token: token

                  },

                  name: 'file',

                  formData: {

                     folder: 'HIDDEN_DANGER_FILE'

                  },

                  success: uploadFileRes => {

                     let res = JSON.parse(uploadFileRes.data)

                     if (res.data && res.data.length > 0) {

                        res.data.forEach(i => {

                           i.type = 1

                           i.fileurl = i.imgaddr

                           i.fileurlFull = i.url

                           this.dealAfterFileList.push(i)

                        })

                     }

                  },

                  complete() {

                     uni.hideLoading()

                  }

               })

            }

         })

      },

      uploadImage() {

         this.showUpload = false

         let token = uni.getStorageSync('token') || ''

         uni.chooseImage({

            count: 9,

            success: chooseImageRes => {

               uni.showLoading({

                  title: '上传中',

                  mask: true

               })

               const tempFilePaths = chooseImageRes.tempFilePaths

               let imgs = tempFilePaths.map((value, index) => {

                  return {

                     name: 'file',

                     uri: value

                  }

               })

               uni.uploadFile({

                  url: `${uploadUrl}`,

                  files: imgs,

                  name: 'file',

                  formData: {

                     folder: 'HIDDEN_DANGER_FILE'

                  },

                  header: {

                     Dm_user_token: token

                  },

                  success: uploadFileRes => {

                     let res = JSON.parse(uploadFileRes.data)

                     if (res.data && res.data.length > 0) {

                        res.data.forEach(i => {

                           i.type = 0

                           i.fileurl = i.imgaddr

                           i.fileurlFull = i.url

                           this.submitFileList.push(i)

                        })

                     }

                  },

                  fail(err) {

                     console.log('err', err)

                  },

                  complete() {

                     uni.hideLoading()

                     // if (i === chooseImageRes.tempFilePaths.length - 1) {

                     //   uni.hideLoading()

                     // }

                  }

               })

            }

         })

      },

      uploadVideo() {

         this.showUpload = false

         let token = uni.getStorageSync('token') || ''

         uni.chooseVideo({

            success: chooseImageRes => {

               uni.showLoading({

                  title: '上传中',

                  mask: true

               })

               uni.uploadFile({

                  url: `${uploadUrl}`,

                  filePath: chooseImageRes.tempFilePath,

                  header: {

                     Dm_user_token: token

                  },

                  name: 'file',

                  formData: {

                     folder: 'HIDDEN_DANGER_FILE'

                  },

                  success: uploadFileRes => {

                     let res = JSON.parse(uploadFileRes.data)

                     if (res.data && res.data.length > 0) {

                        res.data.forEach(i => {

                           i.type = 1

                           i.fileurl = i.imgaddr

                           i.fileurlFull = i.url

                           this.submitFileList.push(i)

                        })

                     }

                  },

                  complete() {

                     uni.hideLoading()

                  }

               })

            }

         })

      }

   }

}

</script>



<style lang="scss">

page {

   background-color: #f7f7f7;



   ::v-deep .u-popup__content {

      border-top: 1rpx solid #cccccc;

   }

}



.main_app {

   background-color: #fff;

   padding-bottom: 0;

   position: relative;

   .flow_title {

      font-weight: 600;

      font-size: 32rpx;

      color: #222222;

      margin-bottom: 24rpx;

   }



   .flow_wrap {

      padding: 30rpx 0 30rpx;

      background-color: #fff;

      .list {

         .item {

            display: flex;

            margin-bottom: 48rpx;

            position: relative;

            .separate {

               position: absolute;

               width: 4rpx;

               height: 100%;

               background-color: #eeeeee;

               left: 40rpx;

               transform: translate(-50%, 0);

               top: 80rpx;

            }



            .avatar {

               width: 80rpx;

               height: 80rpx;

               position: relative;

               margin-right: 20rpx;



               .img {

                  width: 80rpx;

                  height: 80rpx;

                  border-radius: 50%;

               }



               .status {

                  width: 28rpx;

                  height: 28rpx;

                  border-radius: 50%;

                  position: absolute;

                  right: 0;

                  bottom: 0;

                  z-index: 999;

               }

            }



            .content {

               flex: 1;



               .head {

                  display: flex;

                  justify-content: space-between;

                  margin-bottom: 4rpx;



                  .event {

                     font-size: 30rpx;

                  }



                  .time {

                     font-size: 26rpx;

                     color: #999999;

                  }

               }



               .name_wrap {

                  font-size: 26rpx;

                  color: #777777;



                  .status {

                     color: $uni-color-primary;

                  }

               }



               .line {

                  .company {

                     font-size: 26rpx;

                     color: #777777;

                  }



                  .status-green {

                     color: $uni-color-primary;

                  }



                  .status-red {

                     color: red;

                  }

               }



               .remark {

                  margin-top: 12rpx;

                  background-color: #f7f7f7;

                  padding: 14rpx 20rpx;

                  border-radius: 8rpx;

                  font-size: 26rpx;

                  color: #666666;

                  line-height: 36rpx;

               }

            }



            .carbon {

               display: flex;

               width: 590rpx;

               overflow-x: auto;

               margin-top: 12rpx;



               .carbon_item {

                  text-align: center;

                  flex-shrink: 0;

                  width: 100rpx;



                  image {

                     width: 60rpx;

                     height: 60rpx;

                     margin: 0 auto;

                  }



                  view {

                     font-size: 26rpx;

                     color: #777777;

                  }

               }

            }



            &:nth-last-child(1) {

               .separate {

                  height: 0;

               }

            }

         }

      }

   }



   .adduser_list_item_ipt1_upload {

      width: 156rpx;

      height: 156rpx;

      margin-right: 20rpx;

      border: 2rpx solid #e5e5e5;

      background: #f7f7f7;

      color: #666666;

      font-size: 22rpx;

      display: flex;

      flex-direction: column;

      align-items: center;

      justify-content: center;

      position: relative;



      &:nth-of-type(4n) {

         margin-right: 0;

      }



      .close {

         position: absolute;

         right: -20rpx;

         top: -20rpx;

         z-index: 9999;

      }



      image {

         width: 100%;

         height: 100%;

      }



      video {

         width: 100%;

         max-height: 156rpx;

      }

   }



   .module_list {

      .title {

         font-weight: 600;

         font-size: 32rpx;

         color: #222222;

         padding-top: 28rpx;

      }



      .item {

         padding: 30rpx 0;

         border-bottom: 1rpx solid #e5e5e5;



         .label {

            font-size: 26rpx;

            color: #666666;

            margin-bottom: 20rpx;

         }



         .value {

            font-size: 30rpx;

            display: flex;

            align-items: center;



            .avatar {

               margin-right: 20rpx;

               width: 120rpx;

               height: 120rpx;

               border-radius: 8rpx;

               border: 2rpx solid #e5e5e5;

            }



            .info {

               flex: 1;

               display: flex;

               flex-direction: column;

               justify-content: space-between;

               font-size: 26rpx;

               color: #666666;



               .name {

                  font-size: 30rpx;

                  color: #333333;

               }

            }

         }

      }

   }



   .status_wrap {

      position: relative;

      padding: 30rpx 0;



      .name {

         font-weight: 600;

         font-size: 32rpx;

         margin-bottom: 20rpx;

         color: $uni-color-primary;

      }



      .desc {

         font-size: 26rpx;

         color: #ed4545;

      }



      .gray {

         color: #999999;

      }



      .file_list {

         display: flex;

         margin-bottom: 20rpx;

         flex-wrap: wrap;

         .img_wrap {

            margin-top: 24rpx;

            width: 156rpx;

            height: 156rpx;

            border: 2rpx solid #e5e5e5;

            background: #f7f7f7;

            color: #666666;

            font-size: 22rpx;

            display: flex;

            border-radius: 4rpx;

            flex-direction: column;

            align-items: center;

            justify-content: center;

            position: relative;

            margin-right: 20rpx;

            flex-shrink: 0;



            &:nth-of-type(4n) {

               margin-right: 0;

            }

         }





         .img {

            width: 100%;

            max-height: 100%;

         }



         .video {

            width: 100%;

            max-height: 100%;

         }

      }



      .text_wrap {

         padding: 20rpx;

         background-color: #f8f7f7;

         border-radius: 8rpx;

         margin-top: 20rpx;



         .line {

            margin-bottom: 18rpx;

            display: flex;

            font-size: 24rpx;



            &:nth-last-child(1) {

               margin-bottom: 0;

            }



            .label {

               color: #999999;

               width: 140rpx;

            }

         }

      }



      .status {

         position: absolute;

         right: -30rpx;

         top: 0;

         height: 60rpx;

         line-height: 60rpx;

         padding: 0 32rpx;

         border-radius: 0rpx 0rpx 0rpx 30rpx;

         background: rgba(39, 155, 170, 0.12);

         color: $uni-color-primary;

      }



      .status_img {

         position: absolute;

         right: 0rpx;

         top: 20rpx;

         width: 120rpx;

      }

   }



   .main_footer {

      position: fixed;

      bottom: 0;

      width: 100%;

      z-index: 9999;

      left: 0;

      padding: 10rpx 10rpx 30rpx;

      display: flex;

      justify-content: space-between;

      background: #ffffff;



      .btn {

         flex: 1;

         height: 88rpx;

         line-height: 88rpx;

         background: #ffffff;

         border-radius: 44rpx;

         border: 1rpx solid #999999;

         font-size: 32rpx;

         text-align: center;

         margin: 16rpx 8rpx;

      }



      .transfer {

         color: $uni-color-primary;

         border: 1rpx solid $uni-color-primary;

      }



      .handle {

         flex: 2;

         background: $uni-color-primary;

         color: #fff;

         border: 1rpx solid $uni-color-primary;

      }

   }



   .appr_modal {

      padding: 36rpx 30rpx 0;



      .title {

         font-weight: 600;

         font-size: 32rpx;

         color: #222222;

         margin-bottom: 40rpx;

         text-align: center;

      }



      .label {

         text {

            color: #ed4545;

         }

      }



      .df_sb {

         display: flex;

         justify-content: space-between;

         align-items: center;

         height: 90rpx;

         border-bottom: 1rpx solid #e4e4e4;

         margin-bottom: 30rpx;

      }



      .back_footer {

         display: flex;



         .btn {

            flex: 1;

            height: 88rpx;

            line-height: 88rpx;

            background: #ffffff;

            border-radius: 44rpx;

            border: 1rpx solid #999999;

            font-size: 32rpx;

            text-align: center;

            margin: 16rpx 8rpx;

         }



         .agree {

            background: $uni-color-primary;

            color: #fff;

            border: 1rpx solid $uni-color-primary;

         }

      }



      textarea {

         box-sizing: border-box;

         width: 690rpx;

         min-height: 200rpx;

         background-color: #f7f7f7;

         font-size: 28rpx;

         color: #333333;

         padding: 24rpx;

         border-radius: 8rpx;

         margin-bottom: 30rpx;

      }



      .upload_wrap {

         display: flex;

         flex-wrap: wrap;

         margin-bottom: 30rpx;

      }



      .adduser_list_item_ipt1_upload {

         margin-top: 20rpx;

         width: 156rpx;

         height: 156rpx;

         margin-right: 20rpx;

         border: 2rpx solid #e5e5e5;

         background: #f7f7f7;

         color: #666666;

         font-size: 22rpx;

         display: flex;

         flex-direction: column;

         align-items: center;

         justify-content: center;

         position: relative;



         &:nth-of-type(4n) {

            margin-right: 0;

         }



         .close {

            position: absolute;

            right: -20rpx;

            top: -20rpx;

            z-index: 999999999999;

            color: #fff;

         }



         image {

            width: 100%;

            height: 100%;

         }



         video {

            width: 100%;

            height: 100%;

         }

      }

   }

   .tran_modal{
      height: 1260rpx;
   }

   .emyty {

      width: 750rpx;

      height: 20rpx;

      background-color: #f7f7f7;

      margin: 0 -30rpx;

   }

}



.video_wrap {

   position: relative;

   border: 1px solid;

   width: 156rpx;

   height: 156rpx;

   border-radius: 4rpx;



   .play {

      width: 60rpx !important;

      height: 60rpx !important;

      position: absolute;

      top: 50%;

      left: 50%;

      transform: translate(-50%, -50%);

   }

}



.sel_upload_wrap {

   width: 100%;

   border-top: 1px solid #333333;

   box-shadow: 0 1 1 #333333;



   .btn {

      height: 90rpx;

      line-height: 90rpx;

      text-align: center;

   }

}



.member_list {

   height: 900rpx;

   overflow: auto;

   // border: 1px solid;

   .line {

      display: flex;

      align-items: center;

      border-bottom: 1rpx solid #e5e5e5;

      padding: 30rpx 0;



      .avatar {

         width: 64rpx;

         height: 64rpx;

         border-radius: 50%;

         overflow: hidden;

         margin-right: 20rpx;

      }



      .img_name {

         width: 64rpx;

         height: 64rpx;

         line-height: 64rpx;

         text-align: center;

         border-radius: 50%;

         overflow: hidden;

         margin-right: 20rpx;

         background: $uni-color-primary;

         color: #fff;

         border: 1rpx solid $uni-color-primary;

      }



      .content {

         flex: 1;



         .depart {

            font-size: 24rpx;

            color: #666666;

         }



         .info {

            display: flex;

            margin-bottom: 16rpx;



            .name {

               font-size: 30rpx;

            }



            .tag {

               font-size: 24rpx;

               border-radius: 4rpx;

               border: 1rpx solid #f62710;

               color: #f62710;

               padding: 0rpx 6rpx;

               margin-left: 8rpx;

            }

         }

      }



      .checked {

         width: 48rpx;

      }

   }



   .empty {

      width: 100%;

      height: 280rpx;

   }

}



.search_inp {

   height: 72rpx;

   background: #f7f7f7;

   border-radius: 4rpx;

   padding-left: 16rpx;



   .search {

      width: 28rpx;

   }



   input {

      flex: 1;

      font-size: 28rpx;

      color: #333333;

   }

}



.video_app {

   overflow: hidden;

   position: fixed;

   left: 0;

   top: 0;

   width: 100vw;

   height: 100vh;

   display: flex;

   align-items: center;

   z-index: 9990;



   .bg {

      background-color: rgba(0, 0, 0, .6);

      position: absolute;

      width: 100%;

      height: 100%;

      z-index: -1;

   }



   video {

      width: 100%;

      height: 42vh;

   }

}



.Transfer_footer {

   display: flex;



   .btn {

      flex: 1;

      height: 88rpx;

      line-height: 88rpx;

      background: #ffffff;

      border-radius: 44rpx;

      border: 1rpx solid #999999;

      font-size: 32rpx;

      text-align: center;

      margin: 16rpx 8rpx;

   }



   .active {

      background: $uni-color-primary;

      color: #fff;

      border: 1rpx solid $uni-color-primary;

   }

}

</style>