From 2f2e6923f7c422b5bf731966892b7e2c710f3c7d Mon Sep 17 00:00:00 2001
From: "han\\hanst" <songtao.han@xujiesoft.com>
Date: Mon, 18 Aug 2025 09:42:10 +0800
Subject: [PATCH] =?UTF-8?q?=E6=97=A5=E6=9C=9F=E5=AD=97=E7=AC=A6=E4=B8=B2?=
 =?UTF-8?q?=E7=AD=89=E6=95=B0=E6=8D=AE=E8=AE=BE=E7=BD=AE=E5=8F=82=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../labelSetting/components/PropertyForm.vue  | 206 +++++++++++++++++-
 .../labelSetting/components/PropertyPanel.vue |   6 +-
 .../labelSetting/components/ZPLPreview.vue    |   5 +-
 3 files changed, 204 insertions(+), 13 deletions(-)

diff --git a/src/views/modules/labelSetting/components/PropertyForm.vue b/src/views/modules/labelSetting/components/PropertyForm.vue
index b6c72d1..5c1c7aa 100644
--- a/src/views/modules/labelSetting/components/PropertyForm.vue
+++ b/src/views/modules/labelSetting/components/PropertyForm.vue
@@ -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) {
diff --git a/src/views/modules/labelSetting/components/PropertyPanel.vue b/src/views/modules/labelSetting/components/PropertyPanel.vue
index c557099..276f850 100644
--- a/src/views/modules/labelSetting/components/PropertyPanel.vue
+++ b/src/views/modules/labelSetting/components/PropertyPanel.vue
@@ -85,11 +85,11 @@ export default {
         this.$set(this.selectedElement, 'previewUrl', imageData.previewUrl)
       }
     },
-    
+
     handleAutoSave(callback) {
       // 触发保存事件到最顶层的LabelDesigner组件
       this.$emit('save')
-      
+
       // 模拟保存完成（实际应该等待保存API返回）
       setTimeout(() => {
         if (callback && callback.success) {
@@ -160,7 +160,7 @@ export default {
 
 .property-form {
   flex: 0 0 auto;
-  max-height: 250px;
+  max-height: 380px;
   overflow-y: auto;
 }
 
diff --git a/src/views/modules/labelSetting/components/ZPLPreview.vue b/src/views/modules/labelSetting/components/ZPLPreview.vue
index 426548f..b2241db 100644
--- a/src/views/modules/labelSetting/components/ZPLPreview.vue
+++ b/src/views/modules/labelSetting/components/ZPLPreview.vue
@@ -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;
 }