初始版本提交

src/views/system/logoSetting/strutureInfo.vue

@@ -0,0 +1,175 @@
+<template>
+  <div class="p-4 bg-white h-full">
+    <div class="pb-4 text-xl">{{ t('框架信息配置') }}</div>
+    <div class="step1-form">
+      <a-form
+        :key="formKey"
+        :model="formState"
+        name="basic"
+        :label-col="{ span: 4 }"
+        :wrapper-col="{ span: 20 }"
+        autocomplete="off"
+        @finish="onFinish"
+        @finish-failed="onFinishFailed"
+      >
+        <div class="flex items-center header-title">
+          <div class="node-icon"></div>
+          <div class="text-base">{{ t('基本信息') }}</div>
+        </div>
+        <a-form-item
+          :label="t('公司名称')"
+          name="companyName"
+          :rules="[{ required: true, message: t('请输入公司名称') }]"
+        >
+          <a-input v-model:value="formState.companyName" :placeholder="t('请输入公司名称')" />
+        </a-form-item>
+
+        <a-form-item
+          :label="t('公司简称')"
+          name="shortName"
+          :rules="[{ required: true, message: t('请输入公司简称') }]"
+        >
+          <a-input v-model:value="formState.shortName" :placeholder="t('请输入公司简称')" />
+        </a-form-item>
+        <div class="flex items-center header-title">
+          <div class="node-icon"></div>
+          <div class="text-base">{{ t('logo配置') }}</div>
+        </div>
+        <a-form-item :label="t('刷新logo')" name="refreshLogoId">
+          <InputUpload
+            v-model:value="formState.refreshLogoId"
+            :placeholder="t('点击上传logo图片，尺寸大约为90*40，鼠标移动至“?”上可查看影响范围')"
+            tipType="img"
+            :tips="imgs.refrash"
+          />
+        </a-form-item>
+        <a-form-item :label="t('登录页logo')" name="loginLogoId">
+          <InputUpload
+            v-model:value="formState.loginLogoId"
+            :placeholder="t('点击上传logo图片，尺寸大约为200*21，鼠标移动至“?”上可查看影响范围')"
+            tipType="img"
+            :tips="imgs.login"
+          />
+        </a-form-item>
+        <a-form-item :label="t('菜单logo')" name="menuLogoId">
+          <InputUpload
+            v-model:value="formState.menuLogoId"
+            :placeholder="t('点击上传logo图片，尺寸大约为30*30，鼠标移动至“?”上可查看影响范围')"
+            tipType="img"
+            :tips="imgs.home"
+          />
+        </a-form-item>
+        <a-form-item :label="t('设计器logo')" name="designerLogoId">
+          <InputUpload
+            v-model:value="formState.designerLogoId"
+            :placeholder="t('点击上传logo图片，尺寸大约为208*64，鼠标移动至“?”上可查看影响范围')"
+            tipType="img"
+            :tips="imgs.design"
+          />
+        </a-form-item>
+        <div class="flex items-center header-title">
+          <div class="node-icon"></div>
+          <div class="text-base">{{ t('登录页背景图配置') }}</div>
+        </div>
+        <a-form-item :label="t('登录页背景图')" name="backgroundLogoId">
+          <InputUpload
+            v-model:value="formState.backgroundLogoId"
+            :placeholder="t('点击上传登录页背景图片')"
+            :showTip="false"
+          />
+        </a-form-item>
+        <a-form-item :wrapper-col="{ offset: 10, span: 24 }">
+          <!-- <a-button type="default" html-type="reset">{{ t('重置') }}</a-button> -->
+          <a-button type="primary" html-type="submit" class="ml-4">{{ t('提交') }}</a-button>
+        </a-form-item>
+      </a-form>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { onMounted, reactive, ref } from 'vue';
+
+  import InputUpload from '/@/components/Form/src/components/InputUpload.vue';
+
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import refrash from './images/refrash.jpg';
+  import login from './images/login.jpg';
+  import home from './images/home.jpg';
+  import design from './images/design.jpg';
+  import { getLogoInfoToken, setLogoConfig } from '/@/api/system/login';
+  import { useMessage } from '/@/hooks/web/useMessage';
+
+  const { t } = useI18n();
+  const { notification } = useMessage();
+  const imgs = {
+    refrash: refrash,
+    login: login,
+    home: home,
+    design: design,
+  };
+  interface FormState {
+    companyName?: string;
+    shortName?: string;
+    refreshLogoId?: string;
+    backgroundLogoId?: string;
+    designerLogoId?: string;
+    loginLogoId?: string;
+    menuLogoId?: string;
+  }
+
+  let formState = reactive<FormState>({});
+  const formKey = ref(0);
+  const id = ref();
+  onMounted(() => {
+    getLogoInfoToken().then((res) => {
+      formState = {
+        companyName: res.companyName,
+        shortName: res.shortName,
+        refreshLogoId: res.refreshLogoId,
+        backgroundLogoId: res.backgroundLogoId,
+        designerLogoId: res.designerLogoId,
+        loginLogoId: res.loginLogoId,
+        menuLogoId: res.menuLogoId,
+      };
+      formKey.value += 1;
+      id.value = res.id;
+    });
+  });
+  const onFinish = (values: any) => {
+    let params = values;
+    params.id = id.value;
+    setLogoConfig(params).then((res) => {
+      if (res) {
+        notification.success({
+          message: t('提示'),
+          description: t('修改成功'),
+        });
+      } else {
+        notification.success({
+          message: t('提示'),
+          description: t('修改失败'),
+        });
+      }
+    });
+  };
+
+  const onFinishFailed = (errorInfo: any) => {
+    console.log('Failed:', errorInfo);
+  };
+</script>
+<style>
+  .header-title {
+    height: 40px;
+    font-size: 16px;
+    color: #333;
+    border-bottom: 1px solid #f0f0f0;
+    margin-bottom: 12px;
+  }
+
+  .node-icon {
+    width: 6px;
+    height: 18px;
+    background-color: #5e95ff;
+    margin-right: 8px;
+  }
+</style>