emis-frontend/src/views/emis/emisQuotePrice/batchQuotePriceUpdateForm.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="8">
                  <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="8">
                  <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="8">
                  <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-row>
        </el-form>

      <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 { batchUpdatePriceDate } from "@/api/emis/emisQuotePrice";

export default {
  name: "BatchQuotePriceUpdateForm",
  props:{
    ids:{
        type:[Number,Array]
    },
  },
  components: {
  },
  dicts: ['emis_cus_settled_type'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 表单参数
      form: {},
      isDataChangeCount:0,
      // 表单校验
      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) {
          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,
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    async submitForm() {
      // 判断是否有变动
      if (this.isDataChangeCount>0 ) {
          console.log(this.ids);
          if(this.ids.length==0){
            let updList = [];
            let item={
                quoteId:this.ids,
                startDate:this.form.startDate,
                endDate:this.form.endDate
              }
              updList.push(item);
              await batchUpdatePriceDate(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
              }
              updList.push(item);
            }

            await batchUpdatePriceDate(updList);
          }
          this.$modal.msgSuccess("修改成功");
          this.$emit("on-changed");

      }else{
        this.$modal.msgSuccess("无变动，无需修改");
      }
    },

  }
};
</script>

<style lang="scss" scoped>
// .el-row{
//   display:flex;
//   flex-wrap: wrap;
// }

// .el-col{
//     min-height: 1px;
// }

</style>