Commit e7765b84 authored by 何小勇's avatar 何小勇

组织管理

parent bc64f5f2
...@@ -18,7 +18,11 @@ ...@@ -18,7 +18,11 @@
width: item.copy ? 'calc(100% - 36px)' : item.download || item.password ? 'calc(100% - 22px)': '100%', width: item.copy ? 'calc(100% - 36px)' : item.download || item.password ? 'calc(100% - 22px)': '100%',
color: item.download ? '#3759be' : '#404a62' color: item.download ? '#3759be' : '#404a62'
}" }"
>{{ item.value }}</span> >
<span v-if="item.state" :style="{color: stateColor[item.state]}"> <span class="state-dot" :style="{backgroundColor: stateColor[item.state]}"></span>{{item.value}}</span>
<span v-else-if="item.secret">{{secret(item.value)}}</span>
<span v-else>{{ item.value }}</span>
</span>
<a <a
class="copy-btn" class="copy-btn"
@click="copyText(item.value, $event)" @click="copyText(item.value, $event)"
...@@ -26,6 +30,7 @@ ...@@ -26,6 +30,7 @@
> >
复制 复制
</a> </a>
<bg-icon v-if="item.copy_icon" @click="copyIcon(item.value)" class="copy-btn" style="font-size: 14px; color: #a9b1c7;cursor: pointer;" icon="#bg-ic-copy"></bg-icon>
<bg-icon <bg-icon
class="copy-btn" class="copy-btn"
style="font-size: 14px; color: #a9b1c7;cursor: pointer;" style="font-size: 14px; color: #a9b1c7;cursor: pointer;"
...@@ -61,9 +66,18 @@ export default { ...@@ -61,9 +66,18 @@ export default {
default: 2, default: 2,
}, },
}, },
model: {
prop: 'data',
event: 'newValue'
},
data() { data() {
return { return {
show: false show: false,
stateColor: {
success: '#48ad97',
danger: '#d75138',
default: '#787878'
}
} }
}, },
methods: { methods: {
...@@ -81,6 +95,8 @@ export default { ...@@ -81,6 +95,8 @@ export default {
}); });
}, },
copyText(text, e) { copyText(text, e) {
console.log(text)
console.log(e)
const clipboard = new Clipboard(e.target, { const clipboard = new Clipboard(e.target, {
text: () => text, text: () => text,
}); });
...@@ -101,6 +117,15 @@ export default { ...@@ -101,6 +117,15 @@ export default {
// 解决第一次点击不生效的问题,如果没有,第一次点击会不生效 // 解决第一次点击不生效的问题,如果没有,第一次点击会不生效
clipboard.onClick(e); clipboard.onClick(e);
}, },
copyIcon(data) {
navigator.clipboard.writeText(data).then(
function () {
},
function () {
}
);
},
download(url) { download(url) {
const a = document.createElement("a"); // 创建a标签 const a = document.createElement("a"); // 创建a标签
a.setAttribute("download", ""); // download属性 a.setAttribute("download", ""); // download属性
...@@ -114,6 +139,15 @@ export default { ...@@ -114,6 +139,15 @@ export default {
item.value = "***************" item.value = "***************"
} }
this.show = !this.show this.show = !this.show
},
secret(value) {
const len = value.length;
const str1 = value.substring(0,3);
const str2 = value.substring(value.length-6,value.length);
const passwordStr = value.substring(3,value.length-6).split('').map(item => '*').join('');
console.log(8888888)
console.log(passwordStr)
return str1+passwordStr+str2
} }
}, },
}; };
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
:class="{ 'is-disabled': actionDisabled, 'is-easy': isEasy }" :class="{ 'is-disabled': actionDisabled, 'is-easy': isEasy }"
> >
<el-upload <el-upload
action="/apaas/static/file/upload" action="/apaas/common/file/upload"
:data="{ :data="{
directory: 'file', directory: 'file',
uniqueCode: false, uniqueCode: false,
......
...@@ -1502,6 +1502,14 @@ a { ...@@ -1502,6 +1502,14 @@ a {
cursor: pointer; cursor: pointer;
margin-left: 8px; margin-left: 8px;
} }
.state-dot {
padding: 4px;
display: inline-block;
height: 5px;
width: 5px;
border-radius: 10px;
margin-right: 5px;
}
} }
} }
......
...@@ -157,7 +157,7 @@ const getContactFormData = (data) => { ...@@ -157,7 +157,7 @@ const getContactFormData = (data) => {
}else { }else {
let params = { let params = {
organization_id: formData.value.organization_id, organization_id: formData.value.organization_id,
system_role_id: "ab98a936-9046-455b-aba3-4c73671024d0", // system_role_id: "ab98a936-9046-455b-aba3-4c73671024d0",
logo: formData.value.logo && formData.value.logo.length > 0 ? formData.value.logo[0].url : '', logo: formData.value.logo && formData.value.logo.length > 0 ? formData.value.logo[0].url : '',
password: CryptoJS.AES.encrypt(formData.value.password,"swuE9cmCZQwrkYRV").toString(), password: CryptoJS.AES.encrypt(formData.value.password,"swuE9cmCZQwrkYRV").toString(),
business_code: formData.value.business_code, business_code: formData.value.business_code,
...@@ -197,7 +197,7 @@ const continueCreate = () => { ...@@ -197,7 +197,7 @@ const continueCreate = () => {
systemFormRef.value.clearForm(); systemFormRef.value.clearForm();
contactFormRef.value.clearForm(); contactFormRef.value.clearForm();
step.value = 1; step.value = 1;
successFlag = false; successFlag.value = false;
} }
//取消 //取消
const cancel = () => { const cancel = () => {
......
...@@ -16,7 +16,8 @@ ...@@ -16,7 +16,8 @@
</div> </div>
<div class="info_content"> <div class="info_content">
<div class="img_box"> <div class="img_box">
<img src="/src/assets/imgs/home_ic_user.png" style="height: 96px;width: 96px;border-radius: 99px" alt=""> <img v-if="logo" :src="logo" style="height: 96px;width: 96px;border-radius: 99px" alt="">
<img v-else src="/src/assets/imgs/home_ic_user.png" style="height: 96px;width: 96px;border-radius: 99px" alt="">
</div> </div>
<div class="info_box"> <div class="info_box">
<bg-info :data="baseInfo"></bg-info> <bg-info :data="baseInfo"></bg-info>
...@@ -44,71 +45,75 @@ ...@@ -44,71 +45,75 @@
import { reactive, toRefs, ref, } from '@vue/reactivity' import { reactive, toRefs, ref, } from '@vue/reactivity'
import { getCurrentInstance } from 'vue' import { getCurrentInstance } from 'vue'
import { computed, onBeforeMount } from '@vue/runtime-core' import { computed, onBeforeMount } from '@vue/runtime-core'
import { useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const { proxy } = getCurrentInstance()
const { $axios,$message } = proxy
const baseInfo = reactive( const baseInfo = reactive(
[ [{
{
name: "所属机构", name: "所属机构",
value: "某某省/某某市/大数据局", value: "",
nameWidth: 112 nameWidth: 130
}, },
{ {
name: "业务系统编码", name: "业务系统编码",
value: "00000001", value: "",
nameWidth: 112 nameWidth: 130
}, },
{ {
name: "业务系统名称", name: "业务系统名称",
value: "大数据处理系统", value: "",
nameWidth: 112 nameWidth: 130
}, },
{ {
name: "账号", name: "账号",
value: "admin001", value: "",
nameWidth: 112 nameWidth: 130
}, },
{ {
name: "AppID", name: "AppID",
value: "dasjkjjk", value: "",
nameWidth: 112 nameWidth: 130
}, },
{ {
name: "AppSecret", name: "AppSecret",
value: "asda*******************jhjh", value: "",
nameWidth: 112 copy_icon: true,
secret: true,
nameWidth: 130
}, },
{ {
name: "创建人", name: "创建人",
value: "admin(机构管理员)", value: "",
nameWidth: 112 nameWidth: 130
}, },
{ {
name: "创建时间", name: "创建时间",
value: "2022-01-01 10:10:10", value: "",
nameWidth: 112 nameWidth: 130
}, },
{ {
name: "是否启用", name: "是否启用",
value: "", value: "",
nameWidth: 112 state: "",
nameWidth: 130
}, },
{ {
name: "开发厂商名", name: "开发厂商名",
value: "某某大数据开发商", value: "",
nameWidth: 112 nameWidth: 130
}, },
{ {
name: "访问地址", name: "访问地址",
value: "http://www.bigdata.com", value: "",
full: true, full: true,
nameWidth: 112 nameWidth: 130
}, },
{ {
name: "业务系统描述", name: "业务系统描述",
value: "系统描述系统描述系统描述系统描述系统描述系统描述系统描述系统描述系统描述系统描述系统描述系统描述系统描述系统描述系统描述系统描述", value: "",
full: true, full: true,
nameWidth: 112 nameWidth: 130
}, },
] ]
) )
...@@ -116,31 +121,62 @@ const baseInfo = reactive( ...@@ -116,31 +121,62 @@ const baseInfo = reactive(
const contactInfo = reactive( const contactInfo = reactive(
[{ [{
name: "联系人姓名", name: "联系人姓名",
value: "xxx", value: "",
nameWidth: 112 nameWidth: 130
}, },
{ {
name: "联系人手机号", name: "联系人手机号",
value: "15627365265", value: "",
nameWidth: 112 nameWidth: 130
}, },
{ {
name: "联系人邮箱", name: "联系人邮箱",
value: "http://www.bigdata@163.com", value: "",
full: true, full: true,
nameWidth: 112 nameWidth: 130
}, },
{ {
name: "备注", name: "备注",
value: "系统描述系统描述系统描述系统描述系统描述系统描述系统描述系统描述系统描述系统描述系统描述系统描述系统描述系统描述系统描述系统描述", value: "",
full: true, full: true,
nameWidth: 112 nameWidth: 130
}, },
] ])
) const logo = ref('')
onBeforeMount(() => { const getDetail = () => {
$axios.get(`/apaas/system/v5/user/detail/${route.query.id}`)
.then((res) => {
if (res.data.code == 200) {
const detail = res.data.data;
baseInfo[0].value = detail.organization_name;
baseInfo[1].value = detail.business_code;
baseInfo[2].value = detail.business_name;
baseInfo[3].value = detail.system_account;
baseInfo[4].value = detail.app_id;
baseInfo[5].value = detail.app_secret;
baseInfo[6].value = detail.created_by;
baseInfo[7].value = detail.created_time;
baseInfo[8].value = detail.state === 1 ? '' : '';
baseInfo[8].state = detail.state === 1 ? 'success' : 'default';
baseInfo[9].value = detail.develop_id;
baseInfo[10].value = detail.access_address;
baseInfo[11].value = detail.business_desc;
contactInfo[0].value = detail.contact_name;
contactInfo[1].value = detail.contact_phone;
contactInfo[2].value = detail.contact_email;
contactInfo[3].value = detail.remark;
logo.value = detail.logo;
}else {
$message.error(res.data.msg)
}
})
}
onBeforeMount(() => {
getDetail()
}) })
</script> </script>
......
...@@ -14,13 +14,13 @@ ...@@ -14,13 +14,13 @@
<div class="tree_content"> <div class="tree_content">
<div class="search"> <div class="search">
<el-input <el-input
v-model="search" v-model="filterTree"
placeholder="请输入组织名称搜索" placeholder="请输入组织名称搜索"
:prefix-icon="Search" :prefix-icon="Search"
/> />
</div> </div>
<div class="tree"> <div class="tree">
<el-tree :data="orgData" :props="defaultProps" @node-click="handleNodeClick" :default-expand-all="true"> <el-tree ref="treeRef" :data="orgData" :props="defaultProps" @node-click="handleNodeClick" :filter-node-method="filterNode" :default-expand-all="true">
<template #default="{ node, data }"> <template #default="{ node, data }">
<div class="custom_tree_node"> <div class="custom_tree_node">
<span <span
...@@ -196,7 +196,7 @@ ...@@ -196,7 +196,7 @@
<script setup> <script setup>
import { Search } from '@element-plus/icons-vue' import { Search } from '@element-plus/icons-vue'
import { reactive, toRefs, ref, } from '@vue/reactivity' import { reactive, toRefs, ref, } from '@vue/reactivity'
import { getCurrentInstance } from 'vue' import { getCurrentInstance, watch } from 'vue'
import { computed, onBeforeMount } from '@vue/runtime-core' import { computed, onBeforeMount } from '@vue/runtime-core'
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { edit } from 'ace-builds'; import { edit } from 'ace-builds';
...@@ -266,7 +266,9 @@ import CryptoJS from "crypto-js"; ...@@ -266,7 +266,9 @@ import CryptoJS from "crypto-js";
password: '', password: '',
confirm_password: '', confirm_password: '',
}) })
const selectNode = ref(null)
const filterTree = ref('')
const treeRef = ref(null)
const validatePass = (rule, value, callback) => { const validatePass = (rule, value, callback) => {
if (value !== passwordForm.password) { if (value !== passwordForm.password) {
callback(new Error("密码输入不一致")) callback(new Error("密码输入不一致"))
...@@ -288,11 +290,11 @@ import CryptoJS from "crypto-js"; ...@@ -288,11 +290,11 @@ import CryptoJS from "crypto-js";
const router = useRouter(); const router = useRouter();
const getTableRows = () => { const getTableRows = () => {
let params = {...filter} let params = {...filter, organization_id: selectNode.value}
$axios.get( $axios.get(
`/apaas/system/v5/user/list`, `/apaas/system/v5/user/list`,
{ {
params, params
} }
) )
.then((res) => { .then((res) => {
...@@ -312,7 +314,11 @@ import CryptoJS from "crypto-js"; ...@@ -312,7 +314,11 @@ import CryptoJS from "crypto-js";
} }
const handleNodeClick = (data) => { const handleNodeClick = (data) => {
console.log(data) console.log(data.data_type)
if(data.data_type == 1) {
selectNode.value = data.id;
}
console.log(selectNode)
} }
const orgData = ref([]) const orgData = ref([])
...@@ -327,12 +333,41 @@ import CryptoJS from "crypto-js"; ...@@ -327,12 +333,41 @@ import CryptoJS from "crypto-js";
.then((res) => { .then((res) => {
if (res.data.code == 200) { if (res.data.code == 200) {
orgData.value = res.data.data || []; orgData.value = res.data.data || [];
const orgList = searchOrg(res.data.data);
selectNode.value = orgList.length > 1 ? orgList[1].id : '';
getTableRows()
}else { }else {
$message.error(res.data.msg) $message.error(res.data.msg)
} }
}) })
} }
const searchOrg = (data) => {
const arr = []
data.forEach(item => {
if(item.data_type === 1) {
arr.push(item);
return
}else {
if(item.Child){
searchOrg(item.Child)
}else {
return
}
}
})
return arr;
}
watch(filterTree, (val) => {
treeRef.value.filter(val)
})
const filterNode = (value, data) => {
if (!value) return true
return data.name.includes(value)
}
const stateChange = (row) => { const stateChange = (row) => {
const state = row.state.toString(); const state = row.state.toString();
$axios.post( $axios.post(
...@@ -503,7 +538,7 @@ import CryptoJS from "crypto-js"; ...@@ -503,7 +538,7 @@ import CryptoJS from "crypto-js";
onBeforeMount(() => { onBeforeMount(() => {
getOrgTree() getOrgTree()
getTableRows() //getTableRows()
}) })
......
...@@ -7,10 +7,11 @@ ...@@ -7,10 +7,11 @@
ref="directoryRef" ref="directoryRef"
style="max-width: 80%" style="max-width: 80%"
> >
<el-form-item label="上级目录" prop="parent"> <el-form-item label="上级目录" prop="p_organization_id" v-if="formType === 'create'">
<el-input v-model="directoryForm.parent" style="width: 80%;" /> <!-- <el-input v-model="directoryForm.p_organization_id" style="width: 80%;" /> -->
<el-tree-select v-model="directoryForm.p_organization_id" :data="orgData" :props="treeProps" :render-after-expand="false" :filter-node-method="filterNode" :disabled="directoryForm.level" :check-strictly="true" style="width: 80%;" />
<el-form-item label="" style="padding-left: 16px"> <el-form-item label="" style="padding-left: 16px">
<el-checkbox v-model="directoryForm.level" label="顶级"/> <el-checkbox v-model="directoryForm.level" @change="isTop" label="顶级"/>
</el-form-item> </el-form-item>
</el-form-item> </el-form-item>
...@@ -21,26 +22,34 @@ ...@@ -21,26 +22,34 @@
</template> </template>
<script setup> <script setup>
import { reactive, ref, onMounted } from 'vue' import { reactive, ref, onMounted, onBeforeMount, getCurrentInstance, nextTick } from 'vue'
const props = defineProps({
formType: {
type: String,
default: 'create', //false 新建 true 编辑
},
});
const { proxy } = getCurrentInstance()
const { $axios,$message } = proxy
const directoryForm = reactive({ const directoryForm = reactive({
parent: '', p_organization_id: '',
name: '', name: '',
level: '' level: false
}) })
const directoryFormRules = reactive({ const directoryFormRules = reactive({
parent: [ p_organization_id: [
{ required: true, message: '请输入上级目录', trigger: 'blur' }, { required: true, message: '请输入上级目录', trigger: 'blur' },
], ],
name: [ name: [
{ required: true, message: '请输入名称', trigger: 'blur' }, { required: true, message: '请输入名称', trigger: 'blur' },
], ],
}) })
const directoryRef = ref(null) const directoryRef = ref(null)
const emit = defineEmits(['action']) const emit = defineEmits(['action'])
const submitForm = async () => { const submitForm = async () => {
if (!directoryRef) return if (!directoryRef) return
await directoryRef.value.validate((valid, fields) => { await directoryRef.value.validate((valid, fields) => {
if (valid) { if (valid) {
...@@ -49,19 +58,51 @@ const submitForm = async () => { ...@@ -49,19 +58,51 @@ const submitForm = async () => {
emit('action',null) emit('action',null)
} }
}) })
} }
const clearForm = () => { const clearForm = () => {
if (!directoryRef) return if (!directoryRef) return
directoryRef.value.resetFields() directoryRef.value.resetFields()
} }
const setForm = (data) => { const setForm = (data) => {
directoryForm.value = Object.assign(directoryForm, data); directoryForm.value = Object.assign(directoryForm, data);
} }
onMounted(() => { const orgData = ref([])
const treeProps = {
label: 'name',
children: 'Child',
value: 'organization_id'
}
const getOrgTree = () => {
$axios.get(`/apaas/system/v5/org/tree`)
.then((res) => {
if (res.data.code == 200) {
orgData.value = res.data.data || [];
// nextTick(() => {
// filterNode();
// })
}else {
$message.error(res.data.msg)
}
})
}
}) const filterNode = (value, data) => {
return data.data_type === 0
}
const isTop = (data) => {
directoryForm.p_organization_id = data ? ' ' : ''; //空格绕过表单非空校验
}
onBeforeMount(() =>{
getOrgTree()
})
onMounted(() => {
})
defineExpose({ submitForm, clearForm, setForm }) defineExpose({ submitForm, clearForm, setForm })
</script> </script>
\ No newline at end of file
...@@ -17,22 +17,39 @@ ...@@ -17,22 +17,39 @@
v-model="search" v-model="search"
placeholder="请输入组织名称搜索" placeholder="请输入组织名称搜索"
:prefix-icon="Search" :prefix-icon="Search"
@input="searchChange"
/> />
</div> </div>
<div class="tree"> <div class="tree">
<tree @create="treeCreate"></tree> <tree ref="orgTree" @action="treeAction" @select="treeSelect"></tree>
</div> </div>
</div> </div>
</div> </div>
<div class="flex_right"> <div class="flex_right">
<div class="info_container bgc_white"> <div class="info_container bgc_white">
<div class="title"><span class="icon_box"><bg-icon class="step_icon" icon="#bg-ic-file"></bg-icon></span> 基本信息 <bg-icon style="font-size: 14px" class="step_icon" icon="#bg-ic-arrow-right"></bg-icon> </div> <div class="title"><span class="icon_box"><bg-icon class="step_icon" icon="#bg-ic-file"></bg-icon></span> 基本信息 <bg-icon style="font-size: 14px" class="step_icon" icon="#bg-ic-arrow-right"></bg-icon> </div>
<bg-info :data="baseInfo"></bg-info> <bg-info v-if="selectTreeDataType === 1" :data="baseInfo"></bg-info>
<bg-info v-if="selectTreeDataType === 2" :data="baseInfo2"></bg-info>
</div> </div>
<div class="main_container bgc_white"> <div class="main_container bgc_white">
<bg-filter-group @search="getTableRows" v-model="filter.search" placeholder="请输入关键字">
<template v-slot:left_action>
<div class="apaas_button"> <div class="apaas_button">
<el-button type="primary" @click="addAccount(0)">新建</el-button><el-button @click="addAccount(1)">编辑</el-button> <el-button class="register_btn" type="primary" @click="addAccount">
<bg-icon style="font-size: 12px; color: #fff; margin-right: 8px" icon="#bg-ic-add"></bg-icon>
{{selectTreeDataType === 1 ? '新增组织管理员' : '新增平台用户' }}
</el-button>
<!-- <el-button class="register_btn" @click="deleteBatch">
批量删除
</el-button>
<el-button class="register_btn" @click="resetPsd">
重置密码
</el-button>
<span class="header_info">已选择<span style="color: #202531;font-weight: bold">{{selected.length}}</span></span>
<span class="header_info name_btn" @click="clearSelected">清空</span> -->
</div> </div>
</template>
</bg-filter-group>
<div class="table_container apaas_scroll"> <div class="table_container apaas_scroll">
<bg-table ref="bgTable" :headers="headers" :rows="tableRows" :isIndex="true" :stripe="true"> <bg-table ref="bgTable" :headers="headers" :rows="tableRows" :isIndex="true" :stripe="true">
<template v-slot:account="{ row }"> <template v-slot:account="{ row }">
...@@ -54,9 +71,9 @@ ...@@ -54,9 +71,9 @@
</bg-table> </bg-table>
<div class="pagination_box"> <div class="pagination_box">
<bg-pagination <bg-pagination
:page="1" :page="filter.page"
:size="10" :size="filter.limit"
:total="100" :total="tableTotal"
@change-page="changePage" @change-page="changePage"
@change-size="changeSize" @change-size="changeSize"
> >
...@@ -71,9 +88,10 @@ ...@@ -71,9 +88,10 @@
:title="action === 'create' ? '新增目录' : '编辑目录' " :title="action === 'create' ? '新增目录' : '编辑目录' "
width="758px" width="758px"
:before-close="handleCloseDirectoryDirectory" :before-close="handleCloseDirectoryDirectory"
destroy-on-close
> >
<div class="dialog_form"> <div class="dialog_form">
<directoryForm ref="directoryFormRef" @action="getDirectoryFromData"></directoryForm> <directoryForm ref="directoryFormRef" :form-type="directoryFormType" @action="getDirectoryFromData"></directoryForm>
</div> </div>
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer">
...@@ -87,9 +105,10 @@ ...@@ -87,9 +105,10 @@
:title="action === 'create' ? '新增组织' : '编辑组织'" :title="action === 'create' ? '新增组织' : '编辑组织'"
width="758px" width="758px"
:before-close="handleCloseOrg" :before-close="handleCloseOrg"
destroy-on-close
> >
<div class="dialog_form"> <div class="dialog_form">
<orgForm ref="orgFormRef" @action="getOrgFromData"></orgForm> <orgForm ref="orgFormRef" :form-type="orgFormType" @action="getOrgFormData"></orgForm>
</div> </div>
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer">
...@@ -98,6 +117,22 @@ ...@@ -98,6 +117,22 @@
</span> </span>
</template> </template>
</el-dialog> </el-dialog>
<el-dialog
v-model="dialogDel"
title="删除"
width="520px"
:before-close="handleCloseDel"
>
<div class="dialog_form">
确认删除吗?
</div>
<template #footer>
<span class="dialog-footer">
<el-button @click="handleCloseDel">取消</el-button>
<el-button type="primary" @click="confirmDel">确认</el-button>
</span>
</template>
</el-dialog>
</div> </div>
</template> </template>
...@@ -111,64 +146,84 @@ import tree from './tree.vue'; ...@@ -111,64 +146,84 @@ import tree from './tree.vue';
import directoryForm from './directory-form.vue'; import directoryForm from './directory-form.vue';
import orgForm from './org-form.vue'; import orgForm from './org-form.vue';
const { proxy } = getCurrentInstance()
const { $axios,$message } = proxy
const baseInfo = reactive( const baseInfo = reactive(
[ [
{ {
name: "机构类型", name: "机构类型",
value: "政务机构", value: "",
nameWidth: 130 nameWidth: 130
}, },
{ {
name: "组织机构代码", name: "组织机构代码",
value: "0000001", value: "",
nameWidth: 130 nameWidth: 130
}, },
{ {
name: "机构名称", name: "机构名称",
value: "科技局", value: "",
nameWidth: 130 nameWidth: 130
}, },
{ {
name: "创建时间", name: "创建时间",
value: "2022-10-10 10:10:10", value: "",
nameWidth: 130 nameWidth: 130
}, },
{ {
name: "组织管理员数量", name: "组织管理员数量",
value: "10", value: "",
nameWidth: 130 nameWidth: 130
}, },
{ {
name: "业务系统数量", name: "业务系统数量",
value: "22", value: "",
nameWidth: 130 nameWidth: 130
}, },
] ])
) const baseInfo2 = reactive(
[{
name: "机构名称",
value: "",
nameWidth: 130
},
{
name: "组织机构代码",
value: "",
nameWidth: 130
},
{
name: "用户数",
value: "",
nameWidth: 130,
full: true
},
])
const headers = reactive([ const headers = reactive([
{ {
label: "账号", label: "账号",
prop: "account", prop: "system_account",
width: 180 width: 180
}, },
{ {
label: "手机号", label: "手机号",
prop: "phone", prop: "contact_phone",
minWidth: 180 minWidth: 120
}, },
{ {
label: "角色", label: "角色",
prop: "role", prop: "system_role",
width: 150 width: 150
}, },
{ {
label: "创建时间", label: "创建时间",
prop: "create_time", prop: "created_time",
width: 150 width: 150
}, },
{ {
label: "是否启用", label: "是否启用",
prop: "is_use", prop: "state",
width: 80 width: 80
}, },
{ {
...@@ -177,38 +232,42 @@ import orgForm from './org-form.vue'; ...@@ -177,38 +232,42 @@ import orgForm from './org-form.vue';
width: 220, width: 220,
fixed: "right", fixed: "right",
}, },
]) ]);
const tableRows = reactive([
{account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: ""},
{account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: ""},
{account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: ""},
{account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: ""},
{account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: ""},
{account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: ""},
{account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: ""},
{account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: ""},
{account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: ""},
{account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: ""},
{account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: ""},
{account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: ""},
{account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: ""},
{account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: ""},
{account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: ""},
{account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: ""},
{account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: ""},
])
const search=ref("");
const tableRows = ref([]);
const tableTotal = ref(0);
const search = ref("");
const orgTree = ref(null);
const selectTreeData = ref(null)
const selectTreeDataType = ref(2);
const dialogDel = ref(false)
const router = useRouter(); const router = useRouter();
const filter = reactive({
organization_id: '',
data_type: '',
state: '',
key_word: "",
page: 1,
limit: 10,
});
const addAccount = (params) => { const addAccount = (params) => {
if(selectTreeDataType.value === 1) {
router.push({ router.push({
path: "/system/organization/system-user", path: "/system/organization/system-user",
query: { query: {
type: params type: params
} }
}) })
}else {
router.push({
path: "/system/organization/platform-user",
query: {
type: params
}
})
}
} }
const treeSelected = ref(null); const treeSelected = ref(null);
const handleNodeClick = (data) => { const handleNodeClick = (data) => {
...@@ -226,6 +285,8 @@ import orgForm from './org-form.vue'; ...@@ -226,6 +285,8 @@ import orgForm from './org-form.vue';
} }
const dialogDirectory = ref(false) const dialogDirectory = ref(false)
const directoryFormType = ref('create')
const orgFormType = ref('create')
const handleCloseDirectory = () => { const handleCloseDirectory = () => {
dialogDirectory.value = false; dialogDirectory.value = false;
} }
...@@ -235,9 +296,42 @@ import orgForm from './org-form.vue'; ...@@ -235,9 +296,42 @@ import orgForm from './org-form.vue';
directoryFormRef.value.submitForm(); directoryFormRef.value.submitForm();
} }
//新增/编剧目录
const getDirectoryFromData = (data) => { const getDirectoryFromData = (data) => {
console.log(111111)
console.log(data) if(directoryFormType.value === 'create') {
const params = {
p_organization_id: data.level ? "" : data.p_organization_id,
name: data.name,
data_type: 0
}
$axios.post(`/apaas/system/v5/org/add`, params)
.then((res) => {
if (res.data.code == 200) {
$message.success(res.data.msg)
orgTree.value.getOrgTree();
}else {
$message.error(res.data.msg)
}
handleCloseDirectory()
})
}else if(directoryFormType.value === 'edit') {
const params = {
name: data.name,
data_type: 0
}
$axios.put(`/apaas/system/v5/org/${selectTreeData.value.id}`, params)
.then((res) => {
if (res.data.code == 200) {
$message.success(res.data.msg)
orgTree.value.getOrgTree();
}else {
$message.error(res.data.msg)
}
handleCloseDirectory()
})
}
} }
const dialogOrg = ref(false) const dialogOrg = ref(false)
...@@ -250,32 +344,168 @@ import orgForm from './org-form.vue'; ...@@ -250,32 +344,168 @@ import orgForm from './org-form.vue';
orgFormRef.value.submitForm(); orgFormRef.value.submitForm();
} }
const getOrgFromData = (data) => { //新增/编辑组织
console.log(111111) const getOrgFormData = (data) => {
console.log(data) if(orgFormType.value === 'create') {
const params = {
p_organization_id: data.level ? "" : data.p_organization_id,
name: data.name,
organization_code: data.organization_code,
description: data.description,
attachment: data.attachment && data.attachment.length > 0 ? data.attachment[0].url : '',
data_type: 1
} }
$axios.post(`/apaas/system/v5/org/add`, params)
.then((res) => {
if (res.data.code == 200) {
$message.success(res.data.msg)
orgTree.value.getOrgTree();
}else {
$message.error(res.data.msg)
}
handleCloseOrg()
})
}else if(orgFormType.value === 'edit') {
const params = {
// p_organization_id: data.level ? "" : data.p_organization_id,
name: data.name,
organization_code: data.organization_code,
description: data.description,
attachment: data.attachment && data.attachment.length > 0 ? data.attachment[0].url : '',
data_type: 1
}
$axios.put(`/apaas/system/v5/org/${selectTreeData.value.id}`, params)
.then((res) => {
if (res.data.code == 200) {
$message.success(res.data.msg)
orgTree.value.getOrgTree();
}else {
$message.error(res.data.msg)
}
handleCloseOrg()
})
}
}
const handleCloseDel = () => {
dialogDel.value = false;
}
//删除目录/组织
const confirmDel = () => {
$axios.delete(`/apaas/system/v5/org/${selectTreeData.value.id}`)
.then((res) => {
if (res.data.code == 200) {
$message.success(res.data.msg)
orgTree.value.getOrgTree();
}else {
$message.error(res.data.msg)
}
handleCloseDel()
})
}
const moveOrg = (params) => {
$axios.put(`/apaas/system/v5/org/sort`,params)
.then((res) => {
if (res.data.code == 200) {
$message.success(res.data.msg)
orgTree.value.getOrgTree();
}else {
$message.error(res.data.msg)
}
})
}
const action = ref('create') const action = ref('create')
const treeCreate = (data) => { const treeAction = (data) => {
action.value = data.action action.value = data.action
if(data.action === 'create' || data.action === 'edit') { if(data.action === 'create' || data.action === 'edit') {
if(data.type === 'org') { if(data.type === 'org') {
orgFormType.value = data.action;
dialogOrg.value = true; dialogOrg.value = true;
nextTick(() => {
if(data.data.value) { if(data.data) {
orgFormRef.value.setForm({parent: data.data.value.dept}); if(data.action === 'edit') {
orgFormRef.value.setForm({
name: data.data.value.name,
p_organization_id: data.data.value.p_organization_id,
level: data.data.value.p_organization_id ? false : true,
organization_code: data.data.value.organization_code,
description: data.data.value.description,
attachment: [{url: data.data.value.attachment}]
});
}else if(data.action === 'create') {
orgFormRef.value.setForm({p_organization_id: data.data.value.organization_id});
} }
}
})
}else { }else {
directoryFormType.value = data.action;
dialogDirectory.value = true; dialogDirectory.value = true;
nextTick(()=> { nextTick(()=> {
if(data.data.value) { if(data.data) {
directoryFormRef.value.setForm({parent: data.data.value.dept}); if(data.action === 'edit') {
directoryFormRef.value.setForm({name: data.data.value.name});
}else if(data.action === 'create') {
directoryFormRef.value.setForm({p_organization_id: data.data.value.organization_id});
}
} }
}) })
} }
}else if(data.action === 'delete'){
dialogDel.value = true;
}else if(data.action === 'mvup' || data.action === 'mvdown') {
moveOrg(data.data);
}
}
const treeSelect = (data) => {
selectTreeData.value = data.value;
if(data.value.data_type === 1 || data.value.data_type === 2) {
selectTreeDataType.value = data.value.data_type;
getTableRows();
}
}
const getTableRows = () => {
let params = {...filter, organization_id: selectTreeData.value.organization_id,data_type: selectTreeData.value.data_type}
$axios.get(
`/apaas/system/v5/org/detail`,
{
params
}
)
.then((res) => {
if (res.data.code == 200) {
tableRows.value = (res.data.data.org_users.data || []).map(item => {
item.system_role = item.system_role ? item.system_role.join('') : '';
return item;
});
tableTotal.value = res.data.data.org_users.total;
if(params.data_type === 1) {
baseInfo[0].value = res.data.data.org_info.organization_type;
baseInfo[1].value = res.data.data.org_info.organization_code;
baseInfo[2].value = res.data.data.org_info.name;
baseInfo[3].value = res.data.data.org_info.created_time;
baseInfo[4].value = res.data.data.org_info.org_admin_number;
baseInfo[5].value = res.data.data.org_info.business_system_number;
}else { }else {
console.log(data.action) baseInfo2[0].value = res.data.data.org_info.name;
baseInfo2[1].value = res.data.data.org_info.organization_code;
baseInfo2[2].value = res.data.data.org_info.platform_users_number;
} }
console.log(baseInfo)
}else {
$message.error(res.data.msg)
}
})
} }
const goDetail = (params) => { const goDetail = (params) => {
...@@ -287,6 +517,10 @@ import orgForm from './org-form.vue'; ...@@ -287,6 +517,10 @@ import orgForm from './org-form.vue';
}) })
} }
const searchChange = (val) => {
orgTree.value.filterTree(val);
}
onBeforeMount(() => { onBeforeMount(() => {
}) })
......
...@@ -7,23 +7,23 @@ ...@@ -7,23 +7,23 @@
ref="orgRef" ref="orgRef"
style="max-width: 80%" style="max-width: 80%"
> >
<el-form-item label="上级目录" prop="parent"> <el-form-item label="上级目录" prop="p_organization_id" v-if="formType === 'create'">
<el-input v-model="orgForm.parent" style="width: 80%"/> <el-tree-select v-model="orgForm.p_organization_id" :data="orgData" :props="treeProps" :render-after-expand="false" :filter-node-method="filterNode" :disabled="orgForm.level" :check-strictly="true" style="width: 80%;" />
<el-form-item label="" style="padding-left: 16px"> <el-form-item label="" style="padding-left: 16px">
<el-checkbox v-model="orgForm.level" label="顶级"/> <el-checkbox v-model="orgForm.level" @change="isTop" label="顶级"/>
</el-form-item> </el-form-item>
</el-form-item> </el-form-item>
<el-form-item label="政务机构名称" prop="orgName"> <el-form-item label="政务机构名称" prop="name">
<el-input v-model="orgForm.orgName" /> <el-input v-model="orgForm.name" />
</el-form-item> </el-form-item>
<el-form-item label="组织机构代码" prop="code"> <el-form-item label="组织机构代码" prop="organization_code">
<el-input v-model="orgForm.code" /> <el-input v-model="orgForm.organization_code" />
</el-form-item> </el-form-item>
<el-form-item label="组织介绍" prop="desc"> <el-form-item label="组织介绍" prop="description">
<el-input type="textarea" :rows="3" v-model="orgForm.desc" /> <el-input type="textarea" :rows="3" v-model="orgForm.description" />
</el-form-item> </el-form-item>
<el-form-item label="组织附件" prop="logo"> <el-form-item label="组织附件" prop="logo">
<bg-upload v-model="orgForm.file" customTips> <bg-upload v-model="orgForm.attachment" customTips>
<span>将文件拖到此处,或 点击上传</span> <span>将文件拖到此处,或 点击上传</span>
</bg-upload> </bg-upload>
</el-form-item> </el-form-item>
...@@ -31,34 +31,40 @@ ...@@ -31,34 +31,40 @@
</template> </template>
<script setup> <script setup>
import { reactive, ref, onMounted } from 'vue' import { reactive, ref, onMounted, onBeforeMount, getCurrentInstance } from 'vue'
const props = defineProps({
const orgForm = reactive({ formType: {
parent: '', type: String,
level: '', default: 'create', //false 新建 true 编辑
orgName: '', },
code: '', });
desc: '', const { proxy } = getCurrentInstance()
desc: '', const { $axios,$message } = proxy
file: '' const orgForm = reactive({
}) p_organization_id: '',
level: false,
name: '',
organization_code: '',
description: '',
attachment: []
})
const formRules = reactive({ const formRules = reactive({
parent: [ p_organization_id: [
{ required: true, message: '输入上级目录', trigger: 'blur' }, { required: true, message: '输入上级目录', trigger: 'blur' },
], ],
orgName: [ name: [
{ required: true, message: '请输入机构名称', trigger: 'blur' }, { required: true, message: '请输入机构名称', trigger: 'blur' },
], ],
code: [ organization_code: [
{ required: true, message: '请输入组织机构代码', trigger: 'blur' }, { required: true, message: '请输入组织机构代码', trigger: 'blur' },
], ],
}) })
const orgRef = ref(null) const orgRef = ref(null)
const emit = defineEmits(['action']) const emit = defineEmits(['action'])
const submitForm = async () => { const submitForm = async () => {
if (!orgRef) return if (!orgRef) return
await orgRef.value.validate((valid, fields) => { await orgRef.value.validate((valid, fields) => {
if (valid) { if (valid) {
...@@ -67,20 +73,53 @@ const submitForm = async () => { ...@@ -67,20 +73,53 @@ const submitForm = async () => {
emit('action',null) emit('action',null)
} }
}) })
} }
const clearForm = () => { const clearForm = () => {
if (!orgRef) return if (!orgRef) return
orgRef.value.resetFields() orgRef.value.resetFields()
} }
const setForm = (data) => { const setForm = (data) => {
orgForm.value = Object.assign(orgForm, data); orgForm.value = Object.assign(orgForm, data);
} }
onMounted(() => { const orgData = ref([])
const treeProps = {
label: 'name',
children: 'Child',
value: 'organization_id'
}
const getOrgTree = () => {
$axios.get(`/apaas/system/v5/org/tree`)
.then((res) => {
if (res.data.code == 200) {
orgData.value = res.data.data || [];
// nextTick(() => {
// filterNode();
// })
}else {
$message.error(res.data.msg)
}
})
}
}) const filterNode = (value, data) => {
return data.data_type === 0
}
const isTop = (data) => {
orgForm.p_organization_id = data ? ' ' : ''; //空格绕过表单非空校验
}
onBeforeMount(() => {
getOrgTree()
})
onMounted(() => {
})
defineExpose({ submitForm, clearForm, setForm }) defineExpose({ submitForm, clearForm, setForm })
</script> </script>
\ No newline at end of file
...@@ -48,8 +48,11 @@ ...@@ -48,8 +48,11 @@
<platformPersonForm v-show="step === 2" ref="plplatformPersonFormRef" @action="getPlatformPersonFormData"></platformPersonForm> <platformPersonForm v-show="step === 2" ref="plplatformPersonFormRef" @action="getPlatformPersonFormData"></platformPersonForm>
<div class="process_end" v-show="step === 3"> <div class="process_end" v-show="step === 3">
<div> <div>
<div><img src="@/assets/imgs/img_data-complete.png" alt=""></div> <div>
<div class="font_bold">平台用户新增成功</div> <img v-if="successFlag" src="@/assets/imgs/img_data-complete.png" alt="">
<img v-else src="@/assets/imgs/img_data-fail.png" alt="">
</div>
<div class="font_bold">{{route.query.id ? (successFlag ? '平台用户编辑成功' : '平台用户编辑失败') : (successFlag ? '平台用户新增成功' : '平台用户新增失败')}}</div>
<el-button @click="cancel">返回列表</el-button> <el-button @click="cancel">返回列表</el-button>
<el-button type="primary" @click="continueCreate">继续创建</el-button> <el-button type="primary" @click="continueCreate">继续创建</el-button>
</div> </div>
...@@ -78,8 +81,10 @@ ...@@ -78,8 +81,10 @@
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import platformAccountForm from './platform-account-form.vue'; import platformAccountForm from './platform-account-form.vue';
import platformPersonForm from './platform-person-form.vue'; import platformPersonForm from './platform-person-form.vue';
import { reactive, ref,onBeforeMount,toRefs,computed, onBeforeUnmount, onMounted } from 'vue'; import CryptoJS from "crypto-js";
import { reactive, ref,onBeforeMount,toRefs,computed, onMounted, getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance()
const { $axios,$message } = proxy
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
const step = ref(1); const step = ref(1);
...@@ -87,18 +92,21 @@ const platformAccountFormRef = ref(null); ...@@ -87,18 +92,21 @@ const platformAccountFormRef = ref(null);
const plplatformPersonFormRef = ref(null); const plplatformPersonFormRef = ref(null);
const formData = reactive({ const formData = reactive({
logo: '', logo: '',
account: '', system_account: '',
phone: '', contact_phone: '',
password: '', password: '',
confirm_password: '', confirm_password: '',
role: '', select_role: '',
is_use: 1, state: '',
name: '', contact_name: '',
email: '', contact_email: '',
remark: '', remark: '',
}); //账号信息表单+个人信息表单 }); //账号信息表单+个人信息表单
const orgId = ref(null);
const successFlag = ref(false)
// 下一步 // 下一步
const nextStep = () => { const nextStep = () => {
...@@ -107,7 +115,7 @@ const nextStep = () => { ...@@ -107,7 +115,7 @@ const nextStep = () => {
//账号信息表单检验触发事件 data为null 校验失败 //账号信息表单检验触发事件 data为null 校验失败
const getPlatformAccountFormData = (data) => { const getPlatformAccountFormData = (data) => {
if(data) { if(data) {
formData.value = Object.assign(formData,data); Object.assign(formData,data);
step.value = 2; step.value = 2;
}else { }else {
...@@ -116,9 +124,39 @@ const getPlatformAccountFormData = (data) => { ...@@ -116,9 +124,39 @@ const getPlatformAccountFormData = (data) => {
//个人信息表单检验触发事件 data为null 校验失败 //个人信息表单检验触发事件 data为null 校验失败
const getPlatformPersonFormData = (data) => { const getPlatformPersonFormData = (data) => {
if(data) { if(data) {
formData.value = Object.assign(formData,data); Object.assign(formData,data);
console.log(formData); if(route.query.id) {
console.log(formData)
let params = {
}
$axios.post(`/apaas/system/v5/user/update`,params)
.then((res) => {
if (res.data.code == 200) {
successFlag.value = true;
step.value = 3;
}else {
$message.error(res.data.msg)
}
})
}else {
const params = {...formData,
organization_id: orgId.value,
logo: formData.logo && formData.logo.length > 0 ? formData.logo[0].url : '',
is_admin: 3,
password: CryptoJS.AES.encrypt(formData.password,"swuE9cmCZQwrkYRV").toString()
};
$axios.post(`/apaas/system/v5/org/add/user`,params)
.then((res) => {
if (res.data.code == 200) {
successFlag.value = true;
step.value = 3; step.value = 3;
}else {
$message.error(res.data.msg)
}
})
}
} }
} }
//上一步 //上一步
...@@ -134,40 +172,30 @@ const continueCreate = () => { ...@@ -134,40 +172,30 @@ const continueCreate = () => {
platformAccountFormRef.value.clearForm(); platformAccountFormRef.value.clearForm();
plplatformPersonFormRef.value.clearForm(); plplatformPersonFormRef.value.clearForm();
step.value = 1; step.value = 1;
successFlag.value = false;
} }
//取消 //取消
const cancel = () => { const cancel = () => {
router.go(-1); router.go(-1);
} }
onBeforeUnmount(()=>{ const getOrgTree = () => {
$axios.get(`/apaas/system/v5/org/tree`)
.then((res) => {
if (res.data.code == 200) {
orgId.value = res.data.data[0].organization_id;
}else {
$message.error(res.data.msg)
}
})
}
onBeforeMount(() => {
getOrgTree()
}) })
onMounted(() => { onMounted(() => {
if(route.query.type === "1") { if(route.query.type === "1") {
setTimeout(()=> {
platformAccountFormRef.value.setForm({
org: 'a',
code: 'b',
name: 'b',
desc: 'b',
logo: ['b'],
role: 'b',
account: 'b',
password: 'b',
confirm_password: 'b',
url: 'b',
firm_name: 'b',
is_use: 'b',
})
plplatformPersonFormRef.value.setForm({
contact_user: 'c',
phone: 'c',
email: 'c',
remark: 'c',
})
},500)
} }
}) })
......
...@@ -10,11 +10,11 @@ ...@@ -10,11 +10,11 @@
<el-form-item label="头像" prop="logo"> <el-form-item label="头像" prop="logo">
<bg-upload-image v-model="platformAccountForm.logo" :showTips="true" :limit="1" :fileSize="500" :fileSizeUnit="'KB'" listType="picture-card" :accept="['.jpg','.jpeg','.png']" customTips="请选择图片上传:大小120 * 120像素支持jpg、png等格式,图片需小于500KB"></bg-upload-image> <bg-upload-image v-model="platformAccountForm.logo" :showTips="true" :limit="1" :fileSize="500" :fileSizeUnit="'KB'" listType="picture-card" :accept="['.jpg','.jpeg','.png']" customTips="请选择图片上传:大小120 * 120像素支持jpg、png等格式,图片需小于500KB"></bg-upload-image>
</el-form-item> </el-form-item>
<el-form-item label="账号" prop="account"> <el-form-item label="账号" prop="system_account">
<el-input v-model="platformAccountForm.account" /> <el-input v-model="platformAccountForm.system_account" />
</el-form-item> </el-form-item>
<el-form-item label="手机号" prop="phone"> <el-form-item label="手机号" prop="contact_phone">
<el-input v-model="platformAccountForm.phone" /> <el-input v-model="platformAccountForm.contact_phone" />
</el-form-item> </el-form-item>
<el-form-item label="密码" prop="password"> <el-form-item label="密码" prop="password">
<el-input type="password" v-model="platformAccountForm.password" /> <el-input type="password" v-model="platformAccountForm.password" />
...@@ -22,27 +22,35 @@ ...@@ -22,27 +22,35 @@
<el-form-item label="确认密码" prop="confirm_password"> <el-form-item label="确认密码" prop="confirm_password">
<el-input type="password" v-model="platformAccountForm.confirm_password" /> <el-input type="password" v-model="platformAccountForm.confirm_password" />
</el-form-item> </el-form-item>
<el-form-item label="角色授权" prop="role"> <el-form-item label="角色授权" prop="select_role">
<el-input v-model="platformAccountForm.role" /> <el-select v-model="platformAccountForm.select_role" multiple placeholder="请选择角色" style="width: 100%">
<el-option
v-for="item in roleList"
:key="item.role_id"
:label="item.role_name"
:value="item.role_id"
/>
</el-select>
</el-form-item> </el-form-item>
<el-form-item label="是否启用" prop="is_use"> <el-form-item label="是否启用" prop="state">
<bg-switch :labels="['否','是']" :values="[0,1]" v-model="platformAccountForm.is_use"></bg-switch> <bg-switch :labels="['否','是']" :values="[0,1]" v-model="platformAccountForm.state"></bg-switch>
</el-form-item> </el-form-item>
</el-form> </el-form>
</template> </template>
<script setup> <script setup>
import { reactive, ref, onMounted } from 'vue' import { reactive, ref, onMounted, onBeforeMount, getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
const { $axios,$message } = proxy
const platformAccountForm = reactive({ const platformAccountForm = reactive({
logo: '', logo: [],
account: '', system_account: '',
phone: '', contact_phone: '',
password: '', password: '',
confirm_password: '', confirm_password: '',
role: '', select_role: '',
is_use: 1, state: 1,
}) })
...@@ -53,15 +61,26 @@ const validatePass = (rule, value, callback) => { ...@@ -53,15 +61,26 @@ const validatePass = (rule, value, callback) => {
callback() callback()
} }
} }
const checkPhone = (rule, value, callback) => {
var phone_ruler = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
setTimeout(() => {
if (!phone_ruler.test(value)&&value.length!==0) {
callback(new Error("请输入正确的手机号码"));
} else {
callback();
}
});
};
const platformAccountFormRules = reactive({ const platformAccountFormRules = reactive({
account: [ system_account: [
{ required: true, message: '请输入账号', trigger: 'blur' }, { required: true, message: '请输入账号', trigger: 'blur' },
], ],
phone: [ contact_phone: [
{ required: true, message: '请输入手机号', trigger: 'blur' }, { required: true, message: '请输入手机号', trigger: 'blur' },
// { validator: checkPhone, trigger: 'blur' }
], ],
role: [ select_role: [
{ required: true, message: '请选择角色', trigger: 'blur' }, { required: true, message: '请选择角色', trigger: 'blur' },
], ],
password: [ password: [
...@@ -73,6 +92,8 @@ const platformAccountFormRules = reactive({ ...@@ -73,6 +92,8 @@ const platformAccountFormRules = reactive({
], ],
}) })
const roleList = ref([])
const platformAccountRef = ref(null) const platformAccountRef = ref(null)
...@@ -98,6 +119,21 @@ const setForm = (data) => { ...@@ -98,6 +119,21 @@ const setForm = (data) => {
platformAccountForm.value = Object.assign(platformAccountForm, data); platformAccountForm.value = Object.assign(platformAccountForm, data);
} }
const getRoleList = () => {
$axios.get(`/apaas/system/v5/org/select/role?is_admin=3`)
.then((res) => {
if (res.data.code == 200) {
roleList.value = res.data.data;
}else {
}
})
}
onBeforeMount(() => {
getRoleList();
})
onMounted(() => { onMounted(() => {
}) })
......
...@@ -7,13 +7,13 @@ ...@@ -7,13 +7,13 @@
ref="platformPersonFormRef" ref="platformPersonFormRef"
style="max-width: 66%" style="max-width: 66%"
> >
<el-form-item label="姓名" prop="name"> <el-form-item label="姓名" prop="contact_name">
<el-input v-model="platformPersonForm.name" /> <el-input v-model="platformPersonForm.contact_name" />
</el-form-item> </el-form-item>
<el-form-item label="邮箱"> <el-form-item label="邮箱" prop="contact_email">
<el-input v-model="platformPersonForm.email"/> <el-input v-model="platformPersonForm.contact_email"/>
</el-form-item> </el-form-item>
<el-form-item label="备注"> <el-form-item label="备注" prop="remark">
<el-input type="textarea" :rows="3" v-model="platformPersonForm.remark" /> <el-input type="textarea" :rows="3" v-model="platformPersonForm.remark" />
</el-form-item> </el-form-item>
</el-form> </el-form>
...@@ -23,8 +23,8 @@ ...@@ -23,8 +23,8 @@
import { reactive, ref, onMounted } from 'vue' import { reactive, ref, onMounted } from 'vue'
const platformPersonForm = reactive({ const platformPersonForm = reactive({
name: '', contact_name: '',
email: '', contact_email: '',
remark: '', remark: '',
}) })
......
<template> <template>
<el-tree class="file-tree" :data="data" :props="defaultProps" @node-click="handleNodeClick" :default-expand-all="true"> <el-tree
ref="treeRef"
class="file-tree"
:data="orgData"
:props="defaultProps"
@node-click="handleNodeClick"
node-key="id"
:highlight-current="true"
:filter-node-method="filterNode"
:default-expand-all="true">
<template #default="{ node, data }"> <template #default="{ node, data }">
<div class="custom_tree_node"> <div class="custom_tree_node">
<span <span
class="label-text " class="label-text "
:class="{'is_active': selectData && selectData.dept === data.dept}" :class="{'is_active': selectData && selectData.id === data.id}"
:title="node.label" :title="data.name"
>{{ node.label }} >{{ data.name }}
</span> </span>
<span v-if="data.dept === 1" class="tree-action-box first_node" @click.stop="showAction($event, data,node)"> <span v-if="data.data_type === 2" class="tree-action-box first_node" @click.stop="showAction($event, data,node)">
<bg-icon <bg-icon
class="tree-more" class="tree-more"
icon="#bg-ic-s-more" icon="#bg-ic-s-more"
></bg-icon> ></bg-icon>
</span> </span>
<span v-else class="tree-action-box" :class="{'position_sticky': isSticky(data.label) }" @click.stop="showAction($event, data,node)"> <span v-else class="tree-action-box" :class="{'position_sticky': isSticky(data.name) }" @click.stop="showAction($event, data,node)">
<bg-icon <bg-icon
class="tree-more" class="tree-more"
icon="#bg-ic-s-more" icon="#bg-ic-s-more"
...@@ -29,162 +38,86 @@ ...@@ -29,162 +38,86 @@
v-show="actionFlag" v-show="actionFlag"
:style="{ top: acTop, left: acLeft }" :style="{ top: acTop, left: acLeft }"
> >
<div v-if="selectData && selectData.dept === 1" class="action" @click="treeCreate({type: 'directory',target: null})">新建目录</div> <div v-if="selectData && selectData.data_type === 2" class="action" @click="treeAction({type: 'directory',action: 'create',target: null})">新建目录</div>
<div v-if="selectData && selectData.dept === 1" class="action" @click="treeCreate({type: 'org',target: null})" >新建组织</div> <div v-if="selectData && selectData.data_type === 2" class="action" @click="treeAction({type: 'org',action: 'create',target: null})" >新建组织</div>
<div v-if="selectData && selectData.children" class="action" @click="treeCreate({type: 'directory',action: 'create',target: 'local'})">新建本级目录</div> <div v-if="selectData && selectData.data_type === 0" class="action" @click="treeAction({type: 'directory',action: 'create',target: 'local'})">新建本级目录</div>
<div v-if="selectData && selectData.children" class="action" @click="treeCreate({type: 'directory',action: 'create',target: 'child'})">新建下级目录</div> <div v-if="selectData && selectData.data_type === 0" class="action" @click="treeAction({type: 'directory',action: 'create',target: 'child'})">新建下级目录</div>
<div v-if="selectData && selectData.children" class="action" @click="treeCreate({type: 'org',action: 'create',target: 'local'})">新建本级组织</div> <div v-if="selectData && selectData.data_type === 0" class="action" @click="treeAction({type: 'org',action: 'create',target: 'local'})">新建本级组织</div>
<div v-if="selectData && selectData.children" class="action" @click="treeCreate({type: 'org',action: 'create',target: 'child'})">新建下级组织</div> <div v-if="selectData && selectData.data_type === 0" class="action" @click="treeAction({type: 'org',action: 'create',target: 'child'})">新建下级组织</div>
<div v-if="selectData && selectData.children" class="action" @click="treeCreate({type: 'directory',action: 'edit',target: 'local'})">编辑目录</div> <div v-if="selectData && selectData.data_type === 0" class="action" @click="treeAction({type: 'directory',action: 'edit',target: 'local'})">编辑目录</div>
<div v-if="selectData && selectData.children" class="action" @click="treeCreate({type: 'directory',action: 'delete',target: 'local'})">删除</div> <div v-if="selectData && selectData.data_type === 0" class="action" @click="treeAction({type: 'directory',action: 'delete',target: 'local'})">删除</div>
<div v-if="selectData && selectData.children" class="action" @click="treeCreate({type: 'directory',action: 'mvup',target: 'local'})">上移</div> <div v-if="selectData && selectData.data_type === 0" class="action" @click="treeAction({type: 'directory',action: 'mvup',target: 'local'})">上移</div>
<div v-if="selectData && selectData.children" class="action" @click="treeCreate({type: 'directory',action: 'mvdown',target: 'local'})">下移</div> <div v-if="selectData && selectData.data_type === 0" class="action" @click="treeAction({type: 'directory',action: 'mvdown',target: 'local'})">下移</div>
<div v-if="selectData && !selectData.children && selectData.dept !== 1" class="action" @click="treeCreate({type: 'org',action: 'create',target: 'local'})">新建本级组织</div> <div v-if="selectData && selectData.data_type === 1" class="action" @click="treeAction({type: 'org',action: 'create',target: 'local'})">新建本级组织</div>
<div v-if="selectData && !selectData.children && selectData.dept !== 1" class="action" @click="treeCreate({type: 'org',action: 'edit',target: 'local'})">编辑组织</div> <div v-if="selectData && selectData.data_type === 1" class="action" @click="treeAction({type: 'org',action: 'edit',target: 'local'})">编辑组织</div>
<div v-if="selectData && !selectData.children && selectData.dept !== 1" class="action" @click="treeCreate({type: 'org',action: 'delete',target: 'local'})">删除</div> <div v-if="selectData && selectData.data_type === 1" class="action" @click="treeAction({type: 'org',action: 'delete',target: 'local'})">删除</div>
<div v-if="selectData && !selectData.children && selectData.dept !== 1" class="action" @click="treeCreate({type: 'org',action: 'mvup',target: 'local'})">上移</div> <div v-if="selectData && selectData.data_type === 1" class="action" @click="treeAction({type: 'org',action: 'mvup',target: 'local'})">上移</div>
<div v-if="selectData && !selectData.children && selectData.dept !== 1" class="action" @click="treeCreate({type: 'org',action: 'mvdown',target: 'local'})">下移</div> <div v-if="selectData && selectData.data_type === 1" class="action" @click="treeAction({type: 'org',action: 'mvdown',target: 'local'})">下移</div>
</div> </div>
</Teleport> </Teleport>
</template> </template>
<script setup> <script setup>
import { reactive, toRefs, ref, } from '@vue/reactivity' import { reactive, toRefs, ref } from '@vue/reactivity'
import { getCurrentInstance } from 'vue' import { getCurrentInstance, watch, nextTick} from 'vue'
import { computed, onBeforeMount, onBeforeUnmount } from '@vue/runtime-core' import { computed, onBeforeMount, onBeforeUnmount } from '@vue/runtime-core'
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
const { proxy } = getCurrentInstance()
const data = [ const { $axios,$message } = proxy
{
label: '平台用户组织',
dept: 1
},
{
label: '湖北省efadsfasfdgsafgfdtrgsdfsfsd555',
dept: 4,
children: [
{
label: '武汉市啊实打实大苏打大阿斯顿发士大夫地',
dept: 666,
children: [
{
label: '公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅',
dept: 2
},
{
label: 'fddfsgdfgdfgdsfsffsdfsdfsdfwefadsgs',
dept: 3
},
{
label: '咯技术的卡洛斯达拉斯达拉斯昆德拉老师',
dept: 5,
},
],
},
{
label: '荆州市',
dept: 6,
children: [
{
label: '公安局',
dept: 7,
},
{
label: '应急管理局',
dept: 8,
},
],
}
],
},
{
label: '四川省',
dept: 9,
children: [
{
label: '成都市',
dept: 10,
children: [
{
label: '天府新区',
dept: 11,
},
],
},
],
},
{
label: '比格大数据',
dept: 12,
children: [
{
label: '武汉研发中心',
dept: 13,
children: [
{
label: '研发部',
dept: 14,
},
],
},
{
label: '西南大区',
dept: 15,
children: [
{
label: '事业部',
dept: 16,
},
{
label: '事业部',
dept: 17,
},
{
label: '事业部',
dept: 18,
},
{
label: '事业部',
dept: 19,
},
{
label: '事业部',
dept: 20,
},
{
label: '事业部',
dept: 21,
},
{
label: '事业部',
dept: 22,
},
],
},
],
},
]
const defaultProps = {
children: 'children',
label: 'label',
}
const acTop = ref(0); const acTop = ref(0);
const acLeft = ref(0); const acLeft = ref(0);
const actionFlag = ref(false) const actionFlag = ref(false)
const selectData = ref(null) const selectData = ref(null)
const selectDataParent = ref(null) const selectDataParent = ref(null)
const mvDataParent = ref(null)
const treeRef = ref(null)
const orgData = ref([])
const defaultProps = {
label: 'name',
children: 'Child',
value: 'organization_id'
}
const getOrgTree = () => {
$axios.get(`/apaas/system/v5/org/tree`)
.then((res) => {
if (res.data.code == 200) {
orgData.value = res.data.data || [];
nextTick(() =>{
treeRef.value.setCurrentNode(orgData.value[0],true)
emit('select',ref(orgData.value[0]));
})
}else {
$message.error(res.data.msg)
}
})
}
const filterTree =(val) => {
treeRef.value.filter(val)
}
const filterNode = (value, data) => {
if (!value) return true
return data.name.includes(value)
}
const showAction = (e, data,node) => { const showAction = (e, data,node) => {
const rect = e.target.getBoundingClientRect(); //获取点击的dom的位置 const rect = e.target.getBoundingClientRect(); //获取点击的dom的位置
acTop.value = rect.y - 17 + "px"; acTop.value = rect.y - 17 + "px";
acLeft.value = rect.x + 35 + "px"; acLeft.value = rect.x + 35 + "px";
actionFlag.value = true; actionFlag.value = true;
selectData.value = data; selectData.value = data;
selectDataParent.value = node.parent.data.label ? node.parent.data : null; selectDataParent.value = node.parent.data.name ? node.parent.data : null;
mvDataParent.value = node.parent.data.Child ? node.parent.data.Child : node.parent.data;
}; };
const isSticky = (data) => { const isSticky = (data) => {
const canvas = document.createElement("canvas"); const canvas = document.createElement("canvas");
...@@ -202,27 +135,62 @@ import { useRouter } from 'vue-router'; ...@@ -202,27 +135,62 @@ import { useRouter } from 'vue-router';
const emit = defineEmits(['action']) const emit = defineEmits(['action'])
const handleNodeClick = (node,nodeAttr,treeNode,event) => { const handleNodeClick = (node,nodeAttr,treeNode,event) => {
selectData.value = node; selectData.value = node;
emit('select',{node,nodeAttr,treeNode,event}); emit('select',selectData);
//只读则无操作事件 //只读则无操作事件
closeAction(); closeAction();
} }
const treeCreate = (params) => { const treeAction = (params) => {
emit('create',{type: params.type,action: params.action,data: params.target === 'local'? selectDataParent : selectData}); emit('select',selectData);
let data = null;
if(params.action === 'create') {
if(params.target === 'local') {
data = selectDataParent;
}else if(params.target === 'child') {
data = selectData;
}else {
}
}else if(params.action === 'mvup') {
if(mvDataParent.value.indexOf(selectData.value) === 0) {
$message.error('已经是第一个元素,不可上移')
return 0;
}else {
let brother = mvDataParent.value[mvDataParent.value.indexOf(selectData.value) - 1];
data = [{id: selectData.value.id,sort: brother.sort},{id: brother.id,sort: selectData.value.sort}]
}
}else if(params.action === 'mvdown') {
if(mvDataParent.value.indexOf(selectData.value) === (mvDataParent.value.length-1)) {
$message.error('已经是最后一个元素,不可下移')
return 0;
}else {
let brother = mvDataParent.value[mvDataParent.value.indexOf(selectData.value) + 1];
data = [{id: selectData.value.id,sort: brother.sort},{id: brother.id,sort: selectData.value.sort}]
}
}else {
data = selectData;
}
emit('action',{type: params.type,action: params.action,
data: data});
} }
onBeforeMount(()=>{ onBeforeMount(()=>{
//只读则无操作事件 //只读则无操作事件
window.addEventListener("click", closeAction); window.addEventListener("click", closeAction);
window.addEventListener("scroll", closeAction,true); window.addEventListener("scroll", closeAction,true);
getOrgTree()
}) })
onBeforeUnmount(()=>{ onBeforeUnmount(()=>{
//只读则无操作事件 //只读则无操作事件
window.removeEventListener('click', closeAction); window.removeEventListener('click', closeAction);
window.removeEventListener('scroll', closeAction); window.removeEventListener('scroll', closeAction);
}) })
defineExpose({getOrgTree, filterTree })
</script> </script>
<style scoped> <style scoped>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment