Skip to content

L
Lic
提交 a01cce35 authored 作者: 刘旭's avatar 刘旭
浏览文件
操作

去除无用代码

上级 773310f9
隐藏空白字符变更
内嵌 并排
正在显示 包含 0 行增加 和 598 行删除
src/services/business/department/useBaseModel.ts deleted 100644 → 0
浏览文件 @ 773310f9
import { AddDeptModel } from '@/services/api/department/DeptModel'
import { reactive } from 'vue'
export default function useBaseModel() {
//表单验证
const rules = reactive({
parentName: [{
required: true,
message: '请选择上级部门',
trigger: 'change',
}],
name: [{
required: true,
message: '请填写部门名称',
trigger: 'change',
}]
})
//表单数据
const dialogModel = reactive<AddDeptModel>({
type: "",
id: "",
pid: "",
parentName: "",
manager: "",
deptAddress: "",
deptPhone: "",
name: "",
deptCode: "",
orderNum: ""
})
return {
rules,
dialogModel
}
}
\ No newline at end of file
src/services/business/department/useDept.ts deleted 100644 → 0
浏览文件 @ 773310f9
import { ref } from 'vue'
import { AddDeptModel, DeptModel, ListParm } from "@/services/api/department/DeptModel"
import { EditType } from '@/type/BaseEnum';
import useInstance from '@/hooks/useInstance';
import { addDeptApi, editDeptApi, deleteDeptApi } from '@/services/api/department/deptAPI';
import { Result, StatusCode } from '@/type/BastType';
export default function useDept(getDeptList: any, searchParm: ListParm) {
const { global, proxy } = useInstance();
//(vue的官方给的方式)打包的时候会报错
// const addDeptRef = ref<InstanceType<typeof AddAndEdit>>();
const addDeptRef = ref<{ show: (type: string, row?: DeptModel) => void }>();
//搜索
const serachBtn = () => {
getDeptList();
}
//重置
const resetBtn = () => {
//清空搜索框
searchParm.searchName = ''
getDeptList();
}
//新增
const addBtn = () => {
//父组件调用子组件的show方法
addDeptRef.value?.show(EditType.ADD);
}
//编辑
const editBtn = (row: DeptModel) => {
//父组件调用子组件的show方法
addDeptRef.value?.show(EditType.EDIT, row);
}
//删除
const deleteBtn = async (id: number) => {
console.log(global)
let parm = {
id: id
}
const confirm = await global.$myconfirm('确定删除该数据吗?')
if (confirm) {
//执行删除操作
let res = await deleteDeptApi(parm)
if (res && res.code == StatusCode.Success) {
//信息提示
global.$message({ message: res.msg, type: 'success' })
//刷新表格
getDeptList();
}
}
}
//保存
const save = async (parm: AddDeptModel) => {
//提交表单
let res: Result;
if (parm.type == EditType.ADD) { //新增
res = await addDeptApi(parm)
} else { //编辑
res = await editDeptApi(parm)
}
if (res && res.code == StatusCode.Success) {
//信息提示
global.$message({ message: res.msg, type: 'success' })
//刷新表格
getDeptList();
}
}
return {
serachBtn,
addBtn,
editBtn,
deleteBtn,
save,
addDeptRef,
resetBtn
}
}
\ No newline at end of file
src/services/business/department/useDeptTable.ts deleted 100644 → 0
浏览文件 @ 773310f9
/**
* 表格列表的业务逻辑
*/
import { reactive, onMounted, ref, nextTick } from 'vue'
import { DeptListRes, ListParm } from "@/services/api/department/DeptModel"
import { getDeptListApi } from '@/services/api/department/deptAPI'
export default function useDepaTable() {
//表格的高度
const tableHeigth = ref(0);
//定义列表查询参数
const searchParm = reactive<ListParm>({
searchName: ''
})
//定义表格的数据
const tableData = reactive<DeptListRes>({
list: []
})
//获取表格数据
const getDeptList = async () => {
let res = await getDeptListApi(searchParm);
if (res && res.code == 200) {
console.log('加载表格数据')
console.log(res.data)
tableData.list = res.data;
}
}
//首次加载
onMounted(() => {
getDeptList();
nextTick(() => {
tableHeigth.value = window.innerHeight - 200
})
})
return {
searchParm,
tableData,
getDeptList,
tableHeigth
}
}
\ No newline at end of file
src/services/business/department/useParent.ts deleted 100644 → 0
浏览文件 @ 773310f9
import { DeptModel, SelectNode } from '@/services/api/department//DeptModel'
import { reactive, ref } from 'vue'
import { getDeptParentApi } from '@/services/api/department/deptAPI'
import { ElTree } from 'element-plus';
export default function useParent() {
//树的ref属性
const parentTree = ref<InstanceType<typeof ElTree>>();
//上级树的数据
const treeData = reactive({
data: []
})
//选中的数据
const selectNode = reactive<SelectNode>({
id: '',
name: ''
})
//树的属性
const defaultProps = reactive({
children: 'children', //设置树的children
label: 'name', //设置树的名字属性字段
})
//树的点击事件
const handleNodeClick = (data: DeptModel) => {
selectNode.id = data.id;
selectNode.name = data.name
console.log(selectNode)
}
//获取树的数据
const getTreeData = async () => {
let res = await getDeptParentApi();
if (res && res.code == 200) {
treeData.data = res.data;
}
}
//加号和减号的点击事件
const openBtn = (data: DeptModel) => {
console.log(data)
//设置展开或者关闭
data.open = !data.open;
if (parentTree.value) {
parentTree.value.store.nodesMap[data.id].expanded = !data.open;
}
}
return {
treeData,
defaultProps,
handleNodeClick,
getTreeData,
openBtn,
parentTree,
selectNode
}
}
\ No newline at end of file
src/services/business/department/useSelectParent.ts deleted 100644 → 0
浏览文件 @ 773310f9
import { ref } from 'vue'
export default function useSelectParent() {
//parent组件的ref属性
const parentRef = ref<{ show: () => void }>()
//选择上级部门
const selectParent = () =>{
parentRef.value?.show();
}
return {
parentRef,
selectParent
}
}
\ No newline at end of file
src/views/system/department/AddAndEdit.vue deleted 100644 → 0
浏览文件 @ 773310f9
<template>
<SysDialog
:title="dialog.title"
:visible="dialog.visible"
:width="dialog.width"
:height="dialog.height"
@onClose="onClose"
@onConfirm="confirm"
>
<template v-slot:content>
<!--
:model表单绑定的数据域
ref: 相当于div的id，是唯一的
:rules:表单验证规则
el-row : 一行，分成24等分
el-col ： 列
-->
<el-form
:model="dialogModel"
ref="addDeptForm"
:rules="rules"
label-width="80px"
size="small"
>
<el-row>
<el-col :span="12">
<el-form-item prop="parentName" label="上级部门">
<el-input type="hidden" v-model="dialogModel.pid"></el-input>
<el-input @click="selectParent" v-model="dialogModel.parentName"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="name" label="部门名称">
<el-input v-model="dialogModel.name"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item prop="deptCode" label="部门编码">
<el-input v-model="dialogModel.deptCode"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="deptPhone" label="部门电话">
<el-input v-model="dialogModel.deptPhone"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item prop="manager" label="部门经理">
<el-input v-model="dialogModel.manager"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="deptAddress" label="部门地址">
<el-input v-model="dialogModel.deptAddress"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item prop="orderNum" label="部门序号">
<el-input v-model="dialogModel.orderNum"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</template>
</SysDialog>
<!-- 上级部门弹框 -->
<parent ref="parentRef" @select="select"></parent>
</template>
<script setup lang='ts'>
import { ref, reactive } from 'vue'
import parent from './parent.vue';
import SysDialog from '@/components/SysDialog.vue';
import useDialog from '@/hooks/useDialog';
import useBaseModel from '@/services/business/department/useBaseModel';
import { EditType, Title } from '@/type/BaseEnum';
import useSelectParent from '@/services/business/department/useSelectParent';
import { DeptModel, SelectNode } from '@/services/api/department/DeptModel';
import { ElForm } from 'element-plus';
import useInstance from '@/hooks/useInstance';
//全局挂载global
const { global } = useInstance();
//基础数据
const { dialogModel, rules } = useBaseModel();
//弹框属性
const { dialog, onShow, onClose } = useDialog();
//表单的ref属性
const addDeptForm = ref<InstanceType<typeof ElForm>>();
//定义事件
const emit = defineEmits(['save'])
//弹框的确定,把表单的值，返回给父组件
const confirm = () => {
addDeptForm.value?.validate(valid => {
//验证通过，才提交表单
if (valid) {
emit('save', dialogModel)
onClose();
}
})
}
//显示弹框
const show = (type: string, row?: DeptModel) => {
//设置弹框的宽度
dialog.width = 650;
dialog.height = 250;
//设置弹框的标题
type == EditType.ADD ? dialog.title = Title.ADD : dialog.title = Title.EDIT
//显示
onShow();
//清空表单
global.$resetForm(addDeptForm.value, dialogModel);
if (EditType.EDIT === type) {
//把要编辑的数据，放到表单绑定的model里面
global.$objCoppy(row, dialogModel)
}
//设置编辑属性
dialogModel.type = type;
}
//在组件中，属性和方法，只能对当前template,
//外部需要使用的时候，需要使用 defineExpose 暴露出去
//给父组件
defineExpose({
show
})
//上级部门
const { parentRef, selectParent } = useSelectParent();
//选中上级的数据
const select = (node: SelectNode) => {
console.log('父组件取到值')
console.log(node)
dialogModel.pid = node.id;
dialogModel.parentName = node.name
}
</script>
<style scoped lang='scss'>
</style>
\ No newline at end of file
src/views/system/department/department.vue deleted 100644 → 0
浏览文件 @ 773310f9
<template>
<el-main height>
<!-- 搜索栏 -->
<el-form :model="searchParm" label-width="80px" :inline="true">
<el-form-item>
<el-input v-model="searchParm.searchName"></el-input>
</el-form-item>
<el-form-item>
<el-button @click="serachBtn">
<el-icon>
<Search />搜索
</el-icon>
</el-button>
<el-button style="color: #FF7670;" @click="resetBtn">
<el-icon>
<Close />重置
</el-icon>
</el-button>
<el-button v-permission="['sys:addDepartment']" type="primary" @click="addBtn">
<el-icon>
<Plus />新增
</el-icon>
</el-button>
</el-form-item>
</el-form>
<!-- 表格 -->
<el-table :height="tableHeigth" :data="tableData.list" style="width: 100%" row-key="id" default-expand-all
border :tree-props="{ children: 'children' }">
<el-table-column prop="name" label="部门名称" />
<el-table-column prop="deptCode" label="部门编码" />
<el-table-column prop="deptPhone" label="部门电话" />
<el-table-column label="操作" width="200" align="center">
<template #default="scope">
<el-button v-permission="['sys:editDept']" type="primary" @click="editBtn(scope.row)">
<el-icon>
<Edit />编辑
</el-icon>
</el-button>
<el-button v-permission="['sys:deleteDept']" type="danger" @click="deleteBtn((scope.row.id))">
<el-icon>
<Delete />删除
</el-icon>
</el-button>
</template>
</el-table-column>
</el-table>
</el-main>
<!-- 新增、编辑弹框 -->
<AddAndEdit ref="addDeptRef" @save="save"></AddAndEdit>
</template>
<script setup lang="ts">
import AddAndEdit from './AddAndEdit.vue';
//import { Search, Plus, Edit, Close } from '@element-plus/icons'
import useDepaTable from '@/services/business/department/useDeptTable';
import useDept from '@/services/business/department/useDept';
//表格列表
const { searchParm, tableData, getDeptList, tableHeigth } = useDepaTable();
//表格操作 搜索、新增、编辑、删除
const { serachBtn, addBtn, editBtn, deleteBtn, addDeptRef, save, resetBtn } = useDept(getDeptList, searchParm);
</script>
\ No newline at end of file
src/views/system/department/parent.vue deleted 100644 → 0
浏览文件 @ 773310f9
<template>
<SysDialog
:title="dialog.title"
:width="dialog.width"
:height="dialog.height"
:visible="dialog.visible"
@onClose="onClose"
@onConfirm="confirm"
>
<template v-slot:content>
<el-tree
ref="parentTree"
:data="treeData.data"
node-key="id"
:props="defaultProps"
default-expand-all
:highlight-current="true"
:expand-on-click-node="false"
@node-click="handleNodeClick"
>
<template #default="{ node, data }">
<div class="custom-tree-container">
<!-- 长度为0说明没有下级 -->
<span v-if="data.children.length == 0">
<DocumentRemove style="width: 1.3em; height: 1.3em; margin-right: 5px;color: #8c8c8c;"></DocumentRemove>
</span>
<!-- 点击展开和关闭 -->
<span v-else @click.stop="openBtn(data)">
<component style="width: 1.1em; height: 1.1em; margin-right: 5px;color: #8c8c8c;" :is="data.open ? Plus : Minus" />
</span>
<span>{{ node.label }}</span>
</div>
</template>
</el-tree>
</template>
</SysDialog>
</template>
<script setup lang='ts'>
import SysDialog from '@/components/SysDialog.vue';
import useDialog from '@/hooks/useDialog';
import useParent from '@/services/business/department/useParent';
//弹框属性
const { dialog, onClose, onShow } = useDialog()
//子组件传值给父组件
const emit = defineEmits(['select'])
//弹框确定事件
const confirm = () => {
emit('select',selectNode)
onClose();
}
//供父组件调用，显示弹框
const show = async () => {
//获取树的数据
await getTreeData();
//设置弹框属性
dialog.title = '选择上级部门'
dialog.height = 420;
dialog.width = 300;
//显示
onShow();
}
//把方法暴露出去
defineExpose({
show
})
//树相关数据
const { treeData, defaultProps, handleNodeClick, getTreeData ,openBtn,parentTree,selectNode} = useParent();
</script>
<style lang="scss">
.el-tree {
// 将每一行的设置为相对定位 方便后面before after 使用绝对定位来固定位置
.el-tree-node {
position: relative;
padding-left: 10px;
}
// 子集像右偏移 给数线留出距离
.el-tree-node__children {
padding-left: 20px;
}
//这是竖线
.el-tree-node :last-child:before {
height: 40px;
}
.el-tree > .el-tree-node:before {
border-left: none;
}
.el-tree > .el-tree-node:after {
border-top: none;
}
//这自定义的线 的公共部分
.el-tree-node:before,
.el-tree-node:after {
content: "";
left: -4px;
position: absolute;
right: auto;
border-width: 1px;
}
.tree :first-child .el-tree-node:before {
border-left: none;
}
// 竖线
.el-tree-node:before {
border-left: 1px dotted #d9d9d9;
bottom: 0px;
height: 100%;
top: -25px;
width: 1px;
}
//横线
.el-tree-node:after {
border-top: 1px dotted #d9d9d9;
height: 20px;
top: 14px;
width: 24px;
}
.el-tree-node__expand-icon.is-leaf {
width: 8px;
}
//去掉elementui自带的展开按钮 一个向下的按钮,打开时向右
.el-tree-node__content > .el-tree-node__expand-icon {
display: none;
}
//每一行的高度
.el-tree-node__content {
line-height: 30px;
height: 30px;
padding-left: 10px !important;
}
}
//去掉最上级的before after 即是去电最上层的连接线
.el-tree > div {
&::before {
display: none;
}
&::after {
display: none;
}
}
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论