|
@@ -1,38 +1,39 @@
|
|
|
<template>
|
|
|
<div class="organiza">
|
|
|
- <div class="but">
|
|
|
- <el-button type="primary" v-power="'add'" @click="insertProject">新增组织架构</el-button>
|
|
|
- </div>
|
|
|
<div class="organiza-body">
|
|
|
+ <div class="but">
|
|
|
+ <el-button type="primary" v-power="'add'" @click="insertProject"
|
|
|
+ >新增组织架构</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
<div class="tree">
|
|
|
<div class="treeTile">
|
|
|
<span>全国消防火调组织架构</span>
|
|
|
- <span style="padding-right: 100px;">操作</span>
|
|
|
+ <span style="padding-right: 100px">操作</span>
|
|
|
</div>
|
|
|
<div class="treeList">
|
|
|
<el-tree
|
|
|
- style="width: 100%"
|
|
|
+ style="width: 100%;"
|
|
|
:props="treeProps"
|
|
|
:data="treedata"
|
|
|
node-key="id"
|
|
|
- ref="treeBox"
|
|
|
+ accordion
|
|
|
default-expand-all
|
|
|
- :expand-on-click-node="false"
|
|
|
>
|
|
|
- <template #default="{ node, data }">
|
|
|
+ <template #default="{ node, data }">
|
|
|
<span class="custom-tree-node">
|
|
|
<span>{{ data.name }}</span>
|
|
|
- <span class="butList">
|
|
|
- <a @click="seeDetail(data,node)" v-power="'view'"> 查看 </a>
|
|
|
+ <div class="butList" v-if="data.id != '1'">
|
|
|
+ <a @click="seeDetail(data, node)" v-power="'view'"> 查看 </a>
|
|
|
<a @click="insertProject(data)" v-power="'edit'"> 编辑 </a>
|
|
|
<a
|
|
|
style="color: var(--primaryColor)"
|
|
|
- @click="remove(data.id)"
|
|
|
+ @click="remove(data.id)"
|
|
|
v-power="'del'"
|
|
|
>
|
|
|
删除
|
|
|
</a>
|
|
|
- </span>
|
|
|
+ </div>
|
|
|
</span>
|
|
|
</template>
|
|
|
</el-tree>
|
|
@@ -65,14 +66,16 @@
|
|
|
</el-radio-group>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="上级组织" class="mandatory">
|
|
|
- <el-cascader v-if="detailType == '新增'"
|
|
|
+ <el-cascader
|
|
|
+ v-if="detailType == '新增'"
|
|
|
style="width: 100%"
|
|
|
v-model="superiorValue"
|
|
|
:options="treedata"
|
|
|
- :props="{ checkStrictly: true,label:'name',value:'id' }"
|
|
|
+ :props="{ checkStrictly: true, label: 'name', value: 'id' }"
|
|
|
@change="handleChange"
|
|
|
></el-cascader>
|
|
|
- <el-input v-else
|
|
|
+ <el-input
|
|
|
+ v-else
|
|
|
v-model="detail.parentName"
|
|
|
:disabled="true"
|
|
|
placeholder="请输入组织名称"
|
|
@@ -87,14 +90,15 @@
|
|
|
</el-form-item>
|
|
|
<el-form-item label="联系电话">
|
|
|
<el-input
|
|
|
- v-model="detail.phone"
|
|
|
+ v-model.trim="detail.phone"
|
|
|
maxlength="50"
|
|
|
placeholder="请输入联系电话"
|
|
|
></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="备注">
|
|
|
- <el-input
|
|
|
+ <el-input
|
|
|
v-model="detail.remark"
|
|
|
+ maxlength="500"
|
|
|
type="textarea"
|
|
|
placeholder="请输入备注"
|
|
|
></el-input>
|
|
@@ -108,7 +112,7 @@
|
|
|
enterText="确定"
|
|
|
title="查看组织架构"
|
|
|
>
|
|
|
- <see-info :required="true" :detail="seeData"/>
|
|
|
+ <see-info :required="true" :detail="seeData" />
|
|
|
</com-dialog>
|
|
|
|
|
|
<!-- <com-dialog
|
|
@@ -130,35 +134,39 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { reactive, toRefs,onMounted } from "vue"; //computed watch ref
|
|
|
+import { reactive, toRefs, onMounted } from "vue"; //computed watch ref
|
|
|
import comDialog from "@/components/dialog";
|
|
|
-import user from '@/state/user'
|
|
|
-import axios from 'axios';
|
|
|
-import {useRoute} from 'vue-router'
|
|
|
+import user from "@/state/user";
|
|
|
+import axios from "axios";
|
|
|
+import { useRoute } from "vue-router";
|
|
|
import seeInfo from "./seeInfo.vue";
|
|
|
+import {PHONE} from '@/constant/REG'
|
|
|
import { getApp } from "@/app";
|
|
|
import {
|
|
|
- getTreeselect,delTreeitem,addTreeitem,editTreeitem
|
|
|
-} from '@/request/config'
|
|
|
+ getTreeselect,
|
|
|
+ delTreeitem,
|
|
|
+ addTreeitem,
|
|
|
+ editTreeitem,
|
|
|
+} from "@/request/config";
|
|
|
|
|
|
export default {
|
|
|
name: "camera",
|
|
|
setup() {
|
|
|
- const rout = useRoute()
|
|
|
- console.log('rout',rout)
|
|
|
+ const rout = useRoute();
|
|
|
+ console.log("rout", rout);
|
|
|
const data = reactive({
|
|
|
show: false,
|
|
|
tipsShow: false,
|
|
|
seeShow: false,
|
|
|
infoShow: false,
|
|
|
- detailType:'新增',
|
|
|
- seeData:{
|
|
|
- name:'test',
|
|
|
- deptType:'1',
|
|
|
- superior:'sheq',
|
|
|
- leader:'负责人',
|
|
|
- phone:'',
|
|
|
- remark:'test',
|
|
|
+ detailType: "新增",
|
|
|
+ seeData: {
|
|
|
+ name: "test",
|
|
|
+ deptType: "1",
|
|
|
+ superior: "sheq",
|
|
|
+ leader: "负责人",
|
|
|
+ phone: "",
|
|
|
+ remark: "test",
|
|
|
},
|
|
|
detail: {
|
|
|
name: "",
|
|
@@ -168,72 +176,77 @@ export default {
|
|
|
superiorValue: [],
|
|
|
treedata: [],
|
|
|
});
|
|
|
- const seeDetail = (val) =>{
|
|
|
+ const seeDetail = (val) => {
|
|
|
// console.log('seeDetail',getApp().$refs)
|
|
|
// getApp().$refs.treeBox.setCurrentKey(user.info.id)
|
|
|
- console.log('seeDetail',val)
|
|
|
+ console.log("getApp().$ref", getApp().$refs);
|
|
|
data.seeData = {
|
|
|
- superior:val.order,
|
|
|
- ...val
|
|
|
- }
|
|
|
- data.seeShow = true
|
|
|
- }
|
|
|
+ superior: val.order,
|
|
|
+ ...val,
|
|
|
+ };
|
|
|
+ data.seeShow = true;
|
|
|
+ };
|
|
|
const handleNodeClick = (data) => {
|
|
|
console.log(data);
|
|
|
};
|
|
|
const submit = async () => {
|
|
|
- console.log('getApp().$ref',getApp())
|
|
|
- const { name, deptType,parentId} = data.detail;
|
|
|
- const { detailType } = data
|
|
|
+ const { name, deptType, parentId,phone } = data.detail;
|
|
|
+ const { detailType } = data;
|
|
|
if (!name) {
|
|
|
return getApp().$message.error("组织名称不能为空!", "提示");
|
|
|
} else if (!deptType) {
|
|
|
return getApp().$message.error("组织类型不能为空!", "提示");
|
|
|
} else if (!parentId) {
|
|
|
return getApp().$message.error("上级组织不能为空!", "提示");
|
|
|
+ } else if( phone && !PHONE.REG.test(phone)){
|
|
|
+ return getApp().$message.error('联系电话格式不正确', "提示");
|
|
|
}
|
|
|
//校验成功后温馨提示
|
|
|
let apidata = {
|
|
|
- superior:'sheq',
|
|
|
- ...data.detail
|
|
|
- }
|
|
|
- let requestApi = addTreeitem
|
|
|
- if(detailType == '编辑'){
|
|
|
- requestApi = editTreeitem
|
|
|
+ superior: "sheq",
|
|
|
+ ...data.detail,
|
|
|
+ };
|
|
|
+ let requestApi = addTreeitem;
|
|
|
+ if (detailType == "编辑") {
|
|
|
+ requestApi = editTreeitem;
|
|
|
}
|
|
|
- let res = await axios.post(requestApi, apidata)
|
|
|
- getTreedata()
|
|
|
- console.log('async',res,data);
|
|
|
- if(detailType == '编辑'){
|
|
|
- getApp().$message({message: '操作成功', type: 'success'});
|
|
|
- }else{
|
|
|
- getApp().$confirm('组织创建成功,快去创建用户吧', '温馨提示',{
|
|
|
- confirmButtonText: '我知道了',
|
|
|
- showCancelButton:false,
|
|
|
- cancelButtonText: 'Cancel',
|
|
|
- })
|
|
|
+ let res = await axios.post(requestApi, apidata);
|
|
|
+ getTreedata();
|
|
|
+ console.log("async", res, data);
|
|
|
+ if (detailType == "编辑") {
|
|
|
+ getApp().$message({ message: "操作成功", type: "success" });
|
|
|
+ } else {
|
|
|
+ getApp().$confirm("组织创建成功,快去创建用户吧", "温馨提示", {
|
|
|
+ confirmButtonText: "我知道了",
|
|
|
+ showCancelButton: false,
|
|
|
+ cancelButtonText: "Cancel",
|
|
|
+ callback:()=>{
|
|
|
+ setTimeout(()=>{
|
|
|
+ getApp().$router.push({name: 'user'})
|
|
|
+ },500)
|
|
|
+ }
|
|
|
+ });
|
|
|
}
|
|
|
- data.detail = {}
|
|
|
- data.show = false
|
|
|
- data.superiorValue = []
|
|
|
+ data.detail = {};
|
|
|
+ data.show = false;
|
|
|
+ data.superiorValue = [];
|
|
|
};
|
|
|
const insertProject = (val) => {
|
|
|
- console.log('insertProject',val.id);
|
|
|
- if(val.id){
|
|
|
- data.detailType = '编辑'
|
|
|
- data.detail = {
|
|
|
- ...val
|
|
|
+ console.log("insertProject", val.id);
|
|
|
+ if (val.id) {
|
|
|
+ data.detailType = "编辑";
|
|
|
+ data.detail = {
|
|
|
+ ...val,
|
|
|
+ };
|
|
|
+ } else {
|
|
|
+ data.detailType = "新增";
|
|
|
+ data.detail = {};
|
|
|
}
|
|
|
- }else{
|
|
|
- data.detailType = '新增'
|
|
|
- data.detail = {}
|
|
|
- }
|
|
|
data.show = true;
|
|
|
};
|
|
|
const handleChange = (val) => {
|
|
|
- data.detail.parentId = val&&val[val.length-1]
|
|
|
- console.log("点击handleChange", val.length,data);
|
|
|
-
|
|
|
+ data.detail.parentId = val && val[val.length - 1];
|
|
|
+ console.log("点击handleChange", val.length, data);
|
|
|
};
|
|
|
const loadNode = (node, resolve) => {
|
|
|
if (node.level === 0) {
|
|
@@ -256,22 +269,25 @@ export default {
|
|
|
}, 500);
|
|
|
};
|
|
|
const remove = async (val) => {
|
|
|
- let isOk = await getApp().$confirm('当前组织下尚存在用户或绑定的相机,删除组织将一并删除,确认要删除组织吗?', '删除')
|
|
|
- if(isOk){
|
|
|
- let res = await axios.post(delTreeitem+val)
|
|
|
- console.log("isOk",isOk, val,res);
|
|
|
- getApp().$message({message: '删除成功', type: 'success'});
|
|
|
- getTreedata()
|
|
|
+ let isOk = await getApp().$confirm(
|
|
|
+ "当前组织下尚存在用户或绑定的相机,删除组织将一并删除,确认要删除组织吗?",
|
|
|
+ "删除"
|
|
|
+ );
|
|
|
+ if (isOk) {
|
|
|
+ let res = await axios.post(delTreeitem + val);
|
|
|
+ console.log("isOk", isOk, val, res);
|
|
|
+ getApp().$message({ message: "删除成功", type: "success" });
|
|
|
+ getTreedata();
|
|
|
}
|
|
|
};
|
|
|
- const getTreedata = async () =>{
|
|
|
- let res = await axios.get(getTreeselect, {})
|
|
|
- data.treedata = res.data
|
|
|
+ const getTreedata = async () => {
|
|
|
+ let res = await axios.get(getTreeselect, {});
|
|
|
+ data.treedata = res.data;
|
|
|
// getApp().$ref.treeBox.setCurrentKey(user.info.id)
|
|
|
- }
|
|
|
- onMounted(async ()=>{
|
|
|
- getTreedata()
|
|
|
- })
|
|
|
+ };
|
|
|
+ onMounted(async () => {
|
|
|
+ getTreedata();
|
|
|
+ });
|
|
|
return {
|
|
|
// treedata,
|
|
|
...toRefs(data),
|
|
@@ -296,7 +312,7 @@ export default {
|
|
|
|
|
|
components: {
|
|
|
"com-dialog": comDialog,
|
|
|
- "see-info":seeInfo
|
|
|
+ "see-info": seeInfo,
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
@@ -304,7 +320,7 @@ export default {
|
|
|
<style lang="scss" scoped>
|
|
|
.organiza {
|
|
|
.but {
|
|
|
- padding: 16px;
|
|
|
+ padding: 0 16px 16px 16px;
|
|
|
background-color: #fff;
|
|
|
text-align: right;
|
|
|
}
|
|
@@ -334,6 +350,8 @@ export default {
|
|
|
padding: 12px 20px;
|
|
|
}
|
|
|
.treeList {
|
|
|
+ max-height: 500px;
|
|
|
+ overflow-y: auto;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
.custom-tree-node {
|
|
@@ -344,6 +362,7 @@ export default {
|
|
|
font-size: 14px;
|
|
|
padding-right: 8px;
|
|
|
.butList {
|
|
|
+ width: 140px;
|
|
|
a {
|
|
|
margin: 0 8px;
|
|
|
}
|
|
@@ -410,15 +429,4 @@ export default {
|
|
|
color: #646566;
|
|
|
}
|
|
|
|
|
|
-.table .tip {
|
|
|
- text-overflow: -o-ellipsis-lastline;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-line-clamp: 2;
|
|
|
- line-clamp: 2;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- height: 50px;
|
|
|
- white-space: initial;
|
|
|
-}
|
|
|
</style>
|