Commit a38985a4 authored by AiNoeLiYa's avatar AiNoeLiYa

优化工序库的出入库记录页面布局

Signed-off-by: 's avatarAiNoeLiYa <jzbcxy@gmail.com>
parent 0368f80a
......@@ -36,7 +36,6 @@
/>
</el-form-item>
<el-form-item label="库类型" prop="ptype">
<el-select
v-model="queryParams.ptype"
......@@ -114,7 +113,7 @@
<component
:is="BaseTable"
:key="queryParams.rows"
:nIndex="nIndex"
:n-index="nIndex"
:all-table-arguments="allTableArguments"
@handle-detail="handleDetail"
/>
......@@ -133,7 +132,7 @@
<el-form ref="formDetails" :model="singleDetails" size="small" label-width="90px">
<el-row :gutter="10" justify="start" align="middle">
<el-col :span="8">
<el-col :span="12">
<el-form-item label="pn:" prop="pn">
<el-input v-model.trim="singleDetails.pn" :readonly="isReadOnly" />
</el-form-item>
......@@ -143,24 +142,24 @@
<el-form-item label="plocation:" prop="plocation">
<el-input v-model.trim="singleDetails.plocation" :readonly="isReadOnly" />
</el-form-item>
<el-form-item label="操作员:" prop="user">
<el-input v-model.trim="singleDetails.user" :readonly="isReadOnly" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-col :span="12">
<el-form-item label="库类型:" prop="ptype">
<el-input v-model.trim="singleDetails.ptype" :readonly="isReadOnly" />
{{ selectedPtype(singleDetails.ptype) }}
</el-form-item>
<el-form-item label="库状态:" prop="poperate">
<el-input v-model.trim="singleDetails.poperate" :readonly="isReadOnly" />
{{ selectedPoperate(singleDetails.poperate) }}
</el-form-item>
<el-form-item label="fqYs:" prop="fqYs">
{{ singleDetails.fqYs }}
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="操作时间:" prop="createDate">
<el-input v-model.trim="singleDetails.createDate" :readonly="isReadOnly" />
</el-form-item>
<el-form-item label="操作员:" prop="user">
<el-input v-model.trim="singleDetails.user" :readonly="isReadOnly" />
</el-form-item>
</el-col>
</el-row>
......@@ -175,7 +174,7 @@ import { listLog } from '@/api/processLibrary/InventoryRecord'
import BaseTable from '@/components/Table/BaseTable/index.vue'
export default {
name: 'LoginInfo',
name: 'InventoryRecord',
components: [
BaseTable
],
......@@ -279,14 +278,7 @@ export default {
prop: 'ptype',
label: '库类型',
ownDefinedReturn: (row, $index) => {
switch (row.ptype) {
case '1':
return '设备库'
case '2':
return '工序库'
default:
return ''
}
return this.selectedPtype(row.ptype)
}
},
{
......@@ -295,18 +287,7 @@ export default {
label: '库状态',
width: '180px',
ownDefinedReturn: (row, $index) => {
switch (row.poperate) {
case '1':
return '入库'
case '2':
return '出库'
case '3':
return '修正'
case '4':
return '废弃'
default:
return ''
}
return this.selectedPoperate(row.poperate)
}
},
{
......@@ -348,7 +329,6 @@ export default {
]
},
title: '',
openDetails: false,
isReadOnly: true,
......@@ -373,7 +353,6 @@ export default {
BaseTable() {
return BaseTable
},
/* TODO:自定义分页索引,实现索引继承 */
nIndex(index) {
// TODO: 当前页数 - 1 * 每页数据条数 + 1
......@@ -381,7 +360,6 @@ export default {
const rows = this.queryParams.rows // TODO: 每页条数
return index + 1 + (page - 1) * rows
},
// TODO: 用来汇总Table组件所需要的全部数据并一次性传输给子组件
allTableArguments() {
return {
......@@ -419,6 +397,33 @@ export default {
this.loading = false
})
},
/* TODO: ptype 库类型判断的公用方法 */
selectedPtype(ptype) {
switch (ptype) {
case '1':
return '设备库'
case '2':
return '工序库'
default:
return ''
}
},
/* TODO: poperate的库状态判断的公用方法 */
selectedPoperate(poperate) {
switch (poperate) {
case '1':
return '入库'
case '2':
return '出库'
case '3':
return '修正'
case '4':
return '废弃'
default:
return ''
}
},
handleClose() {
this.clearVisible = false
this.exportVisible = false
......@@ -458,8 +463,6 @@ export default {
margin-bottom:10px
}
/*TODO: 这里是调整ToolBar的样式的噢!*/
.ToolBar{
.el-form{
......@@ -475,19 +478,21 @@ export default {
}
}
/* TODO: 专门用来解决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%;
.el-form{
.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>
......
<template>
<div class="app-container">
<el-form v-show="showSearch" ref="queryForm" :model="queryParams" :inline="true">
<el-form v-show="showSearch" ref="queryForm" style="padding: 0 0 0 10px" :model="queryParams" :inline="true">
<el-form-item label="部门名称" prop="deptName">
<el-input
v-model="queryParams.deptName"
......@@ -22,109 +22,119 @@
</el-form-item>
<el-form-item>
<el-button
style="padding: 8px 7px;"
icon="el-icon-search"
class="filter-item"
type="primary"
size="small"
@click="getList"
>查询</el-button>
<el-button
class="filter-item"
type="primary"
size="small"
@click="handleAdd"
>新增</el-button>
<!-- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>-->
</el-form-item>
<div style="float: right">
<el-form-item>
<el-button
style="padding: 8px 7px;"
icon="el-icon-plus"
class="filter-item"
type="primary"
size="small"
@click="handleAdd"
>新增</el-button>
<!-- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>-->
</el-form-item>
</div>
</el-form>
<el-table
v-loading="Loading"
:data="deptList"
row-key="businessId"
default-expand-all
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
>
<!-- <el-table-column-->
<!-- label="序号"-->
<!-- type="index"-->
<!-- width="50">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- label="部门编号">-->
<!-- <template v-slot:default="scope">-->
<!-- {{ scope.row.businessId }}-->
<!-- </template>-->
<!-- </el-table-column>-->
<el-table-column :show-overflow-tooltip="true" prop="deptName" label="部门名称" width="260" />
<el-table-column :show-overflow-tooltip="true" prop="orderNum" label="排序" width="200" />
<el-table-column label="状态" align="center" width="100">
<template slot-scope="scope">
<el-switch
v-model="scope.row.flag"
active-value="1"
inactive-value="0"
@change="handleStatusChange(scope.row)"
/>
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="创建时间" align="center" prop="createDate" width="200">
<template slot-scope="scope">
<span>{{ scope.row.createDate | transformDateByFormat('YYYY-MM-DD HH:mm') }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<!-- <template slot-scope="scope">-->
<!-- <el-button-->
<!-- v-hasPermi="['system:dept:edit']"-->
<!-- size="mini"-->
<!-- type="text"-->
<!-- icon="el-icon-edit"-->
<!-- @click="handleUpdate(scope.row)"-->
<!-- >修改</el-button>-->
<!-- <el-button-->
<!-- v-hasPermi="['system:dept:add']"-->
<!-- size="mini"-->
<!-- type="text"-->
<!-- icon="el-icon-plus"-->
<!-- @click="handleAdd(scope.row)"-->
<!-- >新增</el-button>-->
<!-- <el-button-->
<!-- v-if="scope.row.parentId != 0"-->
<!-- v-hasPermi="['system:dept:remove']"-->
<!-- size="mini"-->
<!-- type="text"-->
<!-- icon="el-icon-delete"-->
<!-- @click="handleDelete(scope.row)"-->
<!-- >删除</el-button>-->
<div style="padding:5px 10px">
<el-table
v-loading="Loading"
:data="deptList"
row-key="businessId"
default-expand-all
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
>
<!-- <el-table-column-->
<!-- label="序号"-->
<!-- type="index"-->
<!-- width="50">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- label="部门编号">-->
<!-- <template v-slot:default="scope">-->
<!-- {{ scope.row.businessId }}-->
<!-- </template>-->
<template slot-scope="scope">
<el-button
size="mini"
type="text"
style="color: #49cec9"
@click="handleUpdate(scope.row)"
>修改</el-button>
<!-- <el-switch-->
<!-- v-model="scope.row.flag"-->
<!-- v-hasPermi="['system:dept:toggle']"-->
<!-- active-value="0"-->
<!-- inactive-value="1"-->
<!-- @change="handleStatusChange(scope.row)"-->
<!-- />-->
<el-button
size="mini"
type="text"
@click="handleAdd(scope.row)"
>新增</el-button>
<el-button
v-if="scope.row.parentId !== 0"
size="mini"
type="text"
@click="handleDelete(scope.row)"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- </el-table-column>-->
<el-table-column :show-overflow-tooltip="true" prop="deptName" label="部门名称" width="260" />
<el-table-column :show-overflow-tooltip="true" prop="orderNum" label="排序" width="200" />
<el-table-column label="状态" align="center" width="100">
<template slot-scope="scope">
<el-switch
v-model="scope.row.flag"
active-value="1"
inactive-value="0"
@change="handleStatusChange(scope.row)"
/>
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="创建时间" align="center" prop="createDate" width="200">
<template slot-scope="scope">
<span>{{ scope.row.createDate | transformDateByFormat('YYYY-MM-DD HH:mm') }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<!-- <template slot-scope="scope">-->
<!-- <el-button-->
<!-- v-hasPermi="['system:dept:edit']"-->
<!-- size="mini"-->
<!-- type="text"-->
<!-- icon="el-icon-edit"-->
<!-- @click="handleUpdate(scope.row)"-->
<!-- >修改</el-button>-->
<!-- <el-button-->
<!-- v-hasPermi="['system:dept:add']"-->
<!-- size="mini"-->
<!-- type="text"-->
<!-- icon="el-icon-plus"-->
<!-- @click="handleAdd(scope.row)"-->
<!-- >新增</el-button>-->
<!-- <el-button-->
<!-- v-if="scope.row.parentId != 0"-->
<!-- v-hasPermi="['system:dept:remove']"-->
<!-- size="mini"-->
<!-- type="text"-->
<!-- icon="el-icon-delete"-->
<!-- @click="handleDelete(scope.row)"-->
<!-- >删除</el-button>-->
<!-- </template>-->
<template slot-scope="scope">
<el-button
size="mini"
type="text"
style="color: #49cec9"
@click="handleUpdate(scope.row)"
>修改</el-button>
<!-- <el-switch-->
<!-- v-model="scope.row.flag"-->
<!-- v-hasPermi="['system:dept:toggle']"-->
<!-- active-value="0"-->
<!-- inactive-value="1"-->
<!-- @change="handleStatusChange(scope.row)"-->
<!-- />-->
<el-button
size="mini"
type="text"
@click="handleAdd(scope.row)"
>新增</el-button>
<el-button
v-if="scope.row.parentId !== 0"
size="mini"
type="text"
@click="handleDelete(scope.row)"
>删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!-- 添加或修改部门对话框 -->
<el-dialog title="部门信息" :visible.sync="open" width="600px" append-to-body>
......@@ -190,7 +200,7 @@
</template>
<script>
import {addDept, delDept, getDept, listDept, listDeptExcludeChild, updateDept} from '@/api/system/dept'
import { addDept, delDept, getDept, listDept, listDeptExcludeChild, updateDept } from '@/api/system/dept'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
......@@ -426,3 +436,31 @@ export default {
}
}
</script>
<style lang="scss" scoped>
.app-container {
font-size: 18px;
padding: 0;
.placeholder {
height: 1.3vh;
background-color: #F4F4F4;
margin-bottom: 10px
}
.table-drop {
vertical-align: 2px;
line-height: 20px;
margin-left: 15px
}
.el-switch {
margin-left: 15px;
}
}
.el-divider--vertical{
height: 12em;
width: 4px;
}
</style>
......@@ -39,12 +39,14 @@
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" size="small" @click="handleQuery">查询</el-button>
<el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">查询</el-button>
</el-form-item>
<div style="float: right">
<el-form-item>
<el-button
style="padding: 8px 7px;"
type="primary"
icon="el-icon-plus"
size="small"
@click="handleAdd"
>新增</el-button>
......
......@@ -40,7 +40,7 @@
</el-form-item>
<el-form-item>
<el-button type="primary" style="padding: 8px 7px;" icon="el-icon-search" size="small" @click="handleQuery">查询</el-button>
<el-button type="primary" style="padding: 8px 7px;" icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
<el-button style="padding: 8px 7px;" icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
</el-form-item>
<el-form-item style="float: right">
<!-- <el-button-->
......
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