CostumingPlatform/ant-design-vue-jeecg/src/views/productplan/ZyPlanWuLiaoDataDetail.vue

<template>
  <a-card :bordered="false">
    <p style="font-size: 30px;color:#333; padding-left: 30% ">{{ planInfo.productCode }}生产计划物料单</p>
    <template>
      <div>
        <el-descriptions border :column='4'>
          <el-descriptions-item label="工单编号 ">{{ planInfo.productCode }}</el-descriptions-item>
          <el-descriptions-item label="生产企业">{{ planInfo.productOrg }}</el-descriptions-item>
          <!--          <el-descriptions-item label="企业负责人 ">admin</el-descriptions-item>-->
          <el-descriptions-item label="车间 ">{{ planInfo.workshop }}</el-descriptions-item>
          <!--          <el-descriptions-item label="车间负责人 ">admin</el-descriptions-item>-->
          <el-descriptions-item label="班组">{{ planInfo.team }}</el-descriptions-item>
          <el-descriptions-item label="班组长">{{ planInfo.teamLade }}</el-descriptions-item>
          <!--          <el-descriptions-item label="产品类型">{{ planInfo.productType }}</el-descriptions-item>-->
          <!--          <el-descriptions-item label="产品编号">{{ planInfo.productNo }}</el-descriptions-item>-->
          <!--          <el-descriptions-item label="产品名称">{{ planInfo.productName }}</el-descriptions-item>-->
          <el-descriptions-item label="开始时间">{{ planInfo.workTime }}</el-descriptions-item>
          <el-descriptions-item label="生产时长(天)">{{ planInfo.duration }}</el-descriptions-item>
          <el-descriptions-item label="生产状态">{{ planInfo.status }}</el-descriptions-item>
          <el-descriptions-item label="加急">{{ planInfo.speedUp }}</el-descriptions-item>
          <!--          <el-descriptions-item label="销售企业">{{ planInfo.salesEnterprise }}</el-descriptions-item>-->
          <!--          <el-descriptions-item label="订货期">{{ planInfo.orderTime }}</el-descriptions-item>-->
          <!--          <el-descriptions-item label="制定人">100</el-descriptions-item>-->
          <!--          <el-descriptions-item label="制定时间">100</el-descriptions-item>-->
          <el-descriptions-item label="审核人">{{ planInfo.auditBy }}</el-descriptions-item>
          <el-descriptions-item label="审核时间">{{ planInfo.auditTimr }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </template>

    <!-- 查询区域-END -->
    <div class="table-operator">
            <a-button type="primary" icon="download" @click="handleExportXls('计划面料')">导出</a-button>
      <a-button type="primary" @click="fanHui()">返回</a-button>
    </div>
    <!-- table区域-begin -->
    <div>

      <a-spin :spinning="confirmLoading">
        <h3 style="width: 98%;;margin:20px auto 0">计划面料清单</h3>
        <a-table style="width: 98%;font-size:14px;margin:10px auto" :columns="columns1" :data-source="data1" bordered
                 rowKey="nums" :pagination="false">
        </a-table>

        <h3 style="width: 98%;;margin:20px auto 0">计划辅料清单</h3>
        <a-table style="width: 98%;font-size:14px;margin:10px auto 0" :columns="columns2" :data-source="data2"
                 rowKey="id"
                 bordered :pagination="false">
        </a-table>

        <h3 style="width: 98%;;margin:20px auto 0">工序面料清单</h3>
        <a-table style="width: 98%;font-size:14px;margin:10px auto 0" :columns="columns3" :data-source="data3"
                 rowKey="id" bordered :pagination="false">

        </a-table>

        <h3 style="width: 98%;;margin:20px auto 0">工序辅料清单</h3>
        <a-table style="width: 98%;font-size:14px;margin:10px auto 0" :columns="columns4" :data-source="data4"
                 rowKey="id" bordered :pagination="false">
        </a-table>
      </a-spin>
      <!--      </a-modal>-->

    </div>
  </a-card>
</template>

<script>
import {getAction} from "@api/manage";
import {mixinDevice} from '@/utils/mixin'
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import {filterObj} from "@/utils/util";
const columns1 = [
  {
    title: '计划ID',
    align: "center",
    dataIndex: 'planId'
  },
  {
    title: '面料',
    align: "center",
    dataIndex: 'fabricName'
  },
  {
    title: '用量（合计）',
    align: "center",
    dataIndex: 'amount'
  },
];

const columns2 = [
  {
    title: '计划ID',
    align: "center",
    dataIndex: 'planId'
  },
  {
    title: '辅料',
    align: "center",
    dataIndex: 'accessoriesName'
  },
  {
    title: '用量（合计）',
    align: "center",
    dataIndex: 'amount'
  },
];

const columns3 = [
  // {
  //   title:'计划ID',
  //   align:"center",
  //   dataIndex: 'planId'
  // },
  {
    title: '计划工序ID',
    align: "center",
    dataIndex: 'planProcessId'
  },
  {
    title: '面料',
    align: "center",
    dataIndex: 'fabricName'
  },
  {
    title: '用量',
    align: "center",
    dataIndex: 'amount'
  },
];

const columns4 = [
  // {
  //   title: '计划ID',
  //   align: "center",
  //   dataIndex: 'planId'
  // },
  {
    title: '计划工序ID',
    align: "center",
    dataIndex: 'planProcessId'
  },
  {
    title: '辅料',
    align: "center",
    dataIndex: 'accessoriesName'
  },
  {
    title: '用量',
    align: "center",
    dataIndex: 'amount'
  },
];

export default {
  name: "ZyStyleModelListDetails",
  mixins: [JeecgListMixin, mixinDevice],
  data() {
    return {
      data: [],
      visible: false,
      model: {},
      confirmLoading: true,
      // 计划面料清单
      data1: [],
      columns1,
      // 计划辅料清单
      data2: [],
      columns2,
      // 工序面料清单
      data3: [],
      columns3,
      // 工序辅料清单
      columns4,
      data4: [],
      planInfo: {},
      wuLiaoInfo: {},
      id: '',
      planId: '',
      loadRouteType: false,
      url: {
        list: "/org.jeecg.modules.productplan/zyPlanProcess/list",
        getPlanInfo: "/org.jeecg.modules.productplan/zyPlanProcess/getPlanInfo",
        getWuLiaoDetail: "/org.jeecg.modules.productplan/zyPlanProcess/getWuLiaoDetail",
        exportXlsUrl: "/org.jeecg.modules.productplan/zyPlanProcess/exportXls",
      },
    }
  },
  created() {
    this.confirmLoading = false;
    this.visible = true;
    this.loadParameter();
    this.getPlanInfo(this.planId);
    this.getWuLiaoDetail(this.planId);
  },
  methods: {
    fanHui(record) {
      this.$router.push({
        path: '/productplan/ProductplanManage',
        query: {  // 路由携带参数
          'planId': this.planId,
        },
      });
    },
    getQueryParams(){
      var param = Object.assign({}, this.queryParam);
      // delete param.createTimeRange; // 时间参数不传递后台
      return filterObj(param);
    },
    getWuLiaoDetail(planId) {
      getAction(this.url.getWuLiaoDetail, {"planId": planId}).then((res) => {
        if (res.success) {
          this.wuLiaoInfo = res.result.records || res.result;
          // console.log("wuLiaoInfo------------:" + JSON.stringify(this.wuLiaoInfo));
          this.data1 = this.wuLiaoInfo.fabricList
          this.data2 = this.wuLiaoInfo.accessoriesList
          this.data3 = this.wuLiaoInfo.processFabricList
          this.data4 = this.wuLiaoInfo.processAccessoriesList
          // console.log("data1------------:" + JSON.stringify(this.data1));
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => {
        this.loading = false
      })
    },

    getPlanInfo(planId) {
      getAction(this.url.getPlanInfo, {"planId": planId}).then((res) => {
        if (res.success) {
          this.planInfo = res.result.records || res.result;
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => {
        this.loading = false
      })
    },
    //加载传递参数
    loadParameter() {
      if (this.loadRouteType === false) {
        this.planId = this.$route.query.planId;
        console.log("*******传递的planId:" + this.planId)
        this.loadRouteType = true;
      }
    },
    // showModal(id) {
    //   this.visible = true;
    //   this.id = id
    //   this.getDetailData()
    // },
    // getDetailData() {
    //   getAction(this.url.detail, {id: this.id}).then((res) => {
    //     if (res.success) {
    //       this.data = res.result.records || res.result.records;
    //       console.log("data------------:" + JSON.stringify(this.data));
    //     } else {
    //       this.$message.warning(res.message)
    //     }
    //   }).finally(() => {
    //     this.confirmLoading = false
    //   })
    // },
    handleOk(e) {
      this.confirmLoading = true;
      setTimeout(() => {
        this.visible = false;
        this.confirmLoading = false;
      }, 1);
    },
    handleCancel(e) {
      this.visible = false;
    },
  },
}
</script>
<style scoped>
.table {
  border-color: #d9d9d9;
  border-radius: 3px
}

.table td {
  padding: 10px 20px;
  max-width: 380px;
}

.table td span {
  color: #333
}
</style>