Skip to content

T
template_vue
Commit c54684d8 authored by 刘宇扬's avatar 刘宇扬
Browse files
Options

库存管理2

parent e61b32f2
Hide whitespace changes
Inline Side-by-side
Showing with 1204 additions and 681 deletions
src/views/equipment/boundManagement.vue
View file @ c54684d8
<template>
<div class="app-container">
<!-- TODO: 基础设备管理-->
<el-form ref="queryForm" style="padding: 0 0 0 10px" :model="queryParams" :inline="true">
<el-form-item label="设备名称" prop="roleName">
<el-form-item label="pn" prop="pn">
<el-input
v-model="queryParams.deviceName"
placeholder="请输入设备名称"
v-model="queryParams.pn"
placeholder="请输入pn"
clearable
:maxlength="30"
size="small"
......@@ -14,11 +12,23 @@
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="设备编码" prop="roleKey">
<el-form-item label="lot" prop="lot">
<el-input
v-model="queryParams.deviceId"
placeholder="请输入设备编码"
v-model="queryParams.lot"
placeholder="请输入lot"
clearable
:maxlength="30"
size="small"
style="width: 150px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="plocation" prop="plocation">
<el-input
v-model="queryParams.plocation"
placeholder="请输入plocation"
clearable
:maxlength="30"
size="small"
style="width: 150px"
@keyup.enter.native="handleQuery"
......@@ -26,48 +36,32 @@
</el-form-item>
<el-form-item>
<el-button type="primary" size="small" icon="el-icon-search" @click="handleQuery">查询</el-button>
<el-button type="primary" style="padding: 8px 7px;" icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
</el-form-item>
<div style="float: right">
<el-form-item>
<el-button style="padding: 8px 7px;" :type="typePrimary" :size="smallSize" :icon="addIcon" @click="handleAdd">
{{ application }}
</el-button>
</el-form-item>
</div>
</el-form>
<div class="placeholder" />
<!-- TODO: 中间的分隔符号 -->
<div style="padding:5px 10px">
<!-- TODO: 以下为基础设备管理列表 -->
<div class="mb12 font-small-bold">设备领用列表</div>
<el-table v-loading="loading" border :data="roleList" @selection-change="handleSelectionChange">
<el-table-column type="index" label="序号" width="50" />
<!-- <el-table-column label="设备名称" prop="deviceName" :show-overflow-tooltip="true">
<template slot-scope="scope">
{{ scope.row.deviceName || '-' }}
</template>
</el-table-column> -->
<el-table-column label="设备编码" prop="deviceId">
<div class="mb12 font-small-bold">设备管理列表</div>
<el-table v-loading="loading" border :data="equipmentList" @selection-change="handleSelectionChange">
<el-table-column type="index" label="序号" width="80" />
<el-table-column label="pn" prop="businessId" width="120">
<template slot-scope="scope">
{{ scope.row.deviceId || '-' }}
{{ scope.row.pn || '-' }}
</template>
</el-table-column>
<el-table-column label="LOT" prop="LOT">
<el-table-column label="lot" prop="lot" width="120">
<template slot-scope="scope">
{{ scope.row.deviceId || '-' }}
{{ scope.row.lot || '-' }}
</template>
</el-table-column>
<el-table-column label="位置" prop="location">
<el-table-column label="plocation" prop="plocation">
<template slot-scope="scope">
{{ scope.row.location || '-' }}
{{ scope.row.plocation || '-' }}
</template>
</el-table-column>
<el-table-column label="厚度" prop="ply">
<el-table-column label="厚度" prop="厚度">
<template slot-scope="scope">
{{ scope.row.ply || '-' }}
{{ scope.row.phd || '-' }}
</template>
</el-table-column>
<el-table-column label="操作员" prop="createBy">
......@@ -75,60 +69,67 @@
{{ scope.row.createBy || '-' }}
</template>
</el-table-column>
<el-table-column label="创建时间" :show-overflow-tooltip="true" align="center" prop="createTime">
<el-table-column label="操作时间" :show-overflow-tooltip="true" align="center" prop="createDate">
<template slot-scope="scope">
<span>{{ scope.row.createTime | transformDateByFormat('YYYY-MM-DD HH:mm') }}</span>
<span>{{ scope.row.createDate | transformDateByFormat('YYYY-MM-DD HH:mm') }}</span>
</template>
</el-table-column>
<el-table-column label="状态" prop="state">
<el-table-column label="操作" class-name="small-padding fixed-width" width="150px">
<template slot-scope="scope">
<span :style="getFontColor(scope.row.state)">{{ scope.row.state || '-' }}</span>
</template>
</el-table-column>
<el-table-column label="操作" class-name="small-padding fixed-width" width="140px">
<template slot-scope="scope">
<el-button v-if="scope.row.state !== '已驳回'" :type="typeParent" :size="size" @click="handleDetail(scope.row)">
<el-button :type="typeParent" :size="size" @click="handleDetail(scope.row)">
详情
</el-button>
<el-button v-if="scope.row.state === '已驳回'" :type="typeParent" :size="size" @click="handleUpdate(scope.row)">
{{ updataName }}
<el-button :type="typeParent" :size="size" @click="handleUpdate(scope.row)">
修改
</el-button>
<el-button
v-if="scope.row.state !== ' '"
:type="typeParent"
:size="size"
@click="handleDelete(scope.row)"
>删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<el-pagination
background
layout="prev, pager, next"
:total="1000"
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.page"
:limit.sync="queryParams.rows"
@pagination="getList"
/>
<!-- TODO: 添加或修改设备配置对话框 -->
<!-- 添加或修改设备配置对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
<el-form-item label="设备名称" prop="deviceName">
<el-input v-model.trim="form.deviceName" show-word-limit :maxlength="30" placeholder="请输入设备名称" />
<el-form-item label="名称" prop="roleName">
<el-input v-model.trim="form.roleName" show-word-limit :maxlength="30" placeholder="请输入设备名称" />
</el-form-item>
<el-form-item label="设备编码" prop="deviceId">
<el-input v-model.trim="form.deviceId" show-word-limit :maxlength="30" placeholder="请输入设备编码" />
<el-form-item label="设备来源" prop="roleKey">
<el-input v-model.trim="form.roleKey" show-word-limit :maxlength="30" placeholder="请输入设备来源" />
</el-form-item>
<el-form-item label="LOT" prop="LOT">
<el-input v-model.trim="form.LOT" show-word-limit :maxlength="30" placeholder="请输入LOT" />
<el-form-item label="排序" prop="roleSort">
<el-input-number v-model="form.roleSort" style="width: 100%" controls-position="right" :min="0" />
</el-form-item>
<el-form-item label="位置" prop="location">
<el-input v-model.trim="form.location" show-word-limit :maxlength="30" placeholder="请输入设备编码" />
<el-form-item label="设备批次">
<!-- <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>-->
<!-- <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>-->
<!-- <el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox>-->
<el-tree
ref="menu"
class="tree-border"
:data="menuOptions"
show-checkbox
node-key="id"
check-strictly
empty-text="加载中，请稍后"
:props="defaultProps"
@check-change="handleMenuCheckChange"
/>
</el-form-item>
<el-form-item label="厚度" prop="ply">
<el-input v-model.trim="form.ply" show-word-limit :maxlength="30" placeholder="请输入设备编码" />
</el-form-item>
<el-form-item label="操作员" prop="createBy">
<el-input v-model.trim="form.createBy" :maxlength="30" show-word-limit placeholder="请输入创建人" />
<el-form-item label="备注">
<el-input
v-model.trim="form.remark"
maxlength="200"
show-word-limit
type="textarea"
placeholder="请输入内容"
/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
......@@ -136,53 +137,121 @@
<el-button type="primary" @click="submitForm">确 定</el-button>
</div>
</el-dialog>
<!-- TODO: 单项详情信息表单配置 -->
<el-dialog class="aboutSingleDetails" :title="title" :visible.sync="openDetails" width="700px" append-to-body>
<el-form ref="formDetails" :model="singleDetails" size="small" label-width="90px">
<el-form-item label="名称：" prop="deviceName">
<el-input v-model.trim="singleDetails.deviceName" :readonly="isReadOnly" />
</el-form-item>
<el-form-item label="设备编码：" prop="deviceId">
<el-input v-model.trim="singleDetails.deviceId" :readonly="isReadOnly" />
</el-form-item>
<el-form-item label="LOT: " prop="LOT">
<el-input v-model.trim="singleDetails.LOT" :readonly="isReadOnly" />
</el-form-item>
<el-form-item label="位置：" prop="location">
<el-input v-model.trim="singleDetails.location" :readonly="isReadOnly" />
</el-form-item>
<el-form-item label="位置：" prop="ply">
<el-input v-model.trim="singleDetails.ply" :readonly="isReadOnly" />
</el-form-item>
<el-form-item label="创建时间：" prop="createTime">
<el-input v-model.trim="singleDetails.createTime" :readonly="isReadOnly" />
</el-form-item>
<el-form-item label="创建人：" prop="createBy">
<el-input v-model.trim="singleDetails.createBy" :readonly="isReadOnly" />
</el-form-item>
<el-form-item label="状态" prop="state">
<el-input v-model.trim="singleDetails.state" :readonly="isReadOnly" />
<el-row>
<el-col :span="12">
<el-form-item label="pn：" prop="pn">
<el-input v-model.trim="singleDetails.pn" :readonly="true" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="lot：" prop="workshop">
<el-input v-model.trim="singleDetails.lot" :readonly="true" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="plocation：" prop="plocation">
<el-input v-model.trim="singleDetails.plocation" :readonly="true" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label=" 操作时间：" prop="createDate">
<el-input v-model.trim="singleDetails.createDate" :readonly="true" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="操作员：" prop="createBy">
<el-input v-model.trim="singleDetails.createBy" :readonly="true" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="prank：" prop="prank">
<el-input v-model.trim="singleDetails.prank" :readonly="true" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="厚度：" prop="phd">
<el-input v-model.trim="singleDetails.phd" :readonly="true" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="状态：" prop="flag">
<el-input v-model.trim="singleDetails.flag" :readonly="true" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="psm：" prop="psm">
<el-input v-model.trim="singleDetails.psm" :readonly="true" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="pzl：" prop="pzl">
<el-input v-model.trim="singleDetails.pzl" :readonly="true" />
</el-form-item>
</el-col>
</el-row>
<el-form-item label="备注：" prop="remarks">
<el-input v-model.trim="singleDetails.remarks" :readonly="true" />
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
<script>
import {
addRole,
changeRoleStatus,
dataScope,
delRole,
exportRole,
getRole,
updateRole
} from '@/api/system/role'
import { listdevice } from '@/api/magnagement'
import { roleMenuTreeselect, roleMenuTreeselectMC, treeselect as menuTreeselect } from '@/api/system/menu'
import { roleDeptTreeselect, treeselect as deptTreeselect } from '@/api/system/dept'
// import { getRolesByInsId } from '../../../api/businessManage/template'
export default {
name: 'Role',
data() {
return {
// TODO: 表单里的单项详情参数
singleDetails: {
equipmentName: '',
equipmentCode: '',
lot: '',
location: '',
thickness: '',
createBy: '',
createTime: ''
},
// 是否显示弹出层（数据详情）
openDetails: false,
// // TODO: 模拟测试数据
// equipmentList: [{ equipmentCode: '001', lot: 'xxx', location: '位置01', thickness: '50', createBy: '操作员01', createTime: new Date() }, { equipmentCode: '002', lot: 'xxx', location: '位置02', thickness: '70', createBy: '操作员02', createTime: new Date() }, { equipmentCode: '001', lot: 'xxx', location: '位置01', thickness: '50', createBy: '操作员01', createTime: new Date() }, { equipmentCode: '001', lot: 'xxx', location: '位置01', thickness: '50', createBy: '操作员01', createTime: new Date() }, { equipmentCode: '001', lot: 'xxx', location: '位置01', thickness: '50', createBy: '操作员01', createTime: new Date() }, { equipmentCode: '001', lot: 'xxx', location: '位置01', thickness: '50', createBy: '操作员01', createTime: new Date() }, { equipmentCode: '001', lot: 'xxx', location: '位置01', thickness: '50', createBy: '操作员01', createTime: new Date() }, { equipmentCode: '001', lot: 'xxx', location: '位置01', thickness: '50', createBy: '操作员01', createTime: new Date() }, { equipmentCode: '001', lot: 'xxx', location: '位置01', thickness: '50', createBy: '操作员01', createTime: new Date() }, { equipmentCode: '001', lot: 'xxx', location: '位置01', thickness: '50', createBy: '操作员01', createTime: new Date() }],
// check: '开始盘点',
typeParent: 'text',
typePrimary: 'primary',
typeSuccess: 'success',
nameParent: '删除',
resetName: '重置',
addName: '新增',
application: '申请领用',
exportName: '导出',
updataName: '修改',
size: 'mini',
smallSize: 'small',
......@@ -190,10 +259,15 @@ export default {
addIcon: 'el-icon-plus',
exportIcon: 'el-icon-download',
resetIcon: '',
// TODO: 控制只读
isReadOnly: true,
haspermi: ['sys:user:delete'],
resetHaspermi: ['sys:user:resetPwd'],
updateHaspermi: ['sys:role:update'],
addHaspermi: ['sys:role:add'],
exportHaspermi: ['sys:role:export'],
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
......@@ -206,8 +280,8 @@ export default {
title: '',
// 是否显示弹出层
open: false,
// 是否显示弹出层（数据详情）
openDetails: false,
// 是否显示弹出层（数据权限）
openDataScope: false,
// 日期范围
// dateRange: [],
// 菜单表格数据
......@@ -216,100 +290,76 @@ export default {
menuNodeAll: false,
deptExpand: true,
deptNodeAll: false,
// 状态数据字典
statusOptions: [
{
dictLabel: '启用',
dictValue: '1'
},
{
dictLabel: '停用',
dictValue: '0'
}
],
// 数据范围选项
dataScopeOptions: [
{
value: '1',
label: '全部数据权限'
},
{
value: '2',
label: '自定数据权限'
},
{
value: '3',
label: '本部门数据权限'
},
{
value: '4',
label: '本部门及以下数据权限'
},
{
value: '5',
label: '仅本人数据权限'
}
],
// 菜单列表
menuOptions: [],
// 部门列表
tOptions: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
deviceName: undefined,
deviceId: undefined,
LOT: undefined,
location: undefined,
ply: undefined,
state: undefined,
flag: undefined
page: 1,
rows: 10,
pn: undefined,
lot: undefined,
snapLocation: undefined
},
defaultProps: {},
// TODO: 表单参数
// 表单参数
form: {
deviceName: '',
deviceId: '',
LOT: '',
location: '',
ply: '',
state: '',
flag: '1',
remark: '',
createTime: new Date(),
updataTime: new Date(),
createBy: ''
pn: '',
lot: '',
plocation: ''
},
// TODO: 表单初始参数
formReset: {
deviceName: '',
deviceId: '',
LOT: '',
location: '',
ply: '',
state: '',
flag: '1',
createTime: new Date(),
updataTime: new Date(),
createBy: ''
defaultProps: {
children: 'children',
label: 'label'
},
// TODO: 表单里的单项详情参数
singleDetails: {
deviceName: '',
deviceId: '',
LOT: '',
location: '',
ply: '',
state: '',
flag: '1',
createTime: new Date(),
updataTime: new Date(),
createBy: ''
},
// TODO: 模拟测试数据
simulateDeviceList: [{
deviceName: '设备1', deviceId: '0001', flag: 1, LOT: '0001', location: 'XXX', ply: 'YYY', createTime: new Date(), updataTime: new Date(), createBy: 'admin', state: '已驳回'
}, {
deviceName: '设备2', deviceId: '0002', flag: 2, LOT: '0002', location: 'XXX', ply: 'YYY', createTime: new Date(), updataTime: new Date(), createBy: 'admin', state: '已驳回'
}, {
deviceName: '设备3', deviceId: '0003', flag: 2, LOT: '0003', location: 'XXX', ply: 'YYY', createTime: new Date(), updataTime: new Date(), createBy: 'admin', state: '已驳回'
}, {
deviceName: '设备4', deviceId: '0004', flag: 2, LOT: '0004', location: 'XXX', ply: 'YYY', createTime: new Date(), updataTime: new Date(), createBy: 'admin', state: '已驳回'
}, {
deviceName: '设备5', deviceId: '0005', flag: 2, LOT: '0005', location: 'XXX', ply: 'YYY', createTime: new Date(), updataTime: new Date(), createBy: 'admin', state: '待审核'
}, {
deviceName: '设备6', deviceId: '0006', flag: 2, LOT: '0006', location: 'XXX', ply: 'YYY', createTime: new Date(), updataTime: new Date(), createBy: 'admin', state: '待审核'
}, {
deviceName: '设备7', deviceId: '0007', flag: 2, LOT: '0007', location: 'XXX', ply: 'YYY', createTime: new Date(), updataTime: new Date(), createBy: 'admin', state: '待审核'
}, {
deviceName: '设备8', deviceId: '0008', flag: 2, LOT: '0008', location: 'XXX', ply: 'YYY', createTime: new Date(), updataTime: new Date(), createBy: 'admin', state: '待审核'
}, {
deviceName: '设备9', deviceId: '0009', flag: 2, LOT: '0009', location: 'XXX', ply: 'YYY', createTime: new Date(), updataTime: new Date(), createBy: 'admin', state: '已通过'
}, {
deviceName: '设备10', deviceId: '00010', flag: 2, LOT: '0010', location: 'XXX', ply: 'YYY', createTime: new Date(), updataTime: new Date(), createBy: 'admin', state: '已通过'
}
],
// 表单校验
rules: {
deviceName: [
{ required: true, message: '请输入设备名称', trigger: 'blur' }
],
deviceId: [
{ required: true, message: '请输入设备编码', trigger: 'blur' }
roleName: [
{ required: true, message: '请输入角色名称', trigger: 'blur' }
],
LOT: [
{ required: true, message: '请输入LOT', trigger: 'blur' }
roleKey: [
{ required: true, message: '请输入权限字符', trigger: 'blur' }
],
createBy: [
{ required: true, message: '请输入申请人', trigger: 'blur' }
roleSort: [
{ required: true, message: '请输入角色排序', trigger: 'blur' }
]
},
deptOptions: []
deptOptions: [],
formData: {}
}
},
/** 路由离开前存储筛选条件*/
......@@ -329,151 +379,356 @@ export default {
this.queryParams = { ...param }
}
this.getList()
// this.getDicts(dictCons['NORMAL_DISABLE']).then(response => {
// this.statusOptions = response.data;
// });
},
methods: {
getFontColor(state) {
if (state === '已驳回') {
return 'color: red;'
} else if (state === '待审核') {
return 'color: orange;'
} else if (state === '已通过') {
return 'color: green;'
} else {
return ''
// TODO: 获取所选行详情信息操作
handleDetail(row) {
this.singleDetails = this.formReset
this.singleDetails = row
this.title = '详情信息'
this.openDetails = !this.openDetails
},
handelTab(i, e) {
const that = this
if (!that.$refs['input' + i]) {
return
}
that.$nextTick(() => {
e.target.blur()
const index = i + 1
that.$refs['input' + index].focus()
})
},
/** 查询角色列表 */
getList() {
this.loading = true
this.roleList = this.simulateDeviceList
console.log(this.roleList)
this.loading = false
listdevice(this.queryParams).then(
response => {
this.equipmentList = response.rows
this.total = response.total
this.loading = false
}
)
},
/** 查询菜单树结构 */
getMenuTreeselect() {
menuTreeselect().then(response => {
this.menuOptions = response.data
})
},
/** 查询菜单列表 */
getMenuList(roleId) {
roleMenuTreeselectMC(roleId).then(response => {
this.menuList = this.handleTree(response.data.menus, 'businessId')
this.loading = false
})
},
/** 查询部门树结构 */
getDeptTreeselect() {
deptTreeselect().then(response => {
this.deptOptions = response.data
})
},
// 树状图节点点击选中事件
handleMenuCheckChange(data, check, subCheck) { // data为选中节点信息，check选中状态
if (data.children !== undefined && data.children !== null) { // 是否包含子节点
this.checkNode(data.children, check) // 调用checkNode方法
}
// // 获取所有被选中的节点信息
// const nodes = this.$refs.menu.getCheckedNodes(false, false)
// // 将获取到的信息赋值（根据自己的需求）
// this.custGroupDesc = nodes.map(item => item.CN_NAME)
// this.searchForm.custGroup = nodes.map(item => item.code)
},
// 选中所有下级节点
checkNode(data, check) {
// 遍历所有下级节点信息
data.forEach(item => {
// 通过节点信息设置选中状态
this.$refs.menu.setChecked(item, check, false)
// 是否包含下级节点，包含下级节点则选中所有下级节点
if (item.children !== undefined) {
this.checkNode(item.children, check)
}
})
},
// 所有菜单节点数据
getMenuAllCheckedKeys() {
// 目前被选中的菜单节点
const checkedKeys = this.$refs.menu.getHalfCheckedKeys()
// 半选中的菜单节点
const halfCheckedKeys = this.$refs.menu.getCheckedKeys()
checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)
return checkedKeys
},
// 所有部门节点数据
getDeptAllCheckedKeys() {
// 目前被选中的部门节点
const checkedKeys = this.$refs.dept.getHalfCheckedKeys()
// // 半选中的部门节点
const halfCheckedKeys = this.$refs.dept.getCheckedKeys()
checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)
return this.$refs.dept.getCheckedKeys()
},
/** 根据角色ID查询菜单树结构 */
getRoleMenuTreeselect(roleId) {
return roleMenuTreeselect(roleId).then(response => {
this.menuOptions = response.data.menus
return response
})
},
/** 根据角色ID和菜单ID查询部门树结构 */
getRoleDeptTreeselect(roleId, menuId) {
return roleDeptTreeselect(roleId, menuId).then(response => {
this.form.deptCheckStrictly = response.data.deptCheckStrictly
this.deptOptions = response.data.depts
this.form.dataScope = this.dataScopeOptions[response.data.dataScope - 1].value
return response
})
},
// 角色状态修改
handleStatusChange(row) {
const text = row.flag === '1' ? '启用' : '停用'
this.$confirm('是否确认操作?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(function() {
return changeRoleStatus(row.businessId, row.flag)
}).then(() => {
this.$message({
message: text + '成功',
type: 'success'
})
}).catch(function() {
row.flag = row.flag === '0' ? '1' : '0'
})
},
// 取消按钮
cancel() {
this.open = false
this.reset()
},
// 取消按钮（数据权限）
cancelDataScope() {
this.openDataScope = false
this.reset()
},
// 表单重置
reset() {
// TODO: 将模拟数据的空对象赋值给表单对象，达成清空填写表单的效果
if (this.$refs.menu !== undefined) {
this.$refs.menu.setCheckedKeys([])
}
this.menuExpand = false
this.menuNodeAll = false
this.deptExpand = true
this.deptNodeAll = false
this.form = {
deviceName: '',
deviceId: '',
location: '',
ply: '',
state: '',
roleId: undefined,
businessId: undefined,
roleName: undefined,
roleKey: undefined,
roleSort: 0,
flag: '1',
createTime: new Date(),
updataTime: new Date(),
createBy: ''
menuIds: [],
menuName: undefined,
deptIds: [],
menuCheckStrictly: false,
deptCheckStrictly: false,
remark: undefined
}
this.resetForm('form')
},
/** TODO: 查询按钮操作 */
/** 查询按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1
this.queryParams.page = 1
this.getList()
},
/** TODO: 重置按钮操作 */
resetQuery() {},
/** 重置按钮操作 */
resetQuery() {
// this.dateRange = []
this.resetForm('queryForm')
this.handleQuery()
},
// 多选框选中数据
handleSelectionChange(selection) {},
/** TODO: 新增按钮操作 */
handleAdd() {
// TODO: 初始化新增对话框的状态
this.reset()
this.title = '申请领用设备'
this.open = !this.open
handleSelectionChange(selection) {
this.ids = selection.map(item => item.roleId)
this.single = selection.length !== 1
this.multiple = !selection.length
},
// TODO: 获取所选行详情信息操作
handleDetail(row) {
this.singleDetails = this.formReset
this.singleDetails = row
this.title = '详情信息'
this.openDetails = !this.openDetails
// // 树权限（父子联动）
// handleCheckedTreeConnect(value, type) {
// if (type === 'menu') {
// this.form.menuCheckStrictly = !!value
// } else if (type === 'dept') {
// this.form.deptCheckStrictly = !!value
// }
// },
// 树权限（全选/全不选）
handleCheckedTreeNodeAll(value, type) {
if (type === 'menu') {
this.$refs.menu.setCheckedNodes(value ? this.menuOptions : [])
} else if (type === 'dept') {
this.$refs.dept.setCheckedNodes(value ? this.deptOptions : [])
}
},
/** TODO: 修改按钮操作 */
handleUpdate(row) {
this.reset()
this.title = '修改申请'
const upddeviceName = row.deviceName
for (const pd of this.simulateDeviceList) {
if (pd.deviceName === upddeviceName) {
this.form = pd
// 树权限（展开/折叠）
handleCheckedTreeExpand(value, type) {
if (type === 'menu') {
const treeList = this.menuOptions
for (let i = 0; i < treeList.length; i++) {
this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value
}
} else if (type === 'dept') {
const treeList = this.deptOptions
for (let i = 0; i < treeList.length; i++) {
this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value
}
}
},
/** 新增按钮操作 */
handleAdd() {
this.reset()
this.getMenuTreeselect()
this.open = true
this.title = '添加角色'
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset()
const roleId = row.businessId || this.ids
const roleMenu = this.getRoleMenuTreeselect(roleId)
getRole(roleId).then(response => {
this.form = response.data
this.open = true
this.getMenuTreeselect(roleId)
this.$nextTick(() => {
roleMenu.then(res => {
this.$refs.menu.setCheckedKeys(res.data.checkedKeys)
})
})
this.title = '修改角色'
})
},
/** 分配数据权限操作 选择菜单 */
handleMenu(row) {
this.reset()
const roleId = row.businessId || this.ids
this.getMenuList(roleId) // 查询菜单列表树形显示
getRole(roleId).then(response => {
this.form = response.data
this.openDataScope = true
this.title = '分配数据权限'
})
},
/** 分配数据权限操作 */
handleDataScope(row) {
this.deptOptions = []
this.form.dataScope = undefined
const roleId = this.form.businessId
this.form.menuId = row.businessId
this.form.menuName = row.menuName
const roleDeptTreeselect = this.getRoleDeptTreeselect(roleId, this.form.menuId)
this.$nextTick(() => {
roleDeptTreeselect.then(res => {
this.$refs.dept.setCheckedKeys(res.data.checkedKeys)
})
})
this.title = '分配数据权限'
},
/** TODO: 修改或增加list列表里的数据 */
/** 提交按钮 */
submitForm: function() {
this.$refs['form'].validate(valid => {
if (valid) {
// TODO: 模拟测试数据的修改，可删除
for (const p of this.simulateDeviceList) {
if (p.deviceName === this.form.deviceName) {
this.simulateDeviceList = this.simulateDeviceList.map(obj =>
obj.deviceName === this.form.deviceName ? this.form : obj
)
this.msgSuccess('申请成功')
this.form.menuCheckStrictly = false
if (this.form.businessId !== undefined) {
this.form.menuIds = this.getMenuAllCheckedKeys()
updateRole(this.form).then(response => {
this.msgSuccess('修改成功')
this.open = false
this.getList()
this.reset()
this.open = !this.open
return
} else {
if (this.form !== undefined && this.form !== null) {
this.simulateDeviceList.push(this.form)
this.msgSuccess('申请成功')
this.getList()
this.reset()
this.open = !this.open
return
}
}
})
} else {
this.form.menuIds = this.getMenuAllCheckedKeys()
addRole(this.form).then(response => {
this.msgSuccess('新增成功')
this.open = false
this.getList()
})
}
}
})
},
/** TODO: 关于模拟数据的 删除list数组所调用的删除方法,封装的函数如下 */
delDevice(delDeviceName) {
let tip = false
for (const pd0 of this.simulateDeviceList) {
console.log('This is pd0:', pd0)
if (pd0.deviceName === delDeviceName) {
this.simulateDeviceList = this.simulateDeviceList.filter(item => item.deviceName !== delDeviceName)
tip = true
break
}
/** 提交按钮（数据权限） */
submitDataScope: function() {
if (this.form.businessId !== undefined && this.form.menuId !== undefined) {
this.form.deptIds = this.getDeptAllCheckedKeys()
dataScope(this.form).then(response => {
this.msgSuccess('修改成功')
this.openDataScope = false
this.getList()
})
}
return tip
},
/** TODO:删除按钮操作 */
/** 删除按钮操作 */
handleDelete(row) {
const roleIds = row.businessId || this.ids
this.$confirm('是否确认操作？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
return this.delDevice(row.deviceName)
}).then(function() {
return delRole(roleIds)
}).then(() => {
this.getList()
this.$message({
message: '删除成功',
type: 'success'
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
}).catch(function() {
})
},
/** 导出按钮操作 */
handleExport() {
const queryParams = this.queryParams
this.$confirm('是否确认操作?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(function() {
return exportRole(queryParams).then(response => {
const blob = new Blob([response])
const downloadElement = document.createElement('a')
const href = window.URL.createObjectURL(blob)// 创建下载的链接
downloadElement.href = href
downloadElement.download = '角色信息' + '.xls' // 下载后文件名
document.body.appendChild(downloadElement)
downloadElement.click()// 点击下载
document.body.removeChild(downloadElement)// 下载完成移除元素
window.URL.revokeObjectURL(href)// 释放掉blob对象
// this.download(response.msg);
})
})
}
}
}
</script>
<style lang="scss" scoped>
.aboutSingleDetails{
.el-form-item{
.el-input >>> .el-input__inner {
-webkit-appearance: none;
background-color: #FFF;
background-image: none;
border-radius: 4px;
border: 0;
width: 100%;
}
}
}
.app-container {
font-size: 18px;
padding: 0;
......@@ -494,24 +749,9 @@ export default {
margin-left: 15px;
}
}
.el-divider--vertical{
.el-divider--vertical {
height: 12em;
width: 4px;
}
.aboutSingleDetails{
.el-form-item{
.el-input >>> .el-input__inner {
-webkit-appearance: none;
background-color: #FFF;
background-image: none;
border-radius: 4px;
border: 0;
width: 100%;
}
}
}
</style>
src/views/equipment/check.vue
View file @ c54684d8
......@@ -180,7 +180,7 @@ import {
getRole,
updateRole
} from '@/api/system/role'
import {listCheck} from '@/api/equipment/check'
import { listCheck} from '@/api/equipment/check'
import {roleMenuTreeselect, roleMenuTreeselectMC, treeselect as menuTreeselect} from '@/api/system/menu'
import {roleDeptTreeselect, treeselect as deptTreeselect} from '@/api/system/dept'
// import { getRolesByInsId } from '../../../api/businessManage/template'
......
src/views/equipment/management.vue
View file @ c54684d8
<template>
<div class="app-container">
<el-form ref="queryForm" style="padding: 0 0 0 10px" :model="queryParams" :inline="true">
<el-form-item label="设备编码" prop="equipmentCode">
<el-form-item label="pn" prop="pn">
<el-input
v-model="queryParams.equipmentCode"
placeholder="请输入设备编码"
v-model="queryParams.pn"
placeholder="请输入pn"
clearable
:maxlength="30"
size="small"
......@@ -14,19 +14,21 @@
</el-form-item>
<el-form-item label="lot" prop="lot">
<el-input
v-model="queryParams.roleKey"
placeholder="请输入设备lot"
v-model="queryParams.lot"
placeholder="请输入lot"
clearable
:maxlength="30"
size="small"
style="width: 150px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="位置" prop="location">
<el-form-item label="plocation" prop="plocation">
<el-input
v-model="queryParams.location"
placeholder="请输入设备位置"
v-model="queryParams.plocation"
placeholder="请输入plocation"
clearable
:maxlength="30"
size="small"
style="width: 150px"
@keyup.enter.native="handleQuery"
......@@ -34,6 +36,7 @@
</el-form-item>
<el-form-item>
<el-button type="primary" size="small" icon="el-icon-search" @click="handleQuery">查询</el-button>
<el-button type="primary" style="padding: 8px 7px;" icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<div class="placeholder" />
......@@ -41,7 +44,7 @@
<div class="mb12 font-small-bold">设备管理列表</div>
<el-table v-loading="loading" border :data="equipmentList" @selection-change="handleSelectionChange">
<el-table-column type="index" label="序号" width="80" />
<el-table-column label="编码" prop="pn" width="120">
<el-table-column label="pn" prop="businessId" width="120">
<template slot-scope="scope">
{{ scope.row.pn || '-' }}
</template>
......@@ -51,17 +54,17 @@
{{ scope.row.lot || '-' }}
</template>
</el-table-column>
<el-table-column label="位置" prop="plocation">
<el-table-column label="plocation" prop="plocation">
<template slot-scope="scope">
{{ scope.row.plocation || '-' }}
</template>
</el-table-column>
<el-table-column label="厚度" prop="thickness">
<el-table-column label="厚度" prop="厚度">
<template slot-scope="scope">
{{ scope.row.thickness || '-' }}
{{ scope.row.phd || '-' }}
</template>
</el-table-column>
<el-table-column label="创建员" prop="createBy">
<el-table-column label="操作员" prop="createBy">
<template slot-scope="scope">
{{ scope.row.createBy || '-' }}
</template>
......@@ -134,23 +137,72 @@
<!-- TODO: 单项详情信息表单配置 -->
<el-dialog class="aboutSingleDetails" :title="title" :visible.sync="openDetails" width="700px" append-to-body>
<el-form ref="formDetails" :model="singleDetails" size="small" label-width="90px">
<el-form-item label="编码：" prop="pn">
<el-input v-model.trim="singleDetails.pn" :readonly="true" />
</el-form-item>
<el-form-item label="lot：" prop="workshop">
<el-input v-model.trim="singleDetails.lot" :readonly="true" />
</el-form-item>
<el-form-item label="位置：" prop="plocation">
<el-input v-model.trim="singleDetails.plocation" :readonly="true" />
</el-form-item>
<el-form-item label="厚度：" prop="thickness">
<el-input v-model.trim="singleDetails.thickness" :readonly="true" />
</el-form-item>
<el-form-item label=" 操作时间：" prop="createDate">
<el-input v-model.trim="singleDetails.createDate" :readonly="true" />
</el-form-item>
<el-form-item label="操作员：" prop="createBy">
<el-input v-model.trim="singleDetails.createBy" :readonly="true" />
<el-row>
<el-col :span="12">
<el-form-item label="pn：" prop="pn">
<el-input v-model.trim="singleDetails.pn" :readonly="true" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="lot：" prop="workshop">
<el-input v-model.trim="singleDetails.lot" :readonly="true" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="plocation：" prop="plocation">
<el-input v-model.trim="singleDetails.plocation" :readonly="true" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label=" 操作时间：" prop="createDate">
<el-input v-model.trim="singleDetails.createDate" :readonly="true" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="操作员：" prop="createBy">
<el-input v-model.trim="singleDetails.createBy" :readonly="true" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="prank：" prop="prank">
<el-input v-model.trim="singleDetails.prank" :readonly="true" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="厚度：" prop="phd">
<el-input v-model.trim="singleDetails.phd" :readonly="true" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="状态：" prop="flag">
<el-input v-model.trim="singleDetails.flag" :readonly="true" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="psm：" prop="psm">
<el-input v-model.trim="singleDetails.psm" :readonly="true" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="pzl：" prop="pzl">
<el-input v-model.trim="singleDetails.pzl" :readonly="true" />
</el-form-item>
</el-col>
</el-row>
<el-form-item label="备注：" prop="remarks">
<el-input v-model.trim="singleDetails.remarks" :readonly="true" />
</el-form-item>
</el-form>
</el-dialog>
......@@ -277,14 +329,15 @@ export default {
queryParams: {
page: 1,
rows: 10,
roleName: undefined,
roleKey: undefined,
flag: undefined,
ptype: 1
pn: undefined,
lot: undefined,
snapLocation: undefined
},
// 表单参数
form: {
pn: '',
lot: '',
plocation: ''
},
defaultProps: {
children: 'children',
......
src/views/processManagement/basicProcessManagement/index.vue
View file @ c54684d8
<template>
<div class="app-container">
<!-- TODO: 基础工序管理-->
<el-form ref="queryForm" style="padding: 0 0 0 10px" :model="queryParams" :inline="true">
<el-form-item label="工序名称" prop="roleName">
<el-form-item label="pn" prop="pn">
<el-input
v-model="queryParams.processName"
placeholder="请输入工序名称"
v-model="queryParams.pn"
placeholder="请输入pn"
clearable
:maxlength="30"
size="small"
......@@ -13,11 +12,23 @@
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="生产车间" prop="roleKey">
<el-form-item label="lot" prop="lot">
<el-input
v-model="queryParams.workshop"
placeholder="请输入生产车间"
v-model="queryParams.lot"
placeholder="请输入lot"
clearable
:maxlength="30"
size="small"
style="width: 150px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="plocation" prop="plocation">
<el-input
v-model="queryParams.plocation"
placeholder="请输入plocation"
clearable
:maxlength="30"
size="small"
style="width: 150px"
@keyup.enter.native="handleQuery"
......@@ -25,49 +36,97 @@
</el-form-item>
<el-form-item>
<el-button type="primary" size="small" icon="el-icon-search" @click="handleQuery">查询</el-button>
<el-button type="primary" style="padding: 8px 7px;" icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
</el-form-item>
<div style="float: right">
<el-form-item>
<el-button style="padding: 8px 7px;" :type="typePrimary" :size="smallSize" :icon="addIcon" @click="handleAdd">
{{ addName }}
</el-button>
</el-form-item>
</div>
</el-form>
<!-- TODO: 中间的分隔符号 -->
<div class="placeholder" />
<div class="main" style="padding:5px 10px">
<!-- TODO: 以下为基础工序管理列表 -->
<transition name="fade-transform" mode="out-in">
<component
:is="BaseTable"
:key="queryParams.pageNum"
:all-table-arguments="allTableArguments"
@handle-detail="handleDetail"
@handle-update="handleUpdate"
@handle-delete="handleDelete"
/>
</transition>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<div style="padding:5px 10px">
<div class="mb12 font-small-bold">设备管理列表</div>
<el-table v-loading="loading" border :data="equipmentList" @selection-change="handleSelectionChange">
<el-table-column type="index" label="序号" width="80" />
<el-table-column label="pn" prop="businessId" width="120">
<template slot-scope="scope">
{{ scope.row.pn || '-' }}
</template>
</el-table-column>
<el-table-column label="lot" prop="lot" width="120">
<template slot-scope="scope">
{{ scope.row.lot || '-' }}
</template>
</el-table-column>
<el-table-column label="plocation" prop="plocation">
<template slot-scope="scope">
{{ scope.row.plocation || '-' }}
</template>
</el-table-column>
<el-table-column label="厚度" prop="厚度">
<template slot-scope="scope">
{{ scope.row.phd || '-' }}
</template>
</el-table-column>
<el-table-column label="操作员" prop="createBy">
<template slot-scope="scope">
{{ scope.row.createBy || '-' }}
</template>
</el-table-column>
<el-table-column label="操作时间" :show-overflow-tooltip="true" align="center" prop="createDate">
<template slot-scope="scope">
<span>{{ scope.row.createDate | transformDateByFormat('YYYY-MM-DD HH:mm') }}</span>
</template>
</el-table-column>
<el-table-column label="操作" class-name="small-padding fixed-width" width="150px">
<template slot-scope="scope">
<el-button :type="typeParent" :size="size" @click="handleDetail(scope.row)">
详情
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.page"
:limit.sync="queryParams.rows"
@pagination="getList"
/>
<!-- TODO: 添加或修改工序配置对话框 -->
<!-- 添加或修改设备配置对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
<el-form-item label="名称" prop="processName">
<el-input v-model.trim="form.processName" show-word-limit :maxlength="30" placeholder="请输入工序名称" />
<el-form-item label="名称" prop="roleName">
<el-input v-model.trim="form.roleName" show-word-limit :maxlength="30" placeholder="请输入设备名称" />
</el-form-item>
<el-form-item label="设备来源" prop="roleKey">
<el-input v-model.trim="form.roleKey" show-word-limit :maxlength="30" placeholder="请输入设备来源" />
</el-form-item>
<el-form-item label="排序" prop="roleSort">
<el-input-number v-model="form.roleSort" style="width: 100%" controls-position="right" :min="0" />
</el-form-item>
<el-form-item label="工厂车间" prop="workshop">
<el-input v-model.trim="form.workshop" show-word-limit :maxlength="30" placeholder="请输入工厂车间" />
<el-form-item label="设备批次">
<!-- <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>-->
<!-- <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>-->
<!-- <el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox>-->
<el-tree
ref="menu"
class="tree-border"
:data="menuOptions"
show-checkbox
node-key="id"
check-strictly
empty-text="加载中，请稍后"
:props="defaultProps"
@check-change="handleMenuCheckChange"
/>
</el-form-item>
<el-form-item label="操作人" prop="createBy">
<el-input v-model.trim="form.createBy" :maxlength="30" show-word-limit placeholder="请输入操作人" />
<el-form-item label="备注">
<el-input
v-model.trim="form.remark"
maxlength="200"
show-word-limit
type="textarea"
placeholder="请输入内容"
/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
......@@ -75,232 +134,232 @@
<el-button type="primary" @click="submitForm">确 定</el-button>
</div>
</el-dialog>
<!-- TODO: 单项详情信息表单配置 -->
<el-dialog class="aboutSingleDetails" :title="title" :visible.sync="openDetails" width="700px" append-to-body>
<el-form ref="formDetails" :model="singleDetails" size="small" label-width="90px">
<el-form-item label="名称：" prop="processName">
<el-input v-model.trim="singleDetails.processName" :readonly="isReadOnly" />
</el-form-item>
<el-form-item label="工厂车间：" prop="workshop">
<el-input v-model.trim="singleDetails.workshop" :readonly="isReadOnly" />
</el-form-item>
<el-form-item label="操作时间：" prop="createTime">
<!--
TODO: el-input 里不能调用全局日期过滤器 transformDateByFormat('YYYY-MM-DD HH:mm')
<el-input v-model.trim="singleDetails.createTime" :readonly="isReadOnly" />
-->
&nbsp;
{{ singleDetails.createTime | transformDateByFormat('YYYY-MM-DD HH:mm') }}
</el-form-item>
<el-form-item label="操作人：" prop="createBy">
<el-input v-model.trim="singleDetails.createBy" :readonly="isReadOnly" />
<el-row>
<el-col :span="12">
<el-form-item label="pn：" prop="pn">
<el-input v-model.trim="singleDetails.pn" :readonly="true" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="lot：" prop="workshop">
<el-input v-model.trim="singleDetails.lot" :readonly="true" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="plocation：" prop="plocation">
<el-input v-model.trim="singleDetails.plocation" :readonly="true" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label=" 操作时间：" prop="createDate">
<el-input v-model.trim="singleDetails.createDate" :readonly="true" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="操作员：" prop="createBy">
<el-input v-model.trim="singleDetails.createBy" :readonly="true" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="prank：" prop="prank">
<el-input v-model.trim="singleDetails.prank" :readonly="true" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="厚度：" prop="phd">
<el-input v-model.trim="singleDetails.phd" :readonly="true" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="状态：" prop="flag">
<el-input v-model.trim="singleDetails.flag" :readonly="true" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="psm：" prop="psm">
<el-input v-model.trim="singleDetails.psm" :readonly="true" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="pzl：" prop="pzl">
<el-input v-model.trim="singleDetails.pzl" :readonly="true" />
</el-form-item>
</el-col>
</el-row>
<el-form-item label="备注：" prop="remarks">
<el-input v-model.trim="singleDetails.remarks" :readonly="true" />
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
<script>
// TODO: 引入封装好的通用table组件
import BaseTable from '@/components/Table/BaseTable/index.vue'
// TODO: 通过json的形式，优化导入模拟数据，并增加模拟数据的数量
const simulateDataList = require('../basicProcessManagement/simulateDataList/simulateProcessList.json')
import {
addRole,
changeRoleStatus,
dataScope,
delRole,
exportRole,
getRole,
updateRole
} from '@/api/system/role'
import { listdevice } from '@/api/magnagement'
import { roleMenuTreeselect, roleMenuTreeselectMC, treeselect as menuTreeselect } from '@/api/system/menu'
import { roleDeptTreeselect, treeselect as deptTreeselect } from '@/api/system/dept'
// import { getRolesByInsId } from '../../../api/businessManage/template'
export default {
name: 'Role',
components: { BaseTable },
data() {
return {
// TODO: 动态按钮类型
// TODO: 表单里的单项详情参数
singleDetails: {
equipmentName: '',
equipmentCode: '',
lot: '',
location: '',
thickness: '',
createBy: '',
createTime: ''
},
// 是否显示弹出层（数据详情）
openDetails: false,
// // TODO: 模拟测试数据
// equipmentList: [{ equipmentCode: '001', lot: 'xxx', location: '位置01', thickness: '50', createBy: '操作员01', createTime: new Date() }, { equipmentCode: '002', lot: 'xxx', location: '位置02', thickness: '70', createBy: '操作员02', createTime: new Date() }, { equipmentCode: '001', lot: 'xxx', location: '位置01', thickness: '50', createBy: '操作员01', createTime: new Date() }, { equipmentCode: '001', lot: 'xxx', location: '位置01', thickness: '50', createBy: '操作员01', createTime: new Date() }, { equipmentCode: '001', lot: 'xxx', location: '位置01', thickness: '50', createBy: '操作员01', createTime: new Date() }, { equipmentCode: '001', lot: 'xxx', location: '位置01', thickness: '50', createBy: '操作员01', createTime: new Date() }, { equipmentCode: '001', lot: 'xxx', location: '位置01', thickness: '50', createBy: '操作员01', createTime: new Date() }, { equipmentCode: '001', lot: 'xxx', location: '位置01', thickness: '50', createBy: '操作员01', createTime: new Date() }, { equipmentCode: '001', lot: 'xxx', location: '位置01', thickness: '50', createBy: '操作员01', createTime: new Date() }, { equipmentCode: '001', lot: 'xxx', location: '位置01', thickness: '50', createBy: '操作员01', createTime: new Date() }],
// check: '开始盘点',
typeParent: 'text',
typePrimary: 'primary',
typeSuccess: 'success',
// TODO: 动态按钮名称
nameParent: '删除',
resetName: '重置',
addName: '新增',
exportName: '导出',
updataName: '修改',
// TODO: 动态按钮尺寸
size: 'mini',
smallSize: 'small',
// TODO: 图标名
delicon: 'el-icon-delete',
addIcon: 'el-icon-plus',
exportIcon: 'el-icon-download',
resetIcon: '',
// TODO: 控制只读
isReadOnly: true,
// TODO: 遮罩层 (加载进度条)
haspermi: ['sys:user:delete'],
resetHaspermi: ['sys:user:resetPwd'],
updateHaspermi: ['sys:role:update'],
addHaspermi: ['sys:role:add'],
exportHaspermi: ['sys:role:export'],
// 遮罩层
loading: true,
// TODO: 分页的总条数
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 总条数
total: 0,
// TODO: 是否显示弹出层
open: false,
// TODO: 是否显示弹出层（数据详情的）
openDetails: false,
/* 以下为所有table的基本数据 */
// TODO: 模拟测试数据的数据库
simulateProcessList: [],
// TODO: 模拟数据中转表 (为了解决模拟数据的查询问题)
toList: [],
// TODO: 工序表格数据
processList: [],
// TODO: 表单初始化专用参数
formReset: {
processName: '',
workshop: '',
flag: '1',
createTime: new Date(),
updataTime: new Date(),
createBy: ''
},
// TODO: 弹出框层标题
// 角色表格数据
roleList: [],
// 弹出层标题
title: '',
// TODO: 表单校验参数
rules: {
processName: [
{ required: true, message: '请输入工序名称', trigger: 'blur' },
{ min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
],
workshop: [
{ required: true, message: '请输入车间名称', trigger: 'blur' }
],
createBy: [
{ required: true, message: '请输入创建人姓名', trigger: 'blur' }
]
},
// TODO: 新增+修改的 表单参数
form: {
processName: '',
workshop: '',
flag: '1',
remark: '',
createTime: new Date(),
updataTime: new Date(),
createBy: ''
},
// TODO: 表单里的单项详情的参数
singleDetails: {
processName: '',
workshop: '',
flag: '1',
createTime: new Date(),
updataTime: new Date(),
createBy: ''
},
// TODO: 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
processName: '',
workshop: ''
},
// TODO: 用来说明每一列的类型
columObj: {
// 选择框
selection: false,
// 选择框根据条件是否可选
selectable: (row, index) => {
if (row.switchs) {
return true
}
// 是否显示弹出层
open: false,
// 是否显示弹出层（数据权限）
openDataScope: false,
// 日期范围
// dateRange: [],
// 菜单表格数据
menuList: [],
menuExpand: false,
menuNodeAll: false,
deptExpand: true,
deptNodeAll: false,
// 状态数据字典
statusOptions: [
{
dictLabel: '启用',
dictValue: '1'
},
{
dictLabel: '停用',
dictValue: '0'
}
],
// 数据范围选项
dataScopeOptions: [
{
value: '1',
label: '全部数据权限'
},
lazy: 'true',
// column列,columType(列类型,可选text(默认为普通文字模式),input(input可编辑框),switch(switch开关),image(图片),operation(操作按钮))
// prop(参数),label(列名),width(宽度),align(对齐方式),sortable(是否支持排序)
columnData: [{
text: true,
prop: 'processName',
label: '工序名称'
}, {
text: true,
prop: 'workshop',
label: '生产车间'
{
value: '2',
label: '自定数据权限'
},
{
time: true,
prop: 'createTime',
label: '操作时间',
align: 'center'
value: '3',
label: '本部门数据权限'
},
{
text: true,
editRow: null,
prop: 'createBy',
label: '操作人',
sortable: false,
width: '210px'
value: '4',
label: '本部门及以下数据权限'
},
// 如果为操作列,则需要填写需要的操作按钮,类型为Object。operation(操作类型,可选edit,delete,see),type(按钮样式,参考el—botton类型),label(按钮文字)icon(参考el-icon),color(字体颜色)
{
isOperation: true,
label: '操作',
width: '180px',
align: 'center',
sortable: false,
operation: [{
type: this.typeParent,
label: '详情',
icon: '',
color: '',
size: this.size,
buttonClick: this.handleDetail,
isShow: (row, $index) => {
return true
}
}, {
type: this.typeParent,
label: '修改',
icon: '',
color: '',
size: this.size,
buttonClick: this.handleUpdate,
isShow: (row, $index) => {
return true
}
}, {
type: this.typeParent,
label: '删除',
icon: '',
color: '',
size: this.size,
buttonClick: this.handleDelete,
isShow: (row, $index) => {
return true
}
}]
value: '5',
label: '仅本人数据权限'
}
],
// 菜单列表
menuOptions: [],
// 部门列表
tOptions: [],
// 查询参数
queryParams: {
page: 1,
rows: 10,
pn: undefined,
lot: undefined,
snapLocation: undefined
},
// 表单参数
form: {
pn: '',
lot: '',
plocation: ''
},
defaultProps: {
children: 'children',
label: 'label'
},
// 表单校验
rules: {
roleName: [
{ required: true, message: '请输入角色名称', trigger: 'blur' }
],
roleKey: [
{ required: true, message: '请输入权限字符', trigger: 'blur' }
],
roleSort: [
{ required: true, message: '请输入角色排序', trigger: 'blur' }
]
}
// DONE:
}
},
computed: {
BaseTable() {
return BaseTable
},
// TODO: 用来汇总Table组件所需要的全部数据并一次性传输给子组件
allTableArguments() {
return {
listName: '基础工序列表',
loading: this.loading,
processList: this.processList,
queryParams: this.queryParams,
columObj: this.columObj
}
},
deptOptions: [],
formData: {}
}
},
/** TODO: 路由离开前存储筛选条件*/
/** 路由离开前存储筛选条件*/
beforeRouteLeave(to, from, next) {
this.$store.dispatch('searchSave/searchParamsSet', {
path: this.$route.path,
......@@ -311,170 +370,362 @@ export default {
next()
},
created() {
// TODO: 获取大量模拟数据！ require用于将 JSON 数据转换为 JavaScript 对象数组
// 测试用 console.log('this is json', simulateDataList)
this.simulateProcessList = simulateDataList
if (this.$store.getters.searchParams[this.$route.path]) {
const { searchParams } = this.$store.getters; const { path } = this.$route
const param = JSON.parse(searchParams[path]) // 保留着的查询条件
this.queryParams = { ...param }
}
this.getList()
// this.getDicts(dictCons['NORMAL_DISABLE']).then(response => {
// this.statusOptions = response.data;
// });
},
methods: {
// TODO:自定义分页索引，实现索引继承
nIndex(index) {
// TODO: 当前页数 - 1 * 每页数据条数 + 1
const page = this.queryParams.pageNum // TODO: 当前页码
const pageSize = this.queryParams.pageSize // TODO: 每页条数
return index + 1 + (page - 1) * pageSize
// TODO: 获取所选行详情信息操作
handleDetail(row) {
this.singleDetails = this.formReset
this.singleDetails = row
this.title = '详情信息'
this.openDetails = !this.openDetails
},
/** TODO: 查询列表 */
handelTab(i, e) {
const that = this
if (!that.$refs['input' + i]) {
return
}
that.$nextTick(() => {
e.target.blur()
const index = i + 1
that.$refs['input' + index].focus()
})
},
/** 查询角色列表 */
getList() {
this.loading = true
this.reset()
// TODO: 此处为模拟数据的，根据不同条件去查询的过滤方法，可以删除！
if (this.queryParams.workshop === '' && this.queryParams.processName !== '') {
for (const ps of this.simulateProcessList) {
if (ps.processName === this.queryParams.processName) {
this.toList.push(ps)
}
}
} else if (this.queryParams.workshop !== '' && this.queryParams.processName === '') {
for (const ps of this.simulateProcessList) {
if (ps.workshop === this.queryParams.workshop) {
this.toList.push(ps)
}
listdevice(this.queryParams).then(
response => {
this.equipmentList = response.rows
this.total = response.total
this.loading = false
}
} else if (this.queryParams.workshop !== '' && this.queryParams.processName !== '') {
for (const ps of this.simulateProcessList) {
if (ps.workshop === this.queryParams.workshop && ps.processName === this.queryParams.processName) {
this.toList.push(ps)
}
}
} else {
// 测试用 console.log('this is simulate: ', this.simulateProcessList)
// TODO:
this.toList = [...this.simulateProcessList]
)
},
/** 查询菜单树结构 */
getMenuTreeselect() {
menuTreeselect().then(response => {
this.menuOptions = response.data
})
},
/** 查询菜单列表 */
getMenuList(roleId) {
roleMenuTreeselectMC(roleId).then(response => {
this.menuList = this.handleTree(response.data.menus, 'businessId')
this.loading = false
})
},
/** 查询部门树结构 */
getDeptTreeselect() {
deptTreeselect().then(response => {
this.deptOptions = response.data
})
},
// 树状图节点点击选中事件
handleMenuCheckChange(data, check, subCheck) { // data为选中节点信息，check选中状态
if (data.children !== undefined && data.children !== null) { // 是否包含子节点
this.checkNode(data.children, check) // 调用checkNode方法
}
// DONE: 此上为模拟数据的，根据不同条件去查询的过滤方法，可以删除！
this.processList = [...this.toList]
this.total = this.toList.length
console.log(this.processList)
this.loading = false
// // 获取所有被选中的节点信息
// const nodes = this.$refs.menu.getCheckedNodes(false, false)
// // 将获取到的信息赋值（根据自己的需求）
// this.custGroupDesc = nodes.map(item => item.CN_NAME)
// this.searchForm.custGroup = nodes.map(item => item.code)
},
// 选中所有下级节点
checkNode(data, check) {
// 遍历所有下级节点信息
data.forEach(item => {
// 通过节点信息设置选中状态
this.$refs.menu.setChecked(item, check, false)
// 是否包含下级节点，包含下级节点则选中所有下级节点
if (item.children !== undefined) {
this.checkNode(item.children, check)
}
})
},
// 所有菜单节点数据
getMenuAllCheckedKeys() {
// 目前被选中的菜单节点
const checkedKeys = this.$refs.menu.getHalfCheckedKeys()
// 半选中的菜单节点
const halfCheckedKeys = this.$refs.menu.getCheckedKeys()
checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)
return checkedKeys
},
// 所有部门节点数据
getDeptAllCheckedKeys() {
// 目前被选中的部门节点
const checkedKeys = this.$refs.dept.getHalfCheckedKeys()
// // 半选中的部门节点
const halfCheckedKeys = this.$refs.dept.getCheckedKeys()
checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)
return this.$refs.dept.getCheckedKeys()
},
/** 根据角色ID查询菜单树结构 */
getRoleMenuTreeselect(roleId) {
return roleMenuTreeselect(roleId).then(response => {
this.menuOptions = response.data.menus
return response
})
},
/** 根据角色ID和菜单ID查询部门树结构 */
getRoleDeptTreeselect(roleId, menuId) {
return roleDeptTreeselect(roleId, menuId).then(response => {
this.form.deptCheckStrictly = response.data.deptCheckStrictly
this.deptOptions = response.data.depts
this.form.dataScope = this.dataScopeOptions[response.data.dataScope - 1].value
return response
})
},
// 角色状态修改
handleStatusChange(row) {
const text = row.flag === '1' ? '启用' : '停用'
this.$confirm('是否确认操作?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(function() {
return changeRoleStatus(row.businessId, row.flag)
}).then(() => {
this.$message({
message: text + '成功',
type: 'success'
})
}).catch(function() {
row.flag = row.flag === '0' ? '1' : '0'
})
},
// TODO: 表单的取消按钮
// 取消按钮
cancel() {
this.open = false
this.reset()
},
// TODO: 表单+数据列表+中转数据的重置
// 取消按钮（数据权限）
cancelDataScope() {
this.openDataScope = false
this.reset()
},
// 表单重置
reset() {
// TODO: 将模拟数据的空对象赋值给表单对象，达成清空填写表单的效果
this.processList = null
this.toList = null
this.form = { ...this.formReset }
if (this.$refs.menu !== undefined) {
this.$refs.menu.setCheckedKeys([])
}
this.menuExpand = false
this.menuNodeAll = false
this.deptExpand = true
this.deptNodeAll = false
this.form = {
roleId: undefined,
businessId: undefined,
roleName: undefined,
roleKey: undefined,
roleSort: 0,
flag: '1',
menuIds: [],
menuName: undefined,
deptIds: [],
menuCheckStrictly: false,
deptCheckStrictly: false,
remark: undefined
}
this.resetForm('form')
},
/** TODO: 查询按钮操作 */
/** 查询按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1
this.queryParams.page = 1
this.getList()
console.log('this is queryParams', this.queryParams)
},
/** TODO: 重置按钮操作 */
resetQuery() {},
/** 重置按钮操作 */
resetQuery() {
// this.dateRange = []
this.resetForm('queryForm')
this.handleQuery()
},
// 多选框选中数据
handleSelectionChange(selection) {},
/** TODO: 新增按钮操作 */
handleAdd() {
// TODO: 初始化新增对话框的状态
this.reset()
this.title = '添加工序'
this.open = !this.open
handleSelectionChange(selection) {
this.ids = selection.map(item => item.roleId)
this.single = selection.length !== 1
this.multiple = !selection.length
},
// TODO: 获取所选行详情信息操作
handleDetail(row, $index) {
this.singleDetails = this.formReset
this.singleDetails = row
this.title = '详情信息'
this.openDetails = !this.openDetails
// // 树权限（父子联动）
// handleCheckedTreeConnect(value, type) {
// if (type === 'menu') {
// this.form.menuCheckStrictly = !!value
// } else if (type === 'dept') {
// this.form.deptCheckStrictly = !!value
// }
// },
// 树权限（全选/全不选）
handleCheckedTreeNodeAll(value, type) {
if (type === 'menu') {
this.$refs.menu.setCheckedNodes(value ? this.menuOptions : [])
} else if (type === 'dept') {
this.$refs.dept.setCheckedNodes(value ? this.deptOptions : [])
}
},
/** TODO: 修改按钮操作 */
handleUpdate(row, $index) {
this.form = { ...this.formReset }
this.title = '修改工序'
const updProcessName = row.processName
for (const pd of this.simulateProcessList) {
if (pd.processName === updProcessName) {
this.form = pd
// 树权限（展开/折叠）
handleCheckedTreeExpand(value, type) {
if (type === 'menu') {
const treeList = this.menuOptions
for (let i = 0; i < treeList.length; i++) {
this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value
}
} else if (type === 'dept') {
const treeList = this.deptOptions
for (let i = 0; i < treeList.length; i++) {
this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value
}
}
},
/** 新增按钮操作 */
handleAdd() {
this.reset()
this.getMenuTreeselect()
this.open = true
this.title = '添加角色'
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset()
const roleId = row.businessId || this.ids
const roleMenu = this.getRoleMenuTreeselect(roleId)
getRole(roleId).then(response => {
this.form = response.data
this.open = true
this.getMenuTreeselect(roleId)
this.$nextTick(() => {
roleMenu.then(res => {
this.$refs.menu.setCheckedKeys(res.data.checkedKeys)
})
})
this.title = '修改角色'
})
},
/** 分配数据权限操作 选择菜单 */
handleMenu(row) {
this.reset()
const roleId = row.businessId || this.ids
this.getMenuList(roleId) // 查询菜单列表树形显示
getRole(roleId).then(response => {
this.form = response.data
this.openDataScope = true
this.title = '分配数据权限'
})
},
/** 分配数据权限操作 */
handleDataScope(row) {
this.deptOptions = []
this.form.dataScope = undefined
const roleId = this.form.businessId
this.form.menuId = row.businessId
this.form.menuName = row.menuName
const roleDeptTreeselect = this.getRoleDeptTreeselect(roleId, this.form.menuId)
this.$nextTick(() => {
roleDeptTreeselect.then(res => {
this.$refs.dept.setCheckedKeys(res.data.checkedKeys)
})
})
this.title = '分配数据权限'
},
/** TODO: 修改或增加list列表里的数据 */
/** 提交按钮 */
submitForm: function() {
this.$refs['form'].validate(valid => {
if (valid) {
// TODO: 模拟测试数据的修改，可删除
for (const p of this.simulateProcessList) {
if (p.processName === this.form.processName) {
this.simulateProcessList = this.simulateProcessList.map(obj =>
obj.processName === this.form.processName ? this.form : obj
)
this.form.menuCheckStrictly = false
if (this.form.businessId !== undefined) {
this.form.menuIds = this.getMenuAllCheckedKeys()
updateRole(this.form).then(response => {
this.msgSuccess('修改成功')
this.reset()
this.open = false
this.getList()
this.open = !this.open
break
} else {
this.simulateProcessList.push(this.form)
})
} else {
this.form.menuIds = this.getMenuAllCheckedKeys()
addRole(this.form).then(response => {
this.msgSuccess('新增成功')
this.reset()
this.open = false
this.getList()
this.open = !this.open
return
}
})
}
}
})
},
/** TODO: 关于模拟数据的 删除list数组所调用的删除方法,封装的函数如下 */
delProcess(delProcessName) {
let tip = false
for (const pd0 of this.simulateProcessList) {
console.log('This is pd0:', pd0)
if (pd0.processName === delProcessName) {
this.simulateProcessList = this.simulateProcessList.filter(item => item.processName !== delProcessName)
tip = true
break
}
/** 提交按钮（数据权限） */
submitDataScope: function() {
if (this.form.businessId !== undefined && this.form.menuId !== undefined) {
this.form.deptIds = this.getDeptAllCheckedKeys()
dataScope(this.form).then(response => {
this.msgSuccess('修改成功')
this.openDataScope = false
this.getList()
})
}
return tip
},
/** TODO:删除按钮操作 */
handleDelete(row, $index) {
/** 删除按钮操作 */
handleDelete(row) {
const roleIds = row.businessId || this.ids
this.$confirm('是否确认操作？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
return this.delProcess(row.processName)
}).then(function() {
return delRole(roleIds)
}).then(() => {
this.getList()
this.$message({
message: '删除成功',
type: 'success'
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
}).catch(function() {
})
},
/** 导出按钮操作 */
handleExport() {
const queryParams = this.queryParams
this.$confirm('是否确认操作?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(function() {
return exportRole(queryParams).then(response => {
const blob = new Blob([response])
const downloadElement = document.createElement('a')
const href = window.URL.createObjectURL(blob)// 创建下载的链接
downloadElement.href = href
downloadElement.download = '角色信息' + '.xls' // 下载后文件名
document.body.appendChild(downloadElement)
downloadElement.click()// 点击下载
document.body.removeChild(downloadElement)// 下载完成移除元素
window.URL.revokeObjectURL(href)// 释放掉blob对象
// this.download(response.msg);
})
})
}
}
}
</script>
<style lang="scss" scoped>
.aboutSingleDetails{
.el-form-item{
.el-input >>> .el-input__inner {
-webkit-appearance: none;
background-color: #FFF;
background-image: none;
border-radius: 4px;
border: 0;
width: 100%;
}
}
}
.app-container {
font-size: 18px;
padding: 0;
......@@ -500,25 +751,4 @@ export default {
height: 12em;
width: 4px;
}
//.ProcessTable{
// padding: 5px;
// margin: 0 auto;
// height: 495px;
//}
//TODO: readOnly里去删除el-input的边框样式
.aboutSingleDetails {
.el-form-item {
.el-input > > > .el-input__inner {
-webkit-appearance: none;
background-color: #FFF;
background-image: none;
border-radius: 4px;
border: 0;
width: 100%;
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment