lijingjia 2 weeks ago
parent 4733e79019
commit a144aeb4e5

@ -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({

@ -69,7 +69,7 @@
type: [String, Number], type: [String, Number],
default: null default: null
}, },
// (vxehandsontable) // (vxehandsontable): handsontable
type: { type: {
type: String, type: String,
defalult: 'excel' defalult: 'excel'
@ -83,30 +83,34 @@
const init = () => { const init = () => {
visible.value = true visible.value = true
nextTick(() => { nextTick(() => {
console.log(colData.value) TableColDragRef.value.init(colData.value, props.type)
TableColDragRef.value.init(colData.value)
}) })
} }
onMounted(() => { onMounted(() => {
console.log(props.columns)
if (props.type == 'excel') { if (props.type == 'excel') {
colData.value = props.columns.data colData.value = props.columns.data
} else { } else {
colData.value = props.columns colData.value = JSON.parse(JSON.stringify(props.columns))
} }
}) })
const handleOk = (b) => { const handleOk = (b) => {
const content = JSON.stringify(TableColDragRef.value.getColList()) if (props.type == 'excel') {
EditCustomColumnSet({ // handsontable
customTableCode: props.code, const content = JSON.stringify(TableColDragRef.value.getColList())
templateName: props.code, EditCustomColumnSet({
content, customTableCode: props.code,
id: props.columns?.id || 0 templateName: props.code,
}).then(res => { content,
createMessage.success(res.message) id: props.columns?.id || 0
emits('updateCol', TableColDragRef.value.getColList()) }).then(res => {
if (!b) visible.value = false createMessage.success(res.message)
}) emits('updateCol', TableColDragRef.value.getColList())
if (!b) visible.value = false
})
} else {
// vxe
}
} }
watch( watch(
() => props.columns, () => props.columns,

@ -18,7 +18,7 @@
<HColSet <HColSet
:code="getBindValues.id" :code="getBindValues.id"
:columns="columns" :columns="columns"
type="normal" type="vxe"
/> />
</div> </div>
</div> </div>

@ -145,6 +145,7 @@ export function useColumns(
const getViewColumns = computed(() => { const getViewColumns = computed(() => {
const viewColumns = sortFixedColumn(unref(getColumnsRef)) const viewColumns = sortFixedColumn(unref(getColumnsRef))
console.log(getColumnsRef)
const mapFn = (column) => { const mapFn = (column) => {
const { slots, customRender, format, edit, editRow, flag } = column const { slots, customRender, format, edit, editRow, flag } = column
@ -165,7 +166,6 @@ export function useColumns(
if ((edit || editRow) && !isDefaultAction) { if ((edit || editRow) && !isDefaultAction) {
column.customRender = renderEditCell(column) column.customRender = renderEditCell(column)
} }
console.log(reactive(column))
return reactive(column) return reactive(column)
} }

@ -423,6 +423,7 @@ const calcColumns = [
width: 120, width: 120,
} }
] ]
console.log(columns)
// //
const fieldFlag = ref(true) const fieldFlag = ref(true)
// //
@ -501,7 +502,7 @@ const [registerTable, { reload, getVxeSelectRows, setLoading, setColumns }] = us
useSearchForm: true, useSearchForm: true,
showTableSetting: true, showTableSetting: true,
bordered: true, bordered: true,
showIndexColumn: true, showIndexColumn: false,
indexColumnProps: { indexColumnProps: {
width: 60, width: 60,
}, },

Loading…
Cancel
Save