yoe-opm-web/src/views/system/basicSetting/index.vue

<template>
  <div class="p-2">
    <el-card shadow="hover">
      <template #header>
        <div class="card-header">
          <span class="title">平台基本信息管理</span>
        </div>
      </template>

      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px" v-loading="loading">
        <!-- 平台名称 -->
        <el-form-item label="平台名称" prop="platformName">
          <el-input v-model="form.platformName" placeholder="请输入平台名称" />
        </el-form-item>

        <!-- 第一行：所属公司、平台简称、站点域名 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="所属公司" prop="company">
              <el-input v-model="form.company" placeholder="请输入所属公司" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="平台简称" prop="shortName">
              <el-input v-model="form.shortName" placeholder="请输入平台简称" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="站点域名" prop="domain">
              <el-input v-model="form.domain" placeholder="请输入站点域名" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第二行：ICP证书号、经营许可证、客服邮箱 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="ICP证书号" prop="icpNo">
              <el-input v-model="form.icpNo" placeholder="请输入ICP证书号" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="经营许可证" prop="license">
              <el-input v-model="form.license" placeholder="请输入经营许可证">
                <template #suffix>
                  <el-tooltip content="经营许可证编号" placement="top">
                    <el-icon><QuestionFilled /></el-icon>
                  </el-tooltip>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客服邮箱" prop="serviceEmail">
              <el-input v-model="form.serviceEmail" placeholder="请输入客服邮箱" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第三行：客服时间、客服图标、客服链接 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="客服时间" prop="serviceTime">
              <el-input v-model="form.serviceTime" placeholder="如：08:30-20:00" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客服图标" prop="serviceIcon">
              <icon-select v-model="form.serviceIcon" width="100%" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客服链接" prop="serviceLink">
              <el-input v-model="form.serviceLink" placeholder="请输入客服链接" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第四行：反馈图标、反馈链接、公众号图标 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="反馈图标" prop="feedbackIcon">
              <icon-select v-model="form.feedbackIcon" width="100%" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="反馈链接" prop="feedbackLink">
              <el-input v-model="form.feedbackLink" placeholder="请输入在线反馈链接" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="公众号图标" prop="wechatIcon">
              <icon-select v-model="form.wechatIcon" width="100%" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第五行：公众号链接、微博图标、微博链接 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="公众号链接" prop="wechatLink">
              <el-input v-model="form.wechatLink" placeholder="请输入公众号链接" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="微博图标" prop="weiboIcon">
              <icon-select v-model="form.weiboIcon" width="100%" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="微博链接" prop="weiboLink">
              <el-input v-model="form.weiboLink" placeholder="请输入微博链接" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 客服热线 -->
        <el-form-item label="客服热线" prop="servicePhone">
          <el-input v-model="form.servicePhone" placeholder="请输入客服热线" />
        </el-form-item>

        <!-- 详细页标题 -->
        <el-form-item label="详细页标题" prop="detailTitle">
          <el-input v-model="form.detailTitle" type="textarea" :rows="2" placeholder="请输入详细页标题">
            <template #suffix>
              <el-tooltip content="详细页标题说明" placement="top">
                <el-icon><QuestionFilled /></el-icon>
              </el-tooltip>
            </template>
          </el-input>
        </el-form-item>

        <!-- 商品关键词 -->
        <el-form-item label="商品关键词" prop="keywords">
          <el-input v-model="form.keywords" type="textarea" :rows="2" placeholder="请输入商品关键词">
            <template #suffix>
              <el-tooltip content="商品关键词说明" placement="top">
                <el-icon><QuestionFilled /></el-icon>
              </el-tooltip>
            </template>
          </el-input>
        </el-form-item>

        <!-- 图片上传：平台LOGO、平台图标、默认头像 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="平台LOGO" prop="logo">
              <image-upload v-model="form.logo" :limit="1" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="平台图标" prop="icon">
              <image-upload v-model="form.icon" :limit="1" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="默认头像" prop="defaultAvatar">
              <image-upload v-model="form.defaultAvatar" :limit="1" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 小程序二维码 -->
        <el-form-item label="小程序二维码" prop="miniQrcode">
          <image-upload v-model="form.miniQrcode" :limit="1" />
        </el-form-item>

        <!-- 内容 -->
        <el-form-item label="内容" prop="content">
          <el-input v-model="form.content" type="textarea" :rows="3" placeholder="请输入内容" />
        </el-form-item>

        <!-- 详细页描述 -->
        <el-form-item label="详细页描述" prop="detailDesc">
          <el-input v-model="form.detailDesc" type="textarea" :rows="3" placeholder="请输入详细页描述" />
        </el-form-item>

        <!-- 提交按钮 -->
        <el-form-item>
          <el-button type="primary" @click="submitForm" v-hasPermi="['system:platformConfig:edit']">提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup name="BasicSetting" lang="ts">
import { listPlatformConfig, saveBatchPlatformConfig } from '@/api/system/platformConfig';
import { ComponentInternalInstance, getCurrentInstance, ref, reactive, toRefs, onMounted } from 'vue';
import type { FormInstance } from 'element-plus';
import { QuestionFilled } from '@element-plus/icons-vue';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const loading = ref(true);
const formRef = ref<FormInstance>();
const configList = ref<any[]>([]);

const data = reactive({
  form: {
    platformName: '',
    company: '',
    shortName: '',
    domain: '',
    icpNo: '',
    license: '',
    serviceEmail: '',
    serviceTime: '',
    serviceIcon: 'code',
    serviceLink: '',
    feedbackIcon: 'dashboard',
    feedbackLink: '',
    wechatIcon: 'color',
    wechatLink: '',
    weiboIcon: 'radio',
    weiboLink: '',
    servicePhone: '',
    detailTitle: '',
    keywords: '',
    logo: '',
    icon: '',
    defaultAvatar: '',
    miniQrcode: '',
    content: '',
    detailDesc: ''
  } as any,
  rules: {
    platformName: [{ required: true, message: '平台名称不能为空', trigger: 'blur' }],
    servicePhone: [{ required: true, message: '客服热线不能为空', trigger: 'blur' }]
  }
});

const { form, rules } = toRefs(data);

const getList = async () => {
  loading.value = true;
  try {
    const res = await listPlatformConfig({ configType: '0', pageNum: 1, pageSize: 100 });
    configList.value = res.rows || [];
    configList.value.forEach((item: any) => {
      if (form.value.hasOwnProperty(item.configKey)) {
        form.value[item.configKey] = item.value;
      }
    });
  } finally {
    loading.value = false;
  }
};

const submitForm = async () => {
  try {
    await formRef.value?.validate();
    
    const configKeys = Object.keys(form.value);
    const batchData = configKeys.map(key => ({
      configType: '0',
      configKey: key,
      name: key,
      value: form.value[key] || ''
    }));
    
    await saveBatchPlatformConfig(batchData);
    proxy?.$modal.msgSuccess('保存成功');
    getList();
  } catch (error) {
    console.error('保存失败:', error);
  }
};

onMounted(() => {
  getList();
});
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-header .title {
  font-size: 16px;
  font-weight: bold;
}
</style>