aiot-app/pages/purchasingManage/purchaseNeedManage/add.vue

<template>
  <view class="mainBox">
    <uni-nav-bar
      background-color="#157A2C"
      color="#fff"
      fixed="true"
      statusBar="true"
      left-icon="back"
      :title="this.form.id ? '修改采购需求' : '新建采购需求'"
      @clickLeft="back"
    >
    </uni-nav-bar>
    <u-subsection
      :list="list"
      :current="current"
      @change="sectionChange"
    ></u-subsection>
    <u-cell-group v-show="current == 0">
      <u-cell :title="'需求类型'" arrow-direction="down">
        <view slot="title" style="display: flex; align-items: center">
          <text class="required-mark">*</text>
          需求类型
        </view>
        <uni-data-picker
          v-model="form.sourceType"
          slot="value"
          placeholder="请选择"
          :localdata="requirementSourceType"
          @change="sourceCodeOnchange"
        >
        </uni-data-picker>
      </u-cell>
      <u-cell :title="'需求单名称'" arrow-direction="down">
        <view slot="title" style="display: flex; align-items: center">
          <text class="required-mark">*</text>
          需求单名称
        </view>
        <u--input
          slot="value"
          placeholder="请输入"
          border="surround"
          v-model="form.requirementName"
        ></u--input>
      </u-cell>
      <u-cell :title="'需求部门'" arrow-direction="down">
        <view slot="title" style="display: flex; align-items: center">
          <text class="required-mark">*</text>
          需求部门
        </view>
        <!-- <u--input slot="value" placeholder="请输入" border="surround" v-model="form.requireDeptId"></u--input> -->
        <u--input
          slot="value"
          @click.native="classification"
          style="flex: 1"
          border="surround"
          placeholder="请选择需求部门"
          v-model="form.requireDeptName"
        >
        </u--input>
      </u-cell>
      <u-cell :title="'需求人'" arrow-direction="down">
        <view slot="title" style="display: flex; align-items: center">
          <text class="required-mark">*</text>
          需求人
        </view>
        <!-- <u--input slot="value" placeholder="请输入" border="requireUserId" v-model="form.name"></u--input> -->
        <u--input
          slot="value"
          style="flex: 1"
          border="surround"
          v-model="form.requireUserName"
          placeholder="请选择需求人"
          @click.native="openSelector"
        >
        </u--input>
      </u-cell>
      <u-cell
        v-if="form.sourceType == 1"
        title="销售合同"
        arrow-direction="down"
      >
        <u--input
          slot="value"
          style="flex: 1"
          placeholder="请选择销售合同"
          border="surround"
          v-model="form.saleContractNo"
          @click.native="selectContractShow"
        ></u--input>
      </u-cell>
      <u-cell
        v-if="form.sourceType == 1"
        title="销售订单"
        arrow-direction="down"
      >
        <!-- <u--input slot="value" placeholder="请输入" border="requireUserId" v-model="form.name"></u--input> -->
        <u--input
          slot="value"
          style="flex: 1"
          border="surround"
          v-model="form.saleOrderNo"
          placeholder="请选择销售订单"
          @click.native="slectOrderShow"
        >
        </u--input>
      </u-cell>
      <u-cell title="是否接受拆单" arrow-direction="down">
        <uni-data-picker
          v-model="form.acceptUnpack"
          slot="value"
          placeholder="请选择"
          :localdata="acceptUnpackList"
        >
        </uni-data-picker>
      </u-cell>
      <u-cell title="'用途" arrow-direction="down">
        <view slot="title" style="display: flex; align-items: center">
          <text class="required-mark">*</text>
          用途
        </view>
        <u--textarea
          slot="value"
          placeholder="请输入"
          border="surround"
          v-model="form.useTo"
        ></u--textarea>
      </u-cell>
      <u-cell title="附件" arrow-direction="down">
        <view slot="value" style="display: flex; align-items: center">
          <fileMain v-model="form.fileId"></fileMain>
        </view>
      </u-cell>
	  <!-- <u-cell title="附件" arrow-direction="down">
        <view slot="value" style="display: flex; align-items: center">
          <fileMain v-model="files"></fileMain>
        </view>
      </u-cell> -->
      <u-cell title="备注" arrow-direction="down">
        <u--textarea
          slot="value"
          placeholder="请输入"
          border="surround"
          v-model="form.remark"
        ></u--textarea>
      </u-cell>
    </u-cell-group>

    <view class="footerButton">
      <u-button type="default" text="返回" @click="back"></u-button>
      <u-button type="primary" @click="save" text="保存"></u-button>
    </view>
    <produceList
      ref="produceListRef"
      v-show="current == 1"
      :isTemporary="true"
    ></produceList>
    <ba-tree-picker
      ref="treePicker"
      key="verify"
      :multiple="false"
      @select-change="confirm"
      title="选择部门"
      :selectedData="selectedData"
      :localdata="classificationList"
      valueKey="id"
      textKey="name"
      childrenKey="children"
    />
    <search-select
      ref="selector"
      v-model="form.requireUserId"
      :data-list="executorList"
      title="选择需求人"
      @change="onClose"
    >
    </search-select>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
import { getByCode } from "@/api/pda/common.js";
import searchSelect from "@/pages/salesServiceManagement/accessory/components/searchSelect.vue";
import produceList from "../components/produceList.vue";
import fileMain from "@/pages/doc/index.vue";
import { requirementSourceType } from "@/enum/dict";
import { listOrganizations } from "@/api/salesServiceManagement/workOrder/index.js";
import { toTreeData } from "@/utils/utils.js";
import { getUserPage } from "@/api/common.js";
import {
  getTableList,
  getSaleOrderDetail,
} from "@/api/saleManage/saleorder/index";
import {
  getDetail,
  addPurchaseNeedManage,
  UpdateInformation,
} from "@/api/purchasingManage/purchaseNeedManage.js";
import { getInventoryTotal } from "@/api/pda/workOrder";
import { contactQueryByCategoryIdsAPI } from "@/api/warehouseManagement/index";
export default {
  components: {
    produceList,
    fileMain,
    searchSelect,
  },
  data() {
    return {
      list: ["基本信息", "需求清单"],
      acceptUnpackList: [
        { text: "接受", value: 1 },
        { text: "不接受", value: 0 },
      ],
      current: 0,
      show: false,
      requirementSourceType,
      classificationList: [],
      isUpdate: false,
      purchase_origin: [],
	  files: [],
      form: {
        id: "",
        receiveDate: null,
        remark: null,
        requireDeptId: "",
        requireDeptName: "",
        requireUserId: "",
        requireUserName: "",
        sourceCode: "",
        sourceId: "",
        sourceType: "",
        sourceTypeName: "",
        requirementName: "",
        saleContractName: "",
        saleContractNo: "",
        saleContractId: "",
        saleOrderId: "",
        saleOrderNo: "",
        files: [], //附件集合
        acceptUnpack: 1,
		detailList: [],
        fileId: [],
      },
      business_opport_code: [],
      linkList: [],
      selectedData: [], // 使用部门绑定值
      executorList: [],
    };
  },

  created() {
    this.getByCode();
    //选择合同回调
    uni.$off("setContractList");
    uni.$on("setContractList", async (data) => {
      if (data && data.length > 0) {
        this.form = Object.assign({}, this.form, {
          saleContractId: data[0].id,
          saleContractName: data[0].contractName,
          saleContractNo: data[0].contractNo,
        });
        console.log("ddd~~~", data[0]);
        this.getSaleOrderList(data[0].id);
      }
    });

    uni.$off("setSaleOrder");
    uni.$on("setSaleOrder", async (data) => {
      if (data && data.length > 0) {
        this.form = Object.assign({}, this.form, {
          saleContractId: "",
          saleContractName: "",
          saleContractNo: "",
          saleOrderId: data[0].id,
          saleOrderNo: data[0].orderNo,
        });
        this.getSaleOrderDetail(this.form.saleOrderId);
      }
    });
  },
  onLoad(data) {
    this.getTreeList();
    if (data && data.id) {
      this.isUpdate = true;
      getDetail(data.id).then(async (res) => {
        if (res.fileId) {
          res.fileId = JSON.parse(res.fileId);
        } else {
          res.fileId = [];
        }

        if (res.requireDeptId) {
          this.getUserList(res.requireDeptId);
        }
        let validItems = res.detailList.filter((item) => item.productCode);
        let productIds = validItems.map((item) => item.productId);
        let productCodes = validItems.map((item) => item.productCode);

        // 批量获取库存和供应商信息
        let inventoryTotalList = [];
        let supplierObj = {};
        if (productIds.length > 0) {
          inventoryTotalList = await getInventoryTotal(productCodes);
          supplierObj = await contactQueryByCategoryIdsAPI({
            categoryIds: productIds,
          });

          // 更新每个产品的供应商和库存信息
          validItems.forEach((item, index) => {
            // 找到对应的索引位置
            let actualIndex = res.detailList.findIndex(
              (i) => i.productCode === item.productCode
            );
            if (actualIndex !== -1) {
              this.$set(
                res.detailList[actualIndex],
                "supplierList",
                supplierObj[item.productId]?.map((i) => ({
                  ...i,
                  text: i.name,
                  value: i.id,
                })) || []
              );

              let find =
                inventoryTotalList.find(
                  (key) => key.code == item.productCode
                ) || {};
              this.$set(
                res.detailList[actualIndex],
                "availableCountBase",
                find.availableCountBase
              );
            }
          });
        }

        // 处理数据格式
        res.detailList = res.detailList.map((item) => ({
          ...item,
		//   files: item.files || [],
		//   technicalDrawings: item.technicalDrawings || [],
          provenanceName: item.provenance
            ? this.getProvenance(item.provenance)
            : "",
          // modelKey: item.modelKey?.split(',') || [],
          // colorKey: item.colorKey?.split(',') || [],
          packageDispositionList:
            item.packageDispositionList?.map((i) => ({
              ...i,
              text: i.conversionUnit,
              value: i.id,
            })) || [],
        }));
        this.$set(this, "form", res);
        this.$nextTick(() => {
          
          this.$refs.produceListRef.init(res.detailList);
        });
        // }, 300)
      });
    } else {
      const userInfo = uni.getStorageSync("userInfo");
      this.$set(this.form, "requireUserId", userInfo.userId);
      this.$set(this.form, "requireUserName", userInfo.name);
      this.$set(this.form, "requireDeptId", userInfo.groupId);
      this.$set(this.form, "requireDeptName", userInfo.groupName);
    }
  },
  onUnload() {
    uni.$off("setContractList");
    uni.$off("setSaleOrder");
  },
  methods: {
    getProvenance(item) {
      console.log("getProvenance~~~~~", item);
      // try {
      // 检查item和provenance是否存在
      if (!item) {
        return "";
      }

      let arr = item;

      if (!Array.isArray(arr)) {
        console.log("arr is not array, convert to array");
        arr = arr.split(",");
      }

      return arr && arr.length
        ? arr
            .map((i) => {
              return this.purchase_origin.find((p) => p.value == i)?.text;
            })
            .join(",")
        : "";
    },
    async getSaleOrderList(contractId) {
      let res = await getTableList({
        pageNum: 1,
        size: 10,
        contractId,
      });
      this.form.saleOrderId = res.list[0]?.id;
      this.form.saleOrderNo = res.list[0]?.orderNo;
      this.getSaleOrderDetail(this.form.saleOrderId);
    },
    async getSaleOrderDetail(id) {
      const data = await getSaleOrderDetail(id);
      data.productList.forEach((item) => {
        item.expectReceiveDate = item.produceDeliveryDeadline;
        item.arrivalWay = 1;
        item["packageDispositionList"] =
          item.packageDispositionList?.map((i) => {
            return {
              ...i,
              text: i.conversionUnit,
              value: i.id,
            };
          }) || [];
      });

      this.$nextTick(() => {
        this.$refs.produceListRef.init(data.productList);
      });
    },
    async getTreeList() {
      const data = await listOrganizations({});
      let treeList = toTreeData({
        data: data || [],
        idField: "id",
        parentIdField: "parentId",
      });
      this.classificationList = treeList;
    },
    // 打开部门弹窗
    classification() {
      this.$refs.treePicker._show();
    },
    // 使用部门选择
    confirm(id, name) {
      this.form.requireDeptName = name;
      this.form.requireDeptId = id[0];
      this.form.requireUserId = "";
      this.form.requireUserName = "";
      this.executorList = [];
      this.getUserList(id[0]);
      this.$refs.selector.clearSearchText();
    },
    // 打开需求人弹窗
    openSelector() {
      this.$refs.selector.open();
    },
    // 获取需求人数据
    async getUserList(id) {
      let params = {
        pageNum: 1,
        size: -1,
        groupId: id,
      };
      try {
        const res = await getUserPage(params);
        let list =
          res.list &&
          res.list.map((el) => {
            return {
              text: el.name,
              value: el.id,
            };
          });
        this.executorList = list;
      } catch (error) {
        this.executorList = [];
      }
    },
    // 需求人选择
    onClose(item) {
      this.form.requireUserName = item.text;
    },
    //选择合同
    selectContractShow() {
      console.log("ddd~~~");
      uni.navigateTo({
        url: "/pages/purchasingManage/components/selectContract?isAll=" + 2,
      });
    },
    slectOrderShow() {
      uni.navigateTo({
        url: "/pages/purchasingManage/components/selectSaleOrder?isAll=" + 2,
      });
    },
    getByCode() {
      const codeS = ["business_opport_code", "purchase_origin"];
      codeS.forEach(async (code) => {
        const codeValue = await getByCode(code);
        this[code] = codeValue.map((item) => {
          const key = Object.keys(item)[0];
          return {
            value: key,
            text: item[key],
          };
        });
      });
    },
    sourceCodeOnchange(e) {
      const value = e.detail.value;
      this.form.sourceCode = value.map((item) => item.value).toString();
      this.form.sourceTypeName = value.map((item) => item.text).toString();
      this.form.saleOrderId = "";
      this.form.saleOrderNo = "";
      this.form.saleContractNo = "";
      this.form.saleContractId = "";
      this.form.saleContractName = "";
    },

    radioChange(e) {
      this.form.pricingWay = e.detail.value;
      this.$nextTick(() => {
        this.$refs.produceListRef.getTotalPrice();
      });
    },
    sectionChange(index) {
      this.current = index;
    },

    async save() {
      try {
        if (!this.form.sourceType) {
          this.$refs.uToast.show({
            type: "error",
            message: "请选择需求类型",
          });
          return;
        }
        if (!this.form.requirementName) {
          this.$refs.uToast.show({
            type: "error",
            message: "请输入需求名称",
          });
          return;
        }
        if (!this.form.requireDeptName) {
          this.$refs.uToast.show({
            type: "error",
            message: "请选择需求部门",
          });
          return;
        }

        if (!this.form.requireUserName) {
          this.$refs.uToast.show({
            type: "error",
            message: "请选择需求人",
          });
          return;
        }

        const detailList = this.$refs.produceListRef.getValue();

        if (detailList.length == 0) {
          this.$refs.uToast.show({
            type: "error",
            message: "产品清单不能为空",
          });
          return;
        }

        let isArrivalBatch = false;
        let isError = false;
        detailList.forEach((v) => {
          if (
            v.arrivalWay == 2 &&
            (!v.arrivalBatch || v.arrivalBatch.length == 0)
          ) {
            isArrivalBatch = true;
          }
          if (
            !v.purchaseCount ||
            !v.productName ||
            !v.arrivalWay ||
            (!v.expectReceiveDate && v.arrivalWay == 1)
          ) {
            isError = true;
          }
        });
        if (isError) {
          uni.showToast({ icon: "none", title: "请完善产品信息" });
          return;
        }
        if (isArrivalBatch) {
          uni.showToast({ icon: "none", title: "请设置分批时间" });
          return;
        }

        uni.showLoading({
          title: "加载中",
        });

        const data = {
          ...this.form,
          detailList: detailList,
        };

        data.fileId = JSON.stringify(data.fileId);

        data.detailList.forEach((item) => {
          if (item.provenance && typeof item.provenance == "string") {
            item.provenance = item.provenance.split(",");
          }
        });

        console.log("data~~~", data);

        const requestApi = this.isUpdate
          ? UpdateInformation
          : addPurchaseNeedManage;

        requestApi(data)
          .then((res) => {
            uni.hideLoading();
            this.back();
          })
          .catch((e) => {
            uni.hideLoading();
          });
      } catch (error) {
        uni.hideLoading();
        console.log(error, "error");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.required-mark {
  color: #ff3333;
  margin-right: 4rpx;
}

/deep/.u-cell__body__content {
  flex: none;
  margin-right: 16rpx;
}

.mainBox {
  padding-bottom: 84rpx;
}

.footerButton {
  width: 100%;
  height: 84rpx;
  display: flex;
  position: fixed;
  bottom: 0;
  z-index: 10;
  background-color: #fff;

  /deep/.u-button {
    height: 100%;
  }

  > view {
    flex: 1;
  }
}

// /deep/.u-button {
// 	// height: 100%;
// }

/deep/.u-subsection__item__text {
  font-size: 28rpx !important;
}
/deep/.uni-input-placeholder {
  font-size: 28rpx !important;
}
/deep/.selected-item {
  font-size: 28rpx !important;
}
/deep/.uni-input-input {
  font-size: 28rpx !important;
}
</style>