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="sendSiteCode">
              <EmisSiteMutiSelectPicker  v-model="form.sendSiteCode"  ></EmisSiteMutiSelectPicker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="下一网点" prop="nextSiteCode">
              <EmisSiteSimplePicker  v-model="form.nextSiteCode"  ></EmisSiteSimplePicker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="线路" prop="transLineCode">
                <TransLineMultiplePicker v-model="form.transLineCode"  isInitiated="true"></TransLineMultiplePicker>
            </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 label="5">按柜计算</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-form-item label="运输方式" prop="transTypeIdArr">
              <el-select  multiple clearable  collapse-tags v-model="form.transTypeIdArr" placeholder="运输方式"  >
                  <el-option
                    v-for="item in dict.type.emis_biz_shipping_method"
                    v-bind:key="item.value"
                    v-bind:label="item.label"
                    v-bind:value="item.value"
                  />
                </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 :key="resetRefreshId" :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>
        <!-- <EmisStaffSimpleListPicker  @on-changed="handleStaffFormChanged" @on-cancel="cancelStaffForm"></EmisStaffSimpleListPicker> -->
        <el-form  size="mini" label-width="60px">
         <el-row>
          <el-col :span="24">
            <el-form-item :label="$t('名称')" prop="formBatchEmp">
              <el-input v-model="impEmpListStr" type="textarea" :rows="8" placeholder="多个名称使用逗号或换行隔开"  />
            </el-form-item>
          </el-col>
         </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align:center">
          <el-button type="primary"   @click="submitFormBatchEmp">确定</el-button>
          <el-button @click="cancelBatchEmp">取 消</el-button>
        </div>

      </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 TransLineMultiplePicker from '@/views/emis/EmisBaseTools/TransLineMultiplePicker.vue';
import TransProductMultiplePicker from '@/views/emis/EmisBaseTools/TransProductMultiplePicker.vue';

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


import EmisStaffSimpleListPicker from '@/views/emis/EmisBaseTools/EmisStaffSimpleListPicker.vue';
import { listUser } from "@/api/system/user";


import EcqExpressionPanel from '@/views/emis/emisCommissionQuote/ecqExpressionPanel.vue';
import { PageSizes } from "pdf-lib";



export default {
  name: "emisCommissionQuoteForm",
  props:{
    quoteId:{
        type:[Number,Array]
    },
    isCopy:{
      type:Boolean
    }
  },
  components: {
    EmisSiteSimplePicker,EmisSiteMutiSelectPicker,CountryMutiSelectPicker,CountryMutiSelectPicker1,EcqExpressionPanel,
    EmisStaffSimpleListPicker,TransLineMultiplePicker,TransProductMultiplePicker
  },
  dicts: ['emis_price_type','emis_fee_type','sys_currency_type',
  'emis_commission_post','emis_biz_shipping_method','emis_commission_fee_type'],
  data() {
    return {
      resetRefreshId:null,
      emisCommissionQuoteOptions: [],
      // 遮罩层
      loading: true,
      titleForm:null,
      openForm:false,
      // 表单参数
      form: {},
      impEmpListStr:null,
      // 表单校验
      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: {
    // 批量员工录入
    async submitFormBatchEmp(){
      // 判断员工是否存在
      if(this.impEmpListStr==null || this.impEmpListStr==''){
        this.$modal.msgError("请输入名称");
        return;
      }
      let userArr=this.impEmpListStr.trim().split(/[；\;\,\，\n]/)||[];
      let empCodeStr="";
      let empNameStr="";
      for(let i=0;i<userArr.length;i++){
        let user=await this.getStaffUser(userArr[i]);
        console.log("====>user====>",user);
        if(user==null){
          this.$modal.msgError(userArr[i]+"不存在!");
          return
        }else{
          empCodeStr=empCodeStr+user.empCode+",";
          empNameStr=empNameStr+user.empName+",";
        }
      }

      this.form.empCode=empCodeStr;
      this.form.empName=empNameStr;


      this.openForm=false;
    },
    cancelBatchEmp(){
      this.openForm=false;
    },
    async getStaffUser(name){
      let qParams={
        searchValue:name,
        pageNum: 1,
        pageSize: 1,
        params:{
          blMatchEmpName:1
        }
      }
     let res=await listUser(qParams);
     if(res.code == 200 ){
        if(res.total>0){
          return res.rows[0];
        }else{
          return null;
        }
     }
     return null;
    },
    initData() {
        this.resetRefreshId="tracing-"+Math.random().toString(36).substring(3,10);

        if(this.quoteId !=null) {
          this.form={};
          this.loading = true;
          getEmisCommissionQuote(this.quoteId).then(response => {
            this.form = response.data;
            if(this.isCopy){
              this.form.quoteName=this.form.quoteName+"_Copy"
              // this.form.quoteId=null;
            }

            if(this.form.transType){
              this.$set(this.form,"transTypeIdArr",this.form.transType.split(","))
            }
            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,
        sendSiteCode:null,
        nextSiteCode:null,
        transTypeIdArr: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() {
      if(this.isCopy){
          this.form.quoteId=null;
      }

      this.$refs["form"].validate(valid => {
        if (valid) {
          if(this.form.transTypeIdArr){
            this.form.transType=this.form.transTypeIdArr.join(",");
          }

          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>