|
|
@ -11,7 +11,7 @@
|
|
|
|
<a-button
|
|
|
|
<a-button
|
|
|
|
v-for="(item, index) in colData"
|
|
|
|
v-for="(item, index) in colData"
|
|
|
|
:key="`${item.value}--${index}`"
|
|
|
|
:key="`${item.value}--${index}`"
|
|
|
|
:type="btnType(item.data)"
|
|
|
|
:type="btnType(item.data || item.dataIndex)"
|
|
|
|
:draggable="true"
|
|
|
|
:draggable="true"
|
|
|
|
v-show="item.show !== false"
|
|
|
|
v-show="item.show !== false"
|
|
|
|
@click="chooseCol(item)"
|
|
|
|
@click="chooseCol(item)"
|
|
|
@ -21,11 +21,11 @@
|
|
|
|
@dragend="handleDragEnd($event, item)"
|
|
|
|
@dragend="handleDragEnd($event, item)"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<a-checkbox v-model:checked="item.visible" class="mr10" @click="$event.stopPropagation()" />
|
|
|
|
<a-checkbox v-model:checked="item.visible" class="mr10" @click="$event.stopPropagation()" />
|
|
|
|
{{ item.title }}
|
|
|
|
{{ item.title || item.customTitle }}
|
|
|
|
</a-button>
|
|
|
|
</a-button>
|
|
|
|
</transition-group>
|
|
|
|
</transition-group>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<a-form ref="form" :model="formData" :rules="rules" layout="vertical">
|
|
|
|
<a-form v-if="tbType == 'excel'" ref="form" :model="formData" :rules="rules" layout="vertical">
|
|
|
|
<a-row :gutter="15">
|
|
|
|
<a-row :gutter="15">
|
|
|
|
<a-col :span="6">
|
|
|
|
<a-col :span="6">
|
|
|
|
<a-form-item label="列头标题(中文)" name="title">
|
|
|
|
<a-form-item label="列头标题(中文)" name="title">
|
|
|
@ -47,6 +47,28 @@
|
|
|
|
</a-col>
|
|
|
|
</a-col>
|
|
|
|
</a-row>
|
|
|
|
</a-row>
|
|
|
|
</a-form>
|
|
|
|
</a-form>
|
|
|
|
|
|
|
|
<a-form v-else ref="form" :model="formData" :rules="rules" layout="vertical">
|
|
|
|
|
|
|
|
<a-row :gutter="15">
|
|
|
|
|
|
|
|
<a-col :span="6">
|
|
|
|
|
|
|
|
<a-form-item label="列头标题(中文)" name="title">
|
|
|
|
|
|
|
|
<a-input v-model:value="formData.customTitle" :disabled="formDisable" />
|
|
|
|
|
|
|
|
</a-form-item>
|
|
|
|
|
|
|
|
</a-col>
|
|
|
|
|
|
|
|
<a-col :span="6">
|
|
|
|
|
|
|
|
<a-form-item label="列头标题(英文)" name="enTitle">
|
|
|
|
|
|
|
|
<a-input v-model:value="formData.enTitle" :disabled="formDisable" />
|
|
|
|
|
|
|
|
</a-form-item>
|
|
|
|
|
|
|
|
</a-col>
|
|
|
|
|
|
|
|
<a-col :span="6">
|
|
|
|
|
|
|
|
<a-form-item label="列宽">
|
|
|
|
|
|
|
|
<a-input
|
|
|
|
|
|
|
|
v-model:value="formData.width"
|
|
|
|
|
|
|
|
:disabled="formDisable"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</a-form-item>
|
|
|
|
|
|
|
|
</a-col>
|
|
|
|
|
|
|
|
</a-row>
|
|
|
|
|
|
|
|
</a-form>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
@ -84,11 +106,11 @@
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// 列按钮点击事件
|
|
|
|
// 列按钮点击事件
|
|
|
|
const chooseCol = (item) => {
|
|
|
|
const chooseCol = (item) => {
|
|
|
|
if (colName.value && colName.value === item.data) {
|
|
|
|
if (colName.value && colName.value === (item.data || item.dataIndex)) {
|
|
|
|
colName.value = null
|
|
|
|
colName.value = null
|
|
|
|
formData.value = {}
|
|
|
|
formData.value = {}
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
colName.value = item.data
|
|
|
|
colName.value = item.data || item.dataIndex
|
|
|
|
formData.value = item
|
|
|
|
formData.value = item
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
@ -111,7 +133,7 @@
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// 拖动结束处理数据
|
|
|
|
// 拖动结束处理数据
|
|
|
|
const handleDragEnd = () => {
|
|
|
|
const handleDragEnd = () => {
|
|
|
|
if (ending.data === dragging.data) {
|
|
|
|
if ((ending.data === dragging.data) || (ending.dataIndex === dragging.dataIndex)) {
|
|
|
|
return
|
|
|
|
return
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// 新的数组
|
|
|
|
// 新的数组
|
|
|
@ -122,12 +144,14 @@
|
|
|
|
const dst = newItems.indexOf(ending)
|
|
|
|
const dst = newItems.indexOf(ending)
|
|
|
|
newItems.splice(src, 1, ...newItems.splice(dst, 1, newItems[src]))
|
|
|
|
newItems.splice(src, 1, ...newItems.splice(dst, 1, newItems[src]))
|
|
|
|
colData.value = newItems
|
|
|
|
colData.value = newItems
|
|
|
|
console.log(colData.value)
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
const getColList = () => {
|
|
|
|
const getColList = () => {
|
|
|
|
return colData.value
|
|
|
|
return colData.value
|
|
|
|
}
|
|
|
|
}
|
|
|
|
const init = (list) => {
|
|
|
|
// 当前表格类型
|
|
|
|
|
|
|
|
const tbType = ref('excel')
|
|
|
|
|
|
|
|
const init = (list, type) => {
|
|
|
|
|
|
|
|
if (type) tbType.value = type
|
|
|
|
colData.value = list
|
|
|
|
colData.value = list
|
|
|
|
}
|
|
|
|
}
|
|
|
|
defineExpose({
|
|
|
|
defineExpose({
|
|
|
|