material_admin/src/views/system/config/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
        <el-col :span="24" class="one">
          <cSearch :is_title="false"></cSearch>
        </el-col>
        <el-col :span="24" class="two">
          <cForm :span="24" :fields="fields" :form="form" :rules="rules" @save="toSave" label-width="auto">
            <template #logo_url="{ item }">
              <cUpload
                :model="item.model"
                :limit="1"
                url="/files/material/config/upload"
                :list="form[item.model]"
                listType="picture-card"
                @change="onUpload"
              ></cUpload>
            </template>
          </cForm>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
// 基础
import type { Ref } from 'vue';
import { ref, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import type { FormRules } from 'element-plus';
// 接口
import { ConfigStore } from '@/stores/config';
import type { IQueryResult } from '@/util/types.util';
const configAxios = ConfigStore();
// 加载中
const loading: Ref<any> = ref(false);
// 表单
let form: Ref<any> = ref({});
let fields: Ref<any[]> = ref([{ label: 'logo', model: 'logo_url', custom: true }]);
const rules = reactive<FormRules>({});
// 请求
onMounted(async () => {
  loading.value = true;
  await search();
  loading.value = false;
});
const search = async () => {
  let res: IQueryResult = await configAxios.query();
  if (res.errcode == '0') {
    form.value = res.data;
  }
};
const onUpload = (e: { model: string; value: Array<[]> }) => {
  const { model, value } = e;
  form.value[model] = value;
};
const toSave = async (data) => {
  let res: IQueryResult;
  if (data._id) res = await configAxios.update(data);
  else res = await configAxios.create(data);
  if (res.errcode == 0) {
    ElMessage({ type: `success`, message: `维护信息成功` });
    search();
  }
};
</script>
<style scoped lang="scss"></style>