equipment/src/views/borrow/returned.vue

<template>
  <div class="app-container">
    <!--头部选项-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <el-input v-model="query.equipmentNum" placeholder="请输入设备编号" style="width: 200px;" class="filter-item" clearable @keyup.enter.native="crud.toQuery" />
        <el-input v-model="query.customName" placeholder="请输入新名称" style="width: 200px;" class="filter-item" clearable @keyup.enter.native="crud.toQuery" />
        <el-input v-model="query.unitPrice" placeholder="请输入单价" style="width: 150px;" class="filter-item" clearable @keyup.enter.native="crud.toQuery" />
        <el-select v-model="query.measureState" placeholder="请选择计量状态" style="width: 150px;" class="filter-item" clearable>
          <el-option v-for="item in measureStateList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-select v-model="query.ifOverdue" placeholder="请选择超期状态" style="width: 150px;" class="filter-item" clearable>
          <el-option v-for="item in ifOverdueList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-select v-model="query.useState" placeholder="请选择使用状况" style="width: 150px;" class="filter-item" clearable>
          <el-option v-for="item in useStateList" :key="item.value" :label="item.label" :value="item.id" />
        </el-select>
      </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">
          <el-button type="text" @click="returnFn(scope.row)">
            归还
          </el-button>
        </template>
      </el-table-column>
    </CustomTable>
    <pagination />
  </div>
</template>

<script>
import CRUD, { form, header, presenter, crud } 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: false
  }
}))

// 设置初始form
const defaultForm = form({
})
export default {
  name: 'InstrumentList',
  components: { Pagination, CustomTable },
  mixins: [defaultCrud, defaultForm, header(), crud()],
  data() {
    return {
      colConfigs: [
        { prop: 'baogaobianhao', label: '报告编号', align: 'center' },
        { prop: 'jieyueren', label: '借阅人', align: 'center', formatter: this.formatter.getChineseName },
        { prop: 'jieyueTime', 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' },
        { slot: 'operation' }
      ],
      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() {
  },
  methods: {
    // 刷新之后重置部门查询的值
    [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
    },
    // EXCEL上传方法
    beforeUpload(file) {
      const isExcel = file.type === 'application/vnd.ms-excel' || file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      if (!isExcel) {
        this.$notify.error('只能上传xls/xlsx格式的文件')
        return false
      }
      const fd = new FormData()
      fd.append('file', file)
      fd.append('type', 3)
    //   uploadInstrumentData(fd).then(() => {
    //     this.$notify.success('导入数据成功。')
    //     this.crud.toQuery()
    //   })
    },
    returnFn(row) {
      console.log(row)
      const currentTime = this.formatter.dateFormat('YYYY-MM-dd HH:mm:ss')
      const data = {
        guihuanTime: currentTime,
        id: row.id,
        state: true
      }
      this.api({
        url: '/borrowing',
        method: 'put',
        data: data
      }).then(res => {
        this.$message({ message: '归还成功', type: 'success' })
        this.crud.refresh()
      })
    },
    //  关闭所有弹窗
    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>