index.vue 10.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>
      <!--      <el-col :span="1.5">-->
      <!--        <el-button-->
      <!--          type="success"-->
      <!--          icon="el-icon-edit"-->
      <!--          size="mini"-->
      <!--          :disabled="single"-->
      <!--          @click="handleUpdate"-->
      <!--          v-hasPermi="['office:leaveApplication:edit']"-->
      <!--        >修改-->
      <!--        </el-button>-->
      <!--      </el-col>-->
      <!--      <el-col :span="1.5">-->
      <!--        <el-button-->
      <!--          type="danger"-->
      <!--          icon="el-icon-delete"-->
      <!--          size="mini"-->
      <!--          :disabled="multiple"-->
      <!--          @click="handleDelete"-->
      <!--          v-hasPermi="['office:leaveApplication:remove']"-->
      <!--        >删除-->
      <!--        </el-button>-->
      <!--      </el-col>-->
      <el-col :span="1.5">
        <el-button
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['office:leaveApplication:export']"
        >导出
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="leaveApplicationList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="序号" align="center" type='index'/>
      <el-table-column label="申请人" align="center" prop="applicant"/>
      >
      <el-table-column label="联系方式" align="center" prop="phone"/>
      <el-table-column label="请假类型" align="center" prop="type"/>
      <el-table-column label="请假开始时间" align="center" prop="beginDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.beginDate, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="请假结束时间" align="center" prop="endDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.endDate, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="请假天数" align="center" prop="numberDays"/>
      <el-table-column label="审批状态" align="center" prop="status">
        <template slot-scope="scope">
          <span>{{ parseStatus(scope.row.status) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleInfo(scope.row)"
            v-hasPermi="['office:leaveApplication:edit']"
          >详情
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-if="scope.row.status==2"
            v-hasPermi="['office:leaveApplication:edit']"
          >修改
          </el-button>
          <!--          <el-button-->
          <!--            size="mini"-->
          <!--            type="text"-->
          <!--            icon="el-icon-delete"-->
          <!--            @click="handleDelete(scope.row)"-->
          <!--            v-hasPermi="['office:leaveApplication:remove']"-->
          <!--          >删除-->
          <!--          </el-button>-->
        </template>
      </el-table-column>
    </el-table>

    <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="500px" 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: 100px; 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="500px" 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">
</script>