zsysview 0.0.6 → 0.0.8

package/view/department/department_edit_dialog.vue

@@ -0,0 +1,267 @@
+<!-- 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 :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-loading="view.loading"
+      :disabled="view.saving">
+      <el-form-item label="名称" prop="department_title">
+        <el-input ref="inputRef" v-model="form.department_title" style="width: 300px;" />
+      </el-form-item>
+      <el-form-item label="上级部门/组织" prop="de">
+        <el-tree-select v-model="form.parent_id_str" :data="parent_option" check-strictly :render-after-expand="true"
+          show-checkbox check-on-click-node placeholder="不选代表无上级" style="width: 240px" clearable />
+        <!-- :value-on-clear="null" -->
+        <!-- <el-cascader placeholder="不选代表无上级" v-model="form._pid" :options="parent_option" :props="{checkStrictly: true,value:'department_id',label:'department_title'}" clearable /> -->
+      </el-form-item>
+      <el-form-item label="排序" prop="department_sort">
+        <el-input-number v-model="form.department_sort" :min="1"></el-input-number>
+      </el-form-item>
+
+    </el-form>
+
+    <!-- 底部按钮区插槽 -->
+    <template #footer>
+      <div style="display: flex;justify-content: right;">
+        <el-tooltip v-if="view.isnew" 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
+})
+
+
+if (props.id == 0n) { view.isnew = true }
+//^^^^^^^^^^^^^^^上方为对话框功能^^^^^^^^^^^^^^^
+
+//===============下方为数据部分===============
+
+interface Department {
+  department_id: bigint
+  department_sort: number
+  department_title: string
+  children: Department[]
+}
+
+// 递归转换函数
+function convertDepartmentToParentOption(alldept: Department[]): ParentOption[] {
+  let re: ParentOption[] = []
+  for (let i = 0; i < alldept.length; i++) {
+    const result: ParentOption = {
+      value: alldept[i].department_id.toString(),
+      label: alldept[i].department_title,
+    };
+
+    // 递归处理子节点
+    if (alldept[i].children && alldept[i]?.children.length > 0) {
+      result.children = convertDepartmentToParentOption(alldept[i].children)
+    }
+    re.push(result)
+  }
+
+
+  return re;
+}
+
+const getParentOption = async () => {
+  let res = await http.Post(http.url_department_list, {})
+  if (res.IsSuccess) {
+    let data = res.data as { listdata: Department[] }
+    return data.listdata
+  }
+  return []
+}
+
+interface ParentOption {
+  value: string
+  label: string
+  children?: ParentOption[]
+}
+
+const parent_option = ref<ParentOption[]>([])
+
+//=================表单
+const ruleFormRef = ref<FormInstance>()
+const form = ref({
+  department_id: props.id as bigint,
+  department_title: "",
+  department_sort: 9999,
+  parent_id_str: "",
+})
+const rules = reactive<FormRules<typeof form>>({
+  department_title: [
+    { required: true, message: '请输入名称', trigger: 'blur' },
+  ],
+})
+//=================
+
+//获取修改数据
+const getData = async () => {
+  view.loading = true
+  //获取可以用的权限值
+  parent_option.value = convertDepartmentToParentOption(await getParentOption())
+  console.log(parent_option);
+
+  form.value.department_id = props.id
+  if (props.id != 0n) {
+    view.donotClose = false
+    try {
+      let res = await http.Post(http.url_department_detail, { id: props.id })
+      if (res.IsSuccess) {
+        let data = res.data as {
+          department_id: bigint
+          department_title: string
+          parent_id: bigint
+          department_sort: number
+        }
+
+        form.value.department_id = data.department_id
+        form.value.department_title = data.department_title
+        let pid_str = data.parent_id.toString()
+        form.value.parent_id_str = pid_str == '0' ? '' : pid_str
+        form.value.department_sort = data.department_sort
+      }
+    } catch (e) {
+      console.log(e);
+    } finally {
+
+    }
+  } else {
+    form.value.department_title = ''
+  }
+  view.loading = false
+}
+
+//保存
+const saveData = async (): Promise<HttpApiReturnData> => {
+  return await http.Post(http.url_department_save, {
+    department_id: form.value.department_id,
+    department_title: form.value.department_title,
+    department_sort: form.value.department_sort,
+    parent_id: BigInt(form.value.parent_id_str)
+  })
+}
+
+//验证表单处理界面并保存
+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) {
+            form.value.department_id = 0n
+            setTimeout(() => { focus() }, 200);
+          } else {
+            close();
+          }
+          ZSYSMessage.ShowSuccess("保存成功")
+          eventBus.emit('aud', { module: 'department', id: form.value.department_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/desktop/desktop.vue

@@ -0,0 +1,11 @@
+<template>
+    欢迎使用
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>

package/view/log/log.vue

@@ -0,0 +1,60 @@
+<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">
+                <template #content>
+                  <el-table-column prop="log_id" label="日志ID" width="180" />
+                  <el-table-column prop="from_ip" label="IP" width="160" />
+                  <el-table-column prop="c_time" label="时间" width="180">
+                    <template #default="{row}">
+                      {{ dataformat(row.c_time) }}
+                    </template>
+                  </el-table-column>
+                  <el-table-column prop="uname" label="操作人" width="100" />
+                  <el-table-column prop="description" label="日志内容" min-width="180" />
+                </template>
+              </zsyslist>
+          </el-tab-pane>
+          <el-tab-pane label="设置" name="second">
+            <log_setting/>
+          </el-tab-pane>
+      </el-tabs>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, 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 log_setting from './log_setting.vue'
+import {formatDateTime} from '../../core/common/zsys_time'
+import { HttpApiV1 } from '../../core/httpapi/http_api_v1';
+const activeName = ref('first')
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+
+//============列表控件===========================
+const listconfig:ListConfig=reactive({
+  ApiUrl:HttpApiV1.url_syslog_list,
+  KeywordTip:'操作人、日志内容',
+  QuickConditionsGroups:[
+    {Label:'类别:',Select:0, QuickConditions:[
+      {label:'全部',column:null},
+      {label:'登录日志',column:'log_type',condition:'=',value:1},
+      {label:'操作日志',column:'log_type',condition:'=',value:2},
+    ]}
+  ]
+})
+
+//日期格式化
+const dataformat=computed(()=>(item:string)=>formatDateTime(new Date(item)))
+
+</script>
+
+<style scoped>
+
+</style>

package/view/log/log_setting.vue

@@ -0,0 +1,41 @@
+<template>
+    <el-alert title="过久的日志将自动清理，请选择日志保留时长" type="info" show-icon :closable="false" />
+    <el-form label-width="auto" style="max-width: 600px;margin-top: 10px;">
+        <el-form-item label="保留天数">
+            <el-input-number v-model="num" :step="30" :min="90"/>
+        </el-form-item>
+        <el-form-item>
+            <el-button type="primary" @click="saveConfig">应用设置</el-button>
+        </el-form-item>
+    </el-form>
+</template>
+
+<script setup lang="ts">
+import { HttpApiV1 } from '../../core/httpapi/http_api_v1'
+import { ZSYSMessage } from '../../components/message'
+import { ref,onMounted } from 'vue'
+
+const num = ref(365)
+async function saveConfig(){
+    let res=await HttpApiV1.Post(HttpApiV1.url_syslog_config_save,{keep_days:num.value})
+    if(res.IsSuccess){
+        ZSYSMessage.ShowSuccess('应用成功')
+    }else{
+        ZSYSMessage.ShowError('应用失败')
+    }
+}
+
+async function getConfig(){
+    let res =await HttpApiV1.Post(HttpApiV1.url_syslog_config_detail,{})
+    if(res.IsSuccess){
+        let data=res.data as {keep_days:number}
+        num.value=data.keep_days
+    }
+}
+
+onMounted(getConfig)
+</script>
+
+<style scoped>
+
+</style>

package/view/login.vue

@@ -7,7 +7,7 @@
                 </div>
             </template>
             <!-- <el-avatar shape="square" size="large" /> -->
-            <el-image style="height: 100px" :src="logoUrl"  />
+            <el-image style="height: 100px" src="../assets/default_avatar.png"  /><!-- :src="logoUrl" -->
             <el-form label-width="auto" label-position="top">
                 <el-form-item label="用户名" >
                     <el-input size="large" :autofocus="true" v-model="d.u" clearable @keyup.enter.native="ToPasswordInput"/>
@@ -25,11 +25,11 @@
 
 <script setup lang="ts">
 import { reactive} from 'vue'
-import { ZSYSMessage } from '../../utils/zsys_message';
+import { ZSYSMessage } from '../components/message';
 import {useRoute, useRouter} from "vue-router";
 import { Md5 } from 'ts-md5'
-import { HttpApiV1 as http } from '../../httpapi/http_api_v1';
-import logoUrl from '../../assets/logo_100.png';
+import { HttpApiV1 as http } from '../core/httpapi/http_api_v1';
+// import logoUrl from '../../assets/logo_100.png';
 
 const r=useRouter()
 const route=useRoute()
@@ -81,7 +81,7 @@ const login = () => {
     display: flex;
     justify-content: center;
     align-items: center;
-    background-image: url("/src/assets/zsys/login/bg.jpg");
+    background-image: url("../assets/login_bg.jpg");
     background-size: cover;
     background-position: center;
     width: 100%; 

package/view/main/breadcrumb.vue

@@ -0,0 +1,41 @@
+<template>
+    <el-breadcrumb :separator-icon="ArrowRight" style=" padding: 20px;">
+    <!-- <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item> -->
+    <el-breadcrumb-item v-for="v in lists" :key="v.path" >{{ v.meta.title }}</el-breadcrumb-item>
+  </el-breadcrumb>
+</template>
+
+<script setup lang="ts">
+import { ArrowRight } from '@element-plus/icons-vue'
+import { useRouter } from 'vue-router';
+import type { RouteLocationMatched } from 'vue-router';
+import {ref, onMounted, watch} from 'vue'
+
+const r=useRouter()
+const lists=ref<RouteLocationMatched[]>([])
+
+// watch(r.currentRoute.value.fullPath,(to,_)=>{
+//     GetBreadcrumb(to.matched)
+// })
+
+watch(
+      () => r.currentRoute.value.path, // 使用 getter 函数
+      () => {
+        // 处理路径变化
+        GetBreadcrumb(r.currentRoute.value.matched)
+      }
+    )
+
+onMounted(()=>{
+    GetBreadcrumb(r.currentRoute.value.matched)
+})
+
+function GetBreadcrumb(matched:RouteLocationMatched[]) :void {
+    lists.value=matched
+}
+
+</script>
+
+<style scoped>
+
+</style>

package/view/main/main.vue

@@ -0,0 +1,60 @@
+<template>
+  <!-- <div class="common-layout"> -->
+  <el-container>
+    <!-- :style="{ backgroundColor: headerbgColor }" -->
+    <el-header class="header" >
+      <Userheader />
+    </el-header>
+    <el-container>
+      <Usermenu />
+      <el-main
+        style="padding: 0; background-color: white; position: fixed; left: 200px; top:60px;right: 0px;bottom: 0px;">
+        <router-view />
+      </el-main>
+    </el-container>
+  </el-container>
+  <!-- </div> -->
+</template>
+
+<script setup lang="ts">
+import Usermenu from './userMenu.vue';
+import Userheader from './userHeader.vue'
+import { useRouter } from 'vue-router'  //'vue-router';
+import { watch } from 'vue';
+import { useTokenStore } from '../../core/user_token'
+import { ZSYSMessage } from '../../components/message'
+const store = useTokenStore()
+const r = useRouter()
+
+watch(store, (newv) => {
+  console.log('watch')
+  if (newv.token_data == 'none') {
+    console.log('newv.token_data==none')
+    r.push({
+      path: '/login',
+      query: {
+        redirect: r.currentRoute.value.fullPath
+      }
+    })
+    ZSYSMessage.ShowInfo('系统要求您重新登录')
+  } else {
+    console.log('newv.token_data!=none')
+  }
+})
+
+</script>
+
+<style scoped>
+/* .header{
+    background-color: #f8f8f8;
+} */
+
+.header{
+  padding: 0px;
+    background-color: #f8f8f8;
+}
+
+/* .el-menu--horizontal {
+  --el-menu-horizontal-height: 600px;
+} */
+</style>

package/view/main/userHeader.vue

@@ -0,0 +1,73 @@
+<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="../../assets/default_logo_40.png" />
+            <!-- :src="logoUrl" -->
+        </div>
+
+        <div style="float: left; line-height: 60px;">{{app.zsysapp.config.globalProperties.$appName}}岗位行为识别系统</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';
+import app from '../../core/app';
+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>