指令配置页面 添加XML格式查看

PHM-web/src/api/manage/orderConfig.js

@@ -17,6 +17,14 @@ export function getOrderConfig(ID) {
   })
 }
 
+// 查询指令配置详细XML
+export function getOrderConfigXml(ID) {
+  return request({
+    url: '/manage/orderConfig/xml/' + ID,
+    method: 'get'
+  })
+}
+
 // 新增指令配置
 export function addOrderConfig(data) {
   return request({

PHM-web/src/views/manage/instructionInfo/Editor.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <codemirror v-model="content" :options="editorOptions" @input="handletextContentChange" class="content"></codemirror>
+    <codemirror v-model="content" :options="editorOptions" @input="handleTextContentChange" class="content"></codemirror>
     <div slot="footer" class="dialog-footer">
       <div class="left">
         <el-button type="primary" @click="formateXml(content)">格式化</el-button>
@@ -59,7 +59,7 @@ export default {
     }
   },
   methods:{
-    handletextContentChange(textContent) {
+    handleTextContentChange(textContent) {
       // 在这里处理 XML 内容的变化
       // console.log(textContent)
     },

PHM-web/src/views/manage/orderConfig/index.vue

@@ -39,7 +39,11 @@
     <el-table v-loading="loading" :data="orderConfigList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="指令编码" align="center" prop="orderCode" />
-      <el-table-column label="指令名称" align="center" prop="name" />
+      <el-table-column label="指令名称" align="center" prop="name" >
+        <template slot-scope="scope">
+          <span class="query-c" @click="queryXml(scope.row)">{{ scope.row.name}}</span>
+        </template>
+      </el-table-column>
       <el-table-column label="指令类型" align="center" prop="type" />
       <el-table-column label="架次" align="center" prop="sortie" />
       <el-table-column label="步长" align="center" prop="step" />
@@ -73,7 +77,7 @@
     <el-dialog :title="title" :visible.sync="open" :close-on-click-modal="false" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="100px">
         <el-form-item label="指令编码" prop="orderCode">
-          <el-input v-model="form.orderCode" placeholder="请输入指令编码" :disabled="form.id" />
+          <el-input v-model="form.orderCode" placeholder="请输入指令编码" :disabled="form.id !== null " />
         </el-form-item>
         <el-form-item label="指令名称" prop="name">
           <el-select v-model="form.name" placeholder="请选择指令状态" style="width:100%" @change="change">
@@ -99,6 +103,10 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+    <!-- 添加或修改指令配置对话框 -->
+    <el-dialog :title="title" :visible.sync="openXml" :close-on-click-modal="false" width="900px" append-to-body>
+      <Editor :textContent='xmlText' :dataType='"XML"' v-if="openXml"/>
+    </el-dialog>
   </div>
 </template>
 
@@ -109,10 +117,14 @@ import {
   delOrderConfig,
   addOrderConfig,
   updateOrderConfig,
+  getOrderConfigXml,
 } from '@/api/manage/orderConfig'
-
+import Editor from '@/views/manage/instructionInfo/Editor'
 export default {
   name: 'OrderConfig',
+  components: {
+    Editor
+  },
   dicts: ['order_type'],
   data() {
     return {
@@ -134,6 +146,10 @@ export default {
       title: '',
       // 是否显示弹出层
       open: false,
+      // 是否显示弹出层
+      openXml: false,
+      // xml结果
+      xmlText: '',
       // 查询参数
       queryParams: {
         pageNum: 1,
@@ -224,6 +240,18 @@ export default {
         this.title = '修改指令配置'
       })
     },
+    /** 查询 */
+    queryXml(row) {
+      this.reset()
+      const id = row.id || this.ids
+      getOrderConfigXml(id).then(response => {
+        this.xmlText = response.data
+        // XML
+        console.log('response', response.data)
+        this.openXml = true
+        this.title = 'XML详情'
+      })
+    },
     /** 提交按钮 */
     submitForm() {
       this.$refs['form'].validate(valid => {
@@ -271,3 +299,9 @@ export default {
   },
 }
 </script>
+<style scoped>
+.query-c {
+  color: #1890ff;
+  cursor: pointer;
+}
+</style>