feat : 菜单与公司选择组件修改

This commit is contained in:
clay
2024-06-18 22:24:50 +08:00
parent 369647f64f
commit 5410b6d248
5 changed files with 73 additions and 64 deletions

View File

@@ -40,7 +40,7 @@ export const getMenuInfo = (menuId) => {
export const getMenuOpt = (excludeId=0) => { export const getMenuOpt = (excludeId=0) => {
return request({ return request({
url: '/admin/menu/option/role/'+excludeId, url: '/admin/menu/option/'+excludeId,
method: 'get' method: 'get'
}) })
} }

View File

@@ -12,23 +12,24 @@
</el-input> </el-input>
<el-button v-if="isChooseAll" @click="chooseAll">全选</el-button> <el-button v-if="isChooseAll" @click="chooseAll">全选</el-button>
<el-button v-else @click="cancelAll">不全选</el-button> <el-button v-else @click="cancelAll">不全选</el-button>
<!-- <el-checkbox-group v-model="checkBtn" @change="handleChange">--> <!-- <el-checkbox-group v-model="checkBtn" @change="handleChange">-->
<!-- <el-checkbox label="全选" value="1" />--> <!-- <el-checkbox label="全选" value="1" />-->
<!-- <el-checkbox label="Option B" value="Value B" />--> <!-- <el-checkbox label="Option B" value="Value B" />-->
<!-- <el-checkbox label="Option C" value="Value C" />--> <!-- <el-checkbox label="Option C" value="Value C" />-->
<!-- <el-checkbox label="disabled" value="Value disabled" disabled />--> <!-- <el-checkbox label="disabled" value="Value disabled" disabled />-->
<!-- <el-checkbox--> <!-- <el-checkbox-->
<!-- label="selected and disabled"--> <!-- label="selected and disabled"-->
<!-- value="Value selected and disabled"--> <!-- value="Value selected and disabled"-->
<!-- disabled--> <!-- disabled-->
<!-- />--> <!-- />-->
<!-- </el-checkbox-group>--> <!-- </el-checkbox-group>-->
<!-- 人员选择 --> <!-- 人员选择 -->
<el-empty :image-size="100" description="似乎没有数据" v-show="dataList.length === 0"/> <el-empty :image-size="100" description="似乎没有数据" v-show="dataList.length === 0"/>
<el-scrollbar style="height:87%;"> <el-scrollbar style="height:87%;">
<div class="tree"> <div class="tree">
<el-tree :data="dataList" ref="tree" :props="defaultProps" empty-text="" node-key="value" <el-tree :data="dataList" ref="tree" :props="defaultProps" empty-text="" node-key="value"
default-expand-all :show-checkbox="showCheckbox" highlight-current :default-checked-keys="defaultChecked" default-expand-all :show-checkbox="showCheckbox" highlight-current
:default-checked-keys="defaultChecked"
:check-strictly="true" @node-click="(node,check)=>handle(node,check)" :check-strictly="true" @node-click="(node,check)=>handle(node,check)"
@check-change="handleChange" :filter-node-method="filterNode"> @check-change="handleChange" :filter-node-method="filterNode">
<template #default="{ node, data }"> <template #default="{ node, data }">
@@ -85,7 +86,7 @@ const props = defineProps({
type: Boolean type: Boolean
} }
}); });
const checkBtn=ref(1) const checkBtn = ref(1)
const isChooseAll = ref(true); const isChooseAll = ref(true);
let selectItem = reactive({ let selectItem = reactive({
type: -1, type: -1,
@@ -117,25 +118,31 @@ const _value = computed({
watch(() => filterText.value, (newVal) => { watch(() => filterText.value, (newVal) => {
tree.value.filter(newVal); tree.value.filter(newVal);
}); });
const matterTree=(list)=>{ const matterTree = (list) => {
list.forEach(item=>{ list.forEach(item => {
tree.value.setChecked(item,true) tree.value.setChecked(item, true)
if(item.children!==undefined){ if (item.children !== undefined) {
matterTree(item.children) matterTree(item.children)
} }
}) })
} }
const cancelAll=()=>{ const cancelAll = () => {
isChooseAll.value=true isChooseAll.value = true
tree.value.setCheckedNodes([]) tree.value.setCheckedNodes([])
} }
const chooseAll=()=>{ const chooseAll = () => {
isChooseAll.value=false isChooseAll.value = false
matterTree(dataList.value) matterTree(dataList.value)
} }
const getList = () => { const getList = () => {
getSubCompOpt().then(res => { getSubCompOpt().then(res => {
dataList.value = res.data; dataList.value = [
{
label: "全选",
value: -1,
children: res.data
}
]
}); });
}; };
@@ -149,47 +156,47 @@ const filterNode = (value, data) => {
const show = () => { const show = () => {
//用于弹开部门选择 //用于弹开部门选择
visible.value = true; visible.value = true;
selectList.value=_value.value selectList.value = _value.value
defaultChecked.value=_value.value.map(item=>item.value) defaultChecked.value = _value.value.map(item => item.value)
getList() getList()
}; };
const handleChange = (data, checked) => { const handleChange = (data, checked) => {
// 左侧有选择框 // 左侧有选择框
// if (props.showCheckbox) { // if (props.showCheckbox) {
// 左侧有选择框 + 多选 // 左侧有选择框 + 多选
if (props.multiple) { if (props.multiple) {
//不添加重复的数据到右边 //不添加重复的数据到右边
for (let i = 0; i < selectList.value.length; i++) { for (let i = 0; i < selectList.value.length; i++) {
if (selectList.value[i].value === data.value) { if (selectList.value[i].value === data.value) {
selectList.value.splice(i, 1); selectList.value.splice(i, 1);
break; break;
}
}
if (checked) {
// if (data.children === undefined) {
selectList.value.push(data);
// }
} else if (data === "1") {
tree.value.setCheckedKeys([]);
selectList.value = [];
}
} else {// 左侧有选择框 + 单选
//不添加重复的数据到右边
for (let i = 0; i < selectList.value.length; i++) {
if (selectList.value[i].value === data.value) {
selectList.value.splice(i, 1);
break;
}
}
if (checked) {
tree.value.setCheckedNodes([data]);
// this.$refs.tree.setCheckedKeys([]);
selectList.value = [data];
} else if (data === "1") {
selectList.value = [];
tree.value.setCheckedKeys([]);
} }
} }
if (checked) {
// if (data.children === undefined) {
selectList.value.push(data);
// }
} else if (data === "1") {
tree.value.setCheckedKeys([]);
selectList.value = [];
}
} else {// 左侧有选择框 + 单选
//不添加重复的数据到右边
for (let i = 0; i < selectList.value.length; i++) {
if (selectList.value[i].value === data.value) {
selectList.value.splice(i, 1);
break;
}
}
if (checked) {
tree.value.setCheckedNodes([data]);
// this.$refs.tree.setCheckedKeys([]);
selectList.value = [data];
} else if (data === "1") {
selectList.value = [];
tree.value.setCheckedKeys([]);
}
}
// } // }
}; };
const handle = (node, check) => { const handle = (node, check) => {
@@ -215,7 +222,7 @@ const noSelected = (selectItem) => {
//左侧无选择框时,右侧显示× //左侧无选择框时,右侧显示×
for (let i = 0; i < selectList.value.length; i++) { for (let i = 0; i < selectList.value.length; i++) {
if (selectList.value[i].value === selectItem.value) { if (selectList.value[i].value === selectItem.value) {
tree.value.setChecked(selectList.value[i].value,false); tree.value.setChecked(selectList.value[i].value, false);
selectList.value.splice(i, 1); selectList.value.splice(i, 1);
break; break;
} }

View File

@@ -212,11 +212,7 @@ const showCompany = () => {
const selected = (select) => { const selected = (select) => {
let companyInfoList = [] let companyInfoList = []
for (let val of select) { for (let val of select) {
let companyInfo = { companyInfoList.push(val)
value: val.value,
label: val.label
}
companyInfoList.push(companyInfo)
formData.value.companyIds.push(val.value) formData.value.companyIds.push(val.value)
} }
companyList.value = companyInfoList companyList.value = companyInfoList

View File

@@ -143,7 +143,7 @@ const init = async () => {
form.value.setValues({state: '1', template: false}) form.value.setValues({state: '1', template: false})
const res = await getTemRoleOption() const res = await getTemRoleOption()
localData.tempRoleOpt = res.data localData.tempRoleOpt = res.data
const { data } = await getMenuOptRole() const { data } = await getMenuOptRole(0)
localData.menuData = data.menuOption localData.menuData = data.menuOption
// localData.checked = data.checked // localData.checked = data.checked
} }

View File

@@ -114,6 +114,12 @@ const tableConfig = reactive({
label: '手机号码', label: '手机号码',
align: 'center', align: 'center',
}, },
{
prop: 'accountType',
label: '主子账号',
align: 'center',
currentRender: ({row, index}) => (<Tag dictType={'account_type'} value={row.accountType} />)
},
{ {
prop: 'state', prop: 'state',
label: '状态', label: '状态',