wq-wms-java/nladmin-ui/src/views/wms/st/purchase/ViewDialog.vue

<template>
  <el-dialog
    append-to-body
    title="采购入库单详情"
    :visible.sync="dialogVisible"
    destroy-on-close
    fullscreen
    @close="close"
    @open="open"
  >
    <el-form ref="form" style="border: 1px solid #cfe0df;margin-top: 10px;padding-top: 10px;" :inline="true" :model="form" size="mini" label-width="85px" label-suffix=":">
      <el-form-item label="单据编号" prop="bill_id">
        <label slot="label">单&nbsp;&nbsp;据&nbsp;号:</label>
        <el-input v-model="form.bill_id" disabled style="width: 210px" />
      </el-form-item>
      <el-form-item label="订单号" prop="order_no">
        <el-input v-model="form.order_no" disabled style="width: 210px" />
      </el-form-item>
      <el-form-item label="订单类型" prop="order_type">
        <el-input v-model="form.order_type" disabled style="width: 210px" />
      </el-form-item>
      <el-form-item label="供应商编码" prop="supplier_code">
        <el-input v-model="form.supplier_code" disabled style="width: 210px" />
      </el-form-item>
      <el-form-item label="供应商名称" prop="supplier_name">
        <el-input v-model="form.supplier_name" disabled style="width: 210px" />
      </el-form-item>
      <el-form-item label="单据状态" prop="bill_status">
        <el-select v-model="form.bill_status" disabled style="width: 210px">
          <el-option v-for="item in billStatusOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="审核状态" prop="audit_status">
        <el-input v-model="auditStatusLabel" disabled style="width: 210px" />
      </el-form-item>
      <el-form-item label="审核信息" prop="audit_msg">
        <el-input v-model="form.audit_msg" disabled style="width: 380px" />
      </el-form-item>
      <el-form-item label="创建人" prop="creator">
        <el-input v-model="form.creator" disabled style="width: 210px" />
      </el-form-item>
      <el-form-item label="创建时间" prop="create_time">
        <el-input :value="formatDate(form.create_time)" disabled style="width: 210px" />
      </el-form-item>
    </el-form>

    <div class="crud-opts2">
      <span class="role-span2">入库明细</span>
    </div>
    <el-card class="box-card" shadow="never" :body-style="{padding:'0'}">
      <el-table ref="table" :data="tableDtl" style="width: 100%;" max-height="400" size="mini" border :header-cell-style="{background:'#f5f7fa',color:'#606266'}">
        <el-table-column type="index" label="序号" width="55" align="center" />
        <el-table-column show-overflow-tooltip prop="item_no" label="行号" width="80" align="center" />
        <el-table-column show-overflow-tooltip prop="category_code" label="分类编码" width="120" align="center" />
        <el-table-column show-overflow-tooltip prop="category_name" label="分类名称" width="120" align="center" />
        <el-table-column show-overflow-tooltip prop="sku_code" label="物料编码" width="120" align="center" />
        <el-table-column show-overflow-tooltip prop="sku_name" label="物料名称" min-width="140" align="center" />
        <el-table-column show-overflow-tooltip prop="model" label="规格型号" width="100" align="center" />
        <el-table-column show-overflow-tooltip prop="house_code" label="仓库编码" width="100" align="center" />
        <el-table-column show-overflow-tooltip prop="batch_no" label="批次号" width="120" align="center" />
        <el-table-column prop="qty" label="数量" width="80" align="center" />
        <el-table-column show-overflow-tooltip prop="unit" label="单位" width="80" align="center" />
        <el-table-column show-overflow-tooltip prop="track_no" label="跟踪号" width="120" align="center" />
      </el-table>
    </el-card>
  </el-dialog>
</template>

<script>
import { crud } from '@crud/crud'
import crudPurchase from '@/views/wms/st/purchase/purchase'

export default {
  name: 'ViewDialog',
  mixins: [crud()],
  props: {
    dialogShow: {
      type: Boolean,
      default: false
    },
    rowMst: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      dialogVisible: false,
      tableDtl: [],
      form: {},
      billStatusOptions: [
        { value: '0', label: '已创建' },
        { value: '1', label: '执行中' },
        { value: '2', label: '已完成' },
        { value: '3', label: '审核成功' },
        { value: '4', label: '审核失败' }
      ]
    }
  },
  computed: {
    auditStatusLabel() {
      const map = { '0': '未审核', '1': '已审核' }
      return map[this.form.status] || this.form.status || '-'
    }
  },
  watch: {
    dialogShow: {
      handler(newValue) {
        this.dialogVisible = newValue
      }
    },
    rowMst: {
      handler(newValue) {
        this.form = newValue || {}
      },
      deep: true
    }
  },
  methods: {
    open() {
      if (this.form && this.form.id) {
        crudPurchase.get(this.form.id).then(res => {
          this.tableDtl = (res && res.data.tableData) || []
        })
      }
    },
    close() {
      this.$emit('update:dialogShow', false)
      this.$emit('AddChanged')
      this.tableDtl = []
    },
    formatDate(val) {
      if (!val) return ''
      if (typeof val === 'string') return val
      const d = new Date(val)
      const y = d.getFullYear()
      const m = String(d.getMonth() + 1).padStart(2, '0')
      const day = String(d.getDate()).padStart(2, '0')
      const h = String(d.getHours()).padStart(2, '0')
      const min = String(d.getMinutes()).padStart(2, '0')
      const s = String(d.getSeconds()).padStart(2, '0')
      return y + '-' + m + '-' + day + ' ' + h + ':' + min + ':' + s
    }
  }
}
</script>

<style>
.crud-opts2 {
  padding: 10px 0px 0px 10px;
  display: -webkit-flex;
  display: flex;
  align-items: center;
}
.crud-opts2 .role-span2 {
  font-size: 16px;
  color: #303133;
}
</style>