xiaoshan/application/admin/view/vue_demo/index.html

{extend name="vue_layout/main" /}
{block name="styles"}
<style>
    .Va-container-content {
        height: 72vw;
    }

    .icons-type-list {
        width: 350px;
        overflow: hidden;
        padding: 0;
    }

    .icons-type-one {
        border-radius: unset !important;
        border: 1px solid #ccc;
        padding: 10px 10px;
        margin: 2px;
    }

    .icons-type-list .icons-type-one.is-checked {
        border: 1px solid var(--buttonHoverColors);
    }
</style>
{/block}

<!-- 主体 -->
{block name="content"}
<div class="form-container" style="overflow: hidden">
    <div class="form-container-header">
        <el-form :inline="true" :model="tables.search" size="small">
            <el-form-item>
                <el-input v-model="tables.search.deviceCode" placeholder="按设备号搜索" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-input v-model="tables.search.deviceType" placeholder="按设备型号搜索" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-input v-model="tables.search.watchName" placeholder="按设备名称搜索" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-select v-model="tables.search.activationStatus" placeholder="-- 按状态搜索 --" clearable>
                    <el-option label="状态(全部)" value=""></el-option>
                    <el-option key="0" label="未激活" value="0"></el-option>
                    <el-option key="1" label="已激活" value="1"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" size="small" @click="tablesSearchEvent"><i class="fa fa-search"></i> 搜 索
                </el-button>
                <el-button size="small" @click="tablesResetsEvent"><i class="fa fa-refresh"></i> 重 置</el-button>
            </el-form-item>

        </el-form>
    </div>
    <div class="form-container-main inline-tables no-pic" v-loading="tables.options.loading">
        <el-table
                :data="tables.data"
                border
                :stripe="true"
                @selection-change="tablesSelectChange"
                @sort-change="tablesPaginationSortChange"
                @cell-click="tablesCellMoveEvent"
                tooltip-effect="dark"
                ref="formContainerTables"
                row-key="id">
            <el-table-column prop="id" label="#ID" align="center" width="60"></el-table-column>
            <el-table-column prop="avatar" label="头像" align="center" width="80">
                <template slot-scope="scope">
                    <va-image :src="scope.row.avatar" :key="scope.row.avatar" class="tables-image"></va-image>
                </template>
            </el-table-column>
            <el-table-column prop="nickname" label="昵称" align="center" width="100"></el-table-column>
            <el-table-column prop="mobile" label="手机号" align="center" width="100"></el-table-column>

            <el-table-column prop="gender" label="性别" align="center" width="60">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.gender == 0" size="mini" type="danger" effect="plain">女</el-tag>
                    <el-tag v-if="scope.row.gender == 1" size="mini" type="success" effect="plain">男</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="birthday_type" label="生日类型" align="center" width="80">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.birthday_type == 1" size="mini" type="danger" effect="plain">阴历</el-tag>
                    <el-tag v-if="scope.row.birthday_type == 2" size="mini" type="success" effect="plain">阳历</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="birthday" label="生日" align="center"></el-table-column>

            <el-table-column prop="watch_id" label="手表用户ID" align="center"></el-table-column>
            <el-table-column prop="watch_no" label="手表编号" align="center"></el-table-column>
            <el-table-column prop="watch_activation_no" label="手表激活码" align="center"></el-table-column>
            <el-table-column prop="watch_bind_time" label="手表绑定时间" align="center" :formatter="formatTableDate" width="160" sortable></el-table-column>
            <el-table-column prop="watch_end_time" label="手表到期时间" align="center" :formatter="formatTableDate" width="160" sortable></el-table-column>

            <el-table-column prop="urgent" label="紧急联系人姓名" align="center"></el-table-column>
            <el-table-column prop="urgent_phone" label="紧急联系人手机号" align="center"></el-table-column>
            <el-table-column prop="urgent_relation" label="紧急联系人关系" align="center"></el-table-column>
            <el-table-column prop="province" label="省" align="center"></el-table-column>
            <el-table-column prop="city" label="市" align="center"></el-table-column>
            <el-table-column prop="district" label="区" align="center"></el-table-column>
            <el-table-column prop="area" label="地址详情" align="center"></el-table-column>
            <el-table-column prop="options" label="操作" align="left" fixed="right" width="160">
                <template slot-scope="scope">
                    <el-button size="mini" warning type="text" @click="tablesRowsUpdate(scope.row)" v-if="permissions.update">
                        <i :class="permissions.update.icon"></i> {{permissions.update.name}}
                    </el-button>
                    <!-- 更多操作 -->
                    <el-dropdown size="small" style="margin-left: 10px">
                        <el-button size="mini" primary type="text"><i class="fa fa-reorder "></i> 更多操作<i
                                class="el-icon-arrow-down el-icon--right"></i></el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item v-if="permissions.status">
                                <el-button size="mini" warning type="text"
                                           @click="tablesRowsStatus(scope.row,{id:scope.row.id})"
                                           v-if="permissions.status" :disabled="scope.row.is_system==1">
                                    <i :class="permissions.status.icon"></i>
                                    {{tables.status.maps[scope.row.status]}}
                                </el-button>
                            </el-dropdown-item>

                            <el-dropdown-item v-if="permissions.remove">
                                <el-button size="mini" danger type="text" @click="tablesRowsRemove(scope.row)"
                                           v-if="permissions.remove" :disabled="scope.row.is_system==1">
                                    <i :class="permissions.remove.icon"></i> {{permissions.remove.name}}
                                </el-button>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <!-- 更多操作 End. -->
                </template>
            </el-table-column>
        </el-table>
        <div class="Va-container-tables-pagination-box"><el-pagination
                class="Va-container-tables-pagination"
                @size-change="tablesPaginationSizeChange"
                @current-change="tablesPaginationCurrentChange"
                :current-page.sync="tables.pagination.page"
                :page-sizes="tables.pagination.sizes"
                :page-size="tables.pagination.size"
                :layout="tables.pagination.layouts"
                :total="tables.pagination.total"
                data-7512a93d>
        </el-pagination></div>
    </div>
</div>
{/block}

<!-- vue -->
{block name="scripts"}
<script>
    var $App = new Vue({
        el: '#app',
        mixins: [$Config, $Layouts, $Tables, $DialogForms],
        data: {
            menuRule:'vue_demo',
            component: {status: false},
            config: {permissions: true},
            tables: {
                remove: {
                    url: 'remove', msg: '确认删除当前数据吗？', field: 'id'
                },
                status: {
                    url: 'status', field: 'status'
                },
                sort: {
                    url: 'rank', item: 'sort', field: 'id'
                },
                url: 'vue_demo',
                search: {},
                pagination: {
                    layout: ''
                },
                prop: 'id', orderBy: 'desc'
            },

        },
        methods: {
            tablesRowsInsert() {
                var that = this;
                that.create.action = 'insert';
                that.create.model = {name: '', sort: 255};
                that.dialogFormsOpens('create');
            },

            tablesRowsUpdate(rows) {
                var that = this;
                that.create.action = 'update';
                that.create.model = {
                    id: rows.id,
                    name: rows.name,
                    sort: rows.sort,
                };
                that.dialogFormsOpens('create');
            },

            tablesResetsEvent() {
                var that = this;
                that.tables.search = {keyword: '', status: ''};
                that.tablesGetTableList();
            },
        },
        created() {
        },
        mounted() {
        }
    })
</script>
{/block}