Merge remote-tracking branch 'origin/master'

src/router/routes/index.ts

@@ -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/Step1.vue

@@ -12,12 +12,7 @@
           </Input.Group>
         </template>
         <template #goodList>
-          <div class="flex">
-            <div> 支付订单： </div>
-            <div>
-              <div v-for="good in props.goods" :key="good"> {{ good.name }}￥{{ good.money }} </div>
-            </div>
-          </div>
+          <div v-for="good in props.goods" :key="good"> {{ good.name }}￥{{ good.money }} </div>
         </template>
       </BasicForm>
     </div>

src/views/personalCenter/orderingInformation/Step3.vue

@@ -2,22 +2,24 @@
   <div class="w-150 m-auto">
     <Result status="success" title="操作成功" sub-title="预计两小时内到账">
       <template #extra>
-        <a-button type="primary" @click="emit('redo')"> 再转一笔 </a-button>
-        <a-button> 查看账单 </a-button>
+        <a-button @click="handleCancel()"> 关闭 </a-button>
       </template>
     </Result>
-<!--    <div class="mt-6 px-6 py-8 bg-white">-->
-<!--      <Descriptions :column="1" class="mt-5">-->
-<!--        <Descriptions.Item label="付款账户"> ant-design@alipay.com </Descriptions.Item>-->
-<!--        <Descriptions.Item label="收款账户"> test@example.com </Descriptions.Item>-->
-<!--        <Descriptions.Item label="收款人姓名"> Vben </Descriptions.Item>-->
-<!--        <Descriptions.Item label="转账金额"> 500元 </Descriptions.Item>-->
-<!--      </Descriptions>-->
-<!--    </div>-->
+    <!--    <div class="mt-6 px-6 py-8 bg-white">-->
+    <!--      <Descriptions :column="1" class="mt-5">-->
+    <!--        <Descriptions.Item label="付款账户"> ant-design@alipay.com </Descriptions.Item>-->
+    <!--        <Descriptions.Item label="收款账户"> test@example.com </Descriptions.Item>-->
+    <!--        <Descriptions.Item label="收款人姓名"> Vben </Descriptions.Item>-->
+    <!--        <Descriptions.Item label="转账金额"> 500元 </Descriptions.Item>-->
+    <!--      </Descriptions>-->
+    <!--    </div>-->
   </div>
 </template>
 <script lang="ts" setup>
-  import { Result, Descriptions } from 'ant-design-vue';
+  import { Result } from 'ant-design-vue';
 
-  const emit = defineEmits(['redo']);
+  const emit = defineEmits(['cancel']);
+  function handleCancel() {
+    emit('cancel');
+  }
 </script>

src/views/personalCenter/orderingInformation/apiDoc/doc.data.ts

+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

+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

+<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/data.tsx

@@ -61,6 +61,7 @@ export const step1Schemas: FormSchema[] = [
     },
   },
   {
+    label: '支付订单',
     field: 'goodList',
     slot: 'goodList',
   },

src/views/personalCenter/orderingInformation/detail/detailData.ts

+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

+<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 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

@@ -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

@@ -4,6 +4,7 @@ export const orderTableColumn: BasicColumn[] = [
   {
     title: '订单名称',
     dataIndex: 'name',
+    slots: { customRender: 'name' },
   },
   {
     title: '订单类型',

src/views/personalCenter/orderingInformation/payModal.vue

@@ -6,7 +6,7 @@
     @register="registerModal"
     :showCancelBtn="false"
     :showOkBtn="false"
-    :title="'请付款'"
+    :title="'请支付'"
   >
     <div class="step-form-form">
       <Steps :current="current">
@@ -25,7 +25,7 @@
         v-show="current === 1"
         v-if="state.initStep2"
       />
-      <Step3 v-show="current === 2" @redo="handleRedo" v-if="state.initStep3" />
+      <Step3 @cancel="handleCancel" v-show="current === 2" @redo="handleRedo" v-if="state.initStep3" />
     </div>
   </BasicModal>
 </template>
@@ -65,6 +65,9 @@
   /**
    * 方法
    */
+  function handleCancel() {
+    closeModal();
+  }
   function handleStep1Next(step1Values: any) {
     current.value++;
     state.initStep2 = true;