更新
This commit is contained in:
xuyuncong
parent
c91ebc3135
commit
8d0b878eec
@ -1,296 +1,627 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="app-container">
|
<div class="app-container">
|
||||||
<doc-alert title="功能权限" url="https://doc.iocoder.cn/resource-permission"/>
|
<el-card>
|
||||||
<doc-alert title="菜单路由" url="https://doc.iocoder.cn/vue2/route/"/>
|
<!-- 搜索区域 -->
|
||||||
<!-- 搜索工作栏 -->
|
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
|
<div class="filter-container">
|
||||||
<el-form-item label="菜单名称" prop="name">
|
<el-input
|
||||||
<el-input v-model="queryParams.name" placeholder="请输入菜单名称" clearable @keyup.enter.native="handleQuery"/>
|
v-model="listQuery.name"
|
||||||
</el-form-item>
|
placeholder="业务渠道名称"
|
||||||
<el-form-item>
|
style="width: 200px;"
|
||||||
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
class="filter-item"
|
||||||
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
@keyup.enter.native="handleFilter"
|
||||||
</el-form-item>
|
/>
|
||||||
</el-form>
|
<el-button
|
||||||
|
class="filter-item"
|
||||||
<el-row :gutter="10" class="mb8">
|
type="primary"
|
||||||
<el-col :span="1.5">
|
icon="el-icon-search"
|
||||||
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增
|
@click="handleFilter"
|
||||||
|
>
|
||||||
|
搜索
|
||||||
</el-button>
|
</el-button>
|
||||||
</el-col>
|
<el-button
|
||||||
<el-col :span="1.5">
|
class="filter-item"
|
||||||
<el-button type="info" plain icon="el-icon-sort" size="mini" @click="toggleExpandAll">展开/折叠</el-button>
|
style="margin-left: 10px;"
|
||||||
</el-col>
|
type="primary"
|
||||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
icon="el-icon-plus"
|
||||||
</el-row>
|
@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-table v-if="refreshTable" v-loading="loading" :data="menuList" row-key="id" :default-expand-all="isExpandAll"
|
<!-- 表格 -->
|
||||||
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
|
<el-table
|
||||||
<el-table-column prop="name" label="名称" :show-overflow-tooltip="true" width="250"></el-table-column>
|
:data="menuList"
|
||||||
<el-table-column prop="type" label="类型" width="100">
|
border
|
||||||
<template v-slot="scope">
|
fit
|
||||||
<span>
|
highlight-current-row
|
||||||
{{ scope.row.type === 0 ? '业务渠道' : scope.row.type === 1 ? '客户来源' : '未知类型' }}
|
style="width: 100%; margin-top: 20px;"
|
||||||
</span>
|
: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>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="sort" label="排序" width="100">
|
<el-table-column label="类型" width="120">
|
||||||
<template v-slot="scope">
|
<template slot-scope="{row: child}">
|
||||||
<el-input v-model="scope.row.sort" @change="updateSort(scope.row)"></el-input>
|
<el-tag
|
||||||
|
:type="child.type === 0 ? 'primary' : 'success'"
|
||||||
|
size="small"
|
||||||
|
>
|
||||||
|
{{ child.type === 0 ? '业务渠道' : '客户来源' }}
|
||||||
|
</el-tag>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
|
|
||||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||||
<template v-slot="scope">
|
<template slot-scope="{row: child}">
|
||||||
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
size="small"
|
||||||
|
icon="el-icon-edit"
|
||||||
|
@click="handleUpdate(child)"
|
||||||
|
>
|
||||||
|
编辑
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-button size="mini" v-if="scope.row.pid == 0" type="text" icon="el-icon-plus"
|
<el-button
|
||||||
@click="handleAdd(scope.row)">新增
|
type="danger"
|
||||||
|
size="small"
|
||||||
|
icon="el-icon-delete"
|
||||||
|
@click="handleDelete(child)"
|
||||||
|
>
|
||||||
|
删除
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
</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>
|
</el-button>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
|
|
||||||
<!-- 添加或修改菜单对话框 -->
|
<!-- 分页 -->
|
||||||
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
|
<pagination
|
||||||
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
v-show="total>0"
|
||||||
<el-row>
|
:total="total"
|
||||||
<el-col :span="12">
|
: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-form-item label="名称" prop="name">
|
||||||
<el-input v-model="form.name" placeholder="请输入名称"/>
|
<el-input v-model="form.name" />
|
||||||
</el-form-item>
|
</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>
|
</el-form>
|
||||||
<div slot="footer" class="dialog-footer">
|
<div slot="footer" class="dialog-footer">
|
||||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
<el-button @click="dialogVisible = false">
|
||||||
<el-button @click="cancel">取 消</el-button>
|
取消
|
||||||
|
</el-button>
|
||||||
|
<el-button type="primary" @click="save">
|
||||||
|
确认
|
||||||
|
</el-button>
|
||||||
</div>
|
</div>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Treeselect from "@riophae/vue-treeselect";
|
import Pagination from '@/components/Pagination'
|
||||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
|
||||||
import IconSelect from "@/components/IconSelect";
|
|
||||||
|
|
||||||
import {getDictDatas, DICT_TYPE} from '@/utils/dict'
|
|
||||||
import {
|
import {
|
||||||
addBusiness,
|
|
||||||
delBusiness,
|
|
||||||
getBusiness,
|
|
||||||
listBusiness,
|
listBusiness,
|
||||||
updateBusiness
|
getBusiness,
|
||||||
} from "@/views/company/businessChannel/api";
|
addBusiness,
|
||||||
import {listUser} from "@/views/inspection/staff/api/staff";
|
updateBusiness,
|
||||||
import {getLastPathSegment} from "@/utils/ruoyi";
|
delBusiness
|
||||||
|
} from './api'
|
||||||
|
import { getLastPathSegment } from "@/utils/ruoyi"
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "BusinessChannel",
|
name: 'BusinessChannel',
|
||||||
components: {Treeselect, IconSelect},
|
components: { Pagination },
|
||||||
|
filters: {
|
||||||
|
parseTime(time) {
|
||||||
|
if (!time) return ''
|
||||||
|
return new Date(time).toLocaleString()
|
||||||
|
}
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
// 遮罩层
|
// 列表数据
|
||||||
loading: true,
|
list: [],
|
||||||
// 显示搜索条件
|
|
||||||
showSearch: true,
|
|
||||||
// 菜单表格树数据
|
|
||||||
menuList: [],
|
menuList: [],
|
||||||
staffList: [],
|
total: 0,
|
||||||
// 菜单树选项
|
listQuery: {
|
||||||
menuOptions: [],
|
page: 1,
|
||||||
// 弹出层标题
|
limit: 20,
|
||||||
title: "",
|
|
||||||
// 是否显示弹出层
|
|
||||||
open: false,
|
|
||||||
// 是否展开，默认全部折叠
|
|
||||||
isExpandAll: false,
|
|
||||||
// 重新渲染表格状态
|
|
||||||
refreshTable: true,
|
|
||||||
// 查询参数
|
|
||||||
queryParams: {
|
|
||||||
name: undefined,
|
name: undefined,
|
||||||
visible: undefined,
|
|
||||||
systemCode: undefined
|
systemCode: undefined
|
||||||
},
|
},
|
||||||
// 表单参数
|
// 展开行
|
||||||
form: {},
|
expandedRows: [],
|
||||||
// 表单校验
|
// 表单数据
|
||||||
rules: {
|
form: {
|
||||||
|
id: undefined,
|
||||||
|
pid: 0,
|
||||||
|
name: '',
|
||||||
|
type: 0
|
||||||
},
|
},
|
||||||
// 数据字典
|
// 对话框状态
|
||||||
menuTypeDictDatas: getDictDatas(DICT_TYPE.SYSTEM_MENU_TYPE),
|
dialogVisible: false,
|
||||||
statusDictDatas: getDictDatas("ins_business")
|
dialogTitle: '',
|
||||||
};
|
refreshing: false,
|
||||||
|
loading: false,
|
||||||
|
// 表单验证规则
|
||||||
|
rules: {
|
||||||
|
name: [{ required: true, message: '名称不能为空', trigger: 'blur' }]
|
||||||
|
},
|
||||||
|
// 拖拽相关
|
||||||
|
dragNode: null,
|
||||||
|
dragState: 'normal',
|
||||||
|
dragTargetNode: null
|
||||||
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
const servicePackageId = getLastPathSegment(this.$route.path); // 默认为最后一段
|
const servicePackageId = getLastPathSegment(this.$route.path);
|
||||||
console.log('服务套餐', servicePackageId)
|
this.listQuery.systemCode = servicePackageId;
|
||||||
this.queryParams.systemCode = servicePackageId;
|
this.getList()
|
||||||
this.getList();
|
|
||||||
this.getStaff();
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 选择图标
|
// 获取数据列表
|
||||||
selected(name) {
|
async getList() {
|
||||||
this.form.icon = name;
|
this.loading = true
|
||||||
},
|
try {
|
||||||
/** 查询菜单列表 */
|
const response = await listBusiness(this.listQuery)
|
||||||
getList() {
|
this.menuList = this.handleTree(response.data, "id", "pid")
|
||||||
this.loading = true;
|
this.total = response.data.length || 0
|
||||||
listBusiness(this.queryParams).then(response => {
|
console.log('menuList:', this.menuList);
|
||||||
this.menuList = this.handleTree(response.data, "id", "pid");
|
|
||||||
this.loading = false;
|
|
||||||
});
|
|
||||||
},
|
|
||||||
getStaff() {
|
|
||||||
const params = {
|
|
||||||
pageNo: 1,
|
|
||||||
pageSize: 99999
|
|
||||||
}
|
|
||||||
listUser(params).then(response => {
|
|
||||||
this.staffList = response.data.records;
|
|
||||||
});
|
|
||||||
},
|
|
||||||
/** 转换菜单数据结构 */
|
|
||||||
normalizer(node) {
|
|
||||||
if (node.children && !node.children.length) {
|
|
||||||
delete node.children;
|
|
||||||
}
|
|
||||||
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 是空数组");
|
this.expandedRows = []
|
||||||
return;
|
} catch (error) {
|
||||||
|
console.error('获取列表失败:', error)
|
||||||
|
} finally {
|
||||||
|
this.loading = false
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
|
||||||
// data 合法，继续处理
|
// // 处理树形结构
|
||||||
debugger
|
// handleTree(data, id, parentId, children) {
|
||||||
menu.children = this.handleTree(response.data, "id", 'pid');
|
// const result = [];
|
||||||
this.menuOptions.push(menu);
|
// 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) {
|
||||||
|
// 可以在这里添加加载子项的逻辑
|
||||||
},
|
},
|
||||||
// 修改排序
|
|
||||||
updateSort(data) {
|
// 搜索
|
||||||
updateBusiness(data).then(response => {
|
handleFilter() {
|
||||||
this.$modal.msgSuccess("修改成功");
|
this.listQuery.page = 1
|
||||||
this.getList();
|
// 关闭所有展开行
|
||||||
});
|
this.expandedRows = []
|
||||||
|
this.getList()
|
||||||
},
|
},
|
||||||
// 取消按钮
|
|
||||||
cancel() {
|
// 刷新
|
||||||
this.open = false;
|
async handleRefresh() {
|
||||||
this.reset();
|
this.refreshing = true
|
||||||
|
try {
|
||||||
|
await this.getList()
|
||||||
|
this.$message.success('刷新成功')
|
||||||
|
} catch (error) {
|
||||||
|
console.error('刷新失败:', error)
|
||||||
|
} finally {
|
||||||
|
this.refreshing = false
|
||||||
|
}
|
||||||
},
|
},
|
||||||
// 表单重置
|
|
||||||
reset() {
|
// 新增业务渠道
|
||||||
|
handleAdd() {
|
||||||
this.form = {
|
this.form = {
|
||||||
id: undefined,
|
id: undefined,
|
||||||
pid: 0,
|
pid: 0,
|
||||||
name: undefined,
|
name: '',
|
||||||
type: undefined,
|
type: 0
|
||||||
};
|
}
|
||||||
this.resetForm("form");
|
this.dialogTitle = '新增业务渠道'
|
||||||
},
|
this.dialogVisible = true
|
||||||
/** 搜索按钮操作 */
|
|
||||||
handleQuery() {
|
|
||||||
this.getList();
|
|
||||||
},
|
|
||||||
/** 重置按钮操作 */
|
|
||||||
resetQuery() {
|
|
||||||
this.resetForm("queryForm");
|
|
||||||
this.handleQuery();
|
|
||||||
},
|
|
||||||
/** 展开/折叠操作 */
|
|
||||||
toggleExpandAll() {
|
|
||||||
this.refreshTable = false;
|
|
||||||
this.isExpandAll = !this.isExpandAll;
|
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.refreshTable = true;
|
this.$refs.form?.clearValidate()
|
||||||
});
|
})
|
||||||
},
|
},
|
||||||
/** 新增按钮操作 */
|
|
||||||
handleAdd(row) {
|
// 新增子项
|
||||||
this.reset();
|
handleAddChild(row) {
|
||||||
this.getTreeselect();
|
this.form = {
|
||||||
if (row != null && row.id) {
|
id: undefined,
|
||||||
this.form.pid = row.id;
|
pid: row.id,
|
||||||
this.form.type = 1;
|
name: '',
|
||||||
this.title = "添加客户来源";
|
type: 1
|
||||||
} else {
|
|
||||||
this.form.pid = 0;
|
|
||||||
this.form.type = 0;
|
|
||||||
this.title = "添加业务渠道";
|
|
||||||
}
|
}
|
||||||
this.open = true;
|
this.dialogTitle = '添加子项'
|
||||||
|
this.dialogVisible = true
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.form?.clearValidate()
|
||||||
|
})
|
||||||
},
|
},
|
||||||
/** 修改按钮操作 */
|
|
||||||
|
// 编辑
|
||||||
handleUpdate(row) {
|
handleUpdate(row) {
|
||||||
this.reset();
|
this.form = { ...row }
|
||||||
this.getTreeselect();
|
this.dialogTitle = '编辑'
|
||||||
getBusiness(row.id).then(response => {
|
this.dialogVisible = true
|
||||||
this.form = response.data;
|
this.$nextTick(() => {
|
||||||
this.open = true;
|
this.$refs.form?.clearValidate()
|
||||||
this.title = "修改";
|
})
|
||||||
});
|
|
||||||
},
|
},
|
||||||
/** 提交按钮 */
|
|
||||||
submitForm: function () {
|
// 保存
|
||||||
this.$refs["form"].validate(valid => {
|
async save() {
|
||||||
this.form.systemCode = this.queryParams.systemCode;
|
this.$refs.form.validate(async(valid) => {
|
||||||
if (valid) {
|
if (valid) {
|
||||||
// 提交
|
try {
|
||||||
if (this.form.id !== undefined) {
|
this.form.systemCode = this.listQuery.systemCode;
|
||||||
updateBusiness(this.form).then(response => {
|
if (this.form.id) {
|
||||||
this.$modal.msgSuccess("修改成功");
|
await updateBusiness(this.form)
|
||||||
this.open = false;
|
|
||||||
this.getList();
|
|
||||||
});
|
|
||||||
} else {
|
} else {
|
||||||
addBusiness(this.form).then(response => {
|
await addBusiness(this.form)
|
||||||
this.$modal.msgSuccess("新增成功");
|
}
|
||||||
this.open = false;
|
this.dialogVisible = false
|
||||||
this.getList();
|
this.$message.success('保存成功')
|
||||||
});
|
this.getList()
|
||||||
|
} catch (error) {
|
||||||
|
console.error('保存失败:', error)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
},
|
},
|
||||||
/** 删除按钮操作 */
|
|
||||||
handleDelete(row) {
|
// 删除
|
||||||
this.$modal.confirm('是否确认删除名称为"' + row.name + '"的数据项?').then(function () {
|
async handleDelete(row) {
|
||||||
return delBusiness(row.id);
|
this.$confirm(`确定要删除"${row.name}"吗?`, '提示', {
|
||||||
}).then(() => {
|
confirmButtonText: '确定',
|
||||||
this.getList();
|
cancelButtonText: '取消',
|
||||||
this.$modal.msgSuccess("删除成功");
|
type: 'warning'
|
||||||
}).catch(() => {
|
}).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>
|
||||||
|
|||||||
@ -121,11 +121,6 @@
|
|||||||
<el-input v-model="form.mobile" placeholder="请输入手机号码" maxlength="11"/>
|
<el-input v-model="form.mobile" placeholder="请输入手机号码" maxlength="11"/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</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-row>
|
<el-row>
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user