dc3-web/src/views/things/Things.vue

<template>
    <el-col :span="24">
        <base-card>
            <avue-crud :option="listOption"
                       :data="listData"
                       :page="page"
                       :table-loading="loading"
                       ref="crud"
                       v-model="listForm"
                       @on-load="list"
                       @row-save="listAdd"
                       @row-del="listDelete"
                       @row-update="listUpdate"
                       @search-reset="searchReset"
                       @search-change="searchChange"
                       @refresh-change="refreshChange"
                       @size-change="sizeChange"
                       @current-change="currentChange"
            >
            </avue-crud>
        </base-card>
    </el-col>
</template>

<script>
    import {deviceApi, groupApi, profileApi} from '@/api/manager'
    import {successMessage} from "@/util/util";

    export default {
        data() {
            return {
                query: {},
                listForm: {},
                listData: [],
                listOption: {
                    tip: false,
                    index: true,
                    stripe: true,
                    border: true,
                    viewBtn: true,
                    selection: true,
                    height: 664,
                    align: 'center',
                    column: [
                        {
                            label: '设备',
                            prop: 'name',
                            width: 220,
                            span: 24,
                            search: true,
                            searchSpan: 5,
                            rules: [
                                {
                                    required: true,
                                    message: '请输入 设备名称',
                                    trigger: 'blur'
                                }, {
                                    min: 2,
                                    max: 32,
                                    message: '请输入 2~32 位字长的设备名称',
                                    trigger: 'blur'
                                }, {
                                    pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/,
                                    message: '请输入 正确格式的设备名称，例：\'name01\' 或 \'名称01\''
                                }
                            ]
                        }, {
                            label: '编码',
                            prop: 'code',
                            width: 280,
                            search: true,
                            searchSpan: 5,
                            disabled: true
                        }, {
                            label: '分组',
                            prop: 'groupId',
                            width: 150,
                            search: true,
                            searchSpan: 5,
                            type: 'select',
                            filterable: true,
                            searchFilterable: true,
                            dicData: [],
                            props: {
                                label: 'name',
                                value: 'id'
                            },
                            rules: [{
                                required: true,
                                message: '请选择所属分组',
                                trigger: 'click'
                            }]
                        }, {
                            label: '模板',
                            prop: 'profileId',
                            width: 180,
                            search: true,
                            searchSpan: 5,
                            type: 'select',
                            filterable: true,
                            searchFilterable: true,
                            dicData: [],
                            props: {
                                label: 'name',
                                value: 'id'
                            },
                            rules: [{
                                required: true,
                                message: '请选择使用模板',
                                trigger: 'click'
                            }]
                        }, {
                            label: '状态',
                            prop: 'status',
                            width: 100,
                            search: true,
                            searchSpan: 4,
                            disabled: true,
                            type: 'select',
                            searchFilterable: true,
                            value: 2,
                            dicData: [
                                {
                                    label: '离线',
                                    value: 0
                                }, {
                                    label: '在线',
                                    value: 1
                                }, {
                                    label: '维护',
                                    value: 2
                                }, {
                                    label: '故障',
                                    value: 3
                                }, {
                                    label: '失效',
                                    value: 4
                                }
                            ]
                        }, {
                            label: '描述',
                            prop: 'description',
                            width: 220,
                            span: 24,
                            type: 'textarea',
                            rules: [
                                {
                                    max: 380,
                                    message: '最多输入380个字符',
                                    trigger: 'blur'
                                }
                            ]
                        }, {
                            label: '创建日期',
                            prop: 'createTime',
                            width: 180,
                            span: 12,
                            disabled: true,
                            type: 'date',
                            format: 'yyyy-MM-dd HH:mm:ss',
                            valueFormat: 'yyyy-MM-dd HH:mm:ss'
                        }, {
                            label: '修改日期',
                            prop: 'updateTime',
                            width: 180,
                            span: 12,
                            disabled: true,
                            type: 'date',
                            format: 'yyyy-MM-dd HH:mm:ss',
                            valueFormat: 'yyyy-MM-dd HH:mm:ss'
                        }
                    ]
                },
                selectionList: [],
                loading: true,
                page: {
                    total: 0,
                    pageSize: 20,
                    currentPage: 1
                }
            }
        },
        created() {
            this.group();
            this.profile();
        },
        methods:
            {
                list(page) {
                    this.loading = true;
                    deviceApi.list(Object.assign({
                        page: {
                            current: page.currentPage,
                            size: page.pageSize
                        }
                    }, this.query)).then(res => {
                        const data = res.data;
                        this.page.total = data.total;
                        this.listData = data.records;
                    }).finally(() => {
                        this.loading = false;
                    });
                },
                group() {
                    groupApi.dictionary().then(res => {
                        this.listOption.column[this.$refs.crud.findColumnIndex('groupId')].dicData = res.data;
                    }).catch((e) => {
                        console.log(e);
                    });
                },
                profile() {
                    profileApi.dictionary().then(res => {
                        this.listOption.column[this.$refs.crud.findColumnIndex('profileId')].dicData = res.data;
                    }).catch((e) => {
                        console.log(e);
                    });
                },
                listAdd(row, done, loading) {
                    deviceApi.add(row).then(() => {
                        loading();
                        this.list(this.page);
                        successMessage();
                    }).finally(() => {
                        done();
                    });
                },
                listDelete(row) {
                    this.$confirm('是否删除该条设备？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        return deviceApi.delete(row.id);
                    }).then(() => {
                        this.list(this.page);
                        successMessage();
                    });
                },
                listUpdate(row, index, done, loading) {
                    deviceApi.update(row).then(() => {
                        loading();
                        this.list(this.page);
                        successMessage();
                    }).finally(() => {
                        done();
                    });
                },
                refreshChange() {
                    this.list(this.page);
                },
                currentChange(page) {
                    this.page.currentPage = page;
                },
                sizeChange(pageSize) {
                    this.page.pageSize = pageSize;
                },
                searchChange(params, done) {
                    this.query = params;
                    this.list(this.page);
                    done();
                },
                searchReset() {
                    this.query = {};
                    this.list(this.page);
                }
            }
    }
</script>

<style lang="scss">
</style>