dianliang/lanan-system-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新

Browse Source
This commit is contained in:
xuyuncong 2025-10-15 17:39:54 +08:00
parent c91ebc3135
commit 8d0b878eec
2 changed files with 611 additions and 285 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

891
src/views/company/businessChannel/index.vue
View File

@ -1,296 +1,627 @@
<template>
<div class="app-container">
<doc-alert title="功能权限" url="https://doc.iocoder.cn/resource-permission"/>
<doc-alert title="菜单路由" url="https://doc.iocoder.cn/vue2/route/"/>
<!-- 搜索工作栏 -->
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
<el-form-item label="菜单名称" prop="name">
<el-input v-model="queryParams.name" placeholder="请输入菜单名称" clearable @keyup.enter.native="handleQuery"/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<template>
<div class="app-container">
<el-card>
<!-- 搜索区域 -->
<div style="display: flex; justify-content: space-between; align-items: center;">
<div class="filter-container">
<el-input
v-model="listQuery.name"
placeholder="业务渠道名称"
style="width: 200px;"
class="filter-item"
@keyup.enter.native="handleFilter"
/>
<el-button
class="filter-item"
type="primary"
icon="el-icon-search"
@click="handleFilter"
>
搜索
</el-button>
<el-button
class="filter-item"
style="margin-left: 10px;"
type="primary"
icon="el-icon-plus"
@click="handleAdd"
>
新增业务渠道
</el-button>
</div>
<div class="filter-container">
<el-button
class="filter-item"
style="margin-left: auto;"
icon="el-icon-refresh"
:loading="refreshing"
:disabled="refreshing"
@click="handleRefresh"
/>
</div>
</div>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增
</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="info" plain icon="el-icon-sort" size="mini" @click="toggleExpandAll">展开/折叠</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<!-- 表格 -->
<el-table
:data="menuList"
border
fit
highlight-current-row
style="width: 100%; margin-top: 20px;"
:expand-row-keys="expandedRows"
@expand-change="handleExpandChange"
>
<el-table-column type="expand">
<template slot-scope="{row}">
<div class="source-container">
<div class="source-header">
<span class="source-title">子项列表</span>
<el-button
type="primary"
size="medium"
icon="el-icon-plus"
@click="handleAddChild(row)"
>
添加子项
</el-button>
</div>
<el-table
:data="row.children || []"
size="medium"
style="width: 100%; margin-top: 10px;"
v-loading="row.loading"
border
>
<el-table-column label="名称" prop="name">
<template slot-scope="{row: child}">
<span class="bold-text">{{ child.name }}</span>
</template>
</el-table-column>
<el-table-column label="类型" width="120">
<template slot-scope="{row: child}">
<el-tag
:type="child.type === 0 ? 'primary' : 'success'"
size="small"
>
{{ child.type === 0 ? '业务渠道' : '客户来源' }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="{row: child}">
<el-button
type="primary"
size="small"
icon="el-icon-edit"
@click="handleUpdate(child)"
>
编辑
</el-button>
<el-button
type="danger"
size="small"
icon="el-icon-delete"
@click="handleDelete(child)"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
</el-table-column>
<el-table v-if="refreshTable" v-loading="loading" :data="menuList" row-key="id" :default-expand-all="isExpandAll"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<el-table-column prop="name" label="名称" :show-overflow-tooltip="true" width="250"></el-table-column>
<el-table-column prop="type" label="类型" width="100">
<template v-slot="scope">
<span>
{{ scope.row.type === 0 ? '业务渠道' : scope.row.type === 1 ? '客户来源' : '未知类型' }}
</span>
</template>
</el-table-column>
<el-table-column prop="sort" label="排序" width="100">
<template v-slot="scope">
<el-input v-model="scope.row.sort" @change="updateSort(scope.row)"></el-input>
</template>
</el-table-column>
<el-table-column label="渠道名称" prop="name">
<template slot-scope="{row}">
<div class="tree-node-content">
<!-- 对于顶级业务渠道，添加拖拽手柄 -->
<span
class="drag-handle"
:draggable="true"
@dragstart="handleDragStart($event, row)"
@dragover="handleDragOver($event)"
@dragenter="handleDragEnter($event)"
@drop="handleDrop($event, row)"
@dragend="handleDragEnd"
>
<i class="el-icon-rank"></i>
</span>
<span class="bold-text">{{ row.name }}</span>
</div>
</template>
<template slot="header">
<span class="bold-header">渠道名称</span>
</template>
</el-table-column>
<el-table-column label="类型" width="120">
<template slot-scope="{row}">
<el-tag
:type="row.type === 0 ? 'primary' : 'success'"
size="small"
>
{{ row.type === 0 ? '业务渠道' : '客户来源' }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="{row}">
<el-button
type="primary"
size="small"
icon="el-icon-edit"
@click="handleUpdate(row)"
>
编辑
</el-button>
<el-button
type="danger"
size="small"
icon="el-icon-delete"
@click="handleDelete(row)"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template v-slot="scope">
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改
<!-- 分页 -->
<pagination
v-show="total>0"
:total="total"
:page.sync="listQuery.page"
:limit.sync="listQuery.limit"
@pagination="getList"
/>
</el-card>
<!-- 业务渠道对话框 -->
<el-dialog
:title="dialogTitle"
:visible.sync="dialogVisible"
width="500px"
>
<el-form
ref="form"
:rules="rules"
:model="form"
label-position="left"
label-width="80px"
style="width: 400px; margin-left:50px;"
>
<el-form-item label="名称" prop="name">
<el-input v-model="form.name" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">
取消
</el-button>
<el-button size="mini" v-if="scope.row.pid == 0" type="text" icon="el-icon-plus"
@click="handleAdd(scope.row)">新增
<el-button type="primary" @click="save">
确认
</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</el-dialog>
</div>
</template>
<!-- 添加或修改菜单对话框 -->
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-row>
<el-col :span="12">
<el-form-item label="名称" prop="name">
<el-input v-model="form.name" placeholder="请输入名称"/>
</el-form-item>
</el-col>
<!-- <el-col :span="12" v-if="form.pid != 0">-->
<!-- <el-form-item label="人员" prop="postId">-->
<!-- <el-select multiple filterable v-model="form.userIdList" placeholder="请选择人员">-->
<!-- <el-option v-for="item in staffList" :key="item.id" :label="item.nickname" :value="item.id"/>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import Pagination from '@/components/Pagination'
import {
listBusiness,
getBusiness,
addBusiness,
updateBusiness,
delBusiness
} from './api'
import { getLastPathSegment } from "@/utils/ruoyi"
<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import IconSelect from "@/components/IconSelect";
import {getDictDatas, DICT_TYPE} from '@/utils/dict'
import {
addBusiness,
delBusiness,
getBusiness,
listBusiness,
updateBusiness
} from "@/views/company/businessChannel/api";
import {listUser} from "@/views/inspection/staff/api/staff";
import {getLastPathSegment} from "@/utils/ruoyi";
export default {
name: "BusinessChannel",
components: {Treeselect, IconSelect},
data() {
return {
// 遮罩层
loading: true,
// 显示搜索条件
showSearch: true,
// 菜单表格树数据
menuList: [],
staffList: [],
// 菜单树选项
menuOptions: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 是否展开，默认全部折叠
isExpandAll: false,
// 重新渲染表格状态
refreshTable: true,
// 查询参数
queryParams: {
name: undefined,
visible: undefined,
systemCode: undefined
},
// 表单参数
form: {},
// 表单校验
rules: {
},
// 数据字典
menuTypeDictDatas: getDictDatas(DICT_TYPE.SYSTEM_MENU_TYPE),
statusDictDatas: getDictDatas("ins_business")
};
},
created() {
const servicePackageId = getLastPathSegment(this.$route.path); // 默认为最后一段
console.log('服务套餐', servicePackageId)
this.queryParams.systemCode = servicePackageId;
this.getList();
this.getStaff();
},
methods: {
// 选择图标
selected(name) {
this.form.icon = name;
},
/** 查询菜单列表 */
getList() {
this.loading = true;
listBusiness(this.queryParams).then(response => {
this.menuList = this.handleTree(response.data, "id", "pid");
this.loading = false;
});
},
getStaff() {
const params = {
pageNo: 1,
pageSize: 99999
export default {
name: 'BusinessChannel',
components: { Pagination },
filters: {
parseTime(time) {
if (!time) return ''
return new Date(time).toLocaleString()
}
listUser(params).then(response => {
this.staffList = response.data.records;
});
},
/** 转换菜单数据结构 */
normalizer(node) {
if (node.children && !node.children.length) {
delete node.children;
}
data() {
return {
id: node.id,
label: node.name,
children: node.children
};
},
/** 查询菜单下拉树结构 */
getTreeselect() {
listBusiness().then(response => {
this.menuOptions = [];
const menu = {id: 0, name: '主类目', children: []};
if (!Array.isArray(response.data)) {
console.warn("handleTree error: data 不是数组", response.data);
return;
}
if (response.data.length === 0) {
console.warn("handleTree warning: data 是空数组");
return;
}
// data 合法，继续处理
debugger
menu.children = this.handleTree(response.data, "id", 'pid');
this.menuOptions.push(menu);
});
},
// 修改排序
updateSort(data) {
updateBusiness(data).then(response => {
this.$modal.msgSuccess("修改成功");
this.getList();
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
id: undefined,
pid: 0,
name: undefined,
type: undefined,
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
/** 展开/折叠操作 */
toggleExpandAll() {
this.refreshTable = false;
this.isExpandAll = !this.isExpandAll;
this.$nextTick(() => {
this.refreshTable = true;
});
},
/** 新增按钮操作 */
handleAdd(row) {
this.reset();
this.getTreeselect();
if (row != null && row.id) {
this.form.pid = row.id;
this.form.type = 1;
this.title = "添加客户来源";
} else {
this.form.pid = 0;
this.form.type = 0;
this.title = "添加业务渠道";
// 列表数据
list: [],
menuList: [],
total: 0,
listQuery: {
page: 1,
limit: 20,
name: undefined,
systemCode: undefined
},
// 展开行
expandedRows: [],
// 表单数据
form: {
id: undefined,
pid: 0,
name: '',
type: 0
},
// 对话框状态
dialogVisible: false,
dialogTitle: '',
refreshing: false,
loading: false,
// 表单验证规则
rules: {
name: [{ required: true, message: '名称不能为空', trigger: 'blur' }]
},
// 拖拽相关
dragNode: null,
dragState: 'normal',
dragTargetNode: null
}
this.open = true;
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
this.getTreeselect();
getBusiness(row.id).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改";
});
created() {
const servicePackageId = getLastPathSegment(this.$route.path);
this.listQuery.systemCode = servicePackageId;
this.getList()
},
/** 提交按钮 */
submitForm: function () {
this.$refs["form"].validate(valid => {
this.form.systemCode = this.queryParams.systemCode;
if (valid) {
// 提交
if (this.form.id !== undefined) {
updateBusiness(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addBusiness(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
methods: {
// 获取数据列表
async getList() {
this.loading = true
try {
const response = await listBusiness(this.listQuery)
this.menuList = this.handleTree(response.data, "id", "pid")
this.total = response.data.length || 0
console.log('menuList:', this.menuList);
// 确保所有展开行都被关闭
this.expandedRows = []
} catch (error) {
console.error('获取列表失败:', error)
} finally {
this.loading = false
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
this.$modal.confirm('是否确认删除名称为"' + row.name + '"的数据项?').then(function () {
return delBusiness(row.id);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {
});
},
// // 处理树形结构
// handleTree(data, id, parentId, children) {
// const result = [];
// const hash = {};
// const len = data.length;
// for (let i = 0; i < len; i++) {
// hash[data[i][id]] = data[i];
// }
// for (let i = 0; i < len; i++) {
// const parent = hash[data[i][parentId]];
// if (parent) {
// !parent[children] && (parent[children] = []);
// parent[children].push(data[i]);
// } else {
// result.push(data[i]);
// }
// }
// return result;
// },
// 展开/折叠事件处理
handleExpandChange(row, expandedRows) {
// 可以在这里添加加载子项的逻辑
},
// 搜索
handleFilter() {
this.listQuery.page = 1
// 关闭所有展开行
this.expandedRows = []
this.getList()
},
// 刷新
async handleRefresh() {
this.refreshing = true
try {
await this.getList()
this.$message.success('刷新成功')
} catch (error) {
console.error('刷新失败:', error)
} finally {
this.refreshing = false
}
},
// 新增业务渠道
handleAdd() {
this.form = {
id: undefined,
pid: 0,
name: '',
type: 0
}
this.dialogTitle = '新增业务渠道'
this.dialogVisible = true
this.$nextTick(() => {
this.$refs.form?.clearValidate()
})
},
// 新增子项
handleAddChild(row) {
this.form = {
id: undefined,
pid: row.id,
name: '',
type: 1
}
this.dialogTitle = '添加子项'
this.dialogVisible = true
this.$nextTick(() => {
this.$refs.form?.clearValidate()
})
},
// 编辑
handleUpdate(row) {
this.form = { ...row }
this.dialogTitle = '编辑'
this.dialogVisible = true
this.$nextTick(() => {
this.$refs.form?.clearValidate()
})
},
// 保存
async save() {
this.$refs.form.validate(async(valid) => {
if (valid) {
try {
this.form.systemCode = this.listQuery.systemCode;
if (this.form.id) {
await updateBusiness(this.form)
} else {
await addBusiness(this.form)
}
this.dialogVisible = false
this.$message.success('保存成功')
this.getList()
} catch (error) {
console.error('保存失败:', error)
}
}
})
},
// 删除
async handleDelete(row) {
this.$confirm(`确定要删除"${row.name}"吗?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(async() => {
try {
await delBusiness(row.id)
this.$message.success('删除成功!')
this.getList()
} catch (error) {
console.error('删除失败:', error)
}
}).catch(() => {})
},
// 处理拖拽开始
handleDragStart(event, row) {
// 保存被拖拽的节点信息
this.dragNode = row
this.dragState = 'dragging'
// 设置拖拽数据
event.dataTransfer.setData('application/json', JSON.stringify(row))
// 设置拖拽效果
event.dataTransfer.effectAllowed = 'move'
// 添加拖动中的样式
setTimeout(() => {
if (event.target) {
event.target.classList.add('dragging')
}
}, 0)
},
// 处理拖拽结束
handleDragEnd(event) {
// 移除拖动中的样式
if (event.target) {
event.target.classList.remove('dragging')
}
// 重置拖拽状态
setTimeout(() => {
this.dragNode = null
this.dragTargetNode = null
this.dragState = 'normal'
}, 300)
},
// 处理拖拽放置
handleDrop(event, targetRow) {
// 防止默认行为和冒泡
event.preventDefault()
event.stopPropagation()
// 确保只处理顶级节点间的拖拽（pid === 0）
if (targetRow.pid !== 0 || !this.dragNode || this.dragNode.id === targetRow.id) {
return
}
try {
this.dragTargetNode = targetRow
// 获取拖拽节点和目标节点在数组中的位置
const dragIndex = this.menuList.findIndex(item => item.id === this.dragNode.id)
const targetIndex = this.menuList.findIndex(item => item.id === targetRow.id)
if (dragIndex === -1 || targetIndex === -1) return
// 重新排序数据
const newList = [...this.menuList]
newList.splice(dragIndex, 1)
newList.splice(targetIndex, 0, this.dragNode)
// 更新排序值，使用10的倍数以便后续插入
const updateList = newList.map((item, index) => ({
id: item.id,
sort: (index + 1) * 10,
// 保留其他必要字段
pid: item.pid,
name: item.name,
type: item.type,
systemCode: this.listQuery.systemCode
}))
// 批量更新排序
this.batchUpdateSort(updateList)
this.dragState = 'success'
} catch (error) {
console.error('拖拽排序出错:', error)
this.dragState = 'error'
this.$message.error('排序失败，请重试')
}
},
// 处理拖拽经过事件
handleDragOver(event) {
event.preventDefault()
event.dataTransfer.dropEffect = 'move'
},
// 处理拖拽进入事件
handleDragEnter(event) {
event.preventDefault()
},
// 批量更新排序
batchUpdateSort(updateList) {
this.loading = true
const promises = updateList.map(item => updateBusiness(item))
Promise.all(promises)
.then(() => {
this.$message.success("排序更新成功")
this.getList()
})
.catch(error => {
console.error('批量更新排序失败:', error)
this.$message.error("排序更新失败")
this.getList()
})
.finally(() => {
// 确保在任何情况下都重置loading状态
this.loading = false
})
}
}
}
};
</script>
</script>
<style scoped>
.filter-container {
margin-bottom: 20px;
}
.filter-item {
margin-right: 10px;
}
/* 加粗样式 */
.bold-header {
font-weight: bold;
font-size: 14px;
color: black;
}
.bold-text {
font-weight: bold;
color: black;
}
/* 来源容器样式 */
.source-container {
padding: 10px;
background: #fafafa;
}
.source-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.source-title {
font-weight: bold;
color: #606266;
}
/* 树形节点内容 */
.tree-node-content {
display: flex;
align-items: center;
}
/* 拖拽样式 */
.drag-handle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
margin-right: 8px;
cursor: move;
color: #909399;
border-radius: 4px;
transition: all 0.3s;
user-select: none;
}
.drag-handle:hover {
background-color: #ecf5ff;
color: #409eff;
}
.drag-handle.dragging {
background-color: #409eff;
color: white;
opacity: 0.8;
}
/* 排序数字样式 */
.sort-number {
display: inline-block;
padding: 2px 8px;
background-color: #ecf5ff;
color: #409eff;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
}
.sub-sort-number {
display: inline-block;
padding: 2px 8px;
background-color: #f0f9eb;
color: #67c23a;
border-radius: 4px;
font-size: 12px;
}
/* 全局样式，确保表头也加粗 */
.el-table .bold-header {
font-weight: bold !important;
}
.el-table .bold-text {
font-weight: bold !important;
}
</style>

5
src/views/repair/staff/index.vue
View File

@ -121,11 +121,6 @@
<el-input v-model="form.mobile" placeholder="请输入手机号码" maxlength="11"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="邮箱" prop="email">
<el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">