esua-epdc-admin/src/views/modules/master/masteruserrelation-add.vue

<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-__masteruserrelation}">
      <el-form :inline="true" :rules="dataRule" ref="dataForm" :model="dataForm" @keyup.enter.native="dataFormSubmitHandle()">
        <el-form-item>
          <el-button type="primary" @click="backToUserRelationList">{{"返回"}}</el-button>
          <el-button type="primary" :disabled="isAble" @click="dataFormSubmitHandle()">{{"确定"}}</el-button>
        </el-form-item>
      </el-form>
      <div v-for="(item, index) in this.formData" :key="index">
        <el-form :inline="true" :rules="dataRule" ref="item" :model="item" @keyup.enter.native="dataFormSubmitHandle()">
          <el-row>
            <div style="text-align: left;">{{"书记"+(index+1)+":"}}</div>
            <el-row>
                <el-form-item label="选择书记：" prop="deptName">
                    <el-input v-model="item.deptName"
                              :disabled="true"
                              type="text"
                              clearable
                              style="width: 30rem;">
                    </el-input>&emsp;
                    <el-input v-model="item.realName"
                              :disabled="true"
                              type="text"
                              clearable
                              style="width: 10rem;">
                    </el-input> &emsp;
                    <el-button @click="selectUserMethod(index)">{{"选择书记"}}</el-button>&emsp;&emsp;
                </el-form-item>
                <el-form-item label="群内昵称：" prop="nickName">
                    <el-input v-model="item.nickName"
                              type="text"
                              style="width: 30rem;">
                    </el-input>&emsp;
                    <el-button @click="deleteUserMethod(index)">{{"删除"}}</el-button>&emsp;&emsp;
                </el-form-item>
            </el-row>
          </el-row>
        </el-form>
      </div>
      <!-- 弹窗, 新增 / 修改 -->
      <master-user v-if="masterUserVisible" ref="masterUser" @refreshDataList="getDataList" v-on:connectResponse="connectResponse"></master-user>
    </div>
  </el-card>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import MasterUser from './master-user'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/cloudAnalysis/masteruserrelation/page',
        getDataListIsPage: true,
        deleteURL: '/cloudAnalysis/masteruserrelation',
        deleteIsBatch: true
      },
      dataForm: {
        id: ''
      },
      masterUserVisible: false,
      isAble: false,
      formData: [{ deptName: '', username: '', nickName: '' }],
      updateIndex: 0,
      dataCheckAble: true
    }
  },
  computed: {
    dataRule () {
      return {
        nickName: [
          { required: this.dataCheckAble, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        realName: [
          { required: this.dataCheckAble, message: this.$t('validate.required'), trigger: 'blur' }
        ]
      }
    }
  },
  components: {
    MasterUser
  },
  methods: {
    // 返回按钮点击事件
    backToUserRelationList () {
      this.$emit('refreshDataList')
      this.$parent.selectComponent = 'Masteruserrelation'
      this.$router.push({ path: '/master-masteruserrelationroute' })
    },
    // 选择书记按钮点击事件
    selectUserMethod (index) {
      this.updateIndex = index
      this.masterUserVisible = true
      this.$nextTick(() => {
        this.$refs.masterUser.init()
      })
      // 关闭数据校验
      this.dataCheckAble = false
    },
    // 删除单个人员
    deleteUserMethod (index) {
      if (this.formData.length === 1) {
        this.formData = [{ deptName: '', username: '', nickName: '' }]
        return false
      }
      this.formData.splice(index, 1)
    },
    // dialog回调函数
    connectResponse (connectResponse) {
      for (var i = 0; i < connectResponse.length; i++) {
        let item = connectResponse[i]
        let nickname = item.username
        this.$set(item, 'nickName', nickname)
      }
      // 打开数据校验
      this.dataCheckAble = true
      if (connectResponse.length === 1) {
        this.formData.splice(this.updateIndex, 1, connectResponse[0])
      } else {
        this.formData = connectResponse
      }
    },
    // 表单提交
    dataFormSubmitHandle () {
      if (this.formData.length < 1 || this.formData[0].username === '') {
        this.$message({
          message: '请选择书记！',
          type: 'warning'
        })
        return false
      }
      // 昵称非空校验
      for (var i = 0; i < this.formData.length; i++) {
        if (this.formData[i].nickName === '' || this.formData[i].nickName === null) {
          this.$message({
            message: '存在空昵称，请完善昵称！',
            type: 'warning'
          })
          return false
        }
      }
      this.isAble = true
      let postData = {
        aformDataParams: this.formData
      }
      this.$http['post'](
        '/cloudAnalysis/masteruserrelation/addMasterUserRelation',
        postData
      ).then(({ data: res }) => {
        if (res.code !== 0) {
          this.isAble = false
          return this.$message.error(res.msg)
        }
        this.$message({
          message: this.$t('prompt.success'),
          type: 'success',
          duration: 500,
          onClose: () => {
            this.isAble = false
            this.$emit('refreshDataList')
            if (res.data !== '') {
              this.$message({
                message: res.data + '已存在！',
                type: 'warning'
              })
            }
            // 返回主列表
            this.backToUserRelationList()
          }
        })
      }).catch(() => {})
    }
  }
}
</script>