更新

src/components/ChooseList/ChooseMarks/index.vue

@@ -1,23 +1,51 @@
 <template>
-  <el-dialog :title="titleValue" width="1400px" :model-value="modelValue" append-to-body @close="closed">
+  <el-dialog
+    :title="titleValue"
+    width="1400px"
+    :model-value="modelValue"
+    append-to-body
+    @close="closed"
+  >
     <div>
       <el-form :model="listQuery" class="mosty-from-wrap" :inline="true">
         <el-form-item label="标签名称">
-          <el-input placeholder="请输入标签名称" v-model="listQuery.bqMc" clearable ></el-input>
+          <el-input
+            placeholder="请输入标签名称"
+            v-model="listQuery.bqMc"
+            clearable
+          ></el-input>
         </el-form-item>
         <el-form-item>
           <el-button type="success" @click="handleFilter">查询</el-button>
           <el-button type="info" @click="reset"> 重置 </el-button>
         </el-form-item>
       </el-form>
-      <div class="tabBox" :class="props.Single ? 'tabBoxRadio' : ''" :key="keyVal" style="margin-top: 0px">
-        <el-table ref="multipleUserRef" @selection-change="handleSelectionChange" :data="tableData" v-loading="loading" border :row-key="keyid" style="width: 100%" height="450">
-          <el-table-column type="selection" width="55" :reserve-selection="true"/>
-          <el-table-column prop="bqMc" align="center" label="标签名称"/>
-          <el-table-column prop="bqDm" align="center" label="标签代码"/>
+      <div
+        class="tabBox"
+        :class="props.Single ? 'tabBoxRadio' : ''"
+        :key="keyVal"
+        style="margin-top: 0px"
+      >
+        <el-table
+          ref="multipleUserRef"
+          @selection-change="handleSelectionChange"
+          :data="tableData"
+          v-loading="loading"
+          border
+          :row-key="keyid"
+          style="width: 100%"
+          height="450"
+        >
+          <el-table-column
+            type="selection"
+            width="55"
+            :reserve-selection="true"
+          />
+          <el-table-column prop="bqMc" align="center" label="标签名称" />
+          <el-table-column prop="bqDm" align="center" label="标签代码" />
           <el-table-column prop="bqDj" align="center" label="标签等级">
             <template #default="{ row }">
-              <DictTag :tag="false"  :value="row.bqDj" :options="D_GS_BQ_DJ" />
+              <DictTag :tag="false" :value="row.bqDj" :options="D_GS_BQ_DJ" />
             </template>
           </el-table-column>
           <el-table-column prop="bqYs" align="center" label="标签颜色">
@@ -50,14 +78,14 @@
 </template>
 
 <script setup>
-import { qcckGet} from "@/api/qcckApi.js";
-import { defineProps, ref ,getCurrentInstance, watch} from "vue";
+import { qcckGet } from "@/api/qcckApi.js";
+import { defineProps, ref, getCurrentInstance, watch } from "vue";
 const { proxy } = getCurrentInstance();
-const { D_GS_BQ_DJ,D_GS_SSYJ } = proxy.$dict("D_GS_BQ_DJ","D_GS_SSYJ"); //获取字典数据
+const { D_GS_BQ_DJ, D_GS_SSYJ } = proxy.$dict("D_GS_BQ_DJ", "D_GS_SSYJ"); //获取字典数据
 const props = defineProps({
   modelValue: {
     type: Boolean,
-    default:false
+    default: false
   },
   titleValue: {
     type: String,
@@ -77,14 +105,14 @@ const props = defineProps({
     default: []
   }
 });
-const loading = ref(false)
+const loading = ref(false);
 const total = ref(0);
 const listQuery = ref({
   pages: 1,
   size: 20
 });
 
-const keyVal = ref()
+const keyVal = ref();
 const multipleUserRef = ref(null);
 const multipleSelectionUser = ref([]);
 const tableData = ref([]);
@@ -97,11 +125,10 @@ const closed = () => {
   emits("update:modelValue", false);
 };
 const reset = () => {
-  listQuery.value = {  pages: 1, size: 20, };
+  listQuery.value = { pages: 1, size: 20 };
   getListData();
 };
 
-
 // 为用户分配角色
 const onComfirm = () => {
   const userList = multipleSelectionUser.value;
@@ -133,21 +160,23 @@ const handleCurrentChange = (currentPage) => {
 const getListData = () => {
   keyVal.value++;
   loading.value = true;
-  const params = { ...listQuery.value, bqLb:'02',}
-  qcckGet(params,'/mosty-gsxt/tbGsxtBqgl/selectPage').then(res=>{
-    loading.value = false;
-    tableData.value = res.records || [];
-    total.value = res.total;
-    multipleUser();
-  }).catch(()=>{
-    loading.value = false;
-  })
+  const params = { ...listQuery.value, bqLb: "02" };
+  qcckGet(params, "/mosty-gsxt/tbGsxtBqgl/selectPage")
+    .then((res) => {
+      loading.value = false;
+      tableData.value = res.records || [];
+      total.value = res.total;
+      multipleUser();
+    })
+    .catch(() => {
+      loading.value = false;
+    });
 };
 
 //列表回显
 function multipleUser() {
   tableData.value.forEach((item) => {
-     multipleUserRef.value.toggleRowSelection(item, false);
+    multipleUserRef.value.toggleRowSelection(item, false);
     if (props.roleIds.some((id) => id == item.id)) {
       multipleUserRef.value.toggleRowSelection(item, true);
     }
@@ -171,10 +200,13 @@ const handleSelectionChange = (val) => {
   }
 };
 
-watch(()=>props.modelValue,val=>{
-  if(val) handleFilter();
-},{immediate:true})
-
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (val) handleFilter();
+  },
+  { immediate: true }
+);
 </script>
 
 <style lang="scss" scoped>
@@ -188,5 +220,4 @@ watch(()=>props.modelValue,val=>{
 .tabBoxRadio .el-table__header-wrapper .el-checkbox {
   display: none;
 }
-
 </style>