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

<template>
    <div>
        <QueryListPage ref="queryListPage" :pager-config="pagerConfig" :query-form="queryForm" :query-list="queryList">
        </QueryListPage>
    </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: '80px',
                    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: '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 {
                    // 获取地图
                    let 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('orderAuthor.updateProductTip'), this.$t('tip.hint'), {
                    confirmButtonText: this.$t('tip.confirm'),
                    cancelButtonText: this.$t('tip.cancel'),
                    type: 'warning'
                }).then(() => {
                    setCommodityStatus(row.id).then(res => {
                        this.$message.success(this.$t('tip.operationSuccessfully'));
                        this.reloadTable()
                    }).catch(err => {
                        this.$messageBox(this.$t('tip.operationFailed'));
                        this.reloadTable()
                    })
                }).catch(() => { })
            },
            handleDelete(index, row) {
                this.$confirm(this.$t('orderAuthor.deleteProductTip'), this.$t('tip.hint'), {
                    confirmButtonText: this.$t('tip.confirm'),
                    cancelButtonText: this.$t('tip.cancel'),
                    type: 'warning'
                }).then(() => {
                    delCommodity(row.id).then(response => {
                        this.$message.success(this.$t('tip.successfullyDelete'));
                        this.reloadTable()
                    }).catch(error => {
                        this.reloadTable();
                        this.$messageBox(this.$t('tip.failDelete'))
                    })
                }).catch(() => { })
            },

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