3.27优化

pengwei

2025-03-27 1288a7890deb3b180b1e8df7015b1036514c4e71

 ÏîÄ¿´úÂë/client/src/views/system/UserInfo.vue

@@ -3,14 +3,25 @@
    <div class="info">
      <div style="position: relative">
        <el-upload
          :disabled="true"
          class="avatar-uploader"
          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
          action="#"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          <el-image
            style="width: 100px; height: 100px"
            :src="'http://115.159.85.185:9098' + userInfo.headImageUrl"
            :fit="fit"
          />
          <!-- <img
            v-if="userInfo.headImageUrl"
            :src="'http://192.168.0.80:5000' + userInfo.headImageUrl"
            class="avatar"
          />
          <el-icon v-else class="avatar-uploader-icon">
            <Plus />
          </el-icon> -->
        </el-upload>
        <span
          style="
@@ -33,7 +44,7 @@
        /></span>
      </div>
      <el-form
        :model="formInline"
        :model="userInfo"
        style="flex: 1"
        class="demo-form-inline"
        label-position="right"
@@ -42,12 +53,14 @@
        <el-row :gutter="2" style="height: 2.2rem">
          <el-col :span="3">
            <el-form-item label="登录账号:">
              <span style="font-size: 1rem; font-weight: bold">dsfuis</span>
              <span style="font-size: 1rem; font-weight: bold">{{
                userInfo.userName
              }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="3"
            ><el-form-item label="用户分组:">
              <span>维保部</span>
              <span>{{ userInfo.roleName }}</span>
            </el-form-item></el-col
          >
        </el-row>
@@ -64,7 +77,7 @@
          >
          <el-col :span="3">
            <el-form-item label="用户角色:">
              <span>2021-06-30</span>
              <span>{{ userInfo.roleName }}</span>
            </el-form-item>
          </el-col>
        </el-row>
@@ -101,7 +114,7 @@
              </template>
              <el-input
                size="small"
                v-model="form.name"
                v-model="form.usertruename"
                placeholder="请输入"
                style="width: 18.375rem"
              />
@@ -122,36 +135,45 @@
                >
              </template>
              <el-input
                v-model="form.name"
                v-model="form.phone"
                size="small"
                placeholder="请输入"
                style="width: 18.375rem"
              /> </el-form-item
          ></el-col>
        </el-row>
        <el-form-item  label-position="top">
        <el-form-item label-position="top">
          <template #label>
            <div style="display: flex; align-items: flex-end">
              <span style="color: red; margin-right: 0.2rem">*</span>
              <span style="font-size: 0.88rem; color: black; font-weight: bold"
                >人脸图片</span
              ><span
              >
              <!-- <span
                style="
                  color: rgba(255, 0, 0, 1);
                  font-size: 0.75rem;
                  margin-left: 0.5rem;
                "
                >注：最多可上传三张，图片需要正规的人像证件照</span
              >
              > -->
            </div>
          </template>
          <el-upload
            ref="upload"
            name="fileInput"
            class="avatar-uploader"
            action="#"
            action="http://115.159.85.185:9098/api/User/SaveFiles"
            list-type="picture-card"
            :auto-upload="false"
            :auto-upload="true"
            limit="1"
            @before-upload="beforeAvatarUpload"
            :on-success="handleAvatarSuccess"
            :file-list="fileList != [] ? fileList : []"
          >
            <el-icon><Plus /></el-icon>
            <el-icon>
              <Plus />
            </el-icon>

            <template #file="{ file }">
              <div>
@@ -172,14 +194,18 @@
                    class="el-upload-list__item-delete"
                    @click="handleDownload(file)"
                  >
                    <el-icon size="15"><Download /></el-icon>
                    <el-icon size="15">
                      <Download />
                    </el-icon>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)"
                  >
                    <el-icon size="15"><Delete /></el-icon>
                    <el-icon size="15">
                      <Delete />
                    </el-icon>
                  </span>
                </span>
              </div>
@@ -208,10 +234,10 @@
      <template #title>
        <div style="font-size: 1.25rem; font-weight: bold">密码修改</div>
      </template>
      <el-form :model="form">
      <el-form :model="Passwordform" ref="PasswordformRef" :rules="rules">
        <el-form-item>
          <el-input
            v-model="form.name"
            v-model="Passwordform.oldPwd"
            autocomplete="off"
            placeholder="请输入原密码"
            style="width: 21.25rem; height: 2.8125rem; font-size: 1rem"
@@ -219,7 +245,7 @@
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="form.name"
            v-model="Passwordform.newPwd"
            autocomplete="off"
            placeholder="请输入新密码"
            style="width: 21.25rem; height: 2.8125rem; font-size: 1rem"
@@ -227,7 +253,7 @@
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="form.name"
            v-model="newPwd"
            autocomplete="off"
            placeholder="确认密码"
            style="width: 21.25rem; height: 2.8125rem; font-size: 1rem"
@@ -240,7 +266,7 @@
          style="display: flex; justify-content: center"
        >
          <el-button
            @click="dialogVisible = false"
            @click="clickPassword(PasswordformRef)"
            type="primary"
            style="
              width: 21.25rem;
@@ -253,41 +279,148 @@
        </div>
      </template>
    </el-dialog>

    <!-- æŸ¥çœ‹å›¾ç‰‡å¼¹å‡ºæ¡† -->
    <el-dialog v-model="imgdialogVisible" center width="980">
      <img w-full :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
import {
  GetUserInfo,
  UpdatePassword,
  UpdateUser,
  Upuserbase,
} from "@/api/user";
import { ElMessage } from "element-plus";
const formInline = reactive({
  user: "",
  region: "",
  date: "",
});
const form = reactive({
  name: "",
  region: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: "",
});

const onSubmit = () => {
  console.log("submit!");
const upload = ref();
const form = ref({
  id: JSON.parse(localStorage.getItem("user")).id,
  usertruename: "",
  phone: "",
  files: "",
});
const newPwd = ref("");
const dialogVisible = ref(false);
//查看图片
const imgdialogVisible = ref(false);
const fileList = ref([]);

const rules = reactive({
  oldPwd: [{ required: true, message: "请输入旧密码", trigger: "blur" }],
  newPwd: [{ required: true, message: "请输入新密码", trigger: "blur" }],
});
const PasswordformRef = ref();
const Passwordform = ref({
  oldPwd: "",
  newPwd: "",
});
const clickPassword = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (
        Passwordform.value.newPwd == "" ||
        Passwordform.value.oldPwd == "" ||
        newPwd.value == ""
      ) {
        ElMessage({
          message: "输入框不能为空",
          type: "warning",
        });
        return;
      }
      if (Passwordform.value.newPwd == Passwordform.value.oldPwd) {
        ElMessage({
          message: "两次密码一致",
          type: "warning",
        });
        return;
      }
      if (Passwordform.value.newPwd != newPwd.value) {
        ElMessage({
          message: "新密码不一致",
          type: "warning",
        });
        return;
      }
      UpdatePassword(Passwordform.value).then((res) => {
        ElMessage({
          message: "修改成功",
          type: "success",
        });
        dialogVisible.value = false;
        console.log(res);
      });
    } else {
      console.log("error submit!", fields);
    }
  });
};

const dialogVisible = ref(false);
const userInfo = ref({});
const dialogImageUrl = ref();

GetUserInfo({}).then((res) => {
  userInfo.value = Object.assign({}, res.data);
  form.value.usertruename = res.data.userTrueName;
  form.value.phone = res.data.phoneNo;
});
//图片预览
const handlePictureCardPreview = (url) => {
  dialogImageUrl.value = url.url;
  imgdialogVisible.value = true;
};

//图片删除
const handleRemove = (file) => {
  upload.value.handleRemove(file);
};
const onSubmit = () => {
  if (form.value.files == "") {
    ElMessage({ message: "图片不能为空", type: "warning" });
    return;
  }
  if (form.value.usertruename == "") {
    ElMessage({ message: "姓名不能为空", type: "warning" });
    return;
  }
  if (form.value.phone == "") {
    ElMessage({ message: "电话不能为空", type: "warning" });
    return;
  }
  Upuserbase(form.value).then((res) => {
    ElMessage({ message: "修改成功", type: "success" });
    dialogVisible.value = false;
    initData();
  });
};
const beforeAvatarUpload = (val) => {
  console.log(val);
};
const handleAvatarSuccess = (val) => {
  form.value.files = "/image/" + val.data;
};
</script>
<style lang="scss" scoped>
.personal {
  display: flex;
  flex-direction: column;

  .info {
    display: flex;
    height: 10rem;
    background-color: #fff;
    align-items: center;

    :deep(.avatar-uploader .el-upload) {
      border: 1px dashed var(--el-border-color);
      border-radius: 50%;
@@ -310,6 +443,7 @@
      height: 6.25rem;
      text-align: center;
    }

    .el-form {
      .el-row {
        .el-col {
@@ -317,6 +451,7 @@
            :deep(.el-form-item__label) {
              font-size: 0.875rem;
            }

            span {
              font-size: 0.875rem;
            }
@@ -325,6 +460,7 @@
      }
    }
  }

  .mation {
    flex: 1;
    margin-top: 1.25rem;
@@ -332,19 +468,23 @@
    padding: 1.1875rem 2.0625rem;
    box-sizing: border-box;
  }

  :deep(.el-dialog) {
    margin-top: 180px;
  }

  :deep(.el-dialog .el-dialog__body) {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .avatar-uploader .avatar {
    width: 7rem;
    height: 7rem;
    display: block;
  }

  :deep(.avatar-uploader .el-upload) {
    width: 7rem;
    height: 7rem;
@@ -355,10 +495,12 @@
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }

  :deep(.el-upload-list__item) {
    width: 7rem;
    height: 7rem;
  }

  .avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
  }