byte-sailing-vue/src/views/purchase-management/subscribe/index.vue

<script>
import test from "@/components/form-test/index.vue";
import query from "@/components/query/index.vue";

import byTable from "@/components/by-table/index.js";
import sendSubscribe from "./sendSubscribe.vue";
import subscribeDetails from "@/components/purchase/subscribeDetails.vue";

import * as API from "@/api/purchase-management/subscribe/index.js";
import { warehouseSelectList } from "@/api/product-material/warehouse/index.js";

export default {
  components: {
    test,
    byTable,
    query,
    sendSubscribe,
    subscribeDetails,
  },
  data() {
    return {
      subscribeStatusList: [],
      productTypeList: [],
      materialTypeList: [],
      warehouseSelectList: [],
      warehouseTypeList: [],
      btnForm: {
        otherButton: {
          list: [
            {
              name: "发起申购",
              methodsText: "add",
              type: "primary",
              add: () => {
                this.handleAdd();
              },
            },
          ],
        },
      },
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        keyword: "",
        warehouseId: "",
        status: null,
        code: "",
        goodsCode: "",
        goodsName: "",
        applyUserId: "",
        startTime: "",
        endTime: "",
      },
      selectConfig: [
        {
          label: "申购状态",
          prop: "status",
          data: [],
        },
      ],
      tableList: [],
      total: 0,
      loading: false,
      titleText: "",
      open: false,
      form: {
        id: "",
        receiptWarehouseId: "",
        planArrivalTime: "",
        cause: "",
        goodsId: [],
      },
      detailsDialog: false,
      rowData: {},
    };
  },
  created() {
    const businessDictData = JSON.parse(
      window.localStorage.getItem("businessDict")
    );
    this.productTypeList = businessDictData.find(
      (item) => item.code === "productType"
    ).children;
    this.subscribeStatusList = businessDictData.find(
      (item) => item.code === "purchaseStatus"
    ).children;
    this.warehouseTypeList = businessDictData.find(
      (item) => item.code === "warehouseType"
    ).children;
    this.materialTypeList = businessDictData.find(
      (item) => item.code === "materialType"
    ).children;

    this.selectConfig[0].data = this.subscribeStatusList.map((item) => ({
      label: item.dictValue,
      value: item.dictKey,
    }));
    warehouseSelectList().then((res) => {
      this.warehouseSelectList = res.data.data;
    });
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      API.subscribeList(this.queryParams).then(
        (res) => {
          this.tableList = res.data.data.records;
          this.total = res.data.data.total;
          this.loading = false;
        },
        (err) => {
          console.log("subscribeList: " + err);
          this.loading = false;
        }
      );
    },
    handleQuery() {
      this.getList();
    },
    handleAdd() {
      this.form = {
        id: "",
        receiptWarehouseId: "",
        planArrivalTime: "",
        cause: "",
        goodsId: [],
      };
      this.titleText = "add";
      this.open = true;
    },
    handleCancel() {
      this.open = false;
    },
    handleEdit(row) {
      this.titleText = "edit";
      this.open = true;
      this.$nextTick(() => {
        this.$refs.sendSubscribe.loading = true;
        API.subscribeDetails({ id: row.id }).then(
          (res) => {
            const data = res.data.data;
            const goodsItem = {
              goodsId: data.goodsId,
              quantity: data.quantity,
              code: data.goodsCode,
              name: data.goodsName,
              type: data.goodsType,
              unit: data.goodsUnit,
              stock: data.stockQuantity,
            };
            this.form = {
              id: data.id,
              receiptWarehouseId: data.receiptWarehouseId,
              planArrivalTime: data.planArrivalTime,
              cause: data.cause,
              goodsId: [goodsItem],
            };
            this.$refs.sendSubscribe.loading = false;
          },
          (err) => {
            console.log("subscribeDetails: ", err);
            this.$refs.sendSubscribe.loading = false;
          }
        );
      });
    },
    handleSubmit() {
      if (!this.form.id) {
        const productList = this.form.goodsId.map((x) => {
          return {
            ...x,
            planArrivalTime: this.form.planArrivalTime,
            receiptWarehouseId: this.form.receiptWarehouseId,
            cause: this.form.cause,
          };
        });
        API.subscribeAdd(productList).then(
          () => {
            this.msgSuccess("添加成功");
            this.$refs.sendSubscribe.loading = false;
            this.open = false;
            this.getList();
          },
          (err) => {
            console.log("subscribeAdd: " + err);
            this.$refs.sendSubscribe.loading = false;
          }
        );
      } else {
        this.form.quantity = this.form.goodsId[0].quantity;
        this.form.goodsId = this.form.goodsId[0].goodsId;
        API.subscribeEdit(this.form).then(
          () => {
            this.msgSuccess("编辑成功");
            this.open = false;
            this.$refs.sendSubscribe.loading = false;
            this.getList();
          },
          (err) => {
            console.log("subscribeEdit: " + err);
            this.$refs.sendSubscribe.loading = false;
          }
        );
      }
    },

    handleDelete(row) {
      this.$confirm("是否确认此操作 ?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        API.subscribeDel({ id: row.id }).then(() => {
          this.msgSuccess("删除成功");
          this.getList();
        });
      });
    },
    showAddress(row) {
      return (
        <div>
          {row.countryName} , {row.provinceName} , {row.cityName}
        </div>
      );
    },

    handleLookDetails(row) {
      this.rowData = { ...row };
      this.detailsDialog = true;
    },
  },
};
</script>


<template>
  <div class="box-card">
    <el-card class="header">
      <test :form-config="btnForm"></test>
    </el-card>
    <el-card class="body-main">
      <query
        :selectConfig="selectConfig"
        :req="queryParams"
        :isShowMore="true"
        @handleQuery="handleQuery"
        @handleMore="
          () => {
            queryDialog = true;
          }
        "
      ></query>
      <el-table :data="tableList" v-loading="loading">
        <el-table-column label="申购单号" align="left" prop="code" width="140">
          <template slot-scope="scope">
            <div class="show_underline" @click="handleLookDetails(scope.row)">
              {{ scope.row.code }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="物品编码"
          align="left"
          prop="goodsCode"
          width="120"
        />
        <el-table-column label="物品名称" align="left" prop="goodsName" />
        <el-table-column
          label="物品类型"
          align="left"
          width="100"
          :formatter="(row) => dictDataEcho(row.goodsType, productTypeList)"
        />
        <el-table-column
          label="单位"
          align="left"
          prop="goodsUnit"
          width="100"
        />
        <el-table-column
          label="申购数量"
          align="left"
          prop="quantity"
          width="120"
        />
        <el-table-column
          label="申购人"
          align="left"
          prop="createName"
          width="120"
        />
        <el-table-column
          label="申购时间"
          align="left"
          prop="createTime"
          width="160"
          :formatter="
            (row) => {
              return row.createTime.slice(0, 10);
            }
          "
        />
        <el-table-column
          label="要求到货时间"
          align="left"
          prop="planArrivalTime"
          width="160"
          :formatter="
            (row) => {
              return row.planArrivalTime.slice(0, 10);
            }
          "
        />

        <!-- <el-table-column
          :label="$t('purchase_management.subscribe.harvestWarehouse')"
          align="left"
          prop="warehouseName"
        /> -->

        <!--        
        <el-table-column
          :label="$t('purchase_management.subscribe.subscribeReason')"
          align="left"
          prop="cause"
        /> -->
        <el-table-column
          label="采购状态"
          align="left"
          width="120"
          :formatter="(row) => dictDataEcho(row.status, subscribeStatusList)"
        />

        <!-- <el-table-column label="操作" align="center" width="120">
          <template slot-scope="scope">
            <el-button
              type="text"
              v-if="scope.row.status === 10"
              @click="handleEdit(scope.row)"
              >编辑
            </el-button>
            <el-button
              type="text"
              v-if="scope.row.status === 10"
              @click="handleDelete(scope.row)"
              >删除
            </el-button>
          </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 === 'add'
          ? $t('purchase_management.subscribe.sendSubscribe')
          : $t('purchase_management.subscribe.subscribeEdit')
      "
      :visible.sync="open"
      v-if="open"
      width="80%"
      top="60px"
    >
      <send-subscribe
        :form="form"
        :productTypeList="productTypeList"
        :materialTypeList="materialTypeList"
        :warehouseSelectList="warehouseSelectList"
        :warehouseTypeList="warehouseTypeList"
        @submit="handleSubmit"
        @cancel="handleCancel"
        ref="sendSubscribe"
      ></send-subscribe>
    </el-dialog>

    <el-dialog
      title="申购详情"
      v-if="detailsDialog"
      :visible.sync="detailsDialog"
      width="50%"
      top="60px"
    >
      <subscribeDetails :rowData="rowData"></subscribeDetails>
    </el-dialog>
  </div>
</template>


<style lang="scss" scoped>
.box-card {
  height: calc(100vh - 110px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  .header {
    // height: 100px;
    margin-bottom: 10px;
    box-sizing: border-box;
  }
  .body-main {
    flex: 1;
    overflow-y: auto;
  }
}
</style>