<template>
|
<el-container style="border: 1px solid #eee">
|
<el-aside ref="left-aside" class="regular-aside" width="200px" style="background-color: rgb(238, 241, 246)">
|
<el-menu unique-opened @select="menuSelect">
|
<el-submenu v-for="item in menuData" :index="''+item.code_Id" :key="item.code_Id">
|
<template slot="title">
|
<i class="el-icon-menu"></i>{{ item.menuName }}
|
</template>
|
<el-menu-item v-for="subItem in item.children" :key="subItem.code_Id" :sub-item="subItem" :index="'' + subItem.code_Id">{{ subItem.menuName }}</el-menu-item>
|
</el-submenu>
|
</el-menu>
|
</el-aside>
|
|
<el-main ref="el-main" style="padding:0">
|
<!--TREE 编辑器-->
|
<el-card v-if="editMode=='tree'" class="box-card" shadow="never">
|
<div slot="header" class="clearfix">
|
<span>设置编码规则 - {{ title }}</span>
|
</div>
|
<el-form ref="form" label-width="120px" style="width:800px;">
|
<el-form-item label="开启系统编码">
|
<el-switch v-model="nodeData.isCustom" :active-value="1" :inactive-value="0" active-text="系统编码" inactive-text="输入时手工填写">
|
</el-switch>
|
</el-form-item>
|
<transition-group enter-active-class="fadeIn" leave-active-class="fadeOutUp">
|
<template v-if="nodeData.isCustom==1">
|
<el-form-item :key="0" class="animated" label-width="0px">
|
<el-alert :closable="false" title="可以设置下面编码规则，系统自动按照规则编码" type="info" show-icon>
|
</el-alert>
|
</el-form-item>
|
<el-form-item :key="1" class="animated" label="前导字符">
|
<el-input v-model="nodeData.prefix" :maxlength="3" placeholder="请输入前导字符" style="width:200px;"></el-input>
|
</el-form-item>
|
<el-form-item :key="2" class="animated" label="每级位数">
|
<el-select v-model="nodeData.charLength" placeholder="请选择" style="width:200px;">
|
<el-option :label="1" :value="1">
|
</el-option>
|
<el-option :label="2" :value="2">
|
</el-option>
|
<el-option :label="3" :value="3">
|
</el-option>
|
<el-option :label="4" :value="4">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item key="4" label="最终编码规则">
|
{{ generateCode }}
|
</el-form-item>
|
</template>
|
<template v-else>
|
<el-form-item :key="0" class="animated" label-width="0px">
|
<el-alert :closable="false" show-icon title="在新建数据时，编码字段将手工输入" type="info">
|
</el-alert>
|
</el-form-item>
|
</template>
|
</transition-group>
|
<el-form-item>
|
<el-button ref="tree-btn" :loading="loading" type="primary" icon="el-icon-yrt-baocun" @click.native="()=>{saveCommon($refs['tree-btn']);}">保存</el-button>
|
</el-form-item>
|
<el-form-item label-width="0px">
|
<el-alert :closable="false" class="demo" title="说明" type="info" show-icon>
|
<div class="padding-bottom-10 line-height-1_5">
|
例如：类别层级为1级，每级位数为2位，那么编码规则为：01、02、03，以此类推
|
</div>
|
<div class="padding-bottom-10 line-height-1_5">
|
类别层级为2级，每级位数为2位，那么编码规则为：0101、0102、0103，以此类推
|
</div>
|
<div class="padding-bottom-10 line-height-1_5">
|
详细例子：
|
</div>
|
<div class="padding-bottom-10 line-height-1_5">
|
<el-tree :data="demoTreeData" node-key="id" default-expand-all>
|
</el-tree>
|
</div>
|
</el-alert>
|
</el-form-item>
|
</el-form>
|
</el-card>
|
|
<!--通用信息 编辑器-->
|
<el-card v-else class="box-card">
|
<div slot="header" class="clearfix">
|
<span>设置编码规则 - {{ title }}</span>
|
</div>
|
<el-row class="field-row">
|
<el-col :span="7">
|
<el-card class="field-card">
|
<div slot="header" class="clearfix">
|
<span>可选字段</span>
|
</div>
|
<draggable :list="commonDragItems" :options="{group:{ name:'people', pull:'clone',put:false},sort:false, ghostClass: 'ghost'}" tag="ul" class="field-group">
|
<li v-for="(item, index) in commonDragItems" :key="index" class="field-item">
|
<a>
|
<el-button :item-data="item" type="primary" plain icon="el-icon-yrt-liebiao3">{{ item.label }}</el-button>
|
</a>
|
</li>
|
</draggable>
|
</el-card>
|
</el-col>
|
<el-col :span="3" class="drag-col">
|
<div class="icon">
|
<i class="el-icon-yrt-jiaoyiguanli"></i>
|
</div>
|
<div class="text">左右拖拽</div>
|
</el-col>
|
<el-col :span="14">
|
<el-card class="field-card2">
|
<div slot="header" class="clearfix">
|
<span>已选字段</span>
|
</div>
|
|
<draggable v-model="nodeData.commonSelected" :options="{group:'people', ghostClass: 'ghost', animation:300, chosenClass:'chosen-item'}" tag="ul" class="field-group draggable-main" @add="handleWidgetAdd">
|
<template v-for="(item, index) in nodeData.commonSelected">
|
<li v-if="item.type=='custom'" :key="item.key" :index="index" class="field-item">
|
<el-button :item-data="item" type="primary" plain icon="el-icon-yrt-liebiao3" class="selected-item" @click="handleSelectWidget(index)">{{ item.label }}</el-button>
|
<el-select v-model="item.join" placeholder="连接符" class="splitter">
|
<el-option key="0" label="[无]" value=""></el-option>
|
<el-option key="-" label="-" value="-"></el-option>
|
<el-option key="_" label="_" value="_"></el-option>
|
</el-select>
|
<el-input v-model="item.value" :maxlength="4" placeholder="请输入自定字符" class="custom-letter"></el-input>
|
<div class="tool">
|
<el-button v-if="selectWidget && selectWidget.key == item.key" title="删除" class="widget-action-delete" circle plain type="danger" @click.stop="handleWidgetDelete(index)">
|
<i class="el-icon-yrt-shanchu2"></i>
|
</el-button>
|
</div>
|
</li>
|
<li v-else :key="item.key" :index="index" class="field-item">
|
<el-button :item-data="item" type="primary" plain icon="el-icon-yrt-liebiao3" class="selected-item" @click="handleSelectWidget(index)">{{ item.label }}</el-button>
|
<el-select v-model="item.join" placeholder="连接符" class="splitter">
|
<el-option key="0" label="[无]" value=""></el-option>
|
<el-option key="-" label="-" value="-"></el-option>
|
<el-option key="_" label="_" value="_"></el-option>
|
</el-select>
|
<div class="tool">
|
<el-button v-if="selectWidget && selectWidget.key == item.key" title="删除" class="widget-action-delete" circle plain type="danger" @click.stop="handleWidgetDelete(index)">
|
<i class="el-icon-yrt-shanchu2"></i>
|
</el-button>
|
</div>
|
</li>
|
</template>
|
|
<li :key="'' + 0" class="field-item">
|
<span>流水号</span>
|
<el-select v-model="nodeData.commonFlow.charLength" placeholder="请选择位数" style="width:120px;">
|
<el-option :label="'2位'" :value="2">
|
</el-option>
|
<el-option :label="'3位'" :value="3">
|
</el-option>
|
<el-option :label="'4位'" :value="4">
|
</el-option>
|
<el-option :label="'5位'" :value="5">
|
</el-option>
|
</el-select>
|
<el-select v-model="nodeData.commonFlow.type" placeholder="流水方式" style="width:140px;">
|
<el-option label="小流水" value="S">
|
</el-option>
|
<el-option label="大流水" value="B">
|
</el-option>
|
</el-select>
|
<el-tooltip placement="top">
|
<div slot="content">大流水：所有单子串联递增<br />小流水：按照日期进行递增，每天从1开始递增</div>
|
<i class="el-icon-yrt-bangzhu1" style="cursor:pointer;margin-left:5px;"></i>
|
</el-tooltip>
|
</li>
|
</draggable>
|
<el-form>
|
<el-form-item label="最终编码规则">
|
{{ generateCode || '未自定义规则，采用默认规则：' + (defaultCodeRegular||'') }}
|
</el-form-item>
|
</el-form>
|
</el-card>
|
|
</el-col>
|
</el-row>
|
<div class="footer">
|
<el-button ref="common-btn" type="primary" @click.native="()=>{saveCommon($refs['common-btn'])}">保存</el-button>
|
<el-button @click.native="()=>{reset()}">重置</el-button>
|
<el-alert :closable="false" title="说明" type="info" show-icon class="msg">
|
<div class="line-height-1_5">
|
例如：自定义前缀为：PC，选择yyyMMdd，自动编号长度为4，那么最终产生的编号为：PC201812090001、PC201812090002、PC201812090003，以此类推
|
</div>
|
</el-alert>
|
</div>
|
</el-card>
|
</el-main>
|
|
</el-container>
|
</template>
|
|
<script>
|
import '@/styles/animate.css'
|
import Draggable from 'vuedraggable'
|
|
export default {
|
name: 'sys-basic-code-regular',
|
components: { Draggable },
|
data() {
|
return {
|
// 树结构例子数据
|
demoTreeData: _demoTreeData,
|
// 菜单数据
|
menuData: [],
|
value: '-',
|
editMode: 'common',
|
title: '请选择菜单',
|
// 当前选中项数据
|
nodeData: JSON.parse(JSON.stringify(_nodeData)),
|
// 默认规则
|
defaultCodeRegular: null,
|
// 加载状态
|
loading: false,
|
// 通用拖拽候选项
|
commonDragItems: _commonDragItems,
|
// 选中项
|
selectWidget: null
|
}
|
},
|
computed: {
|
// 生成编码规则
|
generateCode: function() {
|
var code = ''
|
// tree类型编码
|
if (this.editMode === 'tree') {
|
code = (this.nodeData.prefix || '') + '[' + this.nodeData.charLength + ']'
|
} else {
|
this.nodeData.commonSelected.forEach(item => {
|
if (item.value) {
|
if (item.type === 'custom') {
|
code += item.value + (item.join || '')
|
} else {
|
code += item.value + (item.join || '')
|
}
|
}
|
})
|
// 拼接流水编码方式
|
var flow = this.nodeData.commonFlow
|
if (flow.type && flow.charLength) {
|
code += '[{' + flow.type + '}' + flow.charLength + ']'
|
}
|
}
|
return code
|
}
|
},
|
created() {
|
this.$nextTick(() => {
|
this.getMenuData()
|
})
|
},
|
methods: {
|
// 加载左侧菜单
|
getMenuData() {
|
var the = this
|
var where = { parentId: 0 }
|
|
var url = '/api/common/loadTreeNodeAll'
|
var params = {
|
openNodeApi: true,
|
folder: 'sys/core',
|
DBServer: 'Sys',
|
tableName: 'Sys_CodeRegular',
|
tableView: 'Sys_CodeRegular',
|
keyName: 'code_Id',
|
nodeName: 'menuName',
|
fixHasChild: false,
|
isBreakWay: false,
|
displayBreakWay: false,
|
parentName: 'parentId',
|
orderBy: 'orderNo desc, code_Id',
|
where: where,
|
extendColumns: ''
|
}
|
the.common.ajax(
|
url,
|
params,
|
res => {
|
if (res.result) {
|
the.menuData = res.data
|
} else {
|
the.$message.error(res.msg)
|
}
|
},
|
this.$refs['left-aside']
|
)
|
},
|
// 左侧菜单点击事件
|
menuSelect(index, indexPath, item) {
|
this.nodeData.code_Id = index
|
var subItem = item.$attrs['sub-item']
|
this.title = subItem.menuName
|
if (index === '89') {
|
this.editMode = 'common'
|
this.commonDragItems = _commonDragItems_asset
|
} else if (['105'].indexOf(index) >= 0) {
|
// 105 - 资产分类
|
this.editMode = 'tree'
|
} else {
|
this.editMode = 'common'
|
this.commonDragItems = _commonDragItems
|
}
|
this.loadNodeData(subItem)
|
},
|
// tree类型加载数据
|
loadNodeData(item) {
|
var url = '/api/sys/codeRegular/getTreeData'
|
var params = {
|
openNodeApi: true,
|
code_Id: item.code_Id
|
}
|
var callback = res => {
|
this.common.showMsg(res)
|
// 获得默认规则
|
this.defaultCodeRegular = res.code || ''
|
|
// 获得JSON配置信息
|
if (res.result && res.data && res.data.jsonData) {
|
this.nodeData = JSON.parse(res.data.jsonData)
|
} else {
|
this.nodeData = JSON.parse(JSON.stringify(_nodeData))
|
}
|
this.nodeData.code_Id = item.code_Id
|
}
|
var target = this.$refs['el-main']
|
this.common.ajax(url, params, callback, target)
|
},
|
// 拖拽添加事件
|
handleWidgetAdd(evt) {
|
const newIndex = evt.newIndex
|
var newItem = this.nodeData.commonSelected[newIndex]
|
if (!newItem) newItem = this.nodeData.commonSelected[newIndex - 1]
|
|
var filterSelected = this.nodeData.commonSelected.filter(item => {
|
return item.type !== newItem.type
|
})
|
newItem.key = Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999)
|
this.nodeData.commonSelected = filterSelected.concat(newItem)
|
},
|
// 选中
|
handleSelectWidget(index) {
|
this.selectWidget = this.nodeData.commonSelected[index]
|
},
|
// 删除选择项
|
handleWidgetDelete(index) {
|
if (this.nodeData.commonSelected.length - 1 === index) {
|
if (index === 0) {
|
this.selectWidget = {}
|
} else {
|
this.selectWidget = this.nodeData.commonSelected[index - 1]
|
}
|
} else {
|
this.selectWidget = this.nodeData.commonSelected[index + 1]
|
}
|
|
this.$nextTick(() => {
|
this.nodeData.commonSelected.splice(index, 1)
|
})
|
},
|
// common类型保存
|
saveCommon(ref) {
|
if (!this.nodeData.code_Id) {
|
this.$message.error('请选择左侧模块！')
|
return
|
}
|
if (!this.nodeData.commonFlow.charLength) {
|
this.$message.error('请选择流水号位数！')
|
return
|
}
|
if (!this.nodeData.commonFlow.type) {
|
this.$message.error('请选择流水方式！')
|
return
|
}
|
var jsonData = JSON.stringify(this.nodeData)
|
var r = /^[\[|\]|\-|\{|\}|a-zA-Z0-9]+$/g
|
if (!r.test(this.generateCode)) {
|
this.$message.error('只允许输入字符，不允许中文！')
|
return
|
}
|
|
var url = '/api/sys/codeRegular/saveCommon'
|
var params = {
|
openNodeApi: true,
|
code_Id: this.nodeData.code_Id,
|
codeRegular: this.generateCode,
|
jsonData: jsonData
|
}
|
var callback = res => {
|
this.common.showMsg(res)
|
}
|
this.common.ajax(url, params, callback, ref)
|
},
|
// 重置
|
reset() {
|
this.$confirm('确定需要重置到系统默认规则, 是否继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
})
|
.then(() => {
|
var url = '/api/sys/codeRegular/reset'
|
var params = {
|
openNodeApi: true,
|
code_Id: this.nodeData.code_Id
|
}
|
var callback = res => {
|
this.common.showMsg(res)
|
if (res.result) {
|
this.loadNodeData(this.nodeData)
|
}
|
}
|
this.common.ajax(url, params, callback, true)
|
})
|
.catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消删除'
|
})
|
})
|
}
|
}
|
}
|
const _nodeData = {
|
code_Id: 0,
|
isCustom: 0,
|
prefix: null,
|
charLength: 2,
|
// 已经选择好的项
|
commonSelected: [],
|
// 流水参数
|
commonFlow: {
|
charLength: null,
|
type: null
|
}
|
}
|
const _demoTreeData = [
|
{
|
id: 1,
|
label: '01',
|
children: [
|
{
|
id: 4,
|
label: '01-01',
|
children: [
|
{
|
id: 9,
|
label: '01-01-01'
|
},
|
{
|
id: 10,
|
label: '01-01-02'
|
}
|
]
|
}
|
]
|
},
|
{
|
id: 2,
|
label: '02',
|
children: [
|
{
|
id: 5,
|
label: '02-01'
|
},
|
{
|
id: 6,
|
label: '02-02',
|
children: [
|
{
|
id: 561,
|
label: '02-02-01'
|
},
|
{
|
id: 562,
|
label: '02-02-02'
|
}
|
]
|
}
|
]
|
},
|
{
|
id: 3,
|
label: '03',
|
children: [
|
{
|
id: 7,
|
label: '03-01'
|
},
|
{
|
id: 8,
|
label: '03-02'
|
}
|
]
|
}
|
]
|
// 常规日期
|
const _commonDragItems = [
|
{
|
type: 'custom',
|
value: null,
|
label: '自定义文本',
|
join: null
|
},
|
{
|
type: 'date',
|
value: '[yyyy][MM][dd]',
|
label: '日期(yyyyMMdd)',
|
join: null
|
},
|
{
|
type: 'date',
|
value: '[yyyy][MM]',
|
label: '日期-年月(yyyyMM)',
|
join: null
|
},
|
{
|
type: 'date',
|
value: '[yy][MM]',
|
label: '日期-年月(yyMM)',
|
join: null
|
},
|
{
|
type: 'date',
|
value: '[yyyy]',
|
label: '日期-年(yyyy)',
|
join: null
|
},
|
{
|
type: 'date',
|
value: '[yy]',
|
label: '日期-年(yy)',
|
join: null
|
}
|
]
|
// 日期 - 资产基础信息
|
const _commonDragItems_asset = [
|
{
|
type: 'custom',
|
value: null,
|
label: '自定义文本',
|
join: null
|
},
|
{
|
type: 'typeCode',
|
value: '分类编号',
|
label: '分类编号',
|
join: null
|
},
|
{
|
type: 'deptCode',
|
value: '部门编号',
|
label: '部门编号',
|
join: null
|
},
|
{
|
type: 'positionCode',
|
value: '位置编号',
|
label: '位置编号',
|
join: null
|
},
|
{
|
type: 'date',
|
value: '[yyyy][MM][dd]',
|
label: '日期(yyyyMMdd)',
|
join: null
|
},
|
{
|
type: 'date',
|
value: '[yyyy][MM]',
|
label: '日期-年月(yyyyMM)',
|
join: null
|
},
|
{
|
type: 'date',
|
value: '[yy][MM]',
|
label: '日期-年月(yyMM)',
|
join: null
|
},
|
{
|
type: 'date',
|
value: '[yyyy]',
|
label: '日期-年(yyyy)',
|
join: null
|
},
|
{
|
type: 'date',
|
value: '[yy]',
|
label: '日期-年(yy)',
|
join: null
|
}
|
]
|
</script>
|
|
<style lang="scss" scoped>
|
.regular-aside {
|
/deep/ .el-menu {
|
.el-submenu {
|
.el-menu-item,
|
.el-submenu__title {
|
height: 35px;
|
line-height: 35px;
|
}
|
.el-menu-item.is-active {
|
background-color: #ecf5ff;
|
}
|
|
&.is-active,
|
&.is-opened {
|
background-color: #66b1ff;
|
.el-submenu__title {
|
color: white;
|
.el-icon-menu,
|
.el-submenu__icon-arrow {
|
color: white;
|
}
|
&:hover {
|
background-color: #66b1ff;
|
}
|
}
|
}
|
}
|
}
|
}
|
.box-card {
|
.field-row {
|
width: 920px;
|
.field-card {
|
width: 270px;
|
height: 520px;
|
.field-group {
|
margin: 0;
|
padding: 0;
|
.field-item {
|
padding: 0px 10px 10px 0;
|
.el-button {
|
width: 220px;
|
}
|
}
|
}
|
}
|
.drag-col {
|
text-align: center;
|
padding-top: 150px;
|
line-height: 3;
|
color: #888;
|
.icon {
|
color: dodgerblue;
|
i {
|
font-size: 60px;
|
}
|
}
|
}
|
.field-card2 {
|
width: auto;
|
height: 520px;
|
.field-group {
|
margin: 0;
|
padding: 0;
|
.field-item {
|
padding: 0px 10px 10px 0;
|
.selected-item {
|
padding: 10px 10px;
|
width: 200px;
|
}
|
.splitter {
|
width: 100px;
|
}
|
.custom-letter {
|
width: 150px;
|
}
|
}
|
}
|
}
|
}
|
.footer {
|
width: 920px;
|
padding: 40px 10px 20px;
|
text-align: center;
|
.msg {
|
line-height: 1.5;
|
margin-top: 30px;
|
text-align: left;
|
font-size: 14px;
|
}
|
}
|
.demo.el-alert {
|
display: inline-table;
|
/deep/ .el-alert__icon {
|
position: relative;
|
top: 20px;
|
}
|
}
|
}
|
</style>
|
|
<style lang="scss" scoped>
|
.draggable-main {
|
min-height: 200px;
|
margin: 0;
|
padding: 0;
|
|
.field-item {
|
position: relative;
|
.tool {
|
position: absolute;
|
z-index: 100;
|
left: 160px;
|
top: 20px;
|
}
|
}
|
|
li.item {
|
border: 1px solid #f8f8f8;
|
padding: 10px;
|
margin: 1px;
|
background-color: #f3f3f3;
|
line-height: 30px;
|
|
&.over {
|
background-color: #fff;
|
}
|
|
&.active {
|
background-color: rgb(211, 228, 253);
|
}
|
|
&.chosen-item {
|
border: 1px dotted rgb(44, 104, 163);
|
background-color: #409eff;
|
color: white;
|
}
|
}
|
}
|
</style>
|
