最新代码提交

pengwei

2025-03-20 2591e298a3fd1332ad0ca33059f6ba0b7d426f51

 ÏîÄ¿´úÂë/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://192.168.0.80:5000' + 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"
@@ -49,7 +60,7 @@
          </el-col>
          <el-col :span="3"
            ><el-form-item label="用户分组:">
              <span>维保部</span>
              <span>{{ userInfo.roleName }}</span>
            </el-form-item></el-col
          >
        </el-row>
@@ -66,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>
@@ -103,7 +114,7 @@
              </template>
              <el-input
                size="small"
                v-model="form.userName"
                v-model="form.usertruename"
                placeholder="请输入"
                style="width: 18.375rem"
              />
@@ -124,7 +135,7 @@
                >
              </template>
              <el-input
                v-model="form.phoneNo"
                v-model="form.phone"
                size="small"
                placeholder="请输入"
                style="width: 18.375rem"
@@ -137,24 +148,32 @@
              <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"
            :limit="3"
            :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>
@@ -175,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>
@@ -256,25 +279,41 @@
        </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 } from "@/api/user";
import {
  GetUserInfo,
  UpdatePassword,
  UpdateUser,
  Upuserbase,
} from "@/api/user";
import { ElMessage } from "element-plus";
const formInline = reactive({
  user: "",
  region: "",
  date: "",
});
const form = ref({});
const newPwd = ref("");
const onSubmit = () => {
  // UpdateUser().then((res) => {});
  console.log(form.value);

  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" }],
@@ -301,23 +340,62 @@
  });
};

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

GetUserInfo({}).then((res) => {
  userInfo.value = res.data;
  form.value = res.data;
  console.log(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%;
@@ -340,6 +418,7 @@
      height: 6.25rem;
      text-align: center;
    }

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

            span {
              font-size: 0.875rem;
            }
@@ -355,6 +435,7 @@
      }
    }
  }

  .mation {
    flex: 1;
    margin-top: 1.25rem;
@@ -362,19 +443,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;
@@ -385,10 +470,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);
  }