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

src/component/Administrator/questionnaire.vue

@@ -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>