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