X-web/src/views/modules/warehouse/stock-order-detail.vue

<template>
    <!-- <el-dialog
      title="详情"
      width="80%"
      :close-on-click-modal="false"
      :visible.sync="visible"> -->
    <div>
      <div class="my-title">详情</div>
      <div style="margin-left: 20px;margin-right: 20px">
        <!-- 工作流 -->
        <div v-show="dataForm.workFlowBusinessExt">
          <el-steps :active="dataForm.workFlowBusinessExt && dataForm.workFlowBusinessExt.workFlowProcessStepList?dataForm.workFlowBusinessExt.workFlowProcessStepList.length + 2:0" align-center style="margin-bottom: 20px">
            <template v-for="(item, i) in stepList">
              <el-step :icon="item.icon" :title="item.title" :description="item.description"></el-step>
            </template>
          </el-steps>
          <el-collapse style="margin-bottom: 20px">
            <el-collapse-item>
              <template slot="title">
                <span style="color: red">审批日志（展开查看更多）：</span>
              </template>
              <template v-for="(item, i) in logList">
                <div>{{++i}}：{{item.approverName}}  {{item.createTime}}  {{item.approvalValue}}</div>
              </template>
            </el-collapse-item>
          </el-collapse>
        </div>
        <div v-if="isFlow">
          <approve-component ref="approve" @approveFinished="approveFinished"/>
        </div>
        <div>
          <e-desc title="基本信息">
            <e-desc-item label="编码">{{dataForm.recordCode}}</e-desc-item>
            <e-desc-item label="出入库申请人">{{dataForm.applicant}}</e-desc-item>
            <e-desc-item label="申请人部门">{{dataForm.orgName}}</e-desc-item>
          </e-desc>
          <e-desc title="出入库详情">
            <el-table
              border
              :data="dataList">
              <el-table-column
                label="序号"
                type="index"
                align="center"
                width="50"
              >
              </el-table-column>
              <el-table-column
                prop="materialName"
                header-align="center"
                align="center"
                width="160"
                :show-tooltip-when-overflow="true"
                label="名称">
              </el-table-column>
              <el-table-column
                prop="categoryName"
                header-align="center"
                align="center"
                label="类别">
              </el-table-column>
              <el-table-column
                prop="unitName"
                header-align="center"
                align="center"
                label="单位">
              </el-table-column>
              <el-table-column
                prop="specifications"
                header-align="center"
                align="center"
                label="规格">
              </el-table-column>
              <el-table-column
                prop="batchNumber"
                header-align="center"
                align="center"
                width="140"
                :show-tooltip-when-overflow="true"
                label="批次号">
              </el-table-column>
              <el-table-column
                prop="price"
                header-align="center"
                align="center"
                label="单价">
              </el-table-column>
              <el-table-column
                prop="cnt"
                header-align="center"
                align="center"
                label="数量">
              </el-table-column>
              <el-table-column
                prop="-"
                header-align="center"
                align="center"
                label="金额">
                <template slot-scope="scope">
                  <span>{{ scope.row.price * scope.row.cnt }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="source"
                header-align="center"
                align="center"
                width="140"
                :show-tooltip-when-overflow="true"
                label="来源">
              </el-table-column>
              <el-table-column
                prop="expirationTime"
                header-align="center"
                align="center"
                width="160"
                label="到期时间">
              </el-table-column>
              <el-table-column
                prop="conversionName"
                header-align="center"
                align="center"
                width="140"
                :show-tooltip-when-overflow="true"
                label="是否换算">
              </el-table-column>
              <el-table-column
                prop="notes"
                header-align="center"
                align="center"
                width="140"
                :show-tooltip-when-overflow="true"
                label="备注">
              </el-table-column>
            </el-table>
          </e-desc>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="onChose">取消</el-button>
      </span>
    </div>
    <!-- </el-dialog> -->
</template>

<script>
  import EDesc from '../common/e-desc'
  import EDescItem from '../common/e-desc-item'
  import { getBoundDetails } from '@/api/warehouse'
  import { dealStepData, dealStepLogs } from '@/api/util'
  import ApproveComponent from '../common/approve-component'
  export default {
    name: 'stock-order-detail',
    components: {
      EDesc, EDescItem, ApproveComponent
    },
    data () {
      return {
        visible: false,
        isFlow: false,
        dataForm: {},
        dataList: [],
        stepList: [],
        logList: []
      }
    },
    methods: {
      onChose () {
        this.$emit('onChose')
      },
      async init (id, businessType) {
        this.visible = true
        this.isFlow = !!(businessType && businessType !== '')
        this.dataForm = {}
        this.dataList = []
        this.stepList = []
        this.logList = []
        await getBoundDetails(id).then(({data}) => {
          if (data && data.code === '200') {
            if (data.data[0]) {
              this.dataForm = data.data[0]
              // 流程图展示
              if (data.data[0].workFlowBusinessExt) {
                dealStepData(data.data[0].workFlowBusinessExt.workFlowProcessStepList, this.stepList)
                dealStepLogs(data.data[0].workFlowBusinessExt.processLogList, this.logList)
              }
            }
            this.dataList = data.data
            // 初始化审批Form
            this.showApproveForm(businessType, id)
          }
        })
      },
      // 初始化审批Form
      showApproveForm (businessType, businessId) {
        if (this.isFlow) {
          this.$nextTick(() => {
            this.$refs.approve.init(businessType, businessId)
          })
        }
      },
      // 审批完成
      approveFinished () {
        this.onChose()
        this.$emit('approveFinished')
      }
    }
  }
</script>

<style scoped>

</style>