增加资质界面

src/views/basicSettings/tenants/components/detail.vue

@@ -0,0 +1,94 @@
+<template>
+    <el-drawer
+      v-model="visible"
+      title="租户详细信息"
+      size="600px"
+      @closed="handleClosed"
+    >
+      <div v-loading="loading" class="detail-container">
+        <el-descriptions :column="1" border>
+          <el-descriptions-item label="租户名称">
+            <span class="detail-value">{{ detailData.tenant_name }}</span>
+          </el-descriptions-item>
+          <el-descriptions-item label="租户编码">
+            <el-tag type="info" effect="plain">{{ detailData.tenant_code }}</el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="联系人">
+            {{ detailData.contact_person || '-' }}
+          </el-descriptions-item>
+          <el-descriptions-item label="联系电话">
+            {{ detailData.contact_phone || '-' }}
+          </el-descriptions-item>
+          <el-descriptions-item label="电子邮箱">
+            {{ detailData.contact_email || '-' }}
+          </el-descriptions-item>
+          <el-descriptions-item label="租户状态">
+            <el-tag :type="detailData.status === 1 ? 'success' : 'danger'">
+              {{ detailData.status === 1 ? '启用' : '禁用' }}
+            </el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="租户地址">
+            {{ detailData.address || '-' }}
+          </el-descriptions-item>
+          <el-descriptions-item label="创建时间">
+            {{ detailData.create_time || '-' }}
+          </el-descriptions-item>
+        </el-descriptions>
+  
+        <div class="footer-actions">
+          <el-button @click="visible = false">关闭</el-button>
+        </div>
+      </div>
+    </el-drawer>
+  </template>
+  
+  <script setup lang="ts">
+  import { ref } from 'vue';
+  import { getTenantDetail } from '@/api/tenant';
+  
+  const visible = ref(false);
+  const loading = ref(false);
+  const detailData = ref<any>({});
+  
+  // 暴露给父组件的方法
+  const open = async (id: number) => {
+    visible.value = true;
+    loading.value = true;
+    try {
+      const res = await getTenantDetail(id);
+      if (res.code === 200) {
+        detailData.value = res.data;
+      }
+    } catch (error) {
+      console.error('获取详情失败', error);
+    } finally {
+      loading.value = false;
+    }
+  };
+  
+  const handleClosed = () => {
+    detailData.value = {};
+  };
+  
+  // 必须暴露给外部
+  defineExpose({ open });
+  </script>
+  
+  <style scoped>
+  .detail-container {
+    padding: 10px 20px;
+  }
+  .detail-value {
+    font-weight: bold;
+    color: #333;
+  }
+  .footer-actions {
+    margin-top: 30px;
+    display: flex;
+    justify-content: flex-end;
+  }
+  :deep(.el-descriptions__label) {
+    width: 120px;
+    background-color: #f5f7fa;
+  }
+  </style>

src/views/basicSettings/tenants/components/qualification.vue

@@ -0,0 +1,166 @@
+<template>
+    <el-dialog v-model="visible" title="资质文件管理" width="650px" destroy-on-close>
+      <el-form 
+        ref="formRef" 
+        :model="formData" 
+        :rules="rules" 
+        label-width="110px" 
+        v-loading="loading"
+        style="padding: 10px 20px"
+      >
+        <el-form-item label="租户名称">
+          <el-input v-model="tenantName" disabled />
+        </el-form-item>
+  
+        <el-form-item label="资质类型" prop="type">
+          <el-select v-model="formData.type" placeholder="请选择资质类型" style="width: 100%">
+            <el-option label="营业执照" value="business_license" />
+            <el-option label="开户许可证" value="bank_account_permit" />
+            <el-option label="行业许可证" value="industry_license" />
+            <el-option label="其他资质" value="others" />
+          </el-select>
+        </el-form-item>
+  
+        <el-form-item label="资质图片" prop="file_url">
+          <el-upload
+            class="avatar-uploader"
+            action="/api/admin/common/upload" 
+            :show-file-list="false"
+            :on-success="handleUploadSuccess"
+            :before-upload="beforeAvatarUpload"
+            name="file"
+          >
+            <img v-if="formData.file_url" :src="formData.file_url" class="qualification-img" />
+            <el-icon v-else class="uploader-icon"><Plus /></el-icon>
+          </el-upload>
+          <div class="upload-tip">支持 jpg/png 格式，大小不超过 2MB</div>
+        </el-form-item>
+  
+        <el-form-item label="有效期至" prop="expire_time">
+          <el-date-picker
+            v-model="formData.expire_time"
+            type="date"
+            placeholder="选择过期日期"
+            style="width: 100%"
+            value-format="YYYY-MM-DD"
+          />
+        </el-form-item>
+  
+        <el-form-item label="备注说明">
+          <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注信息" />
+        </el-form-item>
+      </el-form>
+  
+      <template #footer>
+        <el-button @click="visible = false">取消</el-button>
+        <el-button type="primary" :loading="submitting" @click="submitForm">保存资质</el-button>
+      </template>
+    </el-dialog>
+  </template>
+  
+  <script setup lang="ts">
+  import { ref, reactive } from 'vue';
+  import { ElMessage } from 'element-plus';
+  import { Plus } from '@element-plus/icons-vue';
+  // 假设你有对应的资质接口
+  // import { saveQualification, getQualificationDetail } from '@/api/tenant';
+  
+  const visible = ref(false);
+  const loading = ref(false);
+  const submitting = ref(false);
+  const tenantName = ref('');
+  const formRef = ref();
+  
+  const formData = reactive({
+    tenant_id: null,
+    type: '',
+    file_url: '',
+    expire_time: '',
+    remark: ''
+  });
+  
+  const rules = {
+    type: [{ required: true, message: '请选择资质类型', trigger: 'change' }],
+    file_url: [{ required: true, message: '请上传资质图片', trigger: 'change' }],
+    expire_time: [{ required: true, message: '请选择有效期', trigger: 'change' }]
+  };
+  
+  // 打开弹窗
+  const open = (row: any) => {
+    visible.value = true;
+    tenantName.value = row.tenant_name;
+    formData.tenant_id = row.id;
+    
+    // 如果后端有资质详情接口，可以在此获取回显数据
+    // fetchDetail(row.id);
+  };
+  
+  // 上传前的校验
+  const beforeAvatarUpload = (rawFile: any) => {
+    if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
+      ElMessage.error('图片必须是 JPG 或 PNG 格式!');
+      return false;
+    } else if (rawFile.size / 1024 / 1024 > 2) {
+      ElMessage.error('图片大小不能超过 2MB!');
+      return false;
+    }
+    return true;
+  };
+  
+  // 上传成功回调
+  const handleUploadSuccess = (response: any) => {
+    // 根据你后端的上传接口返回结构调整
+    formData.file_url = response.data.url; 
+    ElMessage.success('上传成功');
+  };
+  
+  const submitForm = async () => {
+    await formRef.value.validate();
+    submitting.value = true;
+    try {
+      // 模拟提交
+      console.log('提交的数据：', formData);
+      ElMessage.success('资质保存成功');
+      visible.value = false;
+    } finally {
+      submitting.value = false;
+    }
+  };
+  
+  defineExpose({ open });
+  </script>
+  
+  <style scoped>
+  .avatar-uploader {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    width: 178px;
+    height: 178px;
+    transition: border-color 0.3s;
+  }
+  .avatar-uploader:hover {
+    border-color: #409eff;
+  }
+  .uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 178px;
+    height: 178px;
+    text-align: center;
+    line-height: 178px !important;
+  }
+  .qualification-img {
+    width: 178px;
+    height: 178px;
+    display: block;
+    object-fit: contain;
+  }
+  .upload-tip {
+    font-size: 12px;
+    color: #999;
+    margin-top: 8px;
+  }
+  </style>

src/views/basicSettings/tenants/index.vue

@@ -56,11 +56,12 @@
                 <template #default="scope">
                     <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">{{
                         scope.row.status === 1 ? "启用" : "禁用"
-                        }}</el-tag>
+                    }}</el-tag>
                 </template>
             </el-table-column>
-            <el-table-column label="操作" width="240" align="center" fixed="right">
+            <el-table-column label="操作" width="280" align="center" fixed="right">
                 <template #default="scope">
+                    <!-- <el-button size="small" @click="handleQualification(scope.row)">资质</el-button> -->
                     <el-button size="small" @click="handlePreview(scope.row)">查看</el-button>
                     <el-button size="small" @click="editRef.open(scope.row.id)">编辑</el-button>
                     <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
@@ -69,6 +70,8 @@
         </el-table>
 
         <EditModal ref="editRef" @success="refresh" />
+        <DetailDrawer ref="detailRef" />
+        <Qualification ref="qualificationRef" />
 
         <!-- 分页 -->
         <div class="pagination-bar">
@@ -83,6 +86,8 @@ import { getTenantList, deleteTenant } from '@/api/tenant';
 import { onMounted, ref, reactive } from 'vue';
 import { useRouter } from 'vue-router';
 import EditModal from './components/edit.vue';
+import DetailDrawer from './components/detail.vue';
+import Qualification from './components/qualification.vue';
 
 const total = ref(0);
 const page = ref(1);
@@ -92,6 +97,8 @@ const router = useRouter();
 const tenants = ref([]);
 
 const editRef = ref();
+const detailRef = ref();
+const qualificationRef = ref();
 
 // 删除
 const handleDelete = (row) => {
@@ -107,9 +114,14 @@ const handleDelete = (row) => {
     }).catch(() => { });
 };
 
-// 预览
+// 查看
-const handlePreview = (row) => {
+const handlePreview = (row: any) => {
-    router.push(`/basicSettings/tenants/detail/${row.id}`);
+    detailRef.value.open(row.id);
+};
+
+// 资质
+const handleQualification = (row: any) => {
+    qualificationRef.value.open(row.id);
 };
 
 // 分页改变