zsysview 0.0.6 → 0.0.8

package/view/role/role_edit_dialog.vue

@@ -0,0 +1,271 @@
+<!-- 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-loading="view.loading"
+      :disabled="view.saving">
+      <el-form-item label="角色名称" prop="role_title">
+        <el-input ref="inputRef" v-model="form.role_title" style="width: 300px;" />
+        <el-switch v-model="form.role_is_enable" inline-prompt active-text="已启用" inactive-text="已禁用"
+          style="margin-left: 10px;" />
+      </el-form-item>
+      <el-form-item label="备注" prop="role_notes">
+        <el-input v-model="form.role_notes" type="textarea" :rows="2" />
+      </el-form-item>
+      <el-form-item label="权限">
+        <el-transfer v-model="form.permission_value" :data="permission_option" :titles="['可选', '已选']" :props="{
+          key: 'permission_key',
+          label: 'permission_title',
+        }">
+          <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>
+
+    <!-- 底部按钮区插槽 -->
+    <template #footer>
+      <div style="display: flex;justify-content: right;">
+        <el-tooltip content="保存成功后不关闭窗口">
+          <el-checkbox v-if="view.isnew" 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 PermissionOption {
+  permission_key: string,
+  permission_title: string
+}
+
+//列表数据返回值
+interface ListData {
+  listdata: PermissionOption[]
+}
+
+const getPermissionOption = async () => {
+  let res = await http.Post(http.url_syspermission_list, {})
+  if (res.IsSuccess) {
+    let data = res.data as ListData
+    return data.listdata
+  }
+  return []
+}
+
+const permission_option = ref<PermissionOption[]>([])
+
+//=================表单
+const ruleFormRef = ref<FormInstance>()
+const form = ref({
+  role_id: props.id as bigint,
+  role_is_enable: true,
+  set role_enable(v: number) {
+    this.role_is_enable = (v == 1 ? true : false)
+  },
+  get role_enable(): number {
+    return (this.role_is_enable ? 1 : 0)
+  },
+  role_title: '',
+  role_notes: '',
+  permission_value: [],
+  set role_permission(v: string) {
+    this.permission_value = v.split(',') as never[]
+  },
+})
+const rules = reactive<FormRules<typeof form>>({
+  role_title: [
+    { required: true, message: '请输入角色名称', trigger: 'blur' },
+  ],
+})
+//=================
+
+//获取修改数据
+const getData = async () => {
+  view.loading = true
+  //获取可以用的权限值
+  permission_option.value = await getPermissionOption()
+  form.value.role_id = props.id
+  if (props.id != 0n) {
+    view.donotClose=false
+    try {
+      let res = await http.Post(http.url_sysrole_detail, { id: props.id })
+      if (res.IsSuccess) {
+        let data = res.data as {
+          role_id: bigint
+          role_name: string
+          role_notes: string
+          role_enable: number
+          role_is_enable: boolean
+          role_permission: string
+        }
+
+        form.value.role_title = data.role_name
+        form.value.role_notes = data.role_notes
+        form.value.role_enable = data.role_enable
+        form.value.role_permission = data.role_permission
+      }
+    } catch (e) {
+      console.log(e);
+    } finally {
+
+    }
+  } else {
+    form.value.role_title = ''
+    form.value.role_notes = ''
+  }
+  view.loading = false
+}
+
+//保存
+const saveData = async (): Promise<HttpApiReturnData> => {
+  let pv = ''
+  for (let i = 0; i < form.value.permission_value.length; i++) {
+    if (pv != '') { pv += ',' }
+    pv += form.value.permission_value[i]
+  }
+  return await http.Post(http.url_sysrole_save, {
+    role_id: form.value.role_id,
+    role_name: form.value.role_title,
+    role_permission: pv,
+    role_notes: form.value.role_notes,
+    role_enable: form.value.role_enable
+  })
+}
+
+//验证表单处理界面并保存
+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.role_id = 0n
+            setTimeout(() => { focus() }, 200);
+          } else {
+            close();
+          }
+          ZSYSMessage.ShowSuccess("保存成功")
+          eventBus.emit('aud', {module:'role', id: form.value.role_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>
+.el-transfer /deep/ .el-transfer-panel {
+  width: 240px;
+}
+</style>

package/view/self/change_password.vue

@@ -0,0 +1,97 @@
+<template>
+    <breadcrumb />
+    <div style="padding: 0px 20px; margin-top: 20px;">
+        <el-form ref="ruleFormRef" 
+                label-width="auto" 
+                style="max-width: 400px; margin-left:80px;" 
+                :rules="rules" 
+                :model="form_data"
+                status-icon>
+            <el-form-item label="旧密码" prop="old_p">
+                <el-input v-model="form_data.old_p" size="large" show-password/>
+            </el-form-item>
+            <el-form-item label="新密码" prop="new_p1">
+                <el-input  v-model="form_data.new_p1" size="large" show-password/>                
+            </el-form-item>
+            <el-form-item label="再次输入新密码" prop="new_p2">
+                <el-input  v-model="form_data.new_p2" size="large" show-password/>
+            </el-form-item>
+            <el-form-item style="margin-left:120px;">
+                <el-button type="primary" @click="submitForm(ruleFormRef)" :loading="view.isloading">确认修改</el-button>
+                <el-button @click="goBack" :disabled="view.isloading">返回</el-button>
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+
+<script setup lang="ts">
+import breadcrumb from '../breadcrumb.vue';
+import { HttpApiV1 as http } from '../../../httpapi/http_api_v1';
+import { reactive,ref } from 'vue';
+import { useRouter} from "vue-router";
+import { ZSYSMessage } from '../../../utils/zsys_message';
+import type { FormInstance, FormRules } from 'element-plus'
+import { Md5 } from 'ts-md5'
+const ruleFormRef = ref<FormInstance>()
+const r=useRouter()
+const goBack = () => {
+  r.back()
+}
+
+const view=reactive({
+    isloading:false,
+
+})
+
+const form_data=reactive({
+    old_p:'',
+    new_p1:'',
+    new_p2:'',
+})
+//校验
+const rules=reactive<FormRules<typeof form_data>>({
+    old_p:[
+        {required: true, message:'请输入旧密码',trigger:'blur'},
+    ],
+    new_p1:[
+        {required: true, message:'请输入新密码',trigger:'blur'},
+        {min: 6,max:18, message:'密码长度为6-18位',trigger:'blur'},
+    ],
+    new_p2:[
+        {required: true, message:'请输入新密码',trigger:'blur'},
+        {min: 6,max:18, message:'密码长度为6-18位',trigger:'blur'},
+    ]
+
+})
+
+const submitForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  formEl.validate((valid) => {
+    if (valid) {
+        view.isloading=true
+        http.Post(http.url_change_password,{
+            old_p:Md5.hashStr(form_data.old_p),
+            new_p:Md5.hashStr(form_data.new_p1)
+        }).then((res)=>{
+            if(res.IsSuccess){
+                ZSYSMessage.ShowSuccess('密码修改成功')
+                r.back()
+            }else{
+                ZSYSMessage.ShowError('密码修改失败')
+            }
+            }).catch((err)=>{
+                console.log(err); 
+            }).finally(()=>{
+                view.isloading=false
+            })
+    } else {
+      console.log('error submit!')
+    }
+  })
+}
+
+</script>
+
+<style scoped>
+
+</style>

package/view/self/self.vue

@@ -0,0 +1,62 @@
+<template>
+    <breadcrumb />
+    <div style="padding: 0px 20px; margin-top: 20px;">
+        <el-row>
+            <el-col :span="6" style="justify-content: center;align-items: center;display: flex;">
+                <el-image style="width: 160px; height: 160px;"  fit="cover" />
+                <!-- :src="default_avatar" -->
+                <!-- <el-avatar :size="160" shape="square" /> -->
+            </el-col>
+            <el-col :span="18">
+                <el-descriptions title="您的信息">
+                    <el-descriptions-item label="UID">{{user.uid}}</el-descriptions-item>
+                    <el-descriptions-item label="用户名">{{user.user_name}}</el-descriptions-item>
+                    <el-descriptions-item label="姓名">{{user.uname}}</el-descriptions-item>    
+                    <el-descriptions-item label="岗位">安环部，部长</el-descriptions-item>        
+                    <el-descriptions-item label="手机号码">{{user.phone}}</el-descriptions-item>
+                </el-descriptions>
+                <router-link to="/password"><el-button>修改密码</el-button></router-link>
+            </el-col>
+        </el-row>
+    </div>
+</template>
+
+<script setup lang="ts">
+// import default_avatar from '../../../assets/zsys/default_avatar.png'
+import breadcrumb from '../main/breadcrumb.vue';
+import { HttpApiV1 as http } from '../../core/httpapi/http_api_v1';
+import { onMounted, ref} from 'vue';
+
+const user=ref({
+    uid:0,
+    uname:'',
+    user_name:'',
+    phone:''
+})
+
+onMounted(()=>{
+    http.Post(http.url_usercenter,{}).then((res)=>{
+        if(res.IsSuccess){
+            let d=res.data as {
+                uid:number
+                uname:string
+                user_name:string
+                phone:string
+            }
+            user.value=d
+            // user.uid=d.uid
+            // user.phone=d.phone
+            // user.uname=d.uname
+            // user.user_name=d.user_name
+        }
+    }).catch((err)=>{
+        console.log(err);
+    })
+})
+
+
+</script>
+
+<style scoped>
+
+</style>

package/view/sys/sys.vue

@@ -0,0 +1,19 @@
+<template>
+  <breadcrumb />
+  <div style="padding: 0px 20px; margin-top: 20px">
+    <el-tabs v-model="tab">
+      <el-tab-pane label="基础" name="base">
+        
+        
+      </el-tab-pane>
+    </el-tabs>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+const tab = ref('base')
+</script>
+
+<style scoped></style>

package/view/user/change_user_password_dialog.vue

@@ -0,0 +1,155 @@
+<!-- ReusableDialog.vue -->
+<template>
+    <el-dialog v-model="visible" title="修改密码" :align-center="true" :before-close="handleBeforeClose" width="450"
+        :draggable="true" :overflow="true" @open="open" @opened="focus" destroy-on-close :close-on-click-modal="false">
+        <!-- 默认插槽放主要内容 -->
+        <el-alert title="请为这个账号输入一个新密码" type="info" show-icon :closable="false" />
+        <el-form @submit.prevent ref="ruleFormRef" :model="form" :rules="rules"
+            style="padding-left: 10px;padding-right: 10px; margin-top: 10px;" label-width="auto"
+            v-loading="view.loading" :disabled="view.saving">
+            <el-form-item label="新密码" prop="new_p">
+                <el-input ref="inputRef" v-model="form.new_p" style="width: 300px;" />
+            </el-form-item>
+        </el-form>
+
+        <!-- 底部按钮区插槽 -->
+        <template #footer>
+            <div style="display: flex;justify-content: right;">
+                <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 { Md5 } from 'ts-md5';
+
+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 = () => {
+
+}
+
+
+const close = () => {
+    visible.value = false;
+    // emit('close');
+};
+
+const handleBeforeClose = (done: () => void) => {
+    ruleFormRef.value?.clearValidate();
+    // 可以在这里添加关闭前的拦截逻辑
+    done();
+};
+
+const view = reactive({
+    loading: false,
+    saving: false,
+})
+
+//^^^^^^^^^^^^^^^上方为对话框功能^^^^^^^^^^^^^^^
+
+//===============下方为数据部分===============
+
+//=================表单
+const ruleFormRef = ref<FormInstance>()
+const form = ref({
+    uid: props.id as bigint,
+    new_p: "",
+})
+const rules = reactive<FormRules<typeof form>>({
+    new_p: [
+        { required: true, message: '请输入新密码', trigger: 'blur' },
+    ],
+})
+//=================
+
+//保存
+const saveData = async (): Promise<HttpApiReturnData> => {
+    return await http.Post(http.url_user_change_pwd, { uid: form.value.uid, new_p: Md5.hashStr(form.value.new_p) })
+}
+
+//验证表单处理界面并保存
+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');
+                    close();
+                    ZSYSMessage.ShowSuccess("修改成功")
+                } 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>