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

<template>
  <div>
    <el-form ref="form" size="mini" :model="form" :rules="rules" label-width="80px">
      <el-row :gutter="0" style="display: flex;flex-wrap: wrap;">
        <el-col :span="6">
          <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> -->
          <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="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>
        <el-col :span="18">
          <el-row>
            <el-col :span="24" :xs="24" style="padding: 5px;">
              <el-row :gutter="0">
                <el-col :span="24">
                  <el-button size="mini" type="primary" @click="handelSelectStaff">选择员工</el-button>
                  <el-button size="mini" type="primary" @click="handelSelectAllStaff">全部员工</el-button>
                </el-col>
              </el-row>
              <el-row>
                <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-col>
      </el-row>
    </el-form>
    <el-dialog :title="titleForm" :visible.sync="openForm" width="60%" :destroy-on-close="true" v-dialogDrag
      append-to-body>
      <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 { batchUpdate } from "@/api/emis/emisCommissionQuote";
import { listUser } from "@/api/system/user";

export default {
  name: "BatchQuotePriceUpdateForm",
  props:{
    ids:{
        type:[Number,Array]
    },
  },
  components: {
  },
  dicts: ['emis_cus_settled_type'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 表单参数
      form: {},
      impEmpListStr:null,
      isDataChangeCount:0,
      titleForm:null,
      openForm:false,
      // 表单校验
      rules: {
         startDate: [
          { required: true, message: "开始时间不能为空", trigger: ["blur",'change'] }
        ],
        endDate: [
          { required: true, message: "结束时间不能为空", trigger: ["blur",'change'] }
        ],

      }
    };
  },
   watch: {
      "ids": {
        handler (newValue, oldValue) {
          this.id = newValue;
        },
        deep: true
      },
      form: {
        handler (n, o) {
          // console.log('form handler', this.isDataChangeCount)
          this.isDataChangeCount++
        },
        deep: true
      }

  },
  created() {
    this.isDataChangeCount=0;
    this.reset();
  },

  methods: {

    // 取消按钮
    cancel() {
      this.reset();
      this.$emit("on-cancel");
    },
    // 表单重置
    reset() {
      this.form = {
        quoteId: null,
        startDate: null,
        endDate: null,
        status:null,
        empCode:null,
        empName:null,
        blOpen:null,
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    async submitForm() {
      // 判断是否有变动
      if (this.isDataChangeCount>0 ) {
          if(this.ids.length==0){
            let updList = [];
            let item={
                quoteId:this.ids,
                startDate:this.form.startDate,
                endDate:this.form.endDate,
                empCode:this.form.empCode,
                empName:this.form.empName,
                blOpen:this.form.blOpen,
              }
              updList.push(item);
              await batchUpdate(updList);
          }
          else if(this.ids.length>0){
            let updList = [];
            for(let i=0;i<this.ids.length;i++){
              let item={
                quoteId:this.ids[i],
                startDate:this.form.startDate,
                endDate:this.form.endDate,
                empCode:this.form.empCode,
                empName:this.form.empName,
                blOpen:this.form.blOpen,
              }
              updList.push(item);
            }
            // console.log('updList',updList)
            await batchUpdate(updList);
          }
          this.$modal.msgSuccess("修改成功");
          this.$emit("on-changed");
      }else{
        this.$modal.msgSuccess("无变动，无需修改");
      }
    },
    handelSelectStaff(){
      this.titleForm="选择员工";
      this.openForm=true;
    },
    handelSelectAllStaff(){
        this.form.empCode="-1";
        this.form.empName="全部";
    },
    // 批量员工录入
    async submitFormBatchEmp(){
      // 判断员工是否存在
      if(this.impEmpListStr==null || this.impEmpListStr==''){
        this.$modal.msgError("请输入名称");
        return;
      }
      let userArr=this.impEmpListStr.trim().split(/[；\;\,\，\n]/)||[];
      let empCodeArr = [];
      let empNameArr = [];
      for(let i=0;i<userArr.length;i++){
        if(userArr[i]==null || userArr[i]==' ' || userArr[i]==''){
            continue;
        }

        let qName=userArr[i].trim();
        let user=await this.getStaffUser(qName);
        // console.log("====>user====>",user);
        if(user==null){
          this.$modal.msgError(userArr[i]+"不存在!");
          return
        }else{
          empCodeArr.push(user.empCode);
          empNameArr.push(qName);
        }
      }
      this.form.empCode=empCodeArr.join(",");
      this.form.empName=empNameArr.join(",");
      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;
    },
  }
};
</script>

<style lang="scss" scoped>
</style>