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