| | |
| | | :row-config="{ keyField: 'id' }" |
| | | :column-config="{ resizable: true }" |
| | | :export-config="{}" |
| | | :tree-config="{ transform: true,rowField: 'rowId', parentField: 'parentRowId' }" |
| | | :tree-config="{ transform: true, rowField: 'rowId', parentField: 'parentRowId' }" |
| | | :edit-config="{ trigger: 'manual', mode: 'row' }" |
| | | height="600" |
| | | > |
| | |
| | | <vxe-column field="folderName" title="文件夹名称" minWidth="250" tree-node :edit-render="{}"> |
| | | <template #edit="{ row }"> |
| | | <vxe-input |
| | | :ref="el => inputRefs[row.id] = el" |
| | | :ref="(el) => (inputRefs[row.id] = el)" |
| | | v-model="row.folderName" |
| | | type="text" |
| | | style="width: 300px" |
| | |
| | | const currRow: Record<string, any> = demo.tableData.splice(oldIndex, 1)[0]; |
| | | // demo.tableData.splice(newIndex, 0, currRow); |
| | | updateFolderApi({ |
| | | textId: currRow.textId, |
| | | textName: currRow.textName, |
| | | content: currRow.content, |
| | | folderId: currRow.folderId, |
| | | folderName: currRow.folderName, |
| | | treeControl: currRow.treeControl, |
| | | parentRowId: currRow.parentRowId, |
| | | sortId: newIndex, |
| | | }) |
| | | .then(() => { |
| | |
| | | function fnGetList() { |
| | | getFolderApi({}).then((res) => { |
| | | console.log(res); |
| | | demo.tableData = res.data; |
| | | demo.tableData = convertToTableData(res.data); |
| | | console.log(demo.tableData, '3333333333333'); |
| | | }); |
| | | } |
| | | function convertToTableData(data, parentId = null) { |
| | | let tableData = []; |
| | | |
| | | data.forEach((item) => { |
| | | let tableItem = { |
| | | folderId: item.folderId, |
| | | parentRowId: parentId, |
| | | rowId: item.rowId, |
| | | folderName: item.folderName, |
| | | treeControl: item.treeControl, |
| | | }; |
| | | |
| | | if (item.list && item.list.length > 0) { |
| | | let children = convertToTableData(item.list, item.rowId); |
| | | tableData = tableData.concat(children); |
| | | } |
| | | |
| | | tableData.push(tableItem); |
| | | }); |
| | | return tableData; |
| | | } |
| | | |
| | | const inputRefs = ref<{ [key: number]: HTMLElement | null }>({}); |
| | |
| | | const { createMessage } = useMessage(); |
| | | function fnInputHandle(row) { |
| | | console.log(row, '----333'); |
| | | const data = { |
| | | folderName: row.folderName, |
| | | parentRowId: row.rowId, |
| | | }; |
| | | addFolderApi(data).then((res) => { |
| | | if (row.folderName == '') { |
| | | editRowEvent(row) |
| | | return createMessage.error('请输入文件夹名称'); |
| | | } |
| | | const data = |
| | | row.opType == 'edit' |
| | | ? { |
| | | folderId: row.folderId, |
| | | folderName: row.folderName, |
| | | treeControl: row.treeControl, |
| | | parentRowId: row.parentRowId, |
| | | sortId: row.sortId, |
| | | } |
| | | : { |
| | | folderName: row.folderName, |
| | | parentRowId: row.parentRowId, |
| | | }; |
| | | const api = row.opType == 'edit' ? updateFolderApi : addFolderApi; |
| | | const title = row.opType == 'edit' ? '编辑' : '添加'; |
| | | api(data).then((res) => { |
| | | if (res.code == 0) { |
| | | createMessage.success('添加成功'); |
| | | createMessage.success(`${title}成功`); |
| | | fnGetList(); |
| | | } else { |
| | | createMessage.error(res.msg); |
| | |
| | | id: rid, |
| | | parentRowId: row.rowId, // 需要指定父节点,自动插入该节点中 |
| | | }; |
| | | console.log(record, '99999993'); |
| | | const { row: newRow } = await $table.insert(record); |
| | | console.log(row,'99999993'); |
| | | |
| | | |
| | | await $table.setTreeExpand(row, true); // 将父节点展开 |
| | | await $table.setEditRow(newRow); // 插入子节点 |
| | | } |
| | |
| | | |
| | | function editRowEvent(row) { |
| | | const $table = xTable.value; |
| | | console.log(row,'---30494'); |
| | | |
| | | console.log(row, '---30494'); |
| | | row.opType = 'edit'; |
| | | $table.setEditRow(row); |
| | | } |
| | | onMounted(() => { |