tree.vue 46 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193
  1. <template>
  2. <basic-container>
  3. <el-row :gutter="20">
  4. <el-col :span="10">
  5. <div class="box">
  6. <p>工程节点信息</p>
  7. <div class="flex">
  8. <el-input placeholder="输入关键字进行过滤" v-model="filterText" @input="filterChange"></el-input>
  9. <!-- <el-button type="info" class="mg-l-20">导入划分</el-button> -->
  10. </div>
  11. <el-scrollbar>
  12. <div v-loading="treeLoad">
  13. <el-tree v-show="!filterText"
  14. class="filter-tree" lazy
  15. :load="loadNode" @node-click="getNodeDetail"
  16. :props="defaultProps" :expand-on-click-node="false"
  17. highlight-current node-key="id"
  18. ref="tree">
  19. <span class="custom-tree-node" :class="data.moreShow?'show':''" slot-scope="{ node, data }">
  20. <!--@mouseover="mouseover(data)" @mouseleave="mouseout(data)"-->
  21. <span>
  22. {{ node.label }}
  23. <el-dropdown @click="command=>{setLeftType(command,data)}" @visible-change="visiblechange($event,data)">
  24. <el-button
  25. type="text" icon="el-icon-more" class="normal-black">
  26. </el-button>
  27. <el-dropdown-menu slot="dropdown">
  28. <el-dropdown-item @click.native="setLeftType(1,data,node)" icon="el-icon-circle-plus-outline">新增子级</el-dropdown-item>
  29. <el-dropdown-item @click.native="setLeftType(2,data,node)" icon="el-icon-edit">编辑节点</el-dropdown-item>
  30. <el-dropdown-item @click.native="setLeftType(3,data,node)" icon="el-icon-document-copy">复制节点</el-dropdown-item>
  31. <el-dropdown-item @click.native="setLeftType(4,data,node)" icon="iconfont hcicon-danganziliao-biaogetianxie" class="font-s-12">元素公式</el-dropdown-item>
  32. <el-dropdown-item @click.native="setLeftType(5,data,node)" icon="el-icon-coin">元素设置</el-dropdown-item>
  33. <el-dropdown-item @click.native="nodeInfo(data,node)" icon="el-icon-help">节点参数</el-dropdown-item>
  34. <el-dropdown-item @click.native="importTemplate(data,node)" v-if="node.level == 2" icon="el-icon-upload">导入划分</el-dropdown-item>
  35. </el-dropdown-menu>
  36. </el-dropdown>
  37. </span>
  38. </span>
  39. </el-tree>
  40. <el-tree v-show="filterText"
  41. class="filter-tree"
  42. :data="treeData" @node-click="getNodeDetail"
  43. :props="defaultProps" :expand-on-click-node="false"
  44. highlight-current node-key="id"
  45. :filter-node-method="filterNode"
  46. ref="treeall">
  47. <span class="custom-tree-node" slot-scope="{ node, data }" :class="data.moreShow?'show':''">
  48. <span>
  49. {{ node.label }}
  50. <el-dropdown @click="command=>{setLeftType(command,data)}" @visible-change="visiblechange($event,data)">
  51. <el-button
  52. type="text" icon="el-icon-more" class="normal-black">
  53. </el-button>
  54. <el-dropdown-menu slot="dropdown">
  55. <el-dropdown-item @click.native="setLeftType(1,data,node)" icon="el-icon-circle-plus-outline">新增子级</el-dropdown-item>
  56. <el-dropdown-item @click.native="setLeftType(2,data,node)" icon="el-icon-edit">编辑节点</el-dropdown-item>
  57. <el-dropdown-item @click.native="setLeftType(3,data,node)" icon="el-icon-document-copy">复制节点</el-dropdown-item>
  58. <el-dropdown-item @click.native="setLeftType(4,data,node)" icon="iconfont hcicon-danganziliao-biaogetianxie" class="font-s-12">元素公式</el-dropdown-item>
  59. <el-dropdown-item @click.native="setLeftType(5,data,node)" icon="el-icon-coin">元素设置</el-dropdown-item>
  60. <el-dropdown-item @click.native="nodeInfo(data,node)" icon="el-icon-help">节点参数</el-dropdown-item>
  61. <el-dropdown-item @click.native="importTemplate(data,node)" v-if="node.level == 2" icon="el-icon-upload">导入划分</el-dropdown-item>
  62. </el-dropdown-menu>
  63. </el-dropdown>
  64. </span>
  65. </span>
  66. </el-tree>
  67. </div>
  68. </el-scrollbar>
  69. </div>
  70. </el-col>
  71. <el-col :span="14">
  72. <template v-if="leftType==5">
  73. <p>节点信息</p>
  74. <el-table :data="tableData" border style="width: 100%">
  75. <el-table-column align="center" prop="deptName" label="当前节点" ></el-table-column>
  76. <el-table-column align="center" prop="deptCategory" :formatter="formatCat" label="节点类型" width="180"></el-table-column>
  77. <el-table-column align="center" prop="parentName" label="上级节点"></el-table-column>
  78. </el-table>
  79. <p>
  80. <span>当前已创建的元素表</span>
  81. <el-button @click="showFormElement" type="text" icon="el-icon-circle-plus-outline" class="text-icon mg-l-10"></el-button>
  82. <el-button type="text" icon="el-icon-document-copy" class="text-icon"></el-button>
  83. </p>
  84. <el-table :data="formData" border style="width: 100%">
  85. <el-table-column align="center" prop="tableName" label="表单名称" ></el-table-column>
  86. <el-table-column align="center" prop="elementTotal" label="元素总量"></el-table-column>
  87. <el-table-column align="center" prop="tableType" :formatter="formatTableType" label="表单类型"></el-table-column>
  88. <el-table-column align="center" prop="tableOwner" :formatter="formatOwner" label="所属方"></el-table-column>
  89. <el-table-column label="操作">
  90. <template slot-scope="scope">
  91. <el-button
  92. size="mini"
  93. @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
  94. <el-button
  95. size="mini"
  96. type="danger"
  97. @click="handleDelete(scope.$index, scope.row)">删除</el-button>
  98. </template>
  99. </el-table-column>
  100. </el-table>
  101. </template>
  102. <template v-if="leftType==4">
  103. <el-table :data="formData" border style="width: 100%">
  104. <el-table-column align="center" prop="tableName" label="表单名称" ></el-table-column>
  105. <el-table-column align="center" prop="tableType" :formatter="formatTableType" label="表单类型"></el-table-column>
  106. <el-table-column label="是否关联清表" width="130" prop="isLinkTable" align="center">
  107. <template slot-scope="scope">
  108. <span v-if="scope.row.isLinkTable == 2">是</span>
  109. <span v-else>否</span>
  110. </template>
  111. </el-table-column>
  112. <el-table-column align="center" prop="tableOwner" :formatter="formatOwner" label="所属方"></el-table-column>
  113. <el-table-column label="操作" width="350" align="center">
  114. <template slot-scope="scope">
  115. <el-link type="primary" >编辑元素</el-link>
  116. <el-link class="mg-l-10" type="primary" >关联清表</el-link>
  117. <el-link class="mg-l-10" type="primary" >调整表单</el-link>
  118. <el-link class="mg-l-10" type="danger" @click="handleDelete(scope.$index, scope.row)">删除表单</el-link>
  119. <!-- <el-button
  120. size="mini"
  121. @click="handleEditFormula(scope.$index, scope.row)">编辑元素公式</el-button> -->
  122. </template>
  123. </el-table-column>
  124. </el-table>
  125. </template>
  126. </el-col>
  127. </el-row>
  128. <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="50%" append-to-body :close-on-click-modal="false">
  129. <el-form ref="nodeDetail" :model="nodeDetail" :rules="rules" label-width="110px">
  130. <el-form-item label="节点名称" prop="deptName">
  131. <el-input v-model="nodeDetail.deptName"></el-input>
  132. </el-form-item>
  133. <el-form-item label="上级节点">
  134. <el-input v-model="nodeDetail.parentName" disabled></el-input>
  135. </el-form-item>
  136. <el-form-item label="节点类型" prop="deptCategory">
  137. <el-select v-model="nodeDetail.deptCategory" placeholder="请选择" class="w-100p">
  138. <el-option v-for="item in deptCategorylist" :key="item.id" :label="item.dictValue" :value="item.dictKey"></el-option>
  139. </el-select>
  140. </el-form-item>
  141. <el-form-item label="划分编号">
  142. <el-input v-model="nodeDetail.partitionCode"></el-input>
  143. </el-form-item>
  144. <el-form-item label="唯一编码">
  145. <el-input v-model="nodeDetail.uniqueCode"></el-input>
  146. </el-form-item>
  147. <template v-if="nodeDetail.deptCategory == 6">
  148. <el-form-item label="是否有混凝土">
  149. <el-radio-group v-model="nodeDetail.isConcrete" size="small">
  150. <el-radio :label="0" border>无</el-radio>
  151. <el-radio :label="1" border>有</el-radio>
  152. </el-radio-group>
  153. </el-form-item>
  154. <el-form-item label="是否试验节点">
  155. <el-radio-group v-model="nodeDetail.isExpernode" size="small">
  156. <el-radio :label="0" border>否</el-radio>
  157. <el-radio :label="1" border>是</el-radio>
  158. </el-radio-group>
  159. </el-form-item>
  160. </template>
  161. <el-form-item label="内业资料类型">
  162. <el-select v-model="nodeDetail.majorDataType" placeholder="请选择" class="w-100p">
  163. <el-option v-for="item in majorDataTypeList" :key="item.id" :label="item.dictValue" :value="item.dictKey"></el-option>
  164. </el-select>
  165. </el-form-item>
  166. </el-form>
  167. <span slot="footer" class="dialog-footer">
  168. <el-button @click="dialogVisible = false">取 消</el-button>
  169. <el-button type="primary" @click="saveNode">确 定</el-button>
  170. </span>
  171. </el-dialog>
  172. <el-dialog title="创建新的元素表" :visible.sync="eleVisible" width="80%" append-to-body :close-on-click-modal="false">
  173. <el-form ref="eleDialog" :model="eleForm" :rules="eleRules" label-width="110px">
  174. <el-form-item label="表名" prop="deptName">
  175. <el-input v-model="eleForm.deptName"></el-input>
  176. </el-form-item>
  177. <el-row>
  178. <el-col :span="12">
  179. <el-form-item label="表类型" prop="tableType">
  180. <el-select v-model="eleForm.tableType" placeholder="请选择" class="w-100p">
  181. <el-option v-for="item in tableTypelist" :key="item.id" :label="item.dictValue" :value="item.dictKey"></el-option>
  182. </el-select>
  183. </el-form-item>
  184. </el-col>
  185. <el-col :span="12">
  186. <el-form-item label="所属方" prop="tableOwner">
  187. <el-select v-model="eleForm.tableOwner" placeholder="请选择" class="w-100p">
  188. <el-option v-for="item in ownerTypeList" :key="item.id" :label="item.dictValue" :value="item.dictKey"></el-option>
  189. </el-select>
  190. </el-form-item>
  191. </el-col>
  192. </el-row>
  193. </el-form>
  194. <div class="flex jc-sb">
  195. <div></div>
  196. <div>
  197. <el-link type="primary" @click="importVisible = true">快捷导入</el-link>
  198. <el-link type="primary" class="mg-l-20" @click="downloadTmp">下载导入模版</el-link>
  199. </div>
  200. </div>
  201. <div class="border-grey">
  202. <p class="font-c-warning">编辑元素信息(请谨慎操作)</p>
  203. <el-table :data="eleForm.elementList" border style="width: 100%" height="400px">
  204. <el-table-column align="center" type="index" width="50"></el-table-column>
  205. <el-table-column align="center" prop="eName" label="元素名称" >
  206. <template slot-scope="scope">
  207. <el-input v-model="scope.row.eName" size="small" placeholder="请输入内容"></el-input>
  208. </template>
  209. </el-table-column>
  210. <el-table-column align="center" prop="eType" label="数据类型" width="120">
  211. <template slot-scope="scope">
  212. <el-select v-model="scope.row.eType" size="small" placeholder="请选择">
  213. <el-option v-for="item in dataTypeList" :key="item.id" :label="item.dictValue" :value="item.dictKey"></el-option>
  214. </el-select>
  215. </template>
  216. </el-table-column>
  217. <el-table-column align="center" prop="eLength" label="长度" width="120">
  218. <template slot-scope="scope">
  219. <el-input v-model="scope.row.eLength" size="small" placeholder="请输入内容" :disabled="scope.row.eType == 4" ></el-input>
  220. </template>
  221. </el-table-column>
  222. <el-table-column align="center" prop="eAllowDeviation" label="允许偏差值">
  223. <template slot-scope="scope">
  224. <div class="flex">
  225. <el-select v-model="scope.row.allow" size="small" placeholder="请选择" style="width:120px">
  226. <el-option :key="1" label="≥" value="≥"></el-option>
  227. <el-option :key="2" label="≤" value="≤"></el-option>
  228. <el-option :key="3" label="±" value="±"></el-option>
  229. <el-option :key="4" label="【】" value="【】"></el-option>
  230. </el-select>
  231. <el-input v-model="scope.row.deviation" size="small" placeholder="请输入内容"></el-input>
  232. </div>
  233. </template>
  234. </el-table-column>
  235. <el-table-column align="center" prop="eInspectionMethod" label="检查方法和频率">
  236. <template slot-scope="scope">
  237. <el-input v-model="scope.row.eInspectionMethod" size="small" placeholder="请输入内容"></el-input>
  238. </template>
  239. </el-table-column>
  240. <el-table-column align="center" label="操作" width="80">
  241. <template slot="header">
  242. <el-button @click="addEleRow(eleForm.elementList)" type="text" icon="el-icon-circle-plus-outline" class="text-icon"></el-button>
  243. </template>
  244. <template slot-scope="scope">
  245. <el-button icon="el-icon-remove-outline" type="text" @click="delEleRow(scope.$index,eleForm.elementList)" class="text-icon text-icon-danger"></el-button>
  246. </template>
  247. </el-table-column>
  248. </el-table>
  249. </div>
  250. <span slot="footer" class="dialog-footer">
  251. <el-button @click="eleVisible = false">取 消</el-button>
  252. <el-button type="primary" @click="saveFormAndElementHandle">保 存</el-button>
  253. </span>
  254. </el-dialog>
  255. <el-dialog title="模版导入" :visible.sync="importVisible" width="50%" append-to-body :close-on-click-modal="false">
  256. <p>提示:必须按照系统要求的模版格式上传,否则系统识别无效 <el-link type="primary" @click="downloadTmp">下载导入模版</el-link></p>
  257. <div>
  258. <el-button size="small" type="primary" @click="fileClick2">本地上传</el-button>
  259. <input @change="tmpImport" type="file" hidden ref="file2" accept=".xls, .xlsx">
  260. </div>
  261. <el-table :data="tempList" border style="width: 100%" >
  262. <el-table-column align="center" prop="eName" label="元素名称" >
  263. </el-table-column>
  264. <el-table-column align="center" prop="eType" label="数据类型" width="120">
  265. </el-table-column>
  266. <el-table-column align="center" prop="eLength" label="长度" width="120">
  267. </el-table-column>
  268. <el-table-column align="center" prop="eAllowDeviation" label="允许偏差值">
  269. </el-table-column>
  270. <el-table-column align="center" prop="eInspectionMethod" label="检查方法和频率">
  271. </el-table-column>
  272. </el-table>
  273. <span slot="footer" class="dialog-footer">
  274. <el-button @click="importVisible = false">取 消</el-button>
  275. <el-button type="primary" @click="importHandle">确 定</el-button>
  276. </span>
  277. </el-dialog>
  278. <el-dialog :title="(curEleTable.tableName?curEleTable.tableName:'')+' 元素编辑'" :visible.sync="editEleVisible" width="80%" append-to-body :close-on-click-modal="false">
  279. <p class="font-c-warning">编辑元素信息(请谨慎操作)</p>
  280. <el-table :data="editEleList" border style="width: 100%" height="400px">
  281. <el-table-column align="center" type="index" width="50"></el-table-column>
  282. <el-table-column align="center" prop="eName" label="元素名称" >
  283. <template slot-scope="scope">
  284. <el-input v-model="scope.row.eName" size="small" placeholder="请输入内容"></el-input>
  285. </template>
  286. </el-table-column>
  287. <el-table-column align="center" prop="eType" label="数据类型" width="120">
  288. <template slot-scope="scope">
  289. <el-select v-model="scope.row.eType" size="small" placeholder="请选择">
  290. <el-option v-for="item in dataTypeList" :key="item.id" :label="item.dictValue" :value="item.dictKey"></el-option>
  291. </el-select>
  292. </template>
  293. </el-table-column>
  294. <el-table-column align="center" prop="eLength" label="长度" width="120">
  295. <template slot-scope="scope">
  296. <el-input v-model="scope.row.eLength" size="small" placeholder="请输入内容" :disabled="scope.row.eType == 4"></el-input>
  297. </template>
  298. </el-table-column>
  299. <el-table-column align="center" prop="eAllowDeviation" label="允许偏差值">
  300. <template slot-scope="scope">
  301. <div class="flex">
  302. <el-select v-model="scope.row.allow" size="small" placeholder="请选择" style="width:120px">
  303. <el-option :key="1" label="≥" value="≥"></el-option>
  304. <el-option :key="2" label="≤" value="≤"></el-option>
  305. <el-option :key="3" label="±" value="±"></el-option>
  306. <el-option :key="4" label="【】" value="【】"></el-option>
  307. </el-select>
  308. <el-input v-model="scope.row.deviation" size="small" placeholder="请输入内容"></el-input>
  309. </div>
  310. </template>
  311. </el-table-column>
  312. <el-table-column align="center" prop="eInspectionMethod" label="检查方法和频率">
  313. <template slot-scope="scope">
  314. <el-input v-model="scope.row.eInspectionMethod" size="small" placeholder="请输入内容"></el-input>
  315. </template>
  316. </el-table-column>
  317. <el-table-column align="center" label="操作" width="120">
  318. <template slot="header">
  319. <el-button @click="addEleRow(editEleList)" type="text" icon="el-icon-circle-plus-outline" class="text-icon"></el-button>
  320. </template>
  321. <template slot-scope="scope">
  322. <el-button v-if="scope.row.id" icon="el-icon-remove-outline" type="text" @click="delEleRowHandle(scope.$index,editEleList)" class="text-icon text-icon-danger"></el-button>
  323. <div class="flex" v-else>
  324. <el-button @click="saveNewEle(scope.row)" type="mini">保存</el-button>
  325. <el-button icon="el-icon-remove-outline" type="text" @click="delEleRowHandle(scope.$index,editEleList)" class="text-icon text-icon-danger"></el-button>
  326. </div>
  327. </template>
  328. </el-table-column>
  329. </el-table>
  330. <span slot="footer" class="dialog-footer">
  331. <el-button @click="editEleVisible = false">取 消</el-button>
  332. <el-button type="primary" @click="saveEles">确 定</el-button>
  333. </span>
  334. </el-dialog>
  335. <el-dialog title="元素公式" :visible.sync="editEleFormulaVisible" width="800px" append-to-body :close-on-click-modal="false">
  336. <div class="flex mg-b-10">
  337. <el-input v-model="formulaInput" placeholder="请输入内容" size="samll"></el-input>
  338. <el-button type="info">保存</el-button>
  339. </div>
  340. <el-table :data="editEleList" border style="width: 100%" height="400px">
  341. <el-table-column align="center" prop="eName" label="元素名称" >
  342. </el-table-column>
  343. <el-table-column align="center" label="操作" width="200">
  344. <template slot-scope="scope">
  345. <el-link type="primary" >公式配置</el-link>
  346. <el-link class="mg-l-10" type="danger" @click="delEleRowHandle(scope.$index,editEleList)">删除</el-link>
  347. </template>
  348. </el-table-column>
  349. </el-table>
  350. </el-dialog>
  351. <el-dialog title="导入划分" :visible.sync="importTemplateVisible" width="800px" append-to-body :close-on-click-modal="false">
  352. <div v-loading="importLoading">
  353. <div><el-link type="primary" @click="handleDownload">下载导入模版</el-link></div>
  354. <div class="mg-t-20">
  355. <el-button type="primary" @click="fileClick">选择文件</el-button>
  356. <span v-if="upFile" class="mg-l-20">{{upFile.name}}</span>
  357. <input @change="fileChange" type="file" hidden ref="file" accept=".xls, .xlsx">
  358. </div>
  359. <div v-if="!upFile">当前还未选择文件,请选择需要导入的文件</div>
  360. </div>
  361. <span slot="footer" class="dialog-footer">
  362. <el-button @click="importTemplateVisible = false">取 消</el-button>
  363. <el-button type="primary" @click="importTemplateHandle" :loading="importLoading">导 入</el-button>
  364. </span>
  365. </el-dialog>
  366. <el-dialog title="节点参数" :visible.sync="nodeInfoVisible" width="800px" append-to-body :close-on-click-modal="false" :show-close="false">
  367. <div>
  368. <el-button
  369. type="text" icon="el-icon-s-operation" class="right-btn"
  370. @click="infoNameVisible = true"></el-button>
  371. <el-table :data="nodeInfoTable" border style="width: 100%" height="400">
  372. <el-table-column align="center" prop="name" label="参数名称">
  373. <template slot-scope="scope">
  374. <template v-if="scope.row.isEdit">
  375. <el-select v-model="scope.row.name" placeholder="请选择" class="w-100p">
  376. <el-option v-for="item in namelist" :key="item.id" :label="item.dictValue" :value="item.dictKey"></el-option>
  377. </el-select>
  378. </template>
  379. <template v-else>
  380. {{scope.row.name}}
  381. </template>
  382. </template>
  383. </el-table-column>
  384. <el-table-column align="center" prop="value" label="参数值设置">
  385. <template slot-scope="scope">
  386. <template v-if="scope.row.isEdit">
  387. <el-input v-model="scope.row.value"></el-input>
  388. </template>
  389. <template v-else>
  390. {{scope.row.value}}
  391. </template>
  392. </template>
  393. </el-table-column>
  394. <el-table-column align="center" prop="describe" label="描述">
  395. <template slot-scope="scope">
  396. <template v-if="scope.row.isEdit">
  397. <el-input v-model="scope.row.describe"></el-input>
  398. </template>
  399. <template v-else>
  400. {{scope.row.describe}}
  401. </template>
  402. </template>
  403. </el-table-column>
  404. <el-table-column label="操作" width="120" align="center">
  405. <template slot-scope="scope">
  406. <el-button
  407. type="text" size="small" v-show="scope.row.isEdit"
  408. @click="saveNodeInfoHandle(scope.$index, scope.row)">保存</el-button>
  409. <el-button
  410. type="text" size="small" v-show="!scope.row.isEdit"
  411. @click="editNodeInfo(scope.$index, scope.row)">编辑</el-button>
  412. <el-button
  413. type="text" size="small" class="text-icon-danger"
  414. @click="delNodeInfo(scope.$index, scope.row)">删除</el-button>
  415. </template>
  416. </el-table-column>
  417. </el-table>
  418. </div>
  419. <span slot="footer" class="dialog-footer">
  420. <el-button @click="nodeInfoVisible = false">取 消</el-button>
  421. <el-button type="primary" @click="nodeInfoSave">保 存</el-button>
  422. </span>
  423. </el-dialog>
  424. <el-dialog title="设置参数名称" :visible.sync="infoNameVisible" width="800px" append-to-body :close-on-click-modal="false">
  425. <div>
  426. <el-table :data="namelist" border style="width: 100%" height="400">
  427. <el-table-column align="center" prop="name" label="参数名称">
  428. <template slot-scope="scope">
  429. <template v-if="scope.row.isEdit">
  430. <el-input v-model="scope.row.name"></el-input>
  431. </template>
  432. <template v-else>
  433. {{scope.row.name}}
  434. </template>
  435. </template>
  436. </el-table-column>
  437. <el-table-column align="center" prop="key" label="参数值KEY">
  438. <template slot-scope="scope">
  439. <template v-if="scope.row.isEdit">
  440. <el-input v-model="scope.row.key"></el-input>
  441. </template>
  442. <template v-else>
  443. {{scope.row.key}}
  444. </template>
  445. </template>
  446. </el-table-column>
  447. <el-table-column align="center" prop="describe" label="描述">
  448. <template slot-scope="scope">
  449. <template v-if="scope.row.isEdit">
  450. <el-input v-model="scope.row.describe"></el-input>
  451. </template>
  452. <template v-else>
  453. {{scope.row.describe}}
  454. </template>
  455. </template>
  456. </el-table-column>
  457. <el-table-column label="操作" width="120" align="center">
  458. <template slot-scope="scope">
  459. <el-button
  460. type="text" size="small" v-show="scope.row.isEdit"
  461. @click="saveNodeInfoHandle(scope.$index, scope.row)">保存</el-button>
  462. <el-button
  463. type="text" size="small" v-show="!scope.row.isEdit"
  464. @click="editNodeInfo(scope.$index, scope.row)">编辑</el-button>
  465. <el-button
  466. type="text" size="small" class="text-icon-danger"
  467. @click="delNodeInfo(scope.$index, scope.row)">删除</el-button>
  468. </template>
  469. </el-table-column>
  470. </el-table>
  471. </div>
  472. <span slot="footer" class="dialog-footer">
  473. <el-button @click="infoNameVisible = false">关 闭</el-button>
  474. </span>
  475. </el-dialog>
  476. </basic-container>
  477. </template>
  478. <script>
  479. import {saveFormAndElement,selectFormElements,
  480. importWbsTree} from "@/api/manager/wbstree";
  481. import {saveElement,remove as removeElement,updateBatchElements,getTemplate,
  482. importWbsElement} from "@/api/manager/wbsformelement";
  483. import {getLazytree,getDetail,update,findNodeTableByCondition as selectByNodeTable, removeTableByCondition as removeTableById} from "@/api/manager/wbsprivate";
  484. import {findProjectTree as getAlltree} from "@/api/manager/projectinfo";
  485. import {getList as getAttchFromOriginalName} from "@/api/resource/attach";
  486. import {getDictionary} from "@/api/system/dict";
  487. import {mapGetters} from "vuex";
  488. export default {
  489. data() {
  490. return {
  491. id:'',
  492. projectid:'',
  493. filterText:'',
  494. treeData:[],
  495. treeLoad:false,
  496. menuShow:false,
  497. defaultProps: {
  498. children: 'children',
  499. label: 'title',
  500. isLeaf: function(data){
  501. return !data.hasChildren;
  502. }
  503. },
  504. leftType:5,
  505. curTreeData:{},
  506. tableData:[],
  507. nodeDetail:{},
  508. formData:[],
  509. editType:1,
  510. dialogVisible:false,
  511. deptCategorylist:[],
  512. majorDataTypeList:[],
  513. rules:{
  514. deptName: [
  515. { required: true, message: '请输入节点名称', trigger: 'blur' },
  516. ],
  517. deptCategory:[
  518. { required: true, message: '请选择节点类型', trigger: 'change' }
  519. ]
  520. },
  521. eleVisible:false,
  522. tableTypelist:[],
  523. dataTypeList:[],
  524. ownerTypeList:[],
  525. eleForm:{
  526. elementList:[],
  527. },
  528. eleRules:{
  529. deptName: [
  530. { required: true, message: '请输入表名称', trigger: 'blur' },
  531. ],
  532. tableType:[
  533. { required: true, message: '请选择表类型', trigger: 'change' }
  534. ],
  535. tableOwner:[
  536. { required: true, message: '请选择所属方', trigger: 'change' }
  537. ],
  538. },
  539. importVisible:false,
  540. tempList:[],
  541. curEleTable:{},
  542. editEleVisible:false,
  543. editEleList:[],
  544. eleReg:/(≥|≤|±|【】)?([^≥≤±【】]*)/,
  545. editEleFormulaVisible:false,
  546. formulaInput:'',
  547. importTemplateVisible:false,
  548. fileUrl:'',
  549. upFile:null,
  550. importLoading:false,
  551. nodeInfoVisible:false,
  552. nodeInfoTable:[],
  553. namelist:[],
  554. infoNameVisible:false,
  555. };
  556. },
  557. computed: {
  558. ...mapGetters(["userInfo"]),
  559. dialogTitle:function(){
  560. let text = '节点';
  561. if(this.leftType == 1){
  562. text = '新增'+text;
  563. }else if(this.leftType == 2){
  564. text = '编辑'+text;
  565. }
  566. return text;
  567. },
  568. },
  569. created() {
  570. this.init();
  571. //console.log(this.userInfo)
  572. },
  573. methods: {
  574. init(){
  575. this.id = this.$route.query.wbsid;
  576. this.projectid = this.$route.query.pid;
  577. this.getDeptCategorylist();
  578. this.getTableTypelist();
  579. this.getDataTypelist();
  580. this.getOwnerTypelist();
  581. },
  582. loadNode(node, resolve){
  583. let pid = 0;
  584. if (node.level != 0) {
  585. pid = node.data.id
  586. }
  587. getLazytree(this.id ,pid,this.userInfo.tenant_id,this.projectid).then((res)=>{
  588. let arr = [];
  589. if(Array.isArray(res.data.data)){
  590. arr = res.data.data;
  591. }
  592. return resolve(arr);
  593. })
  594. },
  595. getNodeDetail(data,node){
  596. //console.log(data,node,ref)
  597. let parentName = '';
  598. if(node.parent.data){
  599. parentName = node.parent.data.title;
  600. }
  601. this.curTreeData = data;
  602. this.curTreeData.parentName = parentName;
  603. getDetail(data.id,this.id,this.projectid).then((res)=>{
  604. res.data.data.parentName = parentName;
  605. this.tableData = [res.data.data];
  606. this.nodeDetail = Object.assign({},res.data.data);
  607. })
  608. this.updateNodeTable();
  609. },
  610. saveNode(){
  611. this.$refs['nodeDetail'].validate((valid) => {
  612. if (valid) {
  613. if(this.editType == 1){
  614. this.addNode();
  615. }else if(this.editType == 2){
  616. this.updateNode();
  617. }
  618. } else {
  619. console.log('error submit!!');
  620. return false;
  621. }
  622. });
  623. },
  624. addNode(){
  625. update(this.nodeDetail).then(()=>{
  626. this.updateTreeNewNode();
  627. this.dialogVisible = false;
  628. this.$message({
  629. type: "success",
  630. message: "新增成功!"
  631. });
  632. })
  633. },
  634. updateNode(){
  635. update(this.nodeDetail).then(()=>{
  636. let node = this.tableData[0];
  637. node.deptName = this.nodeDetail.deptName;
  638. node.deptCategory = this.nodeDetail.deptCategory;
  639. this.curTreeData.title = this.nodeDetail.deptName;
  640. this.dialogVisible = false;
  641. this.$message({
  642. type: "success",
  643. message: "修改成功!"
  644. });
  645. })
  646. },
  647. setLeftType(type,data,node){
  648. if(type == 4 || type == 5){
  649. this.leftType = type;
  650. }
  651. this.curTreeData = data;
  652. this.$refs.tree.setCurrentKey(data.id);
  653. if(type == 1 || type == 2){
  654. this.getMajorDataTypeList();
  655. this.dialogVisible = true;
  656. this.editType = type;
  657. }
  658. getDetail(data.id,this.id,this.projectid).then((res)=>{
  659. let parentName = '';
  660. if(node.parent.data){
  661. parentName = node.parent.data.title;
  662. }
  663. res.data.data.parentName = parentName;
  664. this.tableData = [res.data.data];
  665. if(type == 1){
  666. this.nodeDetail = {
  667. parentId:res.data.data.id,
  668. parentName:parentName,
  669. pkeyId:res.data.data.pkeyId
  670. };
  671. }else{
  672. this.nodeDetail = Object.assign({},res.data.data);
  673. }
  674. this.nodeDetail.type = 1;// '1'节点 '2'表单
  675. this.nodeDetail.wbsId = this.id;
  676. this.nodeDetail.tenantId = this.userInfo.tenant_id
  677. })
  678. if(this.leftType == 4){
  679. selectByNodeTable(data.id,this.projectid,this.id).then((res)=>{
  680. if(res.data.data.length){
  681. this.formData = res.data.data;
  682. }else{
  683. this.formData = [];
  684. }
  685. })
  686. }
  687. },
  688. showFormElement(){
  689. if(!this.nodeDetail.id){
  690. this.$message({
  691. type: "warning",
  692. message: "请先选择在哪个节点下创建表"
  693. });
  694. return;
  695. }
  696. this.eleVisible = true;
  697. },
  698. addEleRow(list){
  699. list.push({});
  700. },
  701. delEleRow(index,list){
  702. list.splice(index,1);
  703. },
  704. saveFormAndElementHandle(){
  705. this.$refs['eleDialog'].validate((valid) => {
  706. if (valid) {
  707. this.eleForm.wbsId = this.id;
  708. this.eleForm.tenantId = this.userInfo.tenant_id;
  709. this.eleForm.deptCategory = -1;
  710. this.eleForm.type = 2;// '1'节点 '2'表单
  711. this.eleForm.parentId = this.nodeDetail.id;
  712. this.eleForm.elementList.forEach((element)=>{
  713. element.eAllowDeviation = (element.allow?element.allow:'') + (element.deviation?element.deviation:'');
  714. if(element.eType == 4){
  715. element.eLength = 0;
  716. }
  717. })
  718. saveFormAndElement(this.eleForm).then(()=>{
  719. //console.log(res)
  720. this.updateTreeNewNode();
  721. this.updateNodeTable();
  722. this.eleVisible = false;
  723. this.$message({
  724. type: "success",
  725. message: "新增成功!"
  726. });
  727. })
  728. } else {
  729. console.log('error submit!!');
  730. return false;
  731. }
  732. });
  733. },
  734. updateTreeNewNode(){
  735. getLazytree(this.id ,this.nodeDetail.parentId).then((res)=>{
  736. this.$refs.tree.updateKeyChildren(this.nodeDetail.parentId,res.data.data)
  737. })
  738. },
  739. updateNodeTable(){
  740. selectByNodeTable(this.curTreeData.id,this.projectid,this.id).then((res)=>{
  741. if(res.data.data.length){
  742. this.formData = res.data.data;
  743. }else{
  744. this.formData = [];
  745. }
  746. })
  747. },
  748. importHandle(){
  749. },
  750. handleEdit(index,row){
  751. this.curEleTable = row;
  752. selectFormElements(this.curEleTable.id).then((res)=>{
  753. res.data.data.forEach((element)=>{
  754. this.eleReg.exec(element.eAllowDeviation);
  755. // console.log(RegExp.$1)
  756. // console.log(RegExp.$2)
  757. element.allow = RegExp.$1?RegExp.$1:'';
  758. element.deviation = RegExp.$2?RegExp.$2:'';
  759. })
  760. this.editEleList = res.data.data;
  761. })
  762. this.editEleVisible = true;
  763. },
  764. handleDelete(index,row){
  765. this.$confirm('是否删除 '+row.tableName + ' ?', '删除元素表', {
  766. distinguishCancelAndClose: true,
  767. confirmButtonText: '删除',
  768. cancelButtonText: '取消'
  769. }).then(() => {
  770. removeTableById(row.id,this.projectid,this.id).then(()=>{
  771. this.formData.splice(index,1);
  772. this.$message({
  773. type: "success",
  774. message: "删除成功!"
  775. });
  776. })
  777. })
  778. },
  779. handleEditFormula(index,row){
  780. this.curEleTable = row;
  781. selectFormElements(this.curEleTable.id).then((res)=>{
  782. this.editEleList = res.data.data;
  783. })
  784. this.editEleFormulaVisible = true;
  785. },
  786. saveNewEle(row){
  787. row.eAllowDeviation = (row.allow?row.allow:'') + (row.deviation?row.deviation:'');
  788. row.fId = this.curEleTable.id;
  789. row.initTableName = this.curEleTable.initTableName;
  790. if(row.eType == 4){
  791. row.eLength = 0;
  792. }
  793. saveElement(row).then((res)=>{
  794. if(res.data.data){
  795. this.$set(row,'id',res.data.data.id);
  796. this.$set(row,'ekey',res.data.data.ekey);
  797. this.$message({
  798. type: "success",
  799. message: "保存成功!"
  800. });
  801. }
  802. })
  803. },
  804. delEleRowHandle(index,list){
  805. let row = list[index];
  806. if(row.id){
  807. //有id需要请求删除
  808. this.$confirm('是否确认删除?', '删除元素', {
  809. distinguishCancelAndClose: true,
  810. confirmButtonText: '删除',
  811. cancelButtonText: '取消'
  812. }).then(() => {
  813. removeElement(row.id,this.curEleTable.initTableName,row.ekey).then(()=>{
  814. list.splice(index,1);
  815. })
  816. })
  817. }else{
  818. list.splice(index,1);
  819. }
  820. },
  821. saveEles(){
  822. for (let i = 0; i < this.editEleList.length; i++) {
  823. if(!this.editEleList[i].id){
  824. this.$message({
  825. type: "warning",
  826. message: "请先将新增的元素点击保存"
  827. });
  828. return;
  829. }
  830. }
  831. if(this.editEleList.length > 0){
  832. this.editEleList.forEach((element)=>{
  833. element.eAllowDeviation = (element.allow?element.allow:'') + (element.deviation?element.deviation:'');
  834. if(element.eType == 4){
  835. element.eLength = 0;
  836. }
  837. })
  838. updateBatchElements(this.editEleList,this.curEleTable.initTableName).then(()=>{
  839. this.editEleVisible = false;
  840. this.updateNodeTable();
  841. this.$message({
  842. type: "success",
  843. message: "保存成功!"
  844. });
  845. })
  846. }else{
  847. this.editEleVisible = false;
  848. this.updateNodeTable();
  849. this.$message({
  850. type: "success",
  851. message: "保存成功!"
  852. });
  853. }
  854. },
  855. filterChange(){
  856. //console.log(this.$refs)
  857. //debugger
  858. if(this.treeData.length > 0){
  859. this.$refs.treeall.filter(this.filterText);
  860. return;
  861. }
  862. this.treeLoad = true;
  863. getAlltree(this.projectid,this.id).then((res)=>{
  864. this.treeLoad = false;
  865. this.treeData = res.data.data;
  866. this.$nextTick(()=>{
  867. this.$refs.treeall.filter(this.filterText);
  868. })
  869. })
  870. },
  871. importTemplate(data){
  872. this.importTemplateVisible = true;
  873. this.curTreeData = data;
  874. if(!this.fileUrl){
  875. getAttchFromOriginalName(1, 20, {
  876. originalName:'WBS划分模板.xls'
  877. }).then((res)=>{
  878. if(res.data.data.records.length){
  879. this.fileUrl = res.data.data.records[0].link;
  880. }else{
  881. this.fileUrl = '';
  882. }
  883. })
  884. }
  885. },
  886. importTemplateHandle(){
  887. if(!this.upFile){
  888. this.$message({
  889. type: "warning",
  890. message: "请先选择文件再进行导入"
  891. });
  892. }
  893. let forms = new FormData();
  894. forms.append('excelFile', this.upFile);
  895. let wbsTreeFu = {
  896. wbsId:this.id,
  897. parentId:this.curTreeData.id,
  898. // ancestors:'0,'+this.curTreeData.id,
  899. }
  900. let json = JSON.stringify(wbsTreeFu);
  901. let blob = new Blob([json],{type:'application/json'})
  902. forms.append('wbsTreeFu', blob);
  903. this.importLoading = true;
  904. importWbsTree(forms).then(()=>{
  905. //this.$router.go(0)
  906. let node = this.$refs.tree.getNode(this.curTreeData.id);
  907. node.isLeaf = false;
  908. this.importTemplateVisible = false;
  909. this.upFile = null;
  910. }).finally(()=>{
  911. this.importLoading = false;
  912. })
  913. },
  914. handleDownload() {
  915. if(this.fileUrl){
  916. window.open(this.fileUrl);
  917. }else{
  918. this.$message({
  919. type: "warning",
  920. message: "请先在附件管理上传【WBS划分模板.xls】文件"
  921. });
  922. }
  923. },
  924. fileClick(){
  925. this.$refs.file.click();
  926. },
  927. fileChange(e){
  928. const file = e.target.files[0]
  929. if (!file) {
  930. // 如果用户没有选择图片,只是点了文件上传这个按钮
  931. return
  932. }
  933. //console.log(file)
  934. this.upFile = file;
  935. },
  936. nodeInfo(){
  937. this.nodeInfoVisible = true;
  938. },
  939. nodeInfoSave(){
  940. },
  941. delNodeInfo(){
  942. },
  943. editNodeInfo(index,row){
  944. this.$set(row,'isEdit',true);
  945. },
  946. saveNodeInfoHandle(index,row){
  947. row.isEdit = false;
  948. },
  949. downloadTmp(){
  950. getTemplate().then((res)=>{
  951. //console.log(res)
  952. let blob = new Blob([res.data], {
  953. type: 'application/vnd.ms-excel'
  954. });
  955. //console.log(blob)
  956. let filename = Date.parse(new Date()) + '.xls';
  957. if (window.navigator.msSaveOrOpenBlob) {
  958. // 兼容IE10
  959. window.navigator.msSaveBlob(blob, filename);
  960. } else {
  961. // 兼容chrome/firefox
  962. let aTag = document.createElement('a');
  963. aTag.download = Date.parse(new Date()) + '.xls';
  964. aTag.href = window.URL.createObjectURL(blob);
  965. aTag.click();
  966. URL.revokeObjectURL(aTag.href);
  967. }
  968. })
  969. },
  970. fileClick2(){
  971. this.$refs.file2.click();
  972. },
  973. tmpImport(e){
  974. const file = e.target.files[0];
  975. const formData = new FormData();
  976. formData.append('file', file);
  977. //console.log(file.name)
  978. importWbsElement(formData).then((res)=>{
  979. res.data.data.forEach((element)=>{
  980. element.eName = element.elementName;
  981. element.eLength = element.elementLength;
  982. element.eType = Number(element.elementType);
  983. element.eAllowDeviation = element.elementAllowDeviation;
  984. element.eInspectionMethod = element.elementInspectionMethod;
  985. this.eleReg.exec(element.eAllowDeviation);
  986. // console.log(RegExp.$1)
  987. // console.log(RegExp.$2)
  988. element.allow = RegExp.$1?RegExp.$1:'';
  989. element.deviation = RegExp.$2?RegExp.$2:'';
  990. })
  991. this.eleForm.elementList = res.data.data;
  992. this.importVisible = false;
  993. }).finally(()=>{
  994. e.target.value='';
  995. })
  996. },
  997. visiblechange(value,data){
  998. this.$set(data, 'moreShow', value)
  999. },
  1000. getDeptCategorylist(){
  1001. if(this.deptCategorylist.length >1){
  1002. return;
  1003. }
  1004. getDictionary({
  1005. code:'wbs_node_type'
  1006. }).then((res)=>{
  1007. res.data.data.forEach(element => {
  1008. element.dictKey = Number(element.dictKey)
  1009. });
  1010. this.deptCategorylist = res.data.data;
  1011. })
  1012. },
  1013. getMajorDataTypeList(){
  1014. if(this.majorDataTypeList.length >1){
  1015. return;
  1016. }
  1017. getDictionary({
  1018. code:'major_data_type'
  1019. }).then((res)=>{
  1020. res.data.data.forEach(element => {
  1021. element.dictKey = Number(element.dictKey)
  1022. });
  1023. this.majorDataTypeList = res.data.data;
  1024. })
  1025. },
  1026. getTableTypelist(){
  1027. if(this.tableTypelist.length >1){
  1028. return;
  1029. }
  1030. getDictionary({
  1031. code:'table_type'
  1032. }).then((res)=>{
  1033. res.data.data.forEach(element => {
  1034. element.dictKey = Number(element.dictKey)
  1035. });
  1036. this.tableTypelist = res.data.data;
  1037. })
  1038. },
  1039. getDataTypelist(){
  1040. if(this.dataTypeList.length >1){
  1041. return;
  1042. }
  1043. getDictionary({
  1044. code:'data_type'
  1045. }).then((res)=>{
  1046. res.data.data.forEach(element => {
  1047. element.dictKey = Number(element.dictKey)
  1048. });
  1049. this.dataTypeList = res.data.data;
  1050. })
  1051. },
  1052. getOwnerTypelist(){
  1053. if(this.ownerTypeList.length >1){
  1054. return;
  1055. }
  1056. getDictionary({
  1057. code:'owner_type'
  1058. }).then((res)=>{
  1059. res.data.data.forEach(element => {
  1060. element.dictKey = Number(element.dictKey)
  1061. });
  1062. this.ownerTypeList = res.data.data;
  1063. })
  1064. },
  1065. formatCat(row, column, cellValue){
  1066. for (let i = 0; i < this.deptCategorylist.length; i++) {
  1067. if(this.deptCategorylist[i].dictKey == cellValue){
  1068. return this.deptCategorylist[i].dictValue
  1069. }
  1070. }
  1071. return cellValue;
  1072. //console.log(cellValue)
  1073. },
  1074. formatTableType(row, column, cellValue){
  1075. for (let i = 0; i < this.tableTypelist.length; i++) {
  1076. if(this.tableTypelist[i].dictKey == cellValue){
  1077. return this.tableTypelist[i].dictValue
  1078. }
  1079. }
  1080. return cellValue;
  1081. //console.log(cellValue)
  1082. },
  1083. formatOwner(row, column, cellValue){
  1084. for (let i = 0; i < this.ownerTypeList.length; i++) {
  1085. if(this.ownerTypeList[i].dictKey == cellValue){
  1086. return this.ownerTypeList[i].dictValue
  1087. }
  1088. }
  1089. return cellValue;
  1090. //console.log(cellValue)
  1091. },
  1092. formatdataType(row, column, cellValue){
  1093. for (let i = 0; i < this.dataTypeList.length; i++) {
  1094. if(this.dataTypeList[i].dictKey == cellValue){
  1095. return this.dataTypeList[i].dictValue
  1096. }
  1097. }
  1098. return cellValue;
  1099. //console.log(cellValue)
  1100. },
  1101. filterNode(value, data) {
  1102. //console.log(value)
  1103. if (!value) return true;
  1104. return data.title.indexOf(value) !== -1;
  1105. }
  1106. }
  1107. };
  1108. </script>
  1109. <style scoped lang="scss">
  1110. .font-s-12 /deep/ .iconfont{
  1111. font-size: 12px;
  1112. }
  1113. .el-popper[x-placement^=bottom]{
  1114. margin-top: -6px;
  1115. }
  1116. .right-btn{
  1117. position: absolute;
  1118. right: 20px;
  1119. top: 10px;
  1120. font-size: 20px;
  1121. }
  1122. .custom-tree-node {
  1123. .normal-black {
  1124. display: none;
  1125. }
  1126. &:hover {
  1127. .normal-black {
  1128. display: block;
  1129. }
  1130. }
  1131. &.show .normal-black{
  1132. display: block;
  1133. }
  1134. }
  1135. </style>