dbd-meeting-html/src/views/admin/meeting/modules/ShowroomRecordModal.vue

<template>
  <a-modal
    title="操作"
    style="top: 20px;"
    :width="800"
    v-model="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
  >
    <a-form :form="form">
      <a-form-item style="display:none">
        <a-input v-decorator="['id']"/>
      </a-form-item>
      <a-form-item style="display:none">
        <a-input v-decorator="['version']"/>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="主题">
        <a-input placeholder="展厅主题" v-decorator="['title',{rules: [{ required: true, message: '主题'}]}]"/>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="预约开始时间">
        <a-date-picker
          format='YYYY-MM-DD HH:mm:ss'
          valueFormat='YYYY-MM-DD HH:mm:ss'
          v-decorator="['startTime',{rules: [{ required: true, message: '预约开始时间'}]}]"
          :show-time="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }"
          type="date"
          placeholder="选择时间"
          style="width: 100%;"
        />
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="预约开始时间">
        <a-date-picker
          format='YYYY-MM-DD HH:mm:ss'
          valueFormat='YYYY-MM-DD HH:mm:ss'
          v-decorator="['endDate',{rules: [{ required: true, message: '预约结束时间'}]}]"
          :show-time="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }"
          type="date"
          placeholder="选择时间"
          style="width: 100%;"
        />
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="拟参观区域">
        <a-select
          mode="multiple"
          placeholder="拟参观区域"
          style="width: 200px"
          @change="handleChange"
          @popupScroll="popupScroll"
          v-decorator="['visitArea',{rules: [{ required: true, message: '请选择拟参观区域'}]}]"
        >
          <a-select-option value="展厅(2楼)">
            展厅(2楼)
          </a-select-option>
          <a-select-option value="公共服务配套区(15 楼)">
            公共服务配套区(15楼)
          </a-select-option>
          <a-select-option value="中电郑州、生态企业(16楼)">
            中电郑州、生态企业(16楼)
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="预约人员">
        <a-button type="dashed" icon="plus" @click="addRow" class="addRowBtn">
          新增一行
        </a-button>
      </a-form-item>
      <div style='margin-left: 80px'>
        <div class="dynamic-wrap" :style="{ maxHeight: wrapHeight + 'px' }">
          <div v-for="item in keysList" :key="item">
            <a-row :gutter="24">
              <a-col :span="6">
                <a-form-item label="名称" :labelCol="{span: 8}" :wrapperCol="{span: 16}">
                  <a-input
                    placeholder="请填写名称"
                    v-decorator="[
                  `${title}Name[${item}]`,
                  {
                    initialValue: arr[item] ? arr[item].name : undefined,
                    rules: [{ required: true, message: '请填职位' }]

                  }
                ]"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item label="职位" :labelCol="{span: 9}" :wrapperCol="{span: 15}">
                  <a-input
                    placeholder="请填职位"
                    v-decorator="[
                  `${title}Job[${item}]`,
                  {
                    initialValue: arr[item] ? arr[item].job : undefined,
                    rules: [{ required: true, message: '请填职位' }]
                  }
                ]"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item label="手机号" :labelCol="{span: 8}" :wrapperCol="{span: 16}">
                  <a-input
                    placeholder="请填手机号"
                    v-decorator="[
                  `${title}Phone[${item}]`,
                  {
                    initialValue: arr[item] ? arr[item].phone : undefined,
                  }
                ]"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="2" style="padding-left: 0px">
                <a-form-item :labelCol="{span: 0}" :wrapperCol="{span: 24}">
                  <template v-if="keysList.length > 1">
                    <a-button type="dashed" icon="minus" @click="removeRow(item)" class="minusRowBtn"></a-button>
                  </template>
                </a-form-item>
              </a-col>
            </a-row>
          </div>

        </div>
      </div>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="拟参观区域">
        <a-select
          placeholder="选择参观目的"
          style="width: 200px"
          v-decorator="['visitType',{rules: [{ required: true, message: '拟参观区域'}]}]"
        >
          <a-select-option v-for="item in recordOptions" :key="item" :value="item.value">
            {{ item.text }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="讲解需求">
        <a-switch   v-decorator="['explainNeedType',{valuePropName: 'checked' , rules: [{ required: true, message: '讲解需求'}]}]" />
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="会议室需求">
        <a-switch v-decorator="['meetingNeedType',{valuePropName: 'checked' ,rules: [{ required: true, message: '会议室需求'}]}]" />
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="摄影需求">
        <a-switch v-decorator="['photographType',{valuePropName: 'checked' ,rules: [{ required: true, message: '摄影需求'}]}]" />
      </a-form-item>
    </a-form>
  </a-modal>



</template>
<script>
    import {saveShowroomRecord,get} from '@/api/admin/meeting/showroomRecord'
    import pick from 'lodash.pick'
    import storage from 'store'
    import moment from 'moment'
    import { getDictArray } from '@/utils/dict'

    let id = 0;
    export default {
  name: 'ShowroomRecordModal',
  props: {
    title: {
      type: String,
      default: ''
    },
    wrapHeight: { // 表单容器的高度
      type: Number,
      default: 120
    },
    arr: {
      type: Array,
      default: function () {
        return []
      }
    }

  },
  components: {
  },

  data () {
    return {
      ids: 0,
      keysList: [],
      recordOptions:[],
      visible: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      mdl: {},
      form: this.$form.createForm(this)
    }
  },
  beforeCreate () {
  },
  async created () {
    this.form = this.$form.createForm(this)
    this.init()
    const recordData = await getDictArray('visit_type')
    // 下拉选项
    recordData.map(d => {
      this.recordOptions.push({ text: d.dictLabel, value: d.dictValue })
    })
  },
  methods: {
    init () {
      const arr = [0]
      if (this.arr.length !== 0) {
        for (let i = 1; i < (this.arr).length; i++) {
          arr.push(i)
          this.id = this.id + 1
        }
      }
      this.keysList = arr
    },
    // 移除某行
    removeRow (k) {
      if (this.keysList.length === 1) { // 如果存在可以移除所有行的情况，把条件改为this.keysList.length === 0即可
        return
      }
      this.keysList = this.keysList.filter(item => item !== k)
    },
    // 新增一行
    addRow () {
      this.ids = this.ids + 1
      this.keysList = this.keysList.concat(this.ids)
      console.log(this.keysList)
    },

    moment,


    handleChange(value) {
    },
    popupScroll(){
    },
    add () {
      this.form.resetFields()
      this.edit({ id: 0 })
    },
    edit (record) {
      this.mdl = Object.assign(record)
      this.visible = true
      get(record.id).then(res =>{
        res.visitArea =res.visitArea.split(",")
        let persons = JSON.parse(res.persons)
        let names =persons.map(item=> item.name)
        let jobs =persons.map(item=> item.job)
        let phones =persons.map(item=> item.phone)
        this.form.setFieldsValue({
          visitType:res.visitType.toString(),
          visitArea:res.visitArea,
          Name:names,
          Job:jobs,
          Phone:phones
        })

      })
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.mdl, 'id', 'showroomId', 'userId', 'title', 'stauts',"explainNeedType","meetingNeedType","photographType",
          'reservationNumber', 'cancelTime', 'cancelResaon', 'startTime', 'endDate', 'deleteFlag', 'createBy', 'createTime', 'updateBy', 'updateTime', 'remake'))
      })
    },
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {

        if (!err) {
          console.log('Received values of form: ', values)
          this.confirmLoading = true
          const partOneArr = [];
          values[`Name`].forEach((item, index) => {
            console.log(index)
            const obj = {
              id:new Date().getTime(),
              name: item,
              job: values[`Job`][index],
              phone: values[`Phone`][index]
            }
            partOneArr.push(obj)
          })
          values.persons = JSON.stringify(partOneArr)
          values.visitArea =values.visitArea.join(",")

          values.explainNeedType = values.explainNeedType === true ? 1 : 0
          values.meetingNeedType = values.meetingNeedType === true ? 1 : 0
          values.photographType = values.photographType === true ? 1 : 0


          saveShowroomRecord(values).then(res => {
            if (res.code === 0) {
              this.$message.success('保存成功')
              this.$emit('ok')
              this.visible = false
            } else {
              this.$message.error(res.msg)
            }
          }).catch(() => {
            this.$message.error('系统错误，请稍后再试')
          }).finally(() => {
            this.confirmLoading = false
          })
        }
      })
    }
  },
  watch: {
    /*
      'selectedRows': function (selectedRows) {
        this.needTotalList = this.needTotalList.map(item => {
          return {
            ...item,
            total: selectedRows.reduce( (sum, val) => {
              return sum + val[item.dataIndex]
            }, 0)
          }
        })
      }
      */
  }
}
</script>

<style>
.dynamic-delete-button {
  cursor: pointer;
  position: relative;
  top: 4px;
  font-size: 24px;
  color: #999;
  transition: all 0.3s;
}
.dynamic-delete-button:hover {
  color: #777;
}
.dynamic-delete-button[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}
</style>