feat(example): 新增用户机台班组配置功能模块
This commit is contained in:
parent
e3259786f4
commit
ebaf35aad3
@ -0,0 +1,100 @@
|
|||||||
|
<template>
|
||||||
|
<el-dialog
|
||||||
|
title=""
|
||||||
|
:visible.sync="dialogVisible"
|
||||||
|
width="800px"
|
||||||
|
:close-on-click-modal="false"
|
||||||
|
@close="handleClose"
|
||||||
|
:append-to-body="true"
|
||||||
|
>
|
||||||
|
<el-row :gutter="20" style="margin-top: 10px;">
|
||||||
|
<el-col :span="24">
|
||||||
|
<div style="margin-bottom: 10px;">
|
||||||
|
<span style="font-weight: bold;">机台信息</span>
|
||||||
|
</div>
|
||||||
|
<div style="max-height: 360px; overflow-y: auto;">
|
||||||
|
<el-table
|
||||||
|
:data="machineList"
|
||||||
|
:border="true"
|
||||||
|
:style="{ width: '100%' }"
|
||||||
|
:max-height="340"
|
||||||
|
v-loading="loading"
|
||||||
|
>
|
||||||
|
<el-table-column type="index" label="序号" align="center" width="60"/>
|
||||||
|
<el-table-column prop="machineCd" label="机台编码" align="center"/>
|
||||||
|
<el-table-column prop="machineName" label="机台名称" align="center"/>
|
||||||
|
<el-table-column prop="createUserName" label="创建人" align="center"/>
|
||||||
|
<el-table-column prop="creatorTime" label="创建时间" align="center" :formatter="jnpf.tableDateFormat1"/>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<div slot="footer" class="dialog-footer">
|
||||||
|
<el-button type="primary" @click="handleClose">关 闭</el-button>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import request from "@/utils/request";
|
||||||
|
import jnpf from "@/utils/jnpf";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "machineDetail",
|
||||||
|
components: {},
|
||||||
|
props: {
|
||||||
|
dialogVisible: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
userName: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
userMachineId: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
title() {
|
||||||
|
return `${this.userName} 的机台列表`;
|
||||||
|
},
|
||||||
|
jnpf() {
|
||||||
|
return jnpf;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loading: false,
|
||||||
|
machineList: [],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
dialogVisible(val) {
|
||||||
|
if (val && this.userMachineId) {
|
||||||
|
this.initData();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initData() {
|
||||||
|
this.loading = true;
|
||||||
|
request({
|
||||||
|
url: `/api/example/userMachine/${this.userMachineId}`,
|
||||||
|
method: "get",
|
||||||
|
}).then((res) => {
|
||||||
|
this.machineList = res.data.machineList || [];
|
||||||
|
this.loading = false;
|
||||||
|
}).catch(() => {
|
||||||
|
this.machineList = [];
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleClose() {
|
||||||
|
this.$emit("update:dialogVisible", false);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -0,0 +1,177 @@
|
|||||||
|
<template>
|
||||||
|
<el-dialog
|
||||||
|
:title="title"
|
||||||
|
:visible.sync="dialogVisible"
|
||||||
|
width="1000px"
|
||||||
|
:close-on-click-modal="false"
|
||||||
|
@close="handleClose"
|
||||||
|
:append-to-body="true"
|
||||||
|
>
|
||||||
|
<!-- 搜索区域 -->
|
||||||
|
<el-row :gutter="20" style="margin-bottom: 15px; padding: 0 10px;">
|
||||||
|
<el-col :span="16">
|
||||||
|
<el-input
|
||||||
|
v-model="listQuery.selectKey"
|
||||||
|
placeholder="请输入机台编码或机台名称"
|
||||||
|
clearable
|
||||||
|
label="检索条件"
|
||||||
|
@keyup.enter.native="initData"
|
||||||
|
>
|
||||||
|
<i slot="prefix" class="el-icon-search"></i>
|
||||||
|
</el-input>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8" style="text-align: right;">
|
||||||
|
<el-button type="primary" icon="el-icon-search" @click="initData">查询</el-button>
|
||||||
|
<el-button icon="el-icon-refresh-right" @click="reset">重置</el-button>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<div style="max-height: 450px; overflow-y: auto;">
|
||||||
|
<el-table
|
||||||
|
:data="machineList"
|
||||||
|
:border="true"
|
||||||
|
:style="{ width: '100%' }"
|
||||||
|
v-loading="loading"
|
||||||
|
@selection-change="handleSelectionChange"
|
||||||
|
ref="machineTable"
|
||||||
|
:max-height="400"
|
||||||
|
>
|
||||||
|
<el-table-column type="selection" align="center" width="55"/>
|
||||||
|
<el-table-column type="index" label="序号" align="center" width="60"/>
|
||||||
|
<el-table-column prop="machineCd" label="机台编码" align="center"/>
|
||||||
|
<el-table-column prop="machineName" label="机台名称" align="center"/>
|
||||||
|
<el-table-column prop="createUserName" label="创建人" align="center"/>
|
||||||
|
<el-table-column prop="creatorTime" label="创建时间" align="center" :formatter="jnpf.tableDateFormat1"/>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<!-- 分页 -->
|
||||||
|
<pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize"
|
||||||
|
@pagination="initData" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div slot="footer" class="dialog-footer">
|
||||||
|
<el-button @click="handleClose">取 消</el-button>
|
||||||
|
<el-button type="primary" @click="handleConfirm">确 定</el-button>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import request from "@/utils/request";
|
||||||
|
import jnpf from "@/utils/jnpf";
|
||||||
|
import pagination from "@/components/Pagination";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "machineList",
|
||||||
|
components: {
|
||||||
|
pagination,
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
dialogVisible: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: "选择机台",
|
||||||
|
},
|
||||||
|
selectedMachineIds: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loading: false,
|
||||||
|
machineList: [],
|
||||||
|
selectedItems: [],
|
||||||
|
total: 0,
|
||||||
|
listQuery: {
|
||||||
|
currentPage: 1,
|
||||||
|
pageSize: 20,
|
||||||
|
sort: "desc",
|
||||||
|
sidx: "",
|
||||||
|
selectKey: "",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
jnpf() {
|
||||||
|
return jnpf;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
dialogVisible(val) {
|
||||||
|
if (val) {
|
||||||
|
this.listQuery.currentPage = 1;
|
||||||
|
this.initData();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initData() {
|
||||||
|
this.loading = true;
|
||||||
|
let _query = {
|
||||||
|
...this.listQuery,
|
||||||
|
dataType: 0,
|
||||||
|
};
|
||||||
|
request({
|
||||||
|
url: `/api/example/machine/getList`,
|
||||||
|
method: "post",
|
||||||
|
data: _query,
|
||||||
|
}).then((res) => {
|
||||||
|
this.machineList = res.data.list || [];
|
||||||
|
this.total = res.data.pagination.total;
|
||||||
|
this.loading = false;
|
||||||
|
// 设置已选中的机台
|
||||||
|
this.setSelectedMachines();
|
||||||
|
}).catch(() => {
|
||||||
|
this.machineList = [];
|
||||||
|
this.total = 0;
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 设置已选中的机台
|
||||||
|
setSelectedMachines() {
|
||||||
|
if (!this.$refs.machineTable || this.selectedMachineIds.length === 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.$nextTick(() => {
|
||||||
|
// 先清除所有选中状态
|
||||||
|
this.$refs.machineTable.clearSelection();
|
||||||
|
// 重新勾选
|
||||||
|
this.machineList.forEach(row => {
|
||||||
|
if (this.selectedMachineIds.includes(row.id)) {
|
||||||
|
this.$refs.machineTable.toggleRowSelection(row, true);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 勾选变化处理
|
||||||
|
handleSelectionChange(selectedItems) {
|
||||||
|
this.selectedItems = selectedItems;
|
||||||
|
},
|
||||||
|
// 确认选择
|
||||||
|
handleConfirm() {
|
||||||
|
const selectedMachines = this.selectedItems.map(item => ({
|
||||||
|
machineId: item.id,
|
||||||
|
machineCd: item.machineCd,
|
||||||
|
machineName: item.machineName,
|
||||||
|
createUserName: item.createUserName,
|
||||||
|
creatorTime: item.creatorTime,
|
||||||
|
}));
|
||||||
|
this.$emit('confirm', selectedMachines);
|
||||||
|
this.handleClose();
|
||||||
|
},
|
||||||
|
handleClose() {
|
||||||
|
this.$emit("update:dialogVisible", false);
|
||||||
|
},
|
||||||
|
// 重置搜索
|
||||||
|
reset() {
|
||||||
|
this.listQuery.selectKey = "";
|
||||||
|
this.listQuery.currentPage = 1;
|
||||||
|
this.initData();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
Loading…
Reference in New Issue
Block a user