'保安项目提交'
This commit is contained in:
esacpe
@ -0,0 +1,280 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog title="巡防内容" width="1400px" v-model="modelValue" append-to-body @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.key" placeholder="请输入关键字" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="success" @click="handleFilter">查询</el-button>
|
||||
<el-button type="info" @click="resetModel"> 重置 </el-button>
|
||||
<el-button type="success" @click="modelValueAdd = true">新增模板</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"
|
||||
:row-key="keyid"
|
||||
border
|
||||
style="width: 100%"
|
||||
height="450"
|
||||
>
|
||||
<el-table-column type="selection" width="55" :reserve-selection="true"/>
|
||||
<el-table-column prop="nr" label="内容" />
|
||||
<el-table-column label="操作" width="70">
|
||||
<template #default="{ row }">
|
||||
<el-icon style="margin:0 4px;" @click="editForm(row)"><Document/></el-icon>
|
||||
<el-icon @click="deleteForm([row.id])"><Delete/></el-icon>
|
||||
</template>
|
||||
</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 style="text-align:center;">
|
||||
<el-button @click="closed">取消</el-button>
|
||||
<el-button type="primary" @click="onComfirm">确认</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 新增模板 -->
|
||||
<el-dialog
|
||||
:title="mbTitle"
|
||||
width="500px"
|
||||
:destroy-on-close="true"
|
||||
v-model="modelValueAdd"
|
||||
append-to-body
|
||||
@close="closeAddModel">
|
||||
<el-form ref="elformAdd" :model="addForm" :rules="rules" class="mosty-from-wrap" :inline="true">
|
||||
<el-form-item prop="type" label="模板类型" style="width:100%">
|
||||
<el-select v-model="addForm.type" style="width:100%">
|
||||
<el-option
|
||||
v-for="item in D_ZFNR_MBLX"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="内容" style="width:100%" prop="nr">
|
||||
<el-input v-model="addForm.nr" style="width:100%" type="textarea" placeholder="请输入内容" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div style="text-align: center;">
|
||||
<el-button @click="closeAddModel">取消</el-button>
|
||||
<el-button type="primary" @click="onComfirmAdd">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { qcckGet, qcckPost ,qcckPut} from "@/api/qcckApi.js";
|
||||
import * as rule from "@/utils/rules.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { defineProps, watch, ref, onMounted, getCurrentInstance, reactive } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_ZFNR_MBLX } = proxy.$dict("D_ZFNR_MBLX");
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
roleIds: {
|
||||
type: Array,
|
||||
default: []
|
||||
},// 回显
|
||||
//是否单选
|
||||
Single: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//模板类型
|
||||
type:{
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
});
|
||||
|
||||
const mbTitle =ref('新增模板')
|
||||
const modelValueAdd = ref(false)
|
||||
const total = ref(0);
|
||||
const listQuery = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 20,
|
||||
});
|
||||
const keyid = (row) => {
|
||||
return row.id;
|
||||
};
|
||||
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 elformAdd = ref()
|
||||
const addForm = ref({ nr:''})
|
||||
const rules = reactive({
|
||||
type: [{ required: true, message: "请选择模板类型", trigger: "blur" }],
|
||||
nr: [{ required: true, message: "请输入内容", trigger: "blur" }],
|
||||
})
|
||||
onMounted(()=>{
|
||||
handleFilter();
|
||||
})
|
||||
|
||||
// 取消新增模板
|
||||
const closeAddModel = ()=>{
|
||||
modelValueAdd.value = false;
|
||||
addForm.value.nr = '';
|
||||
mbTitle.value = '新增模板'
|
||||
}
|
||||
// 编辑
|
||||
const editForm = (row)=>{
|
||||
modelValueAdd.value = true
|
||||
mbTitle.value = '编辑模板'
|
||||
addForm.value = {...row}
|
||||
}
|
||||
|
||||
// 删除模板
|
||||
const deleteForm = (row)=>{
|
||||
proxy.$confirm("确定要删除模板", "警告", {type: "warning"}).then(() => {
|
||||
qcckPost(row,'/mosty-jmxf/tbJcglXfNrmb/bacth').then(() => {
|
||||
proxy.$message({type: "success", message: "删除成功" });
|
||||
listQuery.value.pageCurrent = 1;
|
||||
handleFilter();
|
||||
});
|
||||
}).catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
}
|
||||
|
||||
// 提交新增模板
|
||||
const onComfirmAdd = ()=>{
|
||||
elformAdd.value.validate((valid)=>{
|
||||
if(!valid) return false;
|
||||
if(mbTitle.value == '新增模板'){
|
||||
qcckPost(addForm.value,'/mosty-jmxf/tbJcglXfNrmb').then(res=>{
|
||||
closeAddModel()
|
||||
handleFilter();
|
||||
proxy.$message({type: "success", message: "新增成功"});
|
||||
})
|
||||
}else{
|
||||
qcckPut(addForm.value,'/mosty-jmxf/tbJcglXfNrmb').then(res=>{
|
||||
closeAddModel()
|
||||
handleFilter();
|
||||
proxy.$message({type: "success", message: "编辑成功"});
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 分页
|
||||
const handleFilter = () => {
|
||||
listQuery.value.pageCurrent = 1;
|
||||
getListData();
|
||||
};
|
||||
|
||||
// 获取列表
|
||||
const getListData = async () => {
|
||||
let params = {
|
||||
pageCurrent:listQuery.value.pageCurrent,
|
||||
pageSize:listQuery.value.pageSize,
|
||||
nr:listQuery.value.key,
|
||||
type:props.type
|
||||
}
|
||||
qcckGet(params,'/mosty-jmxf/tbJcglXfNrmb').then(res=>{
|
||||
tableData.value = res?.records;
|
||||
total.value = Number(res.total);
|
||||
multipleUser()
|
||||
})
|
||||
|
||||
|
||||
|
||||
};
|
||||
|
||||
//列表回显
|
||||
function multipleUser() {
|
||||
tableData.value.forEach(item=>{
|
||||
if(props.roleIds.some(id=>id == item.id)){
|
||||
multipleUserRef.value.toggleRowSelection(item, true);
|
||||
}
|
||||
})
|
||||
}
|
||||
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 resetModel = () => {
|
||||
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("choosedList", 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";
|
||||
</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