smartai2dian0/src/modules/permission/resource/ResourceForm.vue

<template>
  <a-form :model="resource_form" layout="horizontal">
    <a-form-item field="parentName" label="上级资源" disabled>
      <a-input v-model="resource_form.parentName" />
    </a-form-item>
    <a-form-item field="status" label="资源状态">
      <a-switch checked-value="0" unchecked-value="1" v-model="resource_form.status"></a-switch>
    </a-form-item>
    <a-form-item field="menuName" label="资源名称"
      :rules="[{ required: true, message: '资源名称必填' }, { maxLength: 50, message: '长度不超过50' }]">
      <a-input v-model="resource_form.menuName" />
    </a-form-item>
    <a-form-item field="menuName" label="资源图标">
      <Upload :action="uploadAction" :limit="1" :url="resource_form.icon" @update:fileList="updateFileList"
        @success="handleSuccess"></Upload>
    </a-form-item>
    <a-form-item field="menuType" label="资源类型" :rules="[{ required: true, message: '资源类型必填' }]">
      <a-select v-model="resource_form.menuType" :options="options" :field-names="fieldNames"
        :style="{ width: '320px' }" placeholder="请选择" />
    </a-form-item>
    <a-form-item field="description" label="提示词">
      <a-input v-model="resource_form.description" placeholder="请输入提示词" />
    </a-form-item>
    <a-form-item field="perms" label="资源控制权限字符"
      :rules="[{ required: true, message: '资源控制权限字符必填' }, { maxLength: 50, message: '长度不超过50' }]">
      <a-input v-model="resource_form.perms" />
    </a-form-item>
    <a-form-item field="component" label="资源地址" style="align: start"
      :rules="[{ required: true, message: '资源地址必填' }, { maxLength: 50, message: '长度不超过50' }]">
      <a-input v-model="resource_form.component" />
    </a-form-item>
    <a-form-item>
      <a-space>
        <slot name="actions"></slot>
      </a-space>
    </a-form-item>
  </a-form>
</template>

<script setup>
import { toRefs } from 'vue';
import Upload from './Upload.vue';

const uploadAction = '/api/v1/llm/upload'; // 替换为你的上传API
const fileList = ref([]);
const imageUrls = ref([]);

// 接收父组件传入的参数
const props = defineProps({
  resource_form: {
    type: Object,
    required: true,
    default: () => ({
      parentName: '',
      status: 0,
      deptName: '',
      leader: '',
      phone: '',
      address: ''
    })
  }
});

// 将 props 解构
const { resource_form } = toRefs(props);

const updateFileList = (newFileList) => {
  fileList.value = newFileList;
};

const handleSuccess = (urls) => {
  uploadUrl.value = urls;

  const urlsArr = urls.map((url) => {
    return httpUrl + url;
  });
  imageUrls.value = urlsArr; // 拿到上传的图片地址
};

</script>

<style lang="css" scoped></style>