下发任务1
This commit is contained in:
给我
@ -0,0 +1,197 @@
|
||||
<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.mc1" 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="mc1" show-overflow-tooltip align="center" label="方格名称">
|
||||
</el-table-column>
|
||||
<el-table-column sortable prop="ssbm" 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 { qcckGet, qcckPost, qcckPut } from "@/api/qcckApi.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { ElMessage } from "element-plus";
|
||||
import {
|
||||
defineProps,
|
||||
watch,
|
||||
ref,
|
||||
reactive,
|
||||
onMounted,
|
||||
nextTick,
|
||||
watchEffect
|
||||
} from "vue";
|
||||
import { getTbJcglXfll } from "@/api/xfll";
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
titleValue: {
|
||||
type: String,
|
||||
default: "选择民警"
|
||||
},
|
||||
//是否单选
|
||||
Single: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
roleIds: {
|
||||
type: Array,
|
||||
default: []
|
||||
} // 回显
|
||||
});
|
||||
const keyid = (row) => {
|
||||
return row.ryid;
|
||||
};
|
||||
const total = ref(0);
|
||||
const listQuery = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 20,
|
||||
fl: "01"
|
||||
});
|
||||
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;
|
||||
qcckGet(params, "/mosty-yjzl/tbZdxlFgdw/selectPage")
|
||||
.then((res) => {
|
||||
tableData.value = res.records || [];
|
||||
total.value = res.total;
|
||||
multipleUser();
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
//列表回显
|
||||
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>
|
||||
Reference in New Issue
Block a user