feat: api

ui/src/api/user/resource-authorization.ts

@@ -3,25 +3,25 @@ import { get, put, post, del } from '@/request/index'
 import type { pageRequest } from '@/api/type/common'
 import type { Ref } from 'vue'
 
-const prefix = '/workspace'
+const prefix = '/workspace/' + localStorage.getItem('workspace_id')
 
 /**
  * 获取成员列表
  * @query 参数
  */
-const getUserList: (workspace_id: String) => Promise<Result<any>> = (workspace_id) => {
-  return get(`${prefix}/${workspace_id}/user_list`)
+const getUserList: (loading?: Ref<boolean>) => Promise<Result<any>> = (loading) => {
+  return get(`${prefix}/user_list`, undefined, loading)
 }
 
 /**
  * 获取资源权限
  * @query 参数
  */
-const getResourceAuthorization: (workspace_id: String, user_id: string) => Promise<Result<any>> = (
-  workspace_id,
-  user_id,
-) => {
-  return get(`${prefix}/${workspace_id}/user_resource_permission/user/${user_id}`)
+const getResourceAuthorization: (
+  user_id: string,
+  loading?: Ref<boolean>,
+) => Promise<Result<any>> = (user_id, loading) => {
+  return get(`${prefix}/user_resource_permission/user/${user_id}`, undefined, loading)
 }
 
 /**
@@ -43,11 +43,11 @@ const getResourceAuthorization: (workspace_id: String, user_id: string) => Promi
         }
  */
 const putResourceAuthorization: (
-  workspace_id: String,
   user_id: string,
   body: any,
-) => Promise<Result<any>> = (workspace_id, user_id, body) => {
-  return put(`${prefix}/${workspace_id}/user_resource_permission/user/${user_id}`, body)
+  loading?: Ref<boolean>,
+) => Promise<Result<any>> = (user_id, body, loading) => {
+  return put(`${prefix}/user_resource_permission/user/${user_id}`, body, loading)
 }
 
 export default {

ui/src/components/app-charts/components/LineCharts.vue

@@ -0,0 +1,135 @@
+<template>
+  <div :id="id" ref="PieChartRef" :style="{ height: height, width: width }" />
+</template>
+<script lang="ts" setup>
+import { onMounted, nextTick, watch, onBeforeUnmount } from 'vue'
+import * as echarts from 'echarts'
+import { numberFormat } from '@/utils/utils'
+const props = defineProps({
+  id: {
+    type: String,
+    default: 'lineChartId'
+  },
+  width: {
+    type: String,
+    default: '100%'
+  },
+  height: {
+    type: String,
+    default: '200px'
+  },
+  option: {
+    type: Object,
+    required: true
+  } // option: { title , data }
+})
+
+const color = ['rgba(82, 133, 255, 1)', 'rgba(255, 207, 47, 1)']
+
+const areaColor = ['rgba(82, 133, 255, 0.2)', 'rgba(255, 207, 47, 0.2)']
+
+function initChart() {
+  let myChart = echarts?.getInstanceByDom(document.getElementById(props.id)!)
+  if (myChart === null || myChart === undefined) {
+    myChart = echarts.init(document.getElementById(props.id))
+  }
+  const series: any = []
+  if (props.option?.yData?.length) {
+    props.option?.yData.forEach((item: any, index: number) => {
+      series.push({
+        itemStyle: {
+          color: color[index]
+        },
+        areaStyle: item.area
+          ? {
+              color: areaColor[index]
+            }
+          : null,
+        ...item
+      })
+    })
+  }
+  const option = {
+    title: {
+      text: props.option?.title,
+      textStyle: {
+        fontSize: '16px'
+      }
+    },
+    tooltip: {
+      trigger: 'axis',
+      valueFormatter: (value: any) => numberFormat(value)
+      // axisPointer: {
+      //   type: 'cross',
+      //   label: {
+      //     backgroundColor: '#6a7985'
+      //   }
+      // }
+    },
+    legend: {
+      right: 0,
+      itemWidth: 8,
+      textStyle: {
+        color: '#646A73'
+      },
+      icon: 'circle'
+    },
+    grid: {
+      left: '1%',
+      right: '1%',
+      bottom: '0',
+      top: '18%',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      data: props.option.xData
+    },
+    yAxis: {
+      type: 'value',
+      splitLine: {
+        lineStyle: {
+          color: '#EFF0F1'
+        }
+      },
+      axisLabel: {
+        formatter: (value: any) => {
+          return numberFormat(value)
+        }
+      }
+    },
+    series: series
+  }
+
+  // 渲染数据
+  myChart.setOption(option, true)
+}
+
+function changeChartSize() {
+  echarts.getInstanceByDom(document.getElementById(props.id)!)?.resize()
+}
+
+watch(
+  () => props.option,
+  (val) => {
+    if (val) {
+      nextTick(() => {
+        initChart()
+      })
+    }
+  }
+)
+
+onMounted(() => {
+  nextTick(() => {
+    initChart()
+    window.addEventListener('resize', changeChartSize)
+  })
+})
+
+onBeforeUnmount(() => {
+  echarts.getInstanceByDom(document.getElementById(props.id)!)?.dispose()
+  window.removeEventListener('resize', changeChartSize)
+})
+</script>
+<style lang="scss" scoped></style>

ui/src/components/app-charts/index.vue

@@ -0,0 +1,30 @@
+<template>
+  <component
+    :is="typeComponentMap[type]"
+    :height="height"
+    :option="option"
+    :dataZoom="dataZoom"
+    class="v-charts"
+  />
+</template>
+<script lang="ts" setup>
+import line from './components/LineCharts.vue'
+defineOptions({ name: 'AppCharts' })
+defineProps({
+  type: {
+    type: String,
+    default: 'line'
+  },
+  height: {
+    type: String,
+    default: '200px'
+  },
+  dataZoom: Boolean,
+  option: {
+    type: Object,
+    required: true
+  } // { title , xData, yData, formatStr  }
+})
+
+const typeComponentMap = { line } as any
+</script>

ui/src/views/resource-authorization/component/CreateMemberDialog.vue

@@ -21,7 +21,10 @@
       @submit.prevent
     >
       <el-form-item :label="$t('views.team.teamForm.form.userName.label')" prop="users">
-        <tags-input v-model:tags="memberForm.users" :placeholder="$t('views.team.teamForm.form.userName.placeholder')" />
+        <tags-input
+          v-model:tags="memberForm.users"
+          :placeholder="$t('views.team.teamForm.form.userName.placeholder')"
+        />
       </el-form-item>
     </el-form>
     <template #footer>
@@ -45,7 +48,7 @@ const emit = defineEmits(['refresh'])
 const dialogVisible = ref<boolean>(false)
 
 const memberForm = ref({
-  users: []
+  users: [],
 })
 
 const addMemberFormRef = ref<FormInstance>()
@@ -58,15 +61,15 @@ const rules = ref<FormRules>({
       type: 'array',
       required: true,
       message: t('views.team.teamForm.form.userName.requiredMessage'),
-      trigger: 'change'
-    }
-  ]
+      trigger: 'change',
+    },
+  ],
 })
 
 watch(dialogVisible, (bool) => {
   if (!bool) {
     memberForm.value = {
-      users: []
+      users: [],
     }
     loading.value = false
   }
@@ -79,18 +82,12 @@ const submitMember = async (formEl: FormInstance | undefined) => {
   if (!formEl) return
   await formEl.validate((valid, fields) => {
     if (valid) {
-      loading.value = true
       let idsArray = memberForm.value.users.map((obj: any) => obj.id)
-      AuthorizationApi.postCreatTeamMember(idsArray)
-        .then((res) => {
-          MsgSuccess(t('common.submitSuccess'))
-          emit('refresh', idsArray)
-          dialogVisible.value = false
-          loading.value = false
-        })
-        .catch(() => {
-          loading.value = false
-        })
+      AuthorizationApi.postCreatTeamMember(idsArray, loading).then((res) => {
+        MsgSuccess(t('common.submitSuccess'))
+        emit('refresh', idsArray)
+        dialogVisible.value = false
+      })
     }
   })
 }

ui/src/views/resource-authorization/index.vue

@@ -80,7 +80,6 @@ const memberList = ref<any[]>([]) // 全部成员
 const filterMember = ref<any[]>([]) // 搜索过滤后列表
 const currentUser = ref<string>('')
 const currentType = ref<string>('')
-const workspace_id = ref<string>('default')
 const filterText = ref('')
 
 const activeName = ref(AuthorizationEnum.KNOWLEDGE)
@@ -114,7 +113,6 @@ function isManage(type: String) {
 }
 
 function submitPermissions() {
-  rLoading.value = true
   const obj: any = {
     user_resource_permission_list: [],
   }
@@ -128,55 +126,39 @@ function submitPermissions() {
       })
     })
   })
-  AuthorizationApi.putResourceAuthorization(workspace_id.value, currentUser.value, obj)
-    .then(() => {
-      MsgSuccess(t('common.submitSuccess'))
-      ResourcePermissions(workspace_id.value, currentUser.value)
-    })
-    .catch(() => {
-      rLoading.value = false
-    })
+  AuthorizationApi.putResourceAuthorization(currentUser.value, obj, rLoading).then(() => {
+    MsgSuccess(t('common.submitSuccess'))
+    ResourcePermissions(currentUser.value)
+  })
 }
 
 function clickMemberHandle(item: any) {
   currentUser.value = item.id
   currentType.value = item.type
-  ResourcePermissions(workspace_id.value, item.id)
+  ResourcePermissions(item.id)
 }
 
 function getMember(id?: string) {
-  loading.value = true
-  AuthorizationApi.getUserList(workspace_id.value)
-    .then((res) => {
-      memberList.value = res.data
-      filterMember.value = res.data
+  AuthorizationApi.getUserList(loading).then((res) => {
+    memberList.value = res.data
+    filterMember.value = res.data
 
-      const user = (id && memberList.value.find((p: any) => p.user_id === id)) || null
-      currentUser.value = user ? user.id : memberList.value[0].id
-      currentType.value = user ? user.type : memberList.value[0].type
-      ResourcePermissions(workspace_id.value, currentUser.value)
-      loading.value = false
-    })
-    .catch(() => {
-      loading.value = false
-    })
+    const user = (id && memberList.value.find((p: any) => p.user_id === id)) || null
+    currentUser.value = user ? user.id : memberList.value[0].id
+    currentType.value = user ? user.type : memberList.value[0].type
+    ResourcePermissions(currentUser.value)
+  })
 }
-function ResourcePermissions(workspace_id: string, user_id: string) {
-  rLoading.value = true
-  AuthorizationApi.getResourceAuthorization(workspace_id, user_id)
-    .then((res) => {
-      if (!res.data || Object.keys(res.data).length > 0) {
-        settingTags.map((item: any) => {
-          if (Object.keys(res.data).indexOf(item.value) !== -1) {
-            item.data = res.data[item.value]
-          }
-        })
-      }
-      rLoading.value = false
-    })
-    .catch(() => {
-      rLoading.value = false
-    })
+function ResourcePermissions(user_id: string) {
+  AuthorizationApi.getResourceAuthorization(user_id, rLoading).then((res) => {
+    if (!res.data || Object.keys(res.data).length > 0) {
+      settingTags.map((item: any) => {
+        if (Object.keys(res.data).indexOf(item.value) !== -1) {
+          item.data = res.data[item.value]
+        }
+      })
+    }
+  })
 }
 
 function refresh(data?: string[]) {}