horse soft 基础框架前端界面
autumnal_wind@yeah.net
2024-05-24 de658845a80a29d1ca0c77502a22bb060a8e00e0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<template>
  <div class="p-2">
    <dialog :title="dialog.title" :model="dialog.visible" width="500px">
      <el-form ref="configFormRef" :model="formData" :rules="rules" label-width="80px">
        <el-form-item label="参数名称" prop="configName">
          <el-input v-model="formData.configName" placeholder="请输入参数名称"/>
        </el-form-item>
        <el-form-item label="参数键名" prop="configKey">
          <el-input v-model="formData.configKey" placeholder="请输入参数键名"/>
        </el-form-item>
        <el-form-item label="参数键值" prop="configValue">
          <el-input v-model="formData.configValue" placeholder="请输入参数键值"/>
        </el-form-item>
        <el-form-item label="系统内置" prop="configType">
          <el-radio-group v-model="formData.configType">
            <el-radio v-for="dict in sys_yes_no" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="formData.remark" type="textarea" placeholder="请输入内容"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </dialog>
  </div>
</template>
 
<script setup lang="ts">
// 模块导入
import {ConfigForm} from "@/api/system/config/types";
import {getConfig} from "@/api/system/config";
 
 
// 接收父组件传入属性
// const props = defineProps({})
 
// 当前组件属性
const dialog = reactive<DialogOption>({
  visible: false,
  title: ''
});
// 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
const formLoading = ref(false)
// 表单的类型:create - 新增;update - 修改
const formType = ref('')
const configFormRef = ref<ElFormInstance>();
const formData = ref<ConfigForm>({
  configId: undefined,
  configName: '',
  configKey: '',
  configValue: '',
  configType: "Y",
  remark: ''
})
// 当前组件方法
const open = async (type: string, id?: number) => {
  dialog.visible = true
  dialog.title = type
  formType.value = type
  // resetForm()
  // 修改时,设置数据
  if (id) {
    formLoading.value = true
    try {
      const res = await getConfig(id);
      Object.assign(formData.value, res.data);
    } finally {
      formLoading.value = false
    }
    // } else {
    //   formData.value.ownerUserId = userId
    // }
  }
}
 
// 传回给父组件的属性与方法
// 提供 open 方法,用于打开弹窗
  defineExpose({open})
 
// 触发父组件的事件
// const emits = defineEmits([])
 
// 初始化
</script>
 
<style scoped lang="scss">
 
</style>