N_XLXSBJ----MX/BJCPJXDR_BZYF.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>线缆型号语法设置</title>
    <link rel="stylesheet" href="images/YFGZ.css">
    <script src="images/vue.global.prod.js"></script>
    <script src="images/index.full.min.js"></script>
    <link rel="stylesheet" href="images/BJCPJXDR_XHYF.css">
</head>
<body>
    <div id="app">
        <div class="syntax-container">
            <header class="syntax-header">
                <div class="header-left">
                    <div class="app-icon">
                        <i class="el-icon-link"></i>
                    </div>
                    <div class="app-title">
                        <h1>{{title}}</h1>
                    </div>
                </div>
            </header>
            
            <div class="syntax-body">
                <div class="info-group">
                    <div class="info-group-title">
                        <h2>标记串</h2>
                    </div>
                    <div class="input-group">
                        <textarea 
                            v-model="filteredMarkString" 
                            class="input-field textarea"
                            placeholder="例如：[型号码=YJLW][后缀码=03][前缀码=ZC][后缀码=Z]"
                            readonly></textarea>
                    </div>
                </div>
                
                <div class="info-group">
                    <div class="info-group-title">
                        <h2>语法串</h2>
                    </div>
                    <div class="input-group">
                        <div style="position: relative;">
                            <textarea 
                                ref="syntaxEditor"
                                v-model="syntaxString" 
                                class="input-field textarea"
                                placeholder="例如：[前缀码c][型号码a][后缀码b][后缀码d]"
                                @click="updateCursorPosition"
                                @keyup="updateCursorPosition"
                                @input="updateActualValue"></textarea>
                        
                        </div>
                    </div>
                </div>
                
                <div class="info-group">
                    <div class="info-group-title">
                        <h2>标记控制</h2>
                    </div>
                    <div class="mark-controls">
                        <button class="mark-btn" @click="moveMarkForward">
                            <i class="el-icon-back"></i>前移标记字
                        </button>
                        <button class="mark-btn" @click="moveMarkBackward">
                            <i class="el-icon-right"></i>后移标记字
                        </button>
                        <button class="mark-btn" @click="openInsertMarkDialog">
                            <i class="el-icon-plus"></i>插入标记字
                        </button>
                        <button class="mark-btn" @click="deleteMark">
                            <i class="el-icon-delete"></i>删除标记字
                        </button>
                        <button class="mark-btn" @click="openInsertConnectorDialog">
                            <i class="el-icon-connection"></i>插入链接符
                        </button>
                        <button class="mark-btn" @click="deleteConnector">
                            <i class="el-icon-remove"></i>删除链接符
                        </button>
                    </div>
                </div>
                
                <div class="result-display">
                    <div class="info-group-title">
                        <h2>实际值</h2>
                    </div>
                    
                    <div class="result-item">
                        <div class="result-label">当前实际值</div>
                        <div class="result-value">
                            <span class="highlight">{{ actualValue || '待生成...' }}</span>
                        </div>
                    </div>
                </div>
                
                <div class="action-buttons">
                    <button class="action-btn btn-default" @click="resetForm">
                        <i class="el-icon-refresh"></i> 重置
                    </button>
                    <button class="action-btn btn-primary" @click="saveSyntax">
                        <i class="el-icon-document-checked"></i> 保存
                    </button>
                </div>
            </div>

        </div>
        
       <!-- 插入标记字对话框 -->
       <el-dialog 
       v-model="showMarkDialog" 
       width="600px"
       height="800px"
       custom-class="mark-dialog"
       :close-on-click-modal="false"
       :show-close="false">
       <template #header>
           <div class="mark-dialog-header">
               <i class="el-icon-circle-plus"></i>
               插入标记字
           </div>
       </template>
       
       <div class="mark-dialog-body">
           <div class="input-group">
               <label>请选择要插入的标记字：</label>
               <div class="mark-options">
                   <div 
                       v-for="(mark, index) in availableMarks" 
                       :key="index"
                       class="mark-option"
                       @click="insertSelectedMark(mark)">
                       {{ mark }}
                   </div>
               </div>
           </div>
       </div>
       
       <template #footer>
           <div class="dialog-footer">
               <el-button 
                   type="danger" 
                   size="small" 
                   @click="showMarkDialog = false"
                   plain
                   >
                   取 消
               </el-button>
           </div>
       </template>
   </el-dialog>
   
   <!-- 插入链接符对话框 -->
   <el-dialog 
       v-model="showConnectorDialog" 
       width="600px"
       height="800px"
       custom-class="connector-dialog"
       :close-on-click-modal="false"
       :show-close="false">
       <template #header>
           <div class="connector-dialog-header">
               <i class="el-icon-connection"></i>
               插入链接符
           </div>
       </template>
       
       <div class="connector-dialog-body">
        <div class="input-group">
            <el-form-item label="插入链接符：" required class="form-item">
            <el-select
                v-model="selectedConnector"
                class="full-width custom-input-select"
                filterable
                allow-create
                clearable
                placeholder="输入或选择链接符"
                :loading="loadingConnectors"
                @change="handleConnectorChange"
            >
                <!-- 静态选项：预定义连接符 -->
                <el-option
                    v-for="connector in predefinedConnectors"
                    :key="connector"
                    :label="connector"
                    :value="connector"
                />
                
                <!-- 自定义输入选项 -->
                <el-option
                    v-if="customConnector && !predefinedConnectors.includes(customConnector)"
                    :key="'custom-' + customConnector"
                    :label="customConnector + ' (自定义)'"
                    :value="customConnector"
                />
            </el-select>
        </el-form-item>
        </div>
    </div>
       
       <template #footer>
           <div class="dialog-footer">
            <el-button 
                type="primary" 
                size="small" 
                @click="showConnectorDialog = false"
                plain
                >
                取 消
                </el-button>
               <el-button 
                   type="danger" 
                   size="small" 
                   @click="insertSelectedConnector(selectedConnector)"
                   plain
                   >
                   插 入
               </el-button>
              
           </div>
       </template>
   </el-dialog>
</div>
    <script src='images/BJCPJXDR_XHYF.js?ver=<%=GThinking.N_MISPROAS.Web.ResFile.GetVer("Q_YCGL8") %>'></script>
    <script>
</body>
</html>