管理员页面新增i查看调查问卷信息

This commit is contained in:
X1627315083
2024-07-29 17:30:24 +08:00
parent a9f9fd26ec
commit 509f91ed6c
9 changed files with 2492 additions and 1918 deletions

View File

@@ -1,6 +1,12 @@
<template>
<div class="administrator_page">
<div class="administrator_page_left">
<div class="administrator_title ">
<div class="modal_title_text" @click="setBack">
<i class="fi fi-sr-left"></i>
<div class="modal_title_intro administrator_title_text">Back</div>
</div>
</div>
<div class="modal_title_text">Administrator</div>
<a-menu
id="dddddd"
@@ -14,7 +20,9 @@
<div v-for="(menu) in rootSubmenuKeys" :key="menu.key" >
<a-menu-item :key="menu.key" :name="menu.name" :route="menu.route" v-if="!menu.children">
<template #icon><span :class="['icon','iconfont', 'menu_icon', menu.icon]"></span></template>
<template #icon>
<span :class="['icon','iconfont', 'menu_icon', menu.icon]"></span>
</template>
<span class="menu_title">{{menu.name}}</span>
</a-menu-item>
<a-sub-menu :key="menu.key" v-else>
@@ -47,7 +55,11 @@
</div>
</div>
<div class="administrator_page_right_content">
<router-view/>
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component" />
</keep-alive>
</router-view>
</div>
</div>
</div>
@@ -78,13 +90,13 @@ export default defineComponent({
setup() {
const router = useRouter()
const route:any = useRoute()
const state = reactive({
const state:any = reactive({
rootSubmenuKeys: [{
name:'Trial User',
route:'/administrator/allUser',
icon:'yonghu',
expandIcon:'icon-xiala',
key:'/administrator/allUser',
key:'sub1',
isShow:true,
// children: [
// {
@@ -108,18 +120,41 @@ export default defineComponent({
route:'/administrator/testClickData',
icon:'shenpi',
expandIcon:'icon-xiala',
key:'/administrator/testClickData',
key:'sub2',
isShow:true,
},{
name:'Trial User Approval',
route:'/administrator/trialApproval',
icon:'usetime',
key:'/administrator/trialApproval',
key:'sub3',
expandIcon:'icon-xiala',
isShow:true,
},{
name:'Events',
icon:'usetime',
key:'sub4',
expandIcon:'icon-xiala',
isShow:true,
children: [
{
name:'Questionnaire Survey',
route:'/administrator/questionnaire',
icon:'',
key:'sub4-1',
isShow:true,
},
// {
// code:'ROLE_MANAGER',
// name:'Access Permission',
// route:'/home/excil2',
// icon:'',
// key:'/home/excil33',
// isShow:true,
// },
],
}],
openKeys: ['sub1'],
selectedKeys: [],
openKeys: [],
selectedKeys: ['sub1'],
nowPageName:'Trial User',//当前页面名称
});
let routers:any = ref([])
@@ -134,11 +169,13 @@ export default defineComponent({
}
};
let handleClick = (event:any) => {
// state.selectedKeys = [Number(event.key)]
state.nowPageName = event.item.name
router.push({path:event.item.route})
}
let setBack = ()=>{
router.push('/home');
}
onMounted(() => {
let cookieInfo = getCookie('userInfo') || ''
if(cookieInfo){
@@ -149,8 +186,22 @@ export default defineComponent({
// getTitle(menuList.value, route.path)
}else{
}
state.nowPageName = state.rootSubmenuKeys[0].name
router.push(state.rootSubmenuKeys[0].route)
state.rootSubmenuKeys.forEach((item:any) => {
if(item.children){
item.children.forEach((item:any) => {
if(item.route == router.currentRoute.value.path){
state.selectedKeys[0] = item.key
}
});
}else{
if(item.route == router.currentRoute.value.path){
state.selectedKeys[0] = item.key
}
}
});
// state.nowPageName = state.rootSubmenuKeys[0].name
// router.push(state.rootSubmenuKeys[0].route)
})
return {
@@ -158,6 +209,7 @@ export default defineComponent({
onOpenChange,
routers,
handleClick,
setBack,
};
},
data(prop) {
@@ -190,7 +242,31 @@ export default defineComponent({
height: 100%;
display: flex;
background: rgba(243,244,248,0.4);
.administrator_title{
display: flex;
align-items: center;
position: sticky;
top: 0;
z-index: 222;
.modal_title_text{
cursor: pointer;
display: flex;
margin-bottom: 0;
font-size: 1.8rem;
}
.administrator_title_text{
line-height: 1;
}
.modal_title_text:hover .administrator_title_text{
text-decoration: underline;
}
i{
font-size: 1.2rem;
display: flex;
align-items: center;
margin-right: 1rem;
}
}
.administrator_page_left{
padding-top: 20px;
.modal_title_text{
@@ -231,6 +307,7 @@ export default defineComponent({
}
.ant-menu-inline.ant-menu-sub{
background: #FFFFFF;
padding-left: 4rem;
}
.menu_title{

View File

@@ -1,15 +1,16 @@
<template>
<div class="feedbackSurvey">
<div class="feedbackSurvey" :class="{'active': forbid}">
<main id="main">
<h1 id="title">AiDA 3.0 Feedback Survey</h1>
<p id="description">Please take the survey</p>
<div id="survey-form">
<p id="description" v-if="!forbid">Please take the survey</p>
<div id="survey-form" :class="{'active': !forbid}">
<h2 class="section-title">Personal Information</h2>
<div class="section w40">
<label for="name"
>Name:<span class="fontColor">*</span></label
>
<input
:readonly="forbid"
type="text"
v-model="userName"
placeholder="Enter your name"
@@ -19,7 +20,7 @@
<label for="gender"
>Gender:<span class="fontColor">*</span></label
>
<select name="dropdown" id="dropdown" v-model="gender">
<select :disabled="forbid" name="dropdown" id="dropdown" v-model="gender">
<option selected value='Female'>Female</option>
<option value='Male'>Male</option>
</select>
@@ -37,6 +38,7 @@
<input
type="text"
:readonly="forbid"
v-model="occupation"
placeholder="Enter your occupation"
required
@@ -57,7 +59,7 @@
</div> -->
<div class="section w40">
<label for="dropdown">Country of Origin:<span class="fontColor" >*</span></label>
<select name="dropdown" id="dropdown" v-model="country" required>
<select :disabled="forbid" name="dropdown" id="dropdown" v-model="country" required>
<option disabled selected value> Select an option </option>
<option v-for="item in CountryList" :key="item" :value="item">{{ item }}</option>
</select>
@@ -68,6 +70,7 @@
>
<input
type="email"
:readonly="forbid"
v-model="email"
placeholder="Enter your email"
required
@@ -77,6 +80,7 @@
<p>Age Group:<span class="fontColor">*</span></p>
<label>
<input
:disabled="forbid"
type="radio"
value="below20"
name="age"
@@ -86,15 +90,15 @@
Below 20
</label>
<label>
<input checked type="radio" value="20-30" v-model="age" name="age" />
<input :disabled="forbid" checked type="radio" value="20-30" v-model="age" name="age" />
20-30
</label>
<label>
<input type="radio" value="30-40" v-model="age" name="age" />
<input :disabled="forbid" type="radio" value="30-40" v-model="age" name="age" />
30-40
</label>
<label>
<input type="radio" value="40+" v-model="age" name="age" />
<input :disabled="forbid" type="radio" value="40+" v-model="age" name="age" />
40+
</label>
</div>
@@ -131,6 +135,7 @@
</p>
<label>
<input
:disabled="forbid"
type="checkbox"
name="checkbox-question"
value="1"
@@ -140,6 +145,7 @@
</label>
<label>
<input
:disabled="forbid"
type="checkbox"
name="checkbox-question"
value="2"
@@ -149,6 +155,7 @@
</label>
<label>
<input
:disabled="forbid"
type="checkbox"
name="checkbox-question"
value="3"
@@ -158,6 +165,7 @@
</label>
<label>
<input
:disabled="forbid"
type="checkbox"
name="checkbox-question"
value="4"
@@ -167,6 +175,7 @@
</label>
<label>
<input
:disabled="forbid"
type="checkbox"
name="checkbox-question"
value="5"
@@ -176,6 +185,7 @@
</label>
<label>
<input
:disabled="forbid"
type="checkbox"
name="checkbox-question"
value="6"
@@ -185,6 +195,7 @@
</label>
<label>
<input
:disabled="forbid"
type="checkbox"
name="checkbox-question"
value="7"
@@ -194,6 +205,7 @@
</label>
<label>
<input
:disabled="forbid"
type="checkbox"
name="checkbox-question"
value="8"
@@ -203,6 +215,7 @@
</label>
<label>
<input
:disabled="forbid"
type="checkbox"
name="checkbox-question"
value="9"
@@ -212,6 +225,7 @@
</label>
<label>
<input
:disabled="forbid"
type="checkbox"
name="checkbox-question"
value="10"
@@ -221,6 +235,7 @@
</label>
<label>
<input
:disabled="forbid"
type="checkbox"
name="checkbox-question"
value="11"
@@ -230,6 +245,7 @@
</label>
<label>
<input
:disabled="forbid"
type="checkbox"
name="checkbox-question"
class="marTop1"
@@ -237,6 +253,7 @@
/>
<span> Others:</span>
<textarea
:readonly="forbid"
name="comments"
id="text-area"
placeholder="Please enter..."
@@ -252,6 +269,7 @@
</p>
<label>
<input
:disabled="forbid"
type="checkbox"
name="checkbox-question"
value="1"
@@ -262,6 +280,7 @@
</label>
<label>
<input
:disabled="forbid"
type="checkbox"
name="checkbox-question"
value="2"
@@ -271,6 +290,7 @@
</label>
<label>
<input
:disabled="forbid"
type="checkbox"
name="checkbox-question"
value="3"
@@ -280,6 +300,7 @@
</label>
<label>
<input
:disabled="forbid"
type="checkbox"
name="checkbox-question"
value="4"
@@ -289,6 +310,7 @@
</label>
<label>
<input
:disabled="forbid"
type="checkbox"
name="checkbox-question"
value="5"
@@ -298,6 +320,7 @@
</label>
<label>
<input
:disabled="forbid"
type="checkbox"
name="checkbox-question"
value="6"
@@ -307,6 +330,7 @@
</label>
<label>
<input
:disabled="forbid"
type="checkbox"
name="checkbox-question"
value="7"
@@ -316,6 +340,7 @@
</label>
<label>
<input
:disabled="forbid"
type="checkbox"
name="checkbox-question"
value="8"
@@ -325,6 +350,7 @@
</label>
<label>
<input
:disabled="forbid"
type="checkbox"
name="checkbox-question"
value="9"
@@ -334,6 +360,7 @@
</label>
<label>
<input
:disabled="forbid"
type="checkbox"
name="checkbox-question"
value="10"
@@ -343,6 +370,7 @@
</label>
<label>
<input
:disabled="forbid"
type="checkbox"
name="checkbox-question"
class="marTop1"
@@ -354,6 +382,7 @@
type="text"
/> -->
<textarea
:readonly="forbid"
name="comments"
id="text-area"
v-model="othersImprovel"
@@ -366,6 +395,7 @@
<p>3. Will you subscribe to AiDA 3.0?<span class="fontColor">*</span></p>
<label>
<input
:disabled="forbid"
type="radio"
value="yes"
v-model="isSubscribe"
@@ -374,7 +404,7 @@
Yes
</label>
<label>
<input v-model="isSubscribe" type="radio" value="no" name="radio-question" />
<input :disabled="forbid" v-model="isSubscribe" type="radio" value="no" name="radio-question" />
No
</label>
</div>
@@ -382,6 +412,7 @@
<p>If NO, please share why:<span class="fontColor">*</span></p>
<label>
<input
:disabled="forbid"
type="checkbox"
value="Not useful"
name="reasonForNotSubscribe"
@@ -390,11 +421,12 @@
Not useful
</label>
<label>
<input type="checkbox" value="Too expensive" v-model="reasonForNotSubscribe" name="reasonForNotSubscribe" />
<input :disabled="forbid" type="checkbox" value="Too expensive" v-model="reasonForNotSubscribe" name="reasonForNotSubscribe" />
Too expensive
</label>
<label>
<input
:disabled="forbid"
type="checkbox"
name="reasonForNotSubscribe"
ref="isSubscribeCauseOthers"
@@ -402,6 +434,7 @@
/>
<span> Others:</span>
<textarea
:readonly="forbid"
name="comments"
id="text-area"
v-model="othersIsSubscribeCause"
@@ -416,13 +449,14 @@
list:
</p>
<textarea
:readonly="forbid"
name="comments"
id="text-area"
v-model="designTools"
placeholder="Please enter..."
></textarea>
</div>
<div class="section">
<div v-if="!forbid" class="section">
<button id="submit" @click="setSubmit">Submit</button>
</div>
</div>
@@ -437,7 +471,7 @@ import { Https } from "@/tool/https";
import { defineComponent, toRefs,ref, reactive, createVNode } from "vue";
export default defineComponent({
setup() {
const feedbackData:any = reactive({
let feedbackData:any = reactive({
userName:'',
gender:'Female',
occupation:'',
@@ -684,7 +718,42 @@ export default defineComponent({
).catch(res=>{
});
}
let forbid = ref(false)
let initData = (data:any) => {
// Object.assign(feedbackData,data)
// console.log(JSON.parse(JSON.stringify(feedbackData)));
forbid.value = true
for (const iterator in data) {
if(typeof data[iterator] == 'object'){
data[iterator].forEach((item:any)=>{
if(item*1){
feedbackData[iterator].push(item)
}else{
if(iterator == 'helpful'){
refList.helpfulOthers.checked = true
othersHelpful.value = item
}else if(iterator == 'improve'){
refList.improvelOthers.checked = true
othersImprovel.value = item
}
}
})
}else{
feedbackData[iterator] = data[iterator]
}
}
if(data.othersIsSubscribeCause){
refList.isSubscribeCauseOthers.checked = true
let arr = []
data.reasonForNotSubscribe.forEach((item:any,index:number) => {
if(index <= 1){
arr.push(item)
}
});
othersIsSubscribeCause.value = data.othersIsSubscribeCause[2]
}
// feedbackData = reactive(...data)
}
return {
...toRefs(feedbackData),
...toRefs(refList),
@@ -693,6 +762,8 @@ export default defineComponent({
othersIsSubscribeCause,
CountryList,
setSubmit,
forbid,
initData,
};
},
@@ -710,15 +781,49 @@ export default defineComponent({
@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap");
.feedbackSurvey {
font-family: "Quicksand", sans-serif;
font-family: 'Roboto', sans-serif;
text-align: center;
line-height: 1.5;
// background: linear-gradient(180deg, #f3f3e6 0%, #eee4f3 100%);
margin: 1rem;
height: 100%;
overflow-y: auto;
&.active{
#title {
font-size: 3rem;
}
#description {
font-size: 1.4rem;
}
#survey-form {
width: 90%;
padding: 1.5rem;
font-size: 1.2rem;
}
p{
font-size: 1.4rem;
}
input,
#dropdown {
padding: 5px;
}
textarea {
max-height: 125px;
padding: 5px;
}
input[type="radio"],
input[type="checkbox"] {
width: 1rem;
height: 1rem;
}
input,select{
height: 3.5rem;
}
}
#main{
background: linear-gradient(45deg, #eee4f3, #f3f4e6);
padding: 2rem;
}
#title {
font-size: 6rem;
@@ -730,7 +835,7 @@ export default defineComponent({
font-size: 2.8rem;
font-style: italic;
}
#survey-form {
position: relative;
background: rgba(255, 255, 255, 0.2);
@@ -742,12 +847,14 @@ export default defineComponent({
padding: 3rem;
box-shadow: -1px 1px 5px 0.5px;
font-size: 2.4rem;
transition: width 1s ease;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
&.active{
transition: width 1s ease;
}
}
@media (max-width: 760px) {
form {
width: 75%;
@@ -763,6 +870,9 @@ export default defineComponent({
margin: 1rem;
width: 100%;
}
.section:last-child{
margin-bottom: 4rem;
}
.w40 {
width: 40%;
}

View File

@@ -20,7 +20,7 @@
>性别:<span class="fontColor">*</span></label
>
<select name="dropdown" id="dropdown" v-model="gender">
<option selected value='Female'></option>
<option selected value='Female'>男女性</option>
<option value='Male'>男性</option>
</select>
<!-- <input
@@ -705,6 +705,7 @@ export default defineComponent({
@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap");
.feedbackSurvey {
font-family: "Quicksand", sans-serif;
font-family: 'Roboto', sans-serif;
text-align: center;
line-height: 1.5;
// background: linear-gradient(180deg, #f3f3e6 0%, #eee4f3 100%);