角色管理页面

src/views/system/role/index.vue

@@ -1,13 +1,101 @@
 <template>
   <div>
-    <SearchTemplate> 搜索 </SearchTemplate>
-    <ContentContainer> 角色管理界面 </ContentContainer>
+    <SearchTemplate>
+			<el-form :inline="true" class="clearfix search-content">
+        <el-form-item label="角色名称">
+          <el-input v-model="queryParams.rolename" placeholder="请输入角色名称" clearable style="width: 240px" />
+        </el-form-item>
+				<el-form-item>
+					<el-button icon="el-icon-search" size="mini" class="search-button-style" @click="handleQuery">搜索</el-button>
+					<el-button icon="el-icon-refresh" size="mini" class="reset-button-style" @click="resetQuery">重置</el-button>
+				</el-form-item>
+				<el-form-item class="fr">
+					<el-button icon="el-icon-plus" class="add-button-style" @click="handleAdd">新增</el-button>
+				</el-form-item>
+      </el-form>
+		</SearchTemplate>
+    <ContentContainer>
+			<el-table :data="tableData" v-loading="loading" size="small" style="width: 100%" border>
+          <el-table-column label="角色编号" prop="Role-RoleId" />
+					<el-table-column label="角色名称" prop="Role-RoleName" :show-overflow-tooltip="true" />
+					<el-table-column label="权限字符" prop="Role-RoleKey" :show-overflow-tooltip="true" />
+          <el-table-column label="状态" align="center">
+            <template #default="scope">
+              <el-switch
+                v-model="scope.row['Role-Status']"
+                active-value="0"
+                inactive-value="1"
+								active-color="#3cbdb2"
+                @change="handleStatusChange(scope.row)"
+              ></el-switch>
+            </template>
+          </el-table-column>
+					<el-table-column label="创建时间" prop="Role-CreateTime" :show-overflow-tooltip="true" />
+          <el-table-column label="操作" width="300">
+            <template #default="scope">
+							<el-button class="edit-button-style" @click="handleUpdate(scope.row)" icon="el-icon-edit" size="small">修改</el-button>
+							<el-button class="edit-button-style" style="width: 100px;" @click="setOperationItem(scope.row)" icon="el-icon-share" size="small">产线关联</el-button>
+							<el-button class="edit-button-style" @click="handleDelete(scope.row)" icon="el-icon-delete" size="small">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+				<!-- 分页 -->
+			<Pagination v-show="pagination.total>0" v-model:pagination="pagination" @change="getList" />
+		</ContentContainer>
   </div>
 </template>
 <script>
+import { ListMixin } from "@/mixins/ListMixin";
 export default {
+	mixins: [ListMixin],
   data() {
-    return {};
+    return {
+			queryTableDataUrl: "/admin/base/role/query",
+		};
   },
+	methods: {
+		setOperationItem(item){
+      this.operationItem=item;
+    },
+		// 搜索按钮操作
+		handleQuery() {
+			this.pagination.pageNumber = 1
+			this.getList()
+		},
+		// 重置按钮操作
+		resetQuery() {
+			this.queryParams.name = undefined
+			this.queryParams.phone = undefined
+			this.handleQuery()
+		},
+		// 用户状态修改
+    handleStatusChange(row) {
+			if (row['User-UserId']) {
+				const text = row['User-Status'] === '0' ? '启用' : '停用'
+				this.$confirm('确认要"' + text + '""' + row['User-UserId'] + '"用户吗?', '警告', {
+					confirmButtonText: '确定',
+					cancelButtonText: '取消',
+					type: 'warning'
+				}).then(() => {
+					let params = {
+						'User-Status': row['User-Status'],
+						'User-UserId': row['User-UserId']
+					}
+					return put('/admin/base/user/updatestatus', params)
+				}).then(() => {
+					this.msgSuccess(text + '成功')
+				}).catch(() => {
+					row['User-Status'] = row['User-Status'] === '0' ? '1' : '0'
+				})
+			}
+    },
+		// 删除按钮操作
+		handleDelete(row) {
+			let keyName = row['User-UserId']
+			let deteleUrl = `/admin/base/user/deleteone/${row['User-UserId']}`
+			// 参数1：删除数据的标志，参数2：删除的接口拼接参数
+			this.delHanle(keyName, deteleUrl)
+		}
+	},
 };
 </script>