beizeValveMesVue/src/views/groupManagement/GroupWorkstationSkill.vue
2024-12-03 11:47:48 +08:00

264 lines
7.7 KiB
Vue

<!--
* @Descripttion: (工艺路线/base_work_route)
* @Author: (admin)
* @Date: (2024-07-09)
-->
<template>
<div>
<el-form :model="queryParams" label-position="right" inline ref="queryRef" @submit.prevent>
<el-form-item label="工艺路线编码" prop="code">
<el-input v-model="queryParams.code" placeholder="请输入工艺路线编码" />
</el-form-item>
<el-form-item label="工艺路线名称" prop="name">
<el-input v-model="queryParams.name" placeholder="请输入工艺路线名称" />
</el-form-item>
<el-form-item>
<el-button icon="search" type="primary" @click="handleQuery">{{ $t('btn.search') }}</el-button>
<el-button icon="refresh" @click="resetQuery">{{ $t('btn.reset') }}</el-button>
</el-form-item>
</el-form>
<el-row :gutter="20">
<el-col :span="6">
<el-table height="500px" :data="dataList" v-loading="loading" ref="table" border @cell-click="selectRoute" highlight-current-row>
<el-table-column prop="code" label="流程编号" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="name" label="流程名称" align="center" :show-overflow-tooltip="true" />
</el-table>
</el-col>
<el-col :span="18">
<el-table height="500px" :data="dataList2" v-loading="loading2" ref="table" border>
<el-table-column prop="dictWorkType" label="工序类别" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="workStationDescription" label="工位描述" align="center" :show-overflow-tooltip="true" />
<el-table-column label="操作" align="center" width="100">
<template #default="scope">
<el-button type="warning" size="small" @click="openBindDialog(scope.row.id)">技能绑定</el-button>
</template>
</el-table-column>
</el-table>
<pagination :total="total2" v-model:page="queryParams2.pageNum" v-model:limit="queryParams2.pageSize" @pagination="getList2" />
</el-col>
</el-row>
<!-- 已绑定 -->
<el-dialog
v-model="bindShow"
@opened="bindOpened"
:close-on-click-modal="false"
title="工位已绑定技能"
width="60%"
append-to-body
draggable>
<el-row :gutter="15" class="mb10">
<el-col :span="1.5">
<el-button type="primary" plain icon="plus" @click="openNotBindDialog">
{{ $t('btn.add') }}
</el-button>
</el-col>
</el-row>
<el-table :data="bindDataList" v-loading="bindLoading" ref="table" border highlight-current-row>
<el-table-column prop="skillName" label="技能名称" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="remark" label="备注" align="center" :show-overflow-tooltip="true" />
<el-table-column label="操作" width="160" align="center">
<template #default="scope">
<el-button type="danger" size="small" @click="removeBind(scope.row)">解绑</el-button>
</template>
</el-table-column>
</el-table>
</el-dialog>
<!-- 未绑定 -->
<el-dialog
v-model="notBindShow"
@opened="notBindOpened"
:close-on-click-modal="false"
title="待绑定技能"
width="50%"
append-to-body
draggable>
<el-form :model="notBindQueryParams" label-position="right" inline ref="NotBindFormRef" @submit.prevent>
<el-form-item label="技能名称" prop="skillName">
<el-input v-model.trim="notBindQueryParams.skillName" placeholder="请输入技能名称" />
</el-form-item>
<el-form-item>
<el-button icon="search" type="primary" @click="handleNotBindQuery">{{ $t('btn.search') }}</el-button>
<el-button icon="refresh" @click="resetNotBindQuery">{{ $t('btn.reset') }}</el-button>
</el-form-item>
</el-form>
<el-table :data="notBindDataList" v-loading="loading" ref="table" border highlight-current-row>
<el-table-column prop="skillName" label="技能名称" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="remark" label="备注" align="center" :show-overflow-tooltip="true" />
<el-table-column label="操作" width="160" align="center">
<template #default="scope">
<el-button type="success" size="small" @click="bind(scope.row)">绑定</el-button>
</template>
</el-table-column>
</el-table>
<pagination
:total="notBindTotal"
v-model:page="notBindQueryParams.pageNum"
v-model:limit="notBindQueryParams.pageSize"
@pagination="getNotBindList" />
</el-dialog>
</div>
</template>
<script setup name="GroupWorkstationSkill">
import {
GetWorkRouteList,
GetWorkstationbyRoute,
GetWorkstationBindSkillList,
GetWorkstationunBindSkillList,
HandleWorkstationbindSkill,
LiftedWorkstationbindSkill
} from '@/api/groupManagement/grouppersonskil.js'
const { proxy } = getCurrentInstance()
/// ============== 工艺路线查看 ===============
const queryParams = reactive({
pageNum: 1,
pageSize: 10,
name: '',
code: '',
status: 1
})
const total = ref(0)
const dataList = ref([])
const loading = ref(false)
function getList() {
loading.value = true
GetWorkRouteList(queryParams).then((res) => {
const { code, data } = res
if (code == 200) {
dataList.value = res.data
loading.value = false
}
})
}
// 查询
function handleQuery() {
queryParams.pageNum = 1
getList()
}
handleQuery()
// 重置查询操作
function resetQuery() {
proxy.resetForm('queryRef')
handleQuery()
}
// 选择工艺路线
const routeId = ref()
function selectRoute(row) {
routeId.value = row.id
getList2()
}
/// ============== 工位查看 ===============
const total2 = ref(0)
const dataList2 = ref([])
const loading2 = ref(false)
const queryParams2 = reactive({
pageNum: 1,
pageSize: 10,
status: 1
})
function getList2() {
loading2.value = true
queryParams2.route_id = routeId.value
GetWorkstationbyRoute(queryParams2).then((res) => {
const { code, data } = res
if (code == 200) {
dataList2.value = data.result
total2.value = data.totalNum
loading2.value = false
}
})
}
/// ============== 技能绑定 ================
const bindKey = ref()
const bindShow = ref(false)
const bindDataList = ref([])
const bindLoading = ref(false)
function openBindDialog(key) {
bindKey.value = key
bindDataList.value = []
bindShow.value = true
}
function bindOpened() {
getBindList()
}
function getBindList() {
bindLoading.value = true
GetWorkstationBindSkillList({ workstation_id: bindKey.value }).then((res) => {
const { code, data } = res
if (code == 200) {
bindDataList.value = res.data
bindLoading.value = false
}
})
}
function removeBind(row) {
const params = {
workstation_id:bindKey.value,
skill_id:row.id
}
LiftedWorkstationbindSkill(params).then((res) => {
proxy.$modal.msgSuccess('解绑成功')
getBindList()
})
}
const notBindShow = ref(false)
const notBindDataList = ref([])
const notBindLoading = ref(false)
const notBindTotal = ref(0)
const notBindQueryParams = reactive({
pageNum: 1,
pageSize: 10,
skillName:'',
workstation_id:'',
status: 1
})
function openNotBindDialog() {
notBindDataList.value = []
notBindShow.value = true
}
function notBindOpened() {
getNotBindList()
}
function getNotBindList() {
notBindLoading.value = true
notBindQueryParams.workstation_id = bindKey.value
GetWorkstationunBindSkillList(notBindQueryParams).then((res) => {
const { code, data } = res
if (code == 200) {
notBindDataList.value = res.data.result
notBindTotal.value = data.totalNum
notBindLoading.value = false
}
})
}
// 查询
function handleNotBindQuery() {
queryParams.pageNum = 1
getNotBindList()
}
handleNotBindQuery()
// 重置查询操作
function resetNotBindQuery() {
proxy.resetForm('NotBindFormRef')
handleNotBindQuery()
}
function bind(row) {
const params = {
workstation_id:bindKey.value,
skill_id:row.id
}
HandleWorkstationbindSkill(params).then((res) => {
proxy.$modal.msgSuccess('绑定成功')
getNotBindList()
getBindList()
})
}
</script>