erp_fans/src/views/purchaseSales/outAndInWarehouse/waitingForStorage/index.vue

<template>
  <div class="pageIndexClass">
    <div class="content">
      <byTable :source="sourceList.data" :pagination="sourceList.pagination" :config="config" :loading="loading" :selectConfig="selectConfig"
               highlight-current-row @get-list="getList">

        <template #expand="{item}">
          <div style="width:100%;padding:0 50px">
            <el-table :data="item.stockWaitDetailsList" class="bom-table" border>
              <el-table-column label="物品图片" width="100" align="center">
                <template #default="{ row }">
                  <div v-if="row.fileUrl">
                    <img :src="row.fileUrl" class="pic" @click="openImg(row.fileUrl)" />
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="productCode" label="物品编码" width="200" />
              <el-table-column prop="productName" label="物品名称" min-width="130" />
              <el-table-column label="规格尺寸 (cm)" width="140">
                <template #default="{ row, $index }">
                  <div style="width: 100%">
                    {{row.productLength}} * {{row.productWidth}} * {{row.productHeight}}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="需入库数量" prop="quantity" width="100" />
              <el-table-column label="待入库数量" prop="waitQuantity" width="100" />
              <el-table-column label="已入库数量" prop="receiptQuantity" width="100" />
            </el-table>
          </div>
        </template>
      </byTable>
    </div>

    <el-dialog title="入库" v-if="dialogVisible" v-model="dialogVisible" width="90%">
      <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="submit" v-loading="loadingDialog">
        <template #detail>
          <div style="width:100%">
            <div style="width:100%;padding:0 15px">
              <el-table :data="formData.data.stockWaitDetailsList">
                <el-table-column label="物品图片" width="80">
                  <template #default="{ row }">
                    <div v-if="row.fileUrl">
                      <img :src="row.fileUrl" class="pic" @click="openImg(row.fileUrl)" />
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="productCode" label="物品编码" min-width="160" />
                <el-table-column prop="productName" label="物品名称" width="150" />
                <el-table-column label="规格尺寸 (cm)" width="140">
                  <template #default="{ row, $index }">
                    <div style="width: 100%">
                      {{row.productLength}} * {{row.productWidth}} * {{row.productHeight}}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="productColor" label="颜色" width="130" />
                <el-table-column prop="productNetWeight" label="净重" width="100" />
                <el-table-column prop="productFrontalTexture" label="纹路" width="130"
                                 :formatter="(row) => dictKeyValue(row.productFrontalTexture, frontLinesData)" />
                <el-table-column prop="productUnit" label="单位" width="100" />
                <el-table-column label="需入库数量" prop="needQuantity" width="100" fixed="right" />
                <el-table-column label="待入库数量" prop="waitQuantity" width="100" fixed="right" />
                <el-table-column label="已入库数量" prop="receiptQuantity" width="100" fixed="right" />
                <el-table-column prop="quantity" label="入库数量" width="130" fixed="right">
                  <template #default="{ row, $index }">
                    <el-form-item :prop="'stockWaitDetailsList.' + $index + '.quantity'" :rules="rules.quantity" :inline-message="true"
                                  class="margin-b-0">
                      <el-input-number onmousewheel="return false;" v-model="row.quantity" placeholder="请输入" style="width: 100%" :precision="0"
                                       :controls="false" :min="0" />
                    </el-form-item>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </template>
      </byForm>
      <template #footer>
        <el-button @click="dialogVisible = false" size="default">取 消</el-button>
        <el-button type="primary" @click="submitForm()" size="default">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

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

const { proxy } = getCurrentInstance();
const warehouseList = ref([]);
const userList = ref([]);
const deptData = ref([]);
const materialUnitData = computed(
  () => proxy.useUserStore().allDict["material_unit"]
);
const frontLinesData = computed(
  () => proxy.useUserStore().allDict["front_lines"]
);
const status = ref([
  {
    label: "待入库",
    value: 0,
  },
  {
    label: "部分入库",
    value: 1,
  },
  // {
  //   label: "入库完成",
  //   value: 2,
  // },
]);
const businessType = ref([
  // {
  //   label: "线边回仓",
  //   value: 1,
  // },
  // {
  //   label: "完工入库",
  //   value: 2,
  // },
  // {
  //   label: "采购到货",
  //   value: 3,
  // },
  // {
  //   label: "退货出库",
  //   value: 4,
  // },
  // {
  //   label: "京东订单",
  //   value: 5,
  // },
  // {
  //   label: "销售订单出库",
  //   value: 6,
  // },
  {
    label: "借用归还",
    value: "100",
  },
  {
    label: "退料入库",
    value: "101",
  },
  {
    label: "废料入库",
    value: "102",
  },
  {
    label: "丢件寻回",
    value: "103",
  },
  {
    label: "采购入库",
    value: "104",
  },
  {
    label: "调拨入库",
    value: "105",
  },
  {
    label: "盘盈入库",
    value: "106",
  },
  {
    label: "完工入库",
    value: "107",
  },
]);
const sourceList = ref({
  data: [],
  pagination: {
    total: 0,
    pageNum: 1,
    pageSize: 10,
    keyword: "",
    status: "",
    type: 1,
  },
});
const loading = ref(false);
const selectConfig = computed(() => {
  return [
    {
      label: "业务公司",
      prop: "companyId",
      data: proxy.useUserStore().allDict["list_company_data"],
    },
    {
      label: "入库类型",
      prop: "status",
      data: status.value,
    },
    {
      label: "数据来源",
      prop: "businessType",
      data: businessType.value,
    },
  ];
});
const config = computed(() => {
  return [
    {
      type: "expand",
      attrs: {
        slot: "expand",
        width: 50,
        align: "center",
      },
    },
    {
      attrs: {
        label: "业务公司",
        prop: "companyName",
        width: 110,
      },
    },
    {
      attrs: {
        label: "数据来源",
        prop: "businessType",
        // width: 120,
      },
      render(type) {
        return proxy.dictValueLabel(type, businessType.value);
      },
    },
    {
      attrs: {
        label: "单号",
        prop: "businessCode",
        // width: 160,
      },
    },
    // {
    //   attrs: {
    //     label: "图片",
    //     slot: "pic",
    //     align: "center",
    //     width: 80,
    //   },
    // },
    // {
    //   attrs: {
    //     label: "物品编码",
    //     prop: "productCustomCode",
    //     width: 140,
    //   },
    // },
    // {
    //   attrs: {
    //     label: "物品名称",
    //     prop: "productName",
    //     "min-width": 200,
    //   },
    // },
    // {
    //   attrs: {
    //     label: "规格型号",
    //     prop: "productSpec",
    //     width: 140,
    //   },
    // },
    // {
    //   attrs: {
    //     label: "单位",
    //     prop: "productUnit",
    //     width: 120,
    //   },
    //   render(unit) {
    //     return proxy.dictKeyValue(unit, materialUnitData.value);
    //   },
    // },
    // {
    //   attrs: {
    //     label: "待入库数量",
    //     prop: "quantity",
    //     width: 120,
    //   },
    // },
    {
      attrs: {
        label: "入库状态",
        prop: "status",
        // width: 140,
      },
      render(type) {
        return proxy.dictValueLabel(type, status.value);
      },
    },
    {
      attrs: {
        label: "创建时间",
        prop: "createTime",
        // width: 160,
      },
    },
    {
      attrs: {
        label: "操作",
        width: "80",
        align: "center",
      },
      renderHTML(row) {
        return [
          row.status !== 2
            ? {
                attrs: {
                  label: "入库",
                  type: "primary",
                  text: true,
                },
                el: "button",
                click() {
                  clickOperation(row);
                },
              }
            : {},
        ];
      },
    },
  ];
});

const getList = async (req) => {
  sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
  loading.value = true;
  proxy.post("/stockWait/page", sourceList.value.pagination).then((res) => {
    sourceList.value.data = res.rows;
    let productIds = [];
    for (let i = 0; i < res.rows.length; i++) {
      for (let j = 0; j < res.rows[i].stockWaitDetailsList.length; j++) {
        let ele = res.rows[i].stockWaitDetailsList[j];
        ele.waitQuantity = Number(ele.quantity) - Number(ele.receiptQuantity);
        productIds.push(ele.productId);
      }
    }
    if (productIds && productIds.length > 0) {
      proxy
        .getFileData({
          businessIdList: Array.from(new Set(productIds)),
          getAll: true,
        })
        .then((res) => {
          for (let i = 0; i < sourceList.value.data.length; i++) {
            for (
              let j = 0;
              j < sourceList.value.data[i].stockWaitDetailsList.length;
              j++
            ) {
              let ele = sourceList.value.data[i].stockWaitDetailsList[j];
              for (const key in res) {
                if (ele.productId == key && res[key]) {
                  let list = res[key].filter((x) => x.businessType == "0");
                  ele.fileUrl = list && list.length > 0 ? list[0].fileUrl : "";
                  break;
                }
              }
            }
          }
        });
    }
    sourceList.value.pagination.total = res.total;
    setTimeout(() => {
      loading.value = false;
    }, 200);
  });
};
getList();
const dialogVisible = ref(false);
const loadingDialog = ref(false);
const submit = ref(null);
const formOption = reactive({
  inline: true,
  labelWidth: 100,
  itemWidth: 100,
  rules: [],
});
const formData = reactive({
  data: {},
});
const formConfig = computed(() => {
  return [
    {
      type: "title1",
      title: "待入库信息",
    },
    {
      type: "select",
      prop: "businessType",
      label: "数据来源",
      disabled: true,
      data: businessType.value,
      itemWidth: 25,
    },
    {
      type: "input",
      prop: "businessCode",
      label: "单号",
      itemType: "text",
      disabled: true,
      itemWidth: 25,
    },
    {
      type: "input",
      prop: "purchaseUserName",
      label: "采购员",
      itemType: "text",
      disabled: true,
      itemWidth: 25,
      isShow: rowBusinessType.value == "104",
    },
    {
      type: "date",
      prop: "inOutTime",
      itemType: "date",
      label: "入库日期",
      itemWidth: 25,
      disabled: false,
    },
    {
      type: "treeSelect",
      prop: "companyId",
      label: "业务公司",
      data: proxy.useUserStore().allDict["tree_company_data"],
      propsTreeLabel: "deptName",
      propsTreeValue: "deptId",
      itemWidth: 25,
      disabled: true,
    },
    {
      type: "treeSelect",
      prop: "deptId",
      label: "业务部门",
      data: deptData.value,
      propsTreeLabel: "deptName",
      propsTreeValue: "deptId",
      itemWidth: 25,
    },
    {
      type: "select",
      prop: "inOutUserId",
      label: "入库员",
      required: true,
      filterable: true,
      data: userList.value,
      itemWidth: 25,
    },
    {
      type: "select",
      prop: "warehouseId",
      label: "仓库名称",
      required: true,
      data: warehouseList.value,
      itemWidth: 25,
    },
    {
      type: "upload",
      listType: "text",
      accept: "",
      prop: "fileList",
      label: "上传凭证",
      itemWidth: 100,
      required: true,
    },
    {
      type: "title1",
      title: "入库明细",
    },
    {
      type: "slot",
      slotName: "detail",
      label: "",
    },
  ];
});
const rules = ref({
  companyId: [{ required: true, message: "请选择业务公司", trigger: "change" }],
  warehouseId: [{ required: true, message: "请选择仓库", trigger: "change" }],
  quantity: [{ required: true, message: "请输入入库数量", trigger: "blur" }],
  fileList: [
    { required: true, message: "请上传凭证", trigger: ["blur", "change"] },
  ],
  inOutTime: [{ required: true, message: "请选择入库日期", trigger: "change" }],
  deptId: [{ required: true, message: "请选择业务部门", trigger: "change" }],
  inOutUserId: [{ required: true, message: "请选择入库员", trigger: "change" }],
});
const submitForm = () => {
  submit.value.handleSubmit(() => {
    if (!(formData.data.fileList && formData.data.fileList.length > 0)) {
      return proxy.msgTip("请上传附件", 2);
    }
    for (let i = 0; i < formData.data.stockWaitDetailsList.length; i++) {
      const ele = formData.data.stockWaitDetailsList[i];
      if (Number(ele.quantity) > Number(ele.waitQuantity)) {
        return proxy.msgTip("入库数量不可大于待入库数量", 2);
      }
    }
    loadingDialog.value = true;
    proxy.post("/stockWait/add", formData.data).then(
      () => {
        proxy.msgTip("提交成功", 1);
        dialogVisible.value = false;
        getList();
      },
      (err) => {
        loadingDialog.value = false;
      }
    );
  });
};

const getDeptData = (val) => {
  proxy
    .get("/tenantUser/list", {
      pageNum: 1,
      pageSize: 10000,
      tenantId: proxy.useUserStore().user.tenantId,
      companyId: val,
    })
    .then((res) => {
      userList.value = res.rows.map((item) => {
        return {
          label: item.nickName,
          value: item.userId,
        };
      });
    });

  proxy
    .get("/tenantDept/list", {
      pageNum: 1,
      pageSize: 9999,
      keyword: "",
      ancestors: val,
      tenantId: proxy.useUserStore().user.tenantId,
      // type: 2,
    })
    .then((res) => {
      deptData.value = proxy.handleTree(res.data, "deptId");
    });

  proxy
    .post("/warehouse/page", {
      pageNum: 1,
      pageSize: 999,
      companyId: val,
    })
    .then((res) => {
      if (res.rows && res.rows.length > 0) {
        warehouseList.value = res.rows.map((item) => {
          return {
            label: item.name,
            value: item.id,
          };
        });
      }
    });
};
const rowBusinessType = ref("");
const clickOperation = (row) => {
  rowBusinessType.value = row.businessType;
  if (row.companyId) {
    getDeptData(row.companyId);
  }
  formData.data = {
    id: row.id,
    companyId: row.companyId,
    businessType: row.businessType + "",
    businessCode: row.businessCode,
    purchaseUserName: row.purchaseUserName,
    warehouseId: row.warehouseId || "",
    stockWaitDetailsList: row.stockWaitDetailsList.map((x) => ({
      ...x,
      needQuantity: x.quantity,
      quantity: null,
    })),
    fileList: [],
    inOutTime: moment().format("YYYY-MM-DD"),
    inOutUserId: row.inOutUserId || proxy.useUserStore().user.userId,
  };
  if (
    proxy.useUserStore().currentCompany == proxy.useUserStore().user.ofCompanyId
  ) {
    formData.data.deptId = proxy.useUserStore().user.deptId;
  }
  loadingDialog.value = false;
  dialogVisible.value = true;
};
</script>

<style lang="scss" scoped>
.tenant {
  padding: 20px;
}
::v-deep(.el-input-number .el-input__inner) {
  text-align: left;
}
:deep(.bom-table .el-table__body-wrapper .el-table__body .el-table__row) {
  background: #f4f4f5 !important;
}
</style>