u

code/container-ocr/ocr-vue/src/views/user-center/employee.vue

@@ -0,0 +1,180 @@
+<script lang="js" setup>
+import { loadObjectApi, saveObjectApi } from "@/request/api";
+import { useUserStore } from "@/store/user";
+import { diffObject } from "@/utils/diff";
+import { ElMessage } from "element-plus";
+
+const userStore = useUserStore();
+
+const isNew = ref(true);
+
+const maintableOld = ref({});
+const maintable = ref({});
+
+const loading = ref(false);
+
+const userid = ref(userStore.userInfo.userid);
+
+onMounted(() => {
+  loadFormData();
+});
+
+function loadFormData() {
+  loading.value = true;
+
+  loadObjectApi({
+    viewName: "v_b_employee",
+    keyField: "b_id",
+    keyValue: userid.value,
+  })
+    .then((res) => {
+      if (res.success) {
+        if (res.data) {
+          maintable.value = res.data;
+          maintableOld.value = structuredClone(maintable.value);
+          isNew.value = false;
+        } else {
+          maintable.value.b_id = userid.value;
+          maintable.value.b_name_ch = userStore.userInfo.username || "";
+
+          maintableOld.value = structuredClone(maintable.value);
+
+          isNew.value = true;
+        }
+      }
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+
+function handleConfirm() {
+  let obj = {};
+
+  if (isNew.value) {
+    maintable.value.b_customer_id = "b_employee";
+    maintable.value.b_state = "草拟";
+
+    obj = maintable.value;
+  } else {
+    const diffResult = diffObject(
+      maintable.value,
+      maintableOld.value,
+      ["b_id"],
+      [],
+    );
+
+    if (!diffResult.isChanged) {
+      ElMessage.success("保存成功");
+
+      loadFormData();
+      return;
+    }
+
+    obj = diffResult.result;
+  }
+
+  const requestData = [
+    {
+      tableName: "b_contact",
+      keyField: "b_id",
+      inserts: isNew.value ? [obj] : [],
+      updates: isNew.value ? [] : [obj],
+      deletes: [],
+    },
+  ];
+
+  loading.value = true;
+
+  saveObjectApi(requestData)
+    .then((res) => {
+      if (res.success) {
+        ElMessage.success("保存成功");
+        isNew.value = false;
+        loadFormData();
+      }
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+</script>
+
+<template>
+  <div style="width: 360px" v-loading="loading">
+    <G3Grid>
+      <G3GridGroup :label-width="80" :column="1" label-align="right">
+        <G3GridItem label="账号" :span="1" required>
+          <el-input v-model="maintable.b_id" disabled />
+        </G3GridItem>
+        <G3GridItem label="姓名" :span="1">
+          <el-input v-model="maintable.b_name_ch" />
+        </G3GridItem>
+        <G3GridItem label="手机电话" :span="1">
+          <el-input v-model="maintable.b_phone" />
+        </G3GridItem>
+        <G3GridItem label="QQ" :span="1">
+          <el-input v-model="maintable.b_fax" />
+        </G3GridItem>
+        <G3GridItem label="邮箱" :span="1">
+          <el-input v-model="maintable.b_email" />
+        </G3GridItem>
+        <G3GridItem label="性别" :span="1">
+          <el-select v-model="maintable.b_sex">
+            <el-option label="男" value="男" />
+            <el-option label="女" value="女" />
+          </el-select>
+        </G3GridItem>
+        <G3GridItem label="部门" :span="1">
+          <el-input v-model="maintable.b_departmentname" />
+        </G3GridItem>
+        <G3GridItem label="职位" :span="1">
+          <el-input v-model="maintable.b_duty" />
+        </G3GridItem>
+        <G3GridItem label="合同开始" :span="1">
+          <el-date-picker
+            v-model="maintable.b_htbegindate"
+            type="date"
+            format="YYYY-MM-DD"
+            value-format="YYYY-MM-DD"
+            style="width: 100%"
+          />
+        </G3GridItem>
+        <G3GridItem label="合同到期" :span="1">
+          <el-date-picker
+            v-model="maintable.b_htenddate"
+            type="date"
+            format="YYYY-MM-DD"
+            value-format="YYYY-MM-DD"
+            style="width: 100%"
+          />
+        </G3GridItem>
+        <G3GridItem label="紧急电话" :span="1">
+          <el-input v-model="maintable.b_homephone" />
+        </G3GridItem>
+        <G3GridItem label="详细地址" :span="1">
+          <el-input v-model="maintable.b_homeaddr" type="textarea" />
+        </G3GridItem>
+        <G3GridItem label="备注" :span="1">
+          <el-input v-model="maintable.b_bz" type="textarea" />
+        </G3GridItem>
+      </G3GridGroup>
+    </G3Grid>
+
+    <div class="footer">
+      <el-button :loading="loading">取消</el-button>
+      <el-button type="primary" :loading="loading" @click="handleConfirm">
+        确认
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.footer {
+  margin-top: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+</style>

code/container-ocr/ocr-vue/src/views/user-center/index.vue

@@ -0,0 +1,25 @@
+<script lang="js" setup>
+import UpdatePassword from "./update-password.vue";
+import Employee from "./employee.vue";
+</script>
+
+<template>
+  <el-tabs tab-position="left" class="tabs">
+    <el-tab-pane label="个人信息">
+      <Employee />
+    </el-tab-pane>
+    <el-tab-pane label="修改密码">
+      <UpdatePassword />
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<style lang="scss" scoped>
+.tabs {
+  height: 100%;
+  background-color: #fff;
+  :deep(.el-tabs__content) {
+    overflow-y: auto;
+  }
+}
+</style>

code/container-ocr/ocr-vue/src/views/user-center/update-password.vue

@@ -1,9 +1,8 @@
-<script setup>
+<script lang="js" setup>
+import { updatePasswordApi } from "@/request/api";
 import { ElMessage } from "element-plus";
 
-import { ref } from "vue";
-
-const loading = ref(false);
+const confirmLoading = ref(false);
 
 const form = ref({
   oldPassword: "",
@@ -11,115 +10,75 @@ const form = ref({
   confirmPassword: "",
 });
 
-function resetFrom() {
-  form.value.oldPassword = "";
-  form.value.newPassword = "";
-  form.value.confirmPassword = "";
-}
-
-async function handleConfirm() {
-  if (form.value.newPassword !== form.value.confirmPassword) {
+function handleConfirm() {
+  if (form.value.newPassword === "") {
+    ElMessage.warning("新密码不能为空");
+    return;
+  }
+  if (form.value.confirmPassword !== form.value.newPassword) {
     ElMessage.warning("新密码和确认密码不一致");
     return;
   }
 
-  loading.value = true;
+  confirmLoading.value = true;
 
-  const requestData = {
-    oldPassword: form.value.oldPassword,
+  updatePasswordApi({
     newPassword: form.value.newPassword,
-  };
-
-  try {
-    const saveRes = await axios.post("/updatePassword", requestData, {
-      headers: { "Content-Type": "application/json" },
+    oldPassword: form.value.oldPassword,
+  })
+    .then((res) => {
+      if (res.success) {
+        // 修改成功
+        ElMessage.success("修改成功");
+        resetForm();
+      }
+    })
+    .finally(() => {
+      confirmLoading.value = false;
     });
+}
 
-    if (saveRes.data.success) {
-      ElMessage.success("密码更新成功");
-      resetFrom();
-    } else {
-      ElMessage.error(`密码更新失败：${saveRes.data.message}`);
-    }
-  } catch (error) {
-    ElMessage.error(`密码更新失败：${error.message || "未知错误"}`);
-  } finally {
-    loading.value = false;
-  }
+function resetForm() {
+  form.value.newPassword = "";
+  form.value.oldPassword = "";
+  form.value.confirmPassword = "";
 }
 </script>
 
 <template>
-  <div class="g3-container">
-    <div class="g3-grid">
-      <div class="g3-cell">
-        <div class="g3-cell-label">旧密码：</div>
-        <el-input v-model="form.oldPassword" type="password" />
-      </div>
-      <div class="g3-cell">
-        <div class="g3-cell-label">新密码：</div>
-        <div class="g3-cell-value">
-          <el-input v-model="form.newPassword" type="password" />
-        </div>
-      </div>
-      <div class="g3-cell">
-        <div class="g3-cell-label">确认密码：</div>
-        <el-input v-model="form.confirmPassword" type="password" />
-      </div>
-    </div>
-    <div class="g3-actions">
-      <el-button type="primary" :loading="loading" @click="handleConfirm"> 确认 </el-button>
-      <el-button :loading="loading" @click="resetFrom"> 重置 </el-button>
+  <div style="width: 360px">
+    <G3Grid>
+      <G3GridGroup :label-width="80" :column="1" label-align="right">
+        <G3GridItem label="旧密码" :span="1">
+          <el-input v-model="form.oldPassword" type="password" show-password />
+        </G3GridItem>
+        <G3GridItem label="新密码" :span="1" required>
+          <el-input v-model="form.newPassword" type="password" show-password />
+        </G3GridItem>
+        <G3GridItem label="确认密码" :span="1" required>
+          <el-input
+            v-model="form.confirmPassword"
+            type="password"
+            show-password
+          />
+        </G3GridItem>
+      </G3GridGroup>
+    </G3Grid>
+
+    <div class="footer">
+      <el-button @click="resetForm">取消</el-button>
+      <el-button type="primary" :loading="confirmLoading" @click="handleConfirm"
+        >确认</el-button
+      >
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
-.g3-container {
-  padding: 16px;
-  width: 400px;
-}
-
-.g3-grid {
-  display: grid;
-  grid-template-columns: repeat(1, 1fr);
-  gap: 1px;
-  border: 1px solid #ddd;
-  background-color: #ddd;
-}
-
-.g3-cell {
-  display: flex;
-  align-items: center;
-  color: #333;
-  font-size: 14px;
-  height: 32px;
-}
-
-.g3-cell-label {
-  padding: 8px;
-  border-right: 1px solid #ddd;
+.footer {
+  margin-top: 12px;
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  width: 95px;
-  flex-shrink: 0;
-  background: #f9f9f9;
-  height: 100%;
-}
-.g3-cell-value {
-  width: 100%;
-}
-
-.g3-actions {
-  display: flex;
-  margin-top: 12px;
-  justify-content: end;
-}
-
-:deep(.el-input__wrapper) {
-  border: none !important;
-  box-shadow: none !important;
-  border-radius: 0px;
 }
 </style>