feat: 新增系统设置帮助文档/官网设置

2023-11-23 15:04:46 +08:00
parent 12499e78ea
commit c1c6500df2
13 changed files with 493 additions and 55 deletions
--- a/src/views/system/setting/components/change-copyright.vue
+++ b/src/views/system/setting/components/change-copyright.vue
@@ -72,14 +72,14 @@ onMounted(() => {
            v-model:value="state.copyright"
            allow-clear
            :maxlength="40"
-            :placeholder="t('views.system.setting.sysCopyrightPlease')"
+            :placeholder="t('common.ipnutPlease')"
          ></a-input>
        </a-form-item>

        <a-form-item>
          <a-button
            type="primary"
-            :disabled="state.copyright === state.flag"
+            :disabled="state.copyright === '' || state.copyright === state.flag"
            @click="fnSave"
          >
            {{ t('views.system.setting.saveSubmit') }}
--- a/src/views/system/setting/components/change-help-doc.vue
+++ b/src/views/system/setting/components/change-help-doc.vue
@@ -0,0 +1,204 @@
+<script lang="ts" setup>
+import { Modal, message } from 'ant-design-vue/lib';
+import { onMounted, reactive } from 'vue';
+import useAppStore from '@/store/modules/app';
+import useI18n from '@/hooks/useI18n';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import { changeValue } from '@/api/system/config';
+import { uploadFileChunk } from '@/api/tool/file';
+import { FileType } from 'ant-design-vue/lib/upload/interface';
+import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
+import { sessionGet } from '@/utils/cache-session-utils';
+import { useRouter } from 'vue-router';
+const appStore = useAppStore();
+const router = useRouter();
+const { t } = useI18n();
+
+type StateType = {
+  edite: boolean;
+  loading: boolean;
+  filePath: string;
+  flag: string;
+};
+
+let state: StateType = reactive({
+  edite: false,
+  loading: false,
+  filePath: '',
+  flag: '',
+});
+
+/**上传前检查或转换压缩 */
+function fnBeforeUpload(file: FileType) {
+  console.log(file.type);
+  if (state.loading) return false;
+  const isType = ['application/pdf'].includes(file.type);
+  if (!isType) {
+    message.error(t('views.system.setting.uploadFormat', { format: 'pdf' }), 3);
+  }
+  return isType;
+}
+
+/**上传变更 */
+function fnUpload(up: UploadRequestOption) {
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.system.setting.sysHelpDocTipContentUpload'),
+    onOk() {
+      // 发送请求
+      const hide = message.loading(t('common.loading'), 0);
+      state.loading = true;
+      uploadFileChunk(up.file as File, 5, 'default').then(res => {
+        state.loading = 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;
+          state.flag = `${baseUrl}${res.data.fileName}`;
+        } else {
+          message.error(res.msg, 3);
+        }
+      });
+    },
+  });
+}
+
+/**进入可编辑 */
+function fnEdit(v: boolean) {
+  state.edite = v;
+  if (!v) {
+    state.filePath = '#';
+    state.flag = appStore.getHelpDoc;
+  }
+}
+
+/**提交保存 */
+function fnSave() {
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.system.setting.sysHelpDocTipContent'),
+    onOk() {
+      // 发送请求
+      const hide = message.loading(t('common.loading'), 0);
+      state.loading = true;
+      changeValue({ key: 'sys.helpDoc', value: state.filePath }).then(res => {
+        state.loading = false;
+        hide();
+        if (res.code === RESULT_CODE_SUCCESS) {
+          message.success(t('views.system.setting.saveSuccess'), 3);
+          appStore.helpDoc = state.filePath;
+          fnEdit(false);
+        } else {
+          message.error(res.msg, 3);
+        }
+      });
+    },
+  });
+}
+
+/**还原清空文件 */
+function fnRevert() {
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.system.setting.sysHelpDocTipContentRevert'),
+    onOk() {
+      // 发送请求
+      const hide = message.loading(t('common.loading'), 0);
+      state.loading = true;
+      state.filePath = '#';
+      changeValue({ key: 'sys.helpDoc', value: state.filePath }).then(res => {
+        state.loading = false;
+        hide();
+        if (res.code === RESULT_CODE_SUCCESS) {
+          message.success(t('views.system.setting.revertSuccess'), 3);
+          appStore.helpDoc = state.filePath;
+          fnEdit(false);
+        } else {
+          message.error(res.msg, 3);
+        }
+      });
+    },
+  });
+}
+
+onMounted(() => {
+  state.filePath = appStore.getHelpDoc;
+  state.flag = appStore.getHelpDoc;
+});
+</script>
+
+<template>
+  <a-row :gutter="16">
+    <a-col :lg="12" :md="12" :xs="24" style="margin-bottom: 30px">
+      <a-form layout="vertical" v-if="state.edite">
+        <a-form-item>
+          <a-upload
+            name="file"
+            list-type="text"
+            accept=".pdf"
+            :max-count="1"
+            :show-upload-list="false"
+            :before-upload="fnBeforeUpload"
+            :custom-request="fnUpload"
+          >
+            <a-button type="link" :disabled="state.loading">
+              {{ t('views.system.setting.uploadFile') }}
+            </a-button>
+          </a-upload>
+        </a-form-item>
+
+        <a-form-item>
+          <a-button
+            type="primary"
+            :disabled="state.filePath === state.flag"
+            @click="fnSave"
+          >
+            {{ t('views.system.setting.saveSubmit') }}
+          </a-button>
+          <a-button style="margin-left: 10px" @click="fnEdit(false)">
+            {{ t('common.cancel') }}
+          </a-button>
+        </a-form-item>
+      </a-form>
+
+      <template v-else>
+        <a-form-item>
+          <a-button type="text" v-if="state.flag === '#'">
+            {{ t('views.system.setting.sysHelpDocNo') }}
+          </a-button>
+          <a-button type="link" href="/help" target="_blank" v-else>
+            <template #icon>
+              <QuestionCircleOutlined />
+              {{ t('views.system.setting.sysHelpDocOpen') }}
+            </template>
+          </a-button>
+        </a-form-item>
+
+        <a-button type="default" @click="fnEdit(true)">
+          {{ t('common.editText') }}
+        </a-button>
+        <a-button
+          type="text"
+          danger
+          style="margin-left: 10px"
+          @click="fnRevert"
+        >
+          {{ t('views.system.setting.revert') }}
+        </a-button>
+      </template>
+    </a-col>
+    <a-col :lg="12" :md="12" :xs="24">
+      <a-typography>
+        <a-typography-paragraph>
+          {{ t('views.system.setting.sysHelpDocInstruction') }}
+        </a-typography-paragraph>
+      </a-typography>
+    </a-col>
+  </a-row>
+</template>
+
+<style lang="less" scoped></style>
--- a/src/views/system/setting/components/change-login-bg.vue
+++ b/src/views/system/setting/components/change-login-bg.vue
@@ -169,7 +169,7 @@ onMounted(() => {
            :custom-request="fnUpload"
          >
            <a-button type="link" :disabled="state.loading">
-              {{ t('views.system.setting.sysLoginBgUpload') }}
+              {{ t('views.system.setting.uploadFile') }}
            </a-button>
          </a-upload>
        </a-form-item>
--- a/src/views/system/setting/components/change-official-url.vue
+++ b/src/views/system/setting/components/change-official-url.vue
@@ -0,0 +1,126 @@
+<script lang="ts" setup>
+import { Modal, message } from 'ant-design-vue/lib';
+import { onMounted, reactive } from 'vue';
+import useAppStore from '@/store/modules/app';
+import useI18n from '@/hooks/useI18n';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import { changeValue } from '@/api/system/config';
+import { validHttp } from '@/utils/regular-utils';
+const appStore = useAppStore();
+const { t } = useI18n();
+
+type StateType = {
+  edite: boolean;
+  loading: boolean;
+  url: string;
+  flag: string;
+};
+
+let state: StateType = reactive({
+  edite: false,
+  loading: false,
+  url: '',
+  flag: '',
+});
+
+/**进入可编辑 */
+function fnEdit(v: boolean) {
+  state.edite = v;
+  if (!v) {
+    state.url = appStore.officialUrl;
+    state.flag = appStore.officialUrl;
+  }
+}
+
+/**提交保存 */
+function fnSave() {
+  if (state.url !== '#' && !validHttp(state.url)) {
+    message.info(t('views.system.setting.sysOfficialUrlErrTip'), 3);
+    return;
+  }
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.system.setting.sysOfficialUrlTipContent'),
+    onOk() {
+      // 发送请求
+      const hide = message.loading(t('common.loading'), 0);
+      state.loading = true;
+      changeValue({ key: 'sys.officialUrl', value: state.url }).then(res => {
+        state.loading = false;
+        hide();
+        if (res.code === RESULT_CODE_SUCCESS) {
+          message.success(t('views.system.setting.saveSuccess'), 3);
+          appStore.officialUrl = state.url;
+          fnEdit(false);
+        } else {
+          message.error(res.msg, 3);
+        }
+      });
+    },
+  });
+}
+
+onMounted(() => {
+  state.url = appStore.officialUrl;
+  state.flag = appStore.officialUrl;
+});
+</script>
+
+<template>
+  <a-row :gutter="16">
+    <a-col :lg="12" :md="12" :xs="24" style="margin-bottom: 30px">
+      <a-form layout="vertical" v-if="state.edite">
+        <a-form-item>
+          <a-input
+            v-model:value="state.url"
+            allow-clear
+            :maxlength="255"
+            :placeholder="t('common.ipnutPlease')"
+          ></a-input>
+        </a-form-item>
+
+        <a-form-item>
+          <a-button
+            type="primary"
+            :disabled="state.url === '' || state.url === state.flag"
+            @click="fnSave"
+          >
+            {{ t('views.system.setting.saveSubmit') }}
+          </a-button>
+          <a-button style="margin-left: 10px" @click="fnEdit(false)">
+            {{ t('common.cancel') }}
+          </a-button>
+        </a-form-item>
+      </a-form>
+
+      <template v-else>
+        <a-form-item>
+          <a-button type="text" v-if="state.flag === '#'">
+            {{ t('views.system.setting.sysOfficialUrlNo') }}
+          </a-button>
+          <a-button type="link" :href="state.flag" target="_blank" v-else>
+            <template #icon>
+              <LinkOutlined />
+            </template>
+            {{ t('views.system.setting.sysOfficialUrlOpen') }}
+          </a-button>
+        </a-form-item>
+        <a-button type="dashed" @click="fnEdit(true)">
+          {{ t('common.editText') }}
+        </a-button>
+      </template>
+    </a-col>
+    <a-col :lg="12" :md="12" :xs="24">
+      <a-typography>
+        <a-typography-paragraph>
+          {{ t('views.system.setting.sysOfficialUrlInstruction') }}
+          <a-typography-text mark>http(s)://</a-typography-text>
+          {{ t('views.system.setting.sysOfficialUrlInstruction1') }}
+          <a-typography-text mark>#</a-typography-text>
+        </a-typography-paragraph>
+      </a-typography>
+    </a-col>
+  </a-row>
+</template>
+
+<style lang="less" scoped></style>
--- a/src/views/system/setting/components/change-title.vue
+++ b/src/views/system/setting/components/change-title.vue
@@ -69,16 +69,15 @@ onMounted(() => {
          <a-input
            v-model:value="state.title"
            allow-clear
-            :maxlength="11"
-            style="width: 224px"
-            :placeholder="t('views.system.setting.sysNamePlease')"
+            :maxlength="11" 
+            :placeholder="t('common.ipnutPlease')"
          ></a-input>
        </a-form-item>

        <a-form-item>
          <a-button
            type="primary"
-            :disabled="state.title === state.flag"
+            :disabled="state.title === '' || state.title === state.flag"
            @click="fnSave"
          >
            {{ t('views.system.setting.saveSubmit') }}
--- a/src/views/system/setting/index.vue
+++ b/src/views/system/setting/index.vue
@@ -4,6 +4,8 @@ import ChangeLogo from './components/change-logo.vue';
 import ChangeLogoBG from './components/change-login-bg.vue';
 import ChangeTitle from './components/change-title.vue';
 import ChangeCopyright from './components/change-copyright.vue';
+import ChangeHelpDoc from './components/change-help-doc.vue';
+import ChangeOfficialUrl from './components/change-official-url.vue';
 import useI18n from '@/hooks/useI18n';
 const { t } = useI18n();
 </script>
@@ -27,6 +29,14 @@ const { t } = useI18n();
        {{ t('views.system.setting.sysLoginBg') }}
      </a-divider>
      <ChangeLogoBG></ChangeLogoBG>
+      <a-divider orientation="left"> 
+        {{ t('views.system.setting.sysHelpDoc') }}
+       </a-divider>
+      <ChangeHelpDoc></ChangeHelpDoc>
+      <a-divider orientation="left">
+        {{ t('views.system.setting.sysOfficialUrl') }}
+      </a-divider>
+      <ChangeOfficialUrl></ChangeOfficialUrl>
    </a-card>
  </PageContainer>
 </template>