hanst
/
wms-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

日期字符串等数据设置参数

master
han\hanst 5 months ago
parent
42cdab84df
commit
2f2e6923f7
3 changed files with 204 additions and 13 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 206
      src/views/modules/labelSetting/components/PropertyForm.vue
  2. 2
      src/views/modules/labelSetting/components/PropertyPanel.vue
  3. 5
      src/views/modules/labelSetting/components/ZPLPreview.vue

206
src/views/modules/labelSetting/components/PropertyForm.vue
View File

@ -3,6 +3,14 @@
<!-- 文本属性 -->
<div v-if="element.type === 'text'" class="form-section">
<el-form label-position="top" size="small">
<el-form-item label="数据类型">
<el-select v-model="element.dataType" size="mini" style="width: 100%;" @change="onDataTypeChange">
<el-option label="普通文本" value="text" />
<el-option label="数字" value="number" />
<el-option label="日期" value="date" />
<el-option label="字符串" value="string" />
</el-select>
</el-form-item>
<el-form-item label="文本内容">
<div class="input-with-button">
<el-input v-model="element.data" placeholder="请输入文本" />
@ -52,13 +60,170 @@
</el-form-item>
</div>
</template>
<el-form-item label="小数位数" >
<div class="font-size-row">
<el-input v-model="element.decimalPlaces" controls-position="right" size="mini"/>
<el-checkbox v-model="element.showDecimalPlaces" size="small" class="inline-checkbox">整数显示小数位数</el-checkbox>
<el-checkbox v-model="element.thousandsSeparator" size="small" class="inline-checkbox">千位分隔符</el-checkbox>
</div>
</el-form-item>
<template v-if="element.dataType === 'number'">
<el-form-item label="小数位数" >
<div class="font-size-row">
<el-input v-model="element.decimalPlaces" controls-position="right" size="mini"/>
<el-checkbox v-model="element.showDecimalPlaces" size="small" class="inline-checkbox">整数显示小数位数</el-checkbox>
<el-checkbox v-model="element.thousandsSeparator" size="small" class="inline-checkbox">千位分隔符</el-checkbox>
</div>
</el-form-item>
</template>
<!-- 日期类型设置 -->
<template v-if="element.dataType === 'date'">
<el-form-item label="日期提取类型">
<el-select v-model="element.dateExtractType" size="mini" style="width: 100%;">
<el-option label="完整日期" value="full" />
<el-option label="提取年" value="year" />
<el-option label="提取月" value="month" />
<el-option label="提取日" value="day" />
<el-option label="提取周别" value="week" />
<el-option label="提取周几" value="weekday" />
</el-select>
</el-form-item>
<template v-if="element.dateExtractType === 'week'">
<el-form-item label="第一周日期">
<el-date-picker
v-model="element.firstWeekDate"
type="date"
placeholder="选择第一周日期"
size="mini"
style="width: 100%;"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd">
</el-date-picker>
</el-form-item>
</template>
<template v-if="element.dateExtractType === 'weekday'">
<el-form-item label="第一天是周几">
<el-select v-model="element.firstDayOfWeek" size="mini" style="width: 100%;">
<el-option label="周日" value="0" />
<el-option label="周一" value="1" />
<el-option label="周二" value="2" />
<el-option label="周三" value="3" />
<el-option label="周四" value="4" />
<el-option label="周五" value="5" />
<el-option label="周六" value="6" />
</el-select>
</el-form-item>
</template>
<template v-if="element.dateExtractType === 'full'">
<div class="form-row">
<el-form-item label="日期格式" class="form-item-half">
<el-select v-model="element.dateFormat" size="mini" style="width: 100%;">
<el-option label="年月日" value="ymd" />
<el-option label="日月年" value="dmy" />
<el-option label="月日年" value="mdy" />
</el-select>
</el-form-item>
<el-form-item label="分隔符" class="form-item-half">
<el-select v-model="element.dateSeparator" size="mini" style="width: 100%;">
<el-option label="-" value="-" />
<el-option label="/" value="/" />
<el-option label="." value="." />
<el-option label="无" value="" />
</el-select>
</el-form-item>
</div>
<div class="form-row">
<el-form-item label="年份位数" class="form-item-half">
<el-select v-model="element.yearDigits" size="mini" style="width: 100%;">
<el-option label="4位(2024)" value="4" />
<el-option label="2位(24)" value="2" />
</el-select>
</el-form-item>
<el-form-item label="月日位数" class="form-item-half">
<el-select v-model="element.monthDayDigits" size="mini" style="width: 100%;">
<el-option label="2位(01)" value="2" />
<el-option label="1位(1)" value="1" />
</el-select>
</el-form-item>
</div>
</template>
</template>
<!-- 字符串类型设置 -->
<template v-if="element.dataType === 'string'">
<el-form-item label="字符串处理类型">
<el-select v-model="element.stringProcessType" size="mini" style="width: 100%;">
<el-option label="无处理" value="none" />
<el-option label="截取前面字符" value="substring_start" />
<el-option label="截取后面字符" value="substring_end" />
<el-option label="按字符分割" value="split" />
<el-option label="替换字符" value="replace" />
</el-select>
</el-form-item>
<template v-if="element.stringProcessType === 'substring_start'">
<el-form-item label="截取前面位数">
<el-input
v-model="element.substringStartLength"
:min="1"
:max="1000"
controls-position="right"
size="mini"
placeholder="截取前面多少位"
/>
</el-form-item>
</template>
<template v-if="element.stringProcessType === 'substring_end'">
<el-form-item label="截取后面位数">
<el-input
v-model="element.substringEndLength"
:min="1"
:max="1000"
controls-position="right"
size="mini"
placeholder="截取后面多少位"
/>
</el-form-item>
</template>
<template v-if="element.stringProcessType === 'split'">
<div class="form-row">
<el-form-item label="分割字符" class="form-item-half">
<el-input
v-model="element.splitCharacter"
size="mini"
placeholder="分割字符"
/>
</el-form-item>
<el-form-item label="取第几段" class="form-item-half">
<el-input
v-model="element.splitIndex"
:min="0"
:max="100"
controls-position="right"
size="mini"
placeholder="0表示第1段"
/>
</el-form-item>
</div>
</template>
<template v-if="element.stringProcessType === 'replace'">
<div class="form-row">
<el-form-item label="查找字符" class="form-item-half">
<el-input
v-model="element.replaceFrom"
size="mini"
placeholder="要替换的字符"
/>
</el-form-item>
<el-form-item label="替换为" class="form-item-half">
<el-input
v-model="element.replaceTo"
size="mini"
placeholder="替换成的字符"
/>
</el-form-item>
</div>
</template>
</template>
</el-form>
</div>
@ -302,6 +467,12 @@ export default {
components: {
comShowLabelSerialInfo,/*标签内容流水号信息的組件*/
},
mounted() {
// 初始化数据类型
if (this.element.type === 'text' && !this.element.dataType) {
this.$set(this.element, 'dataType', 'text')
}
},
watch: {
// 监听元素变化，确保文件输入框状态正确
'element.id'() {
@ -314,6 +485,27 @@ export default {
}
},
methods: {
onDataTypeChange(newType) {
// 重置相关设置
if (newType === 'date') {
this.$set(this.element, 'dateExtractType', 'full')
this.$set(this.element, 'dateFormat', 'ymd')
this.$set(this.element, 'dateSeparator', '-')
this.$set(this.element, 'yearDigits', '4')
this.$set(this.element, 'monthDayDigits', '2')
this.$set(this.element, 'firstWeekDate', '')
this.$set(this.element, 'firstDayOfWeek', '1')
} else if (newType === 'string') {
this.$set(this.element, 'stringProcessType', 'none')
this.$set(this.element, 'substringStartLength', '')
this.$set(this.element, 'substringEndLength', '')
this.$set(this.element, 'splitCharacter', '')
this.$set(this.element, 'splitIndex', '0')
this.$set(this.element, 'replaceFrom', '')
this.$set(this.element, 'replaceTo', '')
}
},
handleSelectImage() {
// 确保文件输入框被重置，然后触发点击
if (this.$refs.fileInput) {

2
src/views/modules/labelSetting/components/PropertyPanel.vue
View File

@ -160,7 +160,7 @@ export default {
.property-form {
flex: 0 0 auto;
max-height: 250px;
max-height: 380px;
overflow-y: auto;
}

5
src/views/modules/labelSetting/components/ZPLPreview.vue
View File

@ -25,7 +25,7 @@
<el-button
type="warning"
size="mini"
icon="el-icon-data-analysis"
icon="el-icon-document"
:loading="realDataPreviewLoading"
@click="generateRealDataPreview"
class="compact-btn"
@ -212,7 +212,7 @@ export default {
canvasSize: {
handler() {
console.log('画布尺寸变化，触发预览更新:', this.canvasSize)
this.debouncedPreview()
//this.debouncedPreview()
},
deep: true
},
@ -526,7 +526,6 @@ export default {
.button-row {
display: flex;
gap: 10px;
align-items: stretch;
justify-content: space-between;
}

Write Preview
Loading…
Cancel
Save