lcw

2026-03-29 19:46:50 +08:00
parent 60de16032f
commit af838854fa
49 changed files with 9947 additions and 1512 deletions
--- a/src/components/ChooseList/ChooseMarks/index.vue
+++ b/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 {
--- a/src/components/MyComponents/Upload/index.vue
+++ b/src/components/MyComponents/Upload/index.vue
@ -1,5 +1,9 @@
 <template>
-  <div class="form-item-box" :class="props.showBtn ? 'showBtn-upload' : ''" :style="{ width: width }">
+  <div
+    class="form-item-box"
+    :class="props.showBtn ? 'showBtn-upload' : ''"
+    :style="{ width: width }"
+  >
    <el-upload
      v-bind="$attrs"
      :headers="headers"
@ -13,19 +17,33 @@
      :before-remove="beforeRemove"
      :on-exceed="handleExceed"
      :on-success="handlerSuccess"
-      :before-upload="beforeImgUpload">
+      :before-upload="beforeImgUpload"
+    >
      <template #default>
-        <el-button v-if="props.showBtn" size="small" type="primary">上传文件</el-button>
+        <el-button v-if="props.showBtn" size="small" type="primary"
+          >上传文件</el-button
+        >
        <el-icon v-else><Plus /></el-icon>
      </template>
      <template #file="{ file }" v-if="!props.showBtn">
        <div v-if="props.isImg">
-          <img class="el-upload-list__item-thumbnail" :src="file.url || ''" alt="" />
+          <img
+            class="el-upload-list__item-thumbnail"
+            :src="file.url || ''"
+            alt=""
+          />
          <span class="el-upload-list__item-actions">
-            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
+            <span
+              class="el-upload-list__item-preview"
+              @click="handlePictureCardPreview(file)"
+            >
              <el-icon> <zoom-in /></el-icon>
            </span>
-            <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file, fileList)">
+            <span
+              v-if="!disabled"
+              class="el-upload-list__item-delete"
+              @click="handleRemove(file, fileList)"
+            >
              <el-icon><Delete /></el-icon>
            </span>
          </span>
@ -36,10 +54,18 @@
            <span class="file-name">{{ file.name }}</span>
          </div>
          <span class="el-upload-list__item-actions">
-            <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
+            <span
+              v-if="!disabled"
+              class="el-upload-list__item-delete"
+              @click="handleDownload(file)"
+            >
              <el-icon><Download /></el-icon>
            </span>
-            <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file, fileList)">
+            <span
+              v-if="!disabled"
+              class="el-upload-list__item-delete"
+              @click="handleRemove(file, fileList)"
+            >
              <el-icon><Delete /></el-icon>
            </span>
          </span>
@ -54,7 +80,15 @@

 <script setup>
 import { COMPONENT_WIDTH } from "@/constant";
-import { ref, defineProps, defineEmits, computed, watch, onMounted, onUnmounted } from "vue";
+import {
+  ref,
+  defineProps,
+  defineEmits,
+  computed,
+  watch,
+  onMounted,
+  onUnmounted
+} from "vue";
 import { ElMessage } from "element-plus";
 import { useStore } from "vuex";
 const props = defineProps({
@ -98,35 +132,41 @@ const headers = ref({
 });
 const fileList = ref([]);

-watch(() => props.modelValue,(val) => {
-  let arr = val ?  (Array.isArray(val) ? val :[val]): [];
-  if(arr.length == 0 ) return fileList.value = [];
-  fileList.value = arr.map((el) => {
-    if (Object.prototype.toString.call(el) === "[object Object]") {
-      // 确保file.url始终是字符串URL
-      const fileUrl = props.isAll ? `/mosty-api/mosty-base/minio/image/download/` + el.id : el.url;
-      return {
-        ...el,
-        url: String(fileUrl || ''),
-        name: el.name || '',
-
-      };
-    } else {
-      return {
-        url: String(`/mosty-api/mosty-base/minio/image/download/` + el || ''),
-        id: el
-      };
-    }
-  });
-  console.log(fileList.value, "fileList.value");
-
-},{ immediate: true,deep:true });
+watch(
+  () => props.modelValue,
+  (val) => {
+    let arr = val ? (Array.isArray(val) ? val : [val]) : [];
+    if (arr.length == 0) return (fileList.value = []);
+    fileList.value = arr.map((el) => {
+      if (Object.prototype.toString.call(el) === "[object Object]") {
+        // 确保file.url始终是字符串URL
+        const fileUrl = props.isAll
+          ? `/mosty-api/mosty-base/minio/image/download/` + el.id
+          : el.url;
+        return {
+          ...el,
+          url: String(fileUrl || ""),
+          name: el.name || ""
+        };
+      } else {
+        return {
+          url: String(`/mosty-api/mosty-base/minio/image/download/` + el || ""),
+          id: el
+        };
+      }
+    });
+    console.log(fileList.value, "fileList.value");
+  },
+  { immediate: true, deep: true }
+);

 const actionUrl = computed(() => {
  if (props.isAll) {
    return "/mosty-api/mosty-base/minio/image/upload/id";
  } else {
-    return props.isImg ? "/mosty-api/mosty-base/minio/image/upload/id": "/mosty-api/mosty-base/minio/file/uploadObj";
+    return props.isImg
+      ? "/mosty-api/mosty-base/minio/image/upload/id"
+      : "/mosty-api/mosty-base/minio/file/uploadObj";
  }
 });

@ -158,7 +198,17 @@ const getSuffix = (fileName) => {
  //pdf
  if (suffix === "pdf") return "PDF";
  //视频 音频
-  var videolist = ["mp4","m2v","mkv","rmvb","wmv","avi","flv","mov","m4v"];
+  var videolist = [
+    "mp4",
+    "m2v",
+    "mkv",
+    "rmvb",
+    "wmv",
+    "avi",
+    "flv",
+    "mov",
+    "m4v"
+  ];
  if (videolist.includes(suffix)) return "VIDEO";
  var musiclist = ["mp3", "wav", "wmv"];
  if (musiclist.includes(suffix)) return "MUSIC";
@ -177,19 +227,19 @@ const handlerSuccess = (res, file) => {
  file.url = `/mosty-api/mosty-base/minio/image/download/` + res.data;
  file.id = res.data;
  fileList.value.push(file);
-  let arr = []
-  if(props.isImg){
-    arr = fileList.value.map((el) => el.id)
+  let arr = [];
+  if (props.isImg) {
+    arr = fileList.value.map((el) => el.id);
  } else {
-      console.log(fileList,"测试");
+    console.log(fileList, "测试");
    arr = fileList.value.map((el) => {
-      console.log(el,'xunhuan');
+      console.log(el, "xunhuan");
      return {
-        id: el.id, name: el.name
-      }
-    })
-      console.log(arr,"测试2222");
-
+        id: el.id,
+        name: el.name
+      };
+    });
+    console.log(arr, "测试2222");
  }
  emits("update:modelValue", arr);
 };
@ -201,7 +251,7 @@ const handleExceed = (files, fileList) => {
 const beforeImgUpload = (file) => {
  if (props.isImg) {
    let isIMG = false;
-    if (getSuffix(file.name) === "IMG")  isIMG = true;
+    if (getSuffix(file.name) === "IMG") isIMG = true;
    const isLt5M = file.size / 1024 / 1024 < 5;
    if (!isIMG) ElMessage.error("上传图片只能是jpg/png/jpeg/bmp/gif格式!");
    if (!isLt5M) ElMessage.error("上传图片大小不能超过 5MB!");
@ -212,7 +262,7 @@ const beforeImgUpload = (file) => {
 };
 //查询图片
 const handlePictureCardPreview = (file) => {
-  dialogImageUrl.value = file.url || '';
+  dialogImageUrl.value = file.url || "";
  dialogVisible.value = true;
 };
 function downloadFile(url, filename) {
@ -247,7 +297,7 @@ const beforeRemove = (file) => {
  });
  props.modelValue.splice(index, 1);
  emits("update:modelValue", props.modelValue);
-}
+};

 const handleRemove = (file) => {
  let index = fileList.value.findIndex(function (item) {
@ -257,7 +307,6 @@ const handleRemove = (file) => {
  props.modelValue.splice(index, 1);
  emits("update:modelValue", props.modelValue);
 };
-
 </script>

 <style lang="scss" scoped>