Skip to content

S
so-manage-ui
Commit e2dd1cbe authored by 张俊's avatar 张俊
Browse files
Options

Merge branch 'dev' of https://cloud.wodcloud.com/git/apaas/apaas-system-ui into dev

parents abc99679 bc64f5f2
Hide whitespace changes
Inline Side-by-side
Showing with 842 additions and 331 deletions
src/assets/css/index.css
View file @ e2dd1cbe
......@@ -1513,6 +1513,11 @@ border-radius:8px;
font-weight: bold;
margin-bottom: 20px;
}
.header_info {
font-size: 14px;
color: #404a62;
padding-left: 20px;
}
.name_btn {
color: #3759be;
cursor: pointer;
......@@ -1527,3 +1532,11 @@ border-radius:8px;
font-size: 14px;
color: #404a62;
}
.icon_eye {
font-size: 12px;
color: #a9b1c7;
margin-right: 8px;
vertical-align: baseline;
cursor: pointer;
}
src/bg-ui/bg-table-btns-more.vue
View file @ e2dd1cbe
......@@ -38,6 +38,7 @@ export default {
}
},
clickAction({ callback }) {
this.$parent.hideBox()
typeof callback === "function" && callback();
},
getName({ name }) {
......
src/bg-ui/bg-table-btns.vue
View file @ e2dd1cbe
......@@ -53,6 +53,9 @@ export default {
},
},
methods: {
hideBox() {
this.showMore = false
},
isDisabled({ disabled }) {
if (typeof disabled === "function") {
return disabled();
......
src/bg-ui/bg-upload-image.vue
View file @ e2dd1cbe
......@@ -59,7 +59,7 @@ export default {
},
action: {
type: String,
default: "/apaas/static/image/upload",
default: "/apaas/common/file/upload",
},
autoUpload: {
type: Boolean,
......
src/bg-ui/index.scss
View file @ e2dd1cbe
......@@ -2045,6 +2045,7 @@ a {
background-color: #2b4695;
cursor: pointer;
user-select: none;
transition: all .3s;
> .label {
font-size: 12px;
......
src/page/main/config/dict/index.vue
View file @ e2dd1cbe
......@@ -56,7 +56,7 @@
</template>
</bg-filter-group>
<div class="table_container">
<bg-table ref="bgTable" :headers="headers" :rows="tableRows" :isIndex="true" :stripe="true" :select="true">
<bg-table ref="bgTable" :headers="headers" :rows="tableRows" :isIndex="true" :stripe="true">
<template v-slot:updated_time="{ row }">
{{ row.updated_time.split("+")[0].replace("T", " ").replace("Z", " ") }}
</template>
......@@ -521,20 +521,20 @@ const moveRow = (row,type) => {
sort: row.sort
}
]
// axios
// .put(``,[...params])
// .then((res) => {
// if (res.data.code == 200) {
// ElMessage.success(res.data.data)
// state.tableRows = []
// changePage(1)
// }else {
// ElMessage.error(res.data.data)
// }
// })
// .catch((err) => {
// console.log(err)
// })
axios
.put(`/apaas/system/v5/dictionary/sort`,[...params])
.then((res) => {
if (res.data.code == 200) {
ElMessage.success(res.data.data)
state.tableRows = []
changePage(1)
}else {
ElMessage.error(res.data.data)
}
})
.catch((err) => {
console.log(err)
})
}
onBeforeMount(() => {
......
src/page/main/develop/account/add/contact-form.vue
View file @ e2dd1cbe
......@@ -7,16 +7,16 @@
ref="contactRef"
style="max-width: 66%"
>
<el-form-item label="联系人姓名" prop="contact_user">
<el-input v-model="contactForm.contact_user" />
<el-form-item label="联系人姓名" prop="contact_name">
<el-input v-model="contactForm.contact_name" />
</el-form-item>
<el-form-item label="联系人手机号" prop="phone">
<el-input v-model="contactForm.phone" />
<el-form-item label="联系人手机号" prop="contact_phone">
<el-input v-model="contactForm.contact_phone" />
</el-form-item>
<el-form-item label="联系人邮箱">
<el-input v-model="contactForm.email"/>
<el-form-item label="联系人邮箱" prop="contact_email">
<el-input v-model="contactForm.contact_email"/>
</el-form-item>
<el-form-item label="备注">
<el-form-item label="备注" prop="remark">
<el-input type="textarea" :rows="3" v-model="contactForm.remark" />
</el-form-item>
</el-form>
......@@ -26,18 +26,30 @@
import { reactive, ref, onMounted } from 'vue'
const contactForm = reactive({
contact_user: '',
phone: '',
email: '',
contact_name: '',
contact_phone: '',
contact_email: '',
remark: '',
})
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 contactFormRules = reactive({
contact_user: [
contact_name: [
{ required: true, message: '请输入联系人姓名', trigger: 'blur' },
],
phone: [
contact_phone: [
{ required: true, message: '请输入联系人手机号', trigger: 'blur' },
{ validator: checkPhone, trigger: 'blur' },
],
})
const contactRef = ref(null)
......
src/page/main/develop/account/add/index.vue
View file @ e2dd1cbe
......@@ -4,7 +4,7 @@
<el-breadcrumb separator="/">
<el-breadcrumb-item> 开发管理 </el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/develop/account' }"> 系统账号管理 </el-breadcrumb-item>
<el-breadcrumb-item> {{ route.query.type === "0" ? '新建' : '编辑'}} </el-breadcrumb-item>
<el-breadcrumb-item> {{ route.query.id ? '编辑' : '新建'}} </el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="page_content flex_cloumn">
......@@ -44,14 +44,17 @@
</div>
<div class="content_main">
<systemForm v-show="step === 1" ref="systemFormRef" @action="getSystemFormData"></systemForm>
<systemForm v-show="step === 1" ref="systemFormRef" :form-type="route.query.id ? true : false" :id="route.query.id" @action="getSystemFormData"></systemForm>
<contactForm v-show="step === 2" ref="contactFormRef" @action="getContactFormData"></contactForm>
<div class="process_end" v-show="step === 3">
<div>
<div><img src="@/assets/imgs/img_data-complete.png" alt=""></div>
<div class="font_bold">业务系统新增成功</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 type="primary" @click="continueCreate">继续创建</el-button>
<el-button v-if="!route.query.id" type="primary" @click="continueCreate">继续创建</el-button>
</div>
</div>
......@@ -78,30 +81,35 @@
import { useRoute, useRouter } from 'vue-router';
import systemForm from './system-form.vue';
import contactForm from './contact-form.vue';
import { reactive, ref,onBeforeMount,toRefs,computed, onBeforeUnmount, onMounted } from 'vue';
import { reactive, ref,onBeforeMount,toRefs,computed, onBeforeUnmount, onMounted, getCurrentInstance } from 'vue';
import CryptoJS from "crypto-js";
const { proxy } = getCurrentInstance()
const { $axios,$message } = proxy
const route = useRoute();
const router = useRouter();
const step = ref(1);
const systemFormRef = ref(null);
const contactFormRef = ref(null);
const formData = reactive({
org: '',
code: '',
name: '',
desc: '',
organization_id: '',
business_code: '',
business_name: '',
business_desc: '',
logo: '',
role: '',
account: '',
system_role_id: '',
system_account: '',
password: '',
url: '',
firm_name: '',
is_use: '',
contact_user: '',
phone: '',
email: '',
confirm_password: '',
access_address: '',
develop_id: '',
state: 1,
contact_name: '',
contact_phone: '',
contact_email: '',
remark: '',
}); //业务系统表单+联系人表单
const successFlag = ref(false)
// 下一步
const nextStep = () => {
......@@ -116,12 +124,64 @@ const getSystemFormData = (data) => {
}
}
//联系人表单检验触发事件 data为null 校验失败
//联系人表单检验触发事件 data为null 校验失败
const getContactFormData = (data) => {
if(data) {
formData.value = Object.assign(formData,data);
console.log(formData);
step.value = 3;
if(route.query.id) {
console.log(formData)
let params = {
id: parseInt(route.query.id),
business_name: formData.value.business_name,
system_account: formData.value.system_account,
contact_email: formData.value.contact_email,
contact_phone: formData.value.contact_phone,
contact_name: formData.value.contact_name,
logo: formData.value.logo && formData.value.logo.length > 0 ? formData.value.logo[0].url : '',
state: formData.value.state,
business_desc: formData.value.business_desc,
develop_id: formData.value.develop_id,
access_address: formData.value.access_address,
remark: formData.value.remark
}
$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 {
let params = {
organization_id: formData.value.organization_id,
system_role_id: "ab98a936-9046-455b-aba3-4c73671024d0",
logo: formData.value.logo && formData.value.logo.length > 0 ? formData.value.logo[0].url : '',
password: CryptoJS.AES.encrypt(formData.value.password,"swuE9cmCZQwrkYRV").toString(),
business_code: formData.value.business_code,
business_name: formData.value.business_name,
business_desc: formData.value.business_desc,
system_account: formData.value.system_account,
access_address: formData.value.access_address,
develop_id: formData.value.develop_id,
state: formData.value.state,
contact_name: formData.value.contact_name,
contact_phone: formData.value.contact_phone,
contact_email: formData.value.contact_email,
remark: formData.value.remark,
}
$axios.put(`/apaas/system/v5/user/create`,params)
.then((res) => {
if (res.data.code == 200) {
successFlag.value = true;
step.value = 3;
}else {
$message.error(res.data.msg)
}
})
}
}
}
//上一步
......@@ -137,42 +197,54 @@ const continueCreate = () => {
systemFormRef.value.clearForm();
contactFormRef.value.clearForm();
step.value = 1;
successFlag = false;
}
//取消
const cancel = () => {
router.go(-1);
}
onBeforeUnmount(()=>{
})
onMounted(() => {
if(route.query.type === "1") {
setTimeout(()=> {
systemFormRef.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',
})
const getDetail = () => {
$axios.get(`/apaas/system/v5/user/detail/${route.query.id}`)
.then((res) => {
if (res.data.code == 200) {
const form = res.data.data;
systemFormRef.value.setForm({
organization_id: form.organization_id,
system_role_id: form.system_role_id,
logo: [{url:form.logo}],
business_code: form.business_code,
business_name: form.business_name,
business_desc: form.business_desc,
system_account: form.system_account,
access_address: form.access_address,
develop_id: form.develop_id,
state: form.state,
appid: form.app_id,
appsecret: form.app_secret
})
contactFormRef.value.setForm({
contact_user: 'c',
phone: 'c',
email: 'c',
remark: 'c',
contact_name: form.contact_name,
contact_phone: form.contact_phone,
contact_email: form.contact_email,
remark: form.remark,
})
},500)
}else {
$message.error(res.data.msg)
}
})
}
})
onBeforeUnmount(()=>{
})
onMounted(() => {
if(route.query.id) {
getDetail()
}
})
</script>
......
src/page/main/develop/account/add/system-form.vue
View file @ e2dd1cbe
......@@ -7,63 +7,94 @@
ref="systemRef"
style="max-width: 66%"
>
<el-form-item label="所属机构" prop="org">
<el-input v-model="systemForm.org" />
<el-form-item label="所属机构" prop="organization_id">
<el-tree-select v-model="systemForm.organization_id" :data="orgData" :props="treeProps" :render-after-expand="false" :disabled="formType" style="width: 100%;"/>
</el-form-item>
<el-form-item label="业务系统编码" prop="code">
<el-input v-model="systemForm.code" />
<el-form-item label="业务系统编码" prop="business_code">
<el-input v-model="systemForm.business_code" :disabled="formType"/>
</el-form-item>
<el-form-item label="业务系统名称" prop="name">
<el-input v-model="systemForm.name" />
<el-form-item label="业务系统名称" prop="business_name">
<el-input v-model="systemForm.business_name" />
</el-form-item>
<el-form-item label="AppId" prop="appid" v-if="formType">
<el-input v-model="systemForm.appid" :disabled="formType" style="width: 80%;"/>
<span class="pl-1"><el-button type="primary" @click="copyText(systemForm.appid)">复制</el-button></span>
</el-form-item>
<el-form-item label="AppSecret" prop="appsecret" v-if="formType">
<el-input v-model="systemForm.appsecret" :disabled="formType" style="width: 80%;"/>
<span class="pl-1"><el-button type="primary" @click="copyText(systemForm.appsecret)">复制</el-button></span>
<span class="pl-1"><el-button type="primary">重置</el-button></span>
</el-form-item>
<el-form-item label="系统LOGO" prop="logo">
<bg-upload-image v-model="systemForm.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="desc">
<el-input type="textarea" :rows="3" v-model="systemForm.desc" />
<el-form-item label="业务系统概述" prop="business_desc">
<el-input type="textarea" :rows="3" v-model="systemForm.business_desc" />
</el-form-item>
<el-form-item label="角色" prop="role">
<el-input v-model="systemForm.role" />
<el-form-item label="角色" prop="system_role_id" v-if="!formType">
<el-input v-model="systemForm.system_role_id" />
</el-form-item>
<el-form-item label="账号" prop="account">
<el-input v-model="systemForm.account" />
<el-form-item label="账号" prop="system_account">
<el-input v-model="systemForm.system_account" />
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="systemForm.password" />
<el-form-item label="密码" prop="password" v-if="!formType">
<el-input :type="password_eye ? 'text' : 'password'" v-model="systemForm.password" >
<template #suffix>
<bg-icon @click="password_eye = !password_eye" class="icon_eye" icon="#bg-ic-eye"></bg-icon>
</template>
</el-input>
</el-form-item>
<el-form-item label="确认密码" prop="confirm_password">
<el-input type="password" v-model="systemForm.confirm_password" />
<el-form-item label="确认密码" prop="confirm_password" v-if="!formType">
<el-input :type="confirm_eye ? 'text' : 'password'" v-model="systemForm.confirm_password" >
<template #suffix>
<bg-icon @click="confirm_eye = !confirm_eye" class="icon_eye" icon="#bg-ic-eye"></bg-icon>
</template>
</el-input>
</el-form-item>
<el-form-item label="访问地址" prop="url">
<el-input v-model="systemForm.url" />
<el-form-item label="访问地址" prop="access_address">
<el-input v-model="systemForm.access_address" />
</el-form-item>
<el-form-item label="开发厂商名称" prop="firm_name">
<el-input v-model="systemForm.firm_name" />
<el-form-item label="开发厂商名称" prop="develop_id">
<el-input v-model="systemForm.develop_id" />
</el-form-item>
<el-form-item label="是否启用" prop="is_use">
<bg-switch :labels="['否','是']" :values="[0,1]" v-model="systemForm.is_use"></bg-switch>
<el-form-item label="是否启用" prop="state">
<bg-switch :labels="['否','是']" :values="[0,1]" v-model="systemForm.state"></bg-switch>
</el-form-item>
</el-form>
</template>
<script setup>
import { reactive, ref, onMounted } from 'vue'
import { reactive, ref, onBeforeMount, onMounted, getCurrentInstance, computed } from 'vue'
const { proxy } = getCurrentInstance()
const { $axios,$message } = proxy
const props = defineProps({
formType: {
type: Boolean,
default: false, //false 新建 true 编辑
},
id: {
type: String,
default: '',
}
});
const systemForm = reactive({
org: '',
code: '',
name: '',
desc: '',
logo: '',
role: '',
account: '',
organization_id: '',
business_code: '',
business_name: '',
business_desc: '',
logo: [],
system_role_id: '',
system_account: '',
password: '',
confirm_password: '',
url: '',
firm_name: '',
is_use: 1,
access_address: '',
develop_id: '',
state: 1,
appid: '',
appsecret: ''
})
const password_eye = ref(false)
const confirm_eye = ref(false);
const validatePass = (rule, value, callback) => {
if (value !== systemForm.password) {
......@@ -72,25 +103,63 @@ const validatePass = (rule, value, callback) => {
callback()
}
}
const validateBusinessName = (rule, value, callback) => {
let params = null;
if (props.id){
params = {id: parseInt(props.id),business_name: value,organization_id: systemForm.organization_id}
}else {
params = {business_name: value,organization_id: systemForm.organization_id}
}
$axios.post(`/apaas/system/v5/user/check/business`,params)
.then((res) => {
if (res.data.code == 200) {
callback()
}else {
callback(new Error(res.data.data))
}
})
}
const validateSystemAccount = (rule, value, callback) => {
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 formRules = reactive({
org: [
organization_id: [
{ required: true, message: '请选择组织机构', trigger: 'blur' },
],
name: [
business_name: [
{ required: true, message: '请输入业务系统名称', trigger: 'blur' },
{ validator: validateBusinessName, trigger: 'blur' },
],
role: [
system_role_id: [
{ required: true, message: '请选择角色', trigger: 'blur' },
],
account: [
system_account: [
{ required: true, message: '请输入账号', trigger: 'blur' },
{ validator: validateSystemAccount, trigger: 'blur' },
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{min: 8,message: '密码长度不得低于8位',trigger: 'blur'}
],
confirm_password: [
{ required: true, message: '请确认密码', trigger: 'blur' },
{ required: true, message: '请确认密码', trigger: 'blur' },
{ validator: validatePass, trigger: 'blur' }
],
})
......@@ -120,8 +189,40 @@ const setForm = (data) => {
systemForm.value = Object.assign(systemForm, 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 {
$message.error(res.data.msg)
}
})
}
const copyText = (data) => {
navigator.clipboard.writeText(data).then(
function () {
},
function () {
}
);
}
onBeforeMount(() =>{
getOrgTree()
})
onMounted(() => {
})
......
src/page/main/develop/account/index.vue
View file @ e2dd1cbe
......@@ -20,7 +20,7 @@
/>
</div>
<div class="tree">
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" :default-expand-all="true">
<el-tree :data="orgData" :props="defaultProps" @node-click="handleNodeClick" :default-expand-all="true">
<template #default="{ node, data }">
<div class="custom_tree_node">
<span
......@@ -36,11 +36,26 @@
</div>
<div class="flex_right bgc_white">
<div class="main_container">
<div class="apaas_button">
<el-button type="primary" @click="addAccount(0)">新建</el-button><el-button @click="addAccount(1)">编辑</el-button>
</div>
<bg-filter-group @search="getTableRows" v-model="filter.search" placeholder="请输入关键字">
<template v-slot:left_action>
<div class="apaas_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>
新建
</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>
</template>
</bg-filter-group>
<div class="table_container apaas_scroll">
<bg-table ref="bgTable" :headers="headers" :rows="tableRows" :isIndex="true" :stripe="true">
<bg-table ref="dataTable" :headers="headers" :rows="tableRows" :isIndex="true" :stripe="true" :select="true" @selectAc="selectRows">
<template v-slot:business_name="{ row }">
<span @click="goDetail(row)" class="name_btn">
{{ row.business_name }}
......@@ -50,22 +65,22 @@
<bg-switch @click="stateChange(row)" :labels="['否','是']" :values="[0,1]" v-model="row.state"></bg-switch>
</template>
<template v-slot:action="{ row }">
<bg-table-btn class="btn">
<bg-table-btn class="btn" @click="editAccount(row.id)">
编辑
</bg-table-btn>
<bg-table-btn class="btn">
<bg-table-btn class="btn" @click="editPsdAccount(row)">
修改密码
</bg-table-btn>
<bg-table-btn class="btn">
<bg-table-btn class="btn" @click="deleteAccount(row)">
删除
</bg-table-btn>
</template>
</bg-table>
<div class="pagination_box">
<bg-pagination
:page="1"
:size="10"
:total="100"
:page="filter.page"
:size="filter.limit"
:total="tableTotal"
@change-page="changePage"
@change-size="changeSize"
>
......@@ -77,6 +92,104 @@
</div>
</div>
</div>
<el-dialog
v-model="deleteFlag"
title="删除"
width="520px"
:before-close="handleCloseDelete"
>
<div class="warning_info">
<bg-icon style="font-size: 12px; color: #a9b1c7; margin-right: 8px;vertical-align: baseline;" icon="#bg-ic-circle-tips"></bg-icon>
您正在对 <span class="danger_info">{{selectedName.join('、')}}</span>做删除操作。
</div>
<template #footer>
<span class="dialog-footer">
<el-button @click="handleCloseDelete">取消</el-button>
<el-button type="primary" @click="deleteConfirm">确定</el-button>
</span>
</template>
</el-dialog>
<el-dialog
v-model="deleteRowFlag"
title="删除"
width="520px"
:before-close="handleCloseRowDelete"
>
<div class="warning_info">
<bg-icon style="font-size: 12px; color: #a9b1c7; margin-right: 8px;vertical-align: baseline;" icon="#bg-ic-circle-tips"></bg-icon>
您正在对 <span class="danger_info">{{selectedRow.business_name}}</span>做删除操作。
</div>
<template #footer>
<span class="dialog-footer">
<el-button @click="handleCloseRowDelete">取消</el-button>
<el-button type="primary" @click="deleteRowConfirm">确定</el-button>
</span>
</template>
</el-dialog>
<el-dialog
v-model="resetFlag"
title="重置密码"
width="520px"
:before-close="handleCloseReset"
>
<div class="warning_info">
<bg-icon style="font-size: 12px; color: #a9b1c7; margin-right: 8px;vertical-align: baseline;" icon="#bg-ic-circle-tips"></bg-icon>
您正在对 <span class="danger_info">{{selectedName.join('、')}}</span>做重置密码操作。
</div>
<div>
重置密码为123456，是否继续？
</div>
<template #footer>
<span class="dialog-footer">
<el-button @click="handleCloseReset">取消</el-button>
<el-button type="primary" @click="resetConfirm">确定</el-button>
</span>
</template>
</el-dialog>
<el-dialog
v-model="editFlag"
title="修改密码"
width="520px"
:before-close="handleCloseEdit"
>
<div class="warning_info">
<bg-icon style="font-size: 12px; color: #a9b1c7; margin-right: 8px;vertical-align: baseline;" icon="#bg-ic-circle-tips"></bg-icon>
您正在对 <span class="danger_info">{{selectedRow.business_name}}</span>做修改密码操作，修改后旧密码将无法登录。
</div>
<div>
<el-form
:label-position="'right'"
label-width="120px"
:model="passwordForm"
:rules="passwordFormRules"
ref="passwordRef"
style="max-width: 80%"
>
<el-form-item label="新密码" prop="password">
<el-input v-model="passwordForm.password" :type="password_eye ? 'text' : 'password'" placeholder="请输入密码">
<template #suffix>
<bg-icon @click="password_eye = !password_eye" class="icon_eye" icon="#bg-ic-eye"></bg-icon>
</template>
</el-input>
</el-form-item>
<el-form-item label="确认新密码" prop="confirm_password">
<el-input v-model="passwordForm.confirm_password" :type="confirm_eye ? 'text' : 'password'" placeholder="请确认新密码">
<template #suffix>
<bg-icon @click="confirm_eye = !confirm_eye" class="icon_eye" icon="#bg-ic-eye"></bg-icon>
</template>
</el-input>
</el-form-item>
</el-form>
</div>
<template #footer>
<span class="dialog-footer">
<el-button @click="handleCloseEdit">取消</el-button>
<el-button type="primary" @click="editConfirm">确定</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
......@@ -86,9 +199,13 @@ import { reactive, toRefs, ref, } from '@vue/reactivity'
import { getCurrentInstance } from 'vue'
import { computed, onBeforeMount } from '@vue/runtime-core'
import { useRouter } from 'vue-router';
const { proxy } = getCurrentInstance()
const { $axios,$message } = proxy
import { edit } from 'ace-builds';
import CryptoJS from "crypto-js";
const { proxy } = getCurrentInstance()
const { $axios,$message } = proxy
const dataTable = ref(null);
const headers = ref([
{
label: "业务系统编码",
......@@ -130,18 +247,49 @@ const { $axios,$message } = proxy
const tableRows = ref([])
const search=ref("");
const filter = reactive({
keyword: "",
search: "",
page: 1,
size: 10,
limit: 10,
});
const tableTotal = ref(0);
const deleteFlag = ref(false)
const deleteRowFlag = ref(false)
const resetFlag = ref(false)
const selectedRow = ref({})
const selected = ref([])
const selectedName = ref([])
const editFlag = ref(false)
const password_eye = ref(false)
const confirm_eye = ref(false)
const passwordRef = ref(null)
const passwordForm = reactive({
password: '',
confirm_password: '',
})
const validatePass = (rule, value, callback) => {
if (value !== passwordForm.password) {
callback(new Error("密码输入不一致"))
} else {
callback()
}
}
const passwordFormRules = reactive({
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
],
confirm_password: [
{ required: true, message: '请确认密码', trigger: 'blur' },
{ validator: validatePass, trigger: 'blur' }
],
})
const router = useRouter();
const getTableRows = () => {
let params = {...filter.value}
$axios
.get(
let params = {...filter}
$axios.get(
`/apaas/system/v5/user/list`,
{
params,
......@@ -160,9 +308,6 @@ const { $axios,$message } = proxy
const addAccount = (params) => {
router.push({
path: "/develop/account/add",
query: {
type: params
}
})
}
......@@ -170,101 +315,28 @@ const { $axios,$message } = proxy
console.log(data)
}
const data = [
{
label: '湖北省',
children: [
{
label: '武汉市',
children: [
{
label: '公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅',
},
{
label: '应急厅',
},
{
label: '水利厅',
},
],
},
{
label: '荆州市',
children: [
{
label: '公安局',
},
{
label: '应急管理局',
},
],
}
],
},
{
label: '四川省',
children: [
{
label: '成都市',
children: [
{
label: '天府新区',
},
],
},
],
},
{
label: '比格大数据',
children: [
{
label: '武汉研发中心',
children: [
{
label: '研发部',
},
],
},
{
label: '西南大区',
children: [
{
label: '事业部',
},
{
label: '事业部',
},
{
label: '事业部',
},
{
label: '事业部',
},
{
label: '事业部',
},
{
label: '事业部',
},
{
label: '事业部',
},
],
},
],
},
]
const orgData = ref([])
const defaultProps = {
children: 'children',
label: 'label',
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 {
$message.error(res.data.msg)
}
})
}
const stateChange = (row) => {
const state = row.state.toString();
$axios
.post(
`/apaas/system/v5/user/state/${row.organization_id}/${state}`,
$axios.post(
`/apaas/system/v5/user/state/${row.id}/${state}`,
)
.then((res) => {
if (res.data.code == 200) {
......@@ -276,11 +348,14 @@ const { $axios,$message } = proxy
}
const changeSize = (size) => {
filter.limit = size;
filter.page = 1;
getTableRows()
}
const changePage = (size) => {
const changePage = (page) => {
filter.page = page;
getTableRows()
}
const goDetail = (params) => {
......@@ -292,9 +367,144 @@ const { $axios,$message } = proxy
})
}
const editAccount = (id) => {
router.push({
path: "/develop/account/add",
query: {
id: id
}
})
}
const deleteAccount = (data) => {
selectedRow.value = data;
deleteRowFlag.value = true;
}
const handleCloseDelete = () => {
deleteFlag.value = false;
}
const handleCloseRowDelete = () => {
deleteRowFlag.value = false;
}
const deleteConfirm = () => {
const ids = selected.value.map(item => item.id)
$axios.delete(
`/apaas/system/v5/user/delete`,{data: {ids: ids}}
)
.then((res) => {
if (res.data.code == 200) {
$message.success(res.data.msg)
getTableRows()
}else {
$message.error(res.data.msg)
}
handleCloseDelete();
})
}
const deleteRowConfirm = () => {
$axios.delete(
`/apaas/system/v5/user/delete`,{data: {ids: [selectedRow.value.id]}}
)
.then((res) => {
if (res.data.code == 200) {
$message.success(res.data.msg)
getTableRows()
}else {
$message.error(res.data.msg)
}
handleCloseRowDelete();
})
}
const deleteBatch = () => {
if(selectedName.value.length > 0){
deleteFlag.value = true;
}else {
$message.error('请先选择需要操作的数据!')
}
}
const handleCloseReset = () => {
resetFlag.value = false;
}
const resetPsd = () => {
if(selectedName.value.length > 0){
resetFlag.value = true;
}else {
$message.error('请先选择需要操作的数据!')
}
}
const resetConfirm = () => {
const ids = selected.value.map(item => item.id)
$axios.post(
`/apaas/system/v5/user/resetpwd`,{ids: ids}
)
.then((res) => {
if (res.data.code == 200) {
$message.success(res.data.msg)
getTableRows()
}else {
$message.error(res.data.msg)
}
handleCloseReset();
})
}
const editPsdAccount = (data) => {
selectedRow.value = data;
editFlag.value = true;
}
const handleCloseEdit = () => {
if (!passwordRef) return
passwordRef.value.resetFields()
editFlag.value = false;
}
const editConfirm = () => {
if (!passwordRef) return
passwordRef.value.validate((valid, fields) => {
if (valid) {
$axios.post(
`/apaas/system/v5/user/editpwd`,
{
id: selectedRow.value.id,
password: CryptoJS.AES.encrypt(passwordForm.password,"swuE9cmCZQwrkYRV").toString()
}
)
.then((res) => {
if (res.data.code == 200) {
$message.success(res.data.msg)
}else {
$message.error(res.data.msg)
}
handleCloseEdit();
})
}
})
}
const selectRows = (data) => {
selected.value = data.selection;
selectedName.value = data.selection.map(item => item.business_name)
}
const clearSelected = () => {
dataTable.value.clearSelection();
}
onBeforeMount(() => {
getOrgTree()
getTableRows()
})
......@@ -349,15 +559,27 @@ const { $axios,$message } = proxy
position: sticky;
position: -webkit-sticky;
margin-top: 16px;
bottom: 0px;
bottom: 25px;
background-color: #fff;
z-index: 1024;
height: 40px;
line-height: 40px;
padding-top: 8px;
padding-top: 5px;
}
.bg-pagination {
bottom: unset
bottom: unset;
margin-top: 0px
}
.warning_info {
background-color: #f7f7f9;
font-size: 14px;
color: #404a62;
padding: 5px;
text-align: left;
margin: 20px 0;
}
.danger_info {
color: #d75138;
}
</style>
\ No newline at end of file
src/page/main/develop/menu/index.vue
View file @ e2dd1cbe
......@@ -25,6 +25,7 @@
:highlight-current="true"
node-key="menu_id"
ref="menuTree"
:filter-node-method="filterNode"
>
<template #default="{ node, data }">
<div class="custom-tree-node" pointer-events="none">
......@@ -74,7 +75,7 @@
<div class="flex_right">
<div class="main_container">
<div class="base-info bg-scroll">
<menuForm ref="menuFormRef" :data="menuFormData" @action="getMenuFormData"></menuForm>
<menuForm ref="menuFormRef" :data="menuFormData"></menuForm>
</div>
<div class="base-btn">
<el-button type="primary" @click="saveMenu(menuFormRef,addType)">
......@@ -89,51 +90,61 @@
<script setup>
import { Search } from '@element-plus/icons-vue'
import { reactive, toRefs, ref, nextTick, computed, onBeforeMount, onBeforeUnmount } from 'vue'
import { reactive, toRefs, ref, nextTick, computed, onBeforeMount, onBeforeUnmount, watch } from 'vue'
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus'
import axios from '../../../../request/http.js'
import menuForm from './menu-form.vue'
const router = useRouter();
const menuTree = ref(null)
const treeAction = ref(null)
const menuFormRef = ref(null)
const menuTree = ref(null) // 树形
const treeAction = ref(null) // 树形操作弹出框
const menuFormRef = ref(null) // 右侧表单
const acTop = ref('');
const acLeft = ref('');
const acBottom = ref('');
const actionFlag = ref(false)
const actionFlag = ref(false) // 弹出框状态标识
const state = reactive({
data: [],
search: "",
selectData:null,
selectParentData:null,
data: [], // 树形数据
search: "", // 树形搜索
selectData:null, // 当前选中的节点
selectParentData:null, // 当前选中节点的父节点
treeAction,
menuTree,
bottomGap:30,//弹窗吸底高度
defaultProps: {
children: 'Child',
label: 'menu_name',
},
actionDataIndex: 0,
menuFormData: null,
}, // 树形配置
actionDataIndex: 0, // 当前选中节点在本级的位置，用来判断是否可以上下移动
menuFormData: null, // 菜单数据
addType: 1, // 1-新增本级 2-新增下级
newMenuId: 0,
newMenuId: 0, // 新增菜单时用来指定menu_id，达到选中效果
timer: null, // 定时器
})
const moveIndex = computed({
get: () => {
let index = 0
if(state.selectData) {
console.log(state.selectData)
findIndex(state.selectData.menu_id,state.data)
index = state.actionDataIndex
}
return index
}
})
}) // 计算上下移动
watch(() => state.search,(n,o) => {
if (state.timer) {
clearTimeout(state.timer);
}
state.timer = setTimeout(() => {
state.menuTree.filter(n)
}, 500);
}) // 树形搜索值
const getMenuTree = () => {
axios
.get(`/apaas/system/v5/menu/tree`)
......@@ -155,11 +166,11 @@ const getMenuTree = () => {
}
})
} // 获取菜单树
const findIndex= (code,arr) => {
arr.forEach((e,i) => {
if (e.menu_id == code) {
state.actionDataIndex = i
console.log(e,i)
}else {
if (e.Child && e.Child.length > 0) {
findIndex(code,e.Child)
......@@ -174,7 +185,6 @@ const showAction = (e, data,node) => {
acBottom.value = ''
const rect = e.target.getBoundingClientRect(); //获取点击的dom的位置
var allHeight = document.body.scrollHeight
console.log(rect, data,node);
actionFlag.value = true;
state.selectData = data
......@@ -200,7 +210,6 @@ const showAction = (e, data,node) => {
})
} // 树形操作框
const handleNodeClick = (data) => {
if (state.selectData && state.selectData.menu_id == data.menu_id) {
return
......@@ -210,10 +219,16 @@ const handleNodeClick = (data) => {
closeAction()
} // 菜单树节点点击
const filterNode = (val,data) => {
if (!val) {
return true
}
return data.menu_name.includes(val)
} // 树形筛选
const fileAction = (val,data,parent,disabled=false) => {
if (val == 1) {
if (val == 1) { // 新建本级菜单
state.addType = 1
console.log("新建本级", data ,parent,disabled)
let newChild = {
menu_name: "新菜单",
menu_id: 'new' + state.newMenuId,
......@@ -227,9 +242,8 @@ const fileAction = (val,data,parent,disabled=false) => {
state.menuTree && state.menuTree.setCurrentKey(newChild.menu_id);
handleNodeClick(newChild);
state.newMenuId++
}else if (val == 2) {
}else if (val == 2) { // 新建下级菜单
state.addType = 2
console.log("新建下级",data,parent,disabled)
let newChild = {
menu_name: "新菜单",
menu_id: 'new' + state.newMenuId,
......@@ -244,9 +258,7 @@ const fileAction = (val,data,parent,disabled=false) => {
handleNodeClick(newChild);
state.selectParentData = data
state.newMenuId++
test()
}else if (val == 3) {
console.log("删除",data,parent,disabled)
}else if (val == 3) { // 删除菜单
axios
.delete(`/apaas/system/v5/menu/${data.id}`)
.then((res) => {
......@@ -258,20 +270,44 @@ const fileAction = (val,data,parent,disabled=false) => {
ElMessage.error(res.data.data)
}
})
test()
}else if (val == 4) {
console.log("上移",data,parent,disabled)
test()
}else if (val == 4) { // 菜单上移
if (disabled) {
return
}
test()
}else {
console.log("下移",data,parent,disabled)
let nextObj = null
if (parent) {
parent.Child.forEach((e,i)=> {
if (data.id == e.id) {
nextObj = parent.Child[i-1]
}
})
}else {
state.data.forEach((e,i) => {
if (data.id == e.id) {
nextObj = state.data[i-1]
}
})
}
changeSort(data,nextObj)
}else { // 菜单下移
if (disabled) {
return
}
test()
let nextObj = null
if (parent) {
parent.Child.forEach((e,i)=> {
if (data.id == e.id) {
nextObj = parent.Child[i+1]
}
})
}else {
state.data.forEach((e,i) => {
if (data.id == e.id) {
nextObj = state.data[i+1]
}
})
}
changeSort(data,nextObj)
}
if (menuFormRef) {
nextTick().then(() => {
......@@ -281,22 +317,37 @@ const fileAction = (val,data,parent,disabled=false) => {
}
})
})
}
} // 清除表单验证
} // 各种操作按钮
const test = () => {
console.log("执行了")
}
const changeSort = (data,nextObj) => {
let params = [
{
id: data.id,
sort: nextObj.sort
},
{
id: nextObj.id,
sort: data.sort
}
]
axios
.put(`/apaas/system/v5/menu/sort`,params)
.then((res) => {
if (res.data.code == 200) {
ElMessage.success(res.data.data)
getMenuTree()
}else {
ElMessage.error(res.data.data)
}
})
} // 菜单上下移
const closeAction = () => {
actionFlag.value = false;
} // 点击其他地方，菜单操作框关闭
const getMenuFormData = (date) => {
}
const saveMenu = (el,type) => {
console.log(el,type)
let params = {
menu_name: el.menuForm.menu_name,
menu_type: el.menuForm.menu_type,
......@@ -322,24 +373,25 @@ const saveMenu = (el,type) => {
}else { // 新增下级
params.p_menu_id = state.selectParentData.menu_id
}
console.log(123)
axios
.post(`/apaas/system/v5/menu/add`,params)
.then((res) => {
if (res.data.code == 200) {
ElMessage.success(res.data.data)
state.selectData = null
getMenuTree()
}else {
ElMessage.error(res.data.data)
}
})
}
}
} // 保存按钮，新增或编辑菜单
onBeforeMount(()=>{
window.addEventListener("click", closeAction)
window.addEventListener("scroll", closeAction,true)
getMenuTree()
})
onBeforeUnmount(()=>{
......@@ -360,24 +412,45 @@ const {
</script>
<style scoped>
.flex_left {
background-color: #fff;
height: calc(100% - 16px);
width: 320px;
box-shadow: 0px 1px 4px 0px
rgba(0, 7, 101, 0.15);
border-radius: 6px;
margin-right: 10px;
overflow: hidden;
}
.flex_right {
background-color: #fff;
height: calc(100% - 16px);
flex: 1;
box-shadow: 0px 1px 4px 0px
rgba(0, 7, 101, 0.15);
border-radius: 6px;
overflow: hidden;
}
.tree_content {
overflow: hidden;
height: calc(100% - 4px);
position: relative;
overflow: hidden;
height: calc(100% - 4px);
position: relative;
}
.search {
padding: 16px 16px 10px;
padding: 16px 16px 10px;
}
.tree {
overflow: auto;
height: calc(100% - 65px);
overflow: auto;
height: calc(100% - 65px);
}
.tree :deep().el-tree-node .el-tree-node__content {
padding: 0 16px!important;
.tree :deep().el-tree-node>.el-tree-node__content {
/* padding: 0 16px!important; */
}
.tree :deep() .el-tree-node>.el-tree-node__children {
overflow: unset;
padding-left: 16px;
overflow: unset;
/* padding-left: 16px; */
}
.tree-action-box {
......@@ -393,6 +466,17 @@ padding-left: 16px;
.tree .el-tree-node__content:hover .tree-action-box {
display: inline-block;
}
.tree .el-tree {
position: static!important;
}
.tree .el-tree :deep().el-tree-node__content{
height: 36px!important;
}
.tree .el-tree :deep().el-tree-node__content:hover {
background-image: linear-gradient(90deg,
rgba(255, 255, 255, 0.05) 83%,
rgba(0, 0, 0, 0.05) 86%);
}
.tree-more {
font-size: 12px;
color: #3759be;
......
src/page/main/develop/menu/menu-form.vue
View file @ e2dd1cbe
......@@ -23,7 +23,7 @@
<el-option
v-for="item in groupList"
:key="item.dict_id"
:label="item.name"
:label="item.dict_name"
:value="item.dict_id"
/>
</el-select>
......@@ -78,7 +78,7 @@
</el-input>
</div>
<div class="icon_content bg-scroll">
<div class="icon_item" v-for="(e,i) in iconArr" :key="i+100" @click="changeIcon(e)">
<div class="icon_item" v-for="(e,i) in showIconArr" :key="i+100" @click="changeIcon(e)">
<span>
<bg-icon
class="selectBgIcon"
......@@ -106,7 +106,7 @@ const props = defineProps({
data: {
type: Object,
default: null,
}
},
})
const state = reactive({
menuRef,
......@@ -133,83 +133,85 @@ const state = reactive({
]
},
groupList: [],
iconFlag: false,
icon_search: "",
iconArr: [],
iconFlag: false, // 图标盒子
icon_search: "", // 图标筛选
iconArr: [], // 所有的图标
showIconArr: [], // 展示的图标
timer: null,
})
const emit = defineEmits(['action'])
const submitForm = async () => {
if (!state.menuRef) return
await state.menuRef.validate((valid, fields) => {
if (valid) {
emit('action', state.menuForm)
} else {
emit('action',null)
}
})
}
const getGroupList = () => {
axios
.get(`/apaas/system/v5/dictionary/list?state=1&id=5`)
.get(`/apaas/system/v5/menu/group/dict`)
.then((res) => {
if (res.data.code == 200) {
state.groupList = res.data.data || []
console.log(state.groupList)
}else {
ElMessage.error(res.data.data)
}
}).catch((err) => {
console.log(err)
})
}
} // 获取分组数据
const openIconbox = () => {
state.iconFlag = !state.iconFlag
}
state.icon_search = ""
searchIcon()
} // 打开/关闭图标盒子
const searchIcon = () => {
if (state.timer) {
clearTimeout(state.timer);
}
state.timer = setTimeout(() => {
let iconList = []
if (state.icon_search == "") {
state.showIconArr = state.iconArr
}else {
state.iconArr.map(e => {
if (e.name.indexOf(state.icon_search) !== -1) {
iconList.push(e)
}
})
state.showIconArr = iconList
}
},500)
} // 图标筛选
}
const clearForm = () => {
if (!state.menuRef) return
state.menuRef.resetFields()
}
const setForm = (data) => {
state.menuForm = Object.assign(state.menuForm, data);
}
} // 表单赋值
const clearIcon = () => {
state.menuForm.menu_logo = ""
}
} // 清除选中的图标
const changeIcon = (e) => {
console.log(e)
state.menuForm.menu_logo = e.icon
state.iconFlag = false
}
state.icon_search = ""
searchIcon()
} // 选中图标
onMounted(() => {
// 处理图标数据
allIconArr.forEach(e => {
state.iconArr.push({
icon: e,
name: e.replace("bg-ic-","")
})
})
state.showIconArr = state.iconArr
getGroupList()
})
const {
menuForm,
formRules,
groupList,
iconFlag,
iconArr
showIconArr,
icon_search,
} = toRefs(state)
onMounted(() => {
getGroupList()
})
defineExpose({ submitForm, clearForm, setForm , menuForm, menuRef })
defineExpose({ setForm , menuForm, menuRef })
</script>
<style lang="scss" 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