修改管理页面

gerson

2024-08-31 da3e9475f6c965a85fdb53cee770aafcc251ad5b

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<script lang="ts" setup>
import type { Ref } from 'vue';
import { inject, watchEffect } from 'vue';
 
import type { EditActions, FormModel, FormModelItem, FormProps } from './EditTable.vue';
 
export interface Rule {}
 
interface ColumnScope {
    row?: any;
    column: any;
    $index: number;
    [key: string]: any;
}
 
const props = withDefaults(
    defineProps<{
        prop?: string;
        label?: string;
        width?: string;
        rules?: Rule[];
    }>(),
    {
        prop: '',
        label: '',
    }
);
 
const defaultEditActions: EditActions = {
    addRow: () => {},
    deleteRow: () => {},
    startEditable: () => {},
    cancelEditable: () => {},
    saveEditable: () => {},
};
 
const editActions = inject<EditActions | undefined>('editActions');
 
const formModel = inject<Ref<FormModel | undefined>>('formModel');
 
const formProps = inject<Ref<FormProps | undefined>>('formProps');
 
watchEffect(() => {
    if (props.prop) {
        formProps?.value?.add(props.prop);
    }
});
 
const getEditModel = (index: number): FormModelItem => {
    if (!formModel || !formModel.value?.model) {
        return {
            isEditing: false,
            isNew: false,
            formData: {},
            data: {},
        };
    }
    return formModel.value.model[index];
};
 
const getEditRow = (index: number): any => getEditModel(index).formData;
 
const isEditing = (index: number): boolean => getEditModel(index).isEditing ?? false;
 
const calculateColumnDefaultValue = (scope: ColumnScope) => {
    return scope.row?.[props.prop];
};
</script>
 
<template>
    <el-table-column v-bind="$attrs" :prop="prop" :label="label" :width="width">
        <template #default="scope">
            <el-form-item v-if="isEditing(scope.$index)" :prop="`model.${scope.$index}.formData.${prop}`" :rules="rules">
                <slot
                    name="edit"
                    :$index="scope.$index"
                    :row="getEditRow(scope.$index)"
                    :column="scope.column"
                    :actions="editActions ?? defaultEditActions"
                >
                    {{ calculateColumnDefaultValue(scope) }}
                </slot>
            </el-form-item>
            <slot v-else :$index="scope.$index" :row="scope.row" :column="scope.column" :actions="editActions ?? defaultEditActions">
                {{ calculateColumnDefaultValue(scope) }}
            </slot>
        </template>
    </el-table-column>
</template>