You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

300 lines
9.3 KiB
Vue

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form
ref="queryFormRef"
:inline="true"
:model="queryParams"
class="-mb-15px"
label-width="68px"
>
<el-row>
<el-col :span="6">
<el-form-item label="组织名称" prop="name">
<el-input
v-model="queryParams.name"
class="!w-150px"
clearable
placeholder="请输入组织名称"
@keyup.enter="handleQuery"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="关联机台" prop="machineId">
<el-input
v-model="queryParams.machineId"
class="!w-150px"
clearable
placeholder="请输入关联机台"
@keyup.enter="handleQuery"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="组织状态" prop="status">
<el-select
v-model="queryParams.status"
class="!w-150px"
clearable
placeholder="请选择组织状态"
>
<el-option
v-for="dict in getStrDictOptions(DICT_TYPE.MES_ORG_STATUS)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="工作日期" prop="workDate">
<el-date-picker
v-model="queryParams.workDate"
@change="handleQuery"
type="date"
value-format="YYYY-MM-DD HH:mm:ss"
placeholder="选择工作日期"
class="!w-200px"
/>
<!-- <el-date-picker-->
<!-- v-model="queryParams.workDate"-->
<!-- @change="handleQuery"-->
<!-- value-format="YYYY-MM-DD HH:mm:ss"-->
<!-- type="daterange"-->
<!-- start-placeholder="开始日期"-->
<!-- end-placeholder="结束日期"-->
<!-- :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"-->
<!-- class="!w-200px"-->
<!-- />-->
</el-form-item>
</el-col>
</el-row>
<el-form-item>
<el-button @click="handleQuery"><Icon class="mr-5px" icon="ep:search" /> 搜索</el-button>
<el-button @click="resetQuery"><Icon class="mr-5px" icon="ep:refresh" /> 重置</el-button>
<el-button
v-hasPermi="['mes:organization:export']"
:loading="exportLoading"
plain
type="success"
@click="handleExport"
>
<Icon class="mr-5px" icon="ep:download" /> 导出
</el-button>
<el-button plain type="danger" @click="toggleExpandAll">
<Icon class="mr-5px" icon="ep:sort" /> 展开/折叠
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<el-tabs v-model="activeName" @tab-click="handleTabClick">
<el-tab-pane label="所有" name="" />
<el-tab-pane label="制浆" name="zhijiang" />
<el-tab-pane label="成型" name="chengxing" />
<el-tab-pane label="烘干" name="honggan" />
<el-tab-pane label="转移" name="zhuanyi" />
<el-tab-pane label="加湿" name="jiashi" />
<el-tab-pane label="热压" name="reya" />
<el-tab-pane label="切边" name="qiebian" />
<el-tab-pane label="品检" name="pinjian" />
<el-tab-pane label="打包" name="dabao" />
<el-tab-pane label="贴标" name="tiebiao" />
<el-tab-pane label="塑封" name="sufeng" />
</el-tabs>
<el-row>
<el-col :span="12">
<ContentWrap>
<el-table
v-if="refreshTable"
v-loading="loading"
:data="list"
:default-expand-all="isExpandAll"
:show-overflow-tooltip="true"
:stripe="true"
row-key="id"
highlight-current-row
@current-change="handleCurrentChange"
>
<el-table-column align="center" label="组织名称" prop="name" width="180px"/>
<el-table-column align="center" label="关联机台" prop="machineName" />
<el-table-column align="center" label="组织等级" prop="orgClass">
<template #default="scope">
<dict-tag v-if="notEmpty(scope.row.orgClass)" :type="DICT_TYPE.MES_ORG_CLASS" :value="scope.row.orgClass" />
</template>
</el-table-column>
<el-table-column align="center" label="类型" >
<template #default="scope">
<dict-tag v-if="notEmpty(scope.row.orgType)" :type="DICT_TYPE.MES_ORG_TYPE" :value="scope.row.orgType" />
</template>
</el-table-column>
<el-table-column align="center" label="组织状态" >
<template #default="scope">
<dict-tag v-if="notEmpty(scope.row.status) && scope.row.orgClass=='workplace'" :type="DICT_TYPE.MES_ORG_STATUS" :value="scope.row.status" />
</template>
</el-table-column>
<el-table-column align="center" fixed="right" label="操作" width="80">
<template #default="scope">
<el-button
v-if="scope.row.orgClass=='workplace' && scope.row.status=='free'"
v-hasPermi="['mes:organization:update']"
link
type="warning"
@click="openForm('update', scope.row.id)"
>
派工
</el-button>
</template>
</el-table-column>
</el-table>
</ContentWrap>
</el-col>
<el-col :span="12">
<!-- -->
<WorkerRight :org-id="orgId" :work-date="queryParams.workDate" :org-type="queryParams.orgType"/>
</el-col>
</el-row>
<!-- 表单弹窗添加/修改 -->
<OrganizationForm ref="formRef" @success="getList" />
</template>
<script lang="ts" setup>
import {getIntDictOptions, getBoolDictOptions, DICT_TYPE, getStrDictOptions} from '@/utils/dict'
import {defaultProps, handleTree} from '@/utils/tree'
import download from '@/utils/download'
import { OrganizationApi, OrganizationVO } from '@/api/mes/organization'
import OrganizationForm from './OrganizationForm.vue'
import {OrgWorkerApi, OrgWorkerVO} from "@/api/mes/orgworker";
/** 产线工位 列表 */
defineOptions({ name: 'WorkerIndex' })
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const orgId = ref()
const loading = ref(true) // 列表的加载中
const list = ref<OrganizationVO[]>([]) // 列表的数据
const queryParams = reactive({
name: undefined,
parentId: undefined,
sort: undefined,
workerUserId: undefined,
machineId: undefined,
phone: undefined,
email: undefined,
isEnable: undefined,
status: undefined,
orgClass: undefined,
orgType: undefined,
createTime: [],
workDate: undefined
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = await OrganizationApi.getOrganizationList(queryParams)
list.value = handleTree(data, 'id', 'parentId')
} finally {
loading.value = false
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
handleQuery()
}
/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
formRef.value.open(type, id)
}
/** 导出按钮操作 */
const handleExport = async () => {
try {
// 导出的二次确认
await message.exportConfirm()
// 发起导出
exportLoading.value = true
const data = await OrganizationApi.exportOrganization(queryParams)
download.excel(data, '产线工位.xls')
} catch {
} finally {
exportLoading.value = false
}
}
/** 展开/折叠操作 */
const isExpandAll = ref(true) // 是否展开,默认全部展开
const refreshTable = ref(true) // 重新渲染表格状态
const toggleExpandAll = async () => {
refreshTable.value = false
isExpandAll.value = !isExpandAll.value
await nextTick()
refreshTable.value = true
}
const organizationTree = ref() // 树形结构
const getCurrentDate = () =>{
let now = new Date();
let year = now.getFullYear();
let month = now.getMonth() + 1;
if(month<10){month = '0'+month}
let day = now.getDate();
if(day<10)day = '0'+day;
return year + "-" + month + "-" + day +" 00:00:00";
}
/** **/
onMounted(async () => {
queryParams.workDate = getCurrentDate()
await getList()
/** 获得产线工位树 */
organizationTree.value = []
const data = await OrganizationApi.getOrganizationList()
const root: Tree = { id: 0, name: '顶级产线工位', children: [] }
root.children = handleTree(data, 'id', 'parentId')
organizationTree.value.push(root)
})
/** tab 切换 */
let activeName = ''
const handleTabClick = (tab: TabsPaneContext) => {
queryParams.orgType = tab.paneName
handleQuery()
}
/** 选中行操作 */
const currentRow = ref({}) // 选中行
const handleCurrentChange = (row) => {
currentRow.value = row
orgId.value = row.id
}
const notEmpty = (str:string) => {
return str != "" && str != null;
}
</script>