pc端添加我的签字管理

src/main/resources/views/layouts/v4/baseLayout.html

@@ -478,7 +478,7 @@
             align-items: center;
             gap: 24px;
             height: 100%;
-            max-width: 310px;
+            max-width: 400px;
             flex-shrink: 0;
         }
 
@@ -559,6 +559,13 @@
             white-space: nowrap;
         }
 
+        .v4-sign-name {
+            font-weight: 500;
+            color: #ffffff;
+            white-space: nowrap;
+            margin-right: 20px;
+        }
+
         .v4-about-name {
             font-weight: 500;
             color: #ffffff;
@@ -687,14 +694,32 @@
             <!-- <i class="fa fa-angle-down"></i> -->
         </div>
         <div id="aboutNameApp">
+            <a class="v4-sign-name" href="javascript:;" @click="showSignDialog">
+                我的签字
+            </a>
             <a class="v4-about-name" href="javascript:;" @click="showAbout">
                 关于
             </a>
+            <el-dialog
+                title="我的签字"
+                :visible.sync="signDialogVisible"
+                width="520px"
+                append-to-body
+                :close-on-click-modal="false"
+            >
+                <pc-signature v-if="signDialogVisible" v-model="signForm.signature"></pc-signature>
+                <span slot="footer" class="dialog-footer">
+                    <el-button @click="signDialogVisible = false">取消</el-button>
+                    <el-button type="primary" :loading="signDialogLoading" @click="submitSignature">确定</el-button>
+                </span>
+            </el-dialog>
         </div>
         <a class="v4-logout" href="/platform/login/logout">
             <i class="fa fa-sign-out"></i>
             退出
         </a>
+
+
     </div>
 </header>
 <div style="height: 64px"></div>
@@ -721,6 +746,15 @@
 <script>
     new Vue({
         el: "#aboutNameApp",  // ✅ 挂载到外层
+        data() {
+            return {
+                signDialogVisible: false,
+                signDialogLoading: false,
+                signForm: {
+                    signature: ""
+                }
+            }
+        },
         methods: {
             showAbout() {
                 this.$alert("系统名称：智慧工会<br>软件版本：V2.0<br>技术支持：武汉地大三思科技有限公司", "关于系统", {
@@ -730,6 +764,51 @@
 
                     }
                 })
+            },
+            showSignDialog() {
+                this.signForm.signature = ""
+                this.signDialogVisible = true
+            },
+            // `pc-signature` 返回的是图片地址，提交到 update 接口前需要转换成 `file` 字段对应的二进制数据。
+            buildSignatureFormData(signatureUrl) {
+                return axios.get(signatureUrl, {
+                    responseType: "blob"
+                }).then((response) => {
+                    const formData = new FormData()
+                    formData.append("file", response.data, "signature.png")
+                    return formData
+                })
+            },
+            // 弹框确认后统一走签字更新接口，保证与 `SysSignatureController.update` 的入参保持一致。
+            submitSignature() {
+                if (!this.signForm.signature) {
+                    this.$message.warning("请先完成签字")
+                    return
+                }
+                this.signDialogLoading = true
+                this.buildSignatureFormData(this.signForm.signature)
+                    .then((formData) => {
+                        return axios.post("/platform/signature/update", formData, {
+                            headers: {
+                                "Content-Type": "multipart/form-data"
+                            }
+                        })
+                    })
+                    .then((response) => {
+                        const res = response.data
+                        if (res.code === 0) {
+                            this.$message.success(res.msg || "签字更新成功")
+                            this.signDialogVisible = false
+                            return
+                        }
+                        this.$message.error(res.msg || "签字更新失败")
+                    })
+                    .catch(() => {
+                        this.$message.error("签字更新失败，请稍后重试")
+                    })
+                    .finally(() => {
+                        this.signDialogLoading = false
+                    })
             }
         }
     })