0

public/mg/yjbdc_articles.html

@@ -452,9 +452,9 @@
                     <span class="json-string editable"
                         @dblclick="editValue(selectedArticle, 'ArticleStart', 'ArticleStart')">
                         <template v-if="editingKey === 'ArticleStart'">
-                            <input type="text" class="json-editor-input"
+                            <textarea class="json-editor-input" rows="4"
                                 v-model="selectedArticle.ArticleStart" @blur="finishEdit" @keyup.enter="finishEdit"
-                                v-focus>
+                                v-focus></textarea>
                         </template>
                         <template v-else>
                             "{{ selectedArticle.ArticleStart }}"
@@ -572,7 +572,7 @@
                     <span class="json-string editable"
                         @dblclick="editValue(selectedArticle, 'JSONString', 'JSONString')">
                         <template v-if="editingKey === 'JSONString'">
-                            <textarea class="json-editor-input" v-model="selectedArticle.JSONString"
+                            <textarea class="json-editor-input" rows="20" v-model="selectedArticle.JSONString"
                                 @blur="finishEdit" @keyup.enter="finishEdit" v-focus></textarea>
                         </template>
                         <template v-else>
@@ -654,15 +654,77 @@
                     this.selectedArticle = null;
                 },
                 editValue(obj, key, editingKey) {
-                    this.editingKey = editingKey;
+                    // 如果是编辑JSON字符串，则格式化显示
+                    if (key === 'JSONString' && obj[key]) {
+                        try {
+                            // 先设置编辑状态，确保文本框显示
+                            this.editingKey = editingKey;
+                            // 延迟执行格式化，确保文本框已渲染
+                            this.$nextTick(() => {
+                                try {
+                                    // 尝试解析JSON并格式化
+                                    let jsonObj;
+                                    try {
+                                        // 尝试双重解析（处理可能被双重编码的情况）
+                                        jsonObj = JSON.parse(JSON.parse(obj[key]));
+                                    } catch (err) {
+                                        // 如果双重解析失败，尝试单次解析
+                                        jsonObj = JSON.parse(obj[key]);
+                                    }
+                                    // 使用Vue的$set方法确保响应式更新
+                                    this.$set(obj, key, JSON.stringify(jsonObj, null, 4));
+                                } catch (e) {
+                                    // 如果解析失败，保持原样
+                                    console.error('JSON解析失败:', e);
+                                }
+                            });
+                        } catch (e) {
+                            // 如果解析失败，保持原样
+                            console.error('JSON解析失败:', e);
+                            this.editingKey = editingKey;
+                        }
+                    } else {
+                        // 非JSON字段直接设置编辑状态
+                        this.editingKey = editingKey;
+                    }
                 },
                 finishEdit() {
+                    // 如果是编辑JSON字符串，则在完成编辑时转回紧凑格式
+                    if (this.editingKey === 'JSONString' && this.selectedArticle && this.selectedArticle.JSONString) {
+                        try {
+                            // 尝试解析格式化的JSON并转回紧凑格式
+                            const jsonObj = JSON.parse(this.selectedArticle.JSONString);
+                            // 使用Vue的$set方法确保响应式更新
+                            // 保存时需要确保JSON字符串被正确转义
+                            this.$set(this.selectedArticle, 'JSONString', JSON.stringify(jsonObj));
+                        } catch (e) {
+                            // 如果解析失败，保持原样
+                            console.error('JSON解析失败:', e);
+                        }
+                    }
                     this.editingKey = null;
                 },
                 saveArticle() {
                     if (!this.selectedArticle) return;
                     this.isDetailLoading = true;
                     this.selectedArticle.Source = "web";
+                    
+                    // 确保JSONString是紧凑格式
+                    if (this.selectedArticle.JSONString) {
+                        try {
+                            const jsonObj = JSON.parse(this.selectedArticle.JSONString);
+                            // 使用Vue的$set方法确保响应式更新
+                            // 保存时需要确保JSON字符串被正确转义
+                            this.$set(this.selectedArticle, 'JSONString', JSON.stringify(jsonObj));
+                        } catch (e) {
+                            console.error('JSON解析失败:', e);
+                            // 如果JSON格式不正确，提示用户并中止保存
+                            this.isDetailLoading = false;
+                            this.showToast('JSON格式不正确，请检查后重试', 'error');
+                            return;
+                        }
+                    }
+                    
                     $.ajax({
                         url: 'api/UpdateYJBDCArticle',
                         method: 'POST',