zsysview 0.0.5 → 0.0.7

package/view/user/user_edit_dialog.vue

@@ -0,0 +1,283 @@
+<!-- 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="uname">
+        <el-input ref="inputRef" v-model="form.uname" style="width: 300px;" />
+        <el-switch v-model="form.is_enable" inline-prompt active-text="已启用" inactive-text="已禁用"
+          style="margin-left: 10px;" />
+      </el-form-item>
+      <el-form-item label="用户名" prop="username">
+        <el-input v-model="form.username" style="width: 300px;" />
+      </el-form-item>
+      <el-form-item v-if="form.uid == 0n" label="初始密码" prop="password">
+        <el-input v-model="form.password" style="width: 300px;" />
+      </el-form-item>
+      <el-form-item label="角色权限" prop="role_title">
+        <el-select multiple v-model="form.role_value" placeholder="未选择" clearable>
+          <el-option v-for="item in role_option" :key="item.value" :label="item.label" :value="item.value">
+            <span style="float: left">{{ item.label }}</span>
+            <span v-if="!item.enable" style="
+          float: right;
+          color: var(--el-text-color-secondary);
+          font-size: 13px;
+        ">
+              禁用不生效
+            </span>
+          </el-option>
+        </el-select>
+      </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';
+import { Md5 } from 'ts-md5'
+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 RoleOption {
+  value: string,
+  label: string,
+  enable: boolean
+}
+
+
+const getRoleOption = async () => {
+  let d: RoleOption[] = []
+  let res = await http.Post(http.url_sysrole_list, { "page_size": 999, "page_index": 1 })
+  if (res.IsSuccess) {
+    let data = res.data as {
+      listdata: {
+        role_name: string,
+        role_id: bigint,
+        role_enable: boolean
+      }[]
+    }
+    for (let i = 0; i < data.listdata.length; i++) {
+      let r = data.listdata[i]
+      d.push({ value: r.role_id.toString(), label: r.role_name, enable: r.role_enable })
+    }
+    return d
+  }
+  return []
+}
+
+const role_option = ref<RoleOption[]>([])
+
+//=================表单
+const ruleFormRef = ref<FormInstance>()
+const form = ref({
+  uid: props.id as bigint,
+  uname: "",
+  username: "",
+  password: "",
+  is_enable: true,
+  role_value: [] as string[],
+})
+const rules = reactive<FormRules<typeof form>>({
+  uname: [
+    { required: true, message: '请输入姓名', trigger: 'blur' },
+  ],
+})
+//=================
+
+//获取修改数据
+const getData = async () => {
+  view.loading = true
+  //获取可以用的权限值
+  role_option.value = await getRoleOption()
+  form.value.uid = props.id
+  if (props.id != 0n) {
+    view.donotClose = false
+    try {
+      let res = await http.Post(http.url_user_detail, { id: props.id })
+      if (res.IsSuccess) {
+        let data = res.data as {
+          uid: bigint
+          uname: string
+          username: string
+          user_enable: number
+          role_ids: bigint[]
+        }
+
+        form.value.uid = data.uid
+        form.value.uname = data.uname
+        form.value.username = data.username
+        form.value.is_enable = data.user_enable == 1
+        let rs: string[] = []
+        for (const s of data.role_ids) {
+          for (let tmp of role_option.value) {
+            if (tmp.value == s.toString()) {
+              rs.push(s.toString())
+              break
+            }
+          }
+        }
+        form.value.role_value = rs
+      }
+    } catch (e) {
+      console.log(e);
+    } finally {
+
+    }
+  } else {
+
+  }
+  view.loading = false
+}
+
+//保存
+const saveData = async (): Promise<HttpApiReturnData> => {
+  let r: bigint[] = []
+  for (const s of form.value.role_value) {
+    r.push(BigInt(s))
+  }
+  let postdata = {
+    uid: form.value.uid,
+    username: form.value.username,
+    password: form.value.uid == 0n ? Md5.hashStr(form.value.password) : "",
+    uname: form.value.uname,
+    user_enable: form.value.is_enable ? 1 : 0,
+    role_ids: r
+  }
+
+  return await http.Post(http.url_user_save, postdata)
+}
+
+//验证表单处理界面并保存
+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.uid = 0n
+            setTimeout(() => { focus() }, 200);
+          } else {
+            close();
+          }
+          ZSYSMessage.ShowSuccess("保存成功")
+          eventBus.emit('aud', { module: 'user', id: form.value.uid })
+        } 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>