drp-ui/src/views/purchase/PurchaseDemandList/reserved/index.vue

<template>
  <div class="reserved">
    <el-dialog :visible.sync="visible" :before-close="handleClose" width="70%">
      <el-descriptions
        class="margin-top"
        title="货权预留单"
        :column="3"
        size="small"
        border
      >
        <el-descriptions-item v-for="({ item }, index) in desColumns">
          <template slot="label"> {{ item.title }} </template>
          {{ resData[item.key] }}
        </el-descriptions-item>
      </el-descriptions>

      <el-super-ux-table
        v-model="items"
        :size="size"
        :columns="itemsColumns"
        @row-click="rowClick"
        height="300px"
        style="margin-top: 20px"
      ></el-super-ux-table>
      <el-super-ux-table
        v-model="showHistoryItems"
        :size="size"
        :dict="dict"
        :columns="historyColumns"
        height="300px"
        style="margin-top: 20px"
      >
        <template slot="allotQty" slot-scope="scope">
          {{
            scope.row.allotQty > 0
              ? "+" + scope.row.allotQty
              : scope.row.allotQty
          }}
        </template>
      </el-super-ux-table>
    </el-dialog>
  </div>
</template>

<script>
import { getDetailBySource } from "@/api/purchase/ownership.js";
import useColumns from "./columns";
import { dicts } from "../dicts";
export default {
  dicts: [...dicts],
  components: {
    ElSuperUxTable: () => import("@/components/super-ux-table/index.vue"),
  },
  props: {
    isVisible: {
      type: Boolean,
      default: false,
    },
    info: {
      type: Object,
      default: null,
    },
  },
  mounted() {
    this.getDetails(this.info);
  },
  data() {
    const { desColumns, itemsColumns, historyColumns } = useColumns();
    return {
      size: "mini",
      desColumns: desColumns,
      itemsColumns: itemsColumns,
      historyColumns: historyColumns,
      visible: this.isVisible,
      resData: {},
      items: [],
      historyItems: [],
      showHistoryItems: [],
    };
  },
  methods: {
    getDetails(row) {
      getDetailBySource(row.code).then((res) => {
        if (res.code === 200) {
          this.resData = res.data || [];
          this.items = res.data ? res.data.stMaterialOwnershipItemList : [];
          this.historyItems = res.data
            ? res.data.stMaterialOwnershipHistoryList
            : [];
          this.showHistoryItems = this.historyItems.filter(
            (ele) => ele.ownerId == this.items[0].id
          );
        }
      });
    },
    handleClose() {
      this.$emit("updateReserved", false);
    },
    rowClick(row) {
      this.showHistoryItems = this.historyItems.filter(
        (ele) => ele.ownerId == row.id
      );
    },
  },
};
</script>

<style scoped>
>>> .el-dialog__body {
  padding: 5px 15px;
}
</style>