xiaoshi_system/src/views/event/components/dialog/addEvent.vue

<template>
  <div class="addEvent">
    <el-dialog :title="title" :visible.sync="dialogVisible" :width="width" :before-close="handleClose">
      <!-- 单个新增（事件） -->
      <div v-if="type == 1">
        <el-form :model="formData[0]" :rules="rules" ref="ruleForm" label-width="90px" label-position="left" class="demo-ruleForm">
          <el-form-item label="事件名称" prop="questionName">
            <el-autocomplete class="inline-input" v-model="formData[0].questionName"
              :fetch-suggestions="querySearchQuestion"
              placeholder="请输入或选择事件" :trigger-on-focus="false"
              @select="handleSelectQuestion" @blur="blur($event, { $index: 0 })" style="width: 100%;">
            </el-autocomplete>
          </el-form-item>
          <el-form-item label="所属客户" prop="clientId">
            <el-select v-model="formData[0].clientId" :disabled="(formData[0].id && !this.row) ? true : false"
              style="width: 100%;" placeholder="请选择客户">
              <el-option
                v-for="item in clientList"
                :key="parseInt(item.value)" :label="item.label" :value="parseInt(item.value)">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="事件日期" prop="eventDate">
            <el-date-picker style="width: 100%" v-model="formData[0].eventDate"
               type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择事件日期时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="事件场景" prop="assistPerson">
            <el-select v-model="formData[0].applicationScenarios[0]" :disabled="(formData[0].id && !this.row) ? true : false"
              style="width: 100%;" placeholder="请选择事件场景">
              <el-option
                v-for="item in commonData.ENTERPRISE_APPLICATION_SCENARIO ? commonData.ENTERPRISE_APPLICATION_SCENARIO : []"
                :key="parseInt(item.value)" :label="item.label" :value="parseInt(item.value)">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="事件描述" prop="description">
            <el-input type="textarea" :rows="2" v-model="formData[0].description" autocomplete="off" placeholder="请输入事件描述"
              ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <!-- 批量新增（事件） -->
      <div v-else-if="type == 2">
        <el-table :data="formData" style="width: 100%" class="twj-table">
          <el-table-column prop="questionName" label="事件名称" align="center">
            <template slot="header">
              <div>
                <el-tooltip class="item" effect="dark" content="事件：商业目标/解决问题/对应项目" placement="top">
                  <span>事件名称<span style="color:red;"> *</span></span>
                </el-tooltip>
              </div>
            </template>
            <template slot-scope="scope">
              <div>
                <el-autocomplete class="inline-input" v-model="scope.row.questionName"
                  :fetch-suggestions="querySearchQuestion" placeholder="请输入或选择事件" :trigger-on-focus="false"
                  @select="handleSelectQuestion" @blur="blur($event, scope)" style="width: 100%;">
                </el-autocomplete>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="eventDate" label="事件时间" align="center">
            <template slot-scope="scope">
              <div>
                <el-date-picker style="width: 100%" v-model="scope.row.eventDate" :disabled="scope.row.id ? true : false"
                  type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择事件日期时间">
                </el-date-picker>
              </div>
            </template>
          </el-table-column>
          
          <el-table-column prop="applicationScenarios" label="事件场景" align="center">
            <template slot-scope="scope">
              <div>
                <!-- multiple -->
                <el-select v-model="scope.row.applicationScenarios[0]" :disabled="scope.row.id ? true : false"
                  style="width: 100%;" placeholder="请选择事件场景">
                  <el-option
                    v-for="item in commonData.ENTERPRISE_APPLICATION_SCENARIO ? commonData.ENTERPRISE_APPLICATION_SCENARIO : []"
                    :key="parseInt(item.value)" :label="item.label" :value="parseInt(item.value)">
                  </el-option>
                </el-select>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="description" label="事件描述" align="center" width="250px">
            <template slot-scope="scope">
              <div>
                <el-input type="textarea" :rows="1" v-model="scope.row.description" autocomplete="off"
                  placeholder="请输入事件描述" :disabled="scope.row.id ? true : false"></el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="事件操作" align="" width="100px">
            <template slot-scope="scope">
              <div>
                <el-tooltip class="item" effect="dark" content="增加事件" placement="top">
                  <i @click="addRow(scope)" class="el-icon-plus btn"></i>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="删除事件" placement="top">
                  <i @click="deleteRow(scope)" v-if="scope.$index != 0" class="el-icon-close btn"></i>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="handleClose()" style="width:100px">取消</el-button>
        <el-button size="small" @click="resetForm()" style="width:100px">重置</el-button>
        <el-button type="primary" @click="submitForm1()" size="small" style="width:100px">确定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  props: [],
  data() {
    return {
      //弹窗标题
      title: '',
      //弹窗状态
      dialogVisible: false,
      //弹窗宽度
      width: '800px',
      //表格数据
      formData: [
        {
          questionName: '',
          eventDate: '',
          description: '',
          applicationScenarios: [],
        }
      ],
      //检验规则
      rules: {
        questionName: [ { required: true, message: '请输入事件名称', trigger: 'blur' },],
      },
      //应用场景数据
      commonData: {},
      //弹窗类型
      type: 1,
      //客户集合
      clientList:[]
    }
  },
  watch: {},
  async mounted() {
    // 应用场景(是通过字典还是接口待定)
    await this.getCommonData()
    // 查询所有事件
    // await this.questionEventList()
  },
  methods: {
    //打开弹窗，判断是编辑还是添加，同时判断是批量添加还是添加单个事件（type==1是单个，type==2是批量）
    open(data, type) {
      this.type = type
      if (data) {
        this.title = '编辑事件'
        this.formData[0] = JSON.parse(JSON.stringify(data))
        console.log(this.formData);
      } else {
        if (this.type == 1) {
          this.title='新增事件'
        } else {
          this.title='批量新增事件'
        }
        this.formData = [
          {
            questionName: '',
            eventDate: '',
            description: '',
            applicationScenarios: [],
          }
        ]
      }
      this.dialogVisible = true
    },
    //关闭弹窗
    handleClose() {
      if (this.type=='1') {
        this.$refs.ruleForm.resetFields()
      }
      this.dialogVisible = false
    },
    // 请求应用场景(是通过字典还是接口待定)
    async getCommonData() {
      await this.$api.getCommonData({ keys: 'QUERY_GROUP,ENTERPRISE_APPLICATION_SCENARIO,INVESTIGATION_TYPE' }).then(response => {
        this.commonData = response.data
      })
    },
    // 检验事件并提交保存请求
    submitForm1() {
      var list = []
      try {
        if (this.type=='1') {//单个新增事件
          list=this.formData
        } else {//多个新增事件
          this.formData.forEach(item => {
            var a = false
            for (let key in item) {
              if (key != 'applicationScenarios') {
                if (item[key] != '' && item[key] != null) {
                  a = true
                }
              }else {
                if (item[key].length > 0) {
                  a = true
                }
              }
            }
            if (a == true) {
              if (item.questionName != '') {
                list.push(item)
              } else {
                throw new Error('事件名称不能为空')
              }
            }
          })
        }
        var arr = [...new Set(list.map(item => { return item.questionName }))]
        if (arr.length < list.length) {
          this.$message.error(`存在重复的事件名称，请重定义事件名称`)
          return false
        }
        var edit = false
        if (this.row) {
          edit = true
        }
        this.addFormData({ list: list, option: 1, edit })
        // this.$emit('formData', { list: list, option: 1, edit })
      } catch (error) {
        this.$message.error(error)
      }
    },
    // 提交保存事件
    addFormData(val) {
      let lists = JSON.parse(JSON.stringify(val.list))
      let forms = {
        projectId: this.projectId,
        eventAddNewDTOs:lists
      }
      if (this.type=='1') {//单个事件新增
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            this.addInterface(forms)
          } 
        })
      } else {//多个事件新增
        this.addInterface(forms)
      }
    },
    //提交保存事件接口
    addInterface(forms) {
      this.$api.eventAddNew(forms).then(res => {
        if (res.code == 200) {
          this.$emit('isSuccess','新增成功')
          this.$message.success('事件新增成功')
          this.handleClose()
        }
      }).catch(error => {
        this.$message.error(error.message)
      })
    },
    //重置全部事件
    resetForm() {
      this.$confirm('此操作将重置全部事件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (this.type == 1) {
          this.$refs.ruleForm.resetFields();
        }
        this.formData = [
          {
            questionName: '',
            eventDate: '',
            description: '',
            applicationScenarios: [],
          }
        ]
        // this.$emit('formData', {list:this.formData,option:1})
        this.$message.success('事件已全部重置')
      }).catch(() => {
        this.$message.info('重置操作已取消')
      });
    },
    // 增加事件
    addRow() {
      this.formData.push(
        {
          questionName: '',
          eventDate: '',
          description: '',
          applicationScenarios: [],
        }
      )
    },
    //删除事件
    deleteRow(row) {
      this.formData.splice(row.$index, 1)
    },
    // 查询所有事件(不需要)
    async questionEventList() {
      await this.$api.eventQuery({}).then(res => {
        if (res.code == 200) {
          this.questionNameArr = res.data.list
        }
      })
    },
    //获取下拉建议数据（远程获取）
    querySearchQuestion(queryString, cb) {
      var restaurants = this.questionNameArr.map(item => {
        item.value = item.questionName;
        return item;
      });
      var results = queryString ? restaurants.filter(this.createFilterQuestion(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    // 对下拉建议列表的数据进行处理
    createFilterQuestion(queryString) {
      return (restaurant) => {
        console.log(restaurant);
          return (restaurant.value.indexOf(queryString) != -1);
      };
    },

    // input框切换选择
    handleSelectQuestion(val) {
      let a = this.formData.findIndex(item => {
        return item.id == val.id
      })
      if (a == -1) {
        // this.$set(this.formData,this.index,JSON.parse(JSON.stringify(val)))
      } else {
        this.$message.error('事件已存在')
        this.$set(this.formData, this.index, {})
        return false
      }
    },

    //失去焦点（远程找是否存在名称相同事件，如果存在就直接赋值）
    blur(ev, val) {

    },

  },
}
</script>

<style lang="scss">
.addEvent {
  .dialog-footer {
    // text-align: center;
  }
}

.twj-table td.el-table__cell,
.twj-table th.el-table__cell.is-leaf {
  // border:none !important;
  border: 5px solid white !important;
}

.twj-table::before {
  background-color: transparent;
}

.twj-table tr td:first-child {
  border-right: none !important;
  border-left: none !important;
}

.twj-table tr td:last-child {
  border-right: none !important;
  border-left: none !important;
}
</style>
<style lang="scss">
.btn {
  color: black;
  margin-left: 10px;
  font-size: 18px;
  text-align: center;
  cursor: pointer;
}

.btn:hover {
  color: aqua;
}
</style>