From 57fe2c725650dba636b8d82029f184ab6554a1a1 Mon Sep 17 00:00:00 2001
From: kaeery <3491123437@qq.com>
Date: Fri, 21 Mar 2025 18:08:35 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E7=B3=BB=E7=BB=9F=E8=AE=BE=E7=BD=AE?=
 =?UTF-8?q?=E3=80=91=20=E6=96=B0=E5=A2=9E#=20=E5=AE=A2=E6=9C=8D=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/setting/operation_manager.ts          | 20 ++++
 src/views/setting/operation_manager/edit.vue  | 96 ++++++++++++++++++
 src/views/setting/operation_manager/index.vue | 97 +++++++++++++++++++
 3 files changed, 213 insertions(+)
 create mode 100644 src/api/setting/operation_manager.ts
 create mode 100644 src/views/setting/operation_manager/edit.vue
 create mode 100644 src/views/setting/operation_manager/index.vue

diff --git a/src/api/setting/operation_manager.ts b/src/api/setting/operation_manager.ts
new file mode 100644
index 0000000..3f7171f
--- /dev/null
+++ b/src/api/setting/operation_manager.ts
@@ -0,0 +1,20 @@
+import request from '@/utils/request'
+
+export function addOperation(params: any) {
+    return request.post({ url: '/customerService/add', params })
+}
+export function editOperation(params: any) {
+    return request.post({ url: '/customerService/edit', params })
+}
+export function operationDetail(params: any) {
+    return request.get({ url: '/customerService/detail', params })
+}
+export function getOperationList() {
+    return request.get({ url: '/customerService/list' })
+}
+export function delOperation(params: any) {
+    return request.post({ url: '/customerService/del', params })
+}
+export function OperationStatus(params: any) {
+    return request.post({ url: '/customerService/enable', params })
+}
diff --git a/src/views/setting/operation_manager/edit.vue b/src/views/setting/operation_manager/edit.vue
new file mode 100644
index 0000000..2590975
--- /dev/null
+++ b/src/views/setting/operation_manager/edit.vue
@@ -0,0 +1,96 @@
+<template>
+    <div class="edit-popup">
+        <popup ref="popupRef" :title="popupTitle" :async="true" width="550px" @confirm="handleSubmit" @close="handleClose">
+            <el-form ref="formRef" :model="formData" label-width="84px" :rules="formRules">
+                <el-form-item label="客服姓名" prop="name">
+                    <el-input v-model="formData.name" placeholder="请输入客服姓名" />
+                </el-form-item>
+                <el-form-item label="客服电话" prop="phone">
+                    <el-input v-model="formData.phone" placeholder="请输入客服电话" />
+                </el-form-item>
+                <el-form-item label="短信通知" prop="enable" required>
+                    <el-radio-group v-model="formData.enable">
+                        <el-radio :label="1">开启</el-radio>
+                        <el-radio :label="0">关闭</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+            </el-form>
+        </popup>
+    </div>
+</template>
+<script lang="ts" setup>
+import { addOperation, editOperation, operationDetail } from '@/api/setting/operation_manager'
+import Popup from '@/components/popup/index.vue'
+import feedback from '@/utils/feedback'
+import { validateContact } from '@/utils/validate'
+import type { FormInstance } from 'element-plus'
+
+const emit = defineEmits(['success', 'close'])
+const formRef = shallowRef<FormInstance>()
+const popupRef = shallowRef<InstanceType<typeof Popup>>()
+const mode = ref('add')
+const popupTitle = computed(() => {
+    return mode.value == 'edit' ? '编辑客服' : '新增客服'
+})
+
+const formData = reactive({
+    enable: 1,
+    name: '',
+    phone: ''
+})
+
+const formRules = reactive({
+    name: [
+        {
+            required: true,
+            message: '请输入客服姓名',
+            trigger: ['blur', 'change']
+        }
+    ],
+    phone: [
+        {
+            required: true,
+            message: '请输入客服电话',
+            trigger: ['blur', 'change']
+        },
+        {
+            validator: validateContact,
+            trigger: 'change'
+        }
+    ]
+})
+
+const handleSubmit = async () => {
+    await formRef.value?.validate()
+    mode.value == 'edit' ? await editOperation(formData) : await addOperation(formData)
+    popupRef.value?.close()
+    feedback.msgSuccess('操作成功')
+    emit('success')
+}
+
+const open = (type = 'add') => {
+    mode.value = type
+    popupRef.value?.open()
+}
+
+const setFormData = async (row: any) => {
+    const data = await operationDetail({
+        id: row.id
+    })
+    for (const key in formData) {
+        if (data[key] != null && data[key] != undefined) {
+            //@ts-ignore
+            formData[key] = data[key]
+            formData.id = data.id
+        }
+    }
+}
+
+const handleClose = () => {
+    emit('close')
+}
+defineExpose({
+    open,
+    setFormData
+})
+</script>
diff --git a/src/views/setting/operation_manager/index.vue b/src/views/setting/operation_manager/index.vue
new file mode 100644
index 0000000..eac0d55
--- /dev/null
+++ b/src/views/setting/operation_manager/index.vue
@@ -0,0 +1,97 @@
+<template>
+    <div class="admin">
+        <el-card v-loading="pager.loading" class="mt-4 !border-none" shadow="never">
+            <el-button v-perms="['setting:operation_manager:add']" type="primary" @click="handleAdd">
+                <template #icon>
+                    <icon name="el-icon-Plus" />
+                </template>
+                新增客服
+            </el-button>
+            <div class="mt-4">
+                <el-table :data="pager.lists" size="large">
+                    <el-table-column label="客服姓名" prop="name" min-width="100" />
+                    <el-table-column label="客服电话" prop="phone" min-width="100" />
+                    <el-table-column label="短信通知" min-width="80">
+                        <template #default="{ row }">
+                            <el-switch :model-value="row.enable" :active-value="1" :inactive-value="0" @change="changeStatus(row)" />
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="操作" width="120" fixed="right">
+                        <template #default="{ row }">
+                            <el-button v-perms="['setting:operation_manager:edit']" type="primary" link @click="handleEdit(row)">编辑</el-button>
+                            <el-button v-perms="['setting:operation_manager:delete']" type="danger" link @click="handleDelete(row.id)">
+                                删除
+                            </el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </div>
+            <div class="flex mt-4 justify-end">
+                <pagination v-model="pager" @change="getLists" />
+            </div>
+        </el-card>
+        <edit-popup v-if="showEdit" ref="editRef" @success="getLists" @close="showEdit = false" />
+    </div>
+</template>
+
+<script lang="ts" setup name="admin">
+import { usePaging } from '@/hooks/usePaging'
+import feedback from '@/utils/feedback'
+import EditPopup from './edit.vue'
+import { OperationStatus, delOperation, getOperationList } from '@/api/setting/operation_manager'
+
+const editRef = shallowRef<InstanceType<typeof EditPopup>>()
+// 表单数据
+const formData = reactive({
+    name: '',
+    phone: '',
+    enable: 0
+})
+const showEdit = ref(false)
+const { pager, getLists } = usePaging({
+    fetchFun: getOperationList,
+    params: formData
+})
+
+const handleAdd = async () => {
+    showEdit.value = true
+    await nextTick()
+    editRef.value?.open('add')
+}
+
+const handleEdit = async (data: any) => {
+    showEdit.value = true
+    await nextTick()
+    editRef.value?.open('edit')
+    editRef.value?.setFormData(data)
+}
+
+const handleDelete = async (id: number) => {
+    try {
+        await feedback.confirm('确定要删除？')
+        await delOperation({ id })
+        feedback.msgSuccess('删除成功')
+        getLists()
+    } catch (error) {}
+}
+const changeStatus = (row: any) => {
+    const { id, enable } = row
+    const msg = enable == 1 ? '停用' : '开启'
+    return new Promise(async resolve => {
+        try {
+            await feedback.confirm(`确定${msg}短信通知？`)
+            await OperationStatus({ id })
+            feedback.msgSuccess('修改成功')
+            getLists()
+            resolve(true)
+        } catch (error) {
+            getLists()
+            resolve(false)
+        }
+    })
+}
+
+onMounted(() => {
+    getLists()
+})
+</script>