[Feature][UI Next] Delete Conditions Component (#7999)

* delete condition component
* rename file manage route

dolphinscheduler-ui-next/src/components/conditions/index.module.scss

@@ -1,31 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
- .conditions-model {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin: 10px 0;
-  .right {
-    > .form-box {
-      .list {
-        float: right;
-        margin: 3px 0 3px 4px;
-      }
-    }
-  }
-}

dolphinscheduler-ui-next/src/components/conditions/index.tsx

@@ -1,67 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import _ from 'lodash'
-import { useI18n } from 'vue-i18n'
-import { defineComponent, ref } from 'vue'
-import { SearchOutlined } from '@vicons/antd'
-import { NButton, NIcon, NInput, NSpace } from 'naive-ui'
-import Card from '@/components/card'
-import styles from './index.module.scss'
-
-const Conditions = defineComponent({
-  name: 'Conditions',
-  emits: ['conditions'],
-  setup(props, ctx) {
-    const searchVal = ref()
-    const handleConditions = () => {
-      ctx.emit('conditions', _.trim(searchVal.value))
-    }
-
-    return { searchVal, handleConditions }
-  },
-  render() {
-    const { t } = useI18n()
-    const { $slots, handleConditions } = this
-    return (
-      <Card style={{ marginBottom: '5px' }}>
-        <div class={styles['conditions-model']}>
-          <NSpace>{$slots}</NSpace>
-          <div class={styles.right}>
-            <div class={styles['form-box']}>
-              <div class={styles.list}>
-                <NButton onClick={handleConditions}>
-                  <NIcon>
-                    <SearchOutlined />
-                  </NIcon>
-                </NButton>
-              </div>
-              <div class={styles.list}>
-                <NInput
-                  placeholder={t('resource.file.enter_keyword_tips')}
-                  v-model={[this.searchVal, 'value']}
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </Card>
-    )
-  },
-})
-
-export default Conditions

dolphinscheduler-ui-next/src/router/modules/resources.ts

@@ -25,13 +25,13 @@ const components: { [key: string]: Component } = utils.mapping(modules)
 export default {
   path: '/resource',
   name: 'resource',
-  redirect: { name: 'file' },
+  redirect: { name: 'file-manage' },
   meta: { title: '资源中心' },
   component: () => import('@/layouts/content'),
   children: [
     {
-      path: '/resource/file',
+      path: '/resource/file-manage',
-      name: 'file',
+      name: 'file-manage',
       component: components['file'],
       meta: {
         title: '文件管理',

dolphinscheduler-ui-next/src/views/resource/file/index.module.scss

@@ -68,4 +68,19 @@
       }
     }
   }
-}
+}
+
+.conditions-model {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 10px 0;
+  .right {
+    > .form-box {
+      .list {
+        float: right;
+        margin: 3px 0 3px 4px;
+      }
+    }
+  }
+}

dolphinscheduler-ui-next/src/views/resource/file/index.tsx

@@ -25,10 +25,18 @@ import {
   watch,
   inject,
 } from 'vue'
-import { NDataTable, NButtonGroup, NButton, NPagination } from 'naive-ui'
+import {
+  NIcon,
+  NSpace,
+  NDataTable,
+  NButtonGroup,
+  NButton,
+  NPagination,
+  NInput,
+} from 'naive-ui'
 import { useI18n } from 'vue-i18n'
+import { SearchOutlined } from '@vicons/antd'
 import Card from '@/components/card'
-import Conditions from '@/components/conditions'
 import { useTable } from './table/use-table'
 import { useFileState } from './use-file'
 import ResourceFolderModal from './folder'
@@ -96,9 +104,11 @@ export default defineComponent({
 
     const { getResourceListState } = useFileState(setPagination)
 
-    const handleConditions = (val: string) => {
+    const handleConditions = () => {
-      serachRef.value = val
+      resourceListRef.value = getResourceListState(
-      resourceListRef.value = getResourceListState(fileId.value, val)
+        fileId.value,
+        serachRef.value,
+      )
     }
 
     const handleCreateFolder = () => {
@@ -144,6 +154,7 @@ export default defineComponent({
 
     return {
       fileId,
+      serachRef,
       folderShowRef,
       uploadShowRef,
       renameShowRef,
@@ -172,19 +183,40 @@ export default defineComponent({
     } = this
     return (
       <div>
-        <Conditions onConditions={handleConditions}>
+        <Card style={{ marginBottom: '8px' }}>
-          <NButtonGroup>
+          <div class={styles['conditions-model']}>
-            <NButton onClick={handleCreateFolder}>
+            <NSpace>
-              {t('resource.file.create_folder')}
+              <NButtonGroup>
-            </NButton>
+                <NButton onClick={handleCreateFolder}>
-            <NButton onClick={handleCreateFile}>
+                  {t('resource.file.create_folder')}
-              {t('resource.file.create_file')}
+                </NButton>
-            </NButton>
+                <NButton onClick={handleCreateFile}>
-            <NButton onClick={handleUploadFile}>
+                  {t('resource.file.create_file')}
-              {t('resource.file.upload_files')}
+                </NButton>
-            </NButton>
+                <NButton onClick={handleUploadFile}>
-          </NButtonGroup>
+                  {t('resource.file.upload_files')}
-        </Conditions>
+                </NButton>
+              </NButtonGroup>
+            </NSpace>
+            <div class={styles.right}>
+              <div class={styles['form-box']}>
+                <div class={styles.list}>
+                  <NButton onClick={handleConditions}>
+                    <NIcon>
+                      <SearchOutlined />
+                    </NIcon>
+                  </NButton>
+                </div>
+                <div class={styles.list}>
+                  <NInput
+                    placeholder={t('resource.file.enter_keyword_tips')}
+                    v-model={[this.serachRef, 'value']}
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </Card>
         <Card title={t('resource.file.file_manage')}>
           <NDataTable
             remote