From 0f8522e306454fc3d32d646a5c54dc85ad1ea632 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Thu, 17 Oct 2024 23:21:19 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E3=80=91=20=E6=96=B0=E5=AE=A1=E6=89=B9=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=8F=96=E6=B6=88=E5=92=8C=E5=86=8D=E6=AC=A1?=
 =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/svgs/bpm/audit4.svg                |   2 +-
 .../detail/ProcessInstanceOperationButton.vue | 139 +++++++++++++++---
 .../bpm/processInstance/detail/index_new.vue  |   7 +-
 3 files changed, 122 insertions(+), 26 deletions(-)

diff --git a/src/assets/svgs/bpm/audit4.svg b/src/assets/svgs/bpm/audit4.svg
index ec661443..ab9b1553 100644
--- a/src/assets/svgs/bpm/audit4.svg
+++ b/src/assets/svgs/bpm/audit4.svg
@@ -1 +1 @@
-<svg t="1728812935276" class="icon" viewBox="0 0 1167 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4361" width="200" height="200"><path d="M1159.10034 346.809949l-177.334385-280.171946a52.524561 52.524561 0 0 0-72.305741-16.279543L24.344573 611.35763a52.626948 52.626948 0 0 0-16.30002 72.305741L185.399416 963.876272a52.504083 52.504083 0 0 0 72.244308 16.21811l885.156596-560.958215a52.422174 52.422174 0 0 0 16.30002-72.326218z m-35.323535 42.203945L238.640686 950.054019a16.627658 16.627658 0 0 1-23.016611-5.180785L38.310168 664.660333a16.730045 16.730045 0 0 1 5.180785-23.078043L928.668027 80.562642a16.607181 16.607181 0 0 1 22.975655 5.22174l177.416295 280.212902a16.996252 16.996252 0 0 1-5.283172 23.01661z m-763.008836-177.784888l14.682304 35.303058 19.043993-33.132452 38.047031-3.071612-25.617242-28.422647 8.723377-37.146025-34.770645 15.644743-32.681949-19.801658 4.136438 38.067509-28.975538 24.736713 37.412231 7.822371zM586.121884 106.077497l-18.265851-33.62391-15.5014 35.016374-37.596528 7.167094 28.381692 25.514855-4.894101 37.924167 33.111975-19.187335 34.545393 16.422884-7.98619-37.473663 26.211086-27.787848-38.006076-3.972618z m343.610968 563.29264l-30.245137-23.303294-0.143342 38.190372-31.596646 21.460328 36.38836 12.040718 10.730164 36.654567 22.566108-30.85946 38.190372 1.085303-22.422765-31.043756 12.921246-35.83547-36.38836 11.610692z m-123.49927 152.270033l-14.416098-35.425922-19.351154 33.030065-38.026553 2.764451 25.39199 28.545512-9.030538 37.105069 34.975419-15.296626 32.538607 20.25216-3.849753-38.087986 28.975537-24.716235-37.207457-8.170488z m-226.234444 103.574748l18.102032 33.767252 15.808562-34.913987 37.596528-6.757545-28.217873-25.781062 5.180785-37.883211-33.255317 18.839218-34.361097-16.648135 7.658552 37.391753-26.57968 27.685461 38.067508 4.300256z m-338.901163-565.954703l30.081318 23.671888 0.430026-38.231328 31.739988-21.35794-36.183587-12.286447-10.443479-36.818386-22.852792 30.654685-38.190373-1.392464 22.115605 31.187098-13.166976 35.937858 36.449793-11.364964z m-134.372775 165.047938C102.711627 362.454691 181.242501 202.444197 327.61504 109.722477 473.987578 17.000757 651.915808 14.379648 796.465857 87.033505L831.400321 64.9179A508.106015 508.106015 0 0 0 694.119753 12.536681a510.133279 510.133279 0 0 0-195.927874-5.651766 506.611164 506.611164 0 0 0-189.620832 72.612902 509.355138 509.355138 0 0 0-146.659222 140.638863 509.989937 509.989937 0 0 0-78.858513 179.627855 508.679383 508.679383 0 0 0-11.344486 146.618268l35.016374-22.095127z m950.520494-24.757191c4.156915 161.832984-74.394437 321.823002-220.72602 414.524244-146.331584 92.844584-324.321246 95.404261-468.83034 22.729927l-34.975419 22.177037a510.338053 510.338053 0 0 0 137.301045 52.319787 508.658906 508.658906 0 0 0 195.907398 5.672243 506.201616 506.201616 0 0 0 189.620832-72.592424A510.235666 510.235666 0 0 0 1080.876627 624.156012c10.91446-48.531466 14.702782-97.718208 11.324009-146.700177l-34.975419 22.115605zM433.176097 276.613382a276.322193 276.322193 0 0 1 131.321641-42.511107l54.019412-34.217755a312.075754 312.075754 0 0 0-204.528388 46.688499 312.055276 312.055276 0 0 0-129.478674 165.047938l53.998935-34.197278a276.50649 276.50649 0 0 1 94.667074-100.810297z m297.741565 470.57092c40.954823-25.903926 72.756244-60.879345 94.687552-100.666956l53.957979-34.279187a311.686683 311.686683 0 0 1-129.417241 165.047938c-61.718919 39.009469-133.164608 55.14567-204.50791 46.708976l53.978457-34.197278c45.25508-2.784928 90.305385-16.586703 131.301163-42.593016z m-303.00426-123.990728L277.895884 716.918687l40.565753 64.913395c5.467469 8.764332 12.573131 10.402525 21.337463 4.914579l120.816728-75.500217a19.494496 19.494496 0 0 0 8.211442-11.201144c1.290077-5.528901-5.487946-21.235076-19.53545-46.954705l29.671769-7.719984c16.279542 33.091497 23.549023 53.917025 22.013218 62.312763-2.477767 8.989584-8.682423 16.914342-18.102032 23.487592l-135.171395 84.448845c-20.927915 13.064589-37.965121 8.518603-51.644032-13.37175l-78.694693-125.936081 25.289604-15.788085 20.067863 32.088104 124.215979-77.629867-34.627303-55.432353-159.723811 99.806904-15.194239-24.306688 185.484395-115.90215 65.036259 104.025252z m160.133359-51.050187l8.805287 14.108936 31.596646-19.760702-8.805287-14.088459-31.617123 19.740225z m20.047386-38.21085l-8.661945-13.863208-31.617124 19.740225 8.661946 13.863207 31.617123-19.740224z m0.286684 70.790412l25.228171 40.360978-21.890353 13.678911-78.223713-125.219372 72.694812-45.418899-5.610811-1.9044c-0.327639-4.873624-0.901006-9.583429-1.228645-14.436575l-9.010061 13.719866c-2.477767-1.82249-4.730282-3.788321-6.675636-5.283172-11.979286 12.225015-31.064233 28.197396-57.111501 48.203827l-15.214717-17.876781c4.300256-3.378773 6.470862-9.112448 6.614204-16.996251-0.286684-5.897495-0.839574-14.334188-2.109173-25.023397l-22.852792 14.272756-14.293233-22.852792 33.07102-20.682186a213.84561 213.84561 0 0 0-19.023516-13.105543l22.361334-19.392109c6.286565 5.201263 13.044111 11.119235 20.25216 17.774393l33.787729-21.091734 14.272756 22.832314-43.760229 27.337345c0.921484 12.286447 1.2696 24.224778 1.576761 35.528309l25.125784-21.43985c-5.610811-3.583547-10.689209-6.839455-15.460446-9.624383l13.863208-16.750523c11.426396 6.368475 22.525153 13.310318 33.173407 21.173644-4.607418-26.866364-14.784691-56.681475-30.286092-89.588676l25.043875-10.238706c5.590333 12.73695 10.648254 25.125784 14.989465 36.961728l37.678437-23.549024 14.743737 23.569501-7.064707 4.423121c23.794752 40.238114 39.31663 77.507003 47.057092 111.560939 19.371631 12.573131 37.65796 20.743618 54.736121 24.28621l-1.290077 29.856066c-15.399014-3.542592-31.658078-10.648254-48.613375-20.989347a171.682619 171.682619 0 0 1-4.464076 54.51087l-25.801539-12.614085c5.160308-18.777786 5.938449-39.193766 2.272993-61.268416a484.905108 484.905108 0 0 1-51.644032-47.507595c0.020477 4.382166 0.307161 8.600513 0.184297 12.73695l-14.661827-5.037443 61.841783 98.946853c9.112448 14.579917 5.795107 27.13257-9.767725 36.859341l-14.08846 8.805287-19.125902-18.142987 13.515092-7.064707c5.569856-3.501637 7.126139-7.51521 4.545985-11.651647l-7.740462-12.388834-31.617123 19.740225z m11.569737-162.733991c15.910949 18.450148 31.596646 34.361097 46.790886 47.855711-8.088578-22.688972-19.535451-46.954705-34.606826-72.694811l-15.808561 9.870112c1.290077 5.283172 2.662064 10.177274 3.624501 14.968988z m-53.896547 244.295521l-18.224896 11.385441-19.944999-19.985954a102.387058 102.387058 0 0 0 16.381929-7.863326c4.607418-2.887315 4.914579-7.822371 0.819096-14.375143l-30.388478-48.633852c-4.505031 6.88041-9.153403 13.494614-13.945118 19.863089l-22.668494-21.665102c7.371868-7.638075 14.211324-15.644743 20.354547-24.2043l-31.125666-49.84202-20.927915 13.064588-15.03042-24.060958 20.88696-13.064589-26.1087-41.835352 24.060959-15.03042 26.129177 41.814875 14.600395-9.112449 15.03042 24.060959-14.579917 9.112448 23.999526 38.415625c3.030657-5.938449 6.32752-12.061195 9.214835-18.265852l16.095246 25.781062c-3.030657 5.938449-6.32752 12.081673-9.358177 18.020122l41.77392 66.858749c10.484435 16.791478 8.027145 30.14275-7.04423 39.562359z m226.275399-449.356321l25.043874-15.644743 40.401933 64.667666 44.743145-27.951667 80.373841 128.598146c12.143105 19.453541 9.870112 34.750168-6.921366 45.214125l-23.078042 14.436575-21.60367-19.965477 22.381811-12.286447c5.344604-3.358296 5.446992-9.153403 0.430026-17.201025l-9.870113-15.767607-64.176208 40.094772 32.04715 51.295916-25.289604 15.788084-99.04924-158.495166 44.968396-28.115486-40.401933-64.667666z m61.739396 142.604695l12.614085 20.190728 64.176209-40.11525-12.614086-20.17025-64.176208 40.094772z m50.804458-61.493668l-12.593608-20.17025-64.196685 40.094772 12.614085 20.190728 64.176208-40.11525z m-136.911974-53.036496c14.743736 7.371868 29.978931 16.074768 45.910357 26.415861l-14.047505 22.975656a356.245531 356.245531 0 0 0-46.647543-25.965358l14.784691-23.426159z m83.650227-56.005721l27.296389-2.866837c3.276386 18.245374 4.791714 36.900296 4.075005 56.312882l-27.112093 2.047741c0.409548-19.863089-0.941961-38.29276-4.259301-55.493786z m-176.371947 100.748866l27.501164-10.074887c2.559676 7.863326 4.791714 15.255672 6.655159 22.54563l40.340501-25.228171 15.050897 24.081436-48.613375 30.388479c1.965832 11.262576 3.39925 22.197514 4.361688 32.415743l55.903334-34.934464 14.129414 22.607062-22.340856 13.965595 14.272756 22.852791 30.634208-19.125902 14.579917 23.344249-30.634208 19.125903 29.630815 47.405208a230.166107 230.166107 0 0 0 20.682186-32.866246l18.224896 19.392109c-11.324009 19.22829-25.965358 38.518011-43.965003 57.869165l-24.122391-15.337581c4.709805-5.979404 5.733675-11.364963 3.01018-15.74713l-28.258828-45.214125-30.634208 19.14638-14.579917-23.344249 30.634208-19.14638-14.272756-22.852792-11.672125 7.289959-10.648254-16.996252c0.307161 5.877017 0.47098 11.528783 0.47098 16.93482l-28.87315-0.204774a297.802998 297.802998 0 0 0-17.467232-98.291576z" fill="#8a8a8a" p-id="4362"></path></svg>
\ No newline at end of file
+<svg t="1729178183592" class="icon" viewBox="0 0 1300 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4332" width="200" height="200"><path d="M784.074702 99.196443l10.927871 18.473304-21.302843-2.56935-14.180213 16.066571-4.130475-21.042655-19.676671-8.521137 18.733492-10.440019 2.016452-21.335366 15.708814 14.603017 20.945085-4.683373-9.041512 19.449008zM1067.22363 642.402668l-18.440781 10.92787 2.56935-21.302842-16.099094-14.180213 21.042655-4.130475 8.521137-19.676671 10.440019 18.733492 21.367889 2.016452-14.603017 15.708814 4.683373 20.945085-19.481531-9.041512z" fill="#8a8a8a" p-id="4333"></path><path d="M1067.22363 642.402668l-18.440781 10.92787 2.56935-21.302842-16.099094-14.180213 21.042655-4.130475 8.521137-19.676671 10.440019 18.733492 21.367889 2.016452-14.603017 15.708814 4.683373 20.945085-19.481531-9.041512zM571.924408 100.009528l-17.400031-12.488994 20.52228-6.211974 6.504685-20.457234 12.261331 17.595172 21.432936-0.09757-12.944323 17.074798 6.732349 20.359663-20.262093-7.02506-17.269938 12.716659 0.422804-21.46546zM991.444053 784.43246l-21.172749 3.480006 10.114785-18.928632-9.822074-19.026203 21.107702 3.772717 15.090868-15.253486 2.927109 21.237796 19.156296 9.626933-19.318914 9.366746-3.219819 21.205273-14.863204-15.48115zM428.008258 156.795426l-20.749945-5.333841 16.879657-13.237034-1.365983-21.400413 17.822836 11.936097 19.936859-7.870669-5.88674 20.619851 13.692361 16.521899-21.432936 0.813086-11.513292 18.083024-7.382817-20.132zM854.260251 896.475655l-20.749945-5.333841 16.879657-13.237034-1.365983-21.400413 17.822836 11.96862 19.936859-7.903192-5.854217 20.619851 13.659838 16.554423-21.432936 0.780562-11.513292 18.115547-7.382817-20.164523zM562.460092 923.665237l10.895347 18.440782-21.302843-2.569351-14.180212 16.099095-4.130475-21.042655-19.676672-8.521137 18.733493-10.440019 2.016452-21.36789 15.708814 14.603018 20.945085-4.683373-9.008989 19.48153zM242.787359 420.788058l-18.473305 10.895347 2.569351-21.302843-16.066572-14.180213 21.042656-4.130474 8.521137-19.676672 10.440019 18.733492 21.335366 2.016453-14.603018 15.708813 4.683374 20.945085-19.449008-9.008988z" fill="#8a8a8a" p-id="4334"></path><path d="M242.787359 420.788058l-18.473305 10.895347 2.569351-21.302843-16.066572-14.180213 21.042656-4.130474 8.521137-19.676672 10.440019 18.733492 21.335366 2.016453-14.603018 15.708813 4.683374 20.945085-19.449008-9.008988zM700.814737 943.959854l-17.400032-12.521518 20.522281-6.211974 6.504685-20.42471 12.26133 17.595172 21.432937-0.130094-12.944323 17.107321 6.732349 20.359663-20.262093-7.025059-17.269938 12.684135 0.422804-21.432936zM303.541115 278.823313l-21.140226 3.480006 10.114785-18.928633-9.854597-19.058726 21.107702 3.772717 15.090868-15.220962 2.927109 21.237796 19.156296 9.626933-19.28639 9.366746-3.252342 21.172749-14.863205-15.448626z" fill="#8a8a8a" p-id="4335"></path><path d="M407.648595 90.642782a486.713038 486.713038 0 0 1 504.568397 11.578339l25.010513-14.407877A512.081309 512.081309 0 0 0 139.850723 547.401747l24.977989-14.407877a486.778085 486.778085 0 0 1 242.819883-442.351088zM893.28836 933.422265a486.810608 486.810608 0 0 1-504.568398-11.610863l-25.010513 14.407877a512.081309 512.081309 0 0 0 797.5394-459.621026l-24.97799 14.505447a486.843132 486.843132 0 0 1-242.982499 442.318565z" fill="#8a8a8a" p-id="4336"></path><path d="M814.061299 795.880705a326.665269 326.665269 0 0 1-258.170939 29.563792l-29.791456 17.172368a353.236906 353.236906 0 0 0 472.793013-272.448721l-29.693886 17.172367a326.762839 326.762839 0 0 1-155.136732 208.540194zM486.875655 228.119295a326.795363 326.795363 0 0 1 258.170939-29.563792l29.791456-17.172368a353.236906 353.236906 0 0 0-472.793013 272.448721l29.82398-17.172367a326.762839 326.762839 0 0 1 155.006638-208.540194zM1288.350389 374.73489a53.923837 53.923837 0 0 1-14.34283 12.001143L229.420232 988.712085A53.793743 53.793743 0 0 1 156.112434 968.937843l-148.924757-258.235985a53.76122 53.76122 0 0 1 19.741718-73.437891L1071.516722 35.352962A53.826266 53.826266 0 0 1 1144.82452 55.062157l148.827187 258.268508a53.793743 53.793743 0 0 1-5.398888 61.404225zM32.19819 665.754486a28.360426 28.360426 0 0 0-5.626553 10.73273 28.067715 28.067715 0 0 0 2.699444 21.432936L178.195839 956.188661a28.165285 28.165285 0 0 0 38.442687 10.342449l1044.587328-601.976052a28.132762 28.132762 0 0 0 10.440019-38.442687l-148.924758-258.268509a28.197808 28.197808 0 0 0-38.442687-10.342449L39.711101 659.444942a28.230332 28.230332 0 0 0-7.512911 6.309544z" fill="#8a8a8a" p-id="4337"></path><path d="M498.941845 597.390249l-138.322121 79.877529 38.637827 66.933207q8.000762 13.854979 21.595554 5.98431l114.254788-65.957504a21.172749 21.172749 0 0 0 9.952167-11.123011q2.634397-9.757027-16.91218-47.321582l18.440781-4.130474q20.489757 43.22363 18.148071 56.167953a36.166047 36.166047 0 0 1-16.261712 19.514054l-123.068636 71.031158q-25.17313 14.603017-40.394092-11.77348L317.103383 639.020232l16.066571-9.269176 18.570875 32.133143 122.027886-70.47826-33.596697-58.249452-150.160648 86.707448-9.041511-15.611243 166.454883-96.106718zM691.903319 563.663459c-3.935334 3.837764-9.757027 9.399269-17.497602 16.619469l23.319295 40.394093-15.611244 9.008988-21.237795-36.816516q-31.027346 27.709957-64.754137 54.314118l-12.814229-13.39965 9.171605-7.382818 9.236653-7.122629-79.714912-138.126982-17.627696 10.179832-8.781324-15.155915L601.683341 414.836271l6.960013 12.06619 86.34969-49.858408 8.488614 14.733111q28.197808 65.82741 30.506972 123.39387a274.660314 274.660314 0 0 0 69.339939 27.612387l-3.642623 18.440781a322.177037 322.177037 0 0 1-65.534699-26.40902 220.899095 220.899095 0 0 1-15.38358 72.819946l-18.14807-6.179451a215.272542 215.272542 0 0 0 15.448626-77.340702 312.940384 312.940384 0 0 1-89.374369-86.739971l-8.748801 5.138701-7.2202-12.488995-17.172368 9.919644 71.876767 124.499667q10.570113-10.017215 17.465079-16.61947z m-134.32174-56.948515l40.166428-23.189202-19.969382-34.702493-40.166429 23.189201z m28.067714 48.785135l40.166429-23.189201-19.514055-33.921931-40.166428 23.189201z m48.557472-8.813847l-40.166428 23.189201 21.888264 37.922312q13.334604-10.92787 35.775766-30.767159z m7.2202-117.832365A289.848753 289.848753 0 0 0 715.515325 503.365031a330.437986 330.437986 0 0 0-26.441544-101.92841zM812.760362 400.460918l-4.813467 17.95293a280.482007 280.482007 0 0 0-56.167953-12.781706l5.073654-17.530125a291.637542 291.637542 0 0 1 55.907766 12.358901z m24.360045 28.78323a925.063745 925.063745 0 0 1 10.017214 101.895887l-18.440781 2.016452a812.792886 812.792886 0 0 0-8.878895-101.375512z m-45.923075-86.25212l-4.813467 18.017977a290.922026 290.922026 0 0 0-58.542163-11.513292l5.073655-17.497602a308.972527 308.972527 0 0 1 58.281975 10.992917z m48.459902-17.562649l-9.334223 13.724885A298.792695 298.792695 0 0 0 783.814515 315.477211l9.757027-14.180212a437.635191 437.635191 0 0 1 46.085692 24.13238zM834.355916 269.944418l16.521899-9.529363 35.157821 60.916373 48.199714-27.840051L1003.282579 413.047483q12.716659 22.115928-8.228426 34.214642l-26.018739 15.058345-13.237034-13.009369 25.238177-13.952549c6.992536-4.065428 8.45609-9.561887 4.423186-16.554423l-12.716659-22.018358-80.527997 46.475973L919.762427 491.1037l-16.066572 9.269176-81.926505-141.899698 47.744387-27.579864z m107.750103 73.763125l-14.830682-25.660981-80.56052 46.508496 14.830681 25.726028z m-72.592282 60.330952l14.700587 25.433317 80.560521-46.508496-14.700587-25.433318z m45.532793-166.064603a222.720407 222.720407 0 0 1-2.406733 56.13543l-16.456853 0.878132a242.722312 242.722312 0 0 0 2.081499-55.647578z" fill="#8a8a8a" p-id="4338"></path></svg>
\ No newline at end of file
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue b/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
index 9518465c..cb9a0c6a 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
@@ -1,7 +1,6 @@
 <template>
   <div
     class="h-50px bottom-10 text-14px flex items-center color-#32373c dark:color-#fff font-bold btn-container"
-    v-if="runningTask && runningTask.id"
   >
     <!-- 【通过】按钮 -->
     <el-popover
@@ -9,7 +8,7 @@
       placement="top-end"
       :width="420"
       trigger="click"
-      v-if=" isHandleTaskStatus() && isShowButton(OperationButtonType.APPROVE)"
+      v-if=" runningTask && isHandleTaskStatus() && isShowButton(OperationButtonType.APPROVE)"
     >
       <template #reference>
         <el-button plain type="success" @click="openPopover('approve')">
@@ -26,7 +25,7 @@
           :rules="genericRule"
           label-width="100px"
         >
-          <el-card v-if="runningTask.formId > 0" class="mb-15px !-mt-10px">
+          <el-card v-if="runningTask?.formId > 0" class="mb-15px !-mt-10px">
             <template #header>
               <span class="el-icon-picture-outline"> 填写表单【{{ runningTask?.formName }}】 </span>
             </template>
@@ -61,7 +60,7 @@
       placement="top-end"
       :width="420"
       trigger="click"
-      v-if=" isHandleTaskStatus() && isShowButton(OperationButtonType.REJECT)"
+      v-if=" runningTask && isHandleTaskStatus() && isShowButton(OperationButtonType.REJECT)"
     >
       <template #reference>
         <el-button class="mr-20px" plain type="danger" @click="openPopover('reject')">
@@ -78,7 +77,7 @@
           :rules="genericRule"
           label-width="100px"
         >
-          <el-card v-if="runningTask.formId > 0" class="mb-15px !-mt-10px">
+          <el-card v-if="runningTask?.formId > 0" class="mb-15px !-mt-10px">
             <template #header>
               <span class="el-icon-picture-outline"> 填写表单【{{ runningTask?.formName }}】 </span>
             </template>
@@ -113,7 +112,7 @@
       placement="top-start"
       :width="420"
       trigger="click"
-      v-if="isHandleTaskStatus() && isShowButton(OperationButtonType.COPY)"
+      v-if="runningTask && isHandleTaskStatus() && isShowButton(OperationButtonType.COPY)"
     >
       <template #reference>
         <div @click="openPopover('copy')" class="hover-bg-gray-100 rounded-xl p-6px">
@@ -172,7 +171,7 @@
       placement="top-start"
       :width="420"
       trigger="click"
-      v-if=" isHandleTaskStatus() && isShowButton(OperationButtonType.TRANSFER)"
+      v-if=" runningTask && isHandleTaskStatus() && isShowButton(OperationButtonType.TRANSFER)"
     >
       <template #reference>
         <div @click="openPopover('transfer')" class="hover-bg-gray-100 rounded-xl p-6px">
@@ -225,7 +224,7 @@
       placement="top-start"
       :width="420"
       trigger="click"
-      v-if="isHandleTaskStatus() && isShowButton(OperationButtonType.DELEGATE)"
+      v-if="runningTask && isHandleTaskStatus() && isShowButton(OperationButtonType.DELEGATE)"
     >
       <template #reference>
         <div @click="openPopover('delegate')" class="hover-bg-gray-100 rounded-xl p-6px">
@@ -280,7 +279,7 @@
       placement="top-start"
       :width="420"
       trigger="click"
-      v-if="isHandleTaskStatus() && isShowButton(OperationButtonType.ADD_SIGN)"
+      v-if="runningTask && isHandleTaskStatus() && isShowButton(OperationButtonType.ADD_SIGN)"
     >
       <template #reference>
         <div @click="openPopover('addSign')" class="hover-bg-gray-100 rounded-xl p-6px">
@@ -335,7 +334,7 @@
     <div
       @click="openChildrenTask()"
       class="hover-bg-gray-100 rounded-xl p-6px"
-      v-if="runningTask.children"
+      v-if="runningTask?.children"
     >
       <Icon :size="14" icon="ep:semi-select" />&nbsp; 减签
     </div>
@@ -346,11 +345,11 @@
       placement="top-start"
       :width="420"
       trigger="click"
-      v-if="isHandleTaskStatus() && isShowButton(OperationButtonType.RETURN)"
+      v-if="runningTask && isHandleTaskStatus() && isShowButton(OperationButtonType.RETURN)"
     >
       <template #reference>
         <div @click="openReturnPopover" class="hover-bg-gray-100 rounded-xl p-6px">
-          <Icon :size="14" icon="fa:mail-reply" />&nbsp;
+          <Icon :size="14" icon="ep:back" />&nbsp;
           {{ getButtonDisplayName(OperationButtonType.RETURN) }}
         </div>
       </template>
@@ -392,28 +391,82 @@
       </div>
     </el-popover>
 
+    <!--【取消】按钮 这个对应发起人的取消, 只有发起人可以取消 -->
+    <el-popover
+      :visible="popOverVisible.cancel"
+      placement="top-start"
+      :width="420"
+      trigger="click"
+      v-if="userId === processInstance?.startUser?.id && !isEndProcessStatus(processInstance?.status)"
+    >
+      <template #reference>
+        <div @click="openPopover('cancel')" class="hover-bg-gray-100 rounded-xl p-6px">
+          <Icon :size="14" icon="fa:mail-reply" />&nbsp; 取消
+        </div>
+      </template>
+      <div class="flex flex-col flex-1 pt-20px px-20px" v-loading="formLoading">
+        <el-form
+          label-position="top"
+          class="mb-auto"
+          ref="formRef"
+          :model="genericForm"
+          :rules="genericRule"
+          label-width="100px"
+        >
+          <el-form-item label="取消理由" prop="cancelReason">
+            <span class=" text-#878c93 text-12px">&nbsp; 取消后，该审批流程将自动结束</span>
+            <el-input
+              v-model="genericForm.cancelReason"
+              clearable
+              placeholder="请输入取消理由"
+              type="textarea"
+              :rows="3"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button :disabled="formLoading" type="primary" @click="handleCancel()">取消</el-button>
+            <el-button @click="popOverVisible.cancel = false"> 取消 </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-popover>
+    <!-- 【再次提交】 按钮-->
+    <div
+      @click="handleReCreate()"
+      class="hover-bg-gray-100 rounded-xl p-6px"
+      v-if="userId === processInstance?.startUser?.id && isEndProcessStatus(processInstance?.status) 
+            && processDefinition?.formType === 10"
+    >
+      <Icon :size="14" icon="ep:refresh" />&nbsp; 再次提交
+    </div>
     <!-- 弹窗：子任务  -->
     <TaskSignList ref="taskSignListRef" @success="reload" />
-    <!--TODO @jason：撤回 -->
-    <!--TODO @jason：再次发起 -->
+   
+  
   </div>
 </template>
 <script lang="ts" setup>
+import { useUserStoreWithOut } from '@/store/modules/user'
 import TaskSignList from './dialog/TaskSignList.vue'
 import { setConfAndFields2 } from '@/utils/formCreate'
 import * as TaskApi from '@/api/bpm/task'
+import * as ProcessInstanceApi from '@/api/bpm/processInstance'
 import { propTypes } from '@/utils/propTypes'
 import {
   OperationButtonType,
   OPERATION_BUTTON_NAME
 } from '@/components/SimpleProcessDesignerV2/src/consts'
+import { BpmProcessInstanceStatus } from '@/utils/constants'
 defineOptions({ name: 'ProcessInstanceBtnConatiner' })
 
+const router = useRouter() // 路由
 const message = useMessage() // 消息弹窗
 const { proxy } = getCurrentInstance() as any
+const userId = useUserStoreWithOut().getUser.id // 当前登录的编号
 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
 const props = defineProps({
-  processInstanceId: propTypes.string, // 流程实例信息
+  processInstance: propTypes.object, // 流程实例信息
+  processDefinition : propTypes.object, // 流程定义信息
   userOptions: propTypes.any
 })
 const formLoading = ref(false) // 表单加载中
@@ -425,12 +478,13 @@ const popOverVisible = ref({
   delegate: false,
   addSign: false,
   return: false,
-  copy: false
+  copy: false,
+  cancel: false
 })
 /** 退回节点 */
 const returnList = ref([] as any)
 // ========== 审批信息 ==========
-const runningTask = ref<any>({}) // 运行中的任务
+const runningTask = ref<any>() // 运行中的任务
 const genericForm = ref<any>({}) // 通用表单
 const approveForm = ref<any>({}) // 审批通过时，额外的补充信息
 const approveFormFApi = ref<any>({}) // approveForms 的 fAPi
@@ -439,6 +493,7 @@ const formRef = ref()
 const genericRule = reactive({
   reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
   returnReason: [{ required: true, message: '退回理由不能为空', trigger: 'blur' }],
+  cancelReason: [{ required: true, message: '取消理由不能为空', trigger: 'blur' }],
   copyUserIds: [{ required: true, message: '抄送人不能为空', trigger: 'change' }],
   assigneeUserId: [{ required: true, message: '新审批人不能为空', trigger: 'change' }],
   delegateUserId: [{ required: true, message: '接收人不能为空', trigger: 'change' }],
@@ -649,6 +704,36 @@ const handleReturn = async () => {
   }
 }
 
+/** 处理取消 */
+const handleCancel = async () => {
+  formLoading.value = true
+  try {
+    const cancelFormRef = proxy.$refs['formRef']
+    // 1.1 校验表单
+    const elForm = unref(cancelFormRef)
+    if (!elForm) return
+    const valid = await elForm.validate()
+    if (!valid) return
+    // 1.2 提交取消
+    await ProcessInstanceApi.cancelProcessInstanceByStartUser(props.processInstance.id, genericForm.value.cancelReason)
+    popOverVisible.value.return = false
+    message.success('操作成功')
+    // 2 重新加载数据
+    reload()
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 处理再次提交 */
+const handleReCreate = async () => {
+  // 跳转发起流程界面
+  await router.push({
+    name: 'BpmProcessInstanceCreate',
+    query: { processInstanceId: props.processInstance?.id }
+  })
+}
+
 /** 子任务 */
 const taskSignListRef = ref()
 const openChildrenTask = () => {
@@ -664,18 +749,30 @@ const reload = () => {
 const isHandleTaskStatus = () => {
   let canHandle = false
   if (
-    TaskApi.TaskStatusEnum.RUNNING === runningTask.value.status ||
-    TaskApi.TaskStatusEnum.DELEGATE === runningTask.value.status
+    TaskApi.TaskStatusEnum.RUNNING === runningTask.value?.status ||
+    TaskApi.TaskStatusEnum.DELEGATE === runningTask.value?.status
   ) {
     canHandle = true
   }
   return canHandle
 }
 
+/** 流程状态是否为结束状态 */
+const isEndProcessStatus = (status: number) => {
+  let isEndStatus = false
+  if (
+     BpmProcessInstanceStatus.APPROVE === status || BpmProcessInstanceStatus.REJECT === status ||
+     BpmProcessInstanceStatus.CANCEL === status
+  ) {
+    isEndStatus = true
+  }
+  return isEndStatus
+}
+
 /** 是否显示按钮 */
 const isShowButton = (btnType: OperationButtonType): boolean => {
   let isShow = true
-  if (runningTask.value.buttonsSetting && runningTask.value.buttonsSetting[btnType]) {
+  if (runningTask.value?.buttonsSetting && runningTask.value?.buttonsSetting[btnType]) {
     isShow = runningTask.value.buttonsSetting[btnType].enable
   }
   return isShow
@@ -684,7 +781,7 @@ const isShowButton = (btnType: OperationButtonType): boolean => {
 /** 获取按钮的显示名称 */
 const getButtonDisplayName = (btnType: OperationButtonType) => {
   let displayName = OPERATION_BUTTON_NAME.get(btnType)
-  if (runningTask.value.buttonsSetting && runningTask.value.buttonsSetting[btnType]) {
+  if (runningTask.value?.buttonsSetting && runningTask.value?.buttonsSetting[btnType]) {
     displayName = runningTask.value.buttonsSetting[btnType].displayName
   }
   return displayName
diff --git a/src/views/bpm/processInstance/detail/index_new.vue b/src/views/bpm/processInstance/detail/index_new.vue
index a0e018eb..4f60b79f 100644
--- a/src/views/bpm/processInstance/detail/index_new.vue
+++ b/src/views/bpm/processInstance/detail/index_new.vue
@@ -20,9 +20,7 @@
         </div>
 
         <div class="flex items-center gap-5 mb-10px text-13px h-35px">
-          <div
-            class="bg-gray-100 h-35px rounded-3xl flex items-center p-8px gap-2 dark:color-gray-600"
-          >
+          <div class="bg-gray-100 h-35px rounded-3xl flex items-center p-8px gap-2 dark:color-gray-600">
             <el-avatar
               :size="28"
               v-if="processInstance?.startUser?.avatar"
@@ -104,7 +102,8 @@
           <!-- 操作栏按钮 -->
           <ProcessInstanceOperationButton
             ref="operationButtonRef"
-            :process-instance-id="id"
+            :process-instance="processInstance"
+            :process-definition="processDefinition"
             :userOptions="userOptions"
             @success="refresh"
           />