rt-sim-training-client/src/views/publish/publishLesson/index.vue

<template>
  <div>
    <QueryListPage ref="queryListPage" :pager-config="pagerConfig" :query-form="queryForm" :query-list="queryList" />
  </div>
</template>

<script>
import { publishLessonList, delPublishLesson, putLessonOnLine, putLessonOffLine } from '@/api/jmap/lesson';
import { getSkinStyleList } from '@/api/management/mapskin';
import localStore from 'storejs';

export default {
	name: 'PublishMap',
	data() {
		return {
			cityList: [],
			skinStyleList: [],
			pagerConfig: {
				pageSize: 'pageSize',
				pageIndex: 'pageNum'
			},
			queryForm: {
				labelWidth: '80px',
				reset: true,
				queryObject: {
					name: {
						type: 'text',
						label: '名称'
					},
					cityCode: {
						type: 'select',
						label: '所属城市',
						config: {
							data: []
						}
					}
				}

			},
			queryList: {
				query: publishLessonList,
				selectCheckShow: false,
				indexShow: true,
				columns: [
					{
						title: '名称',
						prop: 'name'
					},
					{
						title: '所属城市',
						prop: 'cityCode',
						type: 'tag',
						columnValue: (row) => { return this.convertField(row.cityCode, this.cityList, ['code', 'name']); },
						tagType: (row) => { return 'success'; }
					},
					{
						title: '课程简介',
						prop: 'remarks'
					},
					{
						type: 'button',
						title: '操作',
						width: '250',
						buttons: [
							{
								name: '上架',
								handleClick: this.handlePutaway,
								type: '',
								showControl: (row) => { return row.status != 1; }
							},
							{
								name: '下架',
								handleClick: this.handleSoldOut,
								type: 'warning',
								showControl: (row) => { return row.status == 1; }
							},
							{
								name: '删除',
								handleClick: this.handleDelete,
								type: 'danger',
								showControl: () => { return this.isShow != -1; }
							}
						]
					}
				]
			},

			currentModel: {}
		};
	},
	computed: {
		isShow() {
			return this.$store.getters['roles'].indexOf('05');
		}
	},
	created() {
		this.loadInitData();
	},
	methods: {
		loadInitData() {
			this.cityList = [];
			this.$Dictionary.cityType().then(list => {
				this.cityList = list;
				this.cityList.forEach(elem => {
					this.queryForm.queryObject.cityCode.config.data.push({ value: elem.code, label: elem.name });
				});
			}).catch(() => {
				this.$messageBox('加载城市列表失败');
			});

			this.skinStyleList = [];
			getSkinStyleList().then(response => {
				this.skinStyleList = response.data;
			});
		},
		convertField(fieldValue, enumList, converFormat) {
			if (converFormat && converFormat.length >= 2) {
				const value = converFormat[0];
				const label = converFormat[1];
				for (let i = 0; i < enumList.length; i++) {
					if ('' + fieldValue === '' + enumList[i][value]) {
						return enumList[i][label];
					}
				}
			}
		},
		// 编辑
		handleEdit(index, row) {
		},

		// 删除
		handleDelete(index, row) {
			this.$confirm('此操作将删除该类型, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				delPublishLesson(row.id).then(response => {
					this.$message.success('删除成功');
					this.reloadTable();
					localStore.remove('mapId');
				}).catch(() => {
					this.reloadTable();
					this.$messageBox('删除失败');
				});
			}).catch(() => { });
		},

		handlePutaway(index, row) {
			this.$confirm('此操作将上架此实训, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				putLessonOnLine(row.id).then(response => {
					this.$message.success('操作成功');
					this.reloadTable();
				}).catch(() => {
					this.reloadTable();
					this.$messageBox('操作失败');
				});
			}).catch(() => { });
		},

		handleSoldOut(index, row) {
			this.$confirm('此操作将下架此实训, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				putLessonOffLine(row.id).then(response => {
					this.$message.success('操作成功');
					this.reloadTable();
				}).catch(() => {
					this.reloadTable();
					this.$messageBox('操作失败');
				});
			}).catch(() => { });
		},

		reloadTable() {
			this.queryList.reload();
		}
	}
};
</script>