erp_wdly/src/views/WDLY/outInBound/record/index.vue

<template>
  <div class="tenant">
    <div class="content">
      <byTable :source="sourceList.data" :pagination="sourceList.pagination" :config="config" :loading="loading" :selectConfig="selectConfig"
               highlight-current-row :action-list="[   {
            text: '导出Excel',
            action: () => deriveExcel(),
          },]" @get-list="getList">

        <template #warehouseName="{ item }">
          <div>
            <!-- <span v-if="item.opType == 1">{{ item.toWarehouseName }}</span>
            <span v-else>{{ item.warehouseName }}</span> -->
            <span>{{ item.warehouseName }}</span>
          </div>
        </template>
      </byTable>
    </div>

    <el-dialog :title="'修正数量'" v-model="dialogVisible" width="500" destroy-on-close>
      <byForm v-loading="submitLoading" :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="byform">
      </byForm>
      <template #footer>
        <el-button @click="dialogVisible = false" size="large">取 消</el-button>
        <el-button type="primary" @click="submitForm('byform')" size="large" :loading="submitLoading">
          确 定
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
import byTable from "@/components/byTable/index";
import byForm from "@/components/byForm/index";

const { proxy } = getCurrentInstance();
const route = useRoute();
const opTypeList = ref([
  {
    label: "入库",
    value: "1",
  },
  {
    label: "出库",
    value: "2",
  },
]);
const typeList = ref([
  {
    label: "手动入库",
    value: "1",
  },
  {
    label: "手动出库",
    value: "2",
  },
  {
    label: "调仓入库",
    value: "3",
  },
  {
    label: "待入库入库",
    value: "4",
  },
  {
    label: "待出库出库",
    value: "5",
  },
  {
    label: "组合入库",
    value: "6",
  },
  {
    label: "组合出库",
    value: "7",
  },
  {
    label: "组合拆分入库",
    value: "8",
  },
  {
    label: "组合拆分出库",
    value: "9",
  },
  {
    label: "京东销售出库",
    value: "10",
  },
  {
    label: "调仓出库",
    value: "11",
  },
  {
    label: "销售订单出库",
    value: "12",
  },
  {
    label: "退货出库",
    value: "13",
  },
  {
    label: "到货入库",
    value: "14",
  },
  {
    label: "京东退货入库",
    value: "15",
  },
  {
    label: "采购到货入库",
    value: "18",
  },
  {
    label: "到货质检",
    value: "19",
  },
  {
    label: "生产任务出库",
    value: "20",
  },
  {
    label: "良品转次品",
    value: "21",
  },
  {
    label: "次品转良品",
    value: "22",
  },
]);
const warehouseList = ref([]);
const productUnit = ref([]);
const sourceList = ref({
  data: [],
  pagination: {
    total: 0,
    pageNum: 1,
    pageSize: 10,
    keyword: "",
    opType: "",
    productId: "",
  },
});
const loading = ref(false);
const selectConfig = computed(() => {
  return [
    {
      label: "操作类型",
      prop: "opType",
      data: opTypeList.value,
    },
    {
      label: "出入库类型",
      prop: "type",
      data: typeList.value,
    },
  ];
});
const config = computed(() => {
  return [
    {
      attrs: {
        label: "操作类型",
        prop: "opType",
        width: 100,
      },
      render(type) {
        return proxy.dictValueLabel(type, opTypeList.value);
      },
    },
    {
      attrs: {
        label: "关联单号",
        prop: "linkCode",
      },
    },
    {
      attrs: {
        label: "物流单号",
        prop: "logisticsCode",
      },
    },
    {
      attrs: {
        label: "物流/快递公司",
        prop: "logisticsCompanyName",
      },
    },
    {
      attrs: {
        label: "出入库类型",
        prop: "type",
        width: 120,
      },
      render(type) {
        return proxy.dictValueLabel(type, typeList.value);
      },
    },
    {
      attrs: {
        label: "仓库名称",
        slot: "warehouseName",
      },
    },
    {
      attrs: {
        label: "物品编码",
        prop: "productCustomCode",
      },
    },
    {
      attrs: {
        label: "物品名称",
        prop: "productName",
      },
    },
    {
      attrs: {
        label: "规格",
        prop: "productSpec",
      },
    },
    {
      attrs: {
        label: "单位",
        prop: "productUnit",
        width: 100,
      },
      render(unit) {
        return proxy.dictValueLabel(unit, productUnit.value);
      },
    },
    {
      attrs: {
        label: "操作数量",
        prop: "quantity",
        width: 100,
      },
    },
    {
      attrs: {
        label: "操作人",
        prop: "opUserName",
        width: 120,
      },
    },
    {
      attrs: {
        label: "操作时间",
        prop: "createTime",
        width: 160,
      },
    },
    {
      attrs: {
        label: "操作",
        width: "80",
        align: "center",
      },
      // 渲染 el-button，一般用在最后一列。
      renderHTML(row) {
        return [
          row.type == "18"
            ? {
                attrs: {
                  label: "修正",
                  type: "primary",
                  text: true,
                },
                el: "button",
                click() {
                  getDtl(row);
                },
              }
            : {},
        ];
      },
    },
  ];
});
const getDict = () => {
  proxy.post("/warehouse/page", { pageNum: 1, pageSize: 999 }).then((res) => {
    if (res.rows && res.rows.length > 0) {
      warehouseList.value = res.rows.map((item) => {
        return {
          label: item.name,
          value: item.id,
        };
      });
    }
  });
  proxy.getDictOne(["unit"]).then((res) => {
    productUnit.value = res["unit"].map((x) => ({
      label: x.dictValue,
      value: x.dictKey,
    }));
  });
};
const getList = async (req) => {
  sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
  loading.value = true;
  proxy
    .post("/stockJournalDetails/pageByWdly", sourceList.value.pagination)
    .then((res) => {
      sourceList.value.data = res.rows;
      sourceList.value.pagination.total = res.total;
      setTimeout(() => {
        loading.value = false;
      }, 200);
    });
};
getDict();

onMounted(() => {
  if (route.query.productId) {
    sourceList.value.pagination.productId = route.query.productId;
  }
  getList();
});

const deriveExcel = () => {
  ElMessage({
    message: "请稍后",
    type: "success",
  });
  proxy
    .postTwo("/stockJournalDetails/exportExcel", sourceList.value.pagination)
    .then(
      (res) => {
        exportData(res, "出入库流水.xlsx");
      },
      (err) => {
        return ElMessage({
          message: "请重试",
          type: "info",
        });
      }
    );
};

const exportData = (res, name) => {
  const content = res;
  const blob = new Blob([content], { type: "application/ms-excel" });
  const fileName = name;
  if ("download" in document.createElement("a")) {
    // 非IE下载
    const elink = document.createElement("a");
    elink.download = fileName;
    elink.style.display = "none";
    elink.href = URL.createObjectURL(blob);
    document.body.appendChild(elink);
    elink.click();
    URL.revokeObjectURL(elink.href); // 释放URL 对象
    document.body.removeChild(elink);
  } else {
    navigator.msSaveBlob(blob, fileName);
  }
};
const dialogVisible = ref(false);
const submitLoading = ref(false);
const formData = reactive({
  data: {},
});
const formOption = reactive({
  inline: true,
  labelWidth: 100,
  itemWidth: 100,
  rules: [],
});
const byform = ref(null);
const formConfig = reactive([
  {
    type: "input",
    label: "原来数量",
    prop: "oldQuantity",
    disabled: true,
    itemWidth: 50,
  },
  {
    type: "number",
    label: "修正数量",
    prop: "quantity",
    precision: 0,
    min: 0,
    controls: false,
    itemWidth: 50,
  },
]);
const rules = ref({
  quantity: [{ required: true, message: "请输入修正数量", trigger: "blur" }],
});
const getDtl = (row) => {
  formData.data = {
    id: row.id,
    oldQuantity: row.quantity || "0",
    quantity: null,
  };
  dialogVisible.value = true;
};

const submitForm = () => {
  byform.value.handleSubmit((valid) => {
    submitLoading.value = true;
    proxy.post("/stockJournalDetails/editQuantity", formData.data).then(
      (res) => {
        ElMessage({
          message: "操作成功",
          type: "success",
        });
        dialogVisible.value = false;
        submitLoading.value = false;
        getList();
      },
      (err) => (submitLoading.value = false)
    );
  });
};
</script>

<style lang="scss" scoped>
.tenant {
  padding: 20px;
}
::v-deep(.el-input-number .el-input__inner) {
  text-align: left;
}
</style>