ba_web/src/components/MyComponents/ChooseJz/QfqzLoad.vue

<template>
  <div>
    <el-dialog :title="titleValue" width="1400px" :model-value="modelValue" :destroy-on-close="true" @close="closed">
      <div v-if="modelValue">
        <el-form :model="listQuery" class="mosty-from-wrap" :inline="true">
          <el-form-item label="姓名">
            <el-input v-model="listQuery.xm" placeholder="请输入姓名" clearable />
          </el-form-item>
          <el-form-item label="身份证号码">
            <el-input v-model="listQuery.sfzh" placeholder="请输入身份证号码" clearable />
          </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 ref="multipleUserRef" @selection-change="handleSelectionChange" :data="tableData" border
            style="width: 100%" :row-key="keyid" height="450">
            <el-table-column type="selection" width="55" :reserve-selection="true" />
            <el-table-column label="序号" type="index" align="center" sortable width="80" />
            <el-table-column sortable prop="xm" show-overflow-tooltip align="center" label="民警姓名">
            </el-table-column>
            <el-table-column sortable prop="sfzh" show-overflow-tooltip align="center" label="身份证号码">
            </el-table-column>
            <el-table-column sortable prop="sklList" show-overflow-tooltip align="center" label="人员类型">
              <template #default="{ row }">
                {{ row.rylx == '01' ? "群众" : "党员" }}
              </template>
            </el-table-column>
            <el-table-column sortable prop="sjh" label="电话号码" align="center"></el-table-column>
          </el-table>
        </div>
        <div class="fenye">
          <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>
  </div>
</template>

<script setup>
import { getCountBqsl } from "@/api/xfll";
import * as rule from "@/utils/rules.js";
import * as MOSTY from "@/components/MyComponents/index";
import { ElMessage } from "element-plus";
import {qfqzSelectPage } from '@/api/lz/backstage'
import { defineProps, watch, ref, reactive, onMounted, nextTick, watchEffect } from "vue";
const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  },
  titleValue: {
    type: String,
    default: "选择群防群治人员"
  },
  //是否单选
  Single: {
    type: Boolean,
    default: false
  },
  roleIds: {
    type: Array,
    default: []
  },// 回显
  // showBm: {
  //   type: Boolean,
  //   default: true
  // },
  // ssbmdm: {
  //   type: String,
  //   default: ""
  // }
});
const keyid = (row) => { return row.ryid; };
const total = ref(0);
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 20,
});
const form = ref({});
const tableData = ref([]);
const multipleUserRef = ref(null);
const multipleSelectionUser = ref([]);
const emits = defineEmits(["update:modelValue", "choosedUsers"]);
const closed = () => {
  emits("update:modelValue", false);
};
const lxList = reactive([]); //搜索框标签选择数据
watch(() => props.modelValue,
  (val) => { if (val === true) handleFilter(); }
);
onMounted(() => {
  getListData();
  //获取搜索栏标签选择数据
  getCountBqsl().then((res) => {
    res.forEach((item) => {
      lxList.push(item);
    });
  });
});

// 分页
const handleFilter = () => {
  listQuery.value.pageCurrent = 1;
  getListData();
};

// 获取列表
const getListData = async () => {
  const params = listQuery.value;
  const res = await qfqzSelectPage(params);
  tableData.value = res?.records;
  total.value = Number(res.total);
  multipleUser()
};

//列表回显
function multipleUser() {
  tableData.value.forEach(item => {
    if (props.roleIds.some(id => id == item.ryid)) {
      multipleUserRef.value.toggleRowSelection(item, true);
    }
  })
}
// 重置
const reset = () => {
  listQuery.value = { pageCurrent: 1, pageSize: 20, fl: "01", };
  getListData();
};

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;
  }
};

// 为用户分配角色
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("choosedUsers", list);
  closed();
};

// pageSize 改变触发
const handleSizeChange = (currentSize) => {
  listQuery.value.pageSize = currentSize;
  getListData();
};

// 页码改变触发
const handleCurrentChange = (currentPage) => {
  listQuery.value.pageCurrent = currentPage;
  getListData();
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/layout.scss";
@import "@/assets/css/element-plus.scss";

.tag {
  padding: 1px 4px;
  box-sizing: border-box;
  margin: 0 4px;
  border: 1px solid #24869b;
  border-radius: 4px;
}
</style>
<style>
.tabBoxRadio .el-checkbox__inner {
  border-radius: 50% !important;
}

.tabBoxRadio .el-table__header-wrapper .el-checkbox {
  display: none;
}
</style>