Skip to content

T
template_vue
Commit 3a53ddd9 authored by AiNoeLiYa's avatar AiNoeLiYa
Browse files
Options

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

Signed-off-by: 's avatarAiNoeLiYa <jzbcxy@gmail.com>
parent d844afe8
Hide whitespace changes
Inline Side-by-side
Showing with 102 additions and 98 deletions
src/components/Table/AllTableArguments/BaseTableArguments.js
View file @ 3a53ddd9
......@@ -107,8 +107,6 @@ export function BaseTableArgumentsTest(nIndex, selection, loading, processList,
if (queryParams instanceof queryParamsType) {
this.queryParams = queryParamsType
}
this.nIndex = nIndex
this.columnData = columnData
this.processList = processList
}
src/components/Table/BaseTable/index.vue
View file @ 3a53ddd9
......@@ -12,7 +12,7 @@
@selection-change="handleSelectionChange"
>
<el-table-column type="index" label="序号" width="50" :index="allTableArguments.nIndex" />
<el-table-column type="index" label="序号" width="50" :index="nIndex" />
<!-- TODO: 选择框是否开启，selectable控制是否单行禁用 -->
<el-table-column v-if="allTableArguments.columObj.selection" type="selection" :selectable="allTableArguments.columObj.selectable" width="50px" />
......@@ -30,7 +30,7 @@
:index="columIndex"
show-overflow-tooltip
>
<template v-slot="{row,$index}">
<template slot-scope="{row,$index}">
<!-- 默认展示 -->
<span v-if="column.text && column.editRow !== $index">{{ row[column.prop] || '-' }}</span>
......@@ -60,9 +60,9 @@
<!-- 操作按钮 -->
<span v-if="column.isOperation" class="processListBtns">
<span v-for="(operations, index) in column.operation" :key="index">
<el-button v-if=" operations.clickType === '1' " :icon="operations.icon" :type="typeParent" :style="{color:operations.color}" :size="size" @click="handleDetail">{{ operations.label }}</el-button>
<el-button v-else-if=" operations.clickType === '2' " :icon="operations.icon" :type="typeParent" :style="{color:operations.color}" :size="size" @click="handleUpdate">{{ operations.label }}</el-button>
<el-button v-else-if=" operations.clickType === '3' " :icon="operations.icon" :type="typeParent" :style="{color:operations.color}" :size="size" @click="handleDelete">{{ operations.label }}</el-button>
<el-button v-if=" operations.clickType === '1' " :icon="operations.icon" :type="typeParent" :style="{color:operations.color}" :size="size" @click="handleDetail(row,$index)">{{ operations.label }}</el-button>
<el-button v-else-if=" operations.clickType === '2' " :icon="operations.icon" :type="typeParent" :style="{color:operations.color}" :size="size" @click="handleUpdate(row,$index)">{{ operations.label }}</el-button>
<el-button v-else-if=" operations.clickType === '3' " :icon="operations.icon" :type="typeParent" :style="{color:operations.color}" :size="size" @click="handleDelete(row,$index)">{{ operations.label }}</el-button>
</span>
</span>
</template>
......@@ -76,7 +76,7 @@
<script>
import {BaseTableArgumentsTest} from '@/components/Table/AllTableArguments/BaseTableArguments'
import { BaseTableArgumentsTest } from '@/components/Table/AllTableArguments/BaseTableArguments'
export default {
name: 'BaseTable',
......@@ -93,16 +93,10 @@ export default {
}
}
},
allNamed: {
type: Object,
nIndex: {
type: Function,
default: () => {
return {
listName: String,
label: {
SerialNumberNamed: String
}
}
return Function
}
}
},
......@@ -131,7 +125,6 @@ export default {
/* TODO: 这里是控制内容列表的样式 */
.processListBtns {
.el-button {
margin: 0 12px;
}
}
......
src/views/processManagement/basicProcessManagement/index.vue
View file @ 3a53ddd9
......@@ -698,6 +698,7 @@ export default {
}
</script>
<style lang="scss" scoped>
/* TODO: 专门用来解决input 的边框问题 */
.aboutSingleDetails{
.el-form-item{
.el-input >>> .el-input__inner {
......
src/views/processManagement/inventoryRecord/index.vue
View file @ 3a53ddd9
......@@ -6,10 +6,9 @@
<el-form-item label="pn" prop="pn">
<el-input
v-model="queryParams.pn"
placeholder="Please enter pn"
placeholder="请输入pn"
clearable
:maxlength="30"
style="width: 150px;"
:maxlength="20"
size="small"
@keyup.enter.native="handleQuery"
/>
......@@ -18,10 +17,9 @@
<el-form-item label="lot" prop="lot">
<el-input
v-model="queryParams.lot"
placeholder="Please enter lot"
placeholder="请输入lot"
clearable
:maxlength="30"
style="width: 150px;"
:maxlength="20"
size="small"
@keyup.enter.native="handleQuery"
/>
......@@ -30,25 +28,25 @@
<el-form-item label="plocation" prop="plocation">
<el-input
v-model="queryParams.plocation"
placeholder="Please enter plocation"
placeholder="请输入plocation"
clearable
:maxlength="30"
style="width: 150px;"
:maxlength="20"
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="poperate" prop="poperate">
<el-form-item label="库类型" prop="ptype">
<el-select
v-model="queryParams.poperate"
placeholder="库状态"
v-model="queryParams.ptype"
placeholder="请选择库类型"
filterable
clearable
@keyup.enter.native="handleQuery"
>
<el-option
v-for="option in selectOptionsAboutPoperate"
v-for="option in selectOptionsAboutPtype"
:key="option.value"
:label="option.label"
:value="option.value"
......@@ -56,16 +54,16 @@
</el-select>
</el-form-item>
<el-form-item label="ptype" prop="ptype">
<el-form-item label="库状态" prop="poperate">
<el-select
v-model="queryParams.ptype"
placeholder="库类型"
v-model="queryParams.poperate"
placeholder="请选择库状态"
filterable
clearable
@keyup.enter.native="handleQuery"
>
<el-option
v-for="option in selectOptionsAboutPtype"
v-for="option in selectOptionsAboutPoperate"
:key="option.value"
:label="option.label"
:value="option.value"
......@@ -73,39 +71,27 @@
</el-select>
</el-form-item>
<el-form-item>
<el-form-item label="操作时间" prop="date">
<div class="block">
<el-date-picker
v-model="dateRange"
value-format="yyyy-MM-dd"
type="datetimerange"
style="width: 250px"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="['00:00:00', '00:00:00']"
/>
</div>
</el-form-item>
<el-form-item>
<el-button type="primary" size="small" icon="el-icon-search" @click="handleQuery">查询</el-button>
</el-form-item>
<el-form-item>
<el-button size="small" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
</el-form-item>
<!--TODO: 导出和盘点按钮所在 -->
<el-row :gutter="36" class="mb8" justify="start">
<el-col :span="1.5">
<el-button
type="primary"
size="small"
icon="el-icon-plus"
@click="handleExport"
>盘点
</el-button>
</el-col>
<el-row :gutter="10" class="mb8" justify="start">
<el-col :span="1.5">
<el-button
type="success"
......@@ -128,6 +114,7 @@
<component
:is="BaseTable"
:key="queryParams.rows"
:nIndex="nIndex"
:all-table-arguments="allTableArguments"
@handle-detail="handleDetail"
/>
......@@ -142,45 +129,37 @@
/>
<!-- TODO: 单项详情信息表单配置 -->
<el-dialog class="aboutSingleDetails" :title="title" :visible.sync="openDetails" width="700px" append-to-body>
<el-dialog class="aboutSingleDetails" :title="title" :visible.sync="openDetails" :close-on-click-modal="false" width="800px" append-to-body>
<el-form ref="formDetails" :model="singleDetails" size="small" label-width="90px">
<el-row>
<el-col :span="12">
<el-row :gutter="10" justify="start" align="middle">
<el-col :span="8">
<el-form-item label="pn：" prop="pn">
<el-input v-model.trim="singleDetails.pn" :readonly="true" />
<el-input v-model.trim="singleDetails.pn" :readonly="isReadOnly" />
</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 label="lot：" prop="lot">
<el-input v-model.trim="singleDetails.lot" :readonly="isReadOnly" />
</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.ptype" :readonly="true" />
<el-input v-model.trim="singleDetails.plocation" :readonly="isReadOnly" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label=" 操作时间：" prop="createDate">
<el-input v-model.trim="singleDetails.poperate" :readonly="true" />
<el-col :span="8">
<el-form-item label="库类型：" prop="ptype">
<el-input v-model.trim="singleDetails.ptype" :readonly="isReadOnly" />
</el-form-item>
<el-form-item label="库状态：" prop="poperate">
<el-input v-model.trim="singleDetails.poperate" :readonly="isReadOnly" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="位置：" prop="createName">
<el-input v-model.trim="singleDetails.plocation" :readonly="true" />
<el-col :span="8">
<el-form-item label="操作时间：" prop="createDate">
<el-input v-model.trim="singleDetails.createDate" :readonly="isReadOnly" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="操作员：" prop="user">
<el-input v-model.trim="singleDetails.user" :readonly="true" />
<el-input v-model.trim="singleDetails.user" :readonly="isReadOnly" />
</el-form-item>
</el-col>
</el-row>
......@@ -288,7 +267,7 @@ export default {
{
text: true,
prop: 'pn',
label: '设备编码pn'
label: 'pn'
},
{
text: true,
......@@ -298,9 +277,9 @@ export default {
{
ownDefined: true,
prop: 'ptype',
label: '库类型ptype',
label: '库类型',
ownDefinedReturn: (row, $index) => {
switch (row.poperate) {
switch (row.ptype) {
case '1':
return '设备库'
case '2':
......@@ -313,7 +292,7 @@ export default {
{
ownDefined: true,
prop: 'poperate',
label: '库状态poperate',
label: '库状态',
width: '180px',
ownDefinedReturn: (row, $index) => {
switch (row.poperate) {
......@@ -333,28 +312,28 @@ export default {
{
text: true,
prop: 'plocation',
label: '位置plocation',
label: 'plocation',
sortable: false,
width: '150px'
},
{
text: true,
prop: 'user',
label: '操作员user',
label: '操作员',
sortable: false,
width: '150px'
},
{
time: true,
prop: 'updateDate',
label: '操作时间updateDate',
prop: 'createDate',
label: '操作时间',
align: 'center'
},
// TODO: 如果为操作列,则需要填写需要的操作按钮,类型为Object。operation(操作类型,可选edit,delete,see),type(按钮样式,参考el—botton类型),label(按钮文字)icon(参考el-icon),color(字体颜色)
{
isOperation: true,
label: '操作',
width: '100px',
width: '80px',
align: 'center',
sortable: false,
operation: [{
......@@ -369,15 +348,24 @@ export default {
]
},
title: '',
openDetails: false,
isReadOnly: true,
// TODO: 表单里的单项详情参数
singleDetails: {
equipmentName: '',
equipmentCode: '',
pn: '',
lot: '',
location: '',
thickness: '',
createName: '',
createTime: ''
ptype: '',
poperate: '',
plocation: '',
remarks: '',
fqYs: '',
user: '',
createBy: '',
updateBy: '',
createDate: '',
updateDate: ''
}
}
},
......@@ -389,16 +377,15 @@ export default {
/* TODO:自定义分页索引，实现索引继承 */
nIndex(index) {
// TODO: 当前页数 - 1 * 每页数据条数 + 1
const page = this.queryParams.pageNum // TODO: 当前页码
const pageSize = this.queryParams.pageSize // TODO: 每页条数
return index + 1 + (page - 1) * pageSize
const page = this.queryParams.page // TODO: 当前页码
const rows = this.queryParams.rows // TODO: 每页条数
return index + 1 + (page - 1) * rows
},
// TODO: 用来汇总Table组件所需要的全部数据并一次性传输给子组件
allTableArguments() {
return {
listName: '出入库记录列表',
nIndex: this.nIndex,
loading: this.loading,
processList: this.inventoryRecordList,
queryParams: this.queryParams,
......@@ -451,12 +438,16 @@ export default {
this.handleQuery()
},
handleDetail(row) {
handleDetail: function(row) {
console.log('success!')
this.title = '记录详情'
this.singleDetails = { ...row }
this.openDetails = true
}
}
}
</script>
<style lang="scss" scoped>
.app-container {
padding: 0;
......@@ -467,16 +458,37 @@ export default {
margin-bottom:10px
}
/*TODO: 这里是调整ToolBar的样式的噢！*/
.ToolBar{
.el-form{
.el-form-item{
.el-select{
width: 90px;
width: 160px
}
.el-input{
width: 180px
}
}
}
}
}
/* 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%;
}
}
}
</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