Browse Source

修改操作按钮为图标

zhangdan 4 năm trước cách đây
mục cha
commit
c2e2a88430

+ 3 - 7
src/views/appSetting/bannerSetting.vue

@@ -185,7 +185,7 @@ export default {
         {
           title: '操作',
           align: 'center',
-		  width: 200,
+          width: 200,
           scopedSlots: {
             customRender: 'action'
           }
@@ -269,11 +269,9 @@ export default {
           saveItem(formData, _this.radioGroup).then(res => {
             console.log(res, 'rrrrrrrrr')
             if (res.status == 200) {
-              _this.$message.success(res.message ? res.message : '保存成功')
+              _this.$message.success(res.message)
               _this.$refs.table.refresh()
               _this.close()
-            } else {
-              // _this.$message.error(res.message)
             }
           })
         }
@@ -337,8 +335,6 @@ export default {
             if (res.status == 200) {
               _this.$message.success(res.message)
               _this.$refs.table.refresh()
-            } else {
-              _this.$message.error(res.message)
             }
           })
         }
@@ -352,7 +348,7 @@ export default {
       }
       changeStatus(_data).then(res => {
         if (res.status == '200') {
-          this.$message.success('修改成功')
+          this.$message.success(res.message)
           this.$refs.table.refresh()
         } else {
           record.status = !record.status

+ 97 - 73
src/views/power/role/roleList.vue

@@ -11,7 +11,7 @@
                 placeholder="请输入角色名称"
                 :maxLength="30"
                 id="roleList-name"
-                @pressEnter="$refs.table.refresh(true)"/>
+                @pressEnter="$refs.table.refresh(true)" />
             </a-form-item>
           </a-col>
 
@@ -27,7 +27,7 @@
         </a-row>
       </a-form>
     </div>
-    <a-divider/>
+    <a-divider />
     <div class="table-operator">
       <a-button type="primary" icon="plus" @click="openModal" id="roleList-openModal">新建</a-button>
     </div>
@@ -38,11 +38,10 @@
       rowKey="id"
       :columns="columns"
       :data="loadData"
-      bordered
-    >
+      bordered>
       <!-- 启用禁用 -->
       <span slot="status" slot-scope="text, record">
-        <a-switch checkedChildren="启用" unCheckedChildren="禁用" id="roleList-isEnable" v-model="record.isEnable" @change="changeFlagHandle(text, record)"/>
+        <a-switch checkedChildren="启用" unCheckedChildren="禁用" id="roleList-isEnable" v-model="record.isEnable" @change="changeFlagHandle(text, record)" />
       </span>
       <!-- 角色描述 -->
       <template slot="remarks" slot-scope="text, record">
@@ -50,9 +49,17 @@
       </template>
       <!-- 操作 -->
       <span slot="action" slot-scope="text, record">
-        <a class="action-button menu-text" @click="openMenuModal(record)" id="roleList-openMenuModal">菜单权限</a>
+        <a-icon type="key" title="菜单权限" :style="{ fontSize: '20px', color: '#e29e14', padding: '0 10px' }" @click="openMenuModal(record)" />
+        <a-icon 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"
+          @click="delect(record)" />
+        <!-- <a class="action-button menu-text" @click="openMenuModal(record)" id="roleList-openMenuModal">菜单权限</a>
         <a class="action-button" @click="handleEdit(record)" id="roleList-handleEdit">修改</a>
-        <a v-if="!record.isEnable" class="action-button red-text" @click="delect(record)" id="roleList-delect">删除</a>
+        <a v-if="!record.isEnable" class="action-button red-text" @click="delect(record)" id="roleList-delect">删除</a> -->
       </span>
     </s-table>
     <roleModal :visible="showModal" :data="itemData" @refresh="refreshTable" @close="showModal = false"></roleModal>
@@ -61,14 +68,25 @@
 </template>
 
 <script>
-import { STable, VSelect } from '@/components'
+import {
+  STable,
+  VSelect
+} from '@/components'
 import roleModal from './roleModal.vue'
 import menuModal from './menuModal.vue'
-import { getPowerRoleList, updateEnableStatus, delectRolePower, getMenuList } from '@/api/power-role.js'
+import {
+  getPowerRoleList,
+  updateEnableStatus,
+  delectRolePower,
+  getMenuList
+} from '@/api/power-role.js'
 export default {
   name: 'RoleList',
   components: {
-    STable, VSelect, roleModal, menuModal
+    STable,
+    VSelect,
+    roleModal,
+    menuModal
   },
   data () {
     return {
@@ -82,45 +100,50 @@ export default {
       itemData: {}, // 编辑行数据
       menuData: {},
       // 表头
-      columns: [
-        {
-          title: '序号',
-          dataIndex: 'no',
-          width: 60,
-          align: 'center'
-        },
-        {
-		  title: '创建时间',
-		  dataIndex: 'createDate',
-		  width: '120',
-		  align: 'center'
-        },
-        {
-          title: '角色名称',
-          dataIndex: 'name',
-          width: '100',
-          align: 'center'
-        },
-        {
-          title: '角色描述',
-          dataIndex: 'remarks',
-          width: '100',
-          ellipsis: true, // 内容超过宽度 自动出现省略号
-          align: 'center',
-          scopedSlots: { customRender: 'remarks' }
-        },
-        {
-          title: '状态',
-          width: '100',
-          align: 'center',
-          scopedSlots: { customRender: 'status' }
-        },
-        {
-          title: '操作',
-		  width: '100',
-          align: 'center',
-          scopedSlots: { customRender: 'action' }
+      columns: [{
+        title: '序号',
+        dataIndex: 'no',
+        width: 60,
+        align: 'center'
+      },
+      {
+        title: '创建时间',
+        dataIndex: 'createDate',
+        width: 150,
+        align: 'center'
+      },
+      {
+        title: '角色名称',
+        dataIndex: 'name',
+        width: 200,
+        align: 'center'
+      },
+      {
+        title: '角色描述',
+        dataIndex: 'remarks',
+        width: 200,
+        ellipsis: true, // 内容超过宽度 自动出现省略号
+        align: 'center',
+        scopedSlots: {
+          customRender: 'remarks'
+        }
+      },
+      {
+        title: '状态',
+        width: 150,
+        align: 'center',
+        scopedSlots: {
+          customRender: 'status'
+        }
+      },
+      {
+        title: '操作',
+        width: 150,
+        align: 'center',
+        scopedSlots: {
+          customRender: 'action'
         }
+      }
       ],
       // 加载数据方法 必须为 Promise 对象
       loadData: parameter => {
@@ -167,7 +190,9 @@ export default {
     // 获取菜单树列表
     getMenuList (id) {
       const _this = this
-      getMenuList({ id: id }).then(res => {
+      getMenuList({
+        id: id
+      }).then(res => {
         if (res.status == 200) {
           _this.menuData = res.data
           this.showMenuModal = true
@@ -190,13 +215,9 @@ export default {
           }).then(res => {
             console.log(res, 'res1111')
             if (res.status == 200) {
-              _this.$message.success('删除成功')
+              _this.$message.success(res.message)
               _this.$refs.table.refresh()
-            } else {
-              this.$message.error(res.message)
             }
-          }).catch(() => {
-            _this.$message.success('删除失败, 请稍后重试')
           })
         }
       })
@@ -214,7 +235,7 @@ export default {
       }
       updateEnableStatus(_data).then(res => {
         if (res.status + '' === '200') {
-          this.$message.success('修改成功')
+          this.$message.success(res.message)
         } else {
           record.isEnable = !record.isEnable
         }
@@ -224,22 +245,25 @@ export default {
 }
 </script>
 <style scoped>
-  .table-page-search-wrapper .ant-form-inline .ant-form-item{
-    margin-bottom: 0;
-  }
-  .action-button{
-    line-height: 40px;
-    white-space: nowrap;
-    padding: 5px 10px;
-    background-color: #1890ff;
-    border-radius: 4px;
-    color: #fff;
-    margin-right: 5px;
-  }
-  .red-text{
-    background-color: red;
-  }
-  .menu-text {
-    background-color: #f90;
-  }
+	.table-page-search-wrapper .ant-form-inline .ant-form-item {
+		margin-bottom: 0;
+	}
+
+	.action-button {
+		line-height: 40px;
+		white-space: nowrap;
+		padding: 5px 10px;
+		background-color: #1890ff;
+		border-radius: 4px;
+		color: #fff;
+		margin-right: 5px;
+	}
+
+	.red-text {
+		background-color: red;
+	}
+
+	.menu-text {
+		background-color: #f90;
+	}
 </style>

+ 23 - 13
src/views/power/user/userList.vue

@@ -64,13 +64,31 @@
         <span v-else>无</span>
       </div>
       <span slot="action" slot-scope="text, record">
-        <template>
+        <a-icon
+          type="edit"
+          title="编辑"
+          :style="{fontSize: '20px',color:' #1890FF',padding:' 0 10px'}"
+          @click="handleEdit(record)"
+        />
+        <a-icon
+          type="unlock"
+          title="重置密码"
+          v-if="record.loginFlag==1"
+          :style="{fontSize: '20px',color:' #08c0de',padding: '0 10px'}"
+          @click="resetPassword(record)" />
+        <a-icon
+          type="delete"
+          title="删除"
+          :style="{fontSize: '20px',color: '#f00',padding: '0 10px'}"
+          v-if="record.loginFlag==0"
+          @click="delect(record)"/>
+        <!-- <template>
           <div>
             <a class="action-button" @click="handleEdit(record)" id="userList-handleEdit">修改</a>
             <a v-if="record.loginFlag" class="action-button reset-text" @click="resetPassword(record)" id="userList-resetPassword">重置密码</a>
             <a v-if="!record.loginFlag" class="action-button red-text" @click="delect(record)" id="userList-delect">删除</a>
           </div>
-        </template>
+        </template> -->
       </span>
     </s-table>
     <userModal :visible="showModal" @refresh="$refs.table.refresh(true)" :data="itemData" @close="showModal = false"></userModal>
@@ -199,12 +217,8 @@ export default {
         id: row.id
       }).then(res => {
         if (res.status == 200) {
-          this.$message.success('密码重置成功')
-        } else {
-          this.$message.error(res.message)
+          this.$message.success(res.message)
         }
-      }).catch(() => {
-        this.$message.success('密码重置失败, 请稍后重试')
       })
     },
     // 删除
@@ -220,13 +234,9 @@ export default {
             id: row.id
           }).then(res => {
             if (res.status == 200) {
-              _this.$message.success('删除成功')
+              _this.$message.success(res.message)
               _this.$refs.table.refresh()
-            } else {
-              _this.$message.error(res.message)
             }
-          }).catch(() => {
-            _this.$message.success('删除失败, 请稍后重试')
           })
         }
       })
@@ -251,7 +261,7 @@ export default {
       }
       updateEnableStatus(_data).then(res => {
         if (res.status + '' === '200') {
-          this.$message.success('修改成功')
+          this.$message.success(res.message)
         } else {
           record.loginFlag = !record.loginFlag
         }