zsysview 0.0.6 → 0.0.8

package/README.md

@@ -1 +1,3 @@
-# ZSystem前端
+# ZSystem前端
+
+npm install @element-plus/icons-vue

package/components/export/export_dialog.vue

@@ -0,0 +1,150 @@
+<!-- ReusableDialog.vue -->
+<template>
+  <el-dialog v-model="visible" title="导出" :align-center="true" :before-close="handleBeforeClose" @open="open"
+    width="800" :draggable="true" :overflow="true" @opened="focus" destroy-on-close :close-on-click-modal="false">
+    <!-- 默认插槽放主要内容 -->
+    <el-form @submit.prevent ref="ruleFormRef" :model="form" :rules="rules"
+      style="padding-left: 10px;padding-right: 10px;" label-width="auto" v-show="view.exporting == false">
+      <el-form-item label="字段选项" prop="role_title">
+        <el-radio-group v-model="form.columnOption">
+          <el-radio value="all">全部支持的字段</el-radio>
+          <el-radio v-if="props.exportColumn ? true : false" value="custom">自定义</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="自定义" v-show="form.columnOption == 'custom'">
+        <!-- v-model="form.permission_value" :data="permission_option" -->
+        <el-transfer v-model="form.exportColumnWanted" :data="props.exportColumn" :titles="['可选', '已选']" :props="{
+          key: 'ColumnName',
+          label: 'ColumnTitle',
+        }">
+          <template #left-empty>
+            <el-empty :image-size="60" description="无可选项" />
+          </template>
+          <template #right-empty>
+            <el-empty :image-size="60" description="请从左侧选择" />
+          </template>
+        </el-transfer>
+      </el-form-item>
+    </el-form>
+
+    <export_progress v-show="view.exporting" :export-id="view.exportId"></export_progress>
+
+    <!-- 底部按钮区插槽 -->
+    <template #footer>
+      <div style="display: flex;justify-content: right;">
+        <el-button type="primary" @click="startExport" v-show="view.exporting == false">开始导出</el-button>
+        <!-- <el-button @click="close">取消</el-button> -->
+      </div>
+
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, reactive } from 'vue';
+import { HttpApiV1 as http } from '../../core/httpapi/http_api_v1';
+import { ZSYSMessage } from '../../components/message';
+import type { FormInstance, FormRules, ElInput } from 'element-plus'
+import { useMagicKeys, whenever } from '@vueuse/core'
+import export_progress from './export_progress.vue';
+const inputRef = ref<InstanceType<typeof ElInput> | null>(null)
+const props = defineProps({
+  modelValue: { type: Boolean, required: true }, // 控制显示隐藏
+  exportUrl: { type: String, required: true },
+  exportColumn: { type: [] }
+});
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void;
+  // (e: 'confirm'): void;
+  // (e: 'close'): void;
+}>();
+
+const visible = ref(false);
+
+// 同步外部 v-model 变化
+watch(
+  () => props.modelValue,
+  (val) => {
+    visible.value = val;
+  },
+  { immediate: true }
+);
+
+// 内部状态变化通知外部
+watch(visible, (val) => {
+  emit('update:modelValue', val);
+});
+
+//弹窗显示时的处理
+const open = () => {
+  view.exporting = false
+}
+
+// const close = () => {
+//   visible.value = false;
+//   // emit('close');
+// };
+
+const handleBeforeClose = (done: () => void) => {
+  ruleFormRef.value?.clearValidate();
+  // 可以在这里添加关闭前的拦截逻辑
+  done();
+};
+
+const view = reactive({
+  exporting: false,// 导出框当前的状态
+  exportId:0n//导出id
+})
+
+
+
+//^^^^^^^^^^^^^^^上方为对话框功能^^^^^^^^^^^^^^^
+
+//===============下方为数据部分===============
+//开始请求后台导出
+async function startExport() {
+  view.exporting = true
+  let res = await http.Post(props.exportUrl, {})
+  if (res.IsSuccess) {
+    view.exportId=BigInt(res.data as unknown as bigint)
+  } else {
+    ZSYSMessage.ShowError(res.message)
+    view.exporting = false
+  }
+}
+
+//=================表单
+const ruleFormRef = ref<FormInstance>()
+const form = ref({
+  columnOption: 'all',
+  exportColumnWanted: []
+})
+
+const rules = reactive<FormRules<typeof form>>({
+
+})
+//=================
+
+const focus = () => {
+  inputRef.value?.focus()
+  inputRef.value?.select()
+}
+
+//==========快捷键
+const keys = useMagicKeys()
+
+whenever(keys.alt_s, () => {
+  if (visible.value) {
+    console.log('Alt+S提交')
+  }
+  // 在这里执行你的业务逻辑
+})
+
+</script>
+
+<style scoped>
+.el-transfer /deep/ .el-transfer-panel {
+  width: 240px;
+}
+</style>

package/components/export/export_progress.vue

@@ -0,0 +1,62 @@
+<template>
+    <div style="padding-left: 20px; padding-right: 20px; padding-top: 6px;">
+        <div v-if="view.state == 1" style="font-size: x-large;">正在导出</div>
+        <div v-if="view.state == 2" style="font-size: x-large;">导出完成</div>
+        <div style="font-size:large; margin-top: 10px;">
+            累计处理: {{ view.progress }}
+        </div>
+        <el-progress v-if="view.state == 1" :percentage="50" :indeterminate="true" style="margin-top: 10px;">
+            {{ view.progress }}
+        </el-progress>
+        <el-space v-if="view.state == 2" wrap style="font-size:large; margin-top: 10px;">
+            <el-text>文件(点击下载):</el-text>
+                <el-link v-for="item of view.file_ids" :href="http.url_export_file+'?id='+item.toString()" target="_blank"
+                    underline="always" type="primary">文件{{ item.toString() }}</el-link>
+            </el-space>
+
+    </div>
+
+</template>
+
+<script setup lang="ts">
+import { reactive, watch, type PropType } from 'vue';
+import { HttpApiV1 as http } from '../../core/httpapi/http_api_v1';
+const props = defineProps({
+    exportId: { type: BigInt as unknown as PropType<bigint>, required: true }
+});
+
+const view = reactive({
+    state: 1,
+    progress: 0n,
+    file_ids: [] as bigint[]
+})
+
+
+watch(props, (newVal) => {
+    if (newVal.exportId != 0n) {
+        var intervalId = setInterval(async () => {
+            let xRes = await http.Post(http.url_export_detail, { id: props.exportId })
+            if (xRes.IsSuccess) {
+                let data = xRes.data as {
+                    progress: bigint,
+                    state: number,
+                    file_ids: string
+                }
+                view.progress = data.progress
+                view.state = data.state
+                view.file_ids = []
+                let fs = data.file_ids.split(',')
+                for (let f of fs) {
+                    view.file_ids.push(BigInt(f))
+                }
+
+                if (view.state != 1) { clearInterval(intervalId) }
+            }
+            // completeExport()
+        }, 3600);
+    }
+});
+
+</script>
+
+<style scoped></style>

package/components/list/zsyslist.vue

@@ -39,8 +39,8 @@
 <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";
+import { HttpApiV1 as http } from "../../core/httpapi/http_api_v1";
+import { zsysEventBus } from "../../core/common/zsys_eventBus";
 const eventBus = zsysEventBus();
 const view = reactive({
   loading: false,

package/components/list/zsyslist_header.vue

@@ -41,7 +41,7 @@
 <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';
+import export_dialog from '../export/export_dialog.vue';
 
 const props = defineProps(['config', 'query'])
 const config = props.config

package/components/zsys_delbutton.vue

@@ -0,0 +1,60 @@
+<template>
+    <el-popconfirm @confirm="confirm" title="确认要删除吗?" v-if="!view.loading" confirm-button-text="删除"
+        cancel-button-text="取消" confirm-button-type="danger">
+        <template #reference>
+            <el-link type="primary">删除</el-link>
+        </template>
+    </el-popconfirm>
+    <el-popover v-if="view.loading" :visible="view.loading" :width="40" placement="top" content="正在删除">
+        <template #reference>
+            <el-link type="primary" style="margin-left: 6px;" disabled>删除</el-link>
+        </template>
+    </el-popover>
+</template>
+
+<script setup lang="ts">
+import { reactive, type PropType } from 'vue'
+import { HttpApiV1 as http } from '../core/httpapi/http_api_v1'
+import { ZSYSMessage } from '../components/message'
+import { zsysEventBus } from '../core/common/zsys_eventBus'
+const eventBus = zsysEventBus()
+const view = reactive({
+    loading: false
+})
+
+const props = defineProps({
+    id: { type: BigInt as unknown as PropType<bigint>, required: true },
+    api_url: { type: String, required: true },
+    module: { type: String, default:'all' }
+    //   closeOnClickModal: { type: Boolean, default: true }
+});
+
+// const refresh_list=inject<() => void>('refresh_list')
+// console.log(refresh_list);
+
+
+const confirm = async () => {
+    view.loading = true
+    try {
+        let res = await http.Post(props.api_url, { id: props.id })
+        if (res.IsSuccess) {
+            view.loading = false
+            ZSYSMessage.ShowSuccess("删除成功")
+            console.log('aud',props.module);
+            console.log(props.module);
+            
+            eventBus.emit("aud", {module:props.module, id: props.id })
+        } else {
+            ZSYSMessage.ShowError("删除失败")
+        }
+    } catch (e) {
+
+    }
+
+
+    view.loading = false
+}
+
+</script>
+
+<style scoped></style>

package/core/app.ts

@@ -1,13 +1,32 @@
 import { createApp } from 'vue'
-import '../css/style.css'
+import '../css/common.css'
 import app from '../view/app.vue'
+import {createPinia} from 'pinia'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 
 import ElementPlus from 'element-plus' //导入 ElementPlus 组件库的所有模块和功能 
 import 'element-plus/dist/index.css' //导入 ElementPlus 组件库所需的全局 CSS 样式
 import zhCn from 'element-plus/es/locale/lang/zh-cn'
 
+
+//路由
+import {initRouter,addFrameRouter} from './router.ts' //导入路由模块
+
+
 const zsysapp=createApp(app)
 
+const pinia=createPinia()
+pinia.use(piniaPluginPersistedstate)
+
+addFrameRouter({path:'/desktop',component:()=>import('../../test_view/test_desktop.vue')})
+
+zsysapp.use(initRouter()) //将 Vue Router 插件注册到 Vue 应用中
+zsysapp.use(ElementPlus,{locale: zhCn}) //将 ElementPlus 插件注册到 Vue 应用中
+zsysapp.use(pinia)
+//从后台获取全局信息
+// import {GetPublish}from '../core/runtime.ts'
+// GetPublish(zsysapp)
 zsysapp.mount('#app')
 
-export default zsysapp
+
+export default {zsysapp}

package/core/common/common.ts

@@ -0,0 +1,29 @@
+export class CommonHelper{
+    //数组中是否存在字符串
+    static StringArrayHasString(array:string[],str:string):boolean{
+        return array.indexOf(str) !== -1
+    }
+
+    //数组中是否存在另一数组中的任意一个元素
+    static StringArrayHasStringArrayOne(array:string[],array2:string[]):boolean{
+        for(const s of array2)
+        {
+            if(CommonHelper.StringArrayHasString(array,s)){
+                return true
+            }
+        }
+        return false
+    }
+
+    //数组2是否包含在数组1中
+    static StringArrayHasStringArray(array:string[],array2:string[]):boolean{
+        if(array2.length==0){return false}
+        for(const s of array2)
+        {
+            if(!CommonHelper.StringArrayHasString(array,s)){
+                return false
+            }
+        }
+        return true
+    }
+}

package/core/common/zsys_eventBus.ts

@@ -0,0 +1,45 @@
+// src/utils/eventBus.ts
+import mitt, { type Emitter } from 'mitt';
+
+// 1. 定义所有事件类型
+type Events = {
+  // aud:添加add、修改update、删除del数据事件
+  'aud': { module:string, id: bigint };
+  // 通知事件
+//   'notification:show': { message: string; type: 'success' | 'error' | 'warning' };
+  // 无 payload 的事件
+//   'close': void;
+  // 添加更多事件...
+};
+
+// 2. 创建 emitter 单例
+const emitter: Emitter<Events> = mitt<Events>();
+
+// 3. 导出常用的方法（封装以便统一管理）
+export const zsysEventBus = () => {
+  return {
+    // 触发事件
+    emit: emitter.emit,
+    
+    // 监听事件
+    on: emitter.on,
+    
+    // 取消监听
+    off: emitter.off,
+    
+    // 一次性监听
+    once: <T extends keyof Events>(event: T, handler: (payload: Events[T]) => void) => {
+      const onceHandler = (payload: Events[T]) => {
+        handler(payload);
+        emitter.off(event, onceHandler);
+      };
+      emitter.on(event, onceHandler);
+    },
+    
+    // 清空所有监听
+    clearAll: emitter.all.clear
+  };
+};
+
+// 4. 导出类型
+export type EventBus = ReturnType<typeof zsysEventBus>;

package/core/common/zsys_time.ts

@@ -0,0 +1,26 @@
+/**
+ * 格式化日期为 YYYY-MM-DD HH:mm:ss 格式
+ * @param date 可被Date解析的任何值
+ * @returns 格式化后的日期字符串
+ */
+export function formatDateTime(date: Date | string | number): string {
+  if (date == '0001-01-01T00:00:00Z') {
+    return ''
+  }
+
+  const d = new Date(date);
+
+  if (isNaN(d.getTime())) {
+    return ''
+  }
+
+  return [
+    d.getFullYear(),
+    (d.getMonth() + 1).toString().padStart(2, '0'),
+    d.getDate().toString().padStart(2, '0')
+  ].join('-') + ' ' + [
+    d.getHours().toString().padStart(2, '0'),
+    d.getMinutes().toString().padStart(2, '0'),
+    d.getSeconds().toString().padStart(2, '0')
+  ].join(':');
+}

package/core/httpapi/http_api_return_data.ts

@@ -0,0 +1,43 @@
+export class HttpApiReturnData{
+    error_code:number
+    message:string
+    data:object
+
+    constructor(){
+        this.error_code=1
+        this.message="未知错误"
+        this.data={}
+    }
+
+    get IsSuccess():boolean{
+        return this.error_code==0?true:false
+    }
+
+    static fromObject(obj: Partial<HttpApiReturnData>): HttpApiReturnData {
+        const instance = new HttpApiReturnData();
+        Object.assign(instance, obj);
+        return instance;
+    }
+}
+
+// export class ApiV1Res<T>{
+//     error_code:number
+//     message:string
+//     data:object
+
+//     constructor(){
+//         this.error_code=1
+//         this.message="未知错误"
+//         this.data={}
+//     }
+
+//     get IsSuccess():boolean{
+//         return this.error_code==0?true:false
+//     }
+
+//     static fromObject(obj: Partial<HttpApiReturnData>): HttpApiReturnData {
+//         const instance = new HttpApiReturnData();
+//         Object.assign(instance, obj);
+//         return instance;
+//     }
+// }

package/core/httpapi/http_api_v1.ts

@@ -0,0 +1,151 @@
+// let http_api_v1_url={
+//   login:'api/login'
+// }
+const hostUrl = `${window.location.protocol}//${window.location.host}/`;
+
+// 类型安全声明（防止TS报错）
+declare global {
+  interface Window {
+    location: Location;
+  }
+}
+
+import http_axios from "./http_axios"
+import { HttpApiReturnData } from "./http_api_return_data"
+
+export class HttpApiV1 {
+  //系统基础接口
+  static api_host = hostUrl//'http://localhost:1788/' //1788
+  //当前用户
+  static url_login: string = 'api/login'
+  static url_usercenter: string = 'api/user_center'
+  static url_change_password: string = 'api/change_password'
+  static url_user_permission: string = 'api/user_permission'
+  //用户管理
+  static url_user_save: string = 'api/user_save'
+  static url_user_list: string = 'api/user_list'
+  static url_user_export: string = 'api/user_export'
+  static url_user_del: string = 'api/user_del'
+  static url_user_detail: string = 'api/user_detail'
+  static url_user_change_pwd: string = 'api/user_change_pwd'
+  //组织架构
+  static url_department_save: string = 'api/department_save'
+  static url_department_list: string = 'api/department_list'
+  static url_department_del: string = 'api/department_del'
+  static url_department_detail: string = 'api/department_detail'
+  //职务
+  static url_position_list: string = 'api/position_list'
+  static url_position_detail: string = 'api/position_detail'
+  static url_position_save: string = 'api/position_save'
+  static url_position_del: string = 'api/position_del'
+  //系统日志
+  static url_syslog_list: string = 'api/syslog_list'
+  static url_syslog_config_detail: string = 'api/syslog_config_detail'
+  static url_syslog_config_save: string = 'api/syslog_config_save'
+  //备份
+  static url_backup_start: string = 'api/backup_start'
+  static url_backup_list: string = 'api/backup_list'
+  static url_backup_del: string = 'api/backup_del'
+  static url_backup_config_get: string = 'api/backup_config_get'
+  static url_backup_config_save: string = 'api/backup_config_save'
+  //权限
+  static url_syspermission_list: string = 'api/permission_list'
+  static url_sysrole_list: string = 'api/role_list'
+  static url_sysrole_del: string = 'api/role_del'
+  static url_sysrole_save: string = 'api/role_save'
+  static url_sysrole_detail: string = 'api/role_detail'
+  //导出
+  static url_export_detail: string = 'api/export_detail'
+  static url_export_file: string = 'api/export_file'
+  // 系统
+  static url_system_publish: string = 'api/system_publish'
+
+  //应用级接口==========================
+  //桌面
+  static url_desktop: string = 'api/desktop'
+  static url_desktop_config_detail: string = 'api/desktop_config_detail'
+  static url_desktop_config_save: string = 'api/desktop_config_save'
+  //数据看板
+  static url_chart_weekly: string = 'api/chart_weekly'
+  static url_chart_all: string = 'api/chart_all'
+  static url_chart_last: string = 'api/chart_last'
+  //事件
+  static url_event_list: string = 'api/event_list'
+  static url_event_detail: string = 'api/event_detail'
+  static url_event_file: string = 'api/event_file'
+  static url_event_dispose: string = 'api/event_dispose'
+  //规则
+  static url_rule_list: string = 'api/rule_list'
+  static url_rule_save: string = 'api/rule_save'
+  static url_rule_del: string = 'api/rule_del'
+  static url_rule_detail: string = 'api/rule_detail'
+  //时间模板
+  static url_time_list: string = 'api/time_list'
+  static url_time_save: string = 'api/time_save'
+  static url_time_del: string = 'api/time_del'
+  static url_time_detail: string = 'api/time_detail'
+  //区域
+  static url_area_save: string = 'api/area_save'
+  static url_area_list: string = 'api/area_list'
+  static url_area_del: string = 'api/area_del'
+  static url_area_detail: string = 'api/area_detail'
+  //设备
+  static url_equipment_save: string = 'api/equipment_save'
+  static url_equipment_list: string = 'api/equipment_list'
+  static url_equipment_detail: string = 'api/equipment_detail'
+  static url_equipment_del: string = 'api/equipment_del'
+  //通道画面
+  static url_channel_save: string = 'api/channel_save'
+  static url_channel_list: string = 'api/channel_list'
+  static url_channel_detail: string = 'api/channel_detail'
+  static url_channel_del: string = 'api/channel_del'
+
+  static GetFullApiUrl(api: string): string {
+    return this.api_host + api
+  }
+
+  static async Post(url: string, obj: object): Promise<HttpApiReturnData> {
+    try {
+      let res = await http_axios.post(this.api_host + url, obj)
+      // console.log("请求完毕");
+
+      let re: HttpApiReturnData = HttpApiReturnData.fromObject(res.data)
+      // let re:HttpApiReturnData=HttpApiReturnData{
+      //   error_code:res.
+      // }
+      return re
+      // if (res.data instanceof HttpApiReturnData) {
+      //     let re: HttpApiReturnData = obj as HttpApiReturnData;
+      //     return re
+      // }else{
+      //   return Promise.reject('访问服务器失败')
+      // }
+    } catch (err) {
+      console.log(err);
+
+      return Promise.reject('访问服务器失败')
+    }
+    // await http_axios.post(url,obj).then(res=>{
+    //     // console.log(res.data.error_code)
+    //     if (res.data instanceof HttpApiReturnData) {
+    //       let re: HttpApiReturnData = obj as HttpApiReturnData;
+    //       return re
+    //     } else {
+    //       return Promise.reject('访问服务器失败')
+    //       // console.error('对象不是Person类型');
+    //     }
+    // }).catch(err=>{
+    //   return Promise.reject('访问服务器失败')
+    // })
+    // // .finally(()=>{
+
+    // // })
+    // return Promise.reject('访问服务器失败')
+  }
+
+  //   http_axios.interceptors.response.use(res=>{
+  //     return res
+  // },err=>{
+  //     return Promise.reject(err)
+  // })
+}