From f282e344fc9b1ba20e6abb312fd8b48673842618 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=91=E6=96=87=E5=8F=AF?= <1041367524@qq.com>
Date: Sat, 11 Jun 2022 16:10:28 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=B3=BB=E7=BB=9F=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/extra/ElTooltip.vue       |  16 +
 src/store/modules/search/searchSystem.js |  78 +++++
 src/views/search/config/index.vue        | 247 ++++++++++++++
 src/views/search/system/index.vue        | 389 +++++++++++++++++++++++
 4 files changed, 730 insertions(+)
 create mode 100644 src/components/extra/ElTooltip.vue
 create mode 100644 src/store/modules/search/searchSystem.js
 create mode 100644 src/views/search/config/index.vue
 create mode 100644 src/views/search/system/index.vue

diff --git a/src/components/extra/ElTooltip.vue b/src/components/extra/ElTooltip.vue
new file mode 100644
index 0000000..27068e6
--- /dev/null
+++ b/src/components/extra/ElTooltip.vue
@@ -0,0 +1,16 @@
+<template>
+    <component :is="render" />
+</template>
+<script setup lang="jsx">
+    import { ElTooltip } from 'element-plus/es/components/tooltip/index';
+    import 'element-plus/es/components/tooltip/style/css';
+    import ElIcon from './ElIcon.vue';
+    const props = defineProps({});
+    const attrs = useAttrs();
+    const slots = {
+        default: () => <ElIcon name="information" style="position: relative;top: 2px;margin-left: 5px;" />,
+        ...useSlots(),
+    };
+    const render = () => <ElTooltip {...props} {...attrs} v-slots={slots} />;
+</script>
+<style lang="less" scoped></style>
diff --git a/src/store/modules/search/searchSystem.js b/src/store/modules/search/searchSystem.js
new file mode 100644
index 0000000..d45d247
--- /dev/null
+++ b/src/store/modules/search/searchSystem.js
@@ -0,0 +1,78 @@
+import * as api from '@/api/system/notify.js';
+import { ElMessage, ElMessageBox } from '@/plugins/element-plus';
+const state = () => ({
+    code: 'SearchSystem',
+    condition: {},
+    list: [],
+    total: 0,
+    opts: {
+        init: false,
+    },
+});
+const getters = {};
+const mutations = {
+    setCode: (state, data) => (state.code = data),
+    setCondition: (state, data) => (state.condition = data),
+    setList: (state, data) => (state.list = data),
+    setTotal: (state, data) => (state.total = data),
+    setOpts: (state, data) => (state.opts = data),
+};
+const actions = {
+    search: async ({ state, commit, rootGetters }) => {
+        let data = { ...state.condition };
+        let res = await api.search({ ...rootGetters['local/page'](state.code), ...data });
+        commit('setList', res?.records || []);
+        commit('setTotal', res?.total || 0);
+        if (!res) {
+            ElMessage.error('查询失败');
+        }
+        return res;
+    },
+    load: async ({ commit }) => {
+        commit('setOpts', {
+            init: true,
+        });
+    },
+    detail: async (context, id) => {
+        let res = await api.detail(id);
+        if (!res) {
+            ElMessage.error('加载详情失败');
+        }
+        return res;
+    },
+    save: async ({ dispatch }, data) => {
+        let save = data.id ? api.update : api.create;
+        let res = await save(data);
+        if (res) {
+            ElMessage.success('保存成功');
+            dispatch('search');
+        } else {
+            ElMessage.error('保存失败');
+        }
+        return res;
+    },
+    remove: async ({ dispatch }, idList) => {
+        if (!idList.length) {
+            ElMessage.warning('请选择要删除的数据');
+        } else {
+            try {
+                await ElMessageBox.confirm('数据删除后无法恢复，确定要删除吗?', '危险操作');
+                let res = await api.remove(idList.join(','));
+                if (res) {
+                    ElMessage.success('删除成功');
+                    dispatch('search');
+                } else {
+                    ElMessage.error('删除失败');
+                }
+            } catch (e) {
+                console.info('取消删除', e);
+            }
+        }
+    },
+};
+export default {
+    state,
+    getters,
+    mutations,
+    actions,
+};
diff --git a/src/views/search/config/index.vue b/src/views/search/config/index.vue
new file mode 100644
index 0000000..08614ff
--- /dev/null
+++ b/src/views/search/config/index.vue
@@ -0,0 +1,247 @@
+<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"
+        >
+            <template #search>
+                <el-form inline>
+                    <el-form-item label="所属店铺" prop="storeId">
+                        <el-select
+                            v-model="state.condition.storeId"
+                            :config="{ label: 'name', value: 'id' }"
+                            :opts="opts.store"
+                        />
+                    </el-form-item>
+                    <el-form-item label="客服ID" prop="waiterId">
+                        <el-input v-model="state.condition.waiterId" />
+                    </el-form-item>
+                    <el-form-item label="客服昵称" prop="waiterNickname">
+                        <el-input v-model="state.condition.waiterNickname" />
+                    </el-form-item>
+                </el-form>
+            </template>
+        </table-list>
+        <el-dialog v-model="formState.formVisible" :title="formState.form.id ? '编辑' : '添加' + '店铺'" width="480px">
+            <el-form
+                ref="refsForm"
+                v-loading="formState.submitting"
+                label-width="100px"
+                :model="formState.form"
+                :rules="formState.rules"
+            >
+                <el-form-item label="所属店铺" prop="storeId">
+                    <el-select
+                        v-model="formState.form.storeId"
+                        :config="{ label: 'name', value: 'id' }"
+                        :disabled="formState.form.id"
+                        :opts="opts.store"
+                    />
+                </el-form-item>
+                <el-form-item label="客服类型" prop="type">
+                    <el-input v-model="formState.form.type" maxlength="20" />
+                </el-form-item>
+                <el-form-item label="客服头像" prop="waiterAvatar">
+                    <el-upload-image v-model="formState.form.waiterAvatar" config-id="im/" />
+                </el-form-item>
+                <el-form-item label="客服ID" prop="waiterId">
+                    <el-input v-model="formState.form.waiterId" :disabled="!!formState.form.id" maxlength="20" />
+                </el-form-item>
+                <el-form-item label="客服昵称" prop="waiterNickname">
+                    <el-input v-model="formState.form.waiterNickname" maxlength="20" />
+                </el-form-item>
+            </el-form>
+            <template #footer>
+                <el-button @click="formState.formVisible = false">取消</el-button>
+                <el-button :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';
+    import ElImage from '@/components/extra/ElImage.vue';
+    const store = useStore();
+    const route = useRoute();
+    const { proxy } = getCurrentInstance();
+    const loading = ref(false);
+    const code = computed(() => store.state.chatWaiter.code);
+    const list = computed(() => store.state.chatWaiter.list);
+    const total = computed(() => store.state.chatWaiter.total);
+    const opts = computed(() => store.state.chatWaiter.opts);
+    if (!unref(opts).init) {
+        store.dispatch('chatWaiter/load');
+    }
+    const state = reactive({
+        condition: {
+            storeId: null,
+            waiterId: null,
+            waiterNickname: null,
+        },
+    });
+    const handleReset = () => {
+        state.condition = {
+            storeId: unref(opts).store?.[0]?.id,
+            waiterId: null,
+            waiterNickname: null,
+        };
+    };
+    const handleSearch = async () => {
+        if (state.condition.storeId) {
+            loading.value = true;
+            await store.dispatch('chatWaiter/search');
+            loading.value = false;
+        } else {
+            store.commit('chatWaiter/setList', []);
+            store.commit('chatWaiter/setTotal', 0);
+        }
+    };
+    watch(
+        () => unref(opts).store,
+        (value) => {
+            if (!state.condition.storeId) {
+                state.condition.storeId = value[0]?.id;
+            }
+        }
+    );
+    watch(
+        () => state.condition,
+        (value) => {
+            store.commit('chatWaiter/setCondition', _.cloneDeep(value));
+        },
+        { immediate: true, deep: true }
+    );
+    watch(
+        () => state.condition.storeId,
+        () => {
+            handleSearch();
+        }
+    );
+    onActivated(() => {
+        let storeId = route.query.storeId;
+        if (storeId) {
+            state.condition.storeId = +storeId;
+        } else {
+            handleSearch();
+        }
+    });
+
+    /* 表单 */
+    const refsForm = ref(null);
+    const formState = reactive({
+        formVisible: false,
+        submitting: false,
+        form: {
+            id: null,
+            storeId: null,
+            type: null,
+            waiterAvatar: null,
+            waiterId: null,
+            waiterNickname: null,
+        },
+        rules: {
+            storeId: [{ required: true, message: '所属店铺不能为空' }],
+            type: [{ required: true, message: '客服类型不能为空' }],
+            waiterAvatar: [{ required: true, message: '客服头像不能为空' }],
+            waiterId: [{ required: true, message: '客服ID不能为空' }],
+            waiterNickname: [{ required: true, message: '客服昵称不能为空' }],
+        },
+    });
+    // 添加/编辑
+    const handleCreate = (row) => {
+        Object.assign(
+            formState.form,
+            row || {
+                id: null,
+                storeId: null,
+                type: null,
+                waiterAvatar: null,
+                waiterId: null,
+                waiterNickname: null,
+            }
+        );
+        if (!formState.form.storeId) {
+            formState.form.storeId = state.condition.storeId;
+        }
+        formState.formVisible = true;
+    };
+    // 保存
+    const handleSave = async () => {
+        formState.submitting = true;
+        try {
+            await proxy.$validate(refsForm);
+            let data = _.cloneDeep(formState.form);
+            await store.dispatch('chatWaiter/save', data);
+            formState.formVisible = false;
+        } catch (e) {
+            console.info('取消保存', e);
+        }
+        formState.submitting = false;
+    };
+    const handleRemove = async (rows) => {
+        store.dispatch('chatWaiter/remove', {
+            storeId: state.condition.storeId,
+            waiterIds: rows.map((item) => item.waiterId),
+        });
+    };
+    const config = reactive({
+        // 表格列配置
+        columns: [
+            {
+                type: 'selection',
+                width: 60,
+            },
+            {
+                label: '所属店铺',
+                width: 160,
+                slots: {
+                    default: ({ row }) => proxy.$dict(unref(opts).store, row.storeId, { label: 'name', value: 'id' }),
+                },
+            },
+            {
+                label: '客服头像',
+                width: 160,
+                slots: {
+                    default: ({ row }) => <ElImage src={row.waiterAvatar} alt={row.waiterNickname} />,
+                },
+            },
+            {
+                label: '客服ID',
+                prop: 'waiterId',
+            },
+            {
+                label: '客服昵称',
+                prop: 'waiterNickname',
+            },
+            {
+                label: '操作',
+                fixed: 'right',
+                slots: {
+                    default: ({ row }) => (
+                        <div>
+                            <ElButton type="text" onClick={() => handleCreate(row)}>
+                                编辑
+                            </ElButton>
+                            <ElButton type="text" onClick={() => handleRemove([row])}>
+                                删除
+                            </ElButton>
+                        </div>
+                    ),
+                },
+                width: 120,
+            },
+        ],
+    });
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/search/system/index.vue b/src/views/search/system/index.vue
new file mode 100644
index 0000000..fa0b63d
--- /dev/null
+++ b/src/views/search/system/index.vue
@@ -0,0 +1,389 @@
+<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"
+        >
+            <template #search>
+                <el-form inline label-width="100px">
+                    <el-form-item label="主键" prop="id">
+                        <el-input v-model="state.condition.id" />
+                    </el-form-item>
+                    <el-form-item label="系统ID" prop="systemId">
+                        <el-input v-model="state.condition.systemId" />
+                    </el-form-item>
+                    <el-form-item label="作者" prop="author">
+                        <el-input v-model="state.condition.author" />
+                    </el-form-item>
+                    <el-form-item label="数据库名称" prop="databaseName">
+                        <el-input v-model="state.condition.databaseName" />
+                    </el-form-item>
+                    <el-form-item prop="documentIdExp">
+                        <template #label>
+                            <span>ES文档ID</span>
+                            <el-tooltip
+                                content="数据导入ES后，作为ES文档id的字段，使用占位符形式，如:${offer_id}+${offer_sub_id}（连表查询一对多时要注意是多个表的主键连接才能确定唯一性）"
+                                placement="top"
+                            />
+                        </template>
+                        <el-input v-model="state.condition.documentIdExp" />
+                    </el-form-item>
+                    <el-form-item prop="order">
+                        <template #label>
+                            <span>排序</span>
+                            <el-tooltip
+                                content="在字段名后加“:asc或:desc”指定升序（降序），多个字段使用逗号分隔，省略排序默认使用升序"
+                                placement="top"
+                            />
+                        </template>
+                        <el-input v-model="state.condition.order" />
+                    </el-form-item>
+                    <el-form-item label="搜索码" prop="searchCode">
+                        <el-input v-model="state.condition.searchCode" />
+                    </el-form-item>
+                    <el-form-item prop="searchFiled">
+                        <template #label>
+                            <span>搜索字段</span>
+                            <el-tooltip
+                                content="搜索字段配置，格式“字段名/搜索类型”，搜索类型即ES中字段的分词器类型，模糊搜索standard，拼音搜索pinyin，全词匹配搜索keyword"
+                                placement="top"
+                            />
+                        </template>
+                        <el-input v-model="state.condition.searchFiled" />
+                    </el-form-item>
+                    <el-form-item label="搜索名" prop="searchName">
+                        <el-input v-model="state.condition.searchName" />
+                    </el-form-item>
+                    <el-form-item prop="syncCron">
+                        <template #label>
+                            <span>同步频率</span>
+                            <el-tooltip
+                                content="同步数据到ES的频率（cron表达式），示例：‘* */30 * * * ?’（每30分钟同步一次）"
+                                placement="top"
+                            />
+                        </template>
+                        <el-input v-model="state.condition.syncCron" />
+                    </el-form-item>
+                </el-form>
+            </template>
+        </table-list>
+        <el-dialog v-model="formState.formVisible" :title="formState.form.id ? '编辑' : '添加' + '系统'" width="480px">
+            <el-form
+                ref="refsForm"
+                v-loading="formState.submitting"
+                label-width="100px"
+                :model="formState.form"
+                :rules="formState.rules"
+            >
+                <el-form-item label="主键" prop="id">
+                    <el-input v-model="formState.form.id" />
+                </el-form-item>
+                <el-form-item label="系统ID" prop="systemId">
+                    <el-input v-model="formState.form.systemId" />
+                </el-form-item>
+                <el-form-item label="作者" prop="author">
+                    <el-input v-model="formState.form.author" />
+                </el-form-item>
+                <el-form-item label="数据库名称" prop="databaseName">
+                    <el-input v-model="formState.form.databaseName" />
+                </el-form-item>
+                <el-form-item prop="documentIdExp">
+                    <template #label>
+                        <span>ES文档ID</span>
+                        <el-tooltip
+                            content="数据导入ES后，作为ES文档id的字段，使用占位符形式，如:${offer_id}+${offer_sub_id}（连表查询一对多时要注意是多个表的主键连接才能确定唯一性）"
+                            placement="top"
+                        />
+                    </template>
+                    <el-input v-model="formState.form.documentIdExp" />
+                </el-form-item>
+                <el-form-item prop="order">
+                    <template #label>
+                        <span>排序</span>
+                        <el-tooltip
+                            content="在字段名后加“:asc或:desc”指定升序（降序），多个字段使用逗号分隔，省略排序默认使用升序"
+                            placement="top"
+                        />
+                    </template>
+                    <el-input v-model="formState.form.order" />
+                </el-form-item>
+                <el-form-item label="搜索码" prop="searchCode">
+                    <el-input v-model="formState.form.searchCode" />
+                </el-form-item>
+                <el-form-item prop="searchFiled">
+                    <template #label>
+                        <span>搜索字段</span>
+                        <el-tooltip
+                            content="搜索字段配置，格式“字段名/搜索类型”，搜索类型即ES中字段的分词器类型，模糊搜索standard，拼音搜索pinyin，全词匹配搜索keyword"
+                            placement="top"
+                        />
+                    </template>
+                    <el-input v-model="formState.form.searchFiled" />
+                </el-form-item>
+                <el-form-item label="搜索名" prop="searchName">
+                    <el-input v-model="formState.form.searchName" />
+                </el-form-item>
+                <el-form-item prop="syncCron">
+                    <template #label>
+                        <span>同步频率</span>
+                        <el-tooltip
+                            content="同步数据到ES的频率（cron表达式），示例：‘* */30 * * * ?’（每30分钟同步一次）"
+                            placement="top"
+                        />
+                    </template>
+                    <el-input v-model="formState.form.syncCron" />
+                </el-form-item>
+            </el-form>
+            <template #footer>
+                <el-button @click="formState.formVisible = false">取消</el-button>
+                <el-button :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';
+    import ElTooltip from '@/components/extra/ElTooltip.vue';
+    const store = useStore();
+    const { proxy } = getCurrentInstance();
+    const loading = ref(false);
+    const code = computed(() => store.state.searchSystem.code);
+    const list = computed(() => store.state.searchSystem.list);
+    const total = computed(() => store.state.searchSystem.total);
+    const opts = computed(() => store.state.searchSystem.opts);
+    if (!unref(opts).init) {
+        store.dispatch('searchSystem/load');
+    }
+    const state = reactive({
+        condition: {
+            author: null,
+            databaseName: null,
+            documentIdExp: null,
+            id: null,
+            order: null,
+            searchCode: null,
+            searchFiled: null,
+            searchName: null,
+            syncCron: null,
+            systemId: null,
+        },
+    });
+    watch(
+        () => state.condition,
+        (value) => {
+            store.commit('searchSystem/setCondition', _.cloneDeep(value));
+        },
+        { immediate: true, deep: true }
+    );
+    const handleReset = () => {
+        state.condition = {
+            author: null,
+            databaseName: null,
+            documentIdExp: null,
+            id: null,
+            order: null,
+            searchCode: null,
+            searchFiled: null,
+            searchName: null,
+            syncCron: null,
+            systemId: null,
+        };
+    };
+    const handleSearch = async () => {
+        loading.value = true;
+        await store.dispatch('searchSystem/search');
+        loading.value = false;
+    };
+    onActivated(handleSearch);
+
+    /* 表单 */
+    const refsForm = ref(null);
+    const formState = reactive({
+        formVisible: false,
+        submitting: false,
+        form: {
+            author: null,
+            databaseName: null,
+            documentIdExp: null,
+            id: null,
+            order: null,
+            searchCode: null,
+            searchFiled: null,
+            searchName: null,
+            syncCron: null,
+            systemId: null,
+        },
+        rules: {
+            author: [{ required: true, message: '作者不能为空' }],
+            databaseName: [{ required: true, message: '数据库名称不能为空' }],
+            documentIdExp: [{ required: true, message: 'ES文档ID不能为空' }],
+            order: [{ required: true, message: '排序不能为空' }],
+            searchCode: [{ required: true, message: '搜索码不能为空' }],
+            searchFiled: [{ required: true, message: '搜索字段不能为空' }],
+            searchName: [{ required: true, message: '搜索名不能为空' }],
+            syncCron: [{ required: true, message: '同步频率不能为空' }],
+            systemId: [{ required: true, message: '系统ID不能为空' }],
+        },
+    });
+    // 添加/编辑
+    const handleCreate = (row) => {
+        Object.assign(
+            formState.form,
+            row || {
+                author: null,
+                databaseName: null,
+                documentIdExp: null,
+                id: null,
+                order: null,
+                searchCode: null,
+                searchFiled: null,
+                searchName: null,
+                syncCron: null,
+                systemId: null,
+            }
+        );
+        formState.formVisible = true;
+    };
+    // 保存
+    const handleSave = async () => {
+        formState.submitting = true;
+        try {
+            await proxy.$validate(refsForm);
+            let data = _.cloneDeep(formState.form);
+            await store.dispatch('searchSystem/save', data);
+            formState.formVisible = false;
+        } catch (e) {
+            console.info('取消保存', e);
+        }
+        formState.submitting = false;
+    };
+    const handleRemove = async (rows) => {
+        store.dispatch(
+            'searchSystem/remove',
+            rows.map((item) => item.id)
+        );
+    };
+    const config = reactive({
+        columns: [
+            {
+                type: 'selection',
+                width: 60,
+            },
+            {
+                label: '主键',
+                prop: 'id',
+                width: 100,
+            },
+            {
+                label: '系统ID',
+                prop: 'systemId',
+            },
+            {
+                label: '作者',
+                prop: 'author',
+            },
+            {
+                label: '数据库名称',
+                prop: 'databaseName',
+                minWidth: 120,
+            },
+            {
+                prop: 'documentIdExp',
+                minWidth: 120,
+                slots: {
+                    header: () => (
+                        <p>
+                            <span>ES文档ID</span>
+                            <ElTooltip
+                                content="数据导入ES后，作为ES文档id的字段，使用占位符形式，如:${offer_id}+${offer_sub_id}（连表查询一对多时要注意是多个表的主键连接才能确定唯一性）"
+                                placement="top"
+                            />
+                        </p>
+                    ),
+                },
+            },
+            {
+                prop: 'order',
+                width: 100,
+                slots: {
+                    header: () => (
+                        <p>
+                            <span>排序</span>
+                            <ElTooltip
+                                content="在字段名后加“:asc或:desc”指定升序（降序），多个字段使用逗号分隔，省略排序默认使用升序"
+                                placement="top"
+                            />
+                        </p>
+                    ),
+                },
+            },
+            {
+                label: '搜索码',
+                prop: 'searchCode',
+            },
+            {
+                prop: 'searchFiled',
+                minWidth: 120,
+                slots: {
+                    header: () => (
+                        <p>
+                            <span>搜索字段</span>
+                            <ElTooltip
+                                content="搜索字段配置，格式“字段名/搜索类型”，搜索类型即ES中字段的分词器类型，模糊搜索standard，拼音搜索pinyin，全词匹配搜索keyword"
+                                placement="top"
+                            />
+                        </p>
+                    ),
+                },
+            },
+            {
+                label: '搜索名',
+                prop: 'searchName',
+            },
+            {
+                prop: 'syncCron',
+                minWidth: 120,
+                slots: {
+                    header: () => (
+                        <p>
+                            <span>同步频率</span>
+                            <ElTooltip
+                                content="同步数据到ES的频率（cron表达式），示例：‘* */30 * * * ?’（每30分钟同步一次）"
+                                placement="top"
+                            />
+                        </p>
+                    ),
+                },
+            },
+            {
+                label: '操作',
+                fixed: 'right',
+                width: 120,
+                slots: {
+                    default: ({ row }) => (
+                        <div>
+                            <ElButton type="text" onClick={() => handleCreate(row)}>
+                                编辑
+                            </ElButton>
+                            <ElButton type="text" onClick={() => handleRemove([row])}>
+                                删除
+                            </ElButton>
+                        </div>
+                    ),
+                },
+            },
+        ],
+    });
+</script>
+
+<style lang="less" scoped></style>