用户信息

@@ -2,32 +2,45 @@
   <div class="from-clues">
     <!-- 表单部分 -->
     <div class="from-clues-header">
-      <el-form :model="ruleForm" label-width="80px">
+      <el-form :model="ruleForm" label-width="100px">
         <el-row>
-          <el-col :span="5">
-            <el-form-item label="电子签名">
-              <el-input v-model="ruleForm.dzqm"></el-input>
+          <el-col :span="6">
+            <el-form-item label="用户名称：">
+              {{ruleForm.name}}
             </el-form-item>
           </el-col>
-          <el-col :span="19" class="btnColRight">
-            <el-form-item>
-              <el-button type="primary" native-type="submit">查询</el-button>
+          <el-col :span="6">
+            <el-form-item label="组织机构：">
+              {{ruleForm.organizationName}}
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="部门：">
+              {{ruleForm.departmentName}}
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="签名路径：">
+              <img :src="ruleForm.dzqmurl" class="signature-image">
             </el-form-item>
           </el-col>
         </el-row>
       </el-form>
     </div>
+
     <el-upload
       class="upload-demo"
       action=""
       :limit="1"
       multiple
+      :key="key"
       :auto-upload="false"
-      accept=".jpg, .png"
+      accept=".jpg, .png, .jpeg"
       :on-change="handleChange"
       :before-upload="beforeUpload"
-      :file-list="fileList"
-      list-type="picture"
+      :show-file-list="false"
       drag>
       <i class="el-icon-upload"></i>
       <div class="el-upload__text">将图片拖到此处，或<em>点击上传</em></div>
@@ -38,36 +51,51 @@
 </template>
 <script>
   import { dzqmUpload } from '@/api/dzqm'
+  import { getUserInfo } from '@/api/user'
   export default {
     name: "dzqm",
     data () {
       return {
-        ruleForm: {
-          dzqm: ""
-        },
-        fileList: [], // 已上传文件列表
+        ruleForm: {},
+        key: 0,
       }
     },
+    mounted () {
+      this.getUserInfo()
+    },
     methods: {
+      async getUserInfo () {
+        let res = await getUserInfo()
+        this.ruleForm = res.result
+      },
       beforeUpload (file) {
-        // 上传文件之前的钩子，返回false则停止上传
-        const isJPGorPNG = file.type === 'image/jpeg' || file.type === 'image/png';
-        const isLt2M = file.size / 1024 / 1024 < 5;
-        if (!isJPGorPNG) {
-          this.$message.error('上传图片只能是 JPG/PNG 格式!');
-          return false;
-        }
-        if (!isLt2M) {
-          this.$message.error('上传图片大小不能超过 5MB!');
-          return false;
+        this.files = file;
+        const allowedExtensions = ['jpg', 'jpeg', 'png'];
+        const maxFileSizeMB = 5;
+
+        const extension = allowedExtensions.includes(file.name.split('.').pop().toLowerCase());
+        const isLt5M = file.size / 1024 / 1024 < maxFileSizeMB;
+
+        if (!extension) {
+          this.$message.warning('上传模板只能是 jpg、jpeg、png 格式!');
+        } else if (!isLt5M) {
+          this.$message.warning(`上传模板大小不能超过 ${maxFileSizeMB}MB!`);
         }
-        return true;
+
+        return extension && isLt5M;
       },
       async handleChange (file) {
         var formdata = new FormData();
         formdata.append("file", file.raw);
         dzqmUpload(formdata).then(res => {
-          console.log(res);
+          if (res.code == 200) {
+            this.$message({
+              message: '上传成功！',
+              type: 'success'
+            })
+            this.key++
+            this.ruleForm.dzqmurl = res.message
+          }
         })
       }
     }
@@ -75,5 +103,10 @@
   </script>
 <style scoped lang="scss">
   @import "~@/styles/public.scss";
+  .signature-image {
+    width: 100%;
+    max-height: 360px;
+    object-fit: contain;
+  }
 </style>
     
\ No newline at end of file