对接’我的布控的增删查改‘，布控审核送审

src/views/backOfficeSystem/BasicManagement/components/dialogList.vue

@@ -0,0 +1,209 @@
+<template>
+  <el-dialog
+    :title="titleValue"
+    width="900px"
+    :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.jhMc"
+            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' : ''"
+        style="margin-top: 0px"
+      >
+        <el-table
+          v-loading="loading"
+          ref="multipleUserRef"
+          @selection-change="handleSelectionChange"
+          :data="tableData"
+          border
+          :row-key="keyid"
+          style="width: 100%"
+          height="450"
+        >
+          <el-table-column
+            type="selection"
+            width="55"
+            :reserve-selection="true"
+          />
+          <el-table-column prop="jhMc" align="center" label="集合名称" />
+          <el-table-column prop="jhSm" align="center" label="集合说明" />
+        </el-table>
+      </div>
+      <div class="fenye" :style="{ top: tableHeight + 'px' }">
+        <el-pagination
+          class="pagination"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="listQuery.current"
+          :page-sizes="[10, 20, 50, 100]"
+          :page-size="listQuery.size"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+        ></el-pagination>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="closed">取消</el-button>
+        <el-button type="primary" @click="onComfirm">确认</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { defineProps, ref, onMounted } from "vue";
+import { qcckGet } from "@/api/qcckApi.js";
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    required: true
+  },
+  dic: {
+    type: Object,
+    default: () => {}
+  },
+
+
+  titleValue: {
+    type: String,
+    default: "选择大类"
+  },
+  LeaderType: {
+    type: String,
+    default: ""
+  },
+  //是否单选
+  Single: {
+    type: Boolean,
+    default: true
+  },
+  roleIds: {
+    type: Array,
+    default: []
+  }
+});
+const total = ref(0);
+const listQuery = ref({
+  current: 1,
+  size: 20
+});
+const loading = ref(false);
+const tableData = ref([]);
+const emits = defineEmits(["update:modelValue", "chooseDate"]);
+onMounted(() => {
+  handleFilter();
+});
+const closed = () => {
+  emits("update:modelValue", false);
+};
+const reset = () => {
+  listQuery.value = { current: 1, size: 20 };
+  getListData();
+};
+
+const keyid = (row) => {
+  return row.id;
+};
+// 为用户分配角色
+const onComfirm = () => {
+  const userList = multipleSelectionUser.value;
+  let list = [];
+  let listId = [];
+  userList.forEach((val) => {
+    if (listId.indexOf(val.id) == -1) {
+      list.push(val);
+      listId.push(val.id);
+    }
+  });
+  emits("chooseDate", list);
+  let data = { type: props.LeaderType, userList: userList };
+  emits("chooseDateLeader", data);
+  closed();
+};
+/**
+ * pageSize 改变触发
+ */
+const handleSizeChange = (currentSize) => {
+  listQuery.value.size = currentSize;
+  getListData();
+};
+
+/**
+ * 页码改变触发
+ */
+const handleCurrentChange = (currentPage) => {
+  listQuery.value.current = currentPage;
+  getListData();
+};
+const getListData = () => {
+  const data = listQuery.value;
+  loading.value = true;
+  qcckGet(data, "/mosty-gsxt/tbGsxtBqgl/selectPage")
+    .then((res) => {
+      tableData.value = res?.records;
+      total.value = Number(res.total);
+      loading.value = false;
+      multipleUser();
+    })
+    .catch(() => {
+      loading.value = false;
+    });
+};
+
+//列表回显
+function multipleUser() {
+  tableData.value.forEach((item) => {
+    if (props.roleIds.some((id) => id == item.id)) {
+      multipleUserRef.value.toggleRowSelection(item, true);
+    }
+  });
+}
+
+const handleFilter = () => {
+  listQuery.value.current = 1;
+  getListData();
+};
+
+const multipleUserRef = ref(null);
+const multipleSelectionUser = ref([]);
+const handleSelectionChange = (val) => {
+  if (props.Single) {
+    if (val.length > 1) {
+      let del_row = val.shift();
+      multipleUserRef.value.toggleRowSelection(del_row, false);
+    }
+    multipleSelectionUser.value = val;
+  } else {
+    multipleSelectionUser.value = val;
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/css/layout.scss";
+@import "@/assets/css/element-plus.scss";
+</style>
+<style>
+.tabBoxRadio .el-checkbox__inner {
+  border-radius: 50% !important;
+}
+.tabBoxRadio .el-table__header-wrapper .el-checkbox {
+  display: none;
+}
+</style>