sd-new-vue/src/views/group/order/product-management/index.vue

<template>
  <div>
    <el-card class="box-card">
      <byTable
        :source="sourceList.data"
        :pagination="sourceList.pagination"
        :config="config"
        :loading="loading"
        :searchConfig="searchConfig"
        highlight-current-row
        :action-list="[
          {
            text: '复制万里牛单号',
            action: () => clickCopyWLNCode(),
          },
        ]"
        @get-list="getList"
        @clickReset="clickReset">
        <template #orderCode="{ item }">
          <div>
            <a style="color: #409eff; cursor: pointer; word-break: break-all" @click="clickCode(item)">{{ item.orderCode }}</a>
          </div>
        </template>
        <template #blueprint="{ item }">
          <div>图片</div>
        </template>
        <template #subtotal="{ item }">
          <div style="color: #409eff">{{ subtotal(item) }}</div>
        </template>
        <template #wlnCreateTime="{ item }">
          <div>{{ item.wlnCreateTime || item.createTime }}</div>
        </template>
      </byTable>
    </el-card>
  </div>
</template>

<script setup>
import byTable from "/src/components/byTable/index";
import { ElMessage } from "element-plus";
import { copyText } from "vue3-clipboard";

const { proxy } = getCurrentInstance();
const departmentList = ref([{ dictKey: "0", dictValue: "胜德体育" }]);
const sourceList = ref({
  data: [],
  pagination: {
    total: 0,
    pageNum: 1,
    pageSize: 10,
    departmentId: "",
    skuSpecCode: "",
    skuSpecName: "",
    bomSpecCode: "",
    bomSpecName: "",
    orderCode: "",
    orderWlnCode: "",
    orderStatus: "",
    beginTime: "",
    endTime: "",
  },
});
const loading = ref(false);
const searchConfig = computed(() => {
  return [
    {
      type: "select",
      prop: "departmentId",
      data: departmentList.value,
      label: "事业部",
    },
    {
      type: "input",
      prop: "skuSpecCode",
      label: "SKU规格编码",
    },
    {
      type: "input",
      prop: "skuSpecName",
      label: "SKU规格名称",
    },
    {
      type: "input",
      prop: "bomSpecCode",
      label: "BOM规格编码",
    },
    {
      type: "input",
      prop: "bomSpecName",
      label: "BOM规格名称",
    },
    {
      type: "input",
      prop: "orderCode",
      label: "订单号",
    },
    {
      type: "input",
      prop: "orderWlnCode",
      label: "万里牛单号",
    },
    {
      type: "select",
      prop: "orderStatus",
      dictKey: "order_status",
      label: "订单状态",
    },
    {
      type: "datetime",
      propList: ["beginTime", "endTime"],
      label: "下单时间",
    },
  ];
});
const config = computed(() => {
  return [
    {
      attrs: {
        label: "设计图",
        slot: "blueprint",
        width: 80,
      },
    },
    {
      attrs: {
        label: "产品规格编码",
        prop: "skuSpecCode",
        width: 160,
      },
    },
    {
      attrs: {
        label: "产品规格名称",
        prop: "skuSpecName",
        width: 240,
      },
    },
    {
      attrs: {
        label: "BOM规格编码",
        prop: "bomSpecCode",
        width: 160,
      },
    },
    {
      attrs: {
        label: "BOM规格名称",
        prop: "bomSpecName",
        width: 260,
      },
    },
    {
      attrs: {
        label: "事业部",
        prop: "departmentName",
        width: 120,
      },
    },
    {
      attrs: {
        label: "订单号",
        slot: "orderCode",
        width: 200,
      },
    },
    {
      attrs: {
        label: "万里牛单号",
        prop: "orderWlnCode",
        width: 160,
      },
    },
    {
      attrs: {
        label: "订单状态",
        prop: "orderStatus",
        width: 120,
      },
      render(val) {
        return proxy.dictKeyValue(val, proxy.useUserStore().allDict["order_status"]);
      },
    },
    {
      attrs: {
        label: "结算状态",
        prop: "orderSettlementStatus",
        width: 120,
      },
      render(val) {
        return proxy.dictKeyValue(val, proxy.useUserStore().allDict["settlement_status"]);
      },
    },
    {
      attrs: {
        label: "数量",
        prop: "quantity",
        width: 80,
      },
    },
    {
      attrs: {
        label: "小计 ¥",
        slot: "subtotal",
        width: 120,
        align: "right",
      },
    },
    {
      attrs: {
        label: "产品单价 ¥",
        prop: "unitPrice",
        width: 120,
        align: "right",
      },
      render(val) {
        return proxy.moneyFormat(val);
      },
    },
    {
      attrs: {
        label: "定制加工费 ¥",
        prop: "customProcessingFee",
        width: 120,
        align: "right",
      },
      render(val) {
        return proxy.moneyFormat(val);
      },
    },
    {
      attrs: {
        label: "代发费 ¥",
        prop: "lssueFee",
        width: 120,
        align: "right",
      },
      render(val) {
        return proxy.moneyFormat(val);
      },
    },
    {
      attrs: {
        label: "快递包材费 ¥",
        prop: "deliveryMaterialsFee",
        width: 120,
        align: "right",
      },
      render(val) {
        return proxy.moneyFormat(val);
      },
    },
    {
      attrs: {
        label: "包装人工费 ¥",
        prop: "packingLabor",
        width: 120,
        align: "right",
      },
      render(val) {
        return proxy.moneyFormat(val);
      },
    },
    {
      attrs: {
        label: "包材费 ¥",
        prop: "packagingMaterialCost",
        width: 120,
        align: "right",
      },
      render(val) {
        return proxy.moneyFormat(val);
      },
    },
    {
      attrs: {
        label: "管理费 ¥",
        prop: "managementFee",
        width: 120,
        align: "right",
      },
      render(val) {
        return proxy.moneyFormat(val);
      },
    },
    {
      attrs: {
        label: "外箱包装费 ¥",
        prop: "outerBoxPackingFee",
        width: 120,
        align: "right",
      },
      render(val) {
        return proxy.moneyFormat(val);
      },
    },
    {
      attrs: {
        label: "下单时间",
        slot: "wlnCreateTime",
        width: 160,
      },
    },
  ];
});
const getDemandData = () => {
  proxy.post("/department/page", { pageNum: 1, pageSize: 999 }).then((res) => {
    if (res.rows && res.rows.length > 0) {
      departmentList.value = departmentList.value.concat(
        res.rows.map((item) => {
          return {
            dictKey: item.id,
            dictValue: item.name,
          };
        })
      );
    }
  });
};
getDemandData();
const getList = async (req, status) => {
  if (status) {
    sourceList.value.pagination = {
      pageNum: sourceList.value.pagination.pageNum,
      pageSize: sourceList.value.pagination.pageSize,
    };
  } else {
    sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
  }
  loading.value = true;
  proxy.post("/orderSku/page", sourceList.value.pagination).then((res) => {
    sourceList.value.data = res.rows;
    sourceList.value.pagination.total = res.total;
    setTimeout(() => {
      loading.value = false;
    }, 200);
  });
};
getList();
const clickReset = () => {
  getList("", true);
};
const clickCode = (row) => {
  proxy.$router.replace({
    path: "/order-detail",
    query: {
      detailId: row.orderId,
      text: "订单详情",
      random: proxy.random(),
    },
  });
};
const subtotal = (row) => {
  let money = 0;
  if (row.unitPrice) {
    money = Number(Math.round((money + row.unitPrice) * 100) / 100);
  }
  if (row.customProcessingFee) {
    money = Number(Math.round((money + row.customProcessingFee) * 100) / 100);
  }
  if (row.lssueFee) {
    money = Number(Math.round((money + row.lssueFee) * 100) / 100);
  }
  if (row.deliveryMaterialsFee) {
    money = Number(Math.round((money + row.deliveryMaterialsFee) * 100) / 100);
  }
  if (row.packingLabor) {
    money = Number(Math.round((money + row.packingLabor) * 100) / 100);
  }
  if (row.managementFee) {
    money = Number(Math.round((money + row.managementFee) * 100) / 100);
  }
  if (row.packagingMaterialCost) {
    money = Number(Math.round((money + row.packagingMaterialCost) * 100) / 100);
  }
  return money;
};
const clickCopyWLNCode = () => {
  ElMessage("复制数据中,请稍后");
  proxy.post("/orderSku/getOrderWlnCodeStr", sourceList.value.pagination).then((res) => {
    copyText(res, undefined, (error) => {
      if (error) {
        ElMessage.error(`复制失败: ${error} ！`);
      } else {
        ElMessage.success(`复制成功！`);
      }
    });
  });
};
</script>

<style lang="scss" scoped>
:deep(.el-dialog) {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}
</style>