|
|
@@ -0,0 +1,414 @@
|
|
|
+<template>
|
|
|
+ <div class="formwrap">
|
|
|
+ <en-table-layout
|
|
|
+ toolbar
|
|
|
+ @selection-change="selectFun"
|
|
|
+ @sort-change="tableSort"
|
|
|
+ pagination
|
|
|
+ :tableData="tableData"
|
|
|
+ :height="600"
|
|
|
+ :loading="loading"
|
|
|
+ :default-sort="{prop: 'id', order: 'ascending'}"
|
|
|
+ >
|
|
|
+ <!--工具栏-->
|
|
|
+ <div slot="toolbar" class="inner-toolbar">
|
|
|
+ <div class="toolbar-search">
|
|
|
+ <en-table-search @search="handlerSearch" placeholder="请输入搜索关键字"/>
|
|
|
+ </div>
|
|
|
+ <div class="toolbar-btns">
|
|
|
+ <el-button type="primary" @click="handleAdd">新增</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--表头-->
|
|
|
+ <template slot="table-columns">
|
|
|
+ <el-table-column type="selection" width="55" align="center"></el-table-column>
|
|
|
+ <el-table-column style="text-align: left;" label="图标" width="70">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-image :src="scope.row.icon_src" lazy fit="cover" :preview-src-list="srcList" @click="lookBigImg(scope.row.icon_src)">
|
|
|
+ <div slot="error" class="image-slot">
|
|
|
+ <i class="el-icon-picture-outline"></i>
|
|
|
+ </div>
|
|
|
+ </el-image>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="name" label="名称" min-width="150" align="center" />
|
|
|
+ <el-table-column prop="desc" label="描述" min-width="150" align="center" />
|
|
|
+ <el-table-column prop="key_code" label="唯一标识码" width="160" align="center" />
|
|
|
+ <el-table-column prop="min_x" label="x轴范围" align="center" width="150" :formatter="formatterX" />
|
|
|
+ <el-table-column prop="min_y" label="y轴范围" width="150" align="center" :formatter="formatterY" />
|
|
|
+ <el-table-column prop="create_time" label="创建时间" width="170" align="center" :formatter="formatterDate" />
|
|
|
+ <el-table-column style="text-align: left;" label="操作" width="150">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button type="success" size="mini" @click="handlerEdit(scope.$index,scope.row)">编辑</el-button>
|
|
|
+ <el-button type="danger" size="mini" @click="handlerDelete(scope.row.id)">删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!--翻页-->
|
|
|
+ <el-pagination
|
|
|
+ slot="pagination"
|
|
|
+ v-if="pageData"
|
|
|
+ :current-page="pageData.page_no"
|
|
|
+ :page-sizes="[10, 20, 50, 100]"
|
|
|
+ :page-size="pageData.page_size"
|
|
|
+ @size-change="handlePageSizeChange"
|
|
|
+ @current-change="handlePageCurrentChange"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ :total="pageData.data_total">
|
|
|
+ </el-pagination>
|
|
|
+ </en-table-layout>
|
|
|
+ <!--编辑表单-->
|
|
|
+ <el-dialog title="编辑按钮事件" :visible.sync="formshow" width="50%">
|
|
|
+ <div>
|
|
|
+ <el-form ref="editform" :rules="rules" label-width="140px" :model="formmodel">
|
|
|
+ <el-form-item label="名称" prop="name">
|
|
|
+ <el-input v-model="formmodel.name" placeholder="请输入名称" :maxlength="20" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="描述" prop="desc">
|
|
|
+ <el-input v-model="formmodel.desc" type="textarea" rows="2" placeholder="请输入描述" maxlength="50" show-word-limit />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="唯一标识码" prop="key_code">
|
|
|
+ <el-input v-model="formmodel.key_code" placeholder="请输入唯一标识码" :maxlength="20" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="x坐标范围" prop="min_x">
|
|
|
+ <el-input-number v-model="formmodel.min_x" @change="handleChangeMinX" :min="0" :max="10000" placeholder="最小x轴" />至
|
|
|
+ <el-input-number v-model="formmodel.max_x" @change="handleChangeMaxX" :min="0" :max="10000" placeholder="最大x轴" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="y坐标范围" prop="min_y">
|
|
|
+ <el-input-number v-model="formmodel.min_y" @change="handleChangeMinY" :min="0" :max="10000" placeholder="最小y轴" />至
|
|
|
+ <el-input-number v-model="formmodel.max_y" @change="handleChangeMaxY" :min="0" :max="10000" placeholder="最大y轴" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="设备类型" prop="type">
|
|
|
+ <el-select v-model="formmodel.type" placeholder="请选择类型">
|
|
|
+ <el-option label="遥控器" value="遥控器" />
|
|
|
+ <el-option label="SOS紧急按钮" value="SOS紧急按钮" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="图标">
|
|
|
+ <el-upload
|
|
|
+ class="avatar-uploader"
|
|
|
+ :action="`${uploadurl}?scene=avatar`"
|
|
|
+ :show-file-list="false"
|
|
|
+ :on-success="uploaded"
|
|
|
+ :before-upload="handleShopLogoBefore">
|
|
|
+ <img v-if="imageUrl" :src="imageUrl" class="avatar">
|
|
|
+ <i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="formshow = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="handlerFormSubmit('editform')">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import * as API_event from '@/api/ncs_event'
|
|
|
+ import {unix2Date, unixToDate} from "@/utils/Foundation"
|
|
|
+ import {serverUrl} from "@/utils/domain";
|
|
|
+ export default {
|
|
|
+ name: 'index',
|
|
|
+ data: function () {
|
|
|
+ return {
|
|
|
+ /** 表格数据 */
|
|
|
+ tableData: [],
|
|
|
+ /** 表单数据 */
|
|
|
+ formmodel: {},
|
|
|
+ formshow: false, // 编辑表单显示开关
|
|
|
+ /** 表单校验 */
|
|
|
+ rules: {
|
|
|
+ name: [
|
|
|
+ {required: true, message: '请输入名称', trigger: 'blur'}
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ pageData: [],
|
|
|
+ loading: false,
|
|
|
+ multipleSelection: [],
|
|
|
+ params: {
|
|
|
+ page_no: 1,
|
|
|
+ page_size: 10,
|
|
|
+ sort: 'create_time',
|
|
|
+ dir: 'desc',
|
|
|
+ },
|
|
|
+ editflag: 0,
|
|
|
+ srcList: ['1'],
|
|
|
+ uploadurl: serverUrl + '/ncs/upload/uploadFile',
|
|
|
+ imageUrl: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ tableHeight() {
|
|
|
+ return this.mainAreaHeight - 130
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleAdd: function () {
|
|
|
+ this.formmodel = {}
|
|
|
+ if (this.$refs.editform) {
|
|
|
+ this.$refs.editform.resetFields()
|
|
|
+ }
|
|
|
+ this.imageUrl = null
|
|
|
+ this.formmodel.type = '遥控器'
|
|
|
+ this.editflag = 0
|
|
|
+ this.formshow = true
|
|
|
+ },
|
|
|
+ handlerEdit: function (index, row) {
|
|
|
+ this.formmodel = Object.assign({}, row)
|
|
|
+ this.imageUrl = row.icon_src
|
|
|
+ this.editflag = 1
|
|
|
+ this.formshow = true
|
|
|
+ },
|
|
|
+ /** 选择行变化时，记录选中的行数据 */
|
|
|
+ selectFun(val) {
|
|
|
+ this.multipleSelection = val
|
|
|
+ },
|
|
|
+ /** 单条数据删除处理 */
|
|
|
+ handlerDelete(ids) {
|
|
|
+ this.$confirm('删除操作后数据不可复原，您确定要删除此数据?', '警告', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ API_event.remove(ids).then(
|
|
|
+ response => {
|
|
|
+ this.getList()
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: '删除成功!'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ ).catch(response => {
|
|
|
+ this.$message({
|
|
|
+ type: 'info',
|
|
|
+ message: response.message
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'info',
|
|
|
+ message: '已取消删除'
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /** 批量数据删除处理(删除选中的行) */
|
|
|
+ batchDelete: function () {
|
|
|
+ if (rows.length === 0) {
|
|
|
+ this.$message({ type: 'info', message: '请先勾选需要删除的数据' })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const ids = []
|
|
|
+ rows.forEach(function (item) {
|
|
|
+ ids.push(item.id)
|
|
|
+ })
|
|
|
+ this.handlerDelete(ids.join(','))
|
|
|
+ },
|
|
|
+ /** 分页大小发生改变 */
|
|
|
+ handlePageSizeChange(size) {
|
|
|
+ this.params.page_size = size
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ /** 分页页数发生改变 */
|
|
|
+ handlePageCurrentChange(page) {
|
|
|
+ this.params.page_no = page
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ /** 加载通知列表 */
|
|
|
+ getList() {
|
|
|
+ this.loading = true
|
|
|
+ API_event.getList(this.params).then(response => {
|
|
|
+ this.loading = false
|
|
|
+ this.tableData = response.data
|
|
|
+ this.pageData = {
|
|
|
+ page_no: response.page_no,
|
|
|
+ page_size: response.page_size,
|
|
|
+ data_total: response.data_total
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /** 新增 提交表单 */
|
|
|
+ handlerFormSubmit(formName) {
|
|
|
+ this.$refs[formName].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ const params = this.MixinClone(this.formmodel)
|
|
|
+ if (this.imageUrl) {
|
|
|
+ params.icon_src = this.imageUrl
|
|
|
+ }
|
|
|
+ /** 新增 */
|
|
|
+ if (this.editflag === 0) {
|
|
|
+ API_event.add(params).then(res => {
|
|
|
+ this.formshow = false
|
|
|
+ this.$message.info(res)
|
|
|
+ this.getList()
|
|
|
+ this.imageUrl = null
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ /** 修改 */
|
|
|
+ API_event.update(params.id, params).then(res => {
|
|
|
+ this.formshow = false
|
|
|
+ this.$message.info(res)
|
|
|
+ this.getList()
|
|
|
+ this.imageUrl = null
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /** 处理搜索 */
|
|
|
+ handlerSearch(keywords) {
|
|
|
+ this.params.query = keywords
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ /** 处理排序 */
|
|
|
+ tableSort(column) {
|
|
|
+ if (column.order !== null) {
|
|
|
+ this.params.sort = column.prop
|
|
|
+ this.params.dir = column.order === 'ascending' ? 'asc' : 'desc'
|
|
|
+ } else {
|
|
|
+ this.params.sort = null
|
|
|
+ this.params.dir = null
|
|
|
+ }
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ lookBigImg(img) {
|
|
|
+ this.srcList = []
|
|
|
+ this.srcList.push(img)
|
|
|
+ },
|
|
|
+ /** 图片上传之前的校验 */
|
|
|
+ handleShopLogoBefore(file) {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ const isImg = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif'
|
|
|
+ const isLt2M = file.size / 1024 / 1024 < 2
|
|
|
+
|
|
|
+ if (!isImg) {
|
|
|
+ this.$message.error('上传头像图片只能是 JPG、PNG、GIF 格式!')
|
|
|
+ reject()
|
|
|
+ }
|
|
|
+ if (!isLt2M) {
|
|
|
+ this.$message.error('上传头像图片大小不能超过 2MB!')
|
|
|
+ reject()
|
|
|
+ }
|
|
|
+ let reader = new FileReader()
|
|
|
+ reader.onload = (event) => {
|
|
|
+ let image = new Image()
|
|
|
+ image.onload = () => {
|
|
|
+ let width = image.width
|
|
|
+ let height = image.height
|
|
|
+ if (width > 500 || width < 100) {
|
|
|
+ this.$message.error('图片宽度必须在100~500之间,宽高比为1：1！')
|
|
|
+ reject()
|
|
|
+ }
|
|
|
+ if (width !== height) {
|
|
|
+ this.$message.error('请上传宽高比为1：1的图片')
|
|
|
+ reject()
|
|
|
+ }
|
|
|
+ if (height > 500 || height < 100) {
|
|
|
+ this.$message.error('图片高度必须在100~500之间！')
|
|
|
+ reject()
|
|
|
+ }
|
|
|
+ resolve()
|
|
|
+ }
|
|
|
+ image.src = event.target.result
|
|
|
+ }
|
|
|
+ reader.readAsDataURL(file)
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 上传成功后的钩子 更换图片 置空存储数组*/
|
|
|
+ uploaded(res) {
|
|
|
+ this.imageUrl = serverUrl + '/' + res
|
|
|
+ this.formmodel.icon_src = this.imageUrl
|
|
|
+ },
|
|
|
+ formatterX(row, column, cellValue) {
|
|
|
+ if (row.min_x != null && row.min_x !== '' && row.max_x != null && row.max_x !== '') {
|
|
|
+ return row.min_x + '-' + row.max_x
|
|
|
+ }
|
|
|
+ },
|
|
|
+ formatterY(row, column, cellValue) {
|
|
|
+ if (row.min_y != null && row.min_y !== '' && row.max_y != null && row.max_y !== '') {
|
|
|
+ return row.min_y + '-' + row.max_y
|
|
|
+ }
|
|
|
+ },
|
|
|
+ formatterDate(row, column, cellValue) {
|
|
|
+ return unixToDate(row.create_time)
|
|
|
+ },
|
|
|
+ handleChangeMinX(val) {
|
|
|
+ if (this.formmodel.max_x <= val || !this.formmodel.max_x) {
|
|
|
+ this.formmodel.max_x = val + 10
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleChangeMaxX(val) {
|
|
|
+ if (val >= 10) {
|
|
|
+ if (this.formmodel.min_x >= val || !this.formmodel.min_x) {
|
|
|
+ this.formmodel.min_x = val - 10
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.formmodel.min_x = 0
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ handleChangeMinY(val) {
|
|
|
+ if (this.formmodel.max_y <= val || !this.formmodel.max_y) {
|
|
|
+ this.formmodel.max_y = val + 10
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleChangeMaxY(val) {
|
|
|
+ if (val >= 10) {
|
|
|
+ if (this.formmodel.min_y >= val || !this.formmodel.min_y) {
|
|
|
+ this.formmodel.min_y = val - 10
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.formmodel.min_y = 0
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style type="text/scss" scoped>
|
|
|
+
|
|
|
+ .inner-toolbar {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ width: 100%;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ /deep/ .avatar-uploader .el-upload {
|
|
|
+ border: 1px dashed #d9d9d9;
|
|
|
+ border-radius: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .avatar-uploader .el-upload:hover {
|
|
|
+ border-color: #409EFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .avatar-uploader-icon {
|
|
|
+ font-size: 28px;
|
|
|
+ color: #8c939d;
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ line-height: 100px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .avatar {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+</style>
|
WenNingning