fix(user): user manage

Author: dataeaseShu

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: '本地 Excel/CSV', type: 'excel', img: excel },
   { name: 'MySQL', type: 'mysql', img: mysql_ds },
-  { name: 'PostgreSQL', type: 'pg', img: pg },
-  { name: 'Microsoft SQL Server', type: 'sqlServer', img: sqlServer },
+  { 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>