sqhj-workbench-web/src/views/system/workerComponents/toDo.vue

<template>
  <el-card class="box-card" shadow="hover" id="todo-card">
    <div slot="header" class="clearfix">
      <SvgIcon style="color: #3171f4;width: 22px;height: 22px;" icon-class="notice"></SvgIcon>
      <span style="padding-left: 15px"
        >待办通知</span
      >
      <i class="el-icon-more" style="margin-left: auto; font-size: 20px"></i>
    </div>

    <div style="position: relative;height: 100%;width: 100%;">
      <div style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;">
        <Table
          :show-header="false"
          :height="tableHeight"
          :loading="loading"
          size="small"
          :data="/^\/system/.test(this.$route.path) ? example : list"
          :columns="table"
        ></Table>
      </div>
    </div>
  </el-card>
</template>

<script>
import SvgIcon from "@/components/SvgIcon/index.vue";
import { getNotice2, readNotice } from "@/api/dashboard/notice";
import ElementResize from "element-resize-detector";

export default {
  components: {
    SvgIcon
  },
  name: "card2",
  layout: {
    x: 4,
    y: 0,
    w: 6,
    h: 4,
    i: "2",
    name: "待办事项",
  },
  data() {
    return {
      window: {
        width: 0,
        height: 0,
        top: 0,
        left: 0,
      },
      example: [
        {
          type: 1,
          content: "示例1",
          created_at: this.$moment().format("YYYY-MM-DD HH:mm:ss"),
          read_count: true,
        },
        {
          type: 2,
          content: "示例2",
          created_at: this.$moment().format("YYYY-MM-DD HH:mm:ss"),
          read_count: false,
        },
      ],
      select: {
        page: 1,
        page_size: 10,
      },
      tableHeight: 120,
      loading: false,
      list: [],
      total: 0,
      table: [
        {
          type: "index",
          title: " ",
          align: "center",
          width: 46,
        },
        {
          title: "收件时间",
          key: "created_at",
          width: 160,
          align: "center",
          render: (h, { row }) => {
            return h("span",{ style: { color: "#4d8bdc" } }, this.$moment(row.created_at).format("YYYY-MM-DD HH:mm:ss"));
          },
        },
        {
          title: "内容",
          key: "title",
          align: "left",
          ellipsis: true,
          tooltip: true,
          minWidth: 200,
        },
        {
          title: "查看",
          key: "show",
          width: 180,
          render: (h, { row }) => {
            return h('div',[
              h(
                "Button",
                {
                  props: {
                    type: "default",
                    size: "small",
                  },
                  style: {
                    background: "#f0f3fa",
                    color: "#333",
                    border: "1px solid #dae1f0",
                    fontSize: "13px"
                  },
                  on: {
                    ["click"]: (_) => {
                      if(row.from_type === 'contract') {
                        this.$router.push({
                          path: '/contract/contract/contractList',
                          query: {
                            keyword:/\[(.*?)\]/.exec(row.title) ? /\[(.*?)\]/.exec(row.title)[1] : ''
                          }
                        })
                      } else {
                        window.open(
                          `${process.env.VUE_APP_OUT_OLD}/flow/view/${row.id}?auth_token=${this.$store.getters.oa_token}`,
                          "edit",
                          `top=${this.window.top},left=${this.window.left},width=${this.window.width},height=${this.window.height},location=0`
                        );
                      }
                    },
                  },
                },
                "查看"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small",
                  },
                  style: {
                    "margin-left": "6px",
                    fontSize: "13px"
                  },
                  on: {
                    ["click"]: (_) => {
                      if(row.from_type === 'contract') {
                        let toUrl = this.$router.resolve({
                          path: '/contract/contract/contractList',
                          query: {
                            keyword:/\[(.*?)\]/.exec(row.title) ? /\[(.*?)\]/.exec(row.title)[1] : ''
                          }
                        })
                        window.open(
                          toUrl.href,
                          "edit",
                          `top=${this.window.top},left=${this.window.left},width=${this.window.width},height=${this.window.height},location=0`
                        );
                      } else {
                        window.open(
                          `${process.env.VUE_APP_OUT_OLD}/flow/deal/${row.id}?auth_token=${this.$store.getters.oa_token}`,
                          "edit",
                          `top=${this.window.top},left=${this.window.left},width=${this.window.width},height=${this.window.height},location=0`
                        );
                      }
                    },
                  },
                },
                "办理"
              )
            ]);
          },
        },
        // {
        //   title: "状态",
        //   key: "read_count",
        //   width: 120,
        //   render: (h, { row }) => {
        //     return row.read_count
        //       ? h(
        //           "el-link",
        //           {
        //             props: {
        //               type: "success",
        //               underline: false,
        //             },
        //           },
        //           "已读"
        //         )
        //       : h(
        //           "Button",
        //           {
        //             props: {
        //               type: "error",
        //               size: "small",
        //               ghost: true
        //             },
        //             on: {
        //               ['click']:e => {
        //                 if(/^\/system/.test(this.$route.path)) return
        //
        //                 readNotice({
        //                   id: row.id
        //                 }).then(res => {
        //                   this.$message({
        //                     type: 'success',
        //                     message: '已读'
        //                   })
        //                   this.getNotices()
        //                 })
        //               }
        //             }
        //           },
        //           "未读"
        //         );
        //   },
        // },
      ],
    };
  },
  methods: {
    async getNotices() {
      if (/^\/system/.test(this.$route.path)) return;
      try {
        this.loading = true;
        const res = await getNotice2(this.select, true);
        this.list = res;
        this.total = res.length;
        this.loading = false;
      } catch (e) {
        this.loading = false;
      }
    },

    init() {
      let cardDom = document.getElementById("todo-card");
      let cardTitleH = 58;
      const elementResize = ElementResize({
        strategy: "scroll",
      });
      elementResize.listenTo(cardDom, (ele) => {
        this.tableHeight =
          cardDom.getBoundingClientRect().height -
          40 -
          cardTitleH
      });
    },
  },
  computed: {},
  created() {
    this.window.width = screen.availWidth * 0.95;
    this.window.height = screen.availHeight * 0.95;
    this.window.top = (window.screen.height - 30 - this.window.height) / 2;
    this.window.left = (window.screen.width - 10 - this.window.width) / 2;
    this.getNotices();
  },
  mounted() {
    this.init();
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-card__body {
  width: 100%;
  height: calc(100% - 58px);
}
::v-deep .ivu-table th,::v-deep .ivu-table td {
  border-bottom-style: dashed;
}
.clearfix {
  display: flex;
  align-items: center;
}
</style>