<template>
|
<basic-container>
|
<avue-crud
|
ref="crud"
|
:data="data"
|
:option="option"
|
:table-loading="loading"
|
@refresh-change="getTableList"
|
@selection-change="selectChange"
|
@row-click="rowClickHandler">
|
<template slot="menuLeft" slot-scope="scope">
|
<el-button v-if="permissionList.addBtn" class="button-custom-icon" plain size="small" type="primary"
|
@click="addClickHandler">
|
<icon-show :name="permissionList.addBtn.source"></icon-show>
|
创建
|
</el-button>
|
<el-button v-if="permissionList.viewTheScopeBtn" class="button-custom-icon" plain size="small" type="primary"
|
@click="checkViewClickHandler">
|
<icon-show :name="permissionList.viewTheScopeBtn.source"></icon-show>
|
查看使用范围
|
</el-button>
|
<el-button v-if="permissionList.importBtn" class="button-custom-icon" plain size="small" type="primary"
|
@click="uploadClickHandler">
|
<icon-show :name="permissionList.importBtn.source"></icon-show>
|
导入
|
</el-button>
|
<el-button v-if="permissionList.exportBtn" class="button-custom-icon" plain size="small" type="primary"
|
@click="exportClickHandler">
|
<icon-show :name="permissionList.exportBtn.source"></icon-show>
|
导出
|
</el-button>
|
</template>
|
<template slot="menu" slot-scope="{row,index}">
|
<el-button v-if="permissionList.editBtn" size="small" type="text"
|
@click="editClickHandler(row)">
|
<icon-show :name="permissionList.editBtn.source"></icon-show>
|
编辑
|
</el-button>
|
<el-button v-if="permissionList.delBtn" size="small" type="text" @click="delClickHandler(row)">
|
<icon-show :name="permissionList.delBtn.source"></icon-show>
|
删除
|
</el-button>
|
</template>
|
</avue-crud>
|
<!-- 新增 修改 -->
|
<el-dialog
|
v-dialogDrag
|
:title="dialogTitle === 'add' ? '创建' : '修改'"
|
:visible.sync="visible"
|
append-to-body="true"
|
class="avue-dialog"
|
width="800px"
|
@close="visibleCloseHandler"
|
>
|
<el-form ref="form" :model="form" :rules="rules" label-width="95px" size="small">
|
<el-row>
|
<el-col :span="24">
|
<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 type="primary" @click="addSaveHandler">确 定</el-button>
|
<el-button @click="visibleCloseHandler">取 消</el-button>
|
</span>
|
</el-dialog>
|
|
<!-- 导入 -->
|
<upload-file ref="upload" :fileType="upFileType" :fileUrl="fileUrl" :tipList="tipList" title="导入"
|
@updata="getTableList"></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>
|
</basic-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";
|
import {mapGetters} from "vuex";
|
|
export default {
|
name: "index",
|
data() {
|
return {
|
loading: false,
|
data: [],
|
option: {
|
...basicOption,
|
addBtn: false,
|
editBtn: false,
|
delBtn: false,
|
calcHeight: -30,
|
column: [
|
{
|
label: '名称',
|
prop: 'id',
|
sortable: true,
|
},
|
{
|
label: '标签',
|
prop: 'name',
|
sortable: true,
|
},
|
{
|
label: '跳跃字符',
|
prop: 'jumpCharacter',
|
sortable: true,
|
},
|
{
|
label: '初始值',
|
prop: 'initialValue',
|
sortable: true,
|
},
|
{
|
label: '步长',
|
prop: 'stepLength',
|
sortable: true,
|
},
|
{
|
label: '前缀',
|
prop: 'prefixion',
|
sortable: true,
|
},
|
{
|
label: '后缀',
|
prop: 'suffix',
|
sortable: true,
|
},
|
{
|
label: '描述',
|
prop: 'description',
|
sortable: true,
|
},
|
]
|
},
|
checkViewVisible: false,
|
checkViewData: [],
|
checkViewDataSearch: [],
|
checkViewLoading: false,
|
checkViewOption: {
|
...basicOption,
|
addBtn: false,
|
menu: false,
|
searchMenuSpan: 8,
|
refreshBtn: false,
|
selection: false,
|
header: 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'
|
},
|
selectList: [],
|
lastIndex: null,
|
}
|
},
|
computed: {
|
...mapGetters(["permission"]),
|
permissionList() {
|
return {
|
addBtn: this.vaildData(this.permission[this.$route.query.id].ADD, false),
|
delBtn: this.vaildData(this.permission[this.$route.query.id].DELETE, false),
|
editBtn: this.vaildData(this.permission[this.$route.query.id].EDIT, false),
|
exportBtn: this.vaildData(this.permission[this.$route.query.id].EXPORT, false),
|
importBtn: this.vaildData(this.permission[this.$route.query.id].IMPORT, false),
|
viewTheScopeBtn: this.vaildData(this.permission[this.$route.query.id].VIRTUALVIEW, false),
|
};
|
},
|
},
|
created() {
|
this.getTableList();
|
},
|
methods: {
|
// 左侧树查询
|
getTableList() {
|
this.loading = true;
|
getVersionRuleAllList().then(res => {
|
const data = res.data.data;
|
this.data = data;
|
this.loading = false;
|
}).catch(err => {
|
this.$message.error(err)
|
});
|
},
|
|
// 创建按钮
|
addClickHandler() {
|
this.dialogTitle = 'add';
|
this.visible = true;
|
},
|
|
// 修改按钮
|
editClickHandler(row) {
|
this.form = {...row};
|
this.visible = true;
|
this.dialogTitle = 'edit';
|
},
|
|
// 新增修改对话框关闭
|
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;
|
this.$refs.form.validate((valid) => {
|
if (valid) {
|
saveFunction(this.form).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success(res.data.obj);
|
this.getTableList();
|
this.visible = false;
|
} else {
|
this.$message.error(res.data.obj);
|
}
|
}).catch(error => {
|
this.$message.error(error);
|
});
|
} else {
|
return false;
|
}
|
});
|
},
|
|
// 删除按钮
|
delClickHandler(row) {
|
this.$confirm('您确定要删除所选择的数据吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
const list = [row];
|
deleteVersionRule(list).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success(res.data.obj);
|
this.getTableList();
|
}
|
})
|
}).catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消删除'
|
});
|
});
|
},
|
|
// 导出
|
exportClickHandler() {
|
if (this.selectList.length <= 0) {
|
this.$message.error('请至少选择一条数据！');
|
return;
|
}
|
|
if (this.selectList.length > 1) {
|
this.$message.error('只能选择一条数据！');
|
return;
|
}
|
|
exportVersionRule({vrNames: this.selectList[0].id}).then(res => {
|
func.downloadFileByBlobHandler(res);
|
this.$message.success('导出成功');
|
}).catch(err => {
|
this.$message.error(err);
|
})
|
},
|
|
// 导入
|
uploadClickHandler() {
|
this.$refs.upload.visible = true;
|
},
|
|
// 查看使用范围
|
checkViewClickHandler() {
|
if (this.selectList.length <= 0) {
|
this.$message.error('请至少选择一条数据！');
|
return;
|
}
|
|
if (this.selectList.length > 1) {
|
this.$message.error('只能选择一条数据！');
|
return;
|
}
|
getUsedVersionRuleList({vrName: this.selectList[0].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;
|
},
|
|
// 选择框
|
selectChange(row) {
|
this.selectList = row;
|
},
|
|
// 点击行
|
rowClickHandler(row) {
|
func.rowClickHandler(
|
row,
|
this.$refs.crud,
|
this.lastIndex,
|
(newIndex) => {
|
this.lastIndex = newIndex;
|
},
|
() => {
|
this.selectList = [row];
|
}
|
);
|
},
|
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
::v-deep {
|
.el-scrollbar__wrap {
|
overflow: auto !important;
|
}
|
|
.el-input-number--small {
|
width: 100%;
|
}
|
}
|
</style>
|
