xinyin025/hotgo
1
0
Fork 0
mirror of https://github.com/bufanyun/hotgo.git synced 2025-12-30 12:05:57 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

发布v2.15.1版本，更新内容请查看：https://github.com/bufanyun/hotgo/blob/v2.0/docs/guide-zh-CN/start-update-log.md

Browse Source
This commit is contained in:
孟帅
2024-04-22 23:08:40 +08:00
parent 82483bd7b9
commit e144b12580
445 changed files with 17457 additions and 6708 deletions
Download Patch File Download Diff File Expand all files Collapse all files

214
web/src/views/curdDemo/edit.vue
View File

@@ -1,89 +1,104 @@
<template>
<div>
<n-spin :show="loading" description="请稍候...">
<n-modal
v-model:show="showModal"
:mask-closable="false"
:show-icon="false"
preset="dialog"
transform-origin="center"
:title="formValue.id > 0 ? '编辑 #' + formValue.id : '添加'"
:style="{
width: dialogWidth,
}"
>
<n-scrollbar style="max-height: 87vh" class="pr-5">
<n-modal
v-model:show="showModal"
:mask-closable="false"
:show-icon="false"
preset="dialog"
transform-origin="center"
:title="formValue.id > 0 ? '编辑CURD列表 #' + formValue.id : '添加CURD列表'"
:style="{
width: dialogWidth,
}"
>
<n-scrollbar style="max-height: 87vh" class="pr-5">
<n-spin :show="loading" description="请稍候...">
<n-form
ref="formRef"
:model="formValue"
:rules="rules"
ref="formRef"
:label-placement="settingStore.isMobile ? 'top' : 'left'"
:label-width="100"
class="py-4"
>
<n-form-item label="分类ID" path="categoryId">
<n-input-number placeholder="请输入分类ID" v-model:value="formValue.categoryId" />
</n-form-item>
<n-form-item label="标题" path="title">
<n-input placeholder="请输入标题" v-model:value="formValue.title" />
</n-form-item>
<n-form-item label="描述" path="description">
<n-input type="textarea" placeholder="描述" v-model:value="formValue.description" />
</n-form-item>
<n-form-item label="内容" path="content">
<Editor style="height: 450px" id="content" v-model:value="formValue.content" />
</n-form-item>
<n-form-item label="单图" path="image">
<UploadImage :maxNumber="1" v-model:value="formValue.image" />
</n-form-item>
<n-form-item label="附件" path="attachfile">
<UploadFile :maxNumber="1" v-model:value="formValue.attachfile" />
</n-form-item>
<n-form-item label="所在城市" path="cityId">
<CitySelector v-model:value="formValue.cityId" />
</n-form-item>
<n-form-item label="显示开关" path="switch">
<n-switch :unchecked-value="2" :checked-value="1" v-model:value="formValue.switch"
<n-grid cols="1 s:1 m:2 l:2 xl:2 2xl:2" responsive="screen">
<n-gi span="1">
<n-form-item label="标题" path="title">
<n-input placeholder="请输入标题" v-model:value="formValue.title" />
</n-form-item>
</n-gi>
<n-gi span="2">
<n-form-item label="描述" path="description">
<n-input type="textarea" placeholder="描述" v-model:value="formValue.description" />
</n-form-item>
</n-gi>
<n-gi span="2">
<n-form-item label="内容" path="content">
<Editor style="height: 450px" id="content" v-model:value="formValue.content" />
</n-form-item>
</n-gi>
<n-gi span="1">
<n-form-item label="单图" path="image">
<UploadImage :maxNumber="1" v-model:value="formValue.image" />
</n-form-item>
</n-gi>
<n-gi span="1">
<n-form-item label="附件" path="attachfile">
<UploadFile :maxNumber="1" v-model:value="formValue.attachfile" />
</n-form-item>
</n-gi>
<n-gi span="1">
<n-form-item label="所在城市" path="cityId">
<CitySelector v-model:value="formValue.cityId" />
</n-form-item>
</n-gi>
<n-gi span="1">
<n-form-item label="排序" path="sort">
<n-input-number placeholder="请输入排序" v-model:value="formValue.sort" />
</n-form-item>
</n-gi>
<n-gi span="1">
<n-form-item label="显示开关" path="switch">
<n-switch :unchecked-value="2" :checked-value="1" v-model:value="formValue.switch"
/>
</n-form-item>
<n-form-item label="排序" path="sort">
<n-input-number placeholder="请输入排序" v-model:value="formValue.sort" />
</n-form-item>
<n-form-item label="状态" path="status">
<n-select v-model:value="formValue.status" :options="options.sys_normal_disable" />
</n-form-item>
</n-form-item>
</n-gi>
<n-gi span="1">
<n-form-item label="状态" path="status">
<n-select v-model:value="formValue.status" :options="options.sys_normal_disable" />
</n-form-item>
</n-gi>
<n-gi span="1">
<n-form-item label="测试分类" path="categoryId">
<n-select v-model:value="formValue.categoryId" :options="options.testCategoryOption" />
</n-form-item>
</n-gi>
</n-grid>
</n-form>
</n-scrollbar>
<template #action>
<n-space>
<n-button @click="closeForm">取消</n-button>
<n-button type="info" :loading="formBtnLoading" @click="confirmForm">确定</n-button>
</n-space>
</template>
</n-modal>
</n-spin>
</n-spin>
</n-scrollbar>
<template #action>
<n-space>
<n-button @click="closeForm">
取消
</n-button>
<n-button type="info" :loading="formBtnLoading" @click="confirmForm">
确定
</n-button>
</n-space>
</template>
</n-modal>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { Edit, MaxSort, View } from '@/api/curdDemo';
import { ref, computed } from 'vue';
import { Edit, View, MaxSort } from '@/api/curdDemo';
import { options, State, newState, rules } from './model';
import Editor from '@/components/Editor/editor.vue';
import UploadImage from '@/components/Upload/uploadImage.vue';
import UploadFile from '@/components/Upload/uploadFile.vue';
import CitySelector from '@/components/CitySelector/citySelector.vue';
import { rules, options, State, newState } from './model';
import { useProjectSettingStore } from '@/store/modules/projectSetting';
import { useMessage } from 'naive-ui';
import { adaModalWidth } from '@/utils/hotgo';
@@ -91,12 +106,43 @@
const emit = defineEmits(['reloadTable']);
const message = useMessage();
const settingStore = useProjectSettingStore();
const dialogWidth = ref('75%');
const loading = ref(false);
const showModal = ref(false);
const formValue = ref<State>(newState(null));
const formRef = ref<any>({});
const formBtnLoading = ref(false);
const dialogWidth = computed(() => {
return adaModalWidth(840);
});
function openModal(state: State) {
showModal.value = true;
// 新增
if (!state || state.id < 1) {
formValue.value = newState(state);
loading.value = true;
MaxSort()
.then((res) => {
formValue.value.sort = res.sort;
})
.finally(() => {
loading.value = false;
});
return;
}
// 编辑
loading.value = true;
View({ id: state.id })
.then((res) => {
formValue.value = res;
})
.finally(() => {
loading.value = false;
});
}
function confirmForm(e) {
e.preventDefault();
@@ -106,7 +152,7 @@
Edit(formValue.value).then((_res) => {
message.success('操作成功');
setTimeout(() => {
showModal.value = false;
closeForm();
emit('reloadTable');
});
});
@@ -122,37 +168,9 @@
loading.value = false;
}
function openModal(state: State) {
adaModalWidth(dialogWidth);
showModal.value = true;
loading.value = true;
// 新增
if (!state || state.id < 1) {
formValue.value = newState(state);
MaxSort()
.then((res) => {
formValue.value.sort = res.sort;
})
.finally(() => {
loading.value = false;
});
return;
}
// 编辑
View({ id: state.id })
.then((res) => {
formValue.value = res;
})
.finally(() => {
loading.value = false;
});
}
defineExpose({
openModal,
});
</script>
<style lang="less"></style>
<style lang="less"></style>

137
web/src/views/curdDemo/index.vue
View File

@@ -1,44 +1,19 @@
<template>
<div>
<div class="n-layout-page-header">
<n-card :bordered="false" title="生成演示">
<n-card :bordered="false" title="CURD列表">
<!-- 这是由系统生成的CURD表格，你可以将此行注释改为表格的描述 -->
</n-card>
</div>
<n-card :bordered="false" class="proCard">
<BasicForm
@register="register"
@submit="reloadTable"
@reset="reloadTable"
@keyup.enter="reloadTable"
ref="searchFormRef"
>
<BasicForm ref="searchFormRef" @register="register" @submit="reloadTable" @reset="reloadTable" @keyup.enter="reloadTable">
<template #statusSlot="{ model, field }">
<n-input v-model:value="model[field]" />
</template>
</BasicForm>
<BasicTable
:openChecked="true"
:columns="columns"
:request="loadDataTable"
:row-key="(row) => row.id"
ref="actionRef"
:actionColumn="actionColumn"
:checked-row-keys="checkedIds"
@update:checked-row-keys="onCheckedRow"
:scroll-x="1090"
:resizeHeightOffset="-10000"
size="small"
>
<BasicTable ref="actionRef" openChecked :columns="columns" :request="loadDataTable" :row-key="(row) => row.id" :actionColumn="actionColumn" :scroll-x="scrollX" :resizeHeightOffset="-10000" :checked-row-keys="checkedIds" @update:checked-row-keys="handleOnCheckedRow">
<template #tableTitle>
<n-button
type="primary"
@click="addTable"
class="min-left-space"
v-if="hasPermission(['/curdDemo/edit'])"
>
<n-button type="primary" @click="addTable" class="min-left-space" v-if="hasPermission(['/curdDemo/edit'])">
<template #icon>
<n-icon>
<PlusOutlined />
@@ -46,13 +21,7 @@
</template>
添加
</n-button>
<n-button
type="error"
@click="handleBatchDelete"
:disabled="batchDeleteDisabled"
class="min-left-space"
v-if="hasPermission(['/curdDemo/delete'])"
>
<n-button type="error" @click="handleBatchDelete" class="min-left-space" v-if="hasPermission(['/curdDemo/delete'])">
<template #icon>
<n-icon>
<DeleteOutlined />
@@ -60,12 +29,7 @@
</template>
批量删除
</n-button>
<n-button
type="primary"
@click="handleExport"
class="min-left-space"
v-if="hasPermission(['/curdDemo/export'])"
>
<n-button type="primary" @click="handleExport" class="min-left-space" v-if="hasPermission(['/curdDemo/export'])">
<template #icon>
<n-icon>
<ExportOutlined />
@@ -76,39 +40,36 @@
</template>
</BasicTable>
</n-card>
<Edit @reloadTable="reloadTable" ref="editRef" />
<View ref="viewRef" />
<Edit ref="editRef" @reloadTable="reloadTable" />
</div>
</template>
<script lang="ts" setup>
import { h, reactive, ref } from 'vue';
import { h, reactive, ref, computed, onMounted } from 'vue';
import { useDialog, useMessage } from 'naive-ui';
import { BasicTable, TableAction } from '@/components/Table';
import { BasicForm, useForm } from '@/components/Form/index';
import { usePermission } from '@/hooks/web/usePermission';
import { List, Export, Delete, Status } from '@/api/curdDemo';
import { columns, schemas, options } from './model';
import { List, Export, Delete } from '@/api/curdDemo';
import { PlusOutlined, ExportOutlined, DeleteOutlined } from '@vicons/antd';
import { getOptionLabel } from '@/utils/hotgo';
import { columns, schemas, loadOptions } from './model';
import { adaTableScrollX } from '@/utils/hotgo';
import Edit from './edit.vue';
import View from './view.vue';
const dialog = useDialog();
const message = useMessage();
const { hasPermission } = usePermission();
const actionRef = ref();
const searchFormRef = ref<any>({});
const viewRef = ref();
const editRef = ref();
const batchDeleteDisabled = ref(true);
const checkedIds = ref([]);
const actionColumn = reactive({
width: 300,
width: 144,
title: '操作',
key: 'action',
// fixed: 'right',
fixed: 'right',
render(record) {
return h(TableAction as any, {
style: 'button',
@@ -118,75 +79,54 @@
onClick: handleEdit.bind(null, record),
auth: ['/curdDemo/edit'],
},
{
label: '禁用',
onClick: handleStatus.bind(null, record, 2),
ifShow: () => {
return record.status === 1;
},
auth: ['/curdDemo/status'],
},
{
label: '启用',
onClick: handleStatus.bind(null, record, 1),
ifShow: () => {
return record.status === 2;
},
auth: ['/curdDemo/status'],
},
{
label: '删除',
onClick: handleDelete.bind(null, record),
auth: ['/curdDemo/delete'],
},
],
dropDownActions: [
{
label: '查看详情',
key: 'view',
auth: ['/curdDemo/view'],
},
],
select: (key) => {
if (key === 'view') {
return handleView(record);
}
},
});
},
});
const scrollX = computed(() => {
return adaTableScrollX(columns, actionColumn.width);
});
const [register, {}] = useForm({
gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
labelWidth: 80,
schemas,
});
// 加载表格数据
const loadDataTable = async (res) => {
return await List({ ...searchFormRef.value?.formModel, ...res });
};
function onCheckedRow(rowKeys) {
batchDeleteDisabled.value = rowKeys.length <= 0;
// 更新选中的行
function handleOnCheckedRow(rowKeys) {
checkedIds.value = rowKeys;
}
// 重新加载表格数据
function reloadTable() {
actionRef.value.reload();
actionRef.value?.reload();
}
// 添加数据
function addTable() {
editRef.value.openModal(null);
}
// 编辑数据
function handleEdit(record: Recordable) {
editRef.value.openModal(record);
}
function handleView(record: Recordable) {
viewRef.value.openModal(record);
}
// 单个删除
function handleDelete(record: Recordable) {
dialog.warning({
title: '警告',
@@ -202,7 +142,13 @@
});
}
// 批量删除
function handleBatchDelete() {
if (checkedIds.value.length < 1){
message.error('请至少选择一项要删除的数据');
return;
}
dialog.warning({
title: '警告',
content: '你确定要批量删除？',
@@ -210,7 +156,6 @@
negativeText: '取消',
onPositiveClick: () => {
Delete({ id: checkedIds.value }).then((_res) => {
batchDeleteDisabled.value = true;
checkedIds.value = [];
message.success('删除成功');
reloadTable();
@@ -219,19 +164,15 @@
});
}
// 导出
function handleExport() {
message.loading('正在导出列表...', { duration: 1200 });
Export(searchFormRef.value?.formModel);
}
function handleStatus(record: Recordable, status: number) {
Status({ id: record.id, status: status }).then((_res) => {
message.success('设为' + getOptionLabel(options.value.sys_normal_disable, status) + '成功');
setTimeout(() => {
reloadTable();
});
});
}
onMounted(() => {
loadOptions();
});
</script>
<style lang="less" scoped></style>
<style lang="less" scoped></style>

219
web/src/views/curdDemo/model.ts
View File

@@ -1,42 +1,44 @@
import { h, ref } from 'vue';
import { NAvatar, NImage, NTag, NSwitch, NRate } from 'naive-ui';
import { NImage, NAvatar, NSwitch, NTag } from 'naive-ui';
import { cloneDeep } from 'lodash-es';
import { FormSchema } from '@/components/Form';
import { Dicts } from '@/api/dict/dict';
import { Switch } from '@/api/curdDemo';
import { isArray, isNullObject } from '@/utils/is';
import { isNullObject } from '@/utils/is';
import { getFileExt } from '@/utils/urlUtils';
import { defRangeShortcuts, defShortcuts, formatToDate } from '@/utils/dateUtil';
import { validate } from '@/utils/validateUtil';
import { getOptionLabel, getOptionTag, Option, Options, errorImg } from '@/utils/hotgo';
import { defRangeShortcuts } from '@/utils/dateUtil';
import { Option, errorImg, getOptionLabel, getOptionTag } from '@/utils/hotgo';
import { renderPopoverMemberSumma, MemberSumma } from '@/utils';
import { Switch } from '@/api/curdDemo';
import { usePermission } from '@/hooks/web/usePermission';
const { hasPermission } = usePermission();
const $message = window['$message'];
export class State {
public id = 0; // ID
public categoryId = 0; // 分类ID
public title = ''; // 标题
public description = ''; // 描述
public content = ''; // 内容
public image = ''; // 单图
public attachfile = ''; // 附件
public cityId = 0; // 所在城市
public switch = 2; // 显示开关
public cityId = null; // 所在城市
public sort = 0; // 排序
public switch = 2; // 显示开关
public status = 1; // 状态
public createdBy = 0; // 创建者
public updatedBy = 0; // 更新者
public createdBySumma?: null | MemberSumma = null; // 创建者摘要信息
public createdAt = ''; // 创建时间
public updatedBy = 0; // 更新者
public updatedBySumma?: null | MemberSumma = null; // 更新者摘要信息
public updatedAt = ''; // 修改时间
public deletedAt = ''; // 删除时间
public categoryId = null; // 测试分类
constructor(state?: Partial<State>) {
if (state) {
Object.assign(this, state);
}
}}
}
}
export function newState(state: State | Record<string, any> | null): State {
if (state !== null) {
@@ -48,21 +50,8 @@ export function newState(state: State | Record<string, any> | null): State {
return new State();
}
export interface IOptions extends Options {
sys_normal_disable: Option[];
};
export const options = ref<IOptions>({
sys_normal_disable: [],
});
// 表单验证规则
export const rules = {
categoryId: {
required: true,
trigger: ['blur', 'input'],
type: 'number',
message: '请输入分类ID',
},
title: {
required: true,
trigger: ['blur', 'input'],
@@ -87,12 +76,19 @@ export const rules = {
type: 'number',
message: '请输入排序',
},
categoryId: {
required: true,
trigger: ['blur', 'input'],
type: 'number',
message: '请输入测试分类',
},
};
// 表格搜索表单
export const schemas = ref<FormSchema[]>([
{
field: 'id',
component: 'NInputNumber',
component: 'NInput',
label: 'ID',
componentProps: {
placeholder: '请输入ID',
@@ -101,6 +97,28 @@ export const schemas = ref<FormSchema[]>([
},
},
},
{
field: 'title',
component: 'NInput',
label: '标题',
componentProps: {
placeholder: '请输入标题',
onUpdateValue: (e: any) => {
console.log(e);
},
},
},
{
field: 'description',
component: 'NInput',
label: '描述',
componentProps: {
placeholder: '请输入描述',
onUpdateValue: (e: any) => {
console.log(e);
},
},
},
{
field: 'status',
component: 'NSelect',
@@ -114,6 +132,17 @@ export const schemas = ref<FormSchema[]>([
},
},
},
{
field: 'createdBy',
component: 'NInput',
label: '创建者',
componentProps: {
placeholder: '请输入ID|用户名|姓名|手机号',
onUpdateValue: (e: any) => {
console.log(e);
},
},
},
{
field: 'createdAt',
component: 'NDatePicker',
@@ -127,12 +156,25 @@ export const schemas = ref<FormSchema[]>([
},
},
},
{
field: 'categoryId',
component: 'NSelect',
label: '测试分类',
defaultValue: null,
componentProps: {
placeholder: '请选择测试分类',
options: [],
onUpdateValue: (e: any) => {
console.log(e);
},
},
},
{
field: 'testCategoryName',
component: 'NInput',
label: '分类名称',
label: '关联分类',
componentProps: {
placeholder: '请输入分类名称',
placeholder: '请输入关联分类',
onUpdateValue: (e: any) => {
console.log(e);
},
@@ -140,31 +182,37 @@ export const schemas = ref<FormSchema[]>([
},
]);
// 表格列
export const columns = [
{
title: 'ID',
key: 'id',
},
{
title: '分类ID',
key: 'categoryId',
align: 'left',
width: 50,
},
{
title: '标题',
key: 'title',
align: 'left',
width: 150,
},
{
title: '描述',
key: 'description',
align: 'left',
width: 300,
},
{
title: '单图',
key: 'image',
align: 'left',
width: 100,
render(row) {
return h(NImage, {
width: 32,
height: 32,
src: row.image,
fallbackSrc: errorImg,
onError: errorImg,
style: {
width: '32px',
@@ -178,6 +226,8 @@ export const columns = [
{
title: '附件',
key: 'attachfile',
align: 'left',
width: 100,
render(row) {
if (row.attachfile === '') {
return ``;
@@ -194,13 +244,16 @@ export const columns = [
},
},
{
title: '所在城市',
key: 'cityId',
title: '排序',
key: 'sort',
align: 'left',
width: 100,
},
{
title: '显示开关',
key: 'switch',
width: 100,
align: 'left',
width: 150,
render(row) {
return h(NSwitch, {
value: row.switch === 1,
@@ -217,13 +270,11 @@ export const columns = [
});
},
},
{
title: '排序',
key: 'sort',
},
{
title: '状态',
key: 'status',
align: 'left',
width: 100,
render(row) {
if (isNullObject(row.status)) {
return ``;
@@ -246,38 +297,86 @@ export const columns = [
{
title: '创建者',
key: 'createdBy',
},
{
title: '更新者',
key: 'updatedBy',
align: 'left',
width: 150,
render(row) {
return renderPopoverMemberSumma(row.createdBySumma);
},
},
{
title: '创建时间',
key: 'createdAt',
align: 'left',
width: 180,
},
{
title: '更新者',
key: 'updatedBy',
align: 'left',
width: 150,
render(row) {
return renderPopoverMemberSumma(row.updatedBySumma);
},
},
{
title: '修改时间',
key: 'updatedAt',
align: 'left',
width: 180,
},
{
title: '分类名称',
title: '测试分类',
key: 'categoryId',
align: 'left',
width: 100,
render(row) {
if (isNullObject(row.categoryId)) {
return ``;
}
return h(
NTag,
{
style: {
marginRight: '6px',
},
type: getOptionTag(options.value.testCategoryOption, row.categoryId),
bordered: false,
},
{
default: () => getOptionLabel(options.value.testCategoryOption, row.categoryId),
}
);
},
},
{
title: '关联分类',
key: 'testCategoryName',
align: 'left',
width: 100,
},
];
async function loadOptions() {
options.value = await Dicts({
types: [
'sys_normal_disable',
],
});
for (const item of schemas.value) {
switch (item.field) {
case 'status':
item.componentProps.options = options.value.sys_normal_disable;
break;
}
}
}
// 字典数据选项
export const options = ref({
sys_normal_disable: [] as Option[],
testCategoryOption: [] as Option[],
});
await loadOptions();
// 加载字典数据选项
export function loadOptions() {
Dicts({
types: ['sys_normal_disable', 'testCategoryOption'],
}).then((res) => {
options.value = res;
for (const item of schemas.value) {
switch (item.field) {
case 'status':
item.componentProps.options = options.value.sys_normal_disable;
break;
case 'categoryId':
item.componentProps.options = options.value.testCategoryOption;
break;
}
}
});
}

148
web/src/views/curdDemo/view.vue
View File

@@ -1,81 +1,78 @@
<template>
<div>
<n-spin :show="loading" description="请稍候...">
<n-drawer v-model:show="showModal" :width="dialogWidth">
<n-drawer-content>
<template #header> 生成演示详情 </template>
<template #footer>
<n-button @click="showModal = false"> 关闭 </n-button>
</template>
<n-drawer v-model:show="showModal" :width="dialogWidth">
<n-drawer-content title="CURD列表详情" closable>
<n-spin :show="loading" description="请稍候...">
<n-descriptions label-placement="left" class="py-2" column="1">
<n-descriptions-item>
<template #label>分类ID</template>
{{ formValue.categoryId }}
</n-descriptions-item>
<n-descriptions-item>
<template #label>标题</template>
{{ formValue.title }}
</n-descriptions-item>
<n-descriptions-item>
<template #label>描述</template>
<span v-html="formValue.description"></span></n-descriptions-item>
<n-descriptions-item>
<template #label>内容</template>
<span v-html="formValue.content"></span></n-descriptions-item>
<n-descriptions-item>
<template #label>单图</template>
<n-image style="margin-left: 10px; height: 100px; width: 100px" :src="formValue.image"
/></n-descriptions-item>
<n-descriptions-item>
<template #label>附件</template>
<div
class="upload-card"
v-show="formValue.attachfile !== ''"
@click="download(formValue.attachfile)"
>
<div class="upload-card-item" style="height: 100px; width: 100px">
<div class="upload-card-item-info">
<div class="img-box">
<n-avatar :style="fileAvatarCSS">{{ getFileExt(formValue.attachfile) }}</n-avatar>
<n-descriptions-item label="测试分类">
<n-tag :type="getOptionTag(options.testCategoryOption, formValue?.categoryId)" size="small" class="min-left-space">
{{ getOptionLabel(options.testCategoryOption, formValue?.categoryId) }}
</n-tag>
</n-descriptions-item>
<n-descriptions-item>
<template #label>
标题
</template>
{{ formValue.title }}
</n-descriptions-item>
<n-descriptions-item>
<template #label>
描述
</template>
<span v-html="formValue.description"></span>
</n-descriptions-item>
<n-descriptions-item>
<template #label>
内容
</template>
<span v-html="formValue.content"></span>
</n-descriptions-item>
<n-descriptions-item>
<template #label>
所在城市
</template>
{{ formValue.cityId }}
</n-descriptions-item>
<n-descriptions-item>
<template #label>
排序
</template>
{{ formValue.sort }}
</n-descriptions-item>
<n-descriptions-item>
<template #label>
单图
</template>
<n-image style="margin-left: 10px; height: 100px; width: 100px" :src="formValue.image"/>
</n-descriptions-item>
<n-descriptions-item label="显示开关">
<n-switch v-model:value="formValue.switch" :unchecked-value="2" :checked-value="1" :disabled="true"/>
</n-descriptions-item>
<n-descriptions-item>
<template #label>
附件
</template>
<div class="upload-card" v-show="formValue.attachfile !== ''" @click="download(formValue.attachfile)">
<div class="upload-card-item" style="height: 100px; width: 100px">
<div class="upload-card-item-info">
<div class="img-box">
<n-avatar :style="fileAvatarCSS">
{{ getFileExt(formValue.attachfile) }}
</n-avatar>
</div>
</div>
</div>
</div>
</div>
</div>
</n-descriptions-item>
<n-descriptions-item>
<template #label>所在城市</template>
{{ formValue.cityId }}
</n-descriptions-item>
<n-descriptions-item label="显示开关">
<n-switch v-model:value="formValue.switch" :unchecked-value="2" :checked-value="1" :disabled="true"
/></n-descriptions-item>
<n-descriptions-item>
<template #label>排序</template>
{{ formValue.sort }}
</n-descriptions-item>
<n-descriptions-item label="状态">
<n-tag
:type="getOptionTag(options.sys_normal_disable, formValue?.status)"
size="small"
class="min-left-space"
>{{ getOptionLabel(options.sys_normal_disable, formValue?.status) }}</n-tag
>
</n-descriptions-item>
</n-descriptions-item>
<n-descriptions-item label="状态">
<n-tag :type="getOptionTag(options.sys_normal_disable, formValue?.status)" size="small" class="min-left-space">
{{ getOptionLabel(options.sys_normal_disable, formValue?.status) }}
</n-tag>
</n-descriptions-item>
</n-descriptions>
</n-drawer-content>
</n-drawer>
</n-spin>
</n-spin>
</n-drawer-content>
</n-drawer>
</div>
</template>
@@ -88,10 +85,12 @@
import { getFileExt } from '@/utils/urlUtils';
const message = useMessage();
const dialogWidth = ref('75%');
const loading = ref(false);
const showModal = ref(false);
const formValue = ref(newState(null));
const dialogWidth = computed(() => {
return adaModalWidth(580);
});
const fileAvatarCSS = computed(() => {
return {
'--n-merged-size': `var(--n-avatar-size-override, 80px)`,
@@ -105,7 +104,6 @@
}
function openModal(state: State) {
adaModalWidth(dialogWidth, 580);
showModal.value = true;
loading.value = true;
View({ id: state.id })
@@ -122,4 +120,4 @@
});
</script>
<style lang="less" scoped></style>
<style lang="less" scoped></style>