yxk-storeroom-system/src/views/archivesManage/lendManage/lendQuery/index.vue

<template>
  <div class="lend-query">
    <head-slot>
      <!-- <el-button icon="el-icon-download" size="mini" class="margin-r" disabled
        >导出</el-button
      > -->
      <crudOperation />
      <el-select
        v-model="lendState"
        class="filter-item"
        style="width: 100px; height: 30px;margin-left:10px"
      >
        <el-option
          v-for="item in lendStateOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>

      <!-- <el-input v-model="query.name" clearable size="small" placeholder="输入岗位名称搜索" prefix-icon="el-icon-search" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" /> -->
      <el-input
        v-model="keyWord"
        size="small"
        clearable
        placeholder="请输入关键词"
        style="width: 300px"
        class="input-prepend"
        @keyup.enter.native="crud.toQuery"
      >
        <el-select slot="prepend" v-model="cateSearch" style="width: 100px">
          <el-option
            v-for="item in cateSearchOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-input>
      <rrOperation />
    </head-slot>
    <!--表格渲染-->
    <el-table
      ref="fieldTable"
      style="min-width: 100%"
      height="calc(100vh - 355px)"
      @selection-change="selectionChangeHandler"
      @row-click="clickRowHandler"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column type="index" label="序号" width="55" />
      <el-table-column prop="isColumnLength" label="借阅状态" min-width="85" />
      <el-table-column prop="fieldCnName" label="所属门类" min-width="140" />
      <el-table-column prop="fieldName" label="档号" min-width="140" />
      <el-table-column label="题名" min-width="85" />
      <el-table-column prop="isColumnLength" label="盒名称" min-width="85" />
      <el-table-column prop="isColumnLength" label="存放位置" min-width="85" />
      <el-table-column prop="isColumnLength" label="借阅人" min-width="85" />
      <el-table-column prop="isColumnLength" label="借阅时间" min-width="85" />
      <el-table-column prop="isColumnLength" label="借阅目的" min-width="85" />
    </el-table>
    <!-- 分页 -->
    <pagination />
  </div>
</template>

<script>
import headSlot from '../components/headSlot.vue'
import CRUD, { presenter } from '@crud/crud'
import pagination from '@crud/Pagination'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'

export default {
  components: { headSlot, pagination, rrOperation, crudOperation },
  mixins: [presenter()],
  cruds() {
    return CRUD({
      // title: '岗位',
      //   url: 'api/job',
      // crudMethod: { ...crudJob },
      optShow: {
        add: false,
        edit: false,
        del: false,
        download: true,
        group: false
      }
    })
  },
  data() {
    return {
      tableData: [],
      lendStateOptions: [
        { value: '选项1', label: '全部' },
        { value: '选项2', label: '待登记' },
        { value: '选项3', label: '待借阅' },
        { value: '选项4', label: '待归还' },
        { value: '选项5', label: '逾期' },
        { value: '选项6', label: '已归还' }
      ],
      lendState: '全部',
      keyWord: '',
      cateSearch: '借阅人',
      cateSearchOptions: [
        { value: '选项1', label: '借阅人' },
        { value: '选项2', label: '档号' },
        { value: '选项3', label: '题名' },
        { value: '选项4', label: '位置' },
        { value: '选项5', label: '档案盒' },
        { value: '选项6', label: '条形码' },
        { value: '选项6', label: 'TID' }
      ]
    }
  },
  methods: {
    selectionChangeHandler() {
      console.log('selectionChangeHandler')
    },
    clickRowHandler() {
      console.log('clickRowHandler')
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep.input-prepend {
  margin: 0 10px 0 -10px;
  background-color: #021941;
  border-radius: 3px;
  // word-spacing: -10px;
  border: 1px solid #339cff;
  .el-select {
    background-color: #021941;
    color: #fff;
  }
  .el-input__inner {
    background-color: #021941;
    border: none;
    caret-color: #fff;
    height: 28px;
    line-height: 28px;
  }
  .el-input-group__prepend {
    border: none;
  }
}
</style>