Merge pull request #49 from Kabimon/feature/ui_refactory

Feature/UI refactory
WeBankFinTech · Feb 17, 2022 · 7e7c723 · 7e7c723
2 parents eddf442 + 68eabc1
commit 7e7c723
Show file tree

Hide file tree

Showing 13 changed files with 212 additions and 80 deletions.
diff --git a/web/.fes.js b/web/.fes.js
diff --git a/web/src/common/service.js b/web/src/common/service.js
@@ -2,8 +2,8 @@
 import { request } from "@fesjs/fes";
 import { BASE_URL } from "@/common/constants";
 ////////////////////////////////////////////////////////////////////
-export const getProjectList = (name) => {
-  return request("/projects", { name }, { method: "POST" });
+export const getProjectList = (name, current, size) => {
+  return request("/projects", { name, current, size }, { method: "POST" });
 };
 
 export const createProject = (body) => {
@@ -149,6 +149,17 @@ export const copyJob = (id, params) => {
   );
 };
 
+//编辑任务
+export const modifyJob = (id, params) => {
+  return request(
+    `/job/${id}`,
+    { ...params },
+    {
+      method: "PUT",
+    }
+  );
+};
+
 //删除任务
 export const deleteJob = (id) => {
   return request(`/job/${id}`, null, {
@@ -174,8 +185,8 @@ export const executeTask = (id) => {
   });
 };
 
-export const getJobs = (id, jobType) => {
-  return request(`/job?projectId=${id}&jobType=${jobType}`, null, {
+export const getJobs = (id, jobType, current, size) => {
+  return request(`/job?projectId=${id}&jobType=${jobType}&current=${current}&size=${size}`, null, {
     method: "GET",
   });
 };

diff --git a/web/src/locales/en-US.js b/web/src/locales/en-US.js
@@ -133,6 +133,7 @@ export default {
     action: {
       createJob: "Create Job",
       copyJob: "Copy Job",
+      modifyJob: "Modify Job",
       import: "Import",
       export: "Export",
       save: "Save",

diff --git a/web/src/locales/zh-CN.js b/web/src/locales/zh-CN.js
@@ -126,6 +126,7 @@ export default {
     action: {
       createJob: "创建任务",
       copyJob: "复制任务",
+      modifyJob: "编辑任务",
       import: "导入",
       export: "导出",
       save: "保存",

diff --git a/web/src/pages/dataSourceManage/index.vue b/web/src/pages/dataSourceManage/index.vue
@@ -181,7 +181,8 @@ export default {
       {
         title: t("dataSource.table.list.columns.title.describe"),
         align: "center",
-        dataIndex: "desc"
+        dataIndex: "desc",
+        width: 250
       },
       {
         title: t("dataSource.table.list.columns.title.updatetim"),

diff --git a/web/src/pages/jobManagement/components/bottomLog.vue b/web/src/pages/jobManagement/components/bottomLog.vue
@@ -129,6 +129,9 @@ export default {
   created() {
     this.init();
   },
+  beforeUnmount() {
+    clearInterval(this.progressTimer)
+  },
   watch: {
     jobId(val) {
       this.jobExecutionId = val;

diff --git a/web/src/pages/jobManagement/components/createJob.vue b/web/src/pages/jobManagement/components/createJob.vue
@@ -2,11 +2,7 @@
   <div class="container">
     <a-modal
       :visible="visible"
-      :title="
-        !formState.originName
-          ? $t('job.action.createJob')
-          : $t('job.action.copyJob')
-      "
+      :title="actionMap[mode]"
       @ok="handleOk"
       @cancel="handleCancel"
     >
@@ -31,19 +27,19 @@
         :wrapper-col="wrapperCol"
       >
         <a-form-item
-          v-if="!!formState.originName"
+          v-if="mode === 'copy'"
           ref="originName"
           :label="$t('job.jobDetail.originJob')"
           name="originName"
         >
-          <a-input v-model:value="formState.originName" disabled />
+          <a-input v-model:value="formState.originName" disabled/>
         </a-form-item>
         <a-form-item
           ref="jobName"
           :label="$t('job.jobDetail.name')"
           name="jobName"
         >
-          <a-input v-model:value="formState.jobName" />
+          <a-input v-model:value="formState.jobName" :maxLength="100" />
         </a-form-item>
         <a-form-item :label="$t('job.jobDetail.label')" name="jobLabels">
           <a-tag
@@ -79,7 +75,7 @@
         >
           <a-select v-model:value="formState.jobType">
             <a-select-option value="OFFLINE">{{$t('job.type.offline')}}</a-select-option>
-            <a-select-option value="STREAM">{{$t('job.type.stream')}} </a-select-option>
+            <!--<a-select-option value="STREAM">{{$t('job.type.stream')}} </a-select-option>-->
           </a-select>
         </a-form-item>
         <a-form-item :label="$t('job.jobDetail.engine')" name="engineType">
@@ -91,7 +87,7 @@
           </a-select>
         </a-form-item>
         <a-form-item :label="$t('job.jobDetail.description')" name="jobDesc">
-          <a-textarea v-model:value="formState.jobDesc" />
+          <a-textarea v-model:value="formState.jobDesc" :maxLength="240" />
         </a-form-item>
       </a-form>
     </a-modal>
@@ -110,7 +106,7 @@ import {
 } from 'vue';
 import { PlusOutlined } from '@ant-design/icons-vue';
 import { useI18n } from '@fesjs/fes';
-import { createJob, copyJob, getEngineType } from '@/common/service';
+import { createJob, copyJob, modifyJob, getEngineType } from '@/common/service';
 import { message } from 'ant-design-vue';
 export default defineComponent({
   components: {
@@ -120,12 +116,24 @@ export default defineComponent({
     visible: Boolean,
     editData: Object,
     projectId: String,
+    mode: String
   },
   emits: ['handleJobAction'], //需要声明emits
   setup(props, context) {
+    const actionMap = {
+      create: '创建任务',
+      copy: '复制任务',
+      modify: '编辑任务'
+    }
+    const successMap = {
+      create: '创建任务成功',
+      copy: '复制任务成功',
+      modify: '编辑任务成功'
+    }
     const { t } = useI18n({ useScope: 'global' });
     const formRef = ref();
     const formState = reactive({
+      id: '',
       originName: '',
       jobName: '',
       jobType: 'OFFLINE',
@@ -139,15 +147,23 @@ export default defineComponent({
       inputVisible: false,
       inputValue: '',
     });
+    const _setFormData = (editData) => {
+      formState.jobName = editData.jobName || ''
+      formState.jobType = editData.jobType || ''
+      formState.engineType = editData.engineType || ''
+      formState.jobLabels = editData.jobLabels || ''
+      formState.jobDesc = editData.jobDesc || ''
+      formState.id = editData.id || ''
+    }
     watchEffect(() => {
-      const editData = toRaw(props.editData);
-      if (editData.id) {
+      const { editData, mode } = props
+      _setFormData(editData)
+      if (mode === 'copy') {
         formState.originName = editData.jobName;
-        formState.engineType = editData.engineType;
-        state.tags = editData.jobLabels ? editData.jobLabels.split(',') : [];
-      } else {
-        formState.originName = '';
-        formState.engineType = '';
+        formState.jobName = ''
+        state.tags = editData.jobLabels ? editData.jobLabels.split(',') : []
+      } else if (mode === 'modify'){
+        state.tags = editData.jobLabels ? editData.jobLabels.split(',') : []
       }
     });
     const engines = reactive({
@@ -190,23 +206,30 @@ export default defineComponent({
           const tags = toRaw(state.tags);
           const { originName, ...rest } = data;
           const editData = toRaw(props.editData);
-          const isCopy = !!editData.id;
-          const params = isCopy
-            ? {
-                jobName: rest.jobName,
-                jobLabels: tags.join(','),
-                jobDesc: rest.jobDesc,
-              }
-            : {
-                ...rest,
-                projectId: props.projectId,
-                jobLabels: tags.join(','),
-              };
-          const res = isCopy
-            ? await copyJob(editData.id, params)
-            : await createJob(params);
+          let params, res
+          if (props.mode === 'copy') {
+            params = {
+              jobName: rest.jobName,
+              jobLabels: tags.join(','),
+              jobDesc: rest.jobDesc,
+            }
+            res = await copyJob(editData.id, params)
+          } else if (props.mode === 'create') {
+            params = {
+              ...rest,
+              projectId: props.projectId,
+              jobLabels: tags.join(','),
+            }
+            res = await createJob(params)
+          } else if (props.mode === 'modify') {
+            params = {
+              ...rest,
+              jobLabels: tags.join(','),
+            }
+            res = await modifyJob(editData.id, params)
+          }
           if (res && res.result) {
-            message.success(t(isCopy ? 'job.action.copyJobSuccess' : 'job.action.addJobSuccess'))
+            message.success(successMap[props.mode])
             context.emit('handleJobAction', { ...params, ...editData });
             formRef.value.resetFields();
             Object.assign(state, {
@@ -232,7 +255,6 @@ export default defineComponent({
 
     const handleClose = (removedTag) => {
       const tags = state.tags.filter((tag) => tag !== removedTag);
-      console.log(tags);
       state.tags = [...tags];
     };
 
@@ -249,7 +271,6 @@ export default defineComponent({
       if (inputValue && !tags.includes(inputValue.trim())) {
         tags = [...tags, inputValue.trim()];
       }
-      console.log(tags);
       Object.assign(state, {
         tags,
         inputVisible: false,
@@ -272,6 +293,7 @@ export default defineComponent({
       showInput,
       handleInputConfirm,
       inputRef,
+      actionMap
     };
   },
 });

diff --git a/web/src/pages/jobManagement/components/dataSource.vue b/web/src/pages/jobManagement/components/dataSource.vue
@@ -175,12 +175,12 @@ export default defineComponent({
 
     const dataSource = reactive({
       dataSourceIds: {
-        source: props.dsData.dataSourceIds.source || {},
-        sink: props.dsData.dataSourceIds.sink || {},
+        source: { ...props.dsData.dataSourceIds.source },
+        sink: { ...props.dsData.dataSourceIds.sink }
       },
       params: {
-        sources: props.dsData.params.sources || [],
-        sinks: props.dsData.params.sinks || [],
+        sources: [ ...props.dsData.params.sources ],
+        sinks: [ ...props.dsData.params.sinks ]
       },
     });
 
@@ -202,25 +202,42 @@ export default defineComponent({
       sinksHelpStatus[key] = "success";
     });
 
-    const newProps = computed(() => JSON.parse(JSON.stringify(props.dsData)));
+    const newProps = computed(() => JSON.parse(JSON.stringify(props.dsData)))
     watch(newProps, (val, oldVal) => {
       const newVal = typeof val === "string" ? JSON.parse(val) : val;
       sourceTitle.value = objToTitle(newVal.dataSourceIds.source);
       sinkTitle.value = objToTitle(newVal.dataSourceIds.sink);
       dataSource.dataSourceIds = {
         source: newVal.dataSourceIds.source || {},
-        sink: newVal.dataSourceIds.sink || {},
+        sink: newVal.dataSourceIds.sink || {}
       };
       dataSource.params = {
         sources: newVal.params.sources || [],
-        sinks: newVal.params.sinks || [],
+        sinks: newVal.params.sinks || []
       };
     });
 
     const formRef = ref();
     const updateSourceInfo = (dsInfo, id) => {
       const info = dsInfo.split("-");
-      if ((dataSource.dataSourceIds.sink.type && dataSource.dataSourceIds.source.type !== 'HIVE')
+
+      // 修改来源数据源，清空目的数据源
+      dataSource.dataSourceIds.sink = {
+        type: '',
+        id: '',
+        db: '',
+        table: '',
+        ds: ''
+      }
+      sinkTitle.value = objToTitle({
+        type: '',
+        id: '',
+        db: '',
+        table: '',
+        ds: '',
+      })
+      dataSource.params.sinks = []
+      /*if ((dataSource.dataSourceIds.sink.type && dataSource.dataSourceIds.source.type !== 'HIVE')
         && (info[0] && info[0] !== 'HIVE')
         && props.engineType === 'SQOOP') {
         sourceTitle.value = objToTitle({
@@ -231,13 +248,12 @@ export default defineComponent({
           ds: "",
         });
         return message.error("SQOOP引擎输入/输出数据源必须包含HIVE,请重新选择");
-      }
+      }*/
       dataSource.dataSourceIds.source.type = info[0];
       dataSource.dataSourceIds.source.ds = info[1];
       dataSource.dataSourceIds.source.db = info[2];
       dataSource.dataSourceIds.source.table = info[3];
       dataSource.dataSourceIds.source.id = id;
-
       getSourceParams(
         props.engineType,
         dataSource.dataSourceIds.source.type,