vue3 重构：配置管理，新增表单

9ef85e14 · YunaiV · 64b249e7 · 9ef85e14 · 9ef85e14 · 9ef85e14
Commit 9ef85e14 authored Mar 08, 2023 by YunaiV
Show whitespace changes
Inline Side-by-side

Showing with 38 additions and 38 deletions

src/api/infra/config/index.ts
+1 -1

src/views/infra/config/form.vue
+33 -33

src/views/infra/config/index.vue
+4 -4

No files found.
--- a/src/api/infra/config/index.ts
+++ b/src/api/infra/config/index.ts
@@ -32,7 +32,7 @@ export const getConfigPage = (params: ConfigPageReqVO) => {
 }
 // 查询参数详情
-export const getConfigApi = (id: number) => {
+export const getConfig = (id: number) => {
  return request.get({ url: '/infra/config/get?id=' + id })
 }

--- a/src/views/infra/config/form.vue
+++ b/src/views/infra/config/form.vue
 <template>
-  <XModal :title="modelTitle" :loading="modelLoading" v-model="modelVisible">
+  <!-- TODO 芋艿：Dialog 貌似高度不太对劲 -->
-    <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
+  <Dialog :title="modelTitle" v-model="modelVisible" :loading="modelLoading">
+    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px">
      <el-form-item label="参数分类" prop="category">
-        <el-input v-model="form.category" placeholder="请输入参数分类" />
+        <el-input v-model="formData.category" placeholder="请输入参数分类" />
      </el-form-item>
      <el-form-item label="参数名称" prop="name">
-        <el-input v-model="form.name" placeholder="请输入参数名称" />
+        <el-input v-model="formData.name" placeholder="请输入参数名称" />
      </el-form-item>
      <el-form-item label="参数键名" prop="key">
-        <el-input v-model="form.key" placeholder="请输入参数键名" />
+        <el-input v-model="formData.key" placeholder="请输入参数键名" />
      </el-form-item>
      <el-form-item label="参数键值" prop="value">
-        <el-input v-model="form.value" placeholder="请输入参数键值" />
+        <el-input v-model="formData.value" placeholder="请输入参数键值" />
      </el-form-item>
      <el-form-item label="是否可见" prop="visible">
        <!-- TODO 芋艿：改成组件 -->
-        <el-radio-group v-model="form.visible">
+        <el-radio-group v-model="formData.visible">
          <el-radio :key="true" :label="true">是</el-radio>
          <el-radio :key="false" :label="false">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
-        <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+        <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="modelLoading = false">取 消</el-button>
+        <el-button @click="modelVisible = false">取 消</el-button>
      </div>
    </template>
-  </XModal>
+  </Dialog>
 </template>
 <script setup lang="ts">
+import * as ConfigApi from '@/api/infra/config'
 // import type { FormExpose } from '@/components/Form'
 import * as PostApi from '@/api/system/post'
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
+// const { proxy } = getCurrentInstance()
 const modelVisible = ref(false) // 弹窗的是否展示
 const modelTitle = ref('') // 弹窗的标题
 const modelLoading = ref(false) // 弹窗的 Loading 加载
-const actionType = ref('') // 操作类型：create - 新增；update - 修改
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
-const actionLoading = ref(false) // 操作按钮的 Loading 加载
+const formLoading = ref(false) // 操作按钮的 Loading 加载
-const formRef = ref() // 表单的 Ref
+let formRef = ref() // 表单的 Ref
-const form = reactive({
+const formData = reactive({
  id: undefined,
  category: undefined,
  name: undefined,
@@ -53,7 +56,7 @@ const form = reactive({
  visible: true,
  remark: undefined
 })
-const rules = reactive({
+const formRules = reactive({
  category: [{ required: true, message: '参数分类不能为空', trigger: 'blur' }],
  name: [{ required: true, message: '参数名称不能为空', trigger: 'blur' }],
  key: [{ required: true, message: '参数键名不能为空', trigger: 'blur' }],
@@ -67,16 +70,12 @@ const openModal = async (type: string, id?: number) => {
  modelVisible.value = true
  modelLoading.value = true
  modelTitle.value = t('action.' + type)
-  actionType.value = type
+  formType.value = type
  // 设置数据
  resetForm()
  if (id) {
-    // const res = await PostApi.getPostApi(id)
+    const data = await ConfigApi.getConfig(id)
-    // if (type === 'update') {
+    Object.assign(formData, data)
-    //   unref(formRef)?.setValues(res)
-    // } else if (type === 'detail') {
-    //   detailData.value = res
-    // }
  }
  modelLoading.value = false
 }
@@ -91,10 +90,10 @@ const submitForm = async () => {
  const valid = await elForm.validate()
  if (!valid) return
  // 提交请求
-  actionLoading.value = true
+  formLoading.value = true
  try {
    const data = unref(formRef)?.formModel as PostApi.PostVO
-    if (actionType.value === 'create') {
+    if (formType.value === 'create') {
      await PostApi.createPostApi(data)
      message.success(t('common.createSuccess'))
    } else {
@@ -104,19 +103,20 @@ const submitForm = async () => {
    modelVisible.value = false
    emit('success')
  } finally {
-    actionLoading.value = false
+    formLoading.value = false
  }
 }
 /** 重置表单 */
 const resetForm = () => {
-  form.id = undefined
+  formData.id = undefined
-  form.category = undefined
+  formData.category = undefined
-  form.name = undefined
+  formData.name = undefined
-  form.key = undefined
+  formData.key = undefined
-  form.value = undefined
+  formData.value = undefined
-  form.visible = true
+  formData.visible = true
-  form.remark = undefined
+  formData.remark = undefined
-  formRef.value.resetFields()
+  // proxy.$refs['formRef'].resetFields()
+  // formRef.value.resetFields() // TODO 芋艿：为什么拿不到
 }
 </script>
--- a/src/views/infra/config/index.vue
+++ b/src/views/infra/config/index.vue
@@ -3,7 +3,7 @@
    <!-- 搜索工作栏 -->
    <el-form
      :model="queryParams"
-      ref="queryForm"
+      ref="queryFormRef"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
@@ -65,7 +65,7 @@
          type="primary"
          plain
          icon="el-icon-plus"
-          @click="handleAdd"
+          @click="openModal('create')"
          v-hasPermi="['infra:config:create']"
        >
          新增
@@ -160,7 +160,7 @@ const queryParams = reactive({
  type: undefined,
  createTime: []
 })
-const queryForm = ref() // 搜索的表单
+const queryFormRef = ref() // 搜索的表单
 /** 搜索按钮操作 */
 const handleQuery = () => {
@@ -182,7 +182,7 @@ const getList = async () => {
 /** 重置按钮操作 */
 const resetQuery = () => {
-  queryForm.value.resetFields()
+  queryFormRef.value.resetFields()
  handleQuery()
 }