index_form.vue 32 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072
  1. <template>
  2. <main class="index_main newsDetail">
  3. <HomePageHead></HomePageHead>
  4. <HomePageNavigation></HomePageNavigation>
  5. <!-- 面包屑导航 -->
  6. <div class="breadcrumb">
  7. <div class="inner">
  8. <span class="location">当前位置:</span>
  9. <el-breadcrumb :separator-icon="ArrowRight">
  10. <el-breadcrumb-item>
  11. <NuxtLink to="/">首页</NuxtLink>
  12. </el-breadcrumb-item>
  13. <el-breadcrumb-item> {{ title }}</el-breadcrumb-item>
  14. </el-breadcrumb>
  15. </div>
  16. </div>
  17. <div class="breadcrumb_title">
  18. <div>{{ remark }}</div>
  19. </div>
  20. <el-skeleton v-if="pageLoading" :rows="24" :animated="true" style="margin: 20px;">
  21. <template #template>
  22. <div class="custom-skeleton-multi">
  23. <span
  24. v-for="(item, idx) in skeletonChars"
  25. :key="idx"
  26. class="custom-skeleton-char"
  27. :style="{
  28. top: item.top + '%',
  29. left: item.left + '%',
  30. fontSize: item.fontSize + 'px',
  31. opacity: item.opacity,
  32. transform: `rotate(${item.rotate}deg)`
  33. }"
  34. >政讯通</span>
  35. </div>
  36. </template>
  37. </el-skeleton>
  38. <el-form v-else :model="formData" :rules="rules_js" ref="formRef" label-width="120px" class="form_box">
  39. <el-form-item
  40. v-for="(per_obj,per_index) in table_head.value"
  41. :key="per_index"
  42. :prop="getFieldName(per_obj)"
  43. :label="per_obj.title + ':'"
  44. :required="per_obj.is_check === 1"
  45. >
  46. <!-- 文本文字1 -->
  47. <el-input
  48. v-if="checkFieldType(per_obj, 1)"
  49. v-model="formData[getFieldName(per_obj)]"
  50. :placeholder="`请输入${per_obj.title}`"
  51. />
  52. <!-- 多行textarea 2-->
  53. <el-input
  54. v-if="checkFieldType(per_obj, 2)"
  55. v-model="formData[getFieldName(per_obj)]"
  56. type="textarea"
  57. :autosize="{ minRows: 2, maxRows: 4 }"
  58. :placeholder="`请输入${per_obj.title}`"
  59. />
  60. <!-- 单选按钮 3 -->
  61. <el-radio-group
  62. v-if="checkFieldType(per_obj, 3)"
  63. v-model="formData[getFieldName(per_obj)]">
  64. <el-radio
  65. v-for="per_3_obj in radio_arr_fun(per_obj.option_value)"
  66. :key="`${getFieldName(per_obj)}_${per_3_obj[1]}`"
  67. :label="per_3_obj[1]">
  68. {{ per_3_obj[0] }}
  69. </el-radio>
  70. </el-radio-group>
  71. <!-- 下拉选择 4 -->
  72. <el-select
  73. v-if="checkFieldType(per_obj, 4)"
  74. placeholder="请选择"
  75. v-model="formData[getFieldName(per_obj)]"
  76. style="width: 100%"
  77. >
  78. <el-option
  79. v-for="per_4_obj in select_arr_fun(per_obj.option_value)"
  80. :key="`${getFieldName(per_obj)}_${per_4_obj.value}`"
  81. :label="per_4_obj.label"
  82. :value="per_4_obj.value">
  83. </el-option>
  84. </el-select>
  85. <!-- 复选框5 -->
  86. <el-checkbox-group
  87. v-if="checkFieldType(per_obj, 5)"
  88. v-model="formData[getFieldName(per_obj)]"
  89. @change="(value) => handleCheckboxChange(getFieldName(per_obj), value)"
  90. >
  91. <el-checkbox
  92. v-for="per_5_obj in checkbox_arr_fun(per_obj.option_value)"
  93. :key="`${getFieldName(per_obj)}_${per_5_obj.value}`"
  94. :label="per_5_obj.value">
  95. {{ per_5_obj.label }}
  96. </el-checkbox>
  97. </el-checkbox-group>
  98. <!-- 日期选择器 6 -->
  99. <el-date-picker
  100. v-if="checkFieldType(per_obj, 6)"
  101. v-model="formData[getFieldName(per_obj)]"
  102. type="date"
  103. value-format="YYYY-MM-DD"
  104. format="YYYY-MM-DD"
  105. placeholder="选择日期"
  106. style="width: 100%"
  107. :locale="zhCn">
  108. </el-date-picker>
  109. <!-- 单文件上传 7 (新) -->
  110. <el-upload
  111. v-if="checkFieldType(per_obj, 7)"
  112. :ref="(el) => uploadRefs[getFieldName(per_obj)] = el"
  113. :action="`${$webUrl}/public/uploadFile`"
  114. :limit="1"
  115. :on-exceed="(files) => handleExceed(files, getFieldName(per_obj))"
  116. :on-success="(res, file) => handleFileSuccess(res, file, getFieldName(per_obj))"
  117. :on-remove="() => handleFileRemove(getFieldName(per_obj))"
  118. :file-list="fileLists[getFieldName(per_obj)] || []"
  119. >
  120. <el-button type="primary">点击上传文件</el-button>
  121. <template #tip>
  122. <div class="el-upload__tip">
  123. 只能上传一个文件,新文件将覆盖旧文件。
  124. </div>
  125. </template>
  126. </el-upload>
  127. <!-- img上传 8 -->
  128. <el-upload
  129. v-if="checkFieldType(per_obj, 8)"
  130. class="avatar-uploader"
  131. :action="`${$webUrl}/public/uploadFile`"
  132. :show-file-list="false"
  133. :on-success="(res) => handleAvatarSuccess(res, getFieldName(per_obj))"
  134. :before-upload="beforeAvatarUpload"
  135. >
  136. <img v-if="formData[getFieldName(per_obj)]" :src="formData[getFieldName(per_obj)]" class="avatar" >
  137. <div v-else class="avatar-uploader-placeholder">
  138. <img src="http://img.bjzxtw.org.cn/master/image/noImage.png" class="avatar-placeholder-img" alt="上传头像">
  139. <span class="upload-tip">点击上传</span>
  140. </div>
  141. </el-upload>
  142. </el-form-item>
  143. <!-- 验证码 -->
  144. <el-form-item v-if="showCaptcha" prop="code" label="验证码:">
  145. <div class="captcha-wrapper">
  146. <el-input v-model="formData.code" placeholder="请输入验证码" @keyup.enter="submitForm"></el-input>
  147. <img v-if="captchaImage" :src="captchaImage" @click="refreshCaptcha" alt="验证码" class="captcha-img" title="点击刷新">
  148. </div>
  149. </el-form-item>
  150. <el-form-item class="form-actions">
  151. <el-button type="primary" @click="submitForm" :loading="submitLoading">提交</el-button>
  152. <el-button @click="resetForm">重置</el-button>
  153. </el-form-item>
  154. </el-form>
  155. <HomeFoot></HomeFoot>
  156. </main>
  157. <el-dialog v-model="dialogVisible" title="提示" width="300px" :close-on-click-modal="false" :show-close="false" align-center>
  158. <div style="text-align:center;">表单提交成功!</div>
  159. <template #footer>
  160. <div class="dialog-footer-center">
  161. <el-button type="primary" @click="onDialogConfirm" class="dialog-confirm-btn">确认</el-button>
  162. </div>
  163. </template>
  164. </el-dialog>
  165. </template>
  166. <style scoped>
  167. @charset "utf-8";
  168. * {
  169. margin: 0;
  170. padding: 0;
  171. font-family: "微软雅黑", "microsoft yahei";
  172. }
  173. ul,
  174. ol {
  175. list-style: none;
  176. }
  177. a:active {
  178. text-decoration: none;
  179. }
  180. a:hover {
  181. text-decoration: none;
  182. }
  183. a:visited {
  184. text-decoration: none;
  185. }
  186. a:link {
  187. text-decoration: none;
  188. }
  189. a:focus {
  190. text-decoration: none;
  191. }
  192. body {
  193. position: relative;
  194. }
  195. .clearfix {
  196. overflow: hidden;
  197. }
  198. .clearfix_2::after {
  199. content: '';
  200. display: block;
  201. height: 0;
  202. visibility: hidden;
  203. clear: both;
  204. }
  205. .hiddenColor {
  206. visibility: hidden;
  207. }
  208. .hand {
  209. cursor: pointer;
  210. }
  211. .aTag_parent {
  212. position: relative;
  213. }
  214. .aTag_parent>a,
  215. .aTag {
  216. display: block;
  217. width: 100%;
  218. height: 100%;
  219. position: absolute;
  220. z-index: 99;
  221. border: 0px;
  222. top: 0px;
  223. left: 0px;
  224. background: rgba(0, 0, 0, 0);
  225. }
  226. .dot1 {
  227. display: block;
  228. word-break: keep-all;
  229. white-space: nowrap;
  230. overflow: hidden;
  231. text-overflow: ellipsis;
  232. }
  233. .dot2 {
  234. overflow: hidden;
  235. display: -webkit-box;
  236. -webkit-box-orient: vertical;
  237. -webkit-line-clamp: 2;
  238. }
  239. .dot3{
  240. overflow: hidden;
  241. display: -webkit-box;
  242. -webkit-box-orient: vertical;
  243. -webkit-line-clamp: 3;
  244. }
  245. input,
  246. img {
  247. border: none;
  248. }
  249. .cover100 img {
  250. display: block;
  251. width: 100%;
  252. height: 100%;
  253. object-fit: cover;
  254. }
  255. .back100 {
  256. background-size: 100% 100%;
  257. background-repeat: no-repeat;
  258. }
  259. article,
  260. aside,
  261. footer,
  262. header,
  263. time,
  264. video,
  265. main,
  266. nav,
  267. h4,
  268. h3,
  269. section {
  270. display: block;
  271. }
  272. .index_main {
  273. margin: 0 auto;
  274. }
  275. .slow_6 {
  276. -webkit-transition: all .6s;
  277. -moz-transition: all .6s;
  278. -ms-transition: all .6s;
  279. -o-transition: all .6s;
  280. transition: all .6s;
  281. }
  282. .form_box {
  283. width: 1200px;
  284. margin: 0px auto 20px auto;
  285. /* border: dashed 1px #000; */
  286. padding: 20px;
  287. }
  288. .form_box :deep(.avatar-uploader) {
  289. border: 1px dashed var(--el-border-color);
  290. border-radius: 6px;
  291. cursor: pointer;
  292. position: relative;
  293. overflow: hidden;
  294. width: 178px;
  295. height: 178px;
  296. }
  297. .form_box :deep(.avatar-uploader:hover) {
  298. border-color: var(--el-color-primary);
  299. }
  300. .form_box :deep(.avatar-uploader .avatar) {
  301. width: 100%;
  302. height: 100%;
  303. display: block;
  304. }
  305. .form_box :deep(.avatar-uploader .el-upload) {
  306. width: 100%;
  307. height: 100%;
  308. }
  309. .form_box :deep(.el-button--primary) {
  310. padding: 0 11px;
  311. }
  312. @media screen and (min-width:1200px) {
  313. /*pc_1440*/
  314. @media screen and (max-width:1440px) {
  315. /*1200*/
  316. }
  317. .pc_none {
  318. display: none;
  319. }
  320. }
  321. @media screen and (max-width:599px) {}
  322. @media screen and (max-width:320px) {}
  323. .form_box .el-form-item {
  324. margin-bottom: 20px!important;
  325. }
  326. .avatar-uploader-placeholder {
  327. display: flex;
  328. flex-direction: column;
  329. justify-content: center;
  330. align-items: center;
  331. width: 100%;
  332. height: 100%;
  333. }
  334. .avatar-placeholder-img {
  335. width: 50px;
  336. height: 50px;
  337. opacity: 0.5;
  338. }
  339. .upload-tip {
  340. margin-top: 8px;
  341. color: #8c939d;
  342. font-size: 12px;
  343. }
  344. .form-actions :deep(.el-form-item__content) {
  345. justify-content: center;
  346. }
  347. .form-actions .el-button + .el-button {
  348. margin-left: 20px;
  349. padding: 0 11px;
  350. }
  351. .captcha-wrapper {
  352. display: flex;
  353. align-items: center;
  354. width: 100%;
  355. }
  356. .captcha-img {
  357. margin-left: 10px;
  358. cursor: pointer;
  359. height: 32px; /* 与el-input默认高度对齐 */
  360. border-radius: 4px;
  361. }
  362. .form_box :deep(.el-checkbox) {
  363. margin-right: 20px;
  364. }
  365. .form_box :deep(.el-radio) {
  366. margin-right: 20px;
  367. }
  368. /* 弹窗footer按钮居中 */
  369. .dialog-footer-center {
  370. display: flex;
  371. justify-content: center;
  372. align-items: center;
  373. }
  374. .dialog-confirm-btn {
  375. padding: 0 32px;
  376. }
  377. .custom-skeleton-multi {
  378. position: relative;
  379. width: 100%;
  380. height: 700px;
  381. background: #f5f6fa;
  382. border-radius: 8px;
  383. overflow: hidden;
  384. }
  385. .custom-skeleton-char {
  386. position: absolute;
  387. color: #e5e6eb;
  388. font-weight: bold;
  389. letter-spacing: 10px;
  390. user-select: none;
  391. pointer-events: none;
  392. transition: all 0.3s;
  393. }
  394. .breadcrumb{
  395. width: 1200px !important;
  396. margin: 20px auto 0px auto !important;
  397. }
  398. .breadcrumb_title{
  399. width: 1200px;
  400. margin: 20px auto 0px auto;
  401. background-color:#0E6EBE ;
  402. color:white;
  403. line-height: 28px;
  404. }
  405. .breadcrumb_title div{
  406. font-size: 16px;
  407. /* font-weight: bold; */
  408. padding: 5px 20px;
  409. display: inline-block;
  410. vertical-align: middle;
  411. letter-spacing: 3px; /* 添加字间距,可以根据需要调整数值 */
  412. }
  413. </style>
  414. <style lang="less" scoped>
  415. .breadcrumb {
  416. width: 100%;
  417. height: 22px;
  418. margin-top: 40px;
  419. font-family: Microsoft YaHei, Microsoft YaHei;
  420. font-weight: 400;
  421. font-size: 20px;
  422. color: #666666;
  423. line-height: 23px;
  424. text-align: left;
  425. font-style: normal;
  426. text-transform: none;
  427. .el-breadcrumb::v-deep {
  428. display: inline-block;
  429. vertical-align: -4px;
  430. }
  431. :deep(.el-breadcrumb__inner a),
  432. :deep(.el-breadcrumb__inner.is-link) {
  433. color: #666666;
  434. font-weight: 400;
  435. text-decoration: none;
  436. transition: var(--el-transition-color);
  437. }
  438. span {
  439. font-family: Microsoft YaHei, Microsoft YaHei;
  440. font-weight: 400;
  441. font-size: 20px;
  442. color: #666666;
  443. line-height: 23px;
  444. text-align: left;
  445. font-style: normal;
  446. text-transform: none;
  447. }
  448. span:hover {
  449. color: #666666;
  450. }
  451. .location {
  452. margin-right: 20px;
  453. width: 100px;
  454. height: 22px;
  455. font-family: Microsoft YaHei, Microsoft YaHei;
  456. font-weight: 400;
  457. font-size: 20px;
  458. color: #666666;
  459. line-height: 23px;
  460. text-align: left;
  461. font-style: normal;
  462. text-transform: none;
  463. }
  464. }
  465. </style>
  466. <script setup>
  467. import { ArrowRight } from '@element-plus/icons-vue'
  468. //页面是否已经加载完毕
  469. const pageLoading = ref(true)
  470. const submitLoading = ref(false)
  471. const showCaptcha = ref(false)
  472. const captchaImage = ref('')
  473. const captchaId = ref('')
  474. const dialogVisible = ref(false)
  475. const title = ref('ceshi')
  476. const remark = ref('nice')
  477. const seoTitle = ref('')
  478. const seoKeywords = ref('')
  479. const seoDescription = ref('')
  480. //1.加载页面必备组件 start---------------------------------------->
  481. import { ref, onMounted, reactive, nextTick, onBeforeUpdate } from 'vue';
  482. import { useSeoMeta } from '#imports';
  483. import {ElBreadcrumb, ElBreadcrumbItem, ElForm, ElFormItem, ElInput, ElRadioGroup, ElRadio,
  484. ElCheckboxGroup, ElCheckbox, ElUpload, ElMessage,
  485. ElSelect, ElOption, ElDatePicker, ElButton, genFileId,ElDialog } from 'element-plus'
  486. const { $webUrl, $CwebUrl } = useNuxtApp();
  487. // 表单引用
  488. const formRef = ref(null)
  489. // 上传组件引用
  490. const uploadRefs = ref({});
  491. const fileLists = ref({});
  492. onBeforeUpdate(() => {
  493. uploadRefs.value = {};
  494. });
  495. // 动态验证规则
  496. const rules_js = ref({})
  497. const get_from_data_1 = reactive({
  498. value:{}
  499. });
  500. const get_from_data= reactive({
  501. value:{}
  502. });
  503. const chinese_calendar = reactive({});
  504. //列表头
  505. const table_head = reactive({
  506. value:[]
  507. });
  508. //列表内容
  509. const table_body = reactive({
  510. value:[]
  511. });
  512. // 表单数据 - 使用ref而不是reactive来避免响应式问题
  513. const formData = ref({})
  514. const route = useRoute()
  515. // 从路由获取 table_id,如果不存在则使用默认值
  516. const table_id = ref(route.query.table_id || 59)
  517. // 得到id
  518. const recive_id = reactive({
  519. value:route.query.id || route.params.id
  520. })
  521. // 工具函数定义
  522. function getFieldName(field) {
  523. if (field.field) return field.field;
  524. const possibleFieldNames = ['name', 'field_name', 'key', 'id'];
  525. for (const name of possibleFieldNames) {
  526. if (field[name]) return field[name];
  527. }
  528. return undefined;
  529. }
  530. // 检查字段类型的函数,支持数组格式
  531. function checkFieldType(field, type) {
  532. if (!field.field_type) return false;
  533. if (Array.isArray(field.field_type)) {
  534. return field.field_type.map(Number).includes(Number(type));
  535. }
  536. return Number(field.field_type) === Number(type);
  537. }
  538. // 检查是否为数组类型字段(field_type为5或包含5的数组)
  539. function isArrayTypeField(field) {
  540. return checkFieldType(field, 5);
  541. }
  542. // 生成动态验证规则
  543. function generateValidationRules() {
  544. const rules = {}
  545. table_head.value.forEach((field, index) => {
  546. const fieldRules = []
  547. const fieldName = getFieldName(field)
  548. // 必填验证
  549. if (field.is_check === 1) {
  550. fieldRules.push({
  551. required: true,
  552. message: `${field.title}不能为空`,
  553. trigger: ['blur', 'change']
  554. })
  555. }
  556. // 正则验证
  557. if (field.regular && field.regular.trim()) {
  558. try {
  559. const regex = parseRegExp(field.regular)
  560. fieldRules.push({
  561. validator: (rule, value, callback) => {
  562. if (value && !regex.test(value)) {
  563. callback(new Error(`${field.title}格式不正确`))
  564. } else {
  565. callback()
  566. }
  567. },
  568. trigger: ['blur', 'change']
  569. })
  570. } catch (error) {
  571. console.error(`正则表达式错误: ${field.regular}`, error)
  572. }
  573. }
  574. if (fieldRules.length > 0 && fieldName) {
  575. rules[fieldName] = fieldRules
  576. }
  577. })
  578. // 添加验证码规则
  579. if (showCaptcha.value) {
  580. rules['code'] = [
  581. { required: true, message: '验证码不能为空', trigger: 'blur' }
  582. ]
  583. }
  584. rules_js.value = rules
  585. }
  586. // 刷新验证码
  587. async function refreshCaptcha() {
  588. try {
  589. // 拼接 GET 参数
  590. const params = new URLSearchParams({ table_id: table_id.value });
  591. const url = `${$webUrl}/form/getWebGlobalTableFieldList?${params.toString()}`;
  592. const response = await fetch(url, {
  593. method: 'GET',
  594. headers: {
  595. 'Content-Type': 'application/json',
  596. 'Userurl': $CwebUrl,
  597. 'Origin': $CwebUrl
  598. }
  599. });
  600. const get_from_data = await response.json();
  601. // 只处理验证码相关的数据
  602. if (get_from_data.data?.table?.is_code === 1 && get_from_data.data?.code?.img) {
  603. showCaptcha.value = true
  604. captchaId.value = get_from_data.data.code.code_uniqid
  605. // 确保base64字符串包含正确的前缀
  606. if (get_from_data.data.code.img.startsWith('data:image')) {
  607. captchaImage.value = get_from_data.data.code.img
  608. } else {
  609. captchaImage.value = 'data:image/png;base64,' + get_from_data.data.code.img
  610. }
  611. // 清空验证码输入框
  612. formData.value.code = ''
  613. } else {
  614. showCaptcha.value = false
  615. captchaImage.value = ''
  616. captchaId.value = ''
  617. }
  618. } catch (error) {
  619. console.error('刷新验证码失败:', error);
  620. ElMessage.error('刷新验证码失败,请重试');
  621. }
  622. }
  623. useSeoMeta({
  624. title: seoTitle,
  625. meta: [
  626. { name: 'keywords', content: seoKeywords, tagPriority: 10 },
  627. { name: 'description', content: seoDescription, tagPriority: 10 }
  628. ]
  629. });
  630. async function get_from_data_fun() {
  631. pageLoading.value = true
  632. try {
  633. // 拼接 GET 参数
  634. const params = new URLSearchParams({ table_id: table_id.value });
  635. const url = `/form/getWebGlobalTableFieldList?${params.toString()}`;
  636. console.log("url:",url)
  637. const response = await requestDataPromise(url, {
  638. method: 'GET',
  639. query: {}
  640. });
  641. const get_from_data = response
  642. console.log("返回数据:",get_from_data,response)
  643. title.value = get_from_data.data.table.name
  644. remark.value = get_from_data.data.table.remark
  645. seoTitle.value = response.data.table.name + "_" + response.data.table.website_name + "_" + response.data.table.suffix
  646. seoKeywords.value = response.data.table.keywords + "_" + response.data.table.website_name + "_" + response.data.table.suffix
  647. seoDescription.value = response.data.table.description + "_" + response.data.table.website_name + "_" + response.data.table.suffix
  648. // 检查是否需要显示验证码(仅在初始化时)
  649. if (get_from_data.data?.table?.is_code === 1 && get_from_data.data?.code?.img) {
  650. showCaptcha.value = true
  651. captchaId.value = get_from_data.data.code.code_uniqid
  652. // 确保base64字符串包含正确的前缀
  653. if (get_from_data.data.code.img.startsWith('data:image')) {
  654. captchaImage.value = get_from_data.data.code.img
  655. } else {
  656. captchaImage.value = 'data:image/png;base64,' + get_from_data.data.code.img
  657. }
  658. } else {
  659. showCaptcha.value = false
  660. captchaImage.value = ''
  661. captchaId.value = ''
  662. }
  663. // 赋值表头和表体
  664. table_head.value = get_from_data.data?.fields || [];
  665. table_body.value = get_from_data.data?.table || [];
  666. get_from_data_1.value = get_from_data;
  667. // 统一 field_type 为数字或数字数组
  668. table_head.value.forEach(field => {
  669. if (typeof field.field_type === 'string') {
  670. if (field.field_type.includes(',')) {
  671. field.field_type = field.field_type.split(',').map(Number);
  672. } else {
  673. field.field_type = Number(field.field_type);
  674. }
  675. }
  676. });
  677. // 如果API返回的数据为空,使用默认数据
  678. if (table_head.value.length === 0) {
  679. table_head.value = []
  680. }
  681. // 详细检查每个字段的结构
  682. table_head.value.forEach((field, index) => {
  683. if (field.option_value) {
  684. }
  685. })
  686. // 初始化表单数据
  687. table_head.value.forEach(field => {
  688. const fieldName = getFieldName(field)
  689. if (!fieldName) {
  690. console.warn(`字段 ${field.title} 无法确定字段名,跳过初始化`)
  691. return
  692. }
  693. // 根据字段类型初始化不同的默认值
  694. if (isArrayTypeField(field)) {
  695. // 数组类型字段(field_type为5或包含5的数组)初始化为空数组
  696. formData.value[fieldName] = []
  697. } else if (checkFieldType(field, 7) || checkFieldType(field, 8)) {
  698. formData.value[fieldName] = ''
  699. fileLists.value[fieldName] = []
  700. }
  701. else {
  702. // 其他类型初始化为空字符串
  703. formData.value[fieldName] = ''
  704. }
  705. })
  706. // 单独初始化验证码字段
  707. if (showCaptcha.value) {
  708. formData.value.code = ''
  709. }
  710. // 生成验证规则
  711. generateValidationRules()
  712. pageLoading.value = false
  713. } catch (error) {
  714. console.error('请求失败:', error);
  715. // 使用默认数据
  716. table_head.value = []
  717. // 初始化默认数据
  718. table_head.value.forEach(field => {
  719. const fieldName = getFieldName(field)
  720. if (isArrayTypeField(field)) {
  721. formData.value[fieldName] = []
  722. } else if (checkFieldType(field, 7) || checkFieldType(field, 8)) {
  723. formData.value[fieldName] = ''
  724. fileLists.value[fieldName] = []
  725. }
  726. else {
  727. formData.value[fieldName] = ''
  728. }
  729. })
  730. // 单独初始化验证码字段
  731. if (showCaptcha.value) {
  732. formData.value.code = ''
  733. }
  734. generateValidationRules()
  735. pageLoading.value = false
  736. ElMessage.warning('API请求失败,使用默认数据')
  737. }
  738. }
  739. get_from_data_fun();
  740. // 提交表单
  741. async function submitForm() {
  742. if (!formRef.value) {
  743. ElMessage.error('表单引用不存在')
  744. return
  745. }
  746. try {
  747. submitLoading.value = true
  748. // 手动检查必填字段
  749. const requiredFields = table_head.value.filter(field => field.is_check === 1)
  750. const missingFields = requiredFields.filter(field => {
  751. const fieldName = getFieldName(field)
  752. if (!fieldName) {
  753. console.warn(`字段 ${field.title} 无法确定字段名`)
  754. return true
  755. }
  756. const value = formData.value[fieldName]
  757. const isEmpty = value === '' || value === null || value === undefined || (Array.isArray(value) && value.length === 0)
  758. return isEmpty
  759. })
  760. if (missingFields.length > 0) {
  761. ElMessage.error(`请填写必填字段: ${missingFields.map(f => f.title).join(', ')}`)
  762. return
  763. }
  764. // 表单验证 - 使用正确的验证方式
  765. await formRef.value.validate(async (valid, fields) => {
  766. if (valid) {
  767. // 构建提交数据
  768. const otherDataPayload = { 'table_id': table_id.value };
  769. const dataToSubmit = { ...formData.value };
  770. if (showCaptcha.value) {
  771. otherDataPayload.code = dataToSubmit.code;
  772. otherDataPayload.code_uniqid = captchaId.value;
  773. delete dataToSubmit.code;
  774. }
  775. const submitData = {
  776. otherData: otherDataPayload,
  777. data: dataToSubmit
  778. }
  779. // 这里可以调用实际的提交接口
  780. const response = await fetch(`${$webUrl}/form/addWebGlobalTableData`, {
  781. method: 'POST',
  782. headers: {
  783. 'Content-Type': 'application/json',
  784. 'Userurl': $CwebUrl,
  785. 'Origin': $CwebUrl
  786. },
  787. body: JSON.stringify(submitData)
  788. })
  789. const result = await response.json();
  790. if(result.code==200){
  791. dialogVisible.value = true
  792. return
  793. }else{
  794. ElMessage.error(result.message)
  795. return
  796. }
  797. } else {
  798. ElMessage.error('请检查表单填写是否正确')
  799. }
  800. })
  801. } catch (error) {
  802. console.error('提交失败:', error)
  803. ElMessage.error('提交失败,请重试')
  804. } finally {
  805. submitLoading.value = false
  806. }
  807. }
  808. // 重置表单
  809. async function resetForm() {
  810. await get_from_data_fun();
  811. ElMessage.success('表单已重置');
  812. }
  813. // 下拉选择对象转数组
  814. function select_arr_fun(option_obj){
  815. if (!option_obj || typeof option_obj !== 'object') return []
  816. let new_arr = []
  817. // 遍历对象,key为value,value为label
  818. Object.keys(option_obj).forEach(key => {
  819. let the_in_obj = {}
  820. the_in_obj.label = option_obj[key]
  821. the_in_obj.value = +key // 转换为数字
  822. new_arr.push(the_in_obj)
  823. })
  824. return new_arr
  825. }
  826. // 单选按钮对象转数组
  827. function radio_arr_fun(option_obj) {
  828. if (!option_obj || typeof option_obj !== 'object') return []
  829. let new_arr = []
  830. // 遍历对象,key为value,value为label
  831. Object.keys(option_obj).forEach(key => {
  832. new_arr.push([option_obj[key], key]) // [label, value] 格式
  833. })
  834. return new_arr
  835. }
  836. // 复选框对象转数组
  837. function checkbox_arr_fun(option_obj) {
  838. if (!option_obj || typeof option_obj !== 'object') return []
  839. let new_arr = []
  840. // 遍历对象,key为value,value为label
  841. Object.keys(option_obj).forEach(key => {
  842. let the_in_obj = {}
  843. the_in_obj.label = option_obj[key]
  844. the_in_obj.value = String(key) // 确保值为字符串类型
  845. new_arr.push(the_in_obj)
  846. })
  847. return new_arr
  848. }
  849. // 文件上传相关
  850. // 文件超出限制时的处理
  851. const handleExceed = (files, fieldName) => {
  852. const upload = uploadRefs.value[fieldName];
  853. if (upload) {
  854. upload.clearFiles();
  855. const file = files[0];
  856. file.uid = genFileId();
  857. upload.handleStart(file);
  858. upload.submit();
  859. }
  860. };
  861. // 普通文件上传成功
  862. const handleFileSuccess = (res, file, fieldName) => {
  863. if (res.data && res.data.imgUrl) {
  864. formData.value[fieldName] = res.data.imgUrl;
  865. if (fileLists.value[fieldName]) {
  866. fileLists.value[fieldName] = [{
  867. name: file.name,
  868. url: res.data.imgUrl
  869. }];
  870. }
  871. }
  872. };
  873. // 文件移除
  874. const handleFileRemove = (fieldName) => {
  875. formData.value[fieldName] = '';
  876. if(fileLists.value[fieldName]) {
  877. fileLists.value[fieldName] = [];
  878. }
  879. };
  880. // img上传 8
  881. const handleAvatarSuccess = (res, fieldName) => {
  882. if (res.data && res.data.imgUrl) {
  883. formData.value[fieldName] = res.data.imgUrl
  884. }
  885. }
  886. const beforeAvatarUpload = (file) => {
  887. const isJPG = file.type === 'image/jpeg'
  888. const isPNG = file.type === 'image/png'
  889. const isLt2M = file.size / 1024 / 1024 < 2
  890. if (!isJPG && !isPNG) {
  891. ElMessage.error('只能上传 JPG/PNG 格式!')
  892. return false
  893. }
  894. if (!isLt2M) {
  895. ElMessage.error('图片大小不能超过 2MB!')
  896. return false
  897. }
  898. return (isJPG || isPNG) && isLt2M
  899. }
  900. // 页面加载时获取数据
  901. onMounted(async () => {
  902. await get_from_data_fun()
  903. // 确保表单引用存在
  904. await nextTick()
  905. if (formRef.value) {
  906. } else {
  907. }
  908. })
  909. // 复选框变化处理
  910. function handleCheckboxChange(field, value) {
  911. // 这里可以根据需要添加更多的逻辑处理
  912. }
  913. function parseRegExp(str) {
  914. if (typeof str === 'string' && str.startsWith('/') && str.lastIndexOf('/') > 0) {
  915. const lastSlash = str.lastIndexOf('/');
  916. const pattern = str.slice(1, lastSlash);
  917. const flags = str.slice(lastSlash + 1);
  918. return new RegExp(pattern, flags);
  919. }
  920. return new RegExp(str);
  921. }
  922. function onDialogConfirm() {
  923. dialogVisible.value = false;
  924. resetForm();
  925. }
  926. const skeletonChars = Array.from({ length: 16 }).map(() => ({
  927. top: Math.random() * 80 + 5, // 5%~85%
  928. left: Math.random() * 80 + 5, // 5%~85%
  929. fontSize: Math.random() * 60 + 60, // 60~120px
  930. opacity: Math.random() * 0.4 + 0.3, // 0.3~0.7
  931. rotate: Math.random() * 60 - 30 // -30~30deg
  932. }));
  933. </script>