ba_web/src/components/ChooseList/ChooseNJBAY/index.vue

<template>
  <el-dialog :title="data.title" width="70%" :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="ssbakk" align="center" label="保安公司名称"></el-table-column>
          <el-table-column prop="njnf" align="center" label="年审年份"></el-table-column>
          <el-table-column prop="xm" align="center" label="姓名"></el-table-column>
          <el-table-column prop="sfzhm" align="center" label="身份证号码"></el-table-column>
          <el-table-column prop="dh" align="center" label="电话"/>
          <el-table-column prop="whcd" align="center" label="文化程度">
            <template #default="{ row }">
              <DictTag :value="row.whcd" :tag="false" :options="D_BZ_WHCD" />
            </template>
          </el-table-column>
          <el-table-column prop="zsbh" align="center" label="证书编号"/>
          <el-table-column prop="fwxymc" align="center" label="服务行业"/>
          <el-table-column prop="rzsj" align="center" label="入职时间"/>
          <el-table-column prop="sgxkhm" align="center" label="上岗证号码"/>
         <el-table-column prop="pxgsShzt" align="center" label="审核状态">
            <template #default="{ row }">
              <DictTag :value="row.pxgsShzt" :tag="false" :options="D_BA_SHZT" />
            </template>
          </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 { qcckPost } from "@/api/qcckApi";
import {getItem} from '@/utils/storage.js'
import * as MOSTY from "@/components/MyComponents/index";
import { defineProps, watch, ref, getCurrentInstance, nextTick, reactive } from "vue";
const { proxy } = getCurrentInstance();
const { D_BA_SHZT,D_BZ_WHCD } = proxy.$dict('D_BA_SHZT','D_BZ_WHCD');
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 userInfo = getItem('userInfo');
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,
    pxgsShzt: "1",//培训公司已通过
    sptz: "1",//已送培
    ssbakk:userInfo.pxgs,
    ssbakkId:userInfo.pxgsid,
    pxgsShzt:'1',//保安公司已通过
    
  }
  loading.value = true;
  qcckPost(params,"/mosty-base/bans/njxx/page").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>