drp-ui/src/views/purchase/task/xie-yi-zhi-cai/index.vue

<script>
import { TableColumns } from "./column";
import { initDicts } from "@/utils/init.js";
import { FIRSTDIRECT, ADD } from "@/api/business/purchase/task";
export default {
  name: "FirstDirectPurchaseDrawer",
  dicts: [...initDicts(TableColumns)],
  props: {
    selectData: {
      type: [Array],
      require: true,
    },
  },
  components: {
    ElSuperTable: () => import("@/components/super-table/index.vue"),
    ElDictTag: () => import("@/components/DictTag/index.vue"),
    ElComputedInputV2: () => import("@/components/computed-input-v2/index.vue"),
  },
  data() {
    return {
      title: "订单生成",
      width: "100%",
      column: 1,
      visible: false,
      loading: false,
      tableColumns: TableColumns,
      data: [],
    };
  },
  computed: {
    disabled: {
      get() {
        return !this.selectData.length;
      },
      set() {},
    },
  },
  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,
            })),
          }));
          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-button
    v-bind="$attrs"
    v-on="$listeners"
    :disabled="disabled"
    @click="open(selectData)"
  >
    {{ title }}
    <el-drawer
      :show-close="false"
      :size="width"
      :title="title"
      :visible.sync="visible"
      append-to-body
    >
      <template slot="title">
        <span>{{ title }}</span>
        <el-button
          :size="$attrs.size"
          :loading="loading"
          @click="visible = false"
          >取 消</el-button
        >
        <el-button
          type="primary"
          :size="$attrs.size"
          :loading="loading"
          @click="submit(data)"
          >确 认</el-button
        >
      </template>
      <div v-for="(item, index) in data" :key="index" class="m-4">
        <h3 class="mb-4">
          <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>
        </h3>
        <el-super-table
          v-model="item.orderPriceVos"
          :columns="tableColumns"
          :size="$attrs.size"
          :dict="dict"
        >
          <template slot="purchaseQuantity" slot-scope="scope">
            <component
              v-bind="scope.attr"
              v-model="scope.row[scope.item.key]"
              :size="$attrs.size"
              :max="scope.attr.max(scope.row)"
            >
            </component>
          </template>
        </el-super-table>
      </div>
    </el-drawer>
  </el-button>
</template>

<style scoped></style>