emis-frontend/src/views/emis/emisQuotePrice/emisQuotePriceForm.vue

<template>
  <div >
    <el-row :gutter="0" type='flex'>
      <el-form ref="form" size="mini" :model="form" :rules="rules" label-width="80px">
          <el-col :span="6" :xs="6" style="border-right: 1px solid #f3f3f3;padding-right: 5px;">
                <el-col :span="24">
                  <el-form-item label="报价名称" prop="quoteName">
                    <el-input v-model="form.quoteName" placeholder="请输入报价名称" />
                  </el-form-item>
                </el-col>
                <!-- <el-col :span="24">
                  <el-form-item label="所属国家" prop="country">
                      <CountryPicker :placeholder="$t('所属国家')" v-model="form.country" ></CountryPicker>
                  </el-form-item>
                </el-col> -->
                <el-col :span="24">
                  <el-form-item label="使用网点" prop="useSiteCode">
                    <div v-if="ownerSiteCode == 88888">
                      <EmisSiteSimplePicker   v-model="form.useSiteCode" :placeholder="$t('使用网点')"  siteType="2" isInitiated="true" :disabled="false" ></EmisSiteSimplePicker>
                    </div>
                    <div v-else>
                      <EmisSiteSimplePicker   v-model="form.useSiteCode" :placeholder="$t('使用网点')"  siteType="2" isInitiated="true" :disabled="true" ></EmisSiteSimplePicker>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="线路" prop="transLineCode">
                      <TransLinePicker v-model="form.transLineCode"  isInitiated="true"></TransLinePicker>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="产品类型" prop="prodCode">
                    <TransProductPicker placeholder="产品类型" v-model="form.prodCode" :transLineCode="form.transLineCode"></TransProductPicker>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="最低价格" prop="leastPrice">
                    <el-input v-model="form.leastPrice" placeholder="最低价格" />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="价格取值" prop="priceType">
                    <el-select v-model="form.priceType" placeholder="价格取值">
                      <el-option
                        v-for="dict in dict.type.emis_price_type"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
              </el-col>
              <el-col :span="24">
                  <el-form-item label="开始日期" prop="startDate">
                    <el-date-picker
                      style="width:100%"
                      clearable
                      v-model="form.startDate"
                      type="datetime"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      default-time = "00:00:00"
                      placeholder="请选择开始日期">
                    </el-date-picker>
                  </el-form-item>
              </el-col>
              <el-col :span="24">
                  <el-form-item label="结束日期" prop="endDate">
                    <el-date-picker
                      style="width:100%"
                      clearable
                      v-model="form.endDate"
                      type="datetime"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      default-time = "23:59:59"
                      placeholder="请选择结束日期">
                    </el-date-picker>
                  </el-form-item>
              </el-col>
              <el-col :span="24">
                  <el-form-item label="计费类型" prop="billType">
                    <el-radio-group v-model="form.billType">
                    <el-radio :label="1" style="font-size:10px">重量计费</el-radio>
                    <el-radio :label="2" style="font-size:10px">体积计费</el-radio>
                  </el-radio-group>
                  </el-form-item>
                </el-col>
              <el-col :span="24">
                  <el-form-item label="启用状态" prop="status">
                  <el-radio-group v-model="form.status">
                    <el-radio :label="1">启用</el-radio>
                    <el-radio :label="0">未启用</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>

          </el-col>
          <el-col :span="18" :xs="18">
            <el-row>
              <el-col :span="12" :xs="12" style="padding: 5px;">
                <el-row :gutter="0">
                  <el-col :span="16">
                    <el-form-item label="寄件区域" prop="sendAreaId">
                      <el-select v-model="form.sendAreaId" placeholder="寄件区域" clearable>
                        <el-option
                          v-for="dict in sendAreaIdsOptions"
                          :key="dict.value"
                          :label="dict.label"
                          :value="dict.value"
                        />
                      </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-button
                        size="mini"
                        type="primary"
                        @click="handelSelectSendArea()"
                      >新增区域</el-button>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="" prop="sendAreaText" label-width="0px" style="margin-bottom: 0px;">
                        <el-input v-model="form.sendAreaText" rows="6" type="textarea" placeholder="" disabled />
                      </el-form-item>
                    </el-col>
                </el-row>

              </el-col>
              <el-col :span="12" :xs="12" style="padding: 5px;">
                <el-row :gutter="0">
                  <el-col :span="16">
                    <el-form-item label="派件区域" prop="dispAreaId" >
                      <el-select v-model="form.dispAreaId" placeholder="派件区域" clearable >
                        <el-option
                          v-for="dict in dispAreaIdsOptions"
                          :key="dict.value"
                          :label="dict.label"
                          :value="dict.value"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                      <el-button
                      size="mini"
                      type="primary"
                      @click="addArea(2)"
                    >新增区域</el-button>
                  </el-col>
                  <el-col :span="24">
                      <el-form-item label="" prop="dispAreaText" label-width="0px" style="margin-bottom: 0px;">
                        <el-input v-model="form.dispAreaText" rows="6" type="textarea" placeholder="" disabled/>
                      </el-form-item>
                    </el-col>
                </el-row>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24" :xs="24" style="padding: 10px;">
                <el-row>
                  <el-col :span="24">
                      <!-- 计算公式规则 -->
                      <el-alert
                            title="计算公式规则"
                            type="info"
                            description="说明: 计算公式中只能包含(w,数字,+,-,*,/),示例:0-1公斤 首重5元 ；1-3 公斤 每公斤2元加上首重,计算公式: 5+(w-1)*2输入完重量后回车跳转到表达式，输入完表达式后回车可以快速新增下一条公式"
                            show-icon
                            :closable="false"
                            style="margin-bottom: 10px;"
                       >
                      </el-alert>
                  </el-col>
                  <el-col :span="24">
                    <!-- <div style="max-height:200px;overflow-y: auto;"> -->
                      <!-- @onChange="onQuoteExpressionChange" -->
                      <QuoteExpressionPanel :quoteId="form.quoteId" style="width:100%" v-model="form.quoteExpressions"></QuoteExpressionPanel>
                    <!-- </div> -->
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-col>
      </el-form>
    </el-row>

    <el-dialog :title="titleSendAreaForm" :visible.sync="openSendAreaForm" width="90%"  :destroy-on-close="true" v-dialogDrag append-to-body>
      <QuoteSendAreaPanel :quoteId="form.quoteId" v-model="form.sendAreaId"   @on-changed="handleSendAreaFormChanged" @on-cancel="cancelSendAreaForm"></QuoteSendAreaPanel>
    </el-dialog>

    <div style="text-align: center;margin-bottom: 10px;">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'

import { listEmisQuotePrice, getEmisQuotePrice, delEmisQuotePrice, addEmisQuotePrice, updateEmisQuotePrice } from "@/api/emis/emisQuotePrice";
import CountryPicker from '@/views/emis/EmisBaseTools/CountryPicker.vue';
import EmisSiteSimplePicker from '@/views/emis/EmisBaseTools/EmisSiteSimplePicker.vue';
import TransLinePicker from '@/views/emis/EmisBaseTools/TransLinePicker.vue';
import TransProductPicker from '@/views/emis/EmisBaseTools/TransProductPicker.vue';

import QuoteExpressionPanel from '@/views/emis/emisQuoteExpression/quoteExpressionPanel.vue';
import QuoteSendAreaPanel from '@/views/emis/emisQuoteSendArea/indexPanel.vue';

export default {
  name: "emisQuotePriceForm",
  props:{
    quoteId:{
        type:Number
    }
  },
  components: {
    CountryPicker,EmisSiteSimplePicker,TransLinePicker,
    TransProductPicker,QuoteExpressionPanel,
    QuoteSendAreaPanel
    },
  dicts: ['emis_price_type'],
  data() {
    return {
      emisQuotePriceOptions: [],
      // 遮罩层
      loading: true,
      sendAreaIdsOptions:[],
      dispAreaIdsOptions:[],

      openSendAreaForm:false,
      titleSendAreaForm:'',

      // 表单参数
      form: {},
      // 表单校验
      rules: {
        quoteName: [
          { required: true, message: "报价名称不能为空", trigger: "blur" }
        ],
        useSiteCode: [
          { required: true, message: "使用站点代码不能为空", trigger: "blur" }
        ],
        useSite: [
          { required: true, message: "使用站点名称不能为空", trigger: "blur" }
        ],
      }
    };
  },
  computed: {
    ...mapGetters([
      'ownerSiteCode',
      'ownerSiteName',
    ]),
  },
   watch: {
      "quoteId": {
        handler (newValue, oldValue) {
          this.quoteId = newValue;
          this.initData();
        },
        deep: true
      }
  },

  created() {
    console.log(this.ownerSiteCode);
    this.initData();
  },
  methods: {
    initData() {

        this.form.useSiteCode=this.ownerSiteCode;

        if(this.quoteId !=null) {
          this.loading = true;
          getEmisQuotePrice(this.quoteId).then(response => {
            this.form = response.data;
            this.loading = false;
          });
        }else{
            this.reset();
        }
    },
    handleSendAreaFormChanged(){

    },
    cancelSendAreaForm(){

    },
    // 取消按钮
    cancel() {
      this.reset();
      this.$emit("on-cancel");
    },
    // 表单重置
    reset() {
      this.form = {
        quoteId: null,
        quoteName: null,
        quoteCode: null,
        useSiteCode: null,
        useSite: null,
        transLineCode: null,
        transLine: null,
        feeType: null,
        prodCode: null,
        prodName: null,
        recPayType: null,
        billType: 1,
        otherType1: null,
        otherType2: null,
        carryType: null,
        status: null,
        dispAreaId: null,
        dispAreaSite: null,
        dispAreaName: null,
        dispAreaSiteId: null,
        sendAreaId: null,
        sendAreaName: null,
        sendAreaSite: null,
        sendAreaSiteId: null,
        carriesNumber: null,
        discardsNumber: null,
        leastPrice: null,
        priceType: null,
        startDate: null,
        endDate: null,
        priorityLevel: null,
        remark: null,
        tenantId: null,
        delFlag: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        createSite: null,
        updateSite: null,
        quoteExpressions:[],
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.quoteId != null) {
            updateEmisQuotePrice(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.$emit("on-changed");
            });
          } else {
            addEmisQuotePrice(this.form).then(response => {
               this.$modal.msgSuccess("修改成功");
               this.$emit("on-changed");
            });
          }
        }
      });
    },
    onQuoteExpressionChange(item){
      //  console.log(item)
      this.form.quoteExpressions = item;
    },
    handelSelectSendArea(){
      this.titleSendAreaForm="寄件区域";
      this.openSendAreaForm=true;

    }


  }
};
</script>

<style scoped>
  .el-dialog .el-dialog__body {
    margin: 5px!important;
    padding: 0;
    overflow: auto;
  }
</style>