|
@@ -0,0 +1,177 @@
|
|
|
|
+<template>
|
|
|
|
+ <div>
|
|
|
|
+ <a-modal
|
|
|
|
+ class="modalBox"
|
|
|
|
+ :title="titleText"
|
|
|
|
+ v-model="isshow"
|
|
|
|
+ @cancle="cancel"
|
|
|
|
+ width="45%"
|
|
|
|
+ :centered="true">
|
|
|
|
+ <a-form :form="form" @submit="handleSubmit">
|
|
|
|
+ <!-- 用户名称 -->
|
|
|
|
+ <a-form-item label="角色名称" :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
|
|
|
|
+ <a-input
|
|
|
|
+ placeholder="请输入角色名称(最多30个字符)"
|
|
|
|
+ allowClear
|
|
|
|
+ :maxLength="30"
|
|
|
|
+ id="roleModal-name"
|
|
|
|
+ v-decorator="['formData.name', {
|
|
|
|
+ initialValue: formData.name,getValueFromEvent: $filterEmpty,
|
|
|
|
+ rules: [{ required: true, message: '请输入角色名称(最多30个字符)!' },{pattern:'^[^<|>]{1,30}$',message:'请输入不含<或>的字符,最多30个字符'}] }]"
|
|
|
|
+ />
|
|
|
|
+ </a-form-item>
|
|
|
|
+
|
|
|
|
+ <!-- 状态 -->
|
|
|
|
+ <a-form-item label="状态" :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
|
|
|
|
+ <a-radio-group
|
|
|
|
+ name="radioGroup"
|
|
|
|
+ id="roleModal-isEnable"
|
|
|
|
+ v-decorator="[
|
|
|
|
+ 'formData.isEnable',
|
|
|
|
+ {
|
|
|
|
+ initialValue: formData.isEnable,
|
|
|
|
+ rules: [{ required: true, message: '请选择状态!' }] },
|
|
|
|
+ ]"
|
|
|
|
+ >
|
|
|
|
+ <a-radio :value="1">启用</a-radio>
|
|
|
|
+ <a-radio :value="0">禁用</a-radio>
|
|
|
|
+ </a-radio-group>
|
|
|
|
+ </a-form-item>
|
|
|
|
+
|
|
|
|
+ <a-form-item label="角色描述" :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
|
|
|
|
+ <a-textarea
|
|
|
|
+ id="roleModal-remarks"
|
|
|
|
+ :maxLength="500"
|
|
|
|
+ v-decorator="[
|
|
|
|
+ 'formData.remarks',
|
|
|
|
+ { initialValue: formData.remarks,getValueFromEvent: $filterEmpty,
|
|
|
|
+ rules: [] },
|
|
|
|
+ ]"
|
|
|
|
+ style="min-height: 60px;"
|
|
|
|
+ placeholder="请输入角色描述(最多500个字符)"
|
|
|
|
+ autosize />
|
|
|
|
+ </a-form-item>
|
|
|
|
+
|
|
|
|
+ <a-form-item :wrapper-col="{ span: 24, offset: 10 }">
|
|
|
|
+ <a-button type="primary" @click="handleSubmit()" id="roleModal-handleSubmit" :style="{ marginRight: '15px' }">
|
|
|
|
+ 保存
|
|
|
|
+ </a-button>
|
|
|
|
+ <a-button :style="{ marginLeft: '15px' }" @click="handleCancel()" id="roleModal-handleCancel">
|
|
|
|
+ 取消
|
|
|
|
+ </a-button>
|
|
|
|
+ </a-form-item>
|
|
|
|
+ </a-form>
|
|
|
|
+
|
|
|
|
+ </a-modal>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+import { STable, VSelect } from '@/components'
|
|
|
|
+import { saveRolePower } from '@/api/power-role.js'
|
|
|
|
+export default {
|
|
|
|
+ name: 'RoleModal',
|
|
|
|
+ components: {
|
|
|
|
+ STable, VSelect
|
|
|
|
+ },
|
|
|
|
+ props: {
|
|
|
|
+ visible: {
|
|
|
|
+ type: Boolean,
|
|
|
|
+ default: false
|
|
|
|
+ },
|
|
|
|
+ data: {
|
|
|
|
+ type: Object,
|
|
|
|
+ default: function () {
|
|
|
|
+ return {}
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ data () {
|
|
|
|
+ return {
|
|
|
|
+ titleText: '新增角色',
|
|
|
|
+ isshow: this.visible,
|
|
|
|
+ formLayout: 'horizontal',
|
|
|
|
+ form: this.$form.createForm(this, { name: 'roleModal' }),
|
|
|
|
+ formData: {
|
|
|
|
+ name: '',
|
|
|
|
+ isEnable: '', // 活动状态
|
|
|
|
+ remarks: ''
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ cancel (e) {
|
|
|
|
+ this.clear()
|
|
|
|
+ this.$emit('close')
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ // 保存提交
|
|
|
|
+ handleSubmit () {
|
|
|
|
+ const _this = this
|
|
|
|
+ this.form.validateFields((err, values) => {
|
|
|
|
+ if (!err) {
|
|
|
|
+ console.log(values.formData, ' formData.type222222222')
|
|
|
|
+ saveRolePower(Object.assign(this.formData, values.formData)).then(res => {
|
|
|
|
+ console.log(res, 'res--save')
|
|
|
|
+ if (res.status + '' === '200') {
|
|
|
|
+ this.$message.success(res.message ? res.message : '保存成功')
|
|
|
|
+ this.$emit('refresh')
|
|
|
|
+ setTimeout(function () {
|
|
|
|
+ _this.cancel()
|
|
|
|
+ }, 300)
|
|
|
|
+ } else {
|
|
|
|
+ // this.$message.error(res.message)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ // 取消
|
|
|
|
+ handleCancel () {
|
|
|
|
+ this.cancel()
|
|
|
|
+ },
|
|
|
|
+ clear () {
|
|
|
|
+ this.form.resetFields()
|
|
|
|
+ delete this.formData.id
|
|
|
|
+ this.formData.name = ''
|
|
|
|
+ this.formData.isEnable = ''
|
|
|
|
+ this.formData.remarks = ''
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ mounted () {
|
|
|
|
+ },
|
|
|
|
+ beforeCreate () {
|
|
|
|
+ this.form = this.$form.createForm(this, { name: 'roleModal' })
|
|
|
|
+ },
|
|
|
|
+ watch: {
|
|
|
|
+ visible (newValue, oldValue) {
|
|
|
|
+ this.isshow = newValue
|
|
|
|
+ },
|
|
|
|
+ isshow (newValue, oldValue) {
|
|
|
|
+ if (newValue) {
|
|
|
|
+ if (this.data.id) { // 编辑
|
|
|
|
+ this.titleText = '编辑角色'
|
|
|
|
+ this.formData = Object.assign({}, this.data)
|
|
|
|
+ delete this.formData.no
|
|
|
|
+ this.formData.isEnable = Number(this.formData.isEnable)
|
|
|
|
+ console.log(this.formData, 'this.formData')
|
|
|
|
+ } else {
|
|
|
|
+ this.titleText = '新增角色'
|
|
|
|
+ }
|
|
|
|
+ } else {
|
|
|
|
+ this.cancel()
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style >
|
|
|
|
+ .modalBox{
|
|
|
|
+ }
|
|
|
|
+ .ant-modal-footer {
|
|
|
|
+ display: none;
|
|
|
|
+ }
|
|
|
|
+</style>
|