上下模选择弹出框

src/views/mes/moldoperate/MoldOperateForm.vue

@@ -14,7 +14,7 @@
         </el-radio-group>
       </el-form-item>
       <el-form-item :label="t('MoldManagement.MoldOperate.device')" prop="deviceId" v-if="formData.operateType != null">
-        <el-select
+<!--        <el-select
           v-model="formData.deviceId"
           filterable
           clearable
@@ -24,7 +24,11 @@
           @change="deviceChange(formData.deviceId)"
         >
           <el-option v-for="opt in deviceOptions" :key="String(opt.value)" :label="opt.label" :value="opt.value" />
-        </el-select>
+        </el-select>-->
+
+        <el-input :model-value="displayItemDevice" readonly clearable class="device-ledger-selection-input"
+                  :placeholder="t('MoldManagement.MoldOperate.placeholderDevice')"
+                  @click="openCriticalComponentDialog"  @clear="clearBeijian" />
       </el-form-item>
       <el-form-item :label="t('MoldManagement.MoldOperate.mold')" prop="moldId" v-if="formData.operateType == '1'">
         <el-select
@@ -73,12 +77,93 @@
       <el-button @click="dialogVisible = false">{{ t('common.cancel') }}</el-button>
     </template>
   </Dialog>
+
+  <el-dialog
+    v-model="itemDialogVisible"
+    :title="t('QualityManagement.ZjSchema.selectItemDialogTitle')"
+    width="1300px"
+    draggable
+  >
+    <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true"
+             label-width="60px">
+      <el-form-item :label="t('EquipmentManagement.EquipmentLedger.deviceCode')"
+                    prop="deviceCode">
+        <el-input
+          v-model="queryParams.deviceCode"
+          :placeholder="t('EquipmentManagement.EquipmentLedger.placeholderDeviceCode')"
+          clearable @keyup.enter="handleQuery"
+          class="!w-240px"/>
+      </el-form-item>
+      <el-form-item :label="t('EquipmentManagement.EquipmentLedger.deviceName')"
+                    prop="deviceName">
+        <el-input
+          v-model="queryParams.deviceName"
+          :placeholder="t('EquipmentManagement.EquipmentLedger.placeholderDeviceName')"
+          clearable @keyup.enter="handleQuery"
+          class="!w-240px"/>
+      </el-form-item>
+
+      <el-form-item>
+        <el-button @click="handleQuery">
+          <Icon icon="ep:search" class="mr-5px"/>
+          {{ t('common.query') }}
+        </el-button>
+        <el-button @click="resetQuery">
+          <Icon icon="ep:refresh" class="mr-5px"/>
+          {{ t('common.reset') }}
+        </el-button>
+      </el-form-item>
+    </el-form>
+    <ContentWrap>
+      <el-table ref="multipleTableRef" v-loading="loading" :data="deviceList" :stripe="true"
+                @selection-change="handleSelectionChange" @select="handleSelect" @select-all="handleSelectAll" :show-overflow-tooltip="true"
+                class="no-select-all"
+                row-key="id">
+        <el-table-column type="selection" width="55" :reserve-selection="true" />
+        <el-table-column :label="t('EquipmentManagement.EquipmentLedger.deviceCode')"
+                         align="center" prop="deviceCode" min-width="160px" sortable/>
+        <el-table-column :label="t('EquipmentManagement.EquipmentLedger.deviceName')"
+                         align="center" prop="deviceName" min-width="140px" sortable/>
+        <el-table-column :label="t('EquipmentManagement.EquipmentLedger.ratedCapacity')"
+                         align="center" prop="ratedCapacity" min-width="120px"/>
+        <el-table-column :label="t('EquipmentManagement.EquipmentLedger.deviceSpec')"
+                         align="center" prop="deviceSpec"/>
+        <!--            <el-table-column :label="t('EquipmentManagement.EquipmentLedger.deviceModel')"
+                                     align="center" prop="deviceModel"/>-->
+        <!-- <el-table-column :label="t('EquipmentManagement.EquipmentLedger.deviceBrand')" align="center" prop="deviceBrand" /> -->
+        <el-table-column
+          :label="t('EquipmentManagement.EquipmentLedger.productionDate')" align="center"
+          prop="productionDate" :formatter="dateFormatter2"
+          width="120px" sortable/>
+        <el-table-column
+          :label="t('EquipmentManagement.EquipmentLedger.factoryEntryDate')" align="center"
+          prop="factoryEntryDate" :formatter="dateFormatter2"
+          width="120px" sortable/>
+      </el-table>
+
+      <Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
+                  @pagination="getList" />
+
+    </ContentWrap>
+
+    <template #footer>
+      <el-button @click="itemDialogVisible = false">
+        {{ t('common.cancel') }}
+      </el-button>
+      <el-button type="primary" @click="confirmSelectItems">
+        {{ t('common.ok') }}
+      </el-button>
+    </template>
+  </el-dialog>
 </template>
 <script setup lang="ts">
 import { MoldOperateApi, MoldOperateVO } from '@/api/mes/moldoperate'
 import { MoldBrandApi, MoldVO } from '@/api/erp/mold'
 import { DeviceLedgerApi, DeviceLedgerVO } from '@/api/mes/deviceledger'
-
+import {ref} from "vue";
+import {ElTable} from "element-plus";
+import {ZjItemApi, ZjItemVO} from "@/api/mes/zjitem";
+import { dateFormatter2 } from '@/utils/formatTime'
 /** 模具上下模 表单 */
 defineOptions({ name: 'MoldOperateForm' })
 
@@ -145,6 +230,7 @@ const open = async (type: string, id?: number) => {
   dialogTitle.value = t('action.' + type)
   formType.value = type
   resetForm()
+  initSelectedItems()
   await ensureDeviceOptionsLoaded()
   // 修改时，设置数据
   if (id) {
@@ -176,10 +262,13 @@ const open = async (type: string, id?: number) => {
       initializingOperateType.value = false
       formLoading.value = false
     }
+  }else{
+    ids.value=[]
   }
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
+
 /** 提交表单 */
 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
 // const submitForm = async () => {
@@ -337,4 +426,175 @@ const resetForm = () => {
   }
   formRef.value?.resetFields()
 }
+const ids = ref([])
+const itemList = ref<DeviceLedgerVO[]>([])
+const itemDialogVisible = ref(false)
+const multipleTableRef = ref<InstanceType<typeof ElTable>>()
+const deviceList = ref<DeviceLedgerVO[]>([])
+const selectedRows = ref<any[]>([])
+const total = ref(0)
+const queryFormRef = ref()
+const loading = ref(true)
+const displayItemDevice = computed( () => {
+  if (!ids.value.length)return ''
+  if (!itemList.value.length) {
+    return formData.value.deviceId ? String(formData.value.deviceId) : ''
+  }
+  const map = new Map(itemList.value.map((item) => [item.id, item.deviceName]))
+  const names = ids.value
+    .map((id) => map.get(id))
+    .filter((name) => name)
+  return names.join(',')
+})
+
+const openCriticalComponentDialog = async () => {
+  itemDialogVisible.value = true
+  let initIds= formData.value.deviceId!=undefined?formData.value.deviceId.toString().split(","):[]
+  ids.value=initIds.map((id) => Number(id))
+  setDefaultSelections()
+}
+
+// 设置默认选中的行
+const setDefaultSelections = () => {
+  // 等待DOM更新完成
+  nextTick(() => {
+    if (!multipleTableRef.value) return
+    multipleTableRef.value.clearSelection()
+    let initIds= formData.value.deviceId!=undefined?formData.value.deviceId.toString().split(","):[]
+    const rawSubjectIds =initIds.map((id) => Number(id))
+    if (rawSubjectIds.length != 0) {
+      let row = {
+        id: undefined
+      }
+      multipleTableRef.value.toggleRowSelection(row, true)
+    }
+    // 遍历数据，找到需要选中的行
+    deviceList.value.forEach(row => {
+      let id = row.id;
+      if (rawSubjectIds.includes(row.id)) {
+        multipleTableRef.value.toggleRowSelection(row, true)
+      }
+    })
+  })
+}
+
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  deviceCode: undefined,
+  deviceName: undefined,
+})
+const clearBeijian = () => {
+  formData.value.item = ''
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await DeviceLedgerApi.getDeviceLedgerPage(queryParams)
+    deviceList.value = data.list
+    total.value = data.total
+    // 数据加载后，重新设置选中状态
+    nextTick(() => {
+      toggleSelection()
+    })
+  } finally {
+    loading.value = false
+  }
+}
+
+// 切换选中状态
+const toggleSelection = () => {
+  if (!multipleTableRef.value || !selectedRows.value.length) return
+
+  // 遍历当前页的数据
+  deviceList.value.forEach(row => {
+    // 检查这一行是否在已选中数组中
+    const isSelected = selectedRows.value.some(item => item.id === row.id)
+
+    if (isSelected) {
+      // 如果应该选中，就选中
+      multipleTableRef.value!.toggleRowSelection(row, true)
+    } else {
+      // 否则取消选中
+      multipleTableRef.value!.toggleRowSelection(row, false)
+    }
+  })
+}
+
+const handleSelectionChange = (rows: ZjItemVO[]) => {
+  // 获取当前页所有行的 id
+  const currentPageIds = rows.map(item => item.id)
+
+  // 从已选中的数组中移除当前页的数据
+  selectedRows.value = selectedRows.value.filter(
+    item => !currentPageIds.includes(item.id)
+  )
+  // 添加当前页新选中的数据
+  selectedRows.value.push(...rows)
+  let a=1;
+}
+
+// 存储当前已选中的行
+const currentSelectedRows = ref([])
+
+const handleSelectAll = (selection) => {
+  let initIds=selection?.map((row) => row.id).filter((id) => id !== undefined) ?? []
+  ids.value =initIds.map((id) => Number(id))
+}
+
+// select 事件：row 是当前操作的行，selected 是操作后的状态
+const handleSelect = (selection, row) => {
+  // 判断是选中还是取消选中
+  const isSelected = selection.includes(row)
+  if (isSelected) {
+    // console.log(`✅ 行被选中: ID=${row.id}, Name=${row.name}`)
+    ids.value.push(row.id)
+  } else {
+
+    ids.value = ids.value.filter(
+      item => item !== row.id
+    )
+    // console.log(`❌ 行被取消选中: ID=${row.id}, Name=${row.name}`)
+  }
+  // 更新当前选中状态
+  currentSelectedRows.value = selection
+}
+const confirmSelectItems = () => {
+  formData.value.deviceId = ids.value.join(',')
+  itemDialogVisible.value = false
+}
+
+const initSelectedItems = async () => {
+  if (!itemList.value.length) {
+    loading.value = true
+    try {
+      itemList.value = await DeviceLedgerApi.getDeviceLedgerList()
+    } finally {
+      loading.value = false
+    }
+  }
+}
+
+/** 初始化 **/
+onMounted(async () => {
+  getList()
+})
 </script>
+<style scoped lang="scss">
+.no-select-all :deep(.el-table__header-wrapper .el-checkbox) {
+  display: none;
+}
+</style>