xw_admin/src/views/personalCenter/components/feedback.vue

<template>
	<el-container>
		<el-header class="serveTitle">
			<div class="serveView">
				<span v-for="(item,index) in title" :key="index" @click="linkDetail(item)">
					<span class="name">{{item.name}}</span>
					<span class="solid" v-if="index+1 < title.length">/</span>
				</span>
			</div>
		</el-header>
		<el-main class="serveMain" v-if="routerText===1">
			<scTable v-loading="tableLoading" element-loading-text="加载中..." height="100%" ref="table" :data="list.data" :size="size" hideDo>
				<el-table-column type="index" label="序号"></el-table-column>
				<template v-for="(item,index) in list.column" :key="index">
					<el-table-column :label="item.label" :prop="item.prop" :width="item.width" show-overflow-tooltip>
						<template #default="scope">
							<span v-if="item.prop === 'type'">
								<span v-for="(em,ind) in setMap.typeList" :key="ind">
									<span v-if="em.value === scope.row[item.prop]">{{em.label}}</span>
								</span>
							</span>
							<span v-else-if="item.prop === 'attachment'">
								<span v-for="(em,ind) in scope.row[item.prop]" :key="ind">
									<el-image :src="em" preview-teleported :preview-src-list="[em]" style="width: 22px;height: 22px;margin: 0 4px;border-radius: 3px;"></el-image>
								</span>
							</span>
							<span v-else>{{scope.row[item.prop]}}</span>
						</template>
					</el-table-column>
				</template>
				<el-table-column label="操作" fixed="right" align="center" width="150">
					<template #default="scope">
						<el-button type="primary" link @click="table_show(scope.row, 'see')" :size="size">查看</el-button>
						<el-button type="danger" link @click="table_del(scope.row, 'delete')" :size="size">删除</el-button>
					</template>
				</el-table-column>
			</scTable>
		</el-main>
		<el-main class="serveMain" v-if="routerText===2">
			<feedbackDetail></feedbackDetail>
		</el-main>
	</el-container>
</template>

<script>
import feedbackDetail from "@/views/personalCenter/components/feedbackDetail";
export default {
	name: "feedback",
	components: {
		feedbackDetail
	},
	data(){
		return{
			title:[
				{name:"我的反馈",value:1},
			],
			routerText:1,

			size:"small",
			setMap:{
				typeList:[],
			},
			tableLoading:false,
			list:{
				column:[
					{label:'创建时间',prop:'created_at',width:160,show: true},
					{label:'机器序列号',prop:'serial_number',width:200,show: true},
					{label:'问题类型',prop:'type',width:180,show: true},
					{label:'购买时间',prop:'purchase_time',width:160,show: true},
					{label:'附件',prop:'attachment',width:120,show: true},
					{label:'提交账号',prop:'creator_name',width:160,show: true},
					{label:'备注',prop:'remark',show: true},
				],
				data:[]
			},

			routerParams:{}
		}
	},
	mounted() {
		this.getTypeList();
		this.getMyList();
	},
	methods:{
		async getTypeList() {
			const res = await this.$API.customer.serviceTypeList.post();
			if(res.code == 200){
				this.setMap.typeList = res.data;
			}
		},
		async getMyList() {
			this.tableLoading = true;
			const res = await this.$API.customer.orderMyList.post();
			this.tableLoading = false;
			if(res.code == 200){
				this.list.data = res.data.rows;
			}
		},
		linkDetail(item){
			this.routerText = item.value;
			const result = this.title.slice(0,this.title.findIndex(em=> em.value === item.value)+1);
			this.title = result;
		},
		table_show(row){
			this.routerParams = row;
			this.routerText = 2;
			const valueS = this.title.map(em=>em.value);
			if(valueS.indexOf(2) ===-1){
				this.title.push({name:"反馈详情",value:2})
			}
		},
		table_del(row){
			let params = {
				ids:[row.id]
			}
			this.$confirm(`确定删除序列号 ${row.serial_number} 吗？`, '提示', {
				type: 'warning'
			}).then(async () => {
				const res = await this.$API.customer.orderDelete.post(params);
				if(res.code == 200){
					this.$message.success("删除成功");
					await this.getMyList();
				}
			}).catch(()=>{})
		}
	}
}
</script>

<style scoped lang="scss">
	.serveView{
		.name{
			cursor: pointer;
		}
		.solid{
			margin: 0 6px;
			color: #888;
		}
	}
</style>