ASW-170 feat: package 新增修改页面开发

9 files changed, 330 insertions, 48 deletions

diff --git a/src/axios/api/package.js b/src/axios/api/package.js
index 906fcff..fdaa2ae 100644
--- a/src/axios/api/package.js
+++ b/src/axios/api/package.js
@@ -27,8 +27,8 @@ export const packageDetailApi = async (workspaceId, id) => {
   }
 };
 
-// package 上传
-export const packageUploadApi = async (workspaceId, data) => {
+// package 新增
+export const packageAddApi = async (workspaceId, data) => {
   try {
     const res = await axiosInstance({
       url: `/api/v1/workspace/${workspaceId}/package`,
@@ -42,6 +42,19 @@ export const packageUploadApi = async (workspaceId, data) => {
   }
 };
 
+// package 修改
+export const packageEditApi = async (workspaceId, data) => {
+  try {
+    const res = await axiosInstance({
+      url: `/api/v1/workspace/${workspaceId}/package`,
+      method: 'PUT',
+      data: data,
+    });
+    return res.data;
+  } catch (err) {
+    return err.data;
+  }
+};
 
 // package 删除
 export const packageDeleteApi = async (workspaceId, data) => {
diff --git a/src/i18n/en.js b/src/i18n/en.js
index aac4f28..c83f602 100644
--- a/src/i18n/en.js
+++ b/src/i18n/en.js
@@ -302,7 +302,7 @@ export default {
     protocol: 'Protocol',
   },
   package: {
-    create_package: 'New Package',
+    new_package: 'New Package',
     delete_hint_title: 'Delete Package',
     delete_hint_message: 'Are you sure you want to delete {package}?',
     add: {
@@ -312,7 +312,10 @@ export default {
       version: 'Version',
       file_size: 'Size',
       package_name: 'Package name',
-    }
+    },
+    automatically: 'Automatically obtained from the application file',
+    package_file: 'Package file',
+    supports_uploading: 'Only supports uploading apk format files.',
   },
   job: {
     create_job: 'Create job',
diff --git a/src/i18n/zh.js b/src/i18n/zh.js
index f1bc923..0e6a253 100644
--- a/src/i18n/zh.js
+++ b/src/i18n/zh.js
@@ -302,7 +302,7 @@ export default {
     protocol: '协议',
   },
   package: {
-    create_package: '创建包',
+    new_package: '创建包',
     delete_hint_title: '删除包',
     delete_hint_message: '您确认删除 {package} 吗？',
     add: {
@@ -312,7 +312,10 @@ export default {
       version: '版本',
       file_size: '文件大小',
       package_name: '包名',
-    }
+    },
+    automatically: '从应用程序文件中自动获取',
+    package_file: '打包文件',
+    supports_uploading: '只支持上传apk格式的文件。',
   },
   job: {
     create_job: '创建任务',
diff --git a/src/router/permissions.js b/src/router/permissions.js
index 4364f20..19b1a5a 100644
--- a/src/router/permissions.js
+++ b/src/router/permissions.js
@@ -183,9 +183,17 @@ const systemRoutes = {
     {
       path: '/:workspace?/packages/add',
       name: 'package_add',
-      component: () => import('@/views/packages/index.vue'),
+      component: () => import('@/views/packages/edit.vue'),
       meta: {
-        permission: 'packages',
+        permission: 'package_add',
+      },
+    },
+    {
+      path: '/:workspace?/packages/:id/edit',
+      name: 'package_edit',
+      component: () => import('@/views/packages/edit.vue'),
+      meta: {
+        permission: 'package_edit',
       },
     },
     {
diff --git a/src/views/applications/edit.vue b/src/views/applications/edit.vue
index 669c7e0..954bb30 100644
--- a/src/views/applications/edit.vue
+++ b/src/views/applications/edit.vue
@@ -379,7 +379,12 @@
                       :sort-orders="['ascending', 'descending']"
                     >
                       <template #default="scope">
-                        <template v-if="item.prop === 'committedDate'">
+                        <template v-if="item.prop === 'message'">
+                          <div style="white-space: pre-wrap">
+                            {{ scope.row[item.prop] }}
+                          </div>
+                        </template>
+                        <template v-else-if="item.prop === 'committedDate'">
                           {{
                             getTimeAgo(
                               new Date().getTime(),
diff --git a/src/views/applications/history.vue b/src/views/applications/history.vue
index 8d7ebe6..0811ca1 100644
--- a/src/views/applications/history.vue
+++ b/src/views/applications/history.vue
@@ -77,7 +77,12 @@
           :sort-orders="['ascending', 'descending']"
         >
           <template #default="scope">
-            <template v-if="item.prop === 'committedDate'">
+            <template v-if="item.prop === 'message'">
+              <div style="white-space: pre-wrap">
+                {{ scope.row[item.prop] }}
+              </div>
+            </template>
+            <template v-else-if="item.prop === 'committedDate'">
               <div class="primary-secondary">
                 <span>
                   {{ moment(scope.row[item.prop]).format('YYYY-MM-DD') }}
diff --git a/src/views/applications/mergeDetail.vue b/src/views/applications/mergeDetail.vue
index 9f30cbf..87166a1 100644
--- a/src/views/applications/mergeDetail.vue
+++ b/src/views/applications/mergeDetail.vue
@@ -95,7 +95,12 @@
               :sort-orders="['ascending', 'descending']"
             >
               <template #default="scope">
-                <template v-if="item.prop === 'committedDate'">
+                <template v-if="item.prop === 'message'">
+                  <div style="white-space: pre-wrap">
+                    {{ scope.row[item.prop] }}
+                  </div>
+                </template>
+                <template v-else-if="item.prop === 'committedDate'">
                   <div class="primary-secondary">
                     <span>
                       {{ moment(scope.row[item.prop]).format('YYYY-MM-DD') }}
@@ -324,7 +329,7 @@ onBeforeMount(() => {
 <style lang="scss" scoped>
 #mergeDetail {
   padding: 24px 30px;
-  .detail-breadcrumb{
+  .detail-breadcrumb {
     padding: 0 20px;
     height: unset;
     max-height: 40px;
diff --git a/src/views/packages/edit.vue b/src/views/packages/edit.vue
new file mode 100644
index 0000000..1b3d772
--- /dev/null
+++ b/src/views/packages/edit.vue
@@ -0,0 +1,251 @@
+<template>
+  <div id="packages_edit" class="detail" v-loading="loading">
+    <p class="detail-title" v-if="type == 'add'">
+      <span>{{ t('package.new_package') }}</span>
+    </p>
+    <div class="detail-breadcrumb" v-if="type == 'edit'">
+      <span class="detail-breadcrumb-left">
+        <span @click="jumpBack" class="application-back">
+          {{ t('overall.packages') }}
+        </span>
+        <span> / </span>
+        <span>{{ name }}</span>
+      </span>
+    </div>
+    <div class="detail-content">
+      <!-- left -->
+      <div class="detail-left packages-form">
+        <el-form
+          ref="ruleFormRef"
+          :model="ruleForm"
+          :rules="rules"
+          label-position="left"
+          label-width="auto"
+        >
+          <!-- name -->
+          <el-form-item
+            :label="t('overall.name') + ':'"
+            prop="name"
+            size="default"
+          >
+            <el-input
+              v-model="ruleForm.name"
+              :placeholder="t('package.automatically')"
+            />
+          </el-form-item>
+          <!-- description -->
+          <el-form-item
+            :label="t('overall.description') + ':'"
+            prop="description"
+            size="default"
+          >
+            <el-input
+              v-model="ruleForm.description"
+              :placeholder="t('overall.please_input')"
+              :rows="4"
+              show-word-limit
+              maxlength="256"
+              type="textarea"
+            />
+          </el-form-item>
+          <!-- file -->
+          <el-form-item
+            v-if="type == 'add'"
+            :label="t('package.package_file') + ':'"
+            prop="file"
+            size="default"
+          >
+            <el-upload
+              class="file__upload"
+              drag
+              action=""
+              :auto-upload="false"
+              :show-file-list="true"
+              :on-change="uploadChange"
+              :file-list="uploadFileList"
+              accept=".apk"
+            >
+              <i class="asw-icon icon-wenjianshangchuan cp"></i>
+              <div class="upload__text">
+                {{ t('playbook.upload_message_drag') }}
+                <span style="color: #175cdc">
+                  {{ t('playbook.upload_message_click') }}
+                </span>
+              </div>
+              <template #tip>
+                <div class="upload__tip">
+                  {{ t('package.supports_uploading') }}
+                </div>
+              </template>
+            </el-upload>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+    <div class="detail-footer">
+      <el-button size="large" plain @click="jumpBack">
+        {{ t('overall.cancel') }}
+      </el-button>
+
+      <el-button
+        size="large"
+        type="primary"
+        :disabled="submitting"
+        @click="save"
+      >
+        {{ t('overall.save') }}
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useRouter } from 'vue-router';
+import { ref, reactive, computed, onBeforeMount } from 'vue';
+import { packageDetailApi, packageAddApi, packageEditApi } from '@/axios/api';
+import { ElMessage } from 'element-plus';
+import { useI18n } from 'vue-i18n';
+import { useSystemStore } from '@/store/index';
+
+const router = useRouter();
+const { t } = useI18n();
+
+const systemStore = useSystemStore();
+const workspace = computed(() => {
+  return systemStore.workspace;
+});
+
+const type = ref('');
+let routeParams = null;
+const disposeRoute = () => {
+  let currentRoute = router.currentRoute.value;
+  switch (currentRoute.name) {
+    case 'package_add':
+      type.value = 'add';
+      break;
+    case 'package_edit':
+      type.value = 'edit';
+      break;
+  }
+  routeParams = currentRoute.params;
+};
+disposeRoute();
+
+const ruleFormRef = ref(null);
+const ruleForm = reactive({
+  id: '',
+  name: '',
+  description: '',
+  file: null,
+});
+
+const fileValidator = (rule, value, callback) => {
+  if (uploadFileList.value.length === 0) {
+    return callback(t('message.upload_required_tip'));
+  } else {
+    return true;
+  }
+};
+const rules = reactive({
+  file: [{ required: true, validator: fileValidator, trigger: 'change' }],
+});
+
+const uploadFileList = ref([]);
+const uploadChange = (file, fileList) => {
+  if (fileList.length > 0) {
+    uploadFileList.value = [fileList[fileList.length - 1]];
+  }
+  ruleFormRef.value.validateField(['file']);
+};
+
+const submitting = ref(false);
+const save = async () => {
+  if (submitting.value) {
+    return;
+  }
+  submitting.value = true;
+  await ruleFormRef.value.validate(async (valid, fields) => {
+    if (valid) {
+      let res = null;
+      if (ruleForm.id) {
+        const params = {
+          packageId: ruleForm.id,
+          name: ruleForm.name,
+          description: ruleForm.description,
+        };
+        res = await packageEditApi(workspace.value.id, params);
+      } else {
+        const params = new FormData();
+        params.append('name', ruleForm.name);
+        params.append('description', ruleForm.description);
+        params.append('file', uploadFileList.value[0].raw);
+        res = await packageAddApi(workspace.value.id, params);
+      }
+      if (res.code == 200) {
+        jumpBack();
+        ElMessage.success(t('message.save_success'));
+      } else {
+        ElMessage.error(res.msg || res.error);
+      }
+    }
+  });
+  submitting.value = false;
+};
+
+const name = ref('');
+const loading = ref(false);
+const getData = async () => {
+  loading.value = true;
+  let res = await packageDetailApi(workspace.value.id, routeParams.id);
+  if (res.code == 200) {
+    Object.assign(ruleForm, res.data.record);
+    name.value = ruleForm.name;
+  } else {
+    ElMessage.error(res.msg || res.error);
+  }
+  loading.value = false;
+};
+
+onBeforeMount(() => {
+  if (type.value == 'edit') {
+    getData();
+  }
+});
+
+const jumpBack = () => {
+  router.push({
+    name: 'packages',
+    params: {
+      workspace: workspace.value.name,
+    },
+  });
+};
+</script>
+
+<style lang="scss" scoped>
+#packages_edit {
+  .packages-form {
+    padding-left: 50px !important;
+    padding-top: 40px !important;
+    .file__upload {
+      width: 392px;
+      .upload__text {
+        font-size: 12px;
+      }
+      .upload__tip {
+        font-size: 12px;
+        color: var(--text_secondary);
+        line-height: 17px;
+        margin-top: 6px;
+      }
+      .el-upload-dragger {
+        border: 1px solid var(--el-border-color);
+      }
+      i {
+        color: var(--text_secondary);
+        font-size: 26px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/packages/index.vue b/src/views/packages/index.vue
index 4153b55..acfb635 100644
--- a/src/views/packages/index.vue
+++ b/src/views/packages/index.vue
@@ -22,19 +22,9 @@
             <el-icon><Search /></el-icon>
           </template>
         </el-input>
-        <el-upload
-          v-has="'package_add'"
-          action=""
-          :auto-upload="false"
-          :show-file-list="false"
-          v-model:file-list="uploadFileList"
-          :on-change="uploadChange"
-          style="margin-left: 20px"
-        >
-          <el-button type="primary" size="large">
-            {{ t('package.create_package') }}
-          </el-button>
-        </el-upload>
+        <el-button type="primary" size="large" @click="newPackage">
+          {{ t('package.new_package') }}
+        </el-button>
       </div>
     </div>
     <!-- table -->
@@ -149,7 +139,6 @@ import {
   packageListApi,
   packageDeleteApi,
   packageDownloadApi,
-  packageUploadApi,
 } from '@/axios/api';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import { toThousands, downloadFile, bytes } from '@/utils';
@@ -157,14 +146,35 @@ import { useSystemStore } from '@/store/index';
 import { useTable } from '@/hooks/useTable';
 import { get, debounce } from 'lodash';
 import moment from 'moment-timezone';
+import { useRouter } from 'vue-router';
 
+const router = useRouter();
 const { t } = useI18n();
-const systemStore = useSystemStore();
 
+const systemStore = useSystemStore();
 const workspace = computed(() => {
   return systemStore.workspace;
 });
 
+const newPackage = () => {
+  router.push({
+    name: 'package_add',
+    params: {
+      workspace: workspace.value.name,
+    },
+  });
+};
+
+const tableEdit = (row) => {
+  router.push({
+    name: 'package_edit',
+    params: {
+      workspace: workspace.value.name,
+      id: row.id,
+    },
+  });
+};
+
 // 删除
 const tableDelete = (row) => {
   ElMessageBox.confirm(
@@ -193,10 +203,6 @@ const tableDelete = (row) => {
     .catch((e) => {});
 };
 
-const tableEdit = () => {
-  console.log(666);
-};
-
 const tableTitle = ref([
   {
     minWidth: 150,
@@ -258,23 +264,6 @@ const fileSize = (number) => {
   return data.value + ' ' + data.unit;
 };
 
-// 上传数据
-const uploadFileList = ref([]);
-// 上传
-const uploadChange = debounce(async (file, fileList) => {
-  let params = new FormData();
-  params.append('file', uploadFileList.value[0].raw);
-  uploadFileList.value = [];
-  params.append('workspaceId', workspace.value.id);
-  const res = await packageUploadApi(workspace.value.id, params);
-  if (res.code == 200) {
-    fetchList();
-    ElMessage.success(t('message.save_success'));
-  } else {
-    ElMessage.error(res.msg || res.error);
-  }
-}, 10);
-
 // 下载
 const download = debounce(async (id) => {
   const res = await packageDownloadApi(workspace.value.id, id, {