fix(user): user manage

frontend/src/views/ds/Datasource.vue

@@ -14,7 +14,7 @@ import DatasourceListSide from './DatasourceListSide.vue'
 import DatasourceForm from './DatasourceForm.vue'
 import { datasourceApi } from '@/api/datasource'
 import Card from './Card.vue'
-import { dsTypeWithImg } from './js/ds-type'
+import { dsTypeWithImgSort } from './js/ds-type'
 import { useI18n } from 'vue-i18n'
 
 interface Datasource {
@@ -34,20 +34,24 @@ const datasourceConfigvVisible = ref(false)
 const editDatasource = ref(false)
 const activeStep = ref(0)
 const activeName = ref('')
+const activeType = ref('')
 const datasourceFormRef = ref()
 
 const datasourceList = shallowRef([] as Datasource[])
-const defaultDatasourceList = shallowRef(dsTypeWithImg as (Datasource & { img: string })[])
+const defaultDatasourceList = shallowRef(dsTypeWithImgSort as (Datasource & { img: string })[])
 
 const currentDefaultDatasource = ref('')
 const datasourceListWithSearch = computed(() => {
-  if (!keywords.value) return datasourceList.value
-  return datasourceList.value.filter((ele) =>
-    ele.name.toLowerCase().includes(keywords.value.toLowerCase())
+  if (!keywords.value && !currentDatasourceType.value) return datasourceList.value
+  return datasourceList.value.filter(
+    (ele) =>
+      ele.name.toLowerCase().includes(keywords.value.toLowerCase()) &&
+      (ele.type === currentDatasourceType.value || !currentDatasourceType.value)
   )
 })
 const beforeClose = () => {
   datasourceConfigvVisible.value = false
+  activeStep.value = 0
 }
 const defaultDatasourceListWithSearch = computed(() => {
   if (!defaultDatasourceKeywords.value) return defaultDatasourceList.value
@@ -56,8 +60,16 @@ const defaultDatasourceListWithSearch = computed(() => {
   )
 })
 
+const currentDatasourceType = ref('')
+
 const handleDefaultDatasourceChange = (item: any) => {
-  currentDefaultDatasource.value = item.name
+  if (currentDatasourceType.value === item.type) {
+    currentDefaultDatasource.value = ''
+    currentDatasourceType.value = ''
+  } else {
+    currentDefaultDatasource.value = item.name
+    currentDatasourceType.value = item.type
+  }
 }
 
 const formatKeywords = (item: string) => {
@@ -92,6 +104,14 @@ const handleAddDatasource = () => {
   datasourceConfigvVisible.value = true
 }
 
+const refresh = () => {
+  activeName.value = ''
+  activeStep.value = 0
+  activeType.value = ''
+  datasourceConfigvVisible.value = false
+  search()
+}
+
 const deleteHandler = (item: any) => {
   ElMessageBox.confirm(t('datasource.data_source', { msg: item.name }), {
     confirmButtonType: 'danger',
@@ -124,11 +144,12 @@ const deleteHandler = (item: any) => {
 const clickDatasource = (ele: any) => {
   activeStep.value = 1
   activeName.value = ele.name
+  activeType.value = ele.type
 }
 
 const clickDatasourceSide = (ele: any) => {
   activeName.value = ele.name
-  activeStep.value = 1
+  activeType.value = ele.type
 }
 
 const search = () => {
@@ -138,28 +159,6 @@ const search = () => {
 }
 search()
 
-const submit = (item: any) => {
-  if (!item.id) {
-    datasourceApi.add(item).then(() => {
-      beforeClose()
-      search()
-      ElMessage({
-        type: 'success',
-        message: 'Add completed',
-      })
-    })
-    return
-  }
-  datasourceApi.edit(item).then(() => {
-    beforeClose()
-    search()
-    ElMessage({
-      type: 'success',
-      message: 'Edit completed',
-    })
-  })
-}
-
 const currentDataTable = ref()
 const dataTableDetail = (ele: any) => {
   currentDataTable.value = ele
@@ -187,7 +186,7 @@ const dataTableDetail = (ele: any) => {
         <el-popover popper-class="system-default_datasource" placement="bottom">
           <template #reference>
             <el-button secondary>
-              {{ $t('datasource.all_types') }}
+              {{ currentDefaultDatasource || $t('datasource.all_types') }}
               <el-icon style="margin-left: 8px">
                 <arrow_down></arrow_down>
               </el-icon> </el-button
@@ -298,7 +297,8 @@ const dataTableDetail = (ele: any) => {
         ref="datasourceFormRef"
         :active-step="activeStep"
         :active-name="activeName"
-        @submit="submit"
+        :active-type="activeType"
+        @refresh="refresh"
         @change-active-step="(val: number) => (activeStep = val)"
       ></DatasourceForm>
     </el-drawer>
@@ -324,6 +324,8 @@ const dataTableDetail = (ele: any) => {
   .card-content {
     display: flex;
     flex-wrap: wrap;
+    max-height: calc(100% - 40px);
+    overflow-y: auto;
   }
 }
 </style>

frontend/src/views/ds/DatasourceForm.vue

@@ -16,17 +16,19 @@ import EmptyBackground from '@/views/dashboard/common/EmptyBackground.vue'
 const props = withDefaults(
   defineProps<{
     activeName: string
+    activeType: string
     activeStep: number
   }>(),
   {
     activeName: '',
+    activeType: '',
     activeStep: 0,
   }
 )
 
 const { wsCache } = useCache()
 const dsFormRef = ref<FormInstance>()
-const emit = defineEmits(['refresh', 'submit', 'changeActiveStep'])
+const emit = defineEmits(['refresh', 'changeActiveStep'])
 const isCreate = ref(true)
 const isEditTable = ref(false)
 const checkList = ref<any>([])
@@ -58,7 +60,7 @@ const dialogVisible = ref<boolean>(false)
 const form = ref<any>({
   name: '',
   description: '',
-  type: 'mysql',
+  type: props.activeType,
   configuration: '',
   driver: '',
   host: '',
@@ -326,14 +328,6 @@ onMounted(() => {
   }, 100)
 })
 
-const submitModle = () => {
-  dsFormRef.value!.validate((res: any) => {
-    if (res) {
-      emit('submit')
-    }
-  })
-}
-
 const keywords = ref('')
 const tableListWithSearch = computed(() => {
   if (!keywords.value) return tableList.value
@@ -350,6 +344,13 @@ watch(keywords, () => {
   isIndeterminate.value = checkedCount > 0 && checkedCount < tableListWithSearch.value.length
 })
 
+watch(
+  () => props.activeType,
+  (val) => {
+    form.value.type = val
+  }
+)
+
 const checkAll = ref(false)
 const isIndeterminate = ref(false)
 let checkTableList = [] as any[]
@@ -386,7 +387,6 @@ const tableListSave = () => {
 
 defineExpose({
   initForm,
-  submitModle,
   tableListSave,
 })
 </script>

frontend/src/views/ds/DatasourceList.vue

@@ -26,7 +26,7 @@ const handleModelClick = (item: any) => {
 </script>
 
 <template>
-  <div class="model-list">
+  <div class="datasouce-list">
     <div class="title">{{ $t('qa.select_datasource') }}</div>
     <el-input
       v-model="keywords"
@@ -61,7 +61,7 @@ const handleModelClick = (item: any) => {
 </template>
 
 <style lang="less" scoped>
-.model-list {
+.datasouce-list {
   width: 800px;
   margin: 0 auto;
   max-height: 100%;
@@ -91,7 +91,7 @@ const handleModelClick = (item: any) => {
       padding-left: 16px;
       margin-bottom: 16px;
       border: 1px solid #dee0e3;
-      border-radius: 4px;
+      border-radius: 12px;
       margin-left: 16px;
       cursor: pointer;
       &:hover {

frontend/src/views/ds/js/ds-type.ts

@@ -13,11 +13,19 @@ export const dsType = [
 ]
 
 export const dsTypeWithImg = [
-  { name: 'MySQL', type: 'mysql', img: mysql_ds },
-  { name: 'PostgreSQL', type: 'pg', img: pg },
-  { name: 'Microsoft SQL Server', type: 'sqlServer', img: sqlServer },
-  { name: 'Oracle', type: 'oracle', img: oracle },
   { name: '本地 Excel/CSV', type: 'excel', img: excel },
+  { name: 'MySQL', type: 'mysql', img: mysql_ds },
+  { name: 'SQL Server', type: 'sqlServer', img: sqlServer },
+  { name: 'Oracle', type: 'oracle', img: oracle },
+  { name: 'PostgreSQL', type: 'pg', img: pg },
+]
+
+export const dsTypeWithImgSort = [
+  { name: '本地 Excel/CSV', type: 'excel', img: excel },
+  { name: 'PostgreSQL', type: 'pg', img: pg },
+  { name: 'Oracle', type: 'oracle', img: oracle },
+  { name: 'MySQL', type: 'mysql', img: mysql_ds },
+  { name: 'SQL Server', type: 'sqlServer', img: sqlServer },
 ]
 
 export const haveSchema = ['sqlServer', 'pg', 'oracle']

frontend/src/views/system/model/Card.vue

@@ -30,7 +30,7 @@ const current_supplier = computed(() => {
 const emits = defineEmits(['edit', 'del'])
 
 const handleEdit = () => {
-  emits('edit', props.id)
+  emits('edit')
 }
 
 const handleDel = () => {

frontend/src/views/system/model/Model.vue

@@ -32,6 +32,7 @@ const modelConfigvVisible = ref(false)
 const editModel = ref(false)
 const activeStep = ref(0)
 const activeName = ref('')
+const activeType = ref('')
 const modelFormRef = ref()
 
 reactive({
@@ -102,9 +103,11 @@ const handleAddModel = () => {
   activeStep.value = 0
   modelConfigvVisible.value = true
 }
-const handleEditModel = (id: any) => {
+const handleEditModel = (row: any) => {
   activeStep.value = 1
-  modelApi.query(id).then((res: any) => {
+  activeType.value = row.supplier
+  activeName.value = row.supplier_item.name
+  modelApi.query(row.id).then((res: any) => {
     modelConfigvVisible.value = true
     nextTick(() => {
       modelFormRef.value.initForm({ ...res })
@@ -287,7 +290,7 @@ const submit = (item: any) => {
         :modle-type="getModelTypeName(ele['model_type'])"
         :base-modle="ele['base_model']"
         :is-default="ele['default_model']"
-        @edit="handleEditModel"
+        @edit="handleEditModel(ele)"
         @del="deleteHandler"
       ></card>
     </div>
@@ -320,12 +323,14 @@ const submit = (item: any) => {
       <ModelListSide
         v-if="activeStep === 1"
         :active-name="activeName"
+        :active-type="activeType"
         @click-model="supplierChang"
       ></ModelListSide>
       <ModelForm
         v-if="activeStep === 1"
         ref="modelFormRef"
         :active-name="activeName"
+        :active-type="activeType"
         @submit="submit"
       ></ModelForm>
       <template #footer>

frontend/src/views/system/model/ModelForm.vue

@@ -37,7 +37,7 @@ const modelForm = reactive({
   api_domain: '',
   config_list: [],
 })
-let isCreate = false
+const isCreate = ref(false)
 const modelRef = ref()
 const paramsFormRef = ref()
 const advancedSetting = ref([] as ParamsFormData[])
@@ -51,7 +51,7 @@ const modelList = computed(() => {
   return base_model_options(modelForm.supplier, modelForm.model_type)
 })
 const handleParamsEdite = (ele?: any) => {
-  isCreate = false
+  isCreate.value = false
   paramsFormDrawer.value = true
   nextTick(() => {
     paramsFormRef.value.initForm(ele)
@@ -59,7 +59,7 @@ const handleParamsEdite = (ele?: any) => {
 }
 
 const handleParamsCreate = () => {
-  isCreate = true
+  isCreate.value = true
   paramsFormDrawer.value = true
   nextTick(() => {
     paramsFormRef.value.initForm()
@@ -67,7 +67,7 @@ const handleParamsCreate = () => {
 }
 
 const handleParamsDel = (item: any) => {
-  advancedSetting.value = advancedSetting.value.filter((ele) => ele.key !== item.key)
+  advancedSetting.value = advancedSetting.value.filter((ele) => ele.id !== item.id)
 }
 
 const rules = {
@@ -107,9 +107,9 @@ const addParams = () => {
 }
 
 const submit = (item: any) => {
-  if (isCreate) {
+  if (isCreate.value) {
     advancedSetting.value.push({ ...item })
-    cancel()
+    beforeClose()
     return
   }
   for (const key in advancedSetting.value) {
@@ -119,10 +119,11 @@ const submit = (item: any) => {
     }
   }
 
-  cancel()
+  beforeClose()
 }
 
-const cancel = () => {
+const beforeClose = () => {
+  paramsFormRef.value.close()
   paramsFormDrawer.value = false
 }
 const supplierChang = (supplier: any) => {
@@ -283,12 +284,19 @@ defineExpose({
     <el-drawer
       v-model="paramsFormDrawer"
       :size="600"
-      :title="$t('model.add') + $t('common.empty') + $t('model.parameters')"
+      :before-close="beforeClose"
+      :title="
+        isCreate
+          ? $t('model.add') + $t('common.empty') + $t('model.parameters')
+          : $t('datasource.edit') + $t('common.empty') + $t('model.parameters')
+      "
     >
       <ParamsForm ref="paramsFormRef" @submit="submit"></ParamsForm>
       <template #footer>
-        <el-button secondary @click="cancel"> {{ $t('common.cancel') }} </el-button>
-        <el-button type="primary" @click="addParams"> {{ t('model.add') }} </el-button>
+        <el-button secondary @click="beforeClose"> {{ $t('common.cancel') }} </el-button>
+        <el-button type="primary" @click="addParams">
+          {{ isCreate ? t('model.add') : t('common.save') }}
+        </el-button>
       </template>
     </el-drawer>
   </div>
@@ -316,6 +324,8 @@ defineExpose({
     width: 800px;
     margin: 0 auto;
     padding-top: 24px;
+    overflow-y: auto;
+    height: calc(100% - 180px);
 
     .ed-form-item--default {
       margin-bottom: 16px;

frontend/src/views/system/model/ModelList.vue

@@ -67,9 +67,8 @@ const handleModelClick = (item: any) => {
   .list-content {
     margin-top: 16px;
     display: flex;
-    justify-content: space-between;
     height: calc(100% - 40px);
-    gap: 16px;
+    flex-wrap: wrap;
     .model:nth-child(odd) {
       margin-left: 0;
     }
@@ -81,10 +80,9 @@ const handleModelClick = (item: any) => {
       align-items: center;
       padding-left: 16px;
       margin-bottom: 16px;
-      margin-left: 16px;
-      flex-wrap: wrap;
       border: 1px solid #dee0e3;
-      border-radius: 4px;
+      border-radius: 12px;
+      margin-left: 16px;
       cursor: pointer;
       &:hover {
         box-shadow: 0px 6px 24px 0px #1f232914;

frontend/src/views/system/model/ParamsForm.vue

@@ -8,6 +8,7 @@ const paramsForm = reactive({
   name: '',
   key: '',
   val: '',
+  id: '',
 })
 
 const rules = {
@@ -38,6 +39,9 @@ const initForm = (item: any) => {
   if (item) {
     Object.assign(paramsForm, { ...item })
   }
+  if (!paramsForm.id) {
+    paramsForm.id = `${+new Date()}`
+  }
   paramsRef.value.clearValidate()
 }
 
@@ -50,9 +54,17 @@ const submit = () => {
     }
   })
 }
+
+const close = () => {
+  paramsForm.name = ''
+  paramsForm.key = ''
+  paramsForm.val = ''
+  paramsForm.id = ''
+}
 defineExpose({
   initForm,
   submit,
+  close,
 })
 </script>