order-ui-pc/src/views/sellOut/filing/order-out-table.vue

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

      <el-table-column show-overflow-tooltip prop="send_status" label="状态" 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="发货数量"
        width="80"
      />
      <el-table-column show-overflow-tooltip prop="contactor" label="联系人" width="80" />
      <el-table-column show-overflow-tooltip prop="mobile" label="联系电话" 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-column
        show-overflow-tooltip
        prop="post_name"
        label="物流公司"
        width="160"
      />
      <el-table-column
        show-overflow-tooltip
        prop="post_code"
        label="物流单号"
        width="160"
      />
      <el-table-column
        show-overflow-tooltip
        prop="sendtime"
        label="发货时间"
        width="145"
      />
    </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>
  </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"],
  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 == "salesOrderDetail"
        ) || {};
      const { action } = tran ?? {};
      return action ?? [];
    },
  },

  data() {
    return {
      orderCode: "",
      outCode: "",
      addr_res: 0,
      batch_num: 0,
      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: "",
      returnAllId: "",
      returnAllSitem: null,
      returnAllShowModel: false,
      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,
      },
      multipleSelection: [],
      resModel: null,
    };
  },
  mounted() {
    this.initForm();
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    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 () => {
        await this.searchList();
      });
    },
    // 列表搜索
    async searchList() {
      this.parmValue.orderCode = this.id;
      const { code, data, message } = await asyncRequest.orderOut(this.parmValue);
      if (code === 0) {
        const { list, count } = data;
        this.tableData = list;
        this.pageInfo.total = Number(count);
        this.batch_num = 0;
        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;
            });
          }
          if (v.status + "" === "0" || v.status + "" === "1") {
            this.batch_num += parseInt(v.send_num + "");
          }
        });
      } else if (code >= 100 && code <= 104) {
        await this.logout();
      } else {
        this.tableData = [];
        this.pageInfo.total = 0;
      }
      this.loading = false;
    },

    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>