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

<template>
  <div>
    <el-dialog title="选择警组"  width="1400px" :model-value="modelValue" @close="closed">
      <div v-if="modelValue">
        <el-form :model="listQuery" :inline="true">
          <el-form-item label="所属部门">
            <MOSTY.Department
              width="280px"
              clearable
              v-model="listQuery.ssbmdm"
            />
          </el-form-item>
          <el-form-item label="警组名称">
            <el-input
              v-model="listQuery.jzMc"
              placeholder="请输入警组名称"
              clearable
            />
          </el-form-item>
          <el-form-item label="负责人">
            <el-input
              v-model="listQuery.ddMjxm"
              placeholder="请输入负责人"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-button @click="handleFilter"> 查询 </el-button>
            <el-button @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
              prop="jzMc"
              show-overflow-tooltip
              align="center"
              label="警组名称"
            >
            </el-table-column>
            <el-table-column
              prop="ssbm"
              label="所属部门"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="ddMjxm"
              show-overflow-tooltip
              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="[2, 5, 10, 20]"
            :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 * as rule from "@/utils/rules.js";
import * as MOSTY from "@/components/MyComponents/index";
import { ElMessage } from "element-plus";
import { defineProps, watch, ref, onMounted, nextTick } from "vue";
import { getJzList } from "@/api/basicsmanage/servicejz.js";
const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  },
  roleId: {
    type: String || Array,
    default: "" || []
  },
  jczid:{
    type:String,
    default:""
  },
   //是否单选
  Single: {
    type: Boolean,
    default: true
  },
});
const keyid = (row) => {
  return row.id;
};
const total = ref(0);
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 20,
  jczid:props.jczid
});
const multipleUserRef = ref(null);
const multipleSelectionUser = ref([]);
const form = ref({});
const tableData = ref([]);
const emits = defineEmits(["update:modelValue", "choosedUsers"]);
const closed = () => {
  emits("update:modelValue", false);
};

onMounted(() => {
  handleFilter();
});

// 重置
const reset = () => {
  listQuery.value = { pageCurrent: 1, pageSize: 20, jczid:props.jczid };
  getListData();
};

// 为用户分配角色
const onComfirm = () => {
  const userList = JSON.parse(JSON.stringify(multipleSelectionUser.value));
  if (props.Single) {
    ElMessage({ type: "warning", message: "请每次选择一个警组!" });
  } else {
    emits("choosedUsers", userList);
    closed();
  }
};
// pageSize 改变触发
const handleSizeChange = (currentSize) => {
  listQuery.value.pageSize = currentSize;
  getListData();
};

// 页码改变触发
const handleCurrentChange = (currentPage) => {
  listQuery.value.pageCurrent = currentPage;
  getListData();
};
const getListData = async () => {
  const params = listQuery.value;
  const res = await getJzList(params);
  tableData.value = res?.records;
  total.value = Number(res.total);
  multipleUser()
};

//列表回显
function multipleUser(row) {
  tableData.value.forEach(item=>{
    if(Array.isArray(props.roleId)){
      props.roleId.forEach(v=>{
        if(v == item.id){
            multipleUserRef.value.toggleRowSelection(item, true);
          }
      })

    }else{
      if(props.roleId == 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;
  }
};

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

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