lcw

src/components/ChooseList/ChooseCl/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-dialog width="1400px" :model-value="modelValue" append-to-body @close="closed">
+  <el-dialog width="1400px" :model-value="props.modelValue" append-to-body @close="closed">
     <template #title>
       <span class="mr10 f16">选择布控车辆</span>
       <el-button type="primary" size="small" @click="zdyaddPerson">添加其他车辆</el-button>

src/components/ChooseList/ChooseGzy/index.vue

@@ -0,0 +1,156 @@
+
+<template>
+  <el-dialog v-model="props.modelValue" width="60%" custom-class="container" @close="close" :title="title" align-center>
+    <MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
+        :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth"
+        @chooseData="chooseData" >
+        <template #sblx="{ row }">
+          <dict-tag :options="D_BZ_SBLX" :value="row.sblx" :tag="false" />
+        </template>
+        <template #sblxdm="{ row }">
+          <dict-tag :options="D_BZ_GZSBLX" :value="row.sblxdm" :tag="false" />
+        </template>
+      </MyTable>
+      <div class="footInfoBtn flex just-between align-center">
+      <Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="550"
+        :pageConfiger="{...pageData.pageConfiger,
+        total: pageData.total}" />
+      <el-button type="primary" @click="submitDate">确定选择</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script setup>
+import { reactive, ref,watch,getCurrentInstance } from 'vue'
+import MyTable from '@/components/aboutTable/MyTable.vue'
+import Pages from "@/components/aboutTable/Pages.vue";
+import { ysSxtgetPageList } from "@/api/yszx";
+const { proxy } = getCurrentInstance();
+const { D_BZ_SBLX,D_BZ_GZSBLX } = proxy.$dict(
+  "D_BZ_SBLX",
+"D_BZ_GZSBLX"
+);
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  title: {
+    type: String,
+    default: '选择感知源'
+  },roleIds:{
+    type: Array,
+    default: () => [],
+  }
+})
+const emit = defineEmits(["update:modelValue", "choose"])
+const dataLsit= ref();
+
+const pageData = reactive({
+  tableData: [], //表格数据
+  keyCount: 0,
+  tableHeight: 500,
+  tableConfiger: {
+    rowHeight: 61,
+    showSelectType: "checkBox",
+    loading: false,
+    haveControls: false,
+    rowKey: "id", // 设置行的唯一标识为id
+    defaultSelectKeys: [] // 用于存储默认选中的ID
+  },
+  total: 0,
+  pageConfiger: {
+    pageSize: 20,
+    pageCurrent: 1
+  }, //分页
+  controlsWidth: 180, //操作栏宽度
+  tableColumn: [
+    { label: "所属部门", prop: "ssbm", showOverflowTooltip: true },
+    { label: "设备名称", prop: "sbmc", showOverflowTooltip: true },
+    { label: "设备编码", prop: "sbbh", showOverflowTooltip: true },
+    { label: "厂商名称", prop: "csmc", showOverflowTooltip: true },
+    { label: "地址", prop: "dzmc", showOverflowTooltip: true },
+    { label: "感知源类型", prop: "sblx", showOverflowTooltip: true, showSolt: true, },
+    { label: "摄像机类型", prop: "sblxdm", showOverflowTooltip: true,showSolt: true, },
+  ]
+})
+
+// 监听roleIds变化，更新默认选中的ID
+watch(() => props.roleIds, (newVal) => {
+  if (newVal && newVal.length > 0) {
+    pageData.tableConfiger.defaultSelectKeys = [...newVal];
+    // 如果表格数据已加载，根据选中的ID设置dataLsit
+    if (pageData.tableData.length > 0) {
+      dataLsit.value = pageData.tableData.filter(item => newVal.includes(item.id));
+    }
+  } else {
+    pageData.tableConfiger.defaultSelectKeys = [];
+  }
+}, { immediate: true })
+
+// 监听表格数据变化，当数据加载后，根据默认选中的ID设置dataLsit
+watch(() => pageData.tableData, (newVal) => {
+  if (newVal && newVal.length > 0 && props.roleIds.length > 0) {
+    dataLsit.value = newVal.filter(item => props.roleIds.includes(item.id));
+  }
+})
+
+const getList = () => {
+  pageData.tableConfiger.loading = true;
+  const promes={
+    // ssbm: propsGzyList.ssbm,
+    pageSize: pageData.pageConfiger.pageSize,
+    pageCurrent: pageData.pageConfiger.pageCurrent,
+  }
+  ysSxtgetPageList(promes).then((res) => {
+   pageData.tableData = res.records || []
+   pageData.total = res.total || 0
+
+   // 数据加载完成后，更新key以触发表格重新渲染，确保选中状态正确显示
+   pageData.keyCount++;
+  }).finally(() => {
+    pageData.tableConfiger.loading = false;
+  })
+}
+
+// 监听对话框显示状态变化
+watch(() => props.modelValue, (newVal) => {
+  if (newVal) {
+    // 每次打开对话框时，重新获取数据
+    getList();
+  } else {
+    // 关闭对话框时清空选中数据
+    dataLsit.value = null;
+  }
+})
+
+const changeNo = (val) => {
+  pageData.pageConfiger.pageCurrent=val
+  getList()
+}
+
+const changeSize = (val) => {
+  pageData.pageConfiger.pageSize=val
+  getList()
+}
+
+const chooseData = (val) => {
+  dataLsit.value = val;
+}
+
+const close = () => {
+  emit("update:modelValue", false);
+}
+
+const submitDate = () => {
+  emit("choose", dataLsit.value);
+  close()
+}
+</script>
+
+<style lang="scss" scoped>
+
+.container {
+  color: #000000;
+}
+</style>