equipment/src/views/borrow/borrow-history.vue

<template>
  <div class="app-container">
    <!--头部选项-->
    <div class="head-container">
      <div>
        <el-date-picker
          v-model="query.jieyueTime"
          type="date"
          placeholder="选择借阅日期"
          value-format="yyyy-MM-dd"
          @change="crud.toQuery"
        />
        <el-select
          v-model="query.jieyueren"
          placeholder="请选择借阅人"
          style="width: 150px"
          class="filter-item"
          clearable
        >
          <el-option
            v-for="item in useStateList"
            :key="item.id"
            :label="item.nickname"
            :value="item.id"
          />
        </el-select>
        <el-button type="primary" icon="el-icon-search" @click="crud.toQuery">
          查询
        </el-button>
      </div>
    </div>
    <!--表格内容-->
    <CustomTable
      ref="customTable"
      :col-configs="colConfigs"
      :columns="columns"
      :crud="crud"
      :row-class-name="getTableRowClassName"
    >
      <el-table-column slot="operation" align="center" width="100" label="操作">
        <!-- <template slot-scope="scope">
          <Edit
            :permission="permission"
            :data="scope.row"
            :disabled-edit="false"
          />
        </template> -->
      </el-table-column>
    </CustomTable>
    <pagination />
  </div>
</template>

<script>
import CRUD, { form, header, presenter } from '@/components/Crud/crud'
// import Crud from '@/components/Crud'
import CustomTable from '@/components/Crud/Table'
import Pagination from '@/components/Crud/Pagination'
// crud交由presenter持有
const defaultCrud = presenter(
  CRUD({
    title: '借阅记录',
    url: '/borrowing/list',
    orderBy: ['id asc'],
    query: {
      state: true
    }
  })
)

// 设置初始form
const defaultForm = form({
  baogaobianhao: null,
  assetNum: '',
  equipmentNum: '',
  customName: '',
  equipmentName: '',
  classCode: '',
  brand: '',
  specifications: '',
  factoryNum: '',
  location: '',
  achieveDate: '',
  commissioningDate: '',
  remark: '',
  quantity: '',
  unitPrice: '',
  totalPrice: '',
  valueType: '',
  assetSource: '',
  fundingSource: '',
  procurementType: '',
  discount: '',
  netWorth: '',
  depreciationState: '',
  bookedState: '',
  departmentId: '',
  principal: '',
  propertyUnit: '',
  useState: '',
  useDirection: '',
  useYear: '',
  usePurpose: '',
  measureState: '',
  earlyWarningCycle: '',
  checkLastDate: '',
  checkDate: ''
})

export default {
  name: 'InstrumentList',
  components: { Pagination, CustomTable },
  mixins: [defaultCrud, defaultForm, header()],
  data() {
    return {
      colConfigs: [
        { prop: 'baogaobianhao', label: '报告编号', align: 'center' },
        { prop: 'jieyueren', label: '借阅人', align: 'center', formatter: this.formatter.getChineseName },
        { prop: 'jieyueTime', label: '借阅时间', align: 'center' },
        { prop: 'guihuanTime', label: '归还时间', align: 'center' },
        { prop: 'createBy', label: '创建人', align: 'center', formatter: this.formatter.getChineseName },
        { prop: 'createTime', label: '创建时间', align: 'center' },
        { prop: 'updateBy', label: '更新人', align: 'center', formatter: this.formatter.getChineseName },
        { prop: 'updateTime', label: '更新时间', align: 'center' }
      ],
      permission: {
        add: ['instrument:add'],
        edit: ['instrument:update'],
        del: ['instrument:delete']
      },
      dicAssetTree: [],
      parentId: [],
      activeName: 'first',
      valueTypeList: [],
      assetSourceList: [],
      fundingSourceList: [],
      procurementTypeList: [],
      depreciationStateList: [],
      bookedStateList: [
        { label: '已入账', value: true },
        { label: '未入账', value: false }
      ],
      departmentTree: [],
      departmentId: 0,
      treeSelectProps: {
        children: 'children',
        label: 'name',
        value: 'id'
      },
      userList: this.$store.getters.allUser,
      useStateList: [],
      useDirectionList: [],
      usePurposeList: [],
      measureStateList: [
        { value: true, label: '计量' },
        { value: false, label: '非计量' }
      ],
      ifOverdueList: [
        { value: 0, label: '正常' },
        { value: 1, label: '预警' },
        { value: 2, label: '超期' }
      ],
      cycleList: [],
      rules: {
        departmentId: [
          { required: true, message: '请选择使用部门', trigger: 'blur' }
        ],
        quantity: [
          { required: true, message: '请填写设备数量', trigger: 'blur' }
        ],
        unitPrice: [
          { required: true, message: '请填写设备单价', trigger: 'blur' }
        ],
        totalPrice: [
          { required: true, message: '请填写设备总价', trigger: 'blur' }
        ],
        useState: [
          { required: true, message: '请选择使用状况', trigger: 'blur' }
        ],
        useYear: [
          { required: true, message: '请填写使用年限', trigger: 'blur' }
        ],
        measureState: [
          { required: true, message: '请选择计量状态', trigger: 'blur' }
        ],
        principal: [
          { required: true, message: '请选择使用人', trigger: 'blur' }
        ]
      },
      instrumentId: 0,
      moveDialogVisible: false,
      ifMeasure: false
    }
  },
  mounted() {
    // this.initDicDataList()
    this.getAllUser()
  },
  methods: {
    getAllUser() {
      this.api({
        url: '/user/all',
        method: 'get'
      }).then(res => {
        this.useStateList = res
      })
    },
    // 刷新之后重置部门查询的值
    [CRUD.HOOK.afterResetQuery]() {
      if (this.$refs.queryTreeSelect) {
        this.$refs.queryTreeSelect.clearHandle()
      }
    },
    // 新增与编辑前做的操作
    [CRUD.HOOK.afterToCU]() {
      this.activeName = 'first'
    },
    // 编辑框打开后做的操作
    [CRUD.HOOK.afterToEdit](crud, form) {
      this.departmentId = form.departmentId
      this.ifMeasure = form.measureState
    },
    // 编辑框取消后的操作
    [CRUD.HOOK.afterEditCancel]() {
      this.departmentId = 0
      this.ifMeasure = false
    },

    //  关闭所有弹窗
    resetChecks() {
      this.moveDialogVisible = false
    },
    //  给检索条件赋值（部门主键）
    getDepartmentId(value) {
      this.query.departmentId = value === 0 ? '' : value
    },
    //  更改行超期、预警字体颜色
    getTableRowClassName({ row }) {
      let color = ''
      switch (row.ifOverdue) {
        case 2:
          color = 'table-row-color-red'
          break
        case 1:
          color = 'table-row-color-orange'
          break
        default:
          color = ''
          break
      }
      return color
    }
  }
}
</script>
<style>
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0;
}
.identification {
  width: 30px;
  height: 15px;
  display: inline-block;
  border: gray 1px solid;
  border-radius: 15px;
  float: left;
}
</style>