aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

2
.env.dev
View File

@@ -6,6 +6,6 @@ NODE_ENV = 'development'
VUE_APP_BASE_URL = 'https://develop.api.aida.com.hk'
VUE_APP_BASE_URL = 'https://api.aida.com.hk'
# 佩佩
# VUE_APP_BASE_URL = 'http://192.168.1.7:5567'
VUE_APP_BASE_URL = 'http://192.168.1.7:5567'
# 海波
# VUE_APP_BASE_URL = 'http://192.168.1.9:5567'

60
src/assets/style/style.css
View File

@@ -480,6 +480,22 @@ li {
width: 0.8rem;
height: 0.8rem;
}
.trial_page .ant-tooltip {
z-index: 1049 !important;
}
.trial_page .habit :deep(.ant-tooltip .ant-tooltip-inner),
.trial_page :deep(.ant-tooltip-arrow-content) {
background: #000 !important;
}
.trial_page .habit_mod {
background-color: #000 !important;
/* top: 0 !important; */
/* left: 0 !important; */
}
.trial_page .ant-tooltip .ant-tooltip-inner,
.trial_page .ant-tooltip-arrow-content {
background: #000 !important;
}
.trial_page .ant-cascader-checkbox-checked .ant-cascader-checkbox-inner {
background-color: #767676;
border-color: #d9d9d9 !important;
@@ -1163,6 +1179,19 @@ li {
border: none;
background: transparent;
}
.admin_page .admin_table_content .operate_list {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1rem;
}
.admin_page .admin_table_content .operate_list .operate_item {
font-size: 1.4rem;
font-family: Roboto;
font-weight: 400;
color: #343579;
cursor: pointer;
}
.admin_page .admin_table_content .ant-table-tbody > tr:hover > td {
background: #ffffff3a;
}
@@ -1174,6 +1203,7 @@ li {
align-items: center;
justify-content: space-between;
padding: 0 1rem;
justify-content: center;
}
.admin_page .admin_table_content .operate_list .operate_item {
font-size: 1.4rem;
@@ -1204,6 +1234,29 @@ li {
border: solid 2px rgba(0, 0, 0, 0.55);
color: #000000;
}
.homeMain_heade .ant-badge {
width: auto;
height: auto;
}
.homeMain_heade sup.ant-scroll-number {
height: 2rem;
min-height: 2rem;
width: 2rem;
min-width: 2rem;
padding: 0;
}
.homeMain_heade sup.ant-scroll-number .ant-scroll-number-only {
width: 100%;
height: 100%;
font-size: 1.2rem;
display: flex;
align-items: center;
justify-content: center;
}
.homeMain_heade p.ant-scroll-number-only-unit {
line-height: 2rem;
height: 100%;
}
.modal_title_text {
font-size: var(--aida-fsize2);
font-weight: 900;
@@ -1216,6 +1269,13 @@ li {
font-weight: 400;
color: rgba(0, 0, 0, 0.45);
}
.modal_title_text .modal_title_text_intro a {
color: #000;
font-weight: 900;
}
.modal_title_text .modal_title_text_intro a:hover {
text-decoration: underline;
}
.modal_title_text .modal_title_text_assistant {
font-size: var(--aida-fsize1-6);
font-weight: 400;

3796
src/assets/style/style.less
View File

File diff suppressed because it is too large Load Diff

197
src/component/Administrator/questionnaire.vue Normal file
View File

@@ -0,0 +1,197 @@
<template>
<div class="admin_page">
<div class="admin_table_search">
<div class="admin_state">
<div class="admin_state_item">
</div>
</div>
</div>
<div class="admin_table_content" ref="questionnaireTable">
<a-table
:columns="columns"
:data-source="dataList"
:scroll="{ y: historyTableHeight}"
@change="changePage"
@resizeColumn="handleResizeColumn"
:pagination="{
showSizeChanger: true,
current: currentPage,
pageSize: pageSize,
total: total,
showQuickJumper: true,
bordered: false,
}"
>
<template
#bodyCell="{ column, text, record, index }"
>
<div v-if="column?.Operations">
<div class="operate_list" v-if="column?.Operations">
<div class="operate_item" @click="setDetail(record)">Details</div>
</div>
</div>
</template>
</a-table>
</div>
<a-modal
class="generalModelOperate"
v-model:visible="isFeedbackShow"
:footer="null"
width="55%"
:maskClosable="false"
:centered="true"
:keyboard="false"
:closable="false"
:mask="false"
>
<div class="generalModelOperate_closeIcon" @click.stop="closeModal()">
<i class="fi fi-rr-cross-small"></i>
</div>
<feedbackSurveyVue ref="feedbackSurveyVue"></feedbackSurveyVue>
</a-modal>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, createVNode,toRefs, computed,reactive, onMounted, nextTick } from "vue";
import { Https } from "@/tool/https";
import type { TableColumnsType } from 'ant-design-vue';
import feedbackSurveyVue from "@/views/feedbackSurvey.vue";
export default defineComponent({
components: {feedbackSurveyVue},
setup() {
const columns: any = ref([
{
title: 'User Name',
align: "center",
ellipsis: true,
width: 50,
dataIndex: "userName",
key: "userName",
},
{
title: 'Age',
align: "center",
width: 50,
dataIndex: "age",
key: "age",
},
{
title: 'Country',
align: "center",
ellipsis: true,
width: 50,
dataIndex: "country",
key: "country",
},
{
title: 'Email',
align: "center",
ellipsis: true,
width: 50,
dataIndex: "email",
key: "email",
},
{
title: 'Is Subscribe',
align: "center",
width: 50,
dataIndex: "isSubscribe",
key: "isSubscribe",
},
{
title: 'Occupation',
align: "center",
ellipsis: true,
width: 50,
//
dataIndex: "occupation",
key: "occupation",
},{
title: 'Operations',
key: 'operation',
align:'center',
fixed: 'right',
width: 50,
// slots:{customRender:'action'}
Operations:true,
},
]
);
let dataList: any = ref([]);
let tabelData = reactive({
currentPage: 1,
pageSize: 10,
total: 0,
historyTableHeight: 0,
isFeedbackShow:false,
})
let getQuestionnaireList =async ()=>{
return new Promise((resolve, reject) => {
Https.axiosGet(Https.httpUrls.getAllQuestionnaire).then((res:any)=>{
if(res){
dataList.value = res
console.log(dataList);
// console.log(allEchartsList.value);
resolve('')
}
})
})
}
let questionnaireTable:any = ref()
let feedbackSurveyVue = ref()
let changePage = (e:any)=>{
tabelData.currentPage = e.current;
tabelData.pageSize = e.pageSize;
}
let setDetail = (data:any)=>{
tabelData.isFeedbackShow = true
nextTick().then(()=>{
feedbackSurveyVue.value.initData(data)
})
}
let closeModal = ()=>{
tabelData.isFeedbackShow = false
}
onMounted(async () => {
await getQuestionnaireList()
tabelData.historyTableHeight = questionnaireTable.value.clientHeight - 200;
});
return {
columns,
dataList,
...toRefs(tabelData),
handleResizeColumn: (w:any, col:any) => {
col.width = w;
},
questionnaireTable,
feedbackSurveyVue,
changePage,
setDetail,
closeModal,
};
},
data() {
return {
};
},
mounted() {
},
methods: {},
});
</script>
<style lang="less">
.generalModelOperate{
// .ant-modal-body{
// height: calc(65rem*1.2);
// display: flex;
// overflow-y: auto;
// flex-direction: column;
// }
}
</style>

90
src/router/index.ts
View File

@@ -2,18 +2,17 @@ import { createRouter, createWebHistory, RouteRecordRaw, createWebHashHistory }
import { defineAsyncComponent } from 'vue'
import store from "@/store"
import { getCookie, setCookie } from "@/tool/cookie";
const _import = (path: string) => defineAsyncComponent(() => import(`../views/${path}.vue`));
const _import_component = (path : string) => defineAsyncComponent(() => import(`../component/${path}`));
const _import_custom = (path : string) => defineAsyncComponent(() => import(`../views/${path}`));
const _import = (path: string) => () => import(`../views/${path}.vue`);
const _import_component = (path : string) => () => import(`../component/${path}`);
const _import_custom = (path : string) => () => import(`../views/${path}`);
// defineAsyncComponent(import(`../views/${path}.vue`))
const routes: Array<RouteRecordRaw> = [
{
path: "/",
// redirect重定向
// redirect: "/login"
redirect: "/Square"
// redirect: "/upgrade"
name: "HomeRecommend",
component: _import('HomeRecommend'),
},
{
path: '/login',
@@ -39,18 +38,16 @@ const routes: Array<RouteRecordRaw> = [
path: '/home',
name: 'home',
component: _import('HomeMain'),
meta:{keepAlive:true},
children:[
{
path: "",
name:'""',
redirect: "home/homePage"
name:'HomeChil',
redirect: "/home/homePage"
},
{
path:'homePage',
name:'homePage',
component: _import_custom('HomeView/HomeView.vue'),
meta:{keepAlive:true},
},{
path:'library',
name:'library',
@@ -63,7 +60,41 @@ const routes: Array<RouteRecordRaw> = [
path:'works',
name:'works',
component: _import_custom('HomeView/Works.vue'),
},{
path:'events',
name:'events',
component: _import_custom('HomeView/Events.vue'),
},{
path:'eventsDetail',
name:'eventsDetail',
component: _import_component('Events/eventsDetail.vue'),
}
]
},
{
path: '/Square',
name: "HomeRecommend",
component: _import('HomeRecommend'),
children:[
{
path: "",
name:'SquareChil',
redirect: "/Square/works"
},
{
path:'works',
name:'SquareWorks',
component: _import_custom('HomeView/Works.vue'),
},{
path:'events',
name:'SquareEvents',
component: _import_custom('HomeView/Events.vue'),
},{
path:'eventsDetail',
name:'SquareEventsDetail',
component: _import_component('Events/eventsDetail.vue'),
}
]
},
{
@@ -86,6 +117,11 @@ const routes: Array<RouteRecordRaw> = [
name: 'administrator',
component: _import('Administrator'),
children:[
{
path: "",
name:'adminChil',
redirect: "/administrator/allUser"
},
{
path:'allUser',
name:'allUser',
@@ -100,6 +136,10 @@ const routes: Array<RouteRecordRaw> = [
path:'trialApproval',
name:'trialApproval',
component: _import_component('Administrator/trialApproval.vue'),
},{
path:'questionnaire',
name:'questionnaire',
component: _import_component('Administrator/questionnaire.vue'),
},
]
},
@@ -183,7 +223,9 @@ router.beforeEach((to, from, next) => {
let isMurmur = JSON.parse(getIsMurmur)
let routeList = ['/testClickData','/trialApproval']//指定页面需要指定id才能进入
let userIdList = [88,6,46,31,73,83,87,4]
let isSystemUserRouteList = ['/login','/']//指定页面
let isSystemUserRouteList = ['/login','/Square']//游客用户只能进入这两个页面
let upgradeList = ['/feedbackSurvey','/feedbackSurveyCN']//指定页面系统维护也可以访问
let systemUser = state.UserHabit.systemUser
const routeExists = router.getRoutes().some(({ name }) =>{
@@ -193,25 +235,35 @@ router.beforeEach((to, from, next) => {
return false
}
});
if(systemUser.value == 0){
if(isSystemUserRouteList.indexOf(to.path) > -1){
if(upgradeList.indexOf(to.path) > -1){//指定页面任何用户都可以进入
next();
return
}
if(systemUser.value == 0){//游客用户只能进入这两个页面
let sSystemUser = false
for (let index = 0; index < isSystemUserRouteList.length; index++) {
if(to.path.indexOf(isSystemUserRouteList[index]) > -1){
sSystemUser = true
break
}
}
if(sSystemUser){
next();
}else{
next('/');
next('/Square');
}
return
}
if (routeExists) {
if (routeExists) {//检测档期那页面是否存在
if (isMurmur && murmurStr && token) {
const toName = to.name === 'login';
if (toName) {
next({ name: '/homePage' });
next({ name: '/home' });//机房用户
} else {
next();
}
} else {
if (routeList.indexOf(to.path) > -1 ) {
if (routeList.indexOf(to.path) > -1 ) {//指定也买你必须指定用户可以进入
if(userIdList.indexOf(userInfo.userId) > -1){
next();
}else{

17
src/tool/https.js
View File

@@ -90,7 +90,17 @@ axios.interceptors.response.use((res) =>{
if(error?.response?.status === 401 && router.currentRoute._value.name != 'setIdentification'){//如果是记录浏览器页面就不跳转login
if(!isLoginTime){
isLoginTime = true
router.replace('/')
let isSystemUserRouteList = ['/Square']//如果是这两个页面就无需跳转未登录页
let sSystemUser = false
for (let index = 0; index < isSystemUserRouteList.length; index++) {
if(router.currentRoute.value.path.indexOf(isSystemUserRouteList[index]) > -1){
sSystemUser = true
break
}
}
if(!sSystemUser){
router.replace('/')
}
message.warning('Please login and try again~')
clonAllCookie()
store.commit('clearSystemUser')
@@ -223,10 +233,13 @@ export const Https = {
trialOrderApproval:`/api/account/trialOrderApproval`,//通过审批
trialOrderRefuse:`/api/account/trialOrderRefuse`,//拒绝审批
//管理员接口
//查询所有试用用户
inquiryGetTrial:`/api/inquiry/getTrial`,//拒绝审批
//查询某个时间内design点击次数
getDesignStatistic:`/api/inquiry/getDesignStatistic`,//拒绝审批
getAllQuestionnaire:`/api/inquiry/getAllQuestionnaire`,//拒绝审批
getTasksList:`/api/tasks/getList`,//获取w为执行完的所有任务
getTasksHistory:`/api/tasks/getAllTask`,//获取所有任务列表
@@ -262,6 +275,8 @@ export const Https = {
exportSave:`/api/history/exportSave`,//保存画布
exportSearch:`/api/history/exportSearch`,//保存画布
//活动
activity:`/api/account/activity`,
//调查问卷

101
src/views/Administrator.vue
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{

144
src/views/feedbackSurvey.vue
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%;
}

3
src/views/feedbackSurveyCN.vue
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%);