sfms3.0
/
sfms3.0-ui
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

班组失去焦点校验

hella_online_20240829
zhang_li 4 months ago
parent
59ac86f297
commit
303cbbc58f
1 changed files with 238 additions and 99 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 337
      src/views/wms/basicDataManage/orderManage/team/teamForm.vue

337
src/views/wms/basicDataManage/orderManage/team/teamForm.vue
View File

@ -10,7 +10,7 @@
<el-row>
<el-col :span="12">
<el-form-item label="班组编码" prop="code">
<el-input v-model="formData.code" placeholder="请输入班组编码" :disabled="isDisabled"/>
<el-input v-model="formData.code" placeholder="请输入班组编码" :disabled="isDisabled" />
</el-form-item>
</el-col>
<el-col :span="12">
@ -35,8 +35,13 @@
<el-col :span="12">
<el-form-item label="负责人" prop="teamMonitorName">
<div class="input-with-button">
<el-input v-model="formData.teamMonitorName" placeholder="请选择负责人" :style="{ width: '35%' }"/>
<el-button :icon="Search" @click="addMonitor"/>
<el-input
v-model="formData.teamMonitorName"
placeholder="请选择负责人"
:style="{ width: '35%' }"
@blur="addUserBlur('teamMonitorName', formData.teamMonitorName)"
/>
<el-button :icon="Search" @click="addMonitor" />
</div>
</el-form-item>
</el-col>
@ -45,16 +50,26 @@
<el-col :span="12">
<el-form-item label="车间代码" prop="workshopCode">
<div class="input-with-button">
<el-input v-model="formData.workshopCode" placeholder="请选择车间代码" :style="{ width: '35%' }"/>
<el-button :icon="Search" @click="addWorkShop"/>
<el-input
v-model="formData.workshopCode"
placeholder="请选择车间代码"
:style="{ width: '35%' }"
@blur="addWorkshopCodeBlur('workshopCode', formData.workshopCode)"
/>
<el-button :icon="Search" @click="addWorkShop" />
</div>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="产线代码" prop="productionLineCode">
<div class="input-with-button">
<el-input v-model="formData.productionLineCode" placeholder="请选择产线代码" :style="{ width: '35%' }"/>
<el-button :icon="Search" @click="addProductionLine"/>
<el-input
v-model="formData.productionLineCode"
placeholder="请选择产线代码"
:style="{ width: '35%' }"
@blur="addProductionLineBlur('productionLineCode', formData.productionLineCode)"
/>
<el-button :icon="Search" @click="addProductionLine" />
</div>
</el-form-item>
</el-col>
@ -68,7 +83,7 @@
placeholder="请选择生效时间"
format="YYYY-MM-DD HH:mm:ss"
value-format="x"
style="width: 100%;"
style="width: 100%"
/>
</el-form-item>
</el-col>
@ -80,7 +95,7 @@
placeholder="请选择失效时间"
format="YYYY-MM-DD HH:mm:ss"
value-format="x"
style="width: 100%;"
style="width: 100%"
/>
</el-form-item>
</el-col>
@ -89,9 +104,14 @@
<el-col :span="24">
<el-form-item label="班组成员">
<div class="tag-container flex gap-2">
<el-tag v-for="ent in tags" :key="ent.username" closable :disable-transitions="false"
@close="handleClose(ent.username)">
{{ ent.nickname}}
<el-tag
v-for="ent in tags"
:key="ent.username"
closable
:disable-transitions="false"
@close="handleClose(ent.username)"
>
{{ ent.nickname }}
</el-tag>
<el-input
v-if="inputVisible"
@ -126,24 +146,24 @@
</template>
</Dialog>
<!--添加班组人员弹窗-->
<!--添加班组人员弹窗-->
<SearchTable ref="searchTableRef" @searchTableSuccess="searchTableSuccess" />
</template>
<script lang="ts" setup>
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
import * as TeamApi from '@/api/wms/team'
import request from "@/config/axios";
import request from '@/config/axios'
import { SearchTable } from '@/components/SearchTable'
import {searchUser} from "@/views/wms/basicDataManage/orderManage/team/team.data";
import * as UserApi from "@/api/system/user";
import {validateYS} from "@/utils/validator";
import { searchUser } from '@/views/wms/basicDataManage/orderManage/team/team.data'
import * as UserApi from '@/api/system/user'
import { validateYS } from '@/utils/validator'
import { Search } from '@element-plus/icons-vue'
import * as WorkshopApi from "@/api/wms/workshop";
import {Workshop} from "@/views/wms/basicDataManage/factoryModeling/workshop/workshop.data";
import * as WorkshopApi from '@/api/wms/workshop'
import { Workshop } from '@/views/wms/basicDataManage/factoryModeling/workshop/workshop.data'
import * as ProductionlineApi from '@/api/wms/productionline'
import { Productionline } from "@/views/wms/basicDataManage/factoryModeling/productionline/productionline.data";
import {ElInput} from "element-plus";
import { Productionline } from '@/views/wms/basicDataManage/factoryModeling/productionline/productionline.data'
import { ElInput } from 'element-plus'
import { FormBlur } from '@/api/wms/business/inputBlur'
defineOptions({ name: 'TeamForm' })
@ -154,7 +174,7 @@ const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const tags=ref([])
const tags = ref([])
const inputValue = ref('')
const inputVisible = ref(false)
@ -171,65 +191,63 @@ const formData = ref({
remark: '',
createTime: '',
members: '',
workshopCode:'',
workshopName:'',
productionLineCode:'',
productionLineName:'',
teamMonitorCode:'',
teamMonitorName:''
workshopCode: '',
workshopName: '',
productionLineCode: '',
productionLineName: '',
teamMonitorCode: '',
teamMonitorName: ''
})
const formRules = reactive({
code: [
{ required: true, message: '班组编码不能为空', trigger: 'blur' },
{ max: 50, message: '不得超过50个字符', trigger: 'blur' },
{ validator:validateYS, message: '请输入正确的代码', trigger: 'blur'}
{ validator: validateYS, message: '请输入正确的代码', trigger: 'blur' }
],
name: [
{ required: true, message: '班组名称不能为空', trigger: 'blur' },
{ max: 50, message: '不得超过50个字符', trigger: 'blur' }
],
remark: [
{ max: 50, message: '不得超过50个字符', trigger: 'blur' }
],
remark: [{ max: 50, message: '不得超过50个字符', trigger: 'blur' }],
teamGroup: [{ required: true, message: '班组类别不能为空', trigger: 'change' }],
workshopCode: [{ required: true, message: '请选择车间代码', trigger: 'blur' },],
productionLineCode: [{ required: true, message: '请选择产线代码', trigger: 'blur' },],
teamMonitorName: [{ required: true, message: '请选择负责人', trigger: 'blur' },],
workshopCode: [{ required: true, message: '请选择车间代码', trigger: 'blur' }],
productionLineCode: [{ required: true, message: '请选择产线代码', trigger: 'blur' }],
teamMonitorName: [{ required: true, message: '请选择负责人', trigger: 'blur' }]
})
const basicFormRef = ref() // 表单 Ref
const handleClose = (username: string) => {
const index = tags.value.findIndex(tag => tag.username === username);
const index = tags.value.findIndex((tag) => tag.username === username)
if (index !== -1) {
tags.value.splice(index, 1);
tags.value.splice(index, 1)
}
}
/** 弹窗相关参数 */
const searchTableRef = ref();
const _searchTableTitle = ref();
const _searchTableAllSchemas = ref();
const _searchTablePage = ref();
const _formField = ref();
const _searchField = ref();
const _multiple = ref();
const _type = ref();
const _row = ref();
const searchTableRef = ref()
const _searchTableTitle = ref()
const _searchTableAllSchemas = ref()
const _searchTablePage = ref()
const _formField = ref()
const _searchField = ref()
const _multiple = ref()
const _type = ref()
const _row = ref()
const _searchCondition = ref({})
const addMonitor = () =>{
addUserCommon(false,'monitor')
const addMonitor = () => {
addUserCommon(false, 'monitor')
}
const addUser = () =>{
addUserCommon(true,'username')
const addUser = () => {
addUserCommon(true, 'username')
}
/** 选择人员弹窗 */
const addUserCommon = (multiple,field) => {
const addUserCommon = (multiple, field) => {
_searchCondition.value = {}
const filters: any[] = []
filters.push({
action: "==",
action: '==',
column: 'userType',
value: 'WORKER'
})
@ -244,13 +262,40 @@ const addUserCommon = (multiple,field) => {
_searchTableAllSchemas.value = searchUser.allSchemas
openCommon()
}
// 人员失去焦点
const addUserBlur = async (field, e) => {
_searchCondition.value = {}
const filters: any[] = []
filters.push(
{
action: '==',
column: 'userType',
value: 'WORKER'
},
{
action: '==',
column: 'username',
value: e
}
)
// 参数整理
_searchCondition.value.isSearch = true
_searchCondition.value.filters = filters
_searchTableTitle.value = '选择人员'
_multiple.value = false
_formField.value = field
_searchField.value = field
_searchTablePage.value = UserApi.getUserPage
_searchTableAllSchemas.value = searchUser.allSchemas
getBlurFun(field, e)
}
/** 选择车间弹窗 */
const addWorkShop = () => {
_searchCondition.value = {}
const filters: any[] = []
filters.push({
action: "==",
action: '==',
column: 'available',
value: 'TRUE'
})
@ -265,27 +310,54 @@ const addWorkShop = () => {
_searchTableAllSchemas.value = Workshop.allSchemas
openCommon()
}
/** 选择产线弹窗 */
const addProductionLine = () => {
if (formData.value.workshopCode == '' || formData.value.workshopCode == null ){
message.warning('请先选择车间代码');
return
}
// 车间失去焦点
const addWorkshopCodeBlur = (field, e) => {
_searchCondition.value = {}
const filters: any[] = []
filters.push({
action: "==",
action: '==',
column: 'available',
value: 'TRUE'
},{
action: "==",
column: 'workshopCode',
value: formData.value.workshopCode
action: '==',
column: 'code',
value: e
})
// 参数整理
_searchCondition.value.isSearch = true
_searchCondition.value.filters = filters
_searchTableTitle.value = '选择车间'
_multiple.value = false
_formField.value = 'workshop'
_searchField.value = 'workshop'
_searchTablePage.value = WorkshopApi.getWorkshopPage
_searchTableAllSchemas.value = Workshop.allSchemas
formData.value.productionLineCode = ''
getBlurFun(field, e)
}
/** 选择产线弹窗 */
const addProductionLine = () => {
if (formData.value.workshopCode == '' || formData.value.workshopCode == null) {
message.warning('请先选择车间代码')
return
}
_searchCondition.value = {}
const filters: any[] = []
filters.push(
{
action: '==',
column: 'available',
value: 'TRUE'
},
{
action: '==',
column: 'workshopCode',
value: formData.value.workshopCode
}
)
// 参数整理
_searchCondition.value.isSearch = true
_searchCondition.value.filters = filters
_searchTableTitle.value = '选择产线'
_multiple.value = false
_formField.value = 'productionLine'
@ -294,38 +366,68 @@ const addProductionLine = () => {
_searchTableAllSchemas.value = Productionline.allSchemas
openCommon()
}
// 产线失去焦点
const addProductionLineBlur = (field, e) => {
_searchCondition.value = {}
if (formData.value.workshopCode == '' || formData.value.workshopCode == null) {
message.warning('请先选择车间代码')
return
}
_searchCondition.value = {}
const filters: any[] = []
filters.push(
{
action: '==',
column: 'available',
value: 'TRUE'
}, {
action: '==',
column: 'workshopCode',
value: formData.value.workshopCode
},{
action: '==',
column: 'code',
value: e
})
// 参数整理
_searchCondition.value.isSearch = true
_searchCondition.value.filters = filters
_searchTableTitle.value = '选择产线'
_multiple.value = false
_formField.value = 'productionLine'
_searchField.value = 'productionLine'
_searchTablePage.value = ProductionlineApi.getProductionlinePage
_searchTableAllSchemas.value = Productionline.allSchemas
getBlurFun(field, e)
}
/** 弹窗选择之后 回调函数 */
const searchTableSuccess = (formField, searchField, val, formRef, type, row ) => {
const searchTableSuccess = (formField, searchField, val, formRef, type, row) => {
nextTick?.(() => {
if (formField === 'workshop') {
if (formData.value.workshopCode != val[0].code){
if (formData.value.workshopCode != val[0].code) {
formData.value.productionLineCode = null
formData.value.productionLineName = null
}
formData.value.workshopCode = val[0].code
formData.value.workshopName = val[0].name
}
else if (formField === 'productionLine'){
} else if (formField === 'productionLine') {
formData.value.productionLineCode = val[0].code
formData.value.productionLineName = val[0].name
}
else if (formField === 'monitor'){
} else if (formField === 'monitor') {
formData.value.teamMonitorCode = val[0].username
formData.value.teamMonitorName = val[0].nickname
}
else {
val.forEach(item => {
const isExist = tags.value.some(tag => tag.username === item.username);
if (!isExist){
const newUser = {};
} else {
val.forEach((item) => {
const isExist = tags.value.some((tag) => tag.username === item.username)
if (!isExist) {
const newUser = {}
if (formField === 'username') {
newUser['username'] = item.username;
newUser['nickname'] = item.nickname;
newUser['username'] = item.username
newUser['nickname'] = item.nickname
}
tags.value.push(newUser);
tags.value.push(newUser)
}
});
})
}
})
}
@ -343,6 +445,46 @@ const openCommon = () => {
_searchCondition.value
)
}
// 失去焦點接口
const getBlurFun = async (field, val) => {
let obj = {
by: 'ASC',
pageNo: 1,
pageSize: 20
}
const params = {
isSearch: _searchCondition.value.isSearch,
filters: _searchCondition.value.filters,
...obj
}
if (!_multiple.value && val.indexOf(',') > -1) {
message.alert('该输入框只能输入一条数据')
formData.value[field] = ''
return
}
await _searchTablePage.value(params).then((res) => {
let arr1 = val.split(',')
let list = ref([])
list.value = res?.list?.length > 0 ? res.list.slice(0, 1) : []
if (list.value?.length == 0) {
message.alert('暂无数据')
formData.value[field] = ''
return
}
if (arr1.length != list.value.length) {
let arr2 = list.value.map((item) => item[field])
let str = [
...arr1.filter((item) => !arr2.includes(item)),
...arr2.filter((item) => !arr1.includes(item))
].join(',')
message.alert('代码' + str + '没有找到对应数据')
formData.value[field] = ''
return
}
// callback(list.value)
})
}
/** 初始化弹窗 */
const open = async (type: string, row?: object) => {
dialogVisible.value = true
@ -351,18 +493,17 @@ const open = async (type: string, row?: object) => {
resetForm()
// 修改时，设置数据
if (row) {
isDisabled.value = true;
isDisabled.value = true
formLoading.value = true
try {
formData.value = await request.get({ url: `/wms/team/get?id=` + row.id });
tags.value=JSON.parse(formData.value.members)
formData.value = await request.get({ url: `/wms/team/get?id=` + row.id })
tags.value = JSON.parse(formData.value.members)
} finally {
formLoading.value = false
}
}
else {
isDisabled.value = false;
tags.value=[];
} else {
isDisabled.value = false
tags.value = []
}
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
@ -374,8 +515,8 @@ const submitForm = async () => {
if (!basicFormRef) return
const valid = await basicFormRef.value.validate()
if (!valid) return
if (tags.value.length > 15 ){
message.warning('班组成员最多15人');
if (tags.value.length > 15) {
message.warning('班组成员最多15人')
return
}
// 提交请求
@ -410,16 +551,15 @@ const resetForm = () => {
remark: '',
createTime: '',
members: '',
workshopCode:'',
workshopName:'',
productionLineCode:'',
productionLineName:'',
teamMonitorCode:'',
teamMonitorName:''
workshopCode: '',
workshopName: '',
productionLineCode: '',
productionLineName: '',
teamMonitorCode: '',
teamMonitorName: ''
}
basicFormRef.value?.resetFields()
}
</script>
<style scoped>
@ -443,5 +583,4 @@ const resetForm = () => {
flex: 1;
/*margin-right: 10px;*/
}
</style>

Write Preview
Loading…
Cancel
Save