doway-coms 1.6.44 → 1.6.46

package/packages/LeaveAMessage/index.js

@@ -0,0 +1,8 @@
+// 导入组件，组件必须声明 name
+import LeaveAMessage from './src/index.vue';
+// 为组件提供 install 安装方法，供按需引入
+LeaveAMessage.install = function(Vue) {
+    Vue.component(LeaveAMessage.name, LeaveAMessage);
+};
+// 默认导出组件
+export default LeaveAMessage;

package/packages/LeaveAMessage/src/index.vue

@@ -0,0 +1,386 @@
+<template>
+  <div class="liu-yan" style="background-color: #eaeef1">
+    <div class="input-box">
+      <!-- :auto-size="{ minRows: 2, maxRows: 2 }" -->
+      <a-textarea auto-size 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">发送</a-button>
+      </div>
+    </div>
+    <div class="list" :style="{ height: listHeight - 101 + '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, index"
+          :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">
+                <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>
+</template>
+
+<script>
+import moment from "moment";
+import { notification } from "ant-design-vue";
+import {
+  attachGetAttachUrlApi,
+  readObjectCommentApi,
+  searchObjectCommentApi,
+  addObjectCommentApi,
+  deleteObjectCommentApi,
+} from "../../utils/api";
+export default {
+  name: "LeaveAMessage",
+  props: {
+    listHeight: {
+      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;
+      },
+    },
+  },
+  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";
+    this.getMsgRemarkData();
+  },
+  data() {
+    return {
+      userId: null,
+      fileList: [],
+      remarkData: [],
+      uploadData: {
+        picType: "",
+        picAction: "",
+        resId: "",
+      },
+      uploadHeaders: {
+        Authorization: null,
+      },
+      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,
+            },
+          ],
+          operator: "and",
+        },
+        sorts: [['createTime', 'desc']]
+      };
+      searchObjectCommentApi(postData).then((res) => {
+        let tmp = [];
+        res.content.forEach((item) => {
+          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,
+        };
+        console.log(this.fileList);
+        addObjectCommentApi(postData).then((res) => {
+          this.remark = "";
+          this.attachment = [];
+          this.fileList = [];
+          this.getMsgRemarkData();
+        });
+      }
+    },
+    delMsgRemark(val) {
+      deleteObjectCommentApi({
+        keyIds: [val.id],
+      }).then((res) => {
+        this.getMsgRemarkData();
+      });
+    },
+  },
+};
+</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;
+  flex-wrap: wrap;
+}
+::v-deep(.ant-list-item) {
+  padding: 12px 10px;
+  position: relative;
+}
+.list {
+  padding: 15px 15px;
+  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: 100px;
+  max-height: 100px;
+}
+.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; // 默认不换行；
+}
+</style>