15

• 2020 年 9 月 12 日
• 筆記

<template>
  <div>
    <el-dialog
            :show.sync="visible"
            :title="title"
            :visible.sync="visible"
            width="620px"
            @close="$emit('update:dialogShow', false)"
    >
      <el-form
              ref="ruleForm"
              :model="ruleForm"
              :rules="rules"
              label-width="100px"
              class="demo-ruleForm"
              :class="{'form-rules-show':seeType}"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="角色名称:" prop="name">
              <el-input
                      :disabled="seeType"
                      maxlength="20"
                      v-model="ruleForm.name"
                      placeholder="请输入角色名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="角色描述:" prop="describes">
              <el-input
                      :disabled="seeType"
                      type="textarea"
                      resize='none'
                      maxlength="200"
                      v-model="ruleForm.describes"
                      placeholder="请输入角色描述"
                      show-word-limit
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button  @click="resetForm('ruleForm')">取 消</el-button>
        <el-button v-if="!seeType" type="primary" @click="submitForm('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script type="text/ecmascript-6">

export default {
  props: {
    status: {
      type: String,
      default: 'create'
    },
    tabledata: {
      type: [Object, String, Array],
      default: ()=> {}
    },
    dialogShow: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '添加'
    },
  },
  data() {
    return {
      visible: this.dialogShow,
      ruleForm: {
        name: '', // 角色名称
        describes: '', // 角色描述
      },
      areaAnalysis: [],
      // 查看状态，禁止修改
      seeType: false,

      rules: {
        name: [
          { required: true, message: '请选择角色名称', trigger: 'change' },
        ],
        describes: [
          { required: true, message: '请输入角色描述', trigger: 'blur' },
        ]

      }
    };
  },
  created() {
    // 判断是编辑就赋值
    if (this.status != 'create') {
      const oid = {
        id: this.tabledata.id || ''
      }
      this.$api.SystemRole.getRole(oid).then(res=> {
        this.ruleForm = res.data
      }).catch(err=> {
        console.log(err)
      })
    }
    // 如果是查看就禁止输入
    if (this.status == 'see') {
      this.seeType = true
    }
  },
  methods: {
    // 新增||修改
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const odata = {
            name: this.ruleForm.name, // 角色id
            describes: this.ruleForm.describes, // 账号
            id: this.ruleForm.id || ''
          }
          if (this.status == 'create') {
            this.$api.SystemRole.saveRole(odata).then((res)=> {
              if (res.code == 200) {
                this.$message({
                  type: 'success',
                  message: res.msg
                })
              }
              this.$emit('CloseClick')
            })
          } else {
            this.$api.SystemRole.saveRole(odata).then((res)=> {
              if (res.code == 200) {
                this.$message({
                  type: 'success',
                  message: res.msg
                })
              }
              this.$emit('CloseClick')
            })
          }
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      // 执行完毕关闭窗口
      this.$emit('CloseClick')
    }
  }
}
</script>

<style scoped lang="scss">
.demo-ruleForm {
  margin: 0 auto;
  /*padding-top: 45px;*/
  padding-right: 10px;

  .el-col {
    margin-bottom: 24px;
  }
}
/deep/.el-scrollbar__wrap {
  height: calc(100vh - 251px);
}
/* 下拉框 */
/deep/.el-select {
  display: block;
}
</style>