324 lines
8.5 KiB
Vue
324 lines
8.5 KiB
Vue
<template>
|
||
<div class="box">
|
||
<div class="form-adapt-container">
|
||
<el-card shadow="hover">
|
||
<CommonHead
|
||
@search-data="searchForm"
|
||
@reset-data="reset"
|
||
@newly-data="add"
|
||
></CommonHead>
|
||
<!-- newly-data删除所选事件 -->
|
||
<!-- reset-data重置表单内容 -->
|
||
<!-- search-data搜索事件，接收被搜索的内容 -->
|
||
</el-card>
|
||
<el-card shadow="hover">
|
||
<el-select v-model="value" placeholder="请选择学期">
|
||
<el-option
|
||
v-for="item in options"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value">
|
||
</el-option>
|
||
</el-select>
|
||
<el-select v-model="value" placeholder="请选择周次">
|
||
<el-option
|
||
v-for="item in options"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value">
|
||
</el-option>
|
||
</el-select>
|
||
|
||
<el-table
|
||
:data="tableData1"
|
||
style="width: 100%"
|
||
row-key="id"
|
||
border
|
||
lazy
|
||
:load="load"
|
||
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
|
||
<el-table-column
|
||
prop="date"
|
||
label="日期"
|
||
width="180">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="name"
|
||
label="姓名"
|
||
width="180">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="address"
|
||
label="地址">
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-card>
|
||
|
||
|
||
|
||
<Pagination
|
||
:total="total"
|
||
:pageNum="query.pageNum"
|
||
:pageSize="query.pageSize"
|
||
@clickCurrent="onClickCurrent"
|
||
@clickSize="onClickSize"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import columns from "./columns";
|
||
import { rqGetDeviceList, rqAddOrModifyDevice, rqDeleteDevice } from "./api";
|
||
import { formatDate } from "@/com/index";
|
||
|
||
export default {
|
||
name: "deviceManagement",
|
||
data() {
|
||
return {
|
||
columns,
|
||
total: 0,
|
||
query: {
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
},
|
||
loading: false,
|
||
equipmentList: [],
|
||
dialogVisible: false,
|
||
from: {
|
||
// 设备名称
|
||
deviceName: "",
|
||
// 设备标签
|
||
deviceLabel: "",
|
||
// 设备地址
|
||
deviceUrl: "",
|
||
// 设备物理地址
|
||
macAddress: "",
|
||
// 设备账号
|
||
username: "",
|
||
// 设备密码
|
||
password: "",
|
||
},
|
||
options: [{
|
||
value: '选项1',
|
||
label: '黄金糕'
|
||
}, {
|
||
value: '选项2',
|
||
label: '双皮奶'
|
||
}, {
|
||
value: '选项3',
|
||
label: '蚵仔煎'
|
||
}, {
|
||
value: '选项4',
|
||
label: '龙须面'
|
||
}, {
|
||
value: '选项5',
|
||
label: '北京烤鸭'
|
||
}],
|
||
value: '',
|
||
|
||
tableData1: [{
|
||
id: 1,
|
||
date: '2016-05-02',
|
||
name: '王小虎',
|
||
address: '上海市普陀区金沙江路 1518 弄'
|
||
}, {
|
||
id: 2,
|
||
date: '2016-05-04',
|
||
name: '王小虎',
|
||
address: '上海市普陀区金沙江路 1517 弄'
|
||
}, {
|
||
id: 3,
|
||
date: '2016-05-01',
|
||
name: '王小虎',
|
||
address: '上海市普陀区金沙江路 1519 弄',
|
||
hasChildren: true
|
||
}, {
|
||
id: 4,
|
||
date: '2016-05-03',
|
||
name: '王小虎',
|
||
address: '上海市普陀区金沙江路 1516 弄'
|
||
}],
|
||
// 对话框表单验证
|
||
rules: {
|
||
deviceName: [{ required: true, message: "请输入设备名称", trigger: "change" }],
|
||
deviceLabel: [{ required: true, message: "请选择设备标签", trigger: "change" }],
|
||
deviceUrl: [{ required: true, message: "请输入设备地址", trigger: "change" }],
|
||
macAddress: [{ required: true, message: "请输入设备物理", trigger: "change" }],
|
||
username: [{ required: true, message: "请输入设备账号名称", trigger: "change" }],
|
||
password: [{ required: true, message: "请输入设备密码", trigger: "change" }],
|
||
},
|
||
};
|
||
},
|
||
created() {
|
||
// this.getAttendanceFormData();
|
||
},
|
||
methods: {
|
||
load(tree, treeNode, resolve) {
|
||
console.log(tree)
|
||
console.log(treeNode)
|
||
console.log(resolve)
|
||
if(tree.id == 32){
|
||
setTimeout(() => {
|
||
|
||
resolve([
|
||
{
|
||
id: 34,
|
||
date: '2016-05-01',
|
||
name: '王小虎',
|
||
address: '上海市普陀区金沙江路 1519 弄'
|
||
}, {
|
||
id: 39,
|
||
date: '2016-05-01',
|
||
name: '王小虎',
|
||
address: '上海市普陀区金沙江路 1519 弄',
|
||
hasChildren: true
|
||
|
||
}
|
||
])
|
||
}, 500)
|
||
}else {
|
||
setTimeout(() => {
|
||
|
||
resolve([
|
||
{
|
||
id: 31,
|
||
date: '2016-05-01',
|
||
name: '王小虎',
|
||
address: '上海市普陀区金沙江路 1519 弄'
|
||
}, {
|
||
id: 32,
|
||
date: '2016-05-01',
|
||
name: '王小虎',
|
||
address: '上海市普陀区金沙江路 1519 弄',
|
||
hasChildren: true
|
||
|
||
}
|
||
])
|
||
}, 500)
|
||
}
|
||
|
||
},
|
||
// 搜索按钮
|
||
searchForm() {
|
||
this.$message("正在搜索");
|
||
},
|
||
// 重置按钮
|
||
reset() {
|
||
this.bus.$emit("onCurrentContextmenuClick", {
|
||
id: 0,
|
||
path: this.$route.path,
|
||
});
|
||
},
|
||
// 添加
|
||
add() {
|
||
console.log(888);
|
||
this.dialogVisible = true;
|
||
// 清除数据
|
||
this.from = {
|
||
// 设备名称
|
||
deviceName: "",
|
||
// 设备标签
|
||
deviceLabel: "",
|
||
// 设备地址
|
||
deviceUrl: "",
|
||
// 设备物理地址
|
||
macAddress: "",
|
||
// 设备账号
|
||
username: "",
|
||
// 设备密码
|
||
password: "",
|
||
};
|
||
},
|
||
// 删除
|
||
async deleteData(row) {
|
||
console.log(row.deviceId);
|
||
let res = await rqDeleteDevice(row.deviceId);
|
||
if (res.code == 200) {
|
||
this.$message({
|
||
message: "删除成功",
|
||
type: "success",
|
||
});
|
||
this.getAttendanceFormData();
|
||
} else {
|
||
this.$message({
|
||
message: "删除失败",
|
||
type: "error",
|
||
});
|
||
}
|
||
console.log(row);
|
||
},
|
||
// 编辑
|
||
editData(item) {
|
||
console.log(item);
|
||
this.dialogVisible = true;
|
||
this.from = { ...item };
|
||
},
|
||
// 点击切换页数
|
||
onClickCurrent(val) {
|
||
this.query.pageNum = val;
|
||
this.getAttendanceFormData();
|
||
},
|
||
// 点击了每页页数
|
||
onClickSize(val) {
|
||
this.query.pageSize = val;
|
||
this.getAttendanceFormData();
|
||
},
|
||
handleClose(done) {
|
||
this.$confirm("确认关闭？")
|
||
.then((_) => {
|
||
done();
|
||
})
|
||
.catch((_) => {});
|
||
},
|
||
// 获取设备列表
|
||
async getAttendanceFormData() {
|
||
try {
|
||
this.loading = true;
|
||
let result = await rqGetDeviceList(this.query.pageNum, this.query.pageSize);
|
||
if (result.code == 200) {
|
||
this.loading = false;
|
||
let arr = result.data.records;
|
||
arr.forEach((item, index) => {
|
||
item.createTime = formatDate(item.createTime, "-");
|
||
item.updateTime = formatDate(item.updateTime, "-");
|
||
});
|
||
this.equipmentList = arr;
|
||
this.total = result.data.total;
|
||
} else {
|
||
this.loading = false;
|
||
this.$message.error("网络错误");
|
||
}
|
||
} catch (error) {
|
||
this.loading = false;
|
||
this.$message.error("网络错误");
|
||
}
|
||
},
|
||
// 确认新增或者修改按钮
|
||
confirmSettingRules() {
|
||
this.$refs.ruleForm.validate(async (success) => {
|
||
if (success) {
|
||
this.dialogVisible = false;
|
||
delete this.from.createTime;
|
||
delete this.from.updateTime;
|
||
let result = await rqAddOrModifyDevice(this.from);
|
||
if (result.code == 200) {
|
||
this.$message({
|
||
message: this.from.deviceId ? "修改成功" : "添加成功",
|
||
type: "success",
|
||
});
|
||
this.getAttendanceFormData();
|
||
this.from = {};
|
||
} else {
|
||
this.$message.error("添加失败");
|
||
}
|
||
} else {
|
||
return false;
|
||
}
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped></style> |