index.vue 9.66 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-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-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>
          <vue-preview :slides="slide1"></vue-preview>
        </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>