|
|
|
@@ -1,332 +1,241 @@ |
|
|
|
<!-- |
|
|
|
* @Date: 2021-11-30 09:28:55 |
|
|
|
* @LastEditors: JinxuChen |
|
|
|
* @LastEditTime: 2021-12-03 15:22:29 |
|
|
|
* @FilePath: \GpsCardAdmin\src\views\off-limits-manage\off-limits-main\off-limits-type\index.vue |
|
|
|
* @description: |
|
|
|
* @Author: your name |
|
|
|
* @Date: 2021-12-07 15:14:51 |
|
|
|
* @LastEditTime: 2021-12-08 14:27:16 |
|
|
|
* @LastEditors: Please set LastEditors |
|
|
|
* @Description: 自动报警分类 |
|
|
|
* @FilePath: \GpsCardAdmin\src\views\off-limits-manage\off-limits-main\off-limits-type\newIndex.vue |
|
|
|
--> |
|
|
|
<template> |
|
|
|
<div class="custom-tree-container"> |
|
|
|
|
|
|
|
<div class="block"> |
|
|
|
|
|
|
|
<el-tree |
|
|
|
:data="data" |
|
|
|
node-key="id" |
|
|
|
:default-expand-all="false" |
|
|
|
:render-after-expand="true" |
|
|
|
:expand-on-click-node="false"> |
|
|
|
<span class="custom-tree-node" slot-scope="{ node, data }"> |
|
|
|
<span>{{ node.label }} ( {{ data.no }} )</span><span></span> |
|
|
|
|
|
|
|
<div class="Operation"> |
|
|
|
<span> |
|
|
|
<el-button v-if=" data.children" |
|
|
|
type="text" |
|
|
|
size="mini" |
|
|
|
@click="() => append(node,data)"> |
|
|
|
增加类别 |
|
|
|
</el-button> |
|
|
|
<el-button v-if="!data.children" |
|
|
|
type="text" |
|
|
|
size="mini" |
|
|
|
@click="() => modify(node, data)"> |
|
|
|
修改 |
|
|
|
</el-button> |
|
|
|
<el-button v-if="!data.children" |
|
|
|
type="text" |
|
|
|
size="mini" |
|
|
|
@click="() => remove(node, data)"> |
|
|
|
删除 |
|
|
|
</el-button> |
|
|
|
</span></div> |
|
|
|
</span> |
|
|
|
</el-tree> |
|
|
|
<el-row> |
|
|
|
|
|
|
|
<el-col :span="8"><div class="grid-content bg-purple-light add-btn" > |
|
|
|
<el-button type="text" @click="dialogVisible = true"> 增加场景</el-button> |
|
|
|
</div></el-col> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</el-row> |
|
|
|
|
|
|
|
<template> |
|
|
|
<div class="app-container"> |
|
|
|
<el-dialog |
|
|
|
title="新增场景" |
|
|
|
:visible.sync="dialogVisible" |
|
|
|
width="50%" |
|
|
|
> |
|
|
|
<el-form :model="currentAddScenes" ref="currentAddScenes"> |
|
|
|
<el-form-item label="场景" |
|
|
|
prop="inputNew" |
|
|
|
:rules="[ |
|
|
|
{ required: true, message: '场景不能为空'} |
|
|
|
]" |
|
|
|
> |
|
|
|
<el-input v-model="currentAddScenes.inputNew" placeholder="请输入场景"></el-input> |
|
|
|
|
|
|
|
</el-form-item> |
|
|
|
<el-form-item> |
|
|
|
|
|
|
|
<el-button type="primary" @click="submitScenesForm('currentAddScenes')">提交</el-button> |
|
|
|
<el-button @click="resetForm('currentAddScenes')">重置</el-button> |
|
|
|
<el-button @click="dialogVisible = false">取 消</el-button> |
|
|
|
:title="titleTypeAddorModify" |
|
|
|
:visible.sync="dialogVisibleType" |
|
|
|
width="50%" |
|
|
|
> |
|
|
|
<el-form :model="currentAddType" ref="currentAddType"> |
|
|
|
<el-form-item label="类型" prop="kindId"> |
|
|
|
<el-radio v-model="currentAddType.kindId" label="1">关键字</el-radio> |
|
|
|
<el-radio v-model="currentAddType.kindId" label="2">固定地点</el-radio> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item |
|
|
|
label="类别" |
|
|
|
prop="typeLabel" |
|
|
|
:rules="[{ required: true, message: '类别不能为空' }]" |
|
|
|
> |
|
|
|
<el-input |
|
|
|
v-model="currentAddType.typeLabel" |
|
|
|
placeholder="请输入类别" |
|
|
|
></el-input> |
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
|
|
|
|
</el-form> |
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
<el-dialog |
|
|
|
:title="titleTypeAddorModify" |
|
|
|
:visible.sync="dialogVisibleType" |
|
|
|
width="50%" |
|
|
|
> |
|
|
|
<el-form :model="currentAddType" ref="currentAddType"> |
|
|
|
<el-form-item label="类别" |
|
|
|
prop="typeLabel" |
|
|
|
:rules="[ |
|
|
|
{ required: true, message: '类别不能为空'} |
|
|
|
]" |
|
|
|
> |
|
|
|
<el-input v-model="currentAddType.typeLabel" placeholder="请输入类别"></el-input> |
|
|
|
|
|
|
|
</el-form-item> |
|
|
|
<el-form-item> |
|
|
|
|
|
|
|
<el-button type="primary" @click="submitForm('currentAddType')">提交</el-button> |
|
|
|
<el-button type="primary" @click="submitForm('currentAddType')" |
|
|
|
>提交</el-button |
|
|
|
> |
|
|
|
<el-button @click="resetForm('currentAddType')">重置</el-button> |
|
|
|
<el-button @click="dialogVisibleType = false">取 消</el-button> |
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</el-form> |
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
|
|
|
|
<el-dialog |
|
|
|
title="修改类别" |
|
|
|
:visible.sync="dialogVisibleM" |
|
|
|
width="50%" |
|
|
|
> |
|
|
|
<el-input v-model="inputModify" placeholder="请输入类别"></el-input> |
|
|
|
<span slot="footer" class="dialog-footer"> |
|
|
|
<el-button @click="dialogVisibleM = false">取 消</el-button> |
|
|
|
<el-button type="primary" @click="() => save()">确 定</el-button> |
|
|
|
</span> |
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
</div> |
|
|
|
</el-form> |
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
<div class="filter-container"> |
|
|
|
<el-button |
|
|
|
class="filter-item" |
|
|
|
style="margin-left: 10px" |
|
|
|
type="primary" |
|
|
|
icon="el-icon-circle-plus" |
|
|
|
@click="AddDialog" |
|
|
|
>添加</el-button |
|
|
|
> |
|
|
|
<!-- 搜索 --> |
|
|
|
<el-input |
|
|
|
v-model="searchValue" |
|
|
|
placeholder="请输入类别" |
|
|
|
style="width: 200px; margin-left: 10px" |
|
|
|
class="filter-item" |
|
|
|
@keyup.enter.native="onSearch" |
|
|
|
/> |
|
|
|
<el-button |
|
|
|
class="filter-item" |
|
|
|
style="margin-left: 10px" |
|
|
|
type="primary" |
|
|
|
icon="el-icon-search" |
|
|
|
@click="onSearch" |
|
|
|
>搜索</el-button |
|
|
|
> |
|
|
|
</div> |
|
|
|
<!-- 表格 --> |
|
|
|
<!-- <el-table |
|
|
|
:key="tableKey" |
|
|
|
v-loading="listLoading" |
|
|
|
:data="list" |
|
|
|
border |
|
|
|
fit |
|
|
|
highlight-current-row |
|
|
|
style="width: 100%;" |
|
|
|
@sort-change="sortChange" |
|
|
|
></el-table>--> |
|
|
|
<TTable |
|
|
|
:tableData="list" |
|
|
|
:columns="columns" |
|
|
|
@update="onUpdate" |
|
|
|
@delete="onDelete" |
|
|
|
></TTable> |
|
|
|
<!-- 分页 --> |
|
|
|
<pagination |
|
|
|
v-show="total > 0" |
|
|
|
:total="total" |
|
|
|
:page.sync="page" |
|
|
|
:limit.sync="limit" |
|
|
|
:page-sizes="[5,10,100, 200, 300, 400]" |
|
|
|
@pagination="getList" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
let id = 1000; |
|
|
|
import TopMenu from "@/components/TopMenu"; |
|
|
|
import TTable from "../../../../components/TTable/TTable"; |
|
|
|
import Pagination from "@/components/Pagination"; |
|
|
|
import CategoryAPI from "@/api/area-category.js"; |
|
|
|
|
|
|
|
export default { |
|
|
|
name:'', |
|
|
|
data(){ |
|
|
|
const data = [{ |
|
|
|
id: 1, |
|
|
|
no:101, |
|
|
|
label: '场景1', |
|
|
|
children: [{ |
|
|
|
id: 4, |
|
|
|
no:101001, |
|
|
|
label: '类别 1-1' |
|
|
|
}] |
|
|
|
}, { |
|
|
|
id: 2, |
|
|
|
no:102, |
|
|
|
label: '场景 2', |
|
|
|
children: [{ |
|
|
|
id: 5, |
|
|
|
no:102001, |
|
|
|
label: '类别 2-1' |
|
|
|
}, { |
|
|
|
id: 6, |
|
|
|
no:102002, |
|
|
|
label: '类别 2-2' |
|
|
|
}] |
|
|
|
} |
|
|
|
]; |
|
|
|
return { |
|
|
|
titleTypeAddorModify:"新增类别", |
|
|
|
inputNew: '', |
|
|
|
inputType:'', |
|
|
|
inputModify: '', |
|
|
|
parentNode:{}, |
|
|
|
dialogVisible: false, |
|
|
|
dialogVisibleType:false, |
|
|
|
dialogVisibleM: false, |
|
|
|
currentData:{}, |
|
|
|
currentParentData:{}, |
|
|
|
currentAddScenes:{ |
|
|
|
inputNew:"", |
|
|
|
name: "", |
|
|
|
components: { TTable, TopMenu, Pagination }, |
|
|
|
|
|
|
|
data() { |
|
|
|
return { |
|
|
|
titleTypeAddorModify: "新增类别", |
|
|
|
dialogVisibleType: false, |
|
|
|
searchValue: "", |
|
|
|
list: [], |
|
|
|
columns: [ |
|
|
|
{ prop: "kindIdName", title: "类型" }, |
|
|
|
{ prop: "categoryName", title: "类别" }, |
|
|
|
{ prop: "createTime", title: "创建时间" }, |
|
|
|
{ |
|
|
|
action: true, |
|
|
|
title: "操作", |
|
|
|
actions: [ |
|
|
|
{ fnName: "update", title: "修改", type: "primary" }, |
|
|
|
//{ fnName: "delete", title: "删除", type: "error" }, |
|
|
|
], |
|
|
|
}, |
|
|
|
currentAddType:{ |
|
|
|
typeLabel:"" |
|
|
|
}, |
|
|
|
|
|
|
|
data: JSON.parse(JSON.stringify(data)) |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
submitScenesForm(formName) { |
|
|
|
this.$refs[formName].validate((valid) => { |
|
|
|
if (valid) { |
|
|
|
//alert('submit!'); |
|
|
|
this.addScenes(); |
|
|
|
|
|
|
|
} else { |
|
|
|
console.log('error submit!!'); |
|
|
|
return false; |
|
|
|
} |
|
|
|
}); |
|
|
|
], |
|
|
|
|
|
|
|
total: 1, |
|
|
|
page: 1, |
|
|
|
limit: 5, |
|
|
|
currentAddType: { |
|
|
|
categoryId:"", |
|
|
|
kindId: "1", |
|
|
|
typeLabel: "", |
|
|
|
}, |
|
|
|
submitForm(formName) { |
|
|
|
this.$refs[formName].validate((valid) => { |
|
|
|
if (valid) { |
|
|
|
//alert('submit!'); |
|
|
|
if(this.titleTypeAddorModify=="增加类别") |
|
|
|
{ |
|
|
|
this.addType(); |
|
|
|
} |
|
|
|
else |
|
|
|
{ |
|
|
|
this.save(); |
|
|
|
} |
|
|
|
|
|
|
|
}; |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
AddDialog() { |
|
|
|
this.dialogVisibleType = true; |
|
|
|
this.titleTypeAddorModify="新增类别"; |
|
|
|
}, |
|
|
|
submitForm(formName) { |
|
|
|
this.$refs[formName].validate((valid) => { |
|
|
|
if (valid) { |
|
|
|
//alert('submit!'); |
|
|
|
if (this.titleTypeAddorModify == "新增类别") { |
|
|
|
this.addType(); |
|
|
|
} else { |
|
|
|
console.log('error submit!!'); |
|
|
|
return false; |
|
|
|
this.save(); |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
resetForm(formName) { |
|
|
|
this.$refs[formName].resetFields(); |
|
|
|
}, |
|
|
|
append(node,data) { |
|
|
|
const parent = node; |
|
|
|
this.currentParentData=parent.data; |
|
|
|
this.dialogVisibleType=true; |
|
|
|
this.titleTypeAddorModify="增加类别"; |
|
|
|
|
|
|
|
if(this.$refs['currentAddType']){ |
|
|
|
this.resetForm('currentAddType'); |
|
|
|
} else { |
|
|
|
console.log("error submit!!"); |
|
|
|
return false; |
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
addScenes(){ |
|
|
|
this.dialogVisible=false; |
|
|
|
let no=this.data[this.data.length-1].no+1; |
|
|
|
let id=this.data[this.data.length-1].id+1; |
|
|
|
|
|
|
|
this.data.push( { |
|
|
|
id: id, |
|
|
|
no:no, |
|
|
|
label: this.currentAddScenes.inputNew, |
|
|
|
children: [] |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
addType(){ |
|
|
|
|
|
|
|
}, |
|
|
|
resetForm(formName) { |
|
|
|
this.$refs[formName].resetFields(); |
|
|
|
}, |
|
|
|
//新增 |
|
|
|
addType() { |
|
|
|
var data = { |
|
|
|
categoryId: "", //分类ID。（不为空：编辑操作；为空：新增操作） |
|
|
|
categoryName: this.currentAddType.typeLabel, //分类名称 |
|
|
|
kindId:parseInt(this.currentAddType.kindId), |
|
|
|
status: true, |
|
|
|
}; |
|
|
|
|
|
|
|
CategoryAPI.AddAreaCategory(data).then((res) => { |
|
|
|
this.$message({ |
|
|
|
message: "新增类别成功", |
|
|
|
type: "success", |
|
|
|
}); |
|
|
|
this.onSearch(); |
|
|
|
this.dialogVisibleType=false; |
|
|
|
|
|
|
|
//模拟保存 |
|
|
|
this.data.forEach(i=>{ |
|
|
|
|
|
|
|
if(i.id==this.currentParentData.id) |
|
|
|
{ |
|
|
|
|
|
|
|
let no,id; |
|
|
|
if(i.children && i.children.length>0){ |
|
|
|
no=i.children[i.children.length-1].no+1; |
|
|
|
id=i.children[i.children.length-1].id+1; |
|
|
|
} |
|
|
|
else{ |
|
|
|
no=i.no+'001'; |
|
|
|
id=i.id+'001'; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
i.children.push({ |
|
|
|
id:id, |
|
|
|
label: this.currentAddType.typeLabel, |
|
|
|
no:no |
|
|
|
}); |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
save() { |
|
|
|
var data = { |
|
|
|
categoryId: this.currentAddType.categoryId, //分类ID。（不为空：编辑操作；为空：新增操作） |
|
|
|
categoryName: this.currentAddType.typeLabel, //分类名称 |
|
|
|
kindId:parseInt(this.currentAddType.kindId), |
|
|
|
status: true, |
|
|
|
}; |
|
|
|
|
|
|
|
CategoryAPI.AddAreaCategory(data).then((res) => { |
|
|
|
this.$message({ |
|
|
|
message: "修改类别成功", |
|
|
|
type: "success", |
|
|
|
}); |
|
|
|
|
|
|
|
//this.inputType |
|
|
|
}, |
|
|
|
remove(node, data) { |
|
|
|
const parent = node.parent; |
|
|
|
const children = parent.data.children || parent.data; |
|
|
|
const index = children.findIndex(d => d.id === data.id); |
|
|
|
children.splice(index, 1); |
|
|
|
}, |
|
|
|
modify(node,data){ |
|
|
|
this.titleTypeAddorModify="修改类别"; |
|
|
|
this.dialogVisibleType=true; |
|
|
|
this.currentData=data; |
|
|
|
//this.dialogVisibleM=true; |
|
|
|
//this.inputModify=data.label; |
|
|
|
this.currentAddType.typeLabel=data.label; |
|
|
|
}, |
|
|
|
save(){ |
|
|
|
|
|
|
|
//模拟保存： |
|
|
|
this.dialogVisibleType = false |
|
|
|
this.data.forEach(element => { |
|
|
|
if(element.children) |
|
|
|
{ |
|
|
|
element.children.forEach(i=>{ |
|
|
|
if(i.id===this.currentData.id) |
|
|
|
{ |
|
|
|
i.label=this.currentAddType.typeLabel; |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
this.onSearch(); |
|
|
|
this.dialogVisibleType=false; |
|
|
|
}); |
|
|
|
}, |
|
|
|
// 搜索 |
|
|
|
onSearch() { |
|
|
|
this.getList(); |
|
|
|
}, |
|
|
|
// 获取分页数据 |
|
|
|
getList() { |
|
|
|
let reqBody = { |
|
|
|
pageNumber: this.page, //页面 |
|
|
|
begNumber: this.limit, //每页条数 |
|
|
|
keyword: this.searchValue, //查询关键词条件，（为空：查全部） |
|
|
|
}; |
|
|
|
|
|
|
|
CategoryAPI.AreaCategoryQuery(reqBody).then((res) => { |
|
|
|
console.log("res", res); |
|
|
|
this.list = res.data; |
|
|
|
this.total=res.count; |
|
|
|
this.list.forEach((x) => { |
|
|
|
if (x.kindId === 2) { |
|
|
|
x.kindIdName = "固定地点"; |
|
|
|
} else { |
|
|
|
x.kindIdName = "关键字"; |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
renderContent(h, { node, data, store }) { |
|
|
|
return ( |
|
|
|
<span class="custom-tree-node"> |
|
|
|
<span>{node.label}</span> |
|
|
|
<span> |
|
|
|
<el-button size="mini" type="text" on-click={ () => this.append(data) }>Append</el-button> |
|
|
|
<el-button v-if="node.children.len==0" size="mini" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button> |
|
|
|
</span> |
|
|
|
</span>); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
// 修改 |
|
|
|
onUpdate(row) { |
|
|
|
console.log("修改", row); |
|
|
|
this.currentAddType.kindId=row.kindId+''; |
|
|
|
this.currentAddType.typeLabel=row.categoryName; |
|
|
|
this.currentAddType.categoryId=row.categoryId; |
|
|
|
this.dialogVisibleType=true; |
|
|
|
this.titleTypeAddorModify="修改类别"; |
|
|
|
}, |
|
|
|
// 删除 |
|
|
|
onDelete(row) { |
|
|
|
console.log("删除", row); |
|
|
|
}, |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.getList(); |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style> |
|
|
|
.custom-tree-node { |
|
|
|
flex: 1; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
font-size: 14px; |
|
|
|
padding-right: 8px; |
|
|
|
} |
|
|
|
.custom-tree-container .block{ |
|
|
|
width: 50%; |
|
|
|
margin-top: 5%; |
|
|
|
margin-left: 5%; |
|
|
|
} |
|
|
|
|
|
|
|
.add-btn { |
|
|
|
margin-left:10%; |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
|
|
|
<style scoped> |
|
|
|
</style> |
