supervision-vue/src/components/police-picker.vue

<template>
  <div class="flex gap">
    <el-tag type="info" effect="plain" closable v-for="(item, index) in modelValue" :key="item"
            @close="handleRemove(index)">{{ item.name }}
    </el-tag>
    <el-button size="small" type="primary" plain @click="show = true">
      <template #icon>
        <icon name="el-icon-Plus"/>
      </template>
    </el-button>
  </div>
  <el-dialog title="选择警员" v-model="show" width="60vw" top="5vh">
    <div style="min-height: 70vh">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-scrollbar max-height="70vh">
            <el-tree
                :data="treeData"
                :props="{ label: 'shortName', value: 'id' }"
                :default-expanded-keys="['12630']"
                node-key="id"
                @node-click="handleSelectDepart"
            />
          </el-scrollbar>
        </el-col>
        <el-col :span="18">
          <header class="flex between mb-20">
            <el-form class="flex gap wrap">
              <el-input
                  placeholder="警员姓名"
                  v-model="query.name"
                  clearable
                  style="width: 190px"
              />
              <el-input
                  placeholder="请输入"
                  v-model="query.empNo"
                  clearable
                  style="width: 190px"
              />
              <el-input
                  placeholder="身份证号码"
                  v-model="query.idCode"
                  clearable
                  style="width: 190px"
              />
            </el-form>
            <el-button type="primary" @click="getList">查询</el-button>
          </header>
          <div class="table-container">
            <el-table
                ref="ableRef"
                :data="polices"
                row-key="id"
                max-height="890px"
                v-loading="loading"
            >
              <el-table-column  width="55">
               <template #default="{row}">
                 <el-checkbox
                     v-model="row.isCheck" @change="changeCheck(row)" size="large" />
               </template>
              </el-table-column>
              <el-table-column
                  label="姓名"
                  prop="name"
                  width="90"
              />
              <el-table-column
                  label="警号"
                  prop="empNo"
                  width="100"
                  show-overflow-tooltip
              />
              <el-table-column
                  label="人员属性"
                  width="120"
                  align="center"
              >
                <template #default="{ row }">
                                    <span>{{
                                        getDictLable(
                                            dict.personType,
                                            row.personType
                                        )
                                      }}</span>
                </template>
              </el-table-column>
              <el-table-column
                  label="职位"
                  width="120"
                  align="center"
              >
                <template #default="{ row }">
                                    <span v-if="row.position">
                                        <span v-if="row.level === 0"
                                        >局领导{{ row.position }}</span
                                        >
                                        <span v-if="row.level === 2"
                                        >二级机构{{ row.position }}</span
                                        >
                                        <span v-if="row.level === 3"
                                        >三机机构{{ row.position }}</span
                                        >
                                        <span v-if="row.level === 4"
                                        >四机机构{{ row.position }}</span
                                        >
                                    </span>
                </template>
              </el-table-column>
              <el-table-column
                  label="机构名称"
                  prop="departShortName"
                  width="200"
              />
            </el-table>
          </div>
          <div class="flex end mt-8">
            <el-pagination
                @size-change="getList"
                @current-change="getList"
                :page-sizes="[10, 20]"
                v-model:page-size="query.size"
                v-model:current-page="query.current"
                layout="total, sizes, prev, pager, next"
                :total="total"
            >
            </el-pagination>
          </div>
          <div class="flex gap mt-10 wrap v-center">
            <span>已选 {{checkPolices.length}} 员警员：</span>
            <el-tag
                v-for="(item, index) in checkPolices"
                :key="item"
                closable
                @close="handleRemove(index)"
            >{{ item.name }}
            </el-tag
            >
          </div>
        </el-col>
      </el-row>
    </div>
    <footer class="flex end">
      <el-button @click="show = false">取消</el-button>
      <el-button type="primary" @click="submit">确定</el-button>
    </footer>
  </el-dialog>
</template>
<script setup>
import {departTreeList} from "@/api/system/depart";
import {listPolice} from "@/api/system/police";
import useCatchStore from "@/stores/modules/catch";
import {getDictLable} from "@/utils/util";

const catchSotre = useCatchStore();
const dict = catchSotre.getDicts(["personType"]);

const props = defineProps({
  modelValue: {
    type: Array,
    default: []
  },
  departId: {
    type: String
  },
  dataDepartId:{
    type:String
  }
});

const emit = defineEmits(['update:modelValue'])

const show = ref(false);
const query = ref({
  current: 1,
  departBranch: true

});
watch(() => props.departId, (val) => {
  query.value.departId = val;
  getList()
})


const total = ref(0);
const ableRef = ref(null)
const treeData = catchSotre.getDepartsAll();
const polices = ref([]);
const loading = ref(false)

function getList() {
  loading.value = true
  listPolice(query.value).then((data) => {
    polices.value = data.records;
    setCheckFun(data.records)
    total.value = data.total;
    loading.value = false
  });
}


const setCheckFun = (row) => {
  let keyValue =  checkPolices.value.map(s=>s.empNo);
  row.forEach((s) => {
    if(keyValue.indexOf(s.empNo) >= 0){
      s.isCheck=true;
    }else{
      s.isCheck=false;
    }
  })
}


const checkPolices = ref([]);

watch(()=>props.modelValue,(val)=>{
  console.log('val',val)
  checkPolices.value =val;
  getList();
},{immediate:true,deep:true})


watch(()=>props.dataDepartId,(val)=>{
  console.log('val',val)
  if(val){
    query.value.departId = val.id;
    getList();
  }
},{immediate:true,deep:true})

const changeCheck = (row)=>{
    let checkIndex =checkPolices.value.map(s=>s.empNo);
    if(row.isCheck){
      checkPolices.value.push({
        name: row.name,
        empNo: row.empNo,
        idCode: row.idCode
      });
    }else{
      checkPolices.value.splice(checkIndex.indexOf(row.empNo),1)
    }
}




function handleSelectDepart(node) {
  query.value.departId = node.id;
  getList();
}

function handleRemove(index) {
  if(polices.value.length >0){
    console.log('s',polices.value)
    console.log('checkPolices.value[index]',checkPolices.value)
    polices.value.forEach(s=>{
      if(s.empNo == checkPolices.value[index].empNo){
        s.isCheck =false
      }
    })
  }

  checkPolices.value.splice(index, 1)
  emit('update:modelValue', checkPolices.value)
}

function submit() {
  emit('update:modelValue', checkPolices.value)
  polices.value.forEach(s=>{
      s.isCheck =false
  })
  checkPolices.value=[]
  show.value = false
}



onMounted(() => {
  getList();
});
</script>
<style lang="scss">
.el-tree-node.is-current > .el-tree-node__content {
  background-color: #e8e9f3;
}
</style>