Flex3的双向绑定及ReferenceError: Error #1056: 错误解决

在实现Flex数据的双向绑定之前,由于自己对Flex刚接触所有处处碰壁,在自己了解基本原理后,参考了网上一位大侠的实例后,以下自己实现的数据双向绑定,绝对可以跑起来的。在此过程中自己也碰到了ReferenceError: Error #1056错误,根据自己的理解后给出了一个比较具有技巧的、实用的方法。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()" layout="absolute">
<mx:Script>
<![CDATA[
import cn.sloppy.User;
import mx.binding.utils.ChangeWatcher;
import mx.controls.Alert;
import cn.sloppy.TwoWayBinding;
[Bindable]
private var user:User;
private function init():void{
user = new User("wenxing");
TwoWayBinding.create(myText,"text",user,"Name");
}
private function showUserNameHandler():void{
Alert.show(user.Name);
user.Name = "hello world";
}
]]>
</mx:Script>
<mx:TextInput text="{user.Name}" id="myText" x="118" y="31"/>
<mx:Button x="118" y="77" click="showUserNameHandler()" label="Button"/>

</mx:Application>


package cn.sloppy
{
public class User
{
private var name:String;

public function User(pName:String)
{
name = pName;
}

[Bindable]
public function get Name():String
{
return name;
}

public function set Name(pName:String):void
{
name = pName;
}
}
}


package cn.sloppy
{
import flash.events.Event;
import mx.binding.utils.ChangeWatcher;
public class TwoWayBinding
{
public static function create(src1:Object, prop1:String, src2:Object, prop2:String):void
{
var flag:Boolean = false;

ChangeWatcher.watch(src1, prop1, function(event:Event):void
{
if(!flag)
{
flag = true;
src2[prop2] = src1[prop1];
flag = false;
}
});

ChangeWatcher.watch(src2, prop2, function(event:Event):void
{
if(!flag)
{
flag = true;
src1[prop1] = src2[prop2];
flag = false;
}
});
}
}
}


以上是实现数据双向绑定的代码;
User类是我自己写的,但在运行的时候就出现了ReferenceError: Error #1056: 无法为 cn.sloppy.User创建属性 name;
解决方法为TwoWayBinding.create(myText,"text",user,"Name"); "Name"第一个字母必须大写;
原理(本人的理解):因为我们只能通过user.Name去调用我们的getter方法,所有我们必须使用Name,这样也导致我们在定义类的私有属性是第一个字母必须小写不然也会报同样的错误。这是自己的理解哦 有意见请加QQ:305677472
<template> <div class="vote-container"> <!-- 投票人信息 --> <div class="voter-info" v-if="voterName && voterIdCard"> <p>投票人:{{ voterName }}</p> <p>身份证:{{ formattedIdCard }}</p> </div> <!-- 投票统计信息 --> <div class="stats"> <div class="stat"> <h3>经理投票</h3> <div class="progress"> <div class="progress-bar" :style="{ width: (votes.A / 5) * 100 + &#39;%&#39; }"></div> </div> <p>{{ votes.A }} / 5</p> </div> <div class="stat"> <h3>厂长投票</h3> <div class="progress"> <div class="progress-bar" :style="{ width: (votes.B / 5) * 100 + &#39;%&#39; }"></div> </div> <p>{{ votes.B }} / 5</p> </div> <div class="stat"> <h3>副厂长投票</h3> <div class="progress"> <div class="progress-bar" :style="{ width: (votes.C / 15) * 100 + &#39;%&#39; }"></div> </div> <p>{{ votes.C }} / 15</p> </div> <div class="stat"> <h3>总票数</h3> <div class="progress"> <div class="progress-bar" :style="{ width: (totalVotes / 25) * 100 + &#39;%&#39; }"></div> </div> <p>{{ totalVotes }} / 25</p> </div> </div> <!-- 被投票人列表 --> <div class="voters-grid"> <div v-for="voter in voters" :key="voter.id" class="voter-card"> <h4>{{ voter.name }}</h4> <p class="voter-id">ID: {{ voter.id }}</p> <div class="vote-options"> <button @click="castVote(voter, &#39;A&#39;)" :disabled="!canVote(voter, &#39;A&#39;)" :class="{ &#39;selected&#39;: voter.vote === &#39;A&#39;, &#39;disabled&#39;: !canVote(voter, &#39;A&#39;) }" > 经理 </button> <button @click="castVote(voter, &#39;B&#39;)" :disabled="!canVote(voter, &#39;B&#39;)" :class="{ &#39;selected&#39;: voter.vote === &#39;B&#39;, &#39;disabled&#39;: !canVote(voter, &#39;B&#39;) }" > 厂长 </button> <button @click="castVote(voter, &#39;C&#39;)" :disabled="!canVote(voter, &#39;C&#39;)" :class="{ &#39;selected&#39;: voter.vote === &#39;C&#39;, &#39;disabled&#39;: !canVote(voter, &#39;C&#39;) }" > 副厂长 </button> </div> </div> </div> <!-- 操作按钮 --> <div class="action-buttons"> <button @click="submitVotes" :disabled="!hasSelectedCandidates || isSubmitting">提交投票</button> <button @click="resetVotes" :disabled="isSubmitting">重置投票</button> </div> </div> </template> <script setup> import { ref, reactive, computed } from &#39;vue&#39;; import { useRoute } from &#39;vue-router&#39;; import { onMounted } from &#39;vue&#39; const voters = ref([]); //候选人 const activeSurvey = ref({ id: null, //投票ID bt: &#39;&#39;, // 标题 qydcl: &#39;&#39;, dclx: &#39;&#39;, //投票类型 tffs: &#39;&#39; }); // 添加消息提示状态 const alertMessage = ref(&#39;&#39;); const showAlert = ref(false); const alertType = ref(&#39;&#39;); // &#39;success&#39; 或 &#39;error&#39; // 安全序列化函数 function safeStringify(obj) { const seen = new WeakSet(); return JSON.stringify(obj, (key, value) => { if (typeof value === "object" && value !== null) { if (seen.has(value)) { // 检测到循环引用,返回占位符或跳过 return "[Circular Reference Removed]"; } seen.add(value); } return value; }); } // onMounted生命周期钩子 onMounted(async () => { // 从sessionStorage获取投票人信息并立即清除 const voterInfo = sessionStorage.getItem(&#39;voterInfo&#39;); if (voterInfo) { const { name, idCard } = JSON.parse(voterInfo); voterName.value = name; voterIdCard.value = idCard; sessionStorage.removeItem(&#39;voterInfo&#39;); } // 加载候选人数据 voters.value = await fetchCandidates(); }); // 获取路由信息 const route = useRoute(); // 添加用于存储投票人信息的变量 const voterName = ref(&#39;&#39;); const voterIdCard = ref(&#39;&#39;); // 格式化身份证显示(安全脱敏) const formattedIdCard = computed(() => { if (!voterIdCard.value) return &#39;&#39;; // 显示前6位和后4位,中间用*代替 return voterIdCard.value.substring(0, 6) + &#39;******&#39; + voterIdCard.value.substring(voterIdCard.value.length - 4); }); onMounted(() => { // 从sessionStorage获取数据并立即清除 const voterInfo = sessionStorage.getItem(&#39;voterInfo&#39;); if (voterInfo) { const { name, idCard } = JSON.parse(voterInfo); voterName.value = name; voterIdCard.value = idCard; // 关键:立即清除存储防止数据残留 sessionStorage.removeItem(&#39;voterInfo&#39;); } }); //获取候选人明细 const fetchCandidates = async () => { try { const response = await fetch(&#39;/api/wechat/getInvestigate&#39;, { method: &#39;POST&#39;, body: JSON.stringify({ id: &#39;9&#39;, dcl: &#39;123&#39; }) }); console.log(&#39;API响应:&#39;, response); const result = await response.json(); if (!result || !result.root) throw new Error(&#39;无效API响应&#39;); // 提取候选人数据 const candidateArray = []; let idCounter = 1; // 自增计数器,名称序号 result.root.forEach(rootItem => { if (!rootItem.childEntList) return; rootItem.childEntList.forEach(candidate => { if (!candidate.dcbt || !candidate.dcxbt) return; candidateArray.push({ originalid: candidate.dcbt, name: candidate.dcxbt, vote: null, id:idCounter++, tmlx: candidate.tmlx, // 投票类型 }); }); }); return candidateArray; } catch (error) { console.error(&#39;获取候选人失败:&#39;, error); return []; // 返回空数组保持安全 } }; // 新增计算属性 - 获取已选择的候选人 const selectedCandidates = computed(() => { return voters.value .filter(v => v.vote) // 只过滤已投票的 .map(v => ({ id: v.originalid, // 候选人原始ID voteType: v.vote, // 投票类型(A/B/C) voteValue: v.vote === &#39;A&#39; ? 17 : // 转换类型值 v.vote === &#39;B&#39; ? 18 : 19, name: v.name, // 候选人姓名 tmlx: v.tmlx // 原始类型 })); }); // 检查是否有选择的候选人 const hasSelectedCandidates = computed(() => { return selectedCandidates.value.length > 0; }); // 投票统计 const votes = reactive({ A: 0, B: 0, C: 0 }); // 计算总票数 const totalVotes = computed(() => { return votes.A + votes.B + votes.C; }); // 投票方法 const canVote = (voter, type) => { // 情况1:用户取消当前选择的类型(总是允许) if (voter.vote === type) return true; // 情况2:用户从其他类型转换到当前类型 if (voter.vote && voter.vote !== type) { if (type === &#39;A&#39; && votes.A >= 5) return false; if (type === &#39;B&#39; && votes.B >= 5) return false; if (type === &#39;C&#39; && votes.C >= 15) return false; } // 情况3:用户首次投票 if (!voter.vote) { if (type === &#39;A&#39; && votes.A >= 5) return false; if (type === &#39;B&#39; && votes.B >= 5) return false; if (type === &#39;C&#39; && votes.C >= 15) return false; if (totalVotes.value >= 25) return false; } return true; }; // 投票方法 const castVote = (voter, type) => { // 如果已投票且点击相同类型,取消投票 if (voter.vote === type) { voter.vote = null; votes[type]--; return; } // 如果之前有投票,先取消 if (voter.vote !== null) { votes[voter.vote]--; } // 投新票 voter.vote = type; votes[type]++; }; //投票人信息 // 添加投票人信息数据模型 const voterInfo = reactive({ name: &#39;&#39;, idNumber: &#39;&#39; }); // // 添加基本信息验证 // const isValid = computed(() => { // return voterInfo.name.trim() !== &#39;&#39; && // voterInfo.idNumber.trim() !== &#39;&#39; && // /^\d{17}[\dXx]$/.test(voterInfo.idNumber); // }); // 提交投票 // 防止重复提交 const isSubmitting = ref(false); // 提交投票到API const submitVotes = async () => { // 添加防御性检查 if (!hasSelectedCandidates.value) { alert(&#39;请先选择候选人&#39;, &#39;error&#39;); return; } // 防止重复提交 if (isSubmitting.value) return; isSubmitting.value = true; try { // 按接口规范构建JSON数据结构 // const requestData = { // mainData: [ // { fieldName: "bt", fieldValue: activeSurvey.value.bt }, // { fieldName: "tprxm", fieldValue: voterName }, // { fieldName: "tprsfz", fieldValue: voterIdCard }, // { fieldName: "mb", fieldValue: activeSurvey.value.id }, // { fieldName: "dclx", fieldValue: activeSurvey.value.dclx }, // { fieldName: "tffs", fieldValue: activeSurvey.value.tffs }, // ], // workflowRequestTableRecords: selectedCandidates.value.map(candidate => ({ // workflowRequestTableFields: [ // { // fieldName: "dcbt", // fieldValue: candidate.originalid // }, // { // fieldName: "tmlx", // fieldValue: candidate.tmlx // }, // { // fieldName: "dcxx", // fieldValue: candidate.voteValue // 使用转换后的值 // } // ] // })) // }; const mainData = [ { fieldName: "bt", fieldValue: activeSurvey.value.bt }, { fieldName: "tprxm", fieldValue: voterName.value }, { fieldName: "tprsfz", fieldValue: voterIdCard.value }, { fieldName: "mb", fieldValue: activeSurvey.value.id }, { fieldName: "dclx", fieldValue: activeSurvey.value.dclx }, { fieldName: "tffs", fieldValue: activeSurvey.value.tffs } ]; const workflowRequestTableRecords = selectedCandidates.value.map(candidate => ({ workflowRequestTableFields: [ { fieldName: "dcbt", fieldValue: candidate.originalid }, { fieldName: "tmlx", fieldValue: candidate.tmlx }, { fieldName: "dcxx", fieldValue: candidate.vote === &#39;A&#39; ? 17 : candidate.vote === &#39;B&#39; ? 18 : 19 } ] })); const requestBody = { requestName: activeSurvey.value.bt, // 投票标题 workflowId: 118, // 固定工作流ID mainData, workflowRequestTableRecords }; // 发送POST请求 const response = await fetch(&#39;/api/wechat/addInvestigateWorkflow1&#39;, { method: &#39;POST&#39;, headers: { &#39;Content-Type&#39;: &#39;application/json&#39; }, body: safeStringify(requestBody)// 使用安全序列化,避免重复引用 }); const result = await response.json(); // 根据API响应显示相应提示 if (result.code === 200) { // 成功处理 if (result.msg) { showMessage(result.msg, &#39;success&#39;); }else { showMessage(&#39;投票提交成功!&#39;, &#39;success&#39;); } // 存储已投票标识 localStorage.setItem(&#39;voted_&#39; + voterIdCard.value, &#39;true&#39;); } else { // 特殊处理"已提交"消息 if (result.msg === &#39;你已提交或不满足提交条件&#39;) { showMessage(result.msg, &#39;error&#39;); } else { // 其他错误处理 showMessage(`提交失败: ${result.msg || &#39;未知错误&#39;}`, &#39;error&#39;); } } } catch (error) { console.error(&#39;提交失败:&#39;, error); // 检查是否已投票错误(假设后端返回409状态码) if (error.response?.status === 409) { alert(&#39;您已投过票,无法重复提交&#39;); } else { alert(&#39;投票提交失败,请重试&#39;); } } finally { isSubmitting.value = false; } }; // 重置投票 const resetVotes = () => { if (confirm(&#39;确定要重置所有投票吗?&#39;)) { voters.value.forEach(voter => { voter.vote = null; }); votes.A = 0; votes.B = 0; votes.C = 0; voterInfo.name = &#39;&#39;; voterInfo.idNumber = &#39;&#39;; } }; </script> <style scoped> /* 移动端垂直布局 */ @media (max-width: 480px) { .input-group { flex-direction: column; } } /* 平板/桌面端水平布局 */ @media (min-width: 768px) { .input-group { flex-direction: row; } } .vote-container { max-width: 1200px; margin: 0 auto; padding: 20px; } .stats { display: flex; justify-content: space-between; margin-bottom: 30px; background: #f5f7fa; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .stat { flex: 1; text-align: center; padding: 0 15px; } .progress { height: 20px; background: #e0e0e0; border-radius: 10px; margin: 10px 0; overflow: hidden; } .progress-bar { height: 100%; background: #3498db; transition: width 0.3s; } .voters-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; } .voter-card { background: white; border-radius: 8px; padding: 15px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); transition: transform 0.2s; } .voter-card:hover { transform: translateY(-5px); } .voter-id { color: #777; font-size: 0.9rem; margin-bottom: 15px; } .vote-options { display: flex; justify-content: space-between; } .vote-options button { flex: 1; margin: 0 5px; padding: 8px 0; border: none; border-radius: 4px; cursor: pointer; transition: all 0.2s; } .vote-options button:not(.selected):hover { opacity: 0.9; transform: scale(1.05); } .vote-options button:first-child { background: #ff6b6b; color: white; } .vote-options button:nth-child(2) { background: #4ecdc4; color: white; } .vote-options button:last-child { background: #ffd166; color: white; } .selected { border: 2px solid #2c3e50 !important; font-weight: bold; box-shadow: 0 0 2 rgba(61, 60, 60, 0.5); } .disabled { opacity: 0.5 !important; cursor: not-allowed !important; } .action-buttons { margin-top: 30px; display: flex; justify-content: center; gap: 20px; } .action-buttons button { padding: 12px 30px; border: none; border-radius: 6px; cursor: pointer; font-size: 1rem; font-weight: 600; transition: all 0.2s; } .action-buttons button:first-child { background: #3498db; color: white; } .action-buttons button:first-child:disabled { background: #bdc3c7; cursor: not-allowed; } .action-buttons button:last-child { background: #e74c3c; color: white; } .action-buttons button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } </style>点击提交报错但是后台响应已经提交上去了。提交失败: ReferenceError: showMessage is not defined at submitVotes (Vote.vue:386:1)
06-12
<template> <div class="vote-container"> <!-- 投票人信息 --> <div class="voter-info" v-if="voterName && voterIdCard"> <p>投票人:{{ voterName }}</p> <p>身份证:{{ formattedIdCard }}</p> </div> <!-- 投票统计信息 --> <div class="stats"> <div class="stat"> <h3>经理投票</h3> <div class="progress"> <div class="progress-bar" :style="{ width: (votes.A / 5) * 100 + &#39;%&#39; }"></div> </div> <p>{{ votes.A }} / 5</p> </div> <div class="stat"> <h3>厂长投票</h3> <div class="progress"> <div class="progress-bar" :style="{ width: (votes.B / 5) * 100 + &#39;%&#39; }"></div> </div> <p>{{ votes.B }} / 5</p> </div> <div class="stat"> <h3>副厂长投票</h3> <div class="progress"> <div class="progress-bar" :style="{ width: (votes.C / 15) * 100 + &#39;%&#39; }"></div> </div> <p>{{ votes.C }} / 15</p> </div> <div class="stat"> <h3>总票数</h3> <div class="progress"> <div class="progress-bar" :style="{ width: (totalVotes / 25) * 100 + &#39;%&#39; }"></div> </div> <p>{{ totalVotes }} / 25</p> </div> </div> <!-- 被投票人列表 --> <div class="voters-grid"> <div v-for="voter in voters" :key="voter.id" class="voter-card"> <h4>{{ voter.name }}</h4> <p class="voter-id">ID: {{ voter.id }}</p> <div class="vote-options"> <button @click="castVote(voter, &#39;A&#39;)" :disabled="!canVote(voter, &#39;A&#39;)" :class="{ &#39;selected&#39;: voter.vote === &#39;A&#39;, &#39;disabled&#39;: !canVote(voter, &#39;A&#39;) }" > 经理 </button> <button @click="castVote(voter, &#39;B&#39;)" :disabled="!canVote(voter, &#39;B&#39;)" :class="{ &#39;selected&#39;: voter.vote === &#39;B&#39;, &#39;disabled&#39;: !canVote(voter, &#39;B&#39;) }" > 厂长 </button> <button @click="castVote(voter, &#39;C&#39;)" :disabled="!canVote(voter, &#39;C&#39;)" :class="{ &#39;selected&#39;: voter.vote === &#39;C&#39;, &#39;disabled&#39;: !canVote(voter, &#39;C&#39;) }" > 副厂长 </button> </div> </div> </div> <!-- 操作按钮 --> <div class="action-buttons"> <button @click="submitVotes" :disabled="totalVotes === 0 || isSubmitting">提交投票</button> <button @click="resetVotes" :disabled="isSubmitting">重置投票</button> </div> </div> </template> <script setup> import { ref, reactive, computed, onMounted } from &#39;vue&#39;; import { useRoute } from &#39;vue-router&#39;; import { onMounted } from &#39;vue&#39; const voters = ref([]); //候选人 const activeSurvey = ref({ id: null, //投票ID bt: &#39;&#39;, // 标题 qydcl: &#39;&#39;, dclx: &#39;&#39;, //投票类型 tffs: &#39;&#39; }); // onMounted生命周期钩子 onMounted(async () => { // 从sessionStorage获取投票人信息并立即清除 const voterInfo = sessionStorage.getItem(&#39;voterInfo&#39;); if (voterInfo) { const { name, idCard } = JSON.parse(voterInfo); voterName.value = name; voterIdCard.value = idCard; sessionStorage.removeItem(&#39;voterInfo&#39;); } // 加载候选人数据 voters.value = await fetchCandidates(); }); // 获取路由信息 const route = useRoute(); // 添加用于存储投票人信息的变量 const voterName = ref(&#39;&#39;); const voterIdCard = ref(&#39;&#39;); // 格式化身份证显示(安全脱敏) const formattedIdCard = computed(() => { if (!voterIdCard.value) return &#39;&#39;; // 显示前6位和后4位,中间用*代替 return voterIdCard.value.substring(0, 6) + &#39;******&#39; + voterIdCard.value.substring(voterIdCard.value.length - 4); }); onMounted(() => { // 从sessionStorage获取数据并立即清除 const voterInfo = sessionStorage.getItem(&#39;voterInfo&#39;); if (voterInfo) { const { name, idCard } = JSON.parse(voterInfo); voterName.value = name; voterIdCard.value = idCard; // 关键:立即清除存储防止数据残留 sessionStorage.removeItem(&#39;voterInfo&#39;); } }); //获取候选人明细 const fetchCandidates = async () => { try { const response = await fetch(&#39;/api/wechat/getInvestigate&#39;, { method: &#39;POST&#39;, body: JSON.stringify({ id: &#39;9&#39;, dcl: &#39;123&#39; }) }); console.log(&#39;API响应:&#39;, response); const result = await response.json(); if (!result || !result.root) throw new Error(&#39;无效API响应&#39;); // 提取候选人数据 const candidateArray = []; let idCounter = 1; // 自增计数器,名称序号 result.root.forEach(rootItem => { if (!rootItem.childEntList) return; rootItem.childEntList.forEach(candidate => { if (!candidate.dcbt || !candidate.dcxbt) return; candidateArray.push({ originalid: candidate.dcbt, name: candidate.dcxbt, vote: null, id:idCounter++, tmlx: candidate.tmlx, // 投票类型 }); }); }); return candidateArray; } catch (error) { console.error(&#39;获取候选人失败:&#39;, error); return []; // 返回空数组保持安全 } }; // 投票统计 const votes = reactive({ A: 0, B: 0, C: 0 }); // 计算总票数 const totalVotes = computed(() => { return votes.A + votes.B + votes.C; }); // 投票方法 const canVote = (voter, type) => { // 情况1:用户取消当前选择的类型(总是允许) if (voter.vote === type) return true; // 情况2:用户从其他类型转换到当前类型 if (voter.vote && voter.vote !== type) { if (type === &#39;A&#39; && votes.A >= 5) return false; if (type === &#39;B&#39; && votes.B >= 5) return false; if (type === &#39;C&#39; && votes.C >= 15) return false; } // 情况3:用户首次投票 if (!voter.vote) { if (type === &#39;A&#39; && votes.A >= 5) return false; if (type === &#39;B&#39; && votes.B >= 5) return false; if (type === &#39;C&#39; && votes.C >= 15) return false; if (totalVotes.value >= 25) return false; } return true; }; // 投票方法 const castVote = (voter, type) => { // 如果已投票且点击相同类型,取消投票 if (voter.vote === type) { voter.vote = null; votes[type]--; return; } // 如果之前有投票,先取消 if (voter.vote !== null) { votes[voter.vote]--; } // 投新票 voter.vote = type; votes[type]++; }; //投票人信息 // 添加投票人信息数据模型 const voterInfo = reactive({ name: &#39;&#39;, idNumber: &#39;&#39; }); // // 添加基本信息验证 // const isValid = computed(() => { // return voterInfo.name.trim() !== &#39;&#39; && // voterInfo.idNumber.trim() !== &#39;&#39; && // /^\d{17}[\dXx]$/.test(voterInfo.idNumber); // }); // 提交投票 // 防止重复提交 const isSubmitting = ref(false); // 提交投票到API const submitVotes = async () => { // 防止重复提交 if (isSubmitting.value) return; isSubmitting.value = true; try { // 按接口规范构建JSON数据结构 const requestData = { requestName: activeSurvey.bt, // 调查标题 workflowId: activeSurvey.id, // 调查ID mainData: [ { fieldName: "bt", fieldValue: activeSurvey.bt }, { fieldName: "tprxm", fieldValue: voterName }, { fieldName: "tprsfz", fieldValue: voterIdCard }, { fieldName: "mb", fieldValue: activeSurvey.id }, { fieldName: "dclx", fieldValue: activeSurvey.dclx }, { fieldName: "tffs", fieldValue: activeSurvey.tffs }, ], workflowRequestTableRecords: selectedCandidates.map(candidate => { return { workflowRequestTableFields: [ { fieldName: "dcbt", fieldValue: candidate.originalId // 候选人的原始ID }, { fieldName: "tmlx", fieldValue: candidate.tmlx // 投票类型 }, { fieldName: "dcxx", // 根据投票类型转换值:经理-17, 厂长-18, 副厂长-19 fieldValue: candidate.voteType === &#39;经理&#39; ? 17 : candidate.voteType === &#39;厂长&#39; ? 18 : 19 } ] }; }) }; // 发送POST请求 const response = await fetch(&#39;/api/wechat/addInvestigateWorkflow1&#39;, { method: &#39;POST&#39;, headers: { &#39;Content-Type&#39;: &#39;application/json&#39; }, body: JSON.stringify(requestData) }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const result = await response.json(); alert(&#39;投票提交成功!&#39;); // console.log(&#39;API响应:&#39;, result); // 提交成功后重置表单 // resetVotes(); // 存储已投票标识 localStorage.setItem(&#39;voted_&#39; + voterIdCard.value, &#39;true&#39;); } catch (error) { console.error(&#39;提交失败:&#39;, error); // 检查是否已投票错误(假设后端返回409状态码) if (error.response?.status === 409) { alert(&#39;您已投过票,无法重复提交&#39;); } else { alert(&#39;投票提交失败,请重试&#39;); } } finally { isSubmitting.value = false; } }; // 重置投票 const resetVotes = () => { if (confirm(&#39;确定要重置所有投票吗?&#39;)) { voters.value.forEach(voter => { voter.vote = null; }); votes.A = 0; votes.B = 0; votes.C = 0; voterInfo.name = &#39;&#39;; voterInfo.idNumber = &#39;&#39;; } }; </script> <style scoped> /* 移动端垂直布局 */ @media (max-width: 480px) { .input-group { flex-direction: column; } } /* 平板/桌面端水平布局 */ @media (min-width: 768px) { .input-group { flex-direction: row; } } .vote-container { max-width: 1200px; margin: 0 auto; padding: 20px; } .stats { display: flex; justify-content: space-between; margin-bottom: 30px; background: #f5f7fa; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .stat { flex: 1; text-align: center; padding: 0 15px; } .progress { height: 20px; background: #e0e0e0; border-radius: 10px; margin: 10px 0; overflow: hidden; } .progress-bar { height: 100%; background: #3498db; transition: width 0.3s; } .voters-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; } .voter-card { background: white; border-radius: 8px; padding: 15px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); transition: transform 0.2s; } .voter-card:hover { transform: translateY(-5px); } .voter-id { color: #777; font-size: 0.9rem; margin-bottom: 15px; } .vote-options { display: flex; justify-content: space-between; } .vote-options button { flex: 1; margin: 0 5px; padding: 8px 0; border: none; border-radius: 4px; cursor: pointer; transition: all 0.2s; } .vote-options button:not(.selected):hover { opacity: 0.9; transform: scale(1.05); } .vote-options button:first-child { background: #ff6b6b; color: white; } .vote-options button:nth-child(2) { background: #4ecdc4; color: white; } .vote-options button:last-child { background: #ffd166; color: white; } .selected { border: 2px solid #2c3e50 !important; font-weight: bold; box-shadow: 0 0 2 rgba(61, 60, 60, 0.5); } .disabled { opacity: 0.5 !important; cursor: not-allowed !important; } .action-buttons { margin-top: 30px; display: flex; justify-content: center; gap: 20px; } .action-buttons button { padding: 12px 30px; border: none; border-radius: 6px; cursor: pointer; font-size: 1rem; font-weight: 600; transition: all 0.2s; } .action-buttons button:first-child { background: #3498db; color: white; } .action-buttons button:first-child:disabled { background: #bdc3c7; cursor: not-allowed; } .action-buttons button:last-child { background: #e74c3c; color: white; } .action-buttons button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } </style> 报错:Vote.vue:324 提交失败: ReferenceError: selectedCandidates is not defined at submitVotes (Vote.vue:279:1) submitVotes @ Vote.vue:324
06-11
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值