ezhizao_dms_vue/src/views/business/resourceAllocation/form.vue

<template>
  <el-dialog title="设备分配" v-model="visible" width="1000px" @close="close" append-to-body draggable>
    <el-form ref="dialogForm" class="master-container" :model="queryParams">
      <div style="display: flex; margin-top: 12px">
        <el-form-item label="设备名称：" prop="equipmentName" label-width="100px" >
          <el-input
            v-model.trim="queryParams.equipmentName"
            type="text"
            @keydown.enter.prevent
            style="width: 180px"
            placeholder="请输入设备名称"
            :clearable="true"
            @keyup.enter="handleSearch"
          />
        </el-form-item>
        <el-form-item label="设备编码：" prop="equipmentCode" label-width="100px" >
          <el-input
            v-model.trim="queryParams.equipmentCode"
            type="text"
            @keydown.enter.prevent
            style="width: 180px"
            placeholder="请输入设备编码"
            :clearable="true"
            @keyup.enter="handleSearch"
          />
        </el-form-item>
        <el-form-item label-width="20px">
          <el-button type="info" icon="Search"  @click="handleSearch">搜索</el-button>
          <!-- <el-button type="primary" icon="Delete"  plain @click="handleSearch('clear')">清空</el-button> -->
        </el-form-item>
      </div>
    </el-form>

    <el-table
      ref="dialogTable"
      :data="equimentDetailList"
      :row-key="getRowKey"
      size="small"
      v-loading="loading"
      border
      height="400px"
      header-row-class-name="list-header-row"
      row-class-name="list-row"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="40" align="center" :reserve-selection="true" />
      <el-table-column type="index" label="行号" width="50" align="center" />
      <el-table-column label="设备类别" prop="categoryName" width="110" align="center" />
      <el-table-column label="设备名称" prop="equipmentName" width="200" align="center" />
      <el-table-column label="设备规格" prop="standard" width="150" align="center" />
      <el-table-column label="设备编码" prop="equipmentCode" width="100" align="center" />
      <el-table-column label="使用部门" prop="usageDeptAlias" width="130" align="center" />
      <el-table-column label="备注" prop="remark" header-align="center" align="center" />
    </el-table>
    <!-- 分页 -->
    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" icon="Check" :disabled="selections.length === 0" @click="handleMultipleSelected">确定</el-button>
        <el-button icon="Close" @click="close">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref } from 'vue'
import { listProcess } from '@/api/business/process'
import { listDetails } from '@/api/business/equipment'
import { saveResourceAllocation, listResourceAllocation } from '@/api/business/resourceAllocation'
import { detailList } from '@/api/business/equipment'
const { proxy } = getCurrentInstance()
/** 字典数组区 */
const { equipment_status } = proxy.useDict('equipment_status')
const total = ref(0)
const props = defineProps({
  multiple: {
    type: Boolean,
    default: false
  },
  selected: {
    type: Array,
    defalut: []
  },
  singleSelected: {
    type: Function,
    default: null
  },
  multipleSelected: {
    type: Function,
    default: null
  }
})

const { singleSelected, multipleSelected, selected } = toRefs(props)
const equimentDetailList = ref([])
const visible = ref(false)
const loading = ref(false)
const data = reactive({
  queryParams: {
    pageSize: 10,
    pageNum: 1
  }
})
const selections = ref([])
const { queryParams } = toRefs(data)

/** 获取行 id */
function getRowKey(row) {
  return row.id
}

/**
 * 对话框打开 事件
 */
function open(row) {
  visible.value = true
  queryParams.value.usageDeptId = row.id
  getList()
}

/**
 * 对话框关闭 事件
 */
function close() {
  proxy.$refs.dialogForm.resetFields()
  proxy.$refs.dialogTable.clearSelection()
  visible.value = false
}
/**
 * 加载数据
 */
function getList() {
  loading.value = true
  console.log(queryParams.value)

  detailList(queryParams.value).then((res) => {
    equimentDetailList.value = res.rows
    total.value = res.total
    loading.value = false
  })
}

/**
 * 列表checkbox列选择 事件
 */
function handleSelectionChange(selection) {
  console.log(selection)
  selections.value = selection
}

function selectable(row, index) {
  if (selected.value.length > 0) {
    return !selected.value.some((l) => l.personId === row.id)
  } else {
    return true
  }
}

/**  搜索 事件 */
function handleSearch(type) {
  if (type && type === 'clear') {
    queryParams.value = {
      processAlias: '',
      total: 0,
      pageSize: 10,
      pageNum: 1
    }
  } else {
    getList()
  }
}

/** 单选事件 */
function handleSingleSelected(row) {
  if (singleSelected.value) {
    singleSelected.value(row)
  }
  close()
}

/** 多选事件 */
function handleMultipleSelected() {
  if (multipleSelected.value) {
    multipleSelected.value(selections.value)
  }
  close()
}

defineExpose({
  open
})
</script>