fix: 流程样式优化

src/views/flow/setting/mainSetting.vue

@@ -1,68 +1,97 @@
 <template>
   <div>
     <a-drawer
-        title='流程设置'
-        width='100%'
-        placement='right'
-        :open='visible'
-        @close='onClose'
-        :closable='true'
+        title="流程设置"
+        width="100%"
+        placement="right"
+        :open="visible"
+        @close="onClose"
+        :closable="true"
     >
       <div class="custom-drawer">
-        <a-collapse accordion>
-          <a-collapse-panel key='1' header='任务代理：'>
+        <a-collapse
+            v-model:activeKey="activeKey"
+            :bordered="false"
+            style="background: rgb(255, 255, 255)"
+        >
+          <template #expandIcon="{ isActive }">
+            <caret-right-outlined :rotate="isActive ? 90 : 0" />
+          </template>
+          <a-collapse-panel key="1" header="任务代理：" :style="customStyle">
             <FlowAgent></FlowAgent>
           </a-collapse-panel>
-          <a-collapse-panel key='2' header='数据字典：'>
+          <a-collapse-panel key="2" header="数据字典：" :style="customStyle">
             <DictIndex></DictIndex>
           </a-collapse-panel>
-          <a-collapse-panel key='3' header='业务服务：'>
-            <event-service></event-service>
+          <a-collapse-panel key="3" header="业务服务：" :style="customStyle">
+            <EventService></EventService>
           </a-collapse-panel>
-          <a-collapse-panel key='4' header='查询服务：'>
+          <a-collapse-panel key="4" header="查询服务：" :style="customStyle">
             <QueryService></QueryService>
           </a-collapse-panel>
-          <a-collapse-panel key='5' header='流程管理员：'>
+          <a-collapse-panel key="5" header="流程管理员：" :style="customStyle">
             <FlowAdministrator></FlowAdministrator>
           </a-collapse-panel>
-          <a-collapse-panel key='6' header='流程操作：'>
+          <a-collapse-panel key="6" header="流程操作：" :style="customStyle">
             <FlowOperation></FlowOperation>
           </a-collapse-panel>
         </a-collapse>
       </div>
-
     </a-drawer>
   </div>
 </template>
+
 <script>
-import FlowOperation from '/@/views/flow/setting/flowOperation.vue'
-import FlowAdministrator from '/@/views/flow/setting/flowAdministrator.vue'
-import FlowAgent from '/@/views/flow/setting/flowAgent.vue'
-import QueryService from '/@/views/flow/setting/queryService.vue'
-import EventService from '/@/views/flow/setting/eventService.vue'
-import DictIndex from '/@/views/support/dict/index.vue'
+import { ref } from "vue";
+import FlowOperation from "/@/views/flow/setting/flowOperation.vue";
+import FlowAdministrator from "/@/views/flow/setting/flowAdministrator.vue";
+import FlowAgent from "/@/views/flow/setting/flowAgent.vue";
+import QueryService from "/@/views/flow/setting/queryService.vue";
+import EventService from "/@/views/flow/setting/eventService.vue";
+import DictIndex from "/@/views/support/dict/index.vue";
 
 export default {
-  components: {QueryService, EventService, DictIndex, FlowAdministrator, FlowAgent,FlowOperation},
-  data() {
-    return {
-      visible: false
+  components: {
+    FlowOperation,
+    FlowAdministrator,
+    FlowAgent,
+    QueryService,
+    EventService,
+    DictIndex,
+  },
+  setup() {
+    const visible = ref(false);
+    const activeKey = ref(["0"]);
+    const customStyle = "background: #f8f9fa;border-radius: 4px;margin-bottom: 14px;border: 0;overflow: hidden";
+
+    const show = () => {
+      visible.value = true;
+    };
 
-    }
+    const onClose = () => {
+      visible.value = false;
+    };
+
+    return {
+      visible,
+      activeKey,
+      customStyle,
+      show,
+      onClose,
+    };
   },
-  methods: {
-    show() {
-      this.visible = true
-    },
-    onClose() {
-      this.visible = false
-    }
-  }
-}
+};
 </script>
+
 <style scoped>
 .custom-drawer {
-  height: 100%;
+  height: calc(100% - 32px);
   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: 16px; /* 添加内边距 */
+  margin: 16px;
 }
 </style>

src/views/flow/stFlowDesign/components/ConfigPanel/selectParticipant.vue

@@ -111,7 +111,7 @@ export default {
         },
         {
           title: '后台获取人员$GetByMethod(方法全路径)',
-          key: '$GetByMethod(com.cloud.sa.domain.FindParticipants.getUserCodes)'
+          key: '$GetByMethod(com.cloud.sa.demo.FindParticipants.getUserCodes)'
         }
       ],
       modal1Visible: false,

src/views/flow/stSetting/flowNumberPrefix.vue

@@ -1,9 +1,9 @@
 <template>
   <div class='container'>
-    <a-card class='curCard' title='流程单号前缀（例：BXD202001010001）' style='width: 100%'>
+    <a-card class='curCard' title='流程单号前缀（例：BXD202501000001）' style='width: 100%'>
       <a-row class='curRow' >
-        <a-col class='left-text' :span='1'>单号前缀：</a-col>
-        <a-col :span='12'>
+        <a-col class='left-text' :span='2'>单号前缀：</a-col>
+        <a-col :span='11'>
           <a-input v-model:value='flowNamePrefix'></a-input>
         </a-col>
         <a-col class='left-text' :span='1'></a-col>

src/views/flow/stSetting/index.vue

@@ -1,64 +1,63 @@
 <template>
   <div class="container">
-    <a-collapse v-model:activeKey='activeKey' @change='changeCollapse'>
-      <a-collapse-panel key='0' header='流程名称设置：'>
+    <a-collapse
+        v-model:activeKey="activeKey"
+        :bordered="false"
+        style="background: rgb(255, 255, 255)"
+    >
+      <template #expandIcon="{ isActive }">
+        <caret-right-outlined :rotate="isActive ? 90 : 0" />
+      </template>
+      <a-collapse-panel key='0' header='流程名称设置：' :style="customStyle">
         <FlowNameSetting :flowCode='flowCode'></FlowNameSetting>
       </a-collapse-panel>
-      <a-collapse-panel key='1' header='单号前缀：'>
+      <a-collapse-panel key='1' header='单号前缀：' :style="customStyle">
         <FlowNumberPrefix :flowCode='flowCode'></FlowNumberPrefix>
       </a-collapse-panel>
-      <a-collapse-panel key='2' header='流程描述'>
-        <FlowDescribe :flowCode='flowCode'></FlowDescribe>
-      </a-collapse-panel>
-      <a-collapse-panel key='3' header='事件方法设置'>
+      <a-collapse-panel key='3' header='事件方法设置' :style="customStyle">
         <FlowEventService :flowCode='flowCode'></FlowEventService>
       </a-collapse-panel>
-      <a-collapse-panel key='4' header='发起表单权限'>
+      <a-collapse-panel key='4' header='发起表单权限' :style="customStyle">
         <FlowInitiateForm :flowCode='flowCode'></FlowInitiateForm>
       </a-collapse-panel>
-      <a-collapse-panel key='5' header='查看表单权限'>
+      <a-collapse-panel key='5' header='查看表单权限' :style="customStyle">
         <FlowManageForm :flowCode='flowCode'></FlowManageForm>
       </a-collapse-panel>
+      <a-collapse-panel key='2' header='流程描述' :style="customStyle">
+        <FlowDescribe :flowCode='flowCode'></FlowDescribe>
+      </a-collapse-panel>
     </a-collapse>
   </div>
 </template>
-<script>
+
+<script setup>
+import { ref } from 'vue';
 import FlowNameSetting from '/@/views/flow/stSetting/flowNameSetting.vue'
 import FlowEventService from '/@/views/flow/stSetting/flowEventService.vue'
 import FlowNumberPrefix from '/@/views/flow/stSetting/flowNumberPrefix.vue'
 import FlowDescribe from '/@/views/flow/stSetting/flowDescribe.vue'
 import FlowInitiateForm from '/@/views/flow/stSetting/flowInitiateForm.vue'
 import FlowManageForm from '/@/views/flow/stSetting/flowManageForm.vue'
-
-export default {
-  data() {
-    return {
-      text: ``,
-      activeKey: ['0']
-    }
-  },
-  props: {
-    flowCode: ''
-  },
-  components: {
-    FlowEventService,
-    FlowNumberPrefix,
-    FlowDescribe,
-    FlowInitiateForm,
-    FlowManageForm,
-    FlowNameSetting
-  },
-  methods: {
-    changeCollapse(key) {
-      console.log(key, 'key')
-    }
+const customStyle = "background: #f8f9fa;border-radius: 4px;margin-bottom: 14px;border: 0;overflow: hidden";
+const props = defineProps({
+  flowCode: {
+    type: String,
+    default: ''
   }
-}
+})
+const activeKey = ref(['-1'])
+
 </script>
+
 <style scoped>
 .container {
-  height: 100%; /* 根据需要调整高度 */
-  overflow-y: auto; /* 增加竖向滚动条 */
+  height: calc(100% - 32px);
+  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: 16px; /* 添加内边距 */
+  margin: 16px;
 }
-
 </style>