客服话术和素材图片添加分类 #90
@ -5,22 +5,23 @@
|
|||||||
<!-- 菜单区域 -->
|
<!-- 菜单区域 -->
|
||||||
<div class="menu-area">
|
<div class="menu-area">
|
||||||
|
|
||||||
<el-button type="primary" plain @click="createType">
|
<el-button type="primary" plain @click="createType" style="width: 90;font-size: 12px;">
|
||||||
<Icon icon="ep:plus" class="mr-5px" /> 新增分类
|
<Icon icon="ep:plus" class="mr-5px" /> 新增分类
|
||||||
</el-button>
|
</el-button>
|
||||||
|
|
||||||
<el-menu :default-active="targetMenuId">
|
<el-menu :default-active="targetMenuId" style="width:182px">
|
||||||
<el-menu-item :index="targetMenuId" :key="targetMenuId" @click="clickMenu(targetMenuId)">
|
<el-menu-item :index="targetMenuId" :key="targetMenuId" @click="clickMenu(targetMenuId)">
|
||||||
全部类型
|
全部类型
|
||||||
</el-menu-item>
|
</el-menu-item>
|
||||||
<el-menu-item v-for="item in typeMenu" :index="item.value" :key="item.value"
|
<el-menu-item v-for="item in typeMenu" :index="item.value" :key="item.value"
|
||||||
@click="clickMenu(item.value)">
|
@click="clickMenu(item.value)">
|
||||||
{{ item.label }}
|
{{ item.label }}
|
||||||
<el-icon style="margin-left: 40px;" @mouseover="showActions = item.value"
|
<el-icon style="margin-left: 60px;width: 10px;" @mouseover="showActions = item.value"
|
||||||
@mouseleave="showActions = null">
|
@mouseleave="showActions = null">
|
||||||
<MoreFilled />
|
<MoreFilled />
|
||||||
<div v-if="showActions === item.value" class="action-buttons">
|
<div v-if="showActions === item.value" class="action-buttons">
|
||||||
<el-button size="small" @click.stop="editItem(item.id,item.label)">编辑</el-button>
|
<el-button size="small" @click.stop="editItem(item.id,item.label)">编辑</el-button>
|
||||||
|
<br />
|
||||||
<el-button size="small" @click.stop="deleteItem(item.id)">删除</el-button>
|
<el-button size="small" @click.stop="deleteItem(item.id)">删除</el-button>
|
||||||
</div>
|
</div>
|
||||||
</el-icon>
|
</el-icon>
|
||||||
@ -355,9 +356,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.menu-area {
|
.menu-area {
|
||||||
|
padding: 25px;
|
||||||
width: 200px;
|
background-color: white;
|
||||||
height: 100vh;
|
width: 180px;
|
||||||
|
height: 1000px;
|
||||||
/* 固定高度 */
|
/* 固定高度 */
|
||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
/* 禁止滚动 */
|
/* 禁止滚动 */
|
||||||
|
@ -3,10 +3,10 @@
|
|||||||
<div class="flex-container">
|
<div class="flex-container">
|
||||||
<!-- 菜单区域 -->
|
<!-- 菜单区域 -->
|
||||||
<div class="menu-area">
|
<div class="menu-area">
|
||||||
<el-button type="primary" plain @click="createType">
|
<el-button type="primary" plain @click="createType" style="width: 90;font-size: 12px;">
|
||||||
<Icon icon="ep:plus" class="mr-5px" /> 新增分类
|
<Icon icon="ep:plus" class="mr-5px" /> 新增分类
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-menu :default-active="targetMenuId">
|
<el-menu :default-active="targetMenuId" style="width:183px">
|
||||||
<el-menu-item v-for="item in huashuType" :index="item.value" :key="item.value"
|
<el-menu-item v-for="item in huashuType" :index="item.value" :key="item.value"
|
||||||
@click="clickMenu(item.value)">{{item.label}}</el-menu-item>
|
@click="clickMenu(item.value)">{{item.label}}</el-menu-item>
|
||||||
</el-menu>
|
</el-menu>
|
||||||
@ -79,11 +79,11 @@
|
|||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
<!-- 分页 -->
|
|
||||||
<Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
|
|
||||||
@pagination="getList" />
|
|
||||||
</ContentWrap>
|
|
||||||
|
|
||||||
|
</ContentWrap>
|
||||||
|
<!-- 分页 -->
|
||||||
|
<Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
|
||||||
|
@pagination="getList" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -94,26 +94,20 @@
|
|||||||
|
|
||||||
|
|
||||||
<Dialog v-model="dialogVisible" :title="dialogTitle">
|
<Dialog v-model="dialogVisible" :title="dialogTitle">
|
||||||
<el-form
|
<el-form ref="formRef" v-loading="formLoading" :model="formData" :rules="formRules" label-width="80px">
|
||||||
ref="formRef"
|
|
||||||
v-loading="formLoading"
|
|
||||||
:model="formData"
|
|
||||||
:rules="formRules"
|
|
||||||
label-width="80px"
|
|
||||||
>
|
|
||||||
|
|
||||||
<el-form-item label="数据标签" prop="label">
|
<el-form-item label="数据标签" prop="label">
|
||||||
<el-input v-model="formData.label" placeholder="请输入数据标签" />
|
<el-input v-model="formData.label" placeholder="请输入数据标签" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="显示排序" prop="sort">
|
<el-form-item label="显示排序" prop="sort">
|
||||||
<el-input-number v-model="formData.sort" :min="0" controls-position="right" />
|
<el-input-number v-model="formData.sort" :min="0" controls-position="right" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
</el-form>
|
</el-form>
|
||||||
<template #footer>
|
<template #footer>
|
||||||
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
|
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
|
||||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||||
</template>
|
</template>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
|
|
||||||
|
|
||||||
@ -133,19 +127,19 @@
|
|||||||
const dialogTitle = ref('新增分类') // 弹窗的标题
|
const dialogTitle = ref('新增分类') // 弹窗的标题
|
||||||
const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
|
const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
|
||||||
const formData = ref({
|
const formData = ref({
|
||||||
id: undefined,
|
id: undefined,
|
||||||
sort: undefined,
|
sort: undefined,
|
||||||
label: '',
|
label: '',
|
||||||
value: '',
|
value: '',
|
||||||
dictType: '',
|
dictType: '',
|
||||||
// status: CommonStatusEnum.ENABLE,
|
// status: CommonStatusEnum.ENABLE,
|
||||||
colorType: '',
|
colorType: '',
|
||||||
cssClass: '',
|
cssClass: '',
|
||||||
remark: ''
|
remark: ''
|
||||||
})
|
})
|
||||||
const formRules = reactive({
|
const formRules = reactive({
|
||||||
label: [{ required: true, message: '数据标签不能为空', trigger: 'blur' }],
|
label: [{ required: true, message: '数据标签不能为空', trigger: 'blur' }],
|
||||||
sort: [{ required: true, message: '数据顺序不能为空', trigger: 'blur' }],
|
sort: [{ required: true, message: '数据顺序不能为空', trigger: 'blur' }],
|
||||||
})
|
})
|
||||||
|
|
||||||
/** 客服话术 列表 */
|
/** 客服话术 列表 */
|
||||||
@ -181,32 +175,32 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
//新增分类
|
//新增分类
|
||||||
const createType = () =>{
|
const createType = () => {
|
||||||
dialogVisible.value = true
|
dialogVisible.value = true
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 提交表单 */
|
/** 提交表单 */
|
||||||
const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
|
const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
|
||||||
const submitForm = async () => {
|
const submitForm = async () => {
|
||||||
// 校验表单
|
// 校验表单
|
||||||
if (!formRef) return
|
if (!formRef) return
|
||||||
const valid = await formRef.value.validate()
|
const valid = await formRef.value.validate()
|
||||||
if (!valid) return
|
if (!valid) return
|
||||||
// 提交请求
|
// 提交请求
|
||||||
formLoading.value = true
|
formLoading.value = true
|
||||||
try {
|
try {
|
||||||
const data = formData.value as DictDataApi.DictDataVO
|
const data = formData.value as DictDataApi.DictDataVO
|
||||||
await DictDataApi.createType(data)
|
await DictDataApi.createType(data)
|
||||||
message.success(t('common.createSuccess'))
|
message.success(t('common.createSuccess'))
|
||||||
dialogVisible.value = false
|
dialogVisible.value = false
|
||||||
// 发送操作成功的事件
|
// 发送操作成功的事件
|
||||||
emit('success')
|
emit('success')
|
||||||
queryParams.type = targetMenuId.value
|
queryParams.type = targetMenuId.value
|
||||||
getList()
|
getList()
|
||||||
getHuaShuTypeList()
|
getHuaShuTypeList()
|
||||||
} finally {
|
} finally {
|
||||||
formLoading.value = false
|
formLoading.value = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -284,9 +278,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.menu-area {
|
.menu-area {
|
||||||
|
padding: 25px;
|
||||||
width: 200px;
|
background-color: white;
|
||||||
height: 100vh;
|
width: 180px;
|
||||||
|
height: 1000px;
|
||||||
/* 固定高度 */
|
/* 固定高度 */
|
||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
/* 禁止滚动 */
|
/* 禁止滚动 */
|
||||||
|
Loading…
x
Reference in New Issue
Block a user