wbs.vue 60 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659
  1. <template>
  2. <div class="h-full">
  3. <HcCard id-ref="wbs-node-tree-card-target" v-if="wbsTypeTabKey === 'map'">
  4. <template #header>
  5. <HcTooltip keys="wbs_views_division_btn">
  6. <el-button type="primary" hc-btn @click="divisionClick">
  7. <HcIcon name="node-tree" :line="false"/>
  8. <span>划分变更</span>
  9. </el-button>
  10. </HcTooltip>
  11. <HcTooltip keys="wbs_views_drawings" v-if="isDrawer">
  12. <el-button hc-btn :disabled="!nodeDataInfo?.fileUrl" @click="viewsDrawings">
  13. <HcIcon name="image"/>
  14. <span>查看图纸</span>
  15. </el-button>
  16. </HcTooltip>
  17. <el-button :type="authBtnTabKey === '1'?'primary':''" hc-btn @click="authBtnTabClick('1')" v-if="isDrawer">
  18. <HcIcon name="folder-user"/>
  19. <span>施工自检</span>
  20. </el-button>
  21. <el-button :type="authBtnTabKey === '2'?'primary':''" hc-btn @click="authBtnTabClick('2')" v-if="isDrawer">
  22. <HcIcon name="folder-shield"/>
  23. <span>监理质检</span>
  24. </el-button>
  25. </template>
  26. <template #extra>
  27. <HcNewSwitch :datas="wbsTypeTab" :keys="wbsTypeTabKey" @change="wbsTypeTabChange"/>
  28. </template>
  29. <NodeTree ref="NodeTreeRef" :autoExpandKeys="TreeAutoExpandKeys" :menus="ElTreeMenu" :isMark="TreeMark" :projectId="projectId" :contractId="contractId"
  30. :accordion='NodeTreeAccordion' @nodeClick="NodeTreeClick" @nodeDblClick="NodeTreeDblClick" @menuClick="NodeTreeMenuClick"/>
  31. <template #action>
  32. <div class="hc-tree-mp-tip-box">
  33. <div class="dot-view green">已审批</div>
  34. <div class="dot-view black">未填报</div>
  35. <div class="dot-view orange">已填报-待审批</div>
  36. <div class="dot-view blue">已填报-未上报</div>
  37. </div>
  38. </template>
  39. <HcDrawer :show="isDrawer" actionUi="text-center" to-id="wbs-node-tree-card-target" @close="drawerClose">
  40. <!--清表列表-->
  41. <el-scrollbar ref="ListItemScrollRef" v-if="ListItemDatas.length > 0">
  42. <ListItem ref="ListItemsRef"
  43. :datas="ListItemDatas"
  44. :status="NodeStatus"
  45. :classify="authBtnTabKey"
  46. @offsetTop="ListItemOffsetTop"
  47. :projectInfo="projectInfo"
  48. :primaryKeyId="primaryKeyId"
  49. :contractId="contractId"
  50. @renew="getTableDataAll"
  51. :drawType="isDrawType"
  52. />
  53. </el-scrollbar>
  54. <HcStatus text="暂无表单" v-else/>
  55. <!--底部按钮区域-->
  56. <template #action>
  57. <HcTooltip keys="wbs_save" v-if="NodeStatus !== '3'">
  58. <el-button type="primary" hc-btn :disabled="NodeStatus === '3' || ListItemDatas.length <= 0" :loading="tableFormSaveLoading" @click="tableFormSaveClick">
  59. <HcIcon name="save"/>
  60. <span>保存</span>
  61. </el-button>
  62. </HcTooltip>
  63. <HcTooltip keys="wbs_report" v-if="NodeStatus !== '3'">
  64. <el-button hc-btn :disabled="NodeStatus === '3' || NodeStatus === '1'" :loading="reportLoading" @click="reportModalClick">
  65. <HcIcon name="send-plane-2"/>
  66. <span>上报</span>
  67. </el-button>
  68. </HcTooltip>
  69. <HcTooltip keys="wbs_preview">
  70. <el-button hc-btn :disabled="NodeStatus === '1'" :loading="bussPdfsLoading" @click="bussPdfsClick">
  71. <HcIcon name="eye"/>
  72. <span>预览</span>
  73. </el-button>
  74. </HcTooltip>
  75. <HcTooltip keys="wbs_abolish" v-if="NodeStatus === '3'">
  76. <el-button hc-btn @click="abolishOneClick">
  77. <HcIcon name="arrow-go-back"/>
  78. <span>撤回上报流程</span>
  79. </el-button>
  80. </HcTooltip>
  81. <el-button hc-btn @click="drawerClose">
  82. <HcIcon name="close"/>
  83. <span>关闭填报页面</span>
  84. </el-button>
  85. </template>
  86. </HcDrawer>
  87. </HcCard>
  88. <div class="hc-layout-box" v-if="wbsTypeTabKey === 'tree'">
  89. <div class="hc-layout-left-box" id="wbs-left-tree" :style="'width:' + leftWidth + 'px;'" v-if="true">
  90. <div class="hc-project-box">
  91. <div class="hc-project-icon-box">
  92. <HcIcon name="stack"/>
  93. </div>
  94. <div class="ml-2 project-name-box">
  95. <span class="text-xl text-cut project-alias">{{projectInfo['projectAlias']}}</span>
  96. <div class="text-xs text-cut project-name">{{projectInfo['name']}}</div>
  97. </div>
  98. </div>
  99. <div class="hc-tree-box">
  100. <div class="hc-search-tree-val">
  101. <el-input v-model="searchTreeVal" block size="large" placeholder="请输入名称关键词检索" clearable @keyup="searchTreeKeyUp">
  102. <template #suffix>
  103. <HcIcon name="search-2" ui="text-xl" @click="searchTreeClick"/>
  104. </template>
  105. </el-input>
  106. </div>
  107. <div class="hc-tree-scrollbar" v-loading="treeLoading" element-loading-text="获取数据中...">
  108. <el-scrollbar>
  109. <KeepAlive>
  110. <template v-if="isSearchTree">
  111. <HcTreeData
  112. :datas="searchTreeData"
  113. :menus="ElTreeMenu"
  114. :isMark="TreeMark"
  115. :autoExpandKeys="TreeAutoExpandKeys"
  116. :searchTreeVal="searchTreeVal" isColor @nodeTap="wbsElTreeClick"
  117. @menuTap="ElTreeMenuClick"
  118. @changeSearch="changeisSearch"
  119. :submitCounts="false"
  120. />
  121. </template>
  122. <template v-else>
  123. <WbsTree
  124. :submitCounts="false"
  125. :menus="ElTreeMenu"
  126. :isMark="TreeMark"
  127. :autoExpandKeys="TreeAutoExpandKeys"
  128. :projectId="projectId"
  129. :contractId="contractId"
  130. :classifyType="authBtnTabKey"
  131. isColor
  132. @nodeTap="wbsElTreeClick"
  133. @menuTap="ElTreeMenuClick"
  134. @nodeLoading="ElTreeNodeLoading"
  135. ref="wbstree"
  136. :treeKey="wbstreeKey"
  137. />
  138. </template>
  139. </KeepAlive>
  140. </el-scrollbar>
  141. </div>
  142. </div>
  143. <div class="hc-tree-foot-tip-box">
  144. <div class="dot-view green">已审批</div>
  145. <div class="dot-view black">未填报</div>
  146. <div class="dot-view orange">已填报-待审批</div>
  147. <div class="dot-view blue">已填报-未上报</div>
  148. </div>
  149. <!--左右拖动-->
  150. <div class="horizontal-drag-line" @mousedown="onmousedown"/>
  151. </div>
  152. <div class="hc-layout-content-box">
  153. <!-- <div class="hc-layout-content-box-lefticon" v-if="isShowLefticon">
  154. <el-icon><CaretLeft @click="isHiddenleftbox" /></el-icon>
  155. </div>
  156. <div class="hc-layout-content-box-righticon" v-else>
  157. <el-icon><CaretRight @click="isShowleftbox" /></el-icon>
  158. </div> -->
  159. <div class="hc-arrow-icon hc-layout-content-box-lefticon" v-if="isShowLefticon" @click="isHiddenleftbox">
  160. <HcIcon name="arrow-left" />
  161. </div>
  162. <div class="hc-arrow-icon hc-layout-content-box-righticon" v-else @click="isShowleftbox">
  163. <HcIcon name="arrow-right" />
  164. </div>
  165. <HcCard actionUi="text-center">
  166. <template #header>
  167. <HcTooltip keys="wbs_views_drawings">
  168. <el-button hc-btn :disabled="!nodeDataInfo?.fileUrl" @click="viewsDrawings" style="height:30px">
  169. <HcIcon name="image"/>
  170. <span>查看图纸</span>
  171. </el-button>
  172. </HcTooltip>
  173. <!-- <el-button :type="authBtnTabKey === '1'?'primary':''" hc-btn @click="authBtnTabClick('1')">
  174. <HcIcon name="folder-user"/>
  175. <span>施工自检</span>
  176. </el-button>
  177. <el-button :type="authBtnTabKey === '2'?'primary':''" hc-btn @click="authBtnTabClick('2')">
  178. <HcIcon name="folder-shield"/>
  179. <span>监理质检</span>
  180. </el-button> -->
  181. <HcNewSwitchtype :datas="authBtnTabdata" :keys="authBtnTabKey" @change="authBtnTabClick" style="margin-left:20px"/>
  182. </template>
  183. <!--切换导图或树形模式-->
  184. <template #extra>
  185. <HcNewSwitch :datas="wbsTypeTab" :keys="wbsTypeTabKey" @change="wbsTypeTabChange"/>
  186. </template>
  187. <!--清表列表-->
  188. <el-scrollbar ref="ListItemScrollRef" v-loading="ListItemLoading" v-if="ListItemDatas.length > 0">
  189. <ListItem
  190. ref="ListItemRef"
  191. :datas="ListItemDatas"
  192. :status="NodeStatus"
  193. :classify="authBtnTabKey"
  194. :authBtnTabKey="authBtnTabKey"
  195. @offsetTop="ListItemOffsetTop"
  196. :projectInfo="projectInfo"
  197. :primaryKeyId="primaryKeyId"
  198. :contractId="contractId"
  199. @renew="getTableDataAll"
  200. :drawType="!isDrawType"
  201. :wbsTempId="projectInfo?.referenceWbsTemplateIdTrial" :wbsType="2" :tenantId="userInfo?.tenant_id"
  202. />
  203. </el-scrollbar>
  204. <HcStatus text="暂无表单" v-else/>
  205. <!--底部按钮区域-->
  206. <template #action >
  207. <el-alert title="完善资料填写后记得一定要保存哦"
  208. show-icon
  209. type="warning"
  210. :closable="false"
  211. style="background-color:#f1f5f8;display: inline;vertical-align: middle;"/>
  212. <HcTooltip keys="wbs_save" v-if="NodeStatus !== '3'">
  213. <el-button
  214. type="primary"
  215. style="width:150px;font-weight: bold;font-size:large"
  216. hc-btn
  217. :disabled="NodeStatus === '3' || ListItemDatas.length <= 0"
  218. :loading="tableFormSaveLoading"
  219. @click="tableFormSaveClick">
  220. <HcIcon name="save"/>
  221. <span>保存</span>
  222. </el-button>
  223. </HcTooltip>
  224. <HcTooltip keys="wbs_report" v-if="NodeStatus !== '3'">
  225. <el-button hc-btn :disabled="NodeStatus === '3' || NodeStatus === '1'" :loading="reportLoading" @click="reportModalClick">
  226. <HcIcon name="send-plane-2"/>
  227. <span>上报</span>
  228. </el-button>
  229. </HcTooltip>
  230. <HcTooltip keys="wbs_preview">
  231. <el-button hc-btn :disabled="NodeStatus === '1'" :loading="bussPdfsLoading" @click="bussPdfsClick">
  232. <HcIcon name="eye"/>
  233. <span>预览</span>
  234. </el-button>
  235. </HcTooltip>
  236. <HcTooltip keys="wbs_abolish" v-if="NodeStatus === '3'">
  237. <el-button hc-btn @click="abolishOneClick">
  238. <HcIcon name="arrow-go-back"/>
  239. <span>撤回上报流程</span>
  240. </el-button>
  241. </HcTooltip>
  242. </template>
  243. </HcCard>
  244. </div>
  245. </div>
  246. <!--上传图纸-->
  247. <div class="upload-drawing">
  248. <el-upload :action="action" :accept="accept" :headers="getTokenHeader()" :before-upload="beforeUpload" :on-success="uploadFinish" :on-error="uploadError">
  249. <div id="upload-drawing">上传图纸</div>
  250. </el-upload>
  251. </div>
  252. <!--查看图纸-->
  253. <HcDragModal title="查看图纸" ui="hc-image-preview-box" :isShow="drawingsShow" closeIcon tops="100" lefts="145" widths="380px" @close="drawingsClose">
  254. <div class="hc-image-preview-view">
  255. <el-image-viewer :url-list="[nodeDataInfo.fileUrl]"/>
  256. </div>
  257. </HcDragModal>
  258. <!--编辑节点-->
  259. <HcDialog :show="editNodeModal" title="编辑节点" widths="600px" :loading="editNodeLoading" @close="editNodeModal = false" @save="editNodeClick">
  260. <el-form ref="formEditNodeRef" :model="formEditNodeModel" :rules="formEditNodeRules" label-width="auto" size="large">
  261. <el-form-item label="节点名称" prop="title">
  262. <el-input v-model="formEditNodeModel.title" placeholder="请输入节点名称"/>
  263. </el-form-item>
  264. <el-form-item label="上级节点">
  265. <el-input v-model="formEditNodeModel.parent.title" disabled/>
  266. </el-form-item>
  267. <el-form-item label="节点类型">
  268. <el-select v-model="formEditNodeModel.type" block disabled>
  269. <el-option v-for="item in nodeTypeData" :label="item.label" :value="item.value"/>
  270. </el-select>
  271. </el-form-item>
  272. <el-form-item label="划分编号">
  273. <el-input v-model="formEditNodeModel.partitionCode" placeholder="请输入划分编号"/>
  274. </el-form-item>
  275. <!-- <el-form-item label="模板位置">
  276. <el-input v-model="formEditNodeModel.position" id="copyText">
  277. <template #append>
  278. <el-button :icon="DocumentCopy" @click="copyText"/>
  279. </template>
  280. </el-input>
  281. </el-form-item> -->
  282. </el-form>
  283. </HcDialog>
  284. <!--复制节点-->
  285. <HcDialog :show="copyNodeModal" title="复制节点1" :widths="copyNodeTabKey === '1'?'600px':'1200px'" @close="copyNodeModal = false">
  286. <el-form ref="formCopyNodeModelRef" :model="formCopyNodeModel" :rules="formCopyNodeModelRules" label-width="auto" size="large" v-if="copyNodeTabKey !== '3'">
  287. <el-form-item label="节点名称" prop="title" style="margin-bottom: 0;">
  288. <el-input v-model="formCopyNodeModel.title" placeholder="请输入节点名称"/>
  289. </el-form-item>
  290. <el-form-item label="划分编号" prop="partitionCode" style="margin-top: 10px;" v-if="copyNodeTabKey === '1'">
  291. <el-input v-model="formCopyNodeModel.partitionCode" placeholder="请输入划分编号"/>
  292. </el-form-item>
  293. </el-form>
  294. <el-form ref="formCopyNodeModelRef" :model="formCopyNodeModel" :rules="formCopyNodeModelRules" label-width="auto" size="large" v-if="copyNodeTabKey === '3'">
  295. <el-form-item label="所属方" prop="classify" style="margin-bottom: 0;">
  296. <!-- <el-input v-model="formCopyNodeModel.classify" placeholder="请输入节点名称"/> -->
  297. <el-checkbox-group v-model="classifyList">
  298. <el-checkbox label="施工" />
  299. <el-checkbox label="监理" />
  300. </el-checkbox-group>
  301. </el-form-item>
  302. </el-form>
  303. <div class="copy-node-many-box" v-if="copyNodeTabKey !== '1'">
  304. <div class="copy-node-many-tree">
  305. <el-scrollbar>
  306. <WbsTree :autoExpandKeys="TreeAutoExpandKeys" :projectId="projectId" :contractId="contractId" idPrefix="tree-node-copy-" :isAutoClick="false" :isAutoKeys="false" @nodeTap="copyNodeElTreeClick"/>
  307. </el-scrollbar>
  308. </div>
  309. <div class="copy-node-many-table">
  310. <el-scrollbar>
  311. <el-table :data="copyNodeTable" border stripe>
  312. <el-table-column prop="title" label="复制到的位置1"/>
  313. <el-table-column prop="nodeName" label="节点名称" v-if="copyNodeTabKey === '2'">
  314. <template #default="{row}">
  315. <el-form ref="copyNodeTableRef" :model="row" :rules="copyNodeTableRules" label-width="0" size="large">
  316. <el-form-item prop="nodeName" style="margin-bottom: 0;">
  317. <el-input v-model="row.nodeName" placeholder="请输入节点名称"/>
  318. </el-form-item>
  319. </el-form>
  320. </template>
  321. </el-table-column>
  322. <el-table-column prop="nodeName" label="划分编号" v-if="copyNodeTabKey === '2'">
  323. <template #default="{row}">
  324. <el-form ref="copyNodeTableRef" :model="row" :rules="copyNodeTableRules" label-width="0" size="large">
  325. <el-form-item prop="partitionCode" style="margin-bottom: 0;">
  326. <el-input v-model="row.partitionCode" placeholder="请输入划分编号"/>
  327. </el-form-item>
  328. </el-form>
  329. </template>
  330. </el-table-column>
  331. <el-table-column prop="action" label="操作" width="120" align="center">
  332. <template #default="{_,$index}">
  333. <el-button type="danger" plain @click="copyNodeTableDel($index)">删除</el-button>
  334. </template>
  335. </el-table-column>
  336. </el-table>
  337. </el-scrollbar>
  338. </div>
  339. </div>
  340. <template #footer>
  341. <div class="lr-dialog-footer">
  342. <div class="left">
  343. <template v-for="item in copyNodeTab">
  344. <el-button size="large" type="primary" plain v-if="item?.key === copyNodeTabKey" @click="copyNodeTabChange(item?.key)">{{item.name}}</el-button>
  345. <el-button size="large" text bg @click="copyNodeTabChange(item?.key)" v-else>{{item.name}}</el-button>
  346. </template>
  347. </div>
  348. <div class="right">
  349. <el-button size="large" @click="copyNodeModal = false">取消</el-button>
  350. <el-button type="primary" hc-btn :loading="copyNodeLoading" @click="copyNodeClick">提交</el-button>
  351. </div>
  352. </div>
  353. </template>
  354. </HcDialog>
  355. <!--新增子节点-->
  356. <HcDialog :show="addNodeModal" title="新增子节点" widths="720px" @close="addNodeModal = false">
  357. <el-alert title="双击节点,可编辑节点名称,编辑完成后,请按回车或输入框消失后,再点提交" type="warning" :closable="false"/>
  358. <HcTreeNode :projectId="projectId" :nodeId="addTreeNodeId" :oldId="addTreeNodeOldId" @check-change="addTreeNodeCheckChange" v-if="addTreeNodeType === '1'"/>
  359. <HcTreeNode :projectId="projectId" :nodeId="addTreeNodeId" :oldId="addTreeNodeOldId" strictly @check-change="addTreeNodeCheckChange" v-if="addTreeNodeType === '2'"/>
  360. <template #footer>
  361. <div class="lr-dialog-footer">
  362. <div class="left flex items-center">
  363. <div class="mr-4">选中方式:</div>
  364. <el-radio-group v-model="addTreeNodeType">
  365. <el-radio label="1">当前及子节点</el-radio>
  366. <el-radio label="2" class="ml-4">仅当前节点</el-radio>
  367. </el-radio-group>
  368. </div>
  369. <div class="right">
  370. <el-button size="large" @click="addNodeModal = false">取消</el-button>
  371. <el-button type="primary" hc-btn :loading="addNodeLoading" @click="addNodeClick">提交</el-button>
  372. </div>
  373. </div>
  374. </template>
  375. </HcDialog>
  376. <!--调整排序-->
  377. <HcDialog :show="sortNodeModal" title="调整排序" widths="700px" :loading="sortNodeLoading" @close="sortNodeModal = false" @save="sortNodeClick">
  378. <el-alert title="可拖动排序,也可在后面点击图标,切换排序" type="warning" :closable="false"/>
  379. <div class="sort-node-body-box list-group header">
  380. <div class="list-group-item">
  381. <div class="index-box">序号</div>
  382. <div class="title-box">节点名称</div>
  383. <div class="icon-box">排序</div>
  384. </div>
  385. </div>
  386. <Draggable class="sort-node-body-box list-group" ghost-class="ghost" :list="sortNodeData" item-key="id" @start="sortNodeDrag = true" @end="sortNodeDrag = false">
  387. <template #item="{element, index}">
  388. <div class="list-group-item">
  389. <div class="index-box">{{index + 1}}</div>
  390. <div class="title-box">{{element.title}}</div>
  391. <div class="icon-box">
  392. <span class="icon" @click="downSortClick(index)">
  393. <HcIcon name="arrow-down" ui="text-lg"/>
  394. </span>
  395. <span class="icon" @click="upSortClick(index)">
  396. <HcIcon name="arrow-up" ui="text-lg"/>
  397. </span>
  398. </div>
  399. </div>
  400. </template>
  401. </Draggable>
  402. </HcDialog>
  403. <!--批量上报审批-->
  404. <HcReportModal title="批量上报审批" url="informationWriteQuery/taskOne"
  405. :show="showReportModal"
  406. :projectId="projectId"
  407. :contractId="contractInfo?.contractType==2?nodeDataInfo?.contractIdRelation:contractId"
  408. type="wbs"
  409. :typeData="reportTypeData"
  410. :taskName="reportTaskName" :ids="reportIds" :addition="reportAddition" @hide="showReportModal = false" @finish="showReportFinish"/>
  411. </div>
  412. </template>
  413. <script setup>
  414. import { Warning ,DocumentCopy,CaretLeft,CaretRight } from '@element-plus/icons-vue'
  415. import {ref,watch,onMounted} from "vue";
  416. import {useRouter, useRoute} from 'vue-router'
  417. import {useAppStore} from "~src/store";
  418. import {HcIsButton} from "~src/plugins/IsButtons";
  419. import ListItem from "./components/ListItem.vue"
  420. import NodeTree from "./components/nodeTree/index.vue"
  421. import HcTreeNode from "./components/HcTreeNode.vue"
  422. import HcTreeData from "./components/HcTreeData.vue"
  423. import WbsTree from "./components/WbsTree.vue"
  424. import {getTokenHeader} from '~src/api/request/header';
  425. import {getStoreData, setStoreData} from '~src/utils/storage'
  426. import {isType, deepClone, formValidate} from "vue-utils-plus"
  427. import {getDictionary, eVisaTaskCheckApi} from "~api/other"
  428. import wbsApi from "~api/data-fill/wbs"
  429. import queryApi from '~api/data-fill/query';
  430. import Draggable from "vuedraggable";
  431. //初始变量
  432. const router = useRouter()
  433. const useRoutes = useRoute()
  434. const useAppState = useAppStore()
  435. const {getObjValue, getArrValue, getObjNullValue, isString} = isType()
  436. //全局变量
  437. const projectId = ref(useAppState.getProjectId);
  438. const contractId = ref(useAppState.getContractId);
  439. const projectInfo = ref(useAppState.getProjectInfo);
  440. const contractInfo = ref(useAppState.getContractInfo);
  441. const isCollapse = ref(useAppState.getCollapse)
  442. const userInfo = ref(useAppState.getUserInfo);
  443. //路由参数
  444. const routerQuery = useRoutes?.query;
  445. // const typeName = routerQuery?.type || 'map'
  446. const typeName = routerQuery?.type || 'tree'
  447. //是否是抽屉
  448. const isDrawType = ref(true)
  449. //自动展开缓存
  450. const TreeAutoExpandKeys = ref(getStoreData('wbsTreeExpandKeys') || [])
  451. //树搜索
  452. const isSearchTree = ref(false)
  453. const wbstreeKey=ref(Math.random())
  454. const getSearchTreeData=async()=>{
  455. const {error, code, data} = await queryApi.getTreeall({
  456. contractId: contractId.value,
  457. projectId: projectId.value,
  458. wbsId:projectInfo?.value.referenceWbsTemplateId
  459. })
  460. //判断状态
  461. if (!error && code === 200) {
  462. searchTreeData.value = getArrValue(data)
  463. treeLoading.value = false
  464. } else {
  465. treeLoading.value = false
  466. searchTreeData.value = []
  467. }
  468. }
  469. //监听
  470. watch(() => [
  471. useAppState.getCollapse,
  472. ], ([Collapse]) => {
  473. isCollapse.value = Collapse
  474. })
  475. watch(projectId, (val) => {
  476. console.log(val,'val')
  477. if(val){
  478. getSearchTreeData()
  479. }
  480. },
  481. {immediate:true}
  482. )
  483. //渲染完成
  484. onMounted(()=> {
  485. treeLoading.value = typeName === 'tree';
  486. setContractType(contractInfo.value?.contractType)
  487. getDictionaryApi()
  488. })
  489. //身份按钮切换数据
  490. const authBtnTabKey = ref('1')
  491. //变量
  492. const wbstree = ref(null)
  493. const authBtnTabClick = (val) => {
  494. if (!primaryKeyId.value) {
  495. window?.$message?.warning('请先在左侧项目树选择一个节点')
  496. } else if (val['key'] !== authBtnTabKey.value) {
  497. authBtnTabKey.value = val['key']
  498. // wbstreeKey.value=new Date().toString()
  499. getTableDataAll()
  500. }
  501. }
  502. //contractType, 1施工,2监理
  503. const setContractType = (contractType) => {
  504. if (contractType <= 0) {
  505. authBtnTabKey.value = '1'
  506. } else {
  507. authBtnTabKey.value = contractType + ''
  508. }
  509. setElTreeMenu(contractType)
  510. }
  511. const getTableDataAll = () => {
  512. searchNodeAllTable()
  513. queryNodeStatus()
  514. // wbstree.value.resetNode().then((res)=>{
  515. // if(res){
  516. // searchNodeAllTable()
  517. // queryNodeStatus()
  518. // }
  519. // })
  520. }
  521. //结构类型tab数据和相关处理
  522. const wbsTypeTabKey = ref(typeName)
  523. const wbsTypeTab = ref([
  524. {key:'map', name: '导图结构填报'},
  525. {key:'tree', name: '树形结构填报'}
  526. ]);
  527. const authBtnTabdata = ref([
  528. {key:'1', name: '施工质检'},
  529. {key:'2', name: '监理质检'}
  530. ]);
  531. const wbsTypeTabChange = (item) => {
  532. wbsTypeTabKey.value = item?.key;
  533. ListItemDatas.value = []
  534. isDrawer.value = false;
  535. treeLoading.value = typeName === 'tree';
  536. //路由跳转
  537. router.push({
  538. path: useRoutes.path,
  539. query: {
  540. type: item?.key
  541. }
  542. })
  543. getSearchTreeData()
  544. }
  545. //上传文件的
  546. const action = ref("/api/blade-resource/oss/endpoint/put-file")
  547. const accept = ref("image/png,image/jpg,image/jpeg")
  548. const NodeTreeAccordion = ref(true)
  549. //设置树菜单数据
  550. const ElTreeMenu = ref([])
  551. const TreeMark = ref(false)
  552. const setElTreeMenu = (contractType) => {
  553. let newArr = [];
  554. if (contractType === 1) {
  555. if (HcIsButton('wbs_tree_edit')) {
  556. newArr.push({icon: 'draft', label: '编辑节点', key: "edit"})
  557. }
  558. if (HcIsButton('wbs_tree_mark')) {
  559. newArr.push({icon: 'star', label: '标记为首件', key: "mark"})
  560. TreeMark.value = true
  561. }
  562. if (HcIsButton('wbs_tree_copy')) {
  563. newArr.push({icon: 'file-copy-2', label: '复制节点', key: "copy"})
  564. }
  565. if (HcIsButton('wbs_tree_add')) {
  566. newArr.push({icon: 'add-circle', label: '新增节点', key: "add"})
  567. }
  568. if (HcIsButton('wbs_tree_upload')) {
  569. newArr.push({icon: 'file-upload', label: '上传图纸', key: "upload"})
  570. }
  571. if (HcIsButton('wbs_tree_del')) {
  572. newArr.push({icon: 'delete-bin', label: '删除节点', key: "del"})
  573. }
  574. if (HcIsButton('wbs_tree_sort')) {
  575. newArr.push({icon: 'sort-asc', label: '调整排序', key: "sort"})
  576. }
  577. if (HcIsButton('wbs_views_division_btn')) {
  578. newArr.push({icon:'folder-shared', label: '工程划分', key: "nodetree"})
  579. }
  580. } else if (contractType === 2) {
  581. if (HcIsButton('wbs_tree_copy')) {
  582. newArr.push({icon: 'file-copy-2', label: '复制节点', key: "copy"})
  583. }
  584. if (HcIsButton('wbs_tree_add')) {
  585. newArr.push({icon: 'add-circle', label: '新增节点', key: "add"})
  586. }
  587. }
  588. ElTreeMenu.value = newArr
  589. }
  590. //树相关变量
  591. const primaryKeyId = ref('')
  592. const nodeItemInfo = ref({})
  593. const nodeDataInfo = ref({})
  594. const searchTreeVal = ref('')
  595. const searchTreeData = ref([])
  596. //回车
  597. const searchTreeKeyUp = (e) => {
  598. if (e.key === "Enter") {
  599. searchTreeClick()
  600. }
  601. }
  602. const changeisSearch=()=>{
  603. isSearchTree.value=false
  604. }
  605. const treeLoading = ref(false)
  606. const searchTreeClick = async () => {
  607. isSearchTree.value=true
  608. }
  609. // if (searchTreeVal.value) {
  610. // isSearchTree.value = true
  611. // treeLoading.value = true
  612. // const {error, code, data} = await wbsApi.searchContractTree({
  613. // contractId: contractId.value,
  614. // queryValue: searchTreeVal.value
  615. // })
  616. // //判断状态
  617. // if (!error && code === 200) {
  618. // searchTreeData.value = getArrValue(data)
  619. // treeLoading.value = false
  620. // } else {
  621. // treeLoading.value = false
  622. // searchTreeData.value = []
  623. // }
  624. // } else {
  625. // treeLoading.value = false
  626. // isSearchTree.value = false
  627. // }
  628. //树被点击
  629. const wbsElTreeClick = ({node, data, keys}) => {
  630. nodeItemInfo.value = node
  631. nodeDataInfo.value = data
  632. primaryKeyId.value = data?.primaryKeyId || ''
  633. setStoreData('wbsTreeExpandKeys',keys)
  634. TreeAutoExpandKeys.value = keys || []
  635. getTableDataAll()
  636. }
  637. //树加载完成
  638. const ElTreeNodeLoading = () => {
  639. treeLoading.value = false
  640. }
  641. //树菜单被点击
  642. const ElTreeMenuClick = async ({key,node,data,keys}) => {
  643. nodeItemInfo.value = node
  644. nodeDataInfo.value = data
  645. setStoreData('wbsTreeExpandKeys',keys)
  646. setTreeMenuDataClick({key,node,data})
  647. }
  648. //导图结构数据
  649. const NodeTreeRef = ref(null)
  650. //鼠标左键单击事件
  651. const NodeTreeClick = ({keys}) => {
  652. setStoreData('wbsTreeExpandKeys',keys)
  653. TreeAutoExpandKeys.value = keys || []
  654. }
  655. //双击事件
  656. const isDrawer = ref(false)
  657. const NodeTreeDblClick = ({node,data}) => {
  658. nodeItemInfo.value = node
  659. nodeDataInfo.value = data
  660. primaryKeyId.value = data?.primaryKeyId || ''
  661. isDrawer.value = true;
  662. getTableDataAll()
  663. }
  664. const drawerClose = () => {
  665. isDrawer.value = false;
  666. ListItemDatas.value = []
  667. }
  668. //导图树菜单被点击
  669. const NodeTreeMenuClick = async ({key,node,data}) => {
  670. nodeItemInfo.value = node
  671. nodeDataInfo.value = data
  672. setTreeMenuDataClick({key,node,data})
  673. }
  674. //处理菜单被点击数据
  675. const setTreeMenuDataClick = ({key,node,data}) => {
  676. const tabKey = wbsTypeTabKey.value
  677. if (key === 'mark' || key === 'cancel_mark') {
  678. firstItemBox()
  679. } else if (key === 'edit') {
  680. if (tabKey === 'tree') {
  681. const parent = deepClone(node?.parent?.data || {})
  682. formEditNodeModel.value = {...deepClone(data), parent: parent}
  683. } else if (tabKey === 'map') {
  684. const parent = deepClone(node?.parentNodes?.data || {})
  685. formEditNodeModel.value = {...deepClone(data), parent: parent}
  686. }
  687. editNodeModal.value = true
  688. } else if (key === 'copy') {
  689. if (tabKey === 'tree') {
  690. const parent = deepClone(node?.parent?.data || {})
  691. formCopyNodeModel.value = {...deepClone(data), parent: parent}
  692. } else if (tabKey === 'map') {
  693. const parent = deepClone(node?.parentNodes?.data || {})
  694. formCopyNodeModel.value = {...deepClone(data), parent: parent}
  695. }
  696. copyNodeTabKey.value = '1'
  697. copyNodeTable.value = []
  698. copyNodeLoading.value = false
  699. copyNodeModal.value = true
  700. } else if (key === 'add') {
  701. addTreeNodeId.value = data?.id
  702. addTreeNodeOldId.value = data?.oldId
  703. addNodeLoading.value = false
  704. addNodeModal.value = true
  705. } else if (key === 'upload') {
  706. document.getElementById('upload-drawing').click()
  707. } else if (key === 'del') {
  708. if(data['colorStatus']===1||data['colorStatus']===2){
  709. delModalClick()
  710. }else{
  711. window?.$message?.warning('该节点已存在上报数据,不允许删除')
  712. }
  713. } else if (key === 'sort') {
  714. let nodes = [], childNodes = []
  715. if (tabKey === 'tree') {
  716. childNodes = node?.parent?.childNodes || []
  717. } else if (tabKey === 'map') {
  718. childNodes = node?.parentNodes?.childrenNodes || []
  719. }
  720. for (let i = 0; i < childNodes.length; i++) {
  721. const res = childNodes[i]?.data
  722. nodes.push({
  723. id: res?.primaryKeyId,
  724. title: res?.title
  725. })
  726. }
  727. sortNodeData.value = nodes
  728. sortNodeModal.value = true
  729. }else if (key === 'nodetree') {
  730. divisionClick()
  731. }
  732. }
  733. //复制节点位置
  734. const copyText=()=> {
  735. let copyCon = document.getElementById("copyText");
  736. copyCon.select(); // 选中文本
  737. document.execCommand("copy"); // 执行浏览器复制命令
  738. window.$message?.success("复制成功!");
  739. }
  740. //上传前
  741. const loadingReactive = ref(null)
  742. const beforeUpload = () => {
  743. loadingReactive.value = window.$loading?.service({
  744. lock: true,
  745. text: '图纸上传中...',
  746. background: 'rgba(0, 0, 0, 0.7)',
  747. })
  748. return true
  749. }
  750. //上传完成
  751. const uploadFinish = async (response) => {
  752. const res = getObjValue(response.data)
  753. const info = nodeDataInfo.value;
  754. if (res?.link) {
  755. const { error, code, data } = await wbsApi.saveContractTreeDrawings({
  756. fileUrl: res?.link,
  757. id: info['drawingsId'],
  758. primaryKeyId: info['primaryKeyId']
  759. },false)
  760. //处理数据
  761. loadingReactive.value.close();
  762. if (!error && code === 200) {
  763. nodeDataInfo.value['drawingsId'] = data
  764. nodeDataInfo.value['fileUrl'] = res?.link
  765. window?.$message?.success('图纸上传成功')
  766. } else {
  767. window?.$message?.error('图纸保存失败')
  768. }
  769. } else {
  770. loadingReactive.value.close();
  771. window?.$message?.error('图纸上传失败')
  772. }
  773. }
  774. //上传失败
  775. const uploadError = () => {
  776. loadingReactive.value.close();
  777. window?.$message?.error('图纸上传失败')
  778. }
  779. //确认标记为首件
  780. const firstItemBox = () => {
  781. const info = nodeDataInfo.value;
  782. window?.$messageBox?.alert(`<div class="text-base font-bold">
  783. <span>请确认将</span>
  784. <span class="text-main">【${info['title']}】</span>
  785. <span>${info['isFirst']?'取消':''}标记为首件</span>
  786. </div>`, '标记首件制', {
  787. showCancelButton: true,
  788. dangerouslyUseHTMLString: true,
  789. callback: (action) => {
  790. if (action === 'confirm') {
  791. firstItemHttp(info)
  792. }
  793. }
  794. })
  795. }
  796. //首件请求
  797. const firstItemHttp = async (info) => {
  798. const { error, code } = await wbsApi.wbsTreeFirstSave({
  799. primaryKeyId: info['primaryKeyId'],
  800. saveOrDeleted: !!info['isFirst']?1:0,
  801. })
  802. //处理数据
  803. if (!error && code === 200) {
  804. window?.$message?.success('操作成功')
  805. window?.location?.reload() //刷新页面
  806. }
  807. }
  808. //编辑节点
  809. const editNodeModal = ref(false)
  810. //获取节点类型
  811. const nodeTypeData = ref([])
  812. const getDictionaryApi = async () => {
  813. const { data } = await getDictionary({
  814. code: 'wbs_node_type'
  815. })
  816. //处理数据
  817. let newArr = []
  818. const newData = getArrValue(data)
  819. for (let i = 0; i < newData.length; i++) {
  820. newArr.push({
  821. label: newData[i]['dictValue'],
  822. value: Number(newData[i]['dictKey']),
  823. })
  824. }
  825. nodeTypeData.value = newArr
  826. }
  827. const formEditNodeRef = ref(null)
  828. const formEditNodeModel = ref({})
  829. const formEditNodeRules = {
  830. title: {
  831. required: true,
  832. trigger: 'blur',
  833. message: "请输入节点名称"
  834. },
  835. }
  836. const editNodeLoading = ref(false)
  837. //保存编辑节点数据
  838. const editNodeClick = async () => {
  839. const validate = await formValidate(formEditNodeRef.value)
  840. if (validate) {
  841. //发起请求
  842. editNodeLoading.value = true
  843. const { primaryKeyId, title, partitionCode } = formEditNodeModel.value
  844. const { error, code } = await wbsApi.wbsTreeUpdateNode({
  845. nodeName: title || '',
  846. pKeyId: primaryKeyId || '',
  847. partitionCode: partitionCode || ''
  848. })
  849. //处理数据
  850. editNodeLoading.value = false
  851. if (!error && code === 200) {
  852. window?.$message?.success('修改成功')
  853. nodeDataInfo.value['title'] = title || ''
  854. nodeDataInfo.value['partitionCode'] = partitionCode || ''
  855. editNodeModal.value = false
  856. window?.location?.reload() //刷新页面
  857. }
  858. }
  859. }
  860. //复制节点
  861. const copyNodeModal = ref(false)
  862. //复制节点类型tab数据和相关处理
  863. const copyNodeTabKey = ref('1')
  864. const copyNodeTab = ref([
  865. {key:'1', name: '单份复制'},
  866. {key:'2', name: '多份复制'},
  867. {key:'3', name: '复制数据'}
  868. ]);
  869. const copyNodeTabChange = (key) => {
  870. if (key !== copyNodeTabKey.value) {
  871. copyNodeTabKey.value = key;
  872. copyNodeTable.value = []
  873. copyNodeLoading.value = false
  874. }
  875. }
  876. //复制节点变量
  877. const copyNodeLoading = ref(false)
  878. const formCopyNodeModel = ref({})
  879. const classifyList=ref([])
  880. const copyNodeTable = ref([])
  881. //复制树被点击
  882. const copyNodeElTreeClick = ({data}) => {
  883. const TabKey = copyNodeTabKey.value;
  884. const {title, type,partitionCode} = formCopyNodeModel.value;
  885. if (TabKey === '2') {
  886. //1 单位工程,2 分部工程,3 子分部工程,4 分项工程, 5 子分项工程,6 工序
  887. //工序节点不能复制到工序节点下面
  888. // if (type === 6 && (data['type'] === 4 || data['type'] === 5 || data['type'] == 6)) {
  889. // setCopyNodeTable(data, title)
  890. // }
  891. if (type === 6 && (data['type'] === 4 || data['type'] === 5 || data['type'] !== 6)) {
  892. setCopyNodeTable(data, title,partitionCode)
  893. }
  894. if (type === 5 && data['type'] === 4) {
  895. setCopyNodeTable(data, title,partitionCode)
  896. }
  897. if (type === 4 && (data['type'] === 2 || data['type'] === 3)) {
  898. setCopyNodeTable(data, title,partitionCode)
  899. }
  900. if (type === 3 && data['type'] === 2) {
  901. setCopyNodeTable(data, title,partitionCode)
  902. }
  903. if (type === 2 && data['type'] === 1) {
  904. setCopyNodeTable(data, title,partitionCode)
  905. }
  906. if (type === 1 && data['type'] === 1) {
  907. setCopyNodeTable(data, title,partitionCode)
  908. }
  909. } else if (TabKey === '3') {
  910. if (data['notExsitChild']) {
  911. if(data['nodeType']===6){
  912. let oldarr= copyNodeTable.value
  913. let result = oldarr.some(item => item.primaryKeyId===data['primaryKeyId']) //true
  914. //限制点工序节点的时候,只能加一个,只针对复制数据
  915. if(!result){
  916. setCopyNodeTable(data, data?.title)
  917. }
  918. }else{
  919. setCopyNodeTable(data, data?.title)
  920. }
  921. }
  922. }
  923. }
  924. const setCopyNodeTable = (data, title) => {
  925. copyNodeTable.value.push({
  926. title: data?.title || '',
  927. nodeName: title || '',
  928. primaryKeyId: data?.primaryKeyId || '',
  929. })
  930. }
  931. //节点表单
  932. const formCopyNodeModelRef = ref(null)
  933. const formCopyNodeModelRules = {
  934. title: {
  935. required: true,
  936. trigger: "blur",
  937. message: "请输入节点名称"
  938. }
  939. }
  940. //表格节点表单
  941. const copyNodeTableRef = ref(null)
  942. const copyNodeTableRules = {
  943. nodeName: {
  944. required: true,
  945. trigger: "blur",
  946. message: "请输入节点名称"
  947. }
  948. }
  949. //删除选中的节点
  950. const copyNodeTableDel = (index) => {
  951. copyNodeTable.value.splice(index,1)
  952. }
  953. //复制节点
  954. const copyNodeClick = async () => {
  955. const type = copyNodeTabKey.value
  956. const form = formCopyNodeModel.value
  957. const table = copyNodeTable.value
  958. let classify=''
  959. let arr=[]
  960. if(classifyList.value.length>0){
  961. classifyList.value.forEach((item)=>{
  962. if(item==='施工'){
  963. arr.push(1)
  964. }else if(item==='监理'){
  965. arr.push(2)
  966. }
  967. })
  968. classify=arr.join(',')
  969. }
  970. //效验数据
  971. if (type === '1') {
  972. const validate = await formValidate(formCopyNodeModelRef.value)
  973. if (validate) await copyContractTreeNode(type, form,[])
  974. } else if (type === '2') {
  975. if (table.length > 0) {
  976. const validate = await formValidate(copyNodeTableRef.value)
  977. if (validate) await copyContractTreeNode(type, form,table)
  978. } else {
  979. window?.$message?.warning('请先在左侧选择要复制到的节点')
  980. }
  981. } else if (type === '3') {
  982. if (table.length > 0&&classify.length>0) {
  983. await copyContractNodeSubmitBusinessData(form,table,classify)
  984. } else {
  985. window?.$message?.warning('请先在左侧选择要复制的节点或选择所属方')
  986. }
  987. }
  988. }
  989. //单个复制、多份复制请求
  990. const copyContractTreeNode = async (type, form,table) => {
  991. copyNodeLoading.value = true
  992. if(type=='1'){
  993. const {error, code} = await wbsApi.copyContractTreeNode({
  994. copyType: type,
  995. needCopyNodeName: form?.title || '',
  996. partitionCode:form?.partitionCode || '',
  997. needCopyPrimaryKeyId: form?.primaryKeyId || '',
  998. parentPrimaryKeyId: form?.parent?.primaryKeyId || '',
  999. copyBatchToPaths: table
  1000. })
  1001. //判断状态
  1002. if (!error && code === 200) {
  1003. window?.$message?.success('复制成功')
  1004. copyNodeLoading.value = false
  1005. copyNodeModal.value = false
  1006. window?.location?.reload() //刷新页面
  1007. }
  1008. }else{
  1009. const {error, code} = await wbsApi.copyContractTreeNode({
  1010. copyType: type,
  1011. needCopyNodeName: form?.title || '',
  1012. needCopyPrimaryKeyId: form?.primaryKeyId || '',
  1013. parentPrimaryKeyId: form?.parent?.primaryKeyId || '',
  1014. copyBatchToPaths: table
  1015. })
  1016. //判断状态
  1017. if (!error && code === 200) {
  1018. window?.$message?.success('复制成功')
  1019. copyNodeLoading.value = false
  1020. copyNodeModal.value = false
  1021. window?.location?.reload() //刷新页面
  1022. }
  1023. }
  1024. }
  1025. //复制数据
  1026. const copyContractNodeSubmitBusinessData = async (form,table,classify) => {
  1027. copyNodeLoading.value = true
  1028. const {error, code} = await wbsApi.copyContractNodeSubmitBusinessData({
  1029. needCopyPrimaryKeyId: form?.primaryKeyId || '',
  1030. copyBatchToPaths: table,
  1031. classify:classify
  1032. })
  1033. //判断状态
  1034. if (!error && code === 200) {
  1035. window?.$message?.success('复制成功')
  1036. copyNodeLoading.value = false
  1037. copyNodeModal.value = false
  1038. window?.location?.reload() //刷新页面
  1039. }
  1040. }
  1041. //新增节点
  1042. const addNodeModal = ref(false)
  1043. const addTreeNodeId = ref('')
  1044. const addTreeNodeOldId = ref('')
  1045. const addTreeNodeType = ref('1')
  1046. //选中的节点
  1047. const allSelectedList = ref([])
  1048. const halfSelectedList = ref([])
  1049. const addTreeNodeCheckChange = (nodes) => {
  1050. let NodesArr = [], halfArr = []
  1051. //全选数据
  1052. const keys = nodes.checkedNodes || []
  1053. for (let i = 0; i < keys.length; i++) {
  1054. NodesArr.push({
  1055. nodeName: keys[i].title,
  1056. primaryKeyId: keys[i].primaryKeyId
  1057. })
  1058. }
  1059. allSelectedList.value = NodesArr
  1060. //半选数据
  1061. const halfNodes = nodes.halfCheckedNodes || []
  1062. for (let i = 0; i < halfNodes.length; i++) {
  1063. halfArr.push({
  1064. nodeName: halfNodes[i].title,
  1065. primaryKeyId: halfNodes[i].primaryKeyId
  1066. })
  1067. }
  1068. halfSelectedList.value = halfArr
  1069. }
  1070. //新增节点
  1071. const addNodeLoading = ref(false)
  1072. const addNodeClick = async () => {
  1073. const keys = allSelectedList.value || []
  1074. if (keys.length <= 0) {
  1075. window?.$message?.warning('请先选择节点')
  1076. } else {
  1077. //发起请求
  1078. addNodeLoading.value = true
  1079. const primaryKeyId = nodeDataInfo.value?.primaryKeyId || ''
  1080. const {error, code} = await wbsApi.saveContractTreeNode({
  1081. projectId: projectId.value,
  1082. contractId: contractId.value,
  1083. saveType: addTreeNodeType.value,
  1084. allSelectedList: allSelectedList.value,
  1085. halfSelectedList: halfSelectedList.value,
  1086. currentNodePrimaryKeyId: primaryKeyId
  1087. })
  1088. //判断状态
  1089. addNodeLoading.value = false
  1090. if (!error && code === 200) {
  1091. window?.$message?.success('新增成功')
  1092. addNodeModal.value = false
  1093. window?.location?.reload() //刷新页面
  1094. }
  1095. }
  1096. }
  1097. //删除节点
  1098. const delModalClick = () => {
  1099. window?.$messageBox?.alert('请谨慎考虑后,确认是否需要删除?', '删除节点', {
  1100. showCancelButton: true,
  1101. confirmButtonText: '确认删除',
  1102. cancelButtonText: '取消',
  1103. callback: (action) => {
  1104. if (action === 'confirm') {
  1105. removeContractTreeNode()
  1106. }
  1107. }
  1108. })
  1109. }
  1110. const removeContractTreeNode = async () => {
  1111. const {error, code} = await wbsApi.removeContractTreeNode({
  1112. ids: nodeDataInfo.value?.primaryKeyId || ''
  1113. })
  1114. if (!error && code === 200) {
  1115. window?.$message?.success('删除成功')
  1116. window?.location?.reload() //刷新页面
  1117. }
  1118. }
  1119. //调整排序
  1120. const sortNodeModal = ref(false)
  1121. const sortNodeLoading = ref(false)
  1122. const sortNodeData = ref([])
  1123. const sortNodeDrag = ref(false)
  1124. //向下
  1125. const downSortClick = (index) => {
  1126. const indexs = index + 1
  1127. const data = sortNodeData.value || []
  1128. if(indexs !== data.length) {
  1129. const tmp = data.splice(indexs,1);
  1130. sortNodeData.value.splice(index,0,tmp[0]);
  1131. } else {
  1132. window?.$message?.warning('已经处于置底,无法下移')
  1133. }
  1134. }
  1135. //向上
  1136. const upSortClick = (index) => {
  1137. const data = sortNodeData.value || []
  1138. if(index !== 0) {
  1139. const tmp = data.splice(index - 1,1);
  1140. sortNodeData.value.splice(index,0,tmp[0]);
  1141. } else {
  1142. window?.$message?.warning('已经处于置顶,无法上移')
  1143. }
  1144. }
  1145. //确认排序
  1146. const sortNodeClick = async () => {
  1147. const sortList = [];
  1148. const nodes = sortNodeData.value || []
  1149. nodes.forEach(item => {
  1150. sortList.push(item?.id)
  1151. })
  1152. //发起请求
  1153. sortNodeLoading.value = true
  1154. const { error, code } = await wbsApi.diySortTreeNode({sortList})
  1155. sortNodeLoading.value = false
  1156. //判断状态
  1157. if (!error && code === 200) {
  1158. window?.$message?.success('保存成功')
  1159. sortNodeModal.value = false
  1160. window?.location?.reload() //刷新页面
  1161. }
  1162. }
  1163. //查看图纸
  1164. const drawingsShow = ref(false);
  1165. const viewsDrawings = () => {
  1166. const {primaryKeyId, fileUrl} = nodeDataInfo.value
  1167. if (!primaryKeyId) {
  1168. window?.$message?.warning('请先选择树节点')
  1169. } else if (!fileUrl) {
  1170. window?.$message?.warning('该节点暂未上传图纸')
  1171. } else {
  1172. drawingsShow.value = true
  1173. }
  1174. }
  1175. const drawingsClose = (res) => {
  1176. drawingsShow.value = res
  1177. }
  1178. //设置滚动条位置
  1179. const ListItemScrollRef = ref(null)
  1180. const ListItemOffsetTop = (offsetTop) => {
  1181. if (offsetTop > 0) {
  1182. setTimeout(() => {
  1183. ListItemScrollRef.value?.setScrollTop(offsetTop)
  1184. }, 350)
  1185. } else {
  1186. ListItemScrollRef.value?.setScrollTop(offsetTop)
  1187. }
  1188. }
  1189. //获取数据列表
  1190. const ListItemDatas = ref([]);
  1191. const ListItemLoading = ref(false);
  1192. const searchNodeAllTable = async () => {
  1193. ListItemDatas.value = []
  1194. const info = nodeDataInfo.value;
  1195. ListItemLoading.value = true
  1196. const {error, code, data} = await wbsApi.searchNodeAllTable({
  1197. projectId: projectId.value,
  1198. contractId: contractId.value,
  1199. primaryKeyId: info['primaryKeyId'],
  1200. type: authBtnTabKey.value
  1201. })
  1202. //处理数据
  1203. ListItemLoading.value = false
  1204. if (!error && code === 200) {
  1205. ListItemDatas.value = getArrValue(data)
  1206. } else {
  1207. ListItemDatas.value = []
  1208. }
  1209. }
  1210. //查询状态
  1211. const NodeStatus = ref('1')
  1212. const queryNodeStatus = async () => {
  1213. const info = nodeDataInfo.value;
  1214. console.log(info,'info')
  1215. const {error, code, data} = await wbsApi.queryNodeStatus({
  1216. // primaryKeyId: info['contractIdRelation'] ? info['id'] : info['primaryKeyId'],
  1217. primaryKeyId: authBtnTabKey.value==1 ? info['id'] : info['primaryKeyId'],
  1218. classify: authBtnTabKey.value
  1219. })
  1220. //1 未填报,2待上报,3已上报
  1221. if (!error && code === 200) {
  1222. NodeStatus.value = data ?? '1'
  1223. } else {
  1224. NodeStatus.value = '1'
  1225. }
  1226. }
  1227. //批量上报
  1228. const reportIds = ref('')
  1229. const reportTaskName = ref('')
  1230. const reportAddition = ref({})
  1231. const showReportModal = ref(false)
  1232. const reportLoading = ref(false)
  1233. const reportTypeData = ref([])
  1234. const reportModalClick = async () => {
  1235. const info = nodeDataInfo.value;
  1236. const rows = ListItemDatas.value;
  1237. if (rows.length > 0) {
  1238. reportLoading.value = true
  1239. const taskCheck = await eVisaTaskCheckApi({
  1240. projectId: projectId.value,
  1241. contractId:contractInfo.value?.contractType==2?info?.contractIdRelation:contractId.value
  1242. // contractId: contractId.value
  1243. })
  1244. //处理数据
  1245. let newArr = [];
  1246. for (let i = 0; i < rows.length; i++) {
  1247. newArr.push(rows[i]['isTypePrivatePid'])
  1248. }
  1249. reportTypeData.value = newArr
  1250. reportLoading.value = false
  1251. if (taskCheck) {
  1252. //初始弹出弹窗,防呆
  1253. reportIds.value = info['primaryKeyId']
  1254. reportAddition.value = {
  1255. classify: authBtnTabKey.value,
  1256. contractIdRelation: info['contractIdRelation'],
  1257. }
  1258. showReportModal.value = true
  1259. //请求文件题名
  1260. const {data} = await wbsApi.queryDocumentTitle({
  1261. primaryKeyId: info['primaryKeyId'],
  1262. classify: authBtnTabKey.value
  1263. })
  1264. reportTaskName.value = isString(data)? data : ''
  1265. }
  1266. } else {
  1267. window.$message?.warning('暂无相关数据')
  1268. }
  1269. }
  1270. //上报完成
  1271. const showReportFinish = () => {
  1272. showReportModal.value = false
  1273. getTableDataAll()
  1274. // window?.location?.reload() //刷新页面
  1275. }
  1276. //表单变量
  1277. const ListItemRef = ref(null)
  1278. const ListItemsRef = ref(null)
  1279. //保存
  1280. const tableFormSaveLoading = ref(false)
  1281. const tableFormSaveClick = async () => {
  1282. //获取数据
  1283. let FormData = [], FormRegExpJson = {};
  1284. if (isDrawer.value) {
  1285. FormData = ListItemsRef.value?.getFormData()
  1286. FormRegExpJson = ListItemsRef.value?.getFormRegExpJson()
  1287. } else {
  1288. FormData = ListItemRef.value?.getFormData()
  1289. FormRegExpJson = ListItemRef.value?.getFormRegExpJson()
  1290. }
  1291. //效验数据
  1292. if (getObjNullValue(FormRegExpJson)) {
  1293. setFormRegExpJson(FormRegExpJson)
  1294. } else if (FormData.length > 0) {
  1295. tableFormSaveLoading.value = true
  1296. console.log(FormData,'FormData')
  1297. const {error, code} = await wbsApi.saveExcelBussData({
  1298. dataInfo: {orderList: FormData}
  1299. })
  1300. tableFormSaveLoading.value = false
  1301. if (!error && code === 200) {
  1302. window?.$message?.success('保存成功')
  1303. bussPdfsClick()
  1304. getTableDataAll()
  1305. }
  1306. } else {
  1307. //http://testcandao.hcxxy.com/bug-view-819.html
  1308. bussPdfsClick()
  1309. }
  1310. }
  1311. //效验数据
  1312. const setFormRegExpJson = (FormRegExpJson) => {
  1313. let nodeName = '', itemId = '';
  1314. Object.keys(FormRegExpJson).forEach(key => {
  1315. const name = FormRegExpJson[key]?.nodeName ?? ''
  1316. if (name) {
  1317. if (nodeName) {
  1318. nodeName += ',' + name
  1319. } else {
  1320. nodeName = name
  1321. itemId = FormRegExpJson[key]?.itemId
  1322. }
  1323. }
  1324. })
  1325. //const activeKey = ListItemRef.value?.getActiveKey()
  1326. //弹出提示
  1327. const val = '<div style="font-size: 16px;">请先完善 <span style="color:#1ECC95;">' + nodeName + '</span> 的数据内容</div>'
  1328. window?.$messageBox?.alert(val, '表单完善提醒', {
  1329. confirmButtonText: '确定',
  1330. dangerouslyUseHTMLString: true,
  1331. callback: (action) => {
  1332. if (action === 'confirm') {
  1333. ListItemRef.value?.setActiveKey(itemId)
  1334. ListItemOffsetTop(0)
  1335. setTimeout(() => {
  1336. const offsetTop = document.getElementById(itemId)?.offsetTop
  1337. ListItemOffsetTop(offsetTop)
  1338. }, 350)
  1339. }
  1340. }
  1341. })
  1342. }
  1343. //多表预览
  1344. const bussPdfsLoading = ref(false)
  1345. const bussPdfsClick = async () => {
  1346. const info = nodeDataInfo.value;
  1347. console.log(info,'info')
  1348. bussPdfsLoading.value = true
  1349. const {error, code, data} = await wbsApi.getBussPdfs({
  1350. nodeId: info?.primaryKeyId || '',
  1351. classify: authBtnTabKey.value,
  1352. projectId: projectId.value,
  1353. // contractId: contractId.value
  1354. contractId:contractInfo.value?.contractType==2?info?.contractIdRelation:contractId.value
  1355. })
  1356. tableFormSaveLoading.value = false
  1357. bussPdfsLoading.value = false
  1358. if (!error && code === 200) {
  1359. window.open(data,'_blank')
  1360. } else {
  1361. window.$message?.warning('获取PDF失败')
  1362. }
  1363. }
  1364. //撤回上报流程
  1365. const abolishOneClick = () => {
  1366. window?.$messageBox?.alert('请谨慎考虑后,是否确定撤回?', '撤回上报', {
  1367. showCancelButton: true,
  1368. confirmButtonText: '确定撤回',
  1369. cancelButtonText: '取消',
  1370. callback: (action) => {
  1371. if (action === 'confirm') {
  1372. abolishOneSave()
  1373. }
  1374. }
  1375. })
  1376. }
  1377. //撤回请求
  1378. const abolishOneSave = async () => {
  1379. const info = nodeDataInfo.value;
  1380. const {error, code} = await wbsApi.abolishOne({
  1381. primaryKeyId: info?.primaryKeyId || '',
  1382. classify: authBtnTabKey.value
  1383. })
  1384. if (!error && code === 200) {
  1385. window.$message?.success('撤回成功')
  1386. getTableDataAll()
  1387. window?.location?.reload() //刷新页面
  1388. }
  1389. }
  1390. //划分变更
  1391. const divisionClick = () => {
  1392. router.push({
  1393. path: '/data-fill/division'
  1394. })
  1395. }
  1396. const isShowLefticon=ref(true)
  1397. //
  1398. const isShowleftbox = () => {
  1399. let item = document.getElementById("wbs-left-tree");
  1400. item.style.display="block"
  1401. isShowLefticon.value=true
  1402. }
  1403. const isHiddenleftbox = () => {
  1404. let item = document.getElementById("wbs-left-tree");
  1405. item.style.display="none"
  1406. isShowLefticon.value=false
  1407. }
  1408. //左右拖动,改变树形结构宽度
  1409. const leftWidth = ref(382);
  1410. const onmousedown = () => {
  1411. const leftNum = isCollapse.value ? 142 : 272
  1412. document.onmousemove = (ve) => {
  1413. let diffVal = ve.clientX - leftNum;
  1414. if(diffVal >= 310 && diffVal <= 900) {
  1415. leftWidth.value = diffVal;
  1416. }
  1417. }
  1418. document.onmouseup = () => {
  1419. document.onmousemove = null;
  1420. document.onmouseup = null;
  1421. }
  1422. }
  1423. </script>
  1424. <style lang="scss" scoped>
  1425. @import "../../styles/data-fill/wbs.scss";
  1426. .hc-add-node-modal-foot-box {
  1427. position: relative;
  1428. display: flex;
  1429. align-items: center;
  1430. .left-box {
  1431. position: relative;
  1432. flex: 1;
  1433. display: flex;
  1434. align-items: center;
  1435. }
  1436. .right-box {
  1437. position: relative;
  1438. }
  1439. }
  1440. html.theme-dark {
  1441. .bg-svg-xml {
  1442. background-color: initial;
  1443. background-image: initial;
  1444. }
  1445. .hc-layout-box .hc-layout-content-box .hc-card-max-h-box.node-tree .hc-tree-foot-tip-box {
  1446. border-top: 1px solid #303030;
  1447. }
  1448. }
  1449. </style>
  1450. <style lang="scss">
  1451. .data-fill-wbs-content {
  1452. position: relative;
  1453. height: 100%;
  1454. .n-drawer-container {
  1455. margin: -20px -24px;
  1456. }
  1457. .n-drawer.n-drawer--top-placement {
  1458. height: auto !important;
  1459. background-color: initial;
  1460. pointer-events: none;
  1461. bottom: 0;
  1462. }
  1463. .drawer-data-fill-content-box {
  1464. position: relative;
  1465. height: 100%;
  1466. padding: 24px;
  1467. .n-card {
  1468. pointer-events: auto;
  1469. height: 100%;
  1470. overflow: auto;
  1471. }
  1472. .data-fill-content {
  1473. position: relative;
  1474. height: 100%;
  1475. overflow-y: auto;
  1476. scroll-behavior: smooth;
  1477. .data-fill-list-box .data-fill-list-item-content {
  1478. height: calc(100vh - 470px);
  1479. .data-fill-table-form-box {
  1480. height: 100%;
  1481. }
  1482. }
  1483. }
  1484. .data-fill-foot {
  1485. position: relative;
  1486. text-align: center;
  1487. }
  1488. }
  1489. }
  1490. .n-card.hc-card-overflow-box .n-card__content {
  1491. padding: 24px;
  1492. }
  1493. .n-card.hc-custom-card > .n-card-header {
  1494. padding: 15px 24px;
  1495. }
  1496. .n-card.hc-custom-card.copy {
  1497. width: 1200px;
  1498. max-height: 90vh;
  1499. overflow: auto;
  1500. .n-card-header .n-card-header__close {
  1501. display: none;
  1502. }
  1503. &.one {
  1504. width: 600px;
  1505. }
  1506. &.many {
  1507. width: 1200px;
  1508. }
  1509. }
  1510. .img-preview-box {
  1511. position: relative;
  1512. height: 100%;
  1513. width: 100%;
  1514. }
  1515. .hc-layout-content-box{
  1516. position: relative;
  1517. }
  1518. .hc-layout-content-box-lefticon {
  1519. position: absolute;
  1520. left: -28px;
  1521. top:50%;
  1522. z-index: 1000;
  1523. font-size: 50px;
  1524. color: var(--el-color-primary);
  1525. cursor:pointer;
  1526. // float: left;
  1527. }
  1528. .hc-layout-content-box-righticon {
  1529. position: absolute;
  1530. left: -28px;
  1531. top:50%;
  1532. z-index: 1001;
  1533. font-size: 50px;
  1534. color: var(--el-color-primary);
  1535. cursor:pointer;
  1536. // float: left;
  1537. }
  1538. .hc-arrow-icon {
  1539. width: 28px;
  1540. height: 28px;
  1541. display: flex;
  1542. font-size: 20px;
  1543. align-items: center;
  1544. justify-content: center;
  1545. cursor: pointer;
  1546. transition: color 0.2s;
  1547. border-radius: 50%;
  1548. box-shadow: var(--hc-shadow);
  1549. background:var(--el-color-primary-light-9);
  1550. &:hover {
  1551. color: var(--el-color-primary);
  1552. }
  1553. }
  1554. </style>