脚本弹窗样式修改

src/views/demo/form-design/components/VFormDesign/components/ComponentProps.vue

@@ -135,16 +135,22 @@
     :useWrapper="false"
     @ok="handleSubmit"
   >
-    <div style="display: flex">
-      <div class="w-1/2 xl:w-1/2" style="overflow: auto; height: calc(100%)">
-        <a-textarea v-model:value="formContent" :rows="29" />
+    <div class="alertModal">
+      <div class="alertModal_content">
+        <a-textarea
+          v-model:value="formContent"
+          autosize
+          :auto-size="{ minRows: 22, maxRows: 22 }"
+        />
       </div>
-      <div class="w-1/2 xl:w-1/2" style="overflow: auto; height: calc(100%)">
-        <a-alert message="脚本参数说明" type="warning">
-          <template #description>
-            <div v-html="description"></div>
-          </template>
-        </a-alert>
+      <div class="alertModal_content">
+        <a-textarea
+          class="alertModal_content-textarea"
+          v-model:value="formItemPropsScript"
+          autosize
+          readOnly
+          :auto-size="{ minRows: 22, maxRows: 22 }"
+        />
       </div>
     </div>
   </BasicModal>
@@ -180,7 +186,7 @@
   import { IBaseFormAttrs } from '../config/formItemPropsConfig';
   import { getOutKeyList } from '@/api/formdesign/index';
   import { BasicModal, useModal } from '@/components/Modal';
-  import { formItemPropsScript, addBreakLines } from '../../VFormDesign/config/formItemPropsScript';
+  import { formItemPropsScript } from '../../VFormDesign/config/formItemPropsScript';
 
   export default defineComponent({
     name: 'ComponentProps',
@@ -434,7 +440,6 @@
       });
       // 脚本
       const formContent: any = ref('');
-      const description = addBreakLines(formItemPropsScript);
       // 脚本窗口
       const [buttonScriptModal, { openModal, closeModal }] = useModal();
       // 点击脚本按钮
@@ -495,7 +500,7 @@
         fetch,
         BasicModal,
         formContent,
-        description,
+        formItemPropsScript,
         buttonScriptModal,
         openModal,
         closeModal,
@@ -505,3 +510,23 @@
     },
   });
 </script>
+
+<style lang="less" scoped>
+  .alertModal {
+    display: flex;
+    background-color: @border-color-base;
+
+    &_content {
+      width: 50%;
+      padding: 1px;
+
+      &-textarea {
+        // @if @border-color-base == #141414 {
+        background-color: @border-color-base;
+        // } @else  {
+        //   background-color: #fffbe6;
+        // }
+      }
+    }
+  }
+</style>

src/views/demo/form-design/components/VFormDesign/components/FormProps.vue

@@ -113,16 +113,22 @@
     :width="1000"
     @ok="handleSubmit"
   >
-    <div style="display: flex">
-      <div class="w-1/2 xl:w-1/2" style="overflow: auto; height: calc(100%)">
-        <a-textarea v-model:value="formContent" :rows="29" />
+    <div class="alertModal">
+      <div class="alertModal_content">
+        <a-textarea
+          v-model:value="formContent"
+          autosize
+          :auto-size="{ minRows: 22, maxRows: 22 }"
+        />
       </div>
-      <div class="w-1/2 xl:w-1/2" style="overflow: auto; height: calc(100%)">
-        <a-alert message="脚本参数说明" type="warning">
-          <template #description>
-            <div v-html="description"></div>
-          </template>
-        </a-alert>
+      <div class="alertModal_content">
+        <a-textarea
+          class="alertModal_content-textarea"
+          v-model:value="formItemPropsScript"
+          autosize
+          readOnly
+          :auto-size="{ minRows: 22, maxRows: 22 }"
+        />
       </div>
     </div>
   </BasicModal>
@@ -130,7 +136,7 @@
 <script lang="ts" setup name="FormProps">
   import { ref, computed } from 'vue';
   import { BasicModal, useModal } from '@/components/Modal';
-  import { formItemPropsScript, addBreakLines } from '../../VFormDesign/config/formItemPropsScript';
+  import { formItemPropsScript } from '../../VFormDesign/config/formItemPropsScript';
   import { useFormDesignState } from '../../../hooks/useFormDesignState';
   import {
     InputNumber,
@@ -169,7 +175,6 @@
   let formTitle: any = ref('');
   let btnClickEvent_now = '';
   let formContent: any = ref('');
-  let description = addBreakLines(formItemPropsScript);
   // 脚本窗口
   const [propsScriptModal, { openModal, closeModal }] = useModal();
   // 点击脚本按钮
@@ -250,3 +255,23 @@
     return flag;
   }
 </script>
+
+<style lang="less" scoped>
+  .alertModal {
+    display: flex;
+    background-color: @border-color-base;
+
+    &_content {
+      width: 50%;
+      padding: 1px;
+
+      &-textarea {
+        // @if @border-color-base == #141414 {
+        background-color: @border-color-base;
+        // } @else  {
+        //   background-color: #fffbe6;
+        // }
+      }
+    }
+  }
+</style>

src/views/demo/form-design/components/VFormDesign/config/formItemPropsScript.ts

@@ -1,8 +1,8 @@
-export const formItemPropsScript = `
+export const formItemPropsScript = `脚本参数说明
 // 获取表单是新增还是编辑
-var isUpdate = utils.isUpdate();
+let update = utils.isUpdate();
 // 组件变更数据
-var data = utils.data();
+let data = utils.data();
 
 // 数据设置
 // 获取主表数据
@@ -20,7 +20,6 @@ subTableList.value = addChildValue('组件的字段标识', '旧value', '新valu
 // 删除子表数据
 subTableList.value = deleteChildValue('组件的字段标识', 'value');
 
-
 // 组件设置
 // 设置组件为隐藏
 formColumns.value = utils.setHide('组件的字段标识', false);
@@ -38,7 +37,7 @@ formColumns.value = utils.setRequired('组件的字段标识', false);
 // 功能设置
 // 提示消息
 utils.message('提示信息', '提示类型');
-提示类型：success（成功）、error（错误）、warn（警告）、info（默认）\
+提示类型：success（成功）、error（错误）、warn（警告）、info（默认）
 // 获取登录者信息
 var loginUser = utils.loginUser();
 loginUser返回值为{ account: 账号, name: 姓名 }
@@ -59,10 +58,3 @@ url:api地址, params:参数
 let resPut = await utils.httpPut(url, params);
 url:api地址, params:参数
 `;
-
-export function addBreakLines(text: string): string {
-  // 根据换行符分割文本为行
-  const lines = text.split(/\r?\n/);
-  // 在每行后面添加
-  return lines.map((line) => line + '<br />').join('');
-}