|
|
@@ -135,6 +135,58 @@
|
|
|
<el-form-item label="备注" prop="remark">
|
|
|
<el-input v-model="form.remark" placeholder="请输入备注" />
|
|
|
</el-form-item>
|
|
|
+ <!-- <el-form-item label="Logo" prop="logo">
|
|
|
+ <div style="display: flex; align-items: center; gap: 12px">
|
|
|
+ 当前Logo预览或上传区域
|
|
|
+ <div v-if="form.logo" style="flex-shrink: 0">
|
|
|
+ <el-image
|
|
|
+ :src="form.logo"
|
|
|
+ :preview-disabled="true"
|
|
|
+ fit="cover"
|
|
|
+ style="width: 200px; height: 200px; border-radius: 4px; border: 1px solid #dcdfe6"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ v-else
|
|
|
+ @click="openLogoSelector"
|
|
|
+ style="
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ border: 1px dashed #dcdfe6;
|
|
|
+ border-radius: 4px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #999;
|
|
|
+ font-size: 12px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s;
|
|
|
+ "
|
|
|
+ class="logo-upload-area"
|
|
|
+ >
|
|
|
+ 点击上传
|
|
|
+ </div>
|
|
|
+
|
|
|
+ 建议尺寸和清除按钮
|
|
|
+ <div style="flex: 1">
|
|
|
+ <div style="color: #909399; font-size: 12px; line-height: 1.4">
|
|
|
+ 建议尺寸:200×200px<br />
|
|
|
+ 支持 JPG/PNG 格式
|
|
|
+ </div>
|
|
|
+ <el-button v-if="form.logo" @click="clearLogo" size="small" style="margin-top: 8px">清除</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ Logo选择器对话框
|
|
|
+ <FileSelector
|
|
|
+ v-model="logoSelectorVisible"
|
|
|
+ title="选择品牌Logo"
|
|
|
+ :allowed-types="[1]"
|
|
|
+ :multiple="false"
|
|
|
+ :allow-upload="true"
|
|
|
+ @confirm="handleLogoSelected"
|
|
|
+ />
|
|
|
+ </el-form-item> -->
|
|
|
</el-form>
|
|
|
<template #footer>
|
|
|
<div class="dialog-footer">
|
|
|
@@ -158,6 +210,7 @@ import {
|
|
|
syncTenantDict,
|
|
|
syncTenantConfig
|
|
|
} from '@/api/system/tenant';
|
|
|
+import FileSelector from '@/components/FileSelector/index.vue';
|
|
|
import { selectTenantPackage } from '@/api/system/tenantPackage';
|
|
|
import { useUserStore } from '@/store/modules/user';
|
|
|
import { TenantForm, TenantQuery, TenantVO } from '@/api/system/tenant/types';
|
|
|
@@ -232,6 +285,20 @@ const data = reactive<PageData<TenantForm, TenantQuery>>({
|
|
|
|
|
|
const { queryParams, form, rules } = toRefs(data);
|
|
|
|
|
|
+// Logo选择器相关
|
|
|
+const logoSelectorVisible = ref(false);
|
|
|
+
|
|
|
+// 监听对话框关闭,清理表单验证状态
|
|
|
+watch(logoSelectorVisible, (newVal) => {
|
|
|
+ if (!newVal) {
|
|
|
+ // 对话框关闭后清理可能的表单验证状态
|
|
|
+ nextTick(() => {
|
|
|
+ queryFormRef.value?.clearValidate();
|
|
|
+ tenantFormRef.value?.clearValidate();
|
|
|
+ });
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
/** 查询所有租户套餐 */
|
|
|
const getTenantPackage = async () => {
|
|
|
const res = await selectTenantPackage();
|
|
|
@@ -247,6 +314,43 @@ const getList = async () => {
|
|
|
loading.value = false;
|
|
|
};
|
|
|
|
|
|
+// 打开Logo选择器
|
|
|
+const openLogoSelector = () => {
|
|
|
+ // 在打开前清理表单验证状态
|
|
|
+ nextTick(() => {
|
|
|
+ queryFormRef.value?.clearValidate();
|
|
|
+ tenantFormRef.value?.clearValidate();
|
|
|
+ });
|
|
|
+ logoSelectorVisible.value = true;
|
|
|
+};
|
|
|
+
|
|
|
+// 清除Logo
|
|
|
+const clearLogo = () => {
|
|
|
+ // form.value.logo = '';
|
|
|
+ ElMessage.success('Logo已清除');
|
|
|
+};
|
|
|
+
|
|
|
+// Logo选择处理
|
|
|
+const handleLogoSelected = (files: any[]) => {
|
|
|
+ if (files && files.length > 0) {
|
|
|
+ const file = files[0]; // 取第一个文件
|
|
|
+ if (file && (file.url || file.path)) {
|
|
|
+ // form.value.logo = file.url || file.path;
|
|
|
+ ElMessage.success('Logo选择成功');
|
|
|
+
|
|
|
+ // 选择完成后清理表单验证状态
|
|
|
+ nextTick(() => {
|
|
|
+ queryFormRef.value?.clearValidate();
|
|
|
+ tenantFormRef.value?.clearValidate();
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ ElMessage.error('请选择有效的图片文件');
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ ElMessage.error('请选择有效的图片文件');
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
// 租户套餐状态修改
|
|
|
const handleStatusChange = async (row: TenantVO) => {
|
|
|
const text = row.status === '0' ? '启用' : '停用';
|