9 changed files with 692 additions and 537 deletions
-
1.eslintignore
-
30src/assets/styles/index.scss
-
74src/router/routers.js
-
171src/views/device/config.vue
-
149src/views/system/dept/index.vue
-
258src/views/system/menu/index.vue
-
108src/views/system/role/index.vue
-
124src/views/system/role/role.json
-
312src/views/system/user/index.vue
@ -0,0 +1,171 @@ |
|||||
|
<template> |
||||
|
<div class="app-container"> |
||||
|
<!-- 搜索栏 --> |
||||
|
<div class="head-container"> |
||||
|
<el-row type="flex"> |
||||
|
<el-col :span="20" class="col_flex"> |
||||
|
<div class="form_item"> |
||||
|
<span>设备ID</span> |
||||
|
<el-input v-model="query.blurry" clearable size="small" placeholder="请输入设备ID" style="width: 200px" class="filter-item" @keyup.enter.native="crud.toQuery" /> |
||||
|
</div> |
||||
|
<div class="form_item"> |
||||
|
<span>设备名称</span> |
||||
|
<el-input v-model="query.blurry" clearable size="small" placeholder="请输入设备名称" style="width: 200px" class="filter-item" @keyup.enter.native="crud.toQuery" /> |
||||
|
</div> |
||||
|
<rrOperation /> |
||||
|
</el-col> |
||||
|
<el-col class="page_add" :span="4"> |
||||
|
<el-button class="setting_btn" type="primary" icon="el-icon-setting">配置</el-button> |
||||
|
<el-button class="table_add" type="primary" icon="el-icon-delete" disabled>清空</el-button> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
<el-row :gutter="15"> |
||||
|
<el-col> |
||||
|
<el-card class="box-card" shadow="never"> |
||||
|
<el-table style="width: 100%;" :data="tableData"> |
||||
|
<el-table-column :selectable="checkboxT" type="selection" width="55" /> |
||||
|
<el-table-column prop="id" label="设备ID" align="center" /> |
||||
|
<el-table-column prop="account" label="设备账号" align="center" /> |
||||
|
<el-table-column prop="name" label="设备名称" align="center" /> |
||||
|
<el-table-column prop="orientation" label="设备方向" align="center" /> |
||||
|
<el-table-column prop="period" label="配置周期" align="center" width="300" /> |
||||
|
<el-table-column prop="cover" label="启动画面" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-image class="cover_img" :src="scope.row.cover" /> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="date" label="创建时间" align="center" width="200" /> |
||||
|
<el-table-column fixed="right" label="操作" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button type="primary" icon="el-icon-edit" @click="edit(scope.$index, scope.row)" /> |
||||
|
<el-button type="info" icon="el-icon-info" /> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<!--分页组件--> |
||||
|
<pagination /> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<!-- 编辑设备 --> |
||||
|
<div class="layer"> |
||||
|
<el-dialog title="配置" :close-on-click-modal="false" :visible.sync="addFromVisible" width="600px"> |
||||
|
<el-form ref="form" inline="true" :model="form" :rules="rules" label-width="100px"> |
||||
|
<el-form-item label="开机时间" prop="uptime"> |
||||
|
<span>设置时间：</span> |
||||
|
<el-radio-group v-model="form.time"> |
||||
|
<el-radio label="每天" /> |
||||
|
<el-radio label="每周" /> |
||||
|
</el-radio-group> |
||||
|
<!-- <el-form-item label="活动性质" prop="type"> |
||||
|
<el-checkbox-group v-model="ruleForm.type"> |
||||
|
<el-checkbox label="美食/餐厅线上活动" name="type" /> |
||||
|
<el-checkbox label="地推活动" name="type" /> |
||||
|
<el-checkbox label="线下主题活动" name="type" /> |
||||
|
<el-checkbox label="单纯品牌曝光" name="type" /> |
||||
|
</el-checkbox-group> |
||||
|
</el-form-item> --> |
||||
|
<el-checkbox-group v-model="form.week"> |
||||
|
<el-checkbox label="周一" name="week" /> |
||||
|
<el-checkbox label="周二" name="week" /> |
||||
|
<el-checkbox label="周三" name="week" /> |
||||
|
<el-checkbox label="周四" name="week" /> |
||||
|
<el-checkbox label="周五" name="week" /> |
||||
|
<el-checkbox label="周六" name="week" /> |
||||
|
<el-checkbox label="周日" name="week" /> |
||||
|
</el-checkbox-group> |
||||
|
</el-form-item> |
||||
|
<!-- el-form-item label="设备名称" prop="name"><el-input v-model="form.name" style="width: 200px" /></el-form-item> |
||||
|
<el-form-item label="设备方向" prop="orientation"> |
||||
|
<el-select v-model="form.orientation" size="small" class="filter-item" style="width: 200px"> |
||||
|
<el-option v-for="item in deviceData" :key="item.key" :label="item.name" :value="item.key" /> |
||||
|
</el-select> |
||||
|
</el-form-item> --> |
||||
|
</el-form> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button @click="addFromVisible = false">取 消</el-button> |
||||
|
<el-button type="primary" @click="submitForm('form')">确 定</el-button> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import crudUser from '@/api/system/user' |
||||
|
import CRUD, { presenter, header, form, crud } from '@crud/crud' |
||||
|
import rrOperation from '@crud/RR.operation' |
||||
|
import pagination from '@crud/Pagination' |
||||
|
const defaultForm = { |
||||
|
time: null, |
||||
|
week: [], |
||||
|
orientation: null |
||||
|
} |
||||
|
export default { |
||||
|
name: 'DeviceConfig', |
||||
|
components: { rrOperation, pagination }, |
||||
|
cruds() { |
||||
|
return CRUD({ |
||||
|
title: '用户', |
||||
|
url: 'api/users', |
||||
|
crudMethod: { ...crudUser } |
||||
|
}) |
||||
|
}, |
||||
|
mixins: [presenter(), header(), form(defaultForm), crud()], |
||||
|
data() { |
||||
|
return { |
||||
|
addFromVisible: false, |
||||
|
tableData: [ |
||||
|
{ |
||||
|
id: 'XXXXXXXXX', |
||||
|
account: '13476289682', |
||||
|
name: 'GCXR2', |
||||
|
orientation: '竖屏', |
||||
|
period: '每周（一/二/三/四/五）- 开机 - 8:00-18:00', |
||||
|
cover: 'https://qiniu.aiyxlib.com/1636076789085.png', |
||||
|
date: '2021-09-14 16:35' |
||||
|
} |
||||
|
], |
||||
|
stateData: [{ key: '0', name: '全部' }, { key: '1', name: '在线' }, { key: '2', name: '离线' }], |
||||
|
deviceData: [{ key: '0', name: '竖屏' }, { key: '1', name: '横屏' }], |
||||
|
rules: { |
||||
|
name: [{ required: true, message: '请输入设备名称', trigger: 'blur' }, { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }], |
||||
|
orientation: [{ required: true, message: '请选择设备方向', trigger: 'change' }] |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
computed: {}, |
||||
|
watch: {}, |
||||
|
methods: { |
||||
|
// 编辑 |
||||
|
edit(index, row) { |
||||
|
this.addFromVisible = true |
||||
|
this.form.account = row.account |
||||
|
this.form.name = row.name |
||||
|
}, |
||||
|
submitForm(formName) { |
||||
|
this.$refs[formName].validate(valid => { |
||||
|
if (valid) { |
||||
|
alert('submit!') |
||||
|
} else { |
||||
|
console.log('error submit!!') |
||||
|
return false |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
.col_flex { |
||||
|
display: flex; |
||||
|
} |
||||
|
.setting_btn{ |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
.cover_img{ |
||||
|
width: 65px; |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue