html
复制代码
<template>
<div class="app-container">
<el-row :gutter="5">
<splitpanes :horizontal="this.$store.getters.device === 'mobile'" class="default-theme">
<!--服务类别分类数据-->
<pane size="16">
<el-card>
<div slot="header" class="clearfix">
<span>服务类别分类</span>
</div>
<div class="head-container">
<el-input v-model="tmpName" placeholder="请输入服务类别名称" clearable size="small" prefix-icon="el-icon-search" style="margin-bottom: 20px" />
</div>
<div class="head-container">
<el-tree :data="treeData" :props="defaultProps" :expand-on-click-node="false" class="serviceType"
:filter-node-method="filterNode" ref="tree" node-key="id" highlight-current default-expand-all @node-click="handleNodeClick">
<span class="custom_type_tree" slot-scope="{ node, treeData }">
<span>{{ node.label }}</span>
<span class="updates">
<el-link type="primary" @click="addServiceType(node, treeData)" v-hasPermi="['system:categoryType:add']">新增</el-link>
<el-link type="danger" @click="removeServiceType(node, treeData)" v-hasPermi="['system:categoryType:del']">删除</el-link>
</span>
</span>
</el-tree>
</div>
</el-card>
</pane>
<!--类别数据-->
<pane size="84">
<el-card>
<div slot="header" class="clearfix">
<span>{{ this.$route.meta.title }}列表</span>
</div>
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="75px">
<el-form-item label="模板名称" prop="mb_title">
<el-input v-model="queryParams.mb_title" placeholder="请输入模板名称" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="模板状态" prop="mb_zhuangTai">
<el-select v-model="queryParams.mb_zhuangTai" placeholder="模板状态" clearable style="width: 240px">
<el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
<el-form-item label="创建时间">
<el-date-picker v-model="dateRange" value-format="yyyy-MM-dd" type="date" start-placeholder="创建时间"></el-date-picker>
</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>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5" v-hasPermi="['system:categoryType:add']">
<el-button type="info" plain icon="el-icon-plus" @click="() => addServiceTypeAll(treeData)" v-hasPermi="['system:categoryType:add']">新增服务类型</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="primary" plain icon="el-icon-plus" @click="handleFormAdd" v-hasPermi="['system:temp:add']">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success" plain icon="el-icon-edit" :disabled="single" @click="handleUpdate" v-hasPermi="['system:temp:edit']">修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain icon="el-icon-delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:temp:remove']">删除</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
</el-row>
<!-- v-loading="loading" -->
<el-table :data="mbDataList">
<el-table-column label="模板编号" width="80" key="mb_id" prop="mb_id" v-if="columns[0].visible" />
<el-table-column label="模板名称" width="200" key="mb_title" prop="mb_title" v-if="columns[1].visible" :show-overflow-tooltip="true" />
<el-table-column label="创建人" width="80" key="mb_createUser" prop="mb_createUser" v-if="columns[2].visible" :show-overflow-tooltip="true" />
<el-table-column label="模板所属模块" width="180" key="mb_suoShuMoKuai" prop="mb_suoShuMoKuai" v-if="columns[3].visible" />
<el-table-column label="模板状态" align="center" width="80" key="mb_zhuangTai" v-if="columns[4].visible">
<template slot-scope="scope">
<el-switch v-model="scope.row.mb_zhuangTai" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
</template>
</el-table-column>
<el-table-column label="模板类型" align="center" width="80" key="mb_leiXing" prop="mb_leiXing" v-if="columns[5].visible">
</el-table-column>
<el-table-column label="模板创建时间" prop="mb_createDateTime" v-if="columns[6].visible" width="150">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.mb_createDateTime) }}</span>
</template>
</el-table-column>
<el-table-column label="模板编辑时间" prop="mb_updateDateTime" v-if="columns[7].visible" width="150">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.mb_updateDateTime) }}</span>
</template>
</el-table-column>
<el-table-column label="模板描述" key="mb_miaoShu" prop="mb_miaoShu" v-if="columns[8].visible" :show-overflow-tooltip="true" />
<el-table-column label="操作" align="center" width="140" class-name="small-padding fixed-width">
<template slot-scope="scope" v-if="scope.row.userId !== 1">
<el-tooltip content="编辑" placement="top">
<el-button size="mini" class="el-icon-edit" type="success" @click="handleUpdate(scope.row)" v-hasPermi="['system:temp:edit']" />
</el-tooltip>
<el-tooltip content="删除" placement="top">
<el-button size="mini" class="el-icon-delete" type="danger" @click="handleDelete(scope.row)" v-hasPermi="['system:temp:remove']" />
</el-tooltip>
</template>
</el-table-column>
</el-table>
<pagination v-show="total > 15" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
</el-card>
</pane>
</splitpanes>
</el-row>
<!-- 添加或修改模板配置基础信息对话框 -->
<el-drawer :title="title" custom-class="drawerForm" :visible.sync="open" size="50%" append-to-body>
<el-form ref="form" class="drawer_form_body" :model="form" :rules="rules" label-width="120px">
<el-row>
<el-col :span="12">
<el-form-item label="模板名称" prop="mb_title">
<el-input v-model="form.mb_title" placeholder="请输入模板昵称" maxlength="30" />
</el-form-item>
</el-col>
<!-- 创建人自动获取创建当前登录人 -->
<el-col :span="12">
<el-form-item label="创建人" prop="mb_createUser">
<el-input v-model="form.mb_createUser" placeholder="请输入创建人" maxlength="10" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="所属模块" prop="mb_suoShuMoKuai">
<treeselect v-model="form.mb_suoShuMoKuai" :options="enabledTmpOptions" :show-count="true" placeholder="请选择所属模块" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="模板类型" prop="mb_leiXing">
<el-input v-model="form.mb_createUser" placeholder="请输入模板类型" maxlength="10" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="模板描述">
<el-input v-model="form.mb_miaoShu" type="textarea" placeholder="请输入内容"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="模板状态">
<el-radio-group v-model="form.mb_zhuangTai">
<el-radio v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="drawer_form_footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-drawer>
</div>
</template>
<script>
import { listUser, getUser, delUser, addUser, updateUser, resetUserPwd, changeUserStatus} from "@/api/system/user"
import { getToken } from "@/utils/auth"
import Treeselect from "@riophae/vue-treeselect"
import "@riophae/vue-treeselect/dist/vue-treeselect.css"
import { Splitpanes, Pane } from "splitpanes"
import "splitpanes/dist/splitpanes.css"
let id = 1000;
export default {
name: "User",
dicts: ['sys_normal_disable', 'sys_user_sex'],
components: { Treeselect, Splitpanes, Pane },
data() {
const treeData = [
{
id:1,label: '代账服务管理',
children: [
{id:111,label: '企业访客',},
{id:112,label: '企业组织架构',},
{id:113,label: '企业合同',},
{id:114,label: '回款管理',}
]
}, {
id:2,label: '工商服务',
children: [
{id:211,label: '企业访客',},
{id:212,label: '企业组织架构',},
{id:213,label: '企业合同',},
{id:214,label: '回款管理',}
]
},{
id:3,label: '生产许可管理',
children: [
{id:33331,label: '企业访客',},
{id:33332,label: '企业组织架构',},
{id:33333,label: '企业合同',},
{id:33334,label: '回款管理',}
]
},
{
id:4,label: '企业管理',
children: [
{id:44441,label: '企业访客',},
{id:44442,label: '企业组织架构',},
{id:44443,label: '企业合同',},
{id:44444,label: '回款管理',}
]
}
];
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 模板表格数据
// mbDataList: null,
mbDataList:[
{
mb_id:'mb0001',
mb_title: '企业管理',
mb_createUser:"孙建林",
mb_suoShuMoKuai:"生产许可管理",
mb_zhuangTai:"启用",
mb_leiXing:"电脑版",
mb_createDateTime:"2025-9-11 11:06:12",
mb_updateDateTime:"2025-9-14 21:06:46",
mb_miaoShu:"知识产权客户管理",
},
{
mb_id:'mb0001',
mb_title: '生产许可管理',
mb_createUser:"张小梅",
mb_suoShuMoKuai:"生产许可管理",
mb_zhuangTai:"启用",
mb_leiXing:"电脑版",
mb_createDateTime:"2025-9-11 11:06:12",
mb_updateDateTime:"2025-9-14 21:06:46",
mb_miaoShu:"知识产权客户管理",
},
],
// 弹出层表单标题
title: "",
// 所有部门树选项
typeTreeData: undefined,
// 过滤掉已禁用部门树选项
enabledTmpOptions: undefined,
// 是否显示弹出层
open: false,
// 是否显示创建模板设计弹出层
openTemp: false,
// 部门名称
tmpName: undefined,
// 默认密码
initPassword: undefined,
// 日期范围
dateRange: [],
// 岗位选项
postOptions: [],
// 角色选项
roleOptions: [],
// 表单参数
form: {},
treeData: JSON.parse(JSON.stringify(treeData)),
defaultProps: {
children: "children",
label: "label"
},
// 模板导入参数
upload: {
// 是否显示弹出层（模板导入）
open: false,
// 弹出层标题（模板导入）
title: "",
// 是否禁用上传
isUploading: false,
// 是否更新已经存在的模板数据
updateSupport: 0,
// 设置上传的请求头部
headers: { Authorization: "Bearer " + getToken() },
// 上传的地址
url: process.env.VUE_APP_BASE_API + "/system/user/importData"
},
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 15,
mb_title: undefined,
mb_zhuangTai: undefined,
tmpId: undefined,
mb_createDateTime: undefined,
},
// 列信息
columns: [
{ key: 0, label: `模板编号`, visible: true },
{ key: 1, label: `模板名称`, visible: true },
{ key: 2, label: `创建人`, visible: true },
{ key: 3, label: `模板所属模块`, visible: true },
{ key: 4, label: `模板状态`, visible: true },
{ key: 5, label: `模板类型`, visible: true },
{ key: 6, label: `模板创建日期时间`, visible: false },
{ key: 7, label: `模板编辑日期时间`, visible: false },
{ key: 8, label: `模板描述`, visible: true },
],
// 表单校验
rules: {
mb_title: [
{ required: true, message: "模板名称不能为空", trigger: "blur" },
{ min: 2, max: 20, message: '模板名称长度必须介于 2 和 20 之间', trigger: 'blur' },
{pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" },
],
mb_createUser:[
{ pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" }
],
mb_suoShuMoKuai:[
{ pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" }
],
mb_zhuangTai:[
{ pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" }
],
mb_leiXing:[
{ pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" }
],
mb_miaoShu:[
{ pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" }
],
}
}
},
watch: {
// 根据名称筛选部门树
tmpName(val) {
this.$refs.tree.filter(val)
}
},
created() {
this.getList()
this.getTmpTree()
this.getConfigKey("sys.user.initPassword").then(response => {
this.initPassword = response.msg
})
},
methods: {
/** 查询模板列表 */
getList() {
this.loading = true
listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
// this.mbDataList = response.rows
// this.total = response.total
// this.loading = false
}
)
},
/** 查询模板下拉树结构 */
getTmpTree() {
// tmpTreeSelect().then(response => {
// this.tempTreeData = response.data
// this.enabledTmpOptions = this.filterDisabledTmp(JSON.parse(JSON.stringify(response.data)))
// })
},
// 过滤禁用的部门
filterDisabledTmp(tmpList) {
return tmpList.filter(tmp => {
if (tmp.disabled) {
return false
}
if (tmp.children && tmp.children.length) {
tmp.children = this.filterDisabledTmp(tmp.children)
}
return true
})
},
// 筛选节点
filterNode(value, typeTreeData) {
if (!value) return true
return typeTreeData.label.indexOf(value) !== -1
},
addServiceTypeAll(treeData) {
const newChild = { id: id++, label: '新增服务类别', children: [] };
treeData.push(newChild);
},
addServiceType(node,treeData) {
const newChild = { id: id++, label: '新增类别节点', children: [] };
const parent = node.parent;
const children = parent.data.children || parent.data;
children.push(newChild);
},
removeServiceType(node, treeData) {
const parent = node.parent;
const children = parent.data.children || parent.data;
const index = children.findIndex(d => d.id === node.data.id);
children.splice(index, 1);
},
// 节点单击事件
handleNodeClick(typeTreeData) {
this.queryParams.tmpId = typeTreeData.id
this.handleQuery()
},
// 服务类型状态修改
handleStatusChange(row) {
let text = row.mb_zhuangTai === "0" ? "启用" : "停用"
this.$modal.confirm('确认要"' + text + '""' + row.mb_title + '"模板吗？').then(function() {
return changeUserStatus(row.userId, row.mb_zhuangTai)
}).then(() => {
this.$modal.msgSuccess(text + "成功")
}).catch(function() {
row.mb_zhuangTai = row.mb_zhuangTai === "0" ? "1" : "0"
})
},
// 取消按钮
cancel() {
this.open = false
this.reset()
},
// 表单重置
reset() {
this.form = {
mb_id:undefined,
mb_title:undefined,
mb_createUser:undefined,
mb_suoShuMoKuai:undefined,
mb_zhuangTai: "0",
mb_leiXing:undefined,
mb_createDateTime:undefined,
mb_updateDateTime:undefined,
mb_miaoShu:undefined,
}
this.resetForm("form")
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1
this.getList()
},
/** 重置按钮操作 */
resetQuery() {
this.dateRange = []
this.resetForm("queryForm")
this.queryParams.tmpId = undefined
this.$refs.tree.setCurrentKey(null)
this.handleQuery()
},
/** 新增模板按钮操作*/
handleFormAdd() {
this.reset()
this.open = true
this.title = "添加基础模板"
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset()
const userId = row.userId || this.ids
getUser(userId).then(response => {
this.open = true
this.title = "修改模板"
this.form.password = ""
})
},
/** 提交按钮 */
submitForm: function() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.userId != undefined) {
updateUser(this.form).then(response => {
this.$modal.msgSuccess("修改成功")
this.open = false
this.getList()
})
} else {
addUser(this.form).then(response => {
this.$modal.msgSuccess("新增成功")
this.open = false
this.getList()
})
}
}
})
},
/** 删除按钮操作 */
handleDelete(row) {
const userIds = row.userId || this.ids
this.$modal.confirm('是否确认删除模板编号为"' + userIds + '"的数据项？').then(function() {
return delUser(userIds)
}).then(() => {
this.getList()
this.$modal.msgSuccess("删除成功")
}).catch(() => {})
},
}
}
</script>