Commit 1cd8c8bf authored by 张俊's avatar 张俊
parents 7026e652 168f1cba
...@@ -18,14 +18,6 @@ ...@@ -18,14 +18,6 @@
:autosize="{ minRows: 5 }" :autosize="{ minRows: 5 }"
:disabled="rowType != 0"></el-input> :disabled="rowType != 0"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="数据权限" prop="data_purview">
<el-radio-group v-model="formData.data_purview" :disabled="rowType != 0">
<el-radio :label="3">全平台所有</el-radio>
<el-radio :label="2">本组织所有</el-radio>
<el-radio :label="1">仅自己</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="菜单功能权限" prop="permission_arr"> <el-form-item label="菜单功能权限" prop="permission_arr">
<bg-permission <bg-permission
:values="formData.permission_arr" :values="formData.permission_arr"
...@@ -76,14 +68,11 @@ const roleState = reactive({ ...@@ -76,14 +68,11 @@ const roleState = reactive({
formData: { formData: {
role_name: "", role_name: "",
role_desc: "", role_desc: "",
data_purview: 3,
state: 1, state: 1,
permission_arr: [], permission_arr: [],
}, // 表单项 }, // 表单项
rules: { rules: {
role_name: [{ required: true, message: "请输入角色名称", trigger: "blur" }], role_name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
data_purview: [{ required: true, message: "请选择数据权限", trigger: "change" }],
state: [{ required: true, message: "请选择是否启用", trigger: "change" }], state: [{ required: true, message: "请选择是否启用", trigger: "change" }],
permission_arr: [{ required: true, type: "array", validator: checkMenuLength, trigger: "change" }], permission_arr: [{ required: true, type: "array", validator: checkMenuLength, trigger: "change" }],
}, // 表单校验规则 }, // 表单校验规则
...@@ -97,7 +86,7 @@ const roleState = reactive({ ...@@ -97,7 +86,7 @@ const roleState = reactive({
rowType: 0, rowType: 0,
}); });
const getMenuTree = () => { const getMenuTree = () => {
axios.get(`/apaas/system/v5/menu/tree`).then((res) => { axios.get(`/v1/api/menu/tree`).then((res) => {
if (res.data.code == 200) { if (res.data.code == 200) {
roleState.permissionData = res.data.data || []; roleState.permissionData = res.data.data || [];
} else { } else {
...@@ -111,9 +100,9 @@ const changeMenu = (val) => { ...@@ -111,9 +100,9 @@ const changeMenu = (val) => {
}; // 修改选中的菜单 }; // 修改选中的菜单
const getRoleDetail = () => { const getRoleDetail = () => {
axios.get(`/apaas/system/v5/role/detail/${route.query.id}`).then((res) => { axios.get(`/v1/api/role/detail/${route.query.id}`).then((res) => {
if (res.data.code == 200) { if (res.data.code == 200) {
let { role_name, role_desc, data_purview, state, menus } = res.data.data; let { role_name, role_desc, state, menus } = res.data.data;
roleState.rowType = res.data.data.role_type; roleState.rowType = res.data.data.role_type;
let permission_arr = []; let permission_arr = [];
if (menus && menus.length > 0) { if (menus && menus.length > 0) {
...@@ -124,11 +113,9 @@ const getRoleDetail = () => { ...@@ -124,11 +113,9 @@ const getRoleDetail = () => {
roleState.formData = { roleState.formData = {
role_name, role_name,
role_desc, role_desc,
data_purview,
state, state,
permission_arr: [...permission_arr], permission_arr: [...permission_arr],
}; };
console.log(roleState.formData.permission_arr);
} else { } else {
ElMessage.error(res.data.data); ElMessage.error(res.data.data);
} }
...@@ -142,15 +129,14 @@ const saveRole = () => { ...@@ -142,15 +129,14 @@ const saveRole = () => {
role_name: roleState.formData.role_name, role_name: roleState.formData.role_name,
role_desc: roleState.formData.role_desc, role_desc: roleState.formData.role_desc,
state: roleState.formData.state, state: roleState.formData.state,
data_purview: roleState.formData.data_purview,
menu_ids: [...roleState.formData.permission_arr], menu_ids: [...roleState.formData.permission_arr],
}; };
if (!route.query.id) { if (!route.query.id) {
// 新增 // 新增
axios.put(`/apaas/system/v5/role/create`, params).then((res) => { axios.put(`/v1/api/role/create`, params).then((res) => {
if (res.data.code == 200) { if (res.data.code == 200) {
ElMessage.success(res.data.msg); ElMessage.success(res.data.msg);
router.push("/system/role"); router.push("/authority/role");
} else { } else {
ElMessage.error(res.data.data); ElMessage.error(res.data.data);
} }
...@@ -158,10 +144,10 @@ const saveRole = () => { ...@@ -158,10 +144,10 @@ const saveRole = () => {
} else { } else {
// 编辑 // 编辑
params.id = +route.query.id; params.id = +route.query.id;
axios.post(`/apaas/system/v5/role/update`, params).then((res) => { axios.post(`/v1/api/role/update`, params).then((res) => {
if (res.data.code == 200) { if (res.data.code == 200) {
ElMessage.success(res.data.msg); ElMessage.success(res.data.msg);
router.push("/system/role"); router.push("/authority/role");
} else { } else {
ElMessage.error(res.data.data); ElMessage.error(res.data.data);
} }
...@@ -171,7 +157,7 @@ const saveRole = () => { ...@@ -171,7 +157,7 @@ const saveRole = () => {
}); });
}; // 新增或编辑角色的保存 }; // 新增或编辑角色的保存
const goList = () => { const goList = () => {
router.push("/system/role"); router.push("/authority/role");
}; };
onBeforeMount(() => { onBeforeMount(() => {
......
...@@ -69,7 +69,7 @@ ...@@ -69,7 +69,7 @@
delete_row(row); delete_row(row);
} }
" "
:disabled="row.state == 1 || row.role_type == 1"> :disabled="row.state == 1 || row.role_type == 1 || row.role_type == 2 || row.user_count > 0">
删除 删除
</bg-table-btn> </bg-table-btn>
</template> </template>
...@@ -105,14 +105,6 @@ ...@@ -105,14 +105,6 @@
<span class="can_click_text" @click="clearUserSelection">清空</span> <span class="can_click_text" @click="clearUserSelection">清空</span>
</div> </div>
<div class="right"> <div class="right">
<el-select v-model="userFilter.is_admin" placeholder="请选择" style="width: 200px">
<el-option
v-for="(item, index) in userTypeList"
:key="'pushOptions' + index"
:label="item.name"
:value="item.value">
</el-option>
</el-select>
<el-cascader <el-cascader
v-model="userFilter.organization_id" v-model="userFilter.organization_id"
:options="orgList" :options="orgList"
...@@ -127,7 +119,7 @@ ...@@ -127,7 +119,7 @@
}" }"
:clearable="true" :clearable="true"
collapse-tags collapse-tags
style="width: 200px"> style="width: 200px; margin-right: 30px">
<template #default="{ data }"> <template #default="{ data }">
<span>{{ data.name }}</span> <span>{{ data.name }}</span>
</template> </template>
...@@ -135,9 +127,9 @@ ...@@ -135,9 +127,9 @@
<el-input <el-input
v-model.trim="userFilter.search" v-model.trim="userFilter.search"
placeholder="请输入内容" placeholder="请输入内容"
style="width: 200px" style="width: 200px; margin-right: 30px"
:prefix-icon="Search" /> :prefix-icon="Search" />
<el-button type="primary" @click="searchAction">查询</el-button> <el-button style="margin-right: 15px" type="primary" @click="searchAction">查询</el-button>
<el-button type="default" @click="clearAction">重置</el-button> <el-button type="default" @click="clearAction">重置</el-button>
</div> </div>
</div> </div>
...@@ -236,26 +228,11 @@ const state = reactive({ ...@@ -236,26 +228,11 @@ const state = reactive({
}); });
const userState = reactive({ const userState = reactive({
userFilter: { userFilter: {
is_admin: "",
organization_id: "", organization_id: "",
search: "", search: "",
limit: 10, limit: 10,
page: 1, page: 1,
}, },
userTypeList: [
{
name: "全部类型",
value: "",
},
{
name: "组织管理员账号",
value: 2,
},
{
name: "平台用户账号",
value: 3,
},
],
orgList: [], orgList: [],
userHeaders: [ userHeaders: [
{ {
...@@ -280,10 +257,10 @@ const userState = reactive({ ...@@ -280,10 +257,10 @@ const userState = reactive({
userSelection: [], userSelection: [],
distributeDialog: false, // 分配用户弹窗 distributeDialog: false, // 分配用户弹窗
}); });
// 获取角色列表
const getRoleRows = () => { const getRoleRows = () => {
let params = { ...state.filter }; let params = { ...state.filter };
console.log(params); axios.get(`/v1/api/role/list`, { params }).then((res) => {
axios.get(`/apaas/system/v5/role/list`, { params }).then((res) => {
if (res.data.code == 200) { if (res.data.code == 200) {
state.tableRows = res.data.data || []; state.tableRows = res.data.data || [];
state.tableTotal = res.data.total; state.tableTotal = res.data.total;
...@@ -291,12 +268,11 @@ const getRoleRows = () => { ...@@ -291,12 +268,11 @@ const getRoleRows = () => {
ElMessage.error(res.data.data); ElMessage.error(res.data.data);
} }
}); });
}; // 获取角色列表 };
//获取组织树
const getOrgList = () => { const getOrgList = () => {
axios.get(`/apaas/system/v5/org/tree`).then((res) => { axios.get(`/v1/api/org/tree`).then((res) => {
if (res.data.code == 200) { if (res.data.code == 200) {
console.log(res.data.data);
userState.orgList = res.data.data || []; userState.orgList = res.data.data || [];
} else { } else {
ElMessage.error(res.data.data); ElMessage.error(res.data.data);
...@@ -319,10 +295,11 @@ const changeSearch = (val) => { ...@@ -319,10 +295,11 @@ const changeSearch = (val) => {
}; // 表格关键字筛选 }; // 表格关键字筛选
const changeUseRow = (row) => { const changeUseRow = (row) => {
//内置角色不能删除和编辑
if (row.role_type == 1 || row.role_type == 2) { if (row.role_type == 1 || row.role_type == 2) {
return; return;
} }
axios.post(`/apaas/system/v5/role/state/${row.id}/${row.state}`).then((res) => { axios.post(`/v1/api/role/state/${row.id}/${row.state}`).then((res) => {
if (res.data.code == 200) { if (res.data.code == 200) {
ElMessage.success(res.data.msg); ElMessage.success(res.data.msg);
changePage(1); changePage(1);
...@@ -370,10 +347,9 @@ const getUserList = () => { ...@@ -370,10 +347,9 @@ const getUserList = () => {
page: userState.userFilter.page, page: userState.userFilter.page,
search: userState.userFilter.search, search: userState.userFilter.search,
organization_id: userState.userFilter.organization_id, organization_id: userState.userFilter.organization_id,
is_admin: userState.userFilter.is_admin,
role_id: state.actionRow.id, role_id: state.actionRow.id,
}; };
axios.get(`/apaas/system/v5/role/allotment/list`, { params }).then((res) => { axios.get(`/v1/api/role/allotment/list`, { params }).then((res) => {
if (res.data.code == 200) { if (res.data.code == 200) {
console.log(res.data.data); console.log(res.data.data);
userState.userRows = res.data.data || []; userState.userRows = res.data.data || [];
...@@ -381,7 +357,6 @@ const getUserList = () => { ...@@ -381,7 +357,6 @@ const getUserList = () => {
nextTick(() => { nextTick(() => {
userState.userRows.forEach((e) => { userState.userRows.forEach((e) => {
if (e.is_bind == 1) { if (e.is_bind == 1) {
console.log(userTable);
userTable.value.toggleRowSelection(e, true); userTable.value.toggleRowSelection(e, true);
} }
}); });
...@@ -402,13 +377,11 @@ const changeUserSize = (val) => { ...@@ -402,13 +377,11 @@ const changeUserSize = (val) => {
}; };
const searchAction = () => { const searchAction = () => {
console.log(userState.userFilter);
changeUserPage(1); changeUserPage(1);
}; };
const clearAction = (type) => { const clearAction = (type) => {
userState.userFilter = { userState.userFilter = {
is_admin: "",
organization_id: "", organization_id: "",
search: "", search: "",
limit: 10, limit: 10,
...@@ -420,7 +393,6 @@ const clearAction = (type) => { ...@@ -420,7 +393,6 @@ const clearAction = (type) => {
}; };
const clearUserSelection = () => { const clearUserSelection = () => {
console.log(userTable.value);
userTable.value.clearTable(); userTable.value.clearTable();
}; };
...@@ -437,7 +409,7 @@ const distribute = () => { ...@@ -437,7 +409,7 @@ const distribute = () => {
id: state.actionRow.id, id: state.actionRow.id,
user_ids: user_ids, user_ids: user_ids,
}; };
axios.post(`/apaas/system/v5/role/allotment/user`, params).then((res) => { axios.post(`/v1/api/role/allotment/user`, params).then((res) => {
if (res.data.code == 200) { if (res.data.code == 200) {
ElMessage.success(res.data.msg); ElMessage.success(res.data.msg);
userState.distributeDialog = false; userState.distributeDialog = false;
...@@ -475,7 +447,7 @@ const deleteData = () => { ...@@ -475,7 +447,7 @@ const deleteData = () => {
let params = { let params = {
ids: [...ids], ids: [...ids],
}; };
axios.delete(`/apaas/system/v5/role/delete`, { data: { ids: [...ids] } }).then((res) => { axios.delete(`/v1/api/role/delete`, { data: { ids: [...ids] } }).then((res) => {
if (res.data.code == 200) { if (res.data.code == 200) {
ElMessage.success(res.data.msg); ElMessage.success(res.data.msg);
state.delDialog = false; state.delDialog = false;
...@@ -492,8 +464,7 @@ onBeforeMount(() => { ...@@ -492,8 +464,7 @@ onBeforeMount(() => {
const { filter, headers, tableRows, tableTotal, delDialog, selection } = toRefs(state); const { filter, headers, tableRows, tableTotal, delDialog, selection } = toRefs(state);
const { userFilter, userTypeList, orgList, userHeaders, userRows, total, userSelection, distributeDialog } = const { userFilter, orgList, userHeaders, userRows, total, userSelection, distributeDialog } = toRefs(userState);
toRefs(userState);
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -569,7 +540,7 @@ const { userFilter, userTypeList, orgList, userHeaders, userRows, total, userSel ...@@ -569,7 +540,7 @@ const { userFilter, userTypeList, orgList, userHeaders, userRows, total, userSel
flex: 1; flex: 1;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: flex-end;
.el-button { .el-button {
margin: 0; margin: 0;
width: 64px; width: 64px;
......
<template>
<el-form
:label-position="'right'"
label-width="120px"
:model="contactForm"
:rules="contactFormRules"
ref="contactRef"
style="max-width: 66%">
<el-form-item label="联系人姓名" prop="contact_name">
<el-input v-model="contactForm.contact_name" />
</el-form-item>
<el-form-item label="联系人手机号" prop="contact_phone">
<el-input v-model="contactForm.contact_phone" />
</el-form-item>
<el-form-item label="联系人邮箱" prop="contact_email">
<el-input v-model="contactForm.contact_email" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input type="textarea" :rows="3" v-model="contactForm.remark" show-word-limit maxlength="300" />
</el-form-item>
</el-form>
</template>
<script setup>
import { reactive, ref, onMounted } from "vue";
const contactForm = reactive({
contact_name: "",
contact_phone: "",
contact_email: "",
remark: "",
});
const props = defineProps({
formType: {
type: Boolean,
default: false, //false 新增 true 编辑
},
id: {
type: String,
default: "",
},
});
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 checkName = (rule, value, callback) => {
var reg = /^[a-zA-Z0-9\u4e00-\u9fa5]+$/;
if (!reg.test(value)) {
callback(new Error("只能输入字母、数字和汉字"));
} else {
callback();
}
};
const contactFormRules = reactive({
contact_name: [
{ required: true, message: "请输入联系人姓名", trigger: "blur" },
{ max: 50, message: "联系人姓名最大长度为50个字符", trigger: "blur" },
{ validator: checkName, trigger: "blur" },
],
contact_phone: [
{ required: true, message: "请输入联系人手机号", trigger: "blur" },
{ validator: checkPhone, trigger: "blur" },
],
contact_email: [
{ type: "email", message: "请输入正确的邮箱", trigger: "blur" },
{ max: 100, message: "邮箱最大长度为100个字符", trigger: "blur" },
],
});
const contactRef = ref(null);
const emit = defineEmits(["action"]);
const submitForm = async () => {
if (!contactRef) return;
await contactRef.value.validate((valid, fields) => {
if (valid) {
emit("action", contactForm);
} else {
emit("action", null);
}
});
};
const clearForm = () => {
if (!contactRef) return;
contactRef.value.resetFields();
};
const setForm = (data) => {
Object.assign(contactForm, data);
};
onMounted(() => {});
defineExpose({ submitForm, clearForm, setForm });
</script>
...@@ -3,88 +3,17 @@ ...@@ -3,88 +3,17 @@
<bg-breadcrumb></bg-breadcrumb> <bg-breadcrumb></bg-breadcrumb>
<div class="page_content flex_cloumn"> <div class="page_content flex_cloumn">
<div class="content_top apaas_scroll"> <div class="content_top apaas_scroll">
<div class="content_process">
<div>
<el-steps :active="step">
<el-step title="" :class="{ process_complete: step > 1 }">
<template #icon>
<span class="process_desc">
<span class="icon_box" v-if="step > 0"
><bg-icon class="step_icon" icon="#bg-ic-file"></bg-icon
></span>
<span class="circle" v-else></span>
业务系统信息
</span>
</template>
</el-step>
<el-step title="" :class="{ process_complete: step > 2 }">
<template #icon>
<span class="process_desc">
<span class="icon_box" v-if="step > 1"
><bg-icon class="step_icon" icon="#bg-ic-file-staff"></bg-icon
></span>
<span class="circle" v-else></span>
联系人信息
</span>
</template>
</el-step>
<el-step title="">
<template #icon>
<span class="process_desc">
<span class="icon_box" v-if="step > 2"
><bg-icon class="step_icon" icon="#bg-ic-file-success"></bg-icon
></span>
<span class="circle" v-else></span>
完成
</span>
</template>
</el-step>
</el-steps>
</div>
</div>
<div class="content_main"> <div class="content_main">
<systemForm <systemForm
v-show="step === 1"
ref="systemFormRef" ref="systemFormRef"
:form-type="route.query.id ? true : false" :form-type="route.query.id ? true : false"
:id="route.query.id" :id="route.query.id"
@action="getSystemFormData"></systemForm> @action="getSystemFormData"></systemForm>
<contactForm
v-show="step === 2"
ref="contactFormRef"
:id="route.query.id"
@action="getContactFormData"></contactForm>
<div class="process_end" v-show="step === 3">
<div>
<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 v-if="!route.query.id" type="primary" @click="continueCreate">继续创建</el-button>
</div>
</div>
</div> </div>
</div> </div>
<div class="content_bottom" v-if="step !== 3"> <div class="content_bottom">
<div v-show="step === 1"> <div>
<el-button @click="cancel">取消</el-button>
<el-button type="primary" @click="nextStep">下一步</el-button>
</div>
<div v-show="step === 2">
<el-button @click="cancel">取消</el-button> <el-button @click="cancel">取消</el-button>
<el-button type="primary" @click="previousStep">上一步</el-button>
<el-button type="primary" @click="submit">保存</el-button> <el-button type="primary" @click="submit">保存</el-button>
</div> </div>
</div> </div>
...@@ -95,17 +24,14 @@ ...@@ -95,17 +24,14 @@
<script setup> <script setup>
import { useRoute, useRouter } from "vue-router"; import { useRoute, useRouter } from "vue-router";
import systemForm from "./system-form.vue"; import systemForm from "./system-form.vue";
import contactForm from "./contact-form.vue";
import { reactive, ref, onBeforeUnmount, onMounted } from "vue"; import { reactive, ref, onBeforeUnmount, onMounted } from "vue";
import CryptoJS from "crypto-js";
import axios from "@/request/http.js"; import axios from "@/request/http.js";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import bgBreadcrumb from "@/components/bg-breadcrumb.vue"; import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
const step = ref(1);
const systemFormRef = ref(null); const systemFormRef = ref(null);
const contactFormRef = ref(null); //业务系统表单
const formData = reactive({ const formData = reactive({
organization_id: "", organization_id: "",
business_code: "", business_code: "",
...@@ -120,82 +46,51 @@ const formData = reactive({ ...@@ -120,82 +46,51 @@ const formData = reactive({
access_address: "", access_address: "",
develop_id: "", develop_id: "",
state: 1, state: 1,
});
contact_name: "",
contact_phone: "",
contact_email: "",
remark: "",
}); //业务系统表单+联系人表单
const successFlag = ref(false);
// 下一步
const nextStep = () => {
systemFormRef.value.submitForm();
};
//业务系统表单检验触发事件 data为null 校验失败 //业务系统表单检验触发事件 data为null 校验失败
const getSystemFormData = (data) => { const getSystemFormData = (data) => {
if (data) { if (data) {
Object.assign(formData, data); Object.assign(formData, data);
step.value = 2;
} else { } else {
} }
}; };
//联系人表单检验触发事件 data为null 校验失败
const getContactFormData = (data) => {
if (data) {
Object.assign(formData, data);
if (route.query.id) {
console.log(formData);
let params = {
...formData,
id: parseInt(route.query.id),
logo: formData.logo && formData.logo.length > 0 ? formData.logo[0].url : "",
};
axios.post(`/apaas/system/v5/user/update`, params).then((res) => {
if (res.data.code == 200) {
successFlag.value = true;
step.value = 3;
} else {
ElMessage.error(res.data.data);
}
});
} else {
let params = {
...formData,
logo: formData.logo && formData.logo.length > 0 ? formData.logo[0].url : "",
password: CryptoJS.AES.encrypt(formData.password, "swuE9cmCZQwrkYRV").toString(),
};
axios.put(`/apaas/system/v5/user/create`, params).then((res) => {
if (res.data.code == 200) {
successFlag.value = true;
step.value = 3;
} else {
ElMessage.error(res.data.data);
}
});
}
}
};
//上一步
const previousStep = () => {
step.value--;
};
//提交表单 //提交表单
const submit = () => { const submit = () => {
contactFormRef.value.submitForm(); if (route.query.id) {
}; let params = {
//继续创建 清空表单 ...formData,
const continueCreate = () => { logo: formData.logo && formData.logo.length > 0 ? formData.logo[0].url : "",
systemFormRef.value.clearForm(); };
contactFormRef.value.clearForm(); axios.put(`/v1/api/user/${route.query.id}`, params).then((res) => {
step.value = 1; if (res.data.code == 200) {
successFlag.value = false; ElMessage.success(res.data.msg);
cancel();
} else {
ElMessage.error(res.data.data);
}
});
} else {
let params = {
...formData,
logo: formData.logo && formData.logo.length > 0 ? formData.logo[0].url : "",
password: CryptoJS.AES.encrypt(formData.password, "swuE9cmCZQwrkYRV").toString(),
};
axios.put(`/v1/api/user/add`, params).then((res) => {
if (res.data.code == 200) {
ElMessage.success(res.data.msg);
cancel();
} else {
ElMessage.error(res.data.data);
}
});
}
}; };
//取消 //取消
const cancel = () => { const cancel = () => {
// router.go(-1); // router.go(-1);
router.push({ router.push({
path: "/develop/account", path: "/authority/user",
query: { query: {
id: formData.organization_id, id: formData.organization_id,
}, },
...@@ -203,7 +98,7 @@ const cancel = () => { ...@@ -203,7 +98,7 @@ const cancel = () => {
}; };
const getDetail = () => { const getDetail = () => {
axios.get(`/apaas/system/v5/user/detail/${route.query.id}`).then((res) => { axios.get(`/v1/api/user/${route.query.id}`).then((res) => {
if (res.data.code == 200) { if (res.data.code == 200) {
const form = res.data.data; const form = res.data.data;
systemFormRef.value.setForm({ systemFormRef.value.setForm({
...@@ -221,13 +116,6 @@ const getDetail = () => { ...@@ -221,13 +116,6 @@ const getDetail = () => {
appid: form.app_id, appid: form.app_id,
appsecret: form.app_secret, appsecret: form.app_secret,
}); });
contactFormRef.value.setForm({
contact_name: form.contact_name,
contact_phone: form.contact_phone,
contact_email: form.contact_email,
remark: form.remark,
});
} else { } else {
ElMessage.error(res.data.data); ElMessage.error(res.data.data);
} }
......
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
:data="orgData" :data="orgData"
:props="defaultProps" :props="defaultProps"
@node-click="handleNodeClick" @node-click="handleNodeClick"
node-key="id" node-key="organization_id"
:highlight-current="true" :highlight-current="true"
:filter-node-method="filterNode" :filter-node-method="filterNode"
:default-expand-all="true"> :default-expand-all="true">
...@@ -276,7 +276,7 @@ const route = useRoute(); ...@@ -276,7 +276,7 @@ const route = useRoute();
const getTableRows = () => { const getTableRows = () => {
let params = { ...filter, organization_id: selectNode.value }; let params = { ...filter, organization_id: selectNode.value };
axios axios
.get(`/apaas/system/v5/user/list`, { .get(`/v1/api/org/detail`, {
params, params,
}) })
.then((res) => { .then((res) => {
...@@ -297,7 +297,7 @@ const addAccount = (params) => { ...@@ -297,7 +297,7 @@ const addAccount = (params) => {
const handleNodeClick = (data) => { const handleNodeClick = (data) => {
if (data.data_type == 1) { if (data.data_type == 1) {
selectNode.value = data.id; selectNode.value = data.organization_id;
changePage(1); changePage(1);
} else { } else {
nextTick(() => { nextTick(() => {
...@@ -321,18 +321,19 @@ const defaultProps = { ...@@ -321,18 +321,19 @@ const defaultProps = {
class: customNodeClass, class: customNodeClass,
}; };
const getOrgTree = () => { const getOrgTree = () => {
axios.get(`/apaas/system/v5/org/tree`).then((res) => { axios.get(`/v1/api/org/tree`).then((res) => {
if (res.data.code == 200) { if (res.data.code == 200) {
orgData.value = res.data.data || []; orgData.value = res.data.data || [];
orgData.value.shift(); // orgData.value.shift();
const orgList = searchOrg(orgData.value); const orgList = searchOrg(orgData.value);
if (route.query.id) { console.log("orgList", orgList);
searchItem(orgData.value, route.query.id); if (route.query.organization_id) {
searchItem(orgData.value, route.query.organization_id);
} else { } else {
selectNode.value = orgList.length > 0 ? orgList[0].id : ""; selectNode.value = orgList.length > 0 ? orgList[0].organization_id : "";
} }
nextTick(() => { nextTick(() => {
if (route.query.id) { if (route.query.organization_id) {
treeRef.value.setCurrentNode(selectNodeObj.value); treeRef.value.setCurrentNode(selectNodeObj.value);
} else { } else {
if (orgList.length > 0) { if (orgList.length > 0) {
...@@ -346,14 +347,14 @@ const getOrgTree = () => { ...@@ -346,14 +347,14 @@ const getOrgTree = () => {
} }
}); });
}; };
const searchItem = (data, id) => { const searchItem = (data, organization_id) => {
data.forEach((e) => { data.forEach((e) => {
if (e.organization_id == id) { if (e.organization_id == organization_id) {
selectNodeObj.value = e; selectNodeObj.value = e;
selectNode.value = e.id; selectNode.value = e.organization_id;
} else { } else {
if (e.Child) { if (e.Child) {
searchItem(e.Child, id); searchItem(e.Child, organization_id);
} }
} }
}); });
...@@ -361,7 +362,7 @@ const searchItem = (data, id) => { ...@@ -361,7 +362,7 @@ const searchItem = (data, id) => {
const searchOrg = (data) => { const searchOrg = (data) => {
const arr = []; const arr = [];
data.forEach((item) => { data.forEach((item) => {
if (item.data_type === 1) { if (item.data_type > 0) {
arr.push(item); arr.push(item);
return; return;
} else { } else {
...@@ -385,8 +386,11 @@ const filterNode = (value, data) => { ...@@ -385,8 +386,11 @@ const filterNode = (value, data) => {
}; };
const stateChange = (row) => { const stateChange = (row) => {
const state = row.state.toString(); const params = {
axios.post(`/apaas/system/v5/user/state/${row.id}/${state}`).then((res) => { id: row.id,
state: row.state == 1 ? 0 : 1,
};
axios.post(`/v1/api/user/updateState`, params).then((res) => {
if (res.data.code == 200) { if (res.data.code == 200) {
ElMessage.success(res.data.msg); ElMessage.success(res.data.msg);
getTableRows(); getTableRows();
...@@ -449,7 +453,7 @@ const handleCloseRowDelete = () => { ...@@ -449,7 +453,7 @@ const handleCloseRowDelete = () => {
const deleteConfirm = () => { const deleteConfirm = () => {
const ids = selected.value.map((item) => item.id); const ids = selected.value.map((item) => item.id);
axios.delete(`/apaas/system/v5/user/delete`, { data: { ids: ids } }).then((res) => { axios.delete(`/v1/api/user/del`, { data: { ids: ids } }).then((res) => {
if (res.data.code == 200) { if (res.data.code == 200) {
ElMessage.success(res.data.msg); ElMessage.success(res.data.msg);
getTableRows(); getTableRows();
...@@ -461,7 +465,7 @@ const deleteConfirm = () => { ...@@ -461,7 +465,7 @@ const deleteConfirm = () => {
}; };
const deleteRowConfirm = () => { const deleteRowConfirm = () => {
axios.delete(`/apaas/system/v5/user/delete`, { data: { ids: [selectedRow.value.id] } }).then((res) => { axios.delete(`/v1/api/user/del`, { data: { ids: [selectedRow.value.id] } }).then((res) => {
if (res.data.code == 200) { if (res.data.code == 200) {
ElMessage.success(res.data.msg); ElMessage.success(res.data.msg);
getTableRows(); getTableRows();
...@@ -494,7 +498,7 @@ const resetPsd = () => { ...@@ -494,7 +498,7 @@ const resetPsd = () => {
const resetConfirm = () => { const resetConfirm = () => {
const ids = selected.value.map((item) => item.id); const ids = selected.value.map((item) => item.id);
axios.post(`/apaas/system/v5/user/resetpwd`, { ids: ids }).then((res) => { axios.post(`/v1/api/user/resetPwd`, { ids: ids }).then((res) => {
if (res.data.code == 200) { if (res.data.code == 200) {
ElMessage.success(res.data.msg); ElMessage.success(res.data.msg);
getTableRows(); getTableRows();
...@@ -522,7 +526,7 @@ const editConfirm = () => { ...@@ -522,7 +526,7 @@ const editConfirm = () => {
passwordRef.value.validate((valid, fields) => { passwordRef.value.validate((valid, fields) => {
if (valid) { if (valid) {
axios axios
.post(`/apaas/system/v5/user/editpwd`, { .post(`/v1/api/user/updatePwd`, {
id: selectedRow.value.id, id: selectedRow.value.id,
password: CryptoJS.AES.encrypt(passwordForm.password, "swuE9cmCZQwrkYRV").toString(), password: CryptoJS.AES.encrypt(passwordForm.password, "swuE9cmCZQwrkYRV").toString(),
}) })
......
<template>
<el-form
:label-position="'right'"
label-width="120px"
:model="directoryForm"
:rules="directoryFormRules"
ref="directoryRef"
style="max-width: 80%">
<el-form-item label="上级目录" prop="p_organization_id" v-if="formType === 'create'">
<el-tree-select
v-model="directoryForm.p_organization_id"
:data="orgData"
:props="treeProps"
:render-after-expand="false"
:check-strictly="true"
:disabled="directoryForm.level"
style="width: 80%" />
<el-form-item label="" style="padding-left: 16px">
<el-checkbox v-model="directoryForm.level" @change="isTop" label="顶级" />
</el-form-item>
</el-form-item>
<el-form-item label="名称" prop="name">
<el-input v-model="directoryForm.name" />
</el-form-item>
</el-form>
</template>
<script setup>
import { reactive, ref, onMounted, onBeforeMount, nextTick } from "vue";
import axios from "@/request/http.js";
import { ElMessage } from "element-plus";
const props = defineProps({
formType: {
type: String,
default: "create", //false 新增 true 编辑
},
});
const directoryForm = reactive({
p_organization_id: "",
name: "",
level: false,
});
const directoryFormRules = reactive({
p_organization_id: [{ required: true, message: "请输入上级目录", trigger: "blur" }],
name: [{ required: true, message: "请输入名称", trigger: "blur" }],
});
const directoryRef = ref(null);
const emit = defineEmits(["action"]);
const submitForm = async () => {
if (!directoryRef) return;
await directoryRef.value.validate((valid, fields) => {
if (valid) {
emit("action", directoryForm);
} else {
emit("action", null);
}
});
};
const clearForm = () => {
if (!directoryRef) return;
directoryRef.value.resetFields();
};
const setForm = (data) => {
Object.assign(directoryForm, data);
};
const orgData = ref([]);
const treeProps = {
label: "name",
children: "Child",
value: "organization_id",
disabled: "disabled",
};
const getOrgTree = () => {
axios.get(`/apaas/system/v5/org/tree`).then((res) => {
if (res.data.code == 200) {
const orgDataTemp = res.data.data || [];
orgDataTemp.shift();
orgData.value = filterOrg(orgDataTemp);
} else {
ElMessage.error(res.data.data);
}
});
};
const filterOrg = (data) => {
if (data.length > 0) {
data.forEach((item) => {
item.disabled = item.data_type === 0 ? false : true;
if (item.Child) {
filterOrg(item.Child);
} else {
return;
}
});
}
return data;
};
const isTop = (data) => {
directoryForm.p_organization_id = data ? " " : ""; //空格绕过表单非空校验
};
onBeforeMount(() => {
getOrgTree();
});
onMounted(() => {});
defineExpose({ submitForm, clearForm, setForm });
</script>
This diff is collapsed.
<template>
<div class="page_container">
<bg-breadcrumb></bg-breadcrumb>
<div class="page_content apaas_scroll">
<div class="info_row">
<div class="title">
<div><span class="icon_box"></span> 基础信息</div>
<div class="dashed_line"></div>
</div>
<div class="info_content">
<div class="info_box">
<bg-info :data="baseInfo"></bg-info>
</div>
<div class="org_file info_box">
<div class="pl-1">组织附件</div>
<div>
<div class="file_item pl-1" v-for="(item, index) in fileList" :key="'file_' + index">
<span><bg-icon style="font-size: 24px" :icon="'#bg-ic-' + formatFile(item)"></bg-icon></span>
<span class="file_name">{{ downloadFileFormatNew(item) }}</span>
<span class="fr download_btn">
<el-button type="primary" @click="downloadFile(item)"
><bg-icon icon="#bg-ic-to-bottom"></bg-icon>下载</el-button
>
</span>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="title">
<div><span class="icon_box"></span> 业务系统信息</div>
<div class="dashed_line"></div>
</div>
<div class="info_content info_box">
<bg-table ref="bgTable" :headers="headers" :rows="tableRows" :isIndex="true" :stripe="true"> </bg-table>
<div class="pagination_box">
<bg-pagination
:page="filter.page"
:size="filter.limit"
:total="tableTotal"
@change-page="changePage"
@change-size="changeSize">
</bg-pagination>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { reactive, toRefs, ref, computed, onBeforeMount } from "vue";
import { useRoute } from "vue-router";
import { downloadFileFormatNew } from "@/services/helper";
import axios from "@/request/http.js";
import { ElMessage } from "element-plus";
import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
const route = useRoute();
const baseInfo = reactive([
{
name: "组织名称",
value: "",
nameWidth: 130,
},
{
name: "组织代码",
value: "",
nameWidth: 130,
},
{
name: "组织管理员数量",
value: "",
nameWidth: 130,
},
{
name: "业务系统数量",
value: "",
nameWidth: 130,
},
{
name: "组织描述",
value: "",
nameWidth: 130,
},
]);
const headers = reactive([
{
label: "业务系统名称",
prop: "business_name",
},
{
label: "是否启用",
prop: "state",
},
{
label: "业务系统账号",
prop: "system_account",
},
]);
const tableRows = ref([]);
const fileList = ref([]);
const filter = reactive({
page: 1,
limit: 10,
});
const tableTotal = ref(0);
const changeSize = (size) => {
filter.limit = size;
changePage(1);
};
const changePage = (page) => {
filter.page = page;
getSystemInfo();
};
const downloadFile = (data) => {
const a = document.createElement("a"); // 创建a标签
a.setAttribute("download", ""); // download属性
a.setAttribute("href", data); // href链接
a.click(); // 自执行点击事件
};
const formatFile = (url) => {
const file = url.split(".")[1];
let icon = "";
if ("docx".indexOf(file) !== -1) {
icon = "c-file-doc";
} else if ("xlsx".indexOf(file) !== -1) {
icon = "c-file-xlsx";
} else if ("pdf".indexOf(file) !== -1) {
icon = "c-file-pdf";
} else if ("txt".indexOf(file) !== -1) {
icon = "c-file-txt";
} else if ("zip".indexOf(file) !== -1) {
icon = "c-file-zip";
} else if ("jpg,png".indexOf(file) !== -1) {
icon = "c-file-image";
} else {
icon = "txt";
}
return icon;
};
const getDetail = () => {
axios
.get(`/apaas/system/v5/org/detail?organization_id=${route.query.id}&key_word=&state=&limit=&page=&data_type=1`)
.then((res) => {
if (res.data.code == 200) {
const detail = res.data.data.org_info;
baseInfo[0].value = detail.name;
baseInfo[1].value = detail.organization_code;
baseInfo[2].value = detail.org_admin_number;
baseInfo[3].value = detail.business_system_number;
baseInfo[4].value = detail.description;
fileList.value = detail.attachment ? detail.attachment.split(",") : [];
} else {
ElMessage.error(res.data.data);
}
});
};
const getSystemInfo = () => {
const params = { ...filter, organization_id: route.query.id };
axios.get(`/apaas/system/v5/org/business/msg`, { params }).then((res) => {
if (res.data.code == 200) {
tableRows.value = res.data.data || [];
tableTotal.value = res.data.total;
} else {
ElMessage.error(res.data.data);
}
});
};
onBeforeMount(() => {
if (route.query.id) {
getDetail();
getSystemInfo();
}
});
</script>
<style scoped>
.page_content {
padding: 15px;
overflow: auto;
font-size: 14px;
color: #202531;
}
.info_content {
/* display: flex; */
}
.org_file {
margin-top: 15px;
}
.file_item {
height: 48px;
line-height: 48px;
background-color: #fafafa;
border-radius: 4px;
font-size: 14px;
margin-bottom: 8px;
}
.file_name {
padding-left: 10px;
color: #202531;
}
.download_btn {
padding-right: 4px;
}
.info_row {
margin-bottom: 40px;
}
.img_box {
width: 120px\;;
}
.info_box {
width: 60%;
}
.title {
font-size: 18px;
color: #1a1a1a;
font-weight: bold;
margin-bottom: 10px;
display: flex;
align-items: center;
}
.dashed_line {
flex: 1;
height: 1px;
margin: 0 10px;
border-bottom: dashed 1px #dadee7;
}
.icon_box {
display: inline-block;
width: 4px;
height: 14px;
background-color: #3759be;
border-radius: 2px;
margin-right: 5px;
}
.pagination_box {
position: sticky;
position: -webkit-sticky;
margin-top: 16px;
bottom: -15px;
background-color: #fff;
z-index: 1024;
height: 40px;
line-height: 40px;
padding-top: 5px;
}
.bg-pagination {
margin-top: 0px;
}
.info_content :deep() .bg-table .empty_container {
height: 160px;
padding-top: 25px;
}
</style>
<template>
<el-form :label-position="'right'" label-width="120px" :model="orgForm" :rules="formRules" ref="orgRef">
<el-form-item label="上级目录" prop="p_organization_id" v-if="formType === 'create'">
<el-tree-select
v-model="orgForm.p_organization_id"
:data="orgData"
:props="treeProps"
:render-after-expand="false"
:check-strictly="true"
:disabled="orgForm.level"
style="width: 80%" />
<el-form-item label="" style="padding-left: 16px">
<el-checkbox v-model="orgForm.level" @change="isTop" label="顶级" />
</el-form-item>
</el-form-item>
<el-form-item label="政务组织名称" prop="name">
<el-input v-model="orgForm.name" />
</el-form-item>
<el-form-item label="组织代码" prop="organization_code">
<el-input v-model="orgForm.organization_code" />
</el-form-item>
<el-form-item label="组织介绍" prop="description">
<el-input type="textarea" :rows="3" v-model="orgForm.description" maxlength="300" show-word-limit />
</el-form-item>
<el-form-item label="组织附件" prop="logo">
<bg-upload
v-model="orgForm.attachment"
customTips
:limit="3"
:fileTypes="['zip', 'rar', 'doc', 'docx', 'xlsx', 'xls', 'png', 'jpg']"
:otherInfo="'最多可上传三个附件,可上传zip,rar,doc,docx,xlsx,xls,png,jpg,可上传营业执照和相关协议文件等'">
<span>将文件拖到此处,或 点击上传</span>
</bg-upload>
</el-form-item>
</el-form>
</template>
<script setup>
import { reactive, ref, onMounted, onBeforeMount } from "vue";
import axios from "@/request/http.js";
import { ElMessage } from "element-plus";
const props = defineProps({
formType: {
type: String,
default: "create", //false 新增 true 编辑
},
});
const orgForm = reactive({
p_organization_id: "",
level: false,
name: "",
organization_code: "",
description: "",
attachment: [],
});
const checkCode = (rule, value, callback) => {
var reg = /^[a-zA-Z0-9]+$/;
if (!reg.test(value)) {
callback(new Error("只能输入字母和数字"));
} else {
callback();
}
};
const checkName = (rule, value, callback) => {
var reg = /^[a-zA-Z\u4e00-\u9fa5]+$/;
if (!reg.test(value)) {
callback(new Error("只能输入字母和汉字"));
} else {
callback();
}
};
const formRules = reactive({
p_organization_id: [{ required: true, message: "输入上级目录", trigger: "blur" }],
name: [
{ required: true, message: "请输入组织名称", trigger: "blur" },
{ max: 50, message: "组织名称最大长度为50位", trigger: "blur" },
{ validator: checkName, trigger: "blur" },
],
organization_code: [
{ required: true, message: "请输入组织代码", trigger: "blur" },
{ max: 18, message: "组织代码最大长度为18位", trigger: "blur" },
{ validator: checkCode, trigger: "blur" },
],
});
const orgRef = ref(null);
const emit = defineEmits(["action"]);
const submitForm = async () => {
if (!orgRef) return;
await orgRef.value.validate((valid, fields) => {
if (valid) {
emit("action", orgForm);
} else {
emit("action", null);
}
});
};
const clearForm = () => {
if (!orgRef) return;
orgRef.value.resetFields();
};
const setForm = (data) => {
Object.assign(orgForm, data);
};
const orgData = ref([]);
const treeProps = {
label: "name",
children: "Child",
value: "organization_id",
disabled: "disabled",
};
const getOrgTree = () => {
axios.get(`/apaas/system/v5/org/tree`).then((res) => {
if (res.data.code == 200) {
const orgDataTemp = res.data.data || [];
orgDataTemp.shift();
orgData.value = filterOrg(orgDataTemp);
} else {
ElMessage.error(res.data.data);
}
});
};
const filterOrg = (data) => {
if (data.length > 0) {
data.forEach((item) => {
item.disabled = item.data_type === 0 ? false : true;
if (item.Child) {
filterOrg(item.Child);
} else {
return;
}
});
}
return data;
};
const isTop = (data) => {
orgForm.p_organization_id = data ? " " : ""; //空格绕过表单非空校验
};
onBeforeMount(() => {
getOrgTree();
});
onMounted(() => {});
defineExpose({ submitForm, clearForm, setForm });
</script>
<template>
<div class="page_container">
<bg-breadcrumb></bg-breadcrumb>
<div class="page_content flex_cloumn">
<div class="content_top apaas_scroll">
<div class="content_process">
<div>
<el-steps :active="step">
<el-step title="" :class="{ process_complete: step > 1 }">
<template #icon>
<span class="process_desc">
<span class="icon_box" v-if="step > 0"
><bg-icon class="step_icon" icon="#bg-ic-file"></bg-icon
></span>
<span class="circle" v-else></span>
账号信息
</span>
</template>
</el-step>
<el-step title="" :class="{ process_complete: step > 2 }">
<template #icon>
<span class="process_desc">
<span class="icon_box" v-if="step > 1"
><bg-icon class="step_icon" icon="#bg-ic-file-staff"></bg-icon
></span>
<span class="circle" v-else></span>
个人信息
</span>
</template>
</el-step>
<el-step title="">
<template #icon>
<span class="process_desc">
<span class="icon_box" v-if="step > 2"
><bg-icon class="step_icon" icon="#bg-ic-file-success"></bg-icon
></span>
<span class="circle" v-else></span>
完成
</span>
</template>
</el-step>
</el-steps>
</div>
</div>
<div class="content_main">
<orgAccountForm
v-show="step === 1"
:form-type="route.query.id ? true : false"
:id="route.query.id"
ref="orgAccountRef"
@action="getOrgAccountFormData"></orgAccountForm>
<orgPersonForm v-show="step === 2" ref="orgPersonRef" @action="getOrgPersonFormData"></orgPersonForm>
<div class="process_end" v-show="step === 3">
<div>
<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 v-if="!route.query.id" type="primary" @click="continueCreate">继续创建</el-button>
</div>
</div>
</div>
</div>
<div class="content_bottom" v-if="step !== 3">
<div v-show="step === 1">
<el-button @click="cancel">取消</el-button>
<el-button type="primary" @click="nextStep">下一步</el-button>
</div>
<div v-show="step === 2">
<el-button @click="cancel">取消</el-button>
<el-button type="primary" @click="previousStep">上一步</el-button>
<el-button type="primary" @click="submit">提交</el-button>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { useRoute, useRouter } from "vue-router";
import orgAccountForm from "./org-account-form.vue";
import orgPersonForm from "./org-person-form.vue";
import { reactive, ref, onBeforeMount, toRefs, computed, onBeforeUnmount, onMounted } from "vue";
import CryptoJS from "crypto-js";
import axios from "@/request/http.js";
import { ElMessage } from "element-plus";
import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
const route = useRoute();
const router = useRouter();
const step = ref(1);
const orgAccountRef = ref(null);
const orgPersonRef = ref(null);
const formData = reactive({
organization_id: "",
select_role: "",
logo: [],
system_account: "",
contact_phone: "",
password: "",
confirm_password: "",
state: 1,
contact_name: "",
document_type: "",
document_number: "",
contact_email: "",
remark: "",
}); //账号信息表单+个人信息表单
const successFlag = ref(false);
const orgId = ref("");
// 下一步
const nextStep = () => {
orgAccountRef.value.submitForm();
};
//账号信息表单检验触发事件 data为null 校验失败
const getOrgAccountFormData = (data) => {
if (data) {
Object.assign(formData, data);
step.value = 2;
} else {
}
};
//个人信息表单检验触发事件 data为null 校验失败
const getOrgPersonFormData = (data) => {
if (data) {
if (data) {
Object.assign(formData, data);
if (route.query.id) {
let params = {
...formData,
logo: formData.logo && formData.logo.length > 0 ? formData.logo[0].url : "",
};
params.document_type = params.document_type == "" ? 0 : params.document_type;
axios.put(`/apaas/system/v5/org/update/user/${route.query.id}`, params).then((res) => {
if (res.data.code == 200) {
successFlag.value = true;
step.value = 3;
} else {
ElMessage.error(res.data.data);
}
});
} else {
const params = {
...formData,
// organization_id: orgId.value,
logo: formData.logo && formData.logo.length > 0 ? formData.logo[0].url : "",
is_admin: 2,
password: CryptoJS.AES.encrypt(formData.password, "swuE9cmCZQwrkYRV").toString(),
};
params.document_type = params.document_type == "" ? 0 : params.document_type;
axios.post(`/apaas/system/v5/org/add/user`, params).then((res) => {
if (res.data.code == 200) {
successFlag.value = true;
step.value = 3;
} else {
ElMessage.error(res.data.data);
}
});
}
}
}
};
//上一步
const previousStep = () => {
step.value--;
};
//提交表单
const submit = () => {
orgPersonRef.value.submitForm();
};
//继续创建 清空表单
const continueCreate = () => {
orgAccountRef.value.clearForm();
orgPersonRef.value.clearForm();
step.value = 1;
successFlag.value = false;
};
//取消
const cancel = () => {
router.push({
path: "/system/organization",
query: {
id: route.query.orgId,
},
});
};
const getDetail = () => {
axios.get(`/apaas/system/v5/org/user/${route.query.id}`).then((res) => {
if (res.data.code == 200) {
const form = res.data.data;
orgAccountRef.value.setForm({
organization_id: form.organization_id,
select_role: form.select_role,
logo: form.logo ? [{ url: form.logo }] : [],
system_account: form.system_account,
contact_phone: form.contact_phone,
state: form.state,
});
orgPersonRef.value.setForm({
contact_name: form.contact_name,
document_type: form.document_type ? form.document_type : "",
document_number: form.document_number,
contact_email: form.contact_email,
remark: form.remark,
});
} else {
ElMessage.error(res.data.data);
}
});
};
onBeforeMount(() => {
if (route.query.id) {
getDetail();
}
});
onMounted(() => {});
</script>
<style scoped>
.flex_cloumn {
display: flex;
flex-direction: column;
}
.content_top {
flex: 1;
display: flex;
flex-direction: column;
overflow: auto;
}
/* .content_top::-webkit-scrollbar {
width: 5px;
height: 0px;
}
.content_top::-webkit-scrollbar-thumb {
background: #dedede;
border-radius: 10px;
height: 0px;
}
.content_top::-webkit-scrollbar-track {
background: transparent;
border-radius: 2px;
} */
.content_bottom {
height: 68px;
line-height: 68px;
text-align: right;
padding: 0 20px;
border-top: 1px solid #e6e9ef;
}
.content_process {
border-bottom: 1px solid #e6e9ef;
padding: 38px 16%;
}
.content_main {
flex: 1;
padding: 30px;
box-sizing: border-box;
}
.process_desc {
background-color: #fff;
display: inline-block;
position: absolute;
padding: 0 5px;
font-size: 18px;
color: #202531;
font-weight: bold;
}
.process_desc img {
height: 25px;
width: 25px;
vertical-align: middle;
}
.process_end {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.process_end div {
text-align: center;
}
.step_icon {
color: #fff;
font-weight: 600;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.icon_box {
display: inline-block;
background-color: #2b4695;
width: 48px;
height: 48px;
border-radius: 99px;
position: relative;
border: 3px solid #b0bee8;
vertical-align: middle;
}
.circle {
display: inline-block;
background-color: #a9b1c7;
width: 24px;
height: 24px;
border-radius: 99px;
position: relative;
border: 4px solid #e6e9ef;
vertical-align: middle;
}
.content_process :deep() .el-step.is-horizontal .el-step__line {
height: 4px;
}
.content_process :deep() .el-step__head.is-finish .el-step__line {
background: linear-gradient(to right, #2b4695 50%, #e6e9ef 50%);
}
.process_complete :deep() .el-step__head.is-finish .el-step__line {
background: linear-gradient(to right, #2b4695 100%, #e6e9ef 0%);
}
</style>
<template>
<el-form
:label-position="'right'"
label-width="120px"
:model="orgAccountForm"
:rules="orgAccountFormRules"
ref="orgformAccountRef"
style="max-width: 66%">
<el-form-item label="所属组织" prop="organization_id">
<el-tree-select
v-model="orgAccountForm.organization_id"
:data="orgData"
:props="treeProps"
:render-after-expand="false"
:disabled="true"
style="width: 100%" />
<!-- <el-input v-model="orgAccountForm.organization_id" /> -->
</el-form-item>
<el-form-item label="角色" prop="select_role" v-if="!formType">
<el-select
v-model="orgAccountForm.select_role"
multiple
placeholder="请选择角色"
:disabled="true"
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 label="头像" prop="logo">
<bg-upload-image
v-model="orgAccountForm.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 label="账号" prop="system_account">
<el-input v-model="orgAccountForm.system_account" />
</el-form-item>
<el-form-item label="手机号" prop="contact_phone">
<el-input v-model="orgAccountForm.contact_phone" />
</el-form-item>
<el-form-item label="密码" prop="password" v-if="!formType">
<el-input type="password" v-model="orgAccountForm.password" />
</el-form-item>
<el-form-item label="确认密码" prop="confirm_password" v-if="!formType">
<el-input type="password" v-model="orgAccountForm.confirm_password" />
</el-form-item>
<el-form-item label="是否启用" prop="state">
<bg-switch :labels="['否', '是']" :values="[0, 1]" v-model="orgAccountForm.state"></bg-switch>
</el-form-item>
</el-form>
</template>
<script setup>
import { reactive, ref, onMounted, onBeforeMount } from "vue";
import { useRoute } from "vue-router";
import axios from "@/request/http.js";
import { ElMessage } from "element-plus";
const route = useRoute();
const props = defineProps({
formType: {
type: Boolean,
default: false, //false 新增 true 编辑
},
id: {
type: String,
default: "",
},
});
const orgAccountForm = reactive({
organization_id: "",
select_role: "",
logo: [],
system_account: "",
contact_phone: "",
password: "",
confirm_password: "",
state: 1,
});
const validatePass = (rule, value, callback) => {
if (value !== orgAccountForm.password) {
callback(new Error("密码输入不一致"));
} else {
callback();
}
};
const validateSystemAccount = (rule, value, callback) => {
let reg = /^[a-zA-Z0-9]+$/;
if (!reg.test(value)) {
callback(new Error("只能输入字母和数字"));
} else {
let params = null;
if (props.id) {
params = { id: parseInt(props.id), system_account: value };
} else {
params = { system_account: value };
}
axios.post(`/apaas/system/v5/user/check/account`, params).then((res) => {
if (res.data.code == 200) {
callback();
} else {
callback(new Error(res.data.data));
}
});
}
};
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 checkPhoneRepet = (rule, value, callback) => {
let params = null;
if (props.id) {
params = { id: parseInt(props.id), contact_phone: value };
} else {
params = { id: 0, contact_phone: value };
}
axios.post(`/apaas/system/v5/org/check`, params).then((res) => {
if (res.data.code == 200) {
callback();
} else {
callback(new Error(res.data.data));
}
});
};
const orgAccountFormRules = reactive({
organization_id: [{ required: true, message: "请选择组织", trigger: "blur" }],
select_role: [{ required: true, message: "请选择角色", trigger: "blur" }],
system_account: [
{ required: true, message: "请输入账号", trigger: "blur" },
{ min: 4, message: "帐号长度不得低于4个字符", trigger: "blur" },
{ max: 20, message: "帐号最大长度为20个字符", trigger: "blur" },
{ validator: validateSystemAccount, trigger: "blur" },
],
contact_phone: [
{ required: true, message: "请输入手机号", trigger: "blur" },
{ validator: checkPhone, trigger: "blur" },
{ validator: checkPhoneRepet, trigger: "blur" },
],
password: [
{ required: true, message: "请输入密码", trigger: "blur" },
{ min: 8, message: "密码长度不得低于8位", trigger: "blur" },
],
confirm_password: [
{ required: true, message: "请确认密码", trigger: "blur" },
{ validator: validatePass, trigger: "blur" },
],
});
const orgformAccountRef = ref(null);
const emit = defineEmits(["action"]);
const roleList = ref([]);
const submitForm = async () => {
if (!orgformAccountRef) return;
await orgformAccountRef.value.validate((valid, fields) => {
if (valid) {
emit("action", orgAccountForm);
} else {
emit("action", null);
}
});
};
const clearForm = () => {
if (!orgformAccountRef) return;
orgformAccountRef.value.resetFields();
orgAccountForm.select_role = [roleList.value[0].role_id];
};
const setForm = (data) => {
Object.assign(orgAccountForm, data);
};
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 || [];
} else {
ElMessage.error(res.data.data);
}
});
};
const getRoleList = () => {
axios.get(`/apaas/system/v5/org/select/role?is_admin=2`).then((res) => {
if (res.data.code == 200) {
roleList.value = res.data.data;
orgAccountForm.select_role = [roleList.value[0].role_id];
} else {
}
});
};
onBeforeMount(() => {
getOrgTree();
getRoleList();
orgAccountForm.organization_id = route.query.orgId;
});
onMounted(() => {});
defineExpose({ submitForm, clearForm, setForm });
</script>
<template>
<el-form
:label-position="'right'"
label-width="120px"
:model="orgPersonForm"
:rules="orgPersonFormRules"
ref="orgPersonFormRef"
style="max-width: 66%">
<el-form-item label="联系人姓名" prop="contact_name">
<el-input v-model="orgPersonForm.contact_name" />
</el-form-item>
<el-form-item label="证件类型" prop="document_type">
<el-select v-model="orgPersonForm.document_type" placeholder="请选择证件类型" style="width: 100%">
<el-option v-for="item in documentTypeList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="证件号" prop="document_number">
<el-input v-model="orgPersonForm.document_number" />
</el-form-item>
<el-form-item label="联系人邮箱" prop="contact_email">
<el-input v-model="orgPersonForm.contact_email" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input type="textarea" :rows="3" v-model="orgPersonForm.remark" />
</el-form-item>
</el-form>
</template>
<script setup>
import { reactive, ref, onMounted } from "vue";
const orgPersonForm = reactive({
contact_name: "",
document_type: "",
document_number: "",
contact_email: "",
remark: "",
});
const documentTypeList = ref([
{
label: "身份证",
value: 1,
},
]);
const orgPersonFormRules = reactive({
contact_email: [
// { required: true, message: '请输入手机号', trigger: 'blur' },
{ type: "email", message: "请输入正确的邮箱", trigger: "blur" },
],
document_number: [
{
pattern:
/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}[0-9Xx]$)/,
message: "请输入正确的身份证号",
trigger: "blur",
},
],
});
const orgPersonFormRef = ref(null);
const emit = defineEmits(["action"]);
const submitForm = async () => {
if (!orgPersonFormRef) return;
await orgPersonFormRef.value.validate((valid, fields) => {
if (valid) {
emit("action", orgPersonForm);
} else {
emit("action", null);
}
});
};
const clearForm = () => {
if (!orgPersonFormRef) return;
orgPersonFormRef.value.resetFields();
};
const setForm = (data) => {
Object.assign(orgPersonForm, data);
};
onMounted(() => {});
defineExpose({ submitForm, clearForm, setForm });
</script>
<template>
<el-form
:label-position="'right'"
label-width="120px"
:model="platformAccountForm"
:rules="platformAccountFormRules"
ref="platformAccountRef"
style="max-width: 66%">
<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>
</el-form-item>
<el-form-item label="账号" prop="system_account">
<el-input v-model="platformAccountForm.system_account" />
</el-form-item>
<el-form-item label="手机号" prop="contact_phone">
<el-input v-model="platformAccountForm.contact_phone" />
</el-form-item>
<el-form-item v-if="!formType" label="密码" prop="password">
<el-input type="password" v-model="platformAccountForm.password" />
</el-form-item>
<el-form-item v-if="!formType" label="确认密码" prop="confirm_password">
<el-input type="password" v-model="platformAccountForm.confirm_password" />
</el-form-item>
<el-form-item label="角色授权" prop="select_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 v-if="formType" label="姓名" prop="contact_name">
<el-input v-model="platformAccountForm.contact_name" />
</el-form-item>
<el-form-item v-if="formType" label="邮箱" prop="contact_email">
<el-input v-model="platformAccountForm.contact_email" />
</el-form-item>
<el-form-item v-if="formType" label="备注" prop="remark">
<el-input type="textarea" :rows="3" v-model="platformAccountForm.remark" />
</el-form-item>
<el-form-item label="是否启用" prop="state">
<bg-switch :labels="['否', '是']" :values="[0, 1]" v-model="platformAccountForm.state"></bg-switch>
</el-form-item>
</el-form>
</template>
<script setup>
import { reactive, ref, onMounted, onBeforeMount } from "vue";
import axios from "@/request/http.js";
const props = defineProps({
formType: {
type: Boolean,
default: false, //false 新增 true 编辑
},
id: {
type: String,
default: "",
},
});
const platformAccountForm = reactive({
logo: [],
system_account: "",
contact_phone: "",
password: "",
confirm_password: "",
select_role: "",
state: 1,
contact_name: "",
contact_email: "",
remark: "",
});
const validatePass = (rule, value, callback) => {
if (value !== platformAccountForm.password) {
callback(new Error("密码输入不一致"));
} else {
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 validateSystemAccount = (rule, value, callback) => {
let reg = /^[a-zA-Z0-9]+$/;
if (!reg.test(value)) {
callback(new Error("只能输入字母和数字"));
} else {
let params = null;
if (props.id) {
params = { id: parseInt(props.id), system_account: value };
} else {
params = { system_account: value };
}
axios.post(`/apaas/system/v5/user/check/account`, params).then((res) => {
if (res.data.code == 200) {
callback();
} else {
callback(new Error(res.data.data));
}
});
}
};
const checkPhoneRepet = (rule, value, callback) => {
let params = null;
if (props.id) {
params = { id: parseInt(props.id), contact_phone: value };
} else {
params = { id: 0, contact_phone: value };
}
axios.post(`/apaas/system/v5/org/check`, params).then((res) => {
if (res.data.code == 200) {
callback();
} else {
callback(new Error(res.data.data));
}
});
};
const platformAccountFormRules = reactive({
system_account: [
{ required: true, message: "请输入账号", trigger: "blur" },
{ min: 4, message: "帐号长度不得低于4个字符", trigger: "blur" },
{ max: 20, message: "帐号最大长度为20个字符", trigger: "blur" },
{ validator: validateSystemAccount, trigger: "blur" },
],
contact_phone: [
{ required: true, message: "请输入手机号", trigger: "blur" },
{ validator: checkPhone, trigger: "blur" },
{ validator: checkPhoneRepet, trigger: "blur" },
],
select_role: [{ required: true, message: "请选择角色", trigger: "blur" }],
password: [
{ required: true, message: "请输入密码", trigger: "blur" },
{ min: 8, message: "密码长度不得低于8位", trigger: "blur" },
],
confirm_password: [
{ required: true, message: "请确认密码", trigger: "blur" },
{ validator: validatePass, trigger: "blur" },
],
contact_email: [{ type: "email", message: "请输入正确的邮箱", trigger: "blur" }],
});
const roleList = ref([]);
const platformAccountRef = ref(null);
const emit = defineEmits(["action"]);
const submitForm = async () => {
if (!platformAccountRef) return;
await platformAccountRef.value.validate((valid, fields) => {
if (valid) {
emit("action", platformAccountForm);
} else {
emit("action", null);
}
});
};
const clearForm = () => {
if (!platformAccountRef) return;
platformAccountRef.value.resetFields();
};
const setForm = (data) => {
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(() => {});
defineExpose({ submitForm, clearForm, setForm });
</script>
<template>
<el-form
:label-position="'right'"
label-width="120px"
:model="platformPersonForm"
:rules="platformPersonFormRules"
ref="platformPersonFormRef"
style="max-width: 66%">
<el-form-item label="姓名" prop="contact_name">
<el-input v-model="platformPersonForm.contact_name" />
</el-form-item>
<el-form-item label="邮箱" prop="contact_email">
<el-input v-model="platformPersonForm.contact_email" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input type="textarea" :rows="3" v-model="platformPersonForm.remark" />
</el-form-item>
</el-form>
</template>
<script setup>
import { reactive, ref, onMounted } from "vue";
const platformPersonForm = reactive({
contact_name: "",
contact_email: "",
remark: "",
});
const platformPersonFormRules = reactive({
contact_email: [{ type: "email", message: "请输入正确的邮箱", trigger: "blur" }],
});
const platformPersonFormRef = ref(null);
const emit = defineEmits(["action"]);
const submitForm = async () => {
if (!platformPersonFormRef) return;
await platformPersonFormRef.value.validate((valid, fields) => {
if (valid) {
emit("action", platformPersonForm);
} else {
emit("action", null);
}
});
};
const clearForm = () => {
if (!platformPersonFormRef) return;
platformPersonFormRef.value.resetFields();
};
const setForm = (data) => {
Object.assign(platformPersonForm, data);
};
onMounted(() => {});
defineExpose({ submitForm, clearForm, setForm });
</script>
This diff is collapsed.
<template>
<div class="page_container">
<bg-breadcrumb></bg-breadcrumb>
<div class="page_content apaas_scroll">
<div class="info_row">
<div class="title">
<div><span class="icon_box"></span> 账号信息</div>
<div class="dashed_line"></div>
</div>
<div class="info_content">
<div class="img_box">
<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 class="info_box">
<bg-info :data="accountInfo"></bg-info>
</div>
</div>
</div>
<div>
<div class="title">
<div><span class="icon_box"></span> 个人信息</div>
<div class="dashed_line"></div>
</div>
<div class="info_content">
<div class="img_box"></div>
<div class="info_box">
<bg-info v-if="accountType === 2" :data="personInfo"></bg-info>
<bg-info v-if="accountType === 3" :data="personInfo2"></bg-info>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { reactive, toRefs, ref, computed, onBeforeMount } from "vue";
import { useRoute } from "vue-router";
import axios from "@/request/http.js";
import { ElMessage } from "element-plus";
import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
const route = useRoute();
const accountInfo = reactive([
{
name: "手机号",
value: "",
nameWidth: 130,
},
{
name: "账号",
value: "",
nameWidth: 130,
},
{
name: "角色",
value: "",
nameWidth: 130,
},
{
name: "所属组织",
value: "",
nameWidth: 130,
},
{
name: "创建人",
value: "",
nameWidth: 130,
},
{
name: "创建账号",
value: "",
nameWidth: 130,
},
{
name: "最后编辑时间",
value: "",
nameWidth: 130,
},
{
name: "创建时间",
value: "",
nameWidth: 130,
},
]);
const personInfo = reactive([
{
name: "姓名",
value: "",
nameWidth: 130,
},
{
name: "邮箱",
value: "",
nameWidth: 130,
},
{
name: "证据类型",
value: "",
nameWidth: 130,
},
{
name: "身份证号",
value: "",
idCard: true,
nameWidth: 130,
},
{
name: "备注",
value: "",
full: true,
nameWidth: 130,
},
]);
const personInfo2 = reactive([
{
name: "姓名",
value: "",
nameWidth: 130,
},
{
name: "邮箱",
value: "",
nameWidth: 130,
},
{
name: "备注",
value: "",
full: true,
nameWidth: 130,
},
]);
const logo = ref("");
const accountType = ref(2); //1.业务系统账号 2.组织管理员账号 3.平台用户账号
const getDetail = () => {
axios.get(`/apaas/system/v5/org/user/${route.query.id}`).then((res) => {
if (res.data.code == 200) {
const detail = res.data.data;
accountInfo[0].value = detail.contact_phone;
accountInfo[1].value = detail.system_account;
accountInfo[2].value = detail.system_role && detail.system_role.length > 0 ? detail.system_role.join("") : "";
accountInfo[3].value = detail.organization;
accountInfo[4].value = detail.created_by;
accountInfo[5].value = detail.created_by_account;
accountInfo[6].value = detail.updated_time;
accountInfo[7].value = detail.created_time;
personInfo[0].value = detail.contact_name;
personInfo[1].value = detail.contact_email;
personInfo[2].value = detail.document_type === 1 ? "身份证" : "";
personInfo[3].value = detail.document_number;
personInfo[4].value = detail.remark;
personInfo2[0].value = detail.contact_name;
personInfo2[1].value = detail.contact_email;
personInfo2[2].value = detail.remark;
logo.value = detail.logo;
accountType.value = detail.is_admin;
} else {
ElMessage.error(res.data.data);
}
});
};
onBeforeMount(() => {
if (route.query.id) {
getDetail();
}
});
</script>
<style scoped>
.page_content {
padding: 15px;
overflow: auto;
}
.info_content {
display: flex;
}
.info_row {
margin-bottom: 40px;
}
.img_box {
width: 120px;
}
.info_box {
width: 60%;
}
.title {
font-size: 18px;
color: #1a1a1a;
font-weight: bold;
margin-bottom: 10px;
display: flex;
align-items: center;
}
.dashed_line {
flex: 1;
height: 1px;
margin: 0 10px;
border-bottom: dashed 1px #dadee7;
}
.icon_box {
display: inline-block;
width: 4px;
height: 14px;
background-color: #3759be;
border-radius: 2px;
margin-right: 5px;
}
</style>
<!-- 角色管理新增 -->
<template>
<role-form></role-form>
</template>
<script setup>
import roleForm from "./role_form.vue";
</script>
<!-- 角色管理 -->
<template>
<div class="detail_container">
<bg-breadcrumb></bg-breadcrumb>
<div class="main_container">
<div class="top_form bg-scroll">
<el-form ref="form" :rules="rules" :model="formData" class="role_form">
<el-form-item prop="role_name" label="角色名称">
<el-input v-model.trim="formData.role_name" maxlength="50" show-word-limit :disabled="rowType != 0" />
</el-form-item>
<el-form-item prop="role_desc" label="描述">
<el-input
class="decs_box"
type="textarea"
v-model="formData.role_desc"
maxlength="300"
show-word-limit
:autosize="{ minRows: 5 }"
:disabled="rowType != 0"></el-input>
</el-form-item>
<el-form-item label="数据权限" prop="data_purview">
<el-radio-group v-model="formData.data_purview" :disabled="rowType != 0">
<el-radio :label="3">全平台所有</el-radio>
<el-radio :label="2">本组织所有</el-radio>
<el-radio :label="1">仅自己</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="菜单功能权限" prop="permission_arr">
<bg-permission
:values="formData.permission_arr"
:options="permissionData"
:props="defaultProps"
@changeMenu="changeMenu" />
</el-form-item>
<el-form-item label="是否启用" prop="state" class="state_item">
<el-switch
class="bg-switch-ele"
v-model="formData.state"
:active-value="1"
:inactive-value="0"
inline-prompt
active-text="是"
inactive-text="否"
:disabled="rowType != 0" />
</el-form-item>
</el-form>
</div>
<div class="bottom_action">
<el-button @click="goList"> 取消 </el-button>
<el-button type="primary" @click="saveRole"> 保存 </el-button>
</div>
</div>
</div>
</template>
<script setup>
import { reactive, toRefs, ref, onBeforeMount, nextTick } from "vue";
import axios from "../../../../../request/http.js";
import { ElMessage } from "element-plus";
import { useRouter, useRoute } from "vue-router";
import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
const router = useRouter();
const route = useRoute();
const form = ref(null);
const checkMenuLength = (rule, value, callback) => {
if (value.length === 0) {
callback(new Error("请选择所需菜单"));
} else {
callback();
}
};
const roleState = reactive({
form,
formData: {
role_name: "",
role_desc: "",
data_purview: 3,
state: 1,
permission_arr: [],
}, // 表单项
rules: {
role_name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
data_purview: [{ required: true, message: "请选择数据权限", trigger: "change" }],
state: [{ required: true, message: "请选择是否启用", trigger: "change" }],
permission_arr: [{ required: true, type: "array", validator: checkMenuLength, trigger: "change" }],
}, // 表单校验规则
defaultProps: {
name: "menu_name",
value: "id",
children: "Child",
remark: "remark",
}, // 菜单框默认配置
permissionData: [], // 菜单数据
rowType: 0,
});
const getMenuTree = () => {
axios.get(`/apaas/system/v5/menu/tree`).then((res) => {
if (res.data.code == 200) {
roleState.permissionData = res.data.data || [];
} else {
ElMessage.error(res.data.data);
}
});
}; // 获取菜单数据
const changeMenu = (val) => {
roleState.formData.permission_arr = val;
}; // 修改选中的菜单
const getRoleDetail = () => {
axios.get(`/apaas/system/v5/role/detail/${route.query.id}`).then((res) => {
if (res.data.code == 200) {
let { role_name, role_desc, data_purview, state, menus } = res.data.data;
roleState.rowType = res.data.data.role_type;
let permission_arr = [];
if (menus && menus.length > 0) {
menus.forEach((e) => {
permission_arr.push(e.id);
});
}
roleState.formData = {
role_name,
role_desc,
data_purview,
state,
permission_arr: [...permission_arr],
};
console.log(roleState.formData.permission_arr);
} else {
ElMessage.error(res.data.data);
}
});
}; // 获取角色详情
const saveRole = () => {
roleState.form.validate((valid) => {
if (valid) {
let params = {
role_name: roleState.formData.role_name,
role_desc: roleState.formData.role_desc,
state: roleState.formData.state,
data_purview: roleState.formData.data_purview,
menu_ids: [...roleState.formData.permission_arr],
};
if (!route.query.id) {
// 新增
axios.put(`/apaas/system/v5/role/create`, params).then((res) => {
if (res.data.code == 200) {
ElMessage.success(res.data.msg);
router.push("/system/role");
} else {
ElMessage.error(res.data.data);
}
});
} else {
// 编辑
params.id = +route.query.id;
axios.post(`/apaas/system/v5/role/update`, params).then((res) => {
if (res.data.code == 200) {
ElMessage.success(res.data.msg);
router.push("/system/role");
} else {
ElMessage.error(res.data.data);
}
});
}
}
});
}; // 新增或编辑角色的保存
const goList = () => {
router.push("/system/role");
};
onBeforeMount(() => {
getMenuTree();
if (route.query.id) {
// 有id表示是编辑,请求详情,回显
getRoleDetail();
}
});
const { formData, rules, defaultProps, permissionData, rowType } = toRefs(roleState);
</script>
<style lang="scss" scoped>
.detail_container {
width: 100%;
padding: 0 24px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
.main_container {
flex-grow: 1;
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
background-color: #fff;
box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
border-radius: 6px;
margin: 0 0 16px;
position: relative;
height: calc(100% - 62px);
.top_form {
height: calc(100% - 68px);
padding: 30px 0 0 40px;
.role_form {
width: 1048px;
:deep().el-form-item {
display: block;
margin-bottom: 24px;
.el-form-item__label {
display: block;
}
.el-input__count {
bottom: -20px;
right: 4px;
color: #a9b1c7;
}
}
.state_item {
display: flex;
}
}
}
.bottom_action {
height: 68px;
border-top: 1px solid #e6e9ef;
padding: 16px;
text-align: right;
.el-button {
width: 92px;
}
}
}
}
</style>
<!-- 角色管理编辑 -->
<template>
<role-form></role-form>
</template>
<script setup>
import roleForm from "../add/role_form.vue";
</script>
This diff is collapsed.
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