role-add-or-update.vue

<template lang="pug">
    el-dialog( :visible.sync='visible' width='35%' :append-to-body='true' :before-close="handleClose")
        div.title-bold(slot='title') {{!id ? '新增角色' : '编辑角色'}}
        div()
            el-form(:model='dataForm' :rules='dataRule', ref='dataForm', label-width='80px')
                el-row()
                    el-col(:span='24' )
                        el-form-item(label='角色名称', prop='roleName')
                            el-input.mywidth(v-model='dataForm.roleName', placeholder='角色名称')
                    el-col(:span='24')
                        el-form-item(label='角色描述', prop='remark')
                            el-input.mywidth(v-model='dataForm.remark' type="textarea" :rows="2" placeholder='角色描述')
            div(slot='footer' align='center')
                el-button(type='primary' size='medium' @click='cancel') 取消
                el-button(type='primary' size='medium'  @click='dataFormSubmit()' v-prevent-re-click) 保存
</template>

<script>
export default {
  data() {
    var valiName = (rule, value, callback) => {
      if (!value) {
        callback(new Error('角色名称不能为空！'))
      } else if (value.replace(/[\u0391-\uFFE5]/g, 'aa').length > 20) {
        callback(new Error('长度在 1 到 20 个字符'))
      } else {
          callback()
      }
    }
    return {
      clickFlag: false,
      id: '',
      visible: false,
      menuList: [],
      menuListTreeProps: {
        label: 'name',
        children: 'children'
      },
      dataForm: {
        id: '',
        roleName: '',
        remark: ''
      },
      dataRule: {
        roleName: [
          { required: true, validator: valiName, trigger: ['blur', 'change'] }
        ],
        remark: [
          {
            min: 1,
            max: 100,
            message: '长度在 1 到 100 个字符',
            trigger: ['change', 'blur']
          }
        ]
      }
      // tempKey: -666666 // 临时key, 用于解决tree半选中状态项不能传给后台接口问题. # 待优化
    }
  },
  // watch: {
  //     visible(newValue) {
  //         if (newValue === false) {
  //             if (this.$refs.dataForm) this.$refs.dataForm.resetFields()
  //         }
  //     }
  // },
  methods: {
    init(row) {
      this.clickFlag = false
      this.id = row.roleId
      this.visible = true
      this.clickFlag = false
      if (row) {
        this.dataForm.roleId = row.roleId
        this.dataForm.roleName = row.roleName
        this.dataForm.remark = row.remark
      } else {
        this.dataForm = {
          id: '',
          roleName: '',
          remark: ''
        }
      }
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.clickFlag = true
          this.$http({
            url: this.$http.adornUrl(
              `/sys/role/${!this.dataForm.roleId ? 'saveRole' : 'updateRole'}`
            ),
            method: 'post',
            data: {
              roleId: this.dataForm.roleId || undefined,
              roleName: this.dataForm.roleName,
              remark: this.dataForm.remark,
              stationId: localStorage.getItem('stationId')
            }
          }).then(data => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500
              })
              this.$emit('reFreshDataList')
              this.visible = false
            } else {
              this.$message.error(data.msg)
            }
            this.clickFlag = false
          })
        }
      })
    },
    handleClose() {
      this.$refs.dataForm.resetFields()
      this.visible = false
    },
    //取消
    cancel() {
      this.$confirm('确认取消?', !this.id ? '新增角色' : '编辑角色', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.handleClose()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退出'
          })
        })
    }
  }
}
</script>