aida_front/src/component/Administrator/questionnaire.vue

<template>
    <div class="admin_page" ref="adminPage">
        <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="generalModel"
            v-model:visible="isFeedbackShow" 
            :footer="null" 
			:get-container="() => $refs.adminPage"
            width="55%"
            :maskClosable="false"
            :centered="true"
			:keyboard="false"
			:closable="false"
			:mask="true"
        >
			<div class="generalModel_btn">
				<div class="generalModel_closeIcon" @click.stop="closeModal()">
					<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
						<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
						<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
						<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
					</svg>

				</div>
			</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(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" scoped>
.generalModelOperate{
	// .ant-modal-body{
	// 	height: calc(65rem*1.2);
	// 	display: flex;
	// 	overflow-y: auto;
	// 	flex-direction: column;
	// }
}
</style>