sd-new-vue/src/views/group/data-board/material-control-purchasing/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
        :table-events="{
          select: selectRow,
          'select-all': selectRow,
        }"
        :action-list="[
          {
            text: '一键申购',
            action: () => oneKeySubscribe(),
          },
        ]"
        @get-list="getList"
        @clickReset="clickReset"
        :cellClassName="cellClassName">
      </byTable>
    </el-card>
  </div>
</template>

<script setup>
import byTable from "/src/components/byTable/index";
import subscribeStore from "/src/store/modules/subscribe";

const { proxy } = getCurrentInstance();
const sourceList = ref({
  data: [],
  pagination: {
    total: 0,
    pageNum: 1,
    pageSize: 10,
    bomSpecCode: "",
    bomSpecName: "",
    sortField: "turnoverRate",
    sortBy: 2,
  },
});
const sortField = ref([
  {
    dictKey: "turnoverRate",
    dictValue: "周转率",
  },
  {
    dictKey: "predictOutStorageDays",
    dictValue: "预计消耗天数",
  },
  {
    dictKey: "nextDeliveryDays",
    dictValue: "下一批到货天数",
  },
]);
const sortBy = ref([
  {
    dictKey: 1,
    dictValue: "升序",
  },
  {
    dictKey: 2,
    dictValue: "降序",
  },
]);
const loading = ref(false);
const searchConfig = computed(() => {
  return [
    {
      type: "input",
      prop: "bomSpecCode",
      label: "品号",
    },
    {
      type: "input",
      prop: "bomSpecName",
      label: "品名",
    },
    {
      type: "select",
      prop: "sortField",
      label: "排序字段",
      data: sortField.value,
    },
    {
      type: "select",
      prop: "sortBy",
      label: "排序方式",
      data: sortBy.value,
    },
  ];
});
const config = computed(() => {
  return [
    {
      type: "selection",
      attrs: {
        checkAtt: "isCheck",
      },
    },
    {
      attrs: {
        label: "品号",
        prop: "bomSpecCode",
        width: 160,
      },
    },
    {
      attrs: {
        label: "品名",
        prop: "bomSpecName",
        "min-width": 220,
      },
    },
    {
      attrs: {
        label: "当前库存",
        prop: "inventoryQuantity",
        align: "center",
        width: 100,
      },
    },
    {
      attrs: {
        label: "40天安全库存",
        prop: "safetyInventoryQuantity",
        align: "center",
        width: 110,
      },
    },
    {
      attrs: {
        label: "近七天消耗量",
        prop: "outStorageQuantitySevenDays",
        align: "center",
        width: 110,
      },
    },
    {
      attrs: {
        label: "近15天消耗量",
        prop: "outStorageQuantityFifteenDays",
        align: "center",
        width: 110,
      },
    },
    {
      attrs: {
        label: "近30天消耗量",
        prop: "outStorageQuantityThirtyDays",
        align: "center",
        width: 110,
      },
    },
    {
      attrs: {
        label: "近60天消耗量",
        prop: "outStorageQuantitySixtyDays",
        align: "center",
        width: 110,
      },
    },
    {
      attrs: {
        label: "周环比销量",
        prop: "outStorageWeekOnWeekRatio",
        align: "center",
        width: 100,
      },
      render(val) {
        return val * 100 + "%";
      },
    },
    {
      attrs: {
        label: "预计消耗天数",
        prop: "predictOutStorageDays",
        align: "center",
        width: 110,
      },
    },
    {
      attrs: {
        label: "在途总数",
        prop: "inTransitSum",
        align: "center",
        width: 100,
      },
    },
    {
      attrs: {
        label: "下一批到货天数",
        prop: "nextDeliveryDays",
        align: "center",
        width: 130,
      },
    },
    {
      attrs: {
        label: "周转率",
        prop: "turnoverRate",
        width: 100,
      },
    },
    {
      attrs: {
        label: "操作",
        width: 100,
        align: "center",
        fixed: "right",
      },
      renderHTML(row) {
        return [
          {
            attrs: {
              label: "发起申购",
              type: "primary",
              text: true,
            },
            el: "button",
            click() {
              clickSubscribe(row);
            },
          },
        ];
      },
    },
  ];
});
const getList = async (req, status) => {
  if (status) {
    sourceList.value.pagination = {
      pageNum: sourceList.value.pagination.pageNum,
      pageSize: sourceList.value.pagination.pageSize,
      sortField: "turnoverRate",
      sortBy: 2,
    };
  } else {
    sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
  }
  loading.value = true;
  proxy.post("/purchaseBomBoard/page", sourceList.value.pagination).then((res) => {
    if (res.rows && res.rows.length > 0) {
      sourceList.value.data = res.rows.map((item) => {
        return {
          ...item,
          isCheck: true,
        };
      });
    } else {
      sourceList.value.data = [];
    }
    sourceList.value.pagination.total = res.total;
    setTimeout(() => {
      loading.value = false;
    }, 200);
  });
};
getList();
const clickReset = () => {
  getList("", true);
};
const selectData = ref([]);
const selectRow = (data) => {
  selectData.value = data;
};
const cellClassName = ({ columnIndex, row }) => {
  if (columnIndex === 3 && row.inventoryQuantity < row.safetyInventoryQuantity) {
    return "colorDim";
  }
  if (columnIndex === 10 && row.predictOutStorageDays < 40) {
    return "colorDim";
  }
};
const clickSubscribe = (row) => {
  subscribeStore().setSubscribe([row]);
  proxy.$router.replace({
    path: "/platform_manage/process/processApproval",
    query: {
      flowKey: "apply_buy",
      flowName: "申购流程",
      random: proxy.random(),
      subscribeStatus: true,
    },
  });
};
const oneKeySubscribe = () => {
  if (selectData.value && selectData.value.length > 0) {
    subscribeStore().setSubscribe(selectData.value);
    proxy.$router.replace({
      path: "/platform_manage/process/processApproval",
      query: {
        flowKey: "apply_buy",
        flowName: "申购流程",
        random: proxy.random(),
        subscribeStatus: true,
      },
    });
  } else {
    return ElMessage("请选择需要申购的数据");
  }
};
</script>

<style lang="scss" scoped>
::v-deep(.colorDim) {
  color: red;
}
</style>