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

<template>
  <view class="plan-approval-container">
    <uni-nav-bar fixed="true" statusBar="true" left-icon="back" :title="name + '计划审批详情'"
      @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)">
          <template v-if="options.planType == 4"> 盘点明细 </template>
          <template v-else>
            {{ options.planType == 3 ? '需' : '' }}{{ name }}设备
          </template>
        </view>
      </view>
    </template>
    <view class="content">
      <!-- 基本信息 -->
      <view class="baseinfo" v-if="pickTabIndex === 0">
        <view class="col">
          <text class="label">计划单号</text>
          <text class="desc">{{ baseInfo.planCode }}</text>
        </view>
        <view class="col">
          <text class="label">{{ options.planType == 3 ? '计划' : name }}名称</text>
          <text class="desc">{{ baseInfo.planName }}</text>
        </view>
        <template v-if="options.planType == 3">
          <view class="col">
            <text class="label">报修数量</text>
            <text class="desc">{{ baseInfo.equiNum }}</text>
          </view>
          <view class="col">
            <text class="label">紧急程度</text>
            <text class="desc">{{ urgentList[baseInfo.urgent] }}</text>
          </view>
        </template>
        <template v-else>
          <view class="col">
            <text class="label">设备分类</text>
            <text class="desc">{{ baseInfo.bizTypeName }}</text>
          </view>
          <view class="col">
            <text class="label">计划配置单号</text>
            <text class="desc">{{ baseInfo.planRuleCode }}</text>
          </view>
        </template>
        <view class="col">
          <text class="label">计划创建人</text>
          <text class="desc">{{ baseInfo.createUserName }}</text>
        </view>
        <template v-if="options.planType != 3">
          <view class="col">
            <text class="label">执行部门</text>
            <text class="desc">{{ baseInfo.executorDeptName }}</text>
          </view>
          <view class="col">
            <text class="label">执行人</text>
            <text class="desc">{{ baseInfo.executorName }}</text>
          </view>
          <view class="col">
            <text class="label">执行人电话</text>
            <text class="desc">{{ baseInfo.executorPhone }}</text>
          </view>
          <view class="col">
            <text class="label">计划完成时长</text>
            <text class="desc">{{ baseInfo.duration }}分钟</text>
          </view>
        </template>
        <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">
        <template v-if="options.planType == 4">
          <view class="pd-list">
            <!-- 盘点 -->
            <view class="pd-list-item" v-for="item in planEquiList" :key="item.id">
              <view class="item">
                <view class="s1"> 生产设备编码：{{ item.assetCode }} </view>
                <view class="s2"> 生产设备名称：{{ item.assetName }} </view>
              </view>
              <view class="item">
                <view class="s1"> 牌号：{{ item.assetBrand }} </view>
                <view class="s2"> 型号：{{ item.assetSku }} </view>
              </view>
              <view class="item">
                <view class="s2"> 库存：{{ item.inventoryNum }} </view>
                <view class="s1"> 单位：{{ item.isUnpack ? item.measurementUnit : item.minPackUnit }} </view>
              </view>
              <view class="item">
                <view class="s1">
                  类型：{{ item.assetTypeDictDESC }}
                </view>
              </view>
            </view>
          </view>
        </template>

        <uni-collapse accordion v-model="accordionVal" v-else>
          <uni-collapse-item v-for="item in planEquiList" :show-animation="true" :key="item.id || item.equiId"
            :open="false" :typeOpen="1">
            <template v-slot:title>
              <view class="collapse-title">
                {{ item.equiName }}
                <text>
                  {{ item.equiModel }}
                </text>
              </view>
            </template>
            <view class="collapse-item-wrapper">
              <Info :item="item" :planType="options.planType" />
              <Content :item="item" :planType="options.planType" />
            </view>
          </uni-collapse-item>
        </uni-collapse>
      </view>
    </view>
    <Approval v-if="isApproval && baseInfo.planStatus && baseInfo.planStatus.code === 4" :devOpsType="0"
      :planType="options.planType" :myHandleId="options.id" :id="options.workOrderId" />
	  

	  
  </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'

  const config = {
    1: {
      api: '/plan/info/getDetail/'
    },
    2: {
      api: '/plan/info/getDetail/'
    },
    3: {
      api: '/repair/info/planInfoDetail/'
    },
    4: {
      api: '/plan/info/getDetail/'
    }
  }

  export default {
    components: {
      Approval,
      Content,
      Info
    },
    data() {
      return {
        //紧急程度
        urgentList: {
          1: '普通',
          2: '紧急',
          3: '重要'
        },
        tabList: [{
            value: 0,
            label: '基本信息',
            list: []
          },
          {
            value: 1,
            label: '设备',
            list: []
          }
        ],
        pickTabIndex: 0,
        accordionVal: '',
        options: {
          id: '',
          workOrderId: '',
          planType: '',
          devOpsType: ''
        },
        baseInfo: {},
        planEquiList: [],
        isApproval: false
      }
    },
    onLoad(options) {
      this.options = options
      this.isApproval = options.type === 'approval'
    },
    onShow() {
      this.getInfo()
    },
    computed: {
      name() {
        return ['巡点检', '保养', '维修', '盘点'][this.options.planType - 1]
      }
    },
    methods: {
      //切换选项卡
      changeChartsTab(index) {
        this.pickTabIndex = index
      },
      getInfo() {
        get(
          this.apiUrl +
          `${config[this.options.planType].api}${this.options.workOrderId}`
        ).then(res => {
          if (res?.success) {
            this.baseInfo = res.data
            this.planEquiList =
              res.data.planEquiList ||
              res.data.planDetailRespList ||
              res.data.planInventoryDetailList || []
            if (this.planEquiList.length) {
              let arr = []
              this.planEquiList.map(item => {
                if (item.itemList.length) {
                  arr.push(item)
                }
              })
              this.planEquiList = arr
            }
          }
        })
      }
    }
  }
</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: 200rpx;
            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;
      }
    }
  }

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

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