aiot-app/pages/home/backlog/approve_approve_allot.vue

<template>
  <!-- 报损报溢 -->
  <view class="plan-approval-container">
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="报损报溢审批详情"
      @clickLeft="back"
    ></uni-nav-bar>
    <template>
      <view class="tab-title">
        <view
          class="tab-item"
          :class="0 === pickTabIndex ? 'active' : ''"
          @click="changeChartsTab(0)"
          >基本信息
        </view>
        <view
          class="tab-item"
          :class="1 === pickTabIndex ? 'active' : ''"
          @click="changeChartsTab(1)"
        >
          报损报溢明细
        </view>
      </view>
    </template>
    <view class="content">
      <!-- 基本信息 -->
      <view class="baseinfo" v-if="pickTabIndex === 0">
        <view class="col">
          <text class="label">报损报溢单号</text>
          <text class="desc">{{ baseInfo.code }}</text>
        </view>
        <view class="col">
          <text class="label">名称</text>
          <text class="desc">{{ baseInfo.name }}</text>
        </view>
        <view class="col">
          <text class="label">仓库</text>
          <text class="desc">{{ baseInfo.warehouseName }}</text>
        </view>
        <view class="col">
          <text class="label">报损报溢人</text>
          <text class="desc">{{ baseInfo.reportName }}</text>
        </view>
        <view class="col">
          <text class="label">报损报溢部门</text>
          <text class="desc">{{ baseInfo.reportDeptName }}</text>
        </view>
        <view class="col">
          <text class="label">创建时间</text>
          <text class="desc">{{ baseInfo.createTime }}</text>
        </view>
        <view class="col">
          <text class="label">备注</text>
          <text class="desc">{{ baseInfo.remark }}</text>
        </view>
      </view>
      <view class="equipment" v-if="pickTabIndex === 1">
        <uni-collapse accordion v-model="accordionVal">
          <uni-collapse-item :show-animation="true" :open="false" :typeOpen="1">
            <template v-slot:title>
              <view class="collapse-title">
                报损明细
                <text> 数量 {{ bsList.length }} </text>
              </view>
            </template>
            <view class="collapse-item-wrapper">
              <view
                class="info-container"
                v-for="(item, index) in bsList"
                :key="index"
              >
                <view class="col">
                  <text class="label">编码</text>
                  <text class="desc">{{ item.code }}</text>
                </view>
                <view class="col">
                  <text class="label">名称</text>
                  <text class="desc">{{ item.name }}</text>
                </view>

                <view class="col">
                  <text class="label">类型</text>
                  <text class="desc">{{
                    getDictValue('物品类型', item.productType)
                  }}</text>
                </view>
                <view class="col">
                  <text class="label">批次号</text>
                  <text class="desc">{{ item.batch }}</text>
                </view>
                <view
                  class="col"
                  v-for="(itm, index) in tableHeader"
                  :key="index"
                >
                  <text class="label">{{ itm.label }}</text>
                  <text class="desc">
                    <template v-if="itm.formatter">
                      {{ itm.formatter(item) }}
                    </template>
                    <template v-else>
                      {{ item[itm.prop] }}
                    </template></text
                  >
                </view>
                <!-- <view class="col">
                  <text class="label">包装编码</text>
                  <text class="desc">{{ item.num }}</text>
                </view> -->
                <view class="col">
                  <text class="label">最小单元</text>
                  <text class="desc"
                    >{{ item.measurementUnit }} {{ item.unit }}/{{
                      item.minPackUnit || item.minimumUnit
                    }}</text
                  >
                </view>
              </view>
            </view>
          </uni-collapse-item>
        </uni-collapse>
        <uni-collapse accordion v-model="accordionVal2">
          <uni-collapse-item :show-animation="true" :open="false" :typeOpen="1">
            <template v-slot:title>
              <view class="collapse-title">
                报溢明细
                <text> 数量 {{ byList.length }} </text>
              </view>
            </template>
            <view class="collapse-item-wrapper">
              <view
                class="info-container"
                v-for="(item, index) in byList"
                :key="index"
              >
                <view class="col">
                  <text class="label">编码</text>
                  <text class="desc">{{ item.code }}</text>
                </view>
                <view class="col">
                  <text class="label">名称</text>
                  <text class="desc">{{ item.name }}</text>
                </view>
                <view class="col">
                  <text class="label">类型</text>
                  <text class="desc">{{
                    getDictValue('物品类型', item.productType)
                  }}</text>
                </view>

                <view class="col">
                  <text class="label">批次号</text>
                  <text class="desc">{{ item.batch }}</text>
                </view>
                <view
                  class="col"
                  v-for="(itm, index) in tableHeader"
                  :key="index"
                >
                  <text class="label">{{ itm.label }}</text>
                  <text class="desc">
                    <template v-if="itm.formatter">
                      {{ itm.formatter(item) }}
                    </template>
                    <template v-else>
                      {{ item[itm.prop] }}
                    </template></text
                  >
                </view>
                <!-- <view class="col">
                  <text class="label">包装编码</text>
                  <text class="desc">{{ item.num }}</text>
                </view> -->
                <view class="col">
                  <text class="label">最小单元</text>
                  <text class="desc"
                    >{{ item.measurementUnit }} {{ item.unit }}/{{
                      item.minPackUnit || item.minimumUnit
                    }}</text
                  >
                </view>
              </view>
            </view>
          </uni-collapse-item>
        </uni-collapse>
      </view>
    </view>

    <view class="approval-container" v-if="isApproval && baseInfo.status == 1">
      <view class="approval_btn-wrapper">
        <text class="approval-btn refuse" @click="handleRefuse">驳回</text>
        <text class="approval-btn primary" @click="handlePass(true)">通过</text>
      </view>
      <uni-popup ref="inputDialog" type="dialog">
        <uni-popup-dialog
          ref="inputClose"
          mode="input"
          title="驳回原因"
          placeholder="请输入内容"
          :before-close="true"
          @close="handleClose"
          @confirm="timeoutCauseConfirm"
        ></uni-popup-dialog>
      </uni-popup>
    </view>
  </view>
</template>

<script>
import { post, get, postJ } from '@/utils/api.js'
import Approval from '@/components/Approval.vue'
import Info from './components/Info'
import Content from './components/Content'
import dictMixns from '@/mixins/dictMixins'
export default {
  components: {
    Approval,
    Content,
    Info
  },
  mixins: [dictMixns],
  data () {
    return {
      pickTabIndex: 0,
      accordionVal: '',
      accordionVal2: '',
      options: {
        id: '',
        workOrderId: '',
        planType: '',
        devOpsType: ''
      },
      baseInfo: {},
      // 报损
      bsList: [],
      // 报溢
      byList: [],
      isApproval: false,
      dictOpt: {
        bizScene: {
          1: '生产调拨',
          2: '采购调拨',
          3: '赠送调拨',
          4: '借用调拨',
          5: '退还调拨',
          6: '其他调拨'
        },
        urgent: {
          1: '普通',
          2: '重要',
          3: '紧急'
        }
      }
    }
  },
  onLoad (options) {
    this.options = options
    this.isApproval = options.type === 'approval'
    // this.requestDict('物品类型')
  },
  onShow () {
    this.bsList = []
    this.byList = []
    this.getInfo()
  },
  computed: {
    tableHeader () {
      return this.getTableHeader(
        this.baseInfo.list && this.baseInfo.list[0]?.productType
      )
    }
  },
  methods: {
    getTableHeader (selectEquiType) {
      switch (+selectEquiType) {
        case 3:
          return [{ label: '牌号', prop: 'brandNum' }]
        case 8:
          return [
            { label: '型号', prop: 'modelType' },
            { label: '规格', prop: 'specification' }
          ]
        case 4:
          return [
            { label: '牌号', prop: 'brandNum' },
            { label: '型号', prop: 'modelType' }
          ]
        case 5: //'周转车'
          return [
            { label: '规格', prop: 'specification' },
            {
              label: '材质',
              prop: 'texture',
              formatter (row) {
                if (!row?.extendField) return ''
                const extendField = JSON.parse(row.extendField)
                return extendField.texture
              }
            },
            {
              label: '长宽高',
              prop: '',
              formatter (row) {
                if (!row?.extendField) return ''
                const extendField = JSON.parse(row.extendField)
                return `${extendField.length || '-'}*${
                  extendField.width || '-'
                }*${extendField.high || '-'}`
              }
            }
          ]
        case 2: //'舟皿'
          return [
            { label: '规格', prop: 'specification' },
            { label: '型号', prop: 'modelType' },
            {
              label: '长宽高',
              prop: '',
              formatter (row) {
                if (!row?.extendField) return ''
                const extendField = JSON.parse(row.extendField)
                return `${extendField.length || '-'}*${
                  extendField.width || '-'
                }*${extendField.high || '-'}`
              }
            }
          ]
        case 1: //'设备'
          return [
            { label: '型号', prop: 'modelType' },
            { label: '规格', prop: 'specification' }
          ]
        case 6: //'模具'
          return [
            { label: '牌号', prop: 'brandNum' },
            { label: '型号', prop: 'modelType' },
            {
              label: '收缩系数',
              prop: '',
              formatter (row) {
                if (!row?.extendField) return ''
                const extendField = JSON.parse(row.extendField)
                return extendField.shrinkageCoefficient
              }
            }
          ]
        case 7: //'备品备件'
          return [
            { label: '规格', prop: 'specification' },
            { label: '型号', prop: 'modelType' }
          ]
      }

      return []
    },
    //切换选项卡
    changeChartsTab (index) {
      this.pickTabIndex = index
    },
    getInfo () {
      get(this.apiUrl + `/breakag/info/${this.options.workOrderId}`).then(
        res => {
          if (res?.success) {
            this.baseInfo = res.data
            for (let s of res.data.list) {
              console.log(s.status)
              if (s.status == 1 || s.status == 2) {
                this.bsList.push(s)
              } else if (s.status == 3) {
                this.byList.push(s)
              }
            }
          }
        }
      )
    },
    // 审批
    handleRefuse () {
      this.$refs.inputDialog.open()
    },
    handleClose () {
      this.$refs.inputDialog.close()
    },
    handlePass (checked, cause) {
      const params = {
        checked,
        handleType: this.options.handleType,
        myHandleId: this.options.id,
        id: this.options.workOrderId,
        type: this.options.planType,
        cause
      }
      postJ(this.apiUrl + '/plan/info/audit', params).then(res => {
        if (res?.success) {
          uni.navigateTo({
            url: `/pages/home/backlog/result?type=${
              checked ? 'approve' : 'refuse'
            }&status=${this.devOpsType}`
          })
        }
      })
    },
    timeoutCauseConfirm (value) {
      if (!value) {
        uni.showToast({
          title: '请输入驳回原因',
          icon: 'none'
        })
        return
      }

      this.handlePass(false, value)
      this.$refs.inputDialog.close()
    }
    // 审批end
  }
}
</script>

<style lang="scss" scoped>
.tab-title {
  width: 100%;
  padding: 0 30rpx;
  margin-bottom: 12rpx;
  display: flex;
  height: $tab-height;
  line-height: $tab-height;
  background-color: #ffffff;
  border-bottom: 1px solid #f2f2f2;
  box-sizing: border-box;

  .tab-item {
    width: 30%;
    text-align: center;
    font-size: 32rpx;
    color: $uni-text-color-grey;
  }

  .tab-item.active {
    color: $j-primary-border-green;
    border-bottom: 1px solid $j-primary-border-green;
  }
}

.plan-approval-container {
  display: flex;
  flex-direction: column;
  padding-bottom: 80rpx;

  /deep/.uni-collapse-item {
    background-color: rgba(21, 122, 44, 0.372549019607843);
  }

  .content {
    flex: 1;
    overflow: auto;

    .baseinfo {
      padding: 0 22rpx;
      font-size: 28rpx;

      .col {
        display: flex;
        padding: 10rpx 0;
        border-bottom: 1rpx dashed #d7d7d7;

        .label {
          display: inline-block;
          width: 250rpx;
          text-align: right;
          margin-right: 20rpx;
          font-weight: bold;
        }

        .desc {
          flex: 1;
          word-break: break-all;
        }
      }
    }
  }

  .collapse-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 28rpx;
    height: 80rpx;
    padding: 8rpx;
    box-sizing: border-box;
  }

  .collapse-item-wrapper {
    padding: 12rpx;

    .info-container {
      margin-bottom: 20rpx;
      display: flex;
      flex-wrap: wrap;
      border: 1px solid #f2f2f2;
      padding: 30rpx;
      .col {
        width: 50%;

        &.row {
          width: 100%;
        }
      }
    }
  }
}

.pd-list-item {
  padding: 10rpx;
  border-bottom: 1px solid #d7d7d7;

  .item {
    display: flex;
    font-size: 28rpx;
    justify-content: space-between;
    padding: 10rpx;
  }
}

.info-container {
  padding: 0 20rpx;

  .col {
    border-bottom: 1rpx dashed #7d7d7d;
    padding: 10rpx 0;
    display: flex;

    .label {
      width: 120rpx;
      text-align: right;
      margin-right: 28rpx;
      color: #333;
      font-weight: bold;
    }

    .desc {
      word-break: break-all;
      flex: 1;
    }
  }
}
.approval-container {
  width: 100vw;
  height: 80rpx;

  .approval_btn-wrapper {
    display: flex;
    position: fixed;
    bottom: 0;
    width: 100vw;
    height: 80rpx;
    background-color: #fff;
  }

  .approval-btn {
    flex: 1;
    line-height: 78rpx;
    text-align: center;
    border: 1rpx solid $j-primary-border-green;
    &.refuse {
      color: red;
    }
    &.primary {
      background-color: $j-primary-border-green;
      color: #fff;
    }
  }
}
</style>