浅念
432 lines
12 KiB
Vue
432 lines
12 KiB
Vue
<template>
|
||
<div class="color-page">
|
||
<div class="color-toolbar boxshadow">
|
||
<div class="color-search-group">
|
||
<el-form-item label="关键字:" label-width="70px">
|
||
<el-input
|
||
style="min-width: 120px"
|
||
v-model="keyword"
|
||
placeholder="请输入关键字"
|
||
clearable
|
||
@keyup.enter="getMonthlyList"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" @click="getMonthlyList" v-ripple>搜索</el-button>
|
||
</el-form-item>
|
||
</div>
|
||
</div>
|
||
<div class="boxshadow">
|
||
<ElRow>
|
||
<div style="width: 12px"></div>
|
||
<ElCol :xs="24" :sm="12" :lg="6" class="el-col2">
|
||
<ElButton
|
||
@click="showDialog('add')"
|
||
v-ripple
|
||
v-if="hasAuth('classify_list@add')"
|
||
type="primary"
|
||
>
|
||
新增
|
||
</ElButton>
|
||
</ElCol>
|
||
</ElRow>
|
||
<ArtTable
|
||
ref="tableRef"
|
||
row-key="id"
|
||
:loading="loading"
|
||
:data="tableData"
|
||
:currentPage="pagination.currentPage"
|
||
:pageSize="pagination.pageSize"
|
||
:total="pagination.total"
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
>
|
||
<template #default>
|
||
<ElTableColumn label="名称" prop="name" min-width="120">
|
||
<template #default="scope">
|
||
<p>{{ scope.row.name }}</p>
|
||
</template>
|
||
</ElTableColumn>
|
||
<ElTableColumn label="icon" prop="icon" min-width="120">
|
||
<template #default="scope">
|
||
<i class="iconfont-sys" style="font-size: 20px" v-html="scope.row.icon"> </i>
|
||
</template>
|
||
</ElTableColumn>
|
||
<ElTableColumn label="排序" prop="sort" min-width="120" />
|
||
<ElTableColumn label="状态" prop="status" width="120">
|
||
<template #default="scope">
|
||
<ElTag :type="scope.row.status ? 'primary' : 'info'">{{
|
||
scope.row.status ? '启用' : '禁用'
|
||
}}</ElTag>
|
||
</template>
|
||
</ElTableColumn>
|
||
<ElTableColumn fixed="right" label="操作" width="200">
|
||
<template #default="scope">
|
||
<ElRow>
|
||
<div :class="['btn-text', 'bg-primary']" @click="addchild(scope.row)"><i class="iconfont-sys"></i></div>
|
||
<div :class="['btn-text', 'bg-secondary']" @click="showDialog('edit', scope.row)" v-if="hasAuth('classify_list@edit')"><i class="iconfont-sys"></i></div>
|
||
<div :class="['btn-text', 'bg-error']" @click="deleteMonthly(scope.row)" v-if="hasAuth('classify_list@del')"><i class="iconfont-sys"></i></div>
|
||
</ElRow>
|
||
</template>
|
||
</ElTableColumn>
|
||
</template>
|
||
</ArtTable>
|
||
</div>
|
||
|
||
<!-- 新增/编辑对话框 -->
|
||
<ElDialog
|
||
v-model="dialogVisible"
|
||
:title="dialogType === 'add' ? '新增' : '编辑'"
|
||
align-center
|
||
width="600px"
|
||
>
|
||
<ElForm ref="formRef" :model="form" :rules="rules" label-width="100px" class="form">
|
||
<ElFormItem label="名称" prop="name">
|
||
<ElInput v-model="form.name" placeholder="请输入名称" style="width: 100%" />
|
||
</ElFormItem>
|
||
<ElFormItem label="图标" prop="icon">
|
||
<ArtIconSelector v-model="form.icon" :iconType="iconType" width="100%" />
|
||
</ElFormItem>
|
||
<ElFormItem label="排序" prop="sort">
|
||
<ElInputNumber v-model="form.sort" :min="0" :max="999999" style="width: 100%" />
|
||
</ElFormItem>
|
||
<ElFormItem label="状态" prop="status">
|
||
<ElSwitch v-model="form.status" :active-value="1" :inactive-value="0" />
|
||
</ElFormItem>
|
||
</ElForm>
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<ElButton @click="dialogVisible = false">取消</ElButton>
|
||
<ElButton type="primary" @click="handleSubmit(formRef)">提交</ElButton>
|
||
</div>
|
||
</template>
|
||
</ElDialog>
|
||
<!-- 新增/编辑子级对话框 -->
|
||
<ElDialog
|
||
v-model="dialogVisiblechild"
|
||
:title="dialogTypechild === 'add' ? '新增下级分类' : '编辑分类'"
|
||
align-center
|
||
width="600px"
|
||
>
|
||
<ElForm ref="formRef" :model="formchild" :rules="rules" label-width="100px" class="form">
|
||
<ElFormItem label="名称" prop="name">
|
||
<ElInput v-model="formchild.parent_id" type="hidden" />
|
||
<ElInput v-model="formchild.name" placeholder="请输入名称" style="width: 100%" />
|
||
</ElFormItem>
|
||
<ElFormItem label="排序" prop="sort">
|
||
<ElInputNumber v-model="formchild.sort" :min="0" :max="999999" style="width: 100%" />
|
||
</ElFormItem>
|
||
<ElFormItem label="状态" prop="status">
|
||
<ElSwitch v-model="formchild.status" :active-value="1" :inactive-value="0" />
|
||
</ElFormItem>
|
||
<ElFormItem>
|
||
<el-text class="mx-1" type="danger"
|
||
>注意：当该分类有子分类时看板将不会展示该分类下内容</el-text
|
||
>
|
||
</ElFormItem>
|
||
</ElForm>
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<ElButton @click="dialogVisiblechild = false">取消</ElButton>
|
||
<ElButton type="primary" @click="handlechildSubmit(formRef)">提交</ElButton>
|
||
</div>
|
||
</template>
|
||
</ElDialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||
import type { FormInstance, FormRules } from 'element-plus'
|
||
import { classifyService } from '@/api/classify'
|
||
import { useAuth } from '@/composables/useAuth'
|
||
import { IconTypeEnum } from '@/enums/appEnum'
|
||
const { hasAuth } = useAuth()
|
||
defineOptions({ name: 'AdminKpiMonthly' })
|
||
const iconType = ref(IconTypeEnum.UNICODE)
|
||
// 响应式数据
|
||
const loading = ref(false)
|
||
const dialogVisible = ref(false)
|
||
const dialogType = ref('add')
|
||
const formRef = ref<FormInstance>()
|
||
const keyword = ref<string>('')
|
||
|
||
const dialogVisiblechild = ref(false)
|
||
const dialogTypechild = ref('add')
|
||
const formchild = reactive<any>({
|
||
id: '',
|
||
parent_id: '',
|
||
icon: '',
|
||
name: '',
|
||
sort: 0,
|
||
status: 1
|
||
})
|
||
|
||
// 表单数据
|
||
const form = reactive<any>({
|
||
id: '',
|
||
name: '',
|
||
icon: '',
|
||
sort: 0,
|
||
status: 1
|
||
})
|
||
|
||
// 表单验证规则
|
||
const rules = reactive<FormRules>({
|
||
name: [{ required: true, message: '请输入名称', trigger: 'blur' }]
|
||
})
|
||
|
||
// 分页数据
|
||
const pagination = reactive({
|
||
currentPage: 1,
|
||
pageSize: 10,
|
||
total: 0
|
||
})
|
||
|
||
// 表格数据
|
||
const tableData = ref<any[]>([])
|
||
const tableRef = ref()
|
||
|
||
// 生命周期
|
||
onMounted(() => {
|
||
getMonthlyList()
|
||
})
|
||
|
||
// 监听搜索条件变化
|
||
watch([keyword], () => {
|
||
pagination.currentPage = 1
|
||
getMonthlyList()
|
||
})
|
||
|
||
// 获取月度业绩列表
|
||
const getMonthlyList = async () => {
|
||
loading.value = true
|
||
try {
|
||
const { currentPage, pageSize } = pagination
|
||
const params = {
|
||
current: currentPage,
|
||
size: pageSize,
|
||
keyword: keyword.value
|
||
}
|
||
|
||
const data = await classifyService.getclassifytreeList(params)
|
||
tableData.value = data || []
|
||
// Object.assign(pagination, { currentPage: current, pageSize: size, total })
|
||
} catch (error) {
|
||
console.error('获取列表失败:', error)
|
||
ElMessage.error('获取列表失败')
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
// 处理分页变化
|
||
const handleSizeChange = (newPageSize: number) => {
|
||
pagination.pageSize = newPageSize
|
||
getMonthlyList()
|
||
}
|
||
|
||
const handleCurrentChange = (newCurrentPage: number) => {
|
||
pagination.currentPage = newCurrentPage
|
||
getMonthlyList()
|
||
}
|
||
|
||
// 显示对话框
|
||
const showDialog = (type: string, row?: any) => {
|
||
if (type === 'edit' && row && row.parent_id != 0) {
|
||
dialogVisiblechild.value = true
|
||
dialogTypechild.value = type
|
||
Object.assign(formchild, {
|
||
id: row.id,
|
||
name: row.name,
|
||
parent_id: row.parent_id,
|
||
icon: row.icon,
|
||
sort: row.sort,
|
||
status: row.status
|
||
})
|
||
} else {
|
||
dialogVisible.value = true
|
||
dialogType.value = type
|
||
if (type === 'edit' && row) {
|
||
// 编辑模式
|
||
Object.assign(form, {
|
||
id: row.id,
|
||
name: row.name,
|
||
icon: row.icon,
|
||
sort: row.sort,
|
||
status: row.status
|
||
})
|
||
} else {
|
||
// 新增模式
|
||
Object.assign(form, {
|
||
id: '',
|
||
name: '',
|
||
icon: '',
|
||
sort: 0,
|
||
status: 1
|
||
})
|
||
}
|
||
}
|
||
}
|
||
//添加子级
|
||
const addchild = (row: any) => {
|
||
dialogVisiblechild.value = true
|
||
dialogTypechild.value = 'add'
|
||
Object.assign(formchild, {
|
||
id: '',
|
||
parent_id: row.id,
|
||
icon: '',
|
||
name: '',
|
||
sort: 0,
|
||
status: 1
|
||
})
|
||
}
|
||
const handlechildSubmit = async (formEl: FormInstance | undefined) => {
|
||
if (!formEl) return
|
||
await formEl.validate(async (valid) => {
|
||
if (!valid) return
|
||
try {
|
||
if (dialogTypechild.value === 'add') {
|
||
const { message } = await classifyService.addclassify({
|
||
name: formchild.name,
|
||
icon: formchild.icon,
|
||
sort: formchild.sort,
|
||
status: formchild.status,
|
||
parent_id: formchild.parent_id
|
||
})
|
||
ElMessage.success(message)
|
||
dialogVisiblechild.value = false
|
||
getMonthlyList()
|
||
} else {
|
||
const { message } = await classifyService.editclassify({
|
||
id: formchild.id,
|
||
name: formchild.name,
|
||
icon: formchild.icon,
|
||
sort: formchild.sort,
|
||
status: formchild.status,
|
||
parent_id: formchild.parent_id
|
||
})
|
||
ElMessage.success(message)
|
||
dialogVisiblechild.value = false
|
||
getMonthlyList()
|
||
}
|
||
} catch (error) {
|
||
console.error('添加失败:', error)
|
||
}
|
||
})
|
||
}
|
||
// 编辑子级
|
||
// 删除月度业绩
|
||
const deleteMonthly = (row: any) => {
|
||
ElMessageBox.confirm('确定删除该记录吗？', '删除确认', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'error'
|
||
}).then(async () => {
|
||
try {
|
||
const { message } = await classifyService.deleteclassify({ id: row.id })
|
||
ElMessage.success(message)
|
||
getMonthlyList()
|
||
} catch (error) {
|
||
console.error('删除失败:', error)
|
||
ElMessage.error('删除失败')
|
||
}
|
||
})
|
||
}
|
||
|
||
// 提交表单
|
||
const handleSubmit = async (formEl: FormInstance | undefined) => {
|
||
if (!formEl) return
|
||
await formEl.validate(async (valid) => {
|
||
if (!valid) return
|
||
try {
|
||
if (dialogType.value === 'add') {
|
||
// 新增
|
||
const { message } = await classifyService.addclassify({
|
||
name: form.name,
|
||
icon: form.icon,
|
||
sort: form.sort,
|
||
status: form.status
|
||
})
|
||
ElMessage.success(message)
|
||
} else {
|
||
// 编辑
|
||
const { message } = await classifyService.editclassify({
|
||
id: form.id,
|
||
name: form.name,
|
||
icon: form.icon,
|
||
sort: form.sort,
|
||
status: form.status
|
||
})
|
||
ElMessage.success(message)
|
||
}
|
||
dialogVisible.value = false
|
||
getMonthlyList()
|
||
} catch (error) {
|
||
console.error('操作失败:', error)
|
||
ElMessage.error('操作失败')
|
||
}
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
:deep(.el-table__empty-block) {
|
||
height: 100% !important;
|
||
min-height: 200px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.color-page {
|
||
background: var(--art-main-bg-color);
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.color-toolbar {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 16px;
|
||
padding: 20px 20px;
|
||
background: var(--art-main-bg-color);
|
||
}
|
||
|
||
.color-search-group {
|
||
display: flex;
|
||
gap: 12px;
|
||
align-items: center;
|
||
}
|
||
|
||
.form {
|
||
padding: 20px 0;
|
||
}
|
||
|
||
.dialog-footer {
|
||
text-align: right;
|
||
}
|
||
|
||
.el-col2 {
|
||
margin-bottom: 16px;
|
||
}
|
||
.btn-text {
|
||
display: inline-block;
|
||
min-width: 34px;
|
||
height: 34px;
|
||
padding: 0 10px;
|
||
margin-right: 10px;
|
||
font-size: 13px;
|
||
line-height: 34px;
|
||
color: #666;
|
||
cursor: pointer;
|
||
background-color: rgba(var(--art-gray-200-rgb), 0.7);
|
||
border-radius: 6px;
|
||
|
||
&:hover {
|
||
color: var(--main-color);
|
||
background-color: rgba(var(--art-gray-300-rgb), 0.5);
|
||
}
|
||
}
|
||
</style>
|