316 lines
7.4 KiB
Vue
316 lines
7.4 KiB
Vue
<template>
|
|
<el-dialog
|
|
title="选择智能装备"
|
|
width="1400px"
|
|
:model-value="modelValue"
|
|
@close="closed"
|
|
>
|
|
<div v-if="modelValue">
|
|
<el-form :model="listQuery" class="mosty-from-wrap" :inline="true">
|
|
<el-form-item label="所属部门" v-if="showBm">
|
|
<MOSTY.Department
|
|
width="100%"
|
|
clearable
|
|
v-model="listQuery.ssbmdm"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="装备类型">
|
|
<el-cascader
|
|
v-model="listQuery.scode"
|
|
:options="D_BZ_ZBLX_LZ"
|
|
:props="propsTree"
|
|
clearable
|
|
:show-all-levels="false"
|
|
>
|
|
</el-cascader>
|
|
</el-form-item>
|
|
<el-form-item label="生产日期">
|
|
<el-date-picker
|
|
unlink-panels
|
|
format="YYYY-MM-DD"
|
|
value-format="YYYY-MM-DD"
|
|
v-model="listQuery.gzrq"
|
|
type="date"
|
|
placeholder="请选择日期"
|
|
/>
|
|
</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
|
|
:row-key="keyid"
|
|
style="width: 100%"
|
|
height="450"
|
|
>
|
|
<el-table-column type="selection" width="55" :reserve-selection="true" />
|
|
<el-table-column
|
|
type="index"
|
|
show-overflow-tooltip
|
|
align="center"
|
|
width="60px"
|
|
label="序号"
|
|
>
|
|
</el-table-column
|
|
><el-table-column
|
|
sortable
|
|
prop="ssbm"
|
|
label="所属部门"
|
|
width="250px"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
sortable
|
|
prop="scode"
|
|
show-overflow-tooltip
|
|
align="center"
|
|
width="350px"
|
|
label="装备类型"
|
|
>
|
|
<template #default="{ row }">
|
|
<dict-tag :options="zbAllList" :value="row.scode" :tag="false" />
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column
|
|
sortable
|
|
prop="xh"
|
|
show-overflow-tooltip
|
|
label="装备型号"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
sortable
|
|
prop="sbmc"
|
|
show-overflow-tooltip
|
|
label="装备名称"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
sortable
|
|
prop="cgrq"
|
|
show-overflow-tooltip
|
|
label="生产日期"
|
|
align="center"
|
|
width="200px"
|
|
>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div class="fenye">
|
|
<el-pagination
|
|
class="pagination"
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
:current-page="listQuery.pageNo"
|
|
: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>
|
|
</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,getCurrentInstance } from "vue";
|
|
import { getZnzb } from "@/api/basicsmanage/intelligence";
|
|
const { proxy } = getCurrentInstance();
|
|
const { D_BZ_ZNZBFL,D_BZ_ZBLX_LZ } = proxy.$dict("D_BZ_ZNZBFL","D_BZ_ZBLX_LZ");
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: Boolean,
|
|
required: true
|
|
},
|
|
roleIds: {
|
|
type: Array,
|
|
default: []
|
|
},
|
|
//是否单选
|
|
Single: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
zblx: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
data: {
|
|
type: Array,
|
|
default: []
|
|
},
|
|
showBm: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
ssbmdm: {
|
|
type: String,
|
|
default: ""
|
|
}
|
|
});
|
|
const propsTree = ref({
|
|
checkStrictly: true,
|
|
emitPath: false,
|
|
multiple: false
|
|
});
|
|
const total = ref(0);
|
|
const listQuery = ref({
|
|
pageNo: 1,
|
|
pageSize: 20
|
|
})
|
|
const form = ref({});
|
|
const tableData = ref([]);
|
|
const zbAllList = ref([])
|
|
watch(
|
|
() => D_BZ_ZBLX_LZ.value,
|
|
(val) => {
|
|
val.forEach((p) => {
|
|
zbAllList.value.push(p);
|
|
if (p.itemList && p.itemList.length > 0) {
|
|
getChildren(p);
|
|
}
|
|
});
|
|
}
|
|
);
|
|
watch(
|
|
() => props.zblx,
|
|
(val) => {
|
|
if (val) {
|
|
listQuery.value.ssbmdm = props.ssbmdm
|
|
listQuery.value.scode = val ? val : "";
|
|
}
|
|
},{
|
|
deep:true,
|
|
immediate:true
|
|
}
|
|
);
|
|
|
|
// 递归处理数据
|
|
function getChildren(item) {
|
|
zbAllList.value.push(item);
|
|
if (item.itemList && item.itemList.length > 0) {
|
|
item.itemList.forEach((v) => {
|
|
getChildren(v);
|
|
});
|
|
}
|
|
}
|
|
|
|
const emits = defineEmits(["update:modelValue", "choosedUsers"]);
|
|
const closed = () => {
|
|
emits("update:modelValue", false);
|
|
};
|
|
function changelx(val) {
|
|
listQuery.value.scode = val ? val : "";
|
|
}
|
|
const reset = () => {
|
|
listQuery.value = {
|
|
pageNo: 1,
|
|
ssbmdm: props.ssbmdm,
|
|
pageSize: 20
|
|
};
|
|
listQuery.value.scode = props.zblx
|
|
getListData();
|
|
};
|
|
const keyid = (row) => {
|
|
return row.id;
|
|
};
|
|
|
|
// 为用户分配角色
|
|
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.pageNo = currentPage;
|
|
getListData();
|
|
};
|
|
const getListData = async () => {
|
|
const params = listQuery.value;
|
|
const res = await getZnzb(params);
|
|
tableData.value = res?.records;
|
|
total.value = Number(res.total);
|
|
multipleUser()
|
|
};
|
|
|
|
//列表回显
|
|
function multipleUser(row) {
|
|
tableData.value.forEach(item=>{
|
|
if(props.roleIds.some(id=>id == item.id)){
|
|
multipleUserRef.value.toggleRowSelection(item, true);
|
|
}
|
|
})
|
|
}
|
|
|
|
const handleFilter = () => {
|
|
listQuery.value.pageNo = 1;
|
|
getListData();
|
|
};
|
|
|
|
const multipleUserRef = ref(null);
|
|
const multipleSelectionUser = ref([]);
|
|
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;
|
|
}
|
|
};
|
|
|
|
onMounted(()=>{
|
|
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>
|