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="country">
                      <CountryPicker :placeholder="$t('所属国家')" v-model="form.country" ></CountryPicker>
                  </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="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 :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="handelSelectSendArea()"
                      >选择员工</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="titleSendAreaForm" :visible.sync="openSendAreaForm" width="90%"  :destroy-on-close="true" v-dialogDrag append-to-body>
      <QuoteSendAreaPanel  :useSiteCode="form.useSiteCode" :useSiteName="form.useSite" :feeType="form.feeType" @on-changed="handleSendAreaFormChanged" @on-cancel="cancelSendAreaForm"></QuoteSendAreaPanel>
    </el-dialog>

    <el-dialog :title="titleDispAreaForm" :visible.sync="openDispAreaForm" width="90%"  :destroy-on-close="true" v-dialogDrag append-to-body>
      <QuoteDispAreaPanel  :useSiteCode="form.useSiteCode" :useSiteName="form.useSite" :feeType="form.feeType" @on-changed="handleDispAreaFormChanged" @on-cancel="cancelDispAreaForm"></QuoteDispAreaPanel>
    </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 { listEmisCommissionQuote, getEmisCommissionQuote, delEmisCommissionQuote, addEmisCommissionQuote, updateEmisCommissionQuote } from "@/api/emis/emisCommissionQuote";
import { mapGetters } from 'vuex'
import { listEmisQuoteSendArea, getEmisQuoteSendArea, delEmisQuoteSendArea, addEmisQuoteSendArea, updateEmisQuoteSendArea } from "@/api/emis/emisQuoteSendArea";
import { listEmisQuotePrice, getEmisQuotePrice, delEmisQuotePrice, addEmisQuotePrice, updateEmisQuotePrice } from "@/api/emis/emisQuotePrice";
import { listEmisQuoteDispArea, getEmisQuoteDispArea, delEmisQuoteDispArea, addEmisQuoteDispArea, updateEmisQuoteDispArea } from "@/api/emis/emisQuoteDispArea";
import {checkRole} from '@/utils/permission'
import {addDateTimeByDay,dateToStr} from '@/utils/custom'

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 EcqExpressionPanel from '@/views/emis/emisCommissionQuote/ecqExpressionPanel.vue';


import QuoteSendAreaPanel from '@/views/emis/emisQuoteSendArea/sendAreaPanel.vue';
import QuoteDispAreaPanel from '@/views/emis/emisQuoteDispArea/dispAreaPanel.vue';

export default {
  name: "emisCommissionQuoteForm",
  props:{
    quoteId:{
        type:Number
    }
  },
  components: {
    CountryPicker,EmisSiteSimplePicker,TransLinePicker,
    TransProductPicker,EcqExpressionPanel,
    QuoteSendAreaPanel,QuoteDispAreaPanel
  },
  dicts: ['emis_price_type','emis_fee_type','sys_currency_type','emis_commission_post','emis_biz_shipping_method'],
  data() {
    return {
      emisCommissionQuoteOptions: [],
      // 遮罩层
      loading: true,
      // 表单参数
      form: {},
      isCopy:false,
      // 表单校验
      rules: {
        quoteId: [
          { 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.getTreeselect();
    },
    // 取消按钮
    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>