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

<template>
    <div class="list-container">
        <table-list
            v-loading="loading"
            :code="code"
            :config="config"
            :data="list"
            :operation="['create', 'search', 'remove']"
            :reset="handleReset"
            title="系统"
            :total="total"
            @create="handleCreate()"
            @remove="handleRemove"
            @search="handleSearch"
        />
        <el-dialog v-model="formState.formVisible" :title="formState.form.id ? '查看' : '添加' + '系统'">
            <el-form
                ref="refsForm"
                :disabled="!!formState.form.id"
                label-width="100px"
                :model="formState.form"
                :rules="formState.rules"
            >
                <el-form-item label="系统标识" prop="client">
                    <el-input v-model="formState.form.client" />
                </el-form-item>
                <el-form-item label="系统名称" prop="name">
                    <el-input v-model="formState.form.name" />
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="formState.formVisible = false">取消</el-button>
                <el-button v-if="!formState.form.id" :loading="formState.submitting" type="primary" @click="handleSave">
                    保存
                </el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="jsx">
    import ElButton from '@/components/extra/ElButton.vue';
    const store = useStore();
    const router = useRouter();
    const { proxy } = getCurrentInstance();
    const loading = ref(false);
    const code = computed(() => store.state.chatSystem.code);
    const list = computed(() => store.state.chatSystem.list);
    const total = computed(() => store.state.chatSystem.total);
    const opts = computed(() => store.state.chatSystem.opts);
    if (!unref(opts).init) {
        store.dispatch('chatSystem/load');
    }
    const state = reactive({
        condition: {
            title: null,
            dateRange: [],
        },
    });
    watch(
        () => state.condition,
        (value) => {
            store.commit('chatSystem/setCondition', _.cloneDeep(value));
        },
        { immediate: true, deep: true }
    );
    const handleReset = () => {
        state.condition = {
            title: null,
            dateRange: [],
        };
    };
    const handleSearch = async () => {
        loading.value = true;
        await store.dispatch('chatSystem/search');
        loading.value = false;
    };
    onActivated(handleSearch);

    /* 表单 */
    const refsForm = ref(null);
    const formState = reactive({
        formVisible: false,
        submitting: false,
        form: {
            id: null,
            client: null,
            name: null,
        },
        rules: {
            client: [{ required: true, message: '系统标识不能为空' }],
            name: [{ required: true, message: '系统名称不能为空' }],
        },
    });
    // 添加/编辑
    const handleCreate = (row) => {
        Object.assign(
            formState.form,
            row || {
                id: null,
                client: null,
                name: null,
            }
        );
        formState.formVisible = true;
    };
    // 保存
    const handleSave = async () => {
        formState.submitting = true;
        try {
            await proxy.$validate(refsForm);
            let data = _.cloneDeep(formState.form);
            await store.dispatch('chatSystem/save', data);
            formState.formVisible = false;
        } catch (e) {
            console.info('取消保存', e);
        }
        formState.submitting = false;
    };
    const handleRemove = async (rows) => {
        store.dispatch(
            'chatSystem/remove',
            rows.map((item) => item.id)
        );
    };
    const handleStore = (row) => {
        router.push({ name: 'ChatStore', query: { sysId: row.id } });
    };
    const config = reactive({
        // 表格列配置
        columns: [
            {
                label: '系统标识',
                prop: 'client',
            },
            {
                label: '系统名称',
                prop: 'name',
            },
            {
                label: '操作',
                fixed: 'right',
                width: 160,
                slots: {
                    default: ({ row }) => (
                        <div>
                            <ElButton type="text" onClick={() => handleCreate(row)}>
                                查看
                            </ElButton>
                            <ElButton type="text" onClick={() => handleStore(row)}>
                                店铺
                            </ElButton>
                            <ElButton type="text" onClick={() => handleRemove([row])}>
                                删除
                            </ElButton>
                        </div>
                    ),
                },
            },
        ],
    });
</script>

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