order-ui-pc/src/views/supplierPurchaseIn/supplierPurchaseOrder/components/order-out-table.vue

<template>
  <div class="outOrderTable">
    <el-table
      ref="addrForm"
      :data="tableData"
      border
      :size="'mini'"
      style="width: 100%"
      row-key="key"
    >
      <!-- <el-table-column
        show-overflow-tooltip
        prop="outCode"
        label="发货申请单号"
        width="160"
      />

      <el-table-column
        show-overflow-tooltip
        prop="send_status"
        label="状态"
        min-width="105"
      >
        <template slot-scope="scope">
          <el-tag
            :size="tablebtnSize"
            :type="scope.row.status == '0' ? 'warning' : ''"
            v-text="
              (statusOptions.find((item) => item.id == scope.row.status) || {}).label ||
              '--'
            "
          ></el-tag>
        </template>
      </el-table-column> -->
      <el-table-column
        show-overflow-tooltip
        prop="send_num"
        label="发货数量"
        min-width="80"
      />
      <el-table-column
        show-overflow-tooltip
        prop="contactor"
        label="联系人"
        min-width="80"
      />
      <el-table-column
        show-overflow-tooltip
        prop="mobile"
        label="联系电话"
        min-width="110"
      />
      <el-table-column show-overflow-tooltip prop="addr" label="收货地址" min-width="170">
        <template slot-scope="scope">
          {{ scope.row.addr_info }}{{ scope.row.addr }}
        </template>
      </el-table-column>
    </el-table>
    <div
      v-if="tableData && tableData.length > 0"
      class="Pagination"
      style="text-align: right; margin-top: 10px"
    >
      <el-pagination
        :current-page="parmValue.page"
        :page-size="parmValue.size"
        :size="'mini'"
        layout="total,  prev, pager, next, jumper"
        :total="pageInfo.total"
        @size-change="page_size_change"
        @current-change="page_curr_change"
      />
    </div>

    <!-- <add-edit
      :id="modelId"
      :sitem="s_sitem"
      :show-model="showModel"
      :is-detail="isDetail"
      @refresh="searchList"
      @cancel="showModel = false"
    /> -->
  </div>
</template>
<script>
import mixinPage from "@/mixins/elPaginationHandle";
import resToken from "@/mixins/resToken";
import asyncRequest from "@/apis/service/sellOut/salesOrder/detail";

import { mapGetters } from "vuex";

export default {
  name: "salesOrderDetail",
  mixins: [mixinPage, resToken],
  props: ["newTime", "id", "sitem"],
  watch: {
    newTime: function (val) {
      if (val) {
        this.initForm();
      }
    },
  },
  computed: {
    ...mapGetters(["tablebtnSize", "searchSize", "size"]),

    powers() {
      const tran =
        this.$store.getters.btnList.find(
          (item) => item.menu_route == "supplierSalesOrderDetail"
        ) || {};
      const { action } = tran ?? {};
      return action ?? [];
    },
  },

  data() {
    return {
      orderCode: "",
      outCode: "",
      addrmodel: false,
      // 状态
      statusOptions: [
        { id: "0", label: "待公司采购" },
        { id: "1", label: "待库管发货" },
        { id: "2", label: "已发货待收货" },
        { id: "3", label: "已收货" },
        { id: "4", label: "已全部退货" },
      ],
      showGoodsModel: false,
      stock_code: "",
      tableData: [],
      loading: false,
      queryId: "",
      status: "",
      showModel: null,
      modelId: "",
      modelItem: null,
      s_sitem: null,
      returnId: "",
      returnItem: null,
      returnModel: false,
      wsend_num: "",
      orderCode: "",
      parmValue: {
        order_type: "",
        orderCode: "",
        apply_name: "", //申请人名称
        cgdNo: "",
        start: "",
        end: "",
        // supplierNo: "",
        companyNo: "",
        good_code: "",
        good_name: "",
        outCode: "",
        status: "",
        company_name: "", //申请人部门
        page: 1, // 页码
        size: 15, // 每页显示条数
      },
      pageInfo: {
        size: 15,
        curr: 1,
        total: 0,
      },
    };
  },
  mounted() {
    this.initForm();
  },
  methods: {
    closeModel() {
      this.modelId = "";
      this.modelShowModel = false;
    },
    refresh() {
      this.$emit("refresh");
      this.modelId = "";
      this.modelShowModel = false;
    },
    async initForm() {
      this.status = "";
      this.queryId = this.$route.query.id;
      // this.rulesThis = this.rules;
      this.resetForm();
    },
    async resetForm() {
      // 重置
      await this.$nextTick(async () => {
        this.wsend_num = true;
        const { orderCode, status } = this.sitem;
        this.status = status;
        this.orderCode = orderCode || "";

        await this.searchList();
      });
    },
    // 列表搜索
    async searchList() {
      this.parmValue.orderCode = this.orderCode;
      if (this.orderCode === "") return;
      const { code, data, message } = await asyncRequest.supplierOrderOut(this.parmValue);
      if (code === 0) {
        const { list, count } = data;
        this.tableData = list;
        this.pageInfo.total = Number(count);
        this.tableData.forEach((v) => {
          v.good_class = "";
          if (v.can && v.can.length > 0) {
            v.can.forEach((x, i) => {
              v.good_class += i === 0 ? x.name : "/" + x.name;
            });
          }
        });
      } else if (code >= 100 && code <= 104) {
        await this.logout();
      } else {
        this.tableData = [];
        this.pageInfo.total = 0;
      }
      this.loading = false;
    },
    editRow(index) {
      let findex = this.stockForm.good_stock.findIndex((v) => v.edit === true);
      if (findex !== -1) {
        this.$message.warning("当前已有发货仓库信息在编辑，请保存后再试！");
        return;
      } else {
        this.stockForm.good_stock[index].edit = true;
      }
    },

    openHouseModal() {
      this.modelId = "add";
      this.modelItem = this.sitem;
      this.modelShowModel = true;
    },
    openModal() {
      this.returnId = "add";
      this.returnItem = this.sitem;
      this.returnModel = true;
      console.log(addModel);
    },
    async restSearch() {
      this.parmValue = {
        order_type: "",
        orderCode: "",
        apply_name: "", //申请人名称
        cgdNo: "",
        start: "",
        end: "",
        // supplierNo: "",
        companyNo: "",
        good_code: "",
        good_name: "",
        outCode: "",
        status: "",
        company_name: "", //申请人部门
        page: 1, // 页码
        size: 15, // 每页显示条数
      };
      // 表格 - 分页
      this.pageInfo = {
        size: 15,
        curr: 1,
        total: 0,
      };
      await this.searchList();
    },
    async page_size_change(e) {
      this.parmValue.size = e;
      this.pageInfo.size = e;
      this.parmValue.page = 1;
      this.pageInfo.curr = 1;
      await this.searchList();
    },
    async page_curr_change(e) {
      this.parmValue.page = e;
      this.pageInfo.curr = e;
      await this.searchList();
    },
  },
};
</script>
<style lang="scss" scoped></style>