freight-web/src/pagesShipment/form/settlementForm.vue

<template>
  <view class="c-card">
    <u-form
      labelPosition="left"
      :model="model1"
      :rules="rules"
      ref="form"
      :labelWidth="80"
      :labelStyle="{ padding: '0rpx 10rpx' }"
      :errorType="'border-bottom'"
    >
      <block v-for="(item, index) in formAttrList" :key="index">
        <u-form-item
          :prop="`order.${item.key}`"
          :label="item.name"
          :required="item.required"
          @click="item.fn"
          v-if="item.key !== 'paymentMethodName'"
          :borderBottom="false"
        >
          <u-textarea
            v-if="item.type === 'textarea'"
            v-model="(model1.order as any)[(item.key as any)]"
            :placeholder="`请输入${item.name}`"
          ></u-textarea>
          <u-input
            v-if="item.type === 'select' || item.type === 'input'"
            v-model="(model1.order as any)[(item.key as any)]"
            :placeholder="`请${item.type === 'select' ? '选择' : '输入'}${
              item.name
            }`"
            :clearable="true"
            :customStyle="{}"
            border="none"
            :disabled="item.disabled"
            @change="(e:any) => {handleInput(e, item)}"
          >
            <template #suffix>
              <text v-if="item.key === 'subtractNum'">
                {{ model1.order.buttonType === 0 ? item.unit : "%" }}
              </text>
              <text v-else>
                {{ item.unit }}
              </text>
            </template>
          </u-input>
          <uni-file-picker
            v-if="item.type === 'upload'"
            v-model="model1.order.fileLists"
            limit="9"
            title="最多可上传9张图片"
            :auto-upload="false"
            fileMediatype="image"
            mode="grid"
            ref="filesRef"
            @delete="handleDelete"
          ></uni-file-picker>

          <u-radio-group
            v-if="item.type === 'radio'"
            v-model="(model1.order as any)[item.key]"
            placement="row"
          >
            <u-radio
              v-for="(c, index) in item.child"
              :key="index"
              activeColor="#00DCEE"
              :label="c.name"
              :name="c.id"
              :customStyle="{ marginRight: '10px' }"
            ></u-radio>
          </u-radio-group>

          <template #right v-if="item.type === 'select'">
            <u-icon name="arrow-right"></u-icon>
          </template>
        </u-form-item>
        <!-- 控制结算方式是否显示 -->
        <u-form-item
          :prop="`order[${item.key}]`"
          :label="item.name"
          :required="item.required"
          @click="item.fn"
          v-if="
            item.key === 'paymentMethodName' &&
            model1.scaleStatusBtnType === ScaleStatusBtnType.ShipmentPay
          "
        >
          <u-input
            v-if="item.type === 'select' || item.type === 'input'"
            v-model="(model1.order as any)[(item.key as any)]"
            :placeholder="`请${item.type === 'select' ? '选择' : '输入'}${
              item.name
            }`"
            :clearable="true"
            :customStyle="{}"
            border="none"
            @change="(e:any) => {handleInput(e, item)}"
          >
            <template #suffix>
              <text v-if="item.key === 'subtractNum'">
                {{ model1.order.buttonType === 0 ? item.unit : "%" }}
              </text>
              <text v-else>
                {{ item.unit }}
              </text>
            </template>
          </u-input>
          <template #right v-if="item.type === 'select'">
            <u-icon name="arrow-right"></u-icon>
          </template>
        </u-form-item>
      </block>
    </u-form>
    <block v-for="(item, index) in formAttrList" :key="index">
      <u-action-sheet
        v-if="item.type === 'select'"
        :actions="contrlModalParams[item.childKey].list"
        :title="contrlModalParams[item.childKey].title"
        :show="contrlModalParams[item.childKey].isShow"
        @select="(v: any) => handleSelect(item.childKey, v)"
        @close="contrlModalParams[item.childKey].isShow = false"
        :closeOnClickAction="true"
      ></u-action-sheet>
    </block>
  </view>
  <view class="btn-box">
    <u-button type="primary" text="保存" @click="save()"></u-button>
  </view>
</template>
<script setup lang="ts">
import { PictureApi, ShipmentApi } from "@/services";
import type { ComType } from "@/types/global";
import { formatDate } from "@/utils";
import {
  ImagesType,
  OrderType,
  ScaleStatus,
  ScaleStatusBtnType,
} from "@/utils/enum";
import valid from "@/utils/validate";
import { onLoad } from "@dcloudio/uni-app";
// 毛重 皮重 过磅净重 结算单价 结算重量 预估总价 结算金额校验
const handleInput = (e: any, item: any) => {
  if (
    [
      "settlementGross",
      "settlementTare",
      "settlementNet",
      "unitPrice",
      "settlementWeight",
      "estimatePrice",
      "totalPrice",
      "freight",
      "incidentals",
      "subtractNum",
    ].indexOf(item.key) > -1
  ) {
    const temp = e?.replace(valid.valid_decimal.pattern, "");
    if (item.key === "subtractNum") {
      if (
        model1.order.buttonType === 1 &&
        (parseInt(temp) > 100 || parseInt(temp) < 0)
      ) {
        uni.showToast({
          title: `${item.name}正确范围是0-100`,
          icon: "none",
        });
      }
    }
    setTimeout(() => {
      model1.order[item.key] = temp;
    }, 100);
  }
};
const model1 = reactive<{
  scaleStatusBtnType: number;
  order: Shipment;
}>({
  scaleStatusBtnType: 2,
  order: {
    id: "",
    splTime: "",
    takeType: 1,
    fileLists: [],
    buttonType: 0,
    deliveryMethod: 0,
    settlementGross: 0,
    settlementTare: 0,
    settlementWeight: 0,
    unitPrice: 0,
    estimatePrice: 0,
    subtractNum: 0,
  },
});
const rules = reactive({
  "order.settlementGross": {
    type: "number",
    required: true,
    message: "结算毛重为空或输入错误",
    trigger: ["blur", "change"],
  },
  "order.settlementTare": {
    type: "number",
    required: true,
    message: "结算皮重为空或输入错误",
    trigger: ["blur", "change"],
  },
  "order.settlementNet": {
    type: "number",
    required: true,
    message: "过磅净重为空或输入错误",
    trigger: ["blur", "change"],
  },
  "order.unitPrice": {
    type: "number",
    required: true,
    message: "结算单价为空或输入错误",
    trigger: ["blur", "change"],
  },
  "order.settlementWeight": {
    type: "number",
    required: true,
    message: "结算重量为空或输入错误",
    trigger: ["blur", "change"],
  },
  "order.estimatePrice": {
    type: "number",
    required: true,
    message: "预估总价为空或输入错误",
    trigger: ["blur", "change"],
  },
  "order.totalPrice": {
    type: "number",
    required: true,
    message: "结算金额为空或输入错误",
    trigger: ["blur", "change"],
  },
});
const contrlModalParams = reactive<ComType>({
  select: {
    isShow: false,
    title: "标题",
    list: [
      {
        name: "微信",
        key: 3,
      },
      {
        name: "现金",
        key: 1,
      },
      {
        name: "支付宝",
        key: 4,
      },
      {
        name: "转账",
        key: 2,
      },
    ],
  },
});

const formAttrList = reactive<ComType>([
  {
    name: "毛重",
    key: "settlementGross",
    type: "input",
    required: true,
    unit: "kg",
    fn: () => {},
    isNumber: true,
  },
  {
    name: "皮重",
    key: "settlementTare",
    type: "input",
    required: true,
    unit: "kg",
    fn: () => {},
    isNumber: true,
  },
  {
    name: "过磅净重",
    key: "settlementNet",
    type: "input",
    required: true,
    disabled: true,
    unit: "kg",
    fn: () => {},
    isNumber: true,
  },
  {
    name: "结算单价",
    key: "unitPrice",
    type: "input",
    required: true,
    unit: "元/kg",
    fn: () => {},
    isNumber: true,
  },
  // {
  //   name: "验货净重",
  //   key: "number",
  //   type: "input",
  //   required: true,
  //   unit: "件",
  // },
  {
    name: "扣杂",
    key: "buttonType",
    type: "radio",
    child: [
      {
        id: 0,
        name: "按固定重量",
      },
      {
        id: 1,
        name: "按百分比",
      },
    ],
  },
  {
    name: "杂质扣除",
    key: "subtractNum",
    type: "input",
    unit: "KG",
    isNumber: true,
  },
  {
    name: "结算重量",
    key: "settlementWeight",
    type: "input",
    required: true,
    disabled: true,
    unit: "KG",
    isNumber: true,
  },
  {
    name: "预估总价",
    key: "estimatePrice",
    required: true,
    disabled: true,
    type: "input",
    unit: "元",
    isNumber: true,
  },
  {
    name: "结算金额",
    key: "totalPrice",
    required: true,
    type: "input",
    unit: "元",
    isNumber: true,
  },
  {
    name: "提货方式",
    key: "deliveryMethod",
    type: "radio",
    unit: "",
    child: [
      {
        id: 0,
        name: "送货",
      },
      {
        id: 1,
        name: "自提",
      },
    ],
  },
  {
    name: "运费",
    key: "freight",
    type: "input",
    unit: "元",
    isNumber: true,
  },
  {
    name: "杂费",
    key: "incidentals",
    type: "input",
    unit: "元",
    isNumber: true,
  },
  {
    name: "实际收入",
    key: "realIncome",
    type: "input",
    unit: "元",
    disabled: true,
    isNumber: true,
  },
  {
    name: "结算方式",
    key: "paymentMethodName",
    required: true,
    type: "select",
    unit: "",
    childKey: "select",
    fn: () => {
      contrlModalParams.select.isShow = true;
      contrlModalParams.select.title = "结算方式";
    },
  },
  {
    name: "备注",
    key: "settlementNotes",
    type: "textarea",
  },
  {
    name: "结算单据",
    key: "photo",
    type: "upload",
  },
]);

// 监听毛重 皮重
watch(
  [
    () => model1.order.settlementGross,
    () => model1.order.settlementTare,
    () => model1.order.unitPrice,
    () => model1.order.subtractNum,
    () => model1.order.buttonType,
    () => model1.order.freight,
    () => model1.order.incidentals,
    () => model1.order.totalPrice,
  ],
  ([settlementGrossNew, settlementTareNew]) => {
    /**
     * 过磅净重： 毛重-皮重
      结算重量： 过磅净重-扣杂
      预估总价： 结算单价*结算重量
      实际收入：实际结算金额-运费-杂费
     */
    model1.order.settlementNet =
      (settlementGrossNew || 0) - (settlementTareNew || 0);
    if (model1.order.buttonType === 0) {
      if (model1.order.subtractNum) {
        model1.order.settlementWeight =
          model1.order.settlementNet - model1.order.subtractNum;
      } else {
        model1.order.settlementWeight = model1.order.settlementNet;
      }
    } else if (model1.order.buttonType === 1) {
      if (model1.order.subtractNum) {
        model1.order.settlementWeight =
          model1.order.settlementNet * ((100 - model1.order.subtractNum) / 100);
      } else {
        model1.order.settlementWeight = model1.order.settlementNet;
      }
    }
    model1.order.estimatePrice = parseInt(
      (
        (model1.order.unitPrice || 0) * (model1.order.settlementWeight || 0)
      ).toFixed(2)
    );
    model1.order.realIncome =
      (model1.order.totalPrice || 0) -
      (model1.order.freight || 0) -
      (model1.order.incidentals || 0);
  }
);

const filesRef = ref();
const handleUpload = () => {
  // console.log(event.tempFilePaths)
  return filesRef.value[0].filesList.map((item: any, index: number) => {
    if (item.fileID) {
      return;
    }
    return new Promise((resolve) => {
      PictureApi.upload({
        files: item,
        path: item.path,
      })
        .then((res) => {
          if (res.code === 200) {
            resolve({
              ...(res.data as any),
              businessId: model1.order.id,
              imagesType: ImagesType.NORMARL, // 单据资源
              orderType: OrderType.Shipment, // 出库单
            });
          }
        })
        .catch((e) => {
          return;
        });
    });
  });
};

const handleSelect = (key: string, v: any) => {
  contrlModalParams[key].isShow = false;
  if (key === "select") {
    model1.order.paymentMethodName = v.name;
    model1.order.paymentMethod = v.key;
  }
};
const handleDelete = (e: any) => {
  if (e.tempFile.fileID) {
    PictureApi.deleteById({ id: e.tempFile.fileID }).then((res) => {
      if (res.code === 200) {
        uni.showToast({ title: "已删除" });
      }
    });
  }
};
/**
 * 校验
 */
const form = ref();
const check = () => {
  return new Promise((resolve) => {
    form.value
      .validate()
      .then((res: boolean) => {
        resolve(res);
      })
      .catch((errors: any) => {
        resolve(false);
        uni.showToast({
          icon: "none",
          title: errors[0].message || "校验失败",
        });
      });
  });
};
/**
 * 点击保存 先执行upload接口
 * 上传成功后 保存图片资源 和更新订单数据
 */
const save = () => {
  for (let i = 0; i < formAttrList.length; i++) {
    if (formAttrList[i].isNumber) {
      if (
        model1.order[formAttrList[i].key] &&
        model1.order[formAttrList[i].key][
          model1.order[formAttrList[i].key].length - 1
        ] === "."
      ) {
        uni.showToast({
          title: "请输入正确的" + formAttrList[i].name,
          icon: "none",
        });
        return;
      }
    }
  }

  check().then((res) => {
    if (res) {
      startSave();
    }
  });
};

const startSave = () => {
  Promise.all(handleUpload()).then((res) => {
    // 上传多个资源
    if (res.length > 0) {
      PictureApi.addListAnnex({ annexPos: res }).then((res1) => {
        if (res1.code === 200) {
          console.log("*** 资源文件更新成功");
        }
      });
    }
  });
  updateOrder();
};

const updateOrder = () => {
  // 根据不同按钮点击到form 状态不同
  let scaleStatus = ref(0);
  if (model1.scaleStatusBtnType === ScaleStatusBtnType.ShipmentNoPay) {
    scaleStatus.value = ScaleStatus.ToBeShipmentPay;
  }
  if (model1.scaleStatusBtnType === ScaleStatusBtnType.ShipmentPay) {
    scaleStatus.value = ScaleStatus.ShipmentPaid;
  }
  /**
   * buttonType
   * 0扣杂1扣点
   * buttonType===0 buckleMiscellaneous
   * buttonType===1 points
   *
   */
  if (model1.order.buttonType === 0) {
    model1.order.buckleMiscellaneous = model1.order.subtractNum;
  } else if (model1.order.buttonType === 1) {
    model1.order.points = model1.order.subtractNum;
  }
  model1.order.signTime = formatDate(new Date(), "{y}-{m}-{d} {h}:{i}:{s}");
  // 更新出货单
  ShipmentApi.updateOrderIn({
    orderOutPos: [{ ...model1.order, scaleStatus: scaleStatus.value }],
  }).then((res) => {
    if (res.code === 200) {
      uni.showToast({
        title: "编辑成功",
        icon: "success",
      });
      uni.redirectTo({
        url:
          "/pagesShipment/review/index?id=" +
          model1.order.id +
          `&scaleStatusBtnType=${model1.scaleStatusBtnType}`, // 要跳转到的页面路径
      });
    }
  });
};

onLoad((option) => {
  model1.order.id = (option as any).id;
  model1.scaleStatusBtnType = parseInt((option as any).scaleStatusBtnType);
  if (model1.order.id) {
    ShipmentApi.getDetailById({ id: model1.order.id }).then((res) => {
      if (res.code === 200) {
        model1.order = {
          ...res.data,
          buttonType: res.data.buttonType !== null ? res.data.buttonType : 0,
          deliveryMethod:
            res.data.deliveryMethod !== null ? res.data.deliveryMethod : 0,
          subtractNum:
            res.data.buttonType === 0
              ? res.data.buckleMiscellaneous
              : res.data.points,
          fileLists: model1.order.fileLists.map((item: any) => {
            return { ...item, fileID: item.id };
          }),
        };
      }
    });

    PictureApi.getAnnex({
      businessId: model1.order.id,
      orderType: OrderType.Shipment,
      imagesType: ImagesType.NORMARL,
    }).then((res) => {
      if (res.code === 200) {
        model1.order.fileLists = res.data;
      }
    });
  }
});
</script>
<style lang="scss" scoped>
.c-card {
  background: #ffffff;
  // box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12);
  border-radius: 13rpx;
  margin: 30rpx 25rpx;
  padding: 0rpx 20rpx;
  ::v-deep .u-form-item {
    height: auto;
  }
  ::v-deep .u-form-item + .u-form-item {
    border-top: 1rpx solid rgba(233, 233, 233, 0.76);
  }
}
.btn-box {
  margin-top: 60rpx;
  display: flex;
  background: #ffffff;
  box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 56, 93, 0.12);
  border-radius: 13rpx 13rpx 0rpx 0rpx;
  padding: 25rpx 50rpx;
  position: sticky;
  bottom: 0rpx;
  z-index: 999;
  ::v-deep button {
    border-radius: 43rpx;
  }
}
</style>