update

code/src/Modules/SettleAccount/host/SettleAccount.HttpApi.Host/wwwroot/utils/index.js

@@ -1,5 +1,9 @@
 import { get } from "lodash";
 
+async function delay(ms) {
+  return new Promise((resolve, _) => setTimeout(resolve, ms));
+}
+
 // format html`...` by vscode lit-html
 function html(strings, ...values) {
   let output = "";
@@ -135,6 +139,7 @@ async function importFunction(input) {
 
 export default html;
 export {
+  delay,
   persentFormat,
   bytesFormat,
   format,

code/src/Modules/SettleAccount/host/SettleAccount.HttpApi.Host/wwwroot/views/invoice/invoice_map_group.js

@@ -1,15 +1,114 @@
 import AppList from "../../../components/list/index.js";
 import html from "html";
+import { ref } from "vue";
+import { delay } from "../../../utils/index.js";
 import useConfig from "../../../models/invoice/invoice_map_group.js";
+import request from "../../../request/index.js";
 
 export default {
   components: { AppList },
-  template: html`<app-list :config="config" @command="onCommand" />`,
+  template: html`<app-list :config="config" @command="onCommand" />
+    <el-drawer v-model="drawer" destroy-on-close size="50%" class="page-drawer">
+      <template #header> <span class="el-dialog__title"> INVOICE_GRP_DETAIL_DTO </span> </template>
+      <el-row v-loading="loading">
+        <el-col style="height:calc(100vh - 180px);">
+          <el-tabs style="width:100%;height:100%;" v-if="drawer&&!loading">
+            <el-tab-pane label="invoicE_WAIT_DETAIL" v-if="model.invoicE_WAIT_DETAIL.length">
+              <el-auto-resizer>
+                <template #default="{ height, width }">
+                  <el-table-v2
+                    fixed
+                    :data="model.invoicE_WAIT_DETAIL"
+                    :columns="columns1"
+                    :width="width"
+                    :height="height"
+                  />
+                </template>
+              </el-auto-resizer>
+            </el-tab-pane>
+            <el-tab-pane label="invoicE_MAP_GROUP" v-if="model.invoicE_MAP_GROUP.length">
+              <el-auto-resizer>
+                <template #default="{ height, width }">
+                  <el-table-v2
+                    fixed
+                    :data="model.invoicE_MAP_GROUP"
+                    :columns="columns2"
+                    :width="width"
+                    :height="height"
+                  />
+                </template>
+              </el-auto-resizer>
+            </el-tab-pane>
+            <el-tab-pane label="invoicE_NOT_SETTLE" v-if="model.invoicE_NOT_SETTLE.length">
+              <el-auto-resizer>
+                <template #default="{ height, width }">
+                  <el-table-v2
+                    fixed
+                    :data="model.invoicE_NOT_SETTLE"
+                    :columns="columns3"
+                    :width="width"
+                    :height="height"
+                  />
+                </template>
+              </el-auto-resizer>
+            </el-tab-pane>
+          </el-tabs>
+        </el-col>
+      </el-row>
+
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button type="primary" @click="drawer=false"> {{$t('confirm')}} </el-button>
+        </span>
+      </template>
+    </el-drawer>`,
+  styles: html` <style>
+    .page-drawer .el-tab-pane {
+      width: 100%;
+      height: 100%;
+    }
+    .page-drawer .el-tabs__content {
+      height: calc(100% - 40px);
+    }
+  </style>`,
   setup() {
     const config = useConfig();
+    const drawer = ref(false);
+    const loading = ref(false);
+    const model = ref({
+      invoicE_WAIT_DETAIL: [{ version: "version" }],
+      invoicE_MAP_GROUP: [{ version: "version" }],
+      invoicE_NOT_SETTLE: [{ version: "version" }],
+    });
+
     const onCommand = async (item, rows) => {
-      console.log(item.path, item, rows);
+      drawer.value = true;
+      loading.value = true;
+      const data = { [item.path]: rows[0][item.path] };
+      // const response = await request("settleaccount/b-bAC_BA_SERVICE/detail-query", data, { method: "POST" });
+      // model.value = response.data;
+      await delay(1000);
+      loading.value = false;
     };
-    return { config, onCommand };
+    const columns1 = [
+      {
+        key: "version",
+        dataKey: "version",
+        title: "期间",
+      },
+    ];
+    const columns2 = [
+      {
+        dataKey: "version",
+        title: "期间",
+      },
+    ];
+    const columns3 = [
+      {
+        dataKey: "version",
+        title: "期间",
+      },
+    ];
+    return { config, onCommand, drawer, loading, model, columns1, columns2, columns3 };
   },
 };