drp-ui/src/views/business/spd/bo/plan/add.vue

<template>
  <div id="addPlanList">
    <el-card style="position: relative;">
      <span>基本信息</span>
      <el-form :model="basicForm" :rules="basicRules" ref="basic" label-width="auto">
        <el-row :gutter="10">
          <el-col :span="1.5">
            <el-form-item label="计划编码">
              <el-input v-model="basicForm.planCode" size="mini" disabled style="width: 200px" />
            </el-form-item>
          </el-col>

          <el-col :span="1.5">
            <el-form-item label="计划名称" prop="planName">
              <el-input v-model.trim="basicForm.planName" size="mini" disabled clearable style="width: 200px" />
            </el-form-item>
          </el-col>

          <el-col :span="1.5">
            <el-form-item label="线路类型" prop="type" :rules="{ required: true, message: '请选择线路类型', trigger: 'blur' }">
              <el-select clearable size="mini" :disabled="sonDisable" v-model="basicForm.type" style="width: 200px">
                <el-option v-for="dict in dict.type.mk_plan_route_type" :key="dict.value" :label="dict.label"
                  :value="dict.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="1.5">
            <el-form-item label="执行人" prop="chargerName"
              :rules="{ required: true, message: '请选择执行人', trigger: 'blur' }">
              <el-select clearable size="mini" v-model="basicForm.chargerName" :disabled="sonDisable"
                @focus="choose('CONTACTS_PARAM', true, '请选择执行人')" @clear="clearHang({}, '请选择执行人')" style="width: 200px">
                <el-option v-for="item in personOptions" :key="item.id" :label="item.name" :value="item.code" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="1.5">
            <el-form-item label="确认状态" prop="state">
              <el-select disabled size="mini" v-model="basicForm.state" style="width: 200px">
                <el-option v-for="dict in dict.type.mk_plan_state" :key="dict.value" :label="dict.label"
                  :value="dict.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

        </el-row>

        <el-row :gutter="10">

          <el-col :span="1.5">
            <el-form-item label="开始时间" prop="startDate"
              :rules="{ required: true, message: '请选择开始时间', trigger: 'blur' }">
              <el-date-picker v-model="basicForm.startDate" :disabled="sonDisable" clearable type="date"
                @change="setDateRange(basicForm.startDate)" value-format="yyyy-MM-dd 00:00:00"
                :picker-options="pickerOptionsStart" size="mini" style="width: 200px" placeholder="选择开始时间">
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="1.5">
            <el-form-item label="截止时间" prop="deadlineTime"
              :rules="{ required: true, message: '请选择截止时间', trigger: 'blur' }">
              <el-date-picker v-model="basicForm.deadlineTime" :disabled="sonDisable" clearable type="date"
                value-format="yyyy-MM-dd 00:00:00" :picker-options="pickerOptionsEnd" size="mini" style="width: 200px"
                placeholder="选择截止时间">
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="1.5">
            <el-form-item label="销售区域" prop="marketingAreaName"
              :rules="{ required: true, message: '请选择销售区域', trigger: 'blur' }">
              <el-select clearable v-model="basicForm.marketingAreaName" size="mini" :disabled="sonDisable"
                @focus="choose('MK_SALESAREA_PARAM', true, '请选择销售区域')" style="width: 200px">
                <el-option v-for="item in salesAreaOptions" :key="item.id" :label="item.name" :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="1.5">
            <el-form-item label="部门" prop="deptName">
              <el-select clearable v-model="basicForm.deptName" size="mini" :disabled="sonDisable"
                @focus="choose('DEPT_PARAM', true, '部门')" style="width: 200px">
                <el-option v-for="item in deptOptions" :key="item.id" :label="item.name" :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

        </el-row>

        <div class="btn_grooup">
          <span>明细信息</span>
          <div>
            <el-button type="primary" size="mini" @click="addLine" v-if="!sonDisable">增行</el-button>
            <el-button type="primary" size="mini" @click="copy" v-if="sonPageStu == 'check'">复制</el-button>
            <el-button type="primary" size="mini" @click="delItems" v-if="sonPageStu != 'check'">批量删除</el-button>
            <el-button type="primary" size="mini" @click="edit" v-if="sonPageStu == 'check' && basicForm.state == '0'">
              编辑</el-button>
          </div>
        </div>

        <el-table :data="basicForm.mkBoPlanItemList" fit height="460" style="font-size: 12px;" v-horizontal-scroll
          @selection-change="handleSelectionChange">
          <el-table-column type="selection" align="center" />
          <el-table-column label="序号" type="index" align="center" />
          <el-table-column show-overflow-tooltip label="计划编号" prop="planCode" width="150" />
          <el-table-column show-overflow-tooltip label="日期" prop="date" width="230px" :render-header="addRedStar">
            <template slot-scope="scope">
              <el-form-item class="hang" :prop="'mkBoPlanItemList.' + scope.$index + '.' + 'date'"
                :rules="{ required: true, message: '请填写日期', trigger: 'blur' }">
                <el-date-picker v-model="scope.row.date" :readonly="sonDisable" clearable type="date" size="mini"
                  value-format="yyyy-MM-dd 00:00:00" :picker-options="pickerOptions" placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column show-overflow-tooltip label="客户" prop="customerName" min-width="230"
            :render-header="addRedStar">
            <template slot-scope="scope">
              <el-form-item class="hang" :prop="'mkBoPlanItemList.' + scope.$index + '.' + 'customerName'"
                :rules="{ required: true, message: '请选择客户', trigger: 'blur' }">
                <el-select clearable size="mini" v-model="scope.row.customerName" :disabled="sonDisable"
                  @focus="chooseSon(scope.$index, 'MkCustomerRule', true, '请选择客户', {charger: basicForm.charger})"
                  @clear="clearHang(scope.$index, '请选择客户')" style="width: 200px">
                  <el-option v-for="item in customerOptions" :key="item.id" :label="item.name" :value="item.code" />
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column show-overflow-tooltip label="联系人" prop="contactName" min-width="230"
            :render-header="addRedStar">
            <template slot-scope="scope">
              <el-form-item class="hang" :prop="'mkBoPlanItemList.' + scope.$index + '.' + 'contactName'"
                :rules="{ required: true, message: '请选择联系人', trigger: 'blur' }">
                <el-select clearable size="mini" v-model="scope.row.contactName" :disabled="sonDisable"
                  @focus="chooseSon(scope.$index, 'LINKMAN_PARAM', true, '请选择联系人', {customer: scope.row.customer})"
                  style="width: 200px">
                  <el-option v-for="item in linkOptions" :key="item.id" :label="item.name" :value="item.code" />
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column show-overflow-tooltip label="详细地址" prop="address" min-width="200">
            <template slot-scope="scope">
              <el-form-item class="hang" :prop="'mkBoPlanItemList.' + scope.$index + '.' + 'address'">
                <el-input clearable :readonly="sonDisable" size="mini" v-model="scope.row.address" />
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column show-overflow-tooltip label="拜访目的" prop="purpose" min-width="200"
            :render-header="addRedStar">
            <template slot-scope="scope">
              <el-form-item class="hang" :prop="'mkBoPlanItemList.' + scope.$index + '.' + 'purpose'"
                :rules="{ required: true, message: '请选择拜访目的', trigger: 'blur' }">
                <el-select clearable :disabled="sonDisable" v-model="scope.row.purpose" size="mini">
                  <el-option v-for=" dict in dict.type.mk_bo_behavior_goal" :key="dict.value" :label="dict.label"
                    :value="dict.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column show-overflow-tooltip label="商机" prop="boName" min-width="330">
            <template slot-scope="scope">
              <el-form-item class="hang" :prop="'mkBoPlanItemList.' + scope.$index + '.' + 'boName'">
                <el-select clearable size="mini" v-model="scope.row.boName" :disabled="sonDisable"
                  @focus="chooseSon(scope.$index, 'BO_PARAM', true, '请选择商机', {charger: basicForm.charger, customer: scope.row.customer})"
                  @clear="clearHang(scope.$index, '请选择商机')" style="width: 300px">
                  <el-option v-for="item in boOptions" :key="item.id" :label="item.name" :value="item.code" />
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column :readonly="sonDisable" show-overflow-tooltip label="营销活动" prop="marketingCampaign"
            min-width="200">
            <template slot-scope="scope">
              <el-form-item class="hang" :prop="'mkBoPlanItemList.' + scope.$index + '.' + 'marketingCampaign'">
                <el-input clearable :readonly="sonDisable" size="mini" v-model="scope.row.marketingCampaign" />
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column fixed="right" label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="mini" :disabled="sonDisable" @click="delLine(scope.$index, scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </el-card>

    <div class="btn_group">
      <el-col :span="1.5">
        <el-button size="mini" plain @click="back">返回</el-button>
      </el-col>

      <el-col :span="1.5" style="margin: 0 10px;">
        <el-button type="primary" size="mini" plain @click="save" v-if="sonPageStu == 'add' || sonPageStu == 'edit'">保存
        </el-button>
      </el-col>

      <Refers ref="refer" @doSubmit="selectionsToInput" :single="true" />
    </div>
  </div>
</template>

<script>
  import {
    addPlan,
    getPlanDetail,
    editPlan
  } from '@/api/business/spd/task_management/visitingPlan/visitingPlan.js'
  import Refers from '@/components/Refers/refers.vue'
  // 用于回显参照框数据
  import {
    getRefer
  } from '@/api/purchase/basic.js'
  export default {
    name: 'addPlanList',
    props: ['pageStu', 'row', 'disable'],
    dicts: ['mk_plan_state', 'mk_plan_route_type', 'mk_bo_behavior_goal'],
    components: {
      Refers
    },
    model: {
      prop: 'isList',
      event: 'jugislist'
    },
    data() {
      return {
        // 不能直接改变props传来的值
        sonPageStu: this.pageStu,
        sonDisable: this.disable,
        // dialog: {
        //   config: false
        // },
        basicForm: {
          id: '',
          planCode: '',
          planName: '',
          charger: this.$store.state.user.id,
          chargerName: this.$store.state.user.nickName,
          dept: this.$store.state.user.adminDept,
          deptName: this.$store.state.user.adminDeptName,
          startDate: this.getNextWeek(1),
          deadlineTime: this.getNextWeek(7),
          type: '0',
          state: '0',
          marketingArea: '',
          marketingAreaName: '',
          mkBoPlanItemList: []
        },
        delPlanItemList: [],
        basicRules: {},
        tableList: [],
        referCondition: {
          type: '',
          isPage: true,
          title: ''
        },
        tableIndex: null,
        ids: [],
        boOptions: [],
        linkOptions: [],
        manOptions: [],
        personOptions: [],
        deptOptions: [],
        customerOptions: [],
        salesAreaOptions: [],
        selection: [],
        //定义主表开始时间的范围不能早于今天
        pickerOptionsStart: {
          disabledDate: (time) => {
            return time.getTime() < Date.now() - 1 * 24 * 60 * 60 * 1000 || time.getTime() > (new Date(this.basicForm
              .deadlineTime)).getTime()
          }
        },
        //定义主表截止时间的范围不能早于开始时间
        pickerOptionsEnd: {
          disabledDate: (time) => {
            return time.getTime() < (new Date(this.basicForm.startDate)).getTime()
          }
        },
        //定义子表日期的范围不能早于开始时间且不能晚于截止时间
        pickerOptions: {
          disabledDate: (time) => {
            return time.getTime() < (new Date(this.basicForm.startDate)).getTime() || time.getTime() > (new Date(this
              .basicForm.deadlineTime)).getTime()
          }
        },
        //判断默认明细行带出完毕后，增行日期等于当前日期的标识
        isFlag: false
      }
    },
    updated() {},
    mounted() {},
    created() {
      //查看系统数据
      console.log(this.$store.state.user, 'this.$store.state.user')
      if (this.pageStu == 'check') {
        console.log('数据', this.row)
        this.getDetails(this.row)
      } else if (this.pageStu == 'edit') {
        console.log('数据', this.row)
        this.getDetails(this.row)
      } else if (this.pageStu == 'add') {
        //新增时默认带出7条明细行
        this.defaultDetailLine(7)
        this.basicForm.startDate = this.basicForm.startDate + ' 00:00:00'
        this.basicForm.deadlineTime = this.basicForm.deadlineTime + ' 00:00:00'
        this.basicForm.mkBoPlanItemList.forEach(item => {
          item.date = item.date + ' 00:00:00'
        })
      }
    },
    methods: {
      copy() {
        this.isFlag = true;
        this.$modal.notifySuccess("复制成功");
        this.sonPageStu = 'add'
        this.sonDisable = false
        // this.getDetails(this.row)
        this.basicForm.id = ''
        this.basicForm.planCode = ''
        this.basicForm.createBy = null
        this.basicForm.createByName = null
        this.basicForm.state = 0
        //复制之后执行人和部门变为当前账号所有者
        this.basicForm.charger = this.$store.state.user.id,
        this.basicForm.chargerName = this.$store.state.user.nickName
        this.basicForm.dept = this.$store.state.user.adminDept
        this.basicForm.deptName = this.$store.state.user.adminDeptName
        if (this.basicForm.chargerName) {
          this.reBackRefer('CONTACTS_PARAM', this.basicForm.chargerName)
        }
        if (this.basicForm.marketingAreaName) {
          this.reBackRefer('MK_SALESAREA_PARAM', this.basicForm.marketingAreaName)
        }
        if (this.basicForm.deptName) {
          this.reBackRefer('DEPT_PARAM', this.basicForm.deptName)
        }
        this.basicForm.mkBoPlanItemList.forEach(item => {
          item.planCode = ''
        })
      },
      handleData() {
        console.log('222')
        // 复制新增把id,编码,创建人置为空,子表去掉id
        this.basicForm.id = ''
        this.basicForm.planCode = ''
        if (this.basicForm.mkBoPlanItemList.length !== 0) {
          this.basicForm.mkBoPlanItemList.forEach(item => {
            if (item.id) {
              delete item.id
            }
            if (item.planId) {
              delete item.planId
            }
          })
        }
      },
      // 如果需要回显则调用详情接口
      getDetails(row) {
        getPlanDetail(row.id).then(res => {
          if (res.code === 200) {
            this.basicForm = res.data
            this.basicForm.startDate = this.basicForm.startDate + ' 00:00:00'
            this.basicForm.deadlineTime = this.basicForm.deadlineTime + ' 00:00:00'
            this.basicForm.mkBoPlanItemList.forEach(item => {
              item.date = item.date + ' 00:00:00'
            })
          }
        }).then(() => {
          this.loading = false
        }).catch(err => {
          this.loading = false
        })
      },
      async save() {
        if (this.basicForm.mkBoPlanItemList.length !== 0) {
          this.$refs['basic'].validate((valid, obj) => {
            if (valid) {
              this.$modal.loading("保存中...");
              if (this.sonPageStu == 'add') {
                this.planNameAssignment();
                this.handleData()
                addPlan(this.basicForm).then(res => {
                  console.log(333)
                  if (res.code === 200) {
                    this.$modal.notifySuccess("保存成功");
                    this.$modal.closeLoading();
                    this.back()
                  }
                }).catch(err => {
                  this.$modal.closeLoading();
                })
              } else if (this.sonPageStu == 'edit') {
                this.planNameAssignment();
                let list = []
                list.push(...this.basicForm.mkBoPlanItemList, ...this.delPlanItemList)
                // 深拷贝一下参数对象
                let param = JSON.parse(JSON.stringify(this.basicForm))
                console.log('深拷贝对象', param);
                param.mkBoPlanItemList = list
                // this.basicForm.mkBoPlanItemList.push(...this.delPlanItemList)
                editPlan(param).then(res => {
                  if (res.code === 200) {
                    this.$modal.notifySuccess("编辑成功");
                    this.$modal.closeLoading();
                    this.back()
                  }
                }).catch(err => {
                  this.$modal.closeLoading();
                })
              }
            } else {
              // 校验加弹窗
              const jiaoyan = []
              for (let key in obj) {
                jiaoyan.push(obj[key][0].message);
              }
              this.$modal.notifyWarning(jiaoyan[0]);
              return false
            }
          })
        } else {
          this.$modal.msgWarning("明细信息不能为空！");
        }
      },
      //拜访计划名称赋值
      planNameAssignment() {
        console.log(this.basicForm.startDate.substr(5, 5))
        this.basicForm.planName = this.basicForm.chargerName + '-' + '周计划拜访' + '(' + this.basicForm.startDate.substr(5,
          5) + '至' + this.basicForm.deadlineTime.substr(5, 5) + ')'
      },
      // 增行
      addLine(date) {
        if ((this.sonPageStu == 'edit') || (this.isFlag && this.sonPageStu == 'add')) {
          date = this.basicForm.startDate;
        }
        const newLine = {
          id: null,
          planId: this.basicForm.id,
          planCode: this.basicForm.planCode,
          date: date,
          customer: null,
          customerName: null,
          contact: null,
          contactName: null,
          address: null,
          purpose: null,
          bo: null,
          boName: null,
          marketingCampaign: null,
          delFlag: 0,
          // 新增字段
          model: null,
        }
        this.basicForm.mkBoPlanItemList.push(newLine)
      },
      // 批量删除按钮
      delItems() {
        if (this.ids.length == 0) {
          this.$modal.msgWarning("请至少选择一条数据");
        } else {
          this.$modal.confirm('确认信息').then(() => {
            for (let i = 0; i < this.selection.length; i++) {
              this.delLine({}, this.selection[i]);
            }
          }).catch(() => {})
        }
      },
      delLine(index, row) {
        console.log('删除行:', index)
        console.log('改变行:', row)
        row.delFlag = '2'
        let delList = []
        delList = this.basicForm.mkBoPlanItemList.filter(item => {
          return item.delFlag == '2'
        })
        this.basicForm.mkBoPlanItemList = this.basicForm.mkBoPlanItemList.filter(item => {
          return item.delFlag == '0'
        })
        this.delPlanItemList.push(...delList)
        console.log('删除的数组', this.delPlanItemList)
      },
      edit() {
        this.getDetails(this.row)
        this.isFlag = true;
        this.sonPageStu = 'edit'
        this.sonDisable = false
        //调整日期格式
        this.basicForm.startDate = this.basicForm.startDate + ' 00:00:00'
        this.basicForm.deadlineTime = this.basicForm.deadlineTime + ' 00:00:00'
        this.basicForm.mkBoPlanItemList.forEach(item => {
          item.planCode = this.basicForm.planCode
          item.date = item.date + ' 00:00:00'
        })
      },
      back() {
        this.$emit('jugislist', true)
        // let queryParams = {
        //   pageNum: 1,
        //   pageSize: 10
        // }
        this.$emit('refresh')
      },
      handleSelectionChange(selection) {
        console.log('选中', selection)
        this.selection = selection;
        this.ids = selection.map(item => item.id)
        console.log('选中数组', this.ids.join())
      },
      // 回显参照框
      reBackRefer(type, id, title) {
        getRefer({
          type: type,
          id: id
        }).then(res => {
          if (type == 'CONTACTS_PARAM') {
            this.personOptions = res.rows
          }
          if (type == 'MK_SALESAREA_PARAM') {
            this.salesAreaOptions = res.rows
          }
          if (type == 'DEPT_PARAM') {
            this.deptOptions = res.rows
          }
          if (type == 'MkCustomerRule') {
            this.customerOptions = res.rows
          }
          if (type == 'LINKMAN_PARAM') {
            this.linkOptions = res.rows
          }
          if (type == 'BO_PARAM') {
            this.boOptions = res.rows
          }
        })
      },
      //公共基本信息选择参照带出数据
      choose(type, isPage, title) {
        this.referCondition.type = type
        this.referCondition.isPage = isPage
        this.referCondition.title = title
        this.$refs.refer.init(this.referCondition)
      },
      //公共明细行选择参照带出数据
      chooseSon(index, type, isPage, title, parame) {
        this.tableIndex = index
        this.referCondition.type = type
        this.referCondition.isPage = isPage
        this.referCondition.title = title
        if (title == "请选择客户") {
          if (parame.charger) {
            this.referCondition.parame = parame
            this.$refs.refer.init(this.referCondition)
          } else {
            this.$modal.notifyWarning("请先确认执行人");
          }
        } else if (title == "请选择联系人") {
          if (parame.customer) {
            this.referCondition.parame = parame
            this.$refs.refer.init(this.referCondition)
          } else {
            this.$modal.notifyWarning("请先确认客户");
          }
        } else if (title == "请选择商机") {
          if (parame.customer) {
            this.referCondition.parame = parame
            this.$refs.refer.init(this.referCondition)
          } else {
            this.$modal.notifyWarning("请先确认客户");
          }
        }
      },
      //联动清除明细行里其它的字段
      clearHang(index, title) {
        if (title == '请选择执行人') {
          this.basicForm.dept = null
          this.basicForm.deptName = null
          this.basicForm.mkBoPlanItemList.forEach(item => {
            item.customer = null
            item.customerName = null
            item.contact = null
            item.contactName = null
            item.bo = null
            item.boName = null
          })
        }
        // if (title == '请选择开始时间' || title == '请选择截止时间') {
        //   this.basicForm.mkBoPlanItemList.forEach(item => {
        //     item.date = null
        //   })
        // }
        if (title == '请选择客户') {
          this.basicForm.mkBoPlanItemList[index].contact = null
          this.basicForm.mkBoPlanItemList[index].contactName = null
          this.basicForm.mkBoPlanItemList[index].bo = null
          this.basicForm.mkBoPlanItemList[index].boName = null
        }
        if (title == '请选择商机') {
          this.basicForm.mkBoPlanItemList[index].customer = null
          this.basicForm.mkBoPlanItemList[index].customerName = null
          this.basicForm.mkBoPlanItemList[index].bo = null
          this.basicForm.mkBoPlanItemList[index].boName = null
        }
      },
      selectionsToInput(selection) {
        //执行人参照
        if (this.referCondition.type == 'CONTACTS_PARAM') {
          this.personOptions = selection
          this.basicForm.charger = selection[0].id
          this.basicForm.chargerName = selection[0].name
          this.basicForm.dept = selection[0].deptId
          this.basicForm.deptName = selection[0].deptName
        }
        //销售区域参照
        if (this.referCondition.type == 'MK_SALESAREA_PARAM') {
          this.salesAreaOptions = selection
          this.basicForm.marketingArea = selection[0].id
          this.basicForm.marketingAreaName = selection[0].name
        }
        //部门参照
        if (this.referCondition.type == 'DEPT_PARAM') {
          this.deptOptions = selection
          this.basicForm.dept = selection[0].id
          this.basicForm.deptName = selection[0].name
        }
        //客户参照
        if (this.referCondition.type == 'MkCustomerRule') {
          this.customerOptions = selection
          this.basicForm.mkBoPlanItemList[this.tableIndex].customer = selection[0].id
          this.basicForm.mkBoPlanItemList[this.tableIndex].customerName = selection[0].name
        }
        //联系人参照
        if (this.referCondition.type == 'LINKMAN_PARAM') {
          this.linkOptions = selection
          this.basicForm.mkBoPlanItemList[this.tableIndex].contact = selection[0].id
          this.basicForm.mkBoPlanItemList[this.tableIndex].contactName = selection[0].name
        }
        //商机参照
        if (this.referCondition.type == 'BO_PARAM') {
          this.boOptions = selection
          this.basicForm.mkBoPlanItemList[this.tableIndex].bo = selection[0].id
          this.basicForm.mkBoPlanItemList[this.tableIndex].boName = selection[0].name
          this.basicForm.mkBoPlanItemList[this.tableIndex].customer = selection[0].customer
          this.basicForm.mkBoPlanItemList[this.tableIndex].customerName = selection[0].customerName
        }
      },
      //获取当前时间
      getCurrentTime() {
        let date = new Date();
        return date;
      },
      //获取下周七天日期,day表示想要星期几
      getNextWeek(day) {
        const week = [];
        for (let i = 0; i < 7; i++) {
          let Stamp = new Date();
          let num = 7 - Stamp.getDay() + 1 + i;
          Stamp.setDate(Stamp.getDate() + num);
          let Mmonth = Stamp.getMonth() + 1;
          let MMmonth = Mmonth < 10 ? '0' + Mmonth : Mmonth;
          let ddate = Stamp.getDate();
          let dddate = ddate < 10 ? '0' + ddate : ddate;
          week[i] = Stamp.getFullYear() + '-' + MMmonth + '-' + dddate;
        }
        return week[day - 1];
      },
      //新增时默认带出num条明细行
      defaultDetailLine(num) {
        for (let i = 0; i < num; i++) {
          this.addLine(this.getNextWeek(i + 1));
        }
        this.isFlag = true;
      },
      //必选标识
      addRedStar(h, {
        column
      }) {
        return [
          h('span', {
            style: 'color: #F56C6C'
          }, '*'),
          h('span', ' ' + column.label)
        ];
      },
      //改变开始时间时其它时间字段随之改变
      setDateRange(startDate) {
        console.log(startDate);
        let newDate = new Date(startDate);
        newDate.setDate(newDate.getDate() + this.basicForm.mkBoPlanItemList.length - 1);
        this.basicForm.deadlineTime = this.formatDateTime(newDate, 'yyyy-MM-dd 00:00:00');
        console.log(startDate);
        let newDateGoal = new Date(startDate);
        for (let i = 0; i < this.basicForm.mkBoPlanItemList.length; i++) {
          this.basicForm.mkBoPlanItemList[i].date = this.formatDateTime(newDateGoal, 'yyyy-MM-dd 00:00:00');
          newDateGoal.setDate(newDateGoal.getDate() + 1);
        }
      },
      //日期名称格式化
      formatDateTime(date, format) {
        const o = {
          'M+': date.getMonth() + 1, // 月份
          'd+': date.getDate(), // 日
          'h+': date.getHours() % 12 === 0 ? 12 : date.getHours() % 12, // 小时
          'H+': date.getHours(), // 小时
          'm+': date.getMinutes(), // 分
          's+': date.getSeconds(), // 秒
          'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
          S: date.getMilliseconds(), // 毫秒
          a: date.getHours() < 12 ? '上午' : '下午', // 上午/下午
          A: date.getHours() < 12 ? 'AM' : 'PM', // AM/PM
        };
        if (/(y+)/.test(format)) {
          format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
        }
        for (let k in o) {
          if (new RegExp('(' + k + ')').test(format)) {
            format = format.replace(
              RegExp.$1,
              RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
            );
          }
        }
        return format;
      },
    }
  }

</script>

<style lang="scss" scoped>
  .btn_group {
    width: 100%;
    margin: 20px -10px;
    display: flex;
    justify-content: right;
  }

  .btn_grooup {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
  }

  .hang {
    margin: auto;
  }

  .hang ::v-deep .el-form-item__content {
    margin-left: 0px !important;
  }

</style>