weizong song
6 months ago
parent
e6b86e7696
commit
e5e9da422b
@ -0,0 +1,3 @@
|
||||
{
|
||||
"liveServer.settings.port": 5501
|
||||
}
|
||||
@ -0,0 +1,377 @@
|
||||
<template>
|
||||
<div class="branch-condition-settings">
|
||||
<div class="page-header">
|
||||
<h2>分支条件设置</h2>
|
||||
<el-button type="primary" @click="handleAdd">
|
||||
<el-icon><Plus /></el-icon>
|
||||
新增条件
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<div class="page-content">
|
||||
<el-table
|
||||
:data="conditionList"
|
||||
v-loading="loading"
|
||||
stripe
|
||||
border
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column type="index" label="#" width="60" />
|
||||
<el-table-column prop="name" label="条件名称" min-width="150" />
|
||||
<el-table-column label="可选项" min-width="300">
|
||||
<template #default="{ row }">
|
||||
<el-tag
|
||||
v-for="(option, index) in row.options_array"
|
||||
:key="index"
|
||||
style="margin-right: 8px; margin-bottom: 4px"
|
||||
>
|
||||
{{ option }}
|
||||
</el-tag>
|
||||
<span v-if="!row.options_array || row.options_array.length === 0" class="text-muted">
|
||||
暂无选项
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="sort_order" label="排序" width="80" align="center" />
|
||||
<el-table-column label="状态" width="100" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.is_active ? 'success' : 'info'">
|
||||
{{ row.is_active ? '启用' : '禁用' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column label="操作" width="200" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button size="small" @click="handleEdit(row)">编辑</el-button>
|
||||
<el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑对话框 -->
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
:title="dialogTitle"
|
||||
width="600px"
|
||||
@close="handleDialogClose"
|
||||
>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item label="条件名称" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入条件名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="可选项" prop="options">
|
||||
<div class="options-editor">
|
||||
<div
|
||||
v-for="(option, index) in formData.options"
|
||||
:key="index"
|
||||
class="option-item"
|
||||
>
|
||||
<el-input
|
||||
v-model="formData.options[index]"
|
||||
placeholder="请输入选项值"
|
||||
style="flex: 1"
|
||||
/>
|
||||
<el-button
|
||||
type="danger"
|
||||
size="small"
|
||||
:icon="Delete"
|
||||
@click="removeOption(index)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</div>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
:icon="Plus"
|
||||
@click="addOption"
|
||||
style="width: 100%; margin-top: 10px"
|
||||
>
|
||||
添加选项
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序顺序" prop="sort_order">
|
||||
<el-input-number
|
||||
v-model="formData.sort_order"
|
||||
:min="0"
|
||||
:max="9999"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="is_active">
|
||||
<el-switch v-model="formData.is_active" />
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" prop="description">
|
||||
<el-input
|
||||
v-model="formData.description"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请输入描述"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit" :loading="submitting">
|
||||
确定
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Plus, Delete } from '@element-plus/icons-vue'
|
||||
import { branchConditionAPI } from '@/utils/api'
|
||||
|
||||
const loading = ref(false)
|
||||
const submitting = ref(false)
|
||||
const dialogVisible = ref(false)
|
||||
const dialogTitle = ref('新增条件')
|
||||
const formRef = ref(null)
|
||||
const conditionList = ref([])
|
||||
const currentId = ref(null)
|
||||
|
||||
const formData = reactive({
|
||||
name: '',
|
||||
options: [''],
|
||||
sort_order: 0,
|
||||
is_active: true,
|
||||
description: ''
|
||||
})
|
||||
|
||||
const formRules = {
|
||||
name: [
|
||||
{ required: true, message: '请输入条件名称', trigger: 'blur' }
|
||||
],
|
||||
options: [
|
||||
{ required: true, message: '请至少添加一个选项', trigger: 'change' },
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (!value || value.length === 0) {
|
||||
callback(new Error('请至少添加一个选项'))
|
||||
} else if (value.some(opt => !opt || opt.trim() === '')) {
|
||||
callback(new Error('选项值不能为空'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
trigger: 'change'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
// 获取条件列表
|
||||
const fetchConditionList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const response = await branchConditionAPI.getList({ active_only: false })
|
||||
if (response.code === 0) {
|
||||
conditionList.value = response.data
|
||||
} else {
|
||||
ElMessage.error(response.msg || '获取条件列表失败')
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error('获取条件列表失败：' + error.message)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 新增
|
||||
const handleAdd = () => {
|
||||
currentId.value = null
|
||||
dialogTitle.value = '新增条件'
|
||||
resetForm()
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
// 编辑
|
||||
const handleEdit = (row) => {
|
||||
currentId.value = row.id
|
||||
dialogTitle.value = '编辑条件'
|
||||
formData.name = row.name
|
||||
formData.options = row.options_array && row.options_array.length > 0
|
||||
? [...row.options_array]
|
||||
: ['']
|
||||
formData.sort_order = row.sort_order
|
||||
formData.is_active = row.is_active
|
||||
formData.description = row.description || ''
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
// 删除
|
||||
const handleDelete = async (row) => {
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
`确定要删除条件"${row.name}"吗？`,
|
||||
'提示',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}
|
||||
)
|
||||
|
||||
const response = await branchConditionAPI.delete(row.id)
|
||||
if (response.code === 0) {
|
||||
ElMessage.success('删除成功')
|
||||
fetchConditionList()
|
||||
} else {
|
||||
ElMessage.error(response.msg || '删除失败')
|
||||
}
|
||||
} catch (error) {
|
||||
if (error !== 'cancel') {
|
||||
ElMessage.error('删除失败：' + error.message)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 提交表单
|
||||
const handleSubmit = async () => {
|
||||
if (!formRef.value) return
|
||||
|
||||
await formRef.value.validate(async (valid) => {
|
||||
if (!valid) return
|
||||
|
||||
// 过滤空选项
|
||||
const options = formData.options.filter(opt => opt && opt.trim() !== '')
|
||||
|
||||
if (options.length === 0) {
|
||||
ElMessage.warning('请至少添加一个选项')
|
||||
return
|
||||
}
|
||||
|
||||
submitting.value = true
|
||||
try {
|
||||
const data = {
|
||||
name: formData.name,
|
||||
options: options,
|
||||
sort_order: formData.sort_order,
|
||||
is_active: formData.is_active,
|
||||
description: formData.description
|
||||
}
|
||||
|
||||
let response
|
||||
if (currentId.value) {
|
||||
response = await branchConditionAPI.update(currentId.value, data)
|
||||
} else {
|
||||
response = await branchConditionAPI.create(data)
|
||||
}
|
||||
|
||||
if (response.code === 0) {
|
||||
ElMessage.success(currentId.value ? '更新成功' : '创建成功')
|
||||
dialogVisible.value = false
|
||||
fetchConditionList()
|
||||
} else {
|
||||
ElMessage.error(response.msg || '操作失败')
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error('操作失败：' + error.message)
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 添加选项
|
||||
const addOption = () => {
|
||||
formData.options.push('')
|
||||
}
|
||||
|
||||
// 删除选项
|
||||
const removeOption = (index) => {
|
||||
if (formData.options.length > 1) {
|
||||
formData.options.splice(index, 1)
|
||||
} else {
|
||||
ElMessage.warning('至少需要保留一个选项')
|
||||
}
|
||||
}
|
||||
|
||||
// 重置表单
|
||||
const resetForm = () => {
|
||||
formData.name = ''
|
||||
formData.options = ['']
|
||||
formData.sort_order = 0
|
||||
formData.is_active = true
|
||||
formData.description = ''
|
||||
formRef.value?.clearValidate()
|
||||
}
|
||||
|
||||
// 对话框关闭
|
||||
const handleDialogClose = () => {
|
||||
resetForm()
|
||||
currentId.value = null
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchConditionList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.branch-condition-settings {
|
||||
padding: 20px;
|
||||
background: #f5f7fa;
|
||||
min-height: calc(100vh - 120px);
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.page-header h2 {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.options-editor {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.option-item {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: #909399;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
:deep(.el-table) {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
:deep(.el-dialog__body) {
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue