物料信息复制样式修改

src/views/pro-steps/popUpView/copyPopUp.vue

@@ -1,14 +1,25 @@
 <template>
   <div class="midPopUp" v-if="modelValue" @click.stop="handleClose">
-    <div class="container" @click.stop>
+    <div class="boxBody" @click.stop>
       <div class="headerTittle">选择流转卡号</div>
       <div class="selectBox">
         <el-select
           v-model="selectedProcess"
           :filterable="true"
+          collapse-tags
+          :max-collapse-tags="5"
           multiple
           style="margin-bottom: 20px"
         >
+          <template #header>
+            <el-checkbox
+              v-model="checkAll"
+              :indeterminate="indeterminate"
+              @change="handleCheckAll"
+            >
+              全选
+            </el-checkbox>
+          </template>
           <el-option
             v-for="item in processList"
             :key="item"
@@ -41,6 +52,16 @@ const props = defineProps({
   },
 });
 const store = useProcessStore();
+const indeterminate = ref(false);
+const checkAll = ref(false);
+const handleCheckAll = (val) => {
+  indeterminate.value = false;
+  if (val) {
+    selectedProcess.value = processList.value.map((_) => _);
+  } else {
+    selectedProcess.value = [];
+  }
+};
 const toGetProcessedList = async () => {
   getunProcessedList(store.scanInfo.id).then((res) => {
     processList.value = res.data ?? [];
@@ -69,8 +90,22 @@ watch(
 .el-divider {
   margin-top: 0;
 }
-.container {
-  height: 200px;
+.boxBody {
+  width: 50vw;
+  min-height: 200px;
+  background-color: #f1f3f5;
+  border-radius: 16px;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  .headerTittle {
+    width: 100%;
+    height: 55px;
+    text-align: center;
+    line-height: 55px;
+    font-size: 38px;
+    font-weight: 500;
+  }
   .selectBox {
     padding: 20px;
   }