html
复制代码
<template>
<div class="app-container user-manage">
<el-form
:model="queryParams"
ref="queryForm"
>
<el-row>
<el-form-item prop="name">
<el-col :span="24">
<el-input v-model="queryParams.name" placeholder="请输入搜索内容" @keyup.enter.native="getTree">
<i slot="suffix" class="el-icon-search" @click="getTree" style="width:30px;color: #1c84c6"></i>
</el-input>
</el-col>
</el-form-item>
</el-row>
<el-row style="height: 100%">
<el-tree
:data="tzLyLabelTree"
node-key="id"
ref="treeRef"
highlight-current
:props="defaultProps"
@node-click="treeNodeClick"
:expand-on-click-node="false"
default-expand-all
>
<span slot-scope="{ node, data }">
<span style="display: flex; justify-content: space-between;">
<span style="width: 200px">
{{ node.label }}
</span>
<el-dropdown @command="(command) => handleCommand(command, node)">
<span style="display: inline-block; color: #1c84c6">
<i class="el-icon-more" style="transform: rotate(90deg);"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="add">新增</el-dropdown-item>
<el-dropdown-item command="edit">修改</el-dropdown-item>
<el-dropdown-item command="remove">删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</span>
</span>
</el-tree>
</el-row>
</el-form>
<div class="user-panel">
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['tzly:tzLyLabel:add']"
>新增
</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['tzly:tzLyLabel:edit']"
>修改
</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['tzly:tzLyLabel:remove']"
>删除
</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-refresh"
size="mini"
@click="handleRefresh('manual')"
v-hasPermi="['tzly:tzLyLabel:list']"
>刷新
</el-button>
</el-col>
<!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>-->
</el-row>
<el-table v-loading="loading" :data="tzLyLabelList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center"/>
<el-table-column label="标签名称" align="center" prop="name"/>
<el-table-column label="共享设置" align="center" prop="isShare">
<template slot-scope="scope">
<dict-tag :options="dict.type.train_questionnaire_template_share" :value="scope.row.isShare"/>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['tzly:tzLyLabel:edit']"
>修改
</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['tzly:tzLyLabel:remove']"
>删除
</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</div>
<!-- 添加或修改标签库对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="标签名称" prop="name">
<el-input v-model="form.name" placeholder="请输入标签名称"/>
</el-form-item>
<el-form-item label="共享设置" prop="isShare">
<el-radio v-model="form.isShare" label="0">私有</el-radio>
<el-radio v-if="$auth.hasPermi('tzly:tzLyLabel:share')" v-model="form.isShare" label="1">共享</el-radio>
</el-form-item>
</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 {
listTzLyLabel,
treeTzLyLabel,
getTzLyLabel,
delTzLyLabel,
addTzLyLabel,
updateTzLyLabel
} from '@/api/tzly/tzLyLabel'
export default {
name: 'TzLyLabel',
dicts: ['train_questionnaire_template_share'],
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 标签库表格数据
tzLyLabelList: [],
// 弹出层标题
title: '',
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
parentId: '0',
name: null,
isShare: null,
createOrgId: null,
createOrgName: null,
createUser: null,
modifyUser: null,
modifyTime: null
},
// 表单参数
form: {},
// 表单校验
rules: {
name: [
{ required: true, message: '标签名称不能为空', trigger: 'blur' }
],
isShare: [
{ required: true, message: '共享设置不能为空', trigger: 'blur' }
]
},
tzLyLabelTree: [],
defaultProps: {
children: 'children',
label: 'name'
},
action: ''
}
},
created() {
this.getTree()
},
methods: {
// 更多操作触发
handleCommand(command, node) {
let row = node.data
this.action = 'left'
switch (command) {
case 'add':
this.treeNodeClick(row)
this.handleAdd()
break
case 'edit':
this.queryParams.parentId = '0'
this.handleUpdate(row)
break
case 'remove':
this.handleDelete(row)
break
default:
break
}
},
handleRefresh(action) {
//用户强制刷新
if (action === 'manual') {
this.$refs.treeRef.setCurrentKey(undefined)
this.queryParams.parentId = '0'
this.tzLyLabelList = []
}else {
//自动刷新
//左侧添加树
if (this.action === 'left') {
this.getTree()
this.$refs.treeRef.setCurrentKey(undefined)
this.queryParams.parentId = '0'
} else {
if (this.queryParams.parentId === '0') {
//右侧添加树
this.getTree()
this.$refs.treeRef.setCurrentKey(undefined)
this.queryParams.parentId = '0'
} else {
//右侧添加子节点
this.getList()
}
}
}
},
treeNodeClick(obj) {
this.queryParams.parentId = obj.id
this.$refs.treeRef.setCurrentKey(obj.id)
this.getList()
},
getTree() {
let that = this
this.loading = true
treeTzLyLabel(this.queryParams).then(response => {
that.tzLyLabelTree = []
this.$nextTick(() => {
that.tzLyLabelTree = response.data
})
this.loading = false
})
},
/** 查询标签库列表 */
getList() {
this.loading = true
listTzLyLabel(this.queryParams).then(response => {
this.tzLyLabelList = response.rows
this.total = response.total
this.loading = false
})
},
// 取消按钮
cancel() {
this.open = false
this.reset()
},
// 表单重置
reset() {
this.form = {
id: null,
parentId: null,
name: null,
isShare: null,
createOrgId: null,
createOrgName: null,
createUser: null,
createTime: null,
modifyUser: null,
modifyTime: null
}
this.resetForm('form')
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1
this.getList()
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm('queryForm')
this.handleQuery()
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length !== 1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset()
this.action = 'right'
this.open = true
this.title = '添加标签'
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset()
this.action = 'right'
const id = row.id || this.ids
getTzLyLabel(id).then(response => {
this.form = response.data
this.open = true
this.title = '修改标签'
})
},
/** 提交按钮 */
submitForm() {
this.$refs['form'].validate(valid => {
if (valid) {
this.form.parentId = this.queryParams.parentId
if (this.form.id != null) {
updateTzLyLabel(this.form).then(response => {
this.$modal.msgSuccess('修改成功')
this.handleRefresh('auto')
this.open = false
})
} else {
addTzLyLabel(this.form).then(response => {
this.$modal.msgSuccess('新增成功')
this.handleRefresh('auto')
this.open = false
})
}
}
})
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids
this.$modal.confirm('是否确认删除数据项？').then(function() {
return delTzLyLabel(ids)
}).then(() => {
this.getList()
this.$modal.msgSuccess('删除成功')
this.handleRefresh('auto')
}).catch(() => {
})
},
}
}
</script>
<style lang="scss">
.user-manage {
padding: 0 10px;
display: flex;
.el-tree {
width: 250px;
overflow: auto;
height: calc(100% - 70px);
border-right: 1px solid #dfdfdf;
::v-deep .el-tree-node {
width: 100%;
display: table;
& > .el-tree-node__children {
overflow: unset;
}
}
}
.user-panel {
width: calc(100% - 201px);
padding: 10px 0 10px 10px;
}
.yearnumremark {
text-align: center;
font-size: 18px;
margin: 10px;
color: red;
}
::v-deep .el-input__inner {
font-size: 16px !important;
}
}
::v-deep .el-textarea.is-disabled .el-textarea__inner {
color: black;
}
.topic span {
font-size: 16px;
font-weight: 700;
}
::v-deep .el-textarea.is-disabled .el-textarea__inner {
font-size: 16px;
font-weight: 700;
}
::v-deep .el-form-item__content {
font-size: 16px;
font-weight: 700;
}
.list-img {
float: left;
}
</style>
