lzp
4 months ago
8 changed files with 174 additions and 75 deletions
@ -1,82 +1,181 @@ |
|||||
<template> |
<template> |
||||
<div style="padding: 16px;min-height: calc(100vh - 84px);display: flex; justify-content: center;align-items: center;"> |
<div class="app-container"> |
||||
<div class="div-box"> |
<el-row :gutter="10" class="mb8"> |
||||
<div class="div-box-title"> 智能化衣柜 </div> |
<el-col :span="1.5"> |
||||
<div class="div-ul"> |
<el-button |
||||
<div class="div-li"> |
type="primary" |
||||
<div> |
plain |
||||
<span>温度：</span> |
size="mini" |
||||
22.2℃ |
@click="handleAdd" |
||||
</div> |
>远程开锁</el-button> |
||||
<div> <span>湿度：</span> |
</el-col> |
||||
50%</div> |
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> |
||||
</div> |
</el-row> |
||||
<!-- ON：开启 OFF：关闭 --> |
|
||||
<div class="div-li"> |
<el-table v-loading="loading" :data="noticeList" max-height="600"> |
||||
<div> |
<el-table-column label="序号" align="center" prop="noticeId" width="100" /> |
||||
<span>除湿：</span> |
<el-table-column |
||||
<el-switch v-model="value2" active-color="#13ce66" inactive-color="#ff4949"> |
label="时间" |
||||
</el-switch> |
align="center" |
||||
</div> |
prop="noticeTitle" |
||||
<div> |
:show-overflow-tooltip="true" |
||||
<span>杀菌：</span> |
min-width="100" |
||||
<el-switch v-model="value2" active-color="#13ce66" inactive-color="#ff4949"> |
/> |
||||
</el-switch> |
<el-table-column label="类型" align="center" prop="noticeType" min-width="100"> |
||||
</div> |
<template slot-scope="scope"> |
||||
</div> |
<dict-tag :options="dict.type.sys_notice_type" :value="scope.row.noticeType"/> |
||||
</div> |
</template> |
||||
<div> 标签序列号：AE0B01 </div> |
</el-table-column> |
||||
</div> |
|
||||
|
|
||||
|
</el-table> |
||||
|
<pagination |
||||
|
v-show="total>0" |
||||
|
:total="total" |
||||
|
:page.sync="queryParams.pageNum" |
||||
|
:limit.sync="queryParams.pageSize" |
||||
|
@pagination="getList" |
||||
|
/> |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
|
import { listNotice, getNotice, delNotice, addNotice, updateNotice } from "@/api/system/notice"; |
||||
|
|
||||
export default { |
export default { |
||||
name: "Index", |
name: "Notice", |
||||
|
dicts: ['sys_notice_status', 'sys_notice_type'], |
||||
data() { |
data() { |
||||
return { |
return { |
||||
value2: false, |
// 遮罩层 |
||||
// 版本号 |
loading: true, |
||||
version: "3.8.9", |
// 选中数组 |
||||
|
ids: [], |
||||
|
// 非单个禁用 |
||||
|
single: true, |
||||
|
// 非多个禁用 |
||||
|
multiple: true, |
||||
|
// 显示搜索条件 |
||||
|
showSearch: true, |
||||
|
// 总条数 |
||||
|
total: 0, |
||||
|
// 公告表格数据 |
||||
|
noticeList: [], |
||||
|
// 弹出层标题 |
||||
|
title: "", |
||||
|
// 是否显示弹出层 |
||||
|
open: false, |
||||
|
// 查询参数 |
||||
|
queryParams: { |
||||
|
pageNum: 1, |
||||
|
pageSize: 10, |
||||
|
noticeTitle: undefined, |
||||
|
createBy: undefined, |
||||
|
status: undefined |
||||
|
}, |
||||
|
// 表单参数 |
||||
|
form: {}, |
||||
|
// 表单校验 |
||||
|
rules: { |
||||
|
noticeTitle: [ |
||||
|
{ required: true, message: "公告标题不能为空", trigger: "blur" } |
||||
|
], |
||||
|
noticeType: [ |
||||
|
{ required: true, message: "公告类型不能为空", trigger: "change" } |
||||
|
] |
||||
|
} |
||||
}; |
}; |
||||
}, |
}, |
||||
|
created() { |
||||
|
this.getList(); |
||||
|
}, |
||||
methods: { |
methods: { |
||||
goTarget(href) { |
/** 查询公告列表 */ |
||||
window.open(href, "_blank"); |
getList() { |
||||
|
this.loading = true; |
||||
|
listNotice(this.queryParams).then(response => { |
||||
|
this.noticeList = response.rows; |
||||
|
this.total = response.total; |
||||
|
this.loading = false; |
||||
|
}); |
||||
}, |
}, |
||||
|
// 取消按钮 |
||||
|
cancel() { |
||||
|
this.open = false; |
||||
|
this.reset(); |
||||
}, |
}, |
||||
}; |
// 表单重置 |
||||
</script> |
reset() { |
||||
|
this.form = { |
||||
<style scoped lang="scss"> |
noticeId: undefined, |
||||
.div-box { |
noticeTitle: undefined, |
||||
width: 500px; |
noticeType: undefined, |
||||
box-sizing: border-box; |
noticeContent: undefined, |
||||
padding: 16px; |
status: "0" |
||||
border: 1px solid #ccc; |
}; |
||||
border-radius: 10px; |
this.resetForm("form"); |
||||
|
}, |
||||
.div-box-title { |
/** 搜索按钮操作 */ |
||||
font-size: 20px; |
handleQuery() { |
||||
font-weight: bold; |
this.queryParams.pageNum = 1; |
||||
margin-bottom: 20px; |
this.getList(); |
||||
text-align: center; |
}, |
||||
border-bottom: 1px solid #ccc; |
/** 重置按钮操作 */ |
||||
padding-bottom: 16px; |
resetQuery() { |
||||
|
this.resetForm("queryForm"); |
||||
|
this.handleQuery(); |
||||
|
}, |
||||
|
// 多选框选中数据 |
||||
|
handleSelectionChange(selection) { |
||||
|
this.ids = selection.map(item => item.noticeId) |
||||
|
this.single = selection.length!=1 |
||||
|
this.multiple = !selection.length |
||||
|
}, |
||||
|
/** 新增按钮操作 */ |
||||
|
handleAdd() { |
||||
|
this.reset(); |
||||
|
this.open = true; |
||||
|
this.title = "添加公告"; |
||||
|
}, |
||||
|
/** 修改按钮操作 */ |
||||
|
handleUpdate(row) { |
||||
|
this.reset(); |
||||
|
const noticeId = row.noticeId || this.ids |
||||
|
getNotice(noticeId).then(response => { |
||||
|
this.form = response.data; |
||||
|
this.open = true; |
||||
|
this.title = "修改公告"; |
||||
|
}); |
||||
|
}, |
||||
|
/** 提交按钮 */ |
||||
|
submitForm: function() { |
||||
|
this.$refs["form"].validate(valid => { |
||||
|
if (valid) { |
||||
|
if (this.form.noticeId != undefined) { |
||||
|
updateNotice(this.form).then(response => { |
||||
|
this.$modal.msgSuccess("修改成功"); |
||||
|
this.open = false; |
||||
|
this.getList(); |
||||
|
}); |
||||
|
} else { |
||||
|
addNotice(this.form).then(response => { |
||||
|
this.$modal.msgSuccess("新增成功"); |
||||
|
this.open = false; |
||||
|
this.getList(); |
||||
|
}); |
||||
} |
} |
||||
} |
|
||||
|
|
||||
.div-ul { |
|
||||
.div-li { |
|
||||
font-size: 18px; |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
margin-bottom: 12px; |
|
||||
|
|
||||
span { |
|
||||
color: #333; |
|
||||
} |
} |
||||
|
}); |
||||
|
}, |
||||
|
/** 删除按钮操作 */ |
||||
|
handleDelete(row) { |
||||
|
const noticeIds = row.noticeId || this.ids |
||||
|
this.$modal.confirm('是否确认删除公告编号为"' + noticeIds + '"的数据项？').then(function() { |
||||
|
return delNotice(noticeIds); |
||||
|
}).then(() => { |
||||
|
this.getList(); |
||||
|
this.$modal.msgSuccess("删除成功"); |
||||
|
}).catch(() => {}); |
||||
} |
} |
||||
} |
} |
||||
</style> |
}; |
||||
|
</script> |
||||
|
|||||
Loading…
Reference in new issue