byte-sailing-new/src/views/purchaseSales/stockManage/inventory/index.vue

<template>
  <div class="tenant">
    <!-- <Banner /> -->
    <div class="content">
      <byTable
        :source="sourceList.data"
        :pagination="sourceList.pagination"
        :config="config"
        :loading="loading"
        highlight-current-row
        :selectConfig="selectConfig"
        :table-events="{
          //element talbe事件都能传
          select: select,
        }"
        :action-list="[
          {
            text: '发起盘点',
            action: () => openModal('add'),
          },
        ]"
        @get-list="getList"
      >
        <template #code="{ item }">
          <div
            style="cursor: pointer; color: #409eff"
            @click="handleClickCode(item)"
          >
            {{ item.code }}
          </div>
        </template>
      </byTable>
    </div>
    <el-dialog
      :title="modalType == 'add' ? '发起盘点' : '盘点详情'"
      v-model="dialogVisible"
      width="800"
      v-loading="loading"
      destroy-on-close
    >
      <byForm
        :formConfig="formConfig"
        :formOption="formOption"
        v-model="formData.data"
        :rules="rules"
        ref="byform"
      >
        <template #products>
          <div style="width: 100%">
            <el-button
              type="primary"
              @click="openProduct = true"
              style="margin-bottom: 10px"
              v-if="modalType == 'add'"
              :disabled="!formData.data.warehouseId"
            >
              添加物品
            </el-button>
            <el-table :data="formData.data.list" :row-class-name="changeClass">
              <el-table-column prop="productCode" label="物品编码" />
              <el-table-column prop="productName" label="物品名称" />
              <el-table-column prop="productUnit" label="单位" />
              <el-table-column prop="quantity" label="库存数量" />
              <el-table-column
                prop="checkQuantity"
                label="盘点数量"
                min-width="150"
              >
                <template #default="{ row, $index }">
                  <el-form-item
                    :prop="'list.' + $index + '.checkQuantity'"
                    :rules="rules.checkQuantity"
                    :inline-message="true"
                  >
                    <el-input-number
                      v-model="row.checkQuantity"
                      :precision="4"
                      :controls="false"
                      :min="0"
                      @change="() => handleChange($index)"
                    />
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column prop="result" label="盘点结果" />
              <el-table-column
                prop="zip"
                label="操作"
                width="100"
                v-if="modalType == 'add'"
              >
                <template #default="{ $index }">
                  <el-button type="primary" link @click="handleRemove($index)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </template>
      </byForm>
      <template #footer v-if="modalType == 'add'">
        <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>
    <el-dialog
      v-model="openProduct"
      title="选择物品"
      width="70%"
      append-to-body
    >
      <SelectGoods
        @cancel="openProduct = false"
        @pushGoods="pushGoods"
      ></SelectGoods>
    </el-dialog>
  </div>
</template>
  
<script setup>
/* eslint-disable vue/no-unused-components */
import { ElMessage, ElMessageBox } from "element-plus";
import byTable from "@/components/byTable/index";
import byForm from "@/components/byForm/index";
import { computed, defineComponent, ref } from "vue";
import useUserStore from "@/store/modules/user";
import SelectGoods from "@/components/product/SelectGoods";

const loading = ref(false);
const submitLoading = ref(false);
const sourceList = ref({
  data: [],
  pagination: {
    total: 3,
    pageNum: 1,
    pageSize: 10,
  },
});
let dialogVisible = ref(false);
let openProduct = ref(false);

let roomDialogVisible = ref(false);
let modalType = ref("add");
let rules = ref({
  checkQuantity: [
    { required: true, message: "请输入盘点数量", trigger: "blur" },
  ],
  warehouseId: [
    { required: true, message: "请选择盘点仓库", trigger: "change" },
  ],
});
const { proxy } = getCurrentInstance();
const selectConfig = reactive([
  {
    label: "盘点结论",
    prop: "result",
    data: [
      {
        label: "正常",
        value: "0",
      },

      {
        label: "异常",
        value: "1",
      },
    ],
  },
]);

const config = computed(() => {
  return [
    {
      attrs: {
        label: "盘点单号",
        prop: "code",
        slot: "code",
      },
    },
    {
      attrs: {
        label: "仓库名称",
        prop: "warehouseName",
      },
    },
    {
      attrs: {
        label: "盘点时间",
        prop: "createTime",
      },
    },
    {
      attrs: {
        label: "盘点人",
        prop: "userName",
      },
    },
    {
      attrs: {
        label: "盘点结论",
        prop: "result",
      },
      render(result) {
        return result == 0 ? "正常" : "异常";
      },
    },
    {
      attrs: {
        label: "盘点物品数",
        prop: "totalNum",
      },
    },
    {
      attrs: {
        label: "正常物品数",
        prop: "normalNum",
      },
    },
    {
      attrs: {
        label: "异常物品数",
        prop: "anomalyNum",
      },
    },
    // {
    //   attrs: {
    //     label: "操作",
    //     width: "200",
    //     align: "right",
    //   },
    //   // 渲染 el-button，一般用在最后一列。
    //   renderHTML(row) {
    //     return [
    //       {
    //         attrs: {
    //           label: "接收",
    //           type: "primary",
    //           text: true,
    //         },
    //         el: "button",
    //         click() {
    //           getDtl(row);
    //         },
    //       },
    //       {
    //         attrs: {
    //           label: "打印",
    //           type: "primary",
    //           text: true,
    //         },
    //         el: "button",
    //         click() {
    //           getDtl(row);
    //         },
    //       },
    //     ];
    //   },
    // },
  ];
});

let formData = reactive({
  data: {},
  treeData: [],
});
const formOption = reactive({
  inline: true,
  labelWidth: 100,
  itemWidth: 100,
  rules: [],
});
const byform = ref(null);
const treeData = ref([]);
const formConfig = reactive([
  {
    type: "select",
    prop: "warehouseId",
    label: "仓库名称",
    itemWidth: 33,
    isLoad: {
      url: "/warehouse/page",
      req: {
        pageNum: 1,
        pageSize: 9999,
      },
      labelKey: "name",
      labelVal: "id",
      method: "post",
      resUrl: "rows",
    },
  },
  {
    type: "title",
    title: "盘点明细",
  },
  {
    type: "slot",
    slotName: "products",
    label: "",
  },
]);
const getList = async (req) => {
  sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
  loading.value = true;
  proxy
    .post("/stockCheck/page", sourceList.value.pagination)
    .then((message) => {
      console.log(message);
      sourceList.value.data = message.rows;
      sourceList.value.pagination.total = message.total;
      setTimeout(() => {
        loading.value = false;
      }, 200);
    });
};
const openModal = () => {
  dialogVisible.value = true;
  modalType.value = "add";
  formConfig[0].disabled = false;
  formData.data = {
    list: [],
  };
};

const submitForm = () => {
  console.log(byform.value);
  byform.value.handleSubmit((valid) => {
    //    const list = formData.data.list;
    // for (let i = 0; i < list.length; i++) {
    //   const e = list[i];

    //   if (e.groupNum > e.canSum) {
    //     return ElMessage({
    //       message: "组合数量不可大于可组合数量！",
    //       type: "info",
    //     });
    //   }
    // }
    submitLoading.value = true;
    proxy.post("/stockCheck/" + modalType.value, formData.data).then(
      (res) => {
        ElMessage({
          message: modalType.value == "add" ? "添加成功" : "编辑成功",
          type: "success",
        });
        dialogVisible.value = false;
        submitLoading.value = false;
        getList();
      },
      (err) => (submitLoading.value = false)
    );
  });
};

const getDtl = (row) => {
  modalType.value = "edit";
  proxy.post("/productSpu/detail", { id: row.id }).then((res) => {
    res.list = res.productInfoList;
    formData.data = res;
    dialogVisible.value = true;
  });
};

getList();

const handleSelect = (row) => {
  const flag = formData.data.list.some((x) => x.id === row.id);
  if (flag)
    return ElMessage({
      message: "该物品已选择",
      type: "info",
    });
  formData.data.list.push({
    name: row.name,
    code: row.code,
    id: row.id,
  });
  return ElMessage({
    message: "选择成功",
    type: "success",
  });
};

const pushGoods = (goods) => {
  const arr = goods.map((x) => ({
    productId: x.id,
    quantity: "",
    checkQuantity: "",
    productName: x.name,
    productCode: x.code,
    productUnit: x.unit,
  }));
  const ids = arr.map((x) => x.productId);
  if (formData.data.warehouseId) {
    proxy
      .post("/stock/pageByWarehouse", {
        id: formData.data.warehouseId,
        productIds: ids,
      })
      .then((res) => {
        const productList = res.rows;
        for (let i = 0; i < productList.length; i++) {
          const e = productList[i];
          for (let j = 0; j < arr.length; j++) {
            const jele = arr[j];
            if (e.productId === jele.productId) {
              formData.data.list.push({ ...jele, quantity: e.quantity });
            }
          }
        }
      });
  }
  return ElMessage({
    message: "添加成功,已为你自动过滤库存数量为0的数据 !",
    type: "success",
  });
};

const handleRemove = (index) => {
  formData.data.list.splice(index, 1);
  return ElMessage({
    message: "删除成功",
    type: "success",
  });
};

// watchEffect(() => {
//   const list = formData.data.list;
//   if (
//     formData.data.warehouseId &&
//     list.length > 0 &&
//     modalType.value == "add"
//   ) {
//     proxy
//       .post("/stock/pageByWarehouse", {
//         id: formData.data.warehouseId,
//         productIds: list.map((x) => x.productId),
//       })
//       .then((res) => {
//         const productList = res.rows;
//         for (let i = 0; i < list.length; i++) {
//           const e = list[i];
//           e.quantity = 0;
//           for (let j = 0; j < productList.length; j++) {
//             if (e.productId == x.productId) {
//               e.quantity = x.quantity;
//             }
//           }
//         }
//         handleChange();
//       });
//   }
// });

const handleChange = (index) => {
  if (!formData.data.list[index].quantity) return;
  if (
    formData.data.list[index].quantity > formData.data.list[index].checkQuantity
  ) {
    formData.data.list[index].result = "盘亏";
  }
  if (
    formData.data.list[index].quantity ==
    formData.data.list[index].checkQuantity
  ) {
    formData.data.list[index].result = "正常";
  }
  if (
    formData.data.list[index].quantity < formData.data.list[index].checkQuantity
  ) {
    formData.data.list[index].result = "盘盈";
  }
};

const changeClass = ({ row }) => {
  if (row.result == "盘亏") {
    return "redClass";
  } else if (row.result == "盘盈") {
    return "greenClass";
  }
};

const handleClickCode = (row) => {
  modalType.value = "edit";
  proxy.post("/stockCheck/detail", { id: row.id }).then((res) => {
    formConfig[0].disabled = true;
    res.list.forEach((x) => {
      if (Number(x.checkQuantity) > Number(x.quantity)) {
        x.result = "盘盈";
      }
      if (Number(x.checkQuantity) < Number(x.quantity)) {
        x.result = "盘亏";
      }
      if (Number(x.checkQuantity) == Number(x.quantity)) {
        x.result = "正常";
      }
    });
    formData.data = {
      warehouseId: row.warehouseId,
      list: res.list,
    };
    dialogVisible.value = true;
  });
};
</script>
  
<style lang="scss" scoped>
.tenant {
  padding: 20px;
}
</style>
<style >
.redClass {
  color: #f54a45 !important;
}
.greenClass {
  color: #39c55a !important;
}
</style>