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="100px" class="demo-ruleForm">
          <el-form-item label="事件名称" prop="name">
            <el-autocomplete class="inline-input" v-model="formData[0].name" value-key="name" v-SelectLazyLoading="load"
              :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" v-if="userinfo.tenantType == 1">
            <!-- <el-select v-model="formData[0].clientId" :disabled="(formData[0].id && !this.row) ? true : false" -->
            <el-select ref="select" v-model="formData[0].clientId" clearable filterable remote style="width: 100%;"
              placeholder="请选择客户" v-SelectLazyLoading="loadClient" :remote-method="remoteMethod" :loading="client.loading">
              <el-option v-for="item in clientList" :key="parseInt(item.id)" :label="item.name"
                :value="parseInt(item.id)">
              </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="date" value-format="yyyy-MM-dd"
              placeholder="请选择事件日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="事件场景" prop="scenarioId">
            <!-- <el-select v-model="formData[0].applicationScenarios[0]" :disabled="(formData[0].id && !this.row) ? true : false" -->
            <el-select ref="select2" v-model="formData[0].scenarioId" style="width: 100%;" placeholder="请选择事件场景">
              <el-option
                v-for="item in commonData"
                :key="parseInt(item.value)" :label="item.label" :value="parseInt(item.value)">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="文件上传">
            <myUpload :file-list="handleConcat(formData[0].systemFileList)" @on-change="onchange" @on-remove="onRemove"
              style="height: 180px;"></myUpload>
          </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="name" 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.name" :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" type="datetime"
                  value-format="yyyy-MM-dd" 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.scenarioId" style="width: 100%;" placeholder="请选择事件场景">
                  <el-option
                    v-for="item in commonData"
                    :key="parseInt(item.id)" :label="item.name" :value="parseInt(item.id)">
                  </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" :loading="loading"
          style="width:100px">确定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  props: [],
  data() {
    return {
      loading: false,
      //弹窗标题
      title: '',
      //弹窗状态
      dialogVisible: false,
      //弹窗宽度
      width: '800px',
      //表格数据
      formData: [
        {
          name: '',
          eventDate: '',
          description: '',
          scenarioId: '',
        }
      ],
      //检验规则
      rules: {
        name: [{ required: true, message: '请输入事件名称', trigger: 'blur' },],
        scenarioId: [{ required: true, message: '请选择事件场景', trigger: 'change' },],
      },
      //弹窗类型
      type: 1,
      questionNameArr: {
        queryParams: {
          current: 1,
          size: 10,
        },
        eventInput: '',
        data: []
      },

      //客户集合
      clientList: [],
      // 客户懒加载所需
      client: {
        queryParams: {
          current: 1,
          size: 10,
        },
        isLazy: true,
        loading:false,
      },
      // 文件数组
      files: [],
    }
  },
  watch: {},
  computed: {
    ...mapGetters(["userinfo"]),
    commonData(){
      return this.$store.state.dictMessage.scenario || []
    }
  },
  async mounted() {

  },
  methods: {
    // 自定义组件文件删除
    onRemove(file, fileList) {
      if (file.guid) {
        let a = this.formData[0].systemFileList.findIndex(item => {
          return item.guid == file.guid
        })
        this.formData[0].systemFileList.splice(a, 1)
      } else {
        let a = this.files.findIndex(item => {
          return item.size == file.size
        })
        this.files.splice(a, 1)
      }

    },
    // 自定义组件文件监听
    onchange(file, fileList) {
      if (this.files && this.files.length > 0) {
        let a = this.files.findIndex(item => {
          return item.size == file.size
        })
        if (a != -1) {
          this.$message.error(`${file.raw.name}文件重复`)
          this.files.splice(a, 1, file.raw)
        } else {
          this.files.push(file.raw)
        }
      } else {
        this.files.push(file.raw)
      }

    },
    // 合并已上传的文件和未上传的文件
    handleConcat(arr) {
      let files = (arr || []).concat(this.files)
      return files
    },
    loadClient() {
      if(this.client.queryParams.current * this.client.queryParams.size>=this.client.queryParams.total){
        return false
      }
      this.client.queryParams.current +=1
      this.getAdminClientList()
    },
    remoteMethod(query) {
      // this.client.isLazy = true
      // if (query !== '') {
      //   this.client.loading = true;
      //   this.client.queryParams = {
      //     current: 1,
      //     size: 10,
      //     searchQuery: `name=${query}`
      //   }
      //   this.$api.getAdminClientList(this.client.queryParams).then(response => {
      //     if (response.code == 200) {
      //       this.client.loading = false;
      //       this.clientList = response.data.records
      //     }
      //   }).catch(error => {
      //     this.client.loading = false;
      //   })
      // } else {
      //   this.client.queryParams.name = null
      //   this.clientList = [];
      //   this.getAdminClientList()
      // }
    },
    //获取客户信息
    getAdminClientList() {
      this.$api.getAdminClientList(this.client.queryParams).then(response => {
        this.clientList.push(...response.data.records)
        this.client.queryParams.total = response.data.total
      }).catch(error => {

      })
    },
    //打开弹窗，判断是编辑还是添加，同时判断是批量添加还是添加单个事件（type==1是单个，type==2是批量）
    open(data, type) {
      this.getAdminClientList()
      this.type = type
      if (data) {
        this.title = '编辑事件'
        this.$set(this.formData, 0, data)
      } else {
        if (this.type == 1) {
          this.title = '新增事件'
        } else {
          this.title = '批量新增事件'
        }
        this.formData = [
          {
            name: '',
            eventDate: '',
            description: '',
            scenarioId: '',
          }
        ]
      }
      this.dialogVisible = true
    },
    //关闭弹窗
    handleClose() {
      if (this.type == '1') {
        // this.$refs.select.blur()
        // this.$refs.select2.blur()
        this.$refs.ruleForm.resetFields()
      }
      this.files = []
      this.loading = false
      this.dialogVisible = false
    },

    // 检验事件并提交保存请求
    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 != 'scenarioId') {
              if (item[key] != '' && item[key] != null) {
                a = true
              }
              // }else {
              //   if (item[key].length > 0) {
              //     a = true
              //   }
              // }
            }
            if (a == true) {
              if (item.name != '') {
                list.push(item)
              } else {
                throw new Error('事件名称不能为空')
              }
            }
          })
        }
        var arr = [...new Set(list.map(item => { return item.name }))]
        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))

      if (this.type == '1') {//单个事件新增
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            this.addInterface(lists)
          }
        })
      } else {//多个事件新增
        this.addInterface(lists)
      }
    },
    //提交保存、编辑事件接口
    addInterface(forms) {
      this.loading = true
      let formData = new FormData()
      if (this.files && this.files.length > 0) {
        for (var i = 0; i < this.files.length; i++) {
          formData.append('files', this.files[i])//文件数据
        }
      }
      if (forms[0].systemFileList && forms[0].systemFileList.length > 0) {
        forms[0].fileGuids = forms[0].systemFileList.map(item => {
          return item.guid
        })
      }
      formData.append('event', JSON.stringify(forms[0]))
      if (forms[0].id) {//编辑
        this.$api.updateEvent(formData).then(res => {
          if (res.code == 200) {
            this.$emit('isSuccess', '编辑成功')
            this.$message.success('事件编辑成功')
            this.handleClose()
          }
        }).catch(error => {
          this.loading = false
          this.$message.error(error.message)
        })
      } else {//新增
        this.$api.eventAddEvent(formData).then(res => {
          if (res.code == 200) {
            this.$emit('isSuccess', '新增成功')
            this.$message.success('事件新增成功')
            this.handleClose()
          }
        }).catch(error => {
          this.loading = false
          this.$message.error(error.message)
        })
      }
    },
    //重置全部事件
    resetForm() {
      this.$confirm('此操作将重置全部事件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (this.type == 1) {
          this.$refs.ruleForm.resetFields();
        }
        this.formData = [
          {
            name: '',
            eventDate: '',
            description: '',
            scenarioId: '',
          }
        ]
        // this.$emit('formData', {list:this.formData,option:1})
        this.$message.success('事件已全部重置')
      }).catch(() => {
        this.$message.info('重置操作已取消')
      });
    },
    // 增加事件
    addRow() {
      this.formData.push(
        {
          name: '',
          eventDate: '',
          description: '',
          scenarioId: '',
        }
      )
    },
    //删除事件
    deleteRow(row) {
      this.formData.splice(row.$index, 1)
    },


    // 懒加载事件方法
    load() {
      if (this.questionNameArr.queryParams.current * this.questionNameArr.queryParams.size >= this.questionNameArr.queryParams.total) {
        return false
      }
      this.questionNameArr.queryParams.current++
      this.questionEventList()
    },
    // 查询事件
    async questionEventList() {
      let searchValue = { name: this.questionNameArr.eventInput }
      let params = {
        ...this.questionNameArr.queryParams,//分页信息
        searchQuery: this.$commonJS.objectToString(searchValue)//输入的建议
      }
      await this.$api.queryEvent(params).then(res => {
        if (res.code == 200) {
          this.questionNameArr.data.push(...res.data.data)
          this.questionNameArr.queryParams.total = res.data.total
          this.questionNameArr.cb(this.questionNameArr.data);
        }
      })
    },
    //获取下拉建议事件数据
    async querySearchQuestion(queryString, cb) {
      this.questionNameArr.queryParams.current = 1
      this.questionNameArr.eventInput = queryString
      this.questionNameArr.data = []
      this.questionNameArr.cb = cb
      await this.questionEventList()
    },

    // 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>