2020-2021暑期项目实训第二周——界面开发以及主要代码

个人中心界面

其中，姓名、手机号、密码的判断使用正则表达式

      rules: {
        name: [
          { required: true, message: "姓名不能为空" },
          {
            pattern: /^[a-zA-Z0-9_-]{4,16}$/,
            message: "4到16位（字母，数字，下划线，减号）",
            trigger: "blur",
          },
        ],
        phone: [
          { required: true, message: "手机号不能为空" },
          {
            pattern:
              /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/,
            message: "手机号格式错误",
            trigger: "blur",
          },
        ],

        email: [
          { required: true, message: "邮箱不能为空" },
          {
            pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
            message: "邮箱格式错误",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "密码不能为空" },
          {
            pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/,
            message: "密码格式错误,4-16位字母和数字",
            trigger: "blur",
          },
        ],
      },

企业信息界面

其中只有企业地址可以修改

企业用户

企业用户分为已经属于公司的员工和已邀请但是未进入的员工 。
对已经属于公司的员工可以进行修改部门和解雇，解雇可以批量进行。
点击解雇后会出现警告框，以防误点。

1. 主要界面
   

<a-row>
      <a-col :span="6">
        部门 .
        <a-tree :load-data="onLoadData" :tree-data="treeData" />
        <a-divider type="vertical" />
      </a-col>
      <a-col :span="18">
        <a-row>
          <a-tabs default-active-key="1">
            <a-tab-pane key="1">
              <span slot="tab" @click="search">
                <a-icon type="apple" />
                用户
              </span>
              <!-- <a-row> </a-row> -->

              <div style="margin-bottom: 16px">
                <a-button
                  type="primary"
                  :disabled="hasSelected"
                  :loading="loading"
                  @click="invite"
                >
                  邀请
                </a-button>

                <!-- 批量解雇员工按钮 -->
                <a-button
                  type="danger"
                  :disabled="!hasSelected"
                  :loading="loading"
                  @click="deleted"
                  style="margin-left: 5%"
                >
                  解雇
                </a-button>
                <a-input-search
                  placeholder="请输入员工姓名"
                  style="width: 200px"
                  @search="onSearch"
                />
                <span style="margin-left: 8px">
                  <template v-if="hasSelected">
                    {{ `选中 ${selectedRowKeys.length} 条数据` }}
                  </template>
                </span>
              </div>
              <!-- <a-table
                :row-key="(record) => record.login.uuid"
                :row-selection="{
                  selectedRowKeys: selectedRowKeys,
                  onChange: onSelectChange,
                }"
                :columns="columns"
                :data-source="data"
                :scroll="{ x: 1300 }"
                :pagination="pagination"
                :loading="loading"
                :components="components"
                bordered
                ><a slot="action" href="javascript:;">编辑</a>
              </a-table> -->
              <a-table
                bordered
                :row-selection="{
                  selectedRowKeys: selectedRowKeys,
                  onChange: onSelectChange,
                }"
                :columns="columns"
                :data-source="data"
                :scroll="{ x: 1500, y: 300 }"
              >
                <div slot="action">
                  <a @click="edit">修改</a>
                  <a @click="fire" style="margin-left: 7%">解雇</a>
                </div>
              </a-table>
              <a-modal
                title="更改员工部门"
                :visible="visible"
                :confirm-loading="confirmLoading"
                @ok="handleOk"
                @cancel="handleCancel"
              >
                <a-form :form="form">
                  <a-form-item
                    ref="department"
                    label="选择部门"
                    prop="department"
                  >
                    <a-select
                      v-decorator="['department', { initialValue: '       ' }]"
                    >
                      <a-select-option value="Option1">
                        Option1 </a-select-option
                      ><a-select-option value="Option2">
                        Option2
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-form>
              </a-modal>
            </a-tab-pane>

            <!-- 待加入员工 -->
            <a-tab-pane key="2">
              <span slot="tab">
                <a-icon type="android" @click="searchInvite" />
                待定
              </span>
              <div style="margin-bottom: 16px">
                <a-button
                  type="primary"
                  :disabled="!hasInviteSelected"
                  :loading="loading"
                  @click="reInvite"
                >
                  重新发送邀请
                </a-button>
                <a-input-search
                  placeholder="请输入员工姓名"
                  style="width: 200px"
                  @search="onSearchInvite"
                />
                <span style="margin-left: 8px">
                  <template v-if="hasInviteSelected">
                    {{ `选中 ${selectedInviteRowKeys.length} 条数据` }}
                  </template>
                </span>
              </div>
              <a-table
                bordered
                :row-selection="{
                  selectedInviteRowKeys: selectedInviteRowKeys,
                  onChange: onSelectInviteChange,
                }"
                :columns="columns"
                :data-source="dataInvite"
                :scroll="{ x: 1500, y: 300 }"
              >
                <a slot="action" @click="reInviteSome">重新邀请</a>
              </a-table>
            </a-tab-pane>
          </a-tabs>
        </a-row>
      </a-col>
    </a-row>

2. 警告框
   

fire() {
      this.$confirm({
        title: "你确定要解雇该员工吗？",
        onOk() {
          return new Promise((resolve, reject) => {
            setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
          }).catch(() => console.log("Oops errors!"));
        },
        onCancel() {},
      });
    },

消息中心

主要展示申请加入企业的消息和被邀请加入企业的消息

申请加入企业

1. 根据企业名字模糊查询
   

  <a-card
    :body-style="{
      padding: '24px 32px',
      paddingBottom: '64px',
      textAlign: 'left',
    }"
    :bordered="false"
  >
    <a-steps :current="current">
      <a-step v-for="item in steps" :key="item.title" :title="item.title" />
    </a-steps>

    <div class="steps-content">
      <a-input-search
        v-if="current == 0"
        placeholder="请输入企业名称"
        enter-button
        @search="search"
        style="width: 50%"
      />
      <a-table
        v-if="current == 1"
        :columns="columns"
        :data-source="data"
        :scroll="{ x: 1500, y: 300 }"
      >
        <a slot="action" @click="add">申请加入</a>
      </a-table>
      <a-result
        v-if="isShow"
        status="success"
        title="已经成功提交申请！"
        v-bind:sub-title="context"
      >
      </a-result>
    </div>
    <div class="steps-action" v-show="!isShow">
      <a-button v-if="current == 0" type="primary" @click="next">
        下一步
      </a-button>
      <a-button v-if="current > 0" @click="prev"> 上一步 </a-button>
    </div>
  </a-card>

2. 根据返回结果申请加入企业
   

3. 完成，页面将在5秒后返回
   

add() {
      this.current++;
      this.isShow = true;
      var TIME_COUNT = this.count;
      if (!this.timer) {
        this.show = false;
        this.context =
          "请耐心等候企业的回复，页面将在" + (this.count + 1) + "秒后返回！";
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.context =
              "请耐心等候企业的回复，页面将在" + this.count + "秒后返回！";
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
            //跳转的页面写在此处
            this.$router.push({ path: "/dashboard" });
          }
        }, 1000);
      }
    },

目前只有前端界面，未和后端进行数据交互