移除客服账号和话术管理页面中新增按钮的自定义样式类

2025-12-12 16:56:13 +08:00
parent 58be602770
commit 6fb28f5393
6 changed files with 423 additions and 2 deletions
--- a/src/views/assets/category/index.vue
+++ b/src/views/assets/category/index.vue
@@ -0,0 +1,170 @@
+<template>
+	<div class="assets-category-container">
+		<el-card shadow="hover">
+			<div class="assets-category-search mb15">
+				<el-form :inline="true" :model="tableData.param">
+					<el-form-item label="名称">
+						<el-input size="default" v-model="tableData.param.name" placeholder="请输入分类名称" clearable style="width: 200px" />
+					</el-form-item>
+					<el-form-item label="分类">
+						<el-input size="default" v-model="tableData.param.type" placeholder="请输入分类" clearable style="width: 200px" />
+					</el-form-item>
+					<el-form-item>
+						<el-button size="default" type="primary" @click="getCategoryList">
+							<el-icon><ele-Search /></el-icon>
+							查询
+						</el-button>
+						<el-button size="default" type="success" @click="onOpenAddCategory()">
+							<el-icon><ele-FolderAdd /></el-icon>
+							新增
+						</el-button>
+					</el-form-item>
+				</el-form>
+			</div>
+			<el-table
+				:data="tableData.data"
+				style="width: 100%"
+				row-key="id"
+				default-expand-all
+				:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+				v-loading="tableData.loading"
+			>
+				<!-- <el-table-column type="index" label="序号" width="80" /> -->
+				<el-table-column prop="name" label="分类名称" show-overflow-tooltip min-width="180" />
+				<el-table-column prop="type" label="类型" width="100">
+					<template #default="scope">
+						<el-tag v-if="scope.row.type === 'product'" type="primary">商品</el-tag>
+						<el-tag v-else-if="scope.row.type === 'service'" type="success">服务</el-tag>
+					</template>
+				</el-table-column>
+				<el-table-column prop="sort" label="排序" width="80" />
+				<el-table-column prop="createdAt" label="创建时间" width="180" show-overflow-tooltip />
+				<el-table-column prop="updatedAt" label="修改时间" width="180" show-overflow-tooltip />
+				<el-table-column prop="status" label="状态" width="100">
+					<template #default="scope">
+						<el-switch
+							v-model="scope.row.status"
+							:active-value="1"
+							:inactive-value="0"
+							inline-prompt
+							active-text="显示"
+							inactive-text="隐藏"
+							@change="onStatusChange(scope.row)"
+						/>
+					</template>
+				</el-table-column>
+				<el-table-column label="操作" width="200" fixed="right">
+					<template #default="scope">
+						<el-button size="small" text type="primary" @click="onOpenAddCategory(scope.row)">新增</el-button>
+						<el-button size="small" text type="primary" @click="onOpenEditCategory(scope.row)">修改</el-button>
+						<el-button size="small" text type="danger" @click="onRowDel(scope.row)">删除</el-button>
+					</template>
+				</el-table-column>
+			</el-table>
+		</el-card>
+		<EditCategory ref="editCategoryRef" @getCategoryList="getCategoryList" />
+	</div>
+</template>
+
+<script lang="ts">
+export default {
+	name: 'assetsCategory',
+};
+</script>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue';
+import { ElMessageBox, ElMessage } from 'element-plus';
+import EditCategory from './component/editCategory.vue';
+import { getCategoryTree, deleteCategory, updateCategoryStatus } from '/@/api/assets/category';
+
+interface CategoryRow {
+	id: string;
+	name: string;
+	level: number;
+	type: string;
+	status: number;
+	sort?: number;
+	createdAt: string;
+	updatedAt: string;
+	children?: CategoryRow[] | null;
+}
+
+const editCategoryRef = ref();
+const tableData = reactive({
+	data: [] as CategoryRow[],
+	loading: false,
+	param: {
+		name: '',
+		type: '',
+	},
+});
+
+// 获取分类列表
+const getCategoryList = () => {
+	tableData.loading = true;
+	getCategoryTree(tableData.param)
+		.then((res: any) => {
+			// 主类目不做展示，直接取主类目的children
+			const tree = res.data?.tree ?? [];
+			tableData.data = tree.length > 0 && tree[0].children ? tree[0].children : [];
+		})
+		.catch(() => {
+			tableData.data = [];
+		})
+		.finally(() => {
+			tableData.loading = false;
+		});
+};
+
+// 打开新增弹窗
+const onOpenAddCategory = (row?: CategoryRow) => {
+	editCategoryRef.value.openDialog(row?.id);
+};
+
+// 打开修改弹窗
+const onOpenEditCategory = (row: CategoryRow) => {
+	editCategoryRef.value.openDialog(row, true);
+};
+
+// 删除
+const onRowDel = (row: CategoryRow) => {
+	ElMessageBox.confirm(`此操作将永久删除分类："${row.name}"，是否继续?`, '提示', {
+		confirmButtonText: '确认',
+		cancelButtonText: '取消',
+		type: 'warning',
+	})
+		.then(() => {
+			deleteCategory(row.id).then(() => {
+				ElMessage.success('删除成功');
+				getCategoryList();
+			});
+		})
+		.catch(() => {});
+};
+
+// 状态切换
+const onStatusChange = (row: CategoryRow) => {
+	updateCategoryStatus(row.id, row.status)
+		.then(() => {
+			ElMessage.success('状态更新成功');
+		})
+		.catch(() => {
+			// 失败时恢复原状态
+			row.status = row.status === 1 ? 0 : 1;
+		});
+};
+
+onMounted(() => {
+	getCategoryList();
+});
+</script>
+
+<style scoped lang="scss">
+.assets-category-container {
+	.assets-category-search {
+		display: flex;
+		flex-wrap: wrap;
+	}
+}
+</style>