jonhon-mes-web/src/views/orderManagement/components/mold/detailsInfoDialog.vue

<template>
  <el-dialog
    title="详情"
    append-to-body
    :modelValue="openShow"
    width="70%"
    @close="closeDialog"
    fullscreen
  >
    <el-descriptions class="margin-top" :column="4" border title="需求信息">
      <el-descriptions-item label="需求编号">{{}}</el-descriptions-item>
      <el-descriptions-item label="工装编号">{{ form.moCode || "-" }}</el-descriptions-item>
      <el-descriptions-item label="工装名称">{{ form.moName || "-" }}</el-descriptions-item>
      <el-descriptions-item label="关联订单数">{{form.linkOrderIds || "-"}}</el-descriptions-item>
      <el-descriptions-item label="订单需求量">{{ form.quantity || "-" }}</el-descriptions-item>
      <el-descriptions-item label="库存数量">{{ form.stockNum || "-" }}</el-descriptions-item>
      <el-descriptions-item label="占用数量">{{ form.occupyNum || "-" }}</el-descriptions-item>
    </el-descriptions>
    <el-descriptions class="margin-top" :column="4" border title="工装占用信息"></el-descriptions>
    <el-table :data="toolUseList" style="width: 100%">
      <el-table-column prop="shuliang" label="工作订单号" align="center"> </el-table-column>
      <el-table-column prop="shuliang" label="占用数" align="center"> </el-table-column>
      <el-table-column prop="shuliang" label="占用时间" align="center"> </el-table-column>
    </el-table>
    <el-descriptions class="margin-top" :column="4" border title="关联订单"></el-descriptions>
    <el-table :data="linkOrderList" style="width: 100%">
      <el-table-column type="index" width="80" label="序号" align="center"> </el-table-column>
      <el-table-column prop="ypCode" label="计划单号" align="center"> </el-table-column>
      <el-table-column prop="partCode" label="零件号" align="center"> </el-table-column>
      <el-table-column prop="partName" label="产品名称" align="center"> </el-table-column>
      <el-table-column prop="ypQty" label="零件数量" align="center"> </el-table-column>
      <el-table-column prop="demandDate" label="需求交期" align="center"> </el-table-column>
      <el-table-column prop="toolsDemand" label="工装需求数量" align="center"> </el-table-column>
      <el-table-column prop="shuliang" label="已交付数量" align="center"> </el-table-column>
      <el-table-column prop="shuliang" label="未交付数量" align="center"> </el-table-column>
      <el-table-column prop="releaseDate" label="计划下达时间" align="center"> </el-table-column>
    </el-table>
    <el-descriptions
      class="margin-top"
      :column="4"
      border
      title="申报记录(近一个的记录)"
    ></el-descriptions>
    <el-table :data="nearlyApplyList" style="width: 100%">
      <el-table-column prop="partCode" label="零件号" align="center"></el-table-column>
      <el-table-column prop="partName" label="零件名称" align="center"></el-table-column>
      <el-table-column prop="toolCode" label="对应工装号" align="center"></el-table-column>
      <el-table-column prop="toolName" label="工装名称" align="center"></el-table-column>
      <el-table-column prop="applyNum" label="数量" align="center"></el-table-column>
      <el-table-column prop="mafTypeName" label="计划类型" align="center"></el-table-column>
      <el-table-column prop="needDate" label="需求日期" align="center"></el-table-column>
      <el-table-column prop="quaLevel" label="生产标识" align="center"></el-table-column>
      <el-table-column prop="keeperName" label="保管员" align="center"></el-table-column>
      <el-table-column prop="releaserName" label="下达人" align="center"></el-table-column>
      <el-table-column prop="createTime" label="建立时间" align="center"></el-table-column>
      <el-table-column prop="createUserName" label="建立人员" align="center"></el-table-column>
      <el-table-column prop="memo" label="备注" align="center"></el-table-column>
      <el-table-column prop="mafStatusName" label="状态" align="center"></el-table-column>
    </el-table>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import { getOrderMoldPlanCaDeatils } from '@/api/orderManagement/moldPlan';
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false,
    },
    id: {
      type: String,
      default: '1',
    },
  },
  data() {
    return {
      openShow: false,
      form: {},
      tableData: [],
      toolUseList:[],   //工装占用列表
      linkOrderList:[], //关联列表
      nearlyApplyList:[],   //申报记录
    };
  },
  mounted() {
    this.openShow = this.showDialog;
    getOrderMoldPlanCaDeatils({ id: this.id }).then(res => {
      if (res.data.code == 200) {
        console.log(res.data.data);
        this.form = res.data.data;
        this.toolUseList = res.data.data.toolUseList;
        this.linkOrderList = res.data.data.linkOrderList;
        this.nearlyApplyList = res.data.data.nearlyApplyList;
        // this.form = { ...res.data };
      }
    });
  },
  methods: {
    closeDialog() {
      this.openShow = false;
      this.$emit('closeDialog');
    },

  },
};
</script>
<style lang="scss" scoped>
.margin-top {
  margin-top: 24px;
}
</style>