msyj-admin-local/src/modules/main/WorkManage.vue

<template>
  <div class="work home">
    <view-header class="home-header"></view-header>

    <div class="home-body">
      <div class="home-main">
        <div class="part-box-head">
          <Form label-position="left" inline>
            <FormItem>
              <Input
                v-model.trim="modalForm.name"
                placeholder="工作名称"
                clearable
              ></Input>
            </FormItem>
            <FormItem :label-width="0">
              <Button
                size="small"
                type="success"
                icon="recode-white icon"
                shape="circle"
                @click="toAdd"
                >新增工作文件</Button
              >
            </FormItem>
          </Form>
        </div>
        <Table
          ref="TableList"
          :columns="columns"
          :data="works"
          :row-class-name="rowClassName"
          disabled-hover
          border
        ></Table>

        <view-footer></view-footer>
      </div>
    </div>
  </div>
</template>

<script>
import { workList, createWork, activeWork, deleteWork } from "@/api";
export default {
  name: "work",
  data() {
    return {
      modalForm: {
        name: ""
      },
      works: [],
      columns: [
        {
          title: "序号",
          width: 80,
          render: (h, param) => {
            return h("div", param.index + 1 + "");
          }
        },
        {
          title: "ID",
          key: "id",
          minWidth: 100
        },
        {
          title: "名称",
          key: "name",
          minWidth: 200
        },
        {
          title: "是否为当前工作",
          key: "active",
          minWidth: 200,
          render: (h, param) => {
            return h("div", param.row.active ? "是" : "否");
          }
        },
        {
          title: "创建时间",
          key: "createdOn",
          minWidth: 160
        },
        {
          title: "操作",
          key: "action",
          width: 140,
          align: "center",
          className: "table-action",
          render: (h, param) => {
            const actions = [
              {
                icon: "md-settings",
                classes: [{ "icon-act": param.row.active }],
                attrs: {
                  title: "设置为当前工作"
                },
                action: () => {
                  this.toActive(param.row);
                }
              },
              {
                icon: "md-trash",
                classes: ["icon-danger"],
                attrs: {
                  title: "删除"
                },
                action: () => {
                  this.toDelete(param.row);
                }
              },
              {
                icon: "md-arrow-round-forward",
                attrs: {
                  title: "进入"
                },
                action: () => {
                  this.toDetail(param.row);
                }
              }
            ];

            return h("div", this.$tableIconAction(h, actions));
          }
        }
      ]
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      const data = await workList();
      this.works = data.map(item => {
        return {
          id: item.id,
          name: item.name,
          active: item.active,
          createdOn: item.createdOn
        };
      });
    },
    rowClassName(row) {
      return row.active ? "row-active" : "";
    },
    async toAdd() {
      if (!this.modalForm.name) {
        this.$Message.error("请输入工作名称！");
        return;
      }
      if (this.modalForm.name.length > 100) {
        this.$Message.error("工作名称长度不能超过100个字符！");
        return;
      }

      await createWork(this.modalForm);
      this.$Message.success("创建工作成功！");
      this.getList();
    },
    async toActive(row) {
      await activeWork(row.id);
      this.$Message.success("设置成功！");
      this.getList();
    },
    toDetail(row) {
      this.$router.push({
        name: "WorkOverview",
        params: {
          workId: row.id
        }
      });
    },
    toDelete(row) {
      this.$Modal.confirm({
        title: "删除警告",
        content: "确定要删除当前工作吗？",
        onOk: () => {
          this.toDel(row.id);
        }
      });
    },
    async toDel(id) {
      await deleteWork(id);
      this.$Message.success("删除成功！");
      this.getList();
    }
  }
};
</script>