style: 字段调整

src/views/configManage/configParam/index.vue

@@ -8,6 +8,8 @@ import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { getParamConfigTopTab } from '@/api/configManage/configParam';
 import { TabPosition } from 'ant-design-vue/lib/tabs/src/interface';
 import useNeInfoStore from '@/store/modules/neinfo';
+import CodemirrorEdite from '@/components/CodemirrorEdite/index.vue';
+import CodemirrorEditeDiff from '@/components/CodemirrorEditeDiff/index.vue';
 const { t } = useI18n();
 const route = useRoute();
 
@@ -20,6 +22,57 @@ let queryParams = reactive({
   neType: [''],
 });
 
+/**参数对象信息状态类型 */
+type ParamStateType = {
+  /**进入编辑视图 */
+  visibleByEdit: boolean;
+  /**更新比较视图 */
+  visibleByUpdate: boolean;
+  /**标题 */
+  title: string;
+  /**新内容 */
+  newArea: string;
+  /**旧内容 */
+  oldArea: string;
+};
+
+/**参数对象信息状态 */
+let paramState: ParamStateType = reactive({
+  visibleByEdit: false,
+  visibleByUpdate: false,
+  title: '参数设置',
+  newArea: `database:
+  type: mysql
+  user: root 
+  password: "root@1234"
+  host: "192.168.2.170"
+  port: 3306
+  name: omc_db
+  backup: d:/local.git/ems.agt/restagent/database`,
+  oldArea: `database:
+  type: mysql
+  user: root 
+  password: "root@1234"
+  host: "192.168.2.170"
+  port: 3306
+  name: omc_db
+  backup: d:/local.git/ems.agt/restagent/database`,
+});
+
+/**
+ * 视图是否可编辑或更新
+ * @param noticeId 网元id, 不传为新增
+ */
+function fnModalVisible(type: 'edit' | 'update') {
+  if (type === 'edit') {
+    paramState.visibleByEdit = !paramState.visibleByEdit;
+  }
+  if (type === 'update') {
+    paramState.title = '比较参数';
+    paramState.visibleByUpdate = true;
+  }
+} 
+
 /**tab标签栏类型 */
 type TabStateType = {
   /**标签项 */
@@ -127,9 +180,33 @@ onMounted(() => {
             <template #icon><PlusOutlined /></template>
             {{ t('common.addText') }}
           </a-button>
+          <a-button type="primary" @click.prevent="fnModalVisible('edit')">
+            <template #icon><PlusOutlined /></template>
+            获取
+          </a-button>
+          <a-button type="primary" @click.prevent="fnModalVisible('edit')">
+            <template #icon><PlusOutlined /></template>
+            修改
+          </a-button>
+          <a-button type="primary" @click.prevent="fnModalVisible('update')">
+            <template #icon><PlusOutlined /></template>
+            提交
+          </a-button>
         </a-space>
       </template>
 
+      <CodemirrorEdite
+        v-model:value="paramState.newArea"
+        :disabled="!paramState.visibleByEdit"
+      ></CodemirrorEdite>
+
+      <CodemirrorEditeDiff
+        v-model:visible="paramState.visibleByUpdate"
+        :title="paramState.title"
+        :new-area="paramState.newArea"
+        :old-area="paramState.oldArea"
+      ></CodemirrorEditeDiff>
+
       <a-tabs
         v-model:activeKey="tabState.tabActiveKey"
         :tab-position="tabState.tabPosition"

src/views/configManage/softwareManage/index.vue

@@ -229,7 +229,7 @@ type ModalStateType = {
   /**新增框或修改框是否显示 */
   visibleByEdit: boolean;
   /**网元版本历史框是否显示 */
-  visibleByhistory: boolean;
+  visibleByHistory: boolean;
   /**标题 */
   title: string;
   /**表单数据 */
@@ -241,7 +241,7 @@ type ModalStateType = {
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
   visibleByEdit: false,
-  visibleByhistory: false,
+  visibleByHistory: false,
   title: '任务设置',
   from: {
     neType: '',
@@ -331,7 +331,7 @@ function fnModalCancel() {
  * 对话框弹出显示为 网元版本信息
  */
 function fnModalVisibleByHistory() {
-  modalState.visibleByhistory = true;
+  modalState.visibleByHistory = true;
 }
 
 /**上传前检查或转换压缩 */
@@ -649,7 +649,7 @@ onMounted(() => {
     <!-- 分配用户选择框 -->
     <SoftwareHistory
       title="查询网元版本信息"
-      v-model:visible="modalState.visibleByhistory"
+      v-model:visible="modalState.visibleByHistory"
       @ok="fnModalOk"
     />
   </PageContainer>