geg-gas-web/src/views/system/logoSetting/strutureInfo.vue

<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>