costForm.vue

<template>
  <div class="app-costForm shippingSea-dialog">
    <el-form ref="costForm" :model="costObj" :rules="rules" label-width="120px">
      <el-form-item :label="$t('操作步骤')" prop="opStepType">
        <el-select
          v-model="costObj.opStepType"
          :placeholder="$t('请选择操作步骤')"
        >
          <el-option
            v-for="type in getDictDatas(DICT_TYPE[this.process])"
            :key="type.value"
            :label="$l(type, 'label')"
            :value="type.value"
          ></el-option>
        </el-select>
        <!--<el-select v-if="flag=='seaAir'" v-model="costObj.opStepType" :placeholder="$t('请选择操作步骤')">
          <el-option v-for="type in this.getDictDatas(DICT_TYPE.BOX_SEA_AIR)" :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>
      <!--lanbm 2024-05-17 添加字段-->
      <el-form-item :label="$t('费用产生时间')" prop="freecsdate">
        <el-date-picker
          v-model="costObj.freecsdate"
          style="width: 200px"
          value-format="yyyy-MM-dd HH:mm:ss"
          format="yyyy-MM-dd"
          type="datetime"
          placeholder="费用产生时间"
        />
      </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.currencyList"
              :key="type.id"
              :label="$l(type, 'title')"
              :value="type.id"
            ></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";
import { getCurrencyList } from "@/api/ecw/currency";
import { getDictDatas } from "@/utils/dict";

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

      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",
          },
        ],
        freeCsDate: [
          {
            required: true,
            message: this.$t("费用产生时间不能为空"),
            trigger: "blur",
          },
        ],
      },
      // flag: 'sea'
    };
  },
  computed: {
    flag() {
      return this.$attrs.flag || "sea";
    },
    process() {
      return {
        air: "BOX_AIR_SHIPMENT_PROCESS",
        sea: "BOX_SHIPPING_PROCESS",
        seaAir: "BOX_SEA_AIR",
      }[this.flag];
    },
  },
  created() {
    // 供应商
    getSupplierPage({ pageNo: "1", pageSize: "10000" }).then((res) => {
      const { data } = res;
      this.allSupplier = data.list;
    });
    const { costDetail } = this.$attrs;
    this.costObj = { ...costDetail };
    //币种获取接口 lanbm 2024-05-16 添加注释
    getCurrencyList().then((res) => {
      this.currencyList = res.data ?? [];
    });
    /*if(this.$attrs.shipmentObj.bosType == 'seaAir'){
      this.flag = 'seaAir';
    }*/
  },
  methods: {
    getDictDatas,
    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>