editElement.vue 30 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089
  1. <template>
  2. <div style="height:100%;" ref="heights">
  3. <basic-container class="editElement">
  4. <div class="flex" style="position:fixed;left:30px;top:0;">
  5. <h2 class="mg-r-10">编辑元素</h2>
  6. </div>
  7. <div class="header" style="padding-bottom:20px;">
  8. 提示:鼠标右键功能:更换匹配元素字段、新增元素字段、删除匹配元素字段、公式配置&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 红色:代表匹配不成功、蓝色代表推荐匹配元素字段、绿色代表匹配成功
  9. </div>
  10. <el-row :gutter="20" :style="{ height: heights - 150 + 'px', }">
  11. <el-col :span="16" style="height: 100%;">
  12. <div class='parent hc-excel-table-form' style="position: relative;height: 100%;width: 100%;overflow: auto;"
  13. id='parent' @click="parentClick($event)">
  14. </div>
  15. </el-col>
  16. <el-col :span="8">
  17. <div style="text-align: right;">
  18. <el-button @click="toBack">返回上一级</el-button>
  19. <el-button type="warning" @click="adjustExcel">进入表单调整</el-button>
  20. </div>
  21. <div>
  22. <div class="martop20" style="font-weight: bold;font-size: 18px;">
  23. <i class="el-icon-edit" style="color: #52B200;"></i>
  24. 替换操作栏
  25. </div>
  26. <div class="martop20">
  27. <div style="font-weight: bold;">选中的元素</div>
  28. <div class="check_box">
  29. <span v-for="(item,index) in checkList" :key="index" style="margin-right: 4px;">{{ item.name }}</span>
  30. </div>
  31. </div>
  32. <div class="tihuan" style="font-weight: bold;">替换为:
  33. <span style="color: orange;">选择下方“未进行匹配的元素字段”可快速选择元素</span>
  34. </div>
  35. <el-select style="width:100%;" v-model="value" filterable placeholder="输入元素名称搜索">
  36. <el-option v-for="item in options" :key="item.id" :label="item.eName" :value="item.id">
  37. </el-option>
  38. </el-select>
  39. <div class="martop20 save-btn">
  40. <el-button type="primary" :disabled="tag"
  41. @click="saveReplace()">保存</el-button>
  42. </div>
  43. <div class="martop20" style="font-weight: bold;font-size: 18px;">
  44. <i class="el-icon-s-order" style="color: #E3B8E1;"></i>
  45. 未匹配元素快速选择栏
  46. </div>
  47. <div class=" replace_box" v-if="true">
  48. <div style="width: 100%;height: 100%;overflow-y: auto;">
  49. <el-row class="mb-4 ">
  50. <div style="width: 100%;">
  51. <el-button type="warning" plain v-for="(item,index) in unMatchItems" @click="unMatchClick(item)" :key="index"
  52. style="margin-bottom: 10px ;" size="small">{{ item.eName }}</el-button>
  53. </div>
  54. </el-row>
  55. </div>
  56. </div>
  57. <div class="message-box ">
  58. <div>
  59. <i class="el-icon-warning"></i>操作提示
  60. <ul>
  61. <li style="margin-bottom: 8px;">选中表单上的元素,选择替换的元素后,点击【保存】即可完成元素替换。</li>
  62. <li style="margin-bottom: 8px;">点击“未匹配元素”可快速选择目标元素。</li>
  63. <li>元素、电签、默认值配置完成后,请保存表单配置方案用于快速替换。</li>
  64. </ul>
  65. </div>
  66. </div>
  67. </div>
  68. </el-col>
  69. </el-row>
  70. <el-dialog append-to-body :show-close="false" width="360px" :modal='false' class="cascader-dialog" top="0"
  71. :visible.sync="cascaderPanel" :style="{ position: 'absolute', top: top + 'px', left: left + 'px' }">
  72. <el-cascader-panel :props="{ expandTrigger: 'hover' }" :options="options2" @change="takuangchangge"
  73. ref="cascader"></el-cascader-panel>
  74. </el-dialog>
  75. <el-dialog title="添加新元素字段" :visible="AddNewElementField == '新增元素'" width="60%" :before-close="handleClose" :close-on-click-modal="false"
  76. :modal-append-to-body="false" style="z-index: 999999;">
  77. <div>
  78. <i @click="addyuansu" class="el-icon-circle-plus marbottom10"
  79. style="color:red; font-size:24px; float: right;cursor: pointer;"></i>
  80. <el-table :data="tableData" height="250" border style="width: 100%">
  81. <el-table-column prop="date" label="清表元素名称">
  82. <template slot-scope="scope">
  83. <el-input v-model="scope.row.eName" placeholder="请输入内容"></el-input>
  84. </template>
  85. </el-table-column>
  86. <el-table-column prop="date" label="元素数据类型">
  87. <template slot-scope="scope">
  88. <el-select style="width:100%;" v-model="scope.row.eType" placeholder="请选择">
  89. <el-option v-for="item in dataType" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey">
  90. </el-option>
  91. </el-select>
  92. </template>
  93. </el-table-column>
  94. <el-table-column prop="date" align="center" width="120" label="操作">
  95. <template slot-scope="scope">
  96. <el-button type="danger" size="mini" @click="deleteziduan(scope.$index)">删除</el-button>
  97. </template>
  98. </el-table-column>
  99. </el-table>
  100. </div>
  101. <span slot="footer" class="dialog-footer">
  102. <el-button @click="handleClose()">取 消</el-button>
  103. <el-button type="primary" v-throttle='2000' :disabled="tableData.length === 0"
  104. @click="pushNewElementField()">确
  105. 定</el-button>
  106. </span>
  107. </el-dialog>
  108. <!-- 公式 -->
  109. <el-dialog title="元素公式" :visible.sync="formulaCompVisible" fullscreen append-to-body class="full-dialog">
  110. <FormulaEdit :wbsid="wbsid" :nodeid="nodeid" :eleid="eleid" :projectid="pid"
  111. @hideDialog="formulaCompVisible = false" v-if="formulaCompVisible" :globaltype="globaltype"
  112. :fromcurNode="editElementQuery"></FormulaEdit>
  113. </el-dialog>
  114. <el-dialog title="" :visible.sync="formulaCompVisible1" fullscreen append-to-body class="full-dialog">
  115. <FormulaEditone :wbsid="wbsid" :nodeid="nodeid" :eleid="eleid" :elementType="elementType" :projectid="pid"
  116. :fromcurNode="curEleTable" :globaltype="globaltype" @hideDialog="formulaCompVisible1 = false"
  117. v-if="formulaCompVisible1">
  118. </FormulaEditone>
  119. </el-dialog>
  120. </basic-container>
  121. </div>
  122. </template>
  123. <script>
  124. import FormulaEdit from '@/views/formula/edit.vue'
  125. import FormulaEditone from '@/views/formula/edit1.vue'
  126. import { getExcelHtml } from '@/api/exctab/excelmodel'
  127. import { getElementInfoByTabId, submit, submit2, dictionarydataType, submitBatch, getUnMatchField } from '@/api/exctab/editelement'
  128. import Vue from 'vue'
  129. export default {
  130. components: {
  131. FormulaEdit,
  132. FormulaEditone
  133. },
  134. props: {
  135. pkeyId: {
  136. type: String,
  137. default: ''
  138. },
  139. excelId: {
  140. type: String,
  141. default: ''
  142. },
  143. id: {
  144. type: String,
  145. default: ''
  146. },
  147. initTableName: {
  148. type: String,
  149. default: ''
  150. },
  151. initTableId: {
  152. type: String,
  153. default: ''
  154. },
  155. pid: {
  156. type: String,
  157. default: ''
  158. },
  159. wbsid: {
  160. type: String,
  161. default: ''
  162. },
  163. nodeid: {
  164. type: String,
  165. default: ''
  166. },
  167. globaltype: {
  168. type: Number,
  169. default: 10
  170. },
  171. elementType: {
  172. type: Boolean,
  173. default: false
  174. },
  175. curEleTable: {
  176. type: Object,
  177. default: {}
  178. },
  179. editElementQuery: {
  180. type: Object,
  181. default: {}
  182. }
  183. },
  184. data() {
  185. return {
  186. heights: '',
  187. dataType: [],//数据类型
  188. tag: false,
  189. table: {
  190. },//table表鼠标右键事件
  191. AddNewElementField: '',
  192. setTimeout: '',
  193. top: 0,
  194. left: 0,
  195. cascaderPanel: false,
  196. options: [],
  197. value: '',
  198. names: '',//替换元素得值
  199. tableData: [],//table表
  200. options2: [{
  201. value: '编辑元素字段',
  202. label: '编辑元素字段',
  203. children: [{
  204. value: '替换元素',
  205. label: '替换元素'
  206. }, {
  207. value: '新增元素',
  208. label: '新增元素'
  209. }, {
  210. value: '删除文本信息',
  211. label: '删除文本信息'
  212. }]
  213. }, {
  214. value: '公式配置',
  215. label: '公式配置',
  216. }],
  217. ekeyReg: /(key_\d+)/,
  218. isMultiple: false,
  219. eleData: [],
  220. formulaCompVisible: false,//公式弹框节点公式
  221. formulaCompVisible1: false,//公式弹框全局公式
  222. eleid: '',//当前元素
  223. unMatchItems: [
  224. ],
  225. checkList: []//需要替换的数组
  226. }
  227. },
  228. mounted() {
  229. this.cop()
  230. this.heights = this.$refs.heights.clientHeight
  231. console.log(222);
  232. },
  233. created() {
  234. this.getElementInfoByTabId()
  235. this.getUnMatchFieldData()
  236. this.AddNewElementField = '替换元素'
  237. },
  238. methods: {
  239. //获取未匹配的元素字段
  240. getUnMatchFieldData() {
  241. getUnMatchField({
  242. pkeyId: this.pkeyId,
  243. tabId: this.initTableId
  244. }).then((res) => {
  245. console.log(res, 'res');
  246. this.unMatchItems = res.data.data
  247. })
  248. },
  249. //选择未匹配的字段
  250. unMatchClick(item) {
  251. console.log(item, 'item');
  252. this.value = item.id
  253. this.names = item.eName
  254. },
  255. takuangchangge(value) {//切换事件
  256. if (value[value.length - 1] == '替换元素') {
  257. this.AddNewElementField = '替换元素'
  258. this.cascaderPanel = false
  259. clearTimeout(this.setTimeout)
  260. } else if (value[value.length - 1] == '新增元素') {
  261. if (this.dataType.length == 0) {
  262. this.dictionarydataType()
  263. }
  264. this.tableData = []
  265. this.AddNewElementField = '新增元素'//打开新增元素弹框
  266. this.cascaderPanel = false
  267. clearTimeout(this.setTimeout)
  268. } else if (value[value.length - 1] == '删除文本信息') {
  269. this.AddNewElementField = '删除文本信息'//打开新增元素弹框
  270. this.deleteelement()
  271. this.cascaderPanel = false
  272. clearTimeout(this.setTimeout)
  273. } else if (value[value.length - 1] == '公式配置') {
  274. this.cascaderPanel = false
  275. clearTimeout(this.setTimeout)
  276. this.toFormulaEdit();
  277. }
  278. },
  279. mouseout22() {//鼠标移出事件
  280. clearTimeout(this.setTimeout)
  281. this.setTimeout = setTimeout(() => {
  282. this.cascaderPanel = false
  283. }, 500)
  284. },
  285. mousemove22() {//鼠标移入事件
  286. clearTimeout(this.setTimeout)
  287. this.setTimeout = setTimeout(() => {
  288. this.cascaderPanel = true
  289. }, 500)
  290. },
  291. RightClick2(tr, td, x1, x2, y1, y2) {
  292. //console.log(event.target.getAttribute("keyname"))
  293. let targetkeyname = event.target.getAttribute("keyname");
  294. //console.log(event.target)
  295. let ekey = null;
  296. if (this.ekeyReg.test(targetkeyname)) {
  297. ekey = targetkeyname.match(this.ekeyReg)[1]
  298. }
  299. this.table = {
  300. tr,
  301. td,
  302. ekey
  303. }
  304. this.left = window.event.clientX - 80
  305. let Y = window.event.clientY - 54
  306. if (window.outerHeight - Y > 200) {
  307. this.top = window.event.clientY - 80 + 65
  308. } else {
  309. this.top = window.event.clientY - 270 + 65
  310. }
  311. this.cascaderPanel = true
  312. clearTimeout(this.setTimeout)
  313. this.setTimeout = setTimeout(() => {
  314. this.cascaderPanel = false
  315. }, 3000)
  316. let curTdEle = this.getTd(event.target);
  317. console.log(curTdEle,'curTdEle');
  318. if (this.isMultiple) {
  319. //是否已经存在了
  320. for (let i = 0; i < this.eleData.length; i++) {
  321. if (this.eleData[i].tr == tr && this.eleData[i].td == td) {
  322. //存在就移除
  323. this.eleData[i].tdEle.classList.remove('select-td');
  324. this.eleData.splice(i, 1);
  325. return;
  326. }
  327. }
  328. //添加
  329. this.eleData.push({
  330. tr,
  331. td,
  332. tdEle: curTdEle,
  333. name: curTdEle.getAttribute("title")
  334. })
  335. } else {
  336. this.clearSelect();
  337. this.eleData = [{
  338. tr,
  339. td,
  340. tdEle: curTdEle,
  341. name: curTdEle.getAttribute("title")
  342. }]
  343. }
  344. curTdEle.classList.add('select-td')
  345. this.$nextTick(() => {
  346. //隐藏日期弹框
  347. let pickers = document.querySelectorAll('.el-date-picker__header')
  348. for (let i = 0; i < pickers.length; i++) {
  349. pickers[i].parentNode.parentNode.parentNode.style.display = 'none'
  350. }
  351. })
  352. },
  353. LeftClick(tr, td, x1, x2, y1, y2) {
  354. console.log('点击左');
  355. },
  356. getTd(ele) {
  357. while (ele.tagName.toLowerCase() != 'td' && ele.id != 'parent') {
  358. ele = ele.parentNode;
  359. //console.log(ele);
  360. }
  361. if (ele.id == 'parent') {
  362. return null;
  363. } else {
  364. return ele;
  365. }
  366. },
  367. deleteelement() {//删除元素提示
  368. let _that = this
  369. this.$confirm('确认删除该元素?', '提示', {
  370. confirmButtonText: '确定',
  371. cancelButtonText: '取消',
  372. type: 'warning'
  373. }).then(() => {
  374. _that.submit({
  375. colName: '/',
  376. tabId: this.pkeyId,
  377. tdIndex: this.table.td,
  378. trIndex: this.table.tr,
  379. })
  380. }).catch(() => {
  381. _that.$message({
  382. type: 'info',
  383. message: '已取消删除'
  384. });
  385. });
  386. _that.$refs.cascader.clearCheckedNodes()
  387. _that.AddNewElementField = ''
  388. },
  389. getInformation2(a, b, c) {
  390. if (this.AddNewElementField) {
  391. this.table = {
  392. tr: b,
  393. td: c
  394. }
  395. }
  396. },
  397. async cop() {
  398. let _that = this
  399. console.log("33")
  400. var MyComponent = await Vue.extend({
  401. template: localStorage.getItem('editElement'),
  402. data() {
  403. return {
  404. formData: {},
  405. getTokenHeader: {},
  406. dap_site_data: {}
  407. }
  408. },
  409. methods: {
  410. //3,1,2,5,4,4,$event
  411. contextmenuClick(tr, td, x1, x2, y1, y2, event) {
  412. _that.RightClick2(tr, td, x1, x2, y1, y2)
  413. },
  414. //鼠标右键事件
  415. RightClick(tr, td, x1, x2, y1, y2) {
  416. _that.RightClick2(tr, td, x1, x2, y1, y2)
  417. },
  418. getInformation(a, b, c) {
  419. _that.getInformation2(a, b, c)
  420. },
  421. getRegularExpression() { },
  422. dateKeydown() { },
  423. formUploadSuccess() { },
  424. formUploadExceed() { },
  425. formUploadLoading() { },
  426. delTableFormFile() { },
  427. formUploadError() { },
  428. uploadprogress() { },
  429. formRemoteMethod() { },
  430. formRemoteChange() { },
  431. checkboxGroupChange() { },
  432. keyupShiftUp() { },
  433. keyupShiftDown() { },
  434. keyupShiftLeft() {
  435. },
  436. keyupShiftRight() {
  437. },
  438. inputLeftClick() {
  439. },
  440. KeyDown(e) {
  441. if (e.ctrlKey || e.metaKey) {
  442. console.log("检测到按下了control键");
  443. }
  444. },
  445. },
  446. mounted() {
  447. window.addEventListener("keydown", this.KeyDown, true);
  448. },
  449. })
  450. var component = new MyComponent().$mount()
  451. document.getElementById('parent').appendChild(component.$el);
  452. this.testTips()
  453. },
  454. async copss() {
  455. let _that = this
  456. console.log("44")
  457. var MyComponent = await Vue.extend({
  458. template: localStorage.getItem('editElement'),
  459. data() {
  460. return {
  461. formData: {},
  462. getTokenHeader: {},
  463. dap_site_data: {}
  464. }
  465. },
  466. methods: {
  467. contextmenuClick(tr, td, x1, x2, y1, y2, event) {
  468. _that.RightClick2(tr, td, x1, x2, y1, y2)
  469. },
  470. //鼠标右键事件
  471. RightClick(tr, td, x1, x2, y1, y2) {
  472. _that.RightClick2(tr, td, x1, x2, y1, y2)
  473. },
  474. getInformation(a, b, c) {
  475. _that.getInformation2(a, b, c)
  476. },
  477. getRegularExpression() { },
  478. dateKeydown() { },
  479. formUploadSuccess() { },
  480. formUploadExceed() { },
  481. formUploadLoading() { },
  482. delTableFormFile() { },
  483. formUploadError() { },
  484. uploadprogress() { },
  485. formRemoteMethod() { },
  486. formRemoteChange() { },
  487. checkboxGroupChange() { },
  488. keyupShiftUp() { },
  489. keyupShiftDown() { },
  490. keyupShiftLeft() {
  491. },
  492. keyupShiftRight() { },
  493. inputLeftClick() {
  494. },
  495. },
  496. })
  497. var component = new MyComponent().$mount()
  498. let na = document.getElementById('parent')
  499. na.innerHTML = `<div
  500. class='parent'
  501. id='parent'
  502. ></div>`
  503. document.getElementById('parent').appendChild(component.$el);
  504. },
  505. async dictionarydataType() {
  506. const { data: res } = await dictionarydataType()
  507. console.log(res);
  508. if (res.code == 200) {
  509. this.dataType = res.data
  510. }
  511. },
  512. returns() {
  513. this.$router.push({
  514. path: '/project/tree',
  515. query: {
  516. pid: this.pid,
  517. wbsid: this.wbsid,
  518. }
  519. })
  520. },
  521. //#region 左侧替换元素
  522. cancelReplace() {//替换元素取消按钮
  523. this.AddNewElementField = ''
  524. this.$refs.cascader.clearCheckedNodes()//调用方法无效
  525. },
  526. saveReplace() {//保存按钮
  527. console.log(this.checkList, 'checkList');
  528. // if (this.value&& this.table) {
  529. // this.tag = true
  530. // this.submit({
  531. // tabId: this.pkeyId,
  532. // tdIndex: this.table.td,
  533. // trIndex: this.table.tr,
  534. // colName: "",
  535. // htmlType: this.value
  536. // })
  537. // }
  538. if (this.value && this.table && this.checkList.length === 0) {
  539. this.tag = true
  540. this.submit2([{
  541. tabId: this.pkeyId,
  542. tdIndex: this.table.td,
  543. trIndex: this.table.tr,
  544. colName: "",
  545. htmlType: this.value
  546. }])
  547. } else if (this.value && this.checkList.length > 0) {
  548. let arr = []
  549. this.checkList.forEach((ele) => {
  550. arr.push({
  551. tabId: this.pkeyId,
  552. tdIndex: ele.td,
  553. trIndex: ele.tr,
  554. colName: "",
  555. htmlType: this.value
  556. })
  557. })
  558. this.submit2(arr)
  559. }
  560. else {
  561. this.$message({
  562. type: "error",
  563. message: "请右键选择要替换的元素"
  564. })
  565. }
  566. },
  567. async getElementInfoByTabId() {//获取字段信息
  568. const { data: res } = await getElementInfoByTabId({ tabId: this.initTableId })
  569. console.log(res);
  570. if (res.code === 200) {
  571. this.options = res.data
  572. }
  573. },
  574. async submit(da) {//保存替换元素
  575. const { data: res } = await submit(da)
  576. console.log(res);
  577. if (res.code == 200) {
  578. const { data: res } = await getExcelHtml({ pkeyId: this.pkeyId })
  579. console.log(res);
  580. if (res.code === 200) {
  581. this.tag = false
  582. // this.value = ''
  583. this.options = []
  584. localStorage.setItem('editElement', res.data)
  585. this.getElementInfoByTabId()
  586. this.copss()
  587. this.getUnMatchFieldData()
  588. }
  589. }
  590. },
  591. async submit2(da) {//批量保存替换元素
  592. const { data: res } = await submit2(da)
  593. console.log(res);
  594. if (res.code == 200) {
  595. const { data: res } = await getExcelHtml({ pkeyId: this.pkeyId })
  596. console.log(res);
  597. this.tag = false
  598. if (res.code === 200) {
  599. // this.value = ''
  600. this.checkList = []
  601. this.options = []
  602. localStorage.setItem('editElement', res.data)
  603. this.getElementInfoByTabId()
  604. this.copss()
  605. this.getUnMatchFieldData()
  606. }
  607. }
  608. },
  609. //#endregion
  610. //#region 弹框事件
  611. handleClose() {
  612. console.log('取消');
  613. this.tableData = []
  614. this.$refs.cascader.clearCheckedNodes()
  615. this.AddNewElementField = ''
  616. },
  617. addyuansu() {//新增元素
  618. this.tableData.unshift({ eName: '', eType: '' })
  619. },
  620. deleteziduan(key) {//删除新增元素弹框字段
  621. this.tableData.splice(key, 1)
  622. },
  623. pushNewElementField() {//确定添加按钮
  624. if (this.tableData.length > 0) {
  625. let tag = true
  626. this.tableData.forEach(val => {
  627. if (!(val.eName && val.eType)) {
  628. tag = false
  629. }
  630. })
  631. if (tag) {
  632. this.submitBatch({
  633. projectId: this.pid,
  634. initTableName: this.initTableName,
  635. id: this.pkeyId,
  636. listData: this.tableData,
  637. })
  638. } else {
  639. this.$message({
  640. type: 'error',
  641. message: '请填写所有字段'
  642. });
  643. }
  644. }
  645. },
  646. async submitBatch(da) {
  647. const { data: res } = await submitBatch(da)
  648. console.log(res);
  649. if (res.code == 200) {
  650. this.$message({
  651. type: 'success',
  652. message: '添加成功'
  653. })
  654. this.AddNewElementField = ''
  655. //更新下拉列表s
  656. this.getElementInfoByTabId()
  657. this.getUnMatchFieldData()
  658. }
  659. },
  660. //#endregion
  661. //跳转到公式配置页面
  662. toFormulaEdit() {
  663. let eleid = null;
  664. if (this.table.ekey) {
  665. for (let i = 0; i < this.options.length; i++) {
  666. if (this.options[i].ekey == this.table.ekey) {
  667. eleid = this.options[i].id;
  668. break;
  669. }
  670. }
  671. }
  672. if (eleid == null) {
  673. this.$message({
  674. type: "warning",
  675. message: "找不到元素id"
  676. })
  677. this.$refs.cascader.clearCheckedNodes()//调用方法无效
  678. return;
  679. }
  680. // this.$router.push({
  681. // path: '/formula/edit',
  682. // query: {
  683. // wbsid: this.wbsid,
  684. // eleid: eleid,
  685. // nodeid:this.nodeid,
  686. // projectid:this.pid
  687. // }
  688. // });
  689. this.eleid = eleid;
  690. if (this.globaltype === 10) {
  691. this.formulaCompVisible = true;
  692. } else {
  693. this.formulaCompVisible1 = true;
  694. }
  695. this.$refs.cascader.clearCheckedNodes()
  696. },
  697. // 返回上一页
  698. toBack() {
  699. // this.$router.go(-1);
  700. this.$emit('hideDialog')
  701. },
  702. //调整表单
  703. adjustExcel() {
  704. this.$emit('hideDialog')
  705. this.$emit('adjustExcel', this.pkeyId)
  706. },
  707. eleDelete(index) {
  708. this.eleData[index].tdEle.classList.remove('select-td');
  709. this.eleData.splice(index, 1);
  710. },
  711. clearSelect() {
  712. this.eleData.forEach((data) => {
  713. data.tdEle.classList.remove('select-td');
  714. })
  715. },
  716. multipleChange(value) {
  717. if (!value && this.eleData.length > 1) {
  718. let last = this.eleData[this.eleData.length - 1];
  719. this.clearSelect();
  720. this.eleData = [last];
  721. this.eleData[0].tdEle.classList.add('select-td');
  722. }
  723. },
  724. noRepeat(tempArr) {
  725. for (let i = 0; i < tempArr.length; i++) {
  726. for (let j = i + 1; j < tempArr.length; j++) {
  727. if (tempArr[i].tr == tempArr[j].tr && tempArr[i].td == tempArr[j].td) {
  728. tempArr.splice(j, 1);
  729. j--;
  730. }
  731. }
  732. }
  733. return tempArr;
  734. },
  735. //excel父节点点击检测
  736. parentClick(e) {
  737. let isNameEmpty = false;
  738. const { metaKey, ctrlKey } = e
  739. let target = e.target;
  740. let bgs = document.querySelectorAll("#parent .oldlace-bg")
  741. for (let i = 0; i < bgs.length; i++) {
  742. bgs[i].classList.remove("oldlace-bg");
  743. }
  744. let tdEle = this.getParentTD(target);
  745. let target1
  746. if (tdEle) {
  747. let mydiv = tdEle.getElementsByTagName('div')
  748. target1 = mydiv[0]
  749. if(target1.classList.contains('warnstyle')){
  750. isNameEmpty = true
  751. }else{
  752. isNameEmpty = false
  753. }
  754. } else {
  755. tdEle = target
  756. let mydiv = tdEle.getElementsByTagName('div')
  757. target = mydiv[0]
  758. isNameEmpty = false
  759. }
  760. let curTdEle = this.getTd(target);
  761. if (target.getAttribute('trindex') !== null && target.getAttribute('tdindex') || target1.getAttribute('trindex') !== null && target1.getAttribute('tdindex')) {
  762. let tdEle = this.getParentTD(target);
  763. if (tdEle) {
  764. target.classList.add("oldlace-bg");
  765. // if (metaKey || ctrlKey) {
  766. if (!target.classList.contains('select-td')) {
  767. if(ctrlKey||metaKey){
  768. target.classList.add("select-td");
  769. this.checkList.push({
  770. tr: target.getAttribute('trindex') || target1.getAttribute('trindex'),
  771. td: target.getAttribute('tdindex') || target1.getAttribute('tdindex'),
  772. name: !isNameEmpty?curTdEle.getAttribute("title")||'暂未匹配元素':'暂未匹配元素'
  773. })
  774. }else{
  775. this.checkList=[{
  776. tr: target.getAttribute('trindex') || target1.getAttribute('trindex'),
  777. td: target.getAttribute('tdindex') || target1.getAttribute('tdindex'),
  778. name: !isNameEmpty?curTdEle.getAttribute("title")||'暂未匹配元素':'暂未匹配元素'
  779. }]
  780. }
  781. } else {
  782. target.classList.remove("select-td");
  783. this.checkList.forEach((ele, index) => {
  784. if (ele.tr === target.getAttribute('trindex') || ele.tr === target1.getAttribute('trindex')) {
  785. this.checkList.splice(index, 1)
  786. }
  787. })
  788. }
  789. }
  790. this.noRepeat(this.checkList)
  791. console.log(this.checkList,'this.checkList');
  792. }
  793. },
  794. getParentTD(ele) {
  795. let targetParent = ele.parentNode;
  796. while (targetParent.nodeName !== "TD") {
  797. if (targetParent.id == 'parent') {
  798. return null;
  799. }
  800. targetParent = targetParent.parentNode;
  801. }
  802. return targetParent;
  803. },
  804. testTips() {
  805. console.log("test tips start");
  806. document.querySelectorAll('td[title]').forEach(td => {
  807. // 鼠标进入时临时清空 title 并显示自定义提示
  808. td.addEventListener('mouseenter', function (e) {
  809. const inputElement = td.querySelector('[placeholder]'); // 在td元素中查找具有placeholder属性的子元素
  810. if (inputElement) {
  811. const placeholderValue = inputElement.getAttribute('placeholder');
  812. if (placeholderValue) {
  813. const title = this.getAttribute('title')
  814. this.setAttribute('title', placeholderValue);
  815. this.setAttribute('title_original', title)
  816. }
  817. }
  818. });
  819. // 鼠标离开时恢复 title 并移除自定义提示
  820. td.addEventListener('mouseleave', function () {
  821. const title = this.getAttribute('title_original')
  822. if (title) {
  823. // 恢复原始 title 属性
  824. this.setAttribute('title', title);
  825. this.removeAttribute('title_original');
  826. }
  827. });
  828. });
  829. }
  830. },
  831. watch: {
  832. 'options'() {
  833. if (this.options) {
  834. this.options2 = [{
  835. value: '编辑元素字段',
  836. label: '编辑元素字段',
  837. children: [{
  838. value: '替换元素',
  839. label: '替换元素'
  840. }, {
  841. value: '新增元素',
  842. label: '新增元素'
  843. }, {
  844. value: '删除文本信息',
  845. label: '删除文本信息'
  846. }]
  847. }, {
  848. value: '公式配置',
  849. label: '公式配置',
  850. }]
  851. } else {
  852. this.options2 = [{
  853. value: '编辑元素字段',
  854. label: '编辑元素字段',
  855. children: [{
  856. value: '新增元素',
  857. label: '新增元素'
  858. }, {
  859. value: '删除文本信息',
  860. label: '删除文本信息'
  861. }]
  862. }, {
  863. value: '公式配置',
  864. label: '公式配置',
  865. }]
  866. }
  867. },
  868. 'value'(values) {
  869. if (values) {
  870. this.options.forEach(val => {
  871. if (val.id == values) {
  872. this.names = val.eName
  873. }
  874. })
  875. }
  876. },
  877. initTableId(val) {
  878. this.initTableId = val
  879. this.getUnMatchFieldData()
  880. },
  881. // 'cascaderPanel'(val){
  882. // this.AddNewElementField = '替换元素'
  883. // }
  884. }
  885. }
  886. </script>
  887. <style lang="scss" scoped>
  888. .editElement {
  889. padding-bottom: 40px !important;
  890. .header {
  891. color: rgb(240, 114, 10);
  892. }
  893. .tihuan {
  894. margin-top: 15px;
  895. margin-bottom: 10px;
  896. font-family: SourceHanSansSC;
  897. font-weight: 400;
  898. font-size: 14px;
  899. color: rgb(16, 16, 16);
  900. font-style: normal;
  901. letter-spacing: 0px;
  902. line-height: 20px;
  903. text-decoration: none;
  904. }
  905. }
  906. .parent {
  907. ::v-deep .select-td {
  908. background-color: #DDEAFE;
  909. border-color: #2550A2 1px solid;
  910. }
  911. ::v-deep .oldlace-bg {
  912. border-width: 4px;
  913. border-color: #2550A2;
  914. border-style: solid;
  915. }
  916. }
  917. ::v-deep .warnstyle .el-input__inner {
  918. background-image: url('/img/login/warn.png') !important;
  919. background-repeat: no-repeat;
  920. background-size: cover;
  921. background-position: center
  922. }
  923. ::v-deep .warnstyle .el-textarea__inner {
  924. background-image: url('/img/login/warn.png') !important;
  925. background-repeat: no-repeat;
  926. // background-size:cover;
  927. background-position-x: 45%;
  928. background-position-y: 46%;
  929. }
  930. .full-dialog {
  931. ::v-deep .el-dialog__body {
  932. padding-bottom: 0;
  933. padding-top: 0;
  934. }
  935. ::v-deep .basic-container {
  936. height: calc(100vh - 60px);
  937. }
  938. }
  939. .replace_box {
  940. margin-top: 20px;
  941. border: 1px gray dashed;
  942. width:95%;
  943. height: calc(100vh - 780px);
  944. position: relative;
  945. padding-top: 20px;
  946. padding-left: 20px;
  947. }
  948. .check_box{
  949. margin-top: 10px;
  950. //line-height: 50px;
  951. height: 50px;
  952. padding: 10px;
  953. background-color: #E8E8E8;
  954. overflow-y: auto;
  955. }
  956. .save-btn{
  957. width: 100%;
  958. .el-button--primary{
  959. width: 100%;
  960. background: #2550A2;
  961. border-color: #2550A2;
  962. }
  963. }
  964. .message-box{
  965. margin-top: 20px;
  966. width: 95%;
  967. border: 1px rgb(254, 240, 13) solid;
  968. background: rgb(254, 252, 233);
  969. padding: 10px;
  970. }
  971. </style>