角色管理

src/views/manage/system/dict/index.vue

@@ -9,7 +9,6 @@
         <div class="tree-main">
           <el-tree
             ref="ref_tree"
-            style="max-width: 600px"
             class="filter-tree"
             :data="state.tree.options"
             :props="state.tree.defaultProps"

src/views/manage/system/role/auth.vue

@@ -0,0 +1,86 @@
+<template>
+  <CusDialog
+    :show="show"
+    title="数据授权"
+    @onClose="$emit('update:show', false)"
+    width="800px"
+    height="90%"
+    @onSubmit="onSubmit"
+    :loading="state.loading"
+  >
+    <div class="__cus-dialog-form">
+      <div class="tree-filter">
+        <el-input v-model="state.tree.filter"/>
+      </div>
+      <div class="tree-main">
+        <el-tree
+          ref="ref_tree"
+          class="filter-tree"
+          :data="state.tree.options"
+          :props="state.tree.defaultProps"
+          default-expand-all
+          :filter-node-method="filterNode"
+        />
+      </div>
+    </div>
+  </CusDialog>
+</template>
+
+<script setup lang="ts">
+import {computed, getCurrentInstance, nextTick, reactive, ref, watch} from "vue";
+import {useDictionaryStore} from "@/stores";
+import {ElMessage, ElMessageBox} from "element-plus";
+
+const emit = defineEmits(['update:show', 'refresh'])
+const {proxy} = getCurrentInstance()
+const DictionaryStore = useDictionaryStore()
+const props = defineProps({
+  show: {default: false},
+  transfer: {}
+ })
+const state: any = reactive({
+  form: {},
+  loading: false,
+  tree: {
+    filter: '',
+    defaultProps: {
+      children: 'children',
+      label: 'label',
+    },
+    options: []
+  }
+})
+const ref_tree = ref()
+const filterNode = (value, data) => {
+  if (!value) return true
+  return data.label.includes(value)
+}
+watch(() => state.tree.filter, (n) => {
+  ref_tree.value?.filter(n)
+})
+const onSubmit = () => {
+}
+const initDetail = () => {
+  // state.loading = true
+  // sysIndexGetDetail(props.transfer.id).then(res => {
+  //   if (res.code === 200) {
+  //     state.form = res.data
+  //     state.loading = false
+  //   } else {
+  //     ElMessage.error(res.msg)
+  //   }
+  // })
+}
+watch(() => props.show, (n) => {
+  if (n) {
+    initDictionary()
+    initDetail()
+  }
+})
+const initDictionary = () => {
+  DictionaryStore.initDict('gx_method')
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/manage/system/role/detail.vue

@@ -0,0 +1,116 @@
+<template>
+  <CusDialog
+    :show="show"
+    :title="titleCpt"
+    @onClose="$emit('update:show', false)"
+    width="400px"
+    height="auto"
+    @onSubmit="onSubmit"
+    :loading="state.loading"
+  >
+    <div class="__cus-dialog-form">
+      <CusForm ref="ref_form" label-width="100px">
+        <CusFormColumn
+          :span="24"
+          required
+          label="角色名称"
+          v-model:param="state.form.indexName"
+        />
+        <CusFormColumn
+          :span="24"
+          required
+          label="状态"
+          v-model:param="state.form.shareMethod"
+          link="select"
+          :options="DictionaryStore.gxMethodList"
+        />
+      </CusForm>
+    </div>
+  </CusDialog>
+</template>
+
+<script setup lang="ts">
+import {computed, getCurrentInstance, nextTick, reactive, ref, watch} from "vue";
+import {useDictionaryStore} from "@/stores";
+import {ElMessage, ElMessageBox} from "element-plus";
+
+const emit = defineEmits(['update:show', 'refresh'])
+const {proxy} = getCurrentInstance()
+const DictionaryStore = useDictionaryStore()
+const props = defineProps({
+  show: {default: false},
+  transfer: {}
+ })
+const state: any = reactive({
+  form: {},
+  loading: false
+})
+const ref_form = ref()
+const titleCpt = computed(() => {
+  let t = ''
+  switch (props.transfer.mode) {
+    case 'add': t = '新增角色'
+      break
+    case 'edit': t = '编辑角色'
+      break
+  }
+  return t
+})
+const onSubmit = () => {
+  ref_form.value.submit().then(() => {
+    ElMessageBox.confirm("是否提交?", "提示", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning",
+    } as any).then(() => {
+      // state.loading = true
+      // sysIndexSaveOrUpdate(state.form).then(res => {
+      //   if (res.code === 200) {
+      //     ElMessage.success(props.transfer.mode === 'add' ? '新增成功！' : '编辑成功！')
+      //     emit('update:show', false)
+      //     emit('refresh')
+      //   } else {
+      //     ElMessage.error(res.msg)
+      //   }
+      //   state.loading = false
+      // })
+    }).catch(() => {})
+  }).catch((e) => {
+    ElMessage({
+      message: e[0].message,
+      grouping: true,
+      type: 'warning',
+    })
+  })
+}
+const initDetail = () => {
+  // state.loading = true
+  // sysIndexGetDetail(props.transfer.id).then(res => {
+  //   if (res.code === 200) {
+  //     state.form = res.data
+  //     state.loading = false
+  //   } else {
+  //     ElMessage.error(res.msg)
+  //   }
+  // })
+}
+watch(() => props.show, (n) => {
+  if (n) {
+    initDictionary()
+    if (props.transfer.mode === 'add') {
+      state.form = {}
+    } else {
+      initDetail()
+    }
+    nextTick(() => {
+      ref_form.value.reset()
+    })
+  }
+})
+const initDictionary = () => {
+  DictionaryStore.initDict('gx_method')
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/manage/system/role/index.vue

@@ -1,14 +1,154 @@
 <template>
-  <div>
-    <h1>这是后台-角色管理页面</h1>
+  <div class="__cus-manage_content">
+    <div class="__cus-manage_content-title"><SvgIcon class="flag" name="flag_1" color="var(--cus-main-color)"/>{{$route.meta.title}}</div>
+    <div class="__cus-manage_content-filters">
+      <CusForm labelWidth="50px" @handleEnter="onSearch">
+        <CusFormColumn
+          label-width="80px"
+          :span="4"
+          label="角色名称"
+          v-model:param="state.query.form.keyword"
+        />
+        <CusFormColumn
+          :span="4"
+          label="状态"
+          v-model:param="state.query.form.keyword"
+          link="select"
+          :options="DictionaryStore.trueFalseList"
+        />
+        <CusButton type="main" title="搜索" @click="onSearch"/>
+        <CusButton type="main" title="重置" @click="onReset"/>
+        <CusButton type="main" title="新增" style="margin-left: auto" @click="onAdd"/>
+      </CusForm>
+    </div>
+    <div class="__cus-manage_content-main" v-loading="state.query.loading">
+      <CusTable
+        :page-num="state.query.page.pageNum"
+        :page-size="state.query.page.pageSize"
+        :total="state.query.result.total"
+        :data="state.query.result.data"
+        :table-head="state.query.tableHead"
+        @handlePage="onPage"
+      >
+        <template #shareMethod-column-value="{scope}">
+          {{DictionaryStore.gxMethodMap.get(scope.row.shareMethod)}}
+        </template>
+        <template #do-column-value="{scope}">
+          <CusButton type="table-edit" @click="onEdit(scope.row)"/>
+          <CusButton type="table-del" @click="onDel(scope.row)"/>
+          <CusButton type="table" icon="relation" title="授权"  @click="onAuth(scope.row)"/>
+        </template>
+      </CusTable>
+    </div>
+    <DetailCom v-model:show="state.detail.show" :transfer="state.detail.transfer" @refresh="onSearch"/>
+    <AuthCom v-model:show="state.auth.show" :transfer="state.auth.transfer"/>
   </div>
 </template>
 
 <script setup lang="ts">
-import {getCurrentInstance, reactive} from "vue";
+import {getCurrentInstance, onMounted, reactive} from "vue";
+import {ElMessage} from "element-plus";
+import DetailCom from "./detail.vue";
+import AuthCom from "./auth.vue";
+import {useDictionaryStore} from "@/stores";
 
 const {proxy} = getCurrentInstance()
-const state: any = reactive({})
+const DictionaryStore = useDictionaryStore()
+const state: any = reactive({
+  query: {
+    loading: false,
+    page: {
+      pageNum: 1,
+      pageSize: 10
+    },
+    tableHead: [
+      {value: "indexName", label: "角色名称", fixed: 'left'},
+      {value: "dataSource", label: "状态"},
+      {value: "createTime", label: "创建时间", width: 200},
+      {value: "indexName", label: "创建人"},
+      {value: "updateTime", label: "最后修改时间", width: 200},
+      {value: "updateTime", label: "最后修改人"},
+      {value: "do", label: "操作", width: 240, fixed: 'right'},
+    ],
+    form: {},
+    formReal: {},
+    result: {
+      total: 0,
+      data: [{}]
+    }
+  },
+  detail: {
+    show: false,
+    transfer: {}
+  },
+  auth: {
+    show: false,
+    transfer: {}
+  },
+})
+const onPage = (pageNum, pageSize) => {
+  state.query.page = {
+    pageNum: pageNum,
+    pageSize: pageSize
+  }
+  const params = {
+    page: state.query.page.pageNum,
+    size: state.query.page.pageSize,
+  }
+  if (proxy.$util.isValue(state.query.formReal.keyword)) {
+    params.keyword = state.query.formReal.keyword
+  }
+  // state.query.loading = true
+  // sysIndexFindIndexByPage(proxy.$util.formatGetParam(params)).then(res => {
+  //   if (res.code === 200) {
+  //     state.query.result.total = res.data.totalElements
+  //     state.query.result.data = res.data.content
+  //     state.query.loading = false
+  //   } else {
+  //     ElMessage.error(res.msg)
+  //   }
+  // })
+}
+const onSearch = () => {
+  state.query.formReal = JSON.parse(JSON.stringify(state.query.form))
+  onPage(1, state.query.page.pageSize)
+}
+const onReset = () => {
+  state.query.page = {
+    pageNum: 1,
+    pageSize: 10
+  }
+  state.query.form = {}
+  onSearch()
+}
+const onAdd = () => {
+  state.detail.transfer = {
+    mode: 'add'
+  }
+  state.detail.show = true
+}
+const onEdit = (row) => {
+  state.detail.transfer = {
+    mode: 'edit',
+    id: row.id,
+  }
+  state.detail.show = true
+}
+const onAuth = (row) => {
+  state.auth.transfer = {
+    id: row.id,
+  }
+  state.auth.show = true
+}
+const onDel = (row) => {
+}
+const initDictionary = () => {
+  DictionaryStore.initDict('true_false')
+}
+onMounted(() => {
+  initDictionary()
+  onReset()
+})
 </script>
 
 <style lang="scss" scoped>