equipment/src/views/borrow/borrow.vue

<template>
  <div class="app-container">
    <!--头部选项-->
    <div class="head-container">
      <div>
        <el-input v-model="query.baogaobianhao" placeholder="报告编号" class="filter-item" style="width: 200px" clearable @keyup.enter.native="crud.toQuery" />
        <el-input v-model="query.shiyongdanwei" placeholder="使用单位" class="filter-item" style="width: 200px" clearable @keyup.enter.native="crud.toQuery" />
        <el-input v-model="query.zhucedaima" placeholder="注册代码" class="filter-item" style="width: 200px" clearable @keyup.enter.native="crud.toQuery" />
        <el-input v-model="query.shiyongdengjibianhao" placeholder="使用登记证编号" class="filter-item" clearable style="width: 200px" @keyup.enter.native="crud.toQuery" />
        <el-button class="filter-item" 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">
          <el-button v-permission="permission.edit" type="text" icon="edit" @click="editFn(scope.row)">
            借阅
          </el-button>
        </template>
      </el-table-column>
    </CustomTable>
    <pagination />
    <el-dialog :visible.sync="visible" :title="crud.status.title">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px" inline>
        <el-form-item label="报告编号：" prop="baogaobianhao">
          <el-input v-model="form.baogaobianhao" placeholder="请输入报告编号" clearable type="text" />
        </el-form-item>
        <el-form-item label="借阅时间：" prop="jieyueTime">
          <el-date-picker v-model="form.jieyueTime" style="width: 215px;" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择借阅时间" clearable type="datetime" />
        </el-form-item>
        <el-form-item label="借阅人：" prop="jieyueren">
          <el-select v-model="form.jieyueren" placeholder="请选择借阅人">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.nickname"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="crud.cancelCU">
          取 消
        </el-button>
        <el-button type="primary" @click="borrowFn">
          确 认
        </el-button>
      </div>
    </el-dialog>
  </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'
import { addBorrowFn } from '@/api/common'
// crud交由presenter持有
const defaultCrud = presenter(
  CRUD({
    title: '借阅记录',
    url: '/borrowing/getCanBorrowYsjl',
    orderBy: []
    // orderBy: ['y.id desc'],
  })
)

// 设置初始form
const defaultForm = form({
  baogaobianhao: '',
  jieyueTime: '',
  jieyueren: '',
  state: true,
  ysjlId: ''
})

export default {
  name: 'InstrumentList',
  components: { Pagination, CustomTable },
  mixins: [defaultCrud, defaultForm, header()],
  data() {
    return {
      visible: false,
      colConfigs: [
        { prop: 'baogaobianhao', label: '报告编号', align: 'center' },
        { prop: 'shiyongdanwei', label: '使用单位', align: 'center' },
        { prop: 'shigongdanwei', label: '施工单位', align: 'center' },
        { prop: 'zhizaodanwei', label: '制造单位', align: 'center' },
        { prop: 'jianyanrenyuan', label: '检验人员', align: 'center', formatter: this.formatter.getChineseName },
        { prop: 'zhucedaima', label: '注册代码', align: 'center' },
        { prop: 'shiyongdengjibianhao', label: '使用登记证编号', align: 'center' },
        { slot: 'operation' }
      ],
      permission: {
        add: ['borrow:jybg-list:add'],
        edit: ['borrow:jybg-list:update'],
        del: ['borrow:jybg-list:delete']
      },
      options: [],
      form: {
        baogaobianhao: '',
        jieyueTime: '',
        jieyueren: '',
        state: false,
        ysjlId: ''
      },
      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: {
    // 刷新之后重置部门查询的值
    [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
    },
    getAllUser() {
      this.api({
        url: '/user/all',
        method: 'get'
      }).then(res => {
        this.options = res
      })
    },
    editFn(data) {
      this.visible = true
      this.form.baogaobianhao = data.baogaobianhao
      this.form.ysjlId = data.id
    },
    borrowFn() {
      addBorrowFn(this.form).then(res => {
        this.$message({ message: '借阅成功', type: 'success' })
        this.visible = false
        this.crud.refresh()
      })
    },
    // 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()
      //   })
    },

    //  关闭所有弹窗
    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>