sgxt_web/src/views/backOfficeSystem/IntelligentControl/myControl/components/bkryDialod.vue

<template>
  <el-dialog width="1400px" :model-value="modelValue" append-to-body @close="closed">
    <template #title>
        <span class="mr10 f16">选择布控人员</span>
        <el-button type="primary" size="small" @click="zdyaddPerson">添加其他人员</el-button>
    </template>
    <el-form :model="listQuery" :inline="true">
        <el-form-item label="人员姓名">
            <el-input placeholder="请输入人员姓名" v-model="listQuery.ryxm" clearable ></el-input>
        </el-form-item>
        <el-form-item label="身份证号">
            <el-input placeholder="请输入身份证号" v-model="listQuery.sfzh" clearable ></el-input>
        </el-form-item>
        <el-form-item label="手机号码">
            <el-input placeholder="请输入手机号码" v-model="listQuery.sjhm" 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 ref="multipleUserRef" :key="keyTabel" @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="ryXm" align="center" label="姓名"/>
        <el-table-column prop="rySfzh" align="center" label="身份证"/>
        <el-table-column prop="ryXb" align="center" label="性别">
            <template #default="{ row }">
              <DictTag :tag="false"  :value="row.ryXb" :options="D_BZ_XB" />
            </template>
        </el-table-column>
        <el-table-column prop="ryMz" align="center" label="民族">
            <template #default="{ row }">
                <DictTag :value="row.ryMz" :tag="false" :options="D_BZ_MZ" />
            </template>
        </el-table-column>
        <el-table-column prop="hjdXz" align="center" label="户籍地"/>
        <el-table-column prop="xzdXz" align="center" label="现居住址"/>
        <el-table-column prop="ryLxdh" align="center" label="手机号"/>
        <el-table-column prop="qtXnsf" align="center" label="虚拟身份"/>
        <el-table-column prop="clCph" align="center" label="车牌号"/>
        <el-table-column prop="clCjh" align="center" label="车架号"/>
        <el-table-column prop="qtTzms" align="center" label="特征描述"/>
        <el-table-column prop="bqList" align="center" label="人员标签">
           <template #default="{ row }">
              <span v-if="row.bqList">
                <span v-for="(it,idx) in row.bqList" :key="idx"> {{ it.bqMc }}、</span>
              </span>
            </template>
        </el-table-column>
    </el-table>
    </div>
    <div class="fenye flex just-end " :style="{ top: tableHeight + 'px' }">
    <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @pageCurrent-change="handleCurrentChange"
        :pageCurrent-page="listQuery.pageCurrent"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="listQuery.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
    ></el-pagination>
    </div>
    <template #footer>
      <div class="flex just-center">
          <el-button type="primary" @click="onComfirm">确认</el-button>
          <el-button @click="closed">取消</el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 自定义选添加人 -->
  <AddPeo ref="addPerson" @change="changeZdy"></AddPeo>
</template>

<script setup>
import AddPeo from './addPeo.vue'
import { qcckGet} from "@/api/qcckApi.js";
import { defineProps, ref ,getCurrentInstance, watch} from "vue";
const { proxy } = getCurrentInstance();
const { D_BZ_XB,D_BZ_MZ } = proxy.$dict("D_BZ_XB","D_BZ_MZ"); //获取字典数据
const props = defineProps({
  modelValue: {
    type: Boolean,
    default:false
  },
  LeaderType: {
    type: String,
    default: ""
  },
  //是否单选
  Single: {
    type: Boolean,
    default: false
  },
  roleIds: {
    type: Array,
    default: []
  },
});
const total = ref(0);
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 20
});
const addPerson = ref()
const multipleUserRef = ref(null);
const multipleSelectionUser = ref([]);
const tableData = ref([]);
const emits = defineEmits(["update:modelValue", "choosed","choosedAdd"]);
const keyTabel = ref(0)
const keyid = (row) => {
  return row.id;
};

const closed = () => {
  emits("update:modelValue", false);
};
const reset = () => {
  listQuery.value = {  pageCurrent: 1, pageSize: 20, };
  getListData();
};


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

// 自定义加人
const changeZdy = (val) => {
  const userList = multipleSelectionUser.value;
  let list = [];
  let listId = [];
  userList.forEach((val) => {
    if (listId.indexOf(val.id) == -1) {
      list.push(val);
      listId.push(val.id);
    }
  });
  list.unshift(val)
  emits("choosed", list);
  closed();
}
/**
 * pageSize 改变触发
 */
const handleSizeChange = (currentSize) => {
  listQuery.value.pageSize = currentSize;
  getListData();
};
/**
 * 页码改变触发
 */
const handleCurrentChange = (currentPage) => {
  listQuery.value.pageCurrent = currentPage;
  getListData();
};
const getListData = () => {
  keyTabel.value++
  const params = {...listQuery.vlue}
  qcckGet(params,'/mosty-gsxt/tbGsxtZdry/selectPage').then(res=>{
    tableData.value = res.records || [];
    total.value = res.total;
    multipleUser();
  })
};

//列表回显
function multipleUser() {
  tableData.value.forEach((item) => {
     multipleUserRef.value.toggleRowSelection(item, false);
    if (props.roleIds.some((id) => id == item.id)) {
      multipleUserRef.value.toggleRowSelection(item, true);
    }
  });
}

const handleFilter = () => {
  listQuery.value.pageCurrent = 1;
  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 zdyaddPerson = () => {
  addPerson.value.init();
};

watch(()=>props.modelValue,val=>{
  if(val) handleFilter();
},{immediate:true})

</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>