JEditableTable.vue 53 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669
  1. <!-- JEditableTable -->
  2. <!-- @version 1.4.1 -->
  3. <!-- @author sjlei -->
  4. <template>
  5. <a-spin :spinning="loading">
  6. <!-- 操作按钮 -->
  7. <div v-if="actionButton" class="action-button">
  8. <a-button type="primary" icon="plus" @click="handleClickAdd">新增</a-button>
  9. <span class="gap"/>
  10. <template v-if="selectedRowIds.length>0">
  11. <a-popconfirm
  12. :title="`确定要删除这 ${selectedRowIds.length} 项吗?`"
  13. @confirm="handleConfirmDelete">
  14. <a-button type="primary" icon="minus">删除</a-button>
  15. </a-popconfirm>
  16. <template v-if="showClearSelectButton">
  17. <span class="gap"/>
  18. <a-button icon="delete" @click="handleClickClearSelect">清空选择</a-button>
  19. </template>
  20. </template>
  21. </div>
  22. <div :id="`${caseId}inputTable`" class="input-table">
  23. <!-- 渲染表头 -->
  24. <div class="thead" ref="thead">
  25. <div class="tr" :style="{width: this.realTrWidth}">
  26. <!-- 左侧固定td -->
  27. <div v-if="rowSelection" class="td td-cb" :style="style.tdLeft">
  28. <!--:indeterminate="true"-->
  29. <a-checkbox
  30. :checked="getSelectAll"
  31. :indeterminate="getSelectIndeterminate"
  32. @change="handleChangeCheckedAll"
  33. />
  34. </div>
  35. <div v-if="rowNumber" class="td td-num" :style="style.tdLeft">
  36. <span>#</span>
  37. </div>
  38. <!-- 右侧动态生成td -->
  39. <template v-for="col in columns">
  40. <div
  41. v-show="col.type !== formTypes.hidden"
  42. class="td"
  43. :key="col.key"
  44. :style="buildTdStyle(col)">
  45. <span>{{ col.title }}</span>
  46. </div>
  47. </template>
  48. </div>
  49. </div>
  50. <div class="scroll-view" ref="scrollView" :style="{'max-height':maxHeight+'px'}">
  51. <!-- 渲染主体 body -->
  52. <div :id="`${caseId}tbody`" class="tbody" :style="tbodyStyle">
  53. <!-- 扩展高度 -->
  54. <div class="tr-expand" :style="`height:${getExpandHeight}px; z-index:${loading?'11':'9'};`"></div>
  55. <!-- 无数据时显示 -->
  56. <div v-if="rows.length===0" class="tr-nodata">
  57. <span>暂无数据</span>
  58. </div>
  59. <!-- 动态生成tr -->
  60. <template v-for="(row,rowIndex) in rows">
  61. <!-- tr 只加载可见的和预加载的总共十条数据 -->
  62. <div
  63. v-if="
  64. rowIndex >= parseInt(`${(scrollTop-rowHeight) / rowHeight}`) &&
  65. (parseInt(`${scrollTop / rowHeight}`) + 9) > rowIndex
  66. "
  67. :id="`${caseId}tbody-tr-${rowIndex}`"
  68. :data-idx="rowIndex"
  69. class="tr"
  70. :class="selectedRowIds.indexOf(row.id) !== -1 ? 'tr-checked' : ''"
  71. :style="buildTrStyle(rowIndex)"
  72. :key="row.id">
  73. <!-- 左侧固定td -->
  74. <div v-if="rowSelection" class="td td-cb" :style="style.tdLeft">
  75. <!-- 此 v-for 只是为了拼接 id 字符串 -->
  76. <template v-for="(id,i) in [`${row.id}`]">
  77. <a-checkbox
  78. :id="id"
  79. :key="i"
  80. :checked="selectedRowIds.indexOf(id) !== -1"
  81. @change="handleChangeLeftCheckbox"/>
  82. </template>
  83. </div>
  84. <div v-if="rowNumber" class="td td-num" :style="style.tdLeft">
  85. <span>{{ rowIndex+1 }}</span>
  86. </div>
  87. <!-- 右侧动态生成td -->
  88. <div
  89. class="td"
  90. v-for="col in columns"
  91. v-show="col.type !== formTypes.hidden"
  92. :key="col.key"
  93. :style="buildTdStyle(col)">
  94. <!-- 此 v-for 只是为了拼接 id 字符串 -->
  95. <template v-for="(id,i) in [`${col.key}${row.id}`]">
  96. <!-- native input -->
  97. <label :key="i" v-if="col.type === formTypes.input || col.type === formTypes.inputNumber">
  98. <a-tooltip
  99. :id="id"
  100. placement="top"
  101. :title="(tooltips[id] || {}).title"
  102. :visible="(tooltips[id] || {}).visible || false"
  103. :autoAdjustOverflow="true">
  104. <input
  105. :id="id"
  106. v-bind="buildProps(row,col)"
  107. :data-input-number="col.type === formTypes.inputNumber"
  108. :placeholder="replaceProps(col, col.placeholder)"
  109. @input="(e)=>{handleInputCommono(e.target,rowIndex,row,col)}"
  110. @mouseover="()=>{handleMouseoverCommono(row,col)}"
  111. @mouseout="()=>{handleMouseoutCommono(row,col)}"/>
  112. </a-tooltip>
  113. </label>
  114. <!-- checkbox -->
  115. <template v-else-if="col.type === formTypes.checkbox">
  116. <a-checkbox
  117. :key="i"
  118. :id="id"
  119. v-bind="buildProps(row,col)"
  120. :checked="checkboxValues[id]"
  121. @change="(e)=>handleChangeCheckboxCommon(e,row,col)"
  122. />
  123. </template>
  124. <!-- select -->
  125. <template v-else-if="col.type === formTypes.select">
  126. <a-tooltip
  127. :key="i"
  128. :id="id"
  129. placement="top"
  130. :title="(tooltips[id] || {}).title"
  131. :visible="(tooltips[id] || {}).visible || false"
  132. :autoAdjustOverflow="true">
  133. <span
  134. @mouseover="()=>{handleMouseoverCommono(row,col)}"
  135. @mouseout="()=>{handleMouseoutCommono(row,col)}">
  136. <a-select
  137. :id="id"
  138. :key="i"
  139. v-bind="buildProps(row,col)"
  140. style="width: 100%;"
  141. :value="selectValues[id]"
  142. :options="col.options"
  143. :getPopupContainer="getParentContainer"
  144. :placeholder="replaceProps(col, col.placeholder)"
  145. @change="(v)=>handleChangeSelectCommon(v,id,row,col)"
  146. @search="(v)=>handleSearchSelect(v,id,row,col)"
  147. @blur="(v)=>handleBlurSearch(v,id,row,col)"
  148. >
  149. <!--<template v-for="(opt,optKey) in col.options">-->
  150. <!--<a-select-option :value="opt.value" :key="optKey">{{ opt.title }}</a-select-option>-->
  151. <!--</template>-->
  152. </a-select>
  153. </span>
  154. </a-tooltip>
  155. </template>
  156. <!-- date -->
  157. <template v-else-if="col.type === formTypes.date || col.type === formTypes.datetime">
  158. <a-tooltip
  159. :key="i"
  160. :id="id"
  161. placement="top"
  162. :title="(tooltips[id] || {}).title"
  163. :visible="(tooltips[id] || {}).visible || false"
  164. :autoAdjustOverflow="true">
  165. <span
  166. @mouseover="()=>{handleMouseoverCommono(row,col)}"
  167. @mouseout="()=>{handleMouseoutCommono(row,col)}">
  168. <j-date
  169. :id="id"
  170. :key="i"
  171. v-bind="buildProps(row,col)"
  172. style="width: 100%;"
  173. :value="jdateValues[id]"
  174. :getCalendarContainer="getParentContainer"
  175. :placeholder="replaceProps(col, col.placeholder)"
  176. :trigger-change="true"
  177. :showTime="col.type === formTypes.datetime"
  178. :dateFormat="col.type === formTypes.date? 'YYYY-MM-DD':'YYYY-MM-DD HH:mm:ss'"
  179. @change="(v)=>handleChangeJDateCommon(v,id,row,col,col.type === formTypes.datetime)"/>
  180. </span>
  181. </a-tooltip>
  182. </template>
  183. <div v-else-if="col.type === formTypes.upload" :key="i">
  184. <template v-if="uploadValues[id] != null" v-for="(file,fileKey) of [(uploadValues[id]||{})]">
  185. <a-input
  186. :key="fileKey"
  187. :readOnly="true"
  188. :value="file.name"
  189. >
  190. <template slot="addonBefore" style="width: 30px">
  191. <a-tooltip v-if="file.status==='uploading'" :title="`上传中(${Math.floor(file.percent)}%)`">
  192. <a-icon type="loading"/>
  193. </a-tooltip>
  194. <a-tooltip v-else-if="file.status==='done'" title="上传完成">
  195. <a-icon type="check-circle" style="color:#00DB00;"/>
  196. </a-tooltip>
  197. <a-tooltip v-else title="上传失败">
  198. <a-icon type="exclamation-circle" style="color:red;"/>
  199. </a-tooltip>
  200. </template>
  201. <template slot="addonAfter" style="width: 30px">
  202. <a-tooltip title="删除并重新上传">
  203. <a-icon
  204. v-if="file.status!=='uploading'"
  205. type="close-circle"
  206. style="cursor: pointer;"
  207. @click="()=>handleClickDelFile(id)"/>
  208. </a-tooltip>
  209. </template>
  210. </a-input>
  211. </template>
  212. <div :hidden="uploadValues[id] != null">
  213. <a-upload
  214. name="file"
  215. :data="{'isup':1}"
  216. :multiple="false"
  217. :action="col.action"
  218. :headers="uploadGetHeaders(row,col)"
  219. :showUploadList="false"
  220. v-bind="buildProps(row,col)"
  221. @change="(v)=>handleChangeUpload(v,id,row,col)"
  222. >
  223. <a-button icon="upload">{{ col.placeholder }}</a-button>
  224. </a-upload>
  225. </div>
  226. </div>
  227. <div v-else-if="col.type === formTypes.slot" :key="i">
  228. <slot
  229. :name="(col.slot || col.slotName) || col.key"
  230. :text="inputValues[rowIndex][col.key]"
  231. :column="col"
  232. :rowId="removeCaseId(row.id)"
  233. :getValue="()=>_getValueForSlot(row.id)"
  234. :target="getVM()"
  235. />
  236. </div>
  237. <!-- else (normal) -->
  238. <span v-else :key="i">{{ inputValues[rowIndex][col.key] }}</span>
  239. </template>
  240. </div>
  241. </div>
  242. <!-- -- tr end -- -->
  243. </template>
  244. </div>
  245. </div>
  246. </div>
  247. </a-spin>
  248. </template>
  249. <script>
  250. import Vue from 'vue'
  251. import {ACCESS_TOKEN} from '@/store/mutation-types'
  252. import {FormTypes, VALIDATE_NO_PASSED} from '@/utils/JEditableTableUtil'
  253. import {cloneObject, randomString} from '@/utils/util'
  254. import JDate from '@/components/jeecg/JDate'
  255. // 行高,需要在实例加载完成前用到
  256. let rowHeight = 61
  257. export default {
  258. name: 'JEditableTable',
  259. components: {JDate},
  260. props: {
  261. // 列信息
  262. columns: {
  263. type: Array,
  264. required: true
  265. },
  266. // 数据源
  267. dataSource: {
  268. type: Array,
  269. required: true,
  270. default: () => []
  271. },
  272. // 是否显示操作按钮
  273. actionButton: {
  274. type: Boolean,
  275. default: false
  276. },
  277. // 是否显示行号
  278. rowNumber: {
  279. type: Boolean,
  280. default: false
  281. },
  282. // 是否可选择行
  283. rowSelection: {
  284. type: Boolean,
  285. default: false
  286. },
  287. // 页面是否在加载中
  288. loading: {
  289. type: Boolean,
  290. default: false
  291. },
  292. // 页面是否在加载中
  293. maxHeight: {
  294. type: Number,
  295. default: 400
  296. },
  297. // 要禁用的行
  298. disabledRows: {
  299. type: Object,
  300. default() {
  301. return {}
  302. }
  303. },
  304. // 是否禁用全部组件
  305. disabled: {
  306. type: Boolean,
  307. default: false
  308. }
  309. },
  310. data() {
  311. return {
  312. // caseId,用于防止有多个实例的时候会冲突
  313. caseId: `_jet-${randomString(6)}-`,
  314. // 存储document element 对象
  315. el: {
  316. inputTable: null,
  317. tbody: null
  318. },
  319. // 存储各个div的style
  320. style: {
  321. // 'max-height': '400px'
  322. tbody: {left: '0px'},
  323. // 左侧固定td的style
  324. tdLeft: {'min-width': '4%', 'max-width': '45px'}
  325. },
  326. // 表单的类型
  327. formTypes: FormTypes,
  328. // 行数据
  329. rows: [],
  330. // 行高,height + padding + border
  331. rowHeight,
  332. // 滚动条顶部距离
  333. scrollTop: 0,
  334. // 绑定 select 的值
  335. selectValues: {},
  336. // 绑定 checkbox 的值
  337. checkboxValues: {},
  338. // 绑定 jdate 的值
  339. jdateValues: {},
  340. // file 信息
  341. uploadValues: {},
  342. // 绑定左侧选择框已选择的id
  343. selectedRowIds: [],
  344. // 存储被删除行的id
  345. deleteIds: [],
  346. // 存储显示tooltip的信息
  347. tooltips: {},
  348. // 存储没有通过验证的inputId
  349. notPassedIds: []
  350. }
  351. },
  352. created() {
  353. // 当前显示的tr
  354. this.visibleTrEls = []
  355. // 用来存储input表单的值
  356. // 数组里的每项都是一个对象,对象里每个key都是input的rowKey,值就是input的值,其中有个id的字段来区分
  357. // 示例:
  358. // [{
  359. // id: "_jet-4sp0iu-15541771111770"
  360. // dbDefaultVal: "aaa",
  361. // dbFieldName: "bbb",
  362. // dbFieldTxt: "ccc",
  363. // dbLength: 32
  364. // }]
  365. this.inputValues = []
  366. this.disabledRowIds = (this.disabledRowIds || [])
  367. },
  368. // 计算属性
  369. computed: {
  370. // expandHeight = rows.length * rowHeight
  371. getExpandHeight() {
  372. return this.rows.length * this.rowHeight
  373. },
  374. // 获取是否选择了部分
  375. getSelectIndeterminate() {
  376. return (this.selectedRowIds.length > 0 &&
  377. this.selectedRowIds.length < this.rows.length)
  378. },
  379. // 获取是否选择了全部
  380. getSelectAll() {
  381. return (this.selectedRowIds.length === this.rows.length) && this.rows.length > 0
  382. },
  383. tbodyStyle() {
  384. let style = Object.assign({}, this.style.tbody)
  385. // style['max-height'] = `${this.maxHeight}px`
  386. style['width'] = this.realTrWidth
  387. return style
  388. },
  389. showClearSelectButton() {
  390. let count = 0
  391. for (let key in this.disabledRows) {
  392. if (this.disabledRows.hasOwnProperty(key)) count++
  393. }
  394. return count > 0
  395. },
  396. accessToken() {
  397. return Vue.ls.get(ACCESS_TOKEN)
  398. },
  399. realTrWidth() {
  400. let calcWidth = 'calc('
  401. this.columns.forEach((column, i) => {
  402. let {type, width} = column
  403. // 隐藏字段不参与计算
  404. if (type !== FormTypes.hidden) {
  405. if (typeof width === 'number') {
  406. calcWidth += width + 'px'
  407. } else if (typeof width === 'string') {
  408. calcWidth += width
  409. } else {
  410. calcWidth += '120px'
  411. }
  412. if (i < this.columns.length - 1) {
  413. calcWidth += ' + '
  414. }
  415. }
  416. })
  417. calcWidth += ')'
  418. // console.log('calcWidth: ', calcWidth)
  419. return calcWidth
  420. }
  421. },
  422. // 侦听器
  423. watch: {
  424. dataSource: function (newValue) {
  425. this.initialize()
  426. let rows = []
  427. let checkboxValues = {}
  428. let selectValues = {}
  429. let jdateValues = {}
  430. // 禁用行的id
  431. let disabledRowIds = (this.disabledRowIds || [])
  432. newValue.forEach((data, newValueIndex) => {
  433. // 判断源数据是否带有id
  434. if (data.id == null || data.id === '') {
  435. data.id = this.removeCaseId(this.generateId() + newValueIndex)
  436. }
  437. let value = {id: this.caseId + data.id}
  438. let row = {id: value.id}
  439. let disabled = false
  440. this.columns.forEach(column => {
  441. let inputId = column.key + value.id
  442. let sourceValue = (data[column.key] == null ? '' : data[column.key]).toString()
  443. if (column.type === FormTypes.checkbox) {
  444. // 判断是否设定了customValue(自定义值)
  445. if (column.customValue instanceof Array) {
  446. let customValue = (column.customValue[0] || '').toString()
  447. checkboxValues[inputId] = (sourceValue === customValue)
  448. } else {
  449. checkboxValues[inputId] = sourceValue
  450. }
  451. } else if (column.type === FormTypes.select) {
  452. if (sourceValue) {
  453. // 判断是否是多选
  454. selectValues[inputId] = (column.props || {})['mode'] === 'multiple' ? sourceValue.split(',') : sourceValue
  455. } else {
  456. selectValues[inputId] = undefined
  457. }
  458. } else if (column.type === FormTypes.date || column.type === FormTypes.datetime) {
  459. jdateValues[inputId] = sourceValue
  460. } else if (column.type === FormTypes.slot) {
  461. if (sourceValue !== 0 && !sourceValue) {
  462. value[column.key] = column.defaultValue
  463. } else {
  464. value[column.key] = sourceValue
  465. }
  466. } else {
  467. value[column.key] = sourceValue
  468. }
  469. // 解析disabledRows
  470. for (let columnKey in this.disabledRows) {
  471. // 判断是否有该属性
  472. if (this.disabledRows.hasOwnProperty(columnKey) && data.hasOwnProperty(columnKey)) {
  473. // row[columnKey] =
  474. if (disabled !== true) {
  475. disabled = this.disabledRows[columnKey] === data[columnKey]
  476. if (disabled) {
  477. disabledRowIds.push(row.id)
  478. }
  479. }
  480. }
  481. }
  482. })
  483. this.inputValues.push(value)
  484. rows.push(row)
  485. })
  486. this.disabledRowIds = disabledRowIds
  487. this.checkboxValues = checkboxValues
  488. this.selectValues = selectValues
  489. this.jdateValues = jdateValues
  490. this.rows = rows
  491. // 更新form表单的值
  492. this.$nextTick(() => {
  493. this.updateFormValues()
  494. })
  495. },
  496. columns: {
  497. immediate: true,
  498. handler(columns) {
  499. columns.forEach(column => {
  500. if (column.type === FormTypes.select) {
  501. // 兼容 旧版本 options
  502. if (column.options instanceof Array) {
  503. column.options = column.options.map(item => {
  504. if (item) {
  505. return {
  506. text: item.text || item.title,
  507. title: item.text || item.title,
  508. value: item.value
  509. }
  510. }
  511. return {}
  512. })
  513. }
  514. }
  515. })
  516. }
  517. },
  518. // 当selectRowIds改变时触发事件
  519. selectedRowIds(newValue) {
  520. this.$emit('selectRowChange', cloneObject(newValue))
  521. }
  522. },
  523. mounted() {
  524. // 获取document element对象
  525. let elements = {};
  526. ['inputTable', 'tbody'].forEach(id => {
  527. elements[id] = document.getElementById(this.caseId + id)
  528. })
  529. this.el = elements
  530. let vm = this
  531. /** 监听滚动条事件 */
  532. this.el.inputTable.onscroll = function (event) {
  533. vm.syncScrollBar(event.target.scrollLeft)
  534. }
  535. this.el.tbody.onscroll = function (event) {
  536. // vm.recalcTrHiddenItem(event.target.scrollTop)
  537. }
  538. let {thead, scrollView} = this.$refs
  539. scrollView.onscroll = function (event) {
  540. // console.log(event.target.scrollTop, ' - ', event.target.scrollLeft)
  541. thead.scrollLeft = event.target.scrollLeft
  542. // vm.recalcTrHiddenItem(event.target.scrollTop)
  543. vm.recalcTrHiddenItem(event.target.scrollTop)
  544. }
  545. },
  546. methods: {
  547. /** 初始化列表 */
  548. initialize() {
  549. this.visibleTrEls = []
  550. this.rows = []
  551. this.deleteIds = []
  552. this.inputValues = []
  553. this.selectValues = {}
  554. this.checkboxValues = {}
  555. this.jdateValues = {}
  556. this.selectedRowIds = []
  557. this.tooltips = {}
  558. this.notPassedIds = []
  559. this.scrollTop = 0
  560. this.$nextTick(() => {
  561. this.el.tbody.scrollTop = 0
  562. })
  563. },
  564. /** 同步滚动条状态 */
  565. syncScrollBar(scrollLeft) {
  566. // this.style.tbody.left = `${scrollLeft}px`
  567. // this.el.tbody.scrollLeft = scrollLeft
  568. },
  569. /** 重置滚动条位置,参数留空则滚动到上次记录的位置 */
  570. resetScrollTop(top) {
  571. let {scrollView} = this.$refs
  572. if (top != null && typeof top === 'number') {
  573. scrollView.scrollTop = top
  574. } else {
  575. scrollView.scrollTop = this.scrollTop
  576. }
  577. },
  578. /** 重新计算需要隐藏或显示的tr */
  579. recalcTrHiddenItem(top) {
  580. let diff = top - this.scrollTop
  581. if (diff < 0) {
  582. diff = this.scrollTop - top
  583. }
  584. // 只有在滚动了百分之三十的行高的距离时才进行更新
  585. if (diff >= this.rowHeight * 0.3) {
  586. this.scrollTop = top
  587. // 更新form表单的值
  588. this.$nextTick(() => {
  589. this.updateFormValues()
  590. })
  591. }
  592. },
  593. /** 生成id */
  594. generateId(rows) {
  595. if (!(rows instanceof Array)) {
  596. rows = this.rows || []
  597. }
  598. let timestamp = new Date().getTime()
  599. return `${this.caseId}${timestamp}${rows.length}`
  600. },
  601. /** push 一条数据 */
  602. push(record, update = true, rows) {
  603. if (!(rows instanceof Array)) {
  604. rows = cloneObject(this.rows) || []
  605. }
  606. if (record.id == null) {
  607. record.id = this.generateId(rows)
  608. // let timestamp = new Date().getTime()
  609. // record.id = `${this.caseId}${timestamp}${rows.length}`
  610. }
  611. if (record.id.indexOf(this.caseId) === -1) {
  612. record.id = this.caseId + record.id
  613. }
  614. let row = {id: record.id}
  615. let value = {id: row.id}
  616. let checkboxValues = Object.assign({}, this.checkboxValues)
  617. let selectValues = Object.assign({}, this.selectValues)
  618. let jdateValues = Object.assign({}, this.jdateValues)
  619. this.columns.forEach(column => {
  620. let key = column.key
  621. let inputId = key + row.id
  622. // record中是否有该列的值
  623. let recordHasValue = record[key] != null
  624. if (column.type === FormTypes.input) {
  625. value[key] = recordHasValue ? record[key] : (column.defaultValue || (column.defaultValue === 0 ? 0 : ''))
  626. } else if (column.type === FormTypes.inputNumber) {
  627. // 判断是否是排序字段,如果是就赋最大值
  628. if (column.isOrder === true) {
  629. value[key] = this.getInputNumberMaxValue(column) + 1
  630. } else {
  631. value[key] = recordHasValue ? record[key] : (column.defaultValue || (column.defaultValue === 0 ? 0 : ''))
  632. }
  633. } else if (column.type === FormTypes.checkbox) {
  634. checkboxValues[inputId] = recordHasValue ? record[key] : column.defaultChecked
  635. } else if (column.type === FormTypes.select) {
  636. let selected = column.defaultValue
  637. if (selected !== 0 && !selected) {
  638. selected = undefined
  639. }
  640. // 判断多选
  641. if (typeof selected === 'string' && (column.props || {})['mode'] === 'multiple') {
  642. selected = selected.split(',')
  643. }
  644. selectValues[inputId] = recordHasValue ? record[key] : selected
  645. } else if (column.type === FormTypes.date || column.type === FormTypes.datetime) {
  646. jdateValues[inputId] = recordHasValue ? record[key] : column.defaultValue
  647. } else if (column.type === FormTypes.slot) {
  648. value[key] = recordHasValue ? record[key] : (column.defaultValue || '')
  649. } else {
  650. value[key] = recordHasValue ? record[key] : ''
  651. }
  652. })
  653. rows.push(row)
  654. this.inputValues.push(value)
  655. this.checkboxValues = checkboxValues
  656. this.selectValues = selectValues
  657. this.jdateValues = jdateValues
  658. if (update) {
  659. this.rows = rows
  660. this.$nextTick(() => {
  661. this.updateFormValues()
  662. })
  663. }
  664. return rows
  665. },
  666. /** 获取某一数字输入框列中的最大的值 */
  667. getInputNumberMaxValue(column) {
  668. let maxNum = 0
  669. this.inputValues.forEach((item, index) => {
  670. let val = item[column.key], num
  671. try {
  672. num = parseInt(val)
  673. } catch {
  674. num = 0
  675. }
  676. // 把首次循环的结果当成最大值
  677. if (index === 0) {
  678. maxNum = num
  679. } else {
  680. maxNum = (num > maxNum) ? num : maxNum
  681. }
  682. })
  683. return maxNum
  684. },
  685. /** 添加一行 */
  686. add(num = 1, forceScrollToBottom = false) {
  687. // let timestamp = new Date().getTime()
  688. let rows = this.rows
  689. let row
  690. for (let i = 0; i < num; i++) {
  691. // row = { id: `${this.caseId}${timestamp}${rows.length}` }
  692. row = {id: this.generateId(rows)}
  693. rows = this.push(row, false, rows)
  694. }
  695. this.rows = rows
  696. this.$nextTick(() => {
  697. this.updateFormValues()
  698. })
  699. // 触发add事件
  700. this.$emit('added', {
  701. row: (() => {
  702. let r = Object.assign({}, row)
  703. r.id = this.removeCaseId(r.id)
  704. return r
  705. })(),
  706. target: this
  707. })
  708. // 设置滚动条位置
  709. let tbody = this.el.tbody
  710. let offsetHeight = tbody.offsetHeight
  711. let realScrollTop = tbody.scrollTop + offsetHeight
  712. if (forceScrollToBottom === false) {
  713. // 只有滚动条在底部的时候才自动滚动
  714. if (!((tbody.scrollHeight - realScrollTop) <= 10)) {
  715. return
  716. }
  717. }
  718. this.$nextTick(() => {
  719. tbody.scrollTop = tbody.scrollHeight
  720. })
  721. },
  722. /** 删除被选中的行 */
  723. removeSelectedRows() {
  724. this.removeRows(this.selectedRowIds)
  725. this.selectedRowIds = []
  726. },
  727. /** 删除一行或多行 */
  728. removeRows(id) {
  729. let ids = id
  730. if (!(id instanceof Array)) {
  731. if (typeof id === 'string') {
  732. ids = [id]
  733. } else {
  734. throw `JEditableTable.removeRows() 函数需要的参数可以是string或Array类型,但提供的却是${typeof id}`
  735. }
  736. }
  737. let rows = cloneObject(this.rows)
  738. ids.forEach(removeId => {
  739. // 找到每个id对应的真实index并删除
  740. const findAndDelete = (arr) => {
  741. for (let i = 0; i < arr.length; i++) {
  742. if (arr[i].id === removeId || arr[i].id === this.caseId + removeId) {
  743. arr.splice(i, 1)
  744. return true
  745. }
  746. }
  747. }
  748. // 找到rows对应的index,并删除
  749. if (findAndDelete(rows)) {
  750. // 找到values对应的index,并删除
  751. findAndDelete(this.inputValues)
  752. // 将caseId去除
  753. let id = this.removeCaseId(removeId)
  754. this.deleteIds.push(id)
  755. }
  756. })
  757. this.rows = rows
  758. this.$emit('deleted', this.getDeleteIds())
  759. this.$nextTick(() => {
  760. // 更新formValues
  761. this.updateFormValues()
  762. })
  763. return true
  764. },
  765. /** 获取表格表单里的值(同步版) */
  766. getValuesSync(options = {}) {
  767. let {validate, rowIds} = options
  768. if (typeof validate !== 'boolean') validate = true
  769. if (!(rowIds instanceof Array)) rowIds = null
  770. // console.log('options:', { validate, rowIds })
  771. let error = 0
  772. let inputValues = cloneObject(this.inputValues)
  773. let tooltips = Object.assign({}, this.tooltips)
  774. let notPassedIds = cloneObject(this.notPassedIds)
  775. // 用于存储合并后的值
  776. let values = []
  777. // 遍历inputValues来获取每行的值
  778. for (let value of inputValues) {
  779. let rowIdsFlag = false
  780. // 如果带有rowIds,那么就只存这几行的数据
  781. if (rowIds == null) {
  782. rowIdsFlag = true
  783. } else {
  784. for (let rowId of rowIds) {
  785. if (rowId === value.id || `${this.caseId}${rowId}` === value.id) {
  786. rowIdsFlag = true
  787. break
  788. }
  789. }
  790. }
  791. if (!rowIdsFlag) continue
  792. this.columns.forEach(column => {
  793. let inputId = column.key + value.id
  794. if (column.type === FormTypes.checkbox) {
  795. let checked = this.checkboxValues[inputId]
  796. if (column.customValue instanceof Array) {
  797. value[column.key] = checked ? column.customValue[0] : column.customValue[1]
  798. } else {
  799. value[column.key] = checked
  800. }
  801. } else if (column.type === FormTypes.select) {
  802. let selected = this.selectValues[inputId]
  803. if (selected instanceof Array) {
  804. value[column.key] = cloneObject(selected)
  805. } else {
  806. value[column.key] = selected
  807. }
  808. } else if (column.type === FormTypes.date || column.type === FormTypes.datetime) {
  809. value[column.key] = this.jdateValues[inputId]
  810. } else if (column.type === FormTypes.upload) {
  811. value[column.key] = cloneObject(this.uploadValues[inputId] || null)
  812. }
  813. // 检查表单验证
  814. if (validate === true) {
  815. let results = this.validateOneInput(value[column.key], value, column, notPassedIds, false)
  816. tooltips[inputId] = results[0]
  817. if (tooltips[inputId].visible) {
  818. error++
  819. // if (error++ === 0) {
  820. // let element = document.getElementById(inputId)
  821. // while (element.className !== 'tr') {
  822. // element = element.parentElement
  823. // }
  824. // this.jumpToId(inputId, element)
  825. // }
  826. }
  827. tooltips[inputId].visible = false
  828. notPassedIds = results[1]
  829. }
  830. })
  831. // 将caseId去除
  832. value.id = this.removeCaseId(value.id)
  833. values.push(value)
  834. }
  835. this.tooltips = tooltips
  836. this.notPassedIds = notPassedIds
  837. return {error, values}
  838. },
  839. /** 获取表格表单里的值 */
  840. getValues(callback, validate = true, rowIds) {
  841. let result = this.getValuesSync({validate, rowIds})
  842. if (typeof callback === 'function') {
  843. callback(result.error, result.values)
  844. }
  845. },
  846. /** getValues的Promise版 */
  847. getValuesPromise(validate = true, rowIds) {
  848. return new Promise((resolve, reject) => {
  849. let {error, values} = this.getValuesSync({validate, rowIds})
  850. if (error === 0) {
  851. resolve(values)
  852. } else {
  853. reject(VALIDATE_NO_PASSED)
  854. }
  855. })
  856. },
  857. /** 获取被删除项的id */
  858. getDeleteIds() {
  859. return cloneObject(this.deleteIds)
  860. },
  861. /** 获取所有的数据,包括values、deleteIds */
  862. getAll(validate) {
  863. return new Promise((resolve, reject) => {
  864. let deleteIds = this.getDeleteIds()
  865. this.getValuesPromise(validate).then((values) => {
  866. resolve({values, deleteIds})
  867. }).catch(error => {
  868. reject(error)
  869. })
  870. })
  871. },
  872. /** Sync 获取所有的数据,包括values、deleteIds */
  873. getAllSync(validate, rowIds) {
  874. let result = this.getValuesSync({validate, rowIds})
  875. result.deleteIds = this.getDeleteIds()
  876. return result
  877. },
  878. // slot 获取值
  879. _getValueForSlot(rowId) {
  880. return this.getValuesSync({rowIds: [rowId]}).values[0]
  881. },
  882. /** 设置某行某列的值 */
  883. setValues(values) {
  884. values.forEach(item => {
  885. let {rowKey, values: newValues} = item
  886. for (let newValueKey in newValues) {
  887. if (newValues.hasOwnProperty(newValueKey)) {
  888. let newValue = newValues[newValueKey]
  889. let edited = false // 已被修改
  890. this.inputValues.forEach(value => {
  891. // 在inputValues中找到了该字段
  892. if (`${this.caseId}${rowKey}` === value.id) {
  893. if (value.hasOwnProperty(newValueKey)) {
  894. edited = true
  895. value[newValueKey] = newValue
  896. }
  897. }
  898. })
  899. let modelKey = `${newValueKey}${this.caseId}${rowKey}`
  900. // 在 selectValues 中寻找值
  901. if (!edited && this.selectValues.hasOwnProperty(modelKey)) {
  902. if (newValue !== 0 && !newValue) {
  903. this.selectValues[modelKey] = undefined
  904. } else {
  905. this.selectValues[modelKey] = newValue
  906. }
  907. edited = true
  908. }
  909. // 在 checkboxValues 中寻找值
  910. if (!edited && this.checkboxValues.hasOwnProperty(modelKey)) {
  911. this.checkboxValues[modelKey] = newValue
  912. edited = true
  913. }
  914. // 在 jdateValues 中寻找值
  915. if (!edited && this.jdateValues.hasOwnProperty(modelKey)) {
  916. this.jdateValues[modelKey] = newValue
  917. edited = true
  918. }
  919. }
  920. }
  921. })
  922. // 强制更新formValues
  923. this.forceUpdateFormValues()
  924. },
  925. /** 跳转到指定位置 */
  926. // jumpToId(id, element) {
  927. // if (element == null) {
  928. // element = document.getElementById(id)
  929. // }
  930. // if (element != null) {
  931. // console.log(this.el.tbody.scrollTop, element.offsetTop)
  932. // this.el.tbody.scrollTop = element.offsetTop
  933. // console.log(this.el.tbody.scrollTop, element.offsetTop)
  934. // }
  935. // },
  936. /** 验证单个表单 */
  937. validateOneInput(value, row, column, notPassedIds, update = false) {
  938. let tooltips = Object.assign({}, this.tooltips)
  939. // let notPassedIds = cloneObject(this.notPassedIds)
  940. let inputId = column.key + row.id
  941. let [passed, message] = this.validateValue(column.validateRules, value)
  942. tooltips[inputId] = tooltips[inputId] ? tooltips[inputId] : {}
  943. tooltips[inputId].visible = !passed
  944. let index = notPassedIds.indexOf(inputId)
  945. let borderColor = null, boxShadow = null
  946. if (!passed) {
  947. tooltips[inputId].title = this.replaceProps(column, message)
  948. borderColor = 'red'
  949. boxShadow = `0 0 0 2px rgba(255, 0, 0, 0.2)`
  950. if (index === -1) notPassedIds.push(inputId)
  951. } else {
  952. if (index !== -1) notPassedIds.splice(index, 1)
  953. }
  954. let element = document.getElementById(inputId)
  955. if (element != null) {
  956. // select 在 .ant-select-selection 上设置 border-color
  957. if (column.type === FormTypes.select) {
  958. element = element.getElementsByClassName('ant-select-selection')[0]
  959. }
  960. // jdate 在 input 上设置 border-color
  961. if (column.type === FormTypes.date || column.type === FormTypes.datetime) {
  962. element = element.getElementsByTagName('input')[0]
  963. }
  964. element.style.borderColor = borderColor
  965. element.style.boxShadow = boxShadow
  966. }
  967. // 是否更新到data
  968. if (update) {
  969. this.tooltips = tooltips
  970. this.notPassedIds = notPassedIds
  971. }
  972. return [tooltips[inputId], notPassedIds]
  973. },
  974. /** 通过规则验证值是否正确 */
  975. validateValue(rules, value) {
  976. let passed = true, message = ''
  977. // 判断有没有验证规则或验证规则格式正不正确,若条件不符合则默认通过
  978. if (rules instanceof Array) {
  979. for (let rule of rules) {
  980. // 当前值是否为空
  981. let isNull = (value == null || value === '')
  982. // 验证规则:非空
  983. if (rule.required === true && isNull) {
  984. passed = false
  985. } else // 使用 else-if 是为了防止一个 rule 中出现两个规则
  986. // 验证规则:正则表达式
  987. if (!!rule.pattern && !isNull) {
  988. passed = new RegExp(rule.pattern).test(value)
  989. }
  990. // 如果没有通过验证,则跳出循环。如果通过了验证,则继续验证下一条规则
  991. if (!passed) {
  992. message = rule.message
  993. break
  994. }
  995. }
  996. }
  997. return [passed, message]
  998. },
  999. /** 动态更新表单的值 */
  1000. updateFormValues() {
  1001. let trs = this.el.tbody.getElementsByClassName('tr')
  1002. let trEls = []
  1003. for (let tr of trs) {
  1004. trEls.push(tr)
  1005. }
  1006. // 获取新增的 tr
  1007. let newTrEls = trEls
  1008. if (this.visibleTrEls.length > 0) {
  1009. newTrEls = []
  1010. for (let tr of trEls) {
  1011. let isNewest = true
  1012. for (let vtr of this.visibleTrEls) {
  1013. if (vtr.id === tr.id) {
  1014. isNewest = false
  1015. break
  1016. }
  1017. }
  1018. if (isNewest) {
  1019. newTrEls.push(tr)
  1020. }
  1021. }
  1022. }
  1023. this.visibleTrEls = trEls
  1024. // 向新增的tr中赋值
  1025. newTrEls.forEach(tr => {
  1026. let {idx} = tr.dataset
  1027. let value = this.inputValues[idx]
  1028. for (let key in value) {
  1029. if (value.hasOwnProperty(key)) {
  1030. let elid = `${key}${value.id}`
  1031. let el = document.getElementById(elid)
  1032. if (el) {
  1033. el.value = value[key]
  1034. }
  1035. }
  1036. }
  1037. })
  1038. },
  1039. /** 强制更新FormValues */
  1040. forceUpdateFormValues() {
  1041. this.visibleTrEls = []
  1042. this.updateFormValues()
  1043. },
  1044. /** 全选或取消全选 */
  1045. handleChangeCheckedAll() {
  1046. let selectedRowIds = []
  1047. if (!this.getSelectAll) {
  1048. this.rows.forEach(row => {
  1049. if ((this.disabledRowIds || []).indexOf(row.id) === -1) {
  1050. selectedRowIds.push(row.id)
  1051. }
  1052. })
  1053. }
  1054. this.selectedRowIds = selectedRowIds
  1055. },
  1056. /** 左侧行选择框change事件 */
  1057. handleChangeLeftCheckbox(event) {
  1058. let {id} = event.target
  1059. if ((this.disabledRowIds || []).indexOf(id) !== -1) {
  1060. return
  1061. }
  1062. let index = this.selectedRowIds.indexOf(id)
  1063. if (index !== -1) {
  1064. this.selectedRowIds.splice(index, 1)
  1065. } else {
  1066. this.selectedRowIds.push(id)
  1067. }
  1068. },
  1069. handleClickAdd() {
  1070. this.add()
  1071. },
  1072. handleConfirmDelete() {
  1073. this.removeSelectedRows()
  1074. },
  1075. handleClickClearSelect() {
  1076. this.selectedRowIds = []
  1077. },
  1078. /** select 搜索时的事件,用于动态添加options */
  1079. handleSearchSelect(value, id, row, col) {
  1080. if (col.allowInput === true) {
  1081. // 是否找到了对应的项,找不到则添加这一项
  1082. let flag = false
  1083. for (let option of col.options) {
  1084. if (option.value.toLocaleString() === value.toLocaleString()) {
  1085. flag = true
  1086. break
  1087. }
  1088. }
  1089. // !!value :不添加空值
  1090. if (!flag && !!value) {
  1091. // searchAdd 是否是通过搜索添加的
  1092. col.options.push({title: value, value: value, searchAdd: true})
  1093. }
  1094. }
  1095. },
  1096. // blur 失去焦点
  1097. handleBlurSearch(value, id, row, col) {
  1098. if (col.allowInput === true) {
  1099. // 删除无用的因搜索(用户输入)而创建的项
  1100. if (typeof value === 'string') {
  1101. let indexs = []
  1102. col.options.forEach((option, index) => {
  1103. if (option.value.toLocaleString() === value.toLocaleString()) {
  1104. delete option.searchAdd
  1105. } else if (option.searchAdd === true) {
  1106. indexs.push(index)
  1107. }
  1108. })
  1109. // 翻转删除数组中的项
  1110. for (let index of indexs.reverse()) {
  1111. col.options.splice(index, 1)
  1112. }
  1113. }
  1114. }
  1115. },
  1116. /* --- common function begin --- */
  1117. /** 鼠标移入 */
  1118. handleMouseoverCommono(row, column) {
  1119. let inputId = column.key + row.id
  1120. if (this.notPassedIds.indexOf(inputId) !== -1) {
  1121. this.showOrHideTooltip(inputId, true)
  1122. }
  1123. },
  1124. /** 鼠标移出 */
  1125. handleMouseoutCommono(row, column) {
  1126. let inputId = column.key + row.id
  1127. this.showOrHideTooltip(inputId, false)
  1128. },
  1129. /** input事件 */
  1130. handleInputCommono(target, index, row, column) {
  1131. let {value, dataset, selectionStart} = target
  1132. let type = FormTypes.input
  1133. let change = true
  1134. if (`${dataset.inputNumber}` === 'true') {
  1135. type = FormTypes.inputNumber
  1136. let replace = value.replace(/[^0-9]/g, '')
  1137. if (value !== replace) {
  1138. change = false
  1139. value = replace
  1140. target.value = replace
  1141. if (typeof selectionStart === 'number') {
  1142. target.selectionStart = selectionStart - 1
  1143. target.selectionEnd = selectionStart - 1
  1144. }
  1145. }
  1146. }
  1147. // 存储输入的值
  1148. this.inputValues[index][column.key] = value
  1149. // 做单个表单验证
  1150. this.validateOneInput(value, row, column, this.notPassedIds, true)
  1151. // 触发valueChange 事件
  1152. if (change) {
  1153. this.elemValueChange(type, row, column, value)
  1154. }
  1155. },
  1156. handleChangeCheckboxCommon(event, row, column) {
  1157. let {id, checked} = event.target
  1158. this.checkboxValues = this.bindValuesChange(checked, id, 'checkboxValues')
  1159. // 触发valueChange 事件
  1160. this.elemValueChange(FormTypes.checkbox, row, column, checked)
  1161. },
  1162. handleChangeSelectCommon(value, id, row, column) {
  1163. this.selectValues = this.bindValuesChange(value, id, 'selectValues')
  1164. // 做单个表单验证
  1165. this.validateOneInput(value, row, column, this.notPassedIds, true)
  1166. // 触发valueChange 事件
  1167. this.elemValueChange(FormTypes.select, row, column, value)
  1168. },
  1169. handleChangeJDateCommon(value, id, row, column, showTime) {
  1170. this.jdateValues = this.bindValuesChange(value, id, 'jdateValues')
  1171. this.validateOneInput(value, row, column, this.notPassedIds, true)
  1172. // 触发valueChange 事件
  1173. if (showTime) {
  1174. this.elemValueChange(FormTypes.datetime, row, column, value)
  1175. } else {
  1176. this.elemValueChange(FormTypes.date, row, column, value)
  1177. }
  1178. },
  1179. handleChangeUpload(info, id, row, column) {
  1180. let {file} = info
  1181. let value = {
  1182. name: file.name,
  1183. type: file.type,
  1184. size: file.size,
  1185. status: file.status,
  1186. percent: file.percent
  1187. }
  1188. if (column.responseName && file.response) {
  1189. value['responseName'] = file.response[column.responseName]
  1190. }
  1191. this.uploadValues = this.bindValuesChange(value, id, 'uploadValues')
  1192. },
  1193. /** 记录用到数据绑定的组件的值 */
  1194. bindValuesChange(value, id, key) {
  1195. let values = Object.assign({}, this[key])
  1196. values[id] = value
  1197. return values
  1198. },
  1199. /** 显示或隐藏tooltip */
  1200. showOrHideTooltip(inputId, show) {
  1201. let tooltips = Object.assign({}, this.tooltips)
  1202. tooltips[inputId] = tooltips[inputId] ? tooltips[inputId] : {}
  1203. tooltips[inputId].visible = show
  1204. this.tooltips = tooltips
  1205. },
  1206. /** value 触发valueChange事件 */
  1207. elemValueChange(type, rowSource, columnSource, value) {
  1208. let column = Object.assign({}, columnSource)
  1209. // 将caseId去除
  1210. let row = Object.assign({}, rowSource)
  1211. row.id = this.removeCaseId(row.id)
  1212. // 获取整行的数据
  1213. let {values} = this.getValuesSync({validate: false, rowIds: [row.id]})
  1214. if (values.length > 0) {
  1215. Object.assign(row, values[0])
  1216. }
  1217. this.$emit('valueChange', {type, row, column, value, target: this})
  1218. },
  1219. /** 将caseId去除 */
  1220. removeCaseId(id) {
  1221. let remove = id.split(this.caseId)[1]
  1222. return remove ? remove : id
  1223. },
  1224. handleClickDelFile(id) {
  1225. this.uploadValues[id] = null
  1226. },
  1227. /* --- common function end --- */
  1228. /* --- 以下是辅助方法,多用于动态构造页面中的数据 --- */
  1229. /** 辅助方法:打印日志 */
  1230. log: console.log,
  1231. getVM() {
  1232. return this
  1233. },
  1234. /** 辅助方法:指定a-select 和 j-data 的父容器 */
  1235. getParentContainer(node) {
  1236. if (this.$el && this.$el.nodeType !== 8) {
  1237. return this.$el
  1238. }
  1239. let doc = document.getElementById(this.caseId + 'inputTable')
  1240. if (doc != null) {
  1241. return doc
  1242. }
  1243. return node.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode
  1244. },
  1245. /** 辅助方法:替换${...}变量 */
  1246. replaceProps(col, value) {
  1247. if (value && typeof value === 'string') {
  1248. value = value.replace(/\${title}/g, col.title)
  1249. value = value.replace(/\${key}/g, col.key)
  1250. value = value.replace(/\${defaultValue}/g, col.defaultValue)
  1251. }
  1252. return value
  1253. },
  1254. /** view辅助方法:构建 tr style */
  1255. buildTrStyle(index) {
  1256. return {
  1257. 'top': `${rowHeight * index}px`
  1258. }
  1259. },
  1260. /** view辅助方法:构建 td style */
  1261. buildTdStyle(col) {
  1262. let style = {}
  1263. // 计算宽度
  1264. if (col.width) {
  1265. style['width'] = col.width
  1266. } else if (this.columns) {
  1267. style['width'] = `${(100 - 4 * 2) / this.columns.length}%`
  1268. } else {
  1269. style['width'] = '120px'
  1270. }
  1271. // checkbox 居中显示
  1272. let isCheckbox = col.type === FormTypes.checkbox
  1273. if (isCheckbox) {
  1274. style['align-items'] = 'center'
  1275. style['text-align'] = 'center'
  1276. style['padding-left'] = '0'
  1277. style['padding-right'] = '0'
  1278. }
  1279. return style
  1280. },
  1281. /** view辅助方法:构造props */
  1282. buildProps(row, col) {
  1283. let props = {}
  1284. // 解析props
  1285. if (typeof col.props === 'object') {
  1286. for (let prop in col.props) {
  1287. if (col.props.hasOwnProperty(prop)) {
  1288. props[prop] = this.replaceProps(col, col.props[prop])
  1289. }
  1290. }
  1291. }
  1292. // 判断select是否允许输入
  1293. if (col.type === FormTypes.select && col.allowInput === true) {
  1294. props['showSearch'] = true
  1295. }
  1296. // 判断是否为禁用的行
  1297. if (props['disabled'] !== true) {
  1298. props['disabled'] = ((this.disabledRowIds || []).indexOf(row.id) !== -1)
  1299. }
  1300. // 判断是否禁用全部组件
  1301. if (this.disabled === true) {
  1302. props['disabled'] = true
  1303. }
  1304. return props
  1305. },
  1306. /** upload 辅助方法:获取 headers */
  1307. uploadGetHeaders(row, column) {
  1308. let headers = {}
  1309. if (column.token === true) {
  1310. headers['X-Access-Token'] = this.accessToken
  1311. }
  1312. return headers
  1313. }
  1314. }
  1315. }
  1316. </script>
  1317. <style lang="less" scoped>
  1318. .action-button {
  1319. margin-bottom: 8px;
  1320. .gap {
  1321. padding-left: 8px;
  1322. }
  1323. }
  1324. /* 设定边框参数 */
  1325. @borderColor: #e8e8e8;
  1326. @border: 1px solid @borderColor;
  1327. /* tr & td 之间的间距 */
  1328. @spacing: 8px;
  1329. .input-table {
  1330. max-width: 100%;
  1331. overflow-x: hidden;
  1332. overflow-y: hidden;
  1333. position: relative;
  1334. border: @border;
  1335. .thead, .tbody {
  1336. .tr, .td {
  1337. display: flex;
  1338. }
  1339. .td {
  1340. /*border-right: 1px solid red;*/
  1341. /*color: white;*/
  1342. /*background-color: black;*/
  1343. /*margin-right: @spacing !important;*/
  1344. padding-left: @spacing;
  1345. flex-direction: column;
  1346. &.td-cb, &.td-num {
  1347. min-width: 4%;
  1348. max-width: 45px;
  1349. margin-right: 0;
  1350. padding-left: 0;
  1351. padding-right: 0;
  1352. justify-content: center;
  1353. align-items: center;
  1354. }
  1355. }
  1356. }
  1357. .thead {
  1358. overflow-y: scroll;
  1359. overflow-x: hidden;
  1360. border-bottom: @border;
  1361. /** 隐藏thead的滑块 */
  1362. &::-webkit-scrollbar-thumb {
  1363. box-shadow: none !important;
  1364. background-color: transparent !important;
  1365. }
  1366. .tr {
  1367. min-width: 100%;
  1368. overflow-y: scroll;
  1369. }
  1370. .td {
  1371. /*flex: 1;*/
  1372. padding: 8px @spacing;
  1373. justify-content: center;
  1374. }
  1375. }
  1376. .tbody {
  1377. position: relative;
  1378. top: 0;
  1379. left: 0;
  1380. overflow-x: hidden;
  1381. overflow-y: hidden;
  1382. min-height: 61px;
  1383. /*max-height: 400px;*/
  1384. min-width: 100%;
  1385. .tr-nodata {
  1386. color: #999;
  1387. line-height: 61px;
  1388. text-align: center;
  1389. }
  1390. .tr {
  1391. /*line-height: 50px;*/
  1392. border-bottom: @border;
  1393. transition: background-color 300ms;
  1394. width: 100%;
  1395. position: absolute;
  1396. left: 0;
  1397. z-index: 10;
  1398. &.tr-checked {
  1399. background-color: #fafafa;
  1400. }
  1401. &:hover {
  1402. background-color: #E6F7FF;
  1403. }
  1404. }
  1405. .tr-expand {
  1406. position: relative;
  1407. z-index: 9;
  1408. background-color: white;
  1409. }
  1410. .td {
  1411. /*flex: 1;*/
  1412. padding: 14px 0 14px @spacing;
  1413. justify-content: center;
  1414. &:last-child {
  1415. padding-right: @spacing;
  1416. }
  1417. input {
  1418. font-variant: tabular-nums;
  1419. box-sizing: border-box;
  1420. margin: 0;
  1421. list-style: none;
  1422. position: relative;
  1423. display: inline-block;
  1424. padding: 4px 11px;
  1425. width: 100%;
  1426. height: 32px;
  1427. font-size: 14px;
  1428. line-height: 1.5;
  1429. color: rgba(0, 0, 0, 0.65);
  1430. background-color: #fff;
  1431. border: 1px solid #d9d9d9;
  1432. border-radius: 4px;
  1433. transition: all 0.3s;
  1434. outline: none;
  1435. &:hover {
  1436. border-color: #4D90FE
  1437. }
  1438. &:focus {
  1439. border-color: #40a9ff;
  1440. box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
  1441. border-right-width: 1px !important;
  1442. }
  1443. &:disabled {
  1444. color: rgba(0, 0, 0, 0.25);
  1445. background: #f5f5f5;
  1446. cursor: not-allowed;
  1447. }
  1448. /* 设置placeholder的颜色 */
  1449. &::-webkit-input-placeholder { /* WebKit browsers */
  1450. color: #ccc;
  1451. }
  1452. &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  1453. color: #ccc;
  1454. }
  1455. &::-moz-placeholder { /* Mozilla Firefox 19+ */
  1456. color: #ccc;
  1457. }
  1458. &:-ms-input-placeholder { /* Internet Explorer 10+ */
  1459. color: #ccc;
  1460. }
  1461. }
  1462. }
  1463. }
  1464. .scroll-view {
  1465. overflow: auto;
  1466. overflow-y: scroll;
  1467. }
  1468. .thead, .thead .tr, .scroll-view {
  1469. @scrollBarSize: 6px;
  1470. /* 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  1471. &::-webkit-scrollbar {
  1472. width: @scrollBarSize;
  1473. height: @scrollBarSize;
  1474. background-color: transparent;
  1475. }
  1476. /* 定义滚动条轨道 */
  1477. &::-webkit-scrollbar-track {
  1478. background-color: #f0f0f0;
  1479. }
  1480. /* 定义滑块 */
  1481. &::-webkit-scrollbar-thumb {
  1482. background-color: #eee;
  1483. box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  1484. &:hover {
  1485. background-color: #bbb;
  1486. }
  1487. &:active {
  1488. background-color: #888;
  1489. }
  1490. }
  1491. }
  1492. .thead .tr {
  1493. &::-webkit-scrollbar-track {
  1494. background-color: transparent;
  1495. }
  1496. /* IE模式下隐藏 */
  1497. -ms-overflow-style: none;
  1498. -ms-scroll-chaining: chained;
  1499. -ms-content-zooming: zoom;
  1500. -ms-scroll-rails: none;
  1501. -ms-content-zoom-limit-min: 100%;
  1502. -ms-content-zoom-limit-max: 500%;
  1503. -ms-scroll-snap-type: proximity;
  1504. -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
  1505. }
  1506. }
  1507. </style>