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

<template>
  <el-card class="box-card" shadow="hover" id="todo-card">
    <div slot="header">
      <span style="border-left: 3px solid #338de3ff; padding-left: 6px"
        >待办事项</span
      >
      <i class="el-icon-more" style="float: right; font-size: 20px"></i>
    </div>

    <div>
      <Table
        :height="tableHeight"
        :loading="loading"
        size="small"
        :data="/^\/system/.test(this.$route.path) ? example : list"
        :columns="table"
      ></Table>

<!--      <div-->
<!--        ref="todo-page"-->
<!--        style="display: flex; justify-content: center; margin: 10px 0"-->
<!--      >-->
<!--        <Page-->
<!--          :total="/^\/system/.test(this.$route.path) ? example.length : total"-->
<!--          size="small"-->
<!--          show-elevator-->
<!--          show-total-->
<!--          @on-change="-->
<!--            (e) => {-->
<!--              select.page = e;-->
<!--              getNotices();-->
<!--            }-->
<!--          "-->
<!--        />-->
<!--      </div>-->
    </div>
  </el-card>
</template>

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

export default {
  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: 64,
        },
        {
          title: "内容",
          key: "title",
          align: "left",
          ellipsis: true,
          tooltip: true,
          minWidth: 140,
        },
        {
          title: "收件时间",
          key: "created_at",
          width: 120,
          align: "center",
        },
        {
          title: "查看",
          key: "show",
          width: 120,
          render: (h, { row }) => {
            return h(
              "Button",
              {
                props: {
                  type: "primary",
                  size: "small",
                  ghost: true,
                },
                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`
                      );
                    }
                  },
                },
              },
              "查看"
            );
          },
        },
        // {
        //   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"></style>