drp-ui/src/views/purchase/task/first-direct/index.vue

<script>
import { TableColumns } from "./column";
import { FIRSTDIRECT, ADD } from "@/api/business/purchase/task";
export default {
  name: "FirstDirectPurchaseDrawer",
  components: {},
  data() {
    return {
      size: "mini",
      title: "协议直采",
      width: "100%",
      column: 3,
      visible: false,
      loading: false,
      tableColumns: TableColumns,
      data: [],
    };
  },
  computed: {
    $dicts: {
      get: function () {
        return this.$parent.$parent.$dicts;
      },
    },
  },
  watch: {},
  methods: {
    //
    async open(prop) {
      this.visible = await this.fetchItem(prop);
    },
    //
    hide() {
      this.visible = false;
    },
    //
    async fetchItem(prop) {
      try {
        // try
        this.loading = true;
        const { code, data } = await FIRSTDIRECT(prop);
        if (code === 200) {
          this.data = data.map((item) => ({
            ...item,
            orderPriceVos: item.orderPriceVos.map((cItem) => ({
              ...item,
              ...cItem,
            })),
          }));
          console.log("this.data", this.data);
          return true;
        } else {
          return false;
        }
      } catch (err) {
        // catch
        console.error(err);
      } finally {
        // finally
        this.loading = false;
      }
    },
    //
    async submit(prop) {
      const params = prop
        .map((item) => ({
          ...item,
          orderPriceVos: item.orderPriceVos.filter(
            (citem) => citem.purchaseQuantity
          ),
        }))
        .filter((item) => item.orderPriceVos.length);
      try {
        // try
        const { msg, code } = await ADD(params);
        if (code === 200) {
          this.hide();
          this.$emit("success");
          this.$notify.success({ title: msg, duration: 3000 });
        }
      } catch (err) {
        // catch
      } finally {
        // finally
      }
    },
  },
  created() {},
  mounted() {},
  destroyed() {},
};
</script>

<template>
  <el-drawer
    :size="width"
    :title="title"
    :show-close="false"
    :visible.sync="visible"
  >
    <template slot="title">
      <span>{{ title }}</span>
      <span>
        <el-button
          :size="size"
          circle
          icon="el-icon-check"
          @click="submit(data)"
        >
        </el-button>
        <el-button
          :size="size"
          circle
          type="danger"
          icon="el-icon-close"
          @click="visible = false"
        ></el-button>
      </span>
    </template>
    <div v-for="(item, index) in data" :key="index" style="margin: 10px">
      <el-descriptions :size="size" :column="column" border>
        <template #title>
          <span style="margin-right: 10px">{{ item.materialName }}</span>
          <span style="color: tomato">{{ item.puQty }}</span>
          (<span style="color: tomato">{{
            item.puQty - (item.executeQty || 0)
          }}</span
          >)
          <span> {{ item.puUnitName }}</span>
        </template>
        <el-descriptions-item label="需求组织">
          {{ item.demandOrgName }}
        </el-descriptions-item>
        <el-descriptions-item label="采购组织">
          {{ item.puOrgName }}
        </el-descriptions-item>
        <el-descriptions-item label="需求时间">
          {{ item.demandDate }}
        </el-descriptions-item>
      </el-descriptions>
      <el-table
        v-loading="loading"
        :size="size"
        :data="item.orderPriceVos"
        style="width: 100%"
      >
        <el-table-column
          v-for="(cItem, cIndex) in tableColumns"
          :key="cIndex"
          :prop="cItem.item.key"
          :label="cItem.item.title"
          :fixed="cItem.item.fixed"
          :width="cItem.item.width || 250"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-input-number
              v-if="cItem.attr.component === 'el-input-number'"
              v-model="scope.row[cItem.item.key]"
              :size="size"
              :min="cItem.attr.min(item)"
              :max="cItem.attr.max(item)"
              :controls-position="cItem.attr.controlsPosition"
              style="width: 90%"
            ></el-input-number>
            <el-date-picker
              v-else-if="cItem.attr.component === 'el-date-picker'"
              v-model="scope.row[cItem.item.key]"
              :size="size"
              :type="cItem.attr.type"
              :value-format="cItem.attr.valueFormat"
              :picker-options="cItem.attr.pickerOptions"
              style="width: 90%"
            ></el-date-picker>
            <el-input
              v-else-if="cItem.attr.component === 'el-input'"
              v-model="scope.row[cItem.item.key]"
              :size="size"
              autosize
              type="textarea"
              style="width: 90%"
            ></el-input>
            <dr-computed-input
              v-else-if="cItem.attr.component === 'dr-computed-input'"
              v-model="scope.row[cItem.item.key]"
              :source="scope.row"
              :formatter="cItem.attr.formatter"
              style="width: 100%"
            ></dr-computed-input>
            <dict-tag
              v-else-if="cItem.attr.component === 'dict-tag'"
              :size="size"
              :value="scope.row[cItem.item.key]"
              :options="$dicts[cItem.attr.dictName]"
            />
            <span v-else>{{ scope.row[cItem.item.key] }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-drawer>
</template>

<style scoped></style>