feat: add tenant entry application pages
This commit is contained in:
@@ -0,0 +1,19 @@
|
||||
import { http } from '@/utils/http/axios';
|
||||
|
||||
// 获取企业注册申请列表
|
||||
export function List(params) {
|
||||
return http.request({
|
||||
url: '/imTenantApplication/list',
|
||||
method: 'get',
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
// 获取企业注册申请详情
|
||||
export function View(params) {
|
||||
return http.request({
|
||||
url: '/imTenantApplication/view',
|
||||
method: 'GET',
|
||||
params,
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import { http } from '@/utils/http/axios';
|
||||
|
||||
// 获取企业反馈列表
|
||||
export function List(params) {
|
||||
return http.request({
|
||||
url: '/imTenantEntryFeedback/list',
|
||||
method: 'get',
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
// 获取企业反馈详情
|
||||
export function View(params) {
|
||||
return http.request({
|
||||
url: '/imTenantEntryFeedback/view',
|
||||
method: 'GET',
|
||||
params,
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="n-layout-page-header">
|
||||
<n-card :bordered="false" title="企业注册" />
|
||||
</div>
|
||||
<n-card :bordered="false" class="proCard">
|
||||
<BasicForm
|
||||
ref="searchFormRef"
|
||||
@register="register"
|
||||
@submit="reloadTable"
|
||||
@reset="reloadTable"
|
||||
@keyup.enter="reloadTable"
|
||||
/>
|
||||
<BasicTable
|
||||
ref="actionRef"
|
||||
:columns="columns"
|
||||
:request="loadDataTable"
|
||||
:row-key="(row) => row.id"
|
||||
:actionColumn="actionColumn"
|
||||
:scroll-x="scrollX"
|
||||
:resizeHeightOffset="-10000"
|
||||
/>
|
||||
</n-card>
|
||||
<ViewModal ref="viewRef" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, h, reactive, ref } from 'vue';
|
||||
import { BasicTable, TableAction } from '@/components/Table';
|
||||
import { BasicForm, useForm } from '@/components/Form/index';
|
||||
import { List } from '@/api/imTenantApplication';
|
||||
import { columns, schemas, State } from './model';
|
||||
import { adaTableScrollX } from '@/utils/hotgo';
|
||||
import ViewModal from './view.vue';
|
||||
|
||||
const actionRef = ref();
|
||||
const searchFormRef = ref<any>({});
|
||||
const viewRef = ref();
|
||||
|
||||
const actionColumn = reactive({
|
||||
width: 100,
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
render(record: State) {
|
||||
return h(TableAction as any, {
|
||||
style: 'button',
|
||||
actions: [
|
||||
{
|
||||
label: '详情',
|
||||
onClick: () => viewRef.value.openModal(record),
|
||||
auth: ['/imTenantApplication/view'],
|
||||
},
|
||||
],
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const scrollX = computed(() => adaTableScrollX(columns, actionColumn.width));
|
||||
|
||||
const [register, {}] = useForm({
|
||||
gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
|
||||
labelWidth: 100,
|
||||
schemas,
|
||||
});
|
||||
|
||||
const loadDataTable = async (res) => {
|
||||
return await List({ ...searchFormRef.value?.formModel, ...res });
|
||||
};
|
||||
|
||||
function reloadTable() {
|
||||
actionRef.value?.reload();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
@@ -0,0 +1,128 @@
|
||||
import { ref } from 'vue';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import { FormSchema } from '@/components/Form';
|
||||
import { defRangeShortcuts } from '@/utils/dateUtil';
|
||||
|
||||
export interface PublicUpload {
|
||||
id: number;
|
||||
fileId: string;
|
||||
purpose: string;
|
||||
mimeType: string;
|
||||
size: number;
|
||||
etag: string;
|
||||
location: string;
|
||||
url: string;
|
||||
expiresAt: string;
|
||||
createdAt: string;
|
||||
uploadedAt: string;
|
||||
}
|
||||
|
||||
export class State {
|
||||
public id = 0;
|
||||
public applicationId = '';
|
||||
public creditCode = '';
|
||||
public enterpriseEmail = '';
|
||||
public licenseFileId = '';
|
||||
public tenantCodeHint = '';
|
||||
public status = '';
|
||||
public estimatedReviewHour = 0;
|
||||
public submittedAt = '';
|
||||
public createdAt = '';
|
||||
public updatedAt = '';
|
||||
public clientContext = '';
|
||||
public idempotencyKey = '';
|
||||
public licenseFile: PublicUpload | null = null;
|
||||
|
||||
constructor(state?: Partial<State>) {
|
||||
if (state) Object.assign(this, state);
|
||||
}
|
||||
}
|
||||
|
||||
export function newState(state: State | Record<string, any> | null): State {
|
||||
if (state !== null) {
|
||||
if (state instanceof State) return cloneDeep(state);
|
||||
return new State(state);
|
||||
}
|
||||
return new State();
|
||||
}
|
||||
|
||||
export function statusLabel(status: string) {
|
||||
const map: Record<string, string> = {
|
||||
received: '已接收',
|
||||
pending_review: '待审核',
|
||||
approved: '已通过',
|
||||
rejected: '已拒绝',
|
||||
closed: '已关闭',
|
||||
};
|
||||
return map[status] || status || '-';
|
||||
}
|
||||
|
||||
export const schemas = ref<FormSchema[]>([
|
||||
{
|
||||
field: 'applicationId',
|
||||
component: 'NInput',
|
||||
label: '申请ID',
|
||||
componentProps: { placeholder: '请输入申请ID' },
|
||||
},
|
||||
{
|
||||
field: 'creditCode',
|
||||
component: 'NInput',
|
||||
label: '信用代码',
|
||||
componentProps: { placeholder: '请输入统一社会信用代码' },
|
||||
},
|
||||
{
|
||||
field: 'enterpriseEmail',
|
||||
component: 'NInput',
|
||||
label: '企业邮箱',
|
||||
componentProps: { placeholder: '请输入企业邮箱' },
|
||||
},
|
||||
{
|
||||
field: 'tenantCodeHint',
|
||||
component: 'NInput',
|
||||
label: '商户线索',
|
||||
componentProps: { placeholder: '请输入商户编码线索' },
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
component: 'NInput',
|
||||
label: '状态',
|
||||
componentProps: { placeholder: '请输入状态' },
|
||||
},
|
||||
{
|
||||
field: 'keyword',
|
||||
component: 'NInput',
|
||||
label: '关键词',
|
||||
componentProps: { placeholder: '请输入申请ID/信用代码/邮箱' },
|
||||
},
|
||||
{
|
||||
field: 'createdAt',
|
||||
component: 'NDatePicker',
|
||||
label: '创建时间',
|
||||
componentProps: {
|
||||
type: 'datetimerange',
|
||||
clearable: true,
|
||||
shortcuts: defRangeShortcuts(),
|
||||
},
|
||||
},
|
||||
]);
|
||||
|
||||
export const columns = [
|
||||
{ title: 'ID', key: 'id', align: 'left', width: 80 },
|
||||
{ title: '申请ID', key: 'applicationId', align: 'left', width: 210 },
|
||||
{ title: '统一社会信用代码', key: 'creditCode', align: 'left', width: 190 },
|
||||
{ title: '企业邮箱', key: 'enterpriseEmail', align: 'left', width: 210 },
|
||||
{ title: '营业执照文件', key: 'licenseFileId', align: 'left', width: 180 },
|
||||
{ title: '商户线索', key: 'tenantCodeHint', align: 'left', width: 140 },
|
||||
{
|
||||
title: '状态',
|
||||
key: 'status',
|
||||
align: 'left',
|
||||
width: 120,
|
||||
render(row: State) {
|
||||
return statusLabel(row.status);
|
||||
},
|
||||
},
|
||||
{ title: '预计审核小时', key: 'estimatedReviewHour', align: 'left', width: 130 },
|
||||
{ title: '提交时间', key: 'submittedAt', align: 'left', width: 180 },
|
||||
{ title: '创建时间', key: 'createdAt', align: 'left', width: 180 },
|
||||
];
|
||||
@@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<div>
|
||||
<n-modal
|
||||
v-model:show="showModal"
|
||||
:mask-closable="false"
|
||||
:show-icon="false"
|
||||
preset="dialog"
|
||||
transform-origin="center"
|
||||
:title="'企业注册详情 ' + formValue.applicationId"
|
||||
:style="{ width: dialogWidth }"
|
||||
>
|
||||
<n-scrollbar class="tenant-entry-scrollbar">
|
||||
<n-spin :show="loading" description="请稍候...">
|
||||
<n-descriptions label-placement="left" bordered :column="settingStore.isMobile ? 1 : 2">
|
||||
<n-descriptions-item label="申请ID">{{ formValue.applicationId }}</n-descriptions-item>
|
||||
<n-descriptions-item label="状态">{{
|
||||
statusLabel(formValue.status)
|
||||
}}</n-descriptions-item>
|
||||
<n-descriptions-item label="统一社会信用代码">{{
|
||||
formValue.creditCode || '-'
|
||||
}}</n-descriptions-item>
|
||||
<n-descriptions-item label="企业邮箱">{{
|
||||
formValue.enterpriseEmail || '-'
|
||||
}}</n-descriptions-item>
|
||||
<n-descriptions-item label="商户线索">{{
|
||||
formValue.tenantCodeHint || '-'
|
||||
}}</n-descriptions-item>
|
||||
<n-descriptions-item label="预计审核小时">{{
|
||||
formValue.estimatedReviewHour || '-'
|
||||
}}</n-descriptions-item>
|
||||
<n-descriptions-item label="提交时间">{{
|
||||
formValue.submittedAt || '-'
|
||||
}}</n-descriptions-item>
|
||||
<n-descriptions-item label="创建时间">{{
|
||||
formValue.createdAt || '-'
|
||||
}}</n-descriptions-item>
|
||||
<n-descriptions-item label="修改时间">{{
|
||||
formValue.updatedAt || '-'
|
||||
}}</n-descriptions-item>
|
||||
<n-descriptions-item label="营业执照文件ID">{{
|
||||
formValue.licenseFileId || '-'
|
||||
}}</n-descriptions-item>
|
||||
<n-descriptions-item label="营业执照" :span="2">
|
||||
<div v-if="formValue.licenseFile?.url" class="image-list">
|
||||
<n-image
|
||||
object-fit="cover"
|
||||
:src="formValue.licenseFile.url"
|
||||
:alt="formValue.licenseFile.fileId"
|
||||
class="entry-image"
|
||||
/>
|
||||
<n-text depth="3">{{ formValue.licenseFile.location }}</n-text>
|
||||
</div>
|
||||
<n-empty v-else size="small" description="暂无图片" />
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="客户端上下文" :span="2">
|
||||
<n-code :code="formValue.clientContext || '-'" language="json" word-wrap />
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="幂等键" :span="2">{{
|
||||
formValue.idempotencyKey || '-'
|
||||
}}</n-descriptions-item>
|
||||
</n-descriptions>
|
||||
</n-spin>
|
||||
</n-scrollbar>
|
||||
<template #action>
|
||||
<n-space>
|
||||
<n-button @click="closeForm">关闭</n-button>
|
||||
</n-space>
|
||||
</template>
|
||||
</n-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref } from 'vue';
|
||||
import { View } from '@/api/imTenantApplication';
|
||||
import { newState, State, statusLabel } from './model';
|
||||
import { useProjectSettingStore } from '@/store/modules/projectSetting';
|
||||
import { adaModalWidth } from '@/utils/hotgo';
|
||||
|
||||
const settingStore = useProjectSettingStore();
|
||||
const loading = ref(false);
|
||||
const showModal = ref(false);
|
||||
const formValue = ref<State>(newState(null));
|
||||
const dialogWidth = computed(() => adaModalWidth(980));
|
||||
|
||||
function closeForm() {
|
||||
showModal.value = false;
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
function openModal(state: State) {
|
||||
showModal.value = true;
|
||||
loading.value = true;
|
||||
View({ id: state.id })
|
||||
.then((res) => {
|
||||
formValue.value = newState(res);
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
openModal,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tenant-entry-scrollbar {
|
||||
max-height: 87vh;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.image-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.entry-image {
|
||||
width: 180px;
|
||||
height: 120px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="n-layout-page-header">
|
||||
<n-card :bordered="false" title="企业反馈" />
|
||||
</div>
|
||||
<n-card :bordered="false" class="proCard">
|
||||
<BasicForm
|
||||
ref="searchFormRef"
|
||||
@register="register"
|
||||
@submit="reloadTable"
|
||||
@reset="reloadTable"
|
||||
@keyup.enter="reloadTable"
|
||||
/>
|
||||
<BasicTable
|
||||
ref="actionRef"
|
||||
:columns="columns"
|
||||
:request="loadDataTable"
|
||||
:row-key="(row) => row.id"
|
||||
:actionColumn="actionColumn"
|
||||
:scroll-x="scrollX"
|
||||
:resizeHeightOffset="-10000"
|
||||
/>
|
||||
</n-card>
|
||||
<ViewModal ref="viewRef" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, h, reactive, ref } from 'vue';
|
||||
import { BasicTable, TableAction } from '@/components/Table';
|
||||
import { BasicForm, useForm } from '@/components/Form/index';
|
||||
import { List } from '@/api/imTenantEntryFeedback';
|
||||
import { columns, schemas, State } from './model';
|
||||
import { adaTableScrollX } from '@/utils/hotgo';
|
||||
import ViewModal from './view.vue';
|
||||
|
||||
const actionRef = ref();
|
||||
const searchFormRef = ref<any>({});
|
||||
const viewRef = ref();
|
||||
|
||||
const actionColumn = reactive({
|
||||
width: 100,
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
render(record: State) {
|
||||
return h(TableAction as any, {
|
||||
style: 'button',
|
||||
actions: [
|
||||
{
|
||||
label: '详情',
|
||||
onClick: () => viewRef.value.openModal(record),
|
||||
auth: ['/imTenantEntryFeedback/view'],
|
||||
},
|
||||
],
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const scrollX = computed(() => adaTableScrollX(columns, actionColumn.width));
|
||||
|
||||
const [register, {}] = useForm({
|
||||
gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
|
||||
labelWidth: 100,
|
||||
schemas,
|
||||
});
|
||||
|
||||
const loadDataTable = async (res) => {
|
||||
return await List({ ...searchFormRef.value?.formModel, ...res });
|
||||
};
|
||||
|
||||
function reloadTable() {
|
||||
actionRef.value?.reload();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
@@ -0,0 +1,107 @@
|
||||
import { ref } from 'vue';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import { FormSchema } from '@/components/Form';
|
||||
import { defRangeShortcuts } from '@/utils/dateUtil';
|
||||
import { PublicUpload } from '@/views/imTenantApplication/model';
|
||||
|
||||
export class State {
|
||||
public id = 0;
|
||||
public feedbackId = '';
|
||||
public description = '';
|
||||
public contact = '';
|
||||
public tenantCodeHint = '';
|
||||
public status = '';
|
||||
public submittedAt = '';
|
||||
public createdAt = '';
|
||||
public updatedAt = '';
|
||||
public screenshotFileIds = '';
|
||||
public clientContext = '';
|
||||
public idempotencyKey = '';
|
||||
public screenshotFiles: PublicUpload[] = [];
|
||||
|
||||
constructor(state?: Partial<State>) {
|
||||
if (state) Object.assign(this, state);
|
||||
}
|
||||
}
|
||||
|
||||
export function newState(state: State | Record<string, any> | null): State {
|
||||
if (state !== null) {
|
||||
if (state instanceof State) return cloneDeep(state);
|
||||
return new State(state);
|
||||
}
|
||||
return new State();
|
||||
}
|
||||
|
||||
export function statusLabel(status: string) {
|
||||
const map: Record<string, string> = {
|
||||
received: '已接收',
|
||||
pending_review: '待处理',
|
||||
processing: '处理中',
|
||||
resolved: '已解决',
|
||||
rejected: '已拒绝',
|
||||
closed: '已关闭',
|
||||
};
|
||||
return map[status] || status || '-';
|
||||
}
|
||||
|
||||
export const schemas = ref<FormSchema[]>([
|
||||
{
|
||||
field: 'feedbackId',
|
||||
component: 'NInput',
|
||||
label: '反馈ID',
|
||||
componentProps: { placeholder: '请输入反馈ID' },
|
||||
},
|
||||
{
|
||||
field: 'contact',
|
||||
component: 'NInput',
|
||||
label: '联系方式',
|
||||
componentProps: { placeholder: '请输入联系方式' },
|
||||
},
|
||||
{
|
||||
field: 'tenantCodeHint',
|
||||
component: 'NInput',
|
||||
label: '商户线索',
|
||||
componentProps: { placeholder: '请输入商户编码线索' },
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
component: 'NInput',
|
||||
label: '状态',
|
||||
componentProps: { placeholder: '请输入状态' },
|
||||
},
|
||||
{
|
||||
field: 'keyword',
|
||||
component: 'NInput',
|
||||
label: '关键词',
|
||||
componentProps: { placeholder: '请输入反馈ID/描述/联系方式' },
|
||||
},
|
||||
{
|
||||
field: 'createdAt',
|
||||
component: 'NDatePicker',
|
||||
label: '创建时间',
|
||||
componentProps: {
|
||||
type: 'datetimerange',
|
||||
clearable: true,
|
||||
shortcuts: defRangeShortcuts(),
|
||||
},
|
||||
},
|
||||
]);
|
||||
|
||||
export const columns = [
|
||||
{ title: 'ID', key: 'id', align: 'left', width: 80 },
|
||||
{ title: '反馈ID', key: 'feedbackId', align: 'left', width: 210 },
|
||||
{ title: '问题描述', key: 'description', align: 'left', width: 320 },
|
||||
{ title: '联系方式', key: 'contact', align: 'left', width: 170 },
|
||||
{ title: '商户线索', key: 'tenantCodeHint', align: 'left', width: 140 },
|
||||
{
|
||||
title: '状态',
|
||||
key: 'status',
|
||||
align: 'left',
|
||||
width: 120,
|
||||
render(row: State) {
|
||||
return statusLabel(row.status);
|
||||
},
|
||||
},
|
||||
{ title: '提交时间', key: 'submittedAt', align: 'left', width: 180 },
|
||||
{ title: '创建时间', key: 'createdAt', align: 'left', width: 180 },
|
||||
];
|
||||
@@ -0,0 +1,131 @@
|
||||
<template>
|
||||
<div>
|
||||
<n-modal
|
||||
v-model:show="showModal"
|
||||
:mask-closable="false"
|
||||
:show-icon="false"
|
||||
preset="dialog"
|
||||
transform-origin="center"
|
||||
:title="'企业反馈详情 ' + formValue.feedbackId"
|
||||
:style="{ width: dialogWidth }"
|
||||
>
|
||||
<n-scrollbar class="tenant-entry-scrollbar">
|
||||
<n-spin :show="loading" description="请稍候...">
|
||||
<n-descriptions label-placement="left" bordered :column="settingStore.isMobile ? 1 : 2">
|
||||
<n-descriptions-item label="反馈ID">{{ formValue.feedbackId }}</n-descriptions-item>
|
||||
<n-descriptions-item label="状态">{{
|
||||
statusLabel(formValue.status)
|
||||
}}</n-descriptions-item>
|
||||
<n-descriptions-item label="联系方式">{{
|
||||
formValue.contact || '-'
|
||||
}}</n-descriptions-item>
|
||||
<n-descriptions-item label="商户线索">{{
|
||||
formValue.tenantCodeHint || '-'
|
||||
}}</n-descriptions-item>
|
||||
<n-descriptions-item label="提交时间">{{
|
||||
formValue.submittedAt || '-'
|
||||
}}</n-descriptions-item>
|
||||
<n-descriptions-item label="创建时间">{{
|
||||
formValue.createdAt || '-'
|
||||
}}</n-descriptions-item>
|
||||
<n-descriptions-item label="修改时间">{{
|
||||
formValue.updatedAt || '-'
|
||||
}}</n-descriptions-item>
|
||||
<n-descriptions-item label="问题描述" :span="2">{{
|
||||
formValue.description || '-'
|
||||
}}</n-descriptions-item>
|
||||
<n-descriptions-item label="截图" :span="2">
|
||||
<n-image-group v-if="formValue.screenshotFiles?.length">
|
||||
<n-space>
|
||||
<div
|
||||
v-for="file in formValue.screenshotFiles"
|
||||
:key="file.fileId"
|
||||
class="image-list"
|
||||
>
|
||||
<n-image
|
||||
object-fit="cover"
|
||||
:src="file.url"
|
||||
:alt="file.fileId"
|
||||
class="entry-image"
|
||||
/>
|
||||
<n-text depth="3">{{ file.location }}</n-text>
|
||||
</div>
|
||||
</n-space>
|
||||
</n-image-group>
|
||||
<n-empty v-else size="small" description="暂无图片" />
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="截图文件ID" :span="2">
|
||||
<n-code :code="formValue.screenshotFileIds || '-'" language="json" word-wrap />
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="客户端上下文" :span="2">
|
||||
<n-code :code="formValue.clientContext || '-'" language="json" word-wrap />
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="幂等键" :span="2">{{
|
||||
formValue.idempotencyKey || '-'
|
||||
}}</n-descriptions-item>
|
||||
</n-descriptions>
|
||||
</n-spin>
|
||||
</n-scrollbar>
|
||||
<template #action>
|
||||
<n-space>
|
||||
<n-button @click="closeForm">关闭</n-button>
|
||||
</n-space>
|
||||
</template>
|
||||
</n-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref } from 'vue';
|
||||
import { View } from '@/api/imTenantEntryFeedback';
|
||||
import { newState, State, statusLabel } from './model';
|
||||
import { useProjectSettingStore } from '@/store/modules/projectSetting';
|
||||
import { adaModalWidth } from '@/utils/hotgo';
|
||||
|
||||
const settingStore = useProjectSettingStore();
|
||||
const loading = ref(false);
|
||||
const showModal = ref(false);
|
||||
const formValue = ref<State>(newState(null));
|
||||
const dialogWidth = computed(() => adaModalWidth(980));
|
||||
|
||||
function closeForm() {
|
||||
showModal.value = false;
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
function openModal(state: State) {
|
||||
showModal.value = true;
|
||||
loading.value = true;
|
||||
View({ id: state.id })
|
||||
.then((res) => {
|
||||
formValue.value = newState(res);
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
openModal,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tenant-entry-scrollbar {
|
||||
max-height: 87vh;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.image-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
max-width: 220px;
|
||||
}
|
||||
|
||||
.entry-image {
|
||||
width: 180px;
|
||||
height: 120px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user