equipment/src/views/device_management/components/Move.vue

<template>
  <el-dialog title="领用、借用管理" width="60%" style="margin-top:-5%;" :visible.sync="dialogVisible" @close="closeDialog">
    <el-form>
      <div class="filter-container">
        <!--头部功能-->
        <div class="head-container">
          <div v-if="crud.props.searchToggle">
            <el-select
              v-model="query.applicantId"
              filterable
              placeholder="请选择申请人"
              class="filter-item"
              clearable
              @keyup.enter.native="crud.toQuery"
            >
              <el-option v-for="item in userList" :key="item.id" :label="item.nickname" :value="item.id" />
            </el-select>
            <el-date-picker
              v-model="query.applyDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择申请使用日期"
              style="width: 200px;"
              class="filter-item"
              clearable
              @keyup.enter.native="crud.toQuery"
            />
            <TreeSelect
              ref="treeSelect"
              :props="treeSelectProps"
              placeholder-select="请选择申请科室"
              :options="departmentTree"
              :clearable="true"
              :accordion="true"
              class="filter-item"
              @getValue="getDepartmentId($event)"
            />
            <query :crud="crud" />
          </div>
          <crud :permission="permission" />
        </div>
        <!--表格内容-->
        <CustomTable ref="customTable" :col-configs="colConfigs" :columns="columns" :crud="crud">
          <el-table-column
            v-if="checkPermission(permission.edit)"
            slot="operation"
            align="center"
            width="100"
            label="操作"
          >
            <template slot-scope="scope">
              <Edit :data="scope.row" :disabled-edit="false" :permission="permission" />
            </template>
          </el-table-column>
        </CustomTable>
        <pagination />
        <el-dialog
          :before-close="crud.cancelCU"
          :visible="crud.status.editor > 0"
          :title="crud.status.title"
          :append-to-body="true"
        >
          <el-form ref="form" :model="form" :rules="rules" label-width="120px" inline>
            <el-form-item label="当前使用人：" prop="currentUserId">
              <el-select v-model="form.currentUserId" filterable placeholder="请选择当前使用人" clearable>
                <el-option
                  v-for="item in userList"
                  :key="item.id"
                  :label="item.nickname"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="当前使用科室：" prop="currentDepartmentId">
              <TreeSelect
                v-if="crud.status.editor > 0"
                ref="treeSelect"
                :props="treeSelectProps"
                placeholder-select="请选择当前使用科室"
                :options="departmentTree"
                :value="currentDepartmentId"
                :clearable="true"
                :accordion="true"
                style="width: 215px;"
                @getValue="getCurrentUserDepartmentValue($event)"
              />
            </el-form-item>
            <el-form-item label="申请人：" prop="applicantId">
              <el-select v-model="form.applicantId" filterable placeholder="请选择申请人" clearable>
                <el-option
                  v-for="item in userList"
                  :key="item.id"
                  :label="item.nickname"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="申请科室：" prop="applyDepartmentId">
              <TreeSelect
                v-if="crud.status.editor > 0"
                ref="treeSelect"
                :props="treeSelectProps"
                placeholder-select="请选择申请科室"
                :options="departmentTree"
                :value="applyDepartmentId"
                :clearable="true"
                :accordion="true"
                style="width: 215px;"
                @getValue="getApplyDepartmentValue($event)"
              />
            </el-form-item>
            <el-form-item label="申请使用日期：" prop="applyDate">
              <el-date-picker
                v-model="form.applyDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择申请使用日期"
                style="width: 215px;"
                class="filter-item"
                clearable
              />
            </el-form-item>
            <el-form-item label="使用状态：" prop="usageStatus">
              <el-radio v-model="form.usageStatus" :label="false">
                领用
              </el-radio>
              <el-radio v-model="form.usageStatus" :label="true">
                借用
              </el-radio>
            </el-form-item>
            <el-form-item label="备注：" prop="remark">
              <el-input
                v-model="form.remark"
                style="width: 560px;"
                maxlength="200"
                type="textarea"
                placeholder="请填写备注信息"
                :autosize="{ minRows: 5, maxRows: 5}"
              />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="crud.cancelCU">
              取 消
            </el-button>
            <el-button type="primary" @click="crud.submitCU">
              确 认
            </el-button>
          </div>
        </el-dialog>
      </div>
    </el-form>
  </el-dialog>
</template>

<script>
import CRUD, { form, header, presenter } from '@/components/Crud/crud'
import Crud from '@/components/Crud'
import Query from '@/components/Crud/Query'
import CustomTable from '@/components/Crud/Table'
import Edit from '@/components/Crud/Edit'
import Pagination from '@/components/Crud/Pagination'
import InstrumentMove from '@/api/instrument_move'
import TreeSelect from '@/components/TreeSelect'

// crud交由presenter持有
const defaultCrud = presenter(CRUD({
  title: '领用、借用管理',
  url: '/move/list',
  orderBy: ['id desc'],
  crudMethod: { ...InstrumentMove },
}))

// 设置初始form
const defaultForm = form({
  id: null,
  usageStatus: false,
  applicantId: null,
  applyDepartmentId: null,
  applyDate: '',
  currentUserId: '',
  currentDepartmentId: null,
  remark: '',
  instrumentId: null
})

// 自定义模板内容
const PrefixPlusText = {
  props: ['value'],
  template: `
        <el-tag :type="value ? 'warning' : 'success'">{{ value ? '借用' : '领用' }}</el-tag>`
}

export default {
  name: 'Move',
  components: { Crud, Query, CustomTable, Pagination, TreeSelect, Edit },
  mixins: [defaultCrud, defaultForm, header()],
  props: {
    instrumentId: {
      type: Number,
      default: 0,
      required: true
    },
    departmentTree: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      dialogVisible: false,
      userList: this.$store.getters.allUser,
      treeSelectProps: {
        children: 'children',
        label: 'name',
        value: 'id'
      },
      colConfigs: [
        { prop: 'currentUserId', label: '当前使用人', align: 'center', formatter: this.formatter.getChineseName },
        {
          prop: 'currentDepartmentId',
          label: '当前使用科室',
          align: 'center',
          formatter: this.formatter.formatterDepartmentName
        },
        { prop: 'applicantId', label: '申请人', align: 'center', formatter: this.formatter.getChineseName },
        {
          prop: 'applyDepartmentId',
          label: '申请科室',
          align: 'center',
          formatter: this.formatter.formatterDepartmentName
        },
        { prop: 'applyDate', label: '申请使用日期', align: 'center' },
        { prop: 'remark', label: '备注', align: 'center' },
        { prop: 'usageStatus', label: '使用状态', align: 'center', component: PrefixPlusText },
        { slot: 'operation' }
      ],
      permission: {
        add: ['instrument:add'],
        edit: ['instrument:update'],
        del: ['instrument:delete']
      },
      applyDepartmentId: 0,
      currentDepartmentId: 0,
      rules: {
        currentUserId: [
          { required: true, message: '请选择当前使用人', trigger: 'blur' }
        ],
        currentDepartmentId: [
          { required: true, message: '请选择当前使用科室', trigger: 'blur' }
        ],
        applicantId: [
          { required: true, message: '请选择申请人', trigger: 'blur' }
        ],
        applyDepartmentId: [
          { required: true, message: '请选择申请科室', trigger: 'blur' }
        ],
        applyDate: [
          { required: true, message: '请选择申请使用日期', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.crud.optionShow = {
      add: true,
      edit: false,
      del: true
    }
  },
  methods: {
    // 刷新前做的操作
    [CRUD.HOOK.beforeRefresh](crud) {
      crud.query.id = this.instrumentId
    },
    //  新增前做的操作
    [CRUD.HOOK.beforeToAdd](crud, form) {
      this.applyDepartmentId = 0
      this.currentDepartmentId = 0
      form.id = this.instrumentId
      form.instrumentId = this.instrumentId
    },
    //  编辑框打开后做的操作
    [CRUD.HOOK.afterToEdit](crud, form) {
      this.applyDepartmentId = form.applyDepartmentId
      this.currentDepartmentId = form.currentDepartmentId
    },
    //  编辑框取消后的操作
    [CRUD.HOOK.afterEditCancel]() {
      this.applyDepartmentId = 0
      this.currentDepartmentId = 0
    },
    //  组件初始化
    init() {
      this.dialogVisible = true
    },
    //  关闭弹窗
    closeDialog() {
      this.$emit('close')
    },
    //  给检索条件赋值（申请部门主键）
    getDepartmentId(value) {
      this.query.applyDepartmentId = value === 0 ? '' : value
    },
    //  from表单当前使用部门赋值
    getCurrentUserDepartmentValue(value) {
      this.form.currentDepartmentId = value
    },
    //  from表单申请部门赋值
    getApplyDepartmentValue(value) {
      this.form.applyDepartmentId = value
    }
  }
}
</script>