byte-sailing-vue/src/views/purchase-management/deliver-goods/index.vue

<script>
import test from "@/components/form-test/index.vue";
import query from "@/components/query/index.vue";
import sendGoods from "./sendGoods.vue";
import * as API from "@/api/purchase-management/deliver-goods/index.js";

export default {
  components: {
    query,
    sendGoods,
    test,
  },
  data() {
    return {
      purchaseStatusList: [],
      productTypeList: [],
      supplySelectList: [],
      supplyTypeList: [],

      queryParams: {
        pageNum: 1,
        pageSize: 10,
        status: "",
        code: "",
      },
      selectConfig: [
        {
          label: "发货状态",
          prop: "status",
          data: [],
        },
        // {
        //   label: "付款状态",
        //   prop: "type",
        //   data: [],
        // },
      ],
      tableList: [],
      total: 0,
      loading: false,
      titleText: "",
      open: false,
      form: {
        businessId: "",
        businessType: "1",
        logisticsCompanyCode: "",
        code: "",
        details: [],
        fileInfos: [],
      },
      openArrive: false,
      arriveForm: {
        name: "",
        id: "",
        code: "",
      },
      arriveFormRules: {
        id: [
          {
            required: true,
            message: "请选择物流/快递单号",
            trigger: "change",
          },
        ],
      },

      selectData: [],
      logisticsData: [],
    };
  },
  created() {
    const businessDictData = JSON.parse(
      window.localStorage.getItem("businessDict")
    );
    this.purchaseStatusList = businessDictData.find(
      (item) => item.code === "sendGoodsStatus"
    ).children;
    this.selectConfig[0].data = this.purchaseStatusList
      .filter((x) => Number(x.dictKey) > 20)
      .map((item) => ({
        label: item.dictValue,
        value: item.dictKey,
      }));

    this.getList();
  },
  methods: {
    deliverGoods() {
      this.$router.push({
        path: "/purchase-management/deliver-goods/index",
      });
    },
    getList() {
      this.loading = true;
      API.deliveryList(this.queryParams).then(
        (res) => {
          this.tableList = res.data.data.records;
          this.total = res.data.data.total;
          this.loading = false;
        },
        (err) => {
          console.log("deliveryList: " + err);
          this.loading = false;
        }
      );
    },
    handleQuery() {
      this.getList();
    },
    handleSelectionChange(arr) {
      this.selectData = arr;
    },
    handleSend(row) {
      this.form = {
        businessId: row.id,
        businessType: "1",
        logisticsCompanyCode: "",
        code: "",
        puCode: row.code,
        supplierName: row.supplierName,
        details: [],
        fileInfos: [],
      };
      this.titleText = "发货通知";
      this.open = true;
      this.$nextTick(() => {
        this.$refs.sendGoods.loading = true;
        API.purchaseDetails({ id: row.id }).then(
          (res) => {
            this.form.details = res.data.data.goodsList.map((x) => ({
              goodsCode: x.goodsCode,
              goodsName: x.goodsName,
              quantity: x.quantity,
              purchaseId: row.id,
              applyPurchaseId: x.id,
              shipmentQuantity: "",
            }));
            this.$refs.sendGoods.loading = false;
          },
          (err) => {
            this.$refs.sendGoods.loading = false;
          }
        );
      });
      // this.$nextTick(() => {
      //   this.$refs.sendGoods.loading = true;
      //      API.logisticsSelectData({ id: row.id }).then(
      //     (res) => {
      //       console.log(res, "aa");
      //       this.$refs.sendGoods.loading = false;
      //     },
      //     (err) => {
      //       this.$refs.sendGoods.loading = false;
      //     }
      //   );
      // });
    },

    handleCancel() {
      this.form = {
        businessId: "",
        businessType: "1",
        logisticsCompanyCode: "",
        code: "",
        details: [],
        fileInfos: [],
      };
      this.open = false;
    },
    handleSubmit() {
      API.deliveryNotice(this.form).then(
        () => {
          this.msgSuccess("添加成功");
          this.$refs.sendGoods.loading = false;
          this.open = false;
          this.getList();
          this.handleCancel();
        },
        (err) => {
          console.log("sendPurchase: " + err);
          this.$refs.sendGoods.loading = false;
        }
      );
    },
    handleArrive(row) {
      this.openArrive = true;
      this.titleText = "到货通知";
      API.logisticsSelectData({ businessId: row.id }).then(
        (res) => {
          this.logisticsData = res.data.data;
          this.arriveForm = {
            code: row.code,
            supplierName: row.supplierName,
            id: "",
          };
        },
        (err) => {
          console.log("logisticsSelectData: " + err);
        }
      );
    },
    handlePurchaseEnd(row) {
      this.$confirm("是否确定此操作 ？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        API.purchaseEnd({ id: row.id }).then(() => {
          this.msgSuccess("操作成功");
          this.getList();
        });
      });
    },
    handlePurchaseCancel(row) {
      this.$confirm("是否确定此操作 ？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        API.purchaseCancel({ id: row.id }).then(() => {
          this.msgSuccess("操作成功");
          this.getList();
        });
      });
    },
    handleSubmit1() {
      this.$refs.arriveForm.validate((valid) => {
        if (valid) {
          API.arrivalNotice({ id: this.arriveForm.id }).then(() => {
            this.msgSuccess("操作成功");
            this.getList();
            this.handleCancel1();
          });
        }
      });
    },
    handleCancel1() {
      this.openArrive = false;
    },
    isSelectable(row) {
      if (row.status != 30) {
        return false;
      } else {
        return true;
      }
    },
    showAddress(row) {
      return (
        <div>
          {row.countryName} , {row.provinceName} , {row.cityName}
        </div>
      );
    },
  },
};
</script>


<template>
  <div>
    <el-card class="box-card">
      <query
        :selectConfig="selectConfig"
        :req="queryParams"
        :isShowMore="false"
        @handleQuery="handleQuery"
        @handleMore="
          () => {
            queryDialog = true;
          }
        "
      ></query>
      <el-table :data="tableList" v-loading="loading">
        <el-table-column label="采购单号" align="left" prop="code" width="150">
          <template slot-scope="scope">
            <div
              style="
                color: #0084ff;
                cursor: pointer;
                text-decoration: underline;
              "
            >
              {{ scope.row.code }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="供应商" align="left" prop="supplierName" />
        <el-table-column
          label="采购总金额"
          align="left"
          prop="price"
          width="140"
        />
        <el-table-column
          label="采购员"
          align="left"
          prop="createName"
          width="120"
        />
        <el-table-column
          label="采购时间"
          align="left"
          prop="createTime"
          width="160"
        />
        <el-table-column
          label="状态"
          align="left"
          width="120"
          :formatter="(row) => dictDataEcho(row.status, purchaseStatusList)"
        />
        <!-- <el-table-column
          label="付款状态"
          align="left"
          prop="createName"
          width="120"
        /> -->
        <el-table-column label="操作" align="center" width="240">
          <template slot-scope="scope">
            <div v-if="scope.row.status !== 99 && scope.row.status !== 50">
              <el-button type="text" @click="handleSend(scope.row)">
                发货通知
              </el-button>
              <el-button type="text" @click="handleArrive(scope.row)"
                >到货通知
              </el-button>
              <el-button type="text" @click="handlePurchaseEnd(scope.row)"
                >结束
              </el-button>
              <el-button type="text" @click="handlePurchaseCancel(scope.row)"
                >取消
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>

    <el-dialog
      :title="titleText"
      :visible.sync="open"
      v-if="open"
      width="80%"
      top="60px"
    >
      <send-goods
        :form="form"
        @submit="handleSubmit"
        @cancel="handleCancel"
        ref="sendGoods"
      ></send-goods>
    </el-dialog>

    <el-dialog
      title="到货通知"
      :visible.sync="openArrive"
      v-if="openArrive"
      width="30%"
      top="60px"
    >
      <el-form
        label-position="top"
        :model="arriveForm"
        ref="arriveForm"
        :rules="arriveFormRules"
        label-width="100px"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="采购单号" prop="code">
              <el-input
                v-model="arriveForm.code"
                placeholder="请输入"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="供应商" prop="supplierName">
          <el-input
            v-model="arriveForm.supplierName"
            placeholder="请输入"
            disabled
          ></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="8">
            <el-form-item label="物流/快递单号" prop="id">
              <el-select
                v-model="arriveForm.id"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in logisticsData"
                  :key="item.id"
                  :label="item.code"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div style="text-align: center; margin-top: 15px">
        <el-button size="small" @click="handleCancel1">取消 </el-button>
        <el-button type="primary" size="small" @click="handleSubmit1">
          确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>


<style lang="scss" scoped>
.box-card {
  height: calc(100vh - 110px);
  overflow-y: auto;
}
</style>