byte-sailing-vue/src/components/purchase/details.vue

<template>
  <div>
    <el-form :model="form" label-position="left" v-loading="loading">
      <div style="margin-bottom: 20px">
        <labelTitle content="基本信息"></labelTitle>
      </div>
      <div style="padding: 0px 20px">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="供应商：" prop="supplierName">
              <span>{{ form.supplierName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="采购单号：" prop="code">
              <span>
                {{ form.code }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <div style="margin-bottom: 20px">
        <labelTitle content="采购明细"></labelTitle>
      </div>
      <div style="padding: 0px 20px">
        <el-table :data="form.goodsList">
          <el-table-column label="申购单号" prop="code" />
          <el-table-column
            label="要求到货时间"
            prop="planArrivalTime"
            width="150"
          />
          <el-table-column label="物品类型" prop="goodsType" :formatter="(row)
          => dictDataEcho(row.goodsType, productTypeList)" / >
          <el-table-column label="物品编码" prop="goodsCode" />
          <el-table-column label="物品名称" prop="goodsName" />
          <el-table-column label="物品单位" prop="goodsUnit" width="80" />
          <el-table-column label="单价" prop="unitPrice" width="100" />
          <el-table-column
            label="采购数量"
            prop="purchaseQuantity"
            width="120"
          />
        </el-table>
      </div>
      <div style="margin: 20px 0">
        <labelTitle content="审批记录"></labelTitle>
      </div>
      <div style="padding: 0px 20px">
        <el-table :data="recordsList">
          <el-table-column label="节点名称" prop="nodeName" />
          <el-table-column label="节点状态" prop="typeName" />
          <el-table-column label="发起/审批人" prop="userName" />
          <el-table-column label="审批说明" prop="remarks" />
        </el-table>
      </div>
    </el-form>
  </div>
</template>

<script>
import labelTitle from "@/components/label-title/index.vue";
import { purchaseDetails } from "@/api/purchase-management/purchase/index.js";
import { supplySelect } from "@/api/product-material/supply/index.js";

import { exampleInfo, exampleInfoShowFlow } from "@/api/process";

export default {
  props: {
    rowData: {
      type: Object,
    },
  },
  components: {
    labelTitle,
  },
  data() {
    return {
      loading: true,
      form: {},
      supplySelectList: [],
      productTypeList: [],
      recordsList: [],
    };
  },
  created() {
    const businessDictData = JSON.parse(
      window.localStorage.getItem("businessDict")
    );
    this.productTypeList = businessDictData.find(
      (item) => item.code === "productType"
    ).children;
  },
  mounted() {
    if (this.rowData.id) {
      this.getDetails();
      this.getRecordsList();
    }
  },
  methods: {
    getRecordsList() {
      if (this.rowData.flowId) {
        exampleInfo({ flowLinkNo: this.rowData.id }).then((res) => {
          this.recordsList = res.data.data;
        });
      } else {
        exampleInfoShowFlow({ code: "PURCHASE" }).then((res) => {
          this.recordsList = res.data.data;
        });
      }
    },
    async getDetails() {
      this.loading = true;
      const { data } = await supplySelect({ name: "", code: "", type: "" });
      this.supplySelectList = data.data;
      purchaseDetails({ id: this.rowData.id }).then((res) => {
        this.getSupplierName(res.data.data.supplierId, res.data.data);
      });
    },
    getSupplierName(id, data) {
      const current = this.supplySelectList.find((x) => x.id === id);
      if (current) {
        this.form = {
          ...data,
          supplierName: current.name,
        };
        this.loading = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .el-form-item {
    margin-bottom: 5px;
  }
}
</style>