tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 修改selectTree組件的value屬性为默认值modelValue,添加toRefs

Browse Source 
修改selectTree組件的value屬性为默认值modelValue,使其支持v-model缺省,给部门,用户页面添加toRefs，使其组件使用时不用加dataMap.
This commit is contained in:
zc
2021-12-26 13:51:41 +08:00
parent e4dd8e1ce9
commit 87334541dd
3 changed files with 169 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/TreeSelect/index.vue
View File

@@ -16,8 +16,8 @@
ref="selectTree" ref="selectTree"
:accordion="accordion" :accordion="accordion"
:data="options" :data="options"
:props="props.props" :props="state.props"
:node-key="props.props.value" :node-key="state.props.value"
:expand-on-click-node="false" :expand-on-click-node="false"
:default-expanded-keys="defaultExpandedKey" :default-expanded-keys="defaultExpandedKey"
:filter-node-method="filterNode" :filter-node-method="filterNode"
@@ -29,11 +29,10 @@
</template> </template>
<script setup> <script setup>
import {defineEmits, ref, getCurrentInstance, nextTick, onMounted, computed, watch} from "vue"; import {defineEmits, ref, getCurrentInstance ,nextTick,onMounted,computed,watch} from "vue";
const { proxy } = getCurrentInstance();
const {proxy} = getCurrentInstance(); const state = defineProps({
const props = defineProps({
/* 配置项 */ /* 配置项 */
props: { props: {
type: Object, type: Object,
@@ -45,34 +44,38 @@ const props = defineProps({
} }
} }
}, },
// 自动收起 /* 自动收起 */
accordion: { accordion: {
type: Boolean, type: Boolean,
default: () => { default: () => {
return false return false
} }
}, },
// 双向数据绑定的值 /**当前双向数据绑定的值 */
value: { modelValue: {
type: [String, Number], type: [String, Number],
default: '' default: ''
}, },
/**当前的数据 */
options: { options: {
type: Array, type: Array,
default: () => [] default: () => []
}, },
/**输入框内部的文字 */
placeholder: { placeholder: {
type: String, type: String,
default: '' default: ''
} }
}) })
const emit = defineEmits(['update:value']); const emit = defineEmits(['update:modelValue']);
const valueId = computed({ const valueId = computed({
get: () => props.value, get: () => {
return state.modelValue
},
set: (val) => { set: (val) => {
emit('update:value', val) emit('update:modelValue', val)
} }
}); });
const valueTitle = ref(''); const valueTitle = ref('');
@@ -81,43 +84,38 @@ const defaultExpandedKey = ref([]);
function initHandle() { function initHandle() {
nextTick(() => { nextTick(() => {
const selectedValue = valueId.value; const selectedValue = valueId.value;
if (selectedValue !== null && typeof (selectedValue) !== "undefined") { if(selectedValue !== null && typeof (selectedValue) !== "undefined"){
const node = proxy.$refs.selectTree.getNode(selectedValue) const node = proxy.$refs.selectTree.getNode(selectedValue)
if (node) { if (node) {
valueTitle.value = node.data[props.props.label] valueTitle.value = node.data[state.props.label]
proxy.$refs.selectTree.setCurrentKey(selectedValue) // 设置默认选中 proxy.$refs.selectTree.setCurrentKey(selectedValue) // 设置默认选中
defaultExpandedKey.value = [selectedValue] // 设置默认展开 defaultExpandedKey.value = [selectedValue] // 设置默认展开
} else { }else{
clearHandle() clearHandle()
} }
} }
}) })
} }
function handleNodeClick(node) { function handleNodeClick(node) {
valueTitle.value = node[props.props.label] valueTitle.value = node[state.props.label]
valueId.value = node[props.props.value]; valueId.value = node[state.props.value];
defaultExpandedKey.value = []; defaultExpandedKey.value = [];
proxy.$refs.treeSelect.blur() proxy.$refs.treeSelect.blur()
selectFilterData('') selectFilterData('')
} }
function selectFilterData(val) { function selectFilterData(val) {
proxy.$refs.selectTree.filter(val) proxy.$refs.selectTree.filter(val)
} }
function filterNode(value, data) { function filterNode(value, data) {
if (!value) return true if (!value) return true
return data[props.props['label']].indexOf(value) !== -1 return data[state.props['label']].indexOf(value) !== -1
} }
function clearHandle() { function clearHandle() {
valueTitle.value = '' valueTitle.value = ''
valueId.value = '' valueId.value = ''
defaultExpandedKey.value = []; defaultExpandedKey.value = [];
clearSelected() clearSelected()
} }
function clearSelected() { function clearSelected() {
const allNode = document.querySelectorAll('#tree-option .el-tree-node') const allNode = document.querySelectorAll('#tree-option .el-tree-node')
allNode.forEach((element) => element.classList.remove('is-current')) allNode.forEach((element) => element.classList.remove('is-current'))
@@ -143,7 +141,7 @@ watch(valueId, () => {
font-weight: normal; font-weight: normal;
} }
ul li .el-tree .el-tree-node__content { ul li .el-tree .el-tree-node__content {
height: auto; height: auto;
padding: 0 20px; padding: 0 20px;
box-sizing: border-box; box-sizing: border-box;
@@ -152,7 +150,7 @@ ul li .el-tree .el-tree-node__content {
:deep(.el-tree-node__content:hover), :deep(.el-tree-node__content:hover),
:deep(.el-tree-node__content:active), :deep(.el-tree-node__content:active),
:deep(.is-current > div:first-child), :deep(.is-current > div:first-child),
:deep( .el-tree-node__content:focus ) { :deep( .el-tree-node__content:focus ){
background-color: mix(#fff, #409EFF, 90%); background-color: mix(#fff, #409EFF, 90%);
color: #409EFF; color: #409EFF;
} }

90
src/views/system/dept/index.vue
View File

@@ -3,14 +3,14 @@
<el-form <el-form
size="mini" size="mini"
:model="dataMap.queryParams" :model="queryParams"
ref="queryForm" ref="queryForm"
:inline="true" :inline="true"
v-show="dataMap.showSearch" v-show="showSearch"
> >
<el-form-item> <el-form-item>
<el-button type="success" :icon="Plus" @click="handleAdd">新增</el-button> <el-button type="success" :icon="Plus" @click="handleAdd">新增</el-button>
<el-button type="danger" :icon="Delete" :disabled="dataMap.single" @click="handleDelete">删除 <el-button type="danger" :icon="Delete" :disabled="single" @click="handleDelete">删除
</el-button> </el-button>
</el-form-item> </el-form-item>
@@ -18,7 +18,7 @@
prop="name" prop="name"
> >
<el-input <el-input
v-model="dataMap.queryParams.name" v-model="queryParams.name"
placeholder="请输入部门名称" placeholder="请输入部门名称"
size="small" size="small"
@keyup.enter="handleQuery" @keyup.enter="handleQuery"
@@ -28,13 +28,13 @@
prop="status" prop="status"
> >
<el-select <el-select
v-model="dataMap.queryParams.status" v-model="queryParams.status"
placeholder="部门状态" placeholder="部门状态"
clearable clearable
size="small" size="small"
> >
<el-option <el-option
v-for="dict in dataMap.statusOptions" v-for="dict in statusOptions"
:key="dict.dictValue" :key="dict.dictValue"
:label="dict.dictLabel" :label="dict.dictLabel"
:value="dict.dictValue" :value="dict.dictValue"
@@ -62,12 +62,12 @@
</el-form> </el-form>
<el-table <el-table
v-loading="dataMap.loading" v-loading="loading"
:data="dataMap.deptList" :data="deptList"
row-key="id" row-key="id"
default-expand-all default-expand-all
:tree-props="{children: 'children', hasChildren: 'hasChildren'}" :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
@selection-change = "handleSelectionChange" @selection-change="handleSelectionChange"
> >
<el-table-column type="selection" width="55" align="center"/> <el-table-column type="selection" width="55" align="center"/>
<el-table-column prop="name" label="部门名称"/> <el-table-column prop="name" label="部门名称"/>
@@ -119,16 +119,16 @@
<!-- 添加或修改部门对话框 --> <!-- 添加或修改部门对话框 -->
<el-dialog <el-dialog
:title="dataMap.title" :title="title"
v-model="dataMap.open" v-model="open"
width="600px" width="600px"
@open="dialogshow" @open="dialogshow"
@closed="cancel" @closed="cancel"
> >
<el-form <el-form
ref="formDialog" ref="formDialog"
:model="dataMap.formVal" :model="formVal"
:rules="dataMap.rules" :rules="rules"
label-width="80px" label-width="80px"
> >
<el-form-item <el-form-item
@@ -136,19 +136,19 @@
prop="parentId" prop="parentId"
> >
<tree-select <tree-select
:options="dataMap.deptOptions" :options="deptOptions"
placeholder="选择上级部门" placeholder="选择上级部门"
v-model:value="dataMap.formVal.parentId" v-model="formVal.parentId"
/> />
</el-form-item> </el-form-item>
<el-form-item label="部门名称" prop="name"> <el-form-item label="部门名称" prop="name">
<el-input v-model="dataMap.formVal.name" placeholder="请输入部门名称"/> <el-input v-model="formVal.name" placeholder="请输入部门名称"/>
</el-form-item> </el-form-item>
<el-form-item label="显示排序" prop="sort"> <el-form-item label="显示排序" prop="sort">
<el-input-number v-model="dataMap.formVal.sort" controls-position="right" style="width: 100px" :min="0"/> <el-input-number v-model="formVal.sort" controls-position="right" style="width: 100px" :min="0"/>
</el-form-item> </el-form-item>
<el-form-item label="部门状态"> <el-form-item label="部门状态">
<el-radio-group v-model="dataMap.formVal.status"> <el-radio-group v-model="formVal.status">
<el-radio :label="1">正常</el-radio> <el-radio :label="1">正常</el-radio>
<el-radio :label="0">禁用</el-radio> <el-radio :label="0">禁用</el-radio>
</el-radio-group> </el-radio-group>
@@ -175,7 +175,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import {onMounted, reactive, unref, ref} from 'vue' import {onMounted, reactive, unref, ref, toRefs} from 'vue'
import {Search, Plus, Edit, Refresh, Delete} from '@element-plus/icons' import {Search, Plus, Edit, Refresh, Delete} from '@element-plus/icons'
import {listDept, getDept, delDept, updateDept, addDept, getDeptSelectList} from '@/api/system/dept' import {listDept, getDept, delDept, updateDept, addDept, getDeptSelectList} from '@/api/system/dept'
import TreeSelect from '@/components/TreeSelect/Index.vue' import TreeSelect from '@/components/TreeSelect/Index.vue'
@@ -249,6 +249,8 @@ const dataMap = reactive({
const queryForm = ref(ElForm) const queryForm = ref(ElForm)
const formDialog = ref(ElForm) const formDialog = ref(ElForm)
/** /**
* 删除按钮 * 删除按钮
* */ * */
@@ -348,30 +350,42 @@ function submitForm() {
/** 删除按钮操作 */ /** 删除按钮操作 */
async function handleDelete(row: any) { async function handleDelete(row: any) {
const ids = [row.id || dataMap.ids].join(',') const ids = [row.id || dataMap.ids].join(',')
ElMessageBox.confirm(`确认删除已选中的数据项?`, '警告', { ElMessageBox.confirm(`确认删除已选中的数据项?`, '警告', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
delDept(ids).then(rps=>{ delDept(ids).then(rps => {
getList() getList()
ElMessage.success('删除成功') ElMessage.success('删除成功')
}).catch(e=>{ }).catch(e => {
console.log(`删除失败:${e}`) console.log(`删除失败:${e}`)
}) })
}).catch(() => }).catch(() =>
ElMessage.info('已取消删除') ElMessage.info('已取消删除')
) )
}
function getDeptId(e: any) {
dataMap.formVal.parentId = e
} }
function dialogshow() { function dialogshow() {
getTreeselect() getTreeselect()
} }
const {
ids, single,
multiple,
disabled,
isAdd,
originOptions, props, loading,
// 显示搜索条件
showSearch,
// 表格树数据
deptList,
// 部门树选项
deptOptions,
// 弹出层标题
title,
// 是否显示弹出层
open, statusOptions, queryParams, formVal, deptidfix, rules
} = toRefs(dataMap)
onMounted(() => { onMounted(() => {
getList() getList()

137
src/views/system/user/index.vue
View File

@@ -8,7 +8,7 @@
> >
<div class="head-container"> <div class="head-container">
<el-input <el-input
v-model="dataMap.deptName" v-model="deptName"
placeholder="请输入部门名称" placeholder="请输入部门名称"
clearable clearable
size="small" size="small"
@@ -19,8 +19,8 @@
<div class="head-container"> <div class="head-container">
<el-tree <el-tree
ref="treeRef" ref="treeRef"
:data="dataMap.deptOptions" :data="deptOptions"
:props="dataMap.defaultProps" :props="defaultProps"
:expand-on-click-node="false" :expand-on-click-node="false"
:filter-node-method="filterNode" :filter-node-method="filterNode"
default-expand-all default-expand-all
@@ -34,9 +34,9 @@
:xs="24" :xs="24"
> >
<el-form <el-form
v-show="dataMap.showSearch" v-show="showSearch"
ref="queryForm" ref="queryForm"
:model="dataMap.queryParams" :model="queryParams"
:inline="true" :inline="true"
> >
@@ -55,7 +55,7 @@
plain plain
:icon="Edit" :icon="Edit"
size="mini" size="mini"
:disabled="dataMap.single" :disabled="single"
@click="handleUpdate" @click="handleUpdate"
> >
修改 修改
@@ -65,7 +65,7 @@
plain plain
:icon="Delete" :icon="Delete"
size="mini" size="mini"
:disabled="dataMap.multiple" :disabled="multiple"
@click="handleDelete" @click="handleDelete"
> >
删除 删除
@@ -77,7 +77,7 @@
prop="keywords" prop="keywords"
> >
<el-input <el-input
v-model="dataMap.queryParams.keywords" v-model="queryParams.keywords"
placeholder="用户名/昵称/手机号" placeholder="用户名/昵称/手机号"
clearable clearable
size="small" size="small"
@@ -90,7 +90,7 @@
prop="mobile" prop="mobile"
> >
<el-input <el-input
v-model="dataMap.queryParams.mobile" v-model="queryParams.mobile"
placeholder="请输入手机号码" placeholder="请输入手机号码"
clearable clearable
size="small" size="small"
@@ -103,14 +103,14 @@
prop="status" prop="status"
> >
<el-select <el-select
v-model="dataMap.queryParams.status" v-model="queryParams.status"
placeholder="用户状态" placeholder="用户状态"
clearable clearable
size="small" size="small"
style="width: 200px" style="width: 200px"
> >
<el-option <el-option
v-for="dict in dataMap.statusOptions" v-for="dict in statusOptions"
:key="dict.dictValue" :key="dict.dictValue"
:label="dict.dictLabel" :label="dict.dictLabel"
:value="dict.dictValue" :value="dict.dictValue"
@@ -137,8 +137,8 @@
</el-form> </el-form>
<el-table <el-table
v-loading="dataMap.loading" v-loading="loading"
:data="dataMap.userList" :data="userList"
@selection-change="handleSelectionChange" @selection-change="handleSelectionChange"
> >
<el-table-column <el-table-column
@@ -147,14 +147,14 @@
align="center" align="center"
/> />
<el-table-column <el-table-column
v-if="dataMap.columns[0].visible" v-if="columns[0].visible"
key="id" key="id"
label="用户编号" label="用户编号"
align="center" align="center"
prop="id" prop="id"
/> />
<el-table-column <el-table-column
v-if="dataMap.columns[1].visible" v-if="columns[1].visible"
key="username" key="username"
label="用户名称" label="用户名称"
align="center" align="center"
@@ -162,7 +162,7 @@
:show-overflow-tooltip="true" :show-overflow-tooltip="true"
/> />
<el-table-column <el-table-column
v-if="dataMap.columns[2].visible" v-if="columns[2].visible"
key="nickname" key="nickname"
label="用户昵称" label="用户昵称"
align="center" align="center"
@@ -170,7 +170,7 @@
:show-overflow-tooltip="true" :show-overflow-tooltip="true"
/> />
<el-table-column <el-table-column
v-if="dataMap.columns[3].visible" v-if="columns[3].visible"
key="deptName" key="deptName"
label="部门" label="部门"
align="center" align="center"
@@ -178,7 +178,7 @@
:show-overflow-tooltip="true" :show-overflow-tooltip="true"
/> />
<el-table-column <el-table-column
v-if="dataMap.columns[4].visible" v-if="columns[4].visible"
key="mobile" key="mobile"
label="手机号码" label="手机号码"
align="center" align="center"
@@ -187,7 +187,7 @@
/> />
<el-table-column <el-table-column
v-if="dataMap.columns[5].visible" v-if="columns[5].visible"
key="status" key="status"
label="状态" label="状态"
align="center" align="center"
@@ -203,7 +203,7 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
v-if="dataMap.columns[6].visible" v-if="columns[6].visible"
label="创建时间" label="创建时间"
align="center" align="center"
prop="gmtCreate" prop="gmtCreate"
@@ -248,10 +248,10 @@
</el-table> </el-table>
<pagination <pagination
v-show="dataMap.total>0" v-show="total>0"
:total="dataMap.total" :total="total"
v-model:page="dataMap.queryParams.page" v-model:page="queryParams.page"
v-model:limit="dataMap.queryParams.limit" v-model:limit="queryParams.limit"
@pagination="getList" @pagination="getList"
/> />
</el-col> </el-col>
@@ -259,8 +259,8 @@
<!-- 添加或修改参数配置对话框 --> <!-- 添加或修改参数配置对话框 -->
<el-dialog <el-dialog
:title="dataMap.title" :title="title"
v-model="dataMap.open" v-model="open"
width="600px" width="600px"
append-to-body append-to-body
@opened="showDialog" @opened="showDialog"
@@ -268,8 +268,8 @@
> >
<el-form <el-form
ref="addForm" ref="addForm"
:model="dataMap.formVal" :model="formVal"
:rules="dataMap.rules" :rules="rules"
label-width="80px" label-width="80px"
> >
<el-row> <el-row>
@@ -279,7 +279,7 @@
prop="nickname" prop="nickname"
> >
<el-input <el-input
v-model="dataMap.formVal.nickname" v-model="formVal.nickname"
placeholder="请输入用户昵称" placeholder="请输入用户昵称"
/> />
</el-form-item> </el-form-item>
@@ -290,9 +290,9 @@
prop="deptId" prop="deptId"
> >
<tree-select <tree-select
:options="dataMap.deptOptions" :options="deptOptions"
placeholder="请选择归属部门" placeholder="请选择归属部门"
v-model:value="dataMap.formVal.deptId" v-model="formVal.deptId"
/> />
</el-form-item> </el-form-item>
</el-col> </el-col>
@@ -304,7 +304,7 @@
prop="mobile" prop="mobile"
> >
<el-input <el-input
v-model="dataMap.formVal.mobile" v-model="formVal.mobile"
placeholder="请输入手机号码" placeholder="请输入手机号码"
maxlength="11" maxlength="11"
/> />
@@ -316,7 +316,7 @@
prop="email" prop="email"
> >
<el-input <el-input
v-model="dataMap.formVal.email" v-model="formVal.email"
placeholder="请输入邮箱" placeholder="请输入邮箱"
maxlength="50" maxlength="50"
/> />
@@ -326,21 +326,21 @@
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<el-form-item <el-form-item
v-if="dataMap.formVal.userId === undefined" v-if="formVal.userId === undefined"
label="用户名称" label="用户名称"
prop="userName" prop="userName"
> >
<el-input <el-input
v-model="dataMap.formVal.username" v-model="formVal.username"
placeholder="请输入用户名称" placeholder="请输入用户名称"
/> />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="状态"> <el-form-item label="状态">
<el-radio-group v-model="dataMap.formVal.status"> <el-radio-group v-model="formVal.status">
<el-radio <el-radio
v-for="dict in dataMap.statusOptions" v-for="dict in statusOptions"
:key="dict.dictValue" :key="dict.dictValue"
:label="dict.dictValue" :label="dict.dictValue"
> >
@@ -355,11 +355,11 @@
<el-col :span="12"> <el-col :span="12">
<el-form-item label="用户性别"> <el-form-item label="用户性别">
<el-select <el-select
v-model="dataMap.formVal.gender" v-model="formVal.gender"
placeholder="请选择" placeholder="请选择"
> >
<el-option <el-option
v-for="dict in dataMap.sexOptions" v-for="dict in sexOptions"
:key="dict.value" :key="dict.value"
:label="dict.name" :label="dict.name"
:value="dict.value" :value="dict.value"
@@ -370,12 +370,12 @@
<el-col :span="12"> <el-col :span="12">
<el-form-item label="角色"> <el-form-item label="角色">
<el-select <el-select
v-model="dataMap.formVal.roleIds" v-model="formVal.roleIds"
multiple multiple
placeholder="请选择" placeholder="请选择"
> >
<el-option <el-option
v-for="item in dataMap.roleOptions" v-for="item in roleOptions"
:key="item.id" :key="item.id"
:label="item.name" :label="item.name"
:value="item.id" :value="item.id"
@@ -390,12 +390,12 @@
<el-col :span="12"> <el-col :span="12">
<el-form-item <el-form-item
v-if="dataMap.formVal.id === undefined" v-if="formVal.id === undefined"
label="用户密码" label="用户密码"
prop="password" prop="password"
> >
<el-input <el-input
v-model="dataMap.formVal.password" v-model="formVal.password"
placeholder="请输入用户密码" placeholder="请输入用户密码"
type="password" type="password"
/> />
@@ -432,7 +432,7 @@ import TreeSelect from '@/components/TreeSelect/Index.vue'
import {listRoles} from '@/api/system/role' import {listRoles} from '@/api/system/role'
import {Search, Plus, Edit, Refresh, Delete} from '@element-plus/icons' import {Search, Plus, Edit, Refresh, Delete} from '@element-plus/icons'
import {reactive, ref, unref, onMounted, watchEffect, getCurrentInstance} from 'vue' import {reactive, ref, unref, onMounted, watchEffect, getCurrentInstance,toRefs} from 'vue'
import {ElMessage, ElMessageBox, ElTree} from 'element-plus' import {ElMessage, ElMessageBox, ElTree} from 'element-plus'
@@ -780,6 +780,55 @@ function showDialog() {
loadRoleOptions() loadRoleOptions()
} }
const {
props,
addformFlag,
// 阻止触发switch change事件
tigger,
// 遮罩层
loading,
// 选中数组
ids,
// 非单个禁用
single,
// 非多个禁用
multiple,
// 显示搜索条件
showSearch,
// 总条数
total,
originOptions,
// 用户表格数据
userList,
// 弹出层标题
title,
// 部门树选项
deptOptions,
// 是否显示弹出层
open,
// 部门名称
deptName,
// 默认密码
initPassword,
// 日期范围
dateRange,
// 状态数据字典
statusOptions,
// 性别状态字典
sexOptions,
// 角色选项
roleOptions,
// 表单参数
formVal,
defaultProps,
// 查询参数
queryParams,
// 列信息
columns,
// 表单校验
rules
} = toRefs(dataMap)
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.small-padding { .small-padding {