b2894lxlx/guofu-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
南宁网宿科技
2024-04-24 16:36:46 +08:00
commit 121348e011
991 changed files with 158700 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1243
src/views/oa/product/components/product-edit.vue Normal file
View File

File diff suppressed because it is too large Load Diff

259
src/views/oa/product/components/renew-list.vue Normal file
View File

@@ -0,0 +1,259 @@
<template>
<a-card
title="续费管理"
:bordered="false"
v-if="hasRole('superAdmin') || hasRole('admin')"
>
<template #extra>
<a-button @click="addRecord">添加</a-button>
</template>
<div class="content">
<table
class="ele-table ele-table-border ele-table-stripe ele-table-medium"
>
<thead>
<tr>
<th>状态</th>
<th>续费金额</th>
<th>开始时间</th>
<th>结束时间</th>
<th width="360">描述</th>
<th style="text-align: center">操作</th>
</tr>
</thead>
<tr v-for="(item, index) in list" :key="index">
<td>
<template v-if="item.editStatus">
<a-select placeholder="请选择" v-model:value="item.status">
<a-select-option :value="0">待缴费</a-select-option>
<a-select-option :value="1">已缴费</a-select-option>
</a-select>
</template>
<template v-else>
<span v-if="item.status == 1">已缴费</span>
<span v-if="item.status == 0">待缴费</span>
</template>
</td>
<td>
<template v-if="item.editStatus">
<a-input-number
:min="0"
:max="999999"
class="ele-fluid"
placeholder="请输入续费金额"
v-model:value="item.money"
/>
</template>
<template v-else> ￥{{ item.money }} </template>
</td>
<td>
<template v-if="item.editStatus">
<a-date-picker
placeholder="开始日期"
value-format="YYYY-MM-DD"
v-model:value="item.startTime"
/>
</template>
<template v-else>
{{ toDateString(item.startTime, 'yyyy-MM-dd') }}
</template>
</td>
<td>
<template v-if="item.editStatus">
<a-date-picker
placeholder="结束日期"
value-format="YYYY-MM-DD"
v-model:value="item.endTime"
/>
</template>
<template v-else>
{{ toDateString(item.endTime, 'yyyy-MM-dd') }}
</template>
</td>
<td>
<template v-if="item.editStatus">
<a-input
class="ele-fluid"
placeholder="请输入描述内容"
v-model:value="item.comments"
/>
<a-upload
v-model:file-list="item.images"
class="upload-list-inline"
list-type="picture"
:before-upload="beforeUpload"
>
<a-button>
<UploadOutlined />
上传附件
</a-button>
</a-upload>
</template>
<template v-else>
<div class="comments">{{ item.comments }}</div>
<div class="files">
<a-upload
v-model:file-list="item.images"
class="upload-list-inline"
>
</a-upload>
</div>
</template>
</td>
<td style="text-align: center">
<template v-if="item.editStatus">
<a-space>
<a @click="save(item, index)">保存</a>
<a-divider type="vertical" />
<a-popconfirm title="确定要删除此记录吗？" @confirm="remove(index)">
<a class="ele-text-info">删除</a>
</a-popconfirm>
</a-space>
</template>
<template v-else>
<a-space>
<a @click="openEdit(index)">编辑</a>
<a-divider type="vertical" v-if="hasRole('superAdmin')" @confirm="removeRel(index)" />
<a-popconfirm title="确定要删除此记录吗？" v-if="hasRole('superAdmin')" @confirm="removeRel(index)">
<a class="ele-text-info">删除</a>
</a-popconfirm>
</a-space>
</template>
</td>
</tr>
</table>
</div>
</a-card>
</template>
<script setup lang="ts">
import { hasRole } from '@/utils/permission';
import { ref, watch } from 'vue';
import { addAppRenew, pageAppRenew, removeAppRenew } from "@/api/oa/app/renew";
import { AppRenew } from '@/api/oa/app/renew/model';
import { useUserStore } from '@/store/modules/user';
import { message } from 'ant-design-vue';
import { toDateString } from 'ele-admin-pro';
import { ItemType } from "ele-admin-pro/es/ele-image-upload/types";
import { uploadOss } from "@/api/system/file";
import { isImage } from "@/utils/common";
const props = defineProps<{
editStatus?: boolean;
appId?: number;
companyId?: number;
}>();
const userStore = useUserStore();
const list = ref<AppRenew[]>([]);
const files = ref<ItemType[]>([]);
const addRecord = () => {
list.value.unshift({
money: undefined,
comments: undefined,
startTime: undefined,
endTime: undefined,
nickname: userStore.info?.nickname,
status: 0,
images: undefined,
editStatus: true
});
};
// 文件上传事件
const beforeUpload = (file: File) => {
const item: ItemType = {
file,
uid: (file as any).uid,
name: file.name
}
if (!file.type.startsWith("image")) {
if (file.size / 1024 / 1024 > 100) {
message.error("大小不能超过 100MB");
return;
}
}
onUpload(item);
return false;
};
const onUpload = (d: ItemType) => {
uploadOss(<File>d.file)
.then((result) => {
files.value.push({
uid: result.id,
url: result.path,
name: isImage(result.path) ? 'image' : result.name,
status: "done"
});
message.success("上传成功");
})
.catch((e) => {
message.error(e.message);
});
};
const remove = (index: number) => {
list.value.splice(index, 1);
};
const openEdit = (index: number) => {
list.value[index].editStatus = true
}
const removeRel = (index: number) => {
removeAppRenew(list.value[index].appRenewId).then(() => {
list.value.splice(index, 1);
message.success('删除成功')
})
}
const save = (item: AppRenew, index: number) => {
item.appId = props.appId;
item.companyId = props.companyId;
item.startTime = item.startTime ? item.startTime + ' 00:00:00' : '';
item.endTime = item.endTime ? item.endTime + ' 23:59:59' : '';
item.nickname = userStore.info?.nickname;
item.userId = userStore.info?.userId;
if(files.value.length > 0){
item.images = JSON.stringify(files.value)
}
if (item.money == undefined || item.money == 0) {
message.error('请填写金额');
return false;
}
addAppRenew(item).then(() => {
list.value[index].editStatus = false;
message.success('保存成功');
});
};
const reload = () => {
pageAppRenew({ appId: props.appId }).then((res) => {
if (res?.list) {
list.value = res?.list.map((d) => {
d.editStatus = false;
if(d.images){
d.images = JSON.parse(d.images);
}
return d;
});
}
});
};
watch(
() => props.appId,
(options) => {
if (options) {
reload();
}
},
{
immediate: true
}
);
</script>
<style scoped lang="less"></style>

107
src/views/oa/product/components/search.vue Normal file
View File

@@ -0,0 +1,107 @@
<!-- 搜索表单 -->
<template>
<a-space :size="10" style="flex-wrap: wrap">
<a-button type="primary" class="ele-btn-icon" @click="add">
<template #icon>
<PlusOutlined />
</template>
<span>添加</span>
</a-button>
<a-radio-group v-model:value="type" @change="handleSearch">
<a-radio-button value="全部">全部</a-radio-button>
<a-radio-button value="已上架">已上架</a-radio-button>
<a-radio-button value="已下架">已下架</a-radio-button>
</a-radio-group>
<a-input-search
allow-clear
placeholder="请输入关键词"
v-model:value="where.keywords"
@pressEnter="search"
@search="search"
/>
<a-button @click="reset">重置</a-button>
</a-space>
</template>
<script lang="ts" setup>
import { PlusOutlined } from '@ant-design/icons-vue';
import useSearch from '@/utils/use-search';
import { ref, watch } from 'vue';
import { AppParam } from '@/api/oa/app/model';
const props = withDefaults(
defineProps<{
// 选中的角色
selection?: [];
}>(),
{}
);
const emit = defineEmits<{
(e: 'search', where?: AppParam): void;
(e: 'add'): void;
(e: 'remove'): void;
(e: 'advanced'): void;
}>();
// 表单数据
const { where, resetFields } = useSearch<AppParam>({
appId: undefined,
userId: undefined,
appStatus: undefined,
companyId: undefined,
companyName: '',
keywords: ''
});
// 下来选项
// 日期范围选择
const dateRange = ref<[string, string]>(['', '']);
const type = ref<any>('开发中');
/* 搜索 */
const search = () => {
const [d1, d2] = dateRange.value ?? [];
emit('search', {
...where,
createTimeStart: d1 ? d1 + ' 00:00:00' : '',
createTimeEnd: d2 ? d2 + ' 23:59:59' : ''
});
};
// 发布应用
const add = () => {
emit('add');
};
const handleSearch = () => {
where.showExpiration = undefined;
where.appStatus = type.value;
if (type.value == '全部') {
where.appStatus = undefined;
where.showExpiration = undefined;
} else {
where.appStatus = type.value;
if (type.value == '未签续费') {
where.sort = 'expirationTime';
where.order = 'asc';
where.showExpiration = false;
where.appStatus = '已上架';
} else {
where.sort = undefined;
where.order = undefined;
}
}
emit('search', where);
};
/* 重置 */
const reset = () => {
resetFields();
search();
};
watch(
() => props.selection,
() => {}
);
</script>

152
src/views/oa/product/components/task-list.vue Normal file
View File

@@ -0,0 +1,152 @@
<template>
<a-card
title="待处理工单"
:bordered="false"
v-if="hasRole('superAdmin') || hasRole('admin')"
>
<template #extra>
<a href="/oa/task">查看更多</a>
</template>
<div class="content">
<a-space style="margin-bottom: 15px" v-if="editStatus" />
<table class="ele-table ele-table-stripe ele-table-medium">
<thead>
<tr>
<th width="80">工单号</th>
<th width="100">工单类型</th>
<th>问题描述</th>
<th width="150">创建时间</th>
<th width="100">状态</th>
</tr>
</thead>
<tbody v-for="(item, index) in list" :key="index">
<tr>
<td>{{ item.taskId }}</td>
<td>{{ item.taskType }}</td>
<td>
<div class="user-box">
<div class="user-info">
<a-badge
:dot="!item.isRead && item.userId != userStore.info?.userId"
>
<a-avatar :src="item.lastAvatar" size="large" />
</a-badge>
</div>
<div
class="content"
style="display: flex; flex-direction: column"
>
<div class="nickname">
<span class="ele-text-secondary">{{
item.lastNickname ? item.lastNickname : '未知'
}}</span>
<span
class="ele-text-placeholder"
style="padding-left: 10px"
>{{ timeAgo(item.updateTime) }}</span
>
</div>
<div class="text">
<a
class="ele-text-heading"
@click="openUrl('/oa/task/detail/' + item.taskId)"
>{{ item.content }}</a
>
</div>
</div>
<div class="last-time ele-text-info"> </div>
</div>
</td>
<td>{{ toDateString(item.createTime, 'MM月dd日 HH:mm') }}</td>
<td>
<a-tag v-if="item.progress === TOBEARRANGED" color="red"
>待安排</a-tag
>
<a-tag v-if="item.progress === PENDING" color="orange"
>待处理</a-tag
>
<a-tag v-if="item.progress === PROCESSING" color="purple"
>处理中</a-tag
>
<a-tag v-if="item.progress === TOBECONFIRMED" color="cyan"
>待评价</a-tag
>
<a-tag v-if="item.progress === COMPLETED" color="green"
>已完成</a-tag
>
<a-tag v-if="item.progress === CLOSED">已关闭</a-tag>
</td>
</tr>
</tbody>
</table>
</div>
</a-card>
</template>
<script setup lang="ts">
import { hasRole } from '@/utils/permission';
import { ref, watch } from 'vue';
import { pageTask } from '@/api/oa/task';
import { Task } from '@/api/oa/task/model';
import {
CLOSED,
COMPLETED,
PENDING,
PROCESSING,
TOBEARRANGED,
TOBECONFIRMED
} from '@/api/oa/task/model/progress';
import { openUrl } from '@/utils/common';
import { timeAgo, toDateString } from 'ele-admin-pro';
import { useUserStore } from '@/store/modules/user';
const props = defineProps<{
editStatus?: boolean;
appId?: number;
companyId?: number;
}>();
const list = ref<Task[]>([]);
const userStore = useUserStore();
const reload = () => {
pageTask({ appId: props.appId }).then((res) => {
if (res?.list) {
list.value = res?.list;
}
});
};
watch(
() => props.appId,
(options) => {
if (options) {
reload();
}
},
{
immediate: true
}
);
</script>
<style scoped lang="less">
.user-box {
display: flex;
align-items: center;
.user-info {
display: flex;
flex-direction: column;
align-items: start;
margin-right: 7px;
}
.last-time {
margin-left: 12px;
}
.content {
.text {
max-width: 90%;
}
}
}
</style>

36
src/views/oa/product/detail/components/product-about.vue Normal file
View File

@@ -0,0 +1,36 @@
<template>
<a-card class="about">
<byte-md-viewer :value="data" :plugins="plugins" />
</a-card>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import gfm from '@bytemd/plugin-gfm';
import zh_HansGfm from '@bytemd/plugin-gfm/locales/zh_Hans.json';
import highlight from '@bytemd/plugin-highlight';
import 'bytemd/dist/index.min.css';
import 'github-markdown-css/github-markdown-light.css';
import 'github-markdown-css/github-markdown-light.css';
defineProps<{
data: any;
}>();
// 插件
const plugins = ref([
gfm({
locale: zh_HansGfm
}),
highlight()
]);
</script>
<style lang="less">
.about {
max-width: 1000px;
border: 4px solid #f3f3f3;
}
.about * {
padding: 8px;
max-width: 1000px;
}
</style>

232
src/views/oa/product/detail/components/product-annex-edit.vue Normal file
View File

@@ -0,0 +1,232 @@
<!-- 角色编辑弹窗 -->
<template>
<ele-modal
:width="600"
:visible="visible"
:confirm-loading="loading"
:title="isUpdate ? '编辑内容' : '上传文件'"
:body-style="{ paddingBottom: '8px' }"
@update:visible="updateVisible"
@ok="save"
>
<a-form
ref="formRef"
:model="form"
:rules="rules"
:label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
:wrapper-col="
styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
"
>
<a-form-item label="上传文件" name="fileName" v-if="!isUpdate">
<span
class="ele-text-success"
v-if="fileName"
style="margin-right: 10px"
>
{{ fileName }}
</span>
<a-upload
:show-upload-list="false"
:accept="'video/*'"
v-if="!fileName"
:customRequest="onUpload"
>
<a-button type="primary" class="ele-btn-icon">
<template #icon>
<UploadOutlined />
</template>
<span>上传文件</span>
</a-button>
</a-upload>
</a-form-item>
<a-form-item label="设置分类" name="name">
<SelectDict
dict-code="groupId"
:placeholder="`选择分类`"
v-model:value="form.groupName"
@done="chooseGroupId"
/>
</a-form-item>
<a-form-item label="文件名称" name="name">
<a-input
allow-clear
:maxlength="20"
placeholder="请输入文件名称"
v-model:value="form.name"
/>
</a-form-item>
<a-form-item label="描述" name="comments">
<a-textarea
:rows="4"
:maxlength="200"
placeholder="这一刻的想法.."
v-model:value="form.comments"
/>
</a-form-item>
<!-- <a-form-item label="封面图" name="images">-->
<!-- <ele-image-upload-->
<!-- v-model:value="images"-->
<!-- :limit="1"-->
<!-- :drag="true"-->
<!-- :item-style="{ width: '60px', height: '60px' }"-->
<!-- :accept="'image/*'"-->
<!-- :upload-handler="uploadHandler"-->
<!-- @upload="onUpload"-->
<!-- />-->
<!-- </a-form-item>-->
</a-form>
</ele-modal>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { message } from 'ant-design-vue/es';
import type { FormInstance, Rule } from 'ant-design-vue/es/form';
import { storeToRefs } from 'pinia';
import { useThemeStore } from '@/store/modules/theme';
import useFormData from '@/utils/use-form-data';
import type { FileRecord } from '@/api/system/file/model';
import { messageLoading } from 'ele-admin-pro';
import { addFiles, updateFiles, uploadFile } from '@/api/system/file';
import { UploadOutlined } from '@ant-design/icons-vue';
import { RuleObject } from 'ant-design-vue/es/form';
import { DictData } from '@/api/system/dict-data/model';
// 是否开启响应式布局
const themeStore = useThemeStore();
const { styleResponsive } = storeToRefs(themeStore);
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
const props = defineProps<{
// 弹窗是否打开
visible: boolean;
// 修改回显的数据
data?: FileRecord | null;
}>();
//
const formRef = ref<FormInstance | null>(null);
const fileName = ref('');
// 是否是修改
const isUpdate = ref(false);
// 提交状态
const loading = ref(false);
// 表单数据
const { form, resetFields, assignFields } = useFormData<FileRecord>({
id: 0,
name: '',
comments: ''
});
// 表单验证规则
const rules = reactive<Record<string, Rule[]>>({
fileName: [
{
required: true,
message: '请上传文件',
type: 'string',
trigger: 'blur',
validator: async (_rule: RuleObject) => {
if (!isUpdate.value && fileName.value.length == 0) {
return Promise.reject('请上传文件');
}
return Promise.resolve();
}
}
],
name: [
{
required: true,
message: '请输入文件名称',
type: 'string',
trigger: 'blur'
}
]
});
const chooseGroupId = (item: DictData) => {
form.groupId = item.dictDataId;
form.groupName = item.dictDataName;
};
// 上传文件
const onUpload = (item) => {
const { file } = item;
if (!file.type.startsWith('video')) {
message.error('文件格式不正确！');
return;
}
if (file.size / 1024 / 1024 > 100) {
message.error('大小不能超过 100MB');
return;
}
const hide = messageLoading({
content: '上传中..',
duration: 0,
mask: true
});
uploadFile(file)
.then((data) => {
hide();
fileName.value = String(data.name);
message.success('上传成功');
})
.catch((e) => {
message.error(e.message);
hide();
});
};
/* 保存编辑 */
const save = () => {
if (!formRef.value) {
return;
}
formRef.value
.validate()
.then(() => {
loading.value = true;
const saveOrUpdate = isUpdate.value ? updateFiles : addFiles;
saveOrUpdate(form)
.then((msg) => {
loading.value = false;
message.success(msg);
updateVisible(false);
emit('done');
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
})
.catch(() => {});
};
/* 更新visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
watch(
() => props.visible,
(visible) => {
if (visible) {
if (props.data) {
assignFields(props.data);
isUpdate.value = true;
} else {
isUpdate.value = false;
}
} else {
resetFields();
formRef.value?.clearValidate();
}
}
);
</script>

297
src/views/oa/product/detail/components/product-annex.vue Normal file
View File

@@ -0,0 +1,297 @@
<template>
<!-- 表格 -->
<ele-pro-table
ref="tableRef"
row-key="id"
:columns="columns"
:datasource="datasource"
:customRow="customRow"
:scroll="{ x: 800 }"
cache-key="proAppAnnexTable"
>
<template #toolbar>
<a-space>
<a-upload :show-upload-list="false" :customRequest="onUpload">
<a-button class="ele-btn-icon">
<template #icon>
<UploadOutlined />
</template>
<span>上传文件{{}}</span>
</a-button>
</a-upload>
<a-button
danger
type="primary"
class="ele-btn-icon"
v-if="selection.length > 0"
@click="removeBatch"
>
<template #icon>
<delete-outlined />
</template>
<span>删除</span>
</a-button>
<a-input-search
allow-clear
v-model:value="searchText"
placeholder="请输入关键词"
@search="reload"
@pressEnter="reload"
/>
</a-space>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.dataIndex === 'name'">
<span>{{ record.name }}</span>
<a-tooltip :title="`复制链接地址`">
<copy-outlined
style="padding-left: 4px"
@click="copyText(record.url)"
/>
</a-tooltip>
</template>
<template v-if="column.key === 'action'">
<a @click="openNew(record.url)">预览</a>
<a-divider type="vertical" />
<a :href="record.downloadUrl" target="_blank">下载</a>
<a-divider type="vertical" />
<a @click="openEdit(record)">修改</a>
<a-divider type="vertical" />
<a-popconfirm
placement="topRight"
title="确定要删除此文件吗？"
@confirm="remove(record)"
>
<a class="ele-text-danger">删除</a>
</a-popconfirm>
</template>
</template>
</ele-pro-table>
<!-- 编辑弹窗 -->
<app-annex-edit v-model:visible="showEdit" :data="current" @done="reload" />
</template>
<script lang="ts" setup>
import { createVNode, ref, watch } from 'vue';
import { message, Modal } from 'ant-design-vue/es';
import {
UploadOutlined,
DeleteOutlined,
CopyOutlined,
ExclamationCircleOutlined
} from '@ant-design/icons-vue';
import type { EleProTable } from 'ele-admin-pro/es';
import type {
DatasourceFunction,
ColumnItem
} from 'ele-admin-pro/es/ele-pro-table/types';
import { messageLoading, toDateString } from 'ele-admin-pro/es';
import AppAnnexEdit from './product-annex-edit.vue';
import { removeFile, uploadFileLocal } from '@/api/system/file';
import type { FileRecord, FileRecordParam } from '@/api/system/file/model';
import { copyText, openNew } from '@/utils/common';
import { pageProductTabs, removeProductTabs } from '@/api/oa/product/tabs';
const props = defineProps<{
productId: any;
data: any;
}>();
// 表格实例
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
// 表格选中数据
const selection = ref<FileRecord[]>([]);
// 当前编辑数据
const current = ref<FileRecord | null>(null);
// 是否显示编辑弹窗
const showEdit = ref(false);
const type = ref('name');
const groupId = ref<number>(0);
const searchText = ref('');
// 表格列配置
const columns = ref<ColumnItem[]>([
{
key: 'index',
width: 48,
align: 'center',
fixed: 'left',
hideInSetting: true,
customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
},
{
title: '文件名称',
dataIndex: 'name',
ellipsis: true
},
{
title: '描述',
dataIndex: 'comments',
ellipsis: true
},
{
title: '文件大小',
dataIndex: 'length',
sorter: true,
showSorterTooltip: false,
ellipsis: true,
customRender: ({ text }) => {
if (text < 1024) {
return text + 'B';
} else if (text < 1024 * 1024) {
return (text / 1024).toFixed(1) + 'KB';
} else if (text < 1024 * 1024 * 1024) {
return (text / 1024 / 1024).toFixed(1) + 'M';
} else {
return (text / 1024 / 1024 / 1024).toFixed(1) + 'G';
}
},
width: 120
},
{
title: '上传者',
width: 120,
dataIndex: 'createNickname'
},
{
title: '上传时间',
dataIndex: 'createTime',
sorter: true,
width: 180,
showSorterTooltip: false,
ellipsis: true,
customRender: ({ text }) => toDateString(text)
},
{
title: '操作',
key: 'action',
width: 260,
align: 'center'
}
]);
// 表格数据源
const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
// where = {};
// if (type.value == 'name') {
// where.name = searchText.value;
// }
// if (type.value == 'createNickname') {
// where.createNickname = searchText.value;
// }
// if (groupId.value > 0) {
// where.groupId = groupId.value;
// }
// where.contentType = 'application';
where.productId = props.productId;
return pageProductTabs({ ...where, ...orders, page, limit });
};
/* 搜索 */
const reload = (where?: FileRecordParam) => {
selection.value = [];
tableRef?.value?.reload({ page: 1, where });
};
/* 打开编辑弹窗 */
const openEdit = (row?: FileRecord) => {
current.value = row ?? null;
showEdit.value = true;
};
/* 删除单个 */
const remove = (row: FileRecord) => {
const hide = messageLoading('请求中..', 0);
removeFile(row.id)
.then((msg) => {
hide();
message.success(msg);
reload();
})
.catch((e) => {
hide();
message.error(e.message);
});
};
/* 批量删除 */
const removeBatch = () => {
if (!selection.value.length) {
message.error('请至少选择一条数据');
return;
}
Modal.confirm({
title: '提示',
content: '确定要删除选中的文件吗?',
icon: createVNode(ExclamationCircleOutlined),
maskClosable: true,
onOk: () => {
const hide = messageLoading('请求中..', 0);
removeProductTabs(selection.value.map((d) => d.id))
.then((msg) => {
hide();
message.success(msg);
reload();
})
.catch((e) => {
hide();
message.error(e.message);
});
}
});
};
// 上传文件
const onUpload = (item) => {
const { file } = item;
if (file.size / 1024 / 1024 > 100) {
message.error('大小不能超过 100MB');
return;
}
const hide = messageLoading({
content: '上传中..',
duration: 0,
mask: true
});
uploadFileLocal(file, props.data.appId)
.then((data) => {
console.log(data);
hide();
message.success('上传成功');
reload();
})
.catch((e) => {
message.error(e.message);
hide();
});
};
/* 自定义行属性 */
const customRow = (record: FileRecord) => {
return {
// 行点击事件
onClick: () => {
// console.log(record);
},
// 行双击事件
onDblclick: () => {
window.open(record.url);
}
};
};
watch(
() => props.productId,
(productId) => {
if (productId) {
reload();
}
},
{ immediate: true }
);
</script>
<script lang="ts">
export default {
name: 'AppAnnexIndex'
};
</script>

141
src/views/oa/product/detail/components/product-info.vue Normal file
View File

@@ -0,0 +1,141 @@
<template>
<a-descriptions title="基本信息" :column="2" bordered>
<a-descriptions-item
label="产品名称"
:labelStyle="{ width: '200px', color: '#808080' }"
>{{ data.name }}</a-descriptions-item
>
<a-descriptions-item
label="状态"
:labelStyle="{ width: '200px', color: '#808080' }"
>
<a-badge
status="processing"
:text="data.status == 0 ? '已上架' : '已下架'"
/>
</a-descriptions-item>
<a-descriptions-item
label="产品编号"
:labelStyle="{ width: '200px', color: '#808080' }"
>{{ data.productId }}</a-descriptions-item
>
<a-descriptions-item
label="产品标识"
:labelStyle="{ width: '200px', color: '#808080' }"
>{{ data.code }}</a-descriptions-item
>
<a-descriptions-item
label="访问地址"
:labelStyle="{ width: '200px', color: '#808080' }"
>
<span @click="openUrl(`http://site-${data.tenantId}.wsdns.cn`)">{{
`site-${data.tenantId}.wsdns.cn`
}}</span>
</a-descriptions-item>
<a-descriptions-item
label="应用类型"
:labelStyle="{ width: '200px', color: '#808080' }"
>
WEB
</a-descriptions-item>
<a-descriptions-item
label="描述"
:span="2"
layout="vertical"
:labelStyle="{ width: '200px', color: '#808080' }"
>
{{ data.comments }}
</a-descriptions-item>
<a-descriptions-item
label="头像"
layout="vertical"
:labelStyle="{ width: '200px', color: '#808080' }"
>
<ele-image-upload
v-model:value="logo"
:disabled="true"
:item-style="{ width: '90px', height: '90px' }"
:limit="1"
/>
</a-descriptions-item>
<a-descriptions-item
label="二维码"
layout="vertical"
:labelStyle="{ width: '200px', color: '#808080' }"
/>
</a-descriptions>
<a-descriptions title="产品规格" bordered style="margin-top: 20px">
<a-descriptions-item
label="市场价"
layout="vertical"
:labelStyle="{ width: '200px', color: '#808080' }"
>
<a-statistic :precision="2" :value="data.money" />
</a-descriptions-item>
<a-descriptions-item
label="折扣价"
layout="vertical"
:labelStyle="{ width: '200px', color: '#808080' }"
>
<a-statistic :precision="2" :value="data.money" />
</a-descriptions-item>
<a-descriptions-item
label="成本价"
layout="vertical"
:labelStyle="{ width: '200px', color: '#808080' }"
>
<a-statistic :precision="2" :value="data.money" />
</a-descriptions-item>
<a-descriptions-item
label="初始销量"
layout="vertical"
:labelStyle="{ width: '200px', color: '#808080' }"
>
{{ data.salesInitial }}
</a-descriptions-item>
<a-descriptions-item
label="实际销量"
layout="vertical"
:labelStyle="{ width: '200px', color: '#808080' }"
>
{{ data.salesInitial }}
</a-descriptions-item>
<a-descriptions-item
label="库存"
layout="vertical"
:labelStyle="{ width: '200px', color: '#808080' }"
>
999
</a-descriptions-item>
<a-descriptions-item
label="浏览次数"
layout="vertical"
:labelStyle="{ width: '200px', color: '#808080' }"
>
{{ data.salesInitial }}
</a-descriptions-item>
<a-descriptions-item
label="下载次数"
layout="vertical"
:labelStyle="{ width: '200px', color: '#808080' }"
>
{{ data.salesInitial }}
</a-descriptions-item>
<a-descriptions-item
label="库存计算方式"
layout="vertical"
:labelStyle="{ width: '200px', color: '#808080' }"
>
付款减库存
</a-descriptions-item>
</a-descriptions>
</template>
<script lang="ts" setup>
import { Product } from '@/api/oa/product/model';
import { openUrl } from '@/utils/common';
defineProps<{
data: Product;
logo: [] | any;
}>();
</script>

27
src/views/oa/product/detail/components/product-photo.vue Normal file
View File

@@ -0,0 +1,27 @@
<template>
<div class="content">
<template v-if="data.appType === 'web'">
<a-image-preview-group>
<a-space :size="20" v-for="(item, index) in images" :key="index">
<a-image :width="360" :src="item.url" />
</a-space>
</a-image-preview-group>
</template>
<template v-else>
<a-image-preview-group>
<a-space :size="20" v-for="(item, index) in images" :key="index">
<a-image :width="200" :src="item.url" />
</a-space>
</a-image-preview-group>
</template>
</div>
</template>
<script lang="ts" setup>
import { App } from '@/api/oa/app/model';
defineProps<{
visible: boolean;
data: App;
images: any[];
}>();
</script>

177
src/views/oa/product/detail/components/product-tabs-edit.vue Normal file
View File

@@ -0,0 +1,177 @@
<!-- 用户编辑弹窗 -->
<template>
<ele-modal
:width="1000"
:visible="visible"
:maskClosable="false"
:maxable="maxable"
:title="isUpdate ? '编辑参数' : '添加参数'"
:body-style="{ paddingBottom: '28px' }"
@update:visible="updateVisible"
@ok="save"
>
<a-form
ref="formRef"
:model="form"
:rules="rules"
:label-col="{ md: { span: 2 }, sm: { span: 4 }, xs: { span: 24 } }"
:wrapper-col="{ md: { span: 21 }, sm: { span: 22 }, xs: { span: 24 } }"
>
<a-form-item label="名称" name="name">
<a-input allow-clear placeholder="字段名称" v-model:value="form.name" />
</a-form-item>
<a-form-item label="参数" name="comments">
<!-- 编辑器 -->
<byte-md-editor
v-model:value="form.comments"
placeholder="参数内容"
:locale="zh_Hans"
mode="split"
:plugins="plugins"
height="300px"
maxLength="500"
:editorConfig="{ lineNumbers: true }"
/>
</a-form-item>
<a-form-item label="排序" name="sortNumber">
<a-input-number
:min="0"
:max="99999"
class="ele-fluid"
placeholder="请输入排序号"
v-model:value="form.sortNumber"
/>
</a-form-item>
</a-form>
</ele-modal>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { FormInstance } from 'ant-design-vue/es/form';
import { AppField } from '@/api/oa/app/field/model';
import useFormData from '@/utils/use-form-data';
import { decrypt, encrypt } from '@/utils/common';
import { addAppField, updateAppField } from '@/api/oa/app/field';
import { message } from 'ant-design-vue/es';
import zh_Hans from 'bytemd/locales/zh_Hans.json';
import gfm from '@bytemd/plugin-gfm';
import zh_HansGfm from '@bytemd/plugin-gfm/locales/zh_Hans.json';
import highlight from '@bytemd/plugin-highlight';
// 是否是修改
const isUpdate = ref(false);
const props = defineProps<{
// 弹窗是否打开
visible: boolean;
productId: number | null | undefined;
// 修改回显的数据
data?: AppField | null;
}>();
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
// 提交状态
const loading = ref(false);
// 是否显示最大化切换按钮
const maxable = ref(true);
const formRef = ref<FormInstance | null>(null);
const { form, resetFields, assignFields } = useFormData<AppField>({
id: undefined,
appId: undefined,
name: '',
comments: '',
status: 0,
sortNumber: 0
});
// 表单验证规则
const rules = reactive({
comments: [
{
required: true,
type: 'string',
message: '请填写参数内容'
}
],
name: [
{
required: true,
message: '请输入名称'
}
]
});
// 插件
const plugins = ref([
gfm({
locale: zh_HansGfm
}),
highlight()
]);
/* 更新visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
/* 保存编辑 */
const save = () => {
if (!formRef.value) {
return;
}
formRef.value
.validate()
.then(() => {
loading.value = true;
const data = {
...form,
appId: props.appId
};
// 加密信息处理
if (form.comments != '') {
data.comments = encrypt(form.comments);
} else {
data.comments = undefined;
}
const saveOrUpdate = isUpdate.value ? updateAppField : addAppField;
console.log(isUpdate.value);
saveOrUpdate(data)
.then((msg) => {
loading.value = false;
message.success(msg);
updateVisible(false);
emit('done');
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
})
.catch(() => {});
};
watch(
() => props.visible,
(visible) => {
if (visible) {
if (props.data) {
const comments = decrypt(props.data.comments);
assignFields(props.data);
form.comments = comments;
isUpdate.value = true;
} else {
isUpdate.value = false;
}
} else {
resetFields();
}
}
);
</script>

13
src/views/oa/product/detail/components/product-tabs-search.vue Normal file
View File

@@ -0,0 +1,13 @@
<template>
<a-button @click="add">添加参数</a-button>
</template>
<script lang="ts" setup>
const emit = defineEmits<{
(e: 'add'): void;
}>();
const add = () => {
emit('add');
};
</script>

234
src/views/oa/product/detail/components/product-tabs.vue Normal file
View File

@@ -0,0 +1,234 @@
<template>
<div class="app-task">
<!-- 表格 -->
<ele-pro-table
ref="tableRef"
row-key="taskId"
:columns="columns"
:datasource="datasource"
tool-class="ele-toolbar-form"
class="sys-org-table"
>
<template #toolbar>
<ProductTabsSearch @add="openEdit" @remove="removeBatch" />
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'comments'">
<byte-md-viewer
:value="decrypt(record.comments)"
:plugins="plugins"
/>
</template>
<template v-if="column.key === 'action'">
<a @click="moveUp(record)">上移<ArrowUpOutlined /></a>
<a-divider type="vertical" />
<a @click="openEdit(record)">编辑</a>
<a-divider type="vertical" />
<a-popconfirm title="确定要删除此记录吗？" @confirm="remove(record)">
<a class="ele-text-danger">删除</a>
</a-popconfirm>
</template>
</template>
</ele-pro-table>
<!-- 编辑弹窗 -->
<ProductTabsEdit
v-model:visible="showEdit"
:product-id="productId"
:data="current"
@done="reload"
/>
</div>
</template>
<script lang="ts" setup>
import { createVNode, ref, watch } from 'vue';
import { message, Modal } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import type { EleProTable } from 'ele-admin-pro';
import type { DatasourceFunction } from 'ele-admin-pro/es/ele-pro-table/types';
import ProductTabsSearch from './product-tabs-search.vue';
import { decrypt } from '@/utils/common';
import ProductTabsEdit from './product-tabs-edit.vue';
import { AppField, AppFieldParam } from '@/api/oa/app/field/model';
import {
pageAppField,
removeAppField,
removeBatchAppField,
updateAppField
} from '@/api/oa/app/field';
import { ArrowUpOutlined } from '@ant-design/icons-vue';
import gfm from '@bytemd/plugin-gfm';
import zh_HansGfm from '@bytemd/plugin-gfm/locales/zh_Hans.json';
import highlight from '@bytemd/plugin-highlight';
import { ProductTabs } from '@/api/oa/product/tabs/model';
const props = defineProps<{
productId: any;
productTabs: ProductTabs[];
}>();
// 表格实例
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
const selection = ref<any[]>();
// 当前编辑数据
const current = ref<AppField | null>(null);
// 是否显示编辑弹窗
const showEdit = ref(false);
// 表格数据源
const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
// 搜索条件
where.productId = props.productId;
return pageAppField({
...where,
...orders,
page,
limit
});
};
// 表格列配置
const columns = ref<any[]>([
{
title: '名称',
dataIndex: 'name',
width: 180
},
{
title: '内容',
dataIndex: 'comments',
key: 'comments',
ellipsis: true
},
{
title: '排序',
dataIndex: 'sortNumber',
sorter: true,
width: 100,
align: 'center'
},
{
title: '操作',
key: 'action',
width: 180,
align: 'center',
hideInSetting: true
}
]);
const moveUp = (row?: AppField) => {
updateAppField({
id: row?.id,
sortNumber: Number(row?.sortNumber) + 1
}).then((msg) => {
message.success(msg);
reload();
});
};
/* 打开编辑弹窗 */
const openEdit = (row?: AppField) => {
current.value = row ?? null;
showEdit.value = true;
};
/* 搜索 */
const reload = (where?: AppFieldParam) => {
selection.value = [];
tableRef?.value?.reload({ where: where });
};
/* 删除单个 */
const remove = (row: AppField) => {
const hide = message.loading('请求中..', 0);
removeAppField(row.id)
.then((msg) => {
hide();
message.success(msg);
reload();
})
.catch((e) => {
hide();
message.error(e.message);
});
};
/* 批量删除 */
const removeBatch = () => {
if (!selection.value?.length) {
message.error('请至少选择一条数据');
return;
}
if (selection.value?.length) {
Modal.confirm({
title: '提示',
content: '确定要删除选中的记录吗?',
icon: createVNode(ExclamationCircleOutlined),
maskClosable: true,
onOk: () => {
const hide = message.loading('请求中..', 0);
removeBatchAppField(selection.value.map((d) => d.id))
.then((msg) => {
hide();
message.success(msg);
reload();
})
.catch((e) => {
hide();
message.error(e.message);
});
}
});
}
};
// 插件
const plugins = ref([
gfm({
locale: zh_HansGfm
}),
highlight()
]);
watch(
() => props.productId,
(productId) => {
if (productId) {
reload();
}
},
{ immediate: true }
);
</script>
<script lang="ts">
export default {
name: 'AppFieldIndex'
};
</script>
<style lang="less" scoped>
.user-box {
display: flex;
align-items: center;
.user-info {
display: flex;
flex-direction: column;
align-items: start;
margin-right: 7px;
}
.last-time {
margin-left: 12px;
}
.content {
.text {
max-width: 90%;
}
}
}
.nickname {
.ele-text-heading {
font-weight: bold;
}
}
</style>

183
src/views/oa/product/detail/index.vue Normal file
View File

@@ -0,0 +1,183 @@
<template>
<a-page-header
:title="title"
:style="{ padding: screenWidth > 480 ? '16px 24px' : '0' }"
@back="() => $router.go(-1)"
>
<a-spin :spinning="spinning">
<a-card
:bordered="false"
:body-style="{ paddingTop: '5px' }"
v-if="isShow"
>
<a-tabs v-model:active-key="active" @change="onChange">
<a-tab-pane tab="基本信息" key="base">
<ProductInfo :data="form" :appField="productTabs" :logo="logo" />
</a-tab-pane>
<a-tab-pane tab="参数设置" key="param">
<ProductTab
:productId="productId"
:data="productTabs"
@done="reload"
/>
</a-tab-pane>
<a-tab-pane tab="项目附件" key="annex">
<ProductAnnex :productId="productId" :data="form" />
</a-tab-pane>
<a-tab-pane tab="产品图片" key="photo">
<ProductPhoto
:product="form.productId"
:data="form"
:images="images"
/>
</a-tab-pane>
<a-tab-pane tab="使用说明" key="about">
<ProductAbout :product="form.productId" :data="form.content" />
</a-tab-pane>
<a-tab-pane tab="用户评价" key="comment">
<ProductAbout :product="form.productId" :data="form.content" />
</a-tab-pane>
</a-tabs>
</a-card>
<a-card v-else :bordered="false">
<div style="max-width: 960px; margin: 0 auto">
<a-result
status="error"
title="无查看权限"
sub-title="请先添加为项目成员"
>
<template #extra>
<a-space size="middle">
<a-button type="primary" @click="openUrl('/oa/product/index')"
>返回</a-button
>
</a-space>
</template>
</a-result>
</div>
</a-card>
</a-spin>
</a-page-header>
</template>
<script lang="ts" setup>
import { ref, unref, watch } from 'vue';
import { useRouter } from 'vue-router';
import { useThemeStore } from '@/store/modules/theme';
import { storeToRefs } from 'pinia';
import ProductInfo from './components/product-info.vue';
import ProductPhoto from './components/product-photo.vue';
import ProductAbout from './components/product-about.vue';
import ProductAnnex from './components/product-annex.vue';
import ProductTab from './components/product-tabs.vue';
import useFormData from '@/utils/use-form-data';
import { Product } from '@/api/oa/product/model';
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
import { setPageTabTitle } from '@/utils/page-tab-util';
import { ProductTabs } from '@/api/oa/product/tabs/model';
import { openUrl } from '@/utils/common';
import { getProduct } from '@/api/oa/product';
import { pageProductTabs } from '@/api/oa/product/tabs';
const { currentRoute } = useRouter();
// 当前选项卡
const active = ref('base');
// 是否开启响应式布局
const themeStore = useThemeStore();
const { screenWidth } = storeToRefs(themeStore);
const title = ref('项目名称');
const spinning = ref(true);
const isShow = ref(true);
const logo = ref<any[]>([]);
const productId = ref<number>(0);
const productQrcode = ref<any[]>([]);
const images = ref<ItemType[]>([]);
const productTabs = ref<ProductTabs[]>();
// 应用信息
const { form, assignFields, resetFields } = useFormData<Product>({
productId: undefined,
name: '',
code: '',
logo: '',
type: '',
money: undefined,
salesInitial: undefined,
salesActual: undefined,
stockTotal: undefined,
adminUrl: undefined,
// 下载地址
downUrl: undefined,
content: '',
comments: '',
backgroundColor: '',
backgroundImage: '',
backgroundGif: '',
buyUrl: '',
files: '',
serverUrl: undefined,
callbackUrl: undefined,
tenantId: undefined
});
const onChange = () => {
reload();
};
/**
* 加载数据
*/
const reload = () => {
resetFields();
logo.value = [];
productQrcode.value = [];
images.value = [];
productTabs.value = [];
// 加载项目详情
getProduct(productId.value)
.then((data) => {
assignFields(data);
if (data.name) {
title.value = data.name;
// 修改页签标题
setPageTabTitle(data.name);
}
if (data.logo) {
logo.value.push({
uid: data.productId,
url: data.logo,
status: 'done'
});
}
isShow.value = true;
spinning.value = false;
})
.catch((err) => {
isShow.value = false;
spinning.value = false;
});
// 加载产品属性
pageProductTabs({ productId: productId.value, limit: 50 }).then((res) => {
productTabs.value = res?.list;
});
};
watch(
currentRoute,
(route) => {
const { params } = unref(route);
const { id } = params;
if (id) {
productId.value = Number(id);
}
reload();
},
{ immediate: true }
);
</script>
<script lang="ts">
export default {
name: 'ProductDetail'
};
</script>

325
src/views/oa/product/index.vue Normal file
View File

@@ -0,0 +1,325 @@
<template>
<div class="page">
<div class="ele-body">
<a-card :bordered="false">
<!-- 表格 -->
<ele-pro-table
ref="tableRef"
row-key="productId"
:columns="columns"
:datasource="datasource"
:customRow="customRow"
tool-class="ele-toolbar-form"
:scroll="{ x: 1200 }"
class="sys-org-table"
:striped="true"
>
<template #toolbar>
<search
@search="reload"
:selection="selection"
@add="openEdit"
@remove="removeBatch"
@advanced="openAdvanced"
/>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'name'">
<div class="product-box">
<a-image
:height="45"
:width="45"
:preview="false"
:src="record.logo"
fallback="https://file.wsdns.cn/20230218/550e610d43334dd2a7f66d5b20bd58eb.svg"
/>
<div class="product-info">
<a
class="ele-text-heading"
@click="openUrl('/product/detail/' + record.productId)"
>
{{ record.name }}
</a>
<span class="ele-text-placeholder">
{{ record.code }}
</span>
</div>
</div>
</template>
<template v-if="column.key === 'productCode'">
<span>{{ record.productCode }}</span>
</template>
<template v-if="column.key === 'status'">
<a-tag v-if="record.status === 0" color="success">已上架</a-tag>
<a-tag v-if="record.status === 1">已下架</a-tag>
</template>
<template v-if="column.key === 'expirationTime'">
<template v-if="expirationTime(record.expirationTime) < 30">
<a-space>
<span class="ele-text-danger">{{
toDateString(record.expirationTime, 'yyyy-MM-dd')
}}</span>
<span class="ele-text-placeholder"
>(剩余{{ expirationTime(record.expirationTime) }}天)</span
>
</a-space>
</template>
<template v-else>
{{ toDateString(record.expirationTime, 'yyyy-MM-dd') }}
</template>
</template>
<template v-if="column.key === 'productQrcode'">
<a-image
v-if="record.productQrcode"
:height="45"
:width="45"
:src="record.productQrcode"
/>
</template>
<template v-if="column.key === 'action'">
<a-space>
<a @click="openEdit(record)">管理</a>
<a-divider type="vertical" />
<a-popconfirm
title="确定要删除此记录吗？"
@confirm="remove(record)"
>
<a class="ele-text-danger">删除</a>
</a-popconfirm>
</a-space>
</template>
</template>
</ele-pro-table>
</a-card>
</div>
<!-- 编辑弹窗 -->
<ProductEdit v-model:visible="showEdit" :data="current" @done="reload" />
</div>
</template>
<script lang="ts" setup>
import { createVNode, ref } from 'vue';
import { message, Modal } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import type { EleProTable } from 'ele-admin-pro';
import type {
DatasourceFunction,
ColumnItem
} from 'ele-admin-pro/es/ele-pro-table/types';
import Search from './components/search.vue';
import ProductEdit from './components/product-edit.vue';
import {
pageProduct,
removeBatchProduct,
removeProduct
} from '@/api/oa/product';
import { Product, ProductParam } from '@/api/oa/product/model';
import { toDateString } from 'ele-admin-pro';
import { openUrl } from '@/utils/common';
defineProps<{
activeKey?: boolean;
data?: any;
}>();
// 表格实例
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
// 表格列配置
const columns = ref<ColumnItem[]>([
{
dataIndex: 'productId',
width: 80
},
{
title: '产品名称',
dataIndex: 'name',
key: 'name'
},
{
title: '产品类型',
dataIndex: 'type',
align: 'center',
width: 180,
key: 'type'
},
{
title: '产品状态',
dataIndex: 'status',
align: 'center',
width: 180,
key: 'status'
},
{
title: '创建时间',
dataIndex: 'createTime',
key: 'createTime',
align: 'center',
width: 180,
sorter: true,
customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd HH:ss')
},
{
title: '操作',
key: 'action',
width: 120,
align: 'center',
fixed: 'right',
hideInSetting: true
}
]);
// 表格选中数据
const selection = ref<Product[]>([]);
// 当前编辑数据
const current = ref<Product | null>(null);
// 是否显示资产详情
// const showInfo = ref(false);
// 是否显示编辑弹窗
const showEdit = ref(false);
// 是否显示高级搜索
const showAdvancedSearch = ref(false);
// 表格数据源
const datasource: DatasourceFunction = ({
page,
limit,
where,
orders,
filters
}) => {
// 默认类型
if (where.keywords == undefined) {
where.productStatus = '开发中';
where.showExpiration = undefined;
}
return pageProduct({
...where,
...orders,
page,
limit
});
};
/* 搜索 */
const reload = (where?: ProductParam) => {
selection.value = [];
tableRef?.value?.reload({ where: where });
};
/* 打开编辑弹窗 */
const openEdit = (row?: Product) => {
current.value = row ?? null;
showEdit.value = true;
};
const expirationTime = (dateTime) => {
const now = new Date().getTime();
const expiration = new Date(dateTime).getTime();
const mss = expiration - now;
let days = Math.floor(mss / (1000 * 60 * 60 * 24));
let hours = Math.floor((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let minutes = Math.floor((mss % (1000 * 60 * 60)) / (1000 * 60));
let seconds = Math.round((mss % (1000 * 60)) / 1000);
return days;
};
/* 打开高级搜索 */
const openAdvanced = () => {
showAdvancedSearch.value = !showAdvancedSearch.value;
};
/* 删除单个 */
const remove = (row: Product) => {
const hide = message.loading('请求中..', 0);
removeProduct(row.productId)
.then((msg) => {
hide();
message.success(msg);
reload();
})
.catch((e) => {
hide();
message.error(e.message);
});
};
/* 批量删除 */
const removeBatch = () => {
console.log(selection.value);
if (!selection.value.length) {
message.error('请至少选择一条数据');
return;
}
Modal.confirm({
title: '提示',
content: '确定要删除选中的记录吗?',
icon: createVNode(ExclamationCircleOutlined),
maskClosable: true,
onOk: () => {
const hide = message.loading('请求中..', 0);
removeBatchProduct(selection.value.map((d) => d.productId))
.then((msg) => {
hide();
message.success(msg);
reload();
})
.catch((e) => {
hide();
message.error(e.message);
});
}
});
};
/* 自定义行属性 */
const customRow = (record: Product) => {
return {
// 行点击事件
onClick: () => {
// console.log(record);
},
// 行双击事件
onDblclick: () => {
openEdit(record);
}
};
};
reload();
</script>
<script lang="ts">
export default {
name: 'ProductIndex'
};
</script>
<style lang="less" scoped>
p {
line-height: 0.8;
}
.sys-org-table :deep(.ant-table-body) {
overflow: auto !important;
overflow: overlay !important;
}
.sys-org-table :deep(.ant-table-pagination.ant-pagination) {
padding: 0 4px;
margin-bottom: 0;
}
.price-edit {
padding-right: 5px;
}
.comments {
max-width: 200px;
}
.product-box {
display: flex;
.product-info {
display: flex;
margin-left: 5px;
flex-direction: column;
}
}
</style>