lcw

src/components/ChooseList/ChooseBapxry/index.vue

@@ -0,0 +1,182 @@
+<template>
+  <el-dialog :title="data.title" width="1400px" :model-value="modelValue" append-to-body @close="closed" v-if="modelValue">
+    <div>
+      <el-form :model="listQuery" class="mosty-from-wrap" :inline="true">
+        <el-form-item label="姓名">
+          <el-input placeholder="请输入姓名" v-model="listQuery.xm" clearabl></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.data.Single ? 'tabBoxRadio' : ''" style="margin-top: 0px">
+        <el-table :loading="loading" @selection-change="handleSelectionChange" :row-key="keyid" height="450" ref="multipleUserRef" :data="tableData" border style="width: 100%">
+          <el-table-column type="selection" width="55" :reserve-selection="true"/>
+          <el-table-column prop="xm" align="center" label="姓名"></el-table-column>
+          <el-table-column prop="zjhm" align="center" label="证件号码"></el-table-column>
+          <el-table-column prop="lxdh" align="center" label="联系方式"></el-table-column>
+          <el-table-column prop="sqrq" align="center" label="申请时间"></el-table-column>
+        </el-table>
+      </div>
+      <div class="fenye" :style="{ top: tableHeight + 'px' }">
+        <el-pagination
+          class="pagination"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="listQuery.pageCurrent"
+          :page-sizes="[10, 20, 50, 100]"
+          :page-size="listQuery.pageSize"
+          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, watch, ref, onMounted, nextTick, reactive } from "vue";
+import {baxxNjryNjshPage} from '@/api/pxzx'
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    required: true
+  },
+  data:{
+    type: Object,
+    default: {
+      title:'选择年检通过人员',
+      type:'wgy',//选择类型
+      Single:false,//是否单选
+      roleIds:[],//回显的数据
+    }
+  },
+});
+const emits = defineEmits(["update:modelValue", "choosedUsers",'close']);
+const total = ref(0);
+const loading = ref(false);
+const listQuery = reactive({
+  pageCurrent: 1,
+  pageSize: 20
+});
+const tableData = ref([]);
+const multipleUserRef = ref(null);
+const multipleSelectionUser = ref([]);
+
+watch(()=>props.modelValue, (val) => {
+  if (val) {
+    nextTick(() => {
+      getListData();
+    });
+  }
+},{immediate: true});
+
+const keyid = (row) => {
+  return row.id;
+};
+
+// 列表数据
+const getListData = () => {
+  let params = { ...listQuery,njzt:'01' }
+  loading.value = true;
+  baxxNjryNjshPage(params).then((res) => {
+    loading.value = false;
+    tableData.value = res?.records;
+    total.value = Number(res.total);
+    multipleUser();
+  }).catch(()=>{
+    loading.value = false;
+  });
+};
+
+//列表回显
+function multipleUser() {
+  let ids = props.data.roleIds ? props.data.roleIds :[];
+  tableData.value.forEach((item) => {
+    if (ids.some((id) => id == item.id)) {
+      multipleUserRef.value.toggleRowSelection(item, true);
+    }
+  });
+}
+
+
+/**
+ * 页码改变触发
+ */
+const handleCurrentChange = (currentPage) => {
+  listQuery.pageCurrent = currentPage;
+  getListData();
+};
+
+
+// 筛选
+const handleFilter = () => {
+  listQuery.pageCurrent = 1;
+  getListData();
+};
+
+
+// 重置
+const reset = () => {
+  listQuery.pageCurrent = 1
+  listQuery.pageSize = 10
+  getListData();
+};
+
+// pageSize 改变触发
+const handleSizeChange = (currentSize) => {
+  listQuery.pageSize = currentSize;
+  getListData();
+};
+
+// 为用户分配角色
+const onComfirm = () => {
+  const userList = multipleSelectionUser.value;
+  let list = [],listId = [];
+  userList.forEach((val) => {
+    if (listId.indexOf(val.id) == -1) {
+      list.push(val);
+      listId.push(val.id);
+    }
+  });
+  emits("choosedUsers", list);
+  emits("choosedUsersLeader", { userList: userList });
+  closed();
+};
+
+// 选择的数据
+const handleSelectionChange = (val) => {
+  if (props.data.Single && val.length > 1) {
+    let del_row = val.shift();
+    multipleUserRef.value.toggleRowSelection(del_row, false);
+  }
+  multipleSelectionUser.value = val;
+};
+
+// 关闭
+const closed = () => {
+  emits("update:modelValue", false);
+  emits("close");
+};
+
+</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>