costForm.vue

<template>
  <div class="app-costForm shippingSea-dialog">
    <el-form ref="costForm" :model="costObj" :rules="rules" label-width="80px">

      <el-form-item :label="$t('操作步骤')" prop="opStepType">
        <el-select v-model="costObj.opStepType" :placeholder="$t('请选择操作步骤')">
          <el-option v-for="type in this.getDictDatas(DICT_TYPE.BOX_SHIPPING_PROCESS)" :key="type.value" :label="$l(type, 'label')" :value="type.value"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item :label="$t('费用类型')" prop="costType">
        <el-select v-model="costObj.costType" :placeholder="$t('请选择费用类型')">
          <el-option v-for="type in this.getDictDatas(DICT_TYPE.FEE_TYPE)" :key="type.value" :label="$l(type, 'label')" :value="type.value"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item :label="$t('供应商')" prop="supplierId">
        <el-select v-model="costObj.supplierId" :placeholder="$t('请选择供应商')">
          <el-option v-for="supplier in allSupplier" :key="supplier.id" :label="$l(supplier, 'company')" :value="supplier.id"></el-option>
        </el-select>
      </el-form-item>

      <el-row class="two-element-formItem">
        <el-form-item :label="$t('金额')" prop="price">
          <el-input-number v-model="costObj.price" controls-position="right" :min="1"></el-input-number>
        </el-form-item>
        <el-form-item label="" label-width="0px" prop="priceUnit">
          <el-select v-model="costObj.priceUnit" :placeholder="$t('请选择单位')">
            <el-option v-for="type in this.getDictDatas(DICT_TYPE.BOX_SHIPPING_PRICE_UNIT)" :key="type.value" :label="$l(type, 'label')" :value="type.value"></el-option>
          </el-select>
        </el-form-item>
      </el-row>

      <el-form-item :label="$t('备注')">
        <el-input v-model="costObj.remarks" type="textarea" rows="2" :placeholder="$t('请输入备注')"></el-input>
      </el-form-item>

    </el-form>
    <div class="operate-button">
      <el-button type="primary" @click="submit">{{$t('确定')}}</el-button>
      <el-button @click="$emit('closeDialog')">{{$t('取消')}}</el-button>
    </div>
  </div>
</template>

<script>
import { getSupplierPage } from "@/api/ecw/supplier";
import { createCost } from "@/api/ecw/box";
import { serviceMsg } from "./shippingSea/utils";

export default {
  name: "costForm",
  inheritAttrs: false,
  data() {
    return {
      // 费用登记对象
      costObj: {},
      // 供应商
      allSupplier: [],

      rules: {
        opStepType: [{ required: true, message: this.$t("操作步骤不能为空"), trigger: "change" }],
        costType: [{ required: true, message: this.$t("费用类型不能为空"), trigger: "change" }],
        supplierId: [{ required: true, message: this.$t("供应商不能为空"), trigger: "blur" }],
        price: [{ required: true, message: this.$t("金额不能为空"), trigger: "blur" }],
        priceUnit: [{ required: true, message: this.$t("金额单位不能为空"), trigger: "blur" }]
      },
    };
  },
  created() {
    // 供应商
    getSupplierPage({ pageNo: "1", pageSize: "10000" }).then((res) => {
      const { data } = res;
      this.allSupplier = data.list;
    });
    const { costDetail } = this.$attrs;
    this.costObj = { ...costDetail };
  },
  methods: {
    submit() {
      this.$refs["costForm"].validate((valid) => {
        if (valid) {
          createCost({
            shipmentId: this.$attrs.shipmentObj.id,
            ...this.costObj,
          }).then((res) => {
            serviceMsg(res, this).then(() => {
              this.$emit("closeDialog", "cost");
            });
          });
        }
      });
    },
  },
};
</script>

<style lang="scss">
// 海运操作统一弹窗样式
.shippingSea-dialog {
  // 页面内元素弹窗form控件宽度设置
  .el-form-item__content {
    > div:not(.el-input-number) {
      width: 100%;
    }
  }
  .operate-button {
    text-align: center;
  }
  .two-element-formItem {
    display: flex;
    > :last-child {
      width: 100%;
      margin-left: 10px;
    }
  }
  .two-element {
    .el-form-item__content {
      display: flex;
      > :last-child {
        margin-left: 10px;
      }
    }
  }
}
</style>