intc-vue-h5/src/pages_mine/pages/system/config/addEdit.vue

<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="180rpx"
          :labelStyle="{ color: '#333333', fontSize: '30rpx', marginRight: '24rpx' }">
          <u-form-item label="参数名称" prop="configName" required>
            <u--input v-model="form.configName" placeholder="请输入参数名称"
              inputAlign="left" :customStyle="inputBaseStyle"></u--input>
          </u-form-item>

          <u-form-item label="参数键名" prop="configKey" required>
            <u--input v-model="form.configKey" placeholder="请输入参数键名"
              inputAlign="left" :customStyle="inputBaseStyle"></u--input>
          </u-form-item>

          <u-form-item label="参数键值" prop="configValue" required>
            <u--input v-model="form.configValue" placeholder="请输入参数键值"
              inputAlign="left" :customStyle="inputBaseStyle"></u--input>
          </u-form-item>

          <u-form-item label="系统内置" prop="typeName" @click="showTypePicker = true">
            <view class="input-with-arrow">
              <u--input v-model="typeName" readonly disabledColor="#ffffff" placeholder="请选择系统内置"
                inputAlign="left" :customStyle="inputBaseStyle"></u--input>
              <text class="arrow-icon">▼</text>
            </view>
          </u-form-item>

          <u-form-item label="备注" prop="remark" labelPosition="top">
            <u--textarea v-model="form.remark" placeholder="请输入备注" autoHeight inputAlign="left" count
              maxlength="500" style="border: 2rpx solid #dcdfe6 !important; height: 160rpx;"></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 inputBaseStyle = {
  background: '#ffffff',
  border: '2rpx solid #dcdfe6',
  borderRadius: '8rpx',
  padding: '0 24rpx',
  height: '68rpx',
  width: '100%',
  boxSizing: 'border-box'
}

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>