<template>
|
<el-container>
|
<el-aside>
|
<basic-container>
|
<div ref="TreeBox" style="height: calc(100vh - 144px);!important;">
|
<div class="headerCon">
|
<el-button icon="el-icon-plus" plain size="small" type="primary" @click="addClickHandler">创建
|
</el-button>
|
<el-button icon="el-icon-edit" plain size="small" type="primary" @click="editClickHandler">修改
|
</el-button>
|
<el-button icon="el-icon-delete" plain size="small" type="danger" @click="delClickHandler">删除
|
</el-button>
|
<el-button icon="el-icon-download" plain size="small" type="primary" @click="exportClickHandler">导出
|
</el-button>
|
<el-button icon="el-icon-upload2" plain size="small" type="primary" @click="uploadClickHandler">导入
|
</el-button>
|
<el-button class="smallBtn" plain size="small" type="primary"
|
@click="checkViewClickHandler">查看使用范围
|
</el-button>
|
</div>
|
<!-- 左侧树 -->
|
<div style="height: calc(100vh - 300px);">
|
<avue-tree :data="treeData" :option="treeOption" @node-click="nodeClick">
|
<span slot-scope="{ node, data }" class="el-tree-node__label">
|
<span style="font-size: 15px">
|
<i class="el-icon-s-promotion"></i>
|
{{ (node || {}).label }}
|
</span>
|
</span>
|
</avue-tree>
|
</div>
|
</div>
|
</basic-container>
|
</el-aside>
|
|
<el-main>
|
<basic-container>
|
<el-descriptions :column="1" border class="margin-top" size="medium" title="属性信息">
|
<el-descriptions-item :contentStyle="descriptionOption.contentStyle"
|
:labelStyle="descriptionOption.labelStyle">
|
<template slot="label">
|
<i :class="icons.id"></i>
|
名称
|
</template>
|
<el-tag v-if="nodeRow.id">{{ nodeRow.id }}</el-tag>
|
</el-descriptions-item>
|
<el-descriptions-item :contentStyle="descriptionOption.contentStyle"
|
:labelStyle="descriptionOption.labelStyle">
|
<template slot="label">
|
<i :class="icons.name"></i>
|
标签
|
</template>
|
<el-tag v-if="nodeRow.name">{{ nodeRow.name }}</el-tag>
|
</el-descriptions-item>
|
<el-descriptions-item :contentStyle="descriptionOption.contentStyle"
|
:labelStyle="descriptionOption.labelStyle">
|
<template slot="label">
|
<i :class="icons.jump"></i>
|
跳跃字符
|
</template>
|
<el-tag v-if="nodeRow.jumpCharacter">{{ nodeRow.jumpCharacter }}</el-tag>
|
</el-descriptions-item>
|
<el-descriptions-item :contentStyle="descriptionOption.contentStyle"
|
:labelStyle="descriptionOption.labelStyle">
|
<template slot="label">
|
<i :class="icons.init"></i>
|
初始值
|
</template>
|
<el-tag v-if="nodeRow.initialValue">{{ nodeRow.initialValue }}</el-tag>
|
</el-descriptions-item>
|
<el-descriptions-item :contentStyle="descriptionOption.contentStyle"
|
:labelStyle="descriptionOption.labelStyle">
|
<template slot="label">
|
<i :class="icons.length"></i>
|
步长
|
</template>
|
<el-tag v-if="nodeRow.stepLength">{{ nodeRow.stepLength }}</el-tag>
|
</el-descriptions-item>
|
<el-descriptions-item :contentStyle="descriptionOption.contentStyle"
|
:labelStyle="descriptionOption.labelStyle">
|
<template slot="label">
|
<i :class="icons.left"></i>
|
前缀
|
</template>
|
<el-tag v-if="nodeRow.prefixion">{{ nodeRow.prefixion }}</el-tag>
|
</el-descriptions-item>
|
<el-descriptions-item :contentStyle="descriptionOption.contentStyle"
|
:labelStyle="descriptionOption.labelStyle">
|
<template slot="label">
|
<i :class="icons.right"></i>
|
后缀
|
</template>
|
<el-tag v-if="nodeRow.suffix">{{ nodeRow.suffix }}</el-tag>
|
</el-descriptions-item>
|
<el-descriptions-item :contentStyle="descriptionOption.contentStyle"
|
:labelStyle="descriptionOption.labelStyle">
|
<template slot="label">
|
<i :class="icons.desc"></i>
|
描述
|
</template>
|
<el-tag v-if="nodeRow.description">{{ nodeRow.description }}</el-tag>
|
</el-descriptions-item>
|
</el-descriptions>
|
</basic-container>
|
</el-main>
|
|
<!-- 新增 修改 -->
|
<el-dialog
|
v-dialogDrag
|
:title="dialogTitle === 'add' ? '创建' : '修改'"
|
:visible.sync="visible"
|
append-to-body="true"
|
class="avue-dialog"
|
width="40%"
|
@close="visibleCloseHandler"
|
>
|
<el-form ref="form" :model="form" :rules="rules" label-width="95px">
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="名称：" prop="id">
|
<el-input v-model="form.id"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="标签：" prop="name">
|
<el-input v-model="form.name"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="跳跃字符：" prop="jumpCharacter">
|
<el-input v-model="form.jumpCharacter"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="初始值：" prop="initialValue">
|
<el-input v-model="form.initialValue"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="步长：" prop="stepLength">
|
<el-input-number v-model="form.stepLength" :max="9" :min="1" label="描述文字"></el-input-number>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="前缀：" prop="prefixion">
|
<el-input v-model="form.prefixion"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="后缀：" prop="suffix">
|
<el-input v-model="form.suffix"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="描述：" prop="description">
|
<el-input v-model="form.description" :rows="2" type="textarea"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="visibleCloseHandler">取 消</el-button>
|
<el-button type="primary" @click="addSaveHandler">确 定</el-button>
|
</span>
|
</el-dialog>
|
|
<!-- 导入 -->
|
<upload-file ref="upload" :fileType="upFileType" :fileUrl="fileUrl" :tipList="tipList" title="导入"
|
@updata="getTreeList"></upload-file>
|
|
<!-- 查看使用范围 -->
|
<el-dialog
|
v-dialogDrag
|
:visible.sync="checkViewVisible"
|
append-to-body="true"
|
class="avue-dialog"
|
title="查看使用范围"
|
width="60%"
|
>
|
<avue-crud
|
ref="checkViewCrud"
|
:data="checkViewData"
|
:option="checkViewOption"
|
:table-loading="checkViewLoading"
|
@search-change="checkHandleSearch"
|
@search-reset="checkHandleReset"
|
>
|
</avue-crud>
|
</el-dialog>
|
</el-container>
|
</template>
|
|
<script>
|
import {
|
getVersionRuleAllList,
|
addVersionRule,
|
updateVersionRule,
|
deleteVersionRule,
|
exportVersionRule,
|
getUsedVersionRuleList
|
} from "@/api/modeling/version/api";
|
import func from "@/util/func";
|
import basicOption from "@/util/basic-option";
|
|
export default {
|
name: "index",
|
data() {
|
return {
|
checkViewVisible: false,
|
checkViewData: [],
|
checkViewDataSearch: [],
|
checkViewLoading: false,
|
checkViewOption: {
|
...basicOption,
|
addBtn: false,
|
menu: false,
|
searchMenuSpan: 8,
|
refreshBtn: false,
|
selection: false,
|
column: [
|
{
|
label: '名称',
|
prop: 'versionRuleName',
|
sortable: true,
|
},
|
{
|
label: '来源',
|
prop: 'source',
|
sortable: true,
|
search: true
|
},
|
{
|
label: '说明',
|
prop: 'description',
|
}
|
]
|
},
|
tipList: [
|
"名称不能为空且只能输入英文字符",
|
"跳跃字符只能输入数字或字母，并且以英文逗号分隔",
|
"初始值只能输入数字、字母或英文符号",
|
"步长不能为空且必须为1-9的整数",
|
],
|
upFileType: ['xls', 'xlsx'],
|
fileUrl: 'api/revisionRuleController/importVersionRules',
|
rules: {
|
id: [
|
{required: true, message: '请输入名称', trigger: 'blur'},
|
{pattern: /^[a-zA-Z]+$/, message: '只能输入英文字符', trigger: 'blur'}
|
],
|
initialValue: [
|
{required: true, message: '请输入初始值', trigger: 'blur'},
|
{pattern: /^[a-zA-Z0-9!@#$%^&*()_+{}\[\]:;"'<>,.?/\\|-]*$/, message: '只能输入数字、字母或英文符号', trigger: 'blur'}
|
],
|
jumpCharacter: [
|
{required: true, message: '请输入跳跃字符', trigger: 'blur'},
|
{pattern: /^[a-zA-Z0-9]+(?:,[a-zA-Z0-9]+)*$/, message: '只能输入数字或字母，并且以逗号分隔', trigger: 'blur'}
|
]
|
},
|
form: {
|
id: '',
|
name: '',
|
jumpCharacter: '',
|
initialValue: '',
|
stepLength: 1,
|
prefixion: '',
|
suffix: '',
|
description: ''
|
},
|
visible: false,
|
dialogTitle: '',
|
nodeRow: {},
|
treeData: [],
|
treeOption: {
|
height: 'auto',
|
defaultExpandAll: false,
|
menu: false,
|
addBtn: false,
|
props: {
|
label: 'id',
|
value: 'id',
|
children: 'children'
|
}
|
},
|
descriptionOption: {
|
labelStyle: 'text-align:center;width:120px',
|
contentStyle: 'width:240px;text-align:center;word-break;break-all;'
|
},
|
icons: {
|
id: 'el-icon-finished',
|
name: 'el-icon-tickets',
|
jump: 'el-icon-mouse',
|
init: 'el-icon-s-promotion',
|
length: 'el-icon-collection-tag',
|
left: 'el-icon-caret-left',
|
right: 'el-icon-caret-right',
|
desc: 'el-icon-chat-line-square'
|
},
|
}
|
},
|
created() {
|
this.getTreeList();
|
},
|
methods: {
|
//左侧树查询
|
getTreeList() {
|
getVersionRuleAllList().then(res => {
|
const data = res.data.data;
|
this.treeData = data;
|
}).catch(err => {
|
this.$message.error(err)
|
});
|
},
|
|
// 左侧树行点击
|
nodeClick(row) {
|
this.nodeRow = row;
|
},
|
|
// 创建按钮
|
addClickHandler() {
|
this.dialogTitle = 'add';
|
this.visible = true;
|
},
|
|
// 修改按钮
|
editClickHandler() {
|
if (func.isEmptyObject(this.nodeRow)) {
|
this.$message.error('请至少选择一条数据！');
|
return;
|
}
|
this.visible = true;
|
this.dialogTitle = 'edit';
|
this.form = this.nodeRow;
|
},
|
|
// 新增修改对话框关闭
|
visibleCloseHandler() {
|
const form = {
|
id: '',
|
name: '',
|
jumpCharacter: '',
|
initialValue: '',
|
stepLength: 1,
|
prefixion: '',
|
suffix: '',
|
description: ''
|
}
|
this.form = form;
|
this.visible = false;
|
this.$refs.form.clearValidate();
|
},
|
|
// 新增 编辑 保存
|
addSaveHandler() {
|
const saveFunction = this.dialogTitle === 'add' ? addVersionRule : updateVersionRule;
|
|
saveFunction(this.form).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success(res.data.obj);
|
this.getTreeList();
|
this.visible = false;
|
} else {
|
this.$message.error(res.data.obj);
|
}
|
}).catch(error => {
|
this.$message.error(error);
|
});
|
},
|
|
// 删除按钮
|
delClickHandler() {
|
if (func.isEmptyObject(this.nodeRow)) {
|
this.$message.error('请至少选择一条数据！');
|
return;
|
}
|
this.$confirm('您确定要删除所选择的数据吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
const list = [this.nodeRow];
|
deleteVersionRule(list).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success(res.data.obj);
|
this.getTreeList();
|
this.nodeRow = {};
|
}
|
})
|
}).catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消删除'
|
});
|
});
|
},
|
|
// 导出
|
exportClickHandler() {
|
if (func.isEmptyObject(this.nodeRow)) {
|
this.$message.error('请至少选择一条数据！');
|
return;
|
}
|
|
exportVersionRule({vrNames: this.nodeRow.id}).then(res => {
|
func.downloadFileByBlobHandler(res);
|
this.$message.success('导出成功');
|
}).catch(err => {
|
this.$message.error(err);
|
})
|
},
|
|
// 导入
|
uploadClickHandler() {
|
this.$refs.upload.visible = true;
|
},
|
|
// 查看使用范围
|
checkViewClickHandler() {
|
if (func.isEmptyObject(this.nodeRow)) {
|
this.$message.error('请至少选择一条数据！');
|
return;
|
}
|
getUsedVersionRuleList({vrName: this.nodeRow.id}).then(res => {
|
if (res.data.code === 200) {
|
this.checkViewVisible = true;
|
const data = res.data.data;
|
this.checkViewData = res.data.data;
|
this.checkViewDataSearch = res.data.data;
|
}
|
})
|
},
|
|
// 查看使用范围查询
|
checkHandleSearch(params, done) {
|
const {source} = params;
|
|
if (!params.source) {
|
this.checkViewData = this.checkViewDataSearch;
|
return done();
|
}
|
;
|
|
this.checkViewData = this.checkViewDataSearch.filter(item => {
|
return item.source && item.source.includes(source);
|
});
|
|
done();
|
|
},
|
|
// 查看使用范围重置
|
checkHandleReset() {
|
this.checkViewData = this.checkViewDataSearch;
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
::v-deep {
|
.el-scrollbar__wrap {
|
overflow: auto !important;
|
}
|
|
.headerCon {
|
.el-button {
|
width: 82px;
|
}
|
}
|
|
}
|
|
.headerCon {
|
display: flex;
|
flex-wrap: wrap;
|
margin-bottom: 5px;
|
|
.el-button + .el-button {
|
margin-left: 5px;
|
}
|
|
.el-button {
|
margin-top: 5px;
|
}
|
}
|
|
.headerCon > .el-button:nth-child(4) {
|
margin-left: 0;
|
}
|
|
.headerCon > .el-button:nth-child(7) {
|
margin-left: 0;
|
}
|
|
.smallBtn {
|
width: 82px;
|
text-align: center;
|
padding-left: 4.5px;
|
}
|
|
</style>
|
