zsysview 0.0.1

package/components/list/zsyslist.vue

@@ -0,0 +1,164 @@
+<template>
+  <div v-loading="view.loading">
+    <!-- 工具条 -->
+    <zsyslist_header
+      :config="config"
+      v-model:query="query"
+      @refresh="GetListData()"
+    >
+      <template #headermain>
+        <slot name="headermain"></slot>
+      </template>
+    </zsyslist_header>
+
+    <!-- 列表内容 -->
+    <el-table :data="data.listdata" style="width: 100%" :stripe="true">
+      <slot name="content"></slot>
+      <template #empty>
+        <el-empty description="无相关数据" :image-size="100" />
+      </template>
+    </el-table>
+
+    <!-- 分页 -->
+    <el-pagination
+      v-if="config.HideBottomToolbar != true"
+      v-model:current-page="currentPage"
+      v-model:page-size="pageSize"
+      :page-sizes="[30, 50, 100, 150, 200]"
+      layout="total, sizes, prev, next, pager, jumper"
+      :total="total"
+      prev-text="上一页"
+      next-text="下一页"
+      @change="pageChange"
+      style="margin-top: 6px; margin-bottom: 6px"
+    >
+    </el-pagination>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive } from "vue";
+import zsyslist_header from "./zsyslist_header.vue";
+// import { HttpApiV1 as http } from "../../../httpapi/http_api_v1";
+// import { zsysEventBus } from "@/utils/zsys_eventBus";
+const eventBus = zsysEventBus();
+const view = reactive({
+  loading: false,
+});
+
+//获取应用层的配置
+// const props = defineProps(['config'])
+const props = defineProps({
+  config: { type: Object, required: true },
+  module: { type: String, default: "" },
+  //   closeOnClickModal: { type: Boolean, default: true }
+});
+
+console.log("zlist", props.module);
+
+const config: ListConfig = props.config as ListConfig;
+const query = reactive({ keyword: "" });
+const currentPage = ref(1);
+const pageSize = ref(30);
+const total = ref(0);
+
+const data = ref({} as ListData); //后台返回的数据
+// console.log(data.value.count);
+
+// 定义整个列表控件的功能
+export interface ListConfig {
+  ApiUrl: string;
+  QuickConditionsGroups?: QuickConditionsGroup[]; //快捷查询条件组
+  HideBottomToolbar?: boolean; //隐藏底部工具条
+  KeywordTip?: string; //快捷查询提示
+  ExportUrl?: string; //导出功能接口
+  ExportColumn?: ExportColumn[]; //支持导出的字段选项，如果没有的话，就是全部支持字段
+}
+
+export interface ExportColumn {
+  ColumnTitle: string;
+  ColumnName: string;
+}
+
+//快捷查询条件结构
+export interface QuickConditionsGroup {
+  Label: string; //快捷查询组的标题
+  QuickConditions: SqlQueryParam[]; //快捷查询组的选项
+  Select: number; //选中的选项的下标
+}
+
+//查询条件结构
+interface SqlQueryParam {
+  label: string;
+  column: string | null;
+  condition?: string | null;
+  value?: number | string | null;
+}
+
+//列表数据返回值
+interface ListData {
+  count: number;
+  listdata: [];
+}
+
+// const config = defineProps<ListConfig>()
+// 使用 toRefs 保持响应性
+// const { user } = toRefs(props)
+// const userName = computed(() => user.value.name)
+
+const GetListData = async () => {
+  view.loading = true;
+  let q = {
+    page_size: pageSize.value,
+    page_index: currentPage.value,
+    user_query_param: GetUserQueryParam(),
+    keyword: query.keyword,
+  };
+  let res = await http.Post(config.ApiUrl, q);
+  if (res.IsSuccess) {
+    let d = res.data as ListData;
+    data.value = d;
+    total.value = d.count;
+  }
+  view.loading = false;
+};
+
+//provide("refresh_list",GetListData)//提供给子组件调用
+// 处理aud事件
+const aud_event = (payload: { module: string; id: bigint }) => {
+  console.log("aud_event:", payload);
+  if (payload.module == props.module || payload.module == "all") {
+    GetListData();
+  }
+};
+
+const GetUserQueryParam = (): SqlQueryParam[] => {
+  let re: SqlQueryParam[] = [];
+  for (const g of config.QuickConditionsGroups || []) {
+    if (g.QuickConditions[g.Select].column != null) {
+      re.push(g.QuickConditions[g.Select]);
+    }
+  }
+  return re;
+};
+
+onMounted(() => {
+  eventBus.on("aud", aud_event);
+  GetListData();
+});
+
+onUnmounted(() => {
+  eventBus.off("aud", aud_event);
+});
+
+//==============分页功能===================================
+
+const pageChange = (pageindex: number, size: number) => {
+  currentPage.value = pageindex;
+  pageSize.value = size;
+  console.log(currentPage.value, pageSize.value);
+  GetListData();
+};
+</script>
+
+<style scoped></style>

package/components/list/zsyslist_content.vue

@@ -0,0 +1,29 @@
+<template>
+    
+    <el-table :data="tableData" style="width: 100%" stripe="true">
+        <slot name="content"></slot>
+        <!-- <el-table-column prop="date" label="ID" width="180" />
+        <el-table-column prop="name" label="IP" width="180" />
+        <el-table-column prop="address" label="时间" width="180"/>
+        <el-table-column prop="address" label="操作人" width="180"/>
+        <el-table-column prop="address" label="日志内容" /> -->
+    </el-table>
+</template>
+
+<script setup lang="ts">
+const tableData = [
+  {
+    date: '2016-05-03',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+  },{
+    date: '2016-05-03',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+  }
+]
+</script>
+
+<style scoped>
+
+</style>

package/components/list/zsyslist_header.vue

@@ -0,0 +1,62 @@
+<template>
+    <el-row>
+        <el-col :span="24">
+            <el-space :size="4" wrap>
+                <slot name="headermain"></slot>
+                <el-tooltip content="刷新列表数据">
+                    <el-button :icon="Refresh" @click="refresh" />
+                </el-tooltip>
+                <el-tooltip v-if="config.KeywordTip?true:false" :show-after="800" :content="config.KeywordTip?config.KeywordTip:'快捷搜索'">
+                    <el-input style="width: 160px;" :placeholder="config.KeywordTip?config.KeywordTip:'快捷搜索'" :prefix-icon="Search" v-model="query.keyword"
+                        clearable @keyup.enter.native="refresh" />
+                </el-tooltip>
+                <!-- <el-tooltip content="打开/关闭高级搜索功能">
+                    <el-button>高级搜索</el-button>
+                </el-tooltip> -->
+                <!-- <el-button>排序</el-button> -->
+                <el-tooltip v-if="config.ExportUrl?true:false" content="将查询的结果全部导出">
+                    <el-button @Click="view.exportDialogShow=true">导出</el-button>
+                </el-tooltip>
+                <!-- <el-button>批量操作</el-button> -->
+            </el-space>
+        </el-col>
+    </el-row>
+
+    <el-row style="margin-top: 8px;" v-for="v in config.QuickConditionsGroups">
+        <el-col :span="24">
+            <el-space :size="4" wrap>
+                <el-text>{{ v.Label }}</el-text>
+                <el-radio-group v-model="v.Select" size="small">
+                    <el-radio-button v-for="q, index in v.QuickConditions" :value="index" @change="refresh">{{ q.label
+                        }}</el-radio-button>
+                </el-radio-group>
+            </el-space>
+        </el-col>
+    </el-row>
+    <el-divider style="margin-top: 4px; margin-bottom: 4px;" />
+    <!-- 导出 -->
+    <export_dialog v-model="view.exportDialogShow" :export-url="config.ExportUrl" :export-column="config.ExportColumn"></export_dialog>
+</template>
+
+<script setup lang="ts">
+import { defineProps,reactive } from 'vue'
+import { Refresh, Search } from '@element-plus/icons-vue'
+import export_dialog from '@/components/zsys/export/export_dialog.vue';
+
+const props = defineProps(['config', 'query'])
+const config = props.config
+const query = props.query
+
+const view = reactive({
+  exportDialogShow:false
+})
+
+const emit = defineEmits<{
+    (e: 'refresh'): void
+}>()
+
+const refresh = () => { emit('refresh') }
+
+</script>
+
+<style scoped></style>

package/package.json

@@ -0,0 +1,10 @@
+{
+    "name": "zsysview",
+    "version": "0.0.1",
+    "description": "zsystem view",
+    "author": {
+        "name": "liuhaomiao"
+    },
+    "private":false,
+    "dependencies": {}
+}