doway-coms 2.2.21 → 2.2.23

package/packages/LeaveAMessage/src/index.vue

@@ -1,598 +1,598 @@
-<template>
-  <div>
-    <div class="odoo" @click="showOdoo = !showOdoo">
-      <a-icon type="snippets" style="font-size: 30px; color: #fff" />
-    </div>
-    <vxe-modal
-      v-model="showOdoo"
-      :zIndex="1000"
-      :showHeader="false"
-      :mask="false"
-      :mask-closable="true"
-      :position="{
-        left: '72%',
-        top: '15%'
-      }"
-      destroy-on-close
-    >
-      <div class="liu-yan" style="background-color: #eaeef1">
-        <div class="input-box">
-          <a-tabs default-active-key="msg" @change="tabChange">
-            <a-tab-pane key="msg" tab="发送消息">
-              <!-- <div style="display:flex">
-                <div
-                  style="display:flex;justify-content: center;align-items: center;margin-bottom:5px;margin-left:5px;flex:1"
-                >
-                  <div style="flex:1">发送给：</div>
-                  <a-select
-                    v-model:value="sendUser"
-                    show-search
-                    mode="multiple"
-                    style="width: 85%;flex:3"
-                    :options="userList"
-                    size="small"
-                    :filter-option="selectPinYin"
-                  ></a-select>
-                </div>
-              </div>
-              <a-textarea placeholder="写些什么..." v-model:value="remark" />-->
-
-              <a-mentions
-                placeholder="写些什么..."
-                split=";"
-                v-model:value="remark"
-                rows="3"
-              >
-                <a-mentions-option
-                  v-for="(item, index) in userList"
-                  :key="index"
-                  :value="item.value"
-                >{{ item.label }}</a-mentions-option>
-              </a-mentions>
-              <!-- <a-upload
-            list-type="picture"
-            :headers="uploadHeaders"
-            :action="uploadData.picAction"
-            :data="uploadData"
-            :before-upload="beforeAvatarUpload"
-            @change="handleAvatarSuccess"
-            :file-list="fileList"
-            style="padding-top: 10px"
-          >
-            <a-icon style="font-size: 16px; cursor: pointer; margin: 5px 10px" type="paper-clip" />
-              </a-upload>-->
-              <div style="display: flex; justify-content: flex-end;margin-top:5px">
-                <a-button @click="sendMsg" :disabled="remark ===''">发送</a-button>
-              </div>
-            </a-tab-pane>
-            <a-tab-pane key="remark" tab="记录备注">
-              <a-textarea placeholder="写些什么..." v-model:value="remark" />
-              <a-upload
-                list-type="picture"
-                :headers="uploadHeaders"
-                :action="uploadData.picAction"
-                :data="uploadData"
-                :before-upload="beforeAvatarUpload"
-                @change="handleAvatarSuccess"
-                :file-list="fileList"
-                style="padding-top: 10px"
-              >
-                <a-icon
-                  style="font-size: 16px; cursor: pointer; margin: 5px 10px"
-                  type="paper-clip"
-                />
-              </a-upload>
-              <div style="display: flex; justify-content: flex-end">
-                <a-button @click="addMsgRemark" :disabled="remark ===''">记录</a-button>
-              </div>
-            </a-tab-pane>
-          </a-tabs>
-        </div>
-        <div class="list" :style="{ height: moduleHeight - 215 + 'px' }">
-          <a-list
-            v-if="remarkData.length > 0"
-            item-layout="horizontal"
-            :data-source="remarkData"
-            style="box-shadow: 3px 3px 6px #cad1d7"
-          >
-            <a-list-item
-              slot="renderItem"
-              slot-scope="item"
-              :style="{
-            borderBottom: item.type === 'date' ? '0' : '1px solid #ddd',
-            backgroundColor: item.type === 'date' ? '#fff' : '#fff',
-          }"
-            >
-              <template v-if="item.type !== 'date'">
-                <a-popconfirm
-                  placement="topRight"
-                  title="确认删除当前备注吗？"
-                  ok-text="确认"
-                  cancel-text="取消"
-                  @confirm="delMsgRemark(item)"
-                >
-                  <div v-show="userId === item.createUserId" class="close-icon">
-                    <a-icon type="close" />
-                  </div>
-                </a-popconfirm>
-                <a-comment :author="item.createUserName" :avatar="item.avatar">
-                  <!-- <template slot="actions">
-              <span v-for="(action,index) in item.actions" :key="index">{{ action }}</span>
-                  </template>-->
-                  <template slot="content">
-                    <template v-if="item.receiver!==null">
-                      <div style="display:flex;flex-wrap: wrap;">
-                        <div
-                          v-for="(item,index) in item.atUser"
-                          :key="index"
-                          style="background-color:#eee;margin-right:3px"
-                        >@{{item}}</div>
-                      </div>
-                    </template>
-                    <div style="margin-bottom: 5px">{{ item.body }}</div>
-                    <div
-                      v-if="item.objectCommentAttachDtos.length > 0"
-                      style="display: flex; flex-wrap: wrap"
-                    >
-                      <div
-                        v-for="(item, index) in item.objectCommentAttachDtos"
-                        :key="index"
-                        class="msg-content"
-                        @click="downloadFile(item)"
-                      >
-                        <div class="download-icon">
-                          <a-icon type="vertical-align-bottom" style="font-size: 30px" />
-                        </div>
-                        <a-icon type="file-text" style="font-size: 25px; margin-right: 5px" />
-                        <span class="file-title">{{ item.attachName }}</span>
-                      </div>
-                    </div>
-                  </template>
-                  <a-tooltip slot="datetime" :title="item.createTime">
-                    <span>{{ item.fromNowTime }}</span>
-                  </a-tooltip>
-                </a-comment>
-              </template>
-              <template v-else>
-                <a-divider>{{ item.createTime }}</a-divider>
-              </template>
-            </a-list-item>
-          </a-list>
-          <div v-else></div>
-        </div>
-      </div>
-    </vxe-modal>
-  </div>
-</template>
-
-<script>
-import moment from "moment";
-import { notification } from "ant-design-vue";
-import {
-  attachGetAttachUrlApi,
-  readObjectCommentApi,
-  searchObjectCommentApi,
-  addObjectCommentApi,
-  deleteObjectCommentApi,
-  sendMsgApi,
-  userInfoSearchApi
-} from "../../utils/api";
-export default {
-  name: "LeaveAMessage",
-  props: {
-    topic: {
-      type: String
-    },
-    moduleHeight: {
-      type: Number
-    },
-    limitSize: {
-      // 限制上传大小
-      type: Number,
-      default: 5
-    },
-    limitType: {
-      // 限制上传类型
-      type: Array,
-      default: () => {
-        return [];
-      }
-    },
-    resId: {
-      type: String
-    },
-    picType: {
-      type: String,
-      default: "cust"
-    },
-    dataName: {
-      type: String
-    }
-    // formRow: {
-    //   type: Object,
-    //   default: () => {
-    //     return {};
-    //   },
-    // },
-  },
-  watch: {
-    resId: {
-      handler: function(newVal) {
-        this.uploadData.resId = newVal;
-      }
-    },
-    showOdoo(newVal, oldVal) {
-      if (newVal) {
-        this.getUserInfo();
-        this.getMsgRemarkData();
-      }
-    },
-    immediate: true
-  },
-  created() {
-    let viewDatas = this.$store.getters.moduleViewInfo[
-      this.$route.meta.moduleCode
-    ];
-    this.objectName = viewDatas.objectName;
-    this.userId = this.$store.getters.userId;
-  },
-  mounted() {
-    this.uploadHeaders.Authorization = `Bearer ${this.$store.getters.token}`;
-    this.uploadData.picType = this.picType;
-    this.uploadData.resId = this.resId;
-    this.internalServiceUrl = attachGetAttachUrlApi();
-    this.uploadData.picAction = this.internalServiceUrl + "/UploadAttach";
-  },
-  data() {
-    return {
-      showOdoo: false,
-      userId: null,
-      fileList: [],
-      remarkData: [],
-      uploadData: {
-        picType: "",
-        picAction: "",
-        resId: ""
-      },
-      uploadHeaders: {
-        Authorization: null
-      },
-      sendUser: [],
-      userList: [],
-      remark: "",
-      attachment: [],
-      objectName: ""
-    };
-  },
-  methods: {
-    beforeAvatarUpload(file) {
-      // const isPic = file.type === 'image/jpeg' || file.type === 'image/png'
-      if (file.size / 1024 / 1024 > this.limitSize) {
-        notification.error({
-          message: "错误",
-          description: "上传图片大小不能超过 " + this.limitSize + "MB!"
-        });
-      }
-      if (this.limitType.length > 0 && !this.limitType[file.type]) {
-        notification.error({
-          message: "错误",
-          description: "上传附件格式错误!"
-        });
-      }
-      return true;
-    },
-    handleAvatarSuccess(info) {
-      this.fileList = info.fileList;
-      if (info.file.status == "done") {
-        this.attachment.push(info.file.response.content.id);
-        // this.$emit("add", this.dataName, info.file.response.content);
-      }
-    },
-    getMsgRemarkData() {
-      let postData = {
-        begin: 1,
-        size: 0,
-        expression: {
-          expressions: [
-            {
-              field: "objectName",
-              operator: "EQ",
-              value: this.objectName
-            },
-            {
-              field: "resId",
-              operator: "EQ",
-              value: this.resId
-            }
-          ],
-          operator: "and"
-        },
-        sorts: [["createTime", "desc"]]
-      };
-      searchObjectCommentApi(postData).then(res => {
-        let tmp = [];
-        res.content.forEach(item => {
-          if (item.receiver !== null) {
-            item["atUser"] = [];
-            let atUser = item.receiver.split(",");
-            this.userList.forEach(uitem => {
-              if (atUser.indexOf(uitem.code) > -1) {
-                item.atUser.push(uitem.label);
-              }
-            });
-          }
-
-          let flag = tmp.findIndex(titem => {
-            return (
-              titem.createTime ===
-              moment(item.createTime).format("YYYY年MM月DD")
-            );
-          });
-          if (flag < 0) {
-            tmp.push({
-              type: "date",
-              createTime: moment(item.createTime).format("YYYY年MM月DD")
-            });
-          }
-          item["avatar"] =
-            "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png";
-          item["fromNowTime"] = moment(item.createTime).fromNow();
-          tmp.push(item);
-        });
-        this.remarkData = tmp;
-      });
-    },
-    downloadFile(val) {
-      window.open(
-        this.internalServiceUrl +
-          "/DownAttachFile/" +
-          val.msgAttachId +
-          `?accessToken=${this.$store.getters.token}`
-      );
-    },
-    addMsgRemark() {
-      if (this.remark === "" && this.attachment.length < 1) {
-        return;
-      } else {
-        let postData = {
-          resId: this.resId,
-          objectName: this.objectName,
-          body: this.remark,
-          objectCommentAttachIds: this.attachment
-        };
-        addObjectCommentApi(postData).then(res => {
-          this.remark = "";
-          this.attachment = [];
-          this.fileList = [];
-          this.getMsgRemarkData();
-        });
-      }
-    },
-    delMsgRemark(val) {
-      deleteObjectCommentApi({
-        keyIds: [val.id]
-      }).then(res => {
-        this.getMsgRemarkData();
-      });
-    },
-    getUserInfo() {
-      userInfoSearchApi().then(res => {
-        this.userList = [];
-        res.content.forEach(item => {
-          this.userList.push({
-            value: item.userName,
-            label: item.name,
-            code: item.id
-          });
-        });
-      });
-    },
-    sendMsg() {
-      let reg = /@(.*?);/;
-      let result;
-      let arr = [];
-      while ((result = reg.exec(this.remark))) {
-        arr.push(result[1]);
-        this.remark = this.remark.replace(/@(.*?);/, "");
-      }
-
-      let receiver = [];
-      arr.forEach(item => {
-        this.userList.forEach(uitem => {
-          if (uitem.value === item) {
-            receiver.push(uitem.code);
-          }
-        });
-      });
-      receiver = receiver.join(",");
-      let postData = {
-        content: this.remark,
-        receiver: receiver,
-        subject: this.topic,
-        objectName: this.objectName,
-        resId: this.resId
-      };
-      sendMsgApi(postData).then(res => {
-        this.remark = "";
-        this.sendUser = [];
-        this.getMsgRemarkData();
-      });
-    },
-    selectPinYin(input, option) {
-      if (input.charCodeAt() >= 32 && input.charCodeAt() <= 126) {
-        return (
-          option.componentOptions.children[0].text
-            .toLowerCase()
-            .indexOf(input.toLowerCase()) >= 0
-        );
-      } else {
-        return (
-          option.componentOptions.children[0].text
-            .toLowerCase()
-            .indexOf(input.toLowerCase()) >= 0
-        );
-      }
-    },
-    tabChange(activeKey) {
-      this.remark = "";
-    }
-  }
-};
-</script>
-
-<style lang="less" scoped>
-::v-deep(.ant-upload-list-picture .ant-upload-list-item) {
-  max-width: 185px;
-  min-width: 185px;
-  margin-right: 10px;
-}
-::v-deep(.ant-upload-list-picture .ant-upload-list-item-name) {
-  padding-right: 24px !important;
-}
-::v-deep(.ant-upload-list) {
-  display: flex;
-  overflow-x: auto;
-  margin-bottom: 10px;
-  // flex-wrap: wrap;
-}
-::v-deep(.ant-upload-list::-webkit-scrollbar) {
-  width: 5px;
-  height: 5px;
-  z-index: 10;
-}
-::v-deep(.ant-upload-list::-webkit-scrollbar-track) {
-  background-color: #ffffff;
-  z-index: 10;
-}
-/*滚动条里面的小方块，能向上向下移动*/
-::v-deep(.ant-upload-list::-webkit-scrollbar-thumb) {
-  background-color: #bfbfbf;
-  border-radius: 5px;
-  border: 1px solid #f1f1f1;
-  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-  z-index: 10;
-}
-::v-deep(.ant-upload-list::-webkit-scrollbar-thumb:hover) {
-  background-color: #a8a8a8;
-  z-index: 10;
-}
-::v-deep(.ant-upload-list::-webkit-scrollbar-thumb:active) {
-  background-color: #787878;
-  z-index: 10;
-}
-/*边角，即两个滚动条的交汇处*/
-::v-deep(.ant-upload-list::-webkit-scrollbar-corner) {
-  background-color: #ffffff;
-  z-index: 10;
-}
-
-::v-deep(.ant-list-item) {
-  padding: 12px 10px;
-  position: relative;
-}
-.list {
-  padding: 10px 15px;
-  padding-top: 0;
-  margin-top: 10px;
-  overflow: auto;
-  .close-icon {
-    position: absolute;
-    top: 30%;
-    right: 5%;
-    cursor: pointer;
-  }
-}
-/*滚动条整体部分*/
-.list::-webkit-scrollbar {
-  width: 5px;
-  height: 5px;
-  z-index: 10;
-}
-/*滚动条的轨道*/
-.list::-webkit-scrollbar-track {
-  background-color: #ffffff;
-  z-index: 10;
-}
-/*滚动条里面的小方块，能向上向下移动*/
-.list::-webkit-scrollbar-thumb {
-  background-color: #bfbfbf;
-  border-radius: 5px;
-  border: 1px solid #f1f1f1;
-  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-  z-index: 10;
-}
-.list::-webkit-scrollbar-thumb:hover {
-  background-color: #a8a8a8;
-  z-index: 10;
-}
-.list::-webkit-scrollbar-thumb:active {
-  background-color: #787878;
-  z-index: 10;
-}
-/*边角，即两个滚动条的交汇处*/
-.list::-webkit-scrollbar-corner {
-  background-color: #ffffff;
-  z-index: 10;
-}
-::v-deep .vxe-modal--wrapper .vxe-modal--content {
-  padding: 0;
-}
-.input-box {
-  background-color: #fff;
-  padding: 10px 10px 0;
-  min-height: 180px;
-  // max-height: 210px;
-}
-.msg-content {
-  box-sizing: border-box;
-  max-height: 40px;
-  min-height: 40px;
-  max-width: 140px;
-  min-width: 140px;
-  display: flex;
-  align-items: center;
-  border-bottom: 1px solid #ccc;
-  background: #eee;
-  border-radius: 5px;
-  padding: 0 10px;
-  margin-right: 8px;
-  margin-bottom: 8px;
-  cursor: pointer;
-  position: relative;
-}
-.download-icon {
-  position: absolute;
-  line-height: 50%;
-  left: 45%;
-  opacity: 0;
-}
-.msg-content:hover {
-  background: #ccc;
-}
-.msg-content:hover .download-icon {
-  opacity: 1;
-}
-.file-title {
-  overflow: hidden; //超出的文本隐藏
-  text-overflow: ellipsis; //溢出用省略号显示
-  white-space: nowrap; // 默认不换行；
-}
-
-.odoo {
-  position: fixed;
-  top: 40%;
-  right: 5px;
-  z-index: 100;
-  cursor: pointer;
-  width: 40px;
-  height: 40px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 5px;
-  background: #089def;
-}
-::v-deep .vxe-modal--wrapper .vxe-modal--content {
-  padding: 0;
-}
+<template>
+  <div>
+    <div class="odoo" @click="showOdoo = !showOdoo">
+      <a-icon type="snippets" style="font-size: 30px; color: #fff" />
+    </div>
+    <vxe-modal
+      v-model="showOdoo"
+      :zIndex="1000"
+      :showHeader="false"
+      :mask="false"
+      :mask-closable="true"
+      :position="{
+        left: '72%',
+        top: '15%'
+      }"
+      destroy-on-close
+    >
+      <div class="liu-yan" style="background-color: #eaeef1">
+        <div class="input-box">
+          <a-tabs default-active-key="msg" @change="tabChange">
+            <a-tab-pane key="msg" tab="发送消息">
+              <!-- <div style="display:flex">
+                <div
+                  style="display:flex;justify-content: center;align-items: center;margin-bottom:5px;margin-left:5px;flex:1"
+                >
+                  <div style="flex:1">发送给：</div>
+                  <a-select
+                    v-model:value="sendUser"
+                    show-search
+                    mode="multiple"
+                    style="width: 85%;flex:3"
+                    :options="userList"
+                    size="small"
+                    :filter-option="selectPinYin"
+                  ></a-select>
+                </div>
+              </div>
+              <a-textarea placeholder="写些什么..." v-model:value="remark" />-->
+
+              <a-mentions
+                placeholder="写些什么..."
+                split=";"
+                v-model:value="remark"
+                rows="3"
+              >
+                <a-mentions-option
+                  v-for="(item, index) in userList"
+                  :key="index"
+                  :value="item.value"
+                >{{ item.label }}</a-mentions-option>
+              </a-mentions>
+              <!-- <a-upload
+            list-type="picture"
+            :headers="uploadHeaders"
+            :action="uploadData.picAction"
+            :data="uploadData"
+            :before-upload="beforeAvatarUpload"
+            @change="handleAvatarSuccess"
+            :file-list="fileList"
+            style="padding-top: 10px"
+          >
+            <a-icon style="font-size: 16px; cursor: pointer; margin: 5px 10px" type="paper-clip" />
+              </a-upload>-->
+              <div style="display: flex; justify-content: flex-end;margin-top:5px">
+                <a-button @click="sendMsg" :disabled="remark ===''">发送</a-button>
+              </div>
+            </a-tab-pane>
+            <a-tab-pane key="remark" tab="记录备注">
+              <a-textarea placeholder="写些什么..." v-model:value="remark" />
+              <a-upload
+                list-type="picture"
+                :headers="uploadHeaders"
+                :action="uploadData.picAction"
+                :data="uploadData"
+                :before-upload="beforeAvatarUpload"
+                @change="handleAvatarSuccess"
+                :file-list="fileList"
+                style="padding-top: 10px"
+              >
+                <a-icon
+                  style="font-size: 16px; cursor: pointer; margin: 5px 10px"
+                  type="paper-clip"
+                />
+              </a-upload>
+              <div style="display: flex; justify-content: flex-end">
+                <a-button @click="addMsgRemark" :disabled="remark ===''">记录</a-button>
+              </div>
+            </a-tab-pane>
+          </a-tabs>
+        </div>
+        <div class="list" :style="{ height: moduleHeight - 215 + 'px' }">
+          <a-list
+            v-if="remarkData.length > 0"
+            item-layout="horizontal"
+            :data-source="remarkData"
+            style="box-shadow: 3px 3px 6px #cad1d7"
+          >
+            <a-list-item
+              slot="renderItem"
+              slot-scope="item"
+              :style="{
+            borderBottom: item.type === 'date' ? '0' : '1px solid #ddd',
+            backgroundColor: item.type === 'date' ? '#fff' : '#fff',
+          }"
+            >
+              <template v-if="item.type !== 'date'">
+                <a-popconfirm
+                  placement="topRight"
+                  title="确认删除当前备注吗？"
+                  ok-text="确认"
+                  cancel-text="取消"
+                  @confirm="delMsgRemark(item)"
+                >
+                  <div v-show="userId === item.createUserId" class="close-icon">
+                    <a-icon type="close" />
+                  </div>
+                </a-popconfirm>
+                <a-comment :author="item.createUserName" :avatar="item.avatar">
+                  <!-- <template slot="actions">
+              <span v-for="(action,index) in item.actions" :key="index">{{ action }}</span>
+                  </template>-->
+                  <template slot="content">
+                    <template v-if="item.receiver!==null">
+                      <div style="display:flex;flex-wrap: wrap;">
+                        <div
+                          v-for="(item,index) in item.atUser"
+                          :key="index"
+                          style="background-color:#eee;margin-right:3px"
+                        >@{{item}}</div>
+                      </div>
+                    </template>
+                    <div style="margin-bottom: 5px">{{ item.body }}</div>
+                    <div
+                      v-if="item.objectCommentAttachDtos.length > 0"
+                      style="display: flex; flex-wrap: wrap"
+                    >
+                      <div
+                        v-for="(item, index) in item.objectCommentAttachDtos"
+                        :key="index"
+                        class="msg-content"
+                        @click="downloadFile(item)"
+                      >
+                        <div class="download-icon">
+                          <a-icon type="vertical-align-bottom" style="font-size: 30px" />
+                        </div>
+                        <a-icon type="file-text" style="font-size: 25px; margin-right: 5px" />
+                        <span class="file-title">{{ item.attachName }}</span>
+                      </div>
+                    </div>
+                  </template>
+                  <a-tooltip slot="datetime" :title="item.createTime">
+                    <span>{{ item.fromNowTime }}</span>
+                  </a-tooltip>
+                </a-comment>
+              </template>
+              <template v-else>
+                <a-divider>{{ item.createTime }}</a-divider>
+              </template>
+            </a-list-item>
+          </a-list>
+          <div v-else></div>
+        </div>
+      </div>
+    </vxe-modal>
+  </div>
+</template>
+
+<script>
+import moment from "moment";
+import { notification } from "ant-design-vue";
+import {
+  attachGetAttachUrlApi,
+  readObjectCommentApi,
+  searchObjectCommentApi,
+  addObjectCommentApi,
+  deleteObjectCommentApi,
+  sendMsgApi,
+  userInfoSearchApi
+} from "../../utils/api";
+export default {
+  name: "LeaveAMessage",
+  props: {
+    topic: {
+      type: String
+    },
+    moduleHeight: {
+      type: Number
+    },
+    limitSize: {
+      // 限制上传大小
+      type: Number,
+      default: 5
+    },
+    limitType: {
+      // 限制上传类型
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    resId: {
+      type: String
+    },
+    picType: {
+      type: String,
+      default: "cust"
+    },
+    dataName: {
+      type: String
+    }
+    // formRow: {
+    //   type: Object,
+    //   default: () => {
+    //     return {};
+    //   },
+    // },
+  },
+  watch: {
+    resId: {
+      handler: function(newVal) {
+        this.uploadData.resId = newVal;
+      }
+    },
+    showOdoo(newVal, oldVal) {
+      if (newVal) {
+        this.getUserInfo();
+        this.getMsgRemarkData();
+      }
+    },
+    immediate: true
+  },
+  created() {
+    let viewDatas = this.$store.getters.moduleViewInfo[
+      this.$route.meta.moduleCode
+    ];
+    this.objectName = viewDatas.objectName;
+    this.userId = this.$store.getters.userId;
+  },
+  mounted() {
+    this.uploadHeaders.Authorization = `Bearer ${this.$store.getters.token}`;
+    this.uploadData.picType = this.picType;
+    this.uploadData.resId = this.resId;
+    this.internalServiceUrl = attachGetAttachUrlApi();
+    this.uploadData.picAction = this.internalServiceUrl + "/UploadAttach";
+  },
+  data() {
+    return {
+      showOdoo: false,
+      userId: null,
+      fileList: [],
+      remarkData: [],
+      uploadData: {
+        picType: "",
+        picAction: "",
+        resId: ""
+      },
+      uploadHeaders: {
+        Authorization: null
+      },
+      sendUser: [],
+      userList: [],
+      remark: "",
+      attachment: [],
+      objectName: ""
+    };
+  },
+  methods: {
+    beforeAvatarUpload(file) {
+      // const isPic = file.type === 'image/jpeg' || file.type === 'image/png'
+      if (file.size / 1024 / 1024 > this.limitSize) {
+        notification.error({
+          message: "错误",
+          description: "上传图片大小不能超过 " + this.limitSize + "MB!"
+        });
+      }
+      if (this.limitType.length > 0 && !this.limitType[file.type]) {
+        notification.error({
+          message: "错误",
+          description: "上传附件格式错误!"
+        });
+      }
+      return true;
+    },
+    handleAvatarSuccess(info) {
+      this.fileList = info.fileList;
+      if (info.file.status == "done") {
+        this.attachment.push(info.file.response.content.id);
+        // this.$emit("add", this.dataName, info.file.response.content);
+      }
+    },
+    getMsgRemarkData() {
+      let postData = {
+        begin: 1,
+        size: 0,
+        expression: {
+          expressions: [
+            {
+              field: "objectName",
+              operator: "EQ",
+              value: this.objectName
+            },
+            {
+              field: "resId",
+              operator: "EQ",
+              value: this.resId
+            }
+          ],
+          operator: "and"
+        },
+        sorts: [["createTime", "desc"]]
+      };
+      searchObjectCommentApi(postData).then(res => {
+        let tmp = [];
+        res.content.forEach(item => {
+          if (item.receiver !== null) {
+            item["atUser"] = [];
+            let atUser = item.receiver.split(",");
+            this.userList.forEach(uitem => {
+              if (atUser.indexOf(uitem.code) > -1) {
+                item.atUser.push(uitem.label);
+              }
+            });
+          }
+
+          let flag = tmp.findIndex(titem => {
+            return (
+              titem.createTime ===
+              moment(item.createTime).format("YYYY年MM月DD")
+            );
+          });
+          if (flag < 0) {
+            tmp.push({
+              type: "date",
+              createTime: moment(item.createTime).format("YYYY年MM月DD")
+            });
+          }
+          item["avatar"] =
+            "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png";
+          item["fromNowTime"] = moment(item.createTime).fromNow();
+          tmp.push(item);
+        });
+        this.remarkData = tmp;
+      });
+    },
+    downloadFile(val) {
+      window.open(
+        this.internalServiceUrl +
+          "/DownAttachFile/" +
+          val.msgAttachId +
+          `?accessToken=${this.$store.getters.token}`
+      );
+    },
+    addMsgRemark() {
+      if (this.remark === "" && this.attachment.length < 1) {
+        return;
+      } else {
+        let postData = {
+          resId: this.resId,
+          objectName: this.objectName,
+          body: this.remark,
+          objectCommentAttachIds: this.attachment
+        };
+        addObjectCommentApi(postData).then(res => {
+          this.remark = "";
+          this.attachment = [];
+          this.fileList = [];
+          this.getMsgRemarkData();
+        });
+      }
+    },
+    delMsgRemark(val) {
+      deleteObjectCommentApi({
+        keyIds: [val.id]
+      }).then(res => {
+        this.getMsgRemarkData();
+      });
+    },
+    getUserInfo() {
+      userInfoSearchApi().then(res => {
+        this.userList = [];
+        res.content.forEach(item => {
+          this.userList.push({
+            value: item.userName,
+            label: item.name,
+            code: item.id
+          });
+        });
+      });
+    },
+    sendMsg() {
+      let reg = /@(.*?);/;
+      let result;
+      let arr = [];
+      while ((result = reg.exec(this.remark))) {
+        arr.push(result[1]);
+        this.remark = this.remark.replace(/@(.*?);/, "");
+      }
+
+      let receiver = [];
+      arr.forEach(item => {
+        this.userList.forEach(uitem => {
+          if (uitem.value === item) {
+            receiver.push(uitem.code);
+          }
+        });
+      });
+      receiver = receiver.join(",");
+      let postData = {
+        content: this.remark,
+        receiver: receiver,
+        subject: this.topic,
+        objectName: this.objectName,
+        resId: this.resId
+      };
+      sendMsgApi(postData).then(res => {
+        this.remark = "";
+        this.sendUser = [];
+        this.getMsgRemarkData();
+      });
+    },
+    selectPinYin(input, option) {
+      if (input.charCodeAt() >= 32 && input.charCodeAt() <= 126) {
+        return (
+          option.componentOptions.children[0].text
+            .toLowerCase()
+            .indexOf(input.toLowerCase()) >= 0
+        );
+      } else {
+        return (
+          option.componentOptions.children[0].text
+            .toLowerCase()
+            .indexOf(input.toLowerCase()) >= 0
+        );
+      }
+    },
+    tabChange(activeKey) {
+      this.remark = "";
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+::v-deep(.ant-upload-list-picture .ant-upload-list-item) {
+  max-width: 185px;
+  min-width: 185px;
+  margin-right: 10px;
+}
+::v-deep(.ant-upload-list-picture .ant-upload-list-item-name) {
+  padding-right: 24px !important;
+}
+::v-deep(.ant-upload-list) {
+  display: flex;
+  overflow-x: auto;
+  margin-bottom: 10px;
+  // flex-wrap: wrap;
+}
+::v-deep(.ant-upload-list::-webkit-scrollbar) {
+  width: 5px;
+  height: 5px;
+  z-index: 10;
+}
+::v-deep(.ant-upload-list::-webkit-scrollbar-track) {
+  background-color: #ffffff;
+  z-index: 10;
+}
+/*滚动条里面的小方块，能向上向下移动*/
+::v-deep(.ant-upload-list::-webkit-scrollbar-thumb) {
+  background-color: #bfbfbf;
+  border-radius: 5px;
+  border: 1px solid #f1f1f1;
+  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  z-index: 10;
+}
+::v-deep(.ant-upload-list::-webkit-scrollbar-thumb:hover) {
+  background-color: #a8a8a8;
+  z-index: 10;
+}
+::v-deep(.ant-upload-list::-webkit-scrollbar-thumb:active) {
+  background-color: #787878;
+  z-index: 10;
+}
+/*边角，即两个滚动条的交汇处*/
+::v-deep(.ant-upload-list::-webkit-scrollbar-corner) {
+  background-color: #ffffff;
+  z-index: 10;
+}
+
+::v-deep(.ant-list-item) {
+  padding: 12px 10px;
+  position: relative;
+}
+.list {
+  padding: 10px 15px;
+  padding-top: 0;
+  margin-top: 10px;
+  overflow: auto;
+  .close-icon {
+    position: absolute;
+    top: 30%;
+    right: 5%;
+    cursor: pointer;
+  }
+}
+/*滚动条整体部分*/
+.list::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+  z-index: 10;
+}
+/*滚动条的轨道*/
+.list::-webkit-scrollbar-track {
+  background-color: #ffffff;
+  z-index: 10;
+}
+/*滚动条里面的小方块，能向上向下移动*/
+.list::-webkit-scrollbar-thumb {
+  background-color: #bfbfbf;
+  border-radius: 5px;
+  border: 1px solid #f1f1f1;
+  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  z-index: 10;
+}
+.list::-webkit-scrollbar-thumb:hover {
+  background-color: #a8a8a8;
+  z-index: 10;
+}
+.list::-webkit-scrollbar-thumb:active {
+  background-color: #787878;
+  z-index: 10;
+}
+/*边角，即两个滚动条的交汇处*/
+.list::-webkit-scrollbar-corner {
+  background-color: #ffffff;
+  z-index: 10;
+}
+::v-deep .vxe-modal--wrapper .vxe-modal--content {
+  padding: 0;
+}
+.input-box {
+  background-color: #fff;
+  padding: 10px 10px 0;
+  min-height: 180px;
+  // max-height: 210px;
+}
+.msg-content {
+  box-sizing: border-box;
+  max-height: 40px;
+  min-height: 40px;
+  max-width: 140px;
+  min-width: 140px;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #ccc;
+  background: #eee;
+  border-radius: 5px;
+  padding: 0 10px;
+  margin-right: 8px;
+  margin-bottom: 8px;
+  cursor: pointer;
+  position: relative;
+}
+.download-icon {
+  position: absolute;
+  line-height: 50%;
+  left: 45%;
+  opacity: 0;
+}
+.msg-content:hover {
+  background: #ccc;
+}
+.msg-content:hover .download-icon {
+  opacity: 1;
+}
+.file-title {
+  overflow: hidden; //超出的文本隐藏
+  text-overflow: ellipsis; //溢出用省略号显示
+  white-space: nowrap; // 默认不换行；
+}
+
+.odoo {
+  position: fixed;
+  top: 40%;
+  right: 5px;
+  z-index: 100;
+  cursor: pointer;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 5px;
+  background: #089def;
+}
+::v-deep .vxe-modal--wrapper .vxe-modal--content {
+  padding: 0;
+}
 </style>