feat: 开站系统信息页面逻辑对接

src/views/system/quick-build/components/ConfigSystem.vue

@@ -1,21 +1,324 @@
 <script setup lang="ts">
 import { fnToStepName } from '../hooks/useStep';
+import { useRouter } from 'vue-router';
+import useI18n from '@/hooks/useI18n';
+import { reactive } from 'vue';
+import useAppStore from '@/store/modules/app';
+import { parseUrlPath } from '@/plugins/file-static-url';
+import { Modal, message } from 'ant-design-vue/lib';
+import { transferStaticFile, uploadFile } from '@/api/tool/file';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import { sessionGet } from '@/utils/cache-session-utils';
+import { FileType } from 'ant-design-vue/lib/upload/interface';
+import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
+import { changeValue } from '@/api/system/config';
+const { t, currentLocale } = useI18n();
+const router = useRouter();
+const appStore = useAppStore();
+
+type StateType = {
+  confirmLoading: boolean;
+  /**图片 */
+  filePath: string; // 是否上传文件
+  type: 'brand' | 'icon';
+  icon: string;
+  brand: string;
+  /**系统名称 */
+  title: string;
+  titleOld: string;
+  /**国际化切换 */
+  open: boolean;
+  openOld: boolean;
+};
+
+const state: StateType = reactive({
+  confirmLoading: false,
+  filePath: '',
+  type: 'icon',
+  icon: getLogoURL('icon'),
+  brand: getLogoURL('brand'),
+  title: appStore.appName,
+  titleOld: appStore.appName,
+  open: appStore.i18nOpen,
+  openOld: appStore.i18nOpen,
+});
+
+// LOGO地址
+function getLogoURL(type: 'brand' | 'icon') {
+  let url =
+    type === 'brand'
+      ? parseUrlPath(appStore.filePathBrand)
+      : parseUrlPath(appStore.filePathIcon);
+  if (url.indexOf('{language}') === -1) {
+    return url;
+  }
+  // 语言参数替换
+  const local = currentLocale.value;
+  const lang = local.split('_')[0];
+  return url.replace('{language}', lang || 'en');
+}
+
+/**上传前检查或转换压缩 */
+function fnBeforeUpload(file: FileType) {
+  if (state.confirmLoading) return false;
+  const isJpgOrPng = ['image/jpeg', 'image/png'].includes(file.type);
+  if (!isJpgOrPng) {
+    message.error(
+      t('views.system.setting.uploadFormat', { format: 'jpg、png' }),
+      3
+    );
+  }
+  const isLt2M = file.size / 1024 / 1024 < 2;
+  if (!isLt2M) {
+    message.error(t('views.system.setting.uploadSize', { size: 2 }), 3);
+  }
+  return isJpgOrPng && isLt2M;
+}
+
+/**上传变更 */
+function fnUpload(up: UploadRequestOption) {
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.system.setting.sysLogoTipContentUpload'),
+    onOk() {
+      // 发送请求
+      const hide = message.loading(t('common.loading'), 0);
+      state.confirmLoading = true;
+      let formData = new FormData();
+      formData.append('file', up.file);
+      formData.append('subPath', 'default');
+      uploadFile(formData).then(res => {
+        state.confirmLoading = false;
+        hide();
+        if (res.code === RESULT_CODE_SUCCESS) {
+          message.success(t('views.system.setting.uploadSuccess'), 3);
+          state.filePath = res.data.fileName;
+          // 兼容旧前端可改配置文件
+          const baseUrl = import.meta.env.PROD
+            ? sessionGet('baseUrl') || import.meta.env.VITE_API_BASE_URL
+            : import.meta.env.VITE_API_BASE_URL;
+          if (state.type === 'icon') {
+            state.icon = `${baseUrl}${res.data.fileName}`;
+          }
+          if (state.type === 'brand') {
+            state.brand = `${baseUrl}${res.data.fileName}`;
+          }
+        } else {
+          message.error(res.msg, 3);
+        }
+      });
+    },
+  });
+}
+
+/**保存信息 */
+function fnSave() {
+  const language = currentLocale.value;
+  const reqArr = [changeValue({ key: 'sys.logo.type', value: state.type })];
+  // 改变LOGO地址
+  if (state.filePath) {
+    let changeFilePath = appStore.filePathIcon;
+    if (state.type === 'brand') {
+      changeFilePath = appStore.filePathBrand;
+    }
+    reqArr.push(
+      transferStaticFile({
+        language: language,
+        uploadPath: state.filePath,
+        staticPath: changeFilePath,
+      })
+    );
+  }
+  // 改变系统名称
+  if (state.title !== state.titleOld) {
+    reqArr.push(changeValue({ key: 'sys.title', value: state.title }));
+  }
+  // 改变语言切换
+  if (state.open !== state.openOld) {
+    reqArr.push(changeValue({ key: 'sys.i18n.open', value: `${state.open}` }));
+    reqArr.push(changeValue({ key: 'sys.i18n.default', value: `${language}` }));
+  }
+
+  // 发送保存
+  state.confirmLoading = true;
+  Promise.all(reqArr).then(resArr => {
+    console.log(resArr);
+    message.success('保存成功！');
+    state.confirmLoading = false;
+  });
+}
+
+/**返回上一步 */
+function fnStepPrev() {
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: '确认要返回上一步吗？',
+    onOk() {
+      fnToStepName('Start');
+    },
+  });
+}
+
+/**下一步操作 */
+function fnStepNext(stepName: 'ConfigNeInfo' | 'Done') {
+  if (stepName === 'ConfigNeInfo') {
+    Modal.confirm({
+      title: t('common.tipTitle'),
+      content: '确认要进行网元快速安装吗？',
+      onOk() {
+        fnToStepName('ConfigNeInfo');
+      },
+    });
+  }
+  if (stepName === 'Done') {
+    Modal.confirm({
+      title: t('common.tipTitle'),
+      content: '确认要直接使用核心网管理平台吗？',
+      onOk() {
+        fnToStepName('Done');
+      },
+    });
+  }
+}
 </script>
 
 <template>
   <div>
-    <div>系统配置</div>
+    <h2>系统配置</h2>
-    <div>系统LOGO：png/jpg</div>
+
-    <div>系统名称：xxxx</div>
+    <a-form
-    <div>隐藏语言切换：false</div>
+      :label-col="{ span: 3 }"
-    <a-button style="margin-left: 8px" @click="fnToStepName('Start')">
+      :label-wrap="true"
-      上一步
+      :wrapper-col="{ span: 16 }"
+    >
+      <a-form-item
+        label="系统LOGO"
+        help="将整张图片展示到系统LOGO区域，请使用透明背景，尺寸比例适应区域大小"
+      >
+        <a-space direction="horizontal" :size="18">
+          <a-radio-group v-model:value="state.type" button-style="solid">
+            <a-radio value="brand">
+              {{ t('views.system.setting.sysLogoBrand') }}
+            </a-radio>
+            <a-radio value="icon">
+              {{ t('views.system.setting.sysLogoIcon') }}
+            </a-radio>
+          </a-radio-group>
+          <a-upload
+            name="file"
+            list-type="picture"
+            accept=".jpg,.png"
+            :max-count="1"
+            :show-upload-list="false"
+            :before-upload="fnBeforeUpload"
+            :custom-request="fnUpload"
+          >
+            <a-button type="link" :loading="state.confirmLoading">
+              {{ t('views.system.setting.sysLogoUpload') }}
             </a-button>
-    <a-button type="primary" @click="fnToStepName('ConfigNeInfo')">
+          </a-upload>
+        </a-space>
+        <div class="header">
+          <div class="header-brand" v-show="state.type === 'brand'">
+            <img :width="174" :height="48" :src="state.brand" />
+          </div>
+          <div class="header-icon" v-show="state.type === 'icon'">
+            <img :src="state.icon" />
+            <h1 :title="state.title">
+              {{ state.title }}
+            </h1>
+          </div>
+          <div class="header-menu">
+            <IconFont type="icon-pcduan" style="margin-right: 10px"></IconFont>
+            {{ t('router.index') }}
+          </div>
+        </div>
+      </a-form-item>
+
+      <a-form-item label="系统名称" help="系统名称限制20个字符长度">
+        <a-input
+          v-model:value="state.title"
+          allow-clear
+          :maxlength="20"
+          :placeholder="t('common.inputPlease')"
+        ></a-input>
+      </a-form-item>
+
+      <a-form-item
+        label="国际化切换"
+        help="进入系统后是否显示国际化切换，默认锁定当前语言"
+      >
+        <a-switch
+          :checked-children="t('common.switch.open')"
+          :un-checked-children="t('common.switch.shut')"
+          v-model:checked="state.open"
+        ></a-switch>
+      </a-form-item>
+    </a-form>
+
+    <div>
+      <a-space direction="horizontal" :size="18">
+        <a-button @click="fnStepPrev()"> 上一步 </a-button>
+        <a-button type="primary" :loading="state.confirmLoading" @click="fnSave()">
+          保存信息
+        </a-button>
+        <a-button type="dashed" @click="fnStepNext('ConfigNeInfo')">
           安装网元
         </a-button>
-    <a-button type="link" @click="fnToStepName('End')"> 跳过网元安装 </a-button>
+        <a-button type="ghost" @click="fnStepNext('Done')"> 直接使用 </a-button>
+      </a-space>
+    </div>
   </div>
 </template>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.header {
+  display: flex;
+  align-content: center;
+  height: 48px;
+  padding-left: 16px;
+  background-color: #001529;
+
+  &-brand {
+    width: 174px;
+    height: 48px;
+    margin-right: 12px;
+    border: 1px var(--ant-primary-color) solid;
+  }
+  &-icon {
+    display: flex;
+    align-content: center;
+    min-width: 174px;
+    height: 100%;
+    align-items: center;
+    margin-right: 16px;
+    border: 1px var(--ant-primary-color) solid;
+
+    & > img {
+      height: 32px;
+      width: 32px;
+      vertical-align: middle;
+      border-style: none;
+      border-radius: 6.66px;
+    }
+    & > h1 {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      width: 130px;
+      color: #fff;
+      margin: 0 0 0 12px;
+      font-weight: 600;
+      font-size: 16px;
+    }
+  }
+
+  &-menu {
+    width: 90px;
+    line-height: 40px;
+    color: #ffffff;
+    align-self: center;
+    text-align: center;
+  }
+}
+</style>