全局表单

pages/index_form.vue

@@ -1,8 +1,24 @@
 <template>
-    <main class="index_main">
+    <main class="index_main newsDetail">
         <HomePageHead></HomePageHead>
         <HomePageNavigation></HomePageNavigation>
-
+    
+        <!-- 面包屑导航 -->
+        <div class="breadcrumb">
+            <div class="inner">
+                <span class="location">当前位置:</span>
+                <el-breadcrumb :separator-icon="ArrowRight">
+                    <el-breadcrumb-item>
+                        <NuxtLink to="/">首页</NuxtLink>
+                    </el-breadcrumb-item>
+                   
+                    <el-breadcrumb-item> {{ title }}</el-breadcrumb-item>
+                </el-breadcrumb>
+            </div>
+        </div>
+        <div class="breadcrumb_title">
+            <div>{{ remark }}</div>
+        </div>
         <el-skeleton v-if="pageLoading" :rows="24" :animated="true" style="margin: 20px;">
           <template #template>
             <div class="custom-skeleton-multi">
@@ -94,7 +110,8 @@
                     value-format="YYYY-MM-DD"
                     format="YYYY-MM-DD"
                     placeholder="选择日期"
-                    style="width: 100%">
+                    style="width: 100%"
+                    :locale="zhCn">
                 </el-date-picker>
                 <!-- 单文件上传 7 (新) -->
                 <el-upload
@@ -295,8 +312,8 @@ section {
 }
 .form_box {
     width: 1200px;
-    margin: 20px auto;
-    border: dashed 1px #000;
+    margin: 0px auto 20px auto;
+    /* border: dashed 1px #000; */
     padding: 20px;
 }
    
@@ -426,9 +443,88 @@ section {
   pointer-events: none;
   transition: all 0.3s;
 }
+.breadcrumb{
+   
+    width: 1200px !important;
+    margin: 20px auto 0px auto !important;
+ 
+}
+.breadcrumb_title{
+    width: 1200px;
+    margin: 20px auto 0px auto;
+    background-color:#0E6EBE ;
+    color:white;
+    line-height: 28px;
+}
+.breadcrumb_title div{
+    font-size: 16px;
+    /* font-weight: bold; */
+    padding: 5px 20px;
+    display: inline-block;
+    vertical-align: middle;
+    letter-spacing: 3px; /* 添加字间距，可以根据需要调整数值 */
+
+}
 </style>
+<style lang="less" scoped>
+            .breadcrumb {
+                width: 100%;
+                height: 22px;
+                margin-top: 40px;
+                font-family: Microsoft YaHei, Microsoft YaHei;
+                font-weight: 400;
+                font-size: 20px;
+                color: #666666;
+                line-height: 23px;
+                text-align: left;
+                font-style: normal;
+                text-transform: none;
+
+                .el-breadcrumb::v-deep {
+                    display: inline-block;
+                    vertical-align: -4px;
+                }
+
+                :deep(.el-breadcrumb__inner a),
+                :deep(.el-breadcrumb__inner.is-link) {
+                    color: #666666;
+                    font-weight: 400;
+                    text-decoration: none;
+                    transition: var(--el-transition-color);
+                }
+
+                span {
+                    font-family: Microsoft YaHei, Microsoft YaHei;
+                    font-weight: 400;
+                    font-size: 20px;
+                    color: #666666;
+                    line-height: 23px;
+                    text-align: left;
+                    font-style: normal;
+                    text-transform: none;
+                }
+
+                span:hover {
+                    color: #666666;
+                }
 
+                .location {
+                    margin-right: 20px;
+                    width: 100px;
+                    height: 22px;
+                    font-family: Microsoft YaHei, Microsoft YaHei;
+                    font-weight: 400;
+                    font-size: 20px;
+                    color: #666666;
+                    line-height: 23px;
+                    text-align: left;
+                    font-style: normal;
+                    text-transform: none;
+                }
+            }
+</style>
 <script setup>
+import { ArrowRight } from '@element-plus/icons-vue'
 //页面是否已经加载完毕
 const pageLoading = ref(true)
 const submitLoading = ref(false)
@@ -436,14 +532,18 @@ const showCaptcha = ref(false)
 const captchaImage = ref('')
 const captchaId = ref('')
 const dialogVisible = ref(false)
-
+const title = ref('ceshi')
+const remark = ref('nice')
+const seoTitle = ref('')
+const seoKeywords = ref('')
+const seoDescription = ref('')
 //1.加载页面必备组件 start---------------------------------------->
 import { ref, onMounted, reactive, nextTick, onBeforeUpdate } from 'vue';
 import { useSeoMeta } from '#imports';
 
-import { ElForm, ElFormItem, ElInput, ElRadioGroup, ElRadio,
+import {ElBreadcrumb, ElBreadcrumbItem, ElForm, ElFormItem, ElInput, ElRadioGroup, ElRadio,
          ElCheckboxGroup, ElCheckbox, ElUpload, ElMessage,
-         ElSelect, ElOption, ElDatePicker, ElButton, genFileId } from 'element-plus'
+         ElSelect, ElOption, ElDatePicker, ElButton, genFileId,ElDialog } from 'element-plus'
 
 const { $webUrl, $CwebUrl } = useNuxtApp();
 
@@ -458,31 +558,6 @@ onBeforeUpdate(() => {
   uploadRefs.value = {};
 });
 
-let adImg = ref({}) 
-//广告1               
-let url = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=tsbb_index_1`
-const responseAd1 = await fetch(url, {
-    headers: {
-        'Content-Type': 'application/json',
-        'Userurl': $CwebUrl,
-        'Origin': $CwebUrl
-    }
-});
-const resultAd1 = await responseAd1.json();
-adImg.value = resultAd1.data[0];
- 
-let adImg_2 = ref({}) 
-//广告_2
-let url_2 = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=tsbb_index_2`
-const responseAd_2 = await fetch(url_2, {
-    headers: {
-        'Content-Type': 'application/json',
-        'Userurl': $CwebUrl,
-        'Origin': $CwebUrl
-    }
-});
-const resultAd_2 = await responseAd_2.json();
-adImg_2.value = resultAd_2.data[0];
 
 // 动态验证规则
 const rules_js = ref({})
@@ -490,7 +565,9 @@ const rules_js = ref({})
 const get_from_data_1 = reactive({
     value:{}
 });
-
+const get_from_data= reactive({
+    value:{}
+});
 const chinese_calendar = reactive({});
  
 //列表头
@@ -629,25 +706,33 @@ async function refreshCaptcha() {
         ElMessage.error('刷新验证码失败，请重试');
     }
 }
-
-// 获取form所有数据
+useSeoMeta({
+            title:  seoTitle,
+            meta: [
+                { name: 'keywords', content: seoKeywords, tagPriority: 10 },
+                { name: 'description', content: seoDescription, tagPriority: 10 }
+            ]
+});
 async function get_from_data_fun() {
     pageLoading.value = true
     try {
         // 拼接 GET 参数
         const params = new URLSearchParams({ table_id: table_id.value });
-        const url = `${$webUrl}/form/getWebGlobalTableFieldList?${params.toString()}`;
-        
-        const response = await fetch(url, {
+        const url = `/form/getWebGlobalTableFieldList?${params.toString()}`;
+        console.log("url:",url)
+        const response = await requestDataPromise(url, {
             method: 'GET',
-            headers: {
-                'Content-Type': 'application/json',
-                'Userurl': $CwebUrl,
-                'Origin': $CwebUrl
-            }
+            query: {}
+            
         });
-        const get_from_data = await response.json();
-
+        const get_from_data = response
+        console.log("返回数据：",get_from_data,response)
+        title.value = get_from_data.data.table.name
+        remark.value = get_from_data.data.table.remark
+        seoTitle.value = response.data.table.name + "_" + response.data.table.website_name + "_" + response.data.table.suffix
+        seoKeywords.value = response.data.table.keywords + "_" + response.data.table.website_name + "_" + response.data.table.suffix
+        seoDescription.value = response.data.table.description + "_" + response.data.table.website_name + "_" + response.data.table.suffix
+       
         // 检查是否需要显示验证码（仅在初始化时）
         if (get_from_data.data?.table?.is_code === 1 && get_from_data.data?.code?.img) {
             showCaptcha.value = true
@@ -682,27 +767,7 @@ async function get_from_data_fun() {
 
         // 如果API返回的数据为空，使用默认数据
         if (table_head.value.length === 0) {
-            table_head.value = [
-                {
-                    field: 'name',
-                    title: '姓名',
-                    field_type: 1,
-                    is_check: 1
-                },
-                {
-                    field: 'email',
-                    title: '邮箱',
-                    field_type: 1,
-                    is_check: 1
-                },
-                {
-                    field: 'hobbies',
-                    title: '爱好',
-                    field_type: [5],
-                    is_check: 0,
-                    option_value: {1: "阅读", 2: "运动", 3: "音乐", 4: "旅游"}
-                }
-            ]
+            table_head.value = []
         }
 
         // 详细检查每个字段的结构
@@ -746,27 +811,7 @@ async function get_from_data_fun() {
         console.error('请求失败:', error);
         
         // 使用默认数据
-        table_head.value = [
-            {
-                field: 'name',
-                title: '姓名',
-                field_type: 1,
-                is_check: 1
-            },
-            {
-                field: 'email',
-                title: '邮箱',
-                field_type: 1,
-                is_check: 1
-            },
-            {
-                field: 'hobbies',
-                title: '爱好',
-                field_type: [5],
-                is_check: 0,
-                option_value: {1: "阅读", 2: "运动", 3: "音乐", 4: "旅游"}
-            }
-        ]
+        table_head.value = []
         
         // 初始化默认数据
         table_head.value.forEach(field => {
@@ -792,6 +837,7 @@ async function get_from_data_fun() {
         ElMessage.warning('API请求失败，使用默认数据')
     }
 }
+get_from_data_fun();
 
 // 提交表单
 async function submitForm() {

plugins/element-plus.js

@@ -0,0 +1,9 @@
+import { defineNuxtPlugin } from '#app'
+import ElementPlus from 'element-plus'
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(ElementPlus, {
+    locale: zhCn,
+  })
+})

plugins/element-plus.ts

@@ -1,17 +0,0 @@
-// import { defineNuxtPlugin } from '#app';
-// import ElementPlus from 'element - plus';
-// import 'element - plus/dist/index.css';
-// // 如果安装了图标相关插件，还需导入并注册图标
-// import * as ElementPlusIconsVue from '@element - plus/icons - vue';
-
-// export default defineNuxtPlugin((nuxtApp) => {
-//   nuxtApp.vueApp.use(ElementPlus);
-//   // 注册图标
-//   for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
-//     nuxtApp.vueApp.component(key, component);
-//   }
-// });
-
-export default defineNuxtPlugin(() => {
-    
-})