element.vue 42 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527
  1. <template>
  2. <div
  3. style="height:100%;"
  4. class="flexStar"
  5. >
  6. <div
  7. class="boxswai"
  8. style="width:26%;padding-left:0px;"
  9. >
  10. <div class="boxnei" style="display: flex;flex-direction: column;">
  11. <div style="overflow: auto;flex:1">
  12. <avue-tree
  13. :option="treeOption"
  14. :data="treeData"
  15. @node-click="nodeClick"
  16. ref="avueTree"
  17. style="display: inline-block;min-width: 100%;">
  18. <span
  19. class="custom-tree-node"
  20. slot-scope="{ data ,node }"
  21. @mouseover.stop="mouseOver(data)"
  22. @mouseleave.stop="mouseLeave(data)"
  23. style="box-sizing: border-box;padding-right:70px!important;;"
  24. >
  25. <div style="width:100%;">
  26. <span style="text-overflow: ellipsis;"> {{ data.title }} </span>
  27. <!-- <span> {{ node}} </span> -->
  28. <!-- 添加 -->
  29. <span>
  30. <!-- 调整排序 -->
  31. <el-link :underline="false">
  32. <i
  33. class="el-icon-sort"
  34. @click.stop="sortpai(data, node)"
  35. v-if="node.level == 2"
  36. title="调整排序"
  37. ></i>
  38. </el-link>
  39. </span>
  40. </div>
  41. </span>
  42. </avue-tree>
  43. </div>
  44. </div>
  45. </div>
  46. <div
  47. class="boxswai"
  48. style="width:74%;padding-left:0px;padding-right:0px;"
  49. >
  50. <div class="boxnei">
  51. <div
  52. class="marleft10"
  53. style="height:100%;
  54. display: flex;flex-direction: column;"
  55. >
  56. <!-- 上传、删除、下载操作栏 -->
  57. <div
  58. class="rightHeader"
  59. v-show="from.checkd"
  60. >
  61. </div>
  62. <el-empty
  63. style="height:80%;"
  64. v-show="false"
  65. description="该目录为根目录没有EXCEL文件"
  66. ></el-empty>
  67. <div
  68. class="martop20"
  69. v-if="true"
  70. style="flex:1;"
  71. >
  72. <avue-crud
  73. ref="crud"
  74. :data="loadData"
  75. :option="loadOption"
  76. v-model="obj"
  77. :page.sync="page"
  78. @on-load="onLoad"
  79. @selection-change="selectionChange"
  80. :table-loading="tabloading"
  81. @current-change="currentChange"
  82. @size-change="sizeChange"
  83. @refresh-change="refreshChange"
  84. >
  85. <template slot="menuRight">
  86. <el-button
  87. type="danger"
  88. size="small"
  89. icon="el-icon-delete"
  90. plain
  91. @click="handleDelete">删除元素表
  92. </el-button>
  93. <el-button
  94. size="small"
  95. type="primary"
  96. plain
  97. @click="editele"
  98. >编辑表单
  99. </el-button>
  100. </template>
  101. <template slot="menuLeft" slot-scope="{size}">
  102. <div style="display:flex">
  103. <el-input placeholder="请输入你想搜索的表单名称" v-model="input3" :size="size" clearable @clear="clearinput" > </el-input>
  104. <el-button type="primary" icon="el-icon-search" size="small" @click="searchChange">搜索</el-button>
  105. </div>
  106. </template>
  107. <template slot-scope="{type,size,row}" slot="menu">
  108. <el-button :size="size" :type="type" @click="distribution(row)">分配节点</el-button>
  109. <el-button :size="size" :type="type" @click="handleEditFormula(row)">公式配置</el-button>
  110. <el-button :size="size" :type="type" @click="editElement(row)">编辑元素</el-button>
  111. </template>
  112. </avue-crud>
  113. </div>
  114. </div>
  115. </div>
  116. </div>
  117. <!-- 编辑元素表单信息 -->
  118. <el-dialog
  119. title="编辑元素表单信息"
  120. :visible.sync="editElementFormTag"
  121. width="60%"
  122. :modal-append-to-body="false"
  123. >
  124. <div>
  125. <el-table
  126. :data="formDatass"
  127. border
  128. style="width: 100%"
  129. >
  130. <el-table-column
  131. prop="tableName"
  132. label="表名"
  133. >
  134. <template slot-scope="scope">
  135. <el-input
  136. v-model="scope.row.tableName"
  137. placeholder="请输入表名称"
  138. ></el-input>
  139. </template>
  140. </el-table-column>
  141. <el-table-column
  142. prop="tableType"
  143. label="表类型"
  144. >
  145. <template slot-scope="scope">
  146. <el-select
  147. v-model="scope.row.tableType"
  148. placeholder="请选择"
  149. >
  150. <el-option
  151. v-for="(item,key) in tableTypelist"
  152. :key="key"
  153. :label="item.dictValue"
  154. :value="item.dictKey"
  155. >
  156. </el-option>
  157. </el-select>
  158. </template>
  159. </el-table-column>
  160. <el-table-column
  161. prop="tableOwner"
  162. label="所属方"
  163. >
  164. <template slot-scope="scope">
  165. <el-select
  166. v-model="scope.row.tableOwner"
  167. placeholder="请选择"
  168. >
  169. <el-option
  170. v-for="(item,key) in ownerTypeList"
  171. :key="key"
  172. :label="item.dictValue"
  173. :value="item.dictKey"
  174. >
  175. </el-option>
  176. </el-select>
  177. </template>
  178. </el-table-column>
  179. <el-table-column
  180. prop="fillRate"
  181. label="填报率"
  182. >
  183. <template slot-scope="scope">
  184. <el-input
  185. v-model="scope.row.fillRate"
  186. placeholder="请输入填报率"
  187. ></el-input>
  188. </template>
  189. </el-table-column>
  190. </el-table>
  191. </div>
  192. <span
  193. slot="footer"
  194. class="dialog-footer"
  195. >
  196. <el-button @click="editElementFormTag = false">取 消</el-button>
  197. <el-button
  198. type="primary"
  199. @click="editeditElementFormMF()"
  200. >确 定</el-button>
  201. </span>
  202. </el-dialog>
  203. <!-- 公式配置 -->
  204. <el-dialog
  205. title="元素公式6"
  206. :visible.sync="editEleFormulaVisible"
  207. width="800px"
  208. append-to-body
  209. :close-on-click-modal="false"
  210. >
  211. <div class="flex mg-b-10">
  212. <el-input
  213. v-model="formulaInput"
  214. placeholder="请输入名称"
  215. size="samll" clearable @clear="searchFormulaName"
  216. ></el-input>
  217. <el-button type="info" class="mg-l-10" @click="searchFormulaName">搜索</el-button>
  218. </div>
  219. <el-table
  220. :data="editEleListFilter"
  221. border
  222. style="width: 100%"
  223. height="400px"
  224. >
  225. <el-table-column align="center" prop="eName" label="字段信息">
  226. </el-table-column>
  227. <el-table-column align="center" label="操作" width="200">
  228. <template slot-scope="scope">
  229. <el-link
  230. :type="scope.row.globalFormula == 1 ? 'warning' : 'primary'"
  231. @click="toFormulaEdit(scope.row,0)"
  232. >全局公式</el-link
  233. >
  234. <!-- <el-link
  235. class="mg-l-10"
  236. :type="scope.row.isSaveFormula == 1 ? 'warning' : 'primary'"
  237. @click="toFormulaEdit(scope.row,10)"
  238. >节点公式</el-link
  239. > -->
  240. <!-- <el-link
  241. class="mg-l-10"
  242. type="danger"
  243. @click="delEleRowHandle(scope.$index,editEleListFilter)"
  244. >删除</el-link> -->
  245. </template>
  246. </el-table-column>
  247. </el-table>
  248. </el-dialog>
  249. <!-- 公式 -->
  250. <el-dialog
  251. title="元素公式66"
  252. :visible.sync="formulaCompVisible"
  253. fullscreen
  254. append-to-body
  255. class="full-dialog"
  256. @close="closeformulaComp"
  257. >
  258. <FormulaEdit
  259. :fromcurNode="curEleTable"
  260. :wbsid="id"
  261. :nodeid="curTreeData.id"
  262. :eleid="formulaCurRow.id"
  263. :projectid="projectid"
  264. :elementType="formulaCurRow.elementType"
  265. :globaltype="formulaCurRow.globaltype"
  266. @hideDialog="formulaCompVisible = false"
  267. v-if="formulaCompVisible"
  268. ></FormulaEdit>
  269. </el-dialog>
  270. <!-- 关联公共WBS模板 -->
  271. <PublicWbs ref="PublicWbs" :from="from"/>
  272. <!-- 编辑元素 -->
  273. <el-dialog
  274. :title="(curEleTable.title?curEleTable.title:'')+' 元素编辑'"
  275. :visible.sync="editEleVisible"
  276. width="80%"
  277. append-to-body
  278. :close-on-click-modal="false"
  279. >
  280. <p class="font-c-warning">编辑元素信息(请谨慎操作)</p>
  281. <el-table
  282. :data="editEleList"
  283. border
  284. style="width: 100%"
  285. height="400px"
  286. v-loading="editEleloading"
  287. >
  288. <el-table-column
  289. align="center"
  290. type="index"
  291. width="50"
  292. ></el-table-column>
  293. <el-table-column
  294. align="center"
  295. prop="eName"
  296. label="元素名称"
  297. >
  298. <template slot="header">
  299. <i class="required"></i>
  300. <span>元素名称</span>
  301. </template>
  302. <template slot-scope="scope">
  303. <el-input
  304. v-model="scope.row.eName"
  305. size="small"
  306. placeholder="请输入内容"
  307. ></el-input>
  308. </template>
  309. </el-table-column>
  310. <el-table-column
  311. align="center"
  312. prop="eType"
  313. label="数据类型"
  314. width="120"
  315. >
  316. <template slot="header">
  317. <i class="required"></i>
  318. <span>数据类型</span>
  319. </template>
  320. <template slot-scope="scope">
  321. <el-select
  322. v-model="scope.row.eType"
  323. @change="setDefaultLength(scope.row)"
  324. size="small"
  325. placeholder="请选择"
  326. >
  327. <el-option
  328. v-for="item in dataTypeList"
  329. :key="item.id"
  330. :label="item.dictValue"
  331. :value="item.dictKey"
  332. ></el-option>
  333. </el-select>
  334. </template>
  335. </el-table-column>
  336. <el-table-column
  337. align="center"
  338. prop="eLength"
  339. label="长度"
  340. width="120"
  341. >
  342. <template slot="header">
  343. <i class="required"></i>
  344. <span>长度</span>
  345. </template>
  346. <template slot-scope="scope">
  347. <el-input
  348. v-model="scope.row.eLength"
  349. size="small"
  350. placeholder="请输入内容"
  351. ></el-input>
  352. </template>
  353. </el-table-column>
  354. <el-table-column
  355. align="center"
  356. prop="eAllowDeviation"
  357. label="允许偏差值"
  358. >
  359. <template slot-scope="scope">
  360. <div class="flex">
  361. <el-select
  362. v-model="scope.row.allow"
  363. size="small"
  364. placeholder="请选择"
  365. style="width:120px"
  366. >
  367. <el-option
  368. :key="1"
  369. label="-"
  370. value="-"
  371. ></el-option>
  372. <el-option
  373. :key="2"
  374. label=">"
  375. value=">"
  376. ></el-option>
  377. <el-option
  378. :key="3"
  379. label="<"
  380. value="<"
  381. ></el-option>
  382. <el-option
  383. :key="4"
  384. label="≥"
  385. value="≥"
  386. ></el-option>
  387. <el-option
  388. :key="5"
  389. label="≤"
  390. value="≤"
  391. ></el-option>
  392. <el-option
  393. :key="6"
  394. label="±"
  395. value="±"
  396. ></el-option>
  397. <el-option
  398. :key="7"
  399. label="【】"
  400. value="【】"
  401. ></el-option>
  402. </el-select>
  403. <el-input
  404. v-model="scope.row.deviation"
  405. size="small"
  406. placeholder="请输入内容"
  407. ></el-input>
  408. </div>
  409. </template>
  410. </el-table-column>
  411. <el-table-column
  412. align="center"
  413. prop="eInspectionMethod"
  414. label="检查方法和频率"
  415. >
  416. <template slot-scope="scope">
  417. <el-input
  418. v-model="scope.row.eInspectionMethod"
  419. size="small"
  420. placeholder="请输入内容"
  421. ></el-input>
  422. </template>
  423. </el-table-column>
  424. <el-table-column
  425. align="center"
  426. label="操作"
  427. width="120"
  428. >
  429. <template slot="header">
  430. <el-button
  431. @click="addEleRow(editEleList)"
  432. type="text"
  433. icon="el-icon-circle-plus-outline"
  434. class="text-icon"
  435. ></el-button>
  436. </template>
  437. <template slot-scope="scope">
  438. <el-button
  439. v-if="scope.row.id"
  440. icon="el-icon-remove-outline"
  441. type="text"
  442. @click="delEleRowHandle(scope.$index,editEleList)"
  443. class="text-icon text-icon-danger"
  444. ></el-button>
  445. <div
  446. class="flex"
  447. v-else
  448. >
  449. <el-button
  450. @click="saveNewEle(scope.row)"
  451. type="mini"
  452. >保存</el-button>
  453. <el-button
  454. icon="el-icon-remove-outline"
  455. type="text"
  456. @click="delEleRowHandle(scope.$index,editEleList)"
  457. class="text-icon text-icon-danger"
  458. ></el-button>
  459. </div>
  460. </template>
  461. </el-table-column>
  462. </el-table>
  463. <span
  464. slot="footer"
  465. class="dialog-footer"
  466. >
  467. <el-button @click="editEleVisible = false">取 消</el-button>
  468. <el-button
  469. type="primary"
  470. @click="saveEles"
  471. >确 定</el-button>
  472. </span>
  473. </el-dialog>
  474. <!-- 私有wbs树排序弹框 -->
  475. <el-dialog
  476. title="调整排序"
  477. :visible.sync="sortTag"
  478. width="50%"
  479. append-to-body
  480. >
  481. <ManualSorting v-if="sortTag2" @bianhua="bianhua()" :sort="sort" />
  482. <span slot="footer" class="dialog-footer">
  483. <el-button @click="(sortTag = false), (sortTag2 = false)"
  484. >取 消</el-button
  485. >
  486. <el-button type="primary" @click="editSort()">确 定</el-button>
  487. </span>
  488. </el-dialog>
  489. </div>
  490. </template>
  491. <script>
  492. import { excelType} from '@/api/exctab/excelmodel';
  493. import {
  494. updateBatchNodeTableInfoElement,
  495. selectByNodeTable,
  496. selectFormElements,
  497. selectPrivateFormElements
  498. } from "@/api/manager/wbstree";
  499. import {getTableElments} from "@/api/manager/wbstree";
  500. import {tabTypeLazyTreeAll,delTabInfoAll} from "@/api/manager/wbsprivate";
  501. import {saveElement, remove as removeElement, updateBatchElements, getTemplate,importWbsElement} from "@/api/manager/wbsformelement";
  502. import FormulaEdit from "@/views/formula/edit1.vue";
  503. import PublicWbs from './PublicWbs.vue'
  504. import { searchNodeTables, } from "@/api/exctab/excelmodel";
  505. import {wbsInfotabSort} from "@/api/manager/wbsinfo";
  506. import { getDictionary } from "@/api/system/dict";
  507. import ManualSorting from '@/components/WbsTree/ManualSorting'
  508. export default {
  509. components:{
  510. FormulaEdit,
  511. PublicWbs,
  512. ManualSorting
  513. },
  514. data () {
  515. return {
  516. input3:'',
  517. editElementFormTag:false,//编辑元素
  518. tabloading:false,
  519. formDatass: [],
  520. selectionList:[],
  521. tableTypelist:[],
  522. ownerTypeList:[],
  523. dataTypeList:[],
  524. //数据类型的默认长度
  525. dataTypeDefaultMap: {
  526. 1: 250,//字符串
  527. 2: 50,//整数
  528. 3: 50,//小数
  529. 4: 50,//日期
  530. 5: 50,//数值
  531. 6: 50,//签名
  532. 7: 100,//文件
  533. },
  534. page: {
  535. size: 10,
  536. current: 1,
  537. total: 2
  538. },
  539. loadOption: {
  540. height: 'auto',
  541. calcHeight: 30,
  542. tip: false,
  543. searchShow:false,
  544. searchMenuSpan: 6,
  545. border: true,
  546. index: true,
  547. viewBtn: false,
  548. selection: true,
  549. editBtn:false,
  550. delBtn:false,
  551. addBtn:false,
  552. menu:true,
  553. dialogClickModal: false,
  554. column: [
  555. {
  556. label: "元素表名称",
  557. prop: "title",
  558. editDisplay: false,
  559. addDisplay: false,
  560. },
  561. {
  562. label: "元素表类型",
  563. prop: "tabType",
  564. // search: true,
  565. rules: [
  566. {
  567. required: true,
  568. message: "请输入名称",
  569. trigger: "blur",
  570. },
  571. ],
  572. },
  573. {
  574. label: "元素总量",
  575. prop: "elementTotal",
  576. editDisplay: false,
  577. addDisplay: false,
  578. rules: [
  579. {
  580. message: "请输入表数量",
  581. trigger: "blur",
  582. },
  583. ],
  584. },
  585. {
  586. label: "所属方",
  587. prop: "tabOwner",
  588. editDisplay: false,
  589. addDisplay: false,
  590. rules: [
  591. {
  592. message: "请输入表数量",
  593. trigger: "blur",
  594. },
  595. ],
  596. },
  597. {
  598. label: "填报率",
  599. prop: "fillRate",
  600. editDisplay: false,
  601. addDisplay: false,
  602. rules: [
  603. {
  604. message: "请输入表数量",
  605. trigger: "blur",
  606. },
  607. ],
  608. },
  609. ],
  610. },
  611. formelemtfoelemtformrm: {},
  612. elementloading: false,
  613. elemtData:[
  614. {
  615. tableName:'张三',
  616. sex:'男',
  617. id:1
  618. }, {
  619. tableName:'李四',
  620. sex:'女',
  621. id:2
  622. }
  623. ],
  624. curEleTable:{},
  625. eleReg: /(-|>|<|≥|≤|±|【】)?([^≥≤±【】]*)/,
  626. editEleList:[],
  627. editEleListAll:[],
  628. editEleFormulaVisible:false,
  629. editEleListFilter:[],
  630. excelId:'',
  631. treeNode: {},
  632. //#region 鼠标
  633. leftTRee: '',//左侧树ID
  634. threessW: 400,
  635. //#endregion
  636. heightss: '',//
  637. data: [],//清表模板
  638. filterText:"",//搜索关键字
  639. treeloading:false,
  640. defaultProps: {
  641. children: "children",
  642. isLeaf: function (data) {
  643. return !data.hasChildren || (data.isExistForm == 1);
  644. },
  645. },
  646. wbsdata: [],//wbs模板
  647. //#region 右侧数据
  648. from:{
  649. checkd:false
  650. },
  651. rules: {
  652. nodeName: [
  653. { required: true, message: '请输入清表名称', trigger: 'blur' },
  654. ],
  655. tabType: [
  656. { required: true, message: '请选择清表类型', trigger: 'blur' },
  657. ],
  658. },
  659. wbsform: {
  660. id: '',
  661. wbsType: '',
  662. wbsName: '',
  663. },//wbs树选中的值
  664. tableData: [],//右侧表数据
  665. wbsmiddle: false,//选择wbs模板那块是否有
  666. tableList: [],//进行处理的wbs关联表
  667. exceltypeData: [],//清表类型枚举
  668. wbsmodel: [],//wbs模板名称枚举
  669. //#endregion
  670. saveExcelLoad:false,
  671. filterText1: "",
  672. addTableData:[],
  673. //编辑元素
  674. editEleVisible:false,
  675. editEleloading:false,
  676. formulaInput:"",//公式配置
  677. formulaCompVisible: false, //公式弹框
  678. formulaCurRow: {}, //当前元素
  679. id:'',
  680. curTreeData:{},
  681. loadData:[],
  682. treeOption:{
  683. defaultExpandedKeys:[],
  684. currentNode:{},
  685. filter:false,
  686. addBtn:false,
  687. props:{
  688. labelText:'标题',
  689. label:'title',
  690. value:'id',
  691. children:'children'
  692. },
  693. lazy: true,
  694. treeLoad: function (node, resolve) {
  695. const parentId = (node.level === 0) ? 12345678910 : node.data.id;
  696. tabTypeLazyTreeAll({parentId,current:1,size:1000}).then(res => {
  697. resolve(res.data.data.records.map(item => {
  698. return {
  699. ...item,
  700. leaf: !item.hasChildren
  701. }
  702. }))
  703. });
  704. },
  705. },
  706. treeData:'',
  707. projectid:"",
  708. curNode:{},
  709. defaultExpandKey:[],//默认展开的节点
  710. sortTag: false,
  711. sortTag2: false,
  712. sort:[]
  713. }
  714. },
  715. computed:{
  716. ids () {
  717. let ids = [];
  718. this.selectionList.forEach(ele => {
  719. ids.push(ele.id);
  720. });
  721. return ids.join(",");
  722. }
  723. },
  724. watch: {
  725. 'input3'(){
  726. this.page.currentPage=1;
  727. this.page.current=1
  728. }
  729. },
  730. methods: {
  731. //关闭公式弹窗
  732. closeformulaComp(){
  733. console.log('关闭');
  734. getTableElments(this.curEleTable.initTableId).then((res) => {
  735. this.editEleListFilter = res.data.data;
  736. this.editEleListAll = [].concat(this.editEleListFilter);
  737. })
  738. },
  739. //#region 树形控件外层左侧事件
  740. mouseLeave (data) {
  741. if (data.moreShow) {
  742. this.$set(data, 'moreShow', false)
  743. }
  744. },
  745. mouseOver (data) {
  746. if (!data.moreShow) {
  747. this.$set(data, 'moreShow', true)
  748. }
  749. },
  750. async sortpai(data,node) {
  751. console.log(data,node);
  752. this.curNode=node;
  753. this.curTreeData=data;
  754. await this.findWbsTreePrivateSameLevel(node,data)
  755. this.sortTag = true;
  756. this.sortTag2 = true;
  757. },
  758. editSort() {
  759. this.wbsInfotabSort();
  760. },
  761. bianhua() {
  762. this.sortTag2 = false;
  763. this.$nextTick(() => {
  764. this.sortTag2 = true;
  765. });
  766. },
  767. async wbsInfotabSort() {
  768. //元素库、独立库节点排序
  769. var newArr=this.sort.map((v)=>{return v.id})
  770. newArr=newArr.join(',')
  771. const { data: res } = await wbsInfotabSort(newArr);
  772. console.log(res);
  773. if (res.code == 200) {
  774. this.sortTag = false;
  775. this.sortTag2 = false;
  776. this.refreshTreeData();
  777. }
  778. },
  779. async findWbsTreePrivateSameLevel(node,data) {
  780. const { data: res } =await tabTypeLazyTreeAll({parentId:node.data.parentId,current:1,size:1000});
  781. if (res.code == 200) {
  782. console.log(res.data,'res1111111');
  783. let tabArr=res.data.records
  784. tabArr.forEach((item)=>{
  785. item.tableName=item.title
  786. })
  787. console.log(tabArr,'tabArr');
  788. this.sort =tabArr
  789. }
  790. },
  791. addEleRow (list) {
  792. list.push({});
  793. },
  794. //修改数据类型,给个默认值
  795. setDefaultLength (row) {
  796. this.$set(row, 'eLength', this.dataTypeDefaultMap[row.eType]);
  797. },
  798. delEleRow (index, list) {
  799. list.splice(index, 1);
  800. },
  801. delEleRowHandle (index, list) {
  802. let row = list[index];
  803. if (row.id) {
  804. //有id需要请求删除
  805. this.$confirm('是否确认删除?', '删除元素', {
  806. distinguishCancelAndClose: true,
  807. confirmButtonText: '删除',
  808. cancelButtonText: '取消'
  809. }).then(() => {
  810. removeElement(row.id, this.curEleTable.initTableName, row.ekey).then(() => {
  811. list.splice(index, 1);
  812. })
  813. this.curEleTable.elementTotal --;
  814. })
  815. } else {
  816. list.splice(index, 1);
  817. }
  818. },
  819. formatTableType(cellValue) {
  820. for (let i = 0; i < this.tableTypelist.length; i++) {
  821. if (this.tableTypelist[i].dictValue == cellValue) {
  822. return this.tableTypelist[i].dictKey;
  823. }
  824. }
  825. return cellValue;
  826. //console.log(cellValue)
  827. },
  828. formatOwner( cellValue) {
  829. for (let i = 0; i < this.ownerTypeList.length; i++) {
  830. if (this.ownerTypeList[i].dictValue == cellValue) {
  831. return this.ownerTypeList[i].dictKey;
  832. }
  833. }
  834. return cellValue;
  835. //console.log(cellValue)
  836. },
  837. currentChange (currentPage) {
  838. this.page.current = currentPage;
  839. this.page.currentPage = currentPage;
  840. this.searchChange();
  841. },
  842. sizeChange (pageSize) {
  843. this.page.size = pageSize;
  844. // this.searchChange();
  845. },
  846. selectionChange (list) {
  847. this.selectionList = list;
  848. },
  849. selectionClear () {
  850. this.selectionList = [];
  851. this.$refs.crud.toggleSelection();
  852. },
  853. async tabTypeLazyTreeAll ( parentId,current,size,titleName) {//清表树
  854. console.log(parentId);
  855. const { data: res } = await tabTypeLazyTreeAll({parentId,current,size,titleName} )
  856. if (res.code === 200) {
  857. return res.data
  858. }
  859. },
  860. nodeClick(data,node){
  861. console.log(data,node,'treedata');
  862. this.curNode=node
  863. this.curTreeData=data
  864. this.treeId=data.id
  865. this.page.current=1;
  866. this.page.currentPage=1
  867. if(data.hasChildren){
  868. this.onLoad(this.page)
  869. }
  870. if(data.hasChildren===false&&node.level==2){
  871. this.tabloading=true;
  872. let arr=[]
  873. arr.push(data)
  874. this.loadData=arr
  875. this.page.total=1
  876. setTimeout(() => {
  877. this.tabloading=false
  878. }, 1000);
  879. }else{
  880. this.loadData=[]
  881. this.page.total=0
  882. }
  883. },
  884. refreshChange () {
  885. this.searchChange();
  886. },
  887. onLoad(page, params = {}){
  888. if(this.treeId){
  889. this.tabloading=true;
  890. this.tabTypeLazyTreeAll(this.treeId, page.currentPage,page.pageSize,this.input3).then((res)=>{
  891. this.loadData=res.records
  892. this.page.total=res.total
  893. this.tabloading=false
  894. })
  895. }
  896. },
  897. //编辑后刷新
  898. onLoad1(){
  899. if(this.curNode.level===1&&this.curNode.data.hasChildren){
  900. this.tabloading=true;
  901. this.tabTypeLazyTreeAll(this.treeId, this.page.current,this.page.size,this.input3).then((res)=>{
  902. this.loadData=res.records
  903. this.page.total=res.total
  904. this.tabloading=false
  905. })
  906. }else{
  907. this.tabTypeLazyTreeAll(this.curNode.data.parentId,this.page.current,1000,this.input3).then((res)=>{
  908. let faArr=res.records;
  909. this.loadData=faArr.filter((item)=>{
  910. if(item.id===this.treeId){
  911. return item
  912. }
  913. })
  914. })
  915. }
  916. },
  917. //搜索
  918. searchChange(){
  919. if(this.treeId){
  920. if(this.curTreeData.hasChildren){
  921. this.tabloading=true;
  922. this.tabTypeLazyTreeAll(this.curTreeData.id, this.page.current,this.page.size,this.input3).then((res)=>{
  923. this.loadData=res.records
  924. this.page.total=res.total
  925. this.tabloading=false;
  926. })
  927. }
  928. if(this.curTreeData.hasChildren===false&&this.curNode.level==2){
  929. this.tabloading=true;
  930. let arr=[]
  931. arr.push(this.curTreeData)
  932. this.loadData=arr
  933. this.page.total=1;
  934. setTimeout(() => {
  935. this.tabloading=false
  936. }, 1000);
  937. }else{
  938. this.tabloading=true;
  939. this.loadData=[]
  940. this.page.total=0
  941. setTimeout(() => {
  942. this.tabloading=false
  943. }, 1000);
  944. }
  945. }else{
  946. // this.$message.warning("请选选择左侧节点");
  947. if(this.input3){
  948. this.tabloading=true;
  949. this.tabTypeLazyTreeAll(this.curTreeData.id, this.page.current,this.page.size,this.input3).then((res)=>{
  950. this.loadData=res.records
  951. this.page.total=res.total
  952. this.tabloading=false;
  953. })
  954. }else{
  955. this.$message.warning("请输入你想搜索的表单名称");
  956. }
  957. }
  958. },
  959. clearinput(){
  960. this.searchChange()
  961. },
  962. resetChange(item){
  963. console.log(item);
  964. this.tabTypeLazyTreeAll(this.treeId, this.page.current,this.page.size).then((res)=>{
  965. this.loadData=res.records
  966. this.page.total=res.total
  967. })
  968. },
  969. handleDelete () {
  970. if (this.selectionList.length === 0) {
  971. this.$message.warning("请选择至少一条数据");
  972. return;
  973. }
  974. this.$confirm("确定将选择数据删除?", {
  975. confirmButtonText: "确定",
  976. cancelButtonText: "取消",
  977. type: "warning"
  978. })
  979. .then(() => {
  980. return delTabInfoAll(this.ids);
  981. })
  982. .then(() => {
  983. this.onLoad(this.page);//刷新表格数据
  984. //刷新左边树形数据
  985. this.refreshTreeData()
  986. this.$message({
  987. type: "success",
  988. message: "操作成功!"
  989. });
  990. this.$refs.crud.toggleSelection();
  991. });
  992. },
  993. // //刷新左边树形数据
  994. // refreshTreeData(){
  995. // const parentId =12345678910
  996. // tabTypeLazyTreeAll({parentId,current:1,siez:1000}).then(res => {
  997. // this.treeData=res.data.data.records;
  998. // this.$nextTick(()=>{
  999. // //树默认展开
  1000. // if(this.curNode.level===1){
  1001. // this.treeOption.defaultExpandedKeys.push(this.curNode.data.id);
  1002. // this.$refs.avueTree.setCurrentKey(this.curNode.data.id)
  1003. // }else{
  1004. // this.treeOption.defaultExpandedKeys.push(this.curNode.data.parentId);
  1005. // // 设置选中的节点
  1006. // this.treeOption.currentNode =this.curNode.data.id
  1007. // this.$refs.avueTree.setCurrentKey(this.curNode.data.id)
  1008. // }
  1009. // })
  1010. // });
  1011. // },
  1012. //刷新左边树形数据
  1013. refreshTreeData(){
  1014. if(this.curNode.level===1){
  1015. const parentId =12345678910
  1016. tabTypeLazyTreeAll({parentId,current:1,size:1000}).then(res => {
  1017. this.data=res.data.data.records;
  1018. this.$nextTick(()=>{
  1019. this.defaultExpandKey.push(this.curNode.data.id);
  1020. this.$refs.avueTree.setCurrentKey(this.curNode.data.id);
  1021. })
  1022. });
  1023. }else{
  1024. this.updateTreeNewNode()
  1025. }
  1026. },
  1027. //编辑元素表单信息
  1028. updateTreeNewNode() {
  1029. tabTypeLazyTreeAll(
  1030. {parentId:this.curTreeData.parentId,current:1,size:1000}
  1031. ).then((res) => {
  1032. var resarr= res.data.data.records.map(item=>{
  1033. return{
  1034. ...item,
  1035. leaf: !item.hasChildren
  1036. }
  1037. })
  1038. this.$refs.avueTree.updateKeyChildren(
  1039. this.curTreeData.parentId,
  1040. // res.data.data.records
  1041. resarr
  1042. );
  1043. this.$refs.avueTree.setCurrentKey(this.curNode.data.id);
  1044. });
  1045. },
  1046. editElement (row) {
  1047. console.log(row,'row');
  1048. this.curEleTable = row;
  1049. this.editEleloading=true
  1050. selectPrivateFormElements(this.curEleTable.id).then((res) => {
  1051. this.editEleloading=false
  1052. res.data.data.forEach((element) => {
  1053. this.eleReg.exec(element.eAllowDeviation);
  1054. //console.log(RegExp.$1)
  1055. //console.log(RegExp.$2)
  1056. element.allow = RegExp.$1 ? RegExp.$1 : '';
  1057. element.deviation = RegExp.$2 ? RegExp.$2 : '';
  1058. })
  1059. this.editEleList = res.data.data;
  1060. })
  1061. this.editEleVisible = true;
  1062. },
  1063. //修改数据类型,给个默认值
  1064. setDefatableTypeultLength (row) {
  1065. this.$set(row, 'eLength', this.dataTypeDefaultMap[row.eType]);
  1066. },
  1067. //分配节点
  1068. distribution(row){
  1069. console.log(row);
  1070. this.from.id=row.id;
  1071. this.from.title=row.title;
  1072. this.from.tableType=row.tabType
  1073. this.from.tableType=this.formatTableType(this.from.tableType);
  1074. this.from.tableOwner=row.tabOwner
  1075. this.from.tableOwner=this.formatOwner(this.from.tableOwner);
  1076. this.$refs.PublicWbs.show();
  1077. },
  1078. saveNewEle (row) {
  1079. if (!row.eName) {
  1080. this.$message({
  1081. type: "warning",
  1082. message: "请填写元素名称"
  1083. });
  1084. return;
  1085. }
  1086. if (!row.eType) {
  1087. this.$message({
  1088. type: "warning",
  1089. message: "请选择数据类型"
  1090. });
  1091. return;
  1092. }
  1093. row.eAllowDeviation = (row.allow ? row.allow : '') + (row.deviation ? row.deviation : '');
  1094. row.fId = this.curEleTable.id;
  1095. row.initTableName = this.curEleTable.initTableName;
  1096. if (!row.eLength) {
  1097. this.$message({
  1098. type: "warning",
  1099. message: "请填写长度"
  1100. });
  1101. return;
  1102. }
  1103. saveElement(row).then((res) => {
  1104. if (res.data.data) {
  1105. this.$set(row, 'id', res.data.data.id);
  1106. this.$set(row, 'ekey', res.data.data.ekey);
  1107. this.$message({
  1108. type: "success",
  1109. message: "保存成功!"
  1110. });
  1111. }
  1112. })
  1113. },
  1114. saveEles () {
  1115. for (let i = 0; i < this.editEleList.length; i++) {
  1116. if (!this.editEleList[i].id) {
  1117. this.$message({
  1118. type: "warning",
  1119. message: "请先将新增的元素点击保存"
  1120. });
  1121. return;
  1122. }
  1123. if (!this.editEleList[i].eName) {
  1124. this.$message({
  1125. type: "warning",
  1126. message: "请填写第" + (i + 1) + "条元素名称"
  1127. });
  1128. return;
  1129. }
  1130. if (!this.editEleList[i].eType) {
  1131. this.$message({
  1132. type: "warning",
  1133. message: "请选择第" + (i + 1) + "条数据类型"
  1134. });
  1135. return;
  1136. }
  1137. if ( !this.editEleList[i].eLength) {
  1138. this.$message({
  1139. type: "warning",
  1140. message: "请填写第" + (i + 1) + "条长度"
  1141. });
  1142. return;
  1143. }
  1144. }
  1145. if (this.editEleList.length > 0) {
  1146. this.editEleList.forEach((element) => {
  1147. element.eAllowDeviation = (element.allow ? element.allow : '') + (element.deviation ? element.deviation : '');
  1148. // if (element.eType == 4) {
  1149. // this.$set(element, 'eLength', 0);
  1150. // //element.eLength = 0;
  1151. // }
  1152. })
  1153. console.log(this.editEleList,'this.editEleList');
  1154. updateBatchElements(this.editEleList, this.curEleTable.initTableName).then(() => {
  1155. this.editEleVisible = false;
  1156. this.onLoad1(this.page);
  1157. this.$message({
  1158. type: "success",
  1159. message: "保存成功!"
  1160. });
  1161. })
  1162. } else {
  1163. this.editEleVisible = false;
  1164. this.onLoad1(this.page);
  1165. this.$message({
  1166. type: "success",
  1167. message: "保存成功!"
  1168. });
  1169. }
  1170. },
  1171. handleEditFormula ( row) {
  1172. console.log(row,'row');
  1173. this.curEleTable = row;
  1174. getTableElments(this.curEleTable.initTableId).then((res) => {
  1175. this.editEleListFilter = res.data.data;
  1176. this.editEleListAll = [].concat(this.editEleListFilter);
  1177. })
  1178. this.editEleFormulaVisible = true;
  1179. },
  1180. //搜索 筛选
  1181. searchFormulaName(){
  1182. this.editEleListFilter = this.editEleListAll.filter((ele)=>{
  1183. return ele.eName.indexOf(this.formulaInput) > -1;
  1184. })
  1185. },
  1186. //跳转到公式配置页面
  1187. toFormulaEdit(row,type) {
  1188. this.formulaCurRow = row;
  1189. this.formulaCurRow.globaltype = type;
  1190. this.formulaCurRow.elementType = false;
  1191. this.formulaCompVisible = true;
  1192. },
  1193. editele(){
  1194. console.log('编辑元素表单信息');
  1195. if (this.selectionList.length === 0) {
  1196. this.$message.warning("请选择至少一条数据");
  1197. return;
  1198. }
  1199. if (this.elemtData.length) {
  1200. let da = []
  1201. this.formDatass = [...this.selectionList];
  1202. console.log(this.formDatass,'his.formDatass111');
  1203. this.formDatass.forEach(val => {
  1204. da.push({
  1205. tableType: val.tabType,
  1206. tableOwner: val.tabOwner,
  1207. id: val.id,
  1208. tableName: val.title,
  1209. fillRate: val.fillRate,
  1210. })
  1211. })
  1212. this.formDatass = da
  1213. console.log(this.formDatass,'this.formDatass');
  1214. let fa=[]
  1215. this.formDatass.forEach(val=>{
  1216. let newarr= this.tableTypelist.filter(e => e.dictValue===val.tableType);
  1217. let newarr1= this.ownerTypeList.filter(e => e.dictValue===val.tableOwner);
  1218. fa.push({
  1219. tableType: newarr[0].dictKey,
  1220. tableOwner: newarr1[0].dictKey,
  1221. id: val.id,
  1222. tableName: val.tableName,
  1223. fillRate: val.fillRate,
  1224. })
  1225. })
  1226. this.formDatass=fa
  1227. this.editElementFormTag = true;
  1228. }
  1229. },
  1230. getOwnerTypelist() {
  1231. if (this.ownerTypeList.length > 1) {
  1232. return;
  1233. }
  1234. getDictionary({
  1235. code: "owner_type",
  1236. }).then((res) => {
  1237. res.data.data.forEach((element) => {
  1238. element.dictKey = Number(element.dictKey);
  1239. });
  1240. this.ownerTypeList = res.data.data;
  1241. });
  1242. },
  1243. getDataTypelist() {
  1244. if (this.dataTypeList.length > 1) {
  1245. return;
  1246. }
  1247. getDictionary({
  1248. code: "data_type",
  1249. }).then((res) => {
  1250. res.data.data.forEach((element) => {
  1251. element.dictKey = Number(element.dictKey);
  1252. });
  1253. this.dataTypeList = res.data.data;
  1254. });
  1255. },
  1256. getTableTypelist() {
  1257. if (this.tableTypelist.length > 1) {
  1258. return;
  1259. }
  1260. getDictionary({
  1261. code: "table_type",
  1262. }).then((res) => {
  1263. res.data.data.forEach((element) => {
  1264. element.dictKey = Number(element.dictKey);
  1265. });
  1266. this.tableTypelist = res.data.data;
  1267. });
  1268. },
  1269. editeditElementFormMF () {//保存按钮
  1270. let da = []
  1271. let tag = true
  1272. console.log(this.tableTypelist,'tableTypelist');
  1273. this.formDatass.forEach(val => {
  1274. if (!val.tableName || !val.tableType || !val.tableOwner) {
  1275. tag = false
  1276. return
  1277. } else {
  1278. da.push({
  1279. id: val.id,
  1280. nodeName: val.tableName,
  1281. tableType: val.tableType,
  1282. tableOwner:val.tableOwner,
  1283. fillRate: val.fillRate,
  1284. Type:10
  1285. })
  1286. }
  1287. })
  1288. if (tag) {
  1289. this.updateBatchNodeTableInfoElement(da)
  1290. } else {
  1291. this.$message({
  1292. type: 'success',
  1293. message: '请填写完整元素表单的所有信息!',
  1294. })
  1295. }
  1296. },
  1297. async updateBatchNodeTableInfoElement (da) {//共有编辑元素
  1298. console.log(da,'编辑表单');
  1299. const { data: res } = await updateBatchNodeTableInfoElement(da)
  1300. if (res.code == 200) {
  1301. this.$message.success('操作成功');
  1302. this.editElementFormTag = false
  1303. this.onLoad1(this.page);
  1304. }
  1305. },
  1306. async excelType () {//清表类型
  1307. const { data: res } = await excelType({ code: 'sys_excltab_type' })
  1308. console.log(res);
  1309. if (res.code === 200) {
  1310. res.data.forEach(element => {
  1311. element.dictKey = Number(element.dictKey)
  1312. });
  1313. this.exceltypeData = res.data
  1314. }
  1315. },
  1316. //查看节点下已关联的元素表信息
  1317. searchNodeTables(id) {
  1318. searchNodeTables(id, this.from.id).then((res) => {
  1319. if (res.data.data.length > 0) {
  1320. res.data.data.forEach((val) => {
  1321. if (val.isLinkTable == 2) {
  1322. val.checknd = true;
  1323. } else {
  1324. val.checknd = false;
  1325. }
  1326. val.loading = false;
  1327. });
  1328. this.addTableData = res.data.data;
  1329. } else {
  1330. this.addTableData = [];
  1331. }
  1332. });
  1333. },
  1334. },
  1335. created () {
  1336. this.getTableTypelist();
  1337. this.getOwnerTypelist();
  1338. this.getDataTypelist();
  1339. },
  1340. mounted () {
  1341. // this.heightss = this.$refs.rulesss.clientHeight
  1342. }
  1343. }
  1344. </script>
  1345. <style scoped lang="scss">
  1346. .marleft10 {
  1347. margin-left: 10px;
  1348. }
  1349. /deep/.el-tree-node__expand-icon {
  1350. font-size: 16px;
  1351. }
  1352. .colorblue {
  1353. color: rgb(0, 82, 217);
  1354. }
  1355. .treecontent /deep/.el-scrollbar {
  1356. height: 100%;
  1357. }
  1358. .el-scrollbar {
  1359. height: 100%;
  1360. }
  1361. .rightHeader {
  1362. display: flex;
  1363. justify-content: flex-start;
  1364. align-items: top;
  1365. font-size: 14px;
  1366. background-color: #fff;
  1367. .excelname {
  1368. box-sizing: border-box;
  1369. min-width: 200px;
  1370. height: 28px;
  1371. border: 1px solid rgb(220, 220, 220);
  1372. padding: 0 10px;
  1373. border-radius: 3px;
  1374. display: flex;
  1375. justify-content: space-between;
  1376. align-items: center;
  1377. }
  1378. }
  1379. .dialogModel {
  1380. .dialogBox {
  1381. .middle {
  1382. display: flex;
  1383. .left {
  1384. border: 1px solid rgb(220, 220, 220);
  1385. border-radius: 3px;
  1386. height: 500px;
  1387. width: 49%;
  1388. .select {
  1389. box-sizing: border-box;
  1390. display: flex;
  1391. justify-content: center;
  1392. padding: 5px 0;
  1393. border-bottom: 1px solid #e0e0e0;
  1394. }
  1395. .leftscroll {
  1396. height: 450px;
  1397. overflow-y: scroll;
  1398. }
  1399. }
  1400. .right {
  1401. height: auto;
  1402. height: 60px;
  1403. max-height: 500px;
  1404. margin-left: 2%;
  1405. // height: 500px;
  1406. border-radius: 3px;
  1407. td {
  1408. box-sizing: border-box;
  1409. padding: 5px 10px;
  1410. height: 30px;
  1411. line-height: 30px;
  1412. }
  1413. }
  1414. }
  1415. }
  1416. .btbox {
  1417. margin-top: 20px;
  1418. display: flex;
  1419. justify-content: center;
  1420. }
  1421. }
  1422. .rightBox {
  1423. flex: 1;
  1424. }
  1425. .boxswai{
  1426. height: 100%;
  1427. box-sizing: border-box;
  1428. padding-bottom: 10px;
  1429. }
  1430. /deep/.avue-crud__left{
  1431. width: 65% !important;
  1432. }
  1433. /deep/.el-input-group__append{
  1434. background-color: #ecf5ff;
  1435. color: #409EFF;
  1436. }
  1437. /deep/.el-input-group__append:hover{
  1438. background-color: #409EFF;
  1439. color: white;
  1440. }
  1441. /deep/.el-input-group__prepend:hover{
  1442. background-color: #409EFF;
  1443. color: white;
  1444. }
  1445. /deep/.el-input-group__append:active{
  1446. background-color: #9dc5ee;
  1447. color: white;
  1448. }
  1449. /deep/.el-input-group__prepend:active{
  1450. background-color: #9dc5ee;
  1451. color: white;
  1452. }
  1453. </style>