|
@@ -1,5 +1,5 @@
|
|
|
<!-- JEditableTable -->
|
|
|
-<!-- @version 1.4.2 -->
|
|
|
+<!-- @version 1.4.4 -->
|
|
|
<!-- @author sjlei -->
|
|
|
<template>
|
|
|
<a-spin :spinning="loading">
|
|
@@ -26,6 +26,9 @@
|
|
|
<div class="thead" ref="thead">
|
|
|
<div class="tr" :style="{width: this.realTrWidth}">
|
|
|
<!-- 左侧固定td -->
|
|
|
+ <div v-if="dragSort" class="td td-ds" :style="style.tdLeftDs">
|
|
|
+ <span></span>
|
|
|
+ </div>
|
|
|
<div v-if="rowSelection" class="td td-cb" :style="style.tdLeft">
|
|
|
<!--:indeterminate="true"-->
|
|
|
<a-checkbox
|
|
@@ -62,85 +65,95 @@
|
|
|
<div v-if="rows.length===0" class="tr-nodata">
|
|
|
<span>暂无数据</span>
|
|
|
</div>
|
|
|
- <!-- 动态生成tr -->
|
|
|
- <template v-for="(row,rowIndex) in rows">
|
|
|
- <!-- tr 只加载可见的和预加载的总共十条数据 -->
|
|
|
- <div
|
|
|
- v-if="
|
|
|
+ <draggable v-model="rows" handle=".td-ds-icons" @end="handleDragMoveEnd">
|
|
|
+
|
|
|
+ <!-- 动态生成tr -->
|
|
|
+ <template v-for="(row,rowIndex) in rows">
|
|
|
+ <!-- tr 只加载可见的和预加载的总共十条数据 -->
|
|
|
+ <div
|
|
|
+ v-if="
|
|
|
rowIndex >= parseInt(`${(scrollTop-rowHeight) / rowHeight}`) &&
|
|
|
(parseInt(`${scrollTop / rowHeight}`) + 9) > rowIndex
|
|
|
"
|
|
|
- :id="`${caseId}tbody-tr-${rowIndex}`"
|
|
|
- :data-idx="rowIndex"
|
|
|
- class="tr"
|
|
|
- :class="selectedRowIds.indexOf(row.id) !== -1 ? 'tr-checked' : ''"
|
|
|
- :style="buildTrStyle(rowIndex)"
|
|
|
- :key="row.id">
|
|
|
- <!-- 左侧固定td -->
|
|
|
- <div v-if="rowSelection" class="td td-cb" :style="style.tdLeft">
|
|
|
- <!-- 此 v-for 只是为了拼接 id 字符串 -->
|
|
|
- <template v-for="(id,i) in [`${row.id}`]">
|
|
|
- <a-checkbox
|
|
|
- :id="id"
|
|
|
- :key="i"
|
|
|
- :checked="selectedRowIds.indexOf(id) !== -1"
|
|
|
- @change="handleChangeLeftCheckbox"/>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- <div v-if="rowNumber" class="td td-num" :style="style.tdLeft">
|
|
|
- <span>{{ rowIndex+1 }}</span>
|
|
|
- </div>
|
|
|
- <!-- 右侧动态生成td -->
|
|
|
- <div
|
|
|
- class="td"
|
|
|
- v-for="col in columns"
|
|
|
- v-show="col.type !== formTypes.hidden"
|
|
|
- :key="col.key"
|
|
|
- :style="buildTdStyle(col)">
|
|
|
-
|
|
|
- <!-- 此 v-for 只是为了拼接 id 字符串 -->
|
|
|
- <template v-for="(id,i) in [`${col.key}${row.id}`]">
|
|
|
-
|
|
|
- <!-- native input -->
|
|
|
- <label :key="i" v-if="col.type === formTypes.input || col.type === formTypes.inputNumber">
|
|
|
- <a-tooltip
|
|
|
- :id="id"
|
|
|
- placement="top"
|
|
|
- :title="(tooltips[id] || {}).title"
|
|
|
- :visible="(tooltips[id] || {}).visible || false"
|
|
|
- :autoAdjustOverflow="true">
|
|
|
-
|
|
|
- <input
|
|
|
- :id="id"
|
|
|
- v-bind="buildProps(row,col)"
|
|
|
- :data-input-number="col.type === formTypes.inputNumber"
|
|
|
- :placeholder="replaceProps(col, col.placeholder)"
|
|
|
- @input="(e)=>{handleInputCommono(e.target,rowIndex,row,col)}"
|
|
|
- @mouseover="()=>{handleMouseoverCommono(row,col)}"
|
|
|
- @mouseout="()=>{handleMouseoutCommono(row,col)}"/>
|
|
|
-
|
|
|
- </a-tooltip>
|
|
|
+ :id="`${caseId}tbody-tr-${rowIndex}`"
|
|
|
+ :data-idx="rowIndex"
|
|
|
+ class="tr"
|
|
|
+ :class="selectedRowIds.indexOf(row.id) !== -1 ? 'tr-checked' : ''"
|
|
|
+ :style="buildTrStyle(rowIndex)"
|
|
|
+ :key="row.id">
|
|
|
+ <!-- 左侧固定td -->
|
|
|
+
|
|
|
+ <div v-if="dragSort" class="td td-ds" :style="style.tdLeftDs">
|
|
|
+ <div class="td-ds-icons">
|
|
|
+ <a-icon type="align-left"/>
|
|
|
+ <a-icon type="align-right"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- </label>
|
|
|
- <!-- checkbox -->
|
|
|
- <template v-else-if="col.type === formTypes.checkbox">
|
|
|
+ <div v-if="rowSelection" class="td td-cb" :style="style.tdLeft">
|
|
|
+ <!-- 此 v-for 只是为了拼接 id 字符串 -->
|
|
|
+ <template v-for="(id,i) in [`${row.id}`]">
|
|
|
<a-checkbox
|
|
|
- :key="i"
|
|
|
:id="id"
|
|
|
- v-bind="buildProps(row,col)"
|
|
|
- :checked="checkboxValues[id]"
|
|
|
- @change="(e)=>handleChangeCheckboxCommon(e,row,col)"
|
|
|
- />
|
|
|
- </template>
|
|
|
- <!-- select -->
|
|
|
- <template v-else-if="col.type === formTypes.select">
|
|
|
- <a-tooltip
|
|
|
:key="i"
|
|
|
- :id="id"
|
|
|
- placement="top"
|
|
|
- :title="(tooltips[id] || {}).title"
|
|
|
- :visible="(tooltips[id] || {}).visible || false"
|
|
|
- :autoAdjustOverflow="true">
|
|
|
+ :checked="selectedRowIds.indexOf(id) !== -1"
|
|
|
+ @change="handleChangeLeftCheckbox"/>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <div v-if="rowNumber" class="td td-num" :style="style.tdLeft">
|
|
|
+ <span>{{ rowIndex+1 }}</span>
|
|
|
+ </div>
|
|
|
+ <!-- 右侧动态生成td -->
|
|
|
+ <div
|
|
|
+ class="td"
|
|
|
+ v-for="col in columns"
|
|
|
+ v-show="col.type !== formTypes.hidden"
|
|
|
+ :key="col.key"
|
|
|
+ :style="buildTdStyle(col)">
|
|
|
+
|
|
|
+ <!-- 此 v-for 只是为了拼接 id 字符串 -->
|
|
|
+ <template v-for="(id,i) in [`${col.key}${row.id}`]">
|
|
|
+
|
|
|
+ <!-- native input -->
|
|
|
+ <label :key="i" v-if="col.type === formTypes.input || col.type === formTypes.inputNumber">
|
|
|
+ <a-tooltip
|
|
|
+ :id="id"
|
|
|
+ placement="top"
|
|
|
+ :title="(tooltips[id] || {}).title"
|
|
|
+ :visible="(tooltips[id] || {}).visible || false"
|
|
|
+ :autoAdjustOverflow="true">
|
|
|
+
|
|
|
+ <input
|
|
|
+ :id="id"
|
|
|
+ v-bind="buildProps(row,col)"
|
|
|
+ :data-input-number="col.type === formTypes.inputNumber"
|
|
|
+ :placeholder="replaceProps(col, col.placeholder)"
|
|
|
+ @input="(e)=>{handleInputCommono(e.target,rowIndex,row,col)}"
|
|
|
+ @mouseover="()=>{handleMouseoverCommono(row,col)}"
|
|
|
+ @mouseout="()=>{handleMouseoutCommono(row,col)}"/>
|
|
|
+
|
|
|
+ </a-tooltip>
|
|
|
+
|
|
|
+ </label>
|
|
|
+ <!-- checkbox -->
|
|
|
+ <template v-else-if="col.type === formTypes.checkbox">
|
|
|
+ <a-checkbox
|
|
|
+ :key="i"
|
|
|
+ :id="id"
|
|
|
+ v-bind="buildProps(row,col)"
|
|
|
+ :checked="checkboxValues[id]"
|
|
|
+ @change="(e)=>handleChangeCheckboxCommon(e,row,col)"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <!-- select -->
|
|
|
+ <template v-else-if="col.type === formTypes.select">
|
|
|
+ <a-tooltip
|
|
|
+ :key="i"
|
|
|
+ :id="id"
|
|
|
+ placement="top"
|
|
|
+ :title="(tooltips[id] || {}).title"
|
|
|
+ :visible="(tooltips[id] || {}).visible || false"
|
|
|
+ :autoAdjustOverflow="true">
|
|
|
|
|
|
<span
|
|
|
@mouseover="()=>{handleMouseoverCommono(row,col)}"
|
|
@@ -165,17 +178,17 @@
|
|
|
<!--</template>-->
|
|
|
</a-select>
|
|
|
</span>
|
|
|
- </a-tooltip>
|
|
|
- </template>
|
|
|
- <!-- date -->
|
|
|
- <template v-else-if="col.type === formTypes.date || col.type === formTypes.datetime">
|
|
|
- <a-tooltip
|
|
|
- :key="i"
|
|
|
- :id="id"
|
|
|
- placement="top"
|
|
|
- :title="(tooltips[id] || {}).title"
|
|
|
- :visible="(tooltips[id] || {}).visible || false"
|
|
|
- :autoAdjustOverflow="true">
|
|
|
+ </a-tooltip>
|
|
|
+ </template>
|
|
|
+ <!-- date -->
|
|
|
+ <template v-else-if="col.type === formTypes.date || col.type === formTypes.datetime">
|
|
|
+ <a-tooltip
|
|
|
+ :key="i"
|
|
|
+ :id="id"
|
|
|
+ placement="top"
|
|
|
+ :title="(tooltips[id] || {}).title"
|
|
|
+ :visible="(tooltips[id] || {}).visible || false"
|
|
|
+ :autoAdjustOverflow="true">
|
|
|
|
|
|
<span
|
|
|
@mouseover="()=>{handleMouseoverCommono(row,col)}"
|
|
@@ -195,80 +208,81 @@
|
|
|
@change="(v)=>handleChangeJDateCommon(v,id,row,col,col.type === formTypes.datetime)"/>
|
|
|
|
|
|
</span>
|
|
|
- </a-tooltip>
|
|
|
- </template>
|
|
|
-
|
|
|
- <div v-else-if="col.type === formTypes.upload" :key="i">
|
|
|
- <template v-if="uploadValues[id] != null" v-for="(file,fileKey) of [(uploadValues[id]||{})]">
|
|
|
- <a-input
|
|
|
- :key="fileKey"
|
|
|
- :readOnly="true"
|
|
|
- :value="file.name"
|
|
|
- >
|
|
|
-
|
|
|
- <template slot="addonBefore" style="width: 30px">
|
|
|
- <a-tooltip v-if="file.status==='uploading'" :title="`上传中(${Math.floor(file.percent)}%)`">
|
|
|
- <a-icon type="loading"/>
|
|
|
- </a-tooltip>
|
|
|
- <a-tooltip v-else-if="file.status==='done'" title="上传完成">
|
|
|
- <a-icon type="check-circle" style="color:#00DB00;"/>
|
|
|
- </a-tooltip>
|
|
|
- <a-tooltip v-else title="上传失败">
|
|
|
- <a-icon type="exclamation-circle" style="color:red;"/>
|
|
|
- </a-tooltip>
|
|
|
- </template>
|
|
|
-
|
|
|
- <template slot="addonAfter" style="width: 30px">
|
|
|
- <a-tooltip title="删除并重新上传">
|
|
|
- <a-icon
|
|
|
- v-if="file.status!=='uploading'"
|
|
|
- type="close-circle"
|
|
|
- style="cursor: pointer;"
|
|
|
- @click="()=>handleClickDelFile(id)"/>
|
|
|
- </a-tooltip>
|
|
|
- </template>
|
|
|
-
|
|
|
- </a-input>
|
|
|
+ </a-tooltip>
|
|
|
</template>
|
|
|
|
|
|
- <div :hidden="uploadValues[id] != null">
|
|
|
+ <div v-else-if="col.type === formTypes.upload" :key="i">
|
|
|
+ <template v-if="uploadValues[id] != null" v-for="(file,fileKey) of [(uploadValues[id]||{})]">
|
|
|
+ <a-input
|
|
|
+ :key="fileKey"
|
|
|
+ :readOnly="true"
|
|
|
+ :value="file.name"
|
|
|
+ >
|
|
|
|
|
|
- <a-upload
|
|
|
- name="file"
|
|
|
- :data="{'isup':1}"
|
|
|
- :multiple="false"
|
|
|
- :action="col.action"
|
|
|
- :headers="uploadGetHeaders(row,col)"
|
|
|
- :showUploadList="false"
|
|
|
- v-bind="buildProps(row,col)"
|
|
|
- @change="(v)=>handleChangeUpload(v,id,row,col)"
|
|
|
- >
|
|
|
- <a-button icon="upload">{{ col.placeholder }}</a-button>
|
|
|
- </a-upload>
|
|
|
- </div>
|
|
|
+ <template slot="addonBefore" style="width: 30px">
|
|
|
+ <a-tooltip v-if="file.status==='uploading'" :title="`上传中(${Math.floor(file.percent)}%)`">
|
|
|
+ <a-icon type="loading"/>
|
|
|
+ </a-tooltip>
|
|
|
+ <a-tooltip v-else-if="file.status==='done'" title="上传完成">
|
|
|
+ <a-icon type="check-circle" style="color:#00DB00;"/>
|
|
|
+ </a-tooltip>
|
|
|
+ <a-tooltip v-else title="上传失败">
|
|
|
+ <a-icon type="exclamation-circle" style="color:red;"/>
|
|
|
+ </a-tooltip>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template slot="addonAfter" style="width: 30px">
|
|
|
+ <a-tooltip title="删除并重新上传">
|
|
|
+ <a-icon
|
|
|
+ v-if="file.status!=='uploading'"
|
|
|
+ type="close-circle"
|
|
|
+ style="cursor: pointer;"
|
|
|
+ @click="()=>handleClickDelFile(id)"/>
|
|
|
+ </a-tooltip>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </a-input>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <div :hidden="uploadValues[id] != null">
|
|
|
+
|
|
|
+ <a-upload
|
|
|
+ name="file"
|
|
|
+ :data="{'isup':1}"
|
|
|
+ :multiple="false"
|
|
|
+ :action="col.action"
|
|
|
+ :headers="uploadGetHeaders(row,col)"
|
|
|
+ :showUploadList="false"
|
|
|
+ v-bind="buildProps(row,col)"
|
|
|
+ @change="(v)=>handleChangeUpload(v,id,row,col)"
|
|
|
+ >
|
|
|
+ <a-button icon="upload">{{ col.placeholder }}</a-button>
|
|
|
+ </a-upload>
|
|
|
+ </div>
|
|
|
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <div v-else-if="col.type === formTypes.slot" :key="i">
|
|
|
- <slot
|
|
|
- :name="(col.slot || col.slotName) || col.key"
|
|
|
- :text="inputValues[rowIndex][col.key]"
|
|
|
- :column="col"
|
|
|
- :rowId="removeCaseId(row.id)"
|
|
|
- :getValue="()=>_getValueForSlot(row.id)"
|
|
|
- :target="getVM()"
|
|
|
- />
|
|
|
- </div>
|
|
|
+ <div v-else-if="col.type === formTypes.slot" :key="i">
|
|
|
+ <slot
|
|
|
+ :name="(col.slot || col.slotName) || col.key"
|
|
|
+ :index="rowIndex"
|
|
|
+ :text="inputValues[rowIndex][col.key]"
|
|
|
+ :column="col"
|
|
|
+ :rowId="removeCaseId(row.id)"
|
|
|
+ :getValue="()=>_getValueForSlot(row.id)"
|
|
|
+ :target="getVM()"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- else (normal) -->
|
|
|
- <span v-else :key="i">{{ inputValues[rowIndex][col.key] }}</span>
|
|
|
- </template>
|
|
|
+ <!-- else (normal) -->
|
|
|
+ <span v-else :key="i">{{ inputValues[rowIndex][col.key] }}</span>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <!-- -- tr end -- -->
|
|
|
-
|
|
|
- </template>
|
|
|
+ <!-- -- tr end -- -->
|
|
|
|
|
|
+ </template>
|
|
|
+ </draggable>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
@@ -278,6 +292,7 @@
|
|
|
|
|
|
<script>
|
|
|
import Vue from 'vue'
|
|
|
+ import Draggable from 'vuedraggable'
|
|
|
import { ACCESS_TOKEN } from '@/store/mutation-types'
|
|
|
import { FormTypes, VALIDATE_NO_PASSED } from '@/utils/JEditableTableUtil'
|
|
|
import { cloneObject, randomString } from '@/utils/util'
|
|
@@ -289,7 +304,7 @@
|
|
|
|
|
|
export default {
|
|
|
name: 'JEditableTable',
|
|
|
- components: { JDate },
|
|
|
+ components: { JDate, Draggable },
|
|
|
props: {
|
|
|
// 列信息
|
|
|
columns: {
|
|
@@ -338,7 +353,16 @@
|
|
|
disabled: {
|
|
|
type: Boolean,
|
|
|
default: false
|
|
|
- }
|
|
|
+ },
|
|
|
+ // 是否可拖拽排序
|
|
|
+ dragSort: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ dragSortKey: {
|
|
|
+ type: String,
|
|
|
+ default: 'orderNum'
|
|
|
+ },
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
@@ -354,7 +378,8 @@
|
|
|
// 'max-height': '400px'
|
|
|
tbody: { left: '0px' },
|
|
|
// 左侧固定td的style
|
|
|
- tdLeft: { 'min-width': '4%', 'max-width': '45px' }
|
|
|
+ tdLeft: { 'min-width': '4%', 'max-width': '45px' },
|
|
|
+ tdLeftDs: { 'min-width': '30px', 'max-width': '35px' },
|
|
|
},
|
|
|
// 表单的类型
|
|
|
formTypes: FormTypes,
|
|
@@ -455,89 +480,92 @@
|
|
|
},
|
|
|
// 侦听器
|
|
|
watch: {
|
|
|
- dataSource: function (newValue) {
|
|
|
- this.initialize()
|
|
|
-
|
|
|
- let rows = []
|
|
|
- let checkboxValues = {}
|
|
|
- let selectValues = {}
|
|
|
- let jdateValues = {}
|
|
|
- // 禁用行的id
|
|
|
- let disabledRowIds = (this.disabledRowIds || [])
|
|
|
- newValue.forEach((data, newValueIndex) => {
|
|
|
- // 判断源数据是否带有id
|
|
|
- if (data.id == null || data.id === '') {
|
|
|
- data.id = this.removeCaseId(this.generateId() + newValueIndex)
|
|
|
- }
|
|
|
+ dataSource: {
|
|
|
+ immediate: true,
|
|
|
+ handler: function (newValue) {
|
|
|
+ this.initialize()
|
|
|
+
|
|
|
+ let rows = []
|
|
|
+ let checkboxValues = {}
|
|
|
+ let selectValues = {}
|
|
|
+ let jdateValues = {}
|
|
|
+ // 禁用行的id
|
|
|
+ let disabledRowIds = (this.disabledRowIds || [])
|
|
|
+ newValue.forEach((data, newValueIndex) => {
|
|
|
+ // 判断源数据是否带有id
|
|
|
+ if (data.id == null || data.id === '') {
|
|
|
+ data.id = this.removeCaseId(this.generateId() + newValueIndex)
|
|
|
+ }
|
|
|
|
|
|
- let value = { id: this.caseId + data.id }
|
|
|
- let row = { id: value.id }
|
|
|
- let disabled = false
|
|
|
- this.columns.forEach(column => {
|
|
|
- let inputId = column.key + value.id
|
|
|
- let sourceValue = (data[column.key] == null ? '' : data[column.key]).toString()
|
|
|
- if (column.type === FormTypes.checkbox) {
|
|
|
+ let value = { id: this.caseId + data.id }
|
|
|
+ let row = { id: value.id }
|
|
|
+ let disabled = false
|
|
|
+ this.columns.forEach(column => {
|
|
|
+ let inputId = column.key + value.id
|
|
|
+ let sourceValue = (data[column.key] == null ? '' : data[column.key]).toString()
|
|
|
+ if (column.type === FormTypes.checkbox) {
|
|
|
+
|
|
|
+ // 判断是否设定了customValue(自定义值)
|
|
|
+ if (column.customValue instanceof Array) {
|
|
|
+ let customValue = (column.customValue[0] || '').toString()
|
|
|
+ checkboxValues[inputId] = (sourceValue === customValue)
|
|
|
+ } else {
|
|
|
+ checkboxValues[inputId] = sourceValue
|
|
|
+ }
|
|
|
|
|
|
- // 判断是否设定了customValue(自定义值)
|
|
|
- if (column.customValue instanceof Array) {
|
|
|
- let customValue = (column.customValue[0] || '').toString()
|
|
|
- checkboxValues[inputId] = (sourceValue === customValue)
|
|
|
- } else {
|
|
|
- checkboxValues[inputId] = sourceValue
|
|
|
- }
|
|
|
+ } else if (column.type === FormTypes.select) {
|
|
|
+ if (sourceValue) {
|
|
|
+ // 判断是否是多选
|
|
|
+ selectValues[inputId] = (column.props || {})['mode'] === 'multiple' ? sourceValue.split(',') : sourceValue
|
|
|
+ } else {
|
|
|
+ selectValues[inputId] = undefined
|
|
|
+ }
|
|
|
|
|
|
- } else if (column.type === FormTypes.select) {
|
|
|
- if (sourceValue) {
|
|
|
- // 判断是否是多选
|
|
|
- selectValues[inputId] = (column.props || {})['mode'] === 'multiple' ? sourceValue.split(',') : sourceValue
|
|
|
- } else {
|
|
|
- selectValues[inputId] = undefined
|
|
|
- }
|
|
|
+ } else if (column.type === FormTypes.date || column.type === FormTypes.datetime) {
|
|
|
+ jdateValues[inputId] = sourceValue
|
|
|
|
|
|
- } else if (column.type === FormTypes.date || column.type === FormTypes.datetime) {
|
|
|
- jdateValues[inputId] = sourceValue
|
|
|
+ } else if (column.type === FormTypes.slot) {
|
|
|
+ if (sourceValue !== 0 && !sourceValue) {
|
|
|
+ value[column.key] = column.defaultValue
|
|
|
+ } else {
|
|
|
+ value[column.key] = sourceValue
|
|
|
+ }
|
|
|
|
|
|
- } else if (column.type === FormTypes.slot) {
|
|
|
- if (sourceValue !== 0 && !sourceValue) {
|
|
|
- value[column.key] = column.defaultValue
|
|
|
} else {
|
|
|
value[column.key] = sourceValue
|
|
|
}
|
|
|
|
|
|
- } else {
|
|
|
- value[column.key] = sourceValue
|
|
|
- }
|
|
|
-
|
|
|
- // 解析disabledRows
|
|
|
- for (let columnKey in this.disabledRows) {
|
|
|
- // 判断是否有该属性
|
|
|
- if (this.disabledRows.hasOwnProperty(columnKey) && data.hasOwnProperty(columnKey)) {
|
|
|
- // row[columnKey] =
|
|
|
+ // 解析disabledRows
|
|
|
+ for (let columnKey in this.disabledRows) {
|
|
|
+ // 判断是否有该属性
|
|
|
+ if (this.disabledRows.hasOwnProperty(columnKey) && data.hasOwnProperty(columnKey)) {
|
|
|
+ // row[columnKey] =
|
|
|
|
|
|
- if (disabled !== true) {
|
|
|
- disabled = this.disabledRows[columnKey] === data[columnKey]
|
|
|
- if (disabled) {
|
|
|
- disabledRowIds.push(row.id)
|
|
|
+ if (disabled !== true) {
|
|
|
+ disabled = this.disabledRows[columnKey] === data[columnKey]
|
|
|
+ if (disabled) {
|
|
|
+ disabledRowIds.push(row.id)
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
+ })
|
|
|
+ this.inputValues.push(value)
|
|
|
+ rows.push(row)
|
|
|
})
|
|
|
- this.inputValues.push(value)
|
|
|
- rows.push(row)
|
|
|
- })
|
|
|
- this.disabledRowIds = disabledRowIds
|
|
|
- this.checkboxValues = checkboxValues
|
|
|
- this.selectValues = selectValues
|
|
|
- this.jdateValues = jdateValues
|
|
|
- this.rows = rows
|
|
|
+ this.disabledRowIds = disabledRowIds
|
|
|
+ this.checkboxValues = checkboxValues
|
|
|
+ this.selectValues = selectValues
|
|
|
+ this.jdateValues = jdateValues
|
|
|
+ this.rows = rows
|
|
|
|
|
|
- // 更新form表单的值
|
|
|
- this.$nextTick(() => {
|
|
|
- this.updateFormValues()
|
|
|
- })
|
|
|
+ // 更新form表单的值
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.updateFormValues()
|
|
|
+ })
|
|
|
|
|
|
+ }
|
|
|
},
|
|
|
columns: {
|
|
|
immediate: true,
|
|
@@ -722,6 +750,12 @@
|
|
|
this.selectValues = selectValues
|
|
|
this.jdateValues = jdateValues
|
|
|
|
|
|
+ if (this.dragSort) {
|
|
|
+ this.inputValues.forEach((item, index) => {
|
|
|
+ item[this.dragSortKey] = (index + 1)
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
if (update) {
|
|
|
this.rows = rows
|
|
|
this.$nextTick(() => {
|
|
@@ -751,6 +785,7 @@
|
|
|
},
|
|
|
/** 添加一行 */
|
|
|
add(num = 1, forceScrollToBottom = false) {
|
|
|
+ if (num < 1) return
|
|
|
// let timestamp = new Date().getTime()
|
|
|
let rows = this.rows
|
|
|
let row
|
|
@@ -1230,6 +1265,31 @@
|
|
|
}
|
|
|
},
|
|
|
|
|
|
+ /** 拖动结束,交换inputValue中的值 */
|
|
|
+ handleDragMoveEnd(event) {
|
|
|
+ let { oldIndex, newIndex } = event
|
|
|
+
|
|
|
+ let values = this.inputValues
|
|
|
+ // 存储旧数据,并删除旧项目
|
|
|
+ let temp = values[oldIndex]
|
|
|
+ values.splice(oldIndex, 1)
|
|
|
+ // 向新项目里添加旧数据
|
|
|
+ values.splice(newIndex, 0, temp)
|
|
|
+
|
|
|
+ values.forEach((item, index) => {
|
|
|
+ item[this.dragSortKey] = (index + 1)
|
|
|
+ })
|
|
|
+
|
|
|
+ this.forceUpdateFormValues()
|
|
|
+
|
|
|
+ // 触发已拖动事件
|
|
|
+ this.$emit('dragged', {
|
|
|
+ oldIndex,
|
|
|
+ newIndex,
|
|
|
+ target: this
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
/* --- common function begin --- */
|
|
|
|
|
|
/** 鼠标移入 */
|
|
@@ -1355,7 +1415,12 @@
|
|
|
_loadDictConcatToOptions(column) {
|
|
|
initDictOptions(column.dictCode).then((res) => {
|
|
|
if (res.success) {
|
|
|
- column.options = (column.options || []).concat(res.result)
|
|
|
+ let newOptions = (column.options || [])// .concat(res.result)
|
|
|
+ res.result.forEach(item => {
|
|
|
+ for (let option of newOptions) if (option.value === item.value) return
|
|
|
+ newOptions.push(item)
|
|
|
+ })
|
|
|
+ column.options = newOptions
|
|
|
} else {
|
|
|
console.group(`JEditableTable 查询字典(${column.dictCode})发生异常`)
|
|
|
console.log(res.message)
|
|
@@ -1377,14 +1442,46 @@
|
|
|
|
|
|
/** 辅助方法:指定a-select 和 j-data 的父容器 */
|
|
|
getParentContainer(node) {
|
|
|
- if (this.$el && this.$el.nodeType !== 8) {
|
|
|
- return this.$el
|
|
|
- }
|
|
|
- let doc = document.getElementById(this.caseId + 'inputTable')
|
|
|
- if (doc != null) {
|
|
|
- return doc
|
|
|
+ let element = (() => {
|
|
|
+ // nodeType 8 : Comment : 注释
|
|
|
+ if (this.$el && this.$el.nodeType !== 8) {
|
|
|
+ return this.$el
|
|
|
+ }
|
|
|
+ let doc = document.getElementById(this.caseId + 'inputTable')
|
|
|
+ if (doc != null) {
|
|
|
+ return doc
|
|
|
+ }
|
|
|
+ return node.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode
|
|
|
+ })()
|
|
|
+
|
|
|
+ // 递归判断是否带有 overflow: hidden;的父元素
|
|
|
+ const ifParent = (child) => {
|
|
|
+ let currentOverflow = null
|
|
|
+ if (child['currentStyle']) {
|
|
|
+ currentOverflow = child['currentStyle']['overflow']
|
|
|
+ } else if (window.getComputedStyle) {
|
|
|
+ currentOverflow = window.getComputedStyle(child)['overflow']
|
|
|
+ }
|
|
|
+ if (currentOverflow != null) {
|
|
|
+ if (currentOverflow === 'hidden') {
|
|
|
+ // 找到了带有 hidden 的标签,判断它的父级是否还有 hidden,直到遇到完全没有 hidden 或 body 的时候才停止递归
|
|
|
+ let temp = ifParent(child.parentNode)
|
|
|
+ return temp != null ? temp : child.parentNode
|
|
|
+ } else
|
|
|
+ // 当前标签没有 hidden ,如果有父级并且父级不是 body 的话就继续递归判断父级
|
|
|
+ if (child.parentNode && child.parentNode.tagName.toLocaleLowerCase() !== 'body') {
|
|
|
+ return ifParent(child.parentNode)
|
|
|
+ } else {
|
|
|
+ // 直到 body 都没有遇到有 hidden 的标签
|
|
|
+ return null
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return child
|
|
|
+ }
|
|
|
}
|
|
|
- return node.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode
|
|
|
+
|
|
|
+ let temp = ifParent(element)
|
|
|
+ return (temp != null) ? temp : element
|
|
|
},
|
|
|
|
|
|
/** 辅助方法:替换${...}变量 */
|
|
@@ -1440,6 +1537,9 @@
|
|
|
props['showSearch'] = true
|
|
|
}
|
|
|
|
|
|
+ // 判断是否是禁用的列
|
|
|
+ props['disabled'] = !!col['disabled']
|
|
|
+
|
|
|
// 判断是否为禁用的行
|
|
|
if (props['disabled'] !== true) {
|
|
|
props['disabled'] = ((this.disabledRowIds || []).indexOf(row.id) !== -1)
|
|
@@ -1515,6 +1615,38 @@
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
+ &.td-ds {
|
|
|
+ margin-right: 0;
|
|
|
+ padding-left: 0;
|
|
|
+ padding-right: 0;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .td-ds-icons {
|
|
|
+ position: relative;
|
|
|
+ cursor: move;
|
|
|
+ width: 100%;
|
|
|
+ /*padding: 25% 0;*/
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .anticon-align-left,
|
|
|
+ .anticon-align-right {
|
|
|
+ position: absolute;
|
|
|
+ top: 30%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .anticon-align-left {
|
|
|
+ left: 25%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .anticon-align-right {
|
|
|
+ right: 25%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
|
|
|
}
|