hi-ucs/front/src/views/home/capabilityList.vue

180 lines
4.1 KiB
Vue

<template>
<a-button
class="editable-add-btn"
style="margin-bottom: 8px"
@click="handleAdd"
>
新增
</a-button>
<a-table bordered :data-source="dataSource" :columns="columns">
<template #bodyCell="{ column, text, record }">
<template v-if="column.dataIndex === 'name'">
<div class="editable-cell">
<div
v-if="editableData[record.key]"
class="editable-cell-input-wrapper"
>
<a-input
v-model:value="editableData[record.key].name"
@pressEnter="save(record.key)"
/>
<check-outlined
class="editable-cell-icon-check"
@click="save(record.key)"
/>
</div>
<div v-else class="editable-cell-text-wrapper">
{{ text || ' ' }}
<edit-outlined
class="editable-cell-icon"
@click="edit(record.key)"
/>
</div>
</div>
</template>
<template v-else-if="column.dataIndex === 'operation'">
<a-popconfirm>
<a style="margin-right: 10px">编辑</a>
</a-popconfirm>
<a-popconfirm
v-if="dataSource.length"
title="确定要删除吗?"
@confirm="onDelete(record.key)"
>
<a>删除</a>
</a-popconfirm>
</template>
</template>
</a-table>
</template>
<script>
import { computed, defineComponent, reactive, ref } from 'vue'
import { CheckOutlined, EditOutlined } from '@ant-design/icons-vue'
import { cloneDeep } from 'lodash-es'
export default defineComponent({
components: {
CheckOutlined,
EditOutlined,
},
setup() {
const columns = [
{
title: '标题',
dataIndex: 'name',
width: '30%',
},
{
title: '类型',
dataIndex: 'age',
},
{
title: '描述',
dataIndex: 'address',
},
{
title: '操作',
dataIndex: 'operation',
},
]
const dataSource = ref([
{
key: '0',
name: 'content 0',
age: 'type',
address: 'desc 0',
},
{
key: '1',
name: 'content 1',
age: 'type',
address: 'desc 1',
},
])
const count = computed(() => dataSource.value.length + 1)
const editableData = reactive({})
const edit = (key) => {
editableData[key] = cloneDeep(
dataSource.value.filter((item) => key === item.key)[0]
)
}
const save = (key) => {
Object.assign(
dataSource.value.filter((item) => key === item.key)[0],
editableData[key]
)
delete editableData[key]
}
const onDelete = (key) => {
dataSource.value = dataSource.value.filter((item) => item.key !== key)
}
const handleAdd = () => {
const newData = {
key: `${count.value}`,
name: `content ${count.value}`,
age: 32,
address: `desc ${count.value}`,
}
dataSource.value.push(newData)
}
return {
columns,
onDelete,
handleAdd,
dataSource,
editableData,
count,
edit,
save,
}
},
})
</script>
<style lang="less">
.editable-cell {
position: relative;
.editable-cell-input-wrapper,
.editable-cell-text-wrapper {
padding-right: 24px;
}
.editable-cell-text-wrapper {
padding: 5px 24px 5px 5px;
}
.editable-cell-icon,
.editable-cell-icon-check {
position: absolute;
right: 0;
width: 20px;
cursor: pointer;
}
.editable-cell-icon {
margin-top: 4px;
display: none;
}
.editable-cell-icon-check {
line-height: 28px;
}
.editable-cell-icon:hover,
.editable-cell-icon-check:hover {
color: #108ee9;
}
.editable-add-btn {
margin-bottom: 8px;
}
}
.editable-cell:hover .editable-cell-icon {
display: inline-block;
}
</style>