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

<script>
import { TableColumns } from "./column";
import { initColumns } from "@/utils/init";
import { FIRSTDIRECT, ADD } from "@/api/business/purchase/task";
export default {
  name: "FirstDirectPurchaseDialog",
  components: {},
  data() {
    return {
      size: "mini",
      visible: false,
      loading: false,
      tableColumns: initColumns(TableColumns),
      data: [],
    };
  },
  computed: {},
  watch: {},
  methods: {
    //
    open(prop) {
      this.visible = true;
      this.fetchItem(prop);
    },
    //
    hide() {
      this.visible = false;
    },
    //
    async fetchItem(prop) {
      try {
        this.loading = true;
        const { code, msg, data } = await FIRSTDIRECT(prop);
        if (code === 200) {
          this.data = data;
          this.$notify.success({ title: msg });
        } else {
          this.hide();
          this.$notify.warning({ title: msg });
        }
      } catch (err) {
        this.hide();
      } finally {
        this.loading = false;
      }
    },
    //
    async submit() {
      const params = this.data
        .map((item) => ({
          ...item,
          orderPriceVos: item.orderPriceVos.filter(
            (citem) => citem.purchaseQuantity
          ),
        }))
        .filter((item) => item.orderPriceVos.length);
      try {
        const { code, msg } = await ADD(params);
        if (code === 200) {
          this.hide();
          this.$emit("success");
          this.$notify.success({ title: msg });
        } else {
          this.$notify.warning({ title: msg });
        }
      } catch (err) {
        //
      } finally {
        //
      }
    },
  },
  created() {},
  mounted() {},
  destroyed() {},
};
</script>

<template>
  <el-dialog :visible.sync="visible" title="首次协议直采">
    <div
      v-for="(item, index) in data"
      :key="index"
      style="width: 100%; margin: 0 0 20px 0"
    >
      <el-descriptions border size="mini" :column="4">
        <template #title>
          <span style="margin-right: 10px">{{ item.materialName }}</span>
          <span style="color: tomato">{{ item.puQty }}</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"
        :data="item.orderPriceVos"
        style="width: 100%"
      >
        <el-table-column
          v-for="(cItem, cIndex) in tableColumns"
          :key="cIndex"
          :prop="cItem.key"
          :label="cItem.title"
          :fixed="cItem.fixed"
          :width="cItem.width || 180"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-input-number
              v-if="cItem.inputType === 'InputNumber'"
              v-model="scope.row[cItem.key]"
              :size="size"
              :min="cItem.min(item)"
              :max="cItem.max(item)"
              :controls-position="cItem.controlsPosition"
              :placeholder="cItem.placeholder"
              style="width: 90%"
            ></el-input-number>
            <el-date-picker
              v-else-if="cItem.inputType === 'DatePicker'"
              v-model="scope.row[cItem.key]"
              :size="size"
              :type="cItem.type"
              :placeholder="cItem.placeholder"
              :picker-options="cItem.pickerOptions"
              :value-format="cItem.valueFormat"
              style="width: 90%"
            ></el-date-picker>
            <el-input
              v-else-if="cItem.inputType === 'Textarea'"
              v-model="scope.row[cItem.key]"
              :size="size"
              autosize
              type="textarea"
              style="width: 90%"
            ></el-input>
            <span v-else>{{ scope.row[cItem.key] }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" style="text-align: right; margin-top: 10px">
        <el-button :size="size" @click="hide">取 消</el-button>
        <el-button :size="size" @click="submit">提 交</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<style scoped></style>