ss-components.js 334 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555255625572558255925602561256225632564256525662567256825692570257125722573257425752576257725782579258025812582258325842585258625872588258925902591259225932594259525962597259825992600260126022603260426052606260726082609261026112612261326142615261626172618261926202621262226232624262526262627262826292630263126322633263426352636263726382639264026412642264326442645264626472648264926502651265226532654265526562657265826592660266126622663266426652666266726682669267026712672267326742675267626772678267926802681268226832684268526862687268826892690269126922693269426952696269726982699270027012702270327042705270627072708270927102711271227132714271527162717271827192720272127222723272427252726272727282729273027312732273327342735273627372738273927402741274227432744274527462747274827492750275127522753275427552756275727582759276027612762276327642765276627672768276927702771277227732774277527762777277827792780278127822783278427852786278727882789279027912792279327942795279627972798279928002801280228032804280528062807280828092810281128122813281428152816281728182819282028212822282328242825282628272828282928302831283228332834283528362837283828392840284128422843284428452846284728482849285028512852285328542855285628572858285928602861286228632864286528662867286828692870287128722873287428752876287728782879288028812882288328842885288628872888288928902891289228932894289528962897289828992900290129022903290429052906290729082909291029112912291329142915291629172918291929202921292229232924292529262927292829292930293129322933293429352936293729382939294029412942294329442945294629472948294929502951295229532954295529562957295829592960296129622963296429652966296729682969297029712972297329742975297629772978297929802981298229832984298529862987298829892990299129922993299429952996299729982999300030013002300330043005300630073008300930103011301230133014301530163017301830193020302130223023302430253026302730283029303030313032303330343035303630373038303930403041304230433044304530463047304830493050305130523053305430553056305730583059306030613062306330643065306630673068306930703071307230733074307530763077307830793080308130823083308430853086308730883089309030913092309330943095309630973098309931003101310231033104310531063107310831093110311131123113311431153116311731183119312031213122312331243125312631273128312931303131313231333134313531363137313831393140314131423143314431453146314731483149315031513152315331543155315631573158315931603161316231633164316531663167316831693170317131723173317431753176317731783179318031813182318331843185318631873188318931903191319231933194319531963197319831993200320132023203320432053206320732083209321032113212321332143215321632173218321932203221322232233224322532263227322832293230323132323233323432353236323732383239324032413242324332443245324632473248324932503251325232533254325532563257325832593260326132623263326432653266326732683269327032713272327332743275327632773278327932803281328232833284328532863287328832893290329132923293329432953296329732983299330033013302330333043305330633073308330933103311331233133314331533163317331833193320332133223323332433253326332733283329333033313332333333343335333633373338333933403341334233433344334533463347334833493350335133523353335433553356335733583359336033613362336333643365336633673368336933703371337233733374337533763377337833793380338133823383338433853386338733883389339033913392339333943395339633973398339934003401340234033404340534063407340834093410341134123413341434153416341734183419342034213422342334243425342634273428342934303431343234333434343534363437343834393440344134423443344434453446344734483449345034513452345334543455345634573458345934603461346234633464346534663467346834693470347134723473347434753476347734783479348034813482348334843485348634873488348934903491349234933494349534963497349834993500350135023503350435053506350735083509351035113512351335143515351635173518351935203521352235233524352535263527352835293530353135323533353435353536353735383539354035413542354335443545354635473548354935503551355235533554355535563557355835593560356135623563356435653566356735683569357035713572357335743575357635773578357935803581358235833584358535863587358835893590359135923593359435953596359735983599360036013602360336043605360636073608360936103611361236133614361536163617361836193620362136223623362436253626362736283629363036313632363336343635363636373638363936403641364236433644364536463647364836493650365136523653365436553656365736583659366036613662366336643665366636673668366936703671367236733674367536763677367836793680368136823683368436853686368736883689369036913692369336943695369636973698369937003701370237033704370537063707370837093710371137123713371437153716371737183719372037213722372337243725372637273728372937303731373237333734373537363737373837393740374137423743374437453746374737483749375037513752375337543755375637573758375937603761376237633764376537663767376837693770377137723773377437753776377737783779378037813782378337843785378637873788378937903791379237933794379537963797379837993800380138023803380438053806380738083809381038113812381338143815381638173818381938203821382238233824382538263827382838293830383138323833383438353836383738383839384038413842384338443845384638473848384938503851385238533854385538563857385838593860386138623863386438653866386738683869387038713872387338743875387638773878387938803881388238833884388538863887388838893890389138923893389438953896389738983899390039013902390339043905390639073908390939103911391239133914391539163917391839193920392139223923392439253926392739283929393039313932393339343935393639373938393939403941394239433944394539463947394839493950395139523953395439553956395739583959396039613962396339643965396639673968396939703971397239733974397539763977397839793980398139823983398439853986398739883989399039913992399339943995399639973998399940004001400240034004400540064007400840094010401140124013401440154016401740184019402040214022402340244025402640274028402940304031403240334034403540364037403840394040404140424043404440454046404740484049405040514052405340544055405640574058405940604061406240634064406540664067406840694070407140724073407440754076407740784079408040814082408340844085408640874088408940904091409240934094409540964097409840994100410141024103410441054106410741084109411041114112411341144115411641174118411941204121412241234124412541264127412841294130413141324133413441354136413741384139414041414142414341444145414641474148414941504151415241534154415541564157415841594160416141624163416441654166416741684169417041714172417341744175417641774178417941804181418241834184418541864187418841894190419141924193419441954196419741984199420042014202420342044205420642074208420942104211421242134214421542164217421842194220422142224223422442254226422742284229423042314232423342344235423642374238423942404241424242434244424542464247424842494250425142524253425442554256425742584259426042614262426342644265426642674268426942704271427242734274427542764277427842794280428142824283428442854286428742884289429042914292429342944295429642974298429943004301430243034304430543064307430843094310431143124313431443154316431743184319432043214322432343244325432643274328432943304331433243334334433543364337433843394340434143424343434443454346434743484349435043514352435343544355435643574358435943604361436243634364436543664367436843694370437143724373437443754376437743784379438043814382438343844385438643874388438943904391439243934394439543964397439843994400440144024403440444054406440744084409441044114412441344144415441644174418441944204421442244234424442544264427442844294430443144324433443444354436443744384439444044414442444344444445444644474448444944504451445244534454445544564457445844594460446144624463446444654466446744684469447044714472447344744475447644774478447944804481448244834484448544864487448844894490449144924493449444954496449744984499450045014502450345044505450645074508450945104511451245134514451545164517451845194520452145224523452445254526452745284529453045314532453345344535453645374538453945404541454245434544454545464547454845494550455145524553455445554556455745584559456045614562456345644565456645674568456945704571457245734574457545764577457845794580458145824583458445854586458745884589459045914592459345944595459645974598459946004601460246034604460546064607460846094610461146124613461446154616461746184619462046214622462346244625462646274628462946304631463246334634463546364637463846394640464146424643464446454646464746484649465046514652465346544655465646574658465946604661466246634664466546664667466846694670467146724673467446754676467746784679468046814682468346844685468646874688468946904691469246934694469546964697469846994700470147024703470447054706470747084709471047114712471347144715471647174718471947204721472247234724472547264727472847294730473147324733473447354736473747384739474047414742474347444745474647474748474947504751475247534754475547564757475847594760476147624763476447654766476747684769477047714772477347744775477647774778477947804781478247834784478547864787478847894790479147924793479447954796479747984799480048014802480348044805480648074808480948104811481248134814481548164817481848194820482148224823482448254826482748284829483048314832483348344835483648374838483948404841484248434844484548464847484848494850485148524853485448554856485748584859486048614862486348644865486648674868486948704871487248734874487548764877487848794880488148824883488448854886488748884889489048914892489348944895489648974898489949004901490249034904490549064907490849094910491149124913491449154916491749184919492049214922492349244925492649274928492949304931493249334934493549364937493849394940494149424943494449454946494749484949495049514952495349544955495649574958495949604961496249634964496549664967496849694970497149724973497449754976497749784979498049814982498349844985498649874988498949904991499249934994499549964997499849995000500150025003500450055006500750085009501050115012501350145015501650175018501950205021502250235024502550265027502850295030503150325033503450355036503750385039504050415042504350445045504650475048504950505051505250535054505550565057505850595060506150625063506450655066506750685069507050715072507350745075507650775078507950805081508250835084508550865087508850895090509150925093509450955096509750985099510051015102510351045105510651075108510951105111511251135114511551165117511851195120512151225123512451255126512751285129513051315132513351345135513651375138513951405141514251435144514551465147514851495150515151525153515451555156515751585159516051615162516351645165516651675168516951705171517251735174517551765177517851795180518151825183518451855186518751885189519051915192519351945195519651975198519952005201520252035204520552065207520852095210521152125213521452155216521752185219522052215222522352245225522652275228522952305231523252335234523552365237523852395240524152425243524452455246524752485249525052515252525352545255525652575258525952605261526252635264526552665267526852695270527152725273527452755276527752785279528052815282528352845285528652875288528952905291529252935294529552965297529852995300530153025303530453055306530753085309531053115312531353145315531653175318531953205321532253235324532553265327532853295330533153325333533453355336533753385339534053415342534353445345534653475348534953505351535253535354535553565357535853595360536153625363536453655366536753685369537053715372537353745375537653775378537953805381538253835384538553865387538853895390539153925393539453955396539753985399540054015402540354045405540654075408540954105411541254135414541554165417541854195420542154225423542454255426542754285429543054315432543354345435543654375438543954405441544254435444544554465447544854495450545154525453545454555456545754585459546054615462546354645465546654675468546954705471547254735474547554765477547854795480548154825483548454855486548754885489549054915492549354945495549654975498549955005501550255035504550555065507550855095510551155125513551455155516551755185519552055215522552355245525552655275528552955305531553255335534553555365537553855395540554155425543554455455546554755485549555055515552555355545555555655575558555955605561556255635564556555665567556855695570557155725573557455755576557755785579558055815582558355845585558655875588558955905591559255935594559555965597559855995600560156025603560456055606560756085609561056115612561356145615561656175618561956205621562256235624562556265627562856295630563156325633563456355636563756385639564056415642564356445645564656475648564956505651565256535654565556565657565856595660566156625663566456655666566756685669567056715672567356745675567656775678567956805681568256835684568556865687568856895690569156925693569456955696569756985699570057015702570357045705570657075708570957105711571257135714571557165717571857195720572157225723572457255726572757285729573057315732573357345735573657375738573957405741574257435744574557465747574857495750575157525753575457555756575757585759576057615762576357645765576657675768576957705771577257735774577557765777577857795780578157825783578457855786578757885789579057915792579357945795579657975798579958005801580258035804580558065807580858095810581158125813581458155816581758185819582058215822582358245825582658275828582958305831583258335834583558365837583858395840584158425843584458455846584758485849585058515852585358545855585658575858585958605861586258635864586558665867586858695870587158725873587458755876587758785879588058815882588358845885588658875888588958905891589258935894589558965897589858995900590159025903590459055906590759085909591059115912591359145915591659175918591959205921592259235924592559265927592859295930593159325933593459355936593759385939594059415942594359445945594659475948594959505951595259535954595559565957595859595960596159625963596459655966596759685969597059715972597359745975597659775978597959805981598259835984598559865987598859895990599159925993599459955996599759985999600060016002600360046005600660076008600960106011601260136014601560166017601860196020602160226023602460256026602760286029603060316032603360346035603660376038603960406041604260436044604560466047604860496050605160526053605460556056605760586059606060616062606360646065606660676068606960706071607260736074607560766077607860796080608160826083608460856086608760886089609060916092609360946095609660976098609961006101610261036104610561066107610861096110611161126113611461156116611761186119612061216122612361246125612661276128612961306131613261336134613561366137613861396140614161426143614461456146614761486149615061516152615361546155615661576158615961606161616261636164616561666167616861696170617161726173617461756176617761786179618061816182618361846185618661876188618961906191619261936194619561966197619861996200620162026203620462056206620762086209621062116212621362146215621662176218621962206221622262236224622562266227622862296230623162326233623462356236623762386239624062416242624362446245624662476248624962506251625262536254625562566257625862596260626162626263626462656266626762686269627062716272627362746275627662776278627962806281628262836284628562866287628862896290629162926293629462956296629762986299630063016302630363046305630663076308630963106311631263136314631563166317631863196320632163226323632463256326632763286329633063316332633363346335633663376338633963406341634263436344634563466347634863496350635163526353635463556356635763586359636063616362636363646365636663676368636963706371637263736374637563766377637863796380638163826383638463856386638763886389639063916392639363946395639663976398639964006401640264036404640564066407640864096410641164126413641464156416641764186419642064216422642364246425642664276428642964306431643264336434643564366437643864396440644164426443644464456446644764486449645064516452645364546455645664576458645964606461646264636464646564666467646864696470647164726473647464756476647764786479648064816482648364846485648664876488648964906491649264936494649564966497649864996500650165026503650465056506650765086509651065116512651365146515651665176518651965206521652265236524652565266527652865296530653165326533653465356536653765386539654065416542654365446545654665476548654965506551655265536554655565566557655865596560656165626563656465656566656765686569657065716572657365746575657665776578657965806581658265836584658565866587658865896590659165926593659465956596659765986599660066016602660366046605660666076608660966106611661266136614661566166617661866196620662166226623662466256626662766286629663066316632663366346635663666376638663966406641664266436644664566466647664866496650665166526653665466556656665766586659666066616662666366646665666666676668666966706671667266736674667566766677667866796680668166826683668466856686668766886689669066916692669366946695669666976698669967006701670267036704670567066707670867096710671167126713671467156716671767186719672067216722672367246725672667276728672967306731673267336734673567366737673867396740674167426743674467456746674767486749675067516752675367546755675667576758675967606761676267636764676567666767676867696770677167726773677467756776677767786779678067816782678367846785678667876788678967906791679267936794679567966797679867996800680168026803680468056806680768086809681068116812681368146815681668176818681968206821682268236824682568266827682868296830683168326833683468356836683768386839684068416842684368446845684668476848684968506851685268536854685568566857685868596860686168626863686468656866686768686869687068716872687368746875687668776878687968806881688268836884688568866887688868896890689168926893689468956896689768986899690069016902690369046905690669076908690969106911691269136914691569166917691869196920692169226923692469256926692769286929693069316932693369346935693669376938693969406941694269436944694569466947694869496950695169526953695469556956695769586959696069616962696369646965696669676968696969706971697269736974697569766977697869796980698169826983698469856986698769886989699069916992699369946995699669976998699970007001700270037004700570067007700870097010701170127013701470157016701770187019702070217022702370247025702670277028702970307031703270337034703570367037703870397040704170427043704470457046704770487049705070517052705370547055705670577058705970607061706270637064706570667067706870697070707170727073707470757076707770787079708070817082708370847085708670877088708970907091709270937094709570967097709870997100710171027103710471057106710771087109711071117112711371147115711671177118711971207121712271237124712571267127712871297130713171327133713471357136713771387139714071417142714371447145714671477148714971507151715271537154715571567157715871597160716171627163716471657166716771687169717071717172717371747175717671777178717971807181718271837184718571867187718871897190719171927193719471957196719771987199720072017202720372047205720672077208720972107211721272137214721572167217721872197220722172227223722472257226722772287229723072317232723372347235723672377238723972407241724272437244724572467247724872497250725172527253725472557256725772587259726072617262726372647265726672677268726972707271727272737274727572767277727872797280728172827283728472857286728772887289729072917292729372947295729672977298729973007301730273037304730573067307730873097310731173127313731473157316731773187319732073217322732373247325732673277328732973307331733273337334733573367337733873397340734173427343734473457346734773487349735073517352735373547355735673577358735973607361736273637364736573667367736873697370737173727373737473757376737773787379738073817382738373847385738673877388738973907391739273937394739573967397739873997400740174027403740474057406740774087409741074117412741374147415741674177418741974207421742274237424742574267427742874297430743174327433743474357436743774387439744074417442744374447445744674477448744974507451745274537454745574567457745874597460746174627463746474657466746774687469747074717472747374747475747674777478747974807481748274837484748574867487748874897490749174927493749474957496749774987499750075017502750375047505750675077508750975107511751275137514751575167517751875197520752175227523752475257526752775287529753075317532753375347535753675377538753975407541754275437544754575467547754875497550755175527553755475557556755775587559756075617562756375647565756675677568756975707571757275737574757575767577757875797580758175827583758475857586758775887589759075917592759375947595759675977598759976007601760276037604760576067607760876097610761176127613761476157616761776187619762076217622762376247625762676277628762976307631763276337634763576367637763876397640764176427643764476457646764776487649765076517652765376547655765676577658765976607661766276637664766576667667766876697670767176727673767476757676767776787679768076817682768376847685768676877688768976907691769276937694769576967697769876997700770177027703770477057706770777087709771077117712771377147715771677177718771977207721772277237724772577267727772877297730773177327733773477357736773777387739774077417742774377447745774677477748774977507751775277537754775577567757775877597760776177627763776477657766776777687769777077717772777377747775777677777778777977807781778277837784778577867787778877897790779177927793779477957796779777987799780078017802780378047805780678077808780978107811781278137814781578167817781878197820782178227823782478257826782778287829783078317832783378347835783678377838783978407841784278437844784578467847784878497850785178527853785478557856785778587859786078617862786378647865786678677868786978707871787278737874787578767877787878797880788178827883788478857886788778887889789078917892789378947895789678977898789979007901790279037904790579067907790879097910791179127913791479157916791779187919792079217922792379247925792679277928792979307931793279337934793579367937793879397940794179427943794479457946794779487949795079517952795379547955795679577958795979607961796279637964796579667967796879697970797179727973797479757976797779787979798079817982798379847985798679877988798979907991799279937994799579967997799879998000800180028003800480058006800780088009801080118012801380148015801680178018801980208021802280238024802580268027802880298030803180328033803480358036803780388039804080418042804380448045804680478048804980508051805280538054805580568057805880598060806180628063806480658066806780688069807080718072807380748075807680778078807980808081808280838084808580868087808880898090809180928093809480958096809780988099810081018102810381048105810681078108810981108111811281138114811581168117811881198120812181228123812481258126812781288129813081318132813381348135813681378138813981408141814281438144814581468147814881498150815181528153815481558156815781588159816081618162816381648165816681678168816981708171817281738174817581768177817881798180818181828183818481858186818781888189819081918192819381948195819681978198819982008201820282038204820582068207820882098210821182128213821482158216821782188219822082218222822382248225822682278228822982308231823282338234823582368237823882398240824182428243824482458246824782488249825082518252825382548255825682578258825982608261826282638264826582668267826882698270827182728273827482758276827782788279828082818282828382848285828682878288828982908291829282938294829582968297829882998300830183028303830483058306830783088309831083118312831383148315831683178318831983208321832283238324832583268327832883298330833183328333833483358336833783388339834083418342834383448345834683478348834983508351835283538354835583568357835883598360836183628363836483658366836783688369837083718372837383748375837683778378837983808381838283838384838583868387838883898390839183928393839483958396839783988399840084018402840384048405840684078408840984108411841284138414841584168417841884198420842184228423842484258426842784288429843084318432843384348435843684378438843984408441844284438444844584468447844884498450845184528453845484558456845784588459846084618462846384648465846684678468846984708471847284738474847584768477847884798480848184828483848484858486848784888489849084918492849384948495849684978498849985008501850285038504850585068507850885098510851185128513851485158516851785188519852085218522852385248525852685278528852985308531853285338534853585368537853885398540854185428543854485458546854785488549855085518552855385548555855685578558855985608561856285638564856585668567856885698570857185728573857485758576857785788579858085818582858385848585858685878588858985908591859285938594859585968597859885998600860186028603860486058606860786088609861086118612861386148615861686178618861986208621862286238624862586268627862886298630863186328633863486358636863786388639864086418642864386448645864686478648864986508651865286538654865586568657865886598660866186628663866486658666866786688669867086718672867386748675867686778678867986808681868286838684868586868687868886898690869186928693869486958696869786988699870087018702870387048705870687078708870987108711871287138714871587168717871887198720872187228723872487258726872787288729873087318732873387348735873687378738873987408741874287438744874587468747874887498750875187528753875487558756875787588759876087618762876387648765876687678768876987708771877287738774877587768777877887798780878187828783878487858786878787888789879087918792879387948795879687978798879988008801880288038804880588068807880888098810881188128813881488158816881788188819882088218822882388248825882688278828882988308831883288338834883588368837883888398840884188428843884488458846884788488849885088518852885388548855885688578858885988608861886288638864886588668867886888698870887188728873887488758876887788788879888088818882888388848885888688878888888988908891889288938894889588968897889888998900890189028903890489058906890789088909891089118912891389148915891689178918891989208921892289238924892589268927892889298930893189328933893489358936893789388939894089418942894389448945894689478948894989508951895289538954895589568957895889598960896189628963896489658966896789688969897089718972897389748975897689778978897989808981898289838984898589868987898889898990899189928993899489958996899789988999900090019002900390049005900690079008900990109011901290139014901590169017901890199020902190229023902490259026902790289029903090319032903390349035903690379038903990409041904290439044904590469047904890499050905190529053905490559056905790589059906090619062906390649065906690679068906990709071907290739074907590769077907890799080908190829083908490859086908790889089909090919092909390949095909690979098909991009101910291039104910591069107910891099110911191129113911491159116911791189119912091219122912391249125912691279128912991309131913291339134913591369137913891399140914191429143914491459146914791489149915091519152915391549155915691579158915991609161916291639164916591669167916891699170917191729173917491759176917791789179918091819182918391849185918691879188918991909191919291939194919591969197919891999200920192029203920492059206920792089209921092119212921392149215921692179218921992209221922292239224922592269227922892299230923192329233923492359236923792389239924092419242924392449245924692479248924992509251925292539254925592569257925892599260926192629263
  1. import { ssIcon, commonIcon } from "./icon-config.js";
  2. import * as IndexComponents from "./ss-index-components.js";
  3. import * as EchartComponents from "./ss-echarts-compnents.js";
  4. import { isNum, toStyleStr } from "./tools.js";
  5. import { EVEN_VAR } from "./EventBus.js";
  6. // import * as elements from "../lib/element-plus.js";
  7. (function () {
  8. const {
  9. createApp,
  10. ref,
  11. reactive,
  12. watch,
  13. onMounted,
  14. onBeforeUnmount,
  15. h,
  16. computed,
  17. resolveComponent,
  18. watchEffect,
  19. nextTick,
  20. onVnodeMounted,
  21. Teleport,
  22. inject,
  23. provide,
  24. } = Vue;
  25. // 弹窗默认遮罩z-index
  26. let currentZIndex = 100;
  27. // 目前已存在的弹窗
  28. const topWindow = window.top;
  29. topWindow.dialogInstances = topWindow.dialogInstances || [];
  30. // 新建弹窗
  31. function createSsDialogInstance(setting, callbackEvent) {
  32. currentZIndex += 10; // 动态提升 z-index
  33. const container = document.createElement("div");
  34. document.body.appendChild(container);
  35. const app = Vue.createApp({
  36. render() {
  37. return h(SsDialog, {
  38. ...setting,
  39. zIndex: currentZIndex,
  40. onClose() {
  41. document.body.removeChild(container); // 仅移除弹窗容器
  42. const index = topWindow.dialogInstances.indexOf(app);
  43. if (index > -1) {
  44. topWindow.dialogInstances.splice(index, 1); // 移除实例
  45. }
  46. // 关闭后的回调
  47. if (callbackEvent && typeof callbackEvent === "function") {
  48. callbackEvent();
  49. }
  50. app.unmount(); // 仅卸载弹窗实例
  51. if (container.parentNode) {
  52. container.parentNode.removeChild(container); // 确保移除容器
  53. }
  54. },
  55. });
  56. },
  57. });
  58. topWindow.dialogInstances.push({ app, callbackEvent, container });
  59. app.component("ss-mark", SsMark); // 注册 ss-mark 组件
  60. app.component("ss-icon", SsIcon);
  61. app.component("ss-full-style-header", SsFullStyleHeader); // 注册 ss-full-style-header 组件
  62. app.mount(container);
  63. }
  64. // ss-breadcrumb 一级菜单页面面包屑
  65. const SsBreadcrumb = {
  66. name: "SsBreadcrumb",
  67. props: {
  68. level: {
  69. type: Object,
  70. default: null,
  71. },
  72. },
  73. setup(props) {
  74. const currentMenu = ref(null);
  75. const folderPath = ref([]);
  76. const eventBus = window.parent.sharedEventBus;
  77. // 监听页面变化
  78. onMounted(() => {
  79. // 获取初始页面
  80. currentMenu.value = eventBus.getState(EVEN_VAR.currentPage);
  81. folderPath.value = eventBus.getState("folderPath") || [];
  82. // 订阅页面变化
  83. eventBus.subscribe(EVEN_VAR.currentPage, (page) => {
  84. currentMenu.value = page;
  85. });
  86. eventBus.subscribe("folderPath", (path) => {
  87. folderPath.value = path || [];
  88. });
  89. });
  90. // 修改点击处理函数
  91. const handlePathClick = (index) => {
  92. if (props.level?.onBack) {
  93. // 截取到点击的位置,后面的路径会被销毁
  94. const newPath = folderPath.value.slice(0, index + 1);
  95. eventBus.publish("folderPath", newPath);
  96. // 返回到对应层级
  97. const targetFolder = newPath[newPath.length - 1]?.folder || null;
  98. props.level.onBack(targetFolder);
  99. }
  100. };
  101. const SsCommonIcon = resolveComponent("SsCommonIcon");
  102. return () =>
  103. h("div", { class: "bread-crumb" }, [
  104. currentMenu.value &&
  105. h(
  106. "div",
  107. {
  108. onClick: () => {
  109. if (props.level?.onBack) {
  110. eventBus.publish("folderPath", []);
  111. props.level.onBack(null); // 返回到根目录
  112. } else {
  113. eventBus.publish(EVEN_VAR.currentPage, currentMenu.value);
  114. }
  115. },
  116. },
  117. currentMenu.value.label || currentMenu.value.name
  118. ),
  119. ...(folderPath.value || [])
  120. .map((folder, index) => [
  121. h(SsCommonIcon, { class: "common-icon-arrow-right" }),
  122. h(
  123. "div",
  124. {
  125. class: "bread-crumb-item",
  126. onClick: () => handlePathClick(index),
  127. style: { cursor: "pointer" },
  128. },
  129. folder.title
  130. ),
  131. ])
  132. .flat(),
  133. ]);
  134. },
  135. };
  136. // ss-input form表单的输入
  137. const SsInput = {
  138. name: "SsInp",//把SsInput改为SsInp Ben(20251225)
  139. inheritAttrs: false, // 不直接继承属性到组件根元素
  140. props: {
  141. name: {
  142. type: String,
  143. required: true,
  144. default: "",
  145. },
  146. // 接收 v-model 绑定的值
  147. errTip: {
  148. type: String,
  149. },
  150. required: {
  151. type: Boolean,
  152. default: false,
  153. },
  154. placeholder: {
  155. type: String,
  156. default: "请输入",
  157. },
  158. defaultValue: [String, Number],
  159. modelValue: [String, Number],
  160. // 新增:附件配置
  161. fj: {
  162. type: Object,
  163. default: null,
  164. },
  165. // 新增:param 配置(用于附件功能)
  166. param: {
  167. type: Object,
  168. default: null,
  169. },
  170. // 新增:高度配置
  171. height: {
  172. type: String,
  173. default: "",
  174. },
  175. // 新增:是否允许回车换行,默认false禁止换行 by xu 20251212
  176. multiline: {
  177. type: Boolean,
  178. default: false,
  179. },
  180. },
  181. emits: ["update:modelValue", "input", "blur", "change"], // 允许更新 v-model 绑定的值
  182. setup(props, { emit }) {
  183. const errMsg = ref("");
  184. const inputRef = ref(null);
  185. const textareaRef = ref(null);
  186. const inputValue = ref(props.modelValue || props.defaultValue || "");
  187. const contentFloatingDiv = ref(false); // 控制浮动 DIV 的显示
  188. const floatingDivPosition = ref("bottom"); // 'bottom' 或 'top'
  189. const isFocused = ref(false); // 跟踪焦点状态
  190. // 附件相关变量(仅在传入 param 时初始化)
  191. let fjid = ref(null);
  192. let fjName = null;
  193. let mode = null;
  194. if (props.param && props.param.button) {
  195. fjid = ref(props.param.button.val);
  196. fjName = props.param.button.desc;
  197. mode = props.param.mode;
  198. }
  199. const showRequired = computed(() => {
  200. // 检查是否有验证规则(通过 window.ssVm 判断)
  201. const hasValidationRule = window.ssVm?.validations?.has(props.name);
  202. if (!hasValidationRule) return false;
  203. if (errMsg.value) return true;
  204. if (!inputValue.value) return true;
  205. return false;
  206. });
  207. // 计算floatdiv应该向上还是向下展开
  208. const calculateFloatingDivPosition = () => {
  209. nextTick(() => {
  210. const textarea = inputRef.value;
  211. if (!textarea) return;
  212. const rect = textarea.getBoundingClientRect();
  213. const viewportHeight = window.innerHeight;
  214. // 预估floatdiv的高度(最多5行 * 20px + 上下padding + border)
  215. const estimatedFloatDivHeight = 20 * 5 + 10 + 2; // 5行 + padding + border = 112px
  216. // 检查下方空间
  217. const spaceBelow = viewportHeight - rect.bottom;
  218. // 如果下方空间不足,且上方空间足够,则向上展开
  219. if (spaceBelow < estimatedFloatDivHeight && rect.top > estimatedFloatDivHeight) {
  220. floatingDivPosition.value = "top";
  221. } else {
  222. floatingDivPosition.value = "bottom";
  223. }
  224. });
  225. };
  226. // 计算floatdiv的top偏移量
  227. const getFloatingDivTop = computed(() => {
  228. if (props.height) {
  229. // 有height时,padding是5px
  230. return '5px';
  231. } else {
  232. // 没有height时是单行居中,需要计算居中位置
  233. // 假设input-container高度是32px(或者从CSS读取),单行20px
  234. // 居中偏移 = (容器高度 - 行高) / 2 = (32 - 20) / 2 = 6px
  235. return '6px';
  236. }
  237. });
  238. const validate = () => {
  239. if (window.ssVm) {
  240. const result = window.ssVm.validateField(props.name);
  241. console.log(result);
  242. errMsg.value = result.valid ? "" : result.message;
  243. }
  244. };
  245. // 使用 watch 监听 props.errTip 和 props.modelValue 的变化
  246. watch(
  247. () => props.errTip,
  248. (newVal) => {
  249. errMsg.value = newVal;
  250. },
  251. { immediate: true }
  252. );
  253. watch(
  254. () => props.modelValue,
  255. (newVal) => {
  256. inputValue.value = newVal;
  257. }
  258. );
  259. // 挂载时的逻辑
  260. onMounted(() => {
  261. errMsg.value = props.errTip;
  262. inputValue.value = props.modelValue || props.defaultValue || "";
  263. });
  264. // 计算并调整textarea的高度
  265. const adjustHeight = () => {
  266. nextTick(() => {
  267. const textarea = textareaRef.value;
  268. if (!textarea) return;
  269. // floatDiv的textarea始终自动计算高度,不受props.height影响
  270. // 重置高度以获得正确的scrollHeight
  271. textarea.style.height = "auto";
  272. // 计算新高度 - 统一限制为5行
  273. const lineHeight = parseInt(getComputedStyle(textarea).lineHeight, 10);
  274. const maxHeight = lineHeight * 5; // 统一为5行
  275. const newHeight = Math.min(textarea.scrollHeight, maxHeight);
  276. textarea.style.height = `${newHeight}px`;
  277. });
  278. };
  279. // 检查是否应该显示浮动窗口(需要同时满足:有焦点 + 内容超出)
  280. // 修复新增页面点击就出现floatdiv的问题 by xu 20251212
  281. const checkShouldShowFloatingDiv = () => {
  282. const textarea = inputRef.value;
  283. if (!textarea) return false;
  284. // 首先检查是否有内容,没有内容时不显示floatdiv by xu 20251212
  285. if (!inputValue.value || inputValue.value.toString().trim() === '') {
  286. console.log('[floatdiv] 内容为空,不显示floatdiv');
  287. return false;
  288. }
  289. // 判断内容是否超出 by xu 20251212
  290. // 同时检查横向和纵向溢出,任一方向溢出都应显示floatdiv
  291. // 纵向溢出需要加容差值,避免padding/border导致的误判 by xu 20251212
  292. const verticalTolerance = 5; // 容差值5px
  293. const isHorizontalOverflow = textarea.scrollWidth > textarea.clientWidth;
  294. const isVerticalOverflow = textarea.scrollHeight > textarea.clientHeight + verticalTolerance;
  295. const isOverflow = isHorizontalOverflow || isVerticalOverflow;
  296. console.log('[floatdiv] 溢出检测 - scrollWidth:', textarea.scrollWidth, 'clientWidth:', textarea.clientWidth, 'horizontalOverflow:', isHorizontalOverflow);
  297. console.log('[floatdiv] 溢出检测 - scrollHeight:', textarea.scrollHeight, 'clientHeight:', textarea.clientHeight, 'tolerance:', verticalTolerance, 'verticalOverflow:', isVerticalOverflow);
  298. const shouldShow = isFocused.value && isOverflow;
  299. console.log('[floatdiv] 最终判断 - isFocused:', isFocused.value, 'isOverflow:', isOverflow, 'shouldShow:', shouldShow);
  300. // 需要同时满足:有焦点 + 内容超出
  301. return shouldShow;
  302. };
  303. // 定义事件处理函数
  304. const onInput = (event) => {
  305. const newValue = event.target.value;
  306. inputValue.value = newValue;
  307. emit("update:modelValue", newValue);
  308. validate(); // 输入时验证
  309. nextTick(() => {
  310. // 检查是否需要显示浮动div
  311. contentFloatingDiv.value = checkShouldShowFloatingDiv();
  312. // 如果需要显示floatdiv,计算其位置
  313. if (contentFloatingDiv.value) {
  314. calculateFloatingDivPosition();
  315. }
  316. });
  317. adjustHeight();
  318. };
  319. const onFocus = (event) => {
  320. // 设置焦点状态为true
  321. isFocused.value = true;
  322. adjustHeight();
  323. // 检查是否应该显示浮动窗口
  324. nextTick(() => {
  325. contentFloatingDiv.value = checkShouldShowFloatingDiv();
  326. if (contentFloatingDiv.value) {
  327. calculateFloatingDivPosition();
  328. }
  329. });
  330. };
  331. // 失去焦点时进行验证
  332. const onBlur = (event) => {
  333. emit("blur", event.target);
  334. validate(); // 失焦时验证
  335. nextTick(() => {
  336. // 如果焦点不在 textarea 上,则隐藏浮动 div
  337. if (!document.activeElement.classList.contains("input-control")) {
  338. isFocused.value = false;
  339. contentFloatingDiv.value = false;
  340. }
  341. });
  342. };
  343. const onChange = (event) => {
  344. inputValue.value = event.target.value || "";
  345. emit("change", inputValue.value);
  346. };
  347. const onMouseover = (event) => {
  348. nextTick(() => {
  349. // setTimeout(contentFloatingDiv.value = true, 500)
  350. });
  351. };
  352. const onMouseleave = (event) => {
  353. // contentFloatingDiv.value = false
  354. };
  355. // 处理键盘按下事件,禁止回车换行 by xu 20251212
  356. const onKeydown = (event) => {
  357. // 如果不允许多行且按下的是回车键,阻止默认行为
  358. if (!props.multiline && event.key === 'Enter') {
  359. event.preventDefault();
  360. }
  361. };
  362. // 附件按钮点击处理(从 SsEditor 搬运)
  363. const onAttachmentClick = (e) => {
  364. e.preventDefault();
  365. if (!props.param || !props.param.button) {
  366. console.warn("未配置 param 参数");
  367. return;
  368. }
  369. console.log("附件点击了");
  370. console.log("param", props.param);
  371. console.log("cmsAddUrl", props.param.button.cmsAddUrl);
  372. // 如果 fjid 为空,先调用 cmsAddUrl 创建
  373. if (fjid.value == null || fjid.value == "") {
  374. $.ajax({
  375. type: "post",
  376. url: props.param.button.cmsAddUrl,
  377. async: false,
  378. data: {
  379. name: "fjid",
  380. ssNrObjName: "sh",
  381. ssNrObjId: "",
  382. },
  383. success: function (_fjid) {
  384. console.log("cmsAddUrl success", _fjid);
  385. fjid.value = _fjid;
  386. },
  387. });
  388. }
  389. // 构建参数字符串
  390. var str =
  391. "&nrid=T-" +
  392. fjid.value +
  393. "&objectId=" +
  394. fjid.value +
  395. "&objectName=" +
  396. fjName +
  397. "&callback=" +
  398. (window["fjidCallbackName"] || "");
  399. console.log("str", str);
  400. // 打开附件编辑对话框
  401. SS.openDialog({
  402. src: props.param.button.cmsUpdUrl + str,
  403. headerTitle: "编辑",
  404. width: 900,
  405. high: 664,
  406. zIndex: 51,
  407. });
  408. };
  409. return {
  410. errMsg,
  411. inputValue,
  412. showRequired,
  413. onInput,
  414. onBlur,
  415. onChange,
  416. onMouseover,
  417. onMouseleave,
  418. onKeydown, // 新增:键盘事件处理 by xu 20251212
  419. contentFloatingDiv,
  420. floatingDivPosition,
  421. getFloatingDivTop,
  422. inputRef,
  423. textareaRef,
  424. onFocus,
  425. onAttachmentClick,
  426. fjid, // 附件 ID,用于隐藏字段
  427. };
  428. },
  429. render() {
  430. const { resolveComponent, h } = Vue;
  431. const SsIcon = resolveComponent("ss-icon");
  432. const SsEditorIcon = resolveComponent("SsEditorIcon");
  433. // 构建主textarea的样式
  434. const mainTextareaStyle = {};
  435. if (this.height) {
  436. mainTextareaStyle.height = "auto"
  437. // mainTextareaStyle.paddingTop = '5px'; // 有高度时加上padding-top
  438. // mainTextareaStyle.paddingBottom = '5px'; // 有高度时加上padding-bottom
  439. } else {
  440. // 没有指定height时,固定为单行高度
  441. mainTextareaStyle.height = '20px'; // 行高20px
  442. mainTextareaStyle.lineHeight = '20px'; // 确保单行垂直居中
  443. mainTextareaStyle.display = 'flex';
  444. mainTextareaStyle.marginBottom = '5px';
  445. }
  446. // 如果有附件按钮,为按钮留出空间
  447. if (this.fj || (this.param && this.param.button)) {//加上&&this.param.button条件 Ben(20251221)
  448. mainTextareaStyle.paddingRight = '75px';
  449. }
  450. const mainTextareaRows = this.height ? Math.floor(parseFloat('80px') / 20) : 1
  451. return h("div", { class: "input" }, [
  452. h("div", { class: "input-container", }, [
  453. h("div", { class: "input", style: "padding:5px 0" }, [
  454. h("textarea", {
  455. ref: "inputRef",
  456. class: "input-control",
  457. name: this.name,
  458. value: this.inputValue,
  459. onInput: this.onInput,
  460. onFocus: this.onFocus,
  461. onBlur: this.onBlur,
  462. onChange: this.onChange,
  463. onKeydown: this.onKeydown, // 新增:禁止回车换行 by xu 20251212
  464. placeholder: this.placeholder,
  465. onMouseover: this.onMouseover, // 监听鼠标悬停
  466. onMouseleave: this.onMouseleave, // 监听鼠标离开
  467. rows: mainTextareaRows,
  468. ...this.$attrs,
  469. style: mainTextareaStyle,
  470. autocomplete: "off",
  471. }),
  472. // 附件按钮(优先使用 param,兼容旧的 fj)
  473. this.fj || (this.param && this.param.button)//加上&&this.param.button条件 Ben(20251221)
  474. ? h(
  475. "button",
  476. {
  477. type: "button",
  478. class: "fj-button",
  479. onClick: this.param ? this.onAttachmentClick : (e) => {
  480. e.preventDefault();
  481. console.log("附件配置:", this.fj);
  482. },
  483. },
  484. [
  485. h(SsEditorIcon, {
  486. class: "editor-icon-link",
  487. }),
  488. h("span", { class: "fj-button-text" }, "附件")
  489. ]
  490. )
  491. : null,
  492. // this.showRequired ? h("div", { class: "required" }) : null,
  493. ]),
  494. this.contentFloatingDiv || ""
  495. ? h("div", {
  496. class: "floating-div",
  497. style: this.floatingDivPosition === "bottom"
  498. ? {
  499. // 向下展开: 覆盖原输入框,top对齐首行
  500. top: this.getFloatingDivTop,
  501. bottom: 'auto',
  502. }
  503. : {
  504. // 向上展开: 同样覆盖原输入框,但从底部开始计算
  505. top: 'auto',
  506. bottom: this.height ? '5px' : '6px', // 对齐到原textarea的底部padding位置
  507. }
  508. }, [
  509. h("textarea", {
  510. ref: "textareaRef",
  511. class: "input-control",
  512. value: this.inputValue,
  513. onInput: this.onInput,
  514. onBlur: this.onBlur,
  515. onFocus: this.onFocus,
  516. onKeydown: this.onKeydown, // 新增:禁止回车换行 by xu 20251212
  517. onMouseover: this.onMouseover, // 监听鼠标悬停
  518. onMouseleave: this.onMouseleave, // 监听鼠标离开
  519. autocomplete: "off",
  520. onVnodeMounted: (vnode) => {
  521. vnode.el.focus();
  522. },
  523. }),
  524. ])
  525. : null,
  526. // this.errMsg ? h(SsValidate, { errMsg: this.errMsg }) : null,
  527. ]),
  528. // 附件相关的隐藏字段(仅在有 param 时才渲染)
  529. this.param && [
  530. // fjid 隐藏字段(只有当 fjid 有值时才渲染)
  531. this.fjid && this.fjid.value &&
  532. h("input", {
  533. type: "hidden",
  534. name: "fjid",
  535. value: this.fjid.value,
  536. }),
  537. // 其他隐藏字段根据 name 生成
  538. /* 去掉。文本框不需要(这是富文本才有的) Ben 20251205
  539. h("input", {
  540. type: "hidden",
  541. name: this.name.replace(/wj$/, "") + "Edit",
  542. value: this.inputValue
  543. }),
  544. */
  545. // h("input", {
  546. // type: "hidden",
  547. // name: this.name.replace(/wj$/, "") + "wj",
  548. // value: this.inputValue
  549. // }),
  550. /* 去掉。文本框不需要(这是富文本才有的) Ben 20251205
  551. h("input", {
  552. type: "hidden",
  553. name: "ueditorpath",
  554. value: this.name
  555. }),
  556. */
  557. ],
  558. ]);
  559. },
  560. };
  561. // ss-normal-input 登录输入
  562. const SsLoginInput = {
  563. name: "SsLoginInput",
  564. inheritAttrs: false,
  565. props: {
  566. errTip: {
  567. type: String,
  568. },
  569. type: {
  570. type: String,
  571. default: "text",
  572. },
  573. required: {
  574. type: Boolean,
  575. default: false,
  576. },
  577. placeholder: {
  578. type: String,
  579. default: "请输入",
  580. },
  581. name: {
  582. type: String,
  583. default: "",
  584. },
  585. defaultValue: [String, Number],
  586. modelValue: [String, Number],
  587. },
  588. emits: ["update:modelValue", "input", "blur", "change"], // 允许更新 v-model 绑定的值
  589. setup(props, { emit }) {
  590. const errMsg = ref("");
  591. const inputRef = ref(null);
  592. const textareaRef = ref(null);
  593. const inputValue = ref(props.modelValue || props.defaultValue || "");
  594. // 使用 watch 监听 props.errTip 和 props.modelValue 的变化
  595. watch(
  596. () => props.errTip,
  597. (newVal) => {
  598. errMsg.value = newVal;
  599. },
  600. { immediate: true }
  601. );
  602. watch(
  603. () => props.modelValue,
  604. (newVal) => {
  605. inputValue.value = newVal;
  606. }
  607. );
  608. // 挂载时的逻辑
  609. onMounted(() => {
  610. errMsg.value = props.errTip;
  611. inputValue.value = props.modelValue || props.defaultValue || "";
  612. });
  613. // 定义事件处理函数
  614. const onInput = (event) => {
  615. const newValue = event.target.value;
  616. inputValue.value = newValue;
  617. emit("update:modelValue", newValue);
  618. };
  619. return { inputValue, onInput, inputRef, textareaRef };
  620. },
  621. render() {
  622. return h("div", { class: "input" }, [
  623. h("div", { class: "input-container" }, [
  624. h("div", { class: "input" }, [
  625. h("input", {
  626. ref: "inputRef",
  627. class: "input-control",
  628. name: this.name,
  629. value: this.inputValue,
  630. onInput: this.onInput,
  631. type: this.type,
  632. placeholder: this.placeholder,
  633. required: this.required,
  634. ...this.$attrs,
  635. autocomplete: "off",
  636. }),
  637. this.required ? h("div", { class: "required" }) : null,
  638. ]),
  639. ]),
  640. ]);
  641. },
  642. };
  643. // ss-login-button
  644. const SsLoginButton = {
  645. name: "SsLoginButton",
  646. inheritAttrs: false,
  647. props: {
  648. class: {
  649. type: String,
  650. default: "",
  651. },
  652. text: {
  653. type: String,
  654. default: "",
  655. },
  656. type: {
  657. type: String,
  658. default: "button",
  659. },
  660. },
  661. emits: ["click"],
  662. setup(props, { emit }) {
  663. // 定义事件处理函数
  664. const onClick = (event) => {
  665. // 发射一个 'click' 事件,你可以传递所需的参数
  666. emit("click", event);
  667. };
  668. return { props, onClick };
  669. },
  670. render() {
  671. const SsIcon = resolveComponent("ss-icon");
  672. const SsLoginIcon = resolveComponent("ss-login-icon");
  673. return h(
  674. "button",
  675. { class: "login-button", type: this.type, onClick: this.onClick },
  676. [
  677. h("span", [h(SsLoginIcon, { class: this.class })]),
  678. h("span", {}, this.text),
  679. ]
  680. );
  681. },
  682. };
  683. // ss-objp 下拉选择
  684. const SsObjp = {
  685. name: "SsObjp",
  686. inheritAttrs: false,
  687. props: {
  688. onchange: { //在此属性传入onChange的window全局回调函数,函数唯一参数是当前选中值 Ben(20251217)
  689. type: String,
  690. required: false,
  691. },
  692. filter: {
  693. type: String,
  694. required: false,
  695. },
  696. cb: {
  697. type: String,
  698. required: true,
  699. },
  700. url: {
  701. type: String,
  702. required: true,
  703. },
  704. name: {
  705. type: String,
  706. required: true,
  707. },
  708. width: {
  709. type: String,
  710. default: "100%",
  711. },
  712. placeholder: {
  713. type: String,
  714. default: "请选择",
  715. },
  716. inp: {
  717. type: Boolean,
  718. default: false,
  719. },
  720. opt: {
  721. type: Array,
  722. default: () => [],
  723. },
  724. errTip: String,
  725. defaultValue: [String, Number],
  726. modelValue: [String, Number],
  727. direction: {
  728. type: String,
  729. default: "bottom",
  730. },
  731. },
  732. emits: ["update:modelValue", "input", "blur", "change"],
  733. setup(props, { emit }) {
  734. const canInput = props.inp;
  735. const errMsg = Vue.ref(props.errTip);
  736. const selectItem = Vue.ref({});
  737. let inputText = Vue.ref(""); // 用于存储输入框的文本
  738. const popupWinVisible = Vue.ref(false);
  739. const filteredOptions = Vue.ref(props.opt);
  740. const popupDirection = Vue.ref("bottom");
  741. const popupMaxHeight = Vue.ref("none"); // popup最大高度,用于空间不足时限制高度并出滚动条 by xu 20251212
  742. // const showRequired = Vue.computed(() => {
  743. // const hasValidationRule = window.ssVm?.validations?.has(props.name);
  744. // if (!hasValidationRule) return false;
  745. // if (errMsg.value) return true;
  746. // if (!selectItem.value?.value) return true;
  747. // return false;
  748. // });
  749. const validate = () => {
  750. if (window.ssVm) {
  751. const result = window.ssVm.validateField(props.name);
  752. // console.log("validate", window.ssVm.validateField(props.name));
  753. errMsg.value = result.valid ? "" : result.message;
  754. }
  755. };
  756. //在objPicker界面,选中value对应的项
  757. const updateSelectItem = () => {
  758. // console.log(props.opt);
  759. const item = props.opt.find((it) => it.value === props.modelValue);
  760. if (item) {
  761. selectItem.value = item;
  762. inputText.value = item.label;
  763. } else {
  764. selectItem.value = { label: "", value: "" };
  765. inputText.value = "";
  766. }
  767. // validate();
  768. };
  769. Vue.watch(
  770. () => props.errTip,
  771. (newVal) => {
  772. errMsg.value = newVal;
  773. }
  774. );
  775. Vue.watch(() => props.modelValue, updateSelectItem, { immediate: true });
  776. Vue.watch(
  777. () => props.opt,
  778. (newVal) => {
  779. updateSelectItem();
  780. filteredOptions.value = [...newVal];
  781. // console.log("filteredOptions", filteredOptions.value);
  782. }
  783. );
  784. //初始化objPicker在页面刚打开时的默认值
  785. async function initDefaultValue() {
  786. try {
  787. if (props.url && props.cb && props.modelValue) {
  788. let objectPickerParam;
  789. let url = props.url;
  790. //如果有定义过滤器
  791. if (props.filter) {
  792. //包含HTML实体的JSON字符串转为JSON对象,如原字符串是{&quot;dwid&quot;:&quot;88&quot;},注意key也必需用单引号包着
  793. // const decodedString = props.filter.replace(/&quot;/g, '"'); // 转换为: {"dwid":"88"}
  794. // objectPickerParam = JSON.parse(decodedString); // 转为json对象
  795. const filterObj = props.filter; // 转为json对象
  796. for (let k in filterObj) {
  797. let v = filterObj[k];
  798. url += "&" + k + "=" + v;
  799. }
  800. objectPickerParam = props.filter; // 转为json对象
  801. objectPickerParam["input"] = props.inp;
  802. objectPickerParam["codebook"] = props.cb;
  803. // alert(url);
  804. } else {
  805. objectPickerParam = { input: props.inp, codebook: props.cb };
  806. }
  807. const objectPickerParamStr = JSON.stringify(objectPickerParam);
  808. const params = new URLSearchParams();
  809. params.append("objectpickerparam", objectPickerParamStr);
  810. params.append("objectpickertype", "2");
  811. params.append("objectpickervalue", props.modelValue); //需回显的值
  812. // alert("1params:"+JSON.stringify(params));
  813. axios
  814. .post(props.url, params, {
  815. headers: {
  816. "Content-Type": "application/x-www-form-urlencoded", // 必须手动设置!
  817. },
  818. })
  819. .then((response) => {
  820. // alert(JSON.stringify(response.data));
  821. if ("timeout" == response.data.statusText) {
  822. alert("网络超时!");
  823. return;
  824. }
  825. if (response.data.result) {
  826. const keys = Object.keys(response.data.result);
  827. if (keys.length === 1) {
  828. let code = keys[0];
  829. let desc = response.data.result[keys[0]];
  830. if (props.opt)
  831. props.opt.length = 0; //通过修改数组的length属性,直接清空数组元素,内存会被自动释放。这是性能最优的方式
  832. else {
  833. props.opt = [];
  834. }
  835. props.opt.push({ label: desc, value: code });
  836. updateSelectItem();
  837. // alert('props.opt:'+JSON.stringify(props.opt));
  838. }
  839. }
  840. });
  841. }
  842. } catch (error) {
  843. // callback(null, error.message); // 失败回调,传递错误
  844. }
  845. }
  846. // Vue.onMounted(updateSelectItem);
  847. const doSelectItem = (item) => {
  848. emit("update:modelValue", item.value);
  849. selectItem.value = item;
  850. inputText.value = item.label;
  851. hidePopup();
  852. nextTick(() => {
  853. console.log(item.value + "@@@props.modelValue:" + props.modelValue);
  854. validate();
  855. if (window.ssVm) {
  856. // 遍历所有验证规则,找到依赖当前字段的规则
  857. for (const [field, rules] of window.ssVm.validations.entries()) {
  858. for (const rule of rules) {
  859. if (rule.opt?.relField === props.name) {
  860. // console.log("Found dependent field:", field); // 调试日志
  861. window.ssVm.validateField(field);
  862. }
  863. }
  864. }
  865. }
  866. });
  867. callGlobalOnchg(item.value, item.label); // 值变化时尝试调用全局onchange回调函数 Ben(20251217)
  868. };
  869. // 用于调用全局onchange回调函数 Ben(20251217)
  870. const callGlobalOnchg = (value, desc) => {
  871. // 检查 onchange 属性是否提供了有效的函数名
  872. if (props.onchange && typeof props.onchange === 'string') {
  873. // 检查 window 对象上是否存在该函数
  874. if (typeof window !== 'undefined' && window[props.onchange] && typeof window[props.onchange] === 'function') {
  875. try {
  876. window[props.onchange](value, desc) // 调用全局函数,并传入当前选中值
  877. } catch (error) {
  878. console.error(`调用全局函数 ${props.onchange} 时出错:`, error)
  879. }
  880. } else {
  881. console.warn(`全局函数 ${props.onchange} 未定义或不是一个函数。`)
  882. }
  883. }
  884. }
  885. //可录入的objPicker,更新下拉菜单选项
  886. async function updateOptionBYInputText(inpTxt) {
  887. try {
  888. let objectPickerParam;
  889. let url = props.url;
  890. if (props.url && props.cb) {
  891. //如果有定义过滤器
  892. if (props.filter) {
  893. const filterObj = props.filter; // 转为json对象
  894. for (let k in filterObj) {
  895. let v = filterObj[k];
  896. url += "&" + k + "=" + v;
  897. }
  898. //包含HTML实体的JSON字符串转为JSON对象,如原字符串是{&quot;dwid&quot;:&quot;88&quot;},注意key也必需用单引号包着
  899. // const decodedString = props.filter.replace(/&quot;/g, '"'); // 转换为: {"dwid":"88"}
  900. // objectPickerParam = JSON.parse(decodedString); // 转为json对象
  901. objectPickerParam = props.filter;
  902. objectPickerParam["input"] = props.inp;
  903. objectPickerParam["codebook"] = props.cb;
  904. // alert(url);
  905. } else {
  906. objectPickerParam = { input: props.inp, codebook: props.cb };
  907. }
  908. const objectPickerParamStr = JSON.stringify(objectPickerParam);
  909. const params = new URLSearchParams();
  910. params.append("objectpickerparam", objectPickerParamStr);
  911. params.append("objectpickertype", "1");
  912. if (props.inp && props.inp === true) {//把"true"改为true Ben(20251209)
  913. params.append("objectpickersearchAll", 0); //只查录入的值
  914. params.append("objectpickerinput", inpTxt); //录入的值
  915. } else {
  916. params.append("objectpickersearchAll", 1);
  917. }
  918. axios
  919. .post(url, params, {
  920. headers: {
  921. "Content-Type": "application/x-www-form-urlencoded", // 必须手动设置!
  922. },
  923. })
  924. .then((response) => {
  925. if ("timeout" == response.data.statusText) {
  926. alert("网络超时!");
  927. return;
  928. }
  929. // 先清空选项 by xu 20251212
  930. if (props.opt) {
  931. props.opt.length = 0;
  932. } else {
  933. props.opt = [];
  934. }
  935. if (response.data.result) {
  936. const keys = Object.keys(response.data.result);
  937. // console.log("params:"+params+"@@response.data:"+JSON.stringify(response.data));
  938. if (keys.length > 0) {
  939. for (let k in response.data.result) {
  940. props.opt.push({
  941. label: response.data.result[k],
  942. value: k,
  943. });
  944. }
  945. // console.log('###inpTxt:'+inpTxt+';');
  946. if (
  947. props.inp &&
  948. props.inp === true && //把"true"改为true Ben(20251209)
  949. inpTxt.length > 0
  950. ) {
  951. //对于可录入的,用已录入的值作过滤
  952. filteredOptions.value = props.opt.filter((option) =>
  953. option.label
  954. .toLowerCase()
  955. .includes(inputText.value.toLowerCase())
  956. );
  957. // 可录入的objPicker,当搜索结果只有一项时,自动选中这一项 by xu 20251212
  958. if (filteredOptions.value.length === 1) {
  959. const autoSelectItem = filteredOptions.value[0];
  960. console.log("[objp] 搜索结果只有一项,自动选中:", autoSelectItem);
  961. doSelectItem(autoSelectItem);
  962. return; // 自动选中后直接返回,不需要显示popup
  963. }
  964. filteredOptions.value.unshift({ label: "", value: "" });
  965. // console.log('###做了过滤:'+inputText.value.toLowerCase()+';');
  966. } else {
  967. filteredOptions.value = props.opt;
  968. filteredOptions.value.unshift({ label: "", value: "" });
  969. }
  970. console.log("props.opt11:" + JSON.stringify(props.opt));
  971. } else {
  972. // 没有数据时,清空过滤选项 by xu 20251212
  973. filteredOptions.value = [];
  974. console.log("[objp] 接口返回空数据");
  975. }
  976. } else {
  977. // result不存在时,清空过滤选项 by xu 20251212
  978. filteredOptions.value = [];
  979. console.log("[objp] 接口返回无result");
  980. }
  981. // 无论是否有数据,都显示popup by xu 20251212
  982. if (!popupWinVisible.value) {
  983. popupWinVisible.value = true;
  984. }
  985. });
  986. }
  987. } catch (error) {
  988. // callback(null, error.message); // 失败回调,传递错误
  989. }
  990. }
  991. // 计算弹出方向和最大高度的方法 by xu 20251212
  992. // 当空间不足时限制popup高度并显示滚动条
  993. const calculatePopupDirection = () => {
  994. // 1. 获取select容器元素
  995. const selectEl = document
  996. .querySelector(`[name="${props.name}"]`)
  997. ?.closest(".select-container");
  998. if (!selectEl) return;
  999. // 2. 获取位置信息
  1000. const selectRect = selectEl.getBoundingClientRect();
  1001. const viewportHeight = window.innerHeight;
  1002. // 3. 计算上下可用空间
  1003. const spaceBelow = viewportHeight - selectRect.bottom - 10; // 减10px留边距
  1004. const spaceAbove = selectRect.top - 10; // 减10px留边距
  1005. // 4. popup预估高度(假设每项36px,最多显示8项 + padding)
  1006. const estimatedPopupHeight = 300;
  1007. const minPopupHeight = 100; // 最小高度
  1008. console.log('[popup] 空间计算 - spaceAbove:', spaceAbove, 'spaceBelow:', spaceBelow, 'estimatedHeight:', estimatedPopupHeight);
  1009. // 5. 判断方向和最大高度 by xu 20251212
  1010. if (spaceBelow >= estimatedPopupHeight) {
  1011. // 下方空间足够,向下展开,不限制高度
  1012. popupDirection.value = "bottom";
  1013. popupMaxHeight.value = "none";
  1014. console.log('[popup] 向下展开,空间充足');
  1015. } else if (spaceAbove >= estimatedPopupHeight) {
  1016. // 上方空间足够,向上展开,不限制高度
  1017. popupDirection.value = "top";
  1018. popupMaxHeight.value = "none";
  1019. console.log('[popup] 向上展开,空间充足');
  1020. } else {
  1021. // 上下空间都不足,选择空间大的方向,并限制高度出滚动条
  1022. if (spaceBelow >= spaceAbove) {
  1023. popupDirection.value = "bottom";
  1024. popupMaxHeight.value = Math.max(spaceBelow, minPopupHeight) + "px";
  1025. console.log('[popup] 向下展开,空间不足,限制高度:', popupMaxHeight.value);
  1026. } else {
  1027. popupDirection.value = "top";
  1028. popupMaxHeight.value = Math.max(spaceAbove, minPopupHeight) + "px";
  1029. console.log('[popup] 向上展开,空间不足,限制高度:', popupMaxHeight.value);
  1030. }
  1031. }
  1032. };
  1033. //点击下拉菜单的文本区域时,会触发的方法
  1034. function togglePopup() {
  1035. // 可录入的 objPicker,更新下拉菜单选项
  1036. updateOptionBYInputText(inputText.value);
  1037. // popupWinVisible.value = !popupWinVisible.value;
  1038. Vue.nextTick(() => {
  1039. calculatePopupDirection();
  1040. });
  1041. }
  1042. const hidePopup = () => {
  1043. popupWinVisible.value = false;
  1044. };
  1045. //点击下拉菜单的三角形时,会触发的方法
  1046. // 添加toggle逻辑,点击时切换显示/隐藏 by xu 20251212
  1047. const suffixClick = () => {
  1048. // 如果popup已显示,则关闭 by xu 20251212
  1049. if (popupWinVisible.value) {
  1050. hidePopup();
  1051. console.log("[objp] 点三角关闭popup");
  1052. return;
  1053. }
  1054. //可录入的objPicker,更新下拉菜单选项
  1055. updateOptionBYInputText("");
  1056. Vue.nextTick(() => {
  1057. calculatePopupDirection();
  1058. });
  1059. console.log("[objp] 点三角打开popup");
  1060. };
  1061. //可录入的objPicker,录入项变化时,会触发
  1062. async function handleInputChange(event) {
  1063. inputText.value = event.target.value;
  1064. if (!inputText.value) {
  1065. inputText.value = "";
  1066. }
  1067. //可录入的objPicker,更新下拉菜单选项
  1068. updateOptionBYInputText(inputText.value);
  1069. // filteredOptions.value = props.opt.filter((option) =>
  1070. // option.label.toLowerCase().includes(inputText.value.toLowerCase())
  1071. // );
  1072. // if (!popupWinVisible.value) {
  1073. // popupWinVisible.value = true; // 确保下拉框在输入时打开
  1074. // }
  1075. }
  1076. Vue.onMounted(() => {
  1077. initDefaultValue();
  1078. window.addEventListener("resize", calculatePopupDirection);
  1079. });
  1080. Vue.onUnmounted(() => {
  1081. window.removeEventListener("resize", calculatePopupDirection);
  1082. });
  1083. return {
  1084. errMsg,
  1085. selectItem,
  1086. inputText,
  1087. canInput,
  1088. filteredOptions,
  1089. popupWinVisible,
  1090. popupDirection,
  1091. popupMaxHeight, // 添加popup最大高度 by xu 20251212
  1092. suffixClick,
  1093. togglePopup,
  1094. hidePopup,
  1095. doSelectItem,
  1096. handleInputChange,
  1097. };
  1098. },
  1099. template: `
  1100. <div class="input" style="position: relative" :style="{width: width}">
  1101. <div class="select-container" @mouseleave="hidePopup">
  1102. <div class="input" @click="togglePopup">
  1103. <input
  1104. type="hidden"
  1105. :name="name"
  1106. :value="selectItem.value"
  1107. .value="selectItem.value"
  1108. />
  1109. <input
  1110. v-model="inputText"
  1111. @input="handleInputChange"
  1112. v-if="canInput"
  1113. :placeholder="placeholder"
  1114. />
  1115. <input
  1116. v-else
  1117. :placeholder="placeholder"
  1118. :value="selectItem.label"
  1119. disabled
  1120. style="pointer-events: none;"
  1121. />
  1122. <div class="suffix" @click.stop="suffixClick">
  1123. <ss-form-icon :class="popupWinVisible ? 'form-icon-transform-select select' : 'form-icon-select'" />
  1124. </div>
  1125. </div>
  1126. <!-- popup弹出层,添加maxHeight和overflowY支持空间不足时滚动 by xu 20251212 -->
  1127. <div v-show="popupWinVisible" class="popup-win" :class="popupDirection" :style="{ maxHeight: popupMaxHeight, overflowY: popupMaxHeight !== 'none' ? 'auto' : 'visible' }">
  1128. <div v-if="opt && opt.length && filteredOptions.length > 0" class="popup-content">
  1129. <div class="content-area">
  1130. <div v-for="(item, index) in filteredOptions" :key="index" @click="doSelectItem(item)" :class="{ active: item.value === selectItem.value }">
  1131. <span class="check-icon">
  1132. <ss-form-icon class="form-icon-select-checked" />
  1133. </span>
  1134. <span>{{ item.label }}</span>
  1135. </div>
  1136. </div>
  1137. </div>
  1138. <div v-else class="popup-content"><div class="content-area"><div class="content-area"> <span>无选项</span></div></div></div>
  1139. </div>
  1140. </div>
  1141. </div>
  1142. `,
  1143. };
  1144. // ss-hidden 隐藏字段组件
  1145. const SsHidden = {
  1146. name: "SsHidden",
  1147. props: {
  1148. modelValue: String,
  1149. name: {
  1150. type: String,
  1151. required: true,
  1152. },
  1153. rule: {
  1154. type: String,
  1155. required: true,
  1156. },
  1157. param: {
  1158. type: String,
  1159. required: true,
  1160. },
  1161. url: {
  1162. type: String,
  1163. required: true,
  1164. },
  1165. },
  1166. emits: ["update:modelValue"],
  1167. setup(props, { emit }) {
  1168. const errMsg = Vue.ref("");
  1169. const validate = () => {
  1170. if (window.ssVm) {
  1171. const result = window.ssVm.validateField(props.name);
  1172. console.log("validate", window.ssVm.validateField(props.name));
  1173. errMsg.value = result.valid ? "" : result.message;
  1174. }
  1175. };
  1176. Vue.onMounted(() => {
  1177. /**
  1178. * 初始化级联菜单值初始值思路:
  1179. * 1. 带隐藏字段(即带编码规则)的级联菜单
  1180. * 在隐藏字段这,可以取到要回显的值和编码规则,从而计算出各级下拉菜单要回显的值。
  1181. * 然后通过ajax取各级级联菜单的值回显。
  1182. * 2. 不带隐藏字段的级联,只能在各个下拉菜单的setup事件中通过ajax取回显值回显
  1183. */
  1184. // 当同组级联下拉菜单选中值变化时,会调用本隐藏字段下面这方法设置隐藏字段值
  1185. window.addEventListener(
  1186. "cascader-setHiddenVal-" + props.name,
  1187. (event) => {
  1188. const { value } = event.detail;
  1189. emit("update:modelValue", value);
  1190. console.log(value);
  1191. setTimeout(() => {
  1192. validate();
  1193. }, 50);
  1194. }
  1195. );
  1196. // 如果有初始值,触发回显过程
  1197. if (props.modelValue) {
  1198. console.log("级联隐藏字段,开始回显,初始值:", props.modelValue);
  1199. triggerCascaderEcho(props.modelValue);
  1200. validate();
  1201. }
  1202. });
  1203. // 触发级联回显
  1204. const triggerCascaderEcho = (code) => {
  1205. /**
  1206. * 开始回显,初始值: 440304
  1207. * 解析后的所有值: Array(3)0: "440000"1: "440300"2: "440304"length: 3[[Prototype]]: Array(0)
  1208. */
  1209. const values = parseHiddenCodeForAll(code, props.rule);
  1210. console.log("解析后的所有值:", values);
  1211. // 转换为 JSON 对象
  1212. // const paramObj = JSON.parse(props.param);
  1213. const paramObj = props.param;
  1214. let selectArr = paramObj.fieldOrd; //保存本组级联菜单项的数组,如:['hksheng','hkshi','hkxian']
  1215. if (selectArr.length != values.length) {
  1216. // alert('属性'+props.name+'的值'+code+'与级联菜单中下拉菜单的数目不匹配!');
  1217. return;
  1218. }
  1219. // 按顺序触发回显,并增加延迟确保数据加载
  1220. /**
  1221. * 通过隐藏字段的setup事件,
  1222. * 循环遍历各级下拉菜单,并触发定义在下拉菜单中的'cascader-echo'事件,
  1223. * 在此事件中完成每个下拉菜单回显值操作(只取当前要回显的键值对显示,
  1224. * 下拉菜单所有的值,在点击下拉菜单时,才通过ajax取)。
  1225. */
  1226. values.forEach((value, index) => {
  1227. if (value) {
  1228. setTimeout(() => {
  1229. let upperVal = undefined;
  1230. if (index != 0) {
  1231. upperVal = values[index - 1];
  1232. }
  1233. const echoEvent = new CustomEvent(
  1234. "cascader-echo-" + selectArr[index],
  1235. {
  1236. detail: {
  1237. name: props.name,
  1238. value: value,
  1239. // level: index + 1,
  1240. isAuto: true, // 标记为自动回显
  1241. upperVal: upperVal,
  1242. },
  1243. }
  1244. );
  1245. console.log(props.name + "--upperValue:" + upperVal);
  1246. window.dispatchEvent(echoEvent);
  1247. }, index * 500); // 每级增加500ms延迟
  1248. }
  1249. });
  1250. };
  1251. // 解析所有级别的代码
  1252. const parseHiddenCodeForAll = (code, rule) => {
  1253. if (!code || !rule) return [];
  1254. // 获取规则中每段的长度
  1255. const segments = [];
  1256. let currentChar = rule[0];
  1257. let currentLength = 1;
  1258. for (let i = 1; i < rule.length; i++) {
  1259. if (rule[i] === currentChar) {
  1260. currentLength++;
  1261. } else {
  1262. segments.push(currentLength);
  1263. currentChar = rule[i];
  1264. currentLength = 1;
  1265. }
  1266. }
  1267. segments.push(currentLength);
  1268. // 解析每一级的值
  1269. const values = [];
  1270. let position = 0;
  1271. segments.forEach((length, index) => {
  1272. const value = code
  1273. .substring(0, position + length)
  1274. .padEnd(rule.length, "0");
  1275. values.push(value);
  1276. position += length;
  1277. });
  1278. return values;
  1279. };
  1280. watchEffect(() => { });
  1281. return {};
  1282. },
  1283. template: `<input type="hidden" :name="name" :value="modelValue">`,
  1284. };
  1285. // ss-cascader 级联选择器
  1286. const SsCcp = {
  1287. name: "SsCcp",
  1288. inheritAttrs: false,
  1289. props: {
  1290. modelValue: String,
  1291. name: {
  1292. type: String,
  1293. required: true,
  1294. },
  1295. level: {
  1296. type: Number,
  1297. required: true,
  1298. },
  1299. opt: {
  1300. type: Array,
  1301. default: () => [],
  1302. },
  1303. placeholder: {
  1304. type: String,
  1305. default: "请选择",
  1306. },
  1307. width: {
  1308. type: String,
  1309. default: "150px",
  1310. },
  1311. direction: {
  1312. type: String,
  1313. default: "bottom",
  1314. },
  1315. mode: {
  1316. type: String,
  1317. default: "1",
  1318. },
  1319. //级联菜单配置参数,如果是数组,则代表本下拉菜单是多套级联菜单共用的第一级菜单。如果是对象,则只有一套级联菜单用此下拉菜单。
  1320. param: {
  1321. type: String,
  1322. required: true,
  1323. },
  1324. //向后台拿数据的url
  1325. url: {
  1326. type: String,
  1327. required: true,
  1328. },
  1329. },
  1330. emits: ["update:modelValue", "change"],
  1331. setup(props, { emit }) {
  1332. // alert('级联菜单初始化:'+props.name+':--:'+props.modelValue);
  1333. const selectItem = Vue.ref({ label: props.placeholder, value: "" });
  1334. const popupWinVisible = Vue.ref(false);
  1335. const isAutoEcho = Vue.ref(false); // 用于标记是否是自动回显
  1336. const upperValue = Vue.ref(""); //上级下拉菜单当前值,在初始化下拉菜单默认值时,和上级下拉菜单的值变化时,修改此upperValue变量
  1337. const popupDirection = Vue.ref("bottom");
  1338. const popupMaxHeight = Vue.ref("none"); // popup最大高度,用于空间不足时限制高度并出滚动条 by xu 20251212
  1339. //有隐藏字段的下拉菜单,加载菜单项并展开事件
  1340. // 被上级下拉菜单选中值后,触发本下拉菜单刷新菜单项并弹出显示
  1341. window.addEventListener("cascader-open-" + props.name, async (event) => {
  1342. const { upperVal } = event.detail;
  1343. upperValue.value = upperVal;
  1344. console.log(
  1345. "22props.name:" +
  1346. props.name +
  1347. ",22props.upperValue:" +
  1348. upperValue.value
  1349. );
  1350. selectItem.value = ""; //清除本下拉菜单当前选中的值
  1351. emit("update:modelValue", ""); //通知父级
  1352. //清空下拉菜单,并设置第一项的值为placeholder
  1353. clearAndInit1stOpt();
  1354. //下个下拉菜单名
  1355. let nextSelName = getNextSel(props.name, props.param.fieldOrd);
  1356. if (nextSelName) {
  1357. //清下个下拉菜单选中值和选项
  1358. event = new CustomEvent("cascader-cleanOpt-" + nextSelName, {
  1359. detail: {},
  1360. });
  1361. window.dispatchEvent(event);
  1362. }
  1363. showPopup();
  1364. });
  1365. //设置mode2的下级下拉菜单的上级菜单当前值
  1366. function setNextSelectUpperValue() {
  1367. //设置下级菜单的上级菜单当前值upperValue
  1368. let paramArr = undefined;
  1369. if (Array.isArray(props.param)) {
  1370. paramArr = props.param;
  1371. } else {
  1372. paramArr = [];
  1373. paramArr.push(props.param);
  1374. }
  1375. for (const oneParam of paramArr) {
  1376. //下个下拉菜单名
  1377. const nextSelName = getNextSel(props.name, oneParam.fieldOrd);
  1378. if (nextSelName) {
  1379. setTimeout(() => {
  1380. const openNextEvent = new CustomEvent(
  1381. "cascade-setUpperVal-" + nextSelName,
  1382. {
  1383. detail: {
  1384. upperVal: props.modelValue,
  1385. },
  1386. }
  1387. );
  1388. window.dispatchEvent(openNextEvent);
  1389. }, 100);
  1390. }
  1391. } // end for
  1392. }
  1393. // 把上级 级联下拉菜单的值,设置进本组件的事件
  1394. window.addEventListener("cascade-setUpperVal-" + props.name, (event) => {
  1395. // alert('props.name:'+props.name+',props.upperValue:'+event.detail.upperVal);
  1396. const { upperVal } = event.detail;
  1397. upperValue.value = upperVal;
  1398. // console.log('props.name:'+props.name+',props.upperValue:'+upperValue.value);
  1399. });
  1400. //清空下拉菜单,并设置第一项的值为空
  1401. function clearAndInit1stOpt() {
  1402. if (props.opt)
  1403. props.opt.length = 0; //通过修改数组的length属性,直接清空数组元素,内存会被自动释放。这是性能最优的方式
  1404. else {
  1405. props.opt = [];
  1406. }
  1407. props.opt.push({ label: "", value: "" });
  1408. }
  1409. //获取下一级下拉菜单,如果下一级下拉菜单不存在,则返回undefined
  1410. function getNextSel(selName, selNameArr) {
  1411. // 检查参数有效性
  1412. if (!Array.isArray(selNameArr) || selNameArr.length === 0) {
  1413. return undefined;
  1414. }
  1415. // 查找当前元素的索引
  1416. const currentIndex = selNameArr.indexOf(selName);
  1417. // 如果元素不存在或已经是最后一个元素,返回undefined
  1418. if (currentIndex === -1 || currentIndex === selNameArr.length - 1) {
  1419. return undefined;
  1420. }
  1421. // 返回下一个元素
  1422. return selNameArr[currentIndex + 1];
  1423. }
  1424. // 处理选择事件
  1425. const doSelectItem = (item) => {
  1426. selectItem.value = item;
  1427. emit("update:modelValue", item.value); //修改本下拉菜单在vue中保存的值
  1428. // alert('item.value:'+item.value);
  1429. if (props.mode === "1") {
  1430. // mode 1 模式:修改隐藏字段值
  1431. let event = new CustomEvent(
  1432. "cascader-setHiddenVal-" + props.param.combField,
  1433. {
  1434. detail: {
  1435. value: item.value,
  1436. },
  1437. }
  1438. );
  1439. window.dispatchEvent(event);
  1440. }
  1441. emit("change", item.value); //触发配置的change方法
  1442. //设置下级菜单的上级菜单当前值upperValue
  1443. let paramArr = undefined;
  1444. if (Array.isArray(props.param)) {
  1445. paramArr = props.param;
  1446. } else {
  1447. paramArr = [];
  1448. paramArr.push(props.param);
  1449. }
  1450. for (const oneParam of paramArr) {
  1451. //下个下拉菜单名
  1452. const nextSelName = getNextSel(props.name, oneParam.fieldOrd);
  1453. if (nextSelName) {
  1454. setTimeout(() => {
  1455. const openNextEvent = new CustomEvent(
  1456. "cascader-open-" + nextSelName,
  1457. {
  1458. detail: {
  1459. upperVal: item.value,
  1460. },
  1461. }
  1462. );
  1463. window.dispatchEvent(openNextEvent);
  1464. }, 100);
  1465. }
  1466. } // end for
  1467. hidePopup();
  1468. //下个下拉菜单名
  1469. // let nextSelName = getNextSel(props.name, props.param.fieldOrd);
  1470. // if(nextSelName){
  1471. // // //设置下一级下拉菜单中保存的本下拉菜单值(upperValue)
  1472. // // event = new CustomEvent('cascade-setUpperVal-'+nextSelName, {
  1473. // // detail: {
  1474. // // value: item.value
  1475. // // }
  1476. // // });
  1477. // // window.dispatchEvent(event);
  1478. //
  1479. // //触发下一级下拉菜单,重新初始化下拉菜单项并弹出显示
  1480. // event = new CustomEvent('cascader-open-' +nextSelName, {
  1481. // detail: {
  1482. // upperVal: item.value
  1483. // }
  1484. // });
  1485. // window.dispatchEvent(event);
  1486. // }
  1487. // 只在手动选择时自动展开下一级
  1488. // if (!isAutoEcho.value) {
  1489. // const nextLevel = props.level + 1;
  1490. // setTimeout(() => {
  1491. // const openNextEvent = new CustomEvent('open-next-cascader', {
  1492. // detail: {
  1493. // name: props.name,
  1494. // level: nextLevel
  1495. // }
  1496. // });
  1497. // window.dispatchEvent(openNextEvent);
  1498. // }, 100);
  1499. // }
  1500. };
  1501. // 监听下一级展开事件 (仅 mode 2)
  1502. window.addEventListener("cascade-open", (event) => {
  1503. if (props.mode === "2") {
  1504. const { level } = event.detail;
  1505. if (level === props.level) {
  1506. popupWinVisible.value = true;
  1507. }
  1508. }
  1509. });
  1510. if (props.mode === "1") {
  1511. //如果是有隐藏字段的下拉菜单
  1512. // 监听回显事件
  1513. window.addEventListener(
  1514. "cascader-echo-" + props.name,
  1515. async (event) => {
  1516. const { name, value, isAuto, upperVal } = event.detail;
  1517. // level,
  1518. if (upperVal) {
  1519. upperValue.value = upperVal;
  1520. console.log(
  1521. "value:" +
  1522. value +
  1523. ",upperValue:" +
  1524. upperValue +
  1525. ",初始化级联组件时props.name:" +
  1526. props.name
  1527. );
  1528. }
  1529. // if (name === props.name && level === props.level) {
  1530. // 设置自动回显标记
  1531. isAutoEcho.value = true;
  1532. // if (props.opt.length === 0) {
  1533. // const loadDataEvent = new CustomEvent('cascader-load-data', {
  1534. // detail: {
  1535. // name: props.name,
  1536. // level: props.level,
  1537. // value: value
  1538. // }
  1539. // });
  1540. // window.dispatchEvent(loadDataEvent);
  1541. //下面的代码只用于页面刚打开时,初始化级联菜单的回显值。
  1542. //Vue.watch用于监听数据的变化,并在数据变化时执行特定的回调函数。
  1543. //这段代码使用了 Vue.js 的 watch API 来监听 props.opt 的变化,如果props.opt有变化,则自动
  1544. // const unwatch = Vue.watch(
  1545. // () => props.opt, // 监听的数据源(props.opt)
  1546. // (newOptions) => { // 回调函数
  1547. // if (newOptions.length > 0) { // 条件判断
  1548. // matchAndSelect(value); // 执行逻辑
  1549. // unwatch(); // 停止监听
  1550. // }
  1551. // },
  1552. // { immediate: true } // 配置:立即触发一次
  1553. // );
  1554. // } else {
  1555. // matchAndSelect(value);
  1556. // }
  1557. // 初始化级联菜单在页面刚打开时的默认值
  1558. async function initDefaultValue(value) {
  1559. try {
  1560. // alert(1);
  1561. if (props.url && props.param
  1562. // && props.modelValue 对于有rule编码规则的级联菜单(即mode=1),modelValue一定是空的,所以注释掉,修复mode=1的级联菜单无法回显问题。Ben(20251124)
  1563. ) {
  1564. // alert(2);
  1565. /**
  1566. * let objectPickerParam=
  1567. * {"objectpickerparam":"{\"input\":\"false\",\"cascadingLevel\":\"hksheng,hkshi,hkxian\"," +
  1568. * "\"name\":\"hksheng\"," +
  1569. * "\"cascadingName\":\"dq\",\"cascadingInputsName\":\"hkdqm\"," +
  1570. * "\"codebook\":\"sheng\"}",
  1571. * "objectpickertype":2,
  1572. * "objectpickervalue":"440000"
  1573. * };
  1574. */
  1575. const objectPickerParam = {
  1576. input: "false",
  1577. cascadingLevel: props.param.fieldOrd.join(","), //如:"hksheng,hkshi,hkxian"
  1578. name: props.name, //本下拉菜单名
  1579. cascadingName: props.param.name, //级联菜单名
  1580. cascadingInputsName: props.param.combField, //对象属性,即隐藏字段名,如:hkdqm
  1581. codebook: props.param.codebook,
  1582. };
  1583. const objectPickerParamStr =
  1584. JSON.stringify(objectPickerParam);
  1585. const params = new URLSearchParams();
  1586. params.append("objectpickerparam", objectPickerParamStr);
  1587. params.append("objectpickertype", "2");
  1588. params.append("objectpickervalue", value); //需回显的值
  1589. axios
  1590. .post(props.url, params, {
  1591. headers: {
  1592. "Content-Type": "application/x-www-form-urlencoded", // 必须手动设置!
  1593. },
  1594. })
  1595. .then((response) => {
  1596. // alert(JSON.stringify(response.data));
  1597. if ("timeout" == response.data.statusText) {
  1598. alert("网络超时!");
  1599. return;
  1600. }
  1601. if (response.data.result) {
  1602. const keys = Object.keys(response.data.result);
  1603. if (keys.length === 1) {
  1604. let code = keys[0];
  1605. let desc = response.data.result[keys[0]];
  1606. clearAndInit1stOpt();
  1607. props.opt.push({ label: desc, value: code });
  1608. if (value) matchAndSelect(value);
  1609. // updateSelectItem();
  1610. // alert('props.opt:'+JSON.stringify(props.opt));
  1611. }
  1612. }
  1613. });
  1614. }
  1615. } catch (error) {
  1616. alert(error);
  1617. // callback(null, error.message); // 失败回调,传递错误
  1618. }
  1619. }
  1620. //下面的代码只用于页面刚打开时,初始化级联菜单的回显值。
  1621. initDefaultValue(value);
  1622. // 延迟重置自动回显标记
  1623. setTimeout(() => {
  1624. isAutoEcho.value = false;
  1625. }, 500);
  1626. }
  1627. );
  1628. // 被上级下拉菜单触发的,清除选中值和下拉菜单选项
  1629. window.addEventListener(
  1630. "cascader-cleanOpt-" + props.name,
  1631. async (event) => {
  1632. upperValue.value = "";
  1633. selectItem.value = ""; //清除本下拉菜单当前选中的值
  1634. emit("update:modelValue", ""); //通知父级
  1635. //清空所有下拉菜单项
  1636. if (props.opt) {
  1637. props.opt.length = 0;
  1638. } else {
  1639. props.opt = [];
  1640. }
  1641. //下个下拉菜单名
  1642. let nextSelName = getNextSel(props.name, props.param.fieldOrd);
  1643. // alert('nextSelName:'+nextSelName+'--,props.name:'+props.name);
  1644. if (nextSelName) {
  1645. //清下个下拉菜单选中值和选项
  1646. event = new CustomEvent("cascader-cleanOpt-" + nextSelName, {
  1647. detail: {},
  1648. });
  1649. window.dispatchEvent(event);
  1650. }
  1651. }
  1652. );
  1653. } else if (props.mode === "2") {
  1654. //没隐藏字段的下拉菜单,在这初始化默认值
  1655. let needInitParam = undefined;
  1656. if (Array.isArray(props.param)) {
  1657. needInitParam = props.param[props.param.length - 1]; //只初始化数组最后一项
  1658. console.log("needInitParam最后一项:" + JSON.stringify(needInitParam));
  1659. } else {
  1660. needInitParam = props.param;
  1661. }
  1662. // 初始化级联菜单在页面刚打开时的默认值
  1663. async function initDefaultValue(value, param) {
  1664. try {
  1665. // alert(1);
  1666. if (props.url && param && props.modelValue) {
  1667. // alert(2);
  1668. /**
  1669. * let param=
  1670. * {"objectpickerparam":"{\"input\":\"false\",\"cascadingLevel\":\"rylbm,gwid\"," +
  1671. * "\"name\":\"gwid\",\"cascadingName\":\"rylb_gw\"," +
  1672. * "\"codebook\":\"gwByRylb\"}",
  1673. * "objectpickertype":2,
  1674. * "objectpickervalue":"102121"};
  1675. */
  1676. // alert('props.name:'+props.name+',props.param.fieldOrd:'+props.param.fieldOrd);
  1677. const objectPickerParam = {
  1678. input: "false",
  1679. cascadingLevel: param.fieldOrd.join(","), //如:"hksheng,hkshi,hkxian"
  1680. name: props.name, //本下拉菜单名
  1681. cascadingName: param.name, //级联菜单名
  1682. codebook: param.codebook,
  1683. };
  1684. const objectPickerParamStr = JSON.stringify(objectPickerParam);
  1685. const sendParams = new URLSearchParams();
  1686. sendParams.append("objectpickerparam", objectPickerParamStr);
  1687. sendParams.append("objectpickertype", "2");
  1688. sendParams.append("objectpickervalue", value); //需回显的值
  1689. axios
  1690. .post(props.url, sendParams, {
  1691. headers: {
  1692. "Content-Type": "application/x-www-form-urlencoded", // 必须手动设置!
  1693. },
  1694. })
  1695. .then((response) => {
  1696. // alert(JSON.stringify(response.data));
  1697. if ("timeout" == response.data.statusText) {
  1698. alert("网络超时!");
  1699. return;
  1700. }
  1701. if (response.data.result) {
  1702. const keys = Object.keys(response.data.result);
  1703. console.log(
  1704. "name:" +
  1705. props.name +
  1706. ",@@级联初始化默认值value:" +
  1707. value +
  1708. "--param:" +
  1709. JSON.stringify(param) +
  1710. "--objectPickerParamStr:" +
  1711. objectPickerParamStr +
  1712. "--response.data:" +
  1713. JSON.stringify(response.data)
  1714. );
  1715. if (keys.length === 1) {
  1716. let code = keys[0];
  1717. let desc = response.data.result[keys[0]];
  1718. if (props.opt)
  1719. props.opt.length = 0; //通过修改数组的length属性,直接清空数组元素,内存会被自动释放。这是性能最优的方式
  1720. else {
  1721. props.opt = [];
  1722. }
  1723. props.opt.push({ label: desc, value: code });
  1724. if (value) matchAndSelect(value);
  1725. console.log(
  1726. "GOOD mode2回显的默认值:" +
  1727. JSON.stringify({ label: desc, value: code }) +
  1728. "--props.param:" +
  1729. JSON.stringify(param)
  1730. );
  1731. // updateSelectItem();
  1732. // alert('props.opt:'+JSON.stringify(props.opt));
  1733. }
  1734. }
  1735. });
  1736. }
  1737. } catch (error) {
  1738. alert(error);
  1739. // callback(null, error.message); // 失败回调,传递错误
  1740. }
  1741. // 重置自动回显标记
  1742. isAutoEcho.value = false;
  1743. }
  1744. // 初始化级联菜单在页面刚打开时的默认值
  1745. initDefaultValue(props.modelValue, needInitParam);
  1746. //设置mode2的下级下拉菜单的上级菜单当前值
  1747. setNextSelectUpperValue();
  1748. }
  1749. //选中要回显的默认值
  1750. const matchAndSelect = (value) => {
  1751. const matchedOption = props.opt.find((opt) => opt.value === value);
  1752. if (matchedOption) {
  1753. selectItem.value = matchedOption;
  1754. emit("update:modelValue", value);
  1755. emit("change", value);
  1756. }
  1757. };
  1758. // 计算弹出方向和最大高度的方法 by xu 20251212
  1759. // 当空间不足时限制popup高度并显示滚动条
  1760. const calculatePopupDirection = () => {
  1761. // 1. 获取select容器元素
  1762. const selectEl = document.querySelector(
  1763. `[name="${props.name}"]`
  1764. )?.nextElementSibling;
  1765. console.log("selectEl:" + selectEl, props.name);
  1766. if (!selectEl) return;
  1767. // 2. 获取位置信息
  1768. const selectRect = selectEl.getBoundingClientRect();
  1769. const viewportHeight = window.innerHeight;
  1770. // 3. 计算上下可用空间 by xu 20251212
  1771. const spaceBelow = viewportHeight - selectRect.bottom - 10; // 减10px留边距
  1772. const spaceAbove = selectRect.top - 10; // 减10px留边距
  1773. // 4. popup预估高度(假设每项36px,最多显示8项 + padding)
  1774. const estimatedPopupHeight = 300;
  1775. const minPopupHeight = 100; // 最小高度
  1776. console.log('[popup] 空间计算 - spaceAbove:', spaceAbove, 'spaceBelow:', spaceBelow, 'estimatedHeight:', estimatedPopupHeight);
  1777. // 5. 判断方向和最大高度 by xu 20251212
  1778. if (spaceBelow >= estimatedPopupHeight) {
  1779. // 下方空间足够,向下展开,不限制高度
  1780. popupDirection.value = "bottom";
  1781. popupMaxHeight.value = "none";
  1782. console.log('[popup] 向下展开,空间充足');
  1783. } else if (spaceAbove >= estimatedPopupHeight) {
  1784. // 上方空间足够,向上展开,不限制高度
  1785. popupDirection.value = "top";
  1786. popupMaxHeight.value = "none";
  1787. console.log('[popup] 向上展开,空间充足');
  1788. } else {
  1789. // 上下空间都不足,选择空间大的方向,并限制高度出滚动条
  1790. if (spaceBelow >= spaceAbove) {
  1791. popupDirection.value = "bottom";
  1792. popupMaxHeight.value = Math.max(spaceBelow, minPopupHeight) + "px";
  1793. console.log('[popup] 向下展开,空间不足,限制高度:', popupMaxHeight.value);
  1794. } else {
  1795. popupDirection.value = "top";
  1796. popupMaxHeight.value = Math.max(spaceAbove, minPopupHeight) + "px";
  1797. console.log('[popup] 向上展开,空间不足,限制高度:', popupMaxHeight.value);
  1798. }
  1799. }
  1800. };
  1801. //级联菜单点击事件
  1802. const togglePopup = () => {
  1803. if (!popupWinVisible.value) {
  1804. //如果当前下拉菜单是隐藏的,先ajax重新加载下拉菜单项,再显示。
  1805. showPopup();
  1806. } else {
  1807. hidePopup();
  1808. }
  1809. };
  1810. //显示下拉菜单,在此之前先清除下拉菜单项
  1811. const showPopup = () => {
  1812. //清空下拉菜单,并设置第一项的值为空
  1813. clearAndInit1stOpt();
  1814. Vue.nextTick(() => {
  1815. calculatePopupDirection();
  1816. });
  1817. let url = props.url;
  1818. let filterObj = props.param.filter;
  1819. if (filterObj) {
  1820. for (let k in filterObj) {
  1821. let v = filterObj[k];
  1822. url += "&" + k + "=" + v;
  1823. }
  1824. }
  1825. if (props.mode === "1") {
  1826. //如果是有隐藏字段的下拉菜单
  1827. console.log("666url:" + url);
  1828. // alert('url:'+url);
  1829. // 获取级联菜单所有下拉菜单项
  1830. async function getSelectItems(value) {
  1831. try {
  1832. // alert(1);
  1833. if (props.url && props.param) {
  1834. // alert(2);
  1835. /**
  1836. * param={"objectpickerparam":"{\"input\":\"false\",\"cascadingLevel\":\"hksheng,hkshi,hkxian\"," +
  1837. * "\"name\":\"hksheng\",\"cascadingName\":\"dq\"," +
  1838. * "\"cascadingInputsName\":\"hkdqm\",\"codebook\":\"sheng\"}",
  1839. * "objectpickertype":1,//2表示获取要回显的一项,1表示获取所有下拉菜单项
  1840. * "upperValue":"440000"
  1841. * };
  1842. */
  1843. const objectPickerParam = {
  1844. input: "false",
  1845. cascadingLevel: props.param.fieldOrd.join(","), //如:"hksheng,hkshi,hkxian"
  1846. name: props.name, //本下拉菜单名
  1847. cascadingName: props.param.name, //级联菜单名
  1848. cascadingInputsName: props.param.combField, //对象属性,即隐藏字段名,如:hkdqm
  1849. codebook: props.param.codebook,
  1850. };
  1851. console.log("mode1 upperValue.value:" + upperValue.value);
  1852. const objectPickerParamStr = JSON.stringify(objectPickerParam);
  1853. const params = new URLSearchParams();
  1854. params.append("objectpickerparam", objectPickerParamStr);
  1855. params.append("objectpickertype", "1");
  1856. if (upperValue.value) {
  1857. params.append("upperValue", upperValue.value);
  1858. }
  1859. // params.append('objectpickervalue', value); //需回显的值
  1860. axios
  1861. .post(url, params, {
  1862. headers: {
  1863. "Content-Type": "application/x-www-form-urlencoded", // 必须手动设置!
  1864. },
  1865. })
  1866. .then((response) => {
  1867. if ("timeout" == response.data.statusText) {
  1868. alert("网络超时!");
  1869. return;
  1870. }
  1871. if (response.data.result) {
  1872. const keys = Object.keys(response.data.result);
  1873. console.log(
  1874. "params:" +
  1875. params +
  1876. "@@response.data:" +
  1877. JSON.stringify(response.data)
  1878. );
  1879. if (keys.length > 0) {
  1880. for (let k in response.data.result) {
  1881. props.opt.push({
  1882. label: response.data.result[k],
  1883. value: k,
  1884. });
  1885. }
  1886. console.log("props.opt11:" + JSON.stringify(props.opt));
  1887. } else {
  1888. // 没有数据时打印日志 by xu 20251212
  1889. console.log("[ccp mode1] 接口返回空数据");
  1890. }
  1891. } else {
  1892. // result不存在时打印日志 by xu 20251212
  1893. console.log("[ccp mode1] 接口返回无result");
  1894. }
  1895. // 无论是否有数据,都显示popup by xu 20251212
  1896. if (!popupWinVisible.value) {
  1897. popupWinVisible.value = true;
  1898. }
  1899. });
  1900. }
  1901. } catch (error) {
  1902. alert(error);
  1903. // callback(null, error.message); // 失败回调,传递错误
  1904. }
  1905. }
  1906. getSelectItems(props.modelValue);
  1907. } else if (props.mode === "2") {
  1908. //没隐藏字段的下拉菜单
  1909. let needInitParam = undefined;
  1910. if (Array.isArray(props.param)) {
  1911. needInitParam = props.param[props.param.length - 1]; //只初始化数组最后一项
  1912. console.log(
  1913. "needInitParam最后一项:" + JSON.stringify(needInitParam)
  1914. );
  1915. } else {
  1916. needInitParam = props.param;
  1917. }
  1918. // 获取级联菜单所有下拉菜单项
  1919. async function getSelectItems(value, sendParam) {
  1920. try {
  1921. // alert(1);
  1922. if (props.url && sendParam) {
  1923. // alert(2);
  1924. /**
  1925. * param="{\"input\":\"false\",\"cascadingLevel\":\"dwid,sjryid\",
  1926. * \"ryid\":\"111121\",\"name\":\"sjryid\",
  1927. * \"cascadingName\":\"dw_sjry\",\"codebook\":\"sjryByDw\"}"
  1928. */
  1929. const objectPickerParam = {
  1930. input: "false",
  1931. cascadingLevel: sendParam.fieldOrd.join(","), //如:"hksheng,hkshi,hkxian"
  1932. name: props.name, //本下拉菜单名
  1933. cascadingName: sendParam.name, //级联菜单名
  1934. codebook: sendParam.codebook,
  1935. };
  1936. console.log("mode2 upperValue.value:" + upperValue.value);
  1937. const objectPickerParamStr = JSON.stringify(objectPickerParam);
  1938. const params = new URLSearchParams();
  1939. params.append("objectpickerparam", objectPickerParamStr);
  1940. params.append("objectpickertype", "1");
  1941. if (upperValue.value) {
  1942. params.append("upperValue", upperValue.value);
  1943. }
  1944. // params.append('objectpickervalue', value); //需回显的值
  1945. axios
  1946. .post(url, params, {
  1947. headers: {
  1948. "Content-Type": "application/x-www-form-urlencoded", // 必须手动设置!
  1949. },
  1950. })
  1951. .then((response) => {
  1952. if ("timeout" == response.data.statusText) {
  1953. alert("网络超时!");
  1954. return;
  1955. }
  1956. if (response.data.result) {
  1957. const keys = Object.keys(response.data.result);
  1958. console.log(
  1959. "params:" +
  1960. params +
  1961. "@@response.data:" +
  1962. JSON.stringify(response.data)
  1963. );
  1964. if (keys.length > 0) {
  1965. for (let k in response.data.result) {
  1966. props.opt.push({
  1967. label: response.data.result[k],
  1968. value: k,
  1969. });
  1970. }
  1971. console.log("props.opt11:" + JSON.stringify(props.opt));
  1972. } else {
  1973. // 没有数据时打印日志 by xu 20251212
  1974. console.log("[ccp mode2] 接口返回空数据");
  1975. }
  1976. } else {
  1977. // result不存在时打印日志 by xu 20251212
  1978. console.log("[ccp mode2] 接口返回无result");
  1979. }
  1980. // 无论是否有数据,都显示popup by xu 20251212
  1981. if (!popupWinVisible.value) {
  1982. popupWinVisible.value = true;
  1983. }
  1984. });
  1985. }
  1986. } catch (error) {
  1987. alert(error);
  1988. // callback(null, error.message); // 失败回调,传递错误
  1989. }
  1990. }
  1991. getSelectItems(props.modelValue, needInitParam);
  1992. // popupWinVisible.value = !popupWinVisible.value;
  1993. }
  1994. };
  1995. const hidePopup = () => {
  1996. popupWinVisible.value = false;
  1997. };
  1998. // 合并所有的 onMounted 逻辑
  1999. Vue.onMounted(() => {
  2000. window.addEventListener("resize", calculatePopupDirection);
  2001. // 1. 监听展开下一级事件
  2002. window.addEventListener("open-next-cascader", (event) => {
  2003. const { name, level } = event.detail;
  2004. if (name === props.name && level === props.level) {
  2005. popupWinVisible.value = true;
  2006. }
  2007. });
  2008. // 2. 监听级联事件
  2009. window.addEventListener("cascader-change", (event) => {
  2010. const { name, level, value } = event.detail;
  2011. if (name === props.name && level < props.level) {
  2012. selectItem.value = { label: "", value: "" };
  2013. emit("update:modelValue", "");
  2014. if (ssHidden) {
  2015. ssHidden.updateValue(value);
  2016. }
  2017. }
  2018. });
  2019. });
  2020. Vue.onUnmounted(() => {
  2021. window.removeEventListener("resize", calculatePopupDirection);
  2022. });
  2023. // 监听值变化,处理回显 (mode 2)
  2024. Vue.watch(
  2025. () => props.modelValue,
  2026. (newVal) => {
  2027. if (props.mode === "2" && newVal) {
  2028. // 使用 watchEffect 替代嵌套的 watch
  2029. Vue.watchEffect(() => {
  2030. if (props.opt.length > 0) {
  2031. const matchedOption = props.opt.find(
  2032. (opt) => opt.value === newVal
  2033. );
  2034. if (matchedOption) {
  2035. selectItem.value = matchedOption;
  2036. }
  2037. }
  2038. });
  2039. } else {
  2040. // 原有的值变化处理
  2041. const item = props.opt.find((it) => it.value === newVal);
  2042. if (item) {
  2043. selectItem.value = item;
  2044. } else {
  2045. selectItem.value = { label: "", value: "" };
  2046. }
  2047. }
  2048. },
  2049. { immediate: true }
  2050. );
  2051. // 监听选项变化,当数据加载完成时进行匹配
  2052. Vue.watch(
  2053. () => props.opt,
  2054. (newOptions) => {
  2055. if (newOptions.length > 0) {
  2056. const matchedOption = newOptions.find(
  2057. (opt) => opt.value === selectItem.value.value
  2058. );
  2059. if (matchedOption) {
  2060. selectItem.value = matchedOption;
  2061. emit("update:modelValue", matchedOption.value);
  2062. emit("change", matchedOption.value);
  2063. }
  2064. }
  2065. }
  2066. );
  2067. return {
  2068. selectItem,
  2069. popupWinVisible,
  2070. popupDirection,
  2071. popupMaxHeight, // 添加popup最大高度 by xu 20251212
  2072. togglePopup,
  2073. hidePopup,
  2074. doSelectItem,
  2075. };
  2076. },
  2077. template: `
  2078. <div class="input ss-ccp-container" style="position: relative" :style="{width: width}">
  2079. <input type="hidden" :name="name" :value="modelValue">
  2080. <div class="select-container" @mouseleave="hidePopup">
  2081. <div class="input" @click="togglePopup">
  2082. <input
  2083. type="hidden"
  2084. :name="name"
  2085. :value="selectItem.value"
  2086. />
  2087. <input
  2088. :placeholder="placeholder"
  2089. :value="selectItem.label"
  2090. disabled
  2091. style="pointer-events: none;"
  2092. />
  2093. <div class="suffix">
  2094. <ss-form-icon :class="popupWinVisible ? 'form-icon-transform-select select' : 'form-icon-select'" />
  2095. </div>
  2096. </div>
  2097. <!-- popup弹出层,添加maxHeight和overflowY支持空间不足时滚动 by xu 20251212 -->
  2098. <div v-show="popupWinVisible" class="popup-win " :class="popupDirection" :style="{ maxHeight: popupMaxHeight, overflowY: popupMaxHeight !== 'none' ? 'auto' : 'visible' }">
  2099. <div v-if="opt && opt.length > 0" class="popup-content">
  2100. <div class="content-area">
  2101. <div
  2102. v-for="(item, index) in opt"
  2103. :key="index"
  2104. @click="doSelectItem(item)"
  2105. :class="{ active: item.value === selectItem.value }"
  2106. >
  2107. <span class="check-icon">
  2108. <ss-form-icon class="form-icon-select-checked" />
  2109. </span>
  2110. <span>{{ item.label }}</span>
  2111. </div>
  2112. </div>
  2113. </div>
  2114. <div v-else class="popup-content">
  2115. <div class="content-area">
  2116. <div class="content-area">
  2117. <span>无选项</span>
  2118. </div>
  2119. </div>
  2120. </div>
  2121. </div>
  2122. </div>
  2123. </div>
  2124. `,
  2125. };
  2126. // ss-date-picker 日期时间选择器组件
  2127. const SsDatePicker = {
  2128. name: "SsDatePicker",
  2129. props: {
  2130. modelValue: {
  2131. type: [String, Number, Date],
  2132. default: "",
  2133. },
  2134. name: {
  2135. type: String,
  2136. required: true,
  2137. },
  2138. type: {
  2139. type: String,
  2140. default: "date",
  2141. validator: (value) => ["date", "datetime", "time"].includes(value),
  2142. },
  2143. fmt: {
  2144. type: String,
  2145. default: null,
  2146. },
  2147. placeholder: {
  2148. type: String,
  2149. default: "",
  2150. },
  2151. width: {
  2152. type: String,
  2153. default: "100%",
  2154. },
  2155. },
  2156. emits: ["update:modelValue"],
  2157. setup(props, { emit }) {
  2158. const errMsg = ref("");
  2159. const validate = () => {
  2160. if (window.ssVm) {
  2161. const result = window.ssVm.validateField(props.name);
  2162. console.log("validate", window.ssVm.validateField(props.name));
  2163. errMsg.value = result.valid ? "" : result.message;
  2164. }
  2165. };
  2166. // 根据type确定默认格式
  2167. const defaultFormat = computed(() => {
  2168. switch (props.type) {
  2169. case "datetime":
  2170. return "YYYY-MM-DD HH:mm:ss";
  2171. case "date":
  2172. return "YYYY-MM-DD";
  2173. case "time":
  2174. return "HH:mm:ss";
  2175. }
  2176. });
  2177. const convertJavaFormatToElement = (javaFormat) => {
  2178. if (!javaFormat) return null;
  2179. return javaFormat
  2180. .replace("yyyy", "YYYY")
  2181. .replace("MM", "MM")
  2182. .replace("dd", "DD")
  2183. .replace("HH", "HH")
  2184. .replace("mm", "mm")
  2185. .replace("ss", "ss");
  2186. };
  2187. const finalFormat = computed(() => {
  2188. if (props.fmt) {
  2189. return convertJavaFormatToElement(props.fmt);
  2190. }
  2191. return defaultFormat.value;
  2192. });
  2193. // 使用 resolveComponent 获取组件
  2194. const ElDatePicker = resolveComponent("ElDatePicker");
  2195. const ElTimePicker = resolveComponent("ElTimePicker");
  2196. const SsFormIcon = resolveComponent("SsFormIcon");
  2197. const ElIcon = resolveComponent("ElIcon");
  2198. const handleValueUpdate = (val) => {
  2199. emit("update:modelValue", val);
  2200. emit("change", val); // 同时触发 change 事件
  2201. setTimeout(() => {
  2202. validate();
  2203. }, 50);
  2204. };
  2205. const dateType = computed(() => {
  2206. const fmt = props.fmt || "";
  2207. if (fmt.includes("HH:mm:ss")) {
  2208. return "datetime";
  2209. } else if (fmt.includes("HH:mm")) {
  2210. return "datetime";
  2211. } else if (fmt.includes("mm:ss")) {
  2212. return "time";
  2213. }
  2214. return "date";
  2215. });
  2216. let useTimePicker = true;
  2217. //"yyyy-MM-dd HH:mm:ss"; "日期字符串格式在java的写法",传到本组件fmt属性也是按这个格式
  2218. if (props.fmt) {
  2219. //有fmt属性,则以fmt属性优先判断类型
  2220. if (/[dMy]/.test(props.fmt)) {
  2221. //如果有传入日期格式,且含年月日
  2222. useTimePicker = false;
  2223. } else {
  2224. useTimePicker = true;
  2225. }
  2226. } else if (props.type !== "time") {
  2227. useTimePicker = false;
  2228. }
  2229. return () =>
  2230. h("div", { class: "ss-date-picker", style: { width: props.width } }, [
  2231. h("input", {
  2232. type: "hidden",
  2233. name: props.name,
  2234. value: props.modelValue,
  2235. }),
  2236. // 选择组件
  2237. h(useTimePicker ? ElTimePicker : ElDatePicker, {
  2238. modelValue: props.modelValue,
  2239. "onUpdate:modelValue": handleValueUpdate,
  2240. type: dateType.value,
  2241. format: finalFormat.value,
  2242. "value-format": finalFormat.value,
  2243. clearable: true,
  2244. placeholder: props.placeholder,
  2245. class: "custom-date-picker", // 用于自定义样式
  2246. "time-arrow-control": props.type === "datetime", // 修改这里
  2247. size: "large", // 添加这一行,改为 large 尺寸
  2248. style: { width: "100%" },
  2249. "prefix-icon": h(SsFormIcon, { class: "form-icon-time" }),
  2250. }),
  2251. ]);
  2252. },
  2253. };
  2254. // ss-icon 图标
  2255. // v3.0 增加 class 属性分支:有 class 走新逻辑,否则走 v1.0 逻辑 by xu 20251212
  2256. // v3.0 用法: <ss-icon class="icon-obj-ry menu-icon" />
  2257. // v1.0 用法: <ss-icon name="setting" size="20px" />
  2258. const SsIcon = {
  2259. name: "SsIcon",
  2260. // v3.0 禁用 class 透传,手动处理 by xu 20251215
  2261. inheritAttrs: false,
  2262. props: {
  2263. // v1.0: 以下为旧属性
  2264. name: { type: String },
  2265. size: { type: [Number, String], default: 16 },
  2266. unit: { type: String, default: "px" },
  2267. color: String,
  2268. type: {
  2269. type: String,
  2270. default: ssIcon.name,
  2271. validator: function (value) {
  2272. return [ssIcon, commonIcon].some((icon) => icon.name === value);
  2273. },
  2274. },
  2275. },
  2276. emits: ["update:modelValue", "input", "blur", "change"],
  2277. setup(props, { emit, attrs }) {
  2278. // v3.0 分支:有 class 属性时直接渲染(从 attrs 获取) by xu 20251215
  2279. if (attrs.class) {
  2280. return () => h("i", { ...attrs, class: attrs.class + ' icon-container' });
  2281. }
  2282. // v1.0 分支:原有逻辑
  2283. const useIconType = computed(() => {
  2284. return [ssIcon, commonIcon].find(
  2285. (iconConfig) => iconConfig.name === props.type
  2286. );
  2287. });
  2288. const iconName = computed(() => {
  2289. const iconConfig = useIconType.value; // 注意:使用 .value 来访问响应式引用的值
  2290. if (!iconConfig) {
  2291. console.error(`Icon type "${props.type}" not found.`);
  2292. return "";
  2293. }
  2294. const iconType = iconConfig.types[props.name];
  2295. if (!iconType) {
  2296. console.error(
  2297. `Icon name "${props.name}" not found in type "${props.type}".`
  2298. );
  2299. return "";
  2300. }
  2301. return `${iconConfig.prefix}${iconType}`;
  2302. });
  2303. // 类似地,你可以计算 fontFamily 和 style
  2304. const fontFamily = computed(() => {
  2305. return useIconType.value ? useIconType.value.family : "";
  2306. });
  2307. // console.log(iconName.value,fontFamily.value)
  2308. const style = computed(() => {
  2309. const sizeStyle = isNum(props.size)
  2310. ? `${props.size}${props.unit}`
  2311. : props.size;
  2312. const styleObj = {
  2313. fontSize: sizeStyle,
  2314. color: props.color || "",
  2315. };
  2316. return toStyleStr(styleObj);
  2317. });
  2318. // 使用渲染函数定义模板逻辑
  2319. return () =>
  2320. h("i", {
  2321. class: ["icon-container", iconName.value, fontFamily.value],
  2322. style: style.value,
  2323. });
  2324. },
  2325. };
  2326. // 通用icon
  2327. const SsCommonIcon = {
  2328. name: "SsCommonIcon",
  2329. props: {
  2330. class: {
  2331. type: String,
  2332. required: true,
  2333. },
  2334. },
  2335. setup(props) {
  2336. return () =>
  2337. h("i", {
  2338. class: props.class + " common-icon",
  2339. });
  2340. },
  2341. };
  2342. // 登录页icon
  2343. const SsLoginIcon = {
  2344. name: "SsLoginIcon",
  2345. props: {
  2346. class: {
  2347. type: String,
  2348. required: true,
  2349. },
  2350. },
  2351. setup(props) {
  2352. return () =>
  2353. h("div", {
  2354. class: props.class + " login-icon",
  2355. });
  2356. },
  2357. };
  2358. // 弹窗icon
  2359. const SsDialogIcon = {
  2360. name: "SsDialogIcon",
  2361. props: {
  2362. class: {
  2363. type: String,
  2364. required: true,
  2365. },
  2366. },
  2367. setup(props) {
  2368. return () =>
  2369. h("i", {
  2370. class: props.class + " dialog-icon",
  2371. });
  2372. },
  2373. };
  2374. // 全局左侧导航图标组件
  2375. const SsNavIcon = {
  2376. name: "SsNavIcon",
  2377. props: {
  2378. class: {
  2379. type: String,
  2380. required: true,
  2381. },
  2382. },
  2383. setup(props) {
  2384. return () =>
  2385. h("div", {
  2386. class: props.class + " nav-icon",
  2387. });
  2388. },
  2389. };
  2390. // 顶部工具栏图标组件
  2391. const SsHeaderIcon = {
  2392. name: "SsHeaderIcon",
  2393. props: {
  2394. class: {
  2395. type: String,
  2396. required: true,
  2397. },
  2398. },
  2399. setup(props) {
  2400. return () =>
  2401. h("div", {
  2402. class: props.class + " header-icon",
  2403. });
  2404. },
  2405. };
  2406. // 全局菜单图标组件
  2407. const SsGolbalMenuIcon = {
  2408. name: "SsGolbalMenuIcon",
  2409. props: {
  2410. class: {
  2411. type: String,
  2412. required: true,
  2413. },
  2414. },
  2415. setup(props) {
  2416. return () =>
  2417. h("div", {
  2418. class: props.class + " global-menu-icon",
  2419. });
  2420. },
  2421. };
  2422. // 全局查询列表卡片图标
  2423. const SsCartListIcon = {
  2424. name: "SsCartListIcon",
  2425. props: {
  2426. class: {
  2427. type: String,
  2428. required: true,
  2429. },
  2430. },
  2431. setup(props) {
  2432. return () =>
  2433. h("div", {
  2434. class: props.class + " cart-list-icon",
  2435. });
  2436. },
  2437. };
  2438. // 全局底部工具栏图标组件
  2439. const SsQuickIcon = {
  2440. name: "SsQuickIcon",
  2441. props: {
  2442. class: {
  2443. type: String,
  2444. required: true,
  2445. },
  2446. },
  2447. setup(props) {
  2448. return () =>
  2449. h("div", {
  2450. class: props.class + " quick-icon",
  2451. });
  2452. },
  2453. };
  2454. // 表单组件icon
  2455. const SsFormIcon = {
  2456. name: "SsFormIcon",
  2457. props: {
  2458. class: {
  2459. type: String,
  2460. required: true,
  2461. },
  2462. },
  2463. setup(props) {
  2464. return () =>
  2465. h("div", {
  2466. class: props.class + " form-icon",
  2467. });
  2468. },
  2469. };
  2470. // 弹窗底部按钮icon
  2471. const SsBottomDivIcon = {
  2472. name: "SsBottomDivIcon",
  2473. props: {
  2474. class: {
  2475. type: String,
  2476. required: true,
  2477. },
  2478. },
  2479. setup(props) {
  2480. return () =>
  2481. h("div", {
  2482. class: props.class + " bottom-div-icon",
  2483. });
  2484. },
  2485. };
  2486. // editor组件icon
  2487. const SsEditorIcon = {
  2488. name: "SsEditorIcon",
  2489. props: {
  2490. class: {
  2491. type: String,
  2492. required: true,
  2493. },
  2494. },
  2495. setup(props) {
  2496. return () =>
  2497. h("i", {
  2498. class: props.class + " editor-icon",
  2499. });
  2500. },
  2501. };
  2502. // ss-validate校验器
  2503. const SsValidate = {
  2504. name: "SsValidate",
  2505. props: {
  2506. errMsg: { type: String },
  2507. textAlign: { type: String, default: "left" },
  2508. style: { type: Object, default: () => ({}) },
  2509. },
  2510. template: `<div class="validate-vline"></div>
  2511. <div class="validate-tip" :style="style">
  2512. <div class="tip" :style="{ textAlign: textAlign }">{{ errMsg }}</div>
  2513. <div class="tip-more" :style="{ textAlign: textAlign }">{{ errMsg }}</div>
  2514. </div>`,
  2515. };
  2516. // ss-onoff-array 多选按钮 数组形式
  2517. const SsonoffArray = {
  2518. name: "SsonoffArray",
  2519. props: {
  2520. name: {
  2521. type: String,
  2522. required: true,
  2523. },
  2524. opt: {
  2525. type: Array,
  2526. default: () => [],
  2527. },
  2528. defaultValue: [String, Number, Array],
  2529. modelValue: [String, Number, Array],
  2530. multiple: {
  2531. // 新增多选模式属性
  2532. type: Boolean,
  2533. default: false,
  2534. },
  2535. // 是否允许一项都不选,默认true允许 by xu 20251212
  2536. null: {
  2537. type: Boolean,
  2538. default: true,
  2539. },
  2540. },
  2541. emits: ["update:modelValue"], // 允许更新 v-model 绑定的值
  2542. setup(props, { emit }) {
  2543. console.log("多选按钮", props.opt);
  2544. // 使用数组来存储选中值
  2545. const checkedValue = ref(
  2546. props.multiple
  2547. ? Array.isArray(props.defaultValue)
  2548. ? props.defaultValue
  2549. : []
  2550. : props.defaultValue
  2551. );
  2552. const errMsg = ref(props.errTip);
  2553. // 生成icon名字
  2554. const genIconName = (itemValue) => {
  2555. if (props.multiple) {
  2556. return checkedValue.value.includes(itemValue)
  2557. ? "form-icon-onoff-checked"
  2558. : "form-icon-onoff-unchecked";
  2559. }
  2560. return checkedValue.value === itemValue
  2561. ? "form-icon-onoff-checked"
  2562. : "form-icon-onoff-unchecked";
  2563. };
  2564. // 选中项
  2565. const selectItem = (value) => {
  2566. if (props.multiple) {
  2567. // 多选模式
  2568. const index = checkedValue.value.indexOf(value);
  2569. if (index === -1) {
  2570. checkedValue.value = [...checkedValue.value, value];
  2571. } else {
  2572. // 取消选中当前项
  2573. const newValue = checkedValue.value.filter((v) => v !== value);
  2574. // 如果不允许为空且取消后为空,则阻止取消操作 by xu 20251212
  2575. if (!props.null && newValue.length === 0) {
  2576. return; // 阻止取消最后一项
  2577. }
  2578. checkedValue.value = newValue;
  2579. }
  2580. } else {
  2581. // 单选模式
  2582. // 如果点击的是当前已选中的项,判断是否允许取消 by xu 20251212
  2583. if (checkedValue.value === value) {
  2584. if (!props.null) {
  2585. return; // 不允许为空时,阻止取消
  2586. }
  2587. checkedValue.value = ""; // 允许为空时,取消选中
  2588. } else {
  2589. checkedValue.value = value;
  2590. }
  2591. }
  2592. emit("update:modelValue", checkedValue.value);
  2593. nextTick(() => {
  2594. // 触发验证
  2595. if (window.ssVm) {
  2596. window.ssVm.validateField(props.name);
  2597. }
  2598. });
  2599. };
  2600. return { checkedValue, genIconName, selectItem };
  2601. },
  2602. // 使用渲染函数定义模板逻辑
  2603. render() {
  2604. const SsFormIcon = resolveComponent("ss-form-icon");
  2605. return h("div", { class: "radio-container" }, [
  2606. // 根据情况创建 input
  2607. this.multiple
  2608. ? this.checkedValue.length
  2609. ? // 多选且有选中值:为选中项创建 input
  2610. this.checkedValue.map((value) =>
  2611. h("input", {
  2612. type: "checkbox",
  2613. name: this.name,
  2614. value: value,
  2615. checked: true,
  2616. style: { display: "none" },
  2617. })
  2618. )
  2619. : // 多选但没有选中值:创建一个空值 input
  2620. h("input", {
  2621. type: "hidden",
  2622. name: this.name,
  2623. value: "",
  2624. })
  2625. : // 单选模式:创建一个 input
  2626. h("input", {
  2627. type: "hidden",
  2628. name: this.name,
  2629. value: this.checkedValue || "",
  2630. }),
  2631. this.opt.map((item, i) =>
  2632. h(
  2633. "div",
  2634. {
  2635. key: i,
  2636. class: {
  2637. checked: this.multiple
  2638. ? this.checkedValue.includes(item.value)
  2639. : this.checkedValue === item.value,
  2640. },
  2641. style: { width: item.width },
  2642. onClick: () => this.selectItem(item.value),
  2643. },
  2644. [
  2645. h("span", null, item.label),
  2646. h("div", { class: "mark" }, [
  2647. h(SsFormIcon, {
  2648. class: this.genIconName(item.value),
  2649. }),
  2650. ]),
  2651. ]
  2652. )
  2653. ),
  2654. ]);
  2655. },
  2656. };
  2657. // ss-onoff 一个按钮
  2658. const Ssonoff = {
  2659. name: "Ssonoff",
  2660. props: {
  2661. name: {
  2662. type: String,
  2663. required: true,
  2664. },
  2665. label: {
  2666. type: String,
  2667. required: true,
  2668. },
  2669. value: {
  2670. type: [String, Number],
  2671. required: true,
  2672. },
  2673. width: {
  2674. type: String,
  2675. default: "",
  2676. },
  2677. modelValue: [String, Number, Array],
  2678. multiple: {
  2679. type: Boolean,
  2680. default: false,
  2681. },
  2682. null: {
  2683. type: Boolean,
  2684. default: true,
  2685. },
  2686. },
  2687. emits: ["update:modelValue"],
  2688. setup(props, { emit }) {
  2689. const parseModelValue = (val) => {
  2690. if (!val) return [];
  2691. // 如果以逗号开头,去掉开头的逗号
  2692. const cleanValue = val.toString().replace(/^,+/, "");
  2693. if (cleanValue.includes("|")) {
  2694. return cleanValue.split("|");
  2695. }
  2696. if (cleanValue.includes(",")) {
  2697. return cleanValue.split(",");
  2698. }
  2699. return [cleanValue];
  2700. };
  2701. // 判断当前按钮是否选中
  2702. const isChecked = computed(() => {
  2703. if (props.multiple) {
  2704. const currentValue = parseModelValue(props.modelValue);
  2705. return currentValue.includes(props.value.toString());
  2706. // return Array.isArray(props.modelValue) && props.modelValue.includes(props.value);
  2707. }
  2708. return (props.modelValue + '') === (props.value + '');//强转为字符串类型再比较(改之前是数字类型和字符串类型作比较,永远为false) Ben 20251206
  2709. });
  2710. // 切换选中状态
  2711. const toggleSelect = () => {
  2712. if (props.multiple) {
  2713. const currentValue = parseModelValue(props.modelValue);
  2714. const index = currentValue.indexOf(props.value.toString());
  2715. let newValue;
  2716. if (index === -1) {
  2717. // 选中当前项
  2718. newValue = [...currentValue, props.value];
  2719. } else {
  2720. // 取消选中当前项
  2721. const filteredValue = currentValue.filter((v) => v !== props.value.toString());
  2722. // 如果不允许为空且取消后为空,则阻止取消操作
  2723. if (!props.null && filteredValue.length === 0) {
  2724. return; // 阻止取消最后一项
  2725. }
  2726. newValue = filteredValue;
  2727. }
  2728. emit("update:modelValue", newValue.join(","));
  2729. } else {
  2730. // 单选模式
  2731. const currentValue = parseModelValue(props.modelValue);
  2732. const isCurrentlySelected = currentValue.includes(props.value.toString());
  2733. if (!isCurrentlySelected) {
  2734. // 选中当前项
  2735. emit("update:modelValue", props.value);
  2736. } else {
  2737. // 取消选中当前项
  2738. // 如果不允许为空且当前只有这一项被选中,则阻止取消操作
  2739. if (!props.null && currentValue.length === 1) {
  2740. return; // 阻止取消唯一选中项
  2741. }
  2742. emit("update:modelValue", "");
  2743. }
  2744. }
  2745. nextTick(() => {
  2746. // 触发验证
  2747. if (window.ssVm) {
  2748. window.ssVm.validateField(props.name);
  2749. }
  2750. });
  2751. };
  2752. return { isChecked, toggleSelect };
  2753. },
  2754. render() {
  2755. const SsFormIcon = resolveComponent("ss-form-icon");
  2756. return h("div", { class: "radio-container2" }, [
  2757. // 隐藏的表单元素
  2758. this.multiple
  2759. ? h("input", {
  2760. type: "hidden",
  2761. name: `${this.name}`, // 多选模式下使用数组形式的 name
  2762. value: this.isChecked ? this.value : "",
  2763. })
  2764. : this.isChecked &&
  2765. h("input", {
  2766. // 只有当前按钮被选中时才创建 input
  2767. type: "hidden",
  2768. name: this.name,
  2769. value: this.value,
  2770. }),
  2771. // 按钮显示
  2772. h(
  2773. "div",
  2774. {
  2775. class: { checked: this.isChecked },
  2776. style: { width: this.width },
  2777. onClick: this.toggleSelect,
  2778. },
  2779. [
  2780. h("span", null, this.label),
  2781. h("div", { class: "mark" }, [
  2782. h(SsFormIcon, {
  2783. class: this.isChecked
  2784. ? "form-icon-onoff-checked"
  2785. : "form-icon-onoff-unchecked",
  2786. }),
  2787. ]),
  2788. ]
  2789. ),
  2790. ]);
  2791. },
  2792. };
  2793. // ss-textarea
  2794. const SsTextarea = {
  2795. name: "SsTextarea",
  2796. props: {
  2797. name: {
  2798. type: String,
  2799. required: true,
  2800. },
  2801. placeholder: {
  2802. type: String,
  2803. default: "请输入",
  2804. },
  2805. defaultValue: [String, Number],
  2806. modelValue: [String, Number],
  2807. },
  2808. emits: ["update:modelValue"],
  2809. setup(props, { emit }) {
  2810. const inputValue = ref(props.modelValue || props.defaultValue || "");
  2811. // 监听 modelValue 变化
  2812. watch(
  2813. () => props.modelValue,
  2814. (newVal) => {
  2815. inputValue.value = newVal;
  2816. }
  2817. );
  2818. // 输入事件处理
  2819. const onInput = (event) => {
  2820. const newValue = event.target.value;
  2821. inputValue.value = newValue;
  2822. emit("update:modelValue", newValue);
  2823. // 触发验证
  2824. if (window.ssVm) {
  2825. window.ssVm.validateField(props.name);
  2826. }
  2827. };
  2828. // 失焦时验证
  2829. const onBlur = () => {
  2830. if (window.ssVm) {
  2831. window.ssVm.validateField(props.name);
  2832. }
  2833. };
  2834. return { inputValue, onInput, onBlur };
  2835. },
  2836. render() {
  2837. return h("div", { class: "textarea-container" }, [
  2838. h("div", { class: "textarea" }, [
  2839. // 添加隐藏的 input 用于验证
  2840. h("input", {
  2841. type: "hidden",
  2842. name: this.name,
  2843. value: this.inputValue || "",
  2844. }),
  2845. h("textarea", {
  2846. placeholder: this.placeholder,
  2847. value: this.inputValue,
  2848. onInput: this.onInput,
  2849. onBlur: this.onBlur,
  2850. }),
  2851. ]),
  2852. ]);
  2853. },
  2854. };
  2855. // ss-editor 富文本编辑器 基于Jodit
  2856. const SsEditor = {
  2857. name: "SsEditor",
  2858. props: {
  2859. modelValue: {
  2860. type: String,
  2861. default: "",
  2862. },
  2863. name: {
  2864. type: String,
  2865. default: "",
  2866. },
  2867. url: {
  2868. type: String,
  2869. default: "",
  2870. },
  2871. height: {
  2872. type: [Number, String],
  2873. default: 400,
  2874. },
  2875. placeholder: {
  2876. type: String,
  2877. default: "请输入内容",
  2878. },
  2879. readonly: {
  2880. type: Boolean,
  2881. default: false,
  2882. },
  2883. uploadUrl: {
  2884. type: String,
  2885. default: "/ulByHttp",//原值为“upload” Ben(20251205)
  2886. },
  2887. param: {
  2888. type: Object,
  2889. default: () => ({}),
  2890. },
  2891. },
  2892. emits: ["update:modelValue", "ready", "change"],
  2893. setup(props, { emit }) {
  2894. const SsEditorIcon = resolveComponent("SsEditorIcon");
  2895. const editorRef = ref(null);
  2896. let editorContent = '';//保存富文本编辑器里面的富文本内容
  2897. const uniqueId = "editor-" + Date.now();
  2898. const errMsg = Vue.ref("");
  2899. let fjid = ref(props.param.button.val);
  2900. let fjName = props.param.button.desc;
  2901. let mode = props.param.mode;
  2902. const validate = () => {
  2903. if (window.ssVm) {
  2904. const result = window.ssVm.validateField(props.name);
  2905. console.log("validate", window.ssVm.validateField(props.name));
  2906. errMsg.value = result.valid ? "" : result.message;
  2907. }
  2908. };
  2909. onMounted(() => {
  2910. validate();
  2911. const editor = Jodit.make(`#${uniqueId}`, {
  2912. height: props.height,
  2913. placeholder: props.placeholder,
  2914. readonly: props.readonly,
  2915. language: "zh_cn",
  2916. i18n: {
  2917. zh_cn: {
  2918. Link: "链接",
  2919. URL: "链接",
  2920. "No follow": "无跟踪",
  2921. "Class name": "类名",
  2922. Image: "图片",
  2923. File: "文件",
  2924. "Line height": "行高",
  2925. Alternative: "描述",
  2926. "Alternative text": "描述",
  2927. "Lower Alpha": "小写字母",
  2928. "Upper Alpha": "大写字母",
  2929. "Upper Roman": "大写罗马数字",
  2930. "Lower Roman": "小写罗马数字",
  2931. "Lower Greek": "小写希腊字母",
  2932. "Lower Letter": "小写字母",
  2933. "Upper Letter": "大写字母",
  2934. },
  2935. },
  2936. showXPathInStatusbar: false,
  2937. showCharsCounter: false,
  2938. showWordsCounter: false,
  2939. allowResizeY: false,
  2940. toolbarSticky: false,
  2941. statusbar: false,
  2942. uploader: {
  2943. url: props.uploadUrl,
  2944. format: "json",
  2945. method: "POST",
  2946. filesVariableName: function (i) {
  2947. return "imgs[" + i + "]";
  2948. },
  2949. headers: {
  2950. Accept: "application/json",
  2951. },
  2952. prepareData: function (formData) {
  2953. // 这里可以在发送前处理表单数据
  2954. return formData;
  2955. },
  2956. isSuccess: function (resp) {
  2957. console.log("isSuccess resp:", resp);
  2958. return resp.code === 0;
  2959. },
  2960. getMessage: function (resp) {
  2961. console.log("getMessage resp:", resp);
  2962. return resp.msg || "上传失败";
  2963. },
  2964. process: function (resp) {
  2965. console.log("process resp:", resp);
  2966. return resp.data.url;
  2967. },
  2968. error: function (e) {
  2969. console.error("上传失败:", e.message);
  2970. },
  2971. defaultHandlerSuccess: function (resp) {
  2972. console.log("上传成功:", resp);
  2973. },
  2974. defaultHandlerError: function (err) {
  2975. console.error("上传错误:", err);
  2976. },
  2977. contentType: function (requestData) {
  2978. // 可以根据需要修改 Content-Type
  2979. return false; // 让浏览器自动设置
  2980. },
  2981. },
  2982. // 自定义字体列表
  2983. controls: {
  2984. font: {
  2985. list: {
  2986. Arial: "Arial",
  2987. SimSun: "宋体",
  2988. SimHei: "黑体",
  2989. "Microsoft YaHei": "微软雅黑",
  2990. KaiTi: "楷体",
  2991. FangSong: "仿宋",
  2992. "Times New Roman": "Times New Roman",
  2993. "Courier New": "Courier New",
  2994. },
  2995. },
  2996. customLinkButton: {
  2997. name: "link",
  2998. tooltip: "附件",
  2999. exec: function (editor) {
  3000. // 按钮点击时的处理函数
  3001. console.log("附件点击了");
  3002. console.log("param", props.param);
  3003. console.log("cmsAddUrl", props.param.button.cmsAddUrl);
  3004. if (fjid.value == null || fjid.value == "") {
  3005. $.ajax({
  3006. type: "post",
  3007. url: props.param.button.cmsAddUrl,
  3008. async: false,
  3009. data: {
  3010. name: "fjid",
  3011. ssNrObjName: "sh",
  3012. ssNrObjId: "",
  3013. },
  3014. success: function (_fjid) {
  3015. console.log("cmsAddUrl success", _fjid);
  3016. fjid.value = _fjid;
  3017. },
  3018. });
  3019. }
  3020. var str =
  3021. "&nrid=T-" +
  3022. fjid.value +
  3023. "&objectId=" +
  3024. fjid.value +
  3025. "&objectName=" +
  3026. fjName +
  3027. "&callback=" +
  3028. (window["fjidCallbackName"] || "");
  3029. console.log("str", str);
  3030. SS.openDialog({
  3031. src: props.param.button.cmsUpdUrl + str,
  3032. headerTitle: "编辑",
  3033. width: 900,
  3034. high: 664,
  3035. zIndex: 51
  3036. });
  3037. // ss.display.showComponent({
  3038. // show: ["wdDialog"],
  3039. // url: props.param.button.cmsUpdUrl + str,
  3040. // title: "编辑",
  3041. // width: 900,
  3042. // high: 664,
  3043. // });
  3044. },
  3045. },
  3046. },
  3047. toolbarAdaptive: true,
  3048. buttons: [
  3049. "fullsize",
  3050. "bold",
  3051. "italic",
  3052. "underline",
  3053. "strikethrough",
  3054. "eraser",
  3055. "|",
  3056. "font",
  3057. "fontsize",
  3058. "brush",
  3059. "paragraph",
  3060. "|",
  3061. "left",
  3062. "center",
  3063. "right",
  3064. "justify",
  3065. "|",
  3066. "ul",
  3067. "ol",
  3068. "indent",
  3069. "outdent",
  3070. "|",
  3071. "image",
  3072. "table",
  3073. "customLinkButton",
  3074. "print",
  3075. "|",
  3076. "undo",
  3077. "redo",
  3078. "find",
  3079. ],
  3080. // 中等宽度时显示的按钮
  3081. buttonsMD: [
  3082. "fullsize",
  3083. "bold",
  3084. "italic",
  3085. "underline",
  3086. "strikethrough",
  3087. "eraser",
  3088. "|",
  3089. "font",
  3090. "fontsize",
  3091. "brush",
  3092. "paragraph",
  3093. "|",
  3094. "font",
  3095. "fontsize",
  3096. "|",
  3097. "left",
  3098. "center",
  3099. "right",
  3100. "justify",
  3101. "|",
  3102. "image",
  3103. "customLinkButton",
  3104. "|",
  3105. "dots", // 其余按钮会自动进入 dots 菜单
  3106. ],
  3107. // 小屏幕时显示的按钮
  3108. buttonsSM: ["fullsize", "bold", "italic", "|", "image", "|", "dots"],
  3109. // 超小屏幕时显示的按钮
  3110. buttonsXS: ["fullsize", "bold", "|", "dots"],
  3111. // 设置响应式断点
  3112. sizeLG: 1024, // 大屏幕
  3113. sizeMD: 768, // 中等屏幕
  3114. sizeSM: 576, // 小屏幕
  3115. // 自定义图标
  3116. getIcon: function (name, clearName) {
  3117. // 定义图标映射
  3118. const iconMap = {
  3119. bold: "editor-icon-bold",
  3120. italic: "editor-icon-italic",
  3121. underline: "editor-icon-underline",
  3122. strikethrough: "editor-icon-strikethrough",
  3123. eraser: "editor-icon-eraser",
  3124. copyformat: "editor-icon-copyformat",
  3125. font: "editor-icon-font",
  3126. fontsize: "editor-icon-fontsize",
  3127. brush: "editor-icon-brush",
  3128. paragraph: "editor-icon-paragraph",
  3129. left: "editor-icon-align-left",
  3130. center: "editor-icon-align-center",
  3131. right: "editor-icon-align-right",
  3132. justify: "editor-icon-align-justify",
  3133. ul: "editor-icon-ul",
  3134. ol: "editor-icon-ol",
  3135. indent: "editor-icon-indent",
  3136. outdent: "editor-icon-outdent",
  3137. image: "editor-icon-image",
  3138. file: "editor-icon-file",
  3139. video: "editor-icon-video",
  3140. table: "editor-icon-table",
  3141. link: "editor-icon-link",
  3142. source: "editor-icon-source",
  3143. eye: "editor-icon-preview",
  3144. fullsize: "editor-icon-fullsize",
  3145. shrink: "editor-icon-fullsize-exit", // 添加退出全屏图标
  3146. print: "editor-icon-print",
  3147. undo: "editor-icon-undo",
  3148. redo: "editor-icon-redo",
  3149. search: "editor-icon-find",
  3150. selectall: "editor-icon-selectall",
  3151. };
  3152. // 获取对应的图标类名
  3153. const iconClass = iconMap[clearName] || iconMap[name];
  3154. if (iconClass) {
  3155. // 返回带有我们自定义图标类的 span 元素
  3156. return `<span class="editor-icon ${iconClass}"></span>`;
  3157. }
  3158. return null;
  3159. },
  3160. });
  3161. // 设置初始值
  3162. editor.value = editorContent;
  3163. // editor.value = props.modelValue;
  3164. // 监听变化
  3165. editor.events.on("change", () => {
  3166. // emit("update:modelValue", editor.value);
  3167. editorContent = editor.value;
  3168. // alert('editorContent:'+editorContent);
  3169. let contentElements = document.getElementsByName(props.name.replace(/wj$/, "") + "Edit");
  3170. if (contentElements.length > 0) {
  3171. contentElements[0].value = editorContent;
  3172. }
  3173. emit("change", editor.value);
  3174. setTimeout(() => {
  3175. validate();
  3176. }, 50);
  3177. });
  3178. // 保存编辑器实例
  3179. editorRef.value = editor;
  3180. emit("ready", editor);
  3181. //回显编辑器富文本文件
  3182. if (props.url) {
  3183. const params = new URLSearchParams();
  3184. if (mode)
  3185. params.append("mode", mode);
  3186. if (props.modelValue)
  3187. params.append("path", props.modelValue);
  3188. // alert('props.url:'+props.url+',props.modelValue:'+props.modelValue);
  3189. axios
  3190. .post(props.url, params, {
  3191. headers: {
  3192. "Content-Type": "application/x-www-form-urlencoded", // 必须手动设置!
  3193. },
  3194. })
  3195. .then((response) => {
  3196. // alert(JSON.stringify(response.data));
  3197. if ("timeout" == response.data.statusText) {
  3198. alert("网络超时!");
  3199. return;
  3200. }
  3201. let content = response.data.content;
  3202. if (content) {
  3203. // editor.value = content;
  3204. editorRef.value.value = content;
  3205. editorContent = content;
  3206. // alert('editor.value:'+editor.value)
  3207. }
  3208. let filePath = response.data.path;
  3209. // alert('response.data:'+JSON.stringify(response.data));
  3210. if (filePath) {
  3211. props.modelValue = filePath;
  3212. emit("update:modelValue", filePath);
  3213. }
  3214. });
  3215. }
  3216. });
  3217. // 监听值变化
  3218. watch(
  3219. // () => props.modelValue,
  3220. () => editorContent,
  3221. (newValue) => {
  3222. if (editorRef.value && newValue !== editorRef.value.value) {
  3223. editorRef.value.value = newValue || "";
  3224. }
  3225. }
  3226. );
  3227. // 监听只读状态变化
  3228. watch(
  3229. () => props.readonly,
  3230. (newValue) => {
  3231. if (editorRef.value) {
  3232. editorRef.value.setReadOnly(newValue);
  3233. }
  3234. }
  3235. );
  3236. // 组件销毁时清理
  3237. onBeforeUnmount(() => {
  3238. if (editorRef.value) {
  3239. editorRef.value.destruct();
  3240. }
  3241. });
  3242. return () =>
  3243. h("div", { class: "ss-editor-container" }, [
  3244. fjid.value &&
  3245. h("input", {
  3246. type: "hidden",
  3247. name: "fjid",
  3248. value: fjid.value,
  3249. }),
  3250. h("input", {
  3251. type: "hidden",
  3252. name: props.name.replace(/wj$/, "") + "Edit",
  3253. value: editorContent
  3254. // value: props.modelValue,
  3255. }),
  3256. h("input", {
  3257. type: "hidden",
  3258. name: props.name.replace(/wj$/, "") + "wj",
  3259. value: props.modelValue
  3260. // value: props.url
  3261. }),
  3262. h("input", { type: "hidden", name: "ueditorpath", value: "mswj" }),
  3263. h("textarea", { id: uniqueId }),
  3264. ]);
  3265. },
  3266. };
  3267. // 弹窗右边图标
  3268. const SsFullStyleHeader = {
  3269. name: "SsFullStyleHeader",
  3270. props: {
  3271. title: {
  3272. type: String,
  3273. default: "标题",
  3274. },
  3275. },
  3276. emits: ["close"],
  3277. setup(props, { emit }) {
  3278. // console.log(props.title)
  3279. const onClose = () => {
  3280. emit("close");
  3281. };
  3282. const SsIcon = resolveComponent("ss-icon");
  3283. return () =>
  3284. h("div", { class: "header-container" }, [
  3285. h("div", { class: "title" }, props.title),
  3286. h("div", { class: "handle-bar" }, [
  3287. h("div", { class: "left-bar" }, [
  3288. h(SsDialogIcon, { class: "dialog-icon-download" }),
  3289. h(SsDialogIcon, { class: "dialog-icon-print" }),
  3290. h(SsDialogIcon, { class: "dialog-icon-setting" }),
  3291. h(SsDialogIcon, { class: "dialog-icon-collect" }),
  3292. h(SsDialogIcon, { class: "dialog-icon-help" }),
  3293. h(SsDialogIcon, { class: "dialog-icon-full-screen" }),
  3294. h(SsDialogIcon, { class: "dialog-icon-lock" }),
  3295. ]),
  3296. h("div", { class: "close-bar", onClick: onClose }, [
  3297. h(SsDialogIcon, { class: "dialog-icon-close" }),
  3298. ]),
  3299. ]),
  3300. ]);
  3301. },
  3302. };
  3303. // ss-dialog弹窗
  3304. const SsDialog = {
  3305. name: "SsDialog",
  3306. props: {
  3307. src: {
  3308. type: String,
  3309. },
  3310. headerTitle: {
  3311. type: String,
  3312. // required: true,
  3313. default: "弹窗",
  3314. },
  3315. width: {
  3316. type: String,
  3317. default: "1400",
  3318. },
  3319. height: {
  3320. type: String,
  3321. default: "600",
  3322. },
  3323. params: {
  3324. type: Object,
  3325. default: () => ({}),
  3326. },
  3327. zIndex: {
  3328. type: Number,
  3329. default: 1000,
  3330. },
  3331. },
  3332. emits: ["close"],
  3333. setup(props, { slots, emit }) {
  3334. // 关闭窗口方法
  3335. const onClose = () => {
  3336. emit("close");
  3337. };
  3338. const showHeader = ref(true);
  3339. const headerVisible = ref(false);
  3340. const popupHieght = ref(props.height);
  3341. // 状态:存储位置信息
  3342. const position = reactive({
  3343. // 页面居中
  3344. x: (window.innerWidth - props.width) / 2,
  3345. y: (window.innerHeight - popupHieght.value) / 2,
  3346. isDragging: false,
  3347. offsetX: 0,
  3348. offsetY: 0,
  3349. });
  3350. // 鼠标按下时设置起始坐标并开始拖拽
  3351. const startDrag = (event) => {
  3352. position.isDragging = true;
  3353. position.offsetX = event.clientX - position.x;
  3354. position.offsetY = event.clientY - position.y;
  3355. };
  3356. // 鼠标移动时更新位置
  3357. const onDrag = (event) => {
  3358. if (position.isDragging) {
  3359. position.x = event.clientX - position.offsetX;
  3360. position.y = event.clientY - position.offsetY;
  3361. }
  3362. };
  3363. // 鼠标放开时结束拖拽
  3364. const endDrag = () => {
  3365. position.isDragging = false;
  3366. };
  3367. // 监听来自 iframe 的消息
  3368. const handleMessage = (event) => {
  3369. // 顶天立地
  3370. if (event.data && typeof event.data.hasScrollBar !== "undefined") {
  3371. if (event.data.hasScrollBar) {
  3372. // console.log(event);
  3373. position.y = 10;
  3374. showHeader.value = false;
  3375. headerVisible.value = true;
  3376. popupHieght.value = window.innerHeight - 20;
  3377. // console.log(popupHieght.value);
  3378. document.querySelector(".body").style.height = "100%";
  3379. document.querySelector(".body").style.paddingTop = "30px";
  3380. document.querySelector(".header-container ").style.position =
  3381. "absolute";
  3382. document.querySelector(".header-container ").style.zIndex = "10";
  3383. }
  3384. }
  3385. };
  3386. // 鼠标移入关闭按钮区域时显示头部
  3387. const onMouseEnterCloseButton = () => {
  3388. headerVisible.value = false;
  3389. };
  3390. // 鼠标移出关闭按钮区域时隐藏头部
  3391. const onMouseLeaveCloseButton = () => {
  3392. headerVisible.value = true;
  3393. };
  3394. // 在组件挂载时添加全局事件监听器
  3395. Vue.onMounted(() => {
  3396. // 如果传过来的高度大于窗口高度,则设置为窗口高度减去20 否则保持传过来的高度
  3397. popupHieght.value =
  3398. popupHieght.value > window.innerHeight
  3399. ? window.innerHeight - 20
  3400. : popupHieght.value;
  3401. const container = document.querySelector(".header-container");
  3402. if (container) {
  3403. container.addEventListener("mousedown", startDrag);
  3404. }
  3405. document.addEventListener("mousemove", onDrag);
  3406. document.addEventListener("mouseup", endDrag);
  3407. window.addEventListener("message", handleMessage);
  3408. });
  3409. // 在组件卸载时移除全局事件监听器
  3410. Vue.onUnmounted(() => {
  3411. document.removeEventListener("mousemove", onDrag);
  3412. document.removeEventListener("mouseup", endDrag);
  3413. window.removeEventListener("message", handleMessage);
  3414. });
  3415. const SsMark = resolveComponent("ss-mark");
  3416. const SsFullStyleHeader = resolveComponent("ss-full-style-header");
  3417. // render函数定义组件结构
  3418. return () =>
  3419. h(
  3420. Teleport,
  3421. { to: "body" }, // 使用 Teleport 将弹窗内容挂载到 body
  3422. h(SsMark, {}, [
  3423. h(
  3424. "div",
  3425. {
  3426. class: "popup-container",
  3427. style: {
  3428. position: "absolute",
  3429. left: `${position.x}px`,
  3430. top: `${position.y}px`,
  3431. width: props.width + "px",
  3432. height: popupHieght.value + "px",
  3433. zIndex: props.zIndex, // 确保弹窗在最上层
  3434. },
  3435. },
  3436. [
  3437. h(SsFullStyleHeader, {
  3438. class: "header",
  3439. title: props.headerTitle,
  3440. onClose: onClose,
  3441. onMousedown: startDrag, // 绑定拖动事件
  3442. onMouseUp: endDrag,
  3443. ...(!showHeader.value && {
  3444. onMouseenter: onMouseEnterCloseButton,
  3445. onMouseleave: onMouseLeaveCloseButton,
  3446. }),
  3447. style: {
  3448. cursor: position.isDragging ? "grabbing" : "grab",
  3449. visibility: headerVisible.value ? "hidden" : "visible",
  3450. },
  3451. }),
  3452. h(
  3453. "div",
  3454. {
  3455. class: "body",
  3456. style: {},
  3457. },
  3458. [
  3459. h("iframe", {
  3460. src: props.src,
  3461. frameborder: 0,
  3462. style: { width: "100%", height: "100%" },
  3463. }),
  3464. ]
  3465. ),
  3466. headerVisible.value &&
  3467. h("div", {
  3468. class: "close-button",
  3469. onMouseenter: onMouseEnterCloseButton,
  3470. onMouseleave: onMouseLeaveCloseButton,
  3471. style: {
  3472. position: "absolute",
  3473. top: "0",
  3474. right: "0",
  3475. // background: 'black',
  3476. width: "60px",
  3477. height: "60px",
  3478. cursor: "pointer",
  3479. },
  3480. }),
  3481. ]
  3482. ),
  3483. ])
  3484. );
  3485. },
  3486. };
  3487. // ss-mark遮罩层
  3488. const SsMark = {
  3489. name: "SsMark",
  3490. setup(props, { slots, emit }) {
  3491. return () =>
  3492. h("div", { class: "dialog-container" }, [
  3493. h("div", { class: "mark-content" }, [
  3494. h("div", { class: "dialog-contianer" }, [
  3495. slots.default ? slots.default() : "",
  3496. ]),
  3497. ]),
  3498. ]);
  3499. },
  3500. };
  3501. // ss-bottom-button 底部按钮
  3502. // 修改支持更多按钮 by xu 20251211
  3503. const SsBottomButton = {
  3504. name: "SsBottomButton",
  3505. props: {
  3506. text: {
  3507. type: String,
  3508. required: false,
  3509. },
  3510. type: {
  3511. type: String,
  3512. default: "button",
  3513. },
  3514. iconClass: {
  3515. type: String,
  3516. },
  3517. class: {
  3518. type: String,
  3519. default: "",
  3520. },
  3521. onclick: {
  3522. type: [Function, String],
  3523. default: null,
  3524. },
  3525. // 修改支持更多按钮 by xu 20251211
  3526. more: {
  3527. type: [Boolean, String],
  3528. default: false,
  3529. },
  3530. },
  3531. setup(props, { emit }) {
  3532. const SsBottomDivIcon = Vue.resolveComponent("ss-bottom-div-icon");
  3533. const showDropdown = Vue.ref(false);
  3534. // 修改支持更多按钮 by xu 20251211
  3535. const moreKey = Vue.computed(() => {
  3536. const val = props.more;
  3537. if (val === false || val === null || typeof val === "undefined") {
  3538. return null;
  3539. }
  3540. if (val === true || val === "" || val === "true") {
  3541. return "moreChg";
  3542. }
  3543. return val;
  3544. });
  3545. // 从配置中读取按钮信息和下拉选项
  3546. const config = Vue.computed(() => {
  3547. if (moreKey.value && window.ss && window.ss.dom && window.ss.dom.btnElemConfig) {
  3548. return window.ss.dom.btnElemConfig[moreKey.value] || {};
  3549. }
  3550. return {};
  3551. });
  3552. const buttonText = Vue.computed(() => {
  3553. return props.text || config.value.desc || '';
  3554. });
  3555. const dropOptions = Vue.computed(() => {
  3556. return config.value.dropOptions || [];
  3557. });
  3558. const hasDropdown = Vue.computed(() => {
  3559. return dropOptions.value.length > 0;
  3560. });
  3561. const handleMouseEnter = () => {
  3562. if (hasDropdown.value) {
  3563. showDropdown.value = true;
  3564. }
  3565. };
  3566. const handleMouseLeave = () => {
  3567. showDropdown.value = false;
  3568. };
  3569. const handleDropItemClick = (option) => {
  3570. if (option.callback && typeof option.callback === 'function') {
  3571. option.callback();
  3572. }
  3573. showDropdown.value = false;
  3574. };
  3575. return () =>
  3576. h(
  3577. "div",
  3578. {
  3579. class: "ss-bottom-button-wrapper",
  3580. onMouseenter: handleMouseEnter,
  3581. onMouseleave: handleMouseLeave,
  3582. },
  3583. [
  3584. h(
  3585. "button",
  3586. {
  3587. class: props.class,
  3588. onClick: (e) => {
  3589. e.stopPropagation();
  3590. if (props.onclick) {
  3591. // 如果是函数直接调用
  3592. if (typeof props.onclick === "function") {
  3593. props.onclick(e);
  3594. } else if (typeof props.onclick === "string") {
  3595. // 如果是字符串,使用直接的方法执行
  3596. // 临时存储按钮元素到全局变量
  3597. window.__ss_current_button = e.currentTarget;
  3598. // 直接执行代码,使用eval以保留原始上下文
  3599. try {
  3600. eval(props.onclick);
  3601. } finally {
  3602. // 清理全局变量
  3603. delete window.__ss_current_button;
  3604. }
  3605. }
  3606. }
  3607. },
  3608. type: props.type,
  3609. },
  3610. [
  3611. h("span", null, [
  3612. h(SsBottomDivIcon, {
  3613. class: props.iconClass,
  3614. }),
  3615. ]),
  3616. h("span", null, buttonText.value),
  3617. ]
  3618. ),
  3619. // 渲染下拉菜单
  3620. hasDropdown.value && showDropdown.value
  3621. ? h(
  3622. "div",
  3623. {
  3624. class: "ss-bottom-button-dropdown",
  3625. },
  3626. dropOptions.value.map((option) =>
  3627. h(
  3628. "div",
  3629. {
  3630. class: "ss-bottom-button-dropdown-item",
  3631. onClick: (e) => {
  3632. e.stopPropagation();
  3633. handleDropItemClick(option);
  3634. },
  3635. },
  3636. option.desc
  3637. )
  3638. )
  3639. )
  3640. : null,
  3641. ]
  3642. );
  3643. },
  3644. };
  3645. // ss-search搜索框
  3646. const SsSearch = {
  3647. name: "SsSearch",
  3648. props: {
  3649. theme: {
  3650. type: String,
  3651. default: "light",
  3652. validator: function (value) {
  3653. return ["dark", "light"].includes(value);
  3654. },
  3655. },
  3656. placeholder: {
  3657. type: String,
  3658. default: "请输入搜索条件",
  3659. },
  3660. },
  3661. setup(props, { emit }) {
  3662. const onClick = () => {
  3663. console.log("Search clicked");
  3664. emit("click");
  3665. };
  3666. const SsIcon = Vue.resolveComponent("ss-icon");
  3667. return () =>
  3668. Vue.h(
  3669. "div",
  3670. {
  3671. class: ["search-container", props.theme],
  3672. onClick: onClick,
  3673. },
  3674. [
  3675. Vue.h("input", {
  3676. placeholder: props.placeholder,
  3677. disabled: true,
  3678. }),
  3679. Vue.h(SsIcon, {
  3680. name: "search-result",
  3681. size: "20px",
  3682. }),
  3683. ]
  3684. );
  3685. },
  3686. };
  3687. // ss-cart-item 菜单页面的卡片 左右结构
  3688. const SsCartItem = {
  3689. name: "SsCartItem",
  3690. props: {
  3691. active: Boolean,
  3692. item: {
  3693. type: Object,
  3694. default: () => ({
  3695. thumb: "images/example/project-img.png",
  3696. title: "广州(国际)科技成果转化天河基地专",
  3697. description: "佳能中国广州分公司",
  3698. all: 50,
  3699. finish: 5,
  3700. }),
  3701. },
  3702. },
  3703. setup(props, { emit }) {
  3704. const item = props.item;
  3705. const itemWidth = Vue.computed(() => {
  3706. const containerWidth =
  3707. document.body.clientWidth || document.body.scrollWidth - 520;
  3708. const halfWidth = containerWidth / 2;
  3709. if (halfWidth < 480) {
  3710. return Math.min(containerWidth, 702) + "px";
  3711. } else {
  3712. return Math.min(halfWidth, 702) + "px";
  3713. }
  3714. });
  3715. const onItemClick = (e) => {
  3716. emit("click", e);
  3717. };
  3718. return {
  3719. item,
  3720. itemWidth,
  3721. onItemClick,
  3722. };
  3723. },
  3724. render() {
  3725. const SsIcon = Vue.resolveComponent("ss-icon");
  3726. return Vue.h(
  3727. "div",
  3728. {
  3729. class: { "item-container": true, active: this.active },
  3730. onClick: this.onItemClick,
  3731. style: { width: this.itemWidth },
  3732. },
  3733. [
  3734. Vue.h("div", { class: "header" }, [
  3735. Vue.h(SsIcon, { name: "setting", size: "20px" }),
  3736. ]),
  3737. Vue.h("div", { class: "body" }, [
  3738. Vue.h("div", { class: "left" }, [
  3739. Vue.h("img", {
  3740. src: this.item.thumb,
  3741. alt: "Thumbnail",
  3742. class: "imgUnHandle",
  3743. style: { "object-fit": "cover", width: "100%", height: "100%" },
  3744. }),
  3745. ]),
  3746. Vue.h("div", { class: "right" }, [
  3747. Vue.h("div", { class: "title" }, this.item.title),
  3748. Vue.h("div", { class: "desc" }, this.item.description),
  3749. Vue.h("div", { class: "progress" }, [
  3750. Vue.h(
  3751. "div",
  3752. {
  3753. style: {
  3754. width: `${(this.item.finish / this.item.all) * 100}%`,
  3755. },
  3756. },
  3757. [Vue.h("div", `${this.item.finish}/${this.item.all}`)]
  3758. ),
  3759. ]),
  3760. ]),
  3761. ]),
  3762. ]
  3763. );
  3764. },
  3765. };
  3766. // ss-cart-item2 菜单页面的卡片 上下结构
  3767. const SsCartItem2 = {
  3768. name: "SsCartItem2",
  3769. props: {
  3770. active: Boolean,
  3771. item: {
  3772. type: Object,
  3773. default: () => ({
  3774. thumb: "images/example/project-img.png",
  3775. title: "广州(国际)科技成果转化天河基地专",
  3776. description: "佳能中国广州分公司",
  3777. all: 50,
  3778. finish: 5,
  3779. }),
  3780. },
  3781. },
  3782. setup(props, { emit }) {
  3783. const item = props.item;
  3784. const itemWidth = Vue.computed(() => {
  3785. const containerWidth =
  3786. document.body.clientWidth || document.body.scrollWidth - 520;
  3787. const halfWidth = containerWidth / 2;
  3788. if (halfWidth < 480) {
  3789. return Math.min(containerWidth, 702) + "px";
  3790. } else {
  3791. return Math.min(halfWidth, 702) + "px";
  3792. }
  3793. });
  3794. const onItemClick = (e) => {
  3795. emit("click", e);
  3796. };
  3797. return {
  3798. item,
  3799. itemWidth,
  3800. onItemClick,
  3801. };
  3802. },
  3803. render() {
  3804. const SsIcon = Vue.resolveComponent("ss-icon");
  3805. return Vue.h(
  3806. "div",
  3807. {
  3808. class: { "item-container2": true, active: this.active },
  3809. onClick: this.onItemClick,
  3810. style: { width: this.itemWidth },
  3811. },
  3812. [
  3813. Vue.h("div", { class: "action-bar" }, [
  3814. Vue.h(SsIcon, { name: "setting", size: "20px" }),
  3815. ]),
  3816. Vue.h("div", { class: "header" }, [
  3817. Vue.h("div", { class: "title" }, `${this.item.title}`),
  3818. ]),
  3819. Vue.h("div", { class: "body" }, [
  3820. Vue.h("div", { class: "left" }, [
  3821. Vue.h("img", {
  3822. src: this.item.thumb,
  3823. alt: "Thumbnail",
  3824. class: "imgUnHandle",
  3825. style: { "object-fit": "cover", width: "100%", height: "100%" },
  3826. }),
  3827. ]),
  3828. Vue.h("div", { class: "right" }, [
  3829. Vue.h("div", { class: "content" }, this.item.description),
  3830. Vue.h("div", { class: "tip" }, [
  3831. Vue.h("div", { class: "progress" }, [
  3832. Vue.h(
  3833. "div",
  3834. {
  3835. style: {
  3836. width: `${(this.item.finish / this.item.all) * 100}%`,
  3837. },
  3838. },
  3839. [Vue.h("div", `${this.item.finish}/${this.item.all}`)]
  3840. ),
  3841. ]),
  3842. ]),
  3843. ]),
  3844. ]),
  3845. ]
  3846. );
  3847. },
  3848. };
  3849. /**
  3850. * SsListCard - 列表卡片组件
  3851. *
  3852. * @description 用于显示列表项的卡片组件,支持缩略图、标签、状态、操作按钮和选择功能
  3853. *
  3854. * @prop {Object} item - 卡片数据对象
  3855. * @prop {String} item.title - 卡片标题
  3856. * @prop {String} [item.thumb] - 缩略图 URL(可选)
  3857. * @prop {String} [item.thumbType] - 缩略图类型:'thumbnail'(缩略图)或默认(证件照)
  3858. * @prop {String} [item.status] - 卡片状态:'available'(可用-绿色)、'unavailable'(不可用-黄色)、'disabled'(禁用-红色)
  3859. * @prop {Array} item.tags - 标签数组,格式:[{键: 值}, ...]
  3860. * @prop {Function} item.onclick - 点击卡片的回调函数
  3861. * @prop {Array} [item.buttons] - 操作按钮数组(可选),显示在右上角齿轮
  3862. * @prop {Array} [item.statusIcons] - 状态图标数组(可选),显示在右上角,格式:[{class: '图标类名', title: '提示文字'}, ...]
  3863. *
  3864. * @example
  3865. * // 基础用法
  3866. * const item = {
  3867. * title: "卡片标题",
  3868. * tags: [
  3869. * { 类型: '文档' },
  3870. * { 状态: '进行中' }
  3871. * ],
  3872. * onclick: () => console.log('点击了卡片')
  3873. * };
  3874. *
  3875. * @example
  3876. * // 带缩略图和状态
  3877. * const item = {
  3878. * title: "场地预定",
  3879. * thumbType: 'thumbnail',
  3880. * thumb: "https://example.com/image.jpg",
  3881. * status: "available", // 绿色背景
  3882. * tags: [{ 容量: '50人' }],
  3883. * onclick: () => {}
  3884. * };
  3885. *
  3886. * @example
  3887. * // 带操作按钮和状态图标
  3888. * const item = {
  3889. * title: "会议室A",
  3890. * tags: [{ 楼层: '3F' }],
  3891. * onclick: () => {},
  3892. * // 右上角操作按钮(齿轮)
  3893. * buttons: [{
  3894. * class: 'cart-list-setting',
  3895. * title: '编辑',
  3896. * onclick: () => console.log('编辑')
  3897. * }],
  3898. * // 右上角状态图标(在齿轮右边)
  3899. * statusIcons: [{
  3900. * class: 'icon-emoji',
  3901. * title: '清洁中'
  3902. * }]
  3903. * };
  3904. *
  3905. * @features
  3906. * - 卡片选择:鼠标悬停右下角显示选择角标,点击切换选中状态,选中后显示底部深灰色线条
  3907. * - 状态颜色:根据 status 字段显示不同背景色(可用/不可用/禁用)
  3908. * - 图片类型:支持证件照(73×100px)和缩略图(180×100px)两种尺寸
  3909. * - 操作按钮:右上角齿轮,hover 显示,支持多个按钮下拉菜单
  3910. * - 状态图标:右上角显示状态图标,齿轮会根据图标数量自动左移
  3911. *
  3912. * @author xu
  3913. * @date 20260105
  3914. */
  3915. // 组件文档补全(JSDoc) by xu 20260108
  3916. /**
  3917. * SsListCard(左侧对象卡片)
  3918. *
  3919. * 用途:
  3920. * - 渲染左侧卡片(标题 + tags)
  3921. * - 右下角“角标”用于选中/取消选中(不会触发卡片 click)
  3922. *
  3923. * 调用示例:
  3924. * ```html
  3925. * <ss-list-card :item="item" @toggle-select="handleToggleSelect" @click="openDetail"></ss-list-card>
  3926. * ```
  3927. *
  3928. * Props:
  3929. * - `item`:卡片数据对象(建议含 `id/title/tags[]`;内部会读写 `item._ssSelected` 作为选中态)
  3930. *
  3931. * Emits:
  3932. * - `toggle-select`:点击角标触发,参数 `{ item, selected }`
  3933. * - `click`:点击卡片主体触发(用于打开详情等)
  3934. */
  3935. const SsListCard = {
  3936. name: "SsListCard",
  3937. props: {
  3938. ssObjName: { type: String, default: "" }, // 功能:业务对象名(用于默认缩略图 icon) by xu 20260109
  3939. cardClickAction: { type: String, default: "view" }, // 功能:卡片主体点击动作(view=查看;single=单选互斥) by xu 20260109
  3940. item: {
  3941. type: Object,
  3942. required: true,
  3943. },
  3944. },
  3945. emits: ["click", "change", "toggle-select"],
  3946. setup(props, { emit }) {
  3947. const item = props.item;
  3948. // 移除 itemWidth 计算属性,不再需要 by xu 20260105
  3949. // 判断卡片类型 by xu 20260105
  3950. const cardType = Vue.computed(() => {
  3951. // 支持“无图但保留缩略图占位”(同一业务列表图片形态一致) by xu 20260109
  3952. if (!item.thumb && !item.thumbType) return ''; // 业务列表“无图”形态
  3953. // 根据 thumbType 字段判断,如果没有则默认为证件照
  3954. return item.thumbType === 'thumbnail' ? 'card-thumbnail' : 'card-photo';
  3955. });
  3956. // 判断状态类型 - 场地预定状态 by xu 20260105
  3957. const statusClass = Vue.computed(() => {
  3958. if (!item.status) return ''; // 无状态,默认白色
  3959. // 映射状态值到 CSS 类名
  3960. const statusMap = {
  3961. 'available': 'status-available',
  3962. 'unavailable': 'status-unavailable',
  3963. 'disabled': 'status-disabled'
  3964. };
  3965. return statusMap[item.status] || '';
  3966. });
  3967. const onItemClick = (e) => {
  3968. // 清除所有类型卡片的 active 状态(卡片主体点击仅做 active 高亮) by xu 20260109
  3969. const allListCards = document.querySelectorAll(
  3970. ".knowledge-item-container"
  3971. );
  3972. const allFolderCards = document.querySelectorAll(".ss-folder-list");
  3973. allListCards.forEach((card) => card.classList.remove("active"));
  3974. allFolderCards.forEach((card) => card.classList.remove("active"));
  3975. // 设置当前项的 active 状态
  3976. e.currentTarget.classList.add("active");
  3977. // 卡片主体点击动作由页面级配置控制 by xu 20260109
  3978. if (props.cardClickAction === "view") {
  3979. props.item.onclick?.();
  3980. // 通知父级:卡片点击(查看) by xu 20260109
  3981. emit("click", props.item);
  3982. }
  3983. };
  3984. const onItemChange = (e, icon, index) => {
  3985. e.stopPropagation(); // 阻止事件冒泡到卡片
  3986. props.item.buttons[0].onclick();
  3987. // emit("change", { item: props.item, icon, index });
  3988. };
  3989. return {
  3990. item,
  3991. cardType,
  3992. statusClass,
  3993. onItemClick,
  3994. onItemChange,
  3995. };
  3996. },
  3997. data() {
  3998. return {
  3999. showButtons: false,
  4000. selected: false, // 选择状态 by xu 20260105
  4001. showTextPopover: false, // 功能:右侧文字区 hover 展示全量 by xu 20260108
  4002. textPopoverType: "", // second-summary / second-tags / third / third-full by xu 20260108
  4003. textPopoverBottom: 0, // 功能:popover 从当前省略行位置向上展开 by xu 20260108
  4004. hideTextPopoverTimer: null, // 功能:鼠标从省略行移到浮层的缓冲 by xu 20260108
  4005. textPopoverPayload: null, // { kind, text?, lines? } by xu 20260108
  4006. ellipsisVisible: { // 功能:只在真实出现 ... 时才显示命中区/允许 goheight by xu 20260109
  4007. secondSummary: false,
  4008. secondTags: false,
  4009. third: false,
  4010. thirdFull: false,
  4011. },
  4012. };
  4013. },
  4014. methods: {
  4015. // 切换选择状态(对外 emit,支持方案A父级 state 中转) by xu 20260106
  4016. toggleSelect(e) {
  4017. e.stopPropagation();
  4018. // 使用 item 上的状态,便于父级/右侧边栏反向同步 by xu 20260106
  4019. this.item._ssSelected = !this.item?._ssSelected;
  4020. this.$emit("toggle-select", { item: this.item, selected: !!this.item?._ssSelected });
  4021. },
  4022. // 卡片主体点击=单选互斥:只有“本次切到选中”才清理其他选中 by xu 20260109
  4023. toggleSelectExclusive(e) {
  4024. e?.stopPropagation?.();
  4025. this.item._ssSelected = !this.item?._ssSelected;
  4026. const selected = !!this.item?._ssSelected;
  4027. this.$emit("toggle-select", { item: this.item, selected, exclusive: true });
  4028. },
  4029. // 功能:无缩略图时,用业务对象 icon 做默认图(ss-icon + icon-obj-xx) by xu 20260109
  4030. getBizThumbIconClass() {
  4031. const name = String(
  4032. this.ssObjName ||
  4033. this.item?.ssObjName ||
  4034. this.$root?.ssObjName ||
  4035. window?.ss?.dom?.ssObjName ||
  4036. ""
  4037. ).trim();
  4038. if (!name) return "";
  4039. return `icon-obj-${name}`;
  4040. },
  4041. // 功能:构造右侧文字区 4 行(摘要/类目或标签/对象号) by xu 20260108
  4042. buildRightTextLines() {
  4043. const item = this.item || {};
  4044. const summary = String(item?.desc ?? "").trim(); // 后端字段后续映射 by xu 20260108
  4045. const objNum = String(item?.objNum ?? "").trim(); // 后端字段后续映射 by xu 20260108
  4046. const categoryArr = Array.isArray(item?.category) ? item.category : [];
  4047. const tagsArr = Array.isArray(item?.tags) ? item.tags : [];
  4048. const hasTags = tagsArr.length > 0;
  4049. const hasCategory = categoryArr.length > 0;
  4050. // 第二部分(L1-L3):摘要优先,其次物品参数 by xu 20260108
  4051. const secondKind = summary ? "summary" : hasTags ? "tags" : "";
  4052. const hasSecond = !!secondKind;
  4053. // 第三部分(L4):对象号优先,其次类目 by xu 20260108
  4054. const thirdKind = objNum ? "objNum" : hasCategory ? "category" : "";
  4055. const hasThird = !!thirdKind;
  4056. const thirdFull = !hasSecond && hasThird; // 第二部分为空则第三部分占满 4 行 by xu 20260108
  4057. const secondFull = hasSecond && !hasThird && secondKind === "tags"; // 仅标签时占满 4 行(不留空行) by xu 20260109
  4058. const toValueText = (obj) => { // 功能说明:类目/物品参数回显展示 key: value(否则只显示值看不懂) by xu 20260114
  4059. const [k, v] = Object.entries(obj || {})[0] || ["", ""];
  4060. const key = k !== undefined && k !== null ? String(k).trim() : "";
  4061. const val = v !== undefined && v !== null ? String(v).trim() : "";
  4062. if (key && val) return `${key}:${val}`;
  4063. if (val) return val;
  4064. if (key) return key;
  4065. return "";
  4066. };
  4067. const toLineList = (arr) =>
  4068. (arr || [])
  4069. .map(toValueText)
  4070. .map((s) => String(s ?? "").trim())
  4071. .filter(Boolean);
  4072. const flat = (arr) => toLineList(arr).join(" ");
  4073. // 第二部分 tags:默认 3 行;仅标签时占满 4 行(避免底部空一行) by xu 20260109
  4074. const secondTagsMaxLines = secondFull ? 4 : 3;
  4075. const secondTagsLinesFull = toLineList(tagsArr);
  4076. const secondTagsHead = secondTagsLinesFull.slice(0, Math.max(0, secondTagsMaxLines - 1));
  4077. const secondTagsTail = secondTagsLinesFull.slice(Math.max(0, secondTagsMaxLines - 1));
  4078. const secondTagsLast =
  4079. secondTagsTail.length <= 1 ? (secondTagsTail[0] || "") : secondTagsTail.join(" "); // 功能:最后一行平铺剩余 by xu 20260108
  4080. // 第三部分类目:卡片上串成一行;goheight 展开时一条一行 by xu 20260109
  4081. const categoryLinesFull = toLineList(categoryArr);
  4082. const categoryLine = categoryLinesFull.join(" ");
  4083. const thirdText = thirdKind === "objNum" ? objNum : thirdKind === "category" ? categoryLine : "";
  4084. return {
  4085. secondKind,
  4086. thirdKind,
  4087. hasSecond,
  4088. hasThird,
  4089. thirdFull,
  4090. secondFull,
  4091. summary,
  4092. secondTagsMaxLines,
  4093. secondTagsHead,
  4094. secondTagsLast,
  4095. secondTagsLinesFull,
  4096. objNum,
  4097. categoryLine,
  4098. categoryLinesFull,
  4099. thirdText,
  4100. };
  4101. },
  4102. measureTextOverflowByLines(text, maxLines, width) {
  4103. const w = Number(width) || 0;
  4104. if (!w || !text) return false;
  4105. const probe = document.createElement("div");
  4106. probe.style.position = "fixed";
  4107. probe.style.left = "-99999px";
  4108. probe.style.top = "0";
  4109. probe.style.width = w + "px";
  4110. probe.style.fontSize = "18px";
  4111. probe.style.lineHeight = "24px";
  4112. probe.style.whiteSpace = "normal";
  4113. probe.style.wordBreak = "break-word";
  4114. probe.style.visibility = "hidden";
  4115. probe.textContent = text;
  4116. document.body.appendChild(probe);
  4117. const h = probe.getBoundingClientRect().height || 0;
  4118. document.body.removeChild(probe);
  4119. return h > maxLines * 24 + 1;
  4120. },
  4121. measureSingleLineOverflow(text, width) {
  4122. const w = Number(width) || 0;
  4123. if (!w || !text) return false;
  4124. const probe = document.createElement("span");
  4125. probe.style.position = "fixed";
  4126. probe.style.left = "-99999px";
  4127. probe.style.top = "0";
  4128. probe.style.display = "inline-block";
  4129. probe.style.maxWidth = w + "px";
  4130. probe.style.fontSize = "18px";
  4131. probe.style.lineHeight = "24px";
  4132. probe.style.whiteSpace = "nowrap";
  4133. probe.style.visibility = "hidden";
  4134. probe.textContent = text;
  4135. document.body.appendChild(probe);
  4136. const overflow = (probe.scrollWidth || 0) > (probe.clientWidth || w) + 1;
  4137. document.body.removeChild(probe);
  4138. return overflow;
  4139. },
  4140. // 功能:根据当前卡片宽度刷新「是否出现 ...」状态(用于控制命中区显示) by xu 20260109
  4141. refreshEllipsisVisible() {
  4142. try {
  4143. const right = this.$el?.querySelector?.(".right");
  4144. const rawWidth = right?.getBoundingClientRect?.().width || right?.clientWidth || 0;
  4145. const width = Math.max(0, Math.round(rawWidth)); // 修复:内容区不再使用 padding-right 预留,测量按真实宽度 by xu 20260109
  4146. const model = this.buildRightTextLines();
  4147. const next = {
  4148. secondSummary: false,
  4149. secondTags: false,
  4150. third: false,
  4151. thirdFull: false,
  4152. };
  4153. if (model.secondKind === "summary" && model.summary) {
  4154. next.secondSummary = this.measureTextOverflowByLines(model.summary, 3, width);
  4155. }
  4156. if (model.secondKind === "tags") {
  4157. // 功能说明:tags 采用「最后一行平铺剩余」策略,是否出现 ... 仅取决于最后一行是否溢出(数量多但平铺放得下不算溢出) by xu 20260114
  4158. next.secondTags = this.measureSingleLineOverflow(model.secondTagsLast, width);
  4159. }
  4160. if (model.hasThird && !model.thirdFull) {
  4161. next.third = this.measureSingleLineOverflow(model.thirdText, width);
  4162. }
  4163. if (model.hasThird && model.thirdFull) {
  4164. next.thirdFull = this.measureTextOverflowByLines(model.thirdText, 4, width);
  4165. }
  4166. const prev = this.ellipsisVisible || {};
  4167. const changed =
  4168. prev.secondSummary !== next.secondSummary ||
  4169. prev.secondTags !== next.secondTags ||
  4170. prev.third !== next.third ||
  4171. prev.thirdFull !== next.thirdFull;
  4172. if (changed) this.ellipsisVisible = next;
  4173. } catch (e) {
  4174. // ignore by xu 20260109
  4175. }
  4176. },
  4177. showTextPopoverFor(el, kind) {
  4178. // 调试开关:window.__SS_LISTCARD_DEBUG__ = true 时打印 hover/溢出判断日志 by xu 20260108
  4179. const debug = typeof window !== "undefined" && !!window.__SS_LISTCARD_DEBUG__;
  4180. if (debug) {
  4181. console.log("[SsListCard] ellipsis hover", {
  4182. kind,
  4183. el: el?.className,
  4184. });
  4185. }
  4186. const model = this.buildRightTextLines();
  4187. const lineEl = el?.closest?.(".ss-card-text__line") || el;
  4188. const right = lineEl?.closest?.(".right") || el?.closest?.(".right");
  4189. const rawWidth = right?.getBoundingClientRect?.().width || right?.clientWidth || 0;
  4190. const width = Math.max(0, Math.round(rawWidth)); // 修复:内容区不再预留 padding-right,测量按真实宽度 by xu 20260109
  4191. const textEl =
  4192. kind === "second-summary"
  4193. ? lineEl?.querySelector?.(".ss-card-text__secondSummary")
  4194. : kind === "second-tags"
  4195. ? lineEl?.querySelector?.(".ss-card-text__tagLineLast")
  4196. : kind === "third"
  4197. ? lineEl?.querySelector?.(".ss-card-text__thirdLine")
  4198. : lineEl?.querySelector?.(".ss-card-text__thirdFull");
  4199. let payload = null;
  4200. // 仅当真实会出现 ... 时才允许 goheight(避免“没超出也能出 goheight”) by xu 20260109
  4201. const overflowed =
  4202. kind === "second-summary"
  4203. ? this.measureTextOverflowByLines(model.summary, 3, width)
  4204. : kind === "second-tags"
  4205. ? this.measureSingleLineOverflow(model.secondTagsLast, width) // 功能说明:同 refreshEllipsisVisible,tags 仅看最后一行是否溢出 by xu 20260114
  4206. : kind === "third"
  4207. ? this.measureSingleLineOverflow(model.thirdText, width)
  4208. : this.measureTextOverflowByLines(model.thirdText, 4, width);
  4209. if (!overflowed) return;
  4210. if (kind === "second-summary") {
  4211. if (model.summary) payload = { kind, text: model.summary };
  4212. } else if (kind === "second-tags") {
  4213. if (Array.isArray(model.secondTagsLinesFull) && model.secondTagsLinesFull.length) {
  4214. payload = { kind, lines: model.secondTagsLinesFull };
  4215. }
  4216. } else if (kind === "third") {
  4217. if (model.thirdKind === "category" && Array.isArray(model.categoryLinesFull) && model.categoryLinesFull.length) {
  4218. payload = { kind, lines: model.categoryLinesFull }; // 功能:类目展开一条一行 by xu 20260109
  4219. } else if (model.thirdText) {
  4220. payload = { kind, text: model.thirdText };
  4221. }
  4222. } else if (kind === "third-full") {
  4223. if (model.thirdKind === "category" && Array.isArray(model.categoryLinesFull) && model.categoryLinesFull.length) {
  4224. payload = { kind, lines: model.categoryLinesFull }; // 功能:类目占满模式展开一条一行 by xu 20260109
  4225. } else if (model.thirdText) {
  4226. payload = { kind, text: model.thirdText };
  4227. }
  4228. }
  4229. if (debug) {
  4230. console.log("[SsListCard] ellipsis decide", {
  4231. kind,
  4232. rawWidth: Math.round(rawWidth),
  4233. width,
  4234. hasPayload: !!payload,
  4235. textEl: textEl?.className,
  4236. textClient: textEl ? { cw: textEl.clientWidth, ch: textEl.clientHeight, sw: textEl.scrollWidth, sh: textEl.scrollHeight } : null,
  4237. });
  4238. }
  4239. if (!payload) return;
  4240. this.clearHideTextPopoverTimer();
  4241. const container = lineEl?.closest?.(".right");
  4242. const containerRect = container?.getBoundingClientRect?.();
  4243. const lineRect = lineEl?.getBoundingClientRect?.();
  4244. if (containerRect && lineRect) {
  4245. const bottom = Math.max(0, Math.round(containerRect.bottom - lineRect.bottom));
  4246. this.textPopoverBottom = bottom;
  4247. } else {
  4248. this.textPopoverBottom = 0;
  4249. }
  4250. this.textPopoverPayload = payload;
  4251. this.textPopoverType = kind;
  4252. this.showTextPopover = true;
  4253. if (debug) console.log("[SsListCard] goheight show", payload);
  4254. },
  4255. isOverflowing(el) {
  4256. if (!el) return false;
  4257. // 单行/多行省略统一判断:scroll 尺寸大于 client 尺寸即认为有 ... by xu 20260108
  4258. return (el.scrollWidth && el.clientWidth && el.scrollWidth > el.clientWidth + 1) ||
  4259. (el.scrollHeight && el.clientHeight && el.scrollHeight > el.clientHeight + 1);
  4260. },
  4261. isSummaryOverflowing(el) {
  4262. if (!el) return false;
  4263. // -webkit-line-clamp 场景下 scrollHeight 不稳定,改用“无 clamp 的离屏测量”判断是否超过 2 行 by xu 20260108
  4264. const text = String(this.item?.desc ?? "").trim();
  4265. if (!text) return false;
  4266. const rect = el.getBoundingClientRect?.();
  4267. const width = rect?.width || el.clientWidth || 0;
  4268. if (!width) return false;
  4269. const probe = document.createElement("div");
  4270. probe.style.position = "fixed";
  4271. probe.style.left = "-99999px";
  4272. probe.style.top = "0";
  4273. probe.style.width = width + "px";
  4274. probe.style.fontSize = "18px";
  4275. probe.style.lineHeight = "24px";
  4276. probe.style.whiteSpace = "normal";
  4277. probe.style.wordBreak = "break-word";
  4278. probe.style.visibility = "hidden";
  4279. probe.textContent = text;
  4280. document.body.appendChild(probe);
  4281. const h = probe.getBoundingClientRect().height || 0;
  4282. document.body.removeChild(probe);
  4283. return h > 48 + 1;
  4284. },
  4285. clearHideTextPopoverTimer() {
  4286. if (this.hideTextPopoverTimer) {
  4287. clearTimeout(this.hideTextPopoverTimer);
  4288. this.hideTextPopoverTimer = null;
  4289. }
  4290. },
  4291. // 修复 goheight hover 无响应:移除重复方法覆盖,统一使用上面的 showTextPopoverFor(el, kind) by xu 20260109
  4292. hideTextPopoverLater() {
  4293. this.clearHideTextPopoverTimer();
  4294. this.hideTextPopoverTimer = setTimeout(() => {
  4295. this.showTextPopover = false;
  4296. this.textPopoverType = "";
  4297. this.textPopoverPayload = null;
  4298. }, 120);
  4299. },
  4300. hideTextPopover() {
  4301. this.clearHideTextPopoverTimer();
  4302. this.showTextPopover = false;
  4303. this.textPopoverType = "";
  4304. this.textPopoverPayload = null;
  4305. },
  4306. // 功能:新需求下不在 updated 内做测量,避免死循环 by xu 20260108
  4307. },
  4308. mounted() {
  4309. // 无需在 mounted/updated 里做 overflow 测量(避免死循环),只在 hover 触发时判断 by xu 20260108
  4310. // 仅用于控制“...命中区是否显示”,不会触发循环更新 by xu 20260109
  4311. this.$nextTick?.(() => {
  4312. requestAnimationFrame(() => this.refreshEllipsisVisible?.());
  4313. });
  4314. this.__ssListCardResizeHandler = () => this.refreshEllipsisVisible?.(); // 功能:窗口变化时刷新 ... 显示 by xu 20260109
  4315. window.addEventListener?.("resize", this.__ssListCardResizeHandler);
  4316. },
  4317. updated() {
  4318. // 卡片数据更新后刷新一次 ... 显示状态(避免“宽度/内容变了但命中区不变”) by xu 20260109
  4319. this.$nextTick?.(() => {
  4320. requestAnimationFrame(() => this.refreshEllipsisVisible?.());
  4321. });
  4322. },
  4323. beforeUnmount() {
  4324. // 清理 timer,避免残留导致异常 by xu 20260108
  4325. this.clearHideTextPopoverTimer?.();
  4326. if (this.__ssListCardResizeHandler) {
  4327. window.removeEventListener?.("resize", this.__ssListCardResizeHandler);
  4328. this.__ssListCardResizeHandler = null;
  4329. }
  4330. },
  4331. render() {
  4332. const SsCartListIcon = Vue.resolveComponent("ss-cart-list-icon");
  4333. const SsIcon = Vue.resolveComponent("ss-icon");
  4334. const hasThumbArea = !!(this.item?.thumb || this.item?.thumbType); // 功能:无图但有 thumbType 时仍保留占位 by xu 20260109
  4335. return Vue.h(
  4336. "div",
  4337. {
  4338. class: {
  4339. "knowledge-item-container": true,
  4340. active: this.item.active,
  4341. [this.cardType]: !!this.cardType, // 动态添加卡片类型类名 by xu 20260105
  4342. [this.statusClass]: !!this.statusClass
  4343. },
  4344. onClick: (e) => {
  4345. this.onItemClick?.(e);
  4346. if (this.cardClickAction === "single") {
  4347. this.toggleSelectExclusive?.(e);
  4348. }
  4349. }, // 功能:卡片主体点击动作(view/single) by xu 20260109
  4350. // 移除固定宽度,由 CSS min-width 控制 by xu 20260105
  4351. },
  4352. [
  4353. // 右上角状态图标区域 by xu 20260105
  4354. this.item?.statusIcons?.length > 0 &&
  4355. Vue.h(
  4356. "div",
  4357. { class: "card-status-icons" },
  4358. this.item.statusIcons.map((icon) =>
  4359. Vue.h(SsIcon, {
  4360. class: `status-icon ${icon.class}`,
  4361. title: icon.title,
  4362. })
  4363. )
  4364. ),
  4365. this.item?.buttons?.length > 0 &&
  4366. Vue.h(
  4367. "div",
  4368. {
  4369. class: "header",
  4370. style: this.item?.statusIcons?.length > 0
  4371. ? {
  4372. right: `${this.item.statusIcons.length * 48}px`,
  4373. borderTopRightRadius: '0'
  4374. }
  4375. : {},
  4376. onMouseenter: () => (this.showButtons = true),
  4377. onMouseleave: () => (this.showButtons = false),
  4378. onClick: (e) => this.onItemChange(e, this.item.buttons[0], 0),
  4379. },
  4380. [
  4381. // 只在有按钮时渲染设置图标
  4382. // this.item?.buttons?.length > 0 &&
  4383. Vue.h("div", {
  4384. class: "cart-list-setting cart-list-icon",
  4385. title: this.item?.buttons?.[0]?.title,
  4386. }),
  4387. // 鼠标移入时显示按钮列表,与图标同级
  4388. // this.item?.buttons?.length > 0 &&
  4389. this.showButtons &&
  4390. this.item?.buttons?.length > 1 &&
  4391. Vue.h(
  4392. "div",
  4393. {
  4394. class: "cart-list-button-popup",
  4395. },
  4396. this.item.buttons.map((btn) =>
  4397. Vue.h(
  4398. "div",
  4399. {
  4400. onClick: (e) => {
  4401. e.stopPropagation();
  4402. btn.onclick?.();
  4403. },
  4404. },
  4405. [
  4406. // 如果有 class,显示对应的图标
  4407. btn.class &&
  4408. Vue.h(SsCartListIcon, {
  4409. class: [btn.class],
  4410. }),
  4411. // 显示按钮文本
  4412. Vue.h("span", null, btn.title),
  4413. ]
  4414. )
  4415. )
  4416. ),
  4417. ]
  4418. ),
  4419. Vue.h("div", { class: "body" }, [
  4420. Vue.h("div", { class: "box-header" }, [
  4421. Vue.h("div", `${this.item.title}`),
  4422. ]),
  4423. Vue.h(
  4424. "div",
  4425. {
  4426. class: !hasThumbArea ? "no-thumb box-body" : "box-body",
  4427. },
  4428. [
  4429. hasThumbArea
  4430. ? this.item.thumb
  4431. ? Vue.h("div", { class: "left" }, [
  4432. Vue.h("img", {
  4433. src: this.item.thumb,
  4434. alt: "Thumbnail",
  4435. class: "imgUnHandle",
  4436. style: {
  4437. "object-fit": "cover",
  4438. width: "100%",
  4439. height: "100%",
  4440. },
  4441. }),
  4442. ])
  4443. : Vue.h( // 功能:无图占位(ss-icon + biz icon,居中) by xu 20260109
  4444. "div",
  4445. { class: "left ss-objlist-thumbPlaceholder" },
  4446. [
  4447. Vue.h(SsIcon, {
  4448. class: `${this.getBizThumbIconClass()} ss-objlist-thumbIcon`,
  4449. }),
  4450. ]
  4451. )
  4452. : null,
  4453. Vue.h(
  4454. "div",
  4455. {
  4456. class: "right",
  4457. },
  4458. (() => {
  4459. const model = this.buildRightTextLines(); // 功能:右侧文字区新规则(第二部分/第三部分优先级) by xu 20260108
  4460. const hasAny = !!(model?.hasSecond || model?.hasThird);
  4461. if (!hasAny) return [];
  4462. const children = [];
  4463. // 第二部分:L1-L3(摘要优先,其次 tags;不足留空;超出 L3 ...) by xu 20260108
  4464. if (model.hasSecond) {
  4465. if (model.secondKind === "summary") {
  4466. children.push(
  4467. Vue.h("div", { class: "ss-card-text__line ss-card-text__secondBlock" }, [
  4468. Vue.h("div", { class: "ss-card-text__secondSummary", title: model.summary }, model.summary),
  4469. Vue.h("span", {
  4470. class: ["ss-card-text__ellipsisHit", "ss-card-text__ellipsisHit--second", this.ellipsisVisible?.secondSummary ? "is-on" : ""],
  4471. title: "查看完整摘要",
  4472. onMouseenter: (e) => this.showTextPopoverFor(e?.currentTarget, "second-summary"),
  4473. onClick: (e) => { e?.stopPropagation?.(); this.showTextPopoverFor(e?.currentTarget, "second-summary"); }, // 功能:点击 ... 也可展开(避免 hover 受遮挡) by xu 20260109
  4474. onMouseleave: () => this.hideTextPopoverLater(),
  4475. }),
  4476. ])
  4477. );
  4478. } else if (model.secondKind === "tags") {
  4479. children.push(
  4480. Vue.h("div", { class: ["ss-card-text__line", model.secondFull ? "ss-card-text__secondFullBlock" : "ss-card-text__secondBlock"] }, [ // 功能:仅标签时占满 4 行 by xu 20260109
  4481. Vue.h(
  4482. "div",
  4483. { class: "ss-card-text__secondTags" },
  4484. [
  4485. ...model.secondTagsHead.map((t) =>
  4486. Vue.h("div", { class: "ss-card-text__tagLine", title: t }, t)
  4487. ),
  4488. // 第三行:平铺剩余(可能为空) by xu 20260108
  4489. Vue.h("div", { class: "ss-card-text__tagLine is-last ss-card-text__tagLineLast", title: model.secondTagsLast }, model.secondTagsLast),
  4490. ].filter(Boolean)
  4491. ),
  4492. // 只在最后一行出现 ... 时才触发 goheight by xu 20260108
  4493. Vue.h("span", {
  4494. class: ["ss-card-text__ellipsisHit", "ss-card-text__ellipsisHit--second", this.ellipsisVisible?.secondTags ? "is-on" : ""],
  4495. title: "查看完整物品参数",
  4496. onMouseenter: (e) => this.showTextPopoverFor(e?.currentTarget, "second-tags"),
  4497. onClick: (e) => { e?.stopPropagation?.(); this.showTextPopoverFor(e?.currentTarget, "second-tags"); }, // 功能:点击 ... 也可展开(避免 hover 受遮挡) by xu 20260109
  4498. onMouseleave: () => this.hideTextPopoverLater(),
  4499. }),
  4500. ])
  4501. );
  4502. }
  4503. }
  4504. // 第三部分:默认 L4;第二部分为空则占满 L1-L4 by xu 20260108
  4505. if (model.hasThird) {
  4506. if (model.thirdFull) {
  4507. children.push(
  4508. Vue.h("div", { class: "ss-card-text__line ss-card-text__thirdFullBlock" }, [
  4509. Vue.h("div", { class: "ss-card-text__thirdFull", title: model.thirdText }, model.thirdText),
  4510. Vue.h("span", {
  4511. class: ["ss-card-text__ellipsisHit", "ss-card-text__ellipsisHit--third", this.ellipsisVisible?.thirdFull ? "is-on" : ""],
  4512. title: "查看完整信息",
  4513. onMouseenter: (e) => this.showTextPopoverFor(e?.currentTarget, "third-full"),
  4514. onClick: (e) => { e?.stopPropagation?.(); this.showTextPopoverFor(e?.currentTarget, "third-full"); }, // 功能:点击 ... 也可展开(避免 hover 受遮挡) by xu 20260109
  4515. onMouseleave: () => this.hideTextPopoverLater(),
  4516. }),
  4517. ])
  4518. );
  4519. } else {
  4520. children.push(
  4521. Vue.h("div", { class: "ss-card-text__line ss-card-text__thirdLineWrap" }, [
  4522. Vue.h("div", { class: "ss-card-text__thirdLine", title: model.thirdText }, model.thirdText),
  4523. Vue.h("span", {
  4524. class: ["ss-card-text__ellipsisHit", "ss-card-text__ellipsisHit--third", this.ellipsisVisible?.third ? "is-on" : ""],
  4525. title: "查看完整信息",
  4526. onMouseenter: (e) => this.showTextPopoverFor(e?.currentTarget, "third"),
  4527. onClick: (e) => { e?.stopPropagation?.(); this.showTextPopoverFor(e?.currentTarget, "third"); }, // 功能:点击 ... 也可展开(避免 hover 受遮挡) by xu 20260109
  4528. onMouseleave: () => this.hideTextPopoverLater(),
  4529. }),
  4530. ])
  4531. );
  4532. }
  4533. }
  4534. // hover 展开浮层:宽度=右侧文字区,底对齐向上展开,带阴影 by xu 20260108
  4535. // popover 作为 `.right` 的 sibling 渲染,避免被 `.ss-card-text{overflow:hidden}` 裁剪 by xu 20260108
  4536. const popover =
  4537. this.showTextPopover &&
  4538. Vue.h(
  4539. "div",
  4540. {
  4541. class: "ss-card-text-popover",
  4542. style: { bottom: this.textPopoverBottom + "px" },
  4543. onMouseenter: () => {
  4544. this.clearHideTextPopoverTimer();
  4545. this.showTextPopover = true;
  4546. },
  4547. onMouseleave: () => this.hideTextPopoverLater(),
  4548. },
  4549. (() => {
  4550. const p = this.textPopoverPayload || {};
  4551. if (p.kind === "second-summary" && p.text) {
  4552. return [Vue.h("div", { class: "ss-card-text-popover__summary" }, p.text)];
  4553. }
  4554. if (Array.isArray(p.lines)) {
  4555. return [
  4556. Vue.h(
  4557. "div",
  4558. { class: "ss-card-text-popover__kvlist" },
  4559. p.lines.map((t) => Vue.h("div", { class: "ss-card-text-popover__kv" }, t))
  4560. ),
  4561. ];
  4562. }
  4563. if ((p.kind === "third" || p.kind === "third-full") && p.text) {
  4564. return [Vue.h("div", { class: "ss-card-text-popover__objno" }, p.text)];
  4565. }
  4566. return [];
  4567. })()
  4568. );
  4569. return [
  4570. Vue.h("div", { class: "ss-card-text" }, children),
  4571. popover,
  4572. ];
  4573. })()
  4574. ),
  4575. ]
  4576. ),
  4577. ]),
  4578. // 右下角卡片选择图标 by xu 20260105
  4579. Vue.h(SsIcon, {
  4580. class: this.item?._ssSelected ? "card-icon icon-cardChk-on" : "card-icon icon-cardChk",
  4581. onClick: this.toggleSelect,
  4582. }),
  4583. // 选中后底部线条 by xu 20260105
  4584. this.item?._ssSelected && Vue.h("div", { class: "select-bottom-line" }),
  4585. ]
  4586. );
  4587. },
  4588. };
  4589. // 二级对象卡片:复用一级对象新卡片布局/省略浮层,但去掉勾选与 single 选中,仅支持点击查看 by xu 20260115
  4590. const SsCObjCardList = {
  4591. name: "SsCObjCardList",
  4592. props: {
  4593. ssObjName: { type: String, default: "" }, // 功能说明:业务对象名(用于默认缩略图 icon) by xu 20260115
  4594. item: {
  4595. type: Object,
  4596. required: true,
  4597. },
  4598. },
  4599. emits: ["click", "change"],
  4600. setup(props, { emit }) {
  4601. const item = props.item;
  4602. const cardType = Vue.computed(() => {
  4603. if (!item.thumb && !item.thumbType) return "";
  4604. return item.thumbType === "thumbnail" ? "card-thumbnail" : "card-photo";
  4605. });
  4606. const statusClass = Vue.computed(() => {
  4607. if (!item.status) return "";
  4608. const statusMap = {
  4609. available: "status-available",
  4610. unavailable: "status-unavailable",
  4611. disabled: "status-disabled",
  4612. };
  4613. return statusMap[item.status] || "";
  4614. });
  4615. const onItemClick = (e) => {
  4616. // 清除所有类型卡片的 active 状态(保持与一级对象一致) by xu 20260115
  4617. const allListCards = document.querySelectorAll(".knowledge-item-container");
  4618. const allFolderCards = document.querySelectorAll(".ss-folder-list");
  4619. allListCards.forEach((card) => card.classList.remove("active"));
  4620. allFolderCards.forEach((card) => card.classList.remove("active"));
  4621. e.currentTarget.classList.add("active");
  4622. // 二级对象卡片:点击仅查看(调用 item.onclick) by xu 20260115
  4623. props.item.onclick?.();
  4624. emit("click", props.item);
  4625. };
  4626. const onItemChange = (e) => {
  4627. e.stopPropagation();
  4628. props.item.buttons?.[0]?.onclick?.();
  4629. };
  4630. return { item, cardType, statusClass, onItemClick, onItemChange };
  4631. },
  4632. data() {
  4633. return {
  4634. showButtons: false,
  4635. showTextPopover: false, // 功能:右侧文字区 hover 展示全量 by xu 20260115
  4636. textPopoverType: "", // second-summary / second-tags / third / third-full by xu 20260115
  4637. textPopoverBottom: 0, // 功能:popover 从当前省略行位置向上展开 by xu 20260115
  4638. hideTextPopoverTimer: null, // 功能:鼠标从省略行移到浮层的缓冲 by xu 20260115
  4639. textPopoverPayload: null, // { kind, text?, lines? } by xu 20260115
  4640. ellipsisVisible: {
  4641. secondSummary: false,
  4642. secondTags: false,
  4643. third: false,
  4644. thirdFull: false,
  4645. }, // 功能:只在真实出现 ... 时才显示命中区/允许 goheight by xu 20260115
  4646. };
  4647. },
  4648. methods: {
  4649. getBizThumbIconClass() { // 功能:无缩略图时,用业务对象 icon 做默认图(ss-icon + icon-obj-xx) by xu 20260115
  4650. const name = String(
  4651. this.ssObjName ||
  4652. this.item?.ssObjName ||
  4653. this.$root?.ssObjName ||
  4654. window?.ss?.dom?.ssObjName ||
  4655. ""
  4656. ).trim();
  4657. if (!name) return "";
  4658. return "icon-obj-" + name;
  4659. },
  4660. buildRightTextLines() { // 功能:沿用一级对象卡片右侧文字区规则 by xu 20260115
  4661. const item = this.item || {};
  4662. const summary = String(item?.desc ?? "").trim();
  4663. const objNum = String(item?.objNum ?? "").trim();
  4664. const categoryArr = Array.isArray(item?.category) ? item.category : [];
  4665. const tagsArr = Array.isArray(item?.tags) ? item.tags : [];
  4666. const hasTags = tagsArr.length > 0;
  4667. const hasCategory = categoryArr.length > 0;
  4668. const secondKind = summary ? "summary" : hasTags ? "tags" : "";
  4669. const hasSecond = !!secondKind;
  4670. const thirdKind = objNum ? "objNum" : hasCategory ? "category" : "";
  4671. const hasThird = !!thirdKind;
  4672. const thirdFull = !hasSecond && hasThird;
  4673. const secondFull = hasSecond && !hasThird && secondKind === "tags";
  4674. const toValueText = (obj) => { // 功能说明:类目/物品参数回显展示 key: value(否则只显示值看不懂) by xu 20260115
  4675. const [k, v] = Object.entries(obj || {})[0] || ["", ""];
  4676. const key = k !== undefined && k !== null ? String(k).trim() : "";
  4677. const val = v !== undefined && v !== null ? String(v).trim() : "";
  4678. if (key && val) return key + ":" + val;
  4679. if (val) return val;
  4680. if (key) return key;
  4681. return "";
  4682. };
  4683. const toLineList = (arr) =>
  4684. (arr || [])
  4685. .map(toValueText)
  4686. .map((s) => String(s ?? "").trim())
  4687. .filter(Boolean);
  4688. const secondTagsMaxLines = secondFull ? 4 : 3;
  4689. const secondTagsLinesFull = toLineList(tagsArr);
  4690. const secondTagsHead = secondTagsLinesFull.slice(0, Math.max(0, secondTagsMaxLines - 1));
  4691. const secondTagsTail = secondTagsLinesFull.slice(Math.max(0, secondTagsMaxLines - 1));
  4692. const secondTagsLast =
  4693. secondTagsTail.length <= 1 ? (secondTagsTail[0] || "") : secondTagsTail.join(" ");
  4694. const categoryLinesFull = toLineList(categoryArr);
  4695. const categoryLine = categoryLinesFull.join(" ");
  4696. const thirdText = thirdKind === "objNum" ? objNum : thirdKind === "category" ? categoryLine : "";
  4697. return {
  4698. secondKind,
  4699. thirdKind,
  4700. hasSecond,
  4701. hasThird,
  4702. thirdFull,
  4703. secondFull,
  4704. summary,
  4705. secondTagsMaxLines,
  4706. secondTagsHead,
  4707. secondTagsLast,
  4708. secondTagsLinesFull,
  4709. objNum,
  4710. categoryLine,
  4711. categoryLinesFull,
  4712. thirdText,
  4713. };
  4714. },
  4715. measureTextOverflowByLines(text, maxLines, width) {
  4716. const w = Number(width) || 0;
  4717. if (!w || !text) return false;
  4718. const probe = document.createElement("div");
  4719. probe.style.position = "fixed";
  4720. probe.style.left = "-99999px";
  4721. probe.style.top = "0";
  4722. probe.style.width = w + "px";
  4723. probe.style.fontSize = "18px";
  4724. probe.style.lineHeight = "24px";
  4725. probe.style.whiteSpace = "normal";
  4726. probe.style.wordBreak = "break-word";
  4727. probe.style.visibility = "hidden";
  4728. probe.textContent = text;
  4729. document.body.appendChild(probe);
  4730. const h = probe.getBoundingClientRect().height || 0;
  4731. document.body.removeChild(probe);
  4732. return h > maxLines * 24 + 1;
  4733. },
  4734. measureSingleLineOverflow(text, width) {
  4735. const w = Number(width) || 0;
  4736. if (!w || !text) return false;
  4737. const probe = document.createElement("span");
  4738. probe.style.position = "fixed";
  4739. probe.style.left = "-99999px";
  4740. probe.style.top = "0";
  4741. probe.style.display = "inline-block";
  4742. probe.style.maxWidth = w + "px";
  4743. probe.style.fontSize = "18px";
  4744. probe.style.lineHeight = "24px";
  4745. probe.style.whiteSpace = "nowrap";
  4746. probe.style.visibility = "hidden";
  4747. probe.textContent = text;
  4748. document.body.appendChild(probe);
  4749. const overflow = (probe.scrollWidth || 0) > (probe.clientWidth || w) + 1;
  4750. document.body.removeChild(probe);
  4751. return overflow;
  4752. },
  4753. refreshEllipsisVisible() { // 功能:刷新「是否出现 ...」状态(用于控制命中区显示) by xu 20260115
  4754. try {
  4755. const right = this.$el?.querySelector?.(".right");
  4756. const rawWidth = right?.getBoundingClientRect?.().width || right?.clientWidth || 0;
  4757. const width = Math.max(0, Math.round(rawWidth));
  4758. const model = this.buildRightTextLines();
  4759. const next = { secondSummary: false, secondTags: false, third: false, thirdFull: false };
  4760. if (model.secondKind === "summary" && model.summary) {
  4761. next.secondSummary = this.measureTextOverflowByLines(model.summary, 3, width);
  4762. }
  4763. if (model.secondKind === "tags") {
  4764. next.secondTags = this.measureSingleLineOverflow(model.secondTagsLast, width); // 功能说明:tags 仅看最后一行是否溢出 by xu 20260115
  4765. }
  4766. if (model.hasThird && !model.thirdFull) {
  4767. next.third = this.measureSingleLineOverflow(model.thirdText, width);
  4768. }
  4769. if (model.hasThird && model.thirdFull) {
  4770. next.thirdFull = this.measureTextOverflowByLines(model.thirdText, 4, width);
  4771. }
  4772. const prev = this.ellipsisVisible || {};
  4773. const changed =
  4774. prev.secondSummary !== next.secondSummary ||
  4775. prev.secondTags !== next.secondTags ||
  4776. prev.third !== next.third ||
  4777. prev.thirdFull !== next.thirdFull;
  4778. if (changed) this.ellipsisVisible = next;
  4779. } catch (e) {
  4780. // ignore by xu 20260115
  4781. }
  4782. },
  4783. clearHideTextPopoverTimer() {
  4784. if (this.hideTextPopoverTimer) {
  4785. clearTimeout(this.hideTextPopoverTimer);
  4786. this.hideTextPopoverTimer = null;
  4787. }
  4788. },
  4789. hideTextPopoverLater() {
  4790. this.clearHideTextPopoverTimer();
  4791. this.hideTextPopoverTimer = setTimeout(() => {
  4792. this.showTextPopover = false;
  4793. this.textPopoverType = "";
  4794. this.textPopoverPayload = null;
  4795. }, 120);
  4796. },
  4797. showTextPopoverFor(el, kind) {
  4798. const model = this.buildRightTextLines();
  4799. const lineEl = el?.closest?.(".ss-card-text__line") || el;
  4800. const right = lineEl?.closest?.(".right") || el?.closest?.(".right");
  4801. const rawWidth = right?.getBoundingClientRect?.().width || right?.clientWidth || 0;
  4802. const width = Math.max(0, Math.round(rawWidth));
  4803. const overflowed =
  4804. kind === "second-summary"
  4805. ? this.measureTextOverflowByLines(model.summary, 3, width)
  4806. : kind === "second-tags"
  4807. ? this.measureSingleLineOverflow(model.secondTagsLast, width)
  4808. : kind === "third"
  4809. ? this.measureSingleLineOverflow(model.thirdText, width)
  4810. : this.measureTextOverflowByLines(model.thirdText, 4, width);
  4811. if (!overflowed) return;
  4812. let payload = null;
  4813. if (kind === "second-summary") {
  4814. if (model.summary) payload = { kind, text: model.summary };
  4815. } else if (kind === "second-tags") {
  4816. if (Array.isArray(model.secondTagsLinesFull) && model.secondTagsLinesFull.length) {
  4817. payload = { kind, lines: model.secondTagsLinesFull };
  4818. }
  4819. } else if (kind === "third") {
  4820. if (model.thirdKind === "category" && Array.isArray(model.categoryLinesFull) && model.categoryLinesFull.length) {
  4821. payload = { kind, lines: model.categoryLinesFull };
  4822. } else if (model.thirdText) {
  4823. payload = { kind, text: model.thirdText };
  4824. }
  4825. } else if (kind === "third-full") {
  4826. if (model.thirdKind === "category" && Array.isArray(model.categoryLinesFull) && model.categoryLinesFull.length) {
  4827. payload = { kind, lines: model.categoryLinesFull };
  4828. } else if (model.thirdText) {
  4829. payload = { kind, text: model.thirdText };
  4830. }
  4831. }
  4832. if (!payload) return;
  4833. this.clearHideTextPopoverTimer();
  4834. const container = lineEl?.closest?.(".right");
  4835. const containerRect = container?.getBoundingClientRect?.();
  4836. const lineRect = lineEl?.getBoundingClientRect?.();
  4837. if (containerRect && lineRect) {
  4838. const bottom = Math.max(0, Math.round(containerRect.bottom - lineRect.bottom));
  4839. this.textPopoverBottom = bottom;
  4840. } else {
  4841. this.textPopoverBottom = 0;
  4842. }
  4843. this.textPopoverPayload = payload;
  4844. this.textPopoverType = kind;
  4845. this.showTextPopover = true;
  4846. },
  4847. },
  4848. mounted() {
  4849. this.$nextTick?.(() => {
  4850. requestAnimationFrame(() => this.refreshEllipsisVisible?.());
  4851. });
  4852. this.__ssCObjCardResizeHandler = () => this.refreshEllipsisVisible?.(); // 功能说明:窗口变化时刷新 ... 显示 by xu 20260115
  4853. window.addEventListener?.("resize", this.__ssCObjCardResizeHandler);
  4854. },
  4855. updated() {
  4856. this.$nextTick?.(() => {
  4857. requestAnimationFrame(() => this.refreshEllipsisVisible?.());
  4858. });
  4859. },
  4860. beforeUnmount() {
  4861. this.clearHideTextPopoverTimer?.();
  4862. if (this.__ssCObjCardResizeHandler) {
  4863. window.removeEventListener?.("resize", this.__ssCObjCardResizeHandler);
  4864. this.__ssCObjCardResizeHandler = null;
  4865. }
  4866. },
  4867. render() {
  4868. const SsCartListIcon = Vue.resolveComponent("ss-cart-list-icon");
  4869. const SsIcon = Vue.resolveComponent("ss-icon");
  4870. const hasThumbArea = !!(this.item?.thumb || this.item?.thumbType);
  4871. return Vue.h(
  4872. "div",
  4873. {
  4874. class: {
  4875. "knowledge-item-container": true,
  4876. active: this.item.active,
  4877. [this.cardType]: !!this.cardType,
  4878. [this.statusClass]: !!this.statusClass,
  4879. },
  4880. onClick: (e) => this.onItemClick?.(e), // 功能说明:二级对象卡片点击仅查看 by xu 20260115
  4881. },
  4882. [
  4883. this.item?.statusIcons?.length > 0 &&
  4884. Vue.h(
  4885. "div",
  4886. { class: "card-status-icons" },
  4887. this.item.statusIcons.map((icon) =>
  4888. Vue.h(SsIcon, { class: "status-icon " + icon.class, title: icon.title })
  4889. )
  4890. ),
  4891. this.item?.buttons?.length > 0 &&
  4892. Vue.h(
  4893. "div",
  4894. {
  4895. class: "header",
  4896. style:
  4897. this.item?.statusIcons?.length > 0
  4898. ? { right: String(this.item.statusIcons.length * 48) + "px", borderTopRightRadius: "0" }
  4899. : {},
  4900. onMouseenter: () => (this.showButtons = true),
  4901. onMouseleave: () => (this.showButtons = false),
  4902. onClick: (e) => this.onItemChange(e),
  4903. },
  4904. [
  4905. Vue.h("div", {
  4906. class: "cart-list-setting cart-list-icon",
  4907. title: this.item?.buttons?.[0]?.title,
  4908. }),
  4909. this.showButtons &&
  4910. this.item?.buttons?.length > 1 &&
  4911. Vue.h(
  4912. "div",
  4913. { class: "cart-list-button-popup" },
  4914. this.item.buttons.map((btn) =>
  4915. Vue.h(
  4916. "div",
  4917. {
  4918. onClick: (e) => {
  4919. e.stopPropagation();
  4920. btn.onclick?.();
  4921. },
  4922. },
  4923. [
  4924. btn.class && Vue.h(SsCartListIcon, { class: [btn.class] }),
  4925. Vue.h("span", null, btn.title),
  4926. ]
  4927. )
  4928. )
  4929. ),
  4930. ]
  4931. ),
  4932. Vue.h("div", { class: "body" }, [
  4933. Vue.h("div", { class: "box-header" }, [Vue.h("div", String(this.item.title || ""))]),
  4934. Vue.h(
  4935. "div",
  4936. { class: !hasThumbArea ? "no-thumb box-body" : "box-body" },
  4937. [
  4938. hasThumbArea
  4939. ? this.item.thumb
  4940. ? Vue.h("div", { class: "left" }, [
  4941. Vue.h("img", {
  4942. src: this.item.thumb,
  4943. alt: "Thumbnail",
  4944. class: "imgUnHandle",
  4945. style: { "object-fit": "cover", width: "100%", height: "100%" },
  4946. }),
  4947. ])
  4948. : Vue.h("div", { class: "left ss-objlist-thumbPlaceholder" }, [
  4949. Vue.h(SsIcon, { class: this.getBizThumbIconClass() + " ss-objlist-thumbIcon" }),
  4950. ])
  4951. : null,
  4952. Vue.h(
  4953. "div",
  4954. { class: "right" },
  4955. (() => {
  4956. const model = this.buildRightTextLines();
  4957. const hasAny = !!(model?.hasSecond || model?.hasThird);
  4958. if (!hasAny) return [];
  4959. const children = [];
  4960. if (model.hasSecond && model.secondKind === "summary") {
  4961. children.push(
  4962. Vue.h("div", { class: "ss-card-text__line ss-card-text__secondBlock" }, [
  4963. Vue.h("div", { class: "ss-card-text__secondSummary", title: model.summary }, model.summary),
  4964. Vue.h("span", {
  4965. class: [
  4966. "ss-card-text__ellipsisHit",
  4967. "ss-card-text__ellipsisHit--second",
  4968. this.ellipsisVisible?.secondSummary ? "is-on" : "",
  4969. ],
  4970. title: "查看完整信息",
  4971. onMouseenter: (e) => this.showTextPopoverFor(e?.currentTarget, "second-summary"),
  4972. onClick: (e) => {
  4973. e?.stopPropagation?.();
  4974. this.showTextPopoverFor(e?.currentTarget, "second-summary");
  4975. },
  4976. onMouseleave: () => this.hideTextPopoverLater(),
  4977. }),
  4978. ])
  4979. );
  4980. }
  4981. if (model.hasSecond && model.secondKind === "tags") {
  4982. children.push(
  4983. Vue.h(
  4984. "div",
  4985. {
  4986. class: [
  4987. "ss-card-text__line",
  4988. model.secondFull ? "ss-card-text__secondFullBlock" : "ss-card-text__secondBlock",
  4989. ],
  4990. },
  4991. [
  4992. Vue.h(
  4993. "div",
  4994. { class: "ss-card-text__secondTags" },
  4995. [
  4996. ...model.secondTagsHead.map((t) =>
  4997. Vue.h("div", { class: "ss-card-text__tagLine", title: t }, t)
  4998. ),
  4999. Vue.h(
  5000. "div",
  5001. {
  5002. class:
  5003. "ss-card-text__tagLine is-last ss-card-text__tagLineLast",
  5004. title: model.secondTagsLast,
  5005. },
  5006. model.secondTagsLast
  5007. ),
  5008. ]
  5009. ),
  5010. Vue.h("span", {
  5011. class: [
  5012. "ss-card-text__ellipsisHit",
  5013. "ss-card-text__ellipsisHit--second",
  5014. this.ellipsisVisible?.secondTags ? "is-on" : "",
  5015. ],
  5016. title: "查看完整信息",
  5017. onMouseenter: (e) => this.showTextPopoverFor(e?.currentTarget, "second-tags"),
  5018. onClick: (e) => {
  5019. e?.stopPropagation?.();
  5020. this.showTextPopoverFor(e?.currentTarget, "second-tags");
  5021. },
  5022. onMouseleave: () => this.hideTextPopoverLater(),
  5023. }),
  5024. ]
  5025. )
  5026. );
  5027. }
  5028. if (model.hasThird) {
  5029. if (model.thirdFull) {
  5030. children.push(
  5031. Vue.h("div", { class: "ss-card-text__line ss-card-text__thirdFullBlock" }, [
  5032. Vue.h("div", { class: "ss-card-text__thirdFull", title: model.thirdText }, model.thirdText),
  5033. Vue.h("span", {
  5034. class: [
  5035. "ss-card-text__ellipsisHit",
  5036. "ss-card-text__ellipsisHit--third",
  5037. this.ellipsisVisible?.thirdFull ? "is-on" : "",
  5038. ],
  5039. title: "查看完整信息",
  5040. onMouseenter: (e) => this.showTextPopoverFor(e?.currentTarget, "third-full"),
  5041. onClick: (e) => {
  5042. e?.stopPropagation?.();
  5043. this.showTextPopoverFor(e?.currentTarget, "third-full");
  5044. },
  5045. onMouseleave: () => this.hideTextPopoverLater(),
  5046. }),
  5047. ])
  5048. );
  5049. } else {
  5050. children.push(
  5051. Vue.h("div", { class: "ss-card-text__line ss-card-text__thirdLineWrap" }, [
  5052. Vue.h("div", { class: "ss-card-text__thirdLine", title: model.thirdText }, model.thirdText),
  5053. Vue.h("span", {
  5054. class: [
  5055. "ss-card-text__ellipsisHit",
  5056. "ss-card-text__ellipsisHit--third",
  5057. this.ellipsisVisible?.third ? "is-on" : "",
  5058. ],
  5059. title: "查看完整信息",
  5060. onMouseenter: (e) => this.showTextPopoverFor(e?.currentTarget, "third"),
  5061. onClick: (e) => {
  5062. e?.stopPropagation?.();
  5063. this.showTextPopoverFor(e?.currentTarget, "third");
  5064. },
  5065. onMouseleave: () => this.hideTextPopoverLater(),
  5066. }),
  5067. ])
  5068. );
  5069. }
  5070. }
  5071. const popover =
  5072. this.showTextPopover &&
  5073. Vue.h(
  5074. "div",
  5075. {
  5076. class: "ss-card-text-popover",
  5077. style: { bottom: this.textPopoverBottom + "px" },
  5078. onMouseenter: () => {
  5079. this.clearHideTextPopoverTimer();
  5080. this.showTextPopover = true;
  5081. },
  5082. onMouseleave: () => this.hideTextPopoverLater(),
  5083. },
  5084. (() => {
  5085. const p = this.textPopoverPayload || {};
  5086. if (p.kind === "second-summary" && p.text) {
  5087. return [Vue.h("div", { class: "ss-card-text-popover__summary" }, p.text)];
  5088. }
  5089. if (Array.isArray(p.lines)) {
  5090. return [
  5091. Vue.h(
  5092. "div",
  5093. { class: "ss-card-text-popover__kvlist" },
  5094. p.lines.map((t) => Vue.h("div", { class: "ss-card-text-popover__kv" }, t))
  5095. ),
  5096. ];
  5097. }
  5098. if ((p.kind === "third" || p.kind === "third-full") && p.text) {
  5099. return [Vue.h("div", { class: "ss-card-text-popover__objno" }, p.text)];
  5100. }
  5101. return [];
  5102. })()
  5103. );
  5104. return [Vue.h("div", { class: "ss-card-text" }, children), popover];
  5105. })()
  5106. ),
  5107. ]
  5108. ),
  5109. ]),
  5110. ]
  5111. );
  5112. },
  5113. };
  5114. // ss-sidebar 右侧边栏(容器 + 子组件),用于 objList 右侧区域 by xu 20260106
  5115. // 组件文档补全(JSDoc) by xu 20260108
  5116. /**
  5117. * SsSidebarButtons(右侧边栏顶部按钮栏)
  5118. *
  5119. * 用途:
  5120. * - 渲染 objList 右侧顶部快捷操作(预定/入住/退房/清洁...)
  5121. * - 内部复用 `ss-search-button`(项目现有按钮样式/交互)
  5122. *
  5123. * 调用示例:
  5124. * ```html
  5125. * <ss-sidebar-buttons :items="sidebarButtons" />
  5126. * ```
  5127. *
  5128. * Props:
  5129. * - `items`: 按钮配置数组
  5130. * - `{ id, text, icon?, onClick? }`
  5131. *
  5132. * Emits:
  5133. * - `click`:点击按钮时触发,参数为按钮对象
  5134. */
  5135. const SsSidebarButtons = {
  5136. name: "SsSidebarButtons",
  5137. props: {
  5138. items: { type: Array, default: () => [] },
  5139. },
  5140. emits: ["click"],
  5141. render() {
  5142. const SsSearchButton = Vue.resolveComponent("ss-search-button");
  5143. const items = this.items || [];
  5144. if (!items.length) return null;
  5145. return Vue.h(
  5146. "div",
  5147. { class: "ss-sidebar-actions" },
  5148. items.map((btn) =>
  5149. // 顶部操作按钮复用 ss-search-button(先 mock 固定按钮) by xu 20260106
  5150. Vue.h(SsSearchButton, {
  5151. text: btn?.text ?? "",
  5152. iconClass: btn?.iconClass ?? "",
  5153. opt: btn?.opt ?? [],
  5154. checkId: btn?.checkId ?? "0",
  5155. width: btn?.width,
  5156. id: btn?.id,
  5157. onClick: (e) => {
  5158. e?.stopPropagation?.();
  5159. btn?.onClick?.(btn);
  5160. this.$emit("click", btn);
  5161. },
  5162. })
  5163. )
  5164. );
  5165. },
  5166. };
  5167. // 组件文档补全(JSDoc) by xu 20260108
  5168. /**
  5169. * SsSidebarChart(ECharts 容器渲染)
  5170. *
  5171. * 用途:
  5172. * - 仅负责 echarts init / setOption / resize / dispose
  5173. * - 被 `ss-sidebar-chart-hover` 与图表面板复用
  5174. *
  5175. * 调用示例:
  5176. * ```html
  5177. * <ss-sidebar-chart :options="option" height="220px" />
  5178. * ```
  5179. *
  5180. * Props:
  5181. * - `options`:ECharts option(Object)
  5182. * - `height`:容器高度(String)
  5183. */
  5184. const SsSidebarChart = {
  5185. name: "SsSidebarChart",
  5186. props: {
  5187. options: { type: Object, default: () => ({}) },
  5188. height: { type: String, default: "200px" },
  5189. },
  5190. setup(props) {
  5191. const elRef = Vue.ref(null);
  5192. let chart = null;
  5193. const renderChart = () => {
  5194. if (!elRef.value || !window.echarts) return;
  5195. if (!chart) {
  5196. chart = window.echarts.init(elRef.value);
  5197. }
  5198. chart.setOption(props.options || {}, true);
  5199. };
  5200. const resizeChart = () => {
  5201. chart?.resize?.();
  5202. };
  5203. Vue.onMounted(() => {
  5204. renderChart();
  5205. window.addEventListener("resize", resizeChart);
  5206. });
  5207. Vue.onBeforeUnmount(() => {
  5208. window.removeEventListener("resize", resizeChart);
  5209. chart?.dispose?.();
  5210. chart = null;
  5211. });
  5212. Vue.watch(
  5213. () => props.options,
  5214. () => {
  5215. renderChart();
  5216. },
  5217. { deep: true }
  5218. );
  5219. return { elRef };
  5220. },
  5221. render() {
  5222. return Vue.h("div", {
  5223. ref: "elRef",
  5224. style: {
  5225. width: "100%",
  5226. height: this.height,
  5227. // 图表容器不加 padding/border,由外层布局控制 by xu 20260106
  5228. background: "transparent",
  5229. border: "none",
  5230. "border-radius": "0",
  5231. },
  5232. });
  5233. },
  5234. };
  5235. // ss-sidebar-chart-hover:hover 弹出左侧大图(支持图钉/全屏) by xu 20260106
  5236. // 组件文档补全(JSDoc) by xu 20260108
  5237. /**
  5238. * SsSidebarChartHover(小图 + hover 左侧大图预览 + 图钉固定 + 全屏)
  5239. *
  5240. * 用途:
  5241. * - 右侧统计图小卡片:hover 时在左侧弹出大图预览
  5242. * - 预览头部:左侧图标+标题;右侧固定/全屏按钮(icon-base)
  5243. * - 全屏:方案A(浏览器 Fullscreen API)
  5244. *
  5245. * 调用示例(由 ss-sidebar chart panel 内部调用):
  5246. * ```html
  5247. * <ss-sidebar-chart-hover
  5248. * title="校舍建筑面积和总体分布"
  5249. * icon-class="menu-icon icon-obj-jzw"
  5250. * :options="option"
  5251. * height="220px"
  5252. * />
  5253. * ```
  5254. *
  5255. * Props:
  5256. * - `title/iconClass/icon`:用于预览/全屏 header 显示(与面板 header 一致)
  5257. * - `options`:ECharts option
  5258. * - `height`:小图高度
  5259. * - `previewWidth/previewHeight`:预览建议尺寸(会按视口自适应)
  5260. */
  5261. const SsSidebarChartHover = {
  5262. name: "SsSidebarChartHover",
  5263. props: {
  5264. // hover 大图标题/图标(与小图面板 header 一致) by xu 20260108
  5265. title: { type: String, default: "" },
  5266. iconClass: { type: String, default: "" },
  5267. icon: { type: String, default: "" },
  5268. options: { type: Object, default: () => ({}) },
  5269. height: { type: String, default: "220px" },
  5270. // hover 弹窗建议尺寸:默认 1000x650(比例由逻辑统一管控),实际渲染会按比例自适应视口 by xu 20260115
  5271. previewWidth: { type: Number, default: 1000 },
  5272. previewHeight: { type: Number, default: 650 },
  5273. },
  5274. setup(props) {
  5275. const triggerRef = Vue.ref(null);
  5276. const fullscreenRef = Vue.ref(null);
  5277. const open = Vue.ref(false);
  5278. const pinned = Vue.ref(false);
  5279. const fullscreen = Vue.ref(false);
  5280. const hoveringTrigger = Vue.ref(false);
  5281. const hoveringPreview = Vue.ref(false);
  5282. const previewStyle = Vue.ref({});
  5283. let closeTimer = null;
  5284. const updatePreviewPosition = () => {
  5285. const el = triggerRef.value;
  5286. if (!el) return;
  5287. const rect = el.getBoundingClientRect();
  5288. // 功能说明:优先使用 visualViewport(避免浏览器 UI/缩放导致可视区与 innerHeight 偏差,出现预览被遮挡约 70px) by xu 20260116
  5289. const docEl = document.documentElement;
  5290. const vv = window.visualViewport;
  5291. let viewportLeft = Number(vv?.offsetLeft ?? 0) || 0;
  5292. let viewportTop = Number(vv?.offsetTop ?? 0) || 0;
  5293. let vw = Number(vv?.width ?? 0) || Number(docEl?.clientWidth || 0) || window.innerWidth;
  5294. let vh = Number(vv?.height ?? 0) || Number(docEl?.clientHeight || 0) || window.innerHeight;
  5295. // 功能说明:若页面在 iframe 内,父页面可能裁切 iframe 可见区域(overflow/弹窗容器),需要用“iframe可见区域”做二次约束 by xu 20260116
  5296. try {
  5297. const inIframe = window.top && window.top !== window;
  5298. const frameEl = window.frameElement;
  5299. if (inIframe && frameEl && window.top?.document) {
  5300. const topVv = window.top.visualViewport;
  5301. const topDocEl = window.top.document.documentElement;
  5302. const topVw = Number(topVv?.width ?? 0) || Number(topDocEl?.clientWidth || 0) || window.top.innerWidth;
  5303. const topVh = Number(topVv?.height ?? 0) || Number(topDocEl?.clientHeight || 0) || window.top.innerHeight;
  5304. const fr = frameEl.getBoundingClientRect?.();
  5305. if (fr && fr.width > 0 && fr.height > 0) {
  5306. const visibleW = Math.max(0, Math.min(fr.right, topVw) - Math.max(fr.left, 0));
  5307. const visibleH = Math.max(0, Math.min(fr.bottom, topVh) - Math.max(fr.top, 0));
  5308. if (visibleW > 0) {
  5309. vw = Math.min(vw, visibleW);
  5310. viewportLeft = Math.max(0, -fr.left); // iframe内坐标系偏移(左侧被裁切时) by xu 20260116
  5311. }
  5312. if (visibleH > 0) {
  5313. vh = Math.min(vh, visibleH);
  5314. viewportTop = Math.max(0, -fr.top); // iframe内坐标系偏移(顶部被裁切时) by xu 20260116
  5315. }
  5316. }
  5317. }
  5318. } catch (_) {}
  5319. // 预览窗尺寸:优先保证“完整可见”,其次再尽量对齐右侧 header 顶部 by xu 20260116
  5320. const viewportPaddingX = 40;
  5321. const viewportPaddingTop = 20;
  5322. const viewportPaddingBottom = 10;
  5323. // 功能说明:hover 预览框不要覆盖右侧栏,优先放在 ss-sidebar 左侧;必要时动态缩小宽度 by xu 20260115
  5324. const sidebarEl = el.closest ? el.closest(".ss-sidebar") : null;
  5325. const sidebarRect = sidebarEl?.getBoundingClientRect?.();
  5326. const maxWidthByViewport = Math.max(240, vw - viewportPaddingX);
  5327. const maxWidthByLeftSpace = sidebarRect
  5328. ? Math.max(240, sidebarRect.left - viewportPaddingX - 14 /* gapFromSidebar */)
  5329. : maxWidthByViewport;
  5330. // 功能说明:预览框尺寸按比例(默认 5:3)缩放,并提供最大/最小值约束 by xu 20260115
  5331. const ratio = 3 / 5;
  5332. const minWidth = 320;
  5333. const minHeight = 240;
  5334. const maxHeightByViewport = Math.max(minHeight, vh - viewportPaddingTop - viewportPaddingBottom);
  5335. const maxWidthByProp = Number(props.previewWidth) || 1000;
  5336. const maxHeightByProp = Number(props.previewHeight) || 650;
  5337. // 优先按高度撑满可视区(保证预览完整可见),再根据左侧可用宽度回退 by xu 20260116
  5338. const maxHeight = Math.min(maxHeightByProp, maxHeightByViewport);
  5339. let height = Math.max(minHeight, maxHeight);
  5340. let width = Math.round(height / ratio);
  5341. width = Math.min(width, maxWidthByProp, maxWidthByViewport, maxWidthByLeftSpace);
  5342. width = Math.max(minWidth, width);
  5343. height = Math.round(width * ratio);
  5344. if (height > maxHeight) {
  5345. height = maxHeight;
  5346. width = Math.round(height / ratio);
  5347. }
  5348. // 默认贴着小图左侧弹出,右边缘与小图左边缘轻微重叠,避免 1px 缝隙导致 hover 闪断 by xu 20260108
  5349. const overlap = 2;
  5350. const gapFromSidebar = 14; // 功能说明:弹窗与右侧边栏留出距离(更不贴近) by xu 20260108
  5351. // 优先:贴在 sidebar 左侧(不压住右侧栏内容) by xu 20260115
  5352. let left = sidebarRect
  5353. ? (sidebarRect.left - gapFromSidebar - width + overlap)
  5354. : (rect.left - width - gapFromSidebar + overlap);
  5355. // 如果左侧空间不足,则贴右侧(兜底,同样重叠) by xu 20260108
  5356. if (left < 0) left = rect.right + gapFromSidebar - overlap;
  5357. left = Math.max(viewportLeft, Math.min(left, viewportLeft + vw - width));
  5358. // top:优先保证完整可见,然后才贴近 header 顶部 by xu 20260116
  5359. let headerEl = el;
  5360. while (headerEl && !headerEl.classList?.contains("ss-sidebar-panel")) {
  5361. headerEl = headerEl.parentElement;
  5362. }
  5363. let headerRect = headerEl?.querySelector(".ss-sidebar-panel__header")?.getBoundingClientRect();
  5364. let top = headerRect?.top ?? rect.top;
  5365. top = Math.max(viewportTop + viewportPaddingTop, Math.min(top, viewportTop + vh - height - viewportPaddingBottom));
  5366. previewStyle.value = {
  5367. position: "fixed",
  5368. left: `${Math.round(left)}px`,
  5369. top: `${Math.round(top)}px`,
  5370. width: `${width}px`,
  5371. height: `${height}px`,
  5372. zIndex: 2147483647, // 功能说明:提高层级到接近浏览器上限,避免仍被页面固定栏/弹窗遮挡 by xu 20260116
  5373. };
  5374. };
  5375. const clearCloseTimer = () => {
  5376. if (closeTimer) {
  5377. clearTimeout(closeTimer);
  5378. closeTimer = null;
  5379. }
  5380. };
  5381. const scheduleClose = () => {
  5382. clearCloseTimer();
  5383. if (pinned.value || fullscreen.value) return;
  5384. if (hoveringTrigger.value || hoveringPreview.value) return; // 功能:鼠标在小图/大图之间移动不关闭 by xu 20260108
  5385. closeTimer = setTimeout(() => {
  5386. open.value = false;
  5387. }, 100);
  5388. };
  5389. const openPreview = () => {
  5390. clearCloseTimer();
  5391. updatePreviewPosition();
  5392. open.value = true;
  5393. };
  5394. const togglePin = () => {
  5395. pinned.value = !pinned.value;
  5396. if (pinned.value) {
  5397. open.value = true;
  5398. updatePreviewPosition();
  5399. }
  5400. };
  5401. const toggleFullscreen = () => {
  5402. // 全屏:采用浏览器 Fullscreen API(方案A),不使用遮罩弹窗 by xu 20260108
  5403. if (!fullscreen.value) {
  5404. open.value = false; // 避免同时渲染预览与全屏 by xu 20260108
  5405. fullscreen.value = true;
  5406. Vue.nextTick(() => {
  5407. const el = fullscreenRef.value;
  5408. if (el?.requestFullscreen) {
  5409. el.requestFullscreen().catch(() => {
  5410. // requestFullscreen 失败则回退为非全屏状态 by xu 20260108
  5411. fullscreen.value = false;
  5412. });
  5413. } else {
  5414. fullscreen.value = false;
  5415. }
  5416. });
  5417. } else {
  5418. if (document?.exitFullscreen) {
  5419. document.exitFullscreen().catch(() => { });
  5420. }
  5421. }
  5422. };
  5423. const handleFullscreenChange = () => {
  5424. const isFs = !!document.fullscreenElement;
  5425. fullscreen.value = isFs; // 功能说明:同步 ESC/系统退出全屏状态 by xu 20260108
  5426. if (isFs) {
  5427. open.value = false;
  5428. clearCloseTimer();
  5429. return;
  5430. }
  5431. // 退出全屏后:若固定或仍 hover,则恢复预览,否则关闭 by xu 20260108
  5432. if (pinned.value || hoveringTrigger.value || hoveringPreview.value) {
  5433. open.value = true;
  5434. updatePreviewPosition();
  5435. } else {
  5436. open.value = false;
  5437. }
  5438. };
  5439. Vue.onMounted(() => {
  5440. window.addEventListener("resize", updatePreviewPosition);
  5441. window.addEventListener("scroll", updatePreviewPosition, true);
  5442. document.addEventListener("fullscreenchange", handleFullscreenChange); // 功能说明:监听全屏状态变化 by xu 20260108
  5443. });
  5444. Vue.onBeforeUnmount(() => {
  5445. clearCloseTimer();
  5446. window.removeEventListener("resize", updatePreviewPosition);
  5447. window.removeEventListener("scroll", updatePreviewPosition, true);
  5448. document.removeEventListener("fullscreenchange", handleFullscreenChange);
  5449. });
  5450. return {
  5451. triggerRef,
  5452. fullscreenRef,
  5453. open,
  5454. pinned,
  5455. fullscreen,
  5456. hoveringTrigger,
  5457. hoveringPreview,
  5458. previewStyle,
  5459. openPreview,
  5460. scheduleClose,
  5461. clearCloseTimer,
  5462. togglePin,
  5463. toggleFullscreen,
  5464. };
  5465. },
  5466. render() {
  5467. const SsIcon = Vue.resolveComponent("ss-icon");
  5468. const Chart = Vue.resolveComponent("ss-sidebar-chart");
  5469. const hasHeader = !!(this.title || this.iconClass || this.icon); // 功能:hover 大图显示左侧图标+标题 by xu 20260108
  5470. const previewContent = Vue.h(
  5471. "div",
  5472. {
  5473. class: { "ss-sidebar-chart-preview": true, "is-pinned": this.pinned },
  5474. style: this.previewStyle,
  5475. onMouseenter: () => {
  5476. this.hoveringPreview = true;
  5477. this.clearCloseTimer();
  5478. },
  5479. onMouseleave: () => {
  5480. this.hoveringPreview = false;
  5481. this.scheduleClose();
  5482. },
  5483. },
  5484. [
  5485. hasHeader
  5486. ? Vue.h("div", { class: "ss-sidebar-panel__header ss-sidebar-chart-preview__header" }, [
  5487. Vue.h("div", { class: "ss-sidebar-panel__title" }, [
  5488. this.iconClass
  5489. ? Vue.h(SsIcon, { class: this.iconClass + " ss-sidebar-panel__icon" })
  5490. : this.icon
  5491. ? Vue.h(SsIcon, { name: this.icon, size: "16px", class: "ss-sidebar-panel__icon" })
  5492. : null,
  5493. Vue.h("span", null, this.title || "统计图"),
  5494. ]),
  5495. Vue.h("div", { class: "ss-sidebar-panel__tools" }, [
  5496. Vue.h(
  5497. "button",
  5498. {
  5499. type: "button",
  5500. class: { "ss-sidebar-chart-tool": true, "is-active": this.pinned },
  5501. title: this.pinned ? "取消固定" : "固定",
  5502. onClick: (e) => {
  5503. e.stopPropagation();
  5504. this.togglePin();
  5505. },
  5506. },
  5507. // 固定图标:未固定 icon-fix,固定 icon-fix-bold(icon-base) by xu 20260108
  5508. [Vue.h(SsIcon, { class: this.pinned ? "menu-base-icon icon-fix-bold" : "menu-base-icon icon-fix" })]
  5509. ),
  5510. Vue.h(
  5511. "button",
  5512. {
  5513. type: "button",
  5514. class: "ss-sidebar-chart-tool",
  5515. title: "全屏",
  5516. onClick: (e) => {
  5517. e.stopPropagation();
  5518. this.toggleFullscreen();
  5519. },
  5520. },
  5521. // 全屏图标:未展开 icon-chk,展开 icon-chk-on(icon-base) by xu 20260108
  5522. [Vue.h(SsIcon, { class: this.fullscreen ? "menu-base-icon icon-fs-exit" : "menu-base-icon icon-fs" })]
  5523. ),
  5524. ]),
  5525. ])
  5526. : Vue.h("div", { class: "ss-sidebar-chart-preview__header ss-sidebar-chart-preview__header--simple" }, [
  5527. Vue.h("div", { class: "ss-sidebar-panel__tools" }, [
  5528. Vue.h(
  5529. "button",
  5530. {
  5531. type: "button",
  5532. class: { "ss-sidebar-chart-tool": true, "is-active": this.pinned },
  5533. title: this.pinned ? "取消固定" : "固定",
  5534. onClick: (e) => {
  5535. e.stopPropagation();
  5536. this.togglePin();
  5537. },
  5538. },
  5539. // 固定图标:未固定 icon-fix,固定 icon-fix-bold(icon-base) by xu 20260108
  5540. [Vue.h(SsIcon, { class: this.pinned ? "menu-base-icon icon-fix-bold" : "menu-base-icon icon-fix" })]
  5541. ),
  5542. Vue.h(
  5543. "button",
  5544. {
  5545. type: "button",
  5546. class: "ss-sidebar-chart-tool",
  5547. title: "全屏",
  5548. onClick: (e) => {
  5549. e.stopPropagation();
  5550. this.toggleFullscreen();
  5551. },
  5552. },
  5553. // 全屏图标:未展开 icon-chk,展开 icon-chk-on(icon-base) by xu 20260108
  5554. [Vue.h(SsIcon, { class: this.fullscreen ? "menu-base-icon icon-chk-on" : "menu-base-icon icon-chk" })]
  5555. ),
  5556. ]),
  5557. ]),
  5558. Vue.h("div", { class: "ss-sidebar-chart-preview__body" }, [
  5559. Vue.h(Chart, { options: this.options, height: "100%" }),
  5560. ]),
  5561. ]
  5562. );
  5563. const fullscreenContent =
  5564. this.fullscreen &&
  5565. Vue.h(
  5566. "div",
  5567. {
  5568. ref: "fullscreenRef",
  5569. class: "ss-sidebar-chart-fullscreen",
  5570. },
  5571. [
  5572. Vue.h("div", { class: "ss-sidebar-panel__header ss-sidebar-chart-fullscreen__header" }, [
  5573. Vue.h("div", { class: "ss-sidebar-panel__title" }, [
  5574. this.iconClass
  5575. ? Vue.h(SsIcon, { class: this.iconClass + " ss-sidebar-panel__icon" })
  5576. : this.icon
  5577. ? Vue.h(SsIcon, { name: this.icon, size: "16px", class: "ss-sidebar-panel__icon" })
  5578. : null,
  5579. Vue.h("span", null, this.title || "统计图"),
  5580. ]),
  5581. Vue.h("div", { class: "ss-sidebar-panel__tools" }, [
  5582. Vue.h(
  5583. "button",
  5584. {
  5585. type: "button",
  5586. class: { "ss-sidebar-chart-tool": true, "is-active": this.pinned },
  5587. title: this.pinned ? "取消固定" : "固定",
  5588. onClick: (e) => {
  5589. e.stopPropagation();
  5590. this.togglePin();
  5591. },
  5592. },
  5593. [Vue.h(SsIcon, { class: this.pinned ? "menu-base-icon icon-fix-bold" : "menu-base-icon icon-fix" })]
  5594. ),
  5595. Vue.h(
  5596. "button",
  5597. {
  5598. type: "button",
  5599. class: "ss-sidebar-chart-tool",
  5600. title: "退出全屏",
  5601. onClick: (e) => {
  5602. e.stopPropagation();
  5603. this.toggleFullscreen();
  5604. },
  5605. },
  5606. [Vue.h(SsIcon, { class: "menu-base-icon icon-fs-exit" })]
  5607. ),
  5608. ]),
  5609. ]),
  5610. Vue.h("div", { class: "ss-sidebar-chart-fullscreen__body" }, [
  5611. Vue.h(Chart, { options: this.options, height: "100%" }),
  5612. ]),
  5613. ]
  5614. );
  5615. return Vue.h("div", { class: "ss-sidebar-chart-hover" }, [
  5616. Vue.h(
  5617. "div",
  5618. {
  5619. ref: "triggerRef",
  5620. class: "ss-sidebar-chart-hover__trigger",
  5621. onMouseenter: () => {
  5622. this.hoveringTrigger = true;
  5623. this.openPreview();
  5624. },
  5625. onMouseleave: () => {
  5626. this.hoveringTrigger = false;
  5627. this.scheduleClose();
  5628. },
  5629. },
  5630. [Vue.h(Chart, { options: this.options, height: this.height })]
  5631. ),
  5632. (this.open || this.fullscreen) &&
  5633. Vue.h(Vue.Teleport, { to: "body" }, [
  5634. this.open ? previewContent : null,
  5635. fullscreenContent || null,
  5636. ]),
  5637. ]);
  5638. },
  5639. };
  5640. // 组件文档补全(JSDoc) by xu 20260108
  5641. /**
  5642. * SsSidebarList(右侧业务面板:人员/已选/服务/预定...)
  5643. *
  5644. * 用途:
  5645. * - 统一渲染面板 header(图标/标题/数量/右侧按钮)
  5646. * - 统一渲染 list(固定行高、hover、右侧移除按钮等)
  5647. *
  5648. * 调用示例(由 ss-sidebar 通过 panels 配置驱动):
  5649. * ```js
  5650. * { type:'list', title:'已选', iconClass:'menu-icon icon-obj-xcd', mode:'selected', items:selectedItems, closable:true }
  5651. * ```
  5652. *
  5653. * Props(核心):
  5654. * - `title`:header 标题
  5655. * - `iconClass/icon`:header 图标(优先 iconClass)
  5656. * - `count`:数量回显(图表面板可不传)
  5657. * - `closable`:是否显示“清空”按钮(触发 emit clear)
  5658. * - `headerFilters`:header 条件数组(组件名 + props),用于联调接口搜索
  5659. * - `headerSearchButton`:是否显示搜索按钮(触发 emit search)
  5660. * - `items`:列表数据
  5661. * - `mode`:`selected` 时右侧按钮语义为“移除”
  5662. * - `itemLayout`:`simple` / `person`(人员号槽位)
  5663. * - `itemAction`:是否显示 item 右侧操作按钮(hover 才出现)
  5664. *
  5665. * Emits:
  5666. * - `remove(item)`:点击 item 右侧移除
  5667. * - `clear()`:点击 header 清空
  5668. * - `search({keyword, filters})`:点击 header 搜索
  5669. */
  5670. const SsSidebarList = {
  5671. name: "SsSidebarList",
  5672. props: {
  5673. title: { type: String, default: "" },
  5674. // header 图标:优先使用 iconClass(走 ss-icon v3.0 class 分支) by xu 20260106
  5675. iconClass: { type: String, default: "" },
  5676. icon: { type: String, default: "" }, // 兼容旧写法(ss-icon name)
  5677. count: { type: [Number, String], default: "" },
  5678. // 选中类分区:右侧关闭按钮=清空分区数据 by xu 20260106
  5679. closable: { type: Boolean, default: false },
  5680. searchable: { type: Boolean, default: false },
  5681. // 搜索框是否放在 header 内(人员块需要该布局) by xu 20260106
  5682. searchInHeader: { type: Boolean, default: false },
  5683. // header 搜索:下拉条件 + 搜索按钮(适合“人员”块) by xu 20260106
  5684. headerFilters: { type: Array, default: () => [] },
  5685. headerSearchButton: { type: Boolean, default: false },
  5686. searchPlaceholder: { type: String, default: "搜索" },
  5687. // 列表项布局:simple(仅标题) / person(标题+人员号槽位) by xu 20260106
  5688. itemLayout: { type: String, default: "simple" },
  5689. itemAction: { type: Boolean, default: true },
  5690. collapsible: { type: Boolean, default: true }, // 功能说明:是否允许双击 header 折叠/展开 by xu 20260116
  5691. collapsed: { type: Boolean, default: false }, // 功能说明:折叠态仅展示 header by xu 20260116
  5692. items: { type: Array, default: () => [] },
  5693. mode: { type: String, default: "search" }, // search / selected
  5694. },
  5695. emits: ["select", "remove", "clear", "search", "toggle-collapse"],
  5696. data() {
  5697. return {
  5698. keyword: "",
  5699. filterValues: {},
  5700. }; // 功能说明:折叠状态完全由 props.collapsed 驱动,避免多面板复用导致状态不同步 by xu 20260116
  5701. },
  5702. created() {
  5703. // header 下拉条件默认值初始化 by xu 20260106
  5704. (this.headerFilters || []).forEach((f) => {
  5705. if (!f || !f.key) return;
  5706. if (this.filterValues[f.key] !== undefined) return;
  5707. const first = f?.options?.[0]?.value ?? "";
  5708. this.filterValues[f.key] = f.value !== undefined ? f.value : first;
  5709. });
  5710. },
  5711. methods: {
  5712. __shouldIgnoreHeaderToggle(e) {
  5713. // 功能说明:忽略工具区/输入区触发折叠,避免误触 by xu 20260116
  5714. const t = e?.target;
  5715. if (!t || !t.closest) return false;
  5716. if (t.closest(".ss-sidebar-panel__tools")) return true;
  5717. if (t.closest(".ss-sidebar-panel__filters")) return true;
  5718. if (t.closest("input,textarea,select,button")) return true;
  5719. return false;
  5720. },
  5721. __toggleCollapseInternal(e, source) {
  5722. if (!this.collapsible) return;
  5723. if (this.__shouldIgnoreHeaderToggle(e)) return;
  5724. const nextCollapsed = !this.collapsed;
  5725. console.log("[SsSidebarList] toggle emit", { title: this.title, source, to: nextCollapsed }); // 功能说明:直接打印用于排查多面板不生效 by xu 20260116
  5726. // 功能说明:由父组件(SsSidebar.toggleSectionCollapse)统一控制 section 高度与折叠数组 by xu 20260116
  5727. this.$emit("toggle-collapse");
  5728. },
  5729. },
  5730. render() {
  5731. const items = this.items || [];
  5732. const SsIcon = Vue.resolveComponent("ss-icon");
  5733. const isSelectedMode = this.mode === "selected";
  5734. const activeKeyword = this.filterValues?.keyword ?? this.keyword; // 功能:keyword 优先取 headerFilters.keyword by xu 20260106
  5735. const hasHeaderKeyword = (this.headerFilters || []).some((f) => f?.key === "keyword"); // 功能:header 内 keyword 过滤 by xu 20260106
  5736. const renderHeaderFilter = (f) => {
  5737. if (!f) return null;
  5738. const key = f.key;
  5739. const componentName = f.component;
  5740. if (!key || !componentName) return null;
  5741. const Comp = Vue.resolveComponent(componentName);
  5742. if (!Comp) return null;
  5743. const modelValue = this.filterValues[key];
  5744. const props = f.props || {};
  5745. return Vue.h(Comp, {
  5746. ...props,
  5747. modelValue,
  5748. "onUpdate:modelValue": (v) => {
  5749. this.filterValues[key] = v;
  5750. },
  5751. });
  5752. };
  5753. const filteredItems =
  5754. this.searchable && activeKeyword
  5755. ? items.filter((it) =>
  5756. String(it?.title ?? "")
  5757. .toLowerCase()
  5758. .includes(String(activeKeyword).toLowerCase())
  5759. )
  5760. : items;
  5761. if (!filteredItems.length && !this.title) return null;
  5762. if (this.collapsed) {
  5763. return Vue.h("div", { class: "ss-sidebar-panel" }, [
  5764. this.title
  5765. ? Vue.h(
  5766. "div",
  5767. {
  5768. class: "ss-sidebar-panel__header",
  5769. // 功能说明:折叠触发绑定到整个 header(dblclick + click.detail==2 兜底) by xu 20260116
  5770. onDblclick: (e) => {
  5771. e?.preventDefault?.();
  5772. e?.stopPropagation?.();
  5773. console.log("[SsSidebarList] header dblclick", { title: this.title, collapsed: true }); // 功能说明:直接打印用于排查多面板不生效 by xu 20260116
  5774. this.__toggleCollapseInternal(e, "dblclick");
  5775. },
  5776. // 功能说明:移除 click.detail==2 兜底,避免双击同时触发 click+dblclick 导致“折叠又立刻展开” by xu 20260116
  5777. },
  5778. [
  5779. Vue.h("div", { class: "ss-sidebar-panel__title" }, [
  5780. this.iconClass
  5781. ? Vue.h(SsIcon, { class: this.iconClass + " ss-sidebar-panel__icon" })
  5782. : this.icon
  5783. ? Vue.h(SsIcon, { name: this.icon, size: "16px", class: "ss-sidebar-panel__icon" })
  5784. : null,
  5785. Vue.h("span", null, this.title),
  5786. this.count !== "" ? Vue.h("span", { class: "ss-sidebar-panel__count" }, `(${this.count})`) : null,
  5787. ]),
  5788. Vue.h("div", { class: "ss-sidebar-panel__tools" }, [
  5789. this.closable
  5790. ? Vue.h(
  5791. "button",
  5792. {
  5793. type: "button",
  5794. class: "ss-sidebar-icon-btn ss-sidebar-header-btn",
  5795. title: "清空",
  5796. onClick: (e) => {
  5797. e.stopPropagation();
  5798. this.$emit("clear");
  5799. },
  5800. },
  5801. [Vue.h(SsIcon, { class: "menu-base-icon icon-cl" })]
  5802. )
  5803. : null,
  5804. ]),
  5805. ]
  5806. )
  5807. : null,
  5808. ]);
  5809. }
  5810. return Vue.h("div", { class: "ss-sidebar-panel" }, [
  5811. this.title
  5812. ? Vue.h(
  5813. "div",
  5814. {
  5815. class: "ss-sidebar-panel__header",
  5816. // 功能说明:折叠触发绑定到整个 header(dblclick + click.detail==2 兜底) by xu 20260116
  5817. onDblclick: (e) => {
  5818. e?.preventDefault?.();
  5819. e?.stopPropagation?.();
  5820. console.log("[SsSidebarList] header dblclick", { title: this.title, collapsed: false }); // 功能说明:直接打印用于排查多面板不生效 by xu 20260116
  5821. this.__toggleCollapseInternal(e, "dblclick");
  5822. },
  5823. // 功能说明:移除 click.detail==2 兜底,避免双击同时触发 click+dblclick 导致“折叠又立刻展开” by xu 20260116
  5824. },
  5825. [
  5826. Vue.h("div", { class: "ss-sidebar-panel__title" }, [
  5827. // 图标 + 标题(每个分区都有) by xu 20260106
  5828. this.iconClass
  5829. ? Vue.h(SsIcon, { class: this.iconClass + " ss-sidebar-panel__icon" })
  5830. : this.icon
  5831. ? Vue.h(SsIcon, { name: this.icon, size: "16px", class: "ss-sidebar-panel__icon" })
  5832. : null,
  5833. Vue.h("span", null, this.title),
  5834. // 数量回显:图表分区可不传 count by xu 20260106
  5835. this.count !== "" ? Vue.h("span", { class: "ss-sidebar-panel__count" }, `(${this.count})`) : null,
  5836. ]),
  5837. Vue.h("div", { class: "ss-sidebar-panel__tools" }, [
  5838. // header 条件(例如下拉框)+ 右侧搜索按钮 by xu 20260106
  5839. this.headerFilters?.length
  5840. ? Vue.h(
  5841. "div",
  5842. { class: "ss-sidebar-panel__filters" },
  5843. this.headerFilters.map(renderHeaderFilter).filter(Boolean)
  5844. )
  5845. : null,
  5846. this.headerSearchButton
  5847. ? Vue.h(
  5848. "button",
  5849. {
  5850. type: "button",
  5851. class: "ss-sidebar-icon-btn",
  5852. title: "搜索",
  5853. onClick: (e) => {
  5854. e.stopPropagation();
  5855. this.$emit("search", {
  5856. // headerFilters 内也可能包含 keyword by xu 20260106
  5857. keyword: activeKeyword,
  5858. filters: { ...(this.filterValues || {}) },
  5859. });
  5860. },
  5861. },
  5862. [Vue.h(SsIcon, { name: "search", size: "14px" })]
  5863. )
  5864. : null,
  5865. // 人员块:搜索框在 header 内 by xu 20260106
  5866. this.searchable && this.searchInHeader && !this.headerSearchButton
  5867. ? Vue.h("div", { class: "ss-sidebar-panel__searchInline" }, [
  5868. Vue.h("div", { class: "ss-sidebar-search is-inline" }, [
  5869. Vue.h(SsIcon, { name: "search", size: "14px", class: "ss-sidebar-search__prefix" }),
  5870. Vue.h("input", {
  5871. class: "ss-sidebar-search__input",
  5872. value: this.keyword,
  5873. placeholder: this.searchPlaceholder,
  5874. onInput: (e) => {
  5875. this.keyword = e?.target?.value ?? "";
  5876. },
  5877. }),
  5878. ]),
  5879. ])
  5880. : null,
  5881. this.closable
  5882. ? Vue.h(
  5883. "button",
  5884. {
  5885. type: "button",
  5886. class: "ss-sidebar-icon-btn ss-sidebar-header-btn",
  5887. title: "清空",
  5888. onClick: (e) => {
  5889. e.stopPropagation();
  5890. this.$emit("clear");
  5891. },
  5892. },
  5893. // 清空按钮使用 icon-base 的 icon-cl by xu 20260106
  5894. [Vue.h(SsIcon, { class: "menu-base-icon icon-cl" })]
  5895. )
  5896. : null,
  5897. ]),
  5898. ])
  5899. : null,
  5900. // 非 header 内搜索:独立一行 by xu 20260106
  5901. // headerSearchButton/headerFilters 已覆盖搜索能力时,不再额外渲染独立搜索行 by xu 20260106
  5902. this.searchable && !this.searchInHeader && !this.headerSearchButton && !hasHeaderKeyword
  5903. ? Vue.h("div", { class: "ss-sidebar-panel__search" }, [
  5904. Vue.h("div", { class: "ss-sidebar-search" }, [
  5905. Vue.h(SsIcon, { name: "search", size: "14px", class: "ss-sidebar-search__prefix" }),
  5906. Vue.h("input", {
  5907. class: "ss-sidebar-search__input",
  5908. value: this.keyword,
  5909. placeholder: this.searchPlaceholder,
  5910. onInput: (e) => {
  5911. this.keyword = e?.target?.value ?? "";
  5912. },
  5913. }),
  5914. ]),
  5915. ])
  5916. : null,
  5917. Vue.h(
  5918. "div",
  5919. { class: "ss-sidebar-list" },
  5920. filteredItems.map((item, idx) => {
  5921. const title = item?.title ?? "";
  5922. const tags = item?.tags || [];
  5923. const isPersonLayout = this.itemLayout === "person";
  5924. const hasTags = !isPersonLayout && (tags?.length > 0); // 列表项垂直对齐:有 tags 顶对齐 by xu 20260106
  5925. return Vue.h(
  5926. "div",
  5927. {
  5928. class: {
  5929. "ss-sidebar-list-item": true,
  5930. "is-first": idx === 0,
  5931. "is-person": isPersonLayout,
  5932. "has-tags": hasTags,
  5933. },
  5934. },
  5935. [
  5936. Vue.h("div", { class: "ss-sidebar-list-item__main" }, [
  5937. Vue.h(
  5938. "div",
  5939. { class: "ss-sidebar-list-item__title" },
  5940. Vue.h(
  5941. "span",
  5942. {
  5943. style: {
  5944. "white-space": "nowrap",
  5945. overflow: "hidden",
  5946. "text-overflow": "ellipsis",
  5947. },
  5948. },
  5949. title
  5950. )
  5951. ),
  5952. // 非人员布局才显示 tags by xu 20260106
  5953. !isPersonLayout && tags?.length
  5954. ? Vue.h(
  5955. "div",
  5956. { class: "ss-sidebar-list-item__tags" },
  5957. tags.map((tag) => {
  5958. const [k, v] = Object.entries(tag)[0] || ["", ""];
  5959. return Vue.h("span", { class: "ss-sidebar-tag", title: `${k}: ${v}` }, `${k}: ${v}`);
  5960. })
  5961. )
  5962. : null,
  5963. ]),
  5964. // 人员布局:中间保留“人员号”槽位 by xu 20260106
  5965. isPersonLayout
  5966. ? Vue.h(
  5967. "div",
  5968. { class: "ss-sidebar-list-item__meta", title: String(item?.meta ?? "") },
  5969. item?.meta ?? ""
  5970. )
  5971. : null,
  5972. this.itemAction
  5973. ? Vue.h(
  5974. "button",
  5975. {
  5976. type: "button",
  5977. class: {
  5978. // item 操作按钮:默认无背景/无边框,hover 才高亮 by xu 20260106
  5979. "ss-sidebar-item-btn": true,
  5980. },
  5981. title: isSelectedMode ? "移除" : "选择",
  5982. onClick: (e) => {
  5983. e.stopPropagation();
  5984. if (isSelectedMode) this.$emit("remove", item);
  5985. else this.$emit("select", item);
  5986. },
  5987. },
  5988. [
  5989. // item 移除图标使用 icon-base 的 icon-cl by xu 20260106
  5990. isSelectedMode
  5991. ? Vue.h(SsIcon, { class: "menu-base-icon icon-cl" })
  5992. : Vue.h(SsIcon, { name: "check", size: "14px" }),
  5993. ]
  5994. )
  5995. : null,
  5996. ]
  5997. );
  5998. })
  5999. ),
  6000. ]);
  6001. },
  6002. };
  6003. // ss-sidebar-report-table:右侧“统计表/报表”面板(pstatList grtjlbm=51 聚拢渲染) by xu 20260115
  6004. const SsSidebarReportTable = {
  6005. name: "SsSidebarReportTable",
  6006. props: {
  6007. title: { type: String, default: "" },
  6008. iconClass: { type: String, default: "" },
  6009. icon: { type: String, default: "" },
  6010. items: { type: Array, default: () => [] }, // pstatList(grtjlbm=51) 数组
  6011. onOpen: { type: Function, default: null }, // (srv, ctx) => void
  6012. collapsible: { type: Boolean, default: true }, // 功能说明:是否允许双击 header 折叠/展开 by xu 20260116
  6013. collapsed: { type: Boolean, default: false }, // 功能说明:折叠态仅展示 header by xu 20260116
  6014. },
  6015. emits: ["open", "toggle-collapse"],
  6016. data() {
  6017. return {}; // 功能说明:折叠状态完全由 props.collapsed 驱动 by xu 20260116
  6018. },
  6019. methods: {
  6020. __toggleCollapseInternal(e, source) {
  6021. if (!this.collapsible) return;
  6022. const next = !this.collapsed;
  6023. console.log("[SsSidebarReportTable] toggle emit", { title: this.title, source, to: next }); // 功能说明:直接打印用于排查多面板不生效 by xu 20260116
  6024. this.$emit("toggle-collapse");
  6025. },
  6026. },
  6027. render() {
  6028. const SsIcon = Vue.resolveComponent("ss-icon");
  6029. const list = this.items || [];
  6030. if (!this.title && !list.length) return null;
  6031. const header = this.title
  6032. ? Vue.h(
  6033. "div",
  6034. {
  6035. class: "ss-sidebar-panel__header",
  6036. // 功能说明:折叠触发绑定到整个 header(dblclick + click.detail==2 兜底) by xu 20260116
  6037. onDblclick: (e) => {
  6038. e?.preventDefault?.();
  6039. e?.stopPropagation?.();
  6040. console.log("[SsSidebarReportTable] header dblclick", { title: this.title, collapsed: this.collapsed }); // 功能说明:直接打印用于排查多面板不生效 by xu 20260116
  6041. this.__toggleCollapseInternal(e, "dblclick");
  6042. },
  6043. // 功能说明:移除 click.detail==2 兜底,避免双击同时触发 click+dblclick 导致“折叠又立刻展开” by xu 20260116
  6044. },
  6045. [
  6046. Vue.h("div", { class: "ss-sidebar-panel__title" }, [
  6047. this.iconClass
  6048. ? Vue.h(SsIcon, { class: this.iconClass + " ss-sidebar-panel__icon" })
  6049. : this.icon
  6050. ? Vue.h(SsIcon, { name: this.icon, size: "16px", class: "ss-sidebar-panel__icon" })
  6051. : null,
  6052. Vue.h("span", null, this.title),
  6053. ]),
  6054. Vue.h("div", { class: "ss-sidebar-panel__tools" }),
  6055. ])
  6056. : null;
  6057. const renderReport = (report) => {
  6058. const title = String(report?.mc ?? "");
  6059. const mx = Array.isArray(report?.grtjmxList) ? report.grtjmxList : [];
  6060. if (!title && !mx.length) return null;
  6061. // 功能说明:每个报表对象渲染为一个 table(有边框、无圆角、表间距10px;样式由 base.css 统一控制) by xu 20260115
  6062. const cols = Math.max(1, mx.length);
  6063. // 功能说明:table 外层包一层 wrap,子项过多时支持横向滚动 by xu 20260115
  6064. return Vue.h("div", { class: "ss-sidebar-report-table-wrap" }, [
  6065. Vue.h(
  6066. "table",
  6067. { class: "ss-sidebar-report-table" },
  6068. [
  6069. Vue.h("thead", null, [
  6070. Vue.h("tr", null, [
  6071. Vue.h(
  6072. "th",
  6073. { class: "ss-sidebar-report-table__title", colspan: cols },
  6074. Vue.h("div", { class: "ss-sidebar-report-table__title-content" }, [
  6075. Vue.h("span", { class: "ss-sidebar-report-table__dot" }),
  6076. Vue.h("span", { class: "ss-sidebar-report-table__title-text", title }, title),
  6077. ])
  6078. ),
  6079. ]),
  6080. ]),
  6081. Vue.h("tbody", null, [
  6082. Vue.h(
  6083. "tr",
  6084. null,
  6085. mx.map((cell) => {
  6086. const text = String(cell?.mc ?? "");
  6087. const srv = {
  6088. servName: cell?.fwm ?? "",
  6089. dest: cell?.bjm ?? "",
  6090. title: text,
  6091. width: cell?.width,
  6092. height: cell?.height,
  6093. minHeight: cell?.height,
  6094. maxHeight: cell?.height,
  6095. showTitle: text,
  6096. };
  6097. return Vue.h(
  6098. "td",
  6099. {
  6100. class: "ss-sidebar-report-table__cell",
  6101. title: text,
  6102. onClick: (e) => {
  6103. e?.stopPropagation?.();
  6104. try {
  6105. this.onOpen?.(srv, { report, cell });
  6106. } catch (_) {}
  6107. this.$emit("open", { report, cell, srv });
  6108. },
  6109. },
  6110. text
  6111. );
  6112. })
  6113. ),
  6114. ]),
  6115. ]
  6116. ),
  6117. ]);
  6118. };
  6119. // 功能说明:报表面板增加独立 class,便于 base.css 统一控制 padding/间距 by xu 20260115
  6120. return Vue.h("div", { class: "ss-sidebar-panel ss-sidebar-report-panel" }, [
  6121. header,
  6122. this.collapsed
  6123. ? null
  6124. : Vue.h(
  6125. "div",
  6126. // 功能说明:报表列表滚动/高度样式下沉到 base.css,避免写在 DOM 上 by xu 20260115
  6127. { class: "ss-sidebar-report__list" },
  6128. list.map(renderReport).filter(Boolean)
  6129. ),
  6130. ]);
  6131. },
  6132. };
  6133. // 组件文档补全(JSDoc) by xu 20260108
  6134. /**
  6135. * SsSidebar(objList 右侧边栏容器)
  6136. *
  6137. * 用途:
  6138. * - 统一渲染顶部按钮栏(buttons)
  6139. * - 统一渲染中间业务面板(list panels,可拖拽调高度)
  6140. * - 统一渲染底部图表(chart panels,内部用 ss-sidebar-chart-hover)
  6141. *
  6142. * 调用示例:
  6143. * ```html
  6144. * <ss-sidebar :buttons="sidebarButtons" :panels="sidebarPanels" @remove="handleSidebarRemove" />
  6145. * ```
  6146. *
  6147. * Props:
  6148. * - `buttons`:顶部按钮配置数组
  6149. * - `panels`:分区配置数组(`type: 'list' | 'chart'`)
  6150. *
  6151. * Events(向外透传):
  6152. * - `remove(item)`:来自 list 面板移除
  6153. * - `select(item)`:来自 list 面板选择(如后续需要)
  6154. */
  6155. const SsSidebar = {
  6156. name: "SsSidebar",
  6157. props: {
  6158. buttons: { type: Array, default: () => [] },
  6159. charts: { type: Array, default: () => [] },
  6160. list: { type: Array, default: () => [] }, // legacy
  6161. listMode: { type: String, default: "search" }, // legacy
  6162. panels: { type: Array, default: () => [] },
  6163. },
  6164. emits: ["select", "remove"],
  6165. data() {
  6166. return {
  6167. // 业务面板高度(索引 -> px) by xu 20260106
  6168. sectionHeights: [],
  6169. sectionCollapsed: [], // 功能说明:面板折叠状态(sectionPanels 索引) by xu 20260116
  6170. sectionHeightsExpanded: [], // 功能说明:面板展开高度缓存(用于折叠后恢复) by xu 20260116
  6171. chartCollapsed: [], // 功能说明:图表面板折叠状态(chartPanels 索引) by xu 20260116
  6172. chartHeaderTitleDownAt: [], // 功能说明:双击检测绑定到 chart 标题区 by xu 20260116
  6173. reportCollapsed: [], // 功能说明:报表面板折叠状态(reportPanels 索引) by xu 20260116
  6174. resizeTimer: null,
  6175. resizing: false,
  6176. resizeIndex: -1,
  6177. resizeStartY: 0,
  6178. resizeStartPrev: 0,
  6179. resizeStartNext: 0,
  6180. };
  6181. },
  6182. methods: {
  6183. // 初始化默认高度(只在第一次/面板数量变化时补齐) by xu 20260106
  6184. ensureSectionHeights(sectionCount) {
  6185. if (!Array.isArray(this.sectionHeights)) this.sectionHeights = [];
  6186. if (this.sectionHeights.length === sectionCount) return;
  6187. const next = [];
  6188. for (let i = 0; i < sectionCount; i++) {
  6189. next[i] = this.sectionHeights[i] ?? 190; // 默认高度 by xu 20260106
  6190. }
  6191. this.sectionHeights = next;
  6192. // 功能说明:面板数量变化时补齐折叠/缓存数组长度 by xu 20260116
  6193. this.sectionCollapsed = Array.from({ length: sectionCount }, (_, i) => !!this.sectionCollapsed?.[i]);
  6194. this.sectionHeightsExpanded = Array.from({ length: sectionCount }, (_, i) => this.sectionHeightsExpanded?.[i] ?? null);
  6195. },
  6196. toggleSectionCollapse(index) {
  6197. // 功能说明:双击 header 折叠/展开 section 面板(仅控制高度与内容渲染) by xu 20260116
  6198. const i = Number(index);
  6199. if (isNaN(i) || i < 0) return;
  6200. // 功能说明:加更细粒度日志,定位“多面板折叠无视觉效果”的根因(高度是否真的变、DOM 是否更新) by xu 20260116
  6201. const collapsedHeight = 37; // 功能说明:header(35) + panel 边框(2),避免 flex shrink 导致 header 变 25px by xu 20260116
  6202. const cur = !!this.sectionCollapsed?.[i];
  6203. console.log("[SsSidebar] toggleSectionCollapse", { index: i, to: !cur, prevHeight: this.sectionHeights?.[i] }); // 功能说明:直接打印用于排查多面板不生效 by xu 20260116
  6204. if (!cur) {
  6205. this.sectionHeightsExpanded[i] = this.sectionHeights[i] ?? 190;
  6206. this.sectionHeights.splice(i, 1, collapsedHeight);
  6207. } else {
  6208. const restore = Number(this.sectionHeightsExpanded?.[i] ?? 190) || 190;
  6209. this.sectionHeights.splice(i, 1, restore);
  6210. }
  6211. this.sectionCollapsed.splice(i, 1, !cur);
  6212. console.log("[SsSidebar] section state(after)", {
  6213. index: i,
  6214. height: this.sectionHeights?.[i],
  6215. collapsed: this.sectionCollapsed?.[i],
  6216. allHeights: Array.from(this.sectionHeights || []),
  6217. allCollapsed: Array.from(this.sectionCollapsed || []),
  6218. }); // 功能说明:直接打印用于排查多面板不生效 by xu 20260116
  6219. Vue.nextTick(() => {
  6220. try {
  6221. const root = this.$el;
  6222. const sections = root?.querySelectorAll?.(".ss-sidebar-section");
  6223. const el = sections?.[i];
  6224. const rectH = el?.getBoundingClientRect?.().height;
  6225. console.log("[SsSidebar] section dom(beforeFix)", { index: i, styleHeight: el?.style?.height, rectH }); // 功能说明:直接打印用于排查多面板不生效 by xu 20260116
  6226. // 功能说明:若渲染未把 height patch 到 DOM,则在 nextTick 强制同步一次(并打印) by xu 20260116
  6227. const targetH = (Number(this.sectionHeights?.[i] ?? 190) || 190) + "px";
  6228. if (el && el.style && el.style.height !== targetH) {
  6229. el.style.height = targetH;
  6230. }
  6231. if (el?.classList) {
  6232. el.classList.toggle("is-collapsed", !!this.sectionCollapsed?.[i]);
  6233. }
  6234. const rectAfter = el?.getBoundingClientRect?.().height;
  6235. console.log("[SsSidebar] section dom(afterFix)", { index: i, styleHeight: el?.style?.height, rectH: rectAfter, targetH }); // 功能说明:直接打印用于排查多面板不生效 by xu 20260116
  6236. } catch (err) {
  6237. console.log("[SsSidebar] section dom(afterTick) error", err); // 功能说明:直接打印用于排查多面板不生效 by xu 20260116
  6238. }
  6239. });
  6240. },
  6241. toggleChartCollapse(index) {
  6242. // 功能说明:双击 header 折叠/展开底部 chart 面板(隐藏/显示 chart-hover) by xu 20260116
  6243. const i = Number(index);
  6244. if (isNaN(i) || i < 0) return;
  6245. const cur = !!this.chartCollapsed?.[i];
  6246. console.log("[SsSidebar] toggleChartCollapse", { index: i, to: !cur }); // 功能说明:直接打印用于排查多面板不生效 by xu 20260116
  6247. this.chartCollapsed.splice(i, 1, !cur);
  6248. console.log("[SsSidebar] chart state(after)", { index: i, collapsed: this.chartCollapsed?.[i], allCollapsed: Array.from(this.chartCollapsed || []) }); // 功能说明:直接打印用于排查多面板不生效 by xu 20260116
  6249. Vue.nextTick(() => {
  6250. try {
  6251. const root = this.$el;
  6252. const el = root?.querySelector?.(`.ss-sidebar-chart-panel[data-chart-idx="${i}"]`);
  6253. console.log("[SsSidebar] chart dom(beforeFix)", { index: i, found: !!el }); // 功能说明:直接打印用于排查多面板不生效 by xu 20260116
  6254. if (el?.classList) el.classList.toggle("is-collapsed", !!this.chartCollapsed?.[i]);
  6255. console.log("[SsSidebar] chart dom(afterFix)", { index: i, collapsed: !!this.chartCollapsed?.[i] }); // 功能说明:直接打印用于排查多面板不生效 by xu 20260116
  6256. } catch (err) {
  6257. console.log("[SsSidebar] chart dom(afterTick) error", err); // 功能说明:直接打印用于排查多面板不生效 by xu 20260116
  6258. }
  6259. });
  6260. },
  6261. toggleReportCollapse(index) {
  6262. // 功能说明:双击 header 折叠/展开底部 report-table 面板(隐藏/显示表格) by xu 20260116
  6263. const i = Number(index);
  6264. if (isNaN(i) || i < 0) return;
  6265. const cur = !!this.reportCollapsed?.[i];
  6266. console.log("[SsSidebar] toggleReportCollapse", { index: i, to: !cur }); // 功能说明:直接打印用于排查多面板不生效 by xu 20260116
  6267. this.reportCollapsed.splice(i, 1, !cur);
  6268. console.log("[SsSidebar] report state(after)", { index: i, collapsed: this.reportCollapsed?.[i], allCollapsed: Array.from(this.reportCollapsed || []) }); // 功能说明:直接打印用于排查多面板不生效 by xu 20260116
  6269. Vue.nextTick(() => {
  6270. try {
  6271. const root = this.$el;
  6272. const el = root?.querySelector?.(`.ss-sidebar-report-panel[data-report-idx="${i}"]`);
  6273. console.log("[SsSidebar] report dom(beforeFix)", { index: i, found: !!el }); // 功能说明:直接打印用于排查多面板不生效 by xu 20260116
  6274. if (el?.classList) el.classList.toggle("is-collapsed", !!this.reportCollapsed?.[i]);
  6275. console.log("[SsSidebar] report dom(afterFix)", { index: i, collapsed: !!this.reportCollapsed?.[i] }); // 功能说明:直接打印用于排查多面板不生效 by xu 20260116
  6276. } catch (err) {
  6277. console.log("[SsSidebar] report dom(afterTick) error", err); // 功能说明:直接打印用于排查多面板不生效 by xu 20260116
  6278. }
  6279. });
  6280. },
  6281. startResize(index, e) {
  6282. if (e?.preventDefault) e.preventDefault();
  6283. if (e?.stopPropagation) e.stopPropagation();
  6284. if (this.resizing) return;
  6285. // 长按 0.5s 后才进入拖拽调高度 by xu 20260106
  6286. clearTimeout(this.resizeTimer);
  6287. const startY = e?.clientY ?? 0;
  6288. const gapEl = e?.currentTarget;
  6289. this.resizeTimer = setTimeout(() => {
  6290. this.resizing = true;
  6291. this.resizeIndex = index;
  6292. this.resizeStartY = startY;
  6293. this.resizeStartPrev = this.sectionHeights[index] ?? 190;
  6294. this.resizeStartNext = this.sectionHeights[index + 1] ?? 190;
  6295. gapEl?.classList?.add("is-active");
  6296. window.addEventListener("pointermove", this.onResizeMove, { passive: false });
  6297. window.addEventListener("pointerup", this.endResize, { passive: false, once: true });
  6298. }, 500);
  6299. },
  6300. onResizeMove(e) {
  6301. if (!this.resizing) return;
  6302. if (e?.preventDefault) e.preventDefault();
  6303. const dy = (e?.clientY ?? 0) - this.resizeStartY;
  6304. const minPanelHeight = 83; // header(35) + listMin(48) by xu 20260106
  6305. const prev = Math.max(minPanelHeight, this.resizeStartPrev + dy);
  6306. const next = Math.max(minPanelHeight, this.resizeStartNext - dy);
  6307. // 若其中一个达到最小值,则停止继续挤压 by xu 20260106
  6308. const adjustedDy = prev - this.resizeStartPrev;
  6309. const nextAdjusted = this.resizeStartNext - adjustedDy;
  6310. this.sectionHeights.splice(this.resizeIndex, 1, prev);
  6311. this.sectionHeights.splice(this.resizeIndex + 1, 1, Math.max(minPanelHeight, nextAdjusted));
  6312. },
  6313. endResize(e) {
  6314. clearTimeout(this.resizeTimer);
  6315. this.resizeTimer = null;
  6316. if (!this.resizing) return;
  6317. if (e?.preventDefault) e.preventDefault();
  6318. const activeGaps = document.querySelectorAll(".ss-sidebar-gap.is-active");
  6319. activeGaps.forEach((g) => g.classList.remove("is-active"));
  6320. this.resizing = false;
  6321. this.resizeIndex = -1;
  6322. window.removeEventListener("pointermove", this.onResizeMove);
  6323. },
  6324. },
  6325. mounted() {
  6326. clearTimeout(this.resizeTimer);
  6327. this.resizeTimer = null;
  6328. // 功能说明:暂时回退为固定底部留白方案(CSS 控制),后续再定位遮挡根因 by xu 20260115
  6329. },
  6330. beforeUnmount() {
  6331. clearTimeout(this.resizeTimer);
  6332. this.resizeTimer = null;
  6333. window.removeEventListener("pointermove", this.onResizeMove);
  6334. },
  6335. render() {
  6336. const SsSidebarButtonsComp = Vue.resolveComponent("ss-sidebar-buttons");
  6337. const SsSidebarChartComp = Vue.resolveComponent("ss-sidebar-chart");
  6338. const SsSidebarListComp = Vue.resolveComponent("ss-sidebar-list");
  6339. const SsSidebarReportTableComp = Vue.resolveComponent("ss-sidebar-report-table");
  6340. const SsIcon = Vue.resolveComponent("ss-icon");
  6341. // 支持 panels(多分区),list/listMode 作为 legacy 兜底 by xu 20260106
  6342. const panels = (this.panels || []).length
  6343. ? this.panels
  6344. : this.list?.length
  6345. ? [{ type: "list", title: "已选", icon: "", mode: this.listMode, items: this.list }]
  6346. : [];
  6347. // 功能说明:右侧栏强制移除“对象”tab(兼容后端返回 rbarObj/rbarobj 或直接返回中文“对象”标题) by xu 20260116
  6348. const panelsNoObj = (panels || []).filter((p) => {
  6349. const k = String(p?._tabKey ?? "").trim().toLowerCase();
  6350. const t = String(p?.title ?? "").trim();
  6351. if (k === "rbarobj") return false;
  6352. if (t === "对象") return false;
  6353. return true;
  6354. });
  6355. // 功能说明:report-table 作为底部报表区(放在统计图下面),不参与可拖拽 section 面板 by xu 20260115
  6356. const sectionPanels = panelsNoObj.filter((p) => p?.type !== "chart" && p?.type !== "report-table");
  6357. const chartPanels = panelsNoObj.filter((p) => p?.type === "chart");
  6358. const reportPanels = panelsNoObj.filter((p) => p?.type === "report-table");
  6359. this.ensureSectionHeights(sectionPanels.length);
  6360. // 功能说明:补齐 chart/report 折叠数组长度 by xu 20260116
  6361. this.chartCollapsed = Array.from({ length: chartPanels.length }, (_, i) => !!this.chartCollapsed?.[i]);
  6362. this.chartHeaderTitleDownAt = Array.from({ length: chartPanels.length }, (_, i) => this.chartHeaderTitleDownAt?.[i] ?? 0);
  6363. this.reportCollapsed = Array.from({ length: reportPanels.length }, (_, i) => !!this.reportCollapsed?.[i]);
  6364. return Vue.h("div", { class: "ss-sidebar" }, [
  6365. this.buttons?.length ? Vue.h(SsSidebarButtonsComp, { items: this.buttons }) : null,
  6366. Vue.h(
  6367. "div",
  6368. { class: "ss-sidebar__inner" },
  6369. [
  6370. ...(this.charts || []).map((c) =>
  6371. Vue.h(SsSidebarChartComp, { options: c?.options || {}, height: c?.height || "200px" })
  6372. ),
  6373. // 可拖拽的业务面板容器 by xu 20260106
  6374. Vue.h(
  6375. "div",
  6376. { class: "ss-sidebar-sections", style: { flex: "0 0 auto" } }, // 功能说明:禁止 flex shrink,避免面板很多时 header 被压缩成一条线 by xu 20260116
  6377. sectionPanels.flatMap((p, idx) => {
  6378. // 功能说明:section 面板支持 list / report-table 两种渲染 by xu 20260115
  6379. const panelContent =
  6380. p?.type === "report-table"
  6381. ? Vue.h(SsSidebarReportTableComp, {
  6382. key: `ss-sidebar-report-in-section-${idx}-${p?.title ?? ""}`, // 功能说明:加 key 防止多面板时组件实例复用导致折叠态不更新 by xu 20260116
  6383. title: p?.title ?? "",
  6384. icon: p?.icon ?? "",
  6385. iconClass: p?.iconClass ?? "",
  6386. items: p?.items || [],
  6387. onOpen: (srv, ctx) => p?.onOpen?.(srv, ctx),
  6388. })
  6389. : Vue.h(SsSidebarListComp, {
  6390. key: `ss-sidebar-list-${idx}-${p?.title ?? ""}`, // 功能说明:加 key 防止多面板时组件实例复用导致折叠态不更新 by xu 20260116
  6391. title: p?.title ?? "",
  6392. icon: p?.icon ?? "",
  6393. count: p?.count ?? (p?.items?.length ?? ""),
  6394. closable: !!p?.closable,
  6395. searchable: !!p?.searchable,
  6396. searchInHeader: !!p?.searchInHeader,
  6397. headerFilters: p?.headerFilters || [],
  6398. headerSearchButton: !!p?.headerSearchButton,
  6399. searchPlaceholder: p?.searchPlaceholder ?? "搜索",
  6400. itemLayout: p?.itemLayout ?? "simple",
  6401. itemAction: p?.itemAction ?? true, // 功能说明:面板可配置是否显示 hover 操作按钮(之前未透传导致总显示) by xu 20260114
  6402. collapsible: true, // 功能说明:双击 header 可折叠/展开 by xu 20260116
  6403. collapsed: !!this.sectionCollapsed?.[idx], // 功能说明:折叠态仅展示 header by xu 20260116
  6404. onToggleCollapse: () => this.toggleSectionCollapse?.(idx), // 功能说明:折叠事件回调 by xu 20260116
  6405. iconClass: p?.iconClass ?? "",
  6406. items: p?.items || [],
  6407. mode: p?.mode || "search",
  6408. onSelect: (item) => this.$emit("select", item),
  6409. onRemove: (item) => this.$emit("remove", item),
  6410. // closable = 清空分区数据 by xu 20260106
  6411. onClear: () => p?.onClear?.(),
  6412. onSearch: (payload) => p?.onSearch?.(payload),
  6413. });
  6414. const section = Vue.h(
  6415. "div",
  6416. {
  6417. class: { "ss-sidebar-section": true, "is-collapsed": !!this.sectionCollapsed?.[idx] }, // 功能说明:折叠态加 class,配合 CSS 裁剪溢出(否则高度变了内容仍 overflow visible) by xu 20260116
  6418. key: `ss-sidebar-section-${idx}-${p?.type ?? "list"}-${p?.title ?? ""}`, // 功能说明:加 key 保证 section 节点稳定更新 by xu 20260116
  6419. style: { height: (this.sectionHeights[idx] ?? 190) + "px", flex: "0 0 auto" }, // 功能说明:禁止 flex shrink,避免折叠/展开后 header 高度被挤压 by xu 20260116
  6420. },
  6421. [
  6422. Vue.h("div", { class: "ss-sidebar-section__content" }, [
  6423. panelContent,
  6424. ]),
  6425. ]
  6426. );
  6427. const gap =
  6428. idx < sectionPanels.length - 1
  6429. ? Vue.h("div", {
  6430. class: "ss-sidebar-gap",
  6431. onPointerdown: (e) => this.startResize(idx, e),
  6432. })
  6433. : null;
  6434. return gap ? [section, gap] : [section];
  6435. })
  6436. ),
  6437. // 图表区固定在底部(hover 弹出大图) by xu 20260106
  6438. ...chartPanels.map((p, chartIdx) =>
  6439. Vue.h(
  6440. "div",
  6441. {
  6442. class: {
  6443. "ss-sidebar-panel": true,
  6444. "ss-sidebar-chart-panel": true,
  6445. "is-collapsed": !!this.chartCollapsed?.[chartIdx],
  6446. }, // 功能说明:图表折叠态加 class,DOM 兜底隐藏内容 by xu 20260116
  6447. style: { flex: "0 0 auto", minHeight: "37px" }, // 功能说明:禁止 flex shrink + 折叠态最小高度兜底,避免 header 被压扁 by xu 20260116
  6448. "data-chart-idx": chartIdx, // 功能说明:便于 toggleChartCollapse nextTick 精确定位 DOM by xu 20260116
  6449. key: `ss-sidebar-chart-${chartIdx}-${p?.title ?? ""}`, // 功能说明:加 key 防止多图表时实例复用 by xu 20260116
  6450. },
  6451. [
  6452. p?.title
  6453. ? Vue.h(
  6454. "div",
  6455. {
  6456. class: "ss-sidebar-panel__header",
  6457. // 功能说明:折叠触发绑定到整个 header(仅 dblclick,避免双击触发两次) by xu 20260116
  6458. onDblclick: (e) => {
  6459. e?.preventDefault?.();
  6460. e?.stopPropagation?.();
  6461. console.log("[SsSidebar] chart header dblclick", { idx: chartIdx, title: p?.title }); // 功能说明:直接打印用于排查多面板不生效 by xu 20260116
  6462. this.toggleChartCollapse?.(chartIdx);
  6463. },
  6464. // 功能说明:移除 click.detail==2 兜底,避免双击同时触发 click+dblclick 导致“折叠又立刻展开” by xu 20260116
  6465. },
  6466. [
  6467. Vue.h("div", { class: "ss-sidebar-panel__title" }, [
  6468. p?.iconClass
  6469. ? Vue.h(SsIcon, { class: p.iconClass + " ss-sidebar-panel__icon" })
  6470. : p?.icon
  6471. ? Vue.h(SsIcon, { name: p.icon, size: "16px", class: "ss-sidebar-panel__icon" })
  6472. : null,
  6473. Vue.h("span", null, p.title),
  6474. ]),
  6475. Vue.h("div", { class: "ss-sidebar-panel__tools" }),
  6476. ])
  6477. : null,
  6478. // hover 大图也展示与 header 一致的图标/标题 by xu 20260108
  6479. (this.chartCollapsed?.[chartIdx])
  6480. ? null
  6481. : Vue.h(Vue.resolveComponent("ss-sidebar-chart-hover"), {
  6482. title: p?.title ?? "",
  6483. iconClass: p?.iconClass ?? "",
  6484. icon: p?.icon ?? "",
  6485. options: p?.options || {},
  6486. height: p?.height || "240px",
  6487. }),
  6488. ])
  6489. ),
  6490. // 功能说明:统计表(report-table)放在统计图下面,统一走 ss-sidebar-report-table 渲染 by xu 20260115
  6491. ...reportPanels.map((p, reportIdx) =>
  6492. // 功能说明:report-table 顶部也需要折叠态 class/定位属性,DOM 兜底隐藏内容 by xu 20260116
  6493. Vue.h("div", {
  6494. class: {
  6495. "ss-sidebar-report-panel-wrap": true,
  6496. "ss-sidebar-report-panel": true,
  6497. "is-collapsed": !!this.reportCollapsed?.[reportIdx],
  6498. }, // 功能说明:报表折叠态加 class,DOM 兜底隐藏内容 by xu 20260116
  6499. style: { flex: "0 0 auto", minHeight: "37px" }, // 功能说明:禁止 flex shrink + 折叠态最小高度兜底,避免 header 被压扁 by xu 20260116
  6500. "data-report-idx": reportIdx, // 功能说明:便于 toggleReportCollapse nextTick 精确定位 DOM by xu 20260116
  6501. key: `ss-sidebar-report-wrap-${reportIdx}-${p?.title ?? ""}`, // 功能说明:加 key 防止多面板时实例复用导致折叠态不更新 by xu 20260116
  6502. }, [
  6503. // 功能说明:ss-sidebar-report-table 自带 ss-sidebar-panel 外壳,这里不重复包裹 by xu 20260115
  6504. Vue.h(SsSidebarReportTableComp, {
  6505. key: `ss-sidebar-report-${reportIdx}-${p?.title ?? ""}`, // 功能说明:加 key 防止多面板时实例复用导致折叠态不更新 by xu 20260116
  6506. title: p?.title ?? "",
  6507. icon: p?.icon ?? "",
  6508. iconClass: p?.iconClass ?? "",
  6509. items: p?.items || [],
  6510. collapsible: true, // 功能说明:允许双击 header 折叠/展开 by xu 20260116
  6511. collapsed: !!this.reportCollapsed?.[reportIdx], // 功能说明:折叠态隐藏表格 by xu 20260116
  6512. onToggleCollapse: () => this.toggleReportCollapse?.(reportIdx), // 功能说明:报表折叠事件回调 by xu 20260116
  6513. onOpen: (srv, ctx) => p?.onOpen?.(srv, ctx),
  6514. }),
  6515. ])
  6516. ),
  6517. ].filter(Boolean)
  6518. ),
  6519. ]);
  6520. },
  6521. };
  6522. // ss-folder-card 文件夹卡片
  6523. const SsFolderCard = {
  6524. name: "SsFolderCard",
  6525. props: {
  6526. item: {
  6527. type: Object,
  6528. required: true,
  6529. },
  6530. },
  6531. data() {
  6532. return {
  6533. showButtons: false,
  6534. };
  6535. },
  6536. emits: ["click", "change"],
  6537. setup(props, { emit }) {
  6538. const item = props.item;
  6539. const showChildren = ref(false);
  6540. const eventBus = window.parent.sharedEventBus;
  6541. const itemWidth = Vue.computed(() => {
  6542. // 功能说明:页面改为 grid 等分布局后,卡片宽度交给容器控制,这里固定 100% by xu 20260116
  6543. return "100%";
  6544. });
  6545. onMounted(() => {
  6546. eventBus.subscribe("folderPath", (path) => {
  6547. const currentPath = path || [];
  6548. // 如果当前文件夹不在路径中,则销毁视图
  6549. if (
  6550. !currentPath.some((item) => item.folder.title === props.item.title)
  6551. ) {
  6552. showChildren.value = false;
  6553. }
  6554. });
  6555. });
  6556. const onItemClick = (e) => {
  6557. if (e && e.stopPropagation) {
  6558. e.stopPropagation();
  6559. }
  6560. // 单击只处理 active 状态
  6561. if (e && e.currentTarget) {
  6562. const allListCards = document.querySelectorAll(
  6563. ".knowledge-item-container"
  6564. );
  6565. const allFolderCards = document.querySelectorAll(".ss-folder-list");
  6566. allListCards.forEach((card) => card.classList.remove("active"));
  6567. allFolderCards.forEach((card) => card.classList.remove("active"));
  6568. e.currentTarget.classList.add("active");
  6569. } else {
  6570. // 如果是数据对象,需要找到对应的 DOM 元素
  6571. const allListCards = document.querySelectorAll(
  6572. ".knowledge-item-container"
  6573. );
  6574. const allFolderCards = document.querySelectorAll(".ss-folder-list");
  6575. allListCards.forEach((card) => card.classList.remove("active"));
  6576. allFolderCards.forEach((card) => card.classList.remove("active"));
  6577. // 找到标题匹配的文件夹元素
  6578. const targetFolder = Array.from(allFolderCards).find((card) =>
  6579. card.textContent.includes(e.title)
  6580. );
  6581. if (targetFolder) {
  6582. targetFolder.classList.add("active");
  6583. }
  6584. }
  6585. emit("click", item);
  6586. };
  6587. // 修改双击处理函数
  6588. const handleFolderDblClick = (folder, e) => {
  6589. if (e) e.stopPropagation();
  6590. if (folder.children?.length) {
  6591. showChildren.value = true;
  6592. const pathInfo = {
  6593. title: folder.title,
  6594. folder: folder,
  6595. };
  6596. const currentPath = eventBus.getState("folderPath") || [];
  6597. if (!currentPath.some((item) => item.title === folder.title)) {
  6598. eventBus.publish("folderPath", [...currentPath, pathInfo]);
  6599. }
  6600. }
  6601. };
  6602. const onItemChange = (e, icon, index) => {
  6603. e.stopPropagation();
  6604. props.item.buttons[0].onclick();
  6605. // emit("change", { item: props.item, icon, index });
  6606. };
  6607. return {
  6608. item,
  6609. itemWidth,
  6610. showChildren,
  6611. onItemClick,
  6612. onItemChange,
  6613. handleFolderDblClick,
  6614. };
  6615. },
  6616. render() {
  6617. const SsCartListIcon = Vue.resolveComponent("ss-cart-list-icon");
  6618. if (this.showChildren) {
  6619. return h(SsFolderCartView, {
  6620. folder: this.item,
  6621. });
  6622. }
  6623. return Vue.h(
  6624. "div",
  6625. {
  6626. class: { "ss-folder-list": true, active: this.item.active },
  6627. onClick: (e) => {
  6628. e.stopPropagation();
  6629. this.onItemClick(e);
  6630. },
  6631. onDblclick: (e) => this.handleFolderDblClick(this.item, e),
  6632. style: { width: this.itemWidth },
  6633. },
  6634. [
  6635. // 文件夹特有的装饰元素
  6636. Vue.h("div", { class: "ss-folder-list-trapezoid" }),
  6637. Vue.h("div", { class: "ss-folder-list-top-transparent" }),
  6638. Vue.h("div", { class: "ss-folder-list-top" }),
  6639. Vue.h("div", { class: "ss-folder-list-right" }),
  6640. // header 部分(按钮)
  6641. this.item?.buttons?.length > 0 &&
  6642. Vue.h(
  6643. "div",
  6644. {
  6645. class: "header",
  6646. onMouseenter: () => (this.showButtons = true),
  6647. onMouseleave: () => (this.showButtons = false),
  6648. onClick: (e) => this.onItemChange(e, this.item.buttons[0], 0),
  6649. },
  6650. [
  6651. // this.item?.buttons?.length > 0 &&
  6652. Vue.h("div", {
  6653. class: "cart-list-setting cart-list-icon",
  6654. title: this.item?.buttons?.[0]?.title,
  6655. }),
  6656. // this.item?.buttons?.length > 0 &&
  6657. this.showButtons &&
  6658. this.item?.buttons?.length > 1 &&
  6659. Vue.h(
  6660. "div",
  6661. {
  6662. class: "cart-list-button-popup",
  6663. },
  6664. this.item.buttons.map((btn) =>
  6665. Vue.h(
  6666. "div",
  6667. {
  6668. onClick: (e) => {
  6669. e.stopPropagation();
  6670. btn.onclick?.();
  6671. },
  6672. },
  6673. [
  6674. btn.class &&
  6675. Vue.h(SsCartListIcon, {
  6676. class: [btn.class],
  6677. }),
  6678. Vue.h("span", null, btn.title),
  6679. ]
  6680. )
  6681. )
  6682. ),
  6683. ]
  6684. ),
  6685. // body 部分
  6686. Vue.h("div", { class: "body" }, [
  6687. Vue.h("div", { class: "box-header" }, [
  6688. Vue.h("div", null, this.item.title),
  6689. ]),
  6690. Vue.h(
  6691. "div",
  6692. {
  6693. class: !this.item.thumb ? "no-thumb box-body" : "box-body",
  6694. },
  6695. [
  6696. this.item.thumb
  6697. ? Vue.h("div", { class: "left" }, [
  6698. Vue.h("img", {
  6699. src: this.item.thumb,
  6700. alt: "Thumbnail",
  6701. class: "imgUnHandle",
  6702. style: {
  6703. "object-fit": "cover",
  6704. width: "100%",
  6705. height: "100%",
  6706. },
  6707. }),
  6708. ])
  6709. : null,
  6710. Vue.h("div", { class: "right" }, [
  6711. ...this.item.tags.map((tag) => {
  6712. const [key, value] = Object.entries(tag)[0];
  6713. return Vue.h(
  6714. "div",
  6715. {
  6716. class: "title",
  6717. title: `${key}: ${value}`,
  6718. },
  6719. `${key}: ${value}`
  6720. );
  6721. }),
  6722. ]),
  6723. ]
  6724. ),
  6725. ]),
  6726. ]
  6727. );
  6728. },
  6729. };
  6730. // SsFolderCartView 组件 - 用于显示文件夹内容
  6731. const SsFolderCartView = {
  6732. name: "SsFolderCartView",
  6733. props: {
  6734. folder: {
  6735. type: Object,
  6736. required: true,
  6737. },
  6738. },
  6739. emits: ["click"],
  6740. setup(props, { emit }) {
  6741. const eventBus = window.parent.sharedEventBus;
  6742. const currentFolder = ref(props.folder);
  6743. const showChildren = ref(false);
  6744. const onItemClick = (e) => {
  6745. if (e && e.stopPropagation) {
  6746. e.stopPropagation();
  6747. }
  6748. // 单击只处理 active 状态
  6749. if (e && e.currentTarget) {
  6750. const allListCards = document.querySelectorAll(
  6751. ".knowledge-item-container"
  6752. );
  6753. const allFolderCards = document.querySelectorAll(".ss-folder-list");
  6754. allListCards.forEach((card) => card.classList.remove("active"));
  6755. allFolderCards.forEach((card) => card.classList.remove("active"));
  6756. e.currentTarget.classList.add("active");
  6757. } else {
  6758. // 如果是数据对象,需要找到对应的 DOM 元素
  6759. const allListCards = document.querySelectorAll(
  6760. ".knowledge-item-container"
  6761. );
  6762. const allFolderCards = document.querySelectorAll(".ss-folder-list");
  6763. allListCards.forEach((card) => card.classList.remove("active"));
  6764. allFolderCards.forEach((card) => card.classList.remove("active"));
  6765. // 找到标题匹配的文件夹元素
  6766. const targetFolder = Array.from(allFolderCards).find((card) =>
  6767. card.textContent.includes(e.title)
  6768. );
  6769. if (targetFolder) {
  6770. targetFolder.classList.add("active");
  6771. }
  6772. }
  6773. emit("click", props.folder);
  6774. };
  6775. const handleFolderDblClick = (folder, e) => {
  6776. if (e) e.stopPropagation();
  6777. if (folder.children?.length) {
  6778. showChildren.value = true;
  6779. const pathInfo = {
  6780. title: folder.title,
  6781. folder: folder,
  6782. };
  6783. const currentPath = eventBus.getState("folderPath") || [];
  6784. if (!currentPath.some((item) => item.title === folder.title)) {
  6785. eventBus.publish("folderPath", [...currentPath, pathInfo]);
  6786. currentFolder.value = folder;
  6787. }
  6788. }
  6789. };
  6790. const goBack = (targetFolder) => {
  6791. if (targetFolder === null) {
  6792. // 返回根目录
  6793. eventBus.publish("folderPath", []);
  6794. } else {
  6795. currentFolder.value = targetFolder;
  6796. }
  6797. };
  6798. return {
  6799. currentFolder,
  6800. showChildren,
  6801. onItemClick,
  6802. handleFolderDblClick,
  6803. goBack,
  6804. };
  6805. },
  6806. render() {
  6807. return h(
  6808. "div",
  6809. {
  6810. class: "page-container",
  6811. style: {
  6812. position: "fixed",
  6813. top: 0,
  6814. left: 0,
  6815. width: "100%",
  6816. height: "100%",
  6817. background: "var(--lightgray)",
  6818. padding: "20px 0",
  6819. zIndex: 1000,
  6820. },
  6821. },
  6822. [
  6823. // 搜索栏
  6824. h("div", { class: "search-bar" }, [
  6825. h("div", { class: "search-bar-contaienr" }, [
  6826. h(SsBreadcrumb, {
  6827. level: {
  6828. onBack: this.goBack,
  6829. },
  6830. }),
  6831. ]),
  6832. ]),
  6833. // 内容区域
  6834. h(
  6835. "div",
  6836. {
  6837. class: "content-area item-content-area",
  6838. style: { gap: "20px" },
  6839. },
  6840. [
  6841. ...(this.currentFolder.children || []).map((child, index) =>
  6842. h(child.children ? SsFolderCard : SsListCard, {
  6843. key: index,
  6844. item: child,
  6845. onClick: (e) => this.onItemClick(e),
  6846. onDblclick: (e) => this.handleFolderDblClick(child, e),
  6847. })
  6848. ),
  6849. ]
  6850. ),
  6851. ]
  6852. );
  6853. },
  6854. };
  6855. // ss-page分页
  6856. const SsPage = {
  6857. name: "SsPage",
  6858. props: {
  6859. total: {
  6860. type: Number,
  6861. required: true,
  6862. },
  6863. size: {
  6864. type: Number,
  6865. default: 10,
  6866. },
  6867. page: {
  6868. type: Number,
  6869. default: 1,
  6870. },
  6871. onChange: {
  6872. type: Function,
  6873. default: () => { },
  6874. },
  6875. },
  6876. setup(props) {
  6877. const totalItems = ref(props.total); // 总条目数
  6878. const totalPages = ref(Math.ceil(props.total / props.size));
  6879. const currentPage = ref(props.page); // 当前页码
  6880. // 计算显示的信息
  6881. const pageInfo = ref(
  6882. `共${totalItems.value}条,第 ${currentPage.value}/${totalPages.value} 页`
  6883. );
  6884. // 上一页的逻辑
  6885. const goToPreviousPage = (e) => {
  6886. e.preventDefault(); // 阻止默认行为
  6887. if (currentPage.value > 1) {
  6888. currentPage.value -= 1;
  6889. updatePageInfo();
  6890. props.onChange?.({
  6891. pageNo: currentPage.value, // 当前页码
  6892. rowNumPer: props.size, // 每页条数
  6893. rowNum: props.total, // 总记录数
  6894. });
  6895. }
  6896. };
  6897. // 下一页的逻辑
  6898. const goToNextPage = (e) => {
  6899. e.preventDefault(); // 阻止默认行为
  6900. if (currentPage.value < totalPages.value) {
  6901. currentPage.value += 1;
  6902. updatePageInfo();
  6903. props.onChange?.({
  6904. pageNo: currentPage.value, // 当前页码
  6905. rowNumPer: props.size, // 每页条数
  6906. rowNum: props.total, // 总记录数
  6907. });
  6908. }
  6909. };
  6910. // 更新页码信息的函数
  6911. const updatePageInfo = () => {
  6912. pageInfo.value = `共${totalItems.value}条,第 ${currentPage.value}/${totalPages.value} 页`;
  6913. };
  6914. return {
  6915. pageInfo,
  6916. totalPages,
  6917. goToPreviousPage,
  6918. goToNextPage,
  6919. };
  6920. },
  6921. render(props, { slots, emit }) {
  6922. return Vue.h("div", { class: "pager-container" }, [
  6923. Vue.h("input", { type: "hidden", name: "rowNum", value: props.total }),
  6924. Vue.h("input", {
  6925. type: "hidden",
  6926. name: "rowNumPer",
  6927. value: props.size,
  6928. }),
  6929. Vue.h("input", {
  6930. type: "hidden",
  6931. name: "pageCount",
  6932. value: this.totalPages,
  6933. }),
  6934. Vue.h("input", { type: "hidden", name: "pageNo", value: props.page }),
  6935. Vue.h("div", { class: "pager-content" }, [
  6936. Vue.h("div", { class: "info" }, this.pageInfo),
  6937. Vue.h(
  6938. "div",
  6939. { class: "btn" },
  6940. Vue.h(
  6941. "button",
  6942. { onClick: (e) => this.goToPreviousPage(e) },
  6943. "上一页"
  6944. )
  6945. ),
  6946. Vue.h(
  6947. "div",
  6948. { class: "btn" },
  6949. Vue.h("button", { onClick: (e) => this.goToNextPage(e) }, "下一页")
  6950. ),
  6951. ]),
  6952. ]);
  6953. },
  6954. };
  6955. // ss-right-info 一级页面右边栏
  6956. const SSRightInfo = {
  6957. name: "SSRightInfo",
  6958. setup() {
  6959. // 初始化响应式数据
  6960. const item = ref({
  6961. thumb: "images/example/project-img.png", // 更换为适合你项目的实际路径
  6962. title: "工业和信息化产业高质量发展资金",
  6963. });
  6964. return {
  6965. item,
  6966. };
  6967. },
  6968. render() {
  6969. return Vue.h("div", { class: "info-container" }, [
  6970. Vue.h("div", { class: "header" }, [
  6971. Vue.h("div", [
  6972. Vue.h("img", {
  6973. src: this.item.thumb,
  6974. class: "imgUnHandle",
  6975. style: { "object-fit": "cover", width: "100%", height: "100%" },
  6976. }), // 将 ImageViewer 替换为 img 标签
  6977. ]),
  6978. Vue.h("div", [Vue.h("div", this.item.title)]),
  6979. ]),
  6980. Vue.h("div", { class: "section-container" }, [
  6981. Vue.h("div", { class: "section" }, [
  6982. Vue.h("div", { class: "title" }, "合同"),
  6983. Vue.h("div", { class: "text" }, "合同总金额:42,399,320"),
  6984. Vue.h(
  6985. "div",
  6986. { class: "a" },
  6987. "《工业和信息化产业高质量发展资金补助合同》"
  6988. ),
  6989. ]),
  6990. Vue.h("div", { class: "section" }, [
  6991. Vue.h("div", { class: "title" }, "发票"),
  6992. Vue.h("div", { class: "text" }, "应开发票总额:42,399,320"),
  6993. Vue.h("div", { class: "text" }, "已开发票金额:17,235,345"),
  6994. Vue.h("div", { class: "text" }, "未开发票金额:25,163,975"),
  6995. ]),
  6996. Vue.h("div", { class: "section" }, [
  6997. Vue.h("div", { class: "title" }, "项目组成员"),
  6998. Vue.h("div", { class: "text" }, "我司:3人"),
  6999. Vue.h("div", { class: "text" }, "对方:2人"),
  7000. Vue.h("div", { class: "text" }, "项目负责人:张三"),
  7001. ]),
  7002. Vue.h("div", { class: "section" }, [
  7003. Vue.h("div", { class: "title" }, "采购"),
  7004. Vue.h("div", { class: "text" }, "总额:999,320"),
  7005. Vue.h("div", { class: "text" }, "已付金额:335,345"),
  7006. Vue.h("div", { class: "text" }, "未付金额:663,975"),
  7007. ]),
  7008. ]),
  7009. ]);
  7010. },
  7011. };
  7012. //
  7013. const SsSuccessPopup = {
  7014. name: "SsSuccessPopup",
  7015. props: {
  7016. right: {
  7017. type: String,
  7018. default: "20px",
  7019. },
  7020. bottom: {
  7021. type: String,
  7022. default: "calc(100% + 5px)",
  7023. },
  7024. },
  7025. setup(props, { expose }) {
  7026. // 响应式状态:是否可见
  7027. const visible = ref(false);
  7028. // 计算样式
  7029. const style = computed(() => {
  7030. return {
  7031. "--message-dialog-right": props.right,
  7032. "--message-dialog-bottom": props.bottom,
  7033. };
  7034. });
  7035. // 显示对话框的方法
  7036. const show = () => {
  7037. visible.value = true;
  7038. };
  7039. // 隐藏对话框的方法
  7040. const hide = () => {
  7041. visible.value = false;
  7042. };
  7043. // 将方法暴露给外部使用
  7044. expose({ show, hide });
  7045. // 返回渲染函数
  7046. return () => {
  7047. if (!visible.value) return null;
  7048. const SsIcon = resolveComponent("ss-icon");
  7049. return h(
  7050. "div",
  7051. {
  7052. class: "success-popup",
  7053. style: style.value,
  7054. onClick: (e) => e.stopPropagation(),
  7055. },
  7056. [
  7057. h("div", { class: "left" }, [
  7058. h("div", { class: "icon" }, [
  7059. h(SsIcon, { name: "check", size: "36px" }),
  7060. ]),
  7061. ]),
  7062. h("div", { class: "right" }, [
  7063. h("div", { class: "title" }, "提交成功"),
  7064. h("div", { class: "desc" }, "您的信息已成功提交。"),
  7065. ]),
  7066. ]
  7067. );
  7068. };
  7069. },
  7070. };
  7071. const SsErrorDialog = {
  7072. name: "SsErrorDialog",
  7073. setup(props, { emit }) {
  7074. const visible = ref(false);
  7075. const style = computed(() => {
  7076. return {};
  7077. });
  7078. const show = () => {
  7079. visible.value = true;
  7080. };
  7081. const hide = () => {
  7082. visible.value = false;
  7083. };
  7084. const onBack = () => {
  7085. emit("back");
  7086. hide();
  7087. };
  7088. return {
  7089. visible,
  7090. style,
  7091. show,
  7092. hide,
  7093. onBack,
  7094. };
  7095. },
  7096. render() {
  7097. const SsIcon = resolveComponent("ss-icon");
  7098. return this.visible
  7099. ? h(
  7100. "div",
  7101. {
  7102. class: "errorDialog",
  7103. style: this.style,
  7104. onClick: (event) => event.stopPropagation(),
  7105. },
  7106. [
  7107. h("div", { class: "body" }, [
  7108. h("div", { class: "left" }, [
  7109. h("div", { class: "icon" }, [
  7110. h(SsIcon, { name: "close", size: "36px" }),
  7111. ]),
  7112. ]),
  7113. h("div", { class: "right" }, [
  7114. h("div", { class: "title" }, "操作失败"),
  7115. h("div", { class: "desc" }, "请点击返回以继续。"),
  7116. ]),
  7117. ]),
  7118. h("div", { class: "footer" }, [
  7119. h("div", { class: "left" }),
  7120. h("div", { class: "right" }, [
  7121. h(
  7122. "div",
  7123. {
  7124. class: "btn",
  7125. onClick: this.onBack,
  7126. },
  7127. [h(SsIcon, { name: "arrow-left-line" }), h("div", "返回")]
  7128. ),
  7129. ]),
  7130. ]),
  7131. ]
  7132. )
  7133. : null;
  7134. },
  7135. };
  7136. /**
  7137. * 审核链条
  7138. * @name ss-verify
  7139. * @param { Array } verify-list 审核节点列表
  7140. * @property { Array } verify-list 审核节点列表
  7141. * @example <ss-verify :verify-list="verifyList"></ss-verify>
  7142. * verify-list [
  7143. * {
  7144. * groupName: "", // 群组名称
  7145. * open: true, // 默认是否展开
  7146. * children:[ //群组里的人员
  7147. * {
  7148. * thumb: "images/example/user-4.png", // 头像
  7149. * name: "李丽思 ", // 姓名
  7150. * role: "人事处处长", // 角色
  7151. * description: "同意。", // 审核意见
  7152. * time: "09:38 08/11", // 审核时间
  7153. * video: false, // false不显示/true显示 视频icon
  7154. * link: false, // false不显示/true显示 链接icon 后续应该是附件
  7155. * }
  7156. * ]
  7157. * }
  7158. * ]
  7159. */
  7160. const SsVerify = {
  7161. name: "SsVerify",
  7162. props: {
  7163. verifyList: {
  7164. type: Array,
  7165. required: true,
  7166. },
  7167. },
  7168. setup(props) {
  7169. const toggleOpen = (item) => {
  7170. item.open = !item.open;
  7171. };
  7172. onMounted(() => {
  7173. setTimeout(() => {
  7174. const lastOpenGroup = document.querySelector(".group-item-last-open");
  7175. console.log("lastOpenGroup", lastOpenGroup);
  7176. if (lastOpenGroup) {
  7177. const nodes = $(lastOpenGroup).find(".verify-node-container");
  7178. if (nodes.length) {
  7179. let totalHeight = 0;
  7180. const gudingHeight = 100;
  7181. if (nodes.length === 1) {
  7182. totalHeight = gudingHeight;
  7183. } else {
  7184. // 累加除最后一个节点外的所有节点高度
  7185. for (let i = 0; i < nodes.length - 1; i++) {
  7186. totalHeight += $(nodes[i]).outerHeight();
  7187. }
  7188. totalHeight += gudingHeight;
  7189. }
  7190. console.log("节点信息:", {
  7191. 节点总数: nodes.length,
  7192. 计算后的高度: totalHeight,
  7193. });
  7194. lastOpenGroup.style.setProperty(
  7195. "--group-line-height",
  7196. `${totalHeight}px`
  7197. );
  7198. }
  7199. }
  7200. }, 0);
  7201. });
  7202. return {
  7203. toggleOpen,
  7204. };
  7205. },
  7206. render() {
  7207. const SsIcon = resolveComponent("ss-icon");
  7208. const SsCommonIcon = resolveComponent("ss-common-icon");
  7209. const SsVerifyNode = resolveComponent("ss-verify-node");
  7210. return h(
  7211. "div",
  7212. { class: "verify-nodes" },
  7213. this.verifyList.map((item, i) =>
  7214. h(
  7215. "div",
  7216. {
  7217. key: i,
  7218. class: {
  7219. "group-item": true,
  7220. "group-item-last-open":
  7221. i === this.verifyList.length - 1 && item.open,
  7222. },
  7223. },
  7224. [
  7225. h(
  7226. "div",
  7227. {
  7228. class: "group-item-title",
  7229. onClick: () => this.toggleOpen(item),
  7230. },
  7231. [
  7232. h("div", { class: "icon" }, [
  7233. item.open
  7234. ? h(SsCommonIcon, { class: "common-icon-folder-open" })
  7235. : h(SsCommonIcon, { class: "common-icon-folder-close" }),
  7236. h(
  7237. "div",
  7238. {
  7239. class: "num",
  7240. style: { top: item.open ? "60%" : "55%" },
  7241. },
  7242. item.children?.length || 0
  7243. ),
  7244. ]),
  7245. h("div", { class: "name" }, item.groupName),
  7246. ]
  7247. ),
  7248. item.open && item.children?.length > 0
  7249. ? h(
  7250. "div",
  7251. { class: "group-item-children" },
  7252. item.children.map((citem, j) =>
  7253. h(SsVerifyNode, {
  7254. key: j,
  7255. item: citem,
  7256. // isGroup: i + 1 !== this.verifyList.length,
  7257. isGroup: true,
  7258. })
  7259. )
  7260. )
  7261. : null,
  7262. ]
  7263. )
  7264. )
  7265. );
  7266. },
  7267. };
  7268. /**
  7269. * 审核页面的审核节点
  7270. * @name ss-verify-node
  7271. * @param {Object} item 审核节点信息
  7272. * @param {Boolean} isGroup 是否为分组节点
  7273. */
  7274. const SsVerifyNode = {
  7275. name: "SsVerifyNode",
  7276. props: {
  7277. item: {
  7278. type: Object,
  7279. required: true,
  7280. },
  7281. isGroup: {
  7282. type: Boolean,
  7283. default: false,
  7284. },
  7285. },
  7286. render() {
  7287. const SsIcon = resolveComponent("ss-icon");
  7288. const SsCommonIcon = resolveComponent("ss-common-icon");
  7289. return Vue.h("div", { class: "verify-node-container" }, [
  7290. Vue.h("div", { class: "info" }, [
  7291. Vue.h("div", { class: "avatar" }, [
  7292. Vue.h("img", {
  7293. src: this.item.thumb,
  7294. style: {
  7295. width: "50px",
  7296. height: "50px",
  7297. borderRadius: "50%",
  7298. },
  7299. }),
  7300. ]),
  7301. Vue.h("div", { class: "desc" }, [
  7302. Vue.h("div", this.item.name),
  7303. Vue.h("div", this.item.role),
  7304. ]),
  7305. Vue.h("div", { class: "link" }, [
  7306. Vue.h("div", [
  7307. this.item.video
  7308. ? Vue.h(SsCommonIcon, { class: "common-icon-video" })
  7309. : null,
  7310. this.item.link
  7311. ? Vue.h(SsCommonIcon, {
  7312. class: "common-icon-paper-clip",
  7313. })
  7314. : null,
  7315. ]),
  7316. ]),
  7317. ]),
  7318. Vue.h(
  7319. "div",
  7320. {
  7321. class: {
  7322. description: true,
  7323. link: this.isGroup,
  7324. },
  7325. attrs: { "data-num": "3" },
  7326. },
  7327. [Vue.h("div", this.item.description)]
  7328. ),
  7329. Vue.h("div", { class: "time" }, this.item.time),
  7330. ]);
  7331. },
  7332. };
  7333. /**
  7334. * 智能识别图片的左侧图片播放 可以放大缩小旋转图片
  7335. * @name ss-orc-img-box
  7336. * @param { Object } image-obj 包含图片的url, 和图片的名称
  7337. *
  7338. */
  7339. const SsOrcImgBox = {
  7340. name: "SsOrcImgBox",
  7341. props: {
  7342. imageObj: {
  7343. type: Object,
  7344. required: true,
  7345. },
  7346. },
  7347. setup(props) {
  7348. const zoom = ref(1);
  7349. const rotation = ref(0);
  7350. const containerWidth = ref(0);
  7351. const containerHeight = ref(0);
  7352. const container = ref(null);
  7353. const imgPosition = ref({ x: 0, y: 0 });
  7354. const isDragging = ref(false);
  7355. const lastMousePosition = ref({ x: 0, y: 0 });
  7356. const imgStyle = computed(() => ({
  7357. width: `${zoom.value * 100}%`,
  7358. height: `${zoom.value * 100}%`,
  7359. transform: `rotate(${rotation.value}deg) translate(${imgPosition.value.x}px, ${imgPosition.value.y}px)`,
  7360. transformOrigin: "center center",
  7361. cursor: isDragging.value ? "grabbing" : "grab",
  7362. }));
  7363. const resetZoom = () => {
  7364. zoom.value = 1;
  7365. rotation.value = rotation.value + 90;
  7366. imgPosition.value = { x: 0, y: 0 };
  7367. };
  7368. const handleRangeChange = (event) => {
  7369. const value = event.target.value / 50; // 0 到 100 映射到 0 到 2 的缩放
  7370. zoom.value = Math.max(value, 0.1); // 设置最小缩放值为 0.1
  7371. };
  7372. const updateImgBoxDimensions = () => {
  7373. if (container.value) {
  7374. containerWidth.value = container.value.clientWidth;
  7375. containerHeight.value = container.value.clientHeight;
  7376. }
  7377. };
  7378. const onMouseDown = (event) => {
  7379. isDragging.value = true;
  7380. lastMousePosition.value = { x: event.clientX, y: event.clientY };
  7381. };
  7382. const onMouseMove = (event) => {
  7383. if (isDragging.value) {
  7384. const dx = event.clientX - lastMousePosition.value.x;
  7385. const dy = event.clientY - lastMousePosition.value.y;
  7386. // 防止旋转后拖动的x,y反转
  7387. // 首先将当前旋转角度从度数转换为弧度,因为 JavaScript 的 Math 库使用弧度
  7388. const angle = rotation.value * (Math.PI / 180);
  7389. // 使用基本的二维旋转矩阵将原始位移 dx 和 dy 转换为旋转后的位移 rotatedDx 和 rotatedDy。
  7390. const rotatedDx = dx * Math.cos(angle) + dy * Math.sin(angle);
  7391. const rotatedDy = dy * Math.cos(angle) - dx * Math.sin(angle);
  7392. imgPosition.value = {
  7393. x: imgPosition.value.x + rotatedDx,
  7394. y: imgPosition.value.y + rotatedDy,
  7395. };
  7396. lastMousePosition.value = { x: event.clientX, y: event.clientY };
  7397. }
  7398. };
  7399. const onMouseUp = () => {
  7400. isDragging.value = false;
  7401. };
  7402. onMounted(() => {
  7403. nextTick(() => {
  7404. updateImgBoxDimensions();
  7405. window.addEventListener("resize", updateImgBoxDimensions);
  7406. window.addEventListener("mousemove", onMouseMove);
  7407. window.addEventListener("mouseup", onMouseUp);
  7408. });
  7409. });
  7410. return {
  7411. zoom,
  7412. rotation,
  7413. container,
  7414. imgStyle,
  7415. resetZoom,
  7416. handleRangeChange,
  7417. containerWidth,
  7418. containerHeight,
  7419. onMouseDown,
  7420. imgPosition,
  7421. };
  7422. },
  7423. render() {
  7424. const SsIcon = resolveComponent("ss-icon");
  7425. return h("div", { class: "ocr-img-box" }, [
  7426. h("div", { class: "img-bar" }, [
  7427. h("div", this.imageObj.name),
  7428. h("div", { class: "action-bar" }, [
  7429. h("div", { class: "ocr-img-range-box" }, [
  7430. h("input", {
  7431. type: "range",
  7432. min: 0,
  7433. max: 100,
  7434. value: this.zoom * 50, // 初始位置为50
  7435. onInput: this.handleRangeChange,
  7436. }),
  7437. h("span", { class: "line" }),
  7438. ]),
  7439. h(SsIcon, {
  7440. name: "reset",
  7441. size: "26px",
  7442. onClick: this.resetZoom,
  7443. }),
  7444. ]),
  7445. ]),
  7446. h("div", { class: "img-viewer", ref: "container" }, [
  7447. h(
  7448. "div",
  7449. {
  7450. class: "img-box",
  7451. style: {
  7452. width: `${this.containerWidth}px`,
  7453. height: `${this.containerHeight}px`,
  7454. overflow: "hidden",
  7455. position: "relative",
  7456. },
  7457. },
  7458. [
  7459. h("img", {
  7460. src: this.imageObj.thumb,
  7461. style: this.imgStyle,
  7462. class: "zoomable-img",
  7463. onMousedown: this.onMouseDown,
  7464. }),
  7465. ]
  7466. ),
  7467. ]),
  7468. ]);
  7469. },
  7470. };
  7471. // 搜索输入框组件
  7472. const SsSearchInput = {
  7473. name: "SsSearchInput",
  7474. props: {
  7475. name: String,
  7476. placeholder: String,
  7477. width: {
  7478. type: String,
  7479. default: "100px",
  7480. },
  7481. modelValue: String,
  7482. },
  7483. emits: ["update:modelValue", "search"],
  7484. setup(props, { emit }) {
  7485. const handleInput = (e) => {
  7486. emit("update:modelValue", e.target.value);
  7487. };
  7488. const handleKeyup = (e) => {
  7489. if (e.key === "Enter") {
  7490. emit("search");
  7491. }
  7492. };
  7493. return { handleInput, handleKeyup };
  7494. },
  7495. render() {
  7496. return h(
  7497. "div",
  7498. {
  7499. class: "input",
  7500. style: this.width ? { width: this.width } : undefined,
  7501. },
  7502. [
  7503. h("input", {
  7504. name: this.name,
  7505. placeholder: this.placeholder,
  7506. value: this.modelValue,
  7507. onInput: this.handleInput,
  7508. onKeyup: this.handleKeyup,
  7509. }),
  7510. ]
  7511. );
  7512. },
  7513. };
  7514. // ss-search-date-picker 日期时间选择器组件
  7515. const SsSearchDatePicker = {
  7516. name: "SsSearchDatePicker",
  7517. props: {
  7518. modelValue: {
  7519. type: [String, Number, Date],
  7520. default: "",
  7521. },
  7522. name: {
  7523. type: String,
  7524. required: true,
  7525. },
  7526. type: {
  7527. type: String,
  7528. default: "date",
  7529. validator: (value) => ["date", "datetime", "time"].includes(value),
  7530. },
  7531. fmt: {
  7532. type: String,
  7533. default: null,
  7534. },
  7535. placeholder: {
  7536. type: String,
  7537. default: "",
  7538. },
  7539. width: {
  7540. type: String,
  7541. default: "100%",
  7542. },
  7543. },
  7544. emits: ["update:modelValue"],
  7545. setup(props, { emit }) {
  7546. const errMsg = ref("");
  7547. const validate = () => {
  7548. if (window.ssVm) {
  7549. const result = window.ssVm.validateField(props.name);
  7550. console.log("validate", window.ssVm.validateField(props.name));
  7551. errMsg.value = result.valid ? "" : result.message;
  7552. }
  7553. };
  7554. // 根据type确定默认格式
  7555. const defaultFormat = computed(() => {
  7556. switch (props.type) {
  7557. case "datetime":
  7558. return "YYYY-MM-DD HH:mm:ss";
  7559. case "date":
  7560. return "YYYY-MM-DD";
  7561. case "time":
  7562. return "HH:mm:ss";
  7563. }
  7564. });
  7565. const convertJavaFormatToElement = (javaFormat) => {
  7566. if (!javaFormat) return null;
  7567. return javaFormat
  7568. .replace("yyyy", "YYYY")
  7569. .replace("MM", "MM")
  7570. .replace("dd", "DD")
  7571. .replace("HH", "HH")
  7572. .replace("mm", "mm")
  7573. .replace("ss", "ss");
  7574. };
  7575. const finalFormat = computed(() => {
  7576. if (props.fmt) {
  7577. return convertJavaFormatToElement(props.fmt);
  7578. }
  7579. return defaultFormat.value;
  7580. });
  7581. // 使用 resolveComponent 获取组件
  7582. const ElDatePicker = resolveComponent("ElDatePicker");
  7583. const ElTimePicker = resolveComponent("ElTimePicker");
  7584. const SsFormIcon = resolveComponent("SsFormIcon");
  7585. const ElIcon = resolveComponent("ElIcon");
  7586. let useTimePicker = true;
  7587. //"yyyy-MM-dd HH:mm:ss"; "日期字符串格式在java的写法",传到本组件fmt属性也是按这个格式
  7588. if (props.fmt) {
  7589. //有fmt属性,则以fmt属性优先判断类型
  7590. if (/[dMy]/.test(props.fmt)) {
  7591. //如果有传入日期格式,且含年月日
  7592. useTimePicker = false;
  7593. } else {
  7594. useTimePicker = true;
  7595. }
  7596. } else if (props.type !== "time") {
  7597. useTimePicker = false;
  7598. }
  7599. const dateType = computed(() => {
  7600. const fmt = props.fmt || "";
  7601. if (fmt.includes("HH:mm:ss")) {
  7602. return "datetime";
  7603. } else if (fmt.includes("HH:mm")) {
  7604. return "datetime";
  7605. } else if (fmt.includes("mm:ss")) {
  7606. return "time";
  7607. }
  7608. return "date";
  7609. });
  7610. const handleValueUpdate = (val) => {
  7611. emit("update:modelValue", val);
  7612. emit("change", val); // 同时触发 change 事件
  7613. setTimeout(() => {
  7614. validate();
  7615. }, 50);
  7616. };
  7617. return () =>
  7618. h(
  7619. "div",
  7620. { class: "ss-search-date-picker", style: { width: props.width } },
  7621. [
  7622. h("input", {
  7623. type: "hidden",
  7624. name: props.name,
  7625. value: props.modelValue,
  7626. }),
  7627. h(useTimePicker ? ElTimePicker : ElDatePicker, {
  7628. modelValue: props.modelValue,
  7629. "onUpdate:modelValue": handleValueUpdate,
  7630. type: dateType.value,
  7631. format: finalFormat.value,
  7632. "value-format": finalFormat.value,
  7633. clearable: true,
  7634. placeholder: props.placeholder,
  7635. class: "custom-date-picker", // 用于自定义样式
  7636. "time-arrow-control": props.type === "datetime", // 修改这里
  7637. size: "large", // 添加这一行,改为 large 尺寸
  7638. style: { width: "100%" },
  7639. "prefix-icon": h(SsFormIcon, { class: "form-icon-time" }),
  7640. }),
  7641. ]
  7642. );
  7643. },
  7644. };
  7645. // 搜索按钮组件(包含下拉按钮)
  7646. const SsSearchButton = {
  7647. name: "SsSearchButton",
  7648. props: {
  7649. text: {
  7650. type: String,
  7651. required: true,
  7652. },
  7653. iconClass: {
  7654. type: String,
  7655. required: false,
  7656. },
  7657. opt: {
  7658. type: Array,
  7659. default: () => [],
  7660. },
  7661. checkId: {
  7662. type: String,
  7663. default: "0",
  7664. },
  7665. width: { //add by Ben(20251225)
  7666. type: String,
  7667. required: false
  7668. },
  7669. id: { //add by Ben(20251225)
  7670. type: String,
  7671. required: false
  7672. },
  7673. },
  7674. emits: ["click"],
  7675. setup(props, { emit }) {
  7676. const currentId = ref(props.checkId || "0");
  7677. const showPopup = ref(false);
  7678. const handleMouseEnter = () => {
  7679. showPopup.value = true;
  7680. };
  7681. const handleMouseLeave = () => {
  7682. showPopup.value = false;
  7683. };
  7684. // 添加点击事件处理,阻止默认行为
  7685. const handleClick = (e) => {
  7686. e.preventDefault();
  7687. if (props.opt?.length > 0) {
  7688. const selectedOption =
  7689. currentId.value === "0"
  7690. ? props.opt[0]
  7691. : props.opt.find((opt) => opt.id === currentId.value);
  7692. if (selectedOption) {
  7693. selectedOption.callback?.();
  7694. }
  7695. } else {
  7696. emit("click", e);
  7697. }
  7698. };
  7699. // 获取显示文本
  7700. const getDisplayText = () => {
  7701. if (!props.opt?.length) return props.text;
  7702. const selectedOption =
  7703. currentId.value === "0"
  7704. ? props.opt[0]
  7705. : props.opt.find((opt) => opt.id === currentId.value);
  7706. return selectedOption ? selectedOption.desc : props.opt[0].desc;
  7707. };
  7708. return () =>
  7709. h(
  7710. "button",
  7711. {
  7712. class:
  7713. props.opt?.length > 0
  7714. ? "ss-drop-button ss-drop-button-more"
  7715. : "ss-drop-button",
  7716. type: "button", // 明确指定按钮类型为 button
  7717. onMouseenter: handleMouseEnter,
  7718. onMouseleave: handleMouseLeave,
  7719. onClick: handleClick, // 添加点击事件处理
  7720. style: { width: props.width }, //add by Ben(20251225)
  7721. id: props.id //add by Ben(20251225)
  7722. },
  7723. [
  7724. props.iconClass
  7725. ? h("span", {
  7726. class: props.iconClass,
  7727. style: { fontFamily: "iconfont", marginRight: "5px" },
  7728. })
  7729. : null,
  7730. h("span", getDisplayText()),
  7731. props.opt.length > 0 &&
  7732. showPopup.value &&
  7733. h(
  7734. "div",
  7735. {
  7736. class: "popup",
  7737. },
  7738. props.opt.map((item) =>
  7739. h(
  7740. "div",
  7741. {
  7742. onClick: (e) => {
  7743. e.preventDefault(); // 选项点击也阻止默认行为
  7744. e.stopPropagation(); // 阻止事件冒泡
  7745. currentId.value = item.id; // 更新当前选中的ID
  7746. item.callback();
  7747. showPopup.value = false; // 选择后关闭弹窗
  7748. },
  7749. },
  7750. item.desc
  7751. )
  7752. )
  7753. ),
  7754. ]
  7755. );
  7756. },
  7757. };
  7758. // 下拉按钮组件
  7759. const SsDropButton = {
  7760. name: "SsDropButton",
  7761. props: {
  7762. text: {
  7763. type: String,
  7764. required: true,
  7765. },
  7766. iconClass: {
  7767. type: String,
  7768. required: true,
  7769. },
  7770. opt: {
  7771. type: Array,
  7772. default: () => [],
  7773. },
  7774. checkId: {
  7775. type: String,
  7776. default: "0",
  7777. },
  7778. onclick: {
  7779. type: Function,
  7780. default: null,
  7781. },
  7782. },
  7783. setup(props) {
  7784. const currentId = ref(props.checkId || "0");
  7785. const showPopup = ref(false);
  7786. const handleMouseEnter = () => {
  7787. showPopup.value = true;
  7788. };
  7789. const handleMouseLeave = () => {
  7790. showPopup.value = false;
  7791. };
  7792. // 添加点击事件处理,阻止默认行为
  7793. const handleClick = (e) => {
  7794. e.preventDefault();
  7795. if (props.opt?.length > 0) {
  7796. const selectedOption =
  7797. currentId.value === "0"
  7798. ? props.opt[0]
  7799. : props.opt.find((opt) => opt.id === currentId.value);
  7800. if (selectedOption) {
  7801. selectedOption.callback?.();
  7802. }
  7803. } else if (props.onclick) {
  7804. props.onclick();
  7805. }
  7806. };
  7807. // 获取显示文本
  7808. const getDisplayText = () => {
  7809. if (!props.opt?.length) return props.text;
  7810. const selectedOption =
  7811. currentId.value === "0"
  7812. ? props.opt[0]
  7813. : props.opt.find((opt) => opt.id === currentId.value);
  7814. return selectedOption ? selectedOption.desc : props.opt[0].desc;
  7815. };
  7816. return () =>
  7817. h(
  7818. "button",
  7819. {
  7820. class:
  7821. props.opt?.length > 0
  7822. ? "ss-drop-button ss-drop-button-more"
  7823. : "ss-drop-button",
  7824. type: "button", // 明确指定按钮类型为 button
  7825. onMouseenter: handleMouseEnter,
  7826. onMouseleave: handleMouseLeave,
  7827. onClick: handleClick, // 添加点击事件处理
  7828. },
  7829. [
  7830. h("span", {
  7831. class: props.iconClass,
  7832. style: { fontFamily: "iconfont" },
  7833. }),
  7834. h("span", getDisplayText()),
  7835. props.opt.length > 0 &&
  7836. showPopup.value &&
  7837. h(
  7838. "div",
  7839. {
  7840. class: "popup",
  7841. },
  7842. props.opt.map((item) =>
  7843. h(
  7844. "div",
  7845. {
  7846. onClick: (e) => {
  7847. e.preventDefault(); // 选项点击也阻止默认行为
  7848. e.stopPropagation(); // 阻止事件冒泡
  7849. currentId.value = item.id; // 更新当前选中的ID
  7850. item.callback();
  7851. showPopup.value = false; // 选择后关闭弹窗
  7852. },
  7853. },
  7854. item.desc
  7855. )
  7856. )
  7857. ),
  7858. ]
  7859. );
  7860. },
  7861. };
  7862. /**
  7863. * 二级页面标签组件
  7864. * @name ss-sub-tab
  7865. * @description 用于展示二级页面的布局组件,包含左侧垂直标签导航(支持分组)和右侧iframe内容区
  7866. * @property {String} headerImage - 左侧顶部图片地址
  7867. * @property {Array} menuList - 菜单配置列表
  7868. * @property {Object} [activeMenu] - 当前选中的菜单项,不传则自动选择第一个可选菜单
  7869. * @property {Array} footerButtons - 底部按钮配置列表
  7870. */
  7871. /**
  7872. * SsSubTab 左侧菜单+iframe内容组件
  7873. * v3.0 改造:去掉顶部图片,改为图标+悬浮模式,iframe懒加载 by xu 20251216
  7874. */
  7875. const SsSubTab = {
  7876. name: "SsSubTab",
  7877. props: {
  7878. menuList: {
  7879. type: Array,
  7880. required: true,
  7881. },
  7882. activeMenu: {
  7883. type: String,
  7884. default: "",
  7885. },
  7886. footerButtons: {
  7887. type: Array,
  7888. default: () => [],
  7889. },
  7890. leftDisplay: {
  7891. type: Boolean,
  7892. default: true,
  7893. },
  7894. // v3.0 新增:菜单模式 collapse(悬浮展开) / fixed(始终收起) by xu 20251216
  7895. initialMode: {
  7896. type: String,
  7897. default: 'collapse',
  7898. },
  7899. },
  7900. emits: ["menu-change", "footer-click"],
  7901. setup(props, { emit }) {
  7902. // v3.0 新增:默认图标映射,使用icon-biz图标 by xu 20251216
  7903. const defaultIcons = [
  7904. 'icon-obj-ry', // 人员
  7905. 'icon-obj-dw', // 单位
  7906. 'icon-obj-gw', // 岗位
  7907. 'icon-biz-rc', // 人才
  7908. 'icon-biz-xc', // 巡查
  7909. 'icon-biz-cl', // 材料
  7910. 'icon-biz-men', // 门
  7911. 'icon-obj-xy' // 协议
  7912. ];
  7913. //功能: SsSubTab 支持后端下发 iconName + pobj/cobj 两级菜单 by xu 20251222
  7914. const isTrue = (v) => v === true || v === "true" || v === 1 || v === "1"; //功能 by xu 20251222
  7915. const resolveIconClass = (iconNameOrClass, fallbackIndex) => { //功能 by xu 20251222
  7916. const fallback = `menu-icon ${defaultIcons[fallbackIndex % defaultIcons.length]}`;
  7917. if (!iconNameOrClass) {
  7918. return fallback;
  7919. }
  7920. // 已经是完整 class(可能包含 menu-icon / menu-base-icon / 多个 class)
  7921. if (typeof iconNameOrClass === "string" && iconNameOrClass.indexOf(" ") > -1) {
  7922. return iconNameOrClass;
  7923. }
  7924. const iconName = iconNameOrClass;
  7925. if (iconName === "menu-icon" || iconName === "menu-base-icon") {
  7926. return fallback;
  7927. }
  7928. // 业务图标库:icon-biz / icon-obj -> menu-icon
  7929. if (
  7930. typeof iconName === "string" &&
  7931. (iconName.indexOf("icon-obj-") === 0 || iconName.indexOf("icon-biz-") === 0)
  7932. ) {
  7933. return `menu-icon ${iconName}`;
  7934. }
  7935. // 默认认为是 icon-base 图标 -> menu-base-icon
  7936. return `menu-base-icon ${iconName}`;
  7937. };
  7938. const getMenuIcon = (item, index) => { //功能 by xu 20251222
  7939. if (!item) {
  7940. return resolveIconClass(null, index);
  7941. }
  7942. //功能: 变动图标后端暂不正确,前端先写死为 icon-chg by xu 20251223
  7943. if (item.title === "变动" || item.name === "sys_bd") {
  7944. return resolveIconClass("icon-chg", index);
  7945. }
  7946. // 兼容旧字段 icon(优先使用)
  7947. if (item.icon) return resolveIconClass(item.icon, index);
  7948. // v3.0 使用后端下发 iconName
  7949. if (item.iconName) return resolveIconClass(item.iconName, index);
  7950. return resolveIconClass(null, index);
  7951. };
  7952. //功能: SsSubTab 底部按钮支持 icon+文字(icon-base)by xu 20251224
  7953. const getFooterIcon = (button) => { //功能 by xu 20251224
  7954. if (!button) return "menu-base-icon icon-subm";
  7955. const iconNameOrClass = button.iconClass || button.iconName || button.icon;
  7956. if (!iconNameOrClass) return "menu-base-icon icon-subm";
  7957. if (typeof iconNameOrClass === "string" && iconNameOrClass.indexOf(" ") > -1) {
  7958. return iconNameOrClass;
  7959. }
  7960. return `menu-base-icon ${iconNameOrClass}`;
  7961. };
  7962. //功能: pobj/cobj 扁平结构转换为 children 树结构,兼容原 children 结构 by xu 20251222
  7963. const normalizeMenuList = (rawList) => {
  7964. if (!Array.isArray(rawList) || rawList.length === 0) {
  7965. return [];
  7966. }
  7967. const hasTree = rawList.some((it) => Array.isArray(it?.children) && it.children.length > 0);
  7968. if (hasTree) {
  7969. return rawList.map((it) => ({
  7970. ...it,
  7971. __level: 1,
  7972. children: Array.isArray(it.children)
  7973. ? it.children.map((c) => ({ ...c, __level: 2 }))
  7974. : it.children,
  7975. }));
  7976. }
  7977. const hasMarker = rawList.some((it) => it && ("pobj" in it || "cobj" in it));
  7978. if (!hasMarker) {
  7979. return rawList.map((it) => ({ ...it, __level: 1 }));
  7980. }
  7981. const result = [];
  7982. let currentGroup = null;
  7983. for (const item of rawList) {
  7984. //功能: “变动”始终按一级处理(即使后端误传 pobj/cobj)by xu 20251223
  7985. const isChgItem = item && (item.title === "变动" || item.name === "sys_bd");
  7986. if (isChgItem) {
  7987. result.push({ ...item, __level: 1 });
  7988. continue;
  7989. }
  7990. const isParent = isTrue(item?.pobj);
  7991. const isChild = isTrue(item?.cobj);
  7992. if (isParent) {
  7993. currentGroup = {
  7994. ...item,
  7995. __level: 1,
  7996. children: [],
  7997. };
  7998. result.push(currentGroup);
  7999. continue;
  8000. }
  8001. if (isChild && currentGroup) {
  8002. currentGroup.children.push({ ...item, __level: 2 });
  8003. continue;
  8004. }
  8005. //功能: 变动等无 pobj/cobj 的选项按一级展示(不挂到 children,也不打断当前分组)by xu 20251223
  8006. result.push({ ...item, __level: 1 });
  8007. }
  8008. return result;
  8009. };
  8010. const menuListComputed = computed(() => normalizeMenuList(props.menuList)); //功能 by xu 20251222
  8011. //功能: 分组展开状态(默认展开),避免 computed 生成对象导致 open 状态丢失 by xu 20251222
  8012. const groupOpenState = reactive({}); // { [key]: boolean }
  8013. const getGroupKey = (item) => (item?.name || item?.title || ""); //功能 by xu 20251222
  8014. const isGroupOpen = (item) => { //功能 by xu 20251222
  8015. const key = getGroupKey(item);
  8016. if (!key) return true;
  8017. return groupOpenState[key] !== false;
  8018. };
  8019. const toggleGroupOpen = (item) => { //功能 by xu 20251222
  8020. const key = getGroupKey(item);
  8021. if (!key) return;
  8022. groupOpenState[key] = !isGroupOpen(item);
  8023. };
  8024. const getLevelClass = (item, fallbackLevel) => { //功能 by xu 20251222
  8025. //功能: “变动”始终按一级样式处理 by xu 20251223
  8026. if (item && (item.title === "变动" || item.name === "sys_bd")) {
  8027. return "level-1";
  8028. }
  8029. const level = item?.__level || fallbackLevel || 1;
  8030. return level === 2 ? "level-2" : "level-1";
  8031. };
  8032. // v3.0 新增:菜单模式管理 by xu 20251216
  8033. const menuMode = ref(props.initialMode);
  8034. const isHovering = ref(false);
  8035. const toggleMenuMode = () => {
  8036. menuMode.value = menuMode.value === 'collapse' ? 'fixed' : 'collapse';
  8037. };
  8038. //功能: 提供给旧UI弹窗顶部按钮调用的 API(替代点击 .menu-mode-toggle DOM)by xu 20251224
  8039. const registerSsSubTabApi = () => { //功能 by xu 20251224
  8040. try {
  8041. window.SS = window.SS || {};
  8042. window.SS.dom = window.SS.dom || {};
  8043. //功能: 兼容小写 ss 命名空间(部分页面只引用 window.ss)by xu 20251224
  8044. window.ss = window.ss || window.SS;
  8045. window.ss.dom = window.ss.dom || window.SS.dom;
  8046. const api = {
  8047. toggleMenuMode,
  8048. getMenuMode: () => menuMode.value,
  8049. };
  8050. window.SS.dom.ssSubTabApi = api;
  8051. window.ss.dom.ssSubTabApi = api;
  8052. //功能: 多层弹窗(如 objPlay -> objInfo) 场景,将 API 注册到 topWindow 供按钮跨层调用 by xu 20251224
  8053. try {
  8054. const wdDialogId = window.wd && wd.display && wd.display.getwdDialogId && wd.display.getwdDialogId();
  8055. if (wdDialogId && window.top) {
  8056. window.top.__ssSubTabApiMap = window.top.__ssSubTabApiMap || {};
  8057. window.top.__ssSubTabApiMap[wdDialogId] = api;
  8058. }
  8059. } catch (e) { }
  8060. try { console.log("[SsSubTabApi] registered", window.location && window.location.pathname); } catch (e) { }
  8061. } catch (e) { }
  8062. };
  8063. const unregisterSsSubTabApi = () => { //功能 by xu 20251224
  8064. try {
  8065. //功能: 从 topWindow 解绑(避免弹窗关闭后残留)by xu 20251224
  8066. try {
  8067. const wdDialogId = window.wd && wd.display && wd.display.getwdDialogId && wd.display.getwdDialogId();
  8068. if (wdDialogId && window.top && window.top.__ssSubTabApiMap && window.top.__ssSubTabApiMap[wdDialogId]) {
  8069. delete window.top.__ssSubTabApiMap[wdDialogId];
  8070. }
  8071. } catch (e) { }
  8072. if (window.SS?.dom?.ssSubTabApi?.toggleMenuMode === toggleMenuMode) {
  8073. delete window.SS.dom.ssSubTabApi;
  8074. }
  8075. if (window.ss?.dom?.ssSubTabApi?.toggleMenuMode === toggleMenuMode) {
  8076. delete window.ss.dom.ssSubTabApi;
  8077. }
  8078. } catch (e) { }
  8079. };
  8080. //功能: 立即注册,避免 enable 早于 onMounted 导致“api not ready”by xu 20251224
  8081. registerSsSubTabApi(); //功能 by xu 20251224
  8082. onBeforeUnmount(unregisterSsSubTabApi); //功能 by xu 20251224
  8083. const onMouseEnter = () => {
  8084. if (menuMode.value === 'collapse') {
  8085. isHovering.value = true;
  8086. }
  8087. };
  8088. const onMouseLeave = () => {
  8089. isHovering.value = false;
  8090. };
  8091. const isExpanded = computed(() => {
  8092. return menuMode.value === 'collapse' && isHovering.value;
  8093. });
  8094. // v3.0 新增:iframe 懒加载,点击才加载 by xu 20251216
  8095. const loadedMenus = ref(new Set());
  8096. const isMenuLoaded = (menuName) => {
  8097. return loadedMenus.value.has(menuName);
  8098. };
  8099. // 根据标题找到对应的菜单项
  8100. const findMenuByTitle = (title) => {
  8101. for (const item of menuListComputed.value) { //功能 by xu 20251222
  8102. if (item.children?.length > 0) {
  8103. const child = item.children.find((c) => c.title === title);
  8104. if (child) return child;
  8105. } else if (item.title === title) {
  8106. return item;
  8107. }
  8108. }
  8109. return null;
  8110. };
  8111. // 计算默认选中的菜单项
  8112. const defaultActiveMenu = computed(() => {
  8113. if (props.activeMenu) {
  8114. const menu = findMenuByTitle(props.activeMenu);
  8115. if (menu) return menu;
  8116. }
  8117. const firstItem = menuListComputed.value[0]; //功能 by xu 20251222
  8118. if (!firstItem) return null;
  8119. //功能: 默认选中第一个一级菜单(不默认跳到第一个二级)by xu 20251224
  8120. return firstItem;
  8121. });
  8122. const currentMenu = ref(defaultActiveMenu.value);
  8123. // 监听外部activeMenu变化
  8124. watch(
  8125. () => props.activeMenu,
  8126. (newTitle) => {
  8127. if (newTitle) {
  8128. const menu = findMenuByTitle(newTitle);
  8129. if (menu) {
  8130. currentMenu.value = menu;
  8131. }
  8132. }
  8133. }
  8134. );
  8135. // 初始化:默认选中项加入已加载集合
  8136. watch(currentMenu, (menu) => {
  8137. if (menu?.name) {
  8138. loadedMenus.value.add(menu.name);
  8139. }
  8140. }, { immediate: true });
  8141. // 选择菜单项时触发 menu-change 钩子
  8142. const selectItem = (item) => {
  8143. currentMenu.value = item;
  8144. // 标记为已加载
  8145. if (item.name) {
  8146. loadedMenus.value.add(item.name);
  8147. }
  8148. emit("menu-change", item);
  8149. };
  8150. // 处理底部按钮点击
  8151. const handleFooterClick = (button, index) => {
  8152. emit("footer-click", { button, index });
  8153. };
  8154. return {
  8155. menuListComputed, //功能 by xu 20251222
  8156. currentMenu,
  8157. selectItem,
  8158. handleFooterClick,
  8159. getFooterIcon, //功能: SsSubTab 底部按钮支持 icon+文字(icon-base)by xu 20251224
  8160. menuMode,
  8161. isHovering,
  8162. isExpanded,
  8163. toggleMenuMode,
  8164. onMouseEnter,
  8165. onMouseLeave,
  8166. isMenuLoaded,
  8167. getMenuIcon,
  8168. isGroupOpen, //功能 by xu 20251222
  8169. toggleGroupOpen, //功能 by xu 20251222
  8170. getLevelClass, //功能 by xu 20251222
  8171. };
  8172. },
  8173. template: `
  8174. <div class="project-edit-container">
  8175. <div class="left-side"
  8176. v-if="leftDisplay"
  8177. :data-mode="menuMode"
  8178. :class="{ 'is-expanded': isExpanded }"
  8179. @mouseenter="onMouseEnter"
  8180. @mouseleave="onMouseLeave">
  8181. <!-- 菜单内容 -->
  8182. <div class="menu-content">
  8183. <div class="scroll-view">
  8184. <template v-for="(menuItem, i) in menuListComputed" :key="i">
  8185. <!-- 分组菜单 -->
  8186. <div v-if="menuItem.children?.length > 0" class="group">
  8187. <!-- 功能: 一级(pobj)可点击进入,箭头仅控制展开/收起;二级点击不影响一级选中状态 by xu 20251223 -->
  8188. <div class="menu-item"
  8189. :class="[getLevelClass(menuItem, 1), { active: menuItem.name === currentMenu?.name }]"
  8190. @click="selectItem(menuItem)">
  8191. <ss-icon :class="getMenuIcon(menuItem, i)" />
  8192. <span class="menu-label">{{ menuItem.title }}</span>
  8193. <!-- 功能: 一级菜单有子项时显示 dot(参考全局左侧菜单)by xu 20251224 -->
  8194. <div class="has-children-dot"></div>
  8195. <div class="menu-tooltip">{{ menuItem.title }}</div>
  8196. </div>
  8197. <!-- 功能: 二级菜单始终展示,不做收缩展开 by xu 20251223 -->
  8198. <div class="group-detail">
  8199. <div v-for="(item, j) in menuItem.children"
  8200. :key="j"
  8201. class="menu-item"
  8202. :class="[getLevelClass(item, 2), { active: item.name === currentMenu?.name }]"
  8203. @click.stop="selectItem(item)">
  8204. <ss-icon :class="getMenuIcon(item, j)" />
  8205. <span class="menu-label">{{ item.title }}</span>
  8206. </div>
  8207. </div>
  8208. </div>
  8209. <!-- 普通菜单项 -->
  8210. <div v-else
  8211. class="menu-item"
  8212. :class="[getLevelClass(menuItem, 1), { active: menuItem.name === currentMenu?.name }]"
  8213. @click="selectItem(menuItem)">
  8214. <ss-icon :class="getMenuIcon(menuItem, i)" />
  8215. <span class="menu-label">{{ menuItem.title }}</span>
  8216. <div class="menu-tooltip">{{ menuItem.title }}</div>
  8217. </div>
  8218. </template>
  8219. </div>
  8220. </div>
  8221. <!-- 底部按钮 -->
  8222. <div v-if="footerButtons.length > 0"
  8223. class="sub-tab-menu-footer"
  8224. :class="{ 'has-text': !!footerButtons[0].text }"
  8225. @click="footerButtons[0].onclick">
  8226. <ss-icon :class="getFooterIcon(footerButtons[0])" />
  8227. <div class="footer-label" v-if="footerButtons[0].text">{{ footerButtons[0].text }}</div>
  8228. <ss-icon v-if="footerButtons.length > 1" class="footer-arrow" name="arrow-up" size="24px" />
  8229. <div v-if="footerButtons.length > 1" class="sub-tab-menu-popup">
  8230. <div v-for="(button, index) in footerButtons.slice(1)"
  8231. :key="index"
  8232. @click.stop="button.onclick">
  8233. {{ button.text }}
  8234. </div>
  8235. </div>
  8236. </div>
  8237. </div>
  8238. <!-- 右侧内容区域 - 懒加载 iframe -->
  8239. <div class="content-area fit-height-content" style="overflow: hidden;" :style="!leftDisplay ? { width: '100%' } : {}">
  8240. <template v-for="(menuItem, i) in menuList" :key="i">
  8241. <iframe
  8242. v-if="isMenuLoaded(menuItem.name)"
  8243. :src="menuItem.url"
  8244. style="height: 100%;width: 100%;"
  8245. frameborder="0"
  8246. class="sub-tab-iframe"
  8247. :id="i === 0 ? 'sub-tab-iframe' : ''"
  8248. v-show="currentMenu?.name === menuItem.name"
  8249. />
  8250. </template>
  8251. </div>
  8252. </div>
  8253. `,
  8254. };
  8255. // <iframe
  8256. // v-if="currentMenu?.url"
  8257. // :src="currentMenu.url"
  8258. // style="height: 100%;width: 100%;"
  8259. // frameborder="0"
  8260. // id="sub-tab-iframe"
  8261. // />
  8262. // ss-photo-upload 通用图片上传组件
  8263. const SsImgUpload = {
  8264. name: "SsImgUpload",
  8265. props: {
  8266. name: {
  8267. type: String,
  8268. required: true,
  8269. },
  8270. // 图片URL,用于回显
  8271. // url: {
  8272. // type: String,
  8273. // default: "",
  8274. // },
  8275. // 样式类名
  8276. class: {
  8277. type: String,
  8278. required: true,
  8279. },
  8280. // 裁剪配置
  8281. cropperOpt: {
  8282. type: Object,
  8283. default: () => ({
  8284. width: 360,
  8285. height: 360,
  8286. aspectRatio: 1,
  8287. }),
  8288. },
  8289. //上传图片url(未加图片名参数之前的部分)
  8290. ulUrl: {
  8291. type: String,
  8292. required: true,
  8293. },
  8294. //下载图片url(未加图片名参数之前的部分)
  8295. dlUrl: {
  8296. type: String,
  8297. required: true,
  8298. },
  8299. modelValue: [String, Number],
  8300. },
  8301. emits: ["update:modelValue"],
  8302. setup(props, { emit }) {
  8303. const inputId = Vue.computed(
  8304. () => `file_${Vue.getCurrentInstance().uid}`
  8305. );
  8306. //修改图片初始显示路径
  8307. let pathVal = ref(props.modelValue);
  8308. let picUrl = ref("");
  8309. if (props.modelValue) {
  8310. picUrl.value = props.dlUrl + "&path=" + props.modelValue;
  8311. }
  8312. Vue.onMounted(() => {
  8313. window.SS.cropper.init({
  8314. el: $(`#${inputId.value}`),
  8315. photoSize: {
  8316. width: props.cropperOpt.width,
  8317. height: props.cropperOpt.height,
  8318. },
  8319. aspectRatio: props.cropperOpt.aspectRatio,
  8320. uploadUrl: props.ulUrl,
  8321. success: (path) => {
  8322. pathVal.value = path;
  8323. picUrl.value = props.dlUrl + "&path=" + path;
  8324. emit("update:modelValue", path);
  8325. },
  8326. });
  8327. });
  8328. return () =>
  8329. h("div", { class: [props.class] }, [
  8330. h("input", {
  8331. type: "file",
  8332. accept: "image/*",
  8333. id: inputId.value,
  8334. style: { display: "none" },
  8335. }),
  8336. h("input", {
  8337. type: "hidden",
  8338. name: props.name,
  8339. value: pathVal.value,
  8340. }),
  8341. h(
  8342. "div",
  8343. {
  8344. style: {
  8345. width: "100%",
  8346. height: "100%",
  8347. },
  8348. onClick: () => $(`#${inputId.value}`).click(),
  8349. },
  8350. [
  8351. picUrl.value &&
  8352. h("img", {
  8353. src: picUrl.value,
  8354. style:
  8355. "width: 100%; height: 100%;object-fit: inherit;position: relative;z-index: 11;",
  8356. }),
  8357. ]
  8358. ),
  8359. ]);
  8360. },
  8361. };
  8362. // 初始化函数,负责创建和挂载 Vue 应用
  8363. // window.SS = { dom: {} };
  8364. /**
  8365. * 获取当前窗口的父窗口
  8366. * @returns {Window} 父窗口对象
  8367. */
  8368. window.SS.topWin = (function (p, c) {
  8369. while (p != c) {
  8370. c = p;
  8371. p = p.parent;
  8372. }
  8373. return c;
  8374. })(window.parent, window);
  8375. window.SS.createSsDialogInstance = createSsDialogInstance;
  8376. /**
  8377. * 创建弹窗
  8378. * @param {Object} setting
  8379. * @param {Function} callbackEvent
  8380. */
  8381. window.SS.openDialog = function (setting, callbackEvent) {
  8382. if (setting.params) {
  8383. const encodedParams = encodeURIComponent(JSON.stringify(setting.params));
  8384. setting.src +=
  8385. (setting.src.includes("?") ? "&" : "?") + "params=" + encodedParams;
  8386. }
  8387. if (window.parent && window.parent !== window) {
  8388. window.parent.SS.createSsDialogInstance(setting, callbackEvent);
  8389. } else {
  8390. createSsDialogInstance(setting, callbackEvent);
  8391. }
  8392. };
  8393. //关闭弹窗
  8394. window.SS.closeDialog = function () {
  8395. console.log("关闭弹窗");
  8396. if (topWindow.dialogInstances.length > 0) {
  8397. const instance = topWindow.dialogInstances.pop();
  8398. console.log("instance", instance);
  8399. console.log("instance.callbackEvent", instance.callbackEvent);
  8400. console.log(
  8401. "instance.callbackEvent.end",
  8402. typeof instance.callbackEvent === "function"
  8403. );
  8404. if (instance.callbackEvent) {
  8405. // 判断是否有end回调并执行
  8406. if (typeof instance.callbackEvent === "function") {
  8407. instance.callbackEvent();
  8408. }
  8409. if (typeof instance.callbackEvent.end === "function") {
  8410. instance.callbackEvent.end();
  8411. }
  8412. }
  8413. instance.app.unmount(); // 卸载最后一个实例
  8414. if (instance.container && instance.container.parentNode) {
  8415. instance.container.parentNode.removeChild(instance.container); // 移除容器
  8416. }
  8417. }
  8418. };
  8419. /**
  8420. * 裁剪插件
  8421. */
  8422. window.SS.cropper = {
  8423. init: function (setting) {
  8424. if (!window.top.SS) window.top.SS = {};
  8425. // 重要:确保 cropper 对象的完整初始化
  8426. if (!window.top.SS.cropper) {
  8427. window.top.SS.cropper = {
  8428. settings: new Map(),
  8429. _backupSettings: {},
  8430. getSetting: this.getSetting,
  8431. clearSetting: this.clearSetting,
  8432. debug: this.debug,
  8433. };
  8434. } else if (!window.top.SS.cropper.settings) {
  8435. // 如果 cropper 存在但 settings 不存在,重新初始化 settings
  8436. window.top.SS.cropper.settings = new Map();
  8437. window.top.SS.cropper._backupSettings = {};
  8438. }
  8439. const uploaderId = `uploader_${Date.now()}_${Math.random()
  8440. .toString(36)
  8441. .substr(2, 9)}`;
  8442. window.top.SS.cropper.settings.set(uploaderId, setting);
  8443. window.top.SS.cropper._backupSettings[uploaderId] = setting;
  8444. setting.box = setting.box || "1";
  8445. var winSetting = {
  8446. headerTitle: "图片裁剪",
  8447. src: "/js/cropper/cropper.jsp",//原来在"/newUI/page/cropper.jsp" Ben(20251205)
  8448. width: "900",
  8449. height: "500",
  8450. };
  8451. $(setting.el).change(function () {
  8452. if (!window.SS.cropper.verify(setting)) {
  8453. $(setting.el).val(""); // 清空文件选择
  8454. return false;
  8455. }
  8456. var files = this.files;
  8457. if (files && files.length) {
  8458. if (!window.SS.cropper.verifySize($(setting.el)[0], 5)) {
  8459. $(setting.el).val(""); // 清空文件选择
  8460. alert("文件大小不能超过5M,请重新选择");
  8461. return false;
  8462. }
  8463. var URL = window.URL || window.webkitURL;
  8464. var file = files[0];
  8465. setting.file = file;
  8466. if (
  8467. /^image\/\w+$/.test(file.type) &&
  8468. /\.(jpg|jpeg|png|)$/i.test(file.name)
  8469. ) {
  8470. var uploadedImageURL = URL.createObjectURL(file);
  8471. setting.data = uploadedImageURL;
  8472. setting.fileName = file.name;
  8473. // console.log()
  8474. winSetting.params = {
  8475. ...setting,
  8476. uploaderId,
  8477. };
  8478. console.log("ss-componets中change之后的winSetting", winSetting);
  8479. SS.openDialog(winSetting, {
  8480. success: function (win) {
  8481. console.log("裁剪插件成功");
  8482. // win.cropperSetting = setting;
  8483. },
  8484. end: function () {
  8485. console.log("裁剪插件结束");
  8486. $(setting.el).val(""); // 清空文件选择
  8487. },
  8488. });
  8489. } else {
  8490. alert("请选择图片文件,支持jpg、jpeg、png格式");
  8491. }
  8492. }
  8493. });
  8494. return uploaderId;
  8495. },
  8496. verify: function (setting) {
  8497. if (!setting) {
  8498. console.error(" cropper setting is not undefined! ");
  8499. return false;
  8500. }
  8501. if (!setting.el) {
  8502. console.error(" cropper setting.el is not undefined! ");
  8503. return false;
  8504. }
  8505. if (setting.photoSize) {
  8506. if (
  8507. (!setting.photoSize.width && setting.photoSize.height) ||
  8508. (!setting.photoSize.height && setting.photoSize.width)
  8509. ) {
  8510. console.error(
  8511. " cropper setting.photoSize { width, height } is not undefined! "
  8512. );
  8513. return false;
  8514. }
  8515. }
  8516. if (!setting.box) {
  8517. setting.box = "1";
  8518. }
  8519. if (!setting.aspectRatio) {
  8520. setting.aspectRatio = 1 / 1;
  8521. }
  8522. return true;
  8523. },
  8524. verifySize: function (fileEl, maxSize) {
  8525. // 判断是否为IE浏览器: /msie/i.test(navigator.userAgent) 为一个简单正则
  8526. var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
  8527. var fileSize = 0;
  8528. if (isIE && !fileEl.files) {
  8529. // IE浏览器
  8530. var filePath = fileEl.value; // 获得上传文件的绝对路径
  8531. var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
  8532. var file = fileSystem.GetFile(filePath);
  8533. fileSize = file.Size; // 文件大小,单位:b
  8534. } else {
  8535. // 非IE浏览器
  8536. fileSize = fileEl.files[0].size;
  8537. }
  8538. var size = fileSize / 1024 / 1024;
  8539. return !(size > maxSize);
  8540. },
  8541. // 获取特定上传组件的setting
  8542. getSetting: function (uploaderId) {
  8543. if (!window.top.SS?.cropper) {
  8544. console.warn("顶层窗口中未找到 SS.cropper");
  8545. return null;
  8546. }
  8547. // 优先从 Map 中获取
  8548. let setting = window.top.SS.cropper.settings.get(uploaderId);
  8549. // 如果 Map 中没有,尝试从备份中获取
  8550. if (!setting && window.top.SS.cropper._backupSettings[uploaderId]) {
  8551. console.log("从备份中恢复 setting");
  8552. setting = window.top.SS.cropper._backupSettings[uploaderId];
  8553. // 恢复到 Map 中
  8554. window.top.SS.cropper.settings.set(uploaderId, setting);
  8555. }
  8556. return setting;
  8557. },
  8558. // 清理特定上传组件的setting
  8559. clearSetting: function (uploaderId) {
  8560. if (!window.top.SS?.cropper) return;
  8561. window.top.SS.cropper.settings.delete(uploaderId);
  8562. delete window.top.SS.cropper._backupSettings[uploaderId];
  8563. console.log(
  8564. "清理设置后的 Map size:",
  8565. window.top.SS.cropper.settings.size
  8566. );
  8567. },
  8568. };
  8569. /**
  8570. * 获取url中的参数
  8571. * @returns {Object}
  8572. */
  8573. window.SS.getQueryParams = function () {
  8574. const params = {};
  8575. const queryString = window.location.search.substring(1);
  8576. const pairs = queryString.split("&");
  8577. for (let i = 0; i < pairs.length; i++) {
  8578. const pair = pairs[i].split("=");
  8579. params[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
  8580. }
  8581. if (params.params) {
  8582. try {
  8583. params.params = JSON.parse(params.params);
  8584. } catch (e) {
  8585. console.error("Failed to parse params:", e);
  8586. }
  8587. }
  8588. return params;
  8589. };
  8590. /**
  8591. * 创建vue应用
  8592. * @param {Object} config 配置项
  8593. * @values {String} config.el 挂载的元素
  8594. * @values {Boolean} config.isDialogPage 是否是弹窗页面 决定了是否可以使用顶天立地
  8595. * @values {Object} config.vueOptions vue配置项
  8596. * @returns {Object} vue实例
  8597. */
  8598. window.SS.dom.initializeFormApp = function (config) {
  8599. const { el, isDialogPage = false, ...vueOptions } = config;
  8600. const app = createApp({
  8601. ...vueOptions,
  8602. });
  8603. // 如果是弹窗iframe里面的html的话 给当前的页面挂上事件 实现顶天立地的效果
  8604. if (isDialogPage) {
  8605. function checkScroll() {
  8606. // 选出所有fit-height-content的元素 如果有滚动条
  8607. const elements = document.querySelectorAll(".fit-height-content");
  8608. let hasScrollBar = false;
  8609. // 检查元素是否有滚动条 检查当前窗口的所有元素
  8610. // 如果有滚动条,则将结果设置为true
  8611. elements.forEach((el) => {
  8612. if (el.scrollHeight > el.clientHeight) {
  8613. hasScrollBar = true;
  8614. }
  8615. });
  8616. // 将结果发送给父窗口
  8617. window.parent.postMessage({ hasScrollBar }, "*");
  8618. }
  8619. function addScrollListeners() {
  8620. const elements = document.querySelectorAll("div");
  8621. elements.forEach((el) => {
  8622. el.addEventListener("scroll", checkScroll);
  8623. });
  8624. }
  8625. const observer = new MutationObserver((mutations) => {
  8626. addScrollListeners();
  8627. checkScroll();
  8628. });
  8629. observer.observe(document.body, {
  8630. childList: true,
  8631. subtree: true,
  8632. });
  8633. window.addEventListener("resize", checkScroll);
  8634. }
  8635. // 注册组件
  8636. app.component("SsLoginIcon", SsLoginIcon);
  8637. app.component("SsMark", SsMark);
  8638. app.component("SsFullStyleHeader", SsFullStyleHeader);
  8639. app.component("SsDialog", SsDialog);
  8640. app.component("SsInp", SsInput);//把SsInput改为SsInp Ben(20251225)
  8641. app.component("SsObjp", SsObjp);
  8642. app.component("SsHidden", SsHidden);
  8643. app.component("SsCcp", SsCcp);
  8644. app.component("SsDatePicker", SsDatePicker);
  8645. app.component("SsIcon", SsIcon);
  8646. app.component("SsCommonIcon", SsCommonIcon);
  8647. app.component("SsBreadcrumb", SsBreadcrumb);
  8648. app.component("SsEditor", SsEditor);
  8649. app.component("SsDialogIcon", SsDialogIcon);
  8650. app.component("SsBottomButton", SsBottomButton);
  8651. app.component("SsNavIcon", SsNavIcon);
  8652. app.component("SsHeaderIcon", SsHeaderIcon);
  8653. app.component("SsGolbalMenuIcon", SsGolbalMenuIcon);
  8654. app.component("SsCartListIcon", SsCartListIcon);
  8655. app.component("SsQuickIcon", SsQuickIcon);
  8656. app.component("SsFormIcon", SsFormIcon);
  8657. app.component("SsBottomDivIcon", SsBottomDivIcon);
  8658. app.component("SsEditorIcon", SsEditorIcon);
  8659. app.component("SsValidate", SsValidate);
  8660. app.component("SsOnoff", Ssonoff);
  8661. app.component("SsonoffArray", SsonoffArray);
  8662. app.component("SsTextarea", SsTextarea);
  8663. app.component("SsLoginInput", SsLoginInput);
  8664. app.component("SsLoginButton", SsLoginButton);
  8665. app.component("SsSearch", SsSearch);
  8666. app.component("SsCartItem", SsCartItem);
  8667. app.component("SsCartItem2", SsCartItem2);
  8668. app.component("SsListCard", SsListCard);
  8669. app.component("ss-cobj-card-list", SsCObjCardList); // 功能说明:二级对象列表使用旧卡片组件 ss-cobj-card-list by xu 20260115
  8670. app.component("SsFolderCard", SsFolderCard);
  8671. // 注册右侧边栏组件(ss-sidebar) by xu 20260106
  8672. app.component("ss-sidebar", SsSidebar);
  8673. app.component("ss-sidebar-buttons", SsSidebarButtons);
  8674. app.component("ss-sidebar-chart", SsSidebarChart);
  8675. app.component("ss-sidebar-chart-hover", SsSidebarChartHover);
  8676. app.component("ss-sidebar-list", SsSidebarList);
  8677. // 功能说明:注册右侧“统计表/报表”面板组件(ss-sidebar-report-table) by xu 20260115
  8678. app.component("ss-sidebar-report-table", SsSidebarReportTable);
  8679. app.component("SsFolderCartView", SsFolderCartView);
  8680. app.component("SsPage", SsPage);
  8681. app.component("SsRightInfo", SSRightInfo);
  8682. app.component("SsSuccessPopup", SsSuccessPopup);
  8683. app.component("SsErrorDialog", SsErrorDialog);
  8684. app.component("SsVerify", SsVerify);
  8685. app.component("SsVerifyNode", SsVerifyNode);
  8686. app.component("SsOrcImgBox", SsOrcImgBox);
  8687. app.component("ss-search-input", SsSearchInput);
  8688. app.component("ss-search-date-picker", SsSearchDatePicker);
  8689. app.component("ss-search-button", SsSearchButton);
  8690. app.component("ss-drop-button", SsDropButton);
  8691. app.component("ss-sub-tab", SsSubTab);
  8692. app.component("ss-img", SsImgUpload);
  8693. // 设置为中文
  8694. app.use(ElementPlus, {
  8695. locale: ElementPlusLocaleZhCn,
  8696. });
  8697. // console.log(ElementPlus);
  8698. // 确保 ElementPlusIconsVue
  8699. // if (window.ElementPlusIconsVue) {
  8700. // // 注册 Element Plus 图标组件
  8701. // for (const [key, component] of Object.entries(
  8702. // window.ElementPlusIconsVue
  8703. // )) {
  8704. // console.log(key, component);
  8705. // app.component(key, component);
  8706. // }
  8707. // }
  8708. // 挂载首页的组件
  8709. for (const componentName in IndexComponents) {
  8710. app.component(componentName, IndexComponents[componentName]);
  8711. }
  8712. // 挂载echarts的组件
  8713. for (const componentName in EchartComponents) {
  8714. app.component(componentName, EchartComponents[componentName]);
  8715. }
  8716. // 挂载 Vue 应用
  8717. let vm;
  8718. try {
  8719. vm = app.mount(el);
  8720. vm.data = vueOptions.data();
  8721. console.log("vm:", vm)
  8722. console.log("vueOptions:", vueOptions)
  8723. } catch (error) {
  8724. alert('Mount failed:' + error);//vue Mount失败报错 Ben(20251206)
  8725. }
  8726. return vm;
  8727. };
  8728. })();