order-ui-pc/src/views/sellOut/combinedRemove/detail.vue

<template>
  <div class="zxDiffOrderDetail pagePadding">
    <div style="width: 100%" v-if="powers.some((i) => i == '007')" v-loading="loading">
      <el-tabs v-model="activeTabs">
        <el-tab-pane label="业务详情" name="1">
          <el-collapse v-model="activeNames" style="margin: -18px 0 0 0">
            <el-collapse-item :title="title" name="1" v-if="type === 'add'">
              <base-form />
            </el-collapse-item>

            <template v-else>
              <el-collapse-item title="组合商品详情" name="2" v-if="sitem">
                <show-data-table :sitem="sitem" :newTime="newTime" :columns="detailColumns_j">
                  <template #status>
                    <el-tag
                      size="mini"
                      :type="sitem.status == '1' ? 'warning' : ''"
                    >{{(statusOptions.find((item) => item.id == String(sitem.status)) || {}).label || '--'}}</el-tag>
                  </template>

                  <template #wsmtype>
                    <el-tag
                      size="mini"
                    >{{(wsm_options.find(({value}) => value === sitem.wsm_type) || {}).label || '--'}}</el-tag>
                  </template>
                </show-data-table>
              </el-collapse-item>

              <el-collapse-item title="子商品信息" name="4">
                <el-table :data="sitem ? sitem.combindgood : []" size="mini" border>
                  <el-table-column label="子商品成本编号" prop="childCode" min-width="160px" />
                  <el-table-column
                    label="子商品名称"
                    prop="child_name"
                    min-width="180px"
                    show-overflow-tooltip
                  />
                  <el-table-column label="组合比例" prop="child_num" />
                  <el-table-column label="本次解除库存数">
                    <template
                      slot-scope="{ row }"
                    >{{ ((row.child_num || 0) * ( sitem.stock_num || 0)) || 0}}</template>
                  </el-table-column>

                  <el-table-column label="锁定库存总数">
                    <template slot-scope="scope">{{ scope.row.stock || 0 }}</template>
                  </el-table-column>
                  <el-table-column label="锁定库存可用库存数">
                    <template slot-scope="scope">{{ scope.row.usable_stock || 0 }}</template>
                  </el-table-column>
                </el-table>
              </el-collapse-item>

              <el-collapse-item
                v-if="Number(sitem.status) === 1 && !isSupertube"
                title="待审核"
                name="3"
              >
                <div style="width:600px">
                  <wait-approval @confirm="setStatus" />
                </div>
              </el-collapse-item>
            </template>
          </el-collapse>
        </el-tab-pane>
      </el-tabs>
    </div>

    <div v-else>
      <no-auth></no-auth>
    </div>
  </div>
</template>
<script>
import asyncRequest from "@/apis/service/sellOut/combinedAdd";
import { xs_order_type_options } from "@/assets/js/statusList";
import { showColumns, detailColumns_j } from "./columns";
import WaitApproval from "./components/waitApproval";
import mixinPage from "@/mixins/elPaginationHandle";
import BaseForm from "./components/baseForm";
import resToken from "@/mixins/resToken";
import { mapGetters } from "vuex";
export default {
  name: "combinedRemoveDetail",
  mixins: [mixinPage, resToken],
  components: { BaseForm, WaitApproval },
  computed: {
    ...mapGetters(["isSupertube"]),
    type() {
      return this.$route.query.id;
    },
    title() {
      const { query } = this.$route;
      return query.id === "add" ? "新建组合商品库存申请" : "组合商品库存详情";
    },
    powers() {
      const { btnList } = this.$store.getters;
      const tran =
        btnList.find(item => item.menu_route == "combinedRemoveDetail") || {};
      const { action } = tran ?? {};
      return action ?? [];
    }
  },
  data() {
    return {
      showModel: false,
      showColumns: showColumns,
      activeTabs: "1",
      activeNames: ["-1", "0", "1", "2", "3", "4", "5", "10"],
      statusOptions: [
        { id: "1", label: "待审核" },
        { id: "2", label: "审核通过" },
        { id: "3", label: "审核驳回" }
      ],
      detailColumns_j,
      xs_order_type_options,
      customer_remark_options: [
        {
          value: "1",
          label: "竞价订单减工差"
        },
        {
          value: "2",
          label: "竞价订单不减工差"
        }
      ],
      wsm_options: [
        // {
        //   value: "1",
        //   label: "系统仓",
        // },
        //   {
        //   value: "2",
        //   label: "虚拟仓",
        // },
        //     {
        //   value: "3",
        //   label: "自建仓",
        // },
        {
          value: "5",
          label: "销售仓"
        },
        {
          value: "4",
          label: "次品仓"
        }
      ],
      is_act_options: [
        {
          value: "1",
          label: "接受工差"
        },
        {
          value: "2",
          label: "不接受工差-退回重做"
        }
      ],
      sitem: null,
      status: "",
      newTime: "",
      loading: false,
      queryId: ""
    };
  },
  mounted() {
    this.status = "";
    this.queryId = this.$route.query.id;

    if (this.queryId !== "add") {
      this.initData();
    }
  },
  methods: {
    getNewTime() {
      this.newTime = new Date().valueOf() + "";
    },

    async setStatus(param) {
      if (!this.loading) {
        this.loading = true;

        let model = {
          id: this.queryId,
          ...param
        };

        const res = await asyncRequest.status(model);
        this.loading = false;
        if (res && res.code === 0) {
          this.initData();
        } else if (res && res.code >= 100 && res.code <= 104) {
          await this.logout();
        } else {
          this.$message.warning(res.message);
        }
      }
    },
    async initData() {
      const res = await asyncRequest.detail({ id: this.queryId });
      if (res && res.code === 0 && res.data) {
        this.sitem = res.data;
        const { can, status } = res.data;
        this.status = status;
        this.sitem.class_cat = "";
        if (can && can.length > 0) {
          can.forEach((x, i) => {
            this.sitem.class_cat += i === 0 ? x.name : "/" + x.name;
          });
        }
        this.getNewTime();
      } else if (res && res.code >= 100 && res.code <= 104) {
        await this.logout();
      } else {
        this.$message.warning(res.message);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.zxDiffOrderDetail {
}
</style>