update

docs/demo/src/WTA/wwwroot/components/list/index.js

@@ -12,6 +12,7 @@ import VueOfficeExcel from "@vue-office/excel";
 import { camelCase, capitalize } from "lodash";
 
 export default {
+  name: "AppList",
   components: { AppForm, SvgIcon, AppFormInput, VueOfficeExcel },
   template: html`
     <el-row>
@@ -30,7 +31,7 @@ export default {
     </el-row>
     <el-row style="padding-bottom:20px;">
       <el-col>
-        <template v-for="item in $route.meta.buttons">
+        <template v-for="item in buttons">
           <el-button
             :class="item.meta.htmlClass??'el-button--primary'"
             v-if="item.meta.isTop"
@@ -74,6 +75,15 @@ export default {
                   <template #default="scope">{{getProp(scope.row,item.navigation)}}</template>
                 </el-table-column>
               </template>
+              <template v-else-if="item.oneToMany">
+                <el-table-column :prop="key" :label="item.title">
+                  <template #default="scope">
+                    <el-link type="primary" @click="showList(scope.row[key],item.oneToMany)">
+                      <app-form-input :isReadOnly="true" :schema="item" :prop="key" v-model="scope.row" />
+                    </el-link>
+                  </template>
+                </el-table-column>
+              </template>
               <template v-else>
                 <template v-if="showColumn(item,key)">
                   <el-table-column :prop="key" sortable="custom" :sort-orders="['descending', 'ascending', null]">
@@ -95,7 +105,7 @@ export default {
               </template>
               <template #default="scope">
                 <div class="flex">
-                  <template v-for="item in $route.meta.buttons">
+                  <template v-for="item in buttons">
                     <el-button
                       :class="item.meta.htmlClass??'el-button--primary'"
                       v-if="!item.meta.isTop"
@@ -151,13 +161,27 @@ export default {
           </el-col>
         </el-row>
       </el-scrollbar>
-
       <template #footer>
         <span class="dialog-footer">
           <el-button type="primary" @click="filterDrawer=false"> {{$t('confirm')}} </el-button>
         </span>
       </template>
     </el-drawer>
+    <el-drawer v-model="subDrawer" destroy-on-close size="50%">
+      <el-scrollbar>
+        <app-list
+          v-if="subDrawer"
+          :controller="subListQuery.controller"
+          :query="subListQuery.query"
+          :buttons="subListQuery.buttons"
+        />
+      </el-scrollbar>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button type="primary" @click="subDrawer=false"> {{$t('confirm')}} </el-button>
+        </span>
+      </template>
+    </el-drawer>
     <el-dialog v-model="dialogVisible" align-center destroy-on-close width="700">
       <template #header> <span class="el-dialog__title"> {{editFormTitle}} </span> </template>
       <el-row>
@@ -185,22 +209,30 @@ export default {
       </template>
     </el-dialog>
   `,
-  props: ["modelValue"],
+  styles: html`<style>
+    .el-overlay {
+    }
+  </style>`,
+  props: ["modelValue", "controller", "buttons"],
   emits: ["command"],
   async setup(props, context) {
     const tableRef = ref(null);
     const columns = ref([]);
     const filterDrawer = ref(false);
+    const subDrawer = ref(false);
+    const subListQuery = ref({});
     const tableLoading = ref(false);
     const selectedRows = ref([]);
     const dialogVisible = ref(false);
     const route = useRoute();
     const { t } = useI18n();
-    const baseUrl = `${route.meta.controller}`;
+    const buttons = ref(props.buttons ?? route.meta.buttons);
+    const baseUrl = props.controller ?? `${route.meta.controller}`;
     const indexUrl = `${baseUrl}/index`;
     const vm = (await get(indexUrl)).data;
     const schema = vm.schema;
     const data = reactive(vm.model ?? schemaToModel(schema));
+    //Object.assign(data,prop.)
     const sortColumns = ref(new Map());
     const getSortModel = (model) => {
       const orderBy = model.orderBy
@@ -355,19 +387,30 @@ export default {
         dialogVisible.value = false;
       }
     };
+    const showList = (value, nav) => {
+      if (!subDrawer.value) {
+        subListQuery.value = {
+          controller: nav.substr(0, nav.lastIndexOf(".")),
+          query: { [nav.substr(nav.lastIndexOf(".") + 1)]: value },
+          buttons: [],
+        };
+        subDrawer.value = true;
+      }
+    };
     await load(indexUrl);
     return {
-      route,
       tableRef,
       tableLoading,
       columns,
       showColumn,
       filterDrawer,
+      subDrawer,
       dialogVisible,
       selectedRows,
       schema,
       queryFromSchema,
       tableSchema,
+      buttons,
       data,
       sortModel,
       getClass,
@@ -385,6 +428,8 @@ export default {
       load,
       click,
       submit,
+      showList,
+      subListQuery,
     };
   },
 };

docs/demo/src/WTA/wwwroot/views/list.js

@@ -5,22 +5,7 @@ import router from "../router/index.js";
 export default {
   components: { AppList },
   template: html`<el-scrollbar>
-    <app-list @command="onCommand">
+    <app-list @command="onCommand"> </app-list>
-      <template #columns="scope">
-        <el-table-column label="自定义列测试1" prop="id">
-          <template #default="scope"> {{scope.row.id}} </template>
-        </el-table-column>
-        <el-table-column label="自定义列测试2">
-          <template #default="scope"> {{scope.row.parent?.id}} </template>
-        </el-table-column>
-      </template>
-      <template #tableButtons="{rows}">
-        <el-button class="el-button--primary" @click="()=>(console.log(rows))">{{$t('test')}}</el-button>
-      </template>
-      <template #rowButtons="{rows}">
-        <el-button class="el-button--primary" @click="()=>(console.log(rows))">{{$t('test')}}</el-button>
-      </template>
-    </app-list>
   </el-scrollbar>`,
   setup() {
     console.log(router.currentRoute.value.fullPath);