重置题名前端修改

src/views/data-fill/query.vue

@@ -303,36 +303,61 @@
             </div>
         </hc-new-dialog>
         <!-- 规则修改弹窗 -->
-        <hc-new-dialog v-model="ruleModal" title="重置题名" widths="88rem" :loading="ruleModalSaveLoad" @close="ruleModalClose" @save="ruleModalSave">
-            <div class="flex justify-between justify-items-center align-middle">
-                <div class="text-orange">
-                    <p>* 单条修改在表单下拉框选择规则，批量修改在右侧选规则点击【设置】统一更新所有规则</p>
-                    <p class="mt-2">* “修改后”仅为展示，【确认】后才会刷新文件题名</p>
-                </div>
-                <div>
-                    <span>批量设置：</span>
-                    <el-select 
-                        v-model="setValue" 
-                        placeholder="请选择" 
-                        style="width: 240px" 
-                        multiple
-                        collapse-tags
-                        :popper-append-to-body="false"
-                    >
-                        <el-option
-                            v-for="item in nodeTypeData"
-                            :key="item.value"
-                            :label="item.label"
-                            :value="item.value"
-                        />
-                    </el-select>
-                    <el-button type="primary" hc-btn size="small" class="ml-2" @click="changeRuleClick">设置</el-button>
+        <hc-new-dialog v-model="ruleModal" title="更改重置题名题名规则" widths="88rem" :loading="ruleModalSaveLoad" @close="ruleModalClose" @save="ruleModalSave">
+            <template #header>
+                <div class="flex flex-col">
+                    <div class="mb-4 text-18px">
+                        <span>更改重置题名题名规则</span>
+                    </div>
+                    <div class="flex justify-between justify-items-center text-orange">
+                        <p>* 单条修改在表单下拉框选择规则，批量修改在右侧选规则点击【设置】统一更新所有规则</p>
+                        <p>* “修改后”仅为展示，【确认】后才会刷新文件题名</p>
+                    </div>
                 </div>
+            </template>
+         
+            <div class="flex items-center justify-between">
+                <div>批量设置：</div>
+                <el-select 
+                    v-model="setValue" 
+                    placeholder="请选择" 
+                      
+                    multiple
+                    clearable
+                    class="custom-select flex-1"
+
+                    :popper-append-to-body="false"
+                >
+                    <el-option
+                        v-for="item in nodeTypeData"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                    />
+                </el-select>
+                <el-button type="primary" hc-btn size="small" class="ml-2" @click="batchSetRule">设置</el-button>
             </div>
+            
             <div style="position: relative; height: 240px" class="mt-2">
                 <hc-table :column="ruleTableColumn" :datas="ruleTableData">
                     <template #color="{ row }">
-                        <hc-table-input v-model="row.color" />
+                        <el-select 
+                            v-model="row.color" 
+                            placeholder="请选择" 
+                           
+                            multiple
+                            clearable
+                            class="custom-select"
+
+                            :popper-append-to-body="false"
+                        >
+                            <el-option
+                                v-for="item in nodeTypeData"
+                                :key="item.value"
+                                :label="item.label"
+                                :value="item.value"
+                            />
+                        </el-select>
                     </template>
                 </hc-table>
             </div>
@@ -1137,7 +1162,12 @@ const ruleTableData = ref([
     { id: 3, name: '名称3', text: '文本3', color: '无' },
  
 ])
+const batchSetRule = ()=>{
 
+   ruleTableData.value.forEach((ele)=>{
+        ele.color = setValue.value
+   })
+}
 //获取节点类型
 const nodeTypeData = ref([])
 const getWbsNodeTypeApi = async () => {
@@ -1162,6 +1192,9 @@ const getWbsNodeTypeApi = async () => {
 .iscusor {
     cursor: pointer;
 }
+.bg-primary-color {
+    background-color: var(--el-color-primary) ;
+}
 </style>
 
 <style lang="scss">
@@ -1184,4 +1217,17 @@ const getWbsNodeTypeApi = async () => {
         }
     }
 }
+.custom-select{
+    .el-select__wrapper {
+        height: 32px;
+        overflow-y: hidden;
+    }
+    .el-select__selection.is-near {
+        height: 32px;
+        overflow-y: hidden;
+        overflow-x: hidden;
+        flex-wrap: nowrap;
+     
+    }
+}
 </style>