Bladeren bron

更新角色

chenrui 3 jaren geleden
bovenliggende
commit
94d29565da
3 gewijzigde bestanden met toevoegingen van 154 en 171 verwijderingen
  1. 67 56
      src/views/power/role/menuModal.vue
  2. 4 24
      src/views/power/role/roleList.vue
  3. 83 91
      src/views/power/role/roleModal.vue

+ 67 - 56
src/views/power/role/menuModal.vue

@@ -2,31 +2,38 @@
   <div>
     <a-modal
       centered
-      class="modalBox"
-      :title="roleName"
+      class="roleMenuEdit-modal"
+      :footer="null"
+      :maskClosable="false"
+      :title="titleText"
       v-model="isshow"
-      @cancle="cancel"
-      :maskClosable="false">
+      @cancle="isshow=false"
+      :width="800">
       <a-spin :spinning="spinning" tip="Loading...">
-        <a-form class="form-box" style="max-height: 600px;" :form="form" @submit="handleSubmit">
-          <a-tree
-            checkable
-            @check="onCheck"
-            @expand="onExpand"
-            :expandedKeys="expandedKeys"
-            :autoExpandParent="autoExpandParent"
-            v-model="checkedKeys"
-            :treeData="treeData"
-          />
-          <a-form-item :wrapper-col="{ offset: 15 }">
-            <a-button type="primary" @click="handleSubmit()" id="menuModal-handleSubmit">
-              保存
-            </a-button>
-            <a-button :style="{ marginLeft: '8px' }" @click="cancel" id="menuModal-handleCancel">
-              取消
-            </a-button>
-          </a-form-item>
-        </a-form>
+        <a-form-model
+          id="roleMenuEdit-form"
+          ref="ruleForm"
+          :model="form"
+          :rules="rules"
+          :label-col="formItemLayout.labelCol"
+          :wrapper-col="formItemLayout.wrapperCol"
+        >
+          <div style="height: 500px;overflow-y: scroll;">
+            <a-tree
+              checkable
+              @check="onCheck"
+              @expand="onExpand"
+              :expandedKeys="expandedKeys"
+              :autoExpandParent="autoExpandParent"
+              v-model="checkedKeys"
+              :treeData="treeData"
+            />
+          </div>
+          <a-form-model-item :label-col="{span: 0}" :wrapper-col="{span: 24}" style="text-align: center;">
+            <a-button type="primary" id="roleMenuEdit-save" @click="handleSubmit()" :style="{ marginRight: '8px' }">保存</a-button>
+            <a-button id="roleMenuEdit-cancel" :style="{ marginLeft: '8px' }" @click="isshow=false">取消</a-button>
+          </a-form-model-item>
+        </a-form-model>
       </a-spin>
     </a-modal>
   </div>
@@ -45,7 +52,7 @@ export default {
       type: Boolean,
       default: false
     },
-    data: {
+    nowData: {
       type: Object,
       default: function () {
         return {}
@@ -56,14 +63,18 @@ export default {
     return {
       spinning: false,
       treeData: [],
-      roleName: '',
+      titleText: '',
       expandedKeys: [],
       autoExpandParent: true,
       checkedKeys: [],
       checkedData: [],
       isshow: this.visible,
-      formLayout: 'horizontal',
-      form: this.$form.createForm(this, { name: 'menuModal' }),
+      formItemLayout: {
+        labelCol: { span: 6 },
+        wrapperCol: { span: 16 }
+      },
+      form: {},
+      rules: {},
       id: '' // 角色id
     }
   },
@@ -76,43 +87,37 @@ export default {
       this.checkedData = [...checkedKeys, ...info.halfCheckedKeys]
       this.checkedKeys = checkedKeys
     },
-    cancel (e) {
-      this.clear()
-      this.$emit('close')
-    },
-
     // 保存提交
     handleSubmit () {
       const _this = this
-      this.form.validateFields((err, values) => {
-        if (!err) {
-          console.log(this.checkedData)
+      this.$refs.ruleForm.validate(valid => {
+        if (valid) {
           if (this.checkedData.length == 0) {
             return this.$message.warning('请先选择菜单')
           }
           const arr = this.checkedData.join(',')
-          console.log({ id: this.id, menuIds: arr })
           _this.spinning = true
           addMenuPower({ id: this.id, menuIds: arr }).then(res => {
-            console.log(res, 'res--save')
-            if (res.status + '' === '200') {
-              this.$message.success(res.message ? res.message : '保存成功')
-              this.$emit('refresh')
+            if (res.status == 200) {
+              _this.$message.success(res.message)
+              _this.$emit('refresh')
               setTimeout(function () {
-                _this.cancel()
+                _this.isshow = false
                 _this.spinning = false
               }, 300)
             } else {
               _this.spinning = false
-              // this.$message.error(res.message)
             }
           })
+        } else {
+          console.log('error submit!!')
+          return false
         }
       })
     },
     clear () {
       this.form.resetFields()
-      this.roleName = ''
+      this.titleText = ''
       this.id = ''
       this.checkedKeys = []
       this.expandedKeys = []
@@ -135,29 +140,35 @@ export default {
       }
     }
   },
-  beforeCreate () {
-    this.form = this.$form.createForm(this, { name: 'menuModal' })
-  },
   watch: {
     visible (newValue, oldValue) {
       this.isshow = newValue
     },
     isshow (newValue, oldValue) {
-      if (newValue) {
-        if (this.data) { // 编辑
-          this.treeData = this.data.allMenuList
-          this.id = this.data.role.id
-          this.roleName = '分配权限' + '(' + this.data.role.name + ')'
-          if (this.data.role.menuIds) {
-            const arr = this.data.role.menuIds.split(',')
+      if (!newValue) {
+        this.$emit('close')
+        this.$refs.ruleForm.resetFields()
+        this.id = ''
+        this.checkedKeys = []
+        this.expandedKeys = []
+        this.titleText = '新增角色'
+      }
+    },
+    nowData: {
+      handler (newValue, oldValue) {
+        if (this.isshow && newValue) {
+          this.treeData = this.nowData.allMenuList
+          this.id = this.nowData.role.id
+          this.titleText = '分配权限' + '(' + this.nowData.role.name + ')'
+          if (this.nowData.role.menuIds) {
+            const arr = this.nowData.role.menuIds.split(',')
             this.checkedData = arr
             // 找出叶子节点
             this.findLeaf(this.treeData, arr)
           }
         }
-      } else {
-        this.cancel()
-      }
+      },
+      deep: true
     }
   }
 }

+ 4 - 24
src/views/power/role/roleList.vue

@@ -28,10 +28,8 @@
         </a-form>
       </div>
       <div class="table-operator">
-        <!-- <a-button v-if="$hasPermissions('B_powerMD_role_add')" type="primary" class="button-error" @click="openModal" id="roleList-openModal">新增</a-button> -->
         <a-button type="primary" v-if="$hasPermissions('B_power_role_add')" class="button-error" @click="openModal" id="roleList-openModal">新增</a-button>
       </div>
-
       <s-table
         ref="table"
         size="default"
@@ -42,22 +40,14 @@
         bordered>
         <!-- 启用禁用 -->
         <span slot="status" slot-scope="text, record">
-          <!-- <a-switch
-            v-if="$hasPermissions('B_powerMD_role_enable')"
-            checkedChildren="启用"
-            unCheckedChildren="禁用"
-            id="roleList-isEnable"
-            v-model="record.isEnable"
-            @change="changeFlagHandle(text, record)" />
-          <span v-else>{{ record.isEnable==1?'已启用':'已禁用' }}</span> -->
           <a-switch
+            v-if="$hasPermissions('B_power_role_enable')"
             checkedChildren="启用"
             unCheckedChildren="禁用"
             id="roleList-isEnable"
             v-model="record.isEnable"
-            v-if="$hasPermissions('B_power_role_enable')"
             @change="changeFlagHandle(text, record)" />
-          <span v-else>--</span>
+          <span v-else>{{ record.isEnable==1?'已启用':'已禁用' }}</span>
         </span>
         <!-- 角色描述 -->
         <template slot="remarks" slot-scope="text, record">
@@ -65,14 +55,6 @@
         </template>
         <!-- 操作 -->
         <span slot="action" slot-scope="text, record">
-          <!-- <a-icon v-if="$hasPermissions('M_powerMD_role_menu')" type="setting" title="菜单权限" :style="{ fontSize: '20px', color: '#e29e14', padding: '0 10px' }" @click="openMenuModal(record)" />
-          <a-icon v-if="$hasPermissions('B_powerMD_role_edit')" type="edit" title="编辑" :style="{fontSize: '20px',color:' #1890FF',padding:' 0 10px'}" @click="handleEdit(record)" />
-          <a-icon
-            type="delete"
-            title="删除"
-            :style="{fontSize: '20px',color: '#f00',padding: '0 10px'}"
-            v-if="!record.isEnable && $hasPermissions('B_powerMD_role_del')"
-            @click="delect(record)" /> -->
           <a-icon type="setting" title="菜单权限" v-if="$hasPermissions('M_power_role_menu')" :style="{ fontSize: '20px', color: '#e29e14', padding: '0 10px' }" @click="openMenuModal(record)" />
           <a-icon type="edit" title="编辑" v-if="$hasPermissions('B_power_role_edit')" :style="{fontSize: '20px',color:' #1890FF',padding:' 0 10px'}" @click="handleEdit(record)" />
           <a-icon
@@ -85,8 +67,8 @@
         </span>
       </s-table>
     </a-spin>
-    <roleModal :visible="showModal" :data="itemData" @refresh="refreshTable" @close="showModal = false"></roleModal>
-    <menuModal :visible="showMenuModal" :data="menuData" @close="showMenuModal = false"></menuModal>
+    <roleModal :visible="showModal" @refresh="$refs.table.refresh(true)" :nowData="itemData" @close="showModal = false"></roleModal>
+    <menuModal :visible="showMenuModal" @refresh="$refs.table.refresh(true)" :nowData="menuData" @close="showMenuModal = false"></menuModal>
   </a-card>
 </template>
 
@@ -170,7 +152,6 @@ export default {
       ],
       // 加载数据方法 必须为 Promise 对象
       loadData: parameter => {
-        console.log(parameter, 'parameter')
         return getPowerRoleList(Object.assign(parameter, this.queryParam)).then(res => {
           const no = (res.data.pageNo - 1) * res.data.pageSize
           for (let i = 0; i < res.data.list.length; i++) {
@@ -218,7 +199,6 @@ export default {
         if (res.status == 200) {
           _this.menuData = res.data
           this.showMenuModal = true
-          console.log(res.data, 'this.itemData')
         }
       })
     },

+ 83 - 91
src/views/power/role/roleModal.vue

@@ -2,64 +2,52 @@
   <div>
     <a-modal
       centered
-      class="modalBox"
+      class="roleEdit-modal"
+      :footer="null"
+      :maskClosable="false"
       :title="titleText"
       v-model="isshow"
-      @cancle="cancel"
-      :maskClosable="false"
-      width="45%">
+      @cancle="isshow=false"
+      :width="800">
       <a-spin :spinning="spinning" tip="Loading...">
-        <a-form :form="form" @submit="handleSubmit">
+        <a-form-model
+          id="roleEdit-form"
+          ref="ruleForm"
+          :model="form"
+          :rules="rules"
+          :label-col="formItemLayout.labelCol"
+          :wrapper-col="formItemLayout.wrapperCol"
+        >
           <!-- 用户名称 -->
-          <a-form-item label="角色名称" :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
+          <a-form-model-item label="角色名称" prop="name">
             <a-input
-              placeholder="请输入角色名称(最多30个字符)"
+              id="roleEdit-name"
+              v-model.trim="form.name"
+              @change="filterEmpty"
               :maxLength="30"
-              v-decorator="['formData.name', {
-                initialValue: formData.name,
-                getValueFromEvent: $filterEmpty,
-                rules: [{ required: true, message: '请输入角色名称(最多30个字符)!' },{pattern:'^[^<|>]{1,30}$',message:'请输入不含<或>的字符,最多30个字符'}] }]"
-            />
-          </a-form-item>
-
+              allowClear
+              placeholder="请输入角色名称(最多30个字符)"/>
+          </a-form-model-item>
           <!-- 状态 -->
-          <a-form-item label="状态" :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
-            <a-radio-group
-              name="radioGroup"
-              v-decorator="[
-                'formData.isEnable',
-                {
-                  initialValue: formData.isEnable,
-                  rules: [{ required: true, message: '请选择状态!' }] },
-              ]"
-            >
+          <a-form-model-item label="状态" prop="isEnable">
+            <a-radio-group name="radioGroup" v-model="form.isEnable" placeholder="请选择状态">
               <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-form-model-item>
+          <a-form-model-item label="角色描述" prop="remarks">
             <a-textarea
-              v-decorator="[
-                'formData.remarks',
-                { initialValue: formData.remarks,
-                  rules: [] },
-              ]"
-              style="min-height: 60px;"
+              id="roleEdit-remarks"
+              v-model.trim="form.remarks"
               :maxLength="500"
-              placeholder="请输入描述(最多500个字符)"
-              autosize />
-          </a-form-item>
-
-          <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
-            <a-button type="primary" @click="handleSubmit()">
-              保存
-            </a-button>
-            <a-button :style="{ marginLeft: '8px' }" @click="cancel">
-              取消
-            </a-button>
-          </a-form-item>
-        </a-form>
+              allowClear
+              placeholder="请输入描述(最多500个字符)"/>
+          </a-form-model-item>
+          <a-form-model-item :label-col="{span: 0}" :wrapper-col="{span: 24}" style="text-align: center;">
+            <a-button type="primary" @click="handleSubmit()" :style="{ marginRight: '8px' }">保存</a-button>
+            <a-button :style="{ marginLeft: '8px' }" @click="isshow=false">取消</a-button>
+          </a-form-model-item>
+        </a-form-model>
       </a-spin>
     </a-modal>
   </div>
@@ -78,7 +66,7 @@ export default {
       type: Boolean,
       default: false
     },
-    data: {
+    nowData: {
       type: Object,
       default: function () {
         return {}
@@ -90,84 +78,88 @@ export default {
       titleText: '添加角色',
       isshow: this.visible,
       spinning: false,
-      formLayout: 'horizontal',
-      form: this.$form.createForm(this, { name: 'roleModal' }),
-      formData: {
+      formItemLayout: {
+        labelCol: { span: 6 },
+        wrapperCol: { span: 16 }
+      },
+      form: {
         name: '',
-        isEnable: '', // 活动状态
+        isEnable: undefined,
         remarks: ''
+      },
+      rules: {
+        name: [ { required: true, message: '请输入角色名称', trigger: 'blur' }, { pattern: '^[^<|>]{1,30}$', message: '请输入不含<或>的字符,最多30个字符' } ],
+        isEnable: [ { required: true, message: '请选择状态', trigger: 'change' } ]
       }
-
     }
   },
   methods: {
-    cancel () {
-      this.clear()
-      this.$emit('close')
+    // 过滤空格
+    filterEmpty () {
+      let str = this.form.name
+      str = str.replace(/\ +/g, '')
+      str = str.replace(/[ ]/g, '')
+      str = str.replace(/[\r\n]/g, '')
+      this.form.name = str
     },
     // 保存提交
     handleSubmit () {
       const _this = this
-      this.form.validateFields((err, values) => {
-        if (!err) {
-          console.log(values.formData, ' formData.type222222222')
+      this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          const params = JSON.parse(JSON.stringify(_this.form))
+          params.id = _this.nowData && _this.nowData.id ? _this.nowData.id : null
           _this.spinning = true
-          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')
+          saveRolePower(params).then(res => {
+            if (res.status == 200) {
+              _this.$message.success(res.message)
+              _this.$emit('refresh')
               setTimeout(function () {
-                _this.cancel()
+                _this.isshow = false
                 _this.spinning = false
               }, 300)
             } else {
               _this.spinning = false
-              // this.$message.error(res.message)
             }
           })
+        } else {
+          console.log('error submit!!')
+          return false
         }
       })
-    },
-    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()
+      if (!newValue) {
+        this.$emit('close')
+        this.$refs.ruleForm.resetFields()
+        this.form.name = ''
+        this.form.isEnable = undefined
+        this.form.remarks = ''
+        this.titleText = '新增角色'
       }
+    },
+    nowData: {
+      handler (newValue, oldValue) {
+        if (this.isshow && newValue) {
+          if (this.nowData.id) { //  编辑
+            this.titleText = '编辑角色'
+            this.form = Object.assign({}, this.nowData)
+            this.form.isEnable = Number(this.nowData.isEnable)
+          }
+        }
+      },
+      deep: true
     }
   }
 }
 </script>
 
 <style >
-  .modalBox{
-  }
   .ant-modal-footer {
     display: none;
   }