lcw

src/components/ChooseList/ChooseMarks/index.vue

@@ -7,9 +7,17 @@
     @close="closed"
   >
     <div>
-    <div class="flex" style="margin-bottom: 10px;">
-      <el-button :type="bqLb === '01' ? 'success' : 'info'" @click="qihuan('01')">标签大类</el-button>
-      <el-button  :type="bqLb === '02' ? 'success' : 'info'" @click="qihuan('02')"> 标签小类 </el-button>
+       <div class="mark-tabs">
+      <span class="label">标签类型：</span>
+      <el-radio-group v-model="bqLx" @change="changeBqLx">
+        <el-radio-button label="02">行为标签</el-radio-button>
+        <el-radio-button label="01">身份标签</el-radio-button>
+      </el-radio-group>
+      <span class="label" style="margin-left: 20px;">类别：</span>
+      <el-radio-group v-model="bqLb" @change="qihuan">
+        <el-radio-button label="01">大类</el-radio-button>
+        <el-radio-button label="02">小类</el-radio-button>
+      </el-radio-group>
     </div>
       <el-form :model="listQuery" class="mosty-from-wrap" :inline="true">
         <el-form-item label="标签名称">
@@ -83,7 +91,7 @@
 
 <script setup>
 import { qcckGet } from "@/api/qcckApi.js";
-import { defineProps, ref, getCurrentInstance, watch } from "vue";
+import { defineProps, ref, getCurrentInstance, watch, nextTick } from "vue";
 const { proxy } = getCurrentInstance();
 const { D_GS_BQ_DJ, D_GS_SSYJ } = proxy.$dict("D_GS_BQ_DJ", "D_GS_SSYJ"); //获取字典数据
 const props = defineProps({
@@ -107,6 +115,11 @@ const props = defineProps({
   roleIds: {
     type: Array,
     default: []
+  },
+  // 标签类型：02-行为标签，01-身份标签
+  bqLx: {
+    type: String,
+    default: "02"
   }
 });
 const loading = ref(false);
@@ -120,6 +133,8 @@ const keyVal = ref();
 const multipleUserRef = ref(null);
 const multipleSelectionUser = ref([]);
 const tableData = ref([]);
+const bqLx = ref(props.bqLx);
+const bqLb = ref("01");
 const emits = defineEmits(["update:modelValue", "choosed"]);
 const keyid = (row) => {
   return row.id;
@@ -148,9 +163,9 @@ const onComfirm = () => {
   closed();
 };
 const qihuan = (val) => {
-  bqLb.value = val
-  getListData()
-}
+  listQuery.value.pageCurrent = 1;
+  getListData();
+};
 /**
  * pageSize 改变触发
  */
@@ -168,7 +183,7 @@ const handleCurrentChange = (currentPage) => {
 const getListData = () => {
   keyVal.value++;
   loading.value = true;
-  const params = { ...listQuery.value, bqLx: "02",bqLb:bqLb.value };
+  const params = { ...listQuery.value, bqLx: bqLx.value, bqLb: bqLb.value };
   qcckGet(params, "/mosty-gsxt/tbGsxtBqgl/selectPage")
     .then((res) => {
       loading.value = false;
@@ -183,23 +198,25 @@ const getListData = () => {
 
 //列表回显 - 优化版，确保已选择数据正确回显
 function multipleUser() {
-  if (!multipleUserRef.value || !tableData.value || tableData.value.length === 0) {
-    return;
-  }
+  nextTick(() => {
+    if (!multipleUserRef.value || !tableData.value || tableData.value.length === 0) {
+      return;
+    }
 
-  // 先清除所有选中状态
-  tableData.value.forEach((item) => {
-    multipleUserRef.value.toggleRowSelection(item, false);
-  });
-
-  // 再根据roleIds重新设置选中状态
-  if (props.roleIds && Array.isArray(props.roleIds) && props.roleIds.length > 0) {
+    // 先清除所有选中状态
     tableData.value.forEach((item) => {
-      if (props.roleIds.some((id) => id == item.id)) {
-        multipleUserRef.value.toggleRowSelection(item, true);
-      }
+      multipleUserRef.value.toggleRowSelection(item, false);
     });
-  }
+
+    // 再根据roleIds重新设置选中状态
+    if (props.roleIds && Array.isArray(props.roleIds) && props.roleIds.length > 0) {
+      tableData.value.forEach((item) => {
+        if (props.roleIds.some((id) => id == item.id)) {
+          multipleUserRef.value.toggleRowSelection(item, true);
+        }
+      });
+    }
+  });
 }
 
 const handleFilter = () => {
@@ -218,7 +235,11 @@ const handleSelectionChange = (val) => {
     multipleSelectionUser.value = val;
   }
 };
-const bqLb=ref('01')
+const changeBqLx = (val) => {
+  listQuery.value.pageCurrent = 1;
+  multipleUserRef.value?.clearSelection();
+  getListData();
+};
 // 监听弹窗打开状态，打开时重新加载数据
 watch(
   () => props.modelValue,
@@ -233,19 +254,40 @@ watch(
 // 监听roleIds变化，确保数据回显正确
 watch(
   () => props.roleIds,
-  (newRoleIds) => {
-    // 使用setTimeout确保在表格数据加载完成后再进行选择
-    setTimeout(() => {
+  () => {
+    nextTick(() => {
       multipleUser();
-    }, 100);
+    });
   },
   { deep: true }
 );
+
+// 监听外部传入的 bqLx 变化
+watch(
+  () => props.bqLx,
+  (newVal) => {
+    bqLx.value = newVal;
+  }
+);
 </script>
 
 <style lang="scss" scoped>
 @import "@/assets/css/layout.scss";
 @import "@/assets/css/element-plus.scss";
+
+.mark-tabs {
+  display: flex;
+  align-items: center;
+  margin-bottom: 15px;
+  padding: 10px 15px;
+  background: #f5f7fa;
+  border-radius: 6px;
+
+  .label {
+    font-weight: 500;
+    color: #606266;
+  }
+}
 </style>
 <style>
 .tabBoxRadio .el-checkbox__inner {