ERP-admin/src/views/translationOrder/component/goodsOffer.vue

<template>
  <div>
    <div>
      <el-radio-group
        v-model="queryParams.is_adopt"
        size="small"
        @change="changeType"
      >
        <el-radio-button label="全部" value="" />
        <el-radio-button label="未采纳" value="0" />
        <el-radio-button label="已采纳" value="1" />
      </el-radio-group>
    </div>
    <el-table :data="pager.lists" border style="width: 100%; margin-top: 10px">
      <el-table-column prop="id" label="ID" width="120" />
      <!-- <el-table-column prop="order_id" label="采购订单id" width="120" /> -->
      <el-table-column
        label="商品名称"
        prop="goods_name"
        show-overflow-tooltip
        width="220"
      />
      <el-table-column
        label="需求数量"
        prop="need_num"
        show-overflow-tooltip
        width="100"
      />
      <el-table-column
        label="单位"
        prop="unit_name"
        width="80"
        show-overflow-tooltip
      />
      <el-table-column
        label="供应商"
        prop="supplier_name"
        show-overflow-tooltip
        width="160"
      />
      <el-table-column
        label="提供数量"
        prop="nums"
        show-overflow-tooltip
        width="100"
      />
      <el-table-column label="报价" prop="price" show-overflow-tooltip />
      <el-table-column label="是否采纳报价" prop="is_adopt" width="120">
        <template #default="{ row }">
          <el-tag v-if="row.is_adopt === 1" type="success">已采纳</el-tag>
          <el-tag v-else type="info">未采纳</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="更新时间"
        prop="update_time"
        show-overflow-tooltip
        width="160"
      />
      <el-table-column label="操作" fixed="right">
        <template #default="{ row }">
          <el-button
            type="primary"
            v-if="row.is_adopt === 0 && row.price > 0"
            size="small"
            @click="offerGood(row, 0)"
            >采纳</el-button
          >
          <span v-if="row.is_storage">已入库</span>
          <el-button
            type="success"
            v-else-if="row.is_adopt === 1 && row.price > 0"
            size="small"
            @click="offerGood(row, 1)"
            >入库</el-button
          >
          <span
            v-if="row.is_adopt === 0 && row.price == 0"
            style="color: #e6a23c"
            >等待供应商报价</span
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="flex mt-4 justify-end">
      <pagination v-if="pager.lists" v-model="pager" @change="getLists" />
    </div>
    <el-dialog v-model="dialogVisible" title="入库" width="600">
      <el-descriptions class="margin-top" :column="1" border>
        <el-descriptions-item label="供应商名称">
          {{ updateInfo.supplier_name }}
        </el-descriptions-item>
        <el-descriptions-item label="商品名称">
          {{ updateInfo.goods_name }}
        </el-descriptions-item>
        <el-descriptions-item label="商品报价">
          ¥ {{ updateInfo.price }} / {{ updateInfo.unit_name }}
        </el-descriptions-item>
        <el-descriptions-item label="应入库数量">
          {{ updateInfo.q_nums }}
        </el-descriptions-item>
        <el-descriptions-item label="实际入库数量">
          <el-input-number v-model="updateInfo.nums" :step="1" :min="1" />
        </el-descriptions-item>
        <el-descriptions-item label="备注">
          <el-input v-model="updateInfo.notes" type="textarea" placeholder="请输入备注"></el-input>
        </el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="goodsOfferUpdate">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup name="subOrder">
import { usePaging } from "@/hooks/usePaging";
import {
  apiOpurchaseclassGoodsOfferList,
  apiOpurchaseclassGoodsOfferUpdate,
} from "@/api/opurchaseclass";
import { useRoute } from "vue-router";

const route = useRoute();

const queryParams = reactive({
  id: route.query.id,
  is_adopt: "",
  is_mer: 2
});
// 分页相关
const { pager, getLists, resetParams, resetPage } = usePaging({
  fetchFun: apiOpurchaseclassGoodsOfferList,
  params: queryParams,
});
defineExpose({
  getLists,
});

const changeType = (e: any) => {
  queryParams.is_adopt = e;
  getLists();
};

const dialogVisible = ref(false);
const updateInfo = ref({
  id: "",
  type: 0,
  notes: "", //备注
  nums: 0,//实际数量
  q_nums: 0, //应到数量
});
const offerGood = (row: any, type: number) => {
  //type:0 采纳，1 入库
  updateInfo.value = Object.assign(
    {
      id: "",
      type: type,
      notes: "", //备注
      nums: 0,
    },
    row
  );
  if(type==0) return goodsOfferUpdate(); // 采纳时直接成功, 入库弹窗显示数量
  updateInfo.value.q_nums = row.nums;
  dialogVisible.value = true;
};


const goodsOfferUpdate = () => {
  apiOpurchaseclassGoodsOfferUpdate({
    id: updateInfo.value.id,
    type: updateInfo.value.type,
    notes: updateInfo.value.notes, //备注
    nums: updateInfo.value.nums,
  }).then((res) => {
    getLists();
    dialogVisible.value = false;
  });
};



</script>