X-web/src/views/modules/production/prod-management-details-dialog.vue

<template>
  <el-dialog
    title="查看"
    width="70%"
    :close-on-click-modal="false"
    :visible.sync="visible"
    @close="onChose"
  >
  <div class="production">
    <el-table
      :data="dataList"
      border
      style="width: 100%;">
      <el-table-column
        label="序号"
        type="index"
        width="50"
        align="center">
      </el-table-column>
      <el-table-column
        prop="productName"
        header-align="center"
        align="center"
        min-width="120"
        :show-tooltip-when-overflow="true"
        label="物料名称"/>
      <el-table-column
        prop="productSpec"
        header-align="center"
        align="center"
        min-width="120"
        :show-tooltip-when-overflow="true"
        label="物料规格"/>
      <el-table-column
        prop="productNumber"
        header-align="center"
        align="center"
        min-width="120"
        :show-tooltip-when-overflow="true"
        label="物料编号"/>
      <el-table-column
        prop="batchNumber"
        header-align="center"
        align="center"
        min-width="120"
        :show-tooltip-when-overflow="true"
        label="批次号"/>
      <el-table-column
        prop="startTime"
        header-align="center"
        align="center"
        min-width="120"
        :show-tooltip-when-overflow="true"
        label="开始时间"/>
      <el-table-column
        prop="endTime"
        header-align="center"
        align="center"
        min-width="120"
        :show-tooltip-when-overflow="true"
        label="结束时间"/>
      <el-table-column
        header-align="center"
        align="center"
        fixed="right"
        min-width="80"
        :show-tooltip-when-overflow="true"
        label="状态">
        <template slot-scope="scope">{{stateFormat(scope.row)}}</template>
      </el-table-column>
    </el-table>
  </div>
    <span slot="footer">
        <el-button @click="onChose">返回</el-button>
      </span>
  </el-dialog>
</template>

<script>
import AttachDetail from '@/views/modules/common/attach-detail'
import AttachDetailDialog from '@/views/modules/common/attach-detail-dialog'
import InspectTypeDialog from '@/views/modules/production/inspect-type-dialog'
import {optionsMaterialState} from '@/utils/enums'
export default {
  name: 'prod-management-details-dialog',
  components: {InspectTypeDialog, AttachDetailDialog, AttachDetail},
  data () {
    return {
      visible: false,
      dataList: [],
      optionsState: optionsMaterialState
    }
  },
  methods: {
    onChose () {
      this.visible = false
    },
    // 初始化表单
    async init (productList) {
      this.dataList = productList
      this.visible = true
    },
    // 转换属性“状态”
    stateFormat (row) {
      if (this.optionsState) {
        for (let i = 0; i < this.optionsState.length; i++) {
          if (this.optionsState[i].code === row.prodState) {
            return this.optionsState[i].value
          }
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
/deep/ .my-row .super-flow__node {
  width: 180px;
  height: 80px;
}
</style>