vue3 新增弹窗多选分页

原创已于 2024-11-13 15:49:31 修改

· 170 阅读

0 ·

版权

文章标签：

#vue.js #elementui #javascript

于 2024-11-11 16:59:23 首次发布

<el-button :disabled="title == '查看领用单'" type="primary" plain icon="Plus" @click="addItem"

size="default">新增</el-button>

<deviceList ref="devideListRef" @details="changeData"></deviceList>

function addItem() {

if (!form.value.storeroomId) {

proxy.$modal.msgError("请选择库房");

return

}

devideListRef.value.handle(form.value.equipmentList, form.value.deptId, form.value.storeroomId)

}

子组件deviceList中代码

<template>
  <el-dialog v-model="deviceOpen" width="60%" append-to-body>
    <template #header>
      <div style="display: flex;align-items: center;">
        <div class="info-title"></div>
        <span style="font-size: 15px;color: #2d2d2d;">设备明细</span>
      </div>
    </template>
    <el-form :model="devideListQueryParams" ref="queryRef" :inline="true">
      <el-form-item label="设备名称:" prop="equipmentName">
        <template #label>
          <div class="formlabel">设备名称:</div>
        </template>
        <el-input style="width: 240px;" v-model="devideListQueryParams.equipmentName" placeholder="请输入设备名称"
          maxlength="15" />
      </el-form-item>
      <el-form-item label="资源分类" prop="typeCode">
        <template #label>
          <div class="formlabel">资源分类:</div>
        </template>
        <el-select style="width: 240px" v-model="devideListQueryParams.typeCode" placeholder="请选择"
          @change="deviceChange">
          <el-option v-for="(item, index) in typeCodeOpt" :key="index" :label="item.typeName" :value="item.typeCode" />
        </el-select>
      </el-form-item>
      <el-form-item label="资源类型" prop="subCode">
        <template #label>
          <div class="formlabel">资源类型:</div>
        </template>
        <el-select style="width: 240px" @visible-change="deviceVisibleChange()" v-model="devideListQueryParams.subCode"
          placeholder="请选择">
          <el-option v-for="(item, index) in deviceTypeOption" :key="index" :label="item.subName"
            :value="item.subCode" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- @select-all="selectAllChange" -->
    <el-table ref="devideDetailRef" :row-key="row => row.id" :data="devideList" :stripe="false" max-height="300"
      size="small" border class="index-table table_thin" @select="handleDetailSelectionChange" :loading="loading"
      @select-all="selectAllChange">
      <el-table-column type="selection" width="55" align="center" :reserve-selection="true" />
      <el-table-column label="序号" width="60" type="index" align="center"></el-table-column>
      <el-table-column label="库房" align="center" prop="storeroomName" min-width="100" :show-overflow-tooltip="true"
        class-name="ellipsis-cell">
        <template #default="scope">
          <span class="tableicon ellipsis">
            {{ scope.row.storeroomName }}
          </span>
        </template>
      </el-table-column>

      <el-table-column label="资源分类" align="center" prop="typeName" min-width="100">
        <template #default="scope">
          {{ scope.row.typeName || '--' }}
        </template>
      </el-table-column>
      <el-table-column label="资源类型" align="center" prop="subName" min-width="100">
        <template #default="scope">
          {{ scope.row.subName || '--' }}
        </template>
      </el-table-column>
      <el-table-column label="设备名称" align="center" prop="equipmentName" min-width="100" :show-overflow-tooltip="true"
        class-name="ellipsis-cell">
        <template #default="scope">
          <span class="tableicon ellipsis">
            {{ scope.row.equipmentName }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="序列号" align="center" prop="equipmentNo" min-width="100"></el-table-column>
      <el-table-column label="固定资产编号" align="center" prop="propertyNo" min-width="270"></el-table-column>
      <el-table-column label="品牌" align="center" prop="brand" min-width="100"></el-table-column>
      <el-table-column label="型号" align="center" prop="model" min-width="100"></el-table-column>
    </el-table>
    <pagination v-show="detailTotal > 0" :total="detailTotal" v-model:page="devideListQueryParams.pageNum"
      v-model:limit="devideListQueryParams.pageSize" @pagination="getList" />
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="detailSubmitForm" :loading="detailButtonLoading">确 定</el-button>
        <el-button @click="deviceOpen = false">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { getEquipmentList } from '@/api/system/receive';
import { ElMessage } from "element-plus";
import { nextTick, ref } from 'vue';
import { listType_info } from "@/api/system/typeInfo"
import { listClass_info } from "@/api/system/classInfo"
import {deepClone} from '@/utils/index'
const emit = defineEmits(['details'])
const selectDataList = ref([])
const { proxy } = getCurrentInstance();
const deviceTypeOption = ref([])
const detailTotal = ref(0);
const devideList = ref([]);
const detailButtonLoading = ref(false);
const selectedDeviceIds = ref([])
const data = reactive({
  devideListQueryParams: {
    pageNum: 1,
    pageSize: 2,
  },
});
const { devideListQueryParams } = toRefs(data);
const storeroomId = ref('')
const loading = false
const typeCodeOpt = ref([])
const deviceOpen = ref(false)
const devideDetailRef = ref(null)
function deviceChange(val) {
  if (val) {
    devideListQueryParams.value.subCode = ''
    listClass_info({ pageNum: 1, pageSize: 10000000, isStop: 0, typeCode: val }).then(res => {
      deviceTypeOption.value = res.rows
    })
  }
}
function handleDetailSelectionChange(row, val) {
  nextTick(() => {
    const v = row.find(v => val.id == v.id)
    if (v) {
      selectDataList.value.push(v)
    } else {
      let selectDataId = selectDataList.value.map(obj => obj.id)
      const obj = selectDataId.indexOf(val.id)
      if (obj != -1) {
        selectDataList.value.splice(obj, 1)
      }
    }
  })

}
function selectAllChange(row) {
  if (row && row.length > 0) {
    let selectDataId = selectDataList.value.map(obj => obj.id)
    row.forEach(ele => {
      if (selectDataId.indexOf(ele.id) == -1) {
        selectDataList.value.push(ele)
      } else {
        const obj = selectDataId.indexOf(ele.id)
        // 如果obj!==-1 包含 
        if (obj != -1) {
          selectDataList.value.splice(obj, 1, ele)
        } else {
          selectDataList.value.splice(obj, 1)
        }
      }
    })
  } else {
    let selectDataId = selectDataList.value.map(obj => obj.id)
    devideList.value.forEach(ele => {
      if (selectDataId.indexOf(ele.id) !== -1) {
        selectDataList.value.splice(ele, 1)
      }
    })
  }
}

function deviceVisibleChange() {
  if (!devideListQueryParams.value.typeCode) {
    ElMessage.error("请选择设备分类");
    return;
  }
}
// 设备明细确定按钮
function detailSubmitForm() {
  if (selectDataList.value.length === 0) return ElMessage.error("请选择出库设备");
  deviceOpen.value = false
  emit('details', JSON.parse(JSON.stringify(selectDataList.value)))
}
// 搜索
function handleQuery() {
  devideListQueryParams.value.pageNum = 1;
  getList();
}
/** 重置按钮操作 */
function resetQuery() {
  deviceTypeOption.value = []
  selectedDeviceIds.value = []
  proxy.resetForm("queryRef");
  handleQuery();
}

function getListType_info() {
  listType_info({ pageNum: 1, pageSize: 10000000, isStop: 0, category: "0" }).then(res => {
    typeCodeOpt.value = res.rows
  })
}
function getList() {
  nextTick(() => {
    getEquipmentList({ ...devideListQueryParams.value, storeroomId: storeroomId.value }).then(res => {
      devideList.value = res.rows
      detailTotal.value = res.total
      if (selectDataList.value && selectDataList.value.length > 0) {
        const selectDataId = selectDataList.value.map(obj => obj.id)
        devideDetailRef.value.clearSelection();
        nextTick(() => {
          let list = [...selectDataList.value]
          selectDataList.value = [...new Set(list.map(item => JSON.stringify(item)))].map(i => JSON.parse(i))
          devideList.value.forEach(row => {
            if (selectDataId.includes(row.id)) {
              devideDetailRef.value.toggleRowSelection(row);
            }
          });
        })
      } else {
        if (selectDataList.value.length == 0) return devideDetailRef.value.clearSelection();
      }
    })
  })
}
function handle(arr, id, storeId) {
  selectDataList.value = []
  selectDataList.value = deepClone(arr)
  devideListQueryParams.value.pageNum = 1
  getListType_info()
  devideListQueryParams.value.deptId = id
  storeroomId.value = storeId
  deviceOpen.value = true
  getList()
}
defineExpose({
  handle
});
</script>

<style></style>