| | |
| | | title="指定报工人" |
| | | width="800px"> |
| | | <div class="assign-reporter-content"> |
| | | <div class="search-box"> |
| | | <el-input |
| | | v-model="employeeSearchKeyword" |
| | | placeholder="搜索人员姓名" |
| | | clearable |
| | | @input="handleEmployeeSearch" |
| | | style="width: 350px"> |
| | | <template #prefix> |
| | | <i class="el-icon-search"></i> |
| | | </template> |
| | | </el-input> |
| | | </div> |
| | | <div class="selected-tags-box" |
| | | v-if="selectedEmployeeIds.length > 0"> |
| | | <div class="tags-label">已选择:</div> |
| | |
| | | v-loading="employeeTableLoading"> |
| | | <el-checkbox-group v-model="selectedEmployeeIds"> |
| | | <div class="employee-grid"> |
| | | <div v-for="item in employeeTableData" |
| | | <div v-for="item in filteredEmployeeList" |
| | | :key="item.userId" |
| | | class="employee-item"> |
| | | <el-checkbox :label="item.userId" |
| | |
| | | </div> |
| | | </div> |
| | | </el-checkbox-group> |
| | | <div v-if="employeeTableData.length === 0" |
| | | <div v-if="filteredEmployeeList.length === 0" |
| | | class="empty-text"> |
| | | 暂无匹配人员 |
| | | {{ employeeSearchKeyword ? '无匹配人员' : '暂无人员数据' }} |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { getCurrentInstance, onMounted, reactive, ref, toRefs } from "vue"; |
| | | import { getCurrentInstance, onMounted, reactive, ref, toRefs, computed } from "vue"; |
| | | import { ElMessageBox } from "element-plus"; |
| | | import { |
| | | productWorkOrderPage, |
| | |
| | | const employeeSearchForm = reactive({ |
| | | staffName: "", |
| | | }); |
| | | const employeeSearchKeyword = ref(""); |
| | | const selectedEmployeeIds = ref([]); |
| | | const currentWorkOrder = ref(null); |
| | | |
| | | const filteredEmployeeList = computed(() => { |
| | | const keyword = employeeSearchKeyword.value.trim().toLowerCase(); |
| | | if (!keyword) { |
| | | return employeeTableData.value; |
| | | } |
| | | return employeeTableData.value.filter(item => { |
| | | const name = (item.nickName || "").toLowerCase(); |
| | | const dept = (item.dept?.deptName || "").toLowerCase(); |
| | | return name.includes(keyword) || dept.includes(keyword); |
| | | }); |
| | | }); |
| | | |
| | | const handleEmployeeSearch = () => { |
| | | }; |
| | | |
| | | const data = reactive({ |
| | | searchForm: { |
| | |
| | | } |
| | | |
| | | .assign-reporter-content { |
| | | .search-box { |
| | | margin-bottom: 16px; |
| | | display: flex; |
| | | justify-content: center; |
| | | } |
| | | |
| | | .selected-tags-box { |
| | | margin-bottom: 16px; |
| | | padding: 12px; |