首页流程图

src/views/EquipmentEntryApproval/EquipmentMainList.vue

@@ -3,8 +3,8 @@
     <el-form
       :model="queryParams"
       ref="queryFormRef"
-      inline
+      :inline="false"
-      label-width="auto"
+      label-width="100px"
       size="small"
     >
       <!-- 表单搜索 -->
@@ -21,7 +21,7 @@
             </el-select>
           </el-form-item>
         </el-col>
-        <el-col :span="5">
+        <el-col :span="7">
           <el-form-item label="申请时间" prop="createTime">
             <el-date-picker
               type="daterange"
@@ -35,23 +35,11 @@
             />
           </el-form-item>
         </el-col>
-        <el-col :span="4" style="float:right;">
+        <el-col :span="12" style="text-align:right;">
-          <el-form-item>
+          <el-form-item style="white-space: nowrap;">
-            <el-button class="primary-lease" type="primary" @click="getEquipmentApplyList">
+            <el-button class="primary-lease" type="primary" @click="getEquipmentApplyList">查询</el-button>
-              查询
+            <el-button class="primary-lease" type="primary" @click="resetForm">重置</el-button>
-            </el-button>
+            <el-button class="primary-lease" type="primary" @click="showDetails('1')">展开明细</el-button>
-            <el-button class="primary-lease" type="primary" @click="resetForm">
-              重置
-            </el-button>
-
-            <el-button
-              class="primary-lease"
-              type="primary"
-              @click="showDetails('1')"
-            >
-              展开明细
-            </el-button>
-
           </el-form-item>
         </el-col>
       </el-row>

src/views/contract-manage/index.vue

@@ -144,7 +144,7 @@
             <el-form-item label="合同模板名称：" prop="contractName">
               <el-input
                 autocomplete="off"
-                style="width: 850px"
+                style="width: 350px"
                 maxlength="30"
                 v-model="addAndEditForm.contractName"
                 clearable

src/views/index.vue

@@ -3,100 +3,15 @@
     <h2 class="flowchart-title">装备管理系统流程图</h2>
 
     <!-- 流程图主体 -->
-    <div class="flowchart-wrapper">
+    <div class="flowchart-wrapper" ref="wrapper">
-      <!-- 所有连接线 (放在节点下层) -->
-      <div class="connections">
-        <!-- 装备录入 → 录入审核 -->
-        <line
-          :x1="140" :y1="140" :x2="140" :y2="200"
-          :class="{ active: activeNode === 'equipmentEntry' }"
-        />
-
-        <!-- 录入审核 → 装备台账 -->
-        <line
-          :x1="200" :y1="230" :x2="230" :y2="230"
-          :class="{ active: activeNode === 'entryAudit' }"
-        />
-
-        <!-- 装备台账 → 装备上架 -->
-        <line
-          :x1="300" :y1="260" :x2="300" :y2="320"
-          :class="{ active: activeNode === 'equipmentLedger' && activeLine === 'ledgerToShelf' }"
-        />
-
-        <!-- 装备台账 → 自用出库 -->
-        <line
-          :x1="370" :y1="230" :x2="380" :y2="230"
-          :class="{ active: activeNode === 'equipmentLedger' && activeLine === 'ledgerToSelfOut' }"
-        />
-
-        <!-- 自用出库 → 装备退库 -->
-        <line
-          :x1="440" :y1="380" :x2="440" :y2="440"
-          :class="{ active: activeNode === 'selfUseOut' }"
-        />
-
-        <!-- 装备退库 → 装备维修 -->
-        <line
-          :x1="440" :y1="500" :x2="440" :y2="540"
-          :class="{ active: activeNode === 'equipmentReturn' }"
-        />
-
-        <!-- 装备维修 → 装备退役 -->
-        <path
-          d="M440 600 H440 Q440 400 440 140"
-          :class="{ active: activeNode === 'equipmentRepair' && activeLine === 'repairToRetire' }"
-        />
-
-        <!-- 装备上架 → 共享大厅 -->
-        <line
-          :x1="290" :y1="350" :x2="530" :y2="350"
-          :class="{ active: activeNode === 'equipmentShelf' && activeLine === 'shelfToRental' }"
-        />
-
-        <!-- 装备上架 → 装备下架 -->
-        <path
-          d="M230 350 H200 V440 H140"
-          :class="{ active: activeNode === 'equipmentShelf' && activeLine === 'shelfToOffShelf' }"
-        />
-
-        <!-- 共享大厅 → 共享出库 -->
-        <line
-          :x1="600" :y1="380" :x2="600" :y2="440"
-          :class="{ active: activeNode === 'rentalHall' }"
-        />
-
-        <!-- 共享出库 → 共享退库 -->
-        <line
-          :x1="590" :y1="470" :x2="590" :y2="540"
-          :class="{ active: activeNode === 'shareOut' }"
-        />
-
-        <!-- 共享退库 → 装备维修 -->
-        <line
-          :x1="590" :y1="570" :x2="440" :y2="570"
-          :class="{ active: activeNode === 'shareReturn' }"
-        />
-
-        <!-- 装备维修 → 装备台账 -->
-        <path
-          d="M410 570 H370 V260 H300"
-          :class="{ active: activeNode === 'equipmentRepair' && activeLine === 'repairToLedger' }"
-        />
-
-        <!-- 装备下架 → 装备退役 -->
-        <path
-          d="M140 470 V380 H180 Q250 200 380 110"
-          :class="{ active: activeNode === 'equipmentOffShelf' }"
-        />
-      </div>
 
       <!-- 所有节点 -->
       <div class="nodes">
         <!-- 装备录入 -->
         <div
           class="node entry-node"
-          :style="{ left: '80px', top: '80px' }"
+          :style="{ left: '40px', top: '60px' }"
+          ref="equipmentEntry"
           @click="handleNodeClick('equipmentEntry')"
         >
           装备录入
@@ -105,7 +20,8 @@
         <!-- 装备退役 -->
         <div
           class="node retire-node"
-          :style="{ left: '380px', top: '80px' }"
+          :style="{ left: '620px', top: '60px' }"
+          ref="equipmentRetire"
           @click="handleNodeClick('equipmentRetire')"
         >
           装备退役
@@ -114,7 +30,8 @@
         <!-- 录入审核 -->
         <div
           class="node audit-node"
-          :style="{ left: '80px', top: '200px' }"
+          :style="{ left: '40px', top: '200px' }"
+          ref="entryAudit"
           @click="handleNodeClick('entryAudit')"
         >
           录入审核
@@ -123,7 +40,8 @@
         <!-- 装备台账 -->
         <div
           class="node ledger-node"
-          :style="{ left: '230px', top: '200px' }"
+          :style="{ left: '260px', top: '200px' }"
+          ref="equipmentLedger"
           @click="handleNodeClick('equipmentLedger')"
         >
           装备台账
@@ -132,7 +50,8 @@
         <!-- 装备上架 -->
         <div
           class="node shelf-node"
-          :style="{ left: '230px', top: '320px' }"
+          :style="{ left: '260px', top: '340px' }"
+          ref="equipmentShelf"
           @click="handleNodeClick('equipmentShelf')"
         >
           装备上架
@@ -141,7 +60,8 @@
         <!-- 自用出库 -->
         <div
           class="node self-out-node"
-          :style="{ left: '380px', top: '320px' }"
+          :style="{ left: '500px', top: '200px' }"
+          ref="selfUseOut"
           @click="handleNodeClick('selfUseOut')"
         >
           自用出库
@@ -150,7 +70,8 @@
         <!-- 装备退库 -->
         <div
           class="node return-node"
-          :style="{ left: '380px', top: '440px' }"
+          :style="{ left: '740px', top: '200px' }"
+          ref="equipmentReturn"
           @click="handleNodeClick('equipmentReturn')"
         >
           装备退库
@@ -159,7 +80,8 @@
         <!-- 装备维修 -->
         <div
           class="node repair-node"
-          :style="{ left: '380px', top: '540px' }"
+          :style="{ left: '980px', top: '200px' }"
+          ref="equipmentRepair"
           @click="handleNodeClick('equipmentRepair')"
         >
           装备维修
@@ -168,7 +90,8 @@
         <!-- 共享大厅 -->
         <div
           class="node rental-node"
-          :style="{ left: '530px', top: '320px' }"
+          :style="{ left: '500px', top: '340px' }"
+          ref="rentalHall"
           @click="handleNodeClick('rentalHall')"
         >
           共享大厅
@@ -177,7 +100,8 @@
         <!-- 共享出库 -->
         <div
           class="node share-out-node"
-          :style="{ left: '530px', top: '440px' }"
+          :style="{ left: '740px', top: '340px' }"
+          ref="shareOut"
           @click="handleNodeClick('shareOut')"
         >
           共享出库
@@ -186,7 +110,8 @@
         <!-- 共享退库 -->
         <div
           class="node share-return-node"
-          :style="{ left: '530px', top: '540px' }"
+          :style="{ left: '980px', top: '340px' }"
+          ref="shareReturn"
           @click="handleNodeClick('shareReturn')"
         >
           共享退库
@@ -195,12 +120,30 @@
         <!-- 装备下架 -->
         <div
           class="node off-shelf-node"
-          :style="{ left: '80px', top: '440px' }"
+          :style="{ left: '260px', top: '500px' }"
+          ref="equipmentOffShelf"
           @click="handleNodeClick('equipmentOffShelf')"
         >
           装备下架
         </div>
       </div>
+
+      <!-- 连接线（SVG 覆盖层） -->
+      <svg class="connections" xmlns="http://www.w3.org/2000/svg">
+        <polyline
+          v-for="conn in connections"
+          :key="conn.id"
+          :points="conn.points"
+          :class="{ active: activeLine === conn.id }"
+          marker-end="url(#arrow)"
+        />
+        <!-- 箭头定义，用于直线末端 -->
+        <defs>
+          <marker id="arrow" viewBox="0 0 10 10" refX="10" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">
+            <path d="M 0 0 L 10 5 L 0 10 z" fill="#999" />
+          </marker>
+        </defs>
+      </svg>
     </div>
 
     <!-- 节点信息面板 -->
@@ -220,6 +163,24 @@ export default {
     return {
       activeNode: null,
       activeLine: null,
+      connections: [],
+      // 参考示意图连线定义（按布局方向设置 from/to）
+      lineDefs: [
+        { id: 'entryToAudit', from: 'equipmentEntry', to: 'entryAudit' },
+        { id: 'auditToLedger', from: 'entryAudit', to: 'equipmentLedger' },
+        { id: 'ledgerToSelf', from: 'equipmentLedger', to: 'selfUseOut' },
+        { id: 'selfToReturn', from: 'selfUseOut', to: 'equipmentReturn' },
+        { id: 'returnToRepair', from: 'equipmentReturn', to: 'equipmentRepair' },
+        { id: 'ledgerToShelf', from: 'equipmentLedger', to: 'equipmentShelf' },
+        { id: 'shelfToRental', from: 'equipmentShelf', to: 'rentalHall' },
+        { id: 'rentalToShareOut', from: 'rentalHall', to: 'shareOut' },
+        { id: 'shareOutToShareReturn', from: 'shareOut', to: 'shareReturn' },
+        { id: 'shareReturnToRepair', from: 'shareReturn', to: 'equipmentRepair' },
+        { id: 'shelfToOff', from: 'equipmentShelf', to: 'equipmentOffShelf' },
+        // 顶部/右侧回流到退役
+        { id: 'repairToRetire', from: 'equipmentRepair', to: 'equipmentRetire' },
+        { id: 'ledgerToRetire', from: 'equipmentLedger', to: 'equipmentRetire' }
+      ],
       nodeData: {
         equipmentEntry: {
           name: '装备录入',
@@ -296,6 +257,13 @@ export default {
       }
     };
   },
+  mounted() {
+    this.$nextTick(this.updateConnections);
+    window.addEventListener('resize', this.updateConnections, { passive: true });
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.updateConnections);
+  },
   computed: {
     nodeInfo() {
       return this.nodeData[this.activeNode] || {};
@@ -315,6 +283,55 @@ export default {
       } else if (nodeId === 'equipmentRepair') {
         this.activeLine = 'repairToRetire';
       }
+    },
+    updateConnections() {
+      const buildMetrics = (el) => {
+        if (!el) return null;
+        return {
+          left: el.offsetLeft,
+          top: el.offsetTop,
+          width: el.offsetWidth,
+          height: el.offsetHeight
+        };
+      };
+      const getEdgeAnchors = (rect) => {
+        const cx = rect.left + rect.width / 2;
+        const cy = rect.top + rect.height / 2;
+        return {
+          left: { x: rect.left, y: cy },
+          right: { x: rect.left + rect.width, y: cy },
+          top: { x: cx, y: rect.top },
+          bottom: { x: cx, y: rect.top + rect.height }
+        };
+      };
+      const conns = [];
+      this.lineDefs.forEach((ld) => {
+        const fromEl = this.$refs[ld.from];
+        const toEl = this.$refs[ld.to];
+        const f = buildMetrics(fromEl);
+        const t = buildMetrics(toEl);
+        if (!f || !t) return;
+        const fa = getEdgeAnchors(f);
+        const ta = getEdgeAnchors(t);
+        const dx = (t.left + t.width / 2) - (f.left + f.width / 2);
+        const dy = (t.top + t.height / 2) - (f.top + f.height / 2);
+        // 水平优先：从左右边到对侧左右边
+        const hStart = dx >= 0 ? fa.right : fa.left;
+        const hEnd = dx >= 0 ? ta.left : ta.right;
+        const hLen = Math.abs(hEnd.x - hStart.x) + Math.abs(hEnd.y - hStart.y);
+        const hMidX = (hStart.x + hEnd.x) / 2;
+        const hPoints = `${hStart.x},${hStart.y} ${hMidX},${hStart.y} ${hMidX},${hEnd.y} ${hEnd.x},${hEnd.y}`;
+        // 垂直优先：从上下边到对侧上下边
+        const vStart = dy >= 0 ? fa.bottom : fa.top;
+        const vEnd = dy >= 0 ? ta.top : ta.bottom;
+        const vLen = Math.abs(vEnd.x - vStart.x) + Math.abs(vEnd.y - vStart.y);
+        const vMidY = (vStart.y + vEnd.y) / 2;
+        const vPoints = `${vStart.x},${vStart.y} ${vStart.x},${vMidY} ${vEnd.x},${vMidY} ${vEnd.x},${vEnd.y}`;
+        // 取更短的 L 型路径
+        const useH = hLen <= vLen;
+        conns.push({ id: ld.id, points: useH ? hPoints : vPoints });
+      });
+      this.connections = conns;
     }
   }
 };
@@ -338,7 +355,7 @@ export default {
 
 .flowchart-wrapper {
   position: relative;
-  width: 900px;
+  width: 1200px;
   height: 700px;
   margin: 0 auto;
   background-color: white;
@@ -357,14 +374,14 @@ export default {
   pointer-events: none;
 }
 
-line, path {
+line, path, polyline {
   stroke: #999;
   stroke-width: 2px;
   fill: none;
   transition: all 0.3s ease;
 }
 
-line.active, path.active {
+line.active, path.active, polyline.active {
   stroke: #ff4500;
   stroke-width: 2.5px;
 }

src/views/material/ma/supplier/index.vue

@@ -226,7 +226,7 @@
                 </el-form-item>
             </el-col>
            </el-row>
-        <el-form-item label="营业执照">
+        <el-form-item label="营业执照" style="display: none">
           <el-upload
               class = "upload-demo"
                action="#"