emis-frontend/src/views/emis/emisCommissionQuote/emisCommissionQuoteForm.vue

<template>
  <div >
      <el-form ref="form" size="mini" :model="form" :rules="rules" label-width="80px">
        <el-row :gutter="0" type='flex'>
          <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="feeType" >
              <el-select v-model="form.feeType" placeholder="提成费用类型" style="width:100%">
                  <el-option
                    v-for="dict in dict.type.emis_commission_fee_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="transLineCode">
                <TransLinePicker v-model="form.transLineCode"  isInitiated="true"></TransLinePicker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="产品类型" prop="prodCode">
              <TransProductMultiplePicker placeholder="产品类型" v-model="form.prodCode" :transLineCode="form.transLineCode"></TransProductMultiplePicker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="起始国" prop="fromCountry">
              <CountryMutiSelectPicker :placeholder="$t('起始国')" v-model="form.fromCountry" ></CountryMutiSelectPicker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="目的国" prop="country">
              <CountryMutiSelectPicker1 :placeholder="$t('起始国')" v-model="form.country" ></CountryMutiSelectPicker1>
            </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="请选择开始日期"
                  @change="onStartDateChange"
                  >
                </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="calcType">
                    <el-radio-group v-model="form.calcType">
                      <el-radio label="1">按票计算</el-radio>
                      <el-radio label="2">重量计算</el-radio>
                      <el-radio label="3">体积计算</el-radio>
                      <el-radio label="4">包裹数</el-radio>
                    </el-radio-group>
                  </el-form-item>
              </el-col>
              <!-- <el-col :span="24">
                <el-form-item label="优先级" prop="priorityLevel">
                  <el-input v-model="form.priorityLevel" placeholder="优先级" style="width:100px" />
                </el-form-item>
              </el-col> -->
              <el-col :span="24">
                  <el-form-item label="启用状态" prop="blOpen">
                  <el-radio-group v-model="form.blOpen">
                    <el-radio :label="1">启用</el-radio>
                    <el-radio :label="0">停用</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="岗位类型" prop="postType">
                  <el-select v-model="form.postType" placeholder="岗位类型" >
                    <el-option
                      v-for="dict in dict.type.emis_commission_post"
                      :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="transType">
                  <el-select v-model="form.transType" placeholder="快递类型" >
                    <el-option
                      v-for="dict in dict.type.emis_biz_shipping_method"
                      :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="remark">
              <el-input v-model="form.remark" placeholder="请输入备注" />
            </el-form-item>
          </el-col> -->
          </el-col>
          <el-col :span="18" :xs="18">
            <el-row>
              <el-col :span="24" :xs="24" style="padding: 5px;">
                <el-row :gutter="0">
                    <el-col :span="8">
                        <el-button
                        size="mini"
                        type="primary"
                        @click="handelSelectStaff"
                      >选择员工</el-button>
                      <el-button
                        size="mini"
                        type="primary"
                        @click="handelSelectAllStaff"
                      >全部员工</el-button>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="" prop="empName" label-width="0px" style="margin-bottom: 0px;">
                        <el-input v-model="form.empName" 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="说明: "
                            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" -->
                      <EcqExpressionPanel :quoteId="form.quoteId" :isCopy="isCopy" style="width:100%" v-model="form.exprList"></EcqExpressionPanel>
                    <!-- </div> -->
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-form>

      <el-dialog :title="titleForm" :visible.sync="openForm" width="60%"  :destroy-on-close="true" v-dialogDrag append-to-body>
        <EmisStaffListPicker  @on-changed="handleStaffFormChanged" @on-cancel="cancelStaffForm"></EmisStaffListPicker>
      </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 { getEmisCommissionQuote, addEmisCommissionQuote, updateEmisCommissionQuote } from "@/api/emis/emisCommissionQuote";
import { mapGetters } from 'vuex'
import {addDateTimeByDay,dateToStr} from '@/utils/custom'

import CountryMutiSelectPicker from '@/views/emis/EmisBaseTools/CountryMutiSelectPicker.vue';
import CountryMutiSelectPicker1 from '@/views/emis/EmisBaseTools/CountryMutiSelectPicker.vue';

import TransLinePicker from '@/views/emis/EmisBaseTools/TransLinePicker.vue';
import TransProductMultiplePicker from '@/views/emis/EmisBaseTools/TransProductMultiplePicker.vue';

import EmisSiteSimplePicker from '@/views/emis/EmisBaseTools/EmisSiteSimplePicker.vue';
import EmisStaffListPicker from '@/views/emis/EmisBaseTools/EmisStaffListPicker.vue';


import EcqExpressionPanel from '@/views/emis/emisCommissionQuote/ecqExpressionPanel.vue';



export default {
  name: "emisCommissionQuoteForm",
  props:{
    quoteId:{
        type:[Number,Array]
    }
  },
  components: {
    CountryMutiSelectPicker,CountryMutiSelectPicker1,EmisSiteSimplePicker,EcqExpressionPanel,
    EmisStaffListPicker,TransLinePicker,TransProductMultiplePicker
  },
  dicts: ['emis_price_type','emis_fee_type','sys_currency_type',
  'emis_commission_post','emis_biz_shipping_method','emis_commission_fee_type'],
  data() {
    return {
      emisCommissionQuoteOptions: [],
      // 遮罩层
      loading: true,
      titleForm:null,
      openForm:false,
      // 表单参数
      form: {},
      isCopy:false,
      // 表单校验
      rules: {
        quoteName: [
          { required: true, message: "报价名称不能为空", trigger: "blur" }
        ],
        feeType: [
          { required: true, message: "费用类型不能为空", trigger: "blur" }
        ],
        startDate: [
          { required: true, message: "开始日期不能为空", trigger: "blur" }
        ],
        endDate: [
          { required: true, message: "结束日期不能为空", trigger: "blur" }
        ],
        postType: [
          { required: true, message: "岗位类型不能为空", trigger: "blur" }
        ],
        calcType: [
          { required: true, message: "计算类型不能为空", trigger: "blur" }
        ],
        transType: [
          { required: true, message: "快递类型不能为空", trigger: "blur" }
        ],
        blOpen: [
          { required: true, message: "启用类型不能为空", trigger: "blur" }
        ]
      }
    };
  },
   watch: {
      "quoteId": {
        handler (newValue, oldValue) {
          this.quoteId = newValue;
          this.initData();
        },
        deep: true
      }
  },
  created() {
    this.initData();
  },

  methods: {
    initData() {

        if(this.quoteId !=null) {
          this.loading = true;
          getEmisCommissionQuote(this.quoteId).then(response => {
            this.form = response.data;
            this.loading = false;
          });
        }else{
            this.reset();
            this.form.blOpen=1;
        }
    },
    handelSelectStaff(){
      this.titleForm="选择员工";
      this.openForm=true;
    },
    handelSelectAllStaff(){
        this.form.empCode="-1";
        this.form.empName="全部";
    },
    handleStaffFormChanged(empCodeStr,empNameStr){
        this.form.empCode=empCodeStr;
        this.form.empName=empNameStr;
        this.openForm=false;

    },
    cancelStaffForm(){
      this.openForm=false;
    },
    // 取消按钮
    cancel() {
      this.reset();
      this.$emit("on-cancel");
    },
    // 表单重置
    reset() {
      this.form = {
        quoteId: null,
        quoteCode: null,
        quoteName: null,
        calcType: null,
        postType: null,
        transType: null,
        blOpen: null,
        empCode: null,
        empName: 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
      };
      this.resetForm("form");
    },
    onStartDateChange(){
      this.form.endDate=dateToStr(addDateTimeByDay(this.form.startDate,365));
      console.log(this.form.endDate);
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.quoteId != null) {
            updateEmisCommissionQuote(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.$emit("on-changed");
            });
          } else {
            addEmisCommissionQuote(this.form).then(response => {
               this.$modal.msgSuccess("新增成功");
               this.$emit("on-changed");
            });
          }
        }
      });
    },

  }
};
</script>