feat: 功能完善，系统管理下的所有功能。
This commit is contained in:
tianyongbao
218
src/pages_mine/pages/system/config/addEdit.vue
Normal file
218
src/pages_mine/pages/system/config/addEdit.vue
Normal file
@@ -0,0 +1,218 @@
|
||||
<template>
|
||||
<view class="container" style="paddingBottom:1rpx;">
|
||||
<u-navbar
|
||||
leftIconSize="40rpx"
|
||||
leftIconColor="#333333"
|
||||
:title="title"
|
||||
>
|
||||
</u-navbar>
|
||||
<view class="section">
|
||||
<view class="section-title">{{ title }}</view>
|
||||
<view class="form-view">
|
||||
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="auto"
|
||||
:labelStyle="{ color: '#333333', fontSize: '30rpx' }">
|
||||
<u-form-item label="参数名称" prop="configName" required>
|
||||
<u--input v-model="form.configName" placeholder="请输入参数名称"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="参数键名" prop="configKey" required>
|
||||
<u--input v-model="form.configKey" placeholder="请输入参数键名"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="参数键值" prop="configValue" required>
|
||||
<u--input v-model="form.configValue" placeholder="请输入参数键值"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="系统内置" prop="typeName" @click="showTypePicker = true">
|
||||
<u--input v-model="typeName" disabled disabledColor="#ffffff" placeholder="请选择系统内置"
|
||||
inputAlign="right" border="none"></u--input>
|
||||
<template #right>
|
||||
<u-icon name="arrow-down"></u-icon>
|
||||
</template>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="备注" prop="remark" labelPosition="top">
|
||||
<u--textarea v-model="form.remark" placeholder="请输入备注" border="none" autoHeight inputAlign="right" count
|
||||
maxlength="500" style="padding:18rpx 0;"></u--textarea>
|
||||
</u-form-item>
|
||||
</u--form>
|
||||
<view class="form-btn">
|
||||
<u-button type="primary" text="提交" @click="submit"></u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
<u-picker itemHeight="88" :show="showTypePicker" :columns="typeList" keyName="dictLabel" @cancel="showTypePicker = false"
|
||||
@confirm="handleTypeConfirm"></u-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, getCurrentInstance } from 'vue'
|
||||
import { getConfig, addConfig, updateConfig } from '@/api/system/config'
|
||||
import { getDicts } from "@/api/system/dict/data"
|
||||
import { onLoad } from "@dcloudio/uni-app"
|
||||
|
||||
const { proxy } = getCurrentInstance()
|
||||
const typeList = ref([])
|
||||
const title = ref('添加参数配置')
|
||||
const showTypePicker = ref(false)
|
||||
const typeName = ref('')
|
||||
|
||||
const form = reactive({
|
||||
configId: undefined,
|
||||
configName: undefined,
|
||||
configKey: undefined,
|
||||
configValue: undefined,
|
||||
configType: 'Y',
|
||||
remark: undefined
|
||||
})
|
||||
|
||||
const rules = {
|
||||
configName: [
|
||||
{ required: true, message: '参数名称不能为空', trigger: ['blur', 'change'] }
|
||||
],
|
||||
configKey: [
|
||||
{ required: true, message: '参数键名不能为空', trigger: ['blur', 'change'] }
|
||||
],
|
||||
configValue: [
|
||||
{ required: true, message: '参数键值不能为空', trigger: ['blur', 'change'] }
|
||||
]
|
||||
}
|
||||
|
||||
onLoad((option) => {
|
||||
getDicts('sys_yes_no').then(res => {
|
||||
typeList.value = [res.data]
|
||||
})
|
||||
|
||||
if (option.id) {
|
||||
title.value = '修改参数配置'
|
||||
getDetail(option.id)
|
||||
} else {
|
||||
// 新增时默认显示类型
|
||||
setTimeout(() => {
|
||||
updateTypeName()
|
||||
}, 100)
|
||||
}
|
||||
})
|
||||
|
||||
// 获取详情
|
||||
function getDetail(id) {
|
||||
getConfig(id).then(res => {
|
||||
Object.assign(form, res.data)
|
||||
updateTypeName()
|
||||
})
|
||||
}
|
||||
|
||||
// 更新类型名称显示
|
||||
function updateTypeName() {
|
||||
if (typeList.value.length > 0 && typeList.value[0].length > 0) {
|
||||
const item = typeList.value[0].find(v => v.dictValue === form.configType)
|
||||
typeName.value = item ? item.dictLabel : ''
|
||||
}
|
||||
}
|
||||
|
||||
// 类型选择确认
|
||||
function handleTypeConfirm(e) {
|
||||
form.configType = e.value[0].dictValue
|
||||
typeName.value = e.value[0].dictLabel
|
||||
showTypePicker.value = false
|
||||
}
|
||||
|
||||
// 提交
|
||||
function submit() {
|
||||
console.log('submit 被调用')
|
||||
proxy.$refs['uForm'].validate().then(() => {
|
||||
console.log('验证通过', form.configId)
|
||||
if (form.configId) {
|
||||
updateConfig(form).then(() => {
|
||||
console.log('修改成功,将跳转')
|
||||
proxy.$refs['uToast'].show({
|
||||
message: '修改成功', complete() {
|
||||
console.log('complete 被调用,执行跳转')
|
||||
uni.navigateTo({ url: `/pages_mine/pages/system/config/list` })
|
||||
}
|
||||
})
|
||||
})
|
||||
} else {
|
||||
addConfig(form).then(() => {
|
||||
console.log('新增成功,将跳转')
|
||||
proxy.$refs['uToast'].show({
|
||||
message: '新增成功', complete() {
|
||||
console.log('complete 被调用,执行跳转')
|
||||
uni.navigateTo({ url: `/pages_mine/pages/system/config/list` })
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}).catch(() => {
|
||||
console.log('验证失败')
|
||||
proxy.$refs['uToast'].show({
|
||||
type: 'error',
|
||||
message: '请填写完整信息'
|
||||
})
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin: 24rpx;
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
overflow: hidden;
|
||||
|
||||
.section-title {
|
||||
padding: 16rpx 24rpx;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: #ffffff;
|
||||
line-height: 1.2;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 6rpx;
|
||||
height: 28rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 3rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.form-view {
|
||||
padding: 24rpx;
|
||||
|
||||
.form-btn {
|
||||
padding-top: 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.form-btn .u-button {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
|
||||
border: none !important;
|
||||
border-radius: 24rpx !important;
|
||||
height: 80rpx !important;
|
||||
box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.4) !important;
|
||||
}
|
||||
|
||||
.form-btn .u-button__text {
|
||||
font-size: 30rpx !important;
|
||||
font-weight: 500 !important;
|
||||
letter-spacing: 2rpx !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user