班组失去焦点校验

src/views/wms/basicDataManage/orderManage/team/teamForm.vue

@@ -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-input
-              <el-button :icon="Search" @click="addMonitor"/>
+                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-input
-              <el-button :icon="Search" @click="addWorkShop"/>
+                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-input
-            <el-button :icon="Search" @click="addProductionLine"/>
+                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"
+              <el-tag
-                      @close="handleClose(ent.username)">
+                v-for="ent in tags"
-                {{ ent.nickname}}
+                :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 { searchUser } from '@/views/wms/basicDataManage/orderManage/team/team.data'
-import * as UserApi from "@/api/system/user";
+import * as UserApi from '@/api/system/user'
-import {validateYS} from "@/utils/validator";
+import { validateYS } from '@/utils/validator'
 import { Search } from '@element-plus/icons-vue'
-import * as WorkshopApi from "@/api/wms/workshop";
+import * as WorkshopApi from '@/api/wms/workshop'
-import {Workshop} from "@/views/wms/basicDataManage/factoryModeling/workshop/workshop.data";
+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 { Productionline } from '@/views/wms/basicDataManage/factoryModeling/productionline/productionline.data'
-import {ElInput} from "element-plus";
+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:'',
+  workshopCode: '',
-  workshopName:'',
+  workshopName: '',
-  productionLineCode:'',
+  productionLineCode: '',
-  productionLineName:'',
+  productionLineName: '',
-  teamMonitorCode:'',
+  teamMonitorCode: '',
-  teamMonitorName:''
+  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: [
+  remark: [{ max: 50, message: '不得超过50个字符', trigger: 'blur' }],
-    { max: 50, message: '不得超过50个字符', trigger: 'blur' }
-  ],
   teamGroup: [{ required: true, message: '班组类别不能为空', trigger: 'change' }],
-  workshopCode: [{ required: true, message: '请选择车间代码', trigger: 'blur' },],
+  workshopCode: [{ required: true, message: '请选择车间代码', trigger: 'blur' }],
-  productionLineCode: [{ required: true, message: '请选择产线代码', trigger: 'blur' },],
+  productionLineCode: [{ required: true, message: '请选择产线代码', trigger: 'blur' }],
-  teamMonitorName: [{ 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 searchTableRef = ref()
-const _searchTableTitle = ref();
+const _searchTableTitle = ref()
-const _searchTableAllSchemas = ref();
+const _searchTableAllSchemas = ref()
-const _searchTablePage = ref();
+const _searchTablePage = ref()
-const _formField = ref();
+const _formField = ref()
-const _searchField = ref();
+const _searchField = ref()
-const _multiple = ref();
+const _multiple = ref()
-const _type = ref();
+const _type = ref()
-const _row = ref();
+const _row = ref()
 const _searchCondition = ref({})
 
-const addMonitor = () =>{
+const addMonitor = () => {
-  addUserCommon(false,'monitor')
+  addUserCommon(false, 'monitor')
 }
 
-const addUser = () =>{
+const addUser = () => {
-  addUserCommon(true,'username')
+  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,24 +310,51 @@ const addWorkShop = () => {
   _searchTableAllSchemas.value = Workshop.allSchemas
   openCommon()
 }
-
+// 车间失去焦点
+const addWorkshopCodeBlur = (field, e) => {
+  _searchCondition.value = {}
+  const filters: any[] = []
+  filters.push({
+    action: '==',
+    column: 'available',
+    value: 'TRUE'
+  },{
+      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 ){
+  if (formData.value.workshopCode == '' || formData.value.workshopCode == null) {
-    message.warning('请先选择车间代码');
+    message.warning('请先选择车间代码')
     return
   }
   _searchCondition.value = {}
   const filters: any[] = []
-  filters.push({
+  filters.push(
-    action: "==",
+    {
+      action: '==',
       column: 'available',
       value: 'TRUE'
-  },{
+    },
-    action: "==",
+    {
+      action: '==',
       column: 'workshopCode',
       value: formData.value.workshopCode
-  })
+    }
+  )
   // 参数整理
   _searchCondition.value.isSearch = true
   _searchCondition.value.filters = filters
@@ -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 {
-    else {
+      val.forEach((item) => {
-      val.forEach(item => {
+        const isExist = tags.value.some((tag) => tag.username === item.username)
-        const isExist = tags.value.some(tag => tag.username === item.username);
+        if (!isExist) {
-        if (!isExist){
+          const newUser = {}
-          const newUser = {};
           if (formField === 'username') {
-            newUser['username'] = item.username;
+            newUser['username'] = item.username
-            newUser['nickname'] = item.nickname;
+            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 });
+      formData.value = await request.get({ url: `/wms/team/get?id=` + row.id })
-      tags.value=JSON.parse(formData.value.members)
+      tags.value = JSON.parse(formData.value.members)
     } finally {
       formLoading.value = false
     }
-  }
+  } else {
-  else {
+    isDisabled.value = false
-    isDisabled.value = false;
+    tags.value = []
-    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  ){
+  if (tags.value.length > 15) {
-    message.warning('班组成员最多15人');
+    message.warning('班组成员最多15人')
     return
   }
   // 提交请求
@@ -410,16 +551,15 @@ const resetForm = () => {
     remark: '',
     createTime: '',
     members: '',
-    workshopCode:'',
+    workshopCode: '',
-    workshopName:'',
+    workshopName: '',
-    productionLineCode:'',
+    productionLineCode: '',
-    productionLineName:'',
+    productionLineName: '',
-    teamMonitorCode:'',
+    teamMonitorCode: '',
-    teamMonitorName:''
+    teamMonitorName: ''
   }
   basicFormRef.value?.resetFields()
 }
-
 </script>
 
 <style scoped>
@@ -443,5 +583,4 @@ const resetForm = () => {
   flex: 1;
   /*margin-right: 10px;*/
 }
-
 </style>