zsysview 0.0.5 → 0.0.7

package/view/main/userHeader.vue

@@ -0,0 +1,72 @@
+<template>
+    <!-- 白色 -->
+    <div style="padding-left: 20px; padding-right: 20px; ">
+        <div
+            style="height:60px; margin-right: 10px; float: left; display: flex; align-items: center; justify-content: center;">
+            <el-image style="height: 40px; "  />
+            <!-- :src="logoUrl" -->
+        </div>
+
+        <div style="float: left; line-height: 60px;">岗位行为识别系统</div>
+        <!-- 右上角 -->
+        <el-dropdown trigger="click" class="user_operate">
+            <span class="el-dropdown-link">
+                {{ user.uname }}
+                <el-icon class="el-icon--right">
+                    <arrow-down />
+                </el-icon>
+            </span>
+            <template #dropdown>
+                <el-dropdown-menu>
+                    <el-dropdown-item @click="changepassword">修改密码</el-dropdown-item>
+                    <el-dropdown-item @click="loginout">退出</el-dropdown-item>
+                </el-dropdown-menu>
+            </template>
+        </el-dropdown>
+        <!-- 右上角 -->
+    </div>
+
+
+
+</template>
+
+<script setup lang="ts">
+import { useTokenStore } from '../../core/user_token' //'../../core/user_token';
+import { useRouter } from 'vue-router';
+import { ArrowDown } from '@element-plus/icons-vue'
+// import logoUrl from '../../assets/logo_40.png';
+import { HttpApiV1 as http } from '../../core/httpapi/http_api_v1';
+import { reactive } from 'vue';
+const r = useRouter()
+
+const user = reactive({
+    uname: '',
+})
+
+http.Post(http.url_usercenter, {}).then((res) => {
+    if (res.IsSuccess) {
+        let d = res.data as { uname: string }
+        user.uname = d.uname
+    }
+}).catch((err) => {
+    console.log('er1111r');
+    console.log(err);
+})
+
+const loginout = () => {
+    useTokenStore().saveToken('')
+    r.push('/login')
+}
+const changepassword = () => {
+    r.push('/password')
+}
+
+</script>
+
+<style scoped>
+.user_operate {
+    float: right;
+    cursor: pointer;
+    line-height: 60px;
+}
+</style>

package/view/main/userMenu.vue

@@ -0,0 +1,132 @@
+<template>
+    <el-aside width="200px" style="position: fixed;top:60px;left: 0px; bottom: 0px;">
+        <el-scrollbar style=" background-color: #252423;"><!-- border-right:1px solid #dcdfe6; -->
+            <el-menu default-active="2" router style="margin-bottom: 20px;" background-color="#252423" text-color="#fff" active-text-color="#409EFF">
+                <usermenuitem v-for="v in menus" :key="v.url" v-bind:item="v" />
+            </el-menu>
+        </el-scrollbar>
+    </el-aside>
+</template>
+
+<script setup lang="ts">
+import {  onMounted, type DefineComponent, reactive ,markRaw} from 'vue';
+import { HttpApiV1 as http } from '../../core/httpapi/http_api_v1';
+import usermenuitem from './userMenuItem.vue'
+import { CommonHelper } from '../../core/common/common';
+import {
+    Document, Reading, Setting, Avatar, Location, VideoCamera,
+    OfficeBuilding, User, House, SetUp, Collection, Bell, Odometer,CopyDocument
+} from '@element-plus/icons-vue'
+const menus = reactive(
+    [
+        { name: '首页', iconname:'House', icon: markRaw(House), url: '/desktop', show: true },
+        { name: '个人中心', icon: markRaw(User), url: '/self', show: true },
+        { name: '数据看板', icon: markRaw(Odometer), url: '/chart', show: false },
+        { name: '事件管理', icon: markRaw(Collection), url: '/eventgroup/event', show: false },
+        // {
+        //     name: '事件管理', icon: markRaw(Collection), url: '/111', show: false,
+        //     children: [
+        //         { name: '数据看板', icon: markRaw(Odometer), url: '/user', show: false },
+        //         { name: '事件', icon: markRaw(Collection), url: '/eventgroup/event', show: false },
+        //     ]
+        // },
+        { name: '行为分析引擎', icon: markRaw(SetUp), url: '/engine', show: false },
+        { name: '设备管理', icon: markRaw(VideoCamera), url: '/equipment', show: false },
+        { name: '区域管理', icon: markRaw(Location), url: '/area', show: false },
+        { name: '报表与统计', icon: markRaw(Document), url: '/building?1', show: false },
+        { name: '报警与通知', icon: markRaw(Bell), url: '/building?2', show: false },
+        {
+            name: '系统管理', icon: markRaw(Setting), url: '/zsys', show: false,
+            children: [
+                { name: '用户管理', icon: markRaw(User), url: '/user', show: false },
+                { name: '组织架构', icon: markRaw(OfficeBuilding), url: '/department', show: false },
+                { name: '职务', icon: markRaw(Avatar), url: '/position', show: false },
+                { name: '角色权限', icon: markRaw(Avatar), url: '/role', show: false },
+                { name: '日志', icon: markRaw(Reading), url: '/log', show: false },
+                { name: '备份', icon: markRaw(CopyDocument), url: '/backup', show: false },
+            ]
+        },
+    ])
+
+interface MenuItem {
+    name: string
+    icon?: DefineComponent<{}, {}, any>;
+    url: string
+    children?: MenuItem[]
+    show: boolean
+}
+
+function findMenuByName(menuList: MenuItem[], name: string): any | undefined {
+    for (const menu of menuList) {
+        if (menu.name === name) {
+            return menu;
+        }
+        if (menu.children && menu.children.length > 0) {
+            const found = findMenuByName(menu.children, name);
+            if (found) {
+                return found;
+            }
+        }
+    }
+    return undefined;
+}
+
+const showIfHas = (name: string, needpermission: string, ps: string[]) => {
+    let groups = needpermission.split('|')
+    let show = false
+    for (const g of groups) {
+        let need = g.split(',')
+        if (CommonHelper.StringArrayHasStringArray(ps, need)) {
+            show = true
+            break
+        }
+    }
+    if (show) {
+        let menuItem = findMenuByName(menus, name);
+        menuItem.show = show
+    }
+}
+
+const menuview = (ps: string[]) => {
+    showIfHas('事件管理', 'gwxw.event', ps)
+    showIfHas('数据看板', 'gwxw.event', ps)
+    // showIfHas('事件', 'gwxw.event', ps)
+    showIfHas('行为分析引擎', 'gwxw.engine', ps)
+    showIfHas('设备管理', 'gwxw.equipment', ps)
+    showIfHas('区域管理', 'gwxw.area', ps)
+    showIfHas('报表与统计', 'gwxw.total', ps)
+    showIfHas('报警与通知', 'gwxw.notice', ps)
+
+    showIfHas('系统管理', 'zsys.user|zsys.department|zsys.position|zsys.role|zsys.log|zsys.backup', ps)
+    showIfHas('用户管理', 'zsys.user', ps)
+    showIfHas('组织架构', 'zsys.department', ps)
+    showIfHas('职务', 'zsys.position', ps)
+    showIfHas('角色权限', 'zsys.role', ps)
+    showIfHas('日志', 'zsys.log', ps)
+    showIfHas('备份', 'zsys.backup', ps)
+}
+
+const getUerPermission = async () => {
+    try {
+        let res = await http.Post(http.url_user_permission, {})
+        if (res.IsSuccess) {
+            let ps = res.data as string[]
+            menuview(ps)
+        }
+    } catch (e) {
+        console.log(e);
+    }
+}
+
+
+
+onMounted(() => {
+    getUerPermission()
+})
+</script>
+
+<style scoped>
+.el-menu--vertical {
+    border-right: none !important;
+}
+</style>

package/view/main/userMenuItem.vue

@@ -0,0 +1,49 @@
+<template>
+    <!-- 无子级 -->
+    <el-menu-item v-if="!data.item.children && data.item.show" :index="data.item.url">
+        <el-icon>
+            <!-- <component :is="component"></component> -->
+            <component :is="data.item.icon"></component>
+        </el-icon>
+        <span>{{data.item.name}}</span>
+    </el-menu-item>
+    <!-- 有子级 -->
+    <el-sub-menu :index="data.item.url" v-else-if="data.item.show">
+        <template #title>
+            <el-icon><component :is="markRaw(data.item.icon as object)"/></el-icon>
+            <span>{{data.item.name}}</span>
+        </template>
+        <usermenuitem v-for="v in data.item.children" :key="v.url" v-bind:item="v"/>
+        <!-- <el-menu-item index="1222211" route="/22222">
+        <el-icon><component :is="data.item.icon"></component></el-icon>
+        <span>222222</span>
+    </el-menu-item> -->
+    </el-sub-menu>
+</template>
+
+<script setup lang="ts">
+import { type DefineComponent ,markRaw } from 'vue';
+import usermenuitem from './userMenuItem.vue'
+
+interface d{
+    item:MenuItem
+}
+
+interface MenuItem {
+  name: string
+  icon?:DefineComponent<{}, {}, any>;
+//   iconname:string
+  url:string
+  children?: MenuItem[]
+  show:boolean
+}
+const data=defineProps<d>()
+
+// console.log(data.item);
+// const component = resolveComponent(data.item.iconname)
+
+</script>
+
+<style scoped>
+
+</style>

package/view/position/position.vue

@@ -0,0 +1,58 @@
+<template>
+  <breadcrumb />
+  <div style="padding: 0px 20px;">
+    <el-tabs v-model="activeName" @tab-click="handleClick">
+      <el-tab-pane label="全部职务" name="first">
+        <zsyslist :config="listconfig" module="position">
+          <template #headermain>
+            <el-button class="main_btn" type="primary"
+              @click="view.edit_id = 0n; view.edit_dialog_show = true">新建</el-button>
+          </template>
+          <template #content>
+            <!-- <el-table-column prop="position_id" label="职务ID" width="180" /> -->
+            <el-table-column prop="position_title" label="职务名称" width="140" />
+            <el-table-column prop="position_notes" label="备注" min-width="180" />
+            <el-table-column label="操作" width="100">
+              <template #default="{ row }">
+                <el-space>
+                  <el-link type="primary"
+                    @click="view.edit_id = BigInt(row.position_id); view.edit_dialog_show = true;">修改</el-link>
+                  <zsys_delbutton :id="BigInt(row.position_id)" :api_url="HttpApiV1.url_position_del" />
+                </el-space>
+              </template>
+            </el-table-column>
+          </template>
+        </zsyslist>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+  <position_edit_dialog :id="view.edit_id" v-model="view.edit_dialog_show" />
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import type { TabsPaneContext } from 'element-plus'
+import breadcrumb from '../main/breadcrumb.vue';
+import zsyslist, { type ListConfig } from '../../components/list/zsyslist.vue';
+import { HttpApiV1 } from '../../core/httpapi/http_api_v1';
+import position_edit_dialog from './position_edit_dialog.vue';
+import zsys_delbutton from '../../components/zsys_delbutton.vue';
+const activeName = ref('first')
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+
+const view = reactive({
+  edit_id: 0n,
+  edit_dialog_show: false,
+})
+
+//============列表控件===========================
+const listconfig: ListConfig = reactive({
+  ApiUrl: HttpApiV1.url_position_list,
+  QuickConditionsGroups: []
+})
+
+</script>
+
+<style scoped></style>

package/view/position/position_edit_dialog.vue

@@ -0,0 +1,203 @@
+<!-- ReusableDialog.vue -->
+<template>
+  <el-dialog v-model="visible" title="职务" :align-center="true" :before-close="handleBeforeClose" @open="open"
+    width="550" :draggable="true" :overflow="true" @opened="focus" destroy-on-close>
+    <!-- 默认插槽放主要内容 -->
+    <el-form @submit.prevent ref="ruleFormRef" :model="form" :rules="rules"
+      style="padding-left: 10px;padding-right: 10px;" label-width="auto" v-loading="view.loading"
+      :disabled="view.saving">
+      <el-form-item label="职务名称" prop="position_title">
+        <el-input ref="inputRef" v-model="form.position_title" />
+      </el-form-item>
+      <el-form-item label="备注" prop="position_notes">
+        <el-input v-model="form.position_notes" type="textarea" :rows="4" />
+      </el-form-item>
+    </el-form>
+
+    <!-- 底部按钮区插槽 -->
+    <template #footer>
+      <div style="display: flex;justify-content: right;">
+        <el-tooltip v-if="form.position_id==0n" content="保存成功后不关闭窗口">
+          <el-checkbox v-model="view.donotClose" label="连续录入" style="margin-right: 10px;" />
+        </el-tooltip>
+
+        <el-tooltip content="快捷键 Alt+S" :show-after="800">
+          <el-button type="primary" @click="submitForm(ruleFormRef)" :disabled="view.loading"
+            :loading="view.saving">保存(<el-text tag="ins" style="color: white;">S</el-text>)</el-button>
+        </el-tooltip>
+
+
+        <el-button @click="close">取消</el-button>
+      </div>
+
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, reactive, type PropType } 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 type { HttpApiReturnData } from '../../core/httpapi/http_api_return_data';
+import { zsysEventBus } from '../../core/common/zsys_eventBus';
+const eventBus=zsysEventBus()
+
+const inputRef = ref<InstanceType<typeof ElInput> | null>(null)
+const props = defineProps({
+  modelValue: { type: Boolean, required: true }, // 控制显示隐藏
+  id: { type: BigInt as unknown as PropType<bigint>, required: true }
+  
+});
+
+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.isnew=(props.id==0n?true:false)
+  getData()
+}
+
+const close = () => {
+  visible.value = false;
+  // emit('close');
+};
+
+const handleBeforeClose = (done: () => void) => {
+  ruleFormRef.value?.clearValidate();
+  // 可以在这里添加关闭前的拦截逻辑
+  done();
+};
+
+const view = reactive({
+  loading: true,
+  saving: false,
+  donotClose: false,
+  isnew:true
+})
+//^^^^^^^^^^^^^^^上方为对话框功能^^^^^^^^^^^^^^^
+
+//===============下方为数据部分===============
+
+//=================表单
+const ruleFormRef = ref<FormInstance>()
+const form = ref({
+  position_id: props.id as bigint,
+  position_title: '',
+  position_notes: '',
+})
+const rules = reactive<FormRules<typeof form>>({
+  position_title: [
+    { required: true, message: '请输入职务名称', trigger: 'blur' },
+  ],
+})
+//=================
+
+//获取修改数据
+const getData = async () => {
+  view.loading = true
+  form.value.position_id = props.id
+  if (props.id != 0n) {
+    view.donotClose=false
+    try {
+      let res = await http.Post(http.url_position_detail, { id: props.id })
+      if (res.IsSuccess) {
+        let data = res.data as {
+          position_id: bigint
+          position_title: string
+          position_notes: string
+        }
+        form.value = data
+      }
+    } catch (e) {
+      console.log(e);
+    } finally {
+
+    }
+  } else {
+    form.value.position_title = ''
+    form.value.position_notes = ''
+  }
+  view.loading = false
+}
+
+//保存
+const saveData = async (): Promise<HttpApiReturnData> => {
+  return await http.Post(http.url_position_save, {
+    position_id: form.value.position_id,
+    position_title: form.value.position_title,
+    position_notes: form.value.position_notes
+  })
+}
+
+//验证表单处理界面并保存
+const submitForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  formEl.validate(async (valid) => {
+    if (valid) {
+      view.saving = true
+      try {
+        let res = await saveData()
+        if (res.IsSuccess) {
+          // emit('confirm');
+          if (view.donotClose) {
+            setTimeout(() => { focus() }, 200);
+          } else {
+            close();
+          }
+          ZSYSMessage.ShowSuccess("保存成功")
+          eventBus.emit('aud',{module:'position',id:form.value.position_id})
+        } else {
+          ZSYSMessage.ShowError(res.message)
+        }
+      } catch (e) {
+
+      } finally {
+        // emit('confirm');
+        // close();
+        view.saving = false
+
+      }
+    }
+  })
+}
+
+const focus = () => {
+  inputRef.value?.focus()
+  inputRef.value?.select()
+}
+
+//==========快捷键
+const keys = useMagicKeys()
+
+whenever(keys.alt_s, () => {
+  if (visible.value) {
+    console.log('Alt+S提交')
+    submitForm(ruleFormRef.value)
+  }
+  // 在这里执行你的业务逻辑
+})
+
+</script>
+
+<style scoped></style>

package/view/role/role.vue

@@ -0,0 +1,72 @@
+<template>
+  <breadcrumb />
+  <div style="padding: 0px 20px;">
+    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+      <el-tab-pane label="角色列表" name="first">
+        <zsyslist :config="listconfig" module="role">
+          <template #headermain>
+            <el-button class="main_btn" type="primary" @click="newdata">新建</el-button>
+          </template>
+          <template #content>
+            <!-- <el-table-column prop="role_id" label="ID" width="180" /> -->            
+            <el-table-column prop="role_name" label="角色名称" width="180" />
+            <el-table-column prop="event_state" label="状态" width="80">
+              <template #default="{ row }">
+                <el-tag type="info" v-if="row.role_enable == 0" :disable-transitions="true" size="small">禁用</el-tag>
+                <el-tag type="success" v-if="row.role_enable == 1" :disable-transitions="true" size="small">启用</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column prop="role_notes" label="备注" min-width="180" />
+            <el-table-column label="操作" width="130">
+              <template #default="{ row }">
+                <el-space>
+                  <el-link type="primary"
+                    @click="view.edit_id = BigInt(row.role_id); view.edit_dialog_show = true;">查看和编辑</el-link>
+                  <zsys_delbutton :id="BigInt(row.role_id)" :api_url="HttpApiV1.url_sysrole_del" />
+                </el-space>
+              </template>
+            </el-table-column>
+          </template>
+        </zsyslist>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+  <role_edit_dialog :id="view.edit_id" v-model="view.edit_dialog_show" />
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import type { TabsPaneContext } from 'element-plus'
+import breadcrumb from '../main/breadcrumb.vue';
+import zsyslist, { type ListConfig } from '../../components/list/zsyslist.vue';
+import { HttpApiV1 } from '../../core/httpapi/http_api_v1';
+import zsys_delbutton from '../../components/zsys_delbutton.vue';
+import role_edit_dialog from './role_edit_dialog.vue';
+const activeName = ref('first')
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+
+const view = reactive({
+  edit_id: BigInt(0),
+  edit_dialog_show: false
+})
+
+const newdata = () => {
+  view.edit_id = BigInt(0)
+  console.log(view);
+
+  setTimeout(() => {
+    view.edit_dialog_show = true
+  }, 100)
+}
+
+//============列表控件===========================
+const listconfig: ListConfig = reactive({
+  ApiUrl: HttpApiV1.url_sysrole_list,
+
+})
+
+</script>
+
+<style scoped></style>