rt-sim-training-client/src/views/orderauthor/commodity/index.vue

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

<script>
import { getCommodityList, delCommodity, setCommodityStatus } from '@/api/management/goods';
import { UrlConfig } from '@/router/index';
import { listPublishMap } from '@/api/jmap/map';

export default {
	name: 'Dictionary',
	data() {
		return {
			productTypeList: [],
			EffectiveTypeList: [],
			pagerConfig: {
				pageSize: 'pageSize',
				pageIndex: 'pageNum'
			},
			queryForm: {
				labelWidth: '100px',
				reset: true,
				queryObject: {
					name: {
						type: 'text',
						label: this.$t('orderAuthor.name')
					},
					productType: {
						type: 'select',
						label: this.$t('orderAuthor.productType'),
						config: {
							data: []
						}
					},
					mapId: {
						type: 'select',
						label: this.$t('orderAuthor.map'),
						config: {
							data: []
						}
					},
					status: {
						type: 'select',
						label: this.$t('orderAuthor.state'),
						config: {
							data: this.$ConstSelect.Status
						}
					}
				}
			},
			queryList: {
				query: getCommodityList,
				selectCheckShow: false,
				indexShow: true,
				columns: [
					{
						title: this.$t('orderAuthor.commodityName'),
						prop: 'name'
					},
					{
						title: this.$t('orderAuthor.productType'),
						prop: 'productType',
						type: 'tag',
						columnValue: (row) => { return this.$convertField(row.productType, this.productTypeList, ['value', 'label']); },
						tagType: (row) => { return 'success'; }
					},
					{
						title: this.$t('orderAuthor.mapName'),
						prop: 'mapName'
					},
					{
						title: this.$t('orderAuthor.productName'),
						prop: 'prdName'
					},
					{
						title: this.$t('orderAuthor.courseName'),
						prop: 'lessonName'
					},
					{
						title: this.$t('orderAuthor.price'),
						prop: 'price'
					},
					{
						title: this.$t('orderAuthor.state'),
						prop: 'status',
						type: 'tag',
						columnValue: (row) => { return this.$convertField(row.status, this.EffectiveTypeList, ['value', 'label']); },
						tagType: (row) => {
							switch (row.status) {
							case '1': return 'success';
							default: return 'danger';
							}
						}
					},
					{
						title: this.$t('orderAuthor.describtion'),
						prop: 'remarks'
					},
					{
						title: this.$t('orderAuthor.creationTime'),
						prop: 'createTime'
					},
					{
						type: 'button',
						title: this.$t('global.operate'),
						width: this.$i18n.locale == 'en' ? '300': '250',
						buttons: [
							{
								name: this.$t('global.edit'),
								type: 'primary',
								handleClick: this.handleEdit
							},
							{
								name: this.$t('orderAuthor.setupFailure'),
								handleClick: this.handleEfficacy,
								type: 'warning',
								showControl: (row) => {
									return row.status == '1';
								}
							},
							{
								name: this.$t('orderAuthor.setupEffective'),
								type: 'primary',
								handleClick: this.handleEfficacy,
								showControl: (row) => {
									return row.status == '0';
								}
							},
							{
								name: this.$t('global.delete'),
								type: 'danger',
								handleClick: this.handleDelete
							}
						]
					}
				],
				actions: [
					{ text: this.$t('global.add'), handler: this.handleAdd }
				]
			},

			currentModel: {}
		};
	},
	mounted() {
		this.loadInitData();
	},
	methods: {
		async loadInitData() {
			this.$Dictionary.effectiveType().then(list => {
				this.$convertList(list, this.EffectiveTypeList, elem => {
					return true;
				});
			});
			// 产品类型
			this.$Dictionary.productType().then(list => {
				list.forEach(elem => {
					this.queryForm.queryObject.productType.config.data.push({ value: elem.code, label: elem.name });
				});
				this.$convertList(list, this.productTypeList, elem => {
					return true;
				});
			});
			try {
				// 获取地图
				const res = await listPublishMap();
				res.data.forEach(elem => {
					this.queryForm.queryObject.mapId.config.data.push({ value: elem.id, label: elem.name });
				});
			} catch (error) {
				console.error(error, '获取发布地图');
			}
		},
		handleEdit(index, row) {
			this.$router.push({ path: `${UrlConfig.orderauthor.commodityDraft}/edit/${row.id}` });
		},

		handleAdd() {
			this.$router.push({ path: `${UrlConfig.orderauthor.commodityDraft}/add/0` });
		},
		// 设置失效
		handleEfficacy(index, row) {
			this.$confirm(this.$t('tip.updateProductTip'), this.$t('global.tips'), {
				confirmButtonText: this.$t('global.confirm'),
				cancelButtonText: this.$t('global.cancel'),
				type: 'warning'
			}).then(() => {
				setCommodityStatus(row.id).then(res => {
					this.$message.success(this.$t('tip.operationSuccessfully'));
					this.reloadTable();
				}).catch(() => {
					this.$messageBox(this.$t('tip.operationFailed'));
					this.reloadTable();
				});
			}).catch(() => { });
		},
		handleDelete(index, row) {
			this.$confirm(this.$t('tip.deleteProductTip'), this.$t('global.tips'), {
				confirmButtonText: this.$t('global.confirm'),
				cancelButtonText: this.$t('global.cancel'),
				type: 'warning'
			}).then(() => {
				delCommodity(row.id).then(response => {
					this.$message.success(this.$t('tip.successfullyDelete'));
					this.reloadTable();
				}).catch(() => {
					this.reloadTable();
					this.$messageBox(this.$t('tip.failDelete'));
				});
			}).catch(() => { });
		},

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