Skip to content

B
bigDataSystem
Commit 6b97141b authored by LiXuyang's avatar LiXuyang
Browse files
Options

订单信息

parent f2181803
Hide whitespace changes
Inline Side-by-side
Showing with 581 additions and 13 deletions
src/router/routes/index.ts
View file @ 6b97141b
......@@ -1373,6 +1373,24 @@ export const PersonalCenterRoute: AppRouteRecordRaw = {
icon: '',
},
},
{
path: 'orderingInformation/detail',
name: 'orderingInformationDetail',
component: () => import('@/views/personalCenter/orderingInformation/detail/index.vue'),
meta: {
title: '订单详情',
icon: '',
},
},
{
path: 'orderingInformation/apiDoc',
name: 'orderingInformationApiDoc',
component: () => import('@/views/personalCenter/orderingInformation/apiDoc/index.vue'),
meta: {
title: 'api调用',
icon: '',
},
},
],
};
......
src/views/personalCenter/orderingInformation/apiDoc/doc.data.ts 0 → 100644
View file @ 6b97141b
import { BasicColumn } from '@/components/Table';
export const configTableColumn: BasicColumn[] = [
{
title: '列名',
dataIndex: 'field',
},
{
title: '参数code',
dataIndex: 'code',
},
{
title: '参数类型',
dataIndex: 'type',
},
{
title: '注释',
dataIndex: 'remark',
},
{
title: '是否必填',
dataIndex: 'required',
},
{
title: '参数值',
dataIndex: 'value',
slots: { customRender: 'value' },
},
];
src/views/personalCenter/orderingInformation/apiDoc/docData.ts 0 → 100644
View file @ 6b97141b
export const configData = [
{
field: 'iffinish_reset',
code: 'iffinish_reset',
type: 'object',
remark: '',
required: '是',
value: '1',
},
{
field: 'iffinish_reset',
code: 'iffinish_reset',
type: 'object',
remark: '',
required: '是',
value: '1',
},
{
field: 'maxRows',
code: 'maxRaws',
type: 'object',
remark: '',
required: '是',
value: '1',
},
];
src/views/personalCenter/orderingInformation/apiDoc/index.vue 0 → 100644
View file @ 6b97141b
<template>
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
<template #headerContent>
<div class="flex">
<div class="flex-1 header">
<LeftOutlined class="h-back" @click="handleBack" />
<FileSearchOutlined class="h-icon" />
<div class="h-txt">
<div class="h-des">API Doc</div>
</div>
</div>
<div class="h-bt-group">
<a-button type="link" @click="handleDown">
<div>
<DownloadOutlined class="h-bt-icon" />
</div>
下载
</a-button>
</div>
</div>
</template>
<template #footer>
<div class="cat-form">
<div class="cat-form-item">
<div class="cat-form-label"> 用户token </div>
<Textarea v-model:value="token" style="width: 50%; pointer-events: none" />
<div style="display: flex; align-items: end; margin: 0 0 10px -20px; z-index: 2">
<CopyOutlined @click="copyText" />
<div v-if="copySuccess" style="color: #40c397; margin-left: 10px">复制成功！</div>
</div>
</div>
</div>
<BasicTable @register="configTable">
<template #value="{ text, record }">
<Input v-model:value="record.value" />
</template>
</BasicTable>
<a-button type="primary">测试</a-button>
<Tabs v-model:activeKey="activeKey">
<TabPane key="1" tab="请求报文">
<div class="cat-form">
<div class="cat-form-item">
<div class="cat-form-label"> url </div>
<div class="flex-1">
<Input class="pointer-events-none" v-model:value="url" />
</div>
</div>
<div class="cat-form-item">
<Textarea :auto-size="{ minRow: 6 }" v-model:value="address" />
</div>
<div class="cat-form-item">
<div class="flex" style="margin: 25px 0 15px 0; width: 120px">
<div>返回结果源码</div>
<BasicHelp text="返回结果源码" />
</div>
<Textarea :auto-size="{ minRow: 6 }" v-model:value="resultTxt" />
</div>
</div>
</TabPane>
<TabPane key="2" tab="请求代码">
<div class="flex" style="margin: 15px 0">
<div style="width: 4px; margin: 4px 0; background-color: #128afa"></div>
<div style="margin-left: 6px"> 动态路由地址 </div>
</div>
<Textarea :auto-size="{ minRow: 6 }" v-model:value="address" />
<div class="flex" style="margin: 25px 0 15px 0">
<span>返回结果源码</span>
<BasicHelp text="返回结果源码" />
</div>
<Textarea :auto-size="{ minRow: 6 }" v-model:value="resultTxt" />
</TabPane>
</Tabs>
</template>
</PageWrapper>
</template>
<script lang="ts" setup>
import { PageWrapper } from '@/components/Page';
import BasicHelp from '@/components/Basic/src/BasicHelp.vue';
import { Row, Col, Tabs, TabPane, Input, Select, TableProps, Textarea } from 'ant-design-vue';
import {
ApiOutlined,
LeftOutlined,
CheckCircleFilled,
SearchOutlined,
FileSearchOutlined,
DownloadOutlined,
CopyOutlined,
} from '@ant-design/icons-vue';
import { useRoute, useRouter } from 'vue-router';
import { onMounted, ref } from 'vue';
import BasicTable from '@/components/Table/src/BasicTable.vue';
import { BasicTableProps, useTable } from '@/components/Table';
import { driveListData } from '@/views/dataSourceManage/driveManage/driveData';
import { columns, searchSchema } from '@/views/dataSourceManage/driveManage/drive.data';
import { apiDocColumnsData } from '@/views/dataService/serviceDevelopment/apiData';
import { apiDocColumns } from '@/views/dataService/serviceDevelopment/api.data';
import {
backTableColumn,
powerTableColumn,
} from '@/views/mallResourceDevelopment/API/publicAPI/apiDetail/detail.data';
import TableAction from '@/components/Table/src/components/TableAction.vue';
import { useMessage } from '@/hooks/web/useMessage';
import { searchFormSchema } from '@/views/auditLog/audi.data';
import { configTableColumn } from '@/views/mallResourceDevelopment/API/apiByApply/apiDoc/doc.data';
import { configData } from '@/views/mallResourceDevelopment/API/apiByApply/apiDoc/docData';
// 初始化
const router = useRouter();
const route = useRoute();
const { createMessage } = useMessage();
// 参数
const queryParams = ref({});
const activeKey = ref();
const bottomKey = ref();
const data = route.query;
const copySuccess = ref(false);
const token = `f8e4e97129c0fcc5f97953fed88fa2dabb6d35e4654cabaa835547f1c9555449893baa2d853db6a9d5c46026f7033e13db0486e650b770f1be4af2e8ac1fd7`;
const url = 'http://node322:28143/employee';
const address =
"curl -X POST‘http://node322:28143/employee′-H'token:\n" +
"7406056a00d65806200fe299d573a49b6bac08938e4ec73143d48caf110723bbc6d0e7efac9e01a2abbadada175b3c6ca3b251fd76cbbefed08f234998b5f7ac'-H'Content-Type:\n" +
'application/json\'-H\'Accept:*/*’-d\'("departmentID":"1")}"';
const resultTxt =
'{\n' +
'"success":true,\n' +
'"code":200，\n' +
'"message": "success"，\n' +
'“data":{\n' +
'"valueSize": 70,\n' +
'"columnNames":[\n' +
'"LastName"\n' +
'"FirstName"\n' +
'}\n' +
'}';
/**
* 方法
*/
function handleBack() {
router.go(-1);
}
function handleDown() {
createMessage.success('下载成功！');
}
// 复制文本的方法
const copyText = async () => {
try {
await navigator.clipboard.writeText(token);
copySuccess.value = true;
// 2秒后自动隐藏复制成功提示
setTimeout(() => {
copySuccess.value = false;
}, 2000);
} catch (err) {
console.error('复制失败', err);
}
};
/**
* table
*/
const [configTable] = useTable({
title: '请求参数',
api: async (params) => {
const response = {
pageNu: '1',
pageSize: '10',
pages: '1',
total: configData.length,
code: '',
message: '',
data: configData,
};
return { ...response };
},
columns: configTableColumn,
useSearchForm: false,
showTableSetting: false,
showIndexColumn: false,
bordered: true,
scroll: { y: 300 },
pagination: false,
} as BasicTableProps);
</script>
<style scoped>
.header {
display: flex;
flex-direction: row;
gap: 10px;
.h-back {
font-size: 20px;
}
.h-icon {
font-size: 30px;
color: #0a208a;
}
.h-txt {
display: flex;
flex-direction: column;
.h-des {
font-size: 20px;
font-weight: bolder;
}
.h-path {
color: #a4a8b6;
}
}
}
.h-bt-group {
display: flex;
gap: 10px;
.h-bt-icon {
font-size: 20px;
}
}
.title {
font-weight: bolder;
margin: 15px 0;
}
.col-item {
display: flex;
gap: 10px;
.item-label {
width: 100px;
}
}
.column-des {
display: flex;
gap: 10px;
.c-icon {
font-size: 16px;
}
.c-text {
}
}
.power-table-form {
display: flex;
gap: 10px;
.power-table-form-item {
width: 200px;
}
}
.cat-form {
padding: 10px 15px;
display: flex;
flex-direction: column;
gap: 15px;
.cat-form-item {
display: flex;
.cat-form-label {
width: 100px;
}
}
}
</style>
src/views/personalCenter/orderingInformation/detail/detailData.ts 0 → 100644
View file @ 6b97141b
export const infoList = [
{
label: '订单名称',
field: 'name',
},
{
label: '订单类型',
field: 'type',
},
{
label: '版本号',
field: 'version',
},
{
label: '发布人',
field: 'uploadPerson',
},
{
label: '交易金额',
field: 'money',
},
{
label: '交易发起时间',
field: 'startTime',
},
{
label: '交易结束时间',
field: 'endTime',
},
{
label: '交易进度',
field: 'progress',
},
];
src/views/personalCenter/orderingInformation/detail/index.vue
View file @ 6b97141b
<template>
<PageWrapper>
<template #headerContent>
<div class="flex">
<div class="flex-1 header">
<LeftOutlined class="h-back" @click="handleBack" />
<FileSearchOutlined class="h-icon" />
<div class="h-txt">
<div class="h-des">订单详情</div>
<div class="h-path">个人中心/订单信息/订单详情</div>
</div>
</div>
<div v-if="data.progress === '待支付'" class="h-group">
<a-button class="btn" type="primary" @click="handleDelete()"> 取消订单 </a-button>
<a-button type="primary" danger @click="handlePay()"> 支付 </a-button>
</div>
<div v-else class="h-group">
<a-button
v-if="['数据集', '文件'].includes(data.type)"
class="btn"
type="primary"
@click="handleDownload()"
>
下载
</a-button>
<a-button v-if="data.type === 'API'" class="btn" type="primary" @click="handleCall()">
调用
</a-button>
</div>
</div>
</template>
<template #footer>
<div style="padding: 20px">
<div class="title">订单信息</div>
<Row :gutter="[12, 20]">
<Col :span="12" v-for="info in infoList" :key="info">
<div class="col-item">
<div class="item-label">{{ info.label }}：</div>
<div class="item-des">{{ data[info.field] ? data[info.field] : '-' }}</div>
</div>
</Col>
</Row>
</div>
</template>
<PayModal @register="payModal" />
</PageWrapper>
</template>
<script>
export default {
name: "index"
}
<script lang="ts" setup>
import { Row, Col } from 'ant-design-vue';
import { PageWrapper } from '@/components/Page';
import { FileSearchOutlined, LeftOutlined } from '@ant-design/icons-vue';
import { useRoute, useRouter } from 'vue-router';
import { FormProps } from '@/components/Form';
import { ref } from 'vue';
import { useMessage } from '@/hooks/web/useMessage';
import { BasicTableProps, useTable } from '@/components/Table';
import {
orderFormSchema,
orderTableColumn,
} from '@/views/personalCenter/orderingInformation/order.data';
import { orderData } from '@/views/personalCenter/orderingInformation/orderData';
import { useModal } from '@/components/Modal';
import PayModal from '../payModal.vue';
import { infoList } from './detailData';
// 初始化
const { createMessage, createConfirm } = useMessage();
const [payModal, { openModal }] = useModal();
const router = useRouter();
const route = useRoute();
// 数据
const table = ref();
const data = route.query;
/**
* 方法
*/
// 返回
function handleBack() {
router.go(-1);
}
// 批量支付
function handlePayMore() {
openModal(true, {
isUpdate: false,
goods: getSelectRows(),
});
}
// 支付
function handlePay() {
openModal(true, {
isUpdate: false,
goods: [data],
});
}
// 取消订单
function handleRemove() {
createMessage.success('取消订单成功！');
}
// 下载
function handleDownload() {
createMessage.success('下载成功！');
}
// 推送
function handlePush(record) {
createMessage.success('推送成功！');
}
// 调用
function handleCall() {
router.push({
path: '/personalCenter/orderingInformation/apiDoc',
});
}
// 批量取消
function handleDelete() {
createConfirm({
iconType: 'warning',
title: '确认取消订单',
content: '确认取消订单吗？',
onOk() {
createMessage.success('取消订单成功!');
},
});
}
/**
* table
*/
const [registerTable, { getSelectRows }] = useTable({
title: '',
api: async (params) => {
console.log('params', params);
const response = {
pageNu: '1',
pageSize: '10',
pages: '1',
total: orderData.length,
code: '',
message: '',
data: orderData,
};
return { ...response };
},
columns: orderTableColumn,
rowSelection: true,
useSearchForm: true,
formConfig: {
baseColProps: { span: 3 },
schemas: orderFormSchema,
autoSubmitOnEnter: true,
} as FormProps,
showTableSetting: false,
bordered: true,
striped: false,
showIndexColumn: false,
actionColumn: {
width: 200,
title: '操作',
dataIndex: 'action',
// slots: { customRender: 'action' },
fixed: undefined,
},
} as BasicTableProps);
</script>
<style scoped>
.header {
display: flex;
flex-direction: row;
gap: 10px;
.h-back {
font-size: 20px;
}
.h-icon {
font-size: 30px;
color: #0a208a;
}
.h-txt {
display: flex;
flex-direction: column;
.h-des {
font-size: 20px;
font-weight: bolder;
}
.h-path {
color: #a4a8b6;
}
}
}
.h-group {
display: flex;
gap: 10px;
}
.col-item {
margin-left: 20px;
display: flex;
gap: 10px;
.item-label {
width: 100px;
}
}
.title {
font-weight: bolder;
font-size: 16px;
margin: 15px 0;
}
</style>
src/views/personalCenter/orderingInformation/index.vue
View file @ 6b97141b
......@@ -49,10 +49,10 @@
label: '下载',
onClick: handleDownload.bind(null, record),
},
{
label: '推送',
onClick: handlePush.bind(null, record),
},
// {
// label: '推送',
// onClick: handlePush.bind(null, record),
// },
]"
/>
<TableAction
......@@ -75,7 +75,10 @@
/>
</template>
</template>
<template #money="{ text, record}">
<template #name="{ text, record }">
<a @click="handleDetail(record)">{{ text }}</a>
</template>
<template #money="{ text, record }">
<span>￥{{ text }}</span>
</template>
</BasicTable>
......@@ -130,6 +133,7 @@
// 初始化
const { createMessage, createConfirm } = useMessage();
const [payModal, { openModal }] = useModal();
const router = useRouter();
// 数据
const table = ref();
/**
......@@ -171,7 +175,16 @@
}
// 调用
function handleCall(record) {
createMessage.success('调用成功！');
router.push({
path: '/personalCenter/orderingInformation/apiDoc',
});
}
// 跳转详情页
function handleDetail(record) {
router.push({
path: '/personalCenter/orderingInformation/detail',
query: record,
});
}
// 批量取消
function handleDelete() {
......
src/views/personalCenter/orderingInformation/order.data.ts
View file @ 6b97141b
......@@ -4,6 +4,7 @@ export const orderTableColumn: BasicColumn[] = [
{
title: '订单名称',
dataIndex: 'name',
slots: { customRender: 'name' },
},
{
title: '订单类型',
......
src/views/personalCenter/orderingInformation/payModal.vue
View file @ 6b97141b
......@@ -6,7 +6,7 @@
@register="registerModal"
:showCancelBtn="false"
:showOkBtn="false"
:title="'请付款'"
:title="'请支付'"
>
<div class="step-form-form">
<Steps :current="current">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment