|
|
@@ -1,11 +1,173 @@
|
|
|
-<script setup lang="ts">
|
|
|
-
|
|
|
-</script>
|
|
|
-
|
|
|
<template>
|
|
|
+ <div>
|
|
|
+ <vxe-grid ref="xGrid" v-bind="gridOptions" v-on="gridEvents">
|
|
|
+ <template #operate="{ row }">
|
|
|
+ <template v-if="hasActiveEditRow(row)">
|
|
|
+ <vxe-button content="取消" @click="clearRowEvent"></vxe-button>
|
|
|
+ <vxe-button status="primary" content="保存" @click="saveRowEvent(row)"></vxe-button>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <vxe-button content="编辑" @click="editRowEvent(row)"></vxe-button>
|
|
|
+ </template>
|
|
|
+ <vxe-button status="danger" content="删除" @click="removeRowEvent(row)"></vxe-button>
|
|
|
+ </template>
|
|
|
|
|
|
+ <template #Name_edit="{ row }">
|
|
|
+ <vxe-input v-model="row.Name"></vxe-input>
|
|
|
+ </template>
|
|
|
+ <template #DailyDataHeader_edit="{ row }">
|
|
|
+ <vxe-input v-model="row.DailyDataHeader"></vxe-input>
|
|
|
+ </template>
|
|
|
+ <template #WeeklyDataHeader_edit="{ row }">
|
|
|
+ <vxe-input v-model="row.WeeklyDataHeader"></vxe-input>
|
|
|
+ </template>
|
|
|
+ <template #MonthlyDataHeader_edit="{ row }">
|
|
|
+ <vxe-input v-model="row.MonthlyDataHeader"></vxe-input>
|
|
|
+ </template>
|
|
|
+ <template #CreationTime_edit="{ row }">
|
|
|
+ <vxe-input v-model="row.CreationTime"></vxe-input>
|
|
|
+ </template>
|
|
|
+ </vxe-grid>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
-<style scoped>
|
|
|
+<script lang="ts" setup>
|
|
|
+import { ref, reactive } from 'vue'
|
|
|
+import { VXETable, VxeGridInstance, VxeGridProps, VxeGridListeners } from 'vxe-table'
|
|
|
+
|
|
|
+interface RowVO {
|
|
|
+ Name: string
|
|
|
+ DailyDataHeader: string
|
|
|
+ WeeklyDataHeader: string
|
|
|
+ MonthlyDataHeader: string
|
|
|
+ CreationTime: number
|
|
|
+}
|
|
|
+
|
|
|
+const xGrid = ref<VxeGridInstance<RowVO>>()
|
|
|
+
|
|
|
+const gridOptions = reactive<VxeGridProps<RowVO>>({
|
|
|
+ border: true,
|
|
|
+ keepSource: true,
|
|
|
+ showOverflow: true,
|
|
|
+ height: 530,
|
|
|
+ loading: false,
|
|
|
+ columnConfig: {
|
|
|
+ resizable: true
|
|
|
+ },
|
|
|
+ pagerConfig: {
|
|
|
+ enabled: true,
|
|
|
+ total: 0,
|
|
|
+ currentPage: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ pageSizes: [10, 20, 50, 100, 200, 500]
|
|
|
+ },
|
|
|
+ editConfig: {
|
|
|
+ trigger: 'manual',
|
|
|
+ mode: 'row',
|
|
|
+ showStatus: true
|
|
|
+ },
|
|
|
+ columns: [
|
|
|
+ { field: 'Name', title: '模板名称', editRender: { autofocus: '.vxe-input--inner' }, slots: { edit: 'Name_edit' } },
|
|
|
+ { field: 'DailyDataHeader', title: '日数据表头', editRender: { autofocus: '.vxe-input--inner' }, slots: { edit: 'DailyDataHeader_edit' } },
|
|
|
+ { field: 'WeeklyDataHeader', title: '周数据表头', editRender: {}, slots: { edit: 'WeeklyDataHeader_edit' } },
|
|
|
+ { field: 'MonthlyDataHeader', title: '月数据表头', editRender: {}, slots: { edit: 'MonthlyDataHeader_edit' } },
|
|
|
+ { field: 'CreationTime', title: '创建时间', editRender: {}, slots: { edit: 'CreationTime_edit' } },
|
|
|
+ { title: '操作', width: 300, slots: { default: 'operate' } }
|
|
|
+ ],
|
|
|
+ data: []
|
|
|
+})
|
|
|
+
|
|
|
+
|
|
|
+const findList = () => {
|
|
|
+ gridOptions.loading = true
|
|
|
+ setTimeout(() => {
|
|
|
+ gridOptions.loading = false
|
|
|
+ if (gridOptions.pagerConfig) {
|
|
|
+ gridOptions.pagerConfig.total = 10
|
|
|
+ }
|
|
|
+ gridOptions.data = [
|
|
|
+ {
|
|
|
+ Name: 'John Brown',
|
|
|
+ DailyDataHeader: 'New York No. 1 Lake Park',
|
|
|
+ WeeklyDataHeader: 'New York No. 1 Lake Park',
|
|
|
+ MonthlyDataHeader: 'New York No. 1 Lake Park',
|
|
|
+ 'CreationTime': '2016-10-03',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ Name: 'Jim Green',
|
|
|
+ DailyDataHeader: 'London No. 1 Lake Park',
|
|
|
+ WeeklyDataHeader: 'London No. 1 Lake Park',
|
|
|
+ MonthlyDataHeader: 'London No. 1 Lake Park',
|
|
|
+ 'CreationTime': '2016-10-01',
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ }, 300)
|
|
|
+}
|
|
|
+
|
|
|
+const gridEvents: VxeGridListeners<RowVO> = {
|
|
|
+ pageChange ({ currentPage, pageSize }) {
|
|
|
+ if (gridOptions.pagerConfig) {
|
|
|
+ gridOptions.pagerConfig.currentPage = currentPage
|
|
|
+ gridOptions.pagerConfig.pageSize = pageSize
|
|
|
+ }
|
|
|
+ findList()
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const formatSex = (value: string) => {
|
|
|
+ if (value === '1') {
|
|
|
+ return '男'
|
|
|
+ }
|
|
|
+ if (value === '0') {
|
|
|
+ return '女'
|
|
|
+ }
|
|
|
+ return ''
|
|
|
+}
|
|
|
+
|
|
|
+const hasActiveEditRow = (row: RowVO) => {
|
|
|
+ const $grid = xGrid.value
|
|
|
+ if ($grid) {
|
|
|
+ return $grid.isEditByRow(row)
|
|
|
+ }
|
|
|
+ return false
|
|
|
+}
|
|
|
+
|
|
|
+const editRowEvent = (row: RowVO) => {
|
|
|
+ const $grid = xGrid.value
|
|
|
+ if ($grid) {
|
|
|
+ $grid.setEditRow(row)
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const clearRowEvent = () => {
|
|
|
+ const $grid = xGrid.value
|
|
|
+ if ($grid) {
|
|
|
+ $grid.clearEdit()
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const saveRowEvent = async (row: RowVO) => {
|
|
|
+ const $grid = xGrid.value
|
|
|
+ if ($grid) {
|
|
|
+ await $grid.clearEdit()
|
|
|
+ gridOptions.loading = true
|
|
|
+ // 模拟异步保存
|
|
|
+ setTimeout(() => {
|
|
|
+ gridOptions.loading = false
|
|
|
+ VXETable.modal.message({ content: `${JSON.stringify(row)}`, status: 'success' })
|
|
|
+ }, 300)
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const removeRowEvent = async (row: RowVO) => {
|
|
|
+ const type = await VXETable.modal.confirm('您确定要删除该数据?')
|
|
|
+ const $grid = xGrid.value
|
|
|
+ if ($grid) {
|
|
|
+ if (type === 'confirm') {
|
|
|
+ await $grid.remove(row)
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
-</style>
|
|
|
+findList()
|
|
|
+</script>
|
xinyan