clay : 简单修改完成

# Conflicts:
#	flowable-engine-web/src/components/common/Comment.vue
#	flowable-engine-web/src/views/workspace/DisposalTask.vue

flowable-engine-web/package-lock.json

@@ -1824,16 +1824,6 @@
           "integrity": "sha1-4a1IbmxUUBY0xsOXxcEh2qODYHw=",
           "dev": true
         },
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
         "cacache": {
           "version": "13.0.1",
           "resolved": "https://registry.npm.taobao.org/cacache/download/cacache-13.0.1.tgz?cache=0&sync_timestamp=1594428108619&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcacache%2Fdownload%2Fcacache-13.0.1.tgz",
@@ -1860,34 +1850,6 @@
             "unique-filename": "^1.1.1"
           }
         },
-        "chalk": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true,
-          "optional": true
-        },
         "find-cache-dir": {
           "version": "3.3.1",
           "resolved": "https://registry.npm.taobao.org/find-cache-dir/download/find-cache-dir-3.3.1.tgz",
@@ -1909,25 +1871,6 @@
             "path-exists": "^4.0.0"
           }
         },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
-        "loader-utils": {
-          "version": "2.0.4",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
-          "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
         "locate-path": {
           "version": "5.0.0",
           "resolved": "https://registry.npm.taobao.org/locate-path/download/locate-path-5.0.0.tgz",
@@ -1992,16 +1935,6 @@
             "minipass": "^3.1.1"
           }
         },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        },
         "terser-webpack-plugin": {
           "version": "2.3.8",
           "resolved": "https://registry.npm.taobao.org/terser-webpack-plugin/download/terser-webpack-plugin-2.3.8.tgz?cache=0&sync_timestamp=1597229595508&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fterser-webpack-plugin%2Fdownload%2Fterser-webpack-plugin-2.3.8.tgz",
@@ -2018,18 +1951,6 @@
             "terser": "^4.6.12",
             "webpack-sources": "^1.4.3"
           }
-        },
-        "vue-loader-v16": {
-          "version": "npm:vue-loader@16.8.3",
-          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
-          "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "chalk": "^4.1.0",
-            "hash-sum": "^2.0.0",
-            "loader-utils": "^2.0.0"
-          }
         }
       }
     },
@@ -12142,6 +12063,87 @@
         }
       }
     },
+    "vue-loader-v16": {
+      "version": "npm:vue-loader@16.8.3",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
+      "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "hash-sum": "^2.0.0",
+        "loader-utils": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
+          "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "vue-router": {
       "version": "3.4.3",
       "resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-3.4.3.tgz?cache=0&sync_timestamp=1598983087864&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.4.3.tgz",

flowable-engine-web/src/api/task.js

@@ -22,6 +22,22 @@ export function completeTask(params) {
         data: params
     })
 }
+export function refuseTask(params) {
+    return request({
+        url: "/flowable/process/task/refuse",
+        method: "put",
+        data: params
+    })
+}
+
+export function rollBackTask(params) {
+    return request({
+        url: "/flowable/process/task/rollback",
+        method: "put",
+        data: params
+    })
+}
+
 export function addComment(params) {
     return request({
         url: "/flowable/process/task/comment",

flowable-engine-web/src/components/common/Comment.vue

@@ -1,21 +1,22 @@
 <template>
-  <w-dialog :border="false" closeFree width="500px" :title="title" v-model="visible" @ok="selectConfirm()">
+  <w-dialog :border="false" closeFree width="500px" :title="title" v-model="visible" :click-close="true"
-<!--    <TextareaAndUpload ref="upload" :placeholder="placeholder" :image-size="imageSize" :attachment-max-size="attachmentMaxSize"></TextareaAndUpload>-->
+            @ok="selectConfirm()">
     <!--显示转签弹出框-->
-    <div v-if="showTransfer" style="margin-bottom: 10px">
+    <div v-if="type === 3" style="margin-bottom: 10px">
       <span>转交给谁：</span>
       <el-button size="mini" icon="el-icon-user">选择人员</el-button>
     </div>
     <!--显示退回节点弹出框-->
-    <div v-if="showBackNode" style="margin-bottom: 10px">
+    <div v-if="type === 4" style="margin-bottom: 10px">
       <span>回退节点：</span>
-      <el-select v-model="select" slot="prepend" placeholder="选择要回退到的节点">
+      <el-select v-if="userTaskOption.length >0 " v-model="backNode" slot="prepend" placeholder="选择要回退到的节点">
-        <!--        <el-option label="餐厅名" value="1"></el-option>-->
+        <el-option v-for="(option,index) in userTaskOption" :key="index"
+                   :label="option.label" :value="option.value"/>
       </el-select>
-      <span style="margin-left: 10px;color: rgb(140, 140, 140);">暂无可回退节点</span>
+      <span v-if="userTaskOption.length <=0 " style="margin-left: 10px;color: rgb(140, 140, 140);">暂无可回退节点</span>
     </div>
     <!--显示增加审批人弹出框-->
-    <div v-if="addApproval" style="margin-bottom: 10px">
+    <div v-if="type === 5" style="margin-bottom: 10px">
       <span>给谁加签：</span>
       <el-button size="mini" icon="el-icon-user">选择人员</el-button>
     </div>
@@ -25,7 +26,7 @@
           :rows="4"
           maxlength="255"
           show-word-limit
-          :placeholder="placeholder"
+          placeholder="评论内容"
           v-model="context">
       </el-input>
     </div>
@@ -62,8 +63,7 @@
                :headers="headers"
                :auto-upload="true"
                :on-success="handleAttachmentUploadSuccess"
-               :before-upload="beforeAttachmentUpload"
+               :before-upload="beforeAttachmentUpload">
-    >
       <el-button size="small" round>
         <i class="el-icon-paperclip"></i>
         <span>选择文件</span>
@@ -78,14 +78,8 @@ import {deleteFile} from "@/api/common";
 import {getBaseUrl} from "../../api/request";
 
 export default {
-  name: "TextareaAndUpload",
+  name: "Comment",
   props: {
-    value: {
-      type: Array,
-      default: () => {
-        return [];
-      }
-    },
     title: {
       type: String,
       default: '添加评论'
@@ -98,6 +92,10 @@ export default {
       type: Number,
       default: 5
     },
+    type: {
+      type: Number,
+      default: 1
+    },
     attachmentMaxSize: {
       type: Number,
       default: 100
@@ -109,6 +107,14 @@ export default {
     },
     attachmentTip() {
       return this.attachmentMaxSize > 0 ? `| 单个附件不超过${this.attachmentMaxSize}MB` : "";
+    },
+    userTaskOption() {
+      let optionList = this.$store.state.userTaskOption;
+      if (optionList) {
+        return optionList
+      } else {
+        return []
+      }
     }
   },
   data() {
@@ -123,53 +129,12 @@ export default {
         authorization: localStorage.getItem("token")
       },
       context: null,
-      showTransfer:false,
+      backNode: null,
-      showBackNode:false,
-      addApproval:false
     };
   },
   methods: {
-    //显示评论弹出框
+    show() {
-    showComment() {
       this.visible = true
-      this.showTransfer=false
-      this.showBackNode=false
-    },
-    //显示转签弹出框
-    showTransferBox(){
-      this.visible = true
-      this.showTransfer=true
-      this.showBackNode=false
-      this.addApproval=false
-      this.title="转交给其他人审批"
-      this.placeholder="转交意见"
-    },
-    //显示退回节点弹出框
-    showBackNodeBox(){
-      this.visible = true
-      this.showTransfer=false
-      this.showBackNode=true
-      this.addApproval=false
-      this.title="退回到之前节点"
-      this.placeholder="退回意见"
-    },
-    //显示增加审批人弹出框
-    showAddApprovalBox(){
-      this.visible = true
-      this.showTransfer=false
-      this.showBackNode=false
-      this.addApproval=true
-      this.title="后方增加审批人"
-      this.placeholder="加签意见"
-    },
-    //显示撤销当前流程弹出框
-    showRevocationBox(){
-      this.visible = true
-      this.showTransfer=false
-      this.showBackNode=false
-      this.addApproval=false
-      this.title="撤销当前流程"
-      this.placeholder="撤销原因"
     },
     handleChange(file, imageList) {
       this.imageList = imageList.slice(-3);
@@ -238,13 +203,11 @@ export default {
           url: image.url
         })
       })
-
       let data = {
         context: this.context,
         attachments: fileList
       }
-      console.log(this.attachmentList, this.imageList)
+      this.$emit("ok", data, this.type)
-      this.$emit("ok", data)
       this.visible = false;
     }
   }
@@ -256,9 +219,11 @@ export default {
   height: 32px;
   line-height: 32px;
 }
+
 /deep/ .el-select .el-input .el-select__caret {
   line-height: 32px;
 }
+
 /deep/ .el-upload--picture-card {
   width: 65px;
   height: 65px;

flowable-engine-web/src/views/common/form/components/ImageUpload.vue

@@ -38,7 +38,11 @@
       </template>
       <template v-else-if="perm === 'R'">
         <div v-for="(item , index) in _value" :key="index">
-          <img :src="item.url" alt="" style="width: 65px;height: 65px">
+          <el-image
+              style="width: 100px; height: 100px"
+              :src="item.url"
+              :preview-src-list="[item.url]">
+          </el-image>
         </div>
       </template>
     </template>

flowable-engine-web/src/views/workspace/DisposalTask.vue

@@ -45,15 +45,15 @@
         <div class="top">
           <div class="top_left">
             <el-avatar size="large" :src="avatar"></el-avatar>
-            <span style="text-align: center;color: #19191a;font-size: 14px;">Clay</span>
+            <span style="text-align: center;color: #19191a;font-size: 14px;">{{ selectTask.initiatorName }}</span>
           </div>
           <div class="top_right">
             <div style="margin-bottom: 12px">
-               <span style="font-size: 15px;margin-right: 15px">财务</span>
+              <span style="font-size: 15px;margin-right: 15px">{{ selectTask.processName }}</span>
               <el-tag style="font-size: 12px" size="mini">进行中</el-tag>
             </div>
             <div>
-              <span style="color: rgb(108, 108, 108);" >编号: d69e9582-873f-11ed-b0e7-fa28000d2c27</span>
+              <span style="color: rgb(108, 108, 108);">编号: {{ selectTask.taskId }}</span>
             </div>
           </div>
         </div>
@@ -63,29 +63,36 @@
         <!--        <process-diagram-viewer/>-->
         <div style="height: 15px;background:#f5f5f5;"></div>
         <footer class="footer">
-          <div class="footer_comment" @click="$refs.comment.showComment()">
+          <div class="footer_comment" @click="showCommentBox">
             <i class="el-icon-chat-line-round" style="font-size: 18px;"></i>
             <span style="font-size: 12px;">评论</span>
           </div>
+<!--          <process-diagram-viewer/>-->
           <div style="margin-right: 20px;">
             <el-dropdown>
               <span class="el-dropdown-link" style="color: #2a99ff;cursor: pointer">
                 更多<i class="el-icon-arrow-down el-icon--right"></i>
               </span>
               <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item icon="el-icon-s-custom" @click.native="$refs.comment.showTransferBox()">转交</el-dropdown-item>
+                <el-dropdown-item icon="el-icon-s-custom" @click.native="showTransferBox()">转交</el-dropdown-item>
-                <el-dropdown-item icon="el-icon-s-release" @click.native="$refs.comment.showBackNodeBox()">退回</el-dropdown-item>
+                <el-dropdown-item icon="el-icon-s-release" @click.native="showBackNodeBox()">退回</el-dropdown-item>
-                <el-dropdown-item icon="el-icon-s-check" @click.native="$refs.comment.showAddApprovalBox()">加签</el-dropdown-item>
+                <el-dropdown-item icon="el-icon-s-check" @click.native="showAddApprovalBox()">加签</el-dropdown-item>
-                <el-dropdown-item icon="el-icon-refresh-left"  @click.native="$refs.comment.showRevocationBox()">撤销</el-dropdown-item>
+                <el-dropdown-item icon="el-icon-refresh-left"  @click.native="showRevocationBox()">撤销</el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
-            <el-button type="danger" size="mini" plain round style="margin-left: 20px">拒绝</el-button>
+            <el-button type="danger" size="mini" plain round style="margin-left: 20px"
+                       @click="showRefuseBox()">拒绝
+            </el-button>
             <el-button type="primary" size="mini" round @click="submitTask()">同意</el-button>
           </div>
         </footer>
       </div>
     </el-drawer>
-    <comment ref="comment" :max-size="5" :attachment-max-size="10" @ok="commentConfirm"/>
+    <comment ref="comment"
+             :title="commentInfo.title"
+             :type="commentInfo.type"
+             :max-size="5"
+             :attachment-max-size="20" @ok="commentConfirm"/>
   </div>
 </template>
 
@@ -93,7 +100,7 @@
 import Comment from "../../components/common/Comment";
 import FormRenderView from "@/views/common/form/FormRender";
 import ProcessDiagramViewer from "../admin/layout/ProcessDiagramViewer";
-import {addComment, completeTask, getTaskInfo, getTaskList} from "@/api/task";
+import {addComment, completeTask, getTaskInfo, getTaskList, refuseTask,rollBackTask} from "@/api/task";
 
 export default {
   name: "DisposalTask",
@@ -103,6 +110,10 @@ export default {
       approveOpen: false,
       selectTask: {},
       tableData: [],
+      commentInfo: {
+        title: null,
+        type: null, //1 添加评论 2 拒绝
+      },
       loading: false,
       taskData: {
         formData: {},
@@ -150,6 +161,7 @@ export default {
         that.$store.state.runningList = that.taskData.runningList;
         that.$store.state.endList = that.taskData.endList;
         that.$store.state.noTakeList = that.taskData.noTakeList;
+        that.$store.state.userTaskOption = that.taskData.userTaskOption;
         this.loading = false;
       });
     },
@@ -164,7 +176,101 @@ export default {
         this.$message.success(res.msg);
       });
     },
-    commentConfirm(data) {
+    showCommentBox() {
+      this.commentInfo = {
+        title: "添加评论",
+        type: 1
+      }
+      this.commentShow()
+    },
+    showRefuseBox() {
+      this.commentInfo = {
+        title: "拒绝任务",
+        type: 2
+      }
+      this.commentShow()
+    },
+    showTransferBox() {
+      this.commentInfo = {
+        title: "转交给其他人审批",
+        type: 3
+      }
+      this.commentShow()
+    },
+    showBackNodeBox() {
+      this.commentInfo = {
+        title: "退回到之前节点",
+        type: 4
+      }
+      this.commentShow()
+    },
+    showAddApprovalBox() {
+      this.commentInfo = {
+        title: "加签",
+        type: 5
+      }
+      this.commentShow()
+    },
+    showRevocationBox() {
+      this.commentInfo = {
+        title: "撤销当前流程",
+        type: 6
+      }
+      this.commentShow()
+    },
+    commentShow() {
+      this.$refs.comment.show()
+    },
+    /**
+     * 拒绝提交
+     * @param data
+     */
+    submitRefuse(data) {
+      let params = {
+        taskId: this.selectTask.taskId,
+        comment: data
+      };
+      refuseTask(params).then(res => {
+        this.approveOpen = false;
+        this.getList();
+        this.$message.success(res.msg);
+      })
+    },
+    /**
+     * 评论回调
+     * @param data
+     * @param type
+     */
+    commentConfirm(data, type) {
+      switch (type) {
+        case 1:
+          this.submitComment(data);
+          break;
+        case 2:
+          this.submitRollBack(data);
+          break;
+        case 3:
+          this.submitRefuse(data);
+          break;
+        default :
+          break;
+      }
+    },
+    submitRollBack(data){
+      let params = {
+        taskId: this.selectTask.taskId,
+        rollBackId: data.rollBackId,
+        comment: data,
+      };
+      rollBackTask(params).then(res=>{
+        this.$message.success(res.msg);
+      })
+    },
+    /**
+     * 提交评论
+     * @param data
+     */
+    submitComment(data) {
       this.$set(data, "taskId", this.selectTask.taskId);
       addComment(data).then(res => {
         this.$message.success(res.msg);
@@ -178,12 +284,14 @@ export default {
 .top {
   padding: 0 10px 10px 10px;
   display: flex;
+
   .top_left {
     display: flex;
     flex-direction: column;
     width: 50px;
     align-items: center;
   }
+
   .top_right {
     display: flex;
     flex-direction: column;
@@ -220,4 +328,8 @@ export default {
     top: -5px !important;
   }
 }
+
+.el-dropdown-link, .footer_comment {
+  cursor: pointer;
+}
 </style>