customerSetting.vue

<template>
  <el-dialog append-to-body :title="$t('设置')" :visible.sync="dialogVisible" width="900px">
    <el-form ref="form" :model="form" label-width="150px">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item :label="$t('是否显示提单价格')" prop="isShowTidanPrice">
            <el-switch v-model="form.isShowTidanPrice"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('到仓确认')" prop="arrivalConfirm">
            <el-switch v-model="form.arrivalConfirm" :active-value="1" :inactive-value="0" />
          </el-form-item>
        </el-col>

        <el-col :span="13">
          <el-form-item :label="$t('重货标准')" prop="weightUnit">
            <el-switch v-model="showZhong" />
            <el-input v-model="form.weightUnit" :placeholder="$t('请输入重货标准')" v-show="showZhong">
              <template slot="append">kg/cbm</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-show="showZhong">
          <el-form-item :label="$t('指定线路')" prop="line">
            <el-switch v-model="showZhong1"></el-switch>
            <customer-line-table v-if="showZhong1" :warehouse-list="warehouseList" :import-city-list="importCityList" v-model="zhongLines" :zhong-pao-type="1"></customer-line-table>
          </el-form-item>
        </el-col>

        <el-col :span="13">
          <el-form-item :label="$t('泡货标准')" prop="lightUnit">
            <el-switch v-model="showPao" />
            <el-input v-model="form.lightUnit" :placeholder="$t('请输入泡货标准')" v-show="showPao">
              <template slot="append">kg/cbm</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-show="showPao">
          <el-form-item :label="$t('指定线路')" prop="line">
            <el-switch v-model="showPao1"></el-switch>
            <customer-line-table v-if="showPao1" :warehouse-list="warehouseList" :import-city-list="importCityList" v-model="paoLines" :zhong-pao-type="2"></customer-line-table>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item :label="$t('控货无收货人')">
            <el-switch v-model="form.noConsignee" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('默认付款')">
            <el-switch v-model="form.defaultPay" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('默认开票')">
            <el-switch v-model="form.defaultBilling" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="warning" @click="handleClose">{{ $t("关 闭") }}</el-button>
      <el-button type="primary" @click="handerSubmit">{{ $t("保 存") }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import CustomerLineTable from "@/components/CustomerLineTable"
import { getWarehouseList } from "@/api/ecw/warehouse"
import { getTradeCityList } from "@/api/ecw/region"
import { getZhongPaoBest, getZhongPaoPage } from "@/api/ecw/zhongPao"
import { getCustomer, getCustomerLines, customerSettingButton } from "@/api/ecw/customer"
export default {
  name: "CustomerSetting",
  components: {
    CustomerLineTable
  },
  data() {
    return {
      dialogVisible: false,
      form: {
        id: 0,
        isShowTidanPrice: false,
        arrivalConfirm: 0,
        weightUnit: null,
        lightUnit: null,
        customerLines: [],
        noConsignee: false,
        defaultPay: false,
        defaultBilling: false
      },
      showZhong: false,
      showZhong1: false,
      showPao: false,
      showPao1: false,
      zhongLines: [],
      warehouseList: [], // 仓库列表
      importCityList: [], // 进口地址
      paoLines: []
    }
  },
  created() {
    getWarehouseList().then((r) => {
      this.warehouseList = r.data
    })
    getTradeCityList({ type: 1 }).then((r) => {
      this.importCityList = r.data.filter((item) => item.type === "1")
    })
  },
  methods: {
    init(id) {
      this.customerId = id
      this.showZhong = false
      this.showPao = false
      this.showZhong1 = false
      this.showPao1 = false
      getCustomer(this.customerId).then((response) => {
        const row = response.data
        this.form = {
          id: row.id,
          isShowTidanPrice: row.isShowTidanPrice,
          arrivalConfirm: row.arrivalConfirm,
          weightUnit: row.weightUnit,
          lightUnit: row.lightUnit,
          customerLines: [],
          noConsignee: row.noConsignee,
          defaultPay: row.defaultPay,
          defaultBilling: row.defaultBilling
        }
        // 打开重泡货开关
        if (this.form.weightUnit) {
          this.showZhong = true
        }
        if (this.form.lightUnit) {
          this.showPao = true
        }
        getCustomerLines(this.customerId).then((res) => {
          this.zhongLines = res.data.filter((item) => item.zhongPaoType == 1)
          this.paoLines = res.data.filter((item) => item.zhongPaoType == 2)
          if (this.zhongLines.length) this.showZhong1 = true
          if (this.paoLines.length) this.showPao1 = true
        })
        this.getZhongPao()
      })
    },
    getZhongPao() {
      getZhongPaoBest({
        customerId: this.customerId
        // departureId: this.departureId,
        // objectiveId: this.objectiveId
      }).then((r) => {
        if (!this.form.weightUnit) this.form.weightUnit = r.data.zhongEdge
        if (!this.form.lightUnit) this.form.lightUnit = r.data.paoEdge
      })
    },
    handleClose() {
      this.resetForm("form")
      this.dialogVisible = false
    },
    handerSubmit() {
      this.$refs["form"].validate((valid, err) => {
        // 重货标准和泡货标准，未打开就不传，提交前清空一下
        if (!this.showZhong) {
          this.form.weightUnit = null
          this.zhongLines = []
        }
        if (!this.showZhong1) {
          this.zhongLines = []
        }
        if (!this.showPao) {
          this.form.lightUnit = null
          this.paoLines = []
        }
        if (!this.showPao1) {
          this.paoLines = []
        }
        this.updateCustomerLines()

        // 检查路线是否启用了但是没选择目的仓
        let errors = 0
        this.form.customerLines.forEach((line) => {
          if (!line.objectiveIds || line.objectiveIds == "") {
            errors++
          }
        })
        if (errors) {
          return this.$message.error("有两条路线未选择目的地")
        }

        customerSettingButton(this.form).then((response) => {
          this.$modal.msgSuccess(this.$t("操作成功"))
          this.dialogVisible = false
          const obj = { path: "/customer/customer" }
          this.$emit("refresh")
        })
      })
    },
    updateCustomerLines() {
      let zhongLines = [],
        paoLines = []
      if (this.zhongLines.length > 0) {
        zhongLines = this.zhongLines
      }
      if (this.paoLines.length > 0) {
        paoLines = this.paoLines
      }
      this.form.customerLines = [...zhongLines, ...paoLines]
    }
  }
}
</script>