感知设备 ---- 属性配置静态页面及基本逻辑初步完善
This commit is contained in:
BianLzhaoMin
parent
0b6c94b040
commit
dfb3704669
|
|
@ -0,0 +1,20 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
/* 感知设备 ---- 属性配置接口 */
|
||||
|
||||
// 列表接口
|
||||
export const getAttributeConfigListAPI = (data) => {
|
||||
return request.post('/xxx', data)
|
||||
}
|
||||
// 新增接口
|
||||
export const addAttributeConfigDataAPI = (data) => {
|
||||
return request.post('/xxx', data)
|
||||
}
|
||||
// 修改接口
|
||||
export const editAttributeConfigDataAPI = (data) => {
|
||||
return request.post('/xxx', data)
|
||||
}
|
||||
// 删除接口
|
||||
export const deleteAttributeConfigDataAPI = (data) => {
|
||||
return request.post('/xxx', data)
|
||||
}
|
||||
|
|
@ -0,0 +1,171 @@
|
|||
<template>
|
||||
<!-- 新增修改弹框 -->
|
||||
<div>
|
||||
<el-form label-width="auto" :model="addOrEditForm" :rules="addOrEditFormRef" ref="addOrEditFormRef">
|
||||
<el-form-item label="设备ID：" prop="deviceName">
|
||||
<el-input placeholder="请输入设备ID" v-model="addOrEditForm.deviceName" clearable />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="属性ID：" prop="deviceCode">
|
||||
<el-input placeholder="请输入属性ID" v-model="addOrEditForm.deviceCode" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="属性名称：">
|
||||
<el-input placeholder="请输入属性名称" v-model="addOrEditForm.casDeviceCode" clearable />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="数据类型：">
|
||||
<el-input placeholder="请输入数据类型" v-model="addOrEditForm.wifi" clearable />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="单位：">
|
||||
<el-input placeholder="请输入单位" v-model="addOrEditForm.bd" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="属性值：">
|
||||
<el-input placeholder="请输入属性值" v-model="addOrEditForm.sx_data" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="描述：">
|
||||
<el-input placeholder="请输入描述" v-model="addOrEditForm.remake" clearable />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item class="handle">
|
||||
<el-button @click="onCancel"> 取消 </el-button>
|
||||
<el-button type="primary" @click="onSubmitForm"> 保存 </el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { addProjectAPI } from '@/api/project-manage/index.js'
|
||||
export default {
|
||||
data() {
|
||||
const validatePlanStartTime = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
return callback(new Error('请选择计划开工日期'))
|
||||
}
|
||||
const endTime = this.addOrEditForm.planEndTime
|
||||
if (endTime && new Date(value) >= new Date(endTime)) {
|
||||
return callback(new Error('计划开工日期必须小于计划竣工日期'))
|
||||
}
|
||||
callback()
|
||||
}
|
||||
const validatePlanEndTime = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
return callback(new Error('请选择计划竣工日期'))
|
||||
}
|
||||
const endTime = this.addOrEditForm.planStartTime
|
||||
if (endTime && new Date(value) <= new Date(endTime)) {
|
||||
return callback(new Error('计划竣工日期必须大于计划开工日期'))
|
||||
}
|
||||
callback()
|
||||
}
|
||||
return {
|
||||
// 新增或修改接口
|
||||
addOrEditForm: {
|
||||
projectName: '', // 所属工程
|
||||
deviceType: '', // 设备类型
|
||||
deviceName: '', //设备名称
|
||||
deviceCode: '', // 设备编码
|
||||
casDeviceCode: '', // 级联编码
|
||||
status: '', // 设备状态
|
||||
wifi: '', // 设备信号
|
||||
area: '', // 监测区域
|
||||
bd: '', // 所属边
|
||||
},
|
||||
addOrEditFormRef: {
|
||||
projectName: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择所属工程',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
deviceType: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择设备类型',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
deviceName: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入设备名称',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
|
||||
deviceCode: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入设备编码',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
status: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择设备状态',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
area: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择监测区域',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
// 所属工程数据源
|
||||
projectList: [
|
||||
{ id: 1, label: '工程1' },
|
||||
{ id: 2, label: '工程2' },
|
||||
{ id: 3, label: '工程3' },
|
||||
],
|
||||
// 设备类型数据源
|
||||
typeList: [
|
||||
{ id: 1, label: '测试1' },
|
||||
{ id: 2, label: '测试2' },
|
||||
{ id: 3, label: '测试3' },
|
||||
],
|
||||
// 设备类型数据源
|
||||
areaList: [
|
||||
{ id: 1, label: '区域1' },
|
||||
{ id: 2, label: '区域2' },
|
||||
{ id: 3, label: '区域3' },
|
||||
],
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleClose() {
|
||||
this.$refs.addOrEditFormRef.resetFields()
|
||||
// this.$emit('update:formDialogVisible', false)
|
||||
},
|
||||
// 表单提交
|
||||
onSubmitForm() {
|
||||
this.$refs.addOrEditFormRef.validate(async (valid) => {
|
||||
if (valid) {
|
||||
const res = await addProjectAPI(this.addOrEditForm)
|
||||
if (res.code === 200) {
|
||||
this.$modal.msgSuccess('新增成功')
|
||||
}
|
||||
// this.$emit('update:formDialogVisible', false)
|
||||
this.$emit('onCloseDialog')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 取消按钮
|
||||
onCancel() {
|
||||
this.$emit('onCloseDialog', false)
|
||||
},
|
||||
},
|
||||
async mounted() {},
|
||||
watch: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
export const formLabel = [{ f_label: '搜索关键词', f_model: 'proName', f_type: 'ipt', isShow: false }]
|
||||
export const columnsList = [
|
||||
{ t_props: 'projectName', t_label: 'ID' },
|
||||
{ t_props: 'address', t_label: '设备ID' },
|
||||
{ t_props: 'planStartTime', t_label: '属性ID' },
|
||||
{ t_props: 'planEndTime', t_label: '属性名称' },
|
||||
{ t_props: 'ownerUnit', t_label: '描述' },
|
||||
{ t_props: 'auditStatus', t_label: '数据类型' },
|
||||
{ t_props: 'auditStatus', t_label: '单位' },
|
||||
{ t_props: 'auditStatus', t_label: '属性值' },
|
||||
{ t_props: 'auditStatus', t_label: '创建时间' },
|
||||
]
|
||||
|
||||
export const dialogConfig = {
|
||||
outerWidth: '50%',
|
||||
outerTitle: '新增',
|
||||
outerVisible: false,
|
||||
}
|
||||
|
|
@ -1,9 +1,89 @@
|
|||
<template>
|
||||
<div class="app-container"> 属性配置 </div>
|
||||
<!-- 感知设备 ---- 属性配置 -->
|
||||
<div class="app-container">
|
||||
<TableModel :formLabel="formLabel" :columnsList="columnsList" :request-api="getProjectListAPI" ref="tableRef">
|
||||
<template slot="btn">
|
||||
<el-button size="mini" type="primary" icon="el-icon-download" @click="handleExport()"> 导出 </el-button>
|
||||
<el-button size="mini" type="primary" icon="el-icon-plus" @click="handleAddOrOther(null, 1)">
|
||||
新增
|
||||
</el-button>
|
||||
</template>
|
||||
<template slot="handle" slot-scope="{ data }">
|
||||
<el-button size="mini" type="primary" @click="handleAddOrOther(data, 2)" icon="el-icon-edit">
|
||||
修改
|
||||
</el-button>
|
||||
<!-- <el-button size="mini" type="success" @click="handleAddOrOther(data, 3)" icon="el-icon-info">
|
||||
详情
|
||||
</el-button> -->
|
||||
<el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDeleteData(data)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<template slot="status" slot-scope="{ data }">
|
||||
<el-tag size="mini">状态 </el-tag>
|
||||
</template>
|
||||
</TableModel>
|
||||
|
||||
<!-- 弹框 -->
|
||||
<DialogModel :dialogConfig="dialogConfig" @closeDialogOuter="closeDialogOuter">
|
||||
<template slot="outerContent">
|
||||
<!-- 新增以及修改弹框 -->
|
||||
<AddEditForm @onCloseDialog="closeDialogOuter" v-if="dialogType === 1 || dialogType === 2" />
|
||||
</template>
|
||||
</DialogModel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {}
|
||||
import TableModel from '@/components/TableModel'
|
||||
import DialogModel from '@/components/DialogModel'
|
||||
import AddEditForm from './components/add-edit-form'
|
||||
import { formLabel, columnsList, dialogConfig } from './config'
|
||||
import { getProjectListAPI } from '@/api/project-manage/index.js'
|
||||
export default {
|
||||
components: {
|
||||
TableModel,
|
||||
DialogModel,
|
||||
AddEditForm,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formLabel,
|
||||
columnsList,
|
||||
dialogConfig,
|
||||
getProjectListAPI,
|
||||
dialogType: 1,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleExport() {
|
||||
console.log('导出')
|
||||
},
|
||||
|
||||
handleAddOrOther(data, type) {
|
||||
const titleType = {
|
||||
1: '新增',
|
||||
2: '修改',
|
||||
}
|
||||
this.dialogType = type
|
||||
this.dialogConfig.outerTitle = titleType[type]
|
||||
this.dialogConfig.outerVisible = true
|
||||
},
|
||||
handleDeleteData(data) {
|
||||
this.$modal
|
||||
.confirm(`是否确认删除该条数据`)
|
||||
.then(async () => {
|
||||
this.$refs.tableRef.getTableList()
|
||||
})
|
||||
.catch(() => {})
|
||||
},
|
||||
/** 关闭外侧弹框 */
|
||||
closeDialogOuter() {
|
||||
this.dialogConfig.outerVisible = false
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue