freight-web/src/pagesApp/receiveSpl.vue

<template>
  <view class="c-card">
    <u-form
      labelPosition="left"
      :model="model1"
      :rules="rules"
      ref="form"
      :labelWidth="80"
      :labelStyle="{ padding: '0rpx 10rpx' }"
    >
      <u-form-item
        :prop="`order[${item.key}]`"
        :label="item.name"
        required
        v-for="(item, index) in formAttrList"
        :key="index"
        @click="item.fn"
      >
        <u-textarea
          v-if="item.type === 'textarea'"
          v-model="(model1.order as any)[item.key]"
          :placeholder="`请输入${item.name}`"
        ></u-textarea>
        <u-input
          v-if="item.type === 'select' || item.type === 'input'"
          v-model="(model1.order as any)[item.key]"
          :placeholder="`请${item.type === 'select' ? '选择' : '输入'}${
            item.name
          }`"
          :clearable="true"
          :customStyle="{}"
          border="none"
        >
          <template #suffix>
            <text v-if="item.key === 'subtractNum'">
              {{ model1.order.subtractType === 1 ? item.unit : "%" }}
            </text>
            <text v-else>
              {{ item.unit }}
            </text>
            
          </template>
        </u-input>
        <!-- @afterRead="afterRead"
          @delete="deletePic" -->
        <u-upload
          v-if="item.type === 'upload'"
          :fileList="[]"
          name="1"
          multiple
          :maxCount="10"
        ></u-upload>

        <u-radio-group
          v-if="item.type === 'radio'"
          v-model="(model1.order as any)[item.key]"
          placement="row"
        >
          <u-radio activeColor="#00DCEE" label="按固定重量" :name="1"></u-radio>
          &nbsp;&nbsp;&nbsp;
          <u-radio activeColor="#00DCEE" label="按百分比" :name="2"></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>
    <u-datetime-picker
      :show="contrlModalParams.isShowSplTime"
      v-model="contrlModalParams.spltime"
      mode="datetime"
      @confirm="contrlModalParams.isShowSplTime = false"
      @cancel="contrlModalParams.isShowSplTime = false"
    ></u-datetime-picker>
    <u-action-sheet
      :actions="contrlModalParams.select.selectList"
      :title="contrlModalParams.select.title"
      :show="contrlModalParams.select.isShow"
      @select="contrlModalParams.select.isShow = false"
      @close="contrlModalParams.select.isShow = false"
    ></u-action-sheet>
  </view>
  <view class="btn-box">
    <u-button type="primary" text="保存"></u-button>
  </view>
</template>
<script setup lang="ts">
const model1 = reactive({
  order: {
    splTime: "",
    subtractType: 1,
  },
});
const rules = ref({
  "userInfo.userName": {
    type: "string",
    required: true,
    message: "请输入手机号",
    trigger: ["blur", "change"],
  },
  "userInfo.password": {
    type: "string",
    required: true,
    message: "请输入密码",
    trigger: ["blur", "change"],
  },
});
const contrlModalParams = reactive({
  isShowSplTime: false,
  spltime: "",
  select: {
    isShow: false,
    title: "标题",
    selectList: [
      {
        name: "选项一",
      },
      {
        name: "选项二",
      },
    ],
  },
});

const formAttrList = reactive([
  {
    name: "补单时间",
    key: "splTime",
    type: "select",
    unit: "",
    fn: () => {
      contrlModalParams.isShowSplTime = true;
    },
  },
  {
    name: "站点磅秤",
    key: "stationScale",
    type: "select",
    unit: "",
    fn: () => {
      contrlModalParams.select.isShow = true;
      contrlModalParams.select.title = "站点磅秤";
    },
  },
  {
    name: "供应商",
    key: "supplier",
    type: "select",
    unit: "",
    fn: () => {
      contrlModalParams.select.isShow = true;
      contrlModalParams.select.title = "供应商";
    },
  },
  {
    name: "车牌号",
    key: "carNo",
    type: "input",
    unit: "",
  },
  {
    name: "收货产品",
    key: "receiveProduct",
    type: "select",
    unit: "",
    fn: () => {
      contrlModalParams.select.isShow = true;
      contrlModalParams.select.title = "收货产品";
    },
  },
  {
    name: "毛重",
    key: "grossWeight",
    type: "input",
    unit: "KG",
  },
  {
    name: "皮重",
    key: "tare",
    type: "input",
    unit: "KG",
  },
  {
    name: "扣杂",
    key: "subtractType",
    type: "radio",
  },
  {
    name: "杂质扣除",
    key: "subtractNum",
    type: "input",
    unit: "KG",
  },
  {
    name: "净重",
    key: "netWeight",
    type: "input",
    unit: "KG",
  },
  {
    name: "单价",
    key: "unitPrice",
    type: "input",
    unit: "元/KG",
  },
  {
    name: "预估总价",
    key: "estimatedTotalPrice",
    type: "input",
    unit: "元",
  },
  {
    name: "贷款金额",
    key: "loanAmount",
    type: "input",
    unit: "元",
  },
  {
    name: "备注",
    key: "remark",
    type: "textarea",
  },
  {
    name: "货品照片",
    key: "photo",
    type: "upload",
  },
]);
</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: 10rpx 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>