shop-admin/src/views/system/user/index.vue

<template>
    <TableList
        v-loading="loading"
        :code="code"
        :config="config"
        :data="list"
        :operation="['create', 'search']"
        :reset="handleReset"
        title="用户"
        :total="total"
        @create="handleCreate"
        @remove="handleRemove"
        @search="handleSearch"
    >
        <template #search>
            <el-form inline>
                <el-form-item label="员工姓名" prop="employeeName">
                    <el-input v-model="state.condition.employeeName" />
                </el-form-item>
                <el-form-item label="手机号码" prop="phone">
                    <el-input v-model="state.condition.phone" />
                </el-form-item>
            </el-form>
        </template>
    </TableList>
</template>

<script setup lang="jsx">
    import ElButton from '@/components/extra/ElButton.vue';
    import { ElTag } from 'element-plus/es';
    const { proxy } = getCurrentInstance();
    const router = useRouter();
    const store = useStore();
    const loading = ref(false);
    const code = computed(() => store.state.user.code);
    const list = computed(() => store.state.user.list);
    const total = computed(() => store.state.user.total);
    const opts = computed(() => store.state.user.opts);
    if (!unref(opts).init) {
        store.dispatch('user/load');
    }
    const state = reactive({
        condition: {
            employeeName: null,
            phone: null,
        },
    });
    watch(
        () => state.condition,
        (value) => {
            store.commit('user/setCondition', _.cloneDeep(value));
        },
        { immediate: true, deep: true }
    );
    const handleReset = () => {
        state.condition = {
            employeeName: null,
            phone: null,
        };
    };
    const handleSearch = async () => {
        loading.value = true;
        await store.dispatch('user/search');
        loading.value = false;
    };
    const handleCreate = () => {
        router.push({ name: 'CreateUser' });
    };
    const handleUpdate = (row) => {
        router.push({ name: 'UpdateUser', params: { id: row.id } });
    };
    const handleRemove = async (rows) => {
        store.dispatch(
            'user/remove',
            rows.map((item) => item.id)
        );
    };
    const config = reactive({
        // 表格列配置
        columns: [
            {
                type: 'selection',
                fixed: 'left',
                width: 60,
            },
            {
                label: '员工姓名',
                prop: 'employeeName',
                minWidth: 160,
                fixed: 'left',
            },
            {
                label: '用户名',
                prop: 'userName',
                minWidth: 160,
            },
            {
                label: '手机',
                prop: 'phone',
                width: 160,
            },
            {
                label: '邮箱',
                prop: 'email',
                width: 160,
            },
            {
                label: '员工类型',
                width: 120,
                slots: {
                    default: ({ row }) => proxy.$dict(unref(opts).type, row.employeeType),
                },
            },
            {
                label: '是否启用',
                prop: 'isEnable',
                width: 180,
                slots: {
                    default: ({ row }) => (
                        <ElTag type={row.isEnable ? 'success' : 'error'}>{row.isEnable ? '启用' : '禁用'}</ElTag>
                    ),
                },
            },
            {
                label: '备注',
                prop: 'remark',
                width: 180,
            },
            {
                label: '更新时间',
                prop: 'updateTime',
                width: 180,
            },
            {
                label: '更新人',
                prop: 'updateUser',
                width: 180,
            },
            {
                label: '创建时间',
                prop: 'createTime',
                width: 180,
            },
            {
                label: '创建人',
                prop: 'createUser',
                width: 160,
            },
            {
                label: '操作',
                fixed: 'right',
                slots: {
                    default: ({ row }) => (
                        <div>
                            <ElButton type="text" onClick={() => handleUpdate(row)}>
                                编辑
                            </ElButton>
                            <ElButton type="text" onClick={() => handleRemove([row])}>
                                删除
                            </ElButton>
                        </div>
                    ),
                },
                width: 120,
            },
        ],
    });
</script>

<style lang="less" scoped></style>