优化客服话术和图片素材界面
This commit is contained in:
parent
c6c4dd7693
commit
1a0cfaac2b
@ -5,22 +5,23 @@
|
||||
<!-- 菜单区域 -->
|
||||
<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" /> 新增分类
|
||||
</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>
|
||||
<el-menu-item v-for="item in typeMenu" :index="item.value" :key="item.value"
|
||||
@click="clickMenu(item.value)">
|
||||
{{ 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">
|
||||
<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>
|
||||
<br />
|
||||
<el-button size="small" @click.stop="deleteItem(item.id)">删除</el-button>
|
||||
</div>
|
||||
</el-icon>
|
||||
@ -355,9 +356,10 @@
|
||||
}
|
||||
|
||||
.menu-area {
|
||||
|
||||
width: 200px;
|
||||
height: 100vh;
|
||||
padding: 25px;
|
||||
background-color: white;
|
||||
width: 180px;
|
||||
height: 1000px;
|
||||
/* 固定高度 */
|
||||
overflow-y: hidden;
|
||||
/* 禁止滚动 */
|
||||
|
@ -3,10 +3,10 @@
|
||||
<div class="flex-container">
|
||||
<!-- 菜单区域 -->
|
||||
<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" /> 新增分类
|
||||
</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"
|
||||
@click="clickMenu(item.value)">{{item.label}}</el-menu-item>
|
||||
</el-menu>
|
||||
@ -79,11 +79,11 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
</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>
|
||||
|
||||
@ -91,32 +91,26 @@
|
||||
|
||||
<!-- 表单弹窗:添加/修改 -->
|
||||
<VerbalTrickForm ref="formRef" @success="getList" />
|
||||
|
||||
|
||||
<Dialog v-model="dialogVisible" :title="dialogTitle">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
v-loading="formLoading"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
label-width="80px"
|
||||
>
|
||||
|
||||
<el-form-item label="数据标签" prop="label">
|
||||
<el-input v-model="formData.label" placeholder="请输入数据标签" />
|
||||
</el-form-item>
|
||||
<el-form-item label="显示排序" prop="sort">
|
||||
<el-input-number v-model="formData.sort" :min="0" controls-position="right" />
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
</template>
|
||||
|
||||
<Dialog v-model="dialogVisible" :title="dialogTitle">
|
||||
<el-form ref="formRef" v-loading="formLoading" :model="formData" :rules="formRules" label-width="80px">
|
||||
|
||||
<el-form-item label="数据标签" prop="label">
|
||||
<el-input v-model="formData.label" placeholder="请输入数据标签" />
|
||||
</el-form-item>
|
||||
<el-form-item label="显示排序" prop="sort">
|
||||
<el-input-number v-model="formData.sort" :min="0" controls-position="right" />
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
</template>
|
||||
</Dialog>
|
||||
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -128,24 +122,24 @@
|
||||
import * as DictDataApi from '@/api/system/dict/dict.data'
|
||||
const huashuType = ref<DictDataApi.DictDataVO[]>([]) //
|
||||
const targetMenuId = ref('0')
|
||||
|
||||
|
||||
const dialogVisible = ref(false) // 弹窗的是否展示
|
||||
const dialogTitle = ref('新增分类') // 弹窗的标题
|
||||
const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
|
||||
const formData = ref({
|
||||
id: undefined,
|
||||
sort: undefined,
|
||||
label: '',
|
||||
value: '',
|
||||
dictType: '',
|
||||
// status: CommonStatusEnum.ENABLE,
|
||||
colorType: '',
|
||||
cssClass: '',
|
||||
remark: ''
|
||||
id: undefined,
|
||||
sort: undefined,
|
||||
label: '',
|
||||
value: '',
|
||||
dictType: '',
|
||||
// status: CommonStatusEnum.ENABLE,
|
||||
colorType: '',
|
||||
cssClass: '',
|
||||
remark: ''
|
||||
})
|
||||
const formRules = reactive({
|
||||
label: [{ required: true, message: '数据标签不能为空', trigger: 'blur' }],
|
||||
sort: [{ required: true, message: '数据顺序不能为空', trigger: 'blur' }],
|
||||
label: [{ required: true, message: '数据标签不能为空', trigger: 'blur' }],
|
||||
sort: [{ required: true, message: '数据顺序不能为空', trigger: 'blur' }],
|
||||
})
|
||||
|
||||
/** 客服话术 列表 */
|
||||
@ -179,36 +173,36 @@
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//新增分类
|
||||
const createType = () =>{
|
||||
const createType = () => {
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
|
||||
/** 提交表单 */
|
||||
const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
|
||||
const submitForm = async () => {
|
||||
// 校验表单
|
||||
if (!formRef) return
|
||||
const valid = await formRef.value.validate()
|
||||
if (!valid) return
|
||||
// 提交请求
|
||||
formLoading.value = true
|
||||
try {
|
||||
const data = formData.value as DictDataApi.DictDataVO
|
||||
await DictDataApi.createType(data)
|
||||
message.success(t('common.createSuccess'))
|
||||
dialogVisible.value = false
|
||||
// 发送操作成功的事件
|
||||
emit('success')
|
||||
queryParams.type = targetMenuId.value
|
||||
getList()
|
||||
getHuaShuTypeList()
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
// 校验表单
|
||||
if (!formRef) return
|
||||
const valid = await formRef.value.validate()
|
||||
if (!valid) return
|
||||
// 提交请求
|
||||
formLoading.value = true
|
||||
try {
|
||||
const data = formData.value as DictDataApi.DictDataVO
|
||||
await DictDataApi.createType(data)
|
||||
message.success(t('common.createSuccess'))
|
||||
dialogVisible.value = false
|
||||
// 发送操作成功的事件
|
||||
emit('success')
|
||||
queryParams.type = targetMenuId.value
|
||||
getList()
|
||||
getHuaShuTypeList()
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
const clickMenu = (id : string) => {
|
||||
console.log('1111111111', id)
|
||||
@ -284,9 +278,10 @@
|
||||
}
|
||||
|
||||
.menu-area {
|
||||
|
||||
width: 200px;
|
||||
height: 100vh;
|
||||
padding: 25px;
|
||||
background-color: white;
|
||||
width: 180px;
|
||||
height: 1000px;
|
||||
/* 固定高度 */
|
||||
overflow-y: hidden;
|
||||
/* 禁止滚动 */
|
||||
|
Loading…
Reference in New Issue
Block a user