Explorar el Código

fix: 样式调整2

liuc hace 3 meses
padre
commit
e257d6de95

+ 16 - 4
src/views/flow/stDataModel/index.vue

@@ -7,10 +7,10 @@
       <a-button style="margin-right: 30px" @click="publishField" type="primary"> 发布</a-button>
     </div>
     <div class="table-data">
-      <a-table size="middle" :pagination="false" :columns="columns" :data-source="data" :defaultExpandAllRows="true"
+      <a-table size="small" :pagination="false" :columns="columns" :data-source="data" :defaultExpandAllRows="true"
                :scroll="{ y: tableHeight  }" :loading="loading">
         <template #bodyCell="{ column, text, record, index }">
-          <span v-if="column.key === 'seq'">{{ index + 1 }}</span>
+          <span v-if="column.key === 'seq'">{{ record.seq }}</span>
           <span v-if="['name','code'].includes(column.key)" style="font-size: 16px">{{ text }}</span>
           <a style="font-size: 16px" v-if="column.key === 'type'">
             <span v-if="text == 'STRING'">短文本</span>
@@ -67,9 +67,9 @@ import SmartFieldDialog from '/@/views/flow/stDataModel/components/SmartFieldDia
 const columns = [
   {
     title: '序号',
-    width: 80,
+    width: 100,
     dataIndex: 'seq',
-    align: 'center',
+    align: 'left',
     key: 'seq',
   },
   {
@@ -141,6 +141,17 @@ export default defineComponent({
     this.tableHeight = window.innerHeight - 246;
   },
   methods: {
+    generateSequence(nodes, parentSeq = '') {
+      nodes.forEach((node, index) => {
+        const seq = parentSeq ? `${parentSeq}-${index + 1}` : `${index + 1}`;
+        node.seq = seq;
+        node.key = seq;
+        if (node.children && node.children.length > 0) {
+          this.generateSequence(node.children, seq); // 递归为子节点生成序号
+        }
+      });
+    },
+
     handleRem(row, dr) {
       if (dr == 'up') {
         this.moveNodeUp(row);
@@ -221,6 +232,7 @@ export default defineComponent({
           this.initializeTreeData(node.children);
         }
       });
+      this.generateSequence(this.data);
     },
     chargeCanTrance(column, record) {
       const parentExists = this.data.some(item => {

+ 14 - 2
src/views/flow/stFormDesign/packages/StFormDesign/module/formComponentPanel.vue

@@ -4,9 +4,16 @@
 <template>
   <div class="form-panel">
     <p class="hint-text" v-show="data.list.length === 0">
-      <a-empty description="从左侧选择控件添加"/>
+      <a-space>
+        <a-spin/>
+        加载中,请稍后... ...
+      </a-space>
+      <a-skeleton class="form-skeleton" active/>
+      <a-skeleton class="form-skeleton" active/>
+      <a-skeleton class="form-skeleton" active/>
+      <a-skeleton class="form-skeleton" active/>
+      <a-skeleton class="form-skeleton" active/>
     </p>
-
     <a-form
         class="a-form-box k-form-build"
         :model="form"
@@ -556,3 +563,8 @@ export default defineComponent({
   },
 });
 </script>
+<style scoped>
+.form-skeleton {
+  margin-bottom: 20px;
+}
+</style>

+ 15 - 1
src/views/flow/stFormDesign/packages/StFormDesign/module/formComponentPanelMobile.vue

@@ -7,7 +7,15 @@
     <div class="mobile-page-content">
       <div class="form-panel">
         <p class="hint-text" v-show="data.list.length === 0">
-          <a-empty description="从左侧选择控件添加"/>
+          <a-space>
+            <a-spin/>
+            加载中,请稍后... ...
+          </a-space>
+          <a-skeleton class="form-skeleton" active/>
+          <a-skeleton class="form-skeleton" active/>
+          <a-skeleton class="form-skeleton" active/>
+          <a-skeleton class="form-skeleton" active/>
+          <a-skeleton class="form-skeleton" active/>
         </p>
         <a-form
             class="a-form-box k-form-build"
@@ -533,4 +541,10 @@ export default defineComponent({
     border-radius: 0 0 19px 19px;
   }
 }
+.form-skeleton{
+  margin-bottom: 20px;
+}
+.hint-text{
+  padding-top: 720px;
+}
 </style>

+ 10 - 10
src/views/flow/stFormDesign/packages/StFormDesign/module/formItemProperties.vue

@@ -83,7 +83,7 @@
         <!--        <a-form-item v-if="typeof options.width !== 'undefined'&&!isInBatchTable" label='宽度'>-->
         <!--          <a-input placeholder='请输入' v-model:value='options.width'/>-->
         <!--        </a-form-item>-->
-        <a-form-item v-if="isInBatchTable&&selectItem.type != 'text'">
+        <a-form-item v-if="isInBatchTable">
           <template #label>
             <span style="display: inline-flex; align-items: center;">
               <a-tooltip placement="topLeft">
@@ -714,17 +714,17 @@ import JsModal from './jsModal.vue'
 import cloneDeep from 'lodash.clonedeep';
 
 function hasBatchParent(code, jsonData) {
-  if (code && code.indexOf('html_') >= 0) {
-    return false
-  }
-  // 遍历jsonData中的每个元素
-  for (const item of jsonData) {
-    // 检查当前元素是否为batch类型
-    if (item.code === code) {
-      return false
+  const childCodes = []
+  for (let item of jsonData) {
+    if (item.children != null && item.children.length > 0) {
+      childCodes.push(...item.children)
     }
   }
-  return true
+  if (childCodes.find(item => item.code == code)) {
+    return true
+  } else {
+    return false
+  }
 }
 
 export default {

+ 2 - 1
src/views/flow/stFormDesign/packages/StFormDesign/module/formProperties.vue

@@ -212,7 +212,7 @@ export default {
   methods: {
     eventClk(item, uuid) {
       this.$refs.jsModal.title = item.name;
-      this.$refs.jsModal.show(uuid, item);
+      this.$refs.jsModal.show(uuid, item,'0');
     },
 
     preViewCodeHandler() {
@@ -253,4 +253,5 @@ export default {
   justify-content: center; /* 水平居中对齐 */
   padding-top: 6px;
 }
+
 </style>

+ 38 - 18
src/views/flow/stFormDesign/packages/StFormDesign/module/jsModal.vue

@@ -8,15 +8,21 @@
           class="tabs-content-pane"
           v-for="(item, index) in customEvents"
           :key="item.key"
-          :tab="item.name"
           :disabled="!item.isShow"
-      ></a-tab-pane>
+      >
+        <template #tab>
+        <span>
+         <CopyrightCircleOutlined  v-show="getEvent(item.key)"/>
+          {{item.name}}
+        </span>
+        </template>
+      </a-tab-pane>
     </a-tabs>
-    <div class="code-content" :style="{ height: `calc(100vh - ${type === '0' ? '120' : '80'}px)` }">
+    <div class="code-content" :style="{ height: `calc(100vh - ${type == '0' ? '120' : '65'}px)` }">
       <div class="editor-wrapper">
         <div class="editor-left">
           <a-collapse v-model:activeKey="expandedKeys" style="width: 100%; height: 100%; overflow: auto">
-            <a-collapse-panel key="1" header="表单数据快捷代码(双击获取)">
+            <a-collapse-panel key="1" header="表单数据快捷代码(双击获取)" class="custom-collapse-panel">
               <a-tree
                   show-icon
                   :tree-line="true"
@@ -88,25 +94,26 @@
               @asyncGetEditor="getEditor"
               v-model:modelValue="editorJsCode"
               width="100%"
-              height="100%"
+              height="calc(100% - 30px)"
               language="javascript"
               :editorOptions="editorOptions"
               ref="MonacoEditorRef"
           />
+          <div class="copy-btn-box">
+            <a-button @click="copyCode" data-clipboard-action="copy" :data-clipboard-text="editorJsCode" type="dashed"
+                      class="copy-btn">
+              复制代码
+            </a-button>
+            <a-button @click="saveCode" type="primary" :loading="submitLoading"> 保存(Ctrl
+              + S)
+            </a-button>
+            <a-button @click="viewCode" type="dashed" class="copy-btn"> 查看历史</a-button>
+          </div>
         </a-spin>
         <CodeHistory :activekey="activeKey" :config="config" ref="codeHistory"/>
       </div>
 
-      <div class="copy-btn-box">
-        <a-button @click="copyCode" data-clipboard-action="copy" :data-clipboard-text="editorJsCode" type="dashed"
-                  class="copy-btn">
-          复制代码
-        </a-button>
-        <a-button @click="saveCode" type="primary" :loading="submitLoading"> 保存(Ctrl
-          + S)
-        </a-button>
-        <a-button @click="viewCode" type="dashed" class="copy-btn"> 查看历史</a-button>
-      </div>
+
     </div>
   </a-drawer>
 </template>
@@ -202,6 +209,7 @@ export default {
       expandedKeys: ['1'],
       editor: null,
       currentJsCode: '',
+      type: '0',
     };
   },
   async mounted() {
@@ -214,13 +222,15 @@ export default {
     },
   },
   methods: {
+    getEvent(key) {
+      return JSON.parse(sessionStorage.getItem('_scriptKeys_')).includes(key)
+    },
     viewCode() {
       this.$refs.codeHistory.showDrawer(this.activeKey);
     },
     copyFieldCode(code) {
 
     },
-
     onFSelect(value) {
       //记录点击次数
       this.treeClickCount++;
@@ -948,8 +958,14 @@ const commonParams = [
 
     .editor-left {
       width: 500px;
-      padding: 0 20px;
-      height: 100%;
+      height: calc(100% - 5px);
+      overflow-y: auto;
+      border: 1px solid #ccc; /* 添加灰色边框 */
+      border-radius: 8px; /* 添加圆角边框 */
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
+      background-color: #fff; /* 设置背景颜色 */
+      padding: 6px; /* 添加内边距 */
+      margin: 6px;
     }
   }
 }
@@ -965,4 +981,8 @@ const commonParams = [
 .header-des {
   color: #4fbf67;
 }
+.ant-tabs .ant-tabs-tab .anticon {
+  margin-right: 2px;
+}
+
 </style>

+ 4 - 0
src/views/flow/stFormDesign/packages/StFormDesign/module/layoutItem.vue

@@ -530,6 +530,7 @@ export default {
   font-size: 14px;
   z-index: 999;
   color: #2f54eb;
+  margin-bottom: 1px;
 }
 
 .batch-draggable-box {
@@ -574,4 +575,7 @@ export default {
   top: 0;
   background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJ0lEQVQoU2P8////JgYkcPPmTWQuAyMdFNy4cQPFDerq6qhuoL0CAIqmJ62d695IAAAAAElFTkSuQmCC);
 }
+.batch-box{
+  background-color: #fcf7ed;
+}
 </style>

+ 3 - 3
src/views/flow/stFormDesign/styles/form-design.less

@@ -1,10 +1,10 @@
 // 表单设计器样式
 @primary-color: #1677ff;
-@layout-color: #90c1e3;
+@layout-color: #76b3de;
 @danger-color: #f5222d;
 
 @primary-hover-bg-color: fade(@primary-color, 20%);
-@layout-background-color: fade(@layout-color, 12%);
+@layout-background-color: fade(@layout-color, 20%);
 @layout-hover-bg-color: fade(@layout-color, 24%);
 
 @title-text-color: #fff;
@@ -245,7 +245,7 @@
         position: relative;
 
         &.no-toolbars-top {
-          height: calc(100% - 100px);
+          height: calc(100% - 73px);
         }
 
         > .hint-text {