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

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

      <el-table-column
        show-overflow-tooltip
        prop="status"
        label="状态"
        width="80"
      >
        <template slot-scope="scope">
          {{ scope.row.status }}
          <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="receipt_quantity"
        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="物流公司"
        min-width="110"
      />
      <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-column
        fixed="right"
        width="50"
        v-if="
          ((status === '0' || status === '1') &&
            powers.some((item) => item == '048')) ||
          powers.some((item) => item == '007')
        "
      >
        <template slot="header" slot-scope="scope">
          <el-tooltip
            style="margin: 3px 0 0 0"
            effect="dark"
            v-if="
              (status === '0' || status === '1') &&
              powers.some((item) => item == '048')
            "
            content="添加"
            placement="top"
          >
            <i
              class="el-icon-circle-plus-outline tb-icon"
              style="color: #63cbe7; magin: 0 0 0 10px"
              @click="openHouseModal()"
            ></i>
          </el-tooltip>
          <span v-else>操作</span>
        </template>

        <template slot-scope="scope">
          <el-tooltip
            effect="dark"
            content="查看"
            placement="top"
            v-if="powers.some((item) => item == '007')"
          >
            <i
              class="el-icon-view tb-icon"
              @click="
                routeGoto('sellOutOrderDetail', { id: scope.row.outCode })
              "
            ></i>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <out-order-add-model
      :showModel="modelShowModel"
      :id="modelId"
      :sitem="modelItem"
      @refresh="refresh"
      @closeModel="closeModel"
    />
    <!-- <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 outOrderAddModel from "./out-order-add-model";

import { mapGetters } from "vuex";

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

    powers() {
      let tran =
        this.$store.getters.btnList.find(
          (item) => item.menu_route == "salesOrderDetail"
        ) || {};
      if (tran && tran.action && tran.action.length > 0) {
        return tran.action;
      } else {
        return [];
      }
    },
  },

  data() {
    return {
      orderCode: "",
      outCode: "",
      // 状态
      statusOptions: [
        { id: "1", label: "已出库" },
        { id: "2", label: "验收中" },
        { id: "3", label: "验收完成" },
      ],
      showGoodsModel: false,
      stock_code: "",
      tableData: [],
      loading: false,
      queryId: "",
      status: "",
      showModel: null,
      modelId: "",
      modelItem: null,
      s_sitem: null,
    };
  },
  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();
    },
    getNewTime() {
      this.newTime = new Date().valueOf();
    },
    async resetForm() {
      // 重置
      await this.$nextTick(() => {
        const { addrs, status } = this.sitem;
        this.status = status;
        console.log(this.status);
        this.tableData = JSON.parse(JSON.stringify(addrs));
      });
    },

    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;
      }
    },
    checkStockRow(index) {
      let total = parseInt(this.stockForm.good_stock[index].usable_stock),
        num = parseInt(this.stockForm.good_stock[index].num);
      if (total === 0) {
        this.$message.warning("该仓库已无该商品库存！不能销售！");
        return;
      } else {
        if (num > total) {
          this.$message.warning("销售数量不能大于可用库存！");
          return;
        } else {
          this.stockForm.good_stock[index].edit = false;
        }
      }
    },

    openHouseModal() {
      this.modelId = "add";
      this.modelItem = this.sitem;
      this.modelShowModel = true;
    },

    //省市区保存某一行
    checkRow(rowIndex) {
      this.$refs.addrForm.validate((valid) => {
        if (valid) {
          this.tableData[rowIndex].edit = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 省市区删除行操作
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    async submitForm() {
      await this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          this.loading = true;
          const { order_addr } = JSON.parse(JSON.stringify(this.addrForm));
          let model = {
            id: this.queryId,
            order_addr: [],
          };
          order_addr.forEach((v2) => {
            let model2 = {
              post_fee: v2.post_fee,
              id: v2.id,
            };
            model.order_addr.push(model2);
          });
          let res = await asyncRequest.salefee(model);
          this.loading = false;
          if (res && res.code === 0) {
            this.$notify.success({
              title: "反馈物流费用成功！",
              message: "",
            });
            this.showModelThis = false;
            // 刷新
            this.$emit("refresh");
          } else if (res && res.code >= 100 && res.code <= 104) {
            await this.logout();
          } else {
            this.$message.warning(res.message);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    openModal(code, sitem, outcode) {
      this.s_sitem = sitem;
      this.modelId = code;
      this.showModel = true;
    },
  },
};
</script>
   <style lang="scss" scoped>
</style>