2020-2021暑期项目实训第四周——企业会议室功能实现以及主要代码

对从后端获取的信息进行企业会议室的卡片渲染，会议室的停用启用、添加删除功能全部实现。
对于处于不同状态的会议室会展现不同的样式。


正在开会的会议室不可进行操作，空闲和停用会议室可以删除。

<template>
  <a-card
    :body-style="{
      padding: '24px 32px',
      paddingBottom: '64px',
    }"
    :bordered="false"
  >
    <a-tooltip
      v-if="role == 'founder' || role == 'admin'"
      placement="topLeft"
      title="添加会议室"
      arrow-point-at-center
    >
      <a-button type="primary" icon="plus-circle" @click="add" />
    </a-tooltip>
    <a-row :gutter="16">
      <roomCom
        v-for="(item, key) in data"
        :key="key"
        :res-info="item"
      ></roomCom>
    </a-row>
    <a-modal
      title="更改会议室名字"
      :visible="visible"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-form :form="form">
        <a-form-item
          ref="meeting-name"
          label="更改会议室名字"
          prop="meeting-name"
        >
          <a-input
            v-decorator="[
              'meeting-name',
              {
                rules: [
                  {
                    required: true,
                    message: '名字不能为空！',
                  },
                ],
              },
            ]"
          />
        </a-form-item>
      </a-form>
    </a-modal>

    <a-modal
      title="添加会议室"
      :visible="visableRoom"
      @ok="handleAdd"
      @cancel="handleCancel"
    >
      <a-form :form="formRoom">
        <a-form-item ref="roomName" label="输入会议室名字" prop="roomName">
          <a-input
            v-decorator="[
              'roomName',
              {
                rules: [
                  {
                    required: true,
                    message: '名字不能为空！',
                  },
                ],
              },
            ]"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </a-card>
</template>

<script>
import roomCom from "./roomShow";
import { mapGetters } from "vuex";
import { roomList, createRoom } from "@/services/room";
export default {
  data() {
    return {
      isShow: false,
      visible: false,
      visableRoom: false,
      data: [],
      role: "",
    };
  },
  components: {
    roomCom,
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, "form");
    this.formRoom = this.$form.createForm(this, "formRoom");
  },
  created() {
    this.showList();
    this.role = this.roles[0].id;
  },
  computed: {
    ...mapGetters("account", ["username", "userId", "companyId", "roles"]),
  },
  methods: {
    showList() {
      roomList(this.companyId).then((res) => {
        this.data = res.data.data;
      });
    },
    add() {
      this.visableRoom = true;
    },

    // 提交更改名字请求
    handleOk() {
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          console.log("Received values of form: ", values);
        }
      });
    },

    // 提交添加会议室请求
    handleAdd: function () {
      this.formRoom.validateFieldsAndScroll((err) => {
        if (!err) {
          const departmentId = "";
          const roomName = this.formRoom.getFieldValue("roomName");
          createRoom(this.companyId, departmentId, roomName).then((res) => {
            const addRes = res.data;
            if (addRes.code == 200) {
              this.$message.success("新增会议室成功！");
              this.visableRoom = false;
              this.showList();
            }
          });
        }
      });
    },
    // 取消
    handleCancel() {
      this.visible = false;
      this.visableRoom = false;
    },
  },
};
</script>

子组件roomCom代码

<template>
  <!-- 会议室展示组件 -->
  <a-col :span="8">
    <a-card hoverable style="width: 300px; margin-top: 2%">
      <template slot="actions" class="ant-card-actions">
        <a-tooltip
          v-if="!resInfo.status"
          placement="topLeft"
          title="更改名称"
          arrow-point-at-center
        >
          <a-icon key="edit" type="edit" @click="edit" />
        </a-tooltip>
        <a-tooltip
          v-if="
            (role == 'founder' || role == 'admin') &&
            !resInfo.isActive &&
            !resInfo.status
          "
          placement="topLeft"
          title="启用"
          arrow-point-at-center
          @click="change(resInfo.id, true)"
        >
          <a-icon type="check-circle" />
        </a-tooltip>
        <a-tooltip
          v-if="
            (role == 'founder' || role == 'admin') &&
            resInfo.isActive &&
            !resInfo.status
          "
          placement="topLeft"
          title="停用"
          arrow-point-at-center
          @click="change(resInfo.id, false)"
        >
          <a-icon type="stop" />
        </a-tooltip>
        <a-popconfirm
          v-if="(role == 'founder' || role == 'admin') && !resInfo.status"
          title="你要删除这个会议室吗？"
          ok-text="确认"
          cancel-text="取消"
          @confirm="deleteRoom(resInfo.id)"
          @cancel="cancel"
        >
          <a-tooltip placement="topLeft" title="删除" arrow-point-at-center>
            <a-icon type="close-circle" />
          </a-tooltip>
        </a-popconfirm>
        <a-tooltip
          v-if="resInfo.status"
          placement="topLeft"
          title="暂无可进行操作"
          arrow-point-at-center
        >
          <a-icon type="bulb" />
        </a-tooltip>
      </template>
      <a-card-meta :title="resInfo.name"></a-card-meta>
      <a-result
        v-if="resInfo.status"
        title="正在进行会议"
        sub-title="剩余时间："
      >
        <template v-if="resInfo.status" #icon>
          <a-icon type="smile" theme="twoTone" />
        </template>
      </a-result>
      <a-result
        v-if="!resInfo.status && resInfo.isActive"
        status="success"
        title="会议室空闲"
        sub-title="可进行会议活动"
      >
      </a-result>
      <a-result
        v-if="!resInfo.status && !resInfo.isActive"
        status="error"
        title="会议室停用"
        sub-title="管理员可启用"
      >
      </a-result>
    </a-card>
  </a-col>
</template>

<script>
import { mapGetters } from "vuex";
import { deleteRoom, changeRoom } from "@/services/room";
export default {
  name: "roomCom",
  props: {
    resInfo: {
      id: "",
      name: "",
      companyId: "",
      departmentId: "",
      status: false,
      isActive: false,
      deleted: false,
    },
  },
  data() {
    return {
      role: "",
    };
  },
  computed: {
    ...mapGetters("account", ["username", "userId", "companyId", "roles"]),
  },
  created() {
    this.role = this.roles[0].id;
  },
  methods: {
    edit() {
      this.visible = true;
    },
    deleteRoom(id) {
      deleteRoom(id).then((res) => {
        const deleteRes = res.data;
        if (deleteRes.code == 200) {
          this.$message.success("删除成功！");

          const route = "/resourceManagement/room";
          this.$refreshPage(route);
        }
      });
    },
    change(id, result) {
      var message = "";
      if (result == true) {
        message = "启用会议室成功！";
      } else {
        message = "停用会议室成功！";
      }
      changeRoom(id, result).then((res) => {
        const changeRes = res.data;
        if (changeRes.code == 200) {
          this.$message.success(message);

          const route = "/resourceManagement/room";
          this.$refreshPage(route);
        }
      });
    },
  },
};
</script>