count-pass-app/subpages/order/driverAdd.vue

<template>
  <view class="order">
    <view class="example">
      <u-form
        labelPosition="left"
        :model="orderForm"
        :rules="rules"
        ref="form1"
        labelWidth="90"
      >
        <!-- 下单日期 -->
        <u-form-item :label="$t('order.orderDate')" borderBottom prop="setDate">
          <u-input
            readonly
            v-model="orderForm.setDate"
            border="none"
            :placeholder="
              $t('base.common.placeholderS') + $t('order.orderDate')
            "
          />
        </u-form-item>

        <!-- 有效日期 -->
        <template v-if="orderForm.orderType == '2'">
          <u-form-item
            :label="$t('order.endDate')"
            borderBottom
            prop="orderValidDate"
            @click="showEndDateCalendar = true"
          >
            <u-input
              readonly
              v-model="orderForm.orderValidDate"
              border="none"
              :placeholder="
                $t('base.common.placeholderS') + $t('order.endDate')
              "
            />
          </u-form-item>
        </template>

        <!-- 选择企业 -->
        <!-- <u-form-item :label="$t('order.enterprise')" borderBottom prop="tenantId"
					@click="showPopup('popupTenantId')">
					<u-input readonly v-model="orderForm.tenantName" border="none"
						:placeholder="$t('base.common.placeholderS')+$t('order.enterprise')" />
				</u-form-item> -->

        <!-- 临时/固定 -->
        <u-form-item
          :label="$t('order.orderType')"
          borderBottom
          prop="orderType"
          @click="showPopup('popupOrderType')"
        >
          <u-input
            readonly
            v-model="orderForm.orderTypeName"
            border="none"
            :placeholder="
              $t('base.common.placeholderS') + $t('order.orderType')
            "
          />
        </u-form-item>

        <!-- 业务类型 -->
        <!-- 				<u-form-item :label="$t('order.vehicleType')" borderBottom prop="vehicleType"
					@click="showPopup('popupVehicleType')">
					<u-input readonly v-model="orderForm.vehicleTypeName" border="none"
						:placeholder="$t('base.common.placeholderS')+$t('order.vehicleType')" />
				</u-form-item> -->

        <u-form-item
          :label="$t('order.vehicleType')"
          borderBottom
          prop="vehicleType"
        >
          <u-radio-group
            v-model="orderForm.vehicleType"
            @change="onVehicleTypeConfirm"
            placement="row"
            class="p-input"
          >
            <u-radio
              :customStyle="{ marginRight: '10px' }"
              v-for="item in vehicleTypeOption"
              :key="item.value"
              :label="item.text"
              :name="item.value"
            >
            </u-radio>
          </u-radio-group>
        </u-form-item>

        <template>
          <u-form-item
            :label="$t('order.companyName')"
            borderBottom
            prop="companyId"
            @click="showPopup('popupCompanyId')"
          >
            <u-input
              readonly
              v-model="orderForm.companyName"
              border="none"
              :placeholder="
                $t('base.common.placeholderS') + $t('order.companyName')
              "
            >
              <template slot="suffix">
                <view
                  v-if="paymentOption && paymentOption.isShow == '1'"
                  style="color: darkgreen; font-size: 9pt"
                >
                  {{ paymentOption.total }}
                </view>
              </template>
            </u-input>
          </u-form-item>
          <view
            v-if="
              paymentOption &&
              paymentOption.isShow == '1' &&
              paymentOption.agentResponsible == '1'
            "
            style="display: flex; flex-direction: row-reverse"
          >
            <view style="color: red; font-size: 9pt"
              >{{ $t("order.source") }}:{{ paymentOption.companyName }}
            </view>
          </view>
          <u-form-item
            :label="$t('order.materialName')"
            borderBottom
            prop="materialId"
            @click="showPopup('popupmaterialId')"
          >
            <u-input
              readonly
              v-model="orderForm.materialName"
              border="none"
              :placeholder="
                $t('base.common.placeholderS') + $t('order.materialName')
              "
            />
          </u-form-item>
        </template>

        <!-- 订单数量 -->
        <u-form-item
          :label="$t('order.orderNumber')"
          borderBottom
          prop="orderNumber"
        >
          <u--input
            v-model="orderForm.orderNumber"
            border="none"
            type="digit"
            :placeholder="
              $t('base.common.placeholderI') + $t('order.orderNumber')
            "
          ></u--input>
        </u-form-item>
        <u-form-item
          v-if="orderForm.orderType != '4'"
          u-form-item
          :label="$t('order.vehicle')"
          borderBottom
          prop="vehicle"
          @click="toSelectVehicle"
        >
          <u--input
            readonly
            v-model="orderForm.vehicle"
            border="none"
            :placeholder="$t('base.common.placeholderS') + $t('order.vehicle')"
          ></u--input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
      </u-form>
      <view style="margin: 16px 0">
        <button class="bind-btn" @click="submit('form1')">
          {{ $t("base.common.submit") }}
        </button>
      </view>
    </view>
    <u-toast ref="loadingToast"></u-toast>
    <CarKeyboard
      :show.sync="carKeyboardShow"
      :vehicleNo="orderForm.vehicle"
      @confirm="onKeyBoardConfirm"
      vehicleType="car"
    ></CarKeyboard>
    <!-- 下单日期 -->
    <u-calendar
      color="#4680F9"
      round="25"
      :show="showSetDateCalendar"
      @confirm="onSetDateConfirm"
      @close="showSetDateCalendar = false"
    ></u-calendar>
    <!-- 有效日期 -->

    <u-datetime-picker
      :show="showEndDateCalendar"
      v-model="defaultEndDate"
      :defaultDate="defaultEndDate"
      mode="datetime"
      @confirm="onEndDateConfirm"
      @close="showEndDateCalendar = false"
    />
    <!-- <u-calendar color="#4680F9" :defaultDate="defaultEndDate" :show="showEndDateCalendar"
			@confirm="onEndDateConfirm" @close="showEndDateCalendar=false" /> -->
    <!-- 临时或固定 -->
    <PopupSelect
      ref="popupOrderType"
      :option="orderTypeOption"
      @onConfirm="onOrderTypeConfirm"
    />
    <!-- 业务类型 -->
    <!-- 	<PopupSelect ref="popupVehicleType" :option="vehicleTypeOption" @onConfirm="onVehicleTypeConfirm" /> -->
    <!-- 客户 -->
    <PopupSelect
      ref="popupCompanyId"
      :hasSearch="false"
      :option="companyOption"
      @onConfirm="onCompanyConfirm"
    />
    <!-- 原料 -->
    <PopupSelect
      ref="popupmaterialId"
      kind="m"
      :hasSearch="false"
      :option="materialOption"
      @onConfirm="onProductConfirm"
    />
    <!-- 企业选项 -->
    <PopupSelect
      ref="popupTenantId"
      :hasSearch="false"
      :option="tenantOption"
      @onConfirm="onTenantConfirm"
    />
  </view>
</template>

<script>
import PopupSelect from "../../components/popup-select/index";
import dayjs from "dayjs";
import CarKeyboard from "../../components/carKeyboard/carKeyboard";
import { getTenantCacheList } from "../../utils/util.js";

import { saveOrder, getOption, getMaterialsByCompany } from "../../api/order";
export default {
  components: {
    CarKeyboard,
    PopupSelect,
  },
  data() {
    return {
      carKeyboardShow: false,
      start: dayjs().format("YYYY-MM-DD"),
      orderForm: {
        setDate: dayjs().format("YYYY-MM-DD"), //订单日期
        orderValidDate: dayjs().add(30, "day").format("YYYY-MM-DD HH:mm:ss"), //有效日期
        tenantId: "", //企业
        orderType: "1", //订单类型
        companyId: "", //客商
        materialId: "", //物料
        orderNumber: "0", //数量
        vehicle: "", //车号
        driverId: "", //司机id\
        vehicleType: "1",
        xfFlag: "",
        phone: "",
        idcard: "",
        driver: "",
        tenantName: "",
        vehicleTypeName: "", //业务类型
        companyName: "", //客商
        materialName: "", //物料id
        orderTypeName: "临时订单",
        sourceId: "", //第三方大订单ID
      },
      rules: {
        orderType: [
          {
            required: true,
            message:
              this.$t("base.common.placeholderS") + this.$t("order.orderType"),
          },
        ],
        vehicleType: [
          {
            required: true,
            message:
              this.$t("base.common.placeholderS") +
              this.$t("order.vehicleType"),
          },
        ],
        tenantId: [
          {
            required: true,
            message:
              this.$t("base.common.placeholderS") + this.$t("order.enterprise"),
          },
        ],
        companyId: [
          {
            required: true,
            message:
              this.$t("base.common.placeholderS") +
              this.$t("order.companyName"),
          },
        ],
        materialId: [
          {
            required: true,
            message:
              this.$t("base.common.placeholderS") +
              this.$t("order.materialName"),
          },
        ],
        orderNumber: [
          {
            required: true,
            message:
              this.$t("base.common.placeholderI") +
              this.$t("order.orderNumber"),
          },
        ],
      },
      vehicleTypeOption: [
        {
          text: this.$t("base.common.noData"),
          value: null,
        },
      ],
      orderTypeOption: [
        {
          text: "临时订单",
          value: "1",
        },
        {
          text: "固定订单",
          value: "2",
        },
        {
          text: "共享订单",
          value: "4",
        },
      ],
      paymentOption: {},
      //产品选项
      materialOption: [
        {
          text: this.$t("base.common.noData"),
          value: null,
        },
      ], //物料选项
      //客户选项
      companyOption: [
        {
          text: this.$t("base.common.noData"),
          compvalueanyId: null,
        },
      ], //供应商选项
      // vehicleOption:[{vehicle:this.$t('base.common.noData'),value:null}], //司机选项
      tenantOption: [
        {
          text: this.$t("base.common.noData"),
          value: null,
        },
      ], //企业选项
      showSetDateCalendar: false,
      showEndDateCalendar: false,
      defaultEndDate: dayjs().add(30, "day").format("YYYY-MM-DD HH:mm:ss"), //默认有效日期
      //业务对应的客户信息
      vehicleTypeCompanyList: [],
      //客户对应的物料信息
      companyMaterialList: [],
    };
  },
  onLoad(options) {
    let item=JSON.parse(options.data);
    console.log("获取到参数信息、", item);
    this.vehicleTypeCompanyList = item.appDriverCompany;
    this.vehicleTypeOption = item.appVehicleType;
    this.orderForm.tenantId = item.tenantId;
    this.switchTenant(item.tenantId);
    this.bindOption();
  },
  methods: {
    //去选择司机
    toSelectVehicle() {
      uni.navigateTo({
        url: "/subpages/order/driverVehicle",
      });
    },
    //司机扫码set租户
    switchTenant(tenantId){
        if(tenantId&&!uni.setStorageSync('tenantInfo')){
			let tenant=[{
				tenantName:'',
				tenantId:tenantId,
				tenantCode:tenantId,
				statusFlag:"1"}]
			uni.setStorageSync('tenantInfo',tenant)
		}
    },
    //车号键盘输出
    onKeyBoardConfirm(id) {
      this.orderForm.vehicle = id;
    },
    //显示车牌键盘
    carKeyboardOut() {
      this.carKeyboardShow = true;
    },
    // //选择订单类型后加载选项 //获取品种信息 101:销售，102：采购
    bindOption() {
      var that = this;
      console.log("当前租户ID、", that.orderForm.tenantId);
      if (that.orderForm.tenantId) {
        console.log("用户业务类型、",  that.vehicleTypeOption);
        console.log("用户客户信息、", that.vehicleTypeCompanyList);
        if (that.vehicleTypeOption && that.vehicleTypeOption.length > 0) {
          that.orderForm.vehicleType = that.vehicleTypeOption[0].value;
          that.bindCompany();
          that.bindMaterial();
        }
      }
    },
    bindCompany() {
      if (this.vehicleTypeCompanyList&&this.vehicleTypeCompanyList.length>0) {
        this.companyOption = [
          {
            text: this.$t("order.notSelected"),
            value: null,
          },
        ]; //物料选项
        this.vehicleTypeCompanyList.forEach((item) => {
            this.companyOption.push({
              text: item.name,
              value: item.id,
            });
          });
        this.orderForm.companyId = this.companyOption[1].value;
        this.orderForm.companyName = this.companyOption[1].text;  
        console.log("客户信息、", this.companyOption);
      }
    },
    bindMaterial() {
      var companyId = this.orderForm.companyId;
      this.materialOption = [];
      this.orderForm.materialId = "";
      this.orderForm.materialName = "";
      this.paymentOption = {};
      if (companyId) {
        getMaterialsByCompany(this.orderForm).then((res) => {
          if (res.data.code == 0) {
            this.paymentOption = res.data.hardInfo;
            this.materialOption = [
              {
                text: this.$t("order.notSelected"),
                value: null,
              },
            ]; //物料选项
            var materialInfos = res.data.data;
            console.log("1111213213", materialInfos);
            if (materialInfos && materialInfos.length > 0) {
              materialInfos.forEach((item) => {
                this.materialOption.push({
                  text: item.name,
                  value: item.id,
                });
              });
              if (this.materialOption[1]) {
                this.orderForm.materialId = this.materialOption[1].value;
                this.orderForm.materialName = this.materialOption[1].text;
              }
            }
            console.log("品种信息、", this.materialOption);
          }
        });
      }
    },
    //
    // bindTenant() {
    // 	this.tenantOption = getTenantCacheList();
    // 	if (this.tenantOption.length > 0) {
    // 		this.orderForm.tenantId = this.tenantOption[0].value
    // 		this.orderForm.tenantName = this.tenantOption[0].text
    // 	}
    // 	this.bindOption();
    // },
    //提交订单
    submit(ref) {
      let _this = this;

      console.log("提交的订单信息、", this.orderForm);
      if (this.orderForm.orderType != "4" && !this.orderForm.vehicle) {
        uni.showToast({
          title: this.$t("base.common.placeholderI") + this.$t("order.vehicle"),
          icon: "none",
          duration: 2000,
        });
        return;
      }
      if (!this.orderForm.orderNumber || this.orderForm.orderNumber == "0") {
        uni.showToast({
          title:
            this.$t("base.common.placeholderI") + this.$t("order.orderNumber"),
          icon: "none",
          duration: 2000,
        });
        return;
      }

      this.$refs[ref]
        .validate()
        .then(() => {
            _this.orderForm.saveOrder='101';
          let data = JSON.parse(JSON.stringify(_this.orderForm));
          console.log("保存订单信息、", data);
          this.$refs.loadingToast.show({
            type: "loading",
            message: this.$t("base.common.loading"),
            duration: "1000000",
          });
          saveOrder(data).then((res) => {
            this.$refs.loadingToast.hide();
            if (res.statusCode === 200) {
              uni.showModal({
                // title: '提示',
                content: this.$t("order.isContinueAddOrder"),
                showCancel: true,
                cancelText: this.$t("base.button.goBack"),
                confirmText: this.$t("base.button.continue"),
                success: function (res) {
                  if (res.confirm) {
                    (_this.orderForm = {
                      setDate: dayjs().format("YYYY-MM-DD"), //订单日期
                      orderValidDate: dayjs()
                        .add(30, "day")
                        .format("YYYY-MM-DD HH:mm:ss"), //有效日期
                      vehicleTypeName: "", //业务类型
                      companyId: "", //客商
                      materialId: "", //物料
                      orderNumber: "0", //数量
                      vehicle: "", //车号
                      driverId: "", //司机id\
                      orderType: "1",
                      orderTypeName: "临时订单",
                      phone: "",
                      idcard: "",
                      driver: "",
                      companyName: "", //客商
                      materialName: "", //物料id
                    }),
                      console.log("用户点击确定");
                  } else if (res.cancel) {
                    console.log("用户点击取消");
                    uni.redirectTo({
                      url: "/subpages/order/driverList?index=0",
                    });
                  }
                },
              });
            }
          });
        })
        .catch((err) => {
          console.log("err", err);
          this.$refs.loadingToast.hide();
        });
    },
   
    //显示选择
    showPopup(refs) {
      this.$refs[refs].showPicker = true;
    },
    //选择下单日期
    onSetDateConfirm(date) {
      this.orderForm.setDate = dayjs(date).format("YYYY-MM-DD");
      this.showSetDateCalendar = false;
    },
    //选择下单日期
    onEndDateConfirm(date) {
      this.orderForm.orderValidDate = dayjs(date.value).format(
        "YYYY-MM-DD HH:mm:ss"
      );
      this.showEndDateCalendar = false;
    },
    //选择订单类型
    onOrderTypeConfirm(value) {
      this.orderForm.orderType = "";
      this.orderForm.orderTypeName = "";
      if (value.value) {
        this.orderForm.orderType = value.value;
        this.orderForm.orderTypeName = value.text;
      }
    },
    //选择订单类型
    onVehicleTypeConfirm(value) {
      this.orderForm.vehicleType = value;
      this.clear(false);
      this.bindCompany();
      this.bindMaterial();
    },
    //选择客户
    onCompanyConfirm(value) {
      this.orderForm.companyId = "";
      this.orderForm.companyName = "";
      if (value.value) {
        this.orderForm.companyId = value.value;
        this.orderForm.companyName = value.text;
      }
      this.bindMaterial();
    },

    //选择原料
    onProductConfirm(value) {
      console.log("选择的物料信息、", value);
      this.orderForm.materialId = "";
      this.orderForm.materialName = "";
      if (value.value) {
        this.orderForm.materialId = value.value;
        this.orderForm.materialName = value.text;
      }
    },
    // //选择企业
    // onTenantConfirm(value) {
    //   this.orderForm.tenantId = "";
    //   this.orderForm.tenantName = "";
    //   if (value.value) {
    //     this.orderForm.tenantId = value.value;
    //     this.orderForm.tenantName = value.text;
    //   }
    //   this.bindOption();
    // },

    clear(isVehicleType) {
      if (isVehicleType == true) {
        this.vehicleTypeOption = [
          {
            text: this.$t("base.common.noData"),
            value: null,
          },
        ];
        this.orderForm.vehicleType = "";
      }
      this.companyOption = [
        {
          text: this.$t("base.common.noData"),
          value: null,
        },
      ]; //客户选项
      this.materialOption = [
        {
          text: this.$t("base.common.noData"),
          value: null,
        },
      ]; //物料选项

      this.orderForm.companyId = "";
      this.orderForm.materialId = "";
      this.orderForm.companyName = "";
      this.orderForm.materialName = "";
      this.orderForm.orderNumber = "0";
      this.orderForm.driver = "";
      this.orderForm.driverId = "";
      this.orderForm.vehicle = "";
    },
  },
};
</script>

<style lang="less" scoped>
.order {
  padding: 32rpx;

  .picker-title {
    display: flex;
    padding: 0 32rpx;
    line-height: 84rpx;
    justify-content: space-between;

    .confirm {
      color: #4680f9;
    }
  }

  .picker-wrap {
    height: 440rpx;

    .picker-view {
      height: 100%;

      .item {
        display: flex;
        justify-content: space-between;
        height: 88rpx;
        line-height: 88rpx;
        padding: 0 32rpx;

        .text {
          width: 33%;
        }

        .text1 {
          width: 33%;
          text-align: center;
        }

        .text2 {
          width: 33%;
          text-align: right;
        }
      }

      .btn-item {
        display: flex;
        justify-content: center;
        height: 88rpx;
        line-height: 88rpx;
        padding: 0 32rpx;
        align-items: center;

        .add-vehicle {
          line-height: 64rpx;
          height: 64rpx;
          background: #4680f9;
          width: 25%;
          font-size: 28rpx;
        }
      }
    }
  }

  .form-wrap {
    height: 444rpx;
    padding: 0 32rpx;
  }
}

// button {
// 	// background:linear-gradient(to right,#4680F9 0%,#00e2fa 80%,#00e2fa 100%);
// 	background: #4680F9;
// 	line-height: 100rpx;
// 	color: #fff;
// 	border: none;
// }

uni-button:after {
  border: none;
}

uni-input {
  height: 72rpx;
  padding: 0 10rpx 0 20rpx;
}

.uni-forms-item__inner {
  padding: 20rpx 0;
}

// /deep/ .u-button--primary {
// 	background-color: #4680F9;
// 	border-color: #4680F9;
// }
</style>