index.vue 8.5 KB
<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="申请人" prop="applicant">
        <el-input
          v-model="queryParams.applicant"
          placeholder="请输入申请人"

          size="small"

        />
      </el-form-item>
<!--      <el-form-item label="申请部门" prop="deptName">-->
<!--        <el-select v-model="queryParams.deptName" placeholder="请选择部门"  size="small">-->
<!--          <el-option label="全部" value=""/>-->
<!--          <el-option v-for="item in depts" :label="item.name" :value="item.name" :key="item.code"/>-->
<!--        </el-select>-->
<!--      </el-form-item>-->
      <el-form-item label="请假类型" prop="type">
        <el-select v-model="queryParams.type" placeholder="请选择请假类型"  size="small">
          <el-option label="事假" value="事假"/>
          <el-option label="病假" value="病假"/>
          <el-option label="婚假" value="婚假"/>
          <el-option label="产假" value="产假"/>
          <el-option label="丧假" value="丧假"/>
          <el-option label="公休假" value="公休假"/>
          <el-option label="探亲假" value="探亲假"/>
          <el-option label="护理假" value="护理假"/>
          <el-option label="亲子假" value="亲子假"/>
          <el-option label="育儿假" value="育儿假"/>
          <el-option label="其他" value="其他"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['office:leaveApplication:add']"
        >新增
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>


    <a  @click="handleInfo(item)" v-for="item in leaveApplicationList">
        <el-card class="box-card"  style="margin-bottom: 10px;"
            >
           <el-row class="card_row">
             <el-col :span="24" class="card_grid">
              <div class="card_title" style="font-weight: bold;">申请人:{{item.applicant}}</div>
             </el-col>
           </el-row>
           <el-row class="card_row" style="margin-top:10px;margin-bottom:10px;">
              <el-col :span="24">
                 <span >请假开始时间:{{ parseTime(item.beginDate, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
              </el-col>
           </el-row>

           <el-row class="card_row" style="margin-top:10px;margin-bottom:10px;">
              <el-col :span="24">
                 <span >请假结束时间:{{ parseTime(item.endDate, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
              </el-col>
           </el-row>


            <el-row class="card_row">
               <el-col :span="16">
                  <span >联系方式:{{item.phone}}</span>
               </el-col>
               <el-col :span="8" class="card_grid" >
                 <span >请假天数:{{item.numberDays}}</span>
               </el-col>
            </el-row>

           <el-row class="card_row">
             <el-col :span="24">
                <span >审批状态:{{ parseStatus(item.status) }}</span>
             </el-col>
          </el-row>
         </el-card>
    </a>


    <h5Page
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改请假申请对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="300px" append-to-body :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">

        <el-form-item label="联系方式" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入联系方式" :maxlength="11" show-word-limit />
        </el-form-item>

        <el-form-item label="请假类型" prop="type">
          <el-select v-model="form.type" placeholder="请选择请假类型" style="width: 100%">
            <el-option label="事假" value="事假"/>
            <el-option label="病假" value="病假"/>
            <el-option label="婚假" value="婚假"/>
            <el-option label="产假" value="产假"/>
            <el-option label="丧假" value="丧假"/>
            <el-option label="公休假" value="公休假"/>
            <el-option label="探亲假" value="探亲假"/>
            <el-option label="护理假" value="护理假"/>
            <el-option label="亲子假" value="亲子假"/>
            <el-option label="育儿假" value="育儿假"/>
            <el-option label="其他" value="其他"/>
          </el-select>
        </el-form-item>

        <el-form-item label="请假天数" prop="numberDays">
          <el-input v-model="form.numberDays" placeholder="请输入请假天数"/>
        </el-form-item>

        <el-form-item label="开始时间" prop="beginDate">
          <el-date-picker  size="small" style="width: 100%"
                          v-model="form.beginDate"
                          type="datetime"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          placeholder="选择请假开始时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="endDate">
          <el-date-picker  size="small" style="width: 100%"
                          v-model="form.endDate"
                          type="datetime"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          placeholder="选择请假结束时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="请假事由">
          <el-input v-model="form.content" type="textarea" :rows="4"/>
        </el-form-item>
        <el-form-item label="附件图片预览" v-if="slide1.length!=0">
          <el-image v-for="item in slide1"
                    style="width: 150px; height: 100px; margin: 5px;"
                    :src="item"
                    :preview-src-list="slide1"
                    :z-index="2000">
          </el-image>
        </el-form-item>
        <el-form-item prop="fileEntityList" label="附件">
          <el-upload
            ref="upload"
            action=""
            accept=".docx,.xlsx,.xls,.ppt,.doc,.pdf,.png,.jpeg,.png,.jpg"
            :on-change="fileChange"
            :auto-upload="false"
            :show-file-list="false"
            multiple
            :file-list="fileEntityList">
            <el-button size="small" type="primary" icon="el-icon-upload">上传附件</el-button>
          </el-upload>
        </el-form-item>
        <el-table :data="fileEntityList">
          <el-table-column property="name" label="附件名称" header-align="center" align="center"></el-table-column>
          <el-table-column label="操作" class-name="small-padding fixed-width" header-align="center" align="center">
            <template slot-scope="scope">
              <el-button
                size="small" type="success"
                icon="el-icon-download"
                @click="downloadFA(scope.row)"
                v-hasPermi="['office:management:edit']"
                v-if="form.id!=null"
                round>下载
              </el-button>
              <el-button
                size="small" type="danger"
                icon="el-icon-delete"
                @click="handleDeleteFile(scope.$index)"
                v-hasPermi="['office:management:remove']"
                round>删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="title" :visible.sync="openInfo" width="300px" append-to-body :close-on-click-modal="false">
      <h5Info :idInfo="idInfo" v-if="openInfo"/>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script src="@/api/leave.js">
</script>
<style scope>
  .el-select-dropdown__item{
    width:300px;
  }
</style>