|
|
|
@ -97,40 +97,77 @@ |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
<el-dialog title="规则设置" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="settingDialog" :before-close="handleClose"> |
|
|
|
<el-dialog class="rules-setting-dialog" title="规则设置" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="settingDialog" :before-close="handleClose"> |
|
|
|
<div class="setting-dialog"> |
|
|
|
<div class="setting-tip"><i class="iconfont icon-zhuyi-lan" /><span>“机构编码”只能显示在最前，其他项目可根据机构的现行规则修改显示顺序 (使用鼠标拖拽完成操作) ！</span></div> |
|
|
|
<el-checkbox v-model="isConnector">编号显示时加入连接字符“-”</el-checkbox> |
|
|
|
|
|
|
|
<div class="config-field"> |
|
|
|
<div |
|
|
|
v-for="(item,index) in field" |
|
|
|
:key="index" |
|
|
|
v-for="(item,index) in tempField" |
|
|
|
:key="item.id" |
|
|
|
class="config-field-item" |
|
|
|
:data-index="index" |
|
|
|
:class="{ 'org-item': item.name === '机构' }" |
|
|
|
> |
|
|
|
{{ item.name }} |
|
|
|
<div :class="['setting-conent', { 'disabled-fonds': item.name === '机构' }]"> |
|
|
|
<p class="setting-title">{{ item.name }}</p> |
|
|
|
|
|
|
|
<div v-if="item.name === '机构'" class="setting-form-item"> |
|
|
|
<el-checkbox-group v-model="fondsCodeType"> |
|
|
|
<el-checkbox v-for="i in fondsCodeOptions" :key="i.value" :label="i.value">{{ i.label }}</el-checkbox> |
|
|
|
</el-checkbox-group> |
|
|
|
</div> |
|
|
|
<div v-if="item.name === '区域'" class="setting-form-item"> |
|
|
|
数据来源见区域管理！ |
|
|
|
</div> |
|
|
|
<div v-if="item.name === '排'" class="setting-form-item"> |
|
|
|
<div class="number-input-style"> |
|
|
|
<el-input-number v-model="row" controls-position="right" :min="1" :max="10" /> |
|
|
|
<span class="unit-style">位</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div v-if="item.name === '面'" class="setting-form-item"> |
|
|
|
<span>A/B 或 1/2</span> |
|
|
|
<el-checkbox v-model="isNumber">编号采用<br>数字显示</el-checkbox> |
|
|
|
</div> |
|
|
|
<div v-if="item.name === '架/列'" class="setting-form-item"> |
|
|
|
<div class="number-input-style"> |
|
|
|
<el-input-number v-model="line" controls-position="right" :min="1" :max="10" /> |
|
|
|
<span class="unit-style">位</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div v-if="item.name === '层'" class="setting-form-item"> |
|
|
|
<div class="number-input-style"> |
|
|
|
<el-input-number v-model="layer" controls-position="right" :min="1" :max="10" /> |
|
|
|
<span class="unit-style">位</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div v-if="index < tempField.length - 1" class="setting-connector"> |
|
|
|
<span v-if="isConnector">-</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div style="padding: 10px; background-color: #eef5fe;"> |
|
|
|
<p class="setting-title">当前设置</p> |
|
|
|
<ul class="setting-list"> |
|
|
|
<ul class="setting-list" style="width: 100%;"> |
|
|
|
<li> |
|
|
|
<span>中文显示规则：</span> |
|
|
|
<p>区域-排-面-架/列-层</p> |
|
|
|
<p>{{ previewData.cnRule }}</p> |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
<span>例如：</span> |
|
|
|
<p>01区001排A面01架6层</p> |
|
|
|
<p>{{ previewData.cnExample }}</p> |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
<span>编号显示规则：</span> |
|
|
|
<p>机构-区域-排-面-架/列-层 </p> |
|
|
|
<p>{{ previewData.codeRule }}</p> |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
<span>例如：</span> |
|
|
|
<p>FTZN-01-001-A-01-6</p> |
|
|
|
<p>{{ previewData.codeExample }}</p> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
@ -168,22 +205,105 @@ export default { |
|
|
|
verifyCode: '' |
|
|
|
}, |
|
|
|
verifyStatus: '', |
|
|
|
tempField: [], |
|
|
|
showVerifyDialog: true, |
|
|
|
settingDialog: true, |
|
|
|
isConnector: false |
|
|
|
settingDialog: false, |
|
|
|
isConnector: true, |
|
|
|
fondsCodeOptions: [ |
|
|
|
{ |
|
|
|
label: '中文显示', |
|
|
|
value: 1 |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: '英文显示', |
|
|
|
value: 2 |
|
|
|
} |
|
|
|
], |
|
|
|
fondsCodeType: [1, 2], |
|
|
|
row: 3, |
|
|
|
line: 2, |
|
|
|
layer: 1, |
|
|
|
isNumber: false |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
...mapGetters([ |
|
|
|
'baseApi' |
|
|
|
]) |
|
|
|
...mapGetters(['baseApi', 'user']), |
|
|
|
|
|
|
|
previewData() { |
|
|
|
// 判断是否选中中文/英文 |
|
|
|
const hasChinese = this.fondsCodeType.includes(1) |
|
|
|
const hasEnglish = this.fondsCodeType.includes(2) |
|
|
|
|
|
|
|
// 生成机构显示文本 |
|
|
|
const orgCnText = this.user.fonds.fondsName |
|
|
|
const orgCodeText = this.user.fonds.fondsNo |
|
|
|
|
|
|
|
// 字段预览规则 |
|
|
|
const fieldRules = { |
|
|
|
'机构': { |
|
|
|
cn: orgCnText, |
|
|
|
code: orgCodeText, |
|
|
|
// 控制是否在预览中显示 |
|
|
|
showInCn: hasChinese, |
|
|
|
showInCode: hasEnglish |
|
|
|
}, |
|
|
|
'区域': { |
|
|
|
cn: '01区', |
|
|
|
code: '01', |
|
|
|
showInCn: true, |
|
|
|
showInCode: true |
|
|
|
}, |
|
|
|
'排': { |
|
|
|
cn: this._formatNumber(1, this.row) + '排', |
|
|
|
code: this._formatNumber(1, this.row), |
|
|
|
showInCn: true, |
|
|
|
showInCode: true |
|
|
|
}, |
|
|
|
'面': { |
|
|
|
cn: this.isNumber ? '1面' : 'A面', |
|
|
|
code: this.isNumber ? '1' : 'A', |
|
|
|
showInCn: true, |
|
|
|
showInCode: true |
|
|
|
}, |
|
|
|
'架/列': { |
|
|
|
cn: this._formatNumber(1, this.line) + '架', |
|
|
|
code: this._formatNumber(1, this.line), |
|
|
|
showInCn: true, |
|
|
|
showInCode: true |
|
|
|
}, |
|
|
|
'层': { |
|
|
|
cn: this._formatNumber(6, this.layer) + '层', |
|
|
|
code: this._formatNumber(6, this.layer), |
|
|
|
showInCn: true, |
|
|
|
showInCode: true |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 筛选需要显示的字段 |
|
|
|
const cnFields = this.tempField.filter(item => fieldRules[item.name].showInCn) |
|
|
|
const codeFields = this.tempField.filter(item => fieldRules[item.name].showInCode) |
|
|
|
|
|
|
|
// 生成预览文本 |
|
|
|
return { |
|
|
|
// 中文显示规则 |
|
|
|
cnRule: cnFields.map(item => item.name).join(' - '), |
|
|
|
// 中文示例 |
|
|
|
cnExample: cnFields.map(item => fieldRules[item.name].cn).join(this.isConnector ? '-' : ''), |
|
|
|
// 编号显示规则 |
|
|
|
codeRule: codeFields.map(item => item.name).join(' - '), |
|
|
|
// 编号示例 |
|
|
|
codeExample: codeFields.map(item => fieldRules[item.name].code).join(this.isConnector ? '-' : '') |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.$nextTick(() => { |
|
|
|
this.draggableScreen() |
|
|
|
}) |
|
|
|
|
|
|
|
}, |
|
|
|
methods: { |
|
|
|
_formatNumber(value, length) { |
|
|
|
return value.toString().padStart(length, '0') |
|
|
|
}, |
|
|
|
handleRemarkHover(index) { |
|
|
|
this.hoverIndex = index |
|
|
|
}, |
|
|
|
@ -207,7 +327,10 @@ export default { |
|
|
|
this.verfiyForm.verifyCode = '' |
|
|
|
this.showVerifyDialog = false |
|
|
|
this.settingDialog = true |
|
|
|
this.draggableScreen() |
|
|
|
this.$nextTick(() => { |
|
|
|
this.tempField = JSON.parse(JSON.stringify(this.field)) |
|
|
|
this.draggableScreen() |
|
|
|
}) |
|
|
|
} else { |
|
|
|
this.$message({ message: '验证码错误！', type: 'error', offset: 8 }) |
|
|
|
} |
|
|
|
@ -216,27 +339,17 @@ export default { |
|
|
|
draggableScreen() { |
|
|
|
const container = document.querySelector('.config-field') |
|
|
|
const that = this |
|
|
|
let originalOrder = [...this.field.map(item => item.id)] |
|
|
|
// 找到机构项的初始索引 |
|
|
|
Sortable.create(container, { |
|
|
|
draggable: '.config-field-item', |
|
|
|
draggable: '.config-field-item:not(.org-item)', |
|
|
|
// draggable: '.config-field-item', |
|
|
|
animation: 150, |
|
|
|
onStart() { |
|
|
|
originalOrder = [...that.field.map(item => item.id)] |
|
|
|
}, |
|
|
|
filter: '.disabled-fonds, .setting-connector', |
|
|
|
onEnd({ newIndex, oldIndex }) { |
|
|
|
if (newIndex === oldIndex) return |
|
|
|
|
|
|
|
// 执行元素移动操作 |
|
|
|
const movedItem = that.field.splice(oldIndex, 1)[0] |
|
|
|
that.field.splice(newIndex, 0, movedItem) |
|
|
|
|
|
|
|
// 检查顺序是否真的发生了变化 |
|
|
|
const newOrder = [...that.field.map(item => item.id)] |
|
|
|
console.log('newOrder', newOrder) |
|
|
|
if (!that.arraysEqual(originalOrder, newOrder)) { |
|
|
|
// 顺序变化，提交show_screen数据 |
|
|
|
// that.submitScreenOrderAndStatus() |
|
|
|
} |
|
|
|
console.log('newIndex', newIndex) |
|
|
|
that.tempField.splice(newIndex, 0, that.tempField.splice(oldIndex, 1)[0]) |
|
|
|
console.log('that.tempField', that.tempField) |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
@ -423,7 +536,7 @@ export default { |
|
|
|
.setting-list{ |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
width: 600px; |
|
|
|
width: 1000px; |
|
|
|
font-size: 14px; |
|
|
|
li{ |
|
|
|
display: flex; |
|
|
|
@ -439,11 +552,18 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.rules-setting-dialog{ |
|
|
|
::v-deep .el-dialog{ |
|
|
|
width: 900px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.setting-tip{ |
|
|
|
display: flex; |
|
|
|
justify-content: flex-start; |
|
|
|
align-items: center; |
|
|
|
line-height: 26px; |
|
|
|
margin-bottom: 15px; |
|
|
|
span{ |
|
|
|
display: inline-block; |
|
|
|
font-size: 12px; |
|
|
|
@ -458,11 +578,88 @@ export default { |
|
|
|
.config-field{ |
|
|
|
display: flex; |
|
|
|
justify-content: flex-start; |
|
|
|
padding: 20px 0; |
|
|
|
} |
|
|
|
|
|
|
|
.config-field-item{ |
|
|
|
width: 100px; |
|
|
|
height: 100px; |
|
|
|
border: 1px solid #0348F3; |
|
|
|
display: flex; |
|
|
|
justify-content: flex-start; |
|
|
|
align-items: center; |
|
|
|
.setting-conent{ |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
width: 120px; |
|
|
|
height: 150px; |
|
|
|
padding: 10px 0; |
|
|
|
border: 1px solid #e6e8ed; |
|
|
|
background-color: #fff; |
|
|
|
border-radius: 4px; |
|
|
|
.setting-title{ |
|
|
|
height: 40px; |
|
|
|
line-height: 40px; |
|
|
|
} |
|
|
|
.setting-form-item{ |
|
|
|
flex: 1; |
|
|
|
border:1px solid #e6e8ed; |
|
|
|
border-radius: 4px; |
|
|
|
width: 100px; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
padding: 0 6px; |
|
|
|
::v-deep .el-checkbox{ |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
width: 80px; |
|
|
|
margin-top: 6px; |
|
|
|
margin-right: 0 !important; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.disabled-fonds{ |
|
|
|
background-color: #e6e8ed; |
|
|
|
.setting-form-item{ |
|
|
|
background-color: #fff; |
|
|
|
} |
|
|
|
} |
|
|
|
.setting-connector{ |
|
|
|
width: 30px; |
|
|
|
font-size: 22px; |
|
|
|
font-weight: bold; |
|
|
|
color: #0c0e1e; |
|
|
|
text-align: center; |
|
|
|
span{ |
|
|
|
display: block; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.number-input-style{ |
|
|
|
display: flex; |
|
|
|
justify-content: flex-start; |
|
|
|
align-items: center; |
|
|
|
::v-deep .el-input-number{ |
|
|
|
width: 65px; |
|
|
|
|
|
|
|
.el-input__inner{ |
|
|
|
padding-right: 34px; |
|
|
|
border-radius: 4px 0 0 4px; |
|
|
|
} |
|
|
|
} |
|
|
|
.unit-style{ |
|
|
|
display: block; |
|
|
|
height: 32px; |
|
|
|
line-height: 32px; |
|
|
|
background-color: #f5f7fa; |
|
|
|
color: #909399; |
|
|
|
padding: 0 4px; |
|
|
|
border: 1px solid #dcdfe6; |
|
|
|
border-left: 0; |
|
|
|
border-radius: 0 4px 4px 0; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
