Skip to content

T
template_vue
Commit 34df6275 authored by 岑歆奕's avatar 岑歆奕 Committed by AiNoeLiYa
Browse files
Options

1.修改了部分字段名 

2.调整了按钮的间距和位置大小
3.新增了关于模拟数据的条件查询功能，可以进行条件查询
Signed-off-by: 's avatarAiNoeLiYa <jzbcxy@gmail.com>
parent dbd692ca
Hide whitespace changes
Inline Side-by-side
Showing with 118 additions and 46 deletions
src/views/processManagement/basicProcessManagement/index.vue
View file @ 34df6275
......@@ -41,8 +41,14 @@
<!-- 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
v-loading="loading"
class="processList"
border
:data="processList"
@selection-change="handleSelectionChange"
>
<el-table-column type="index" label="序号" width="50"/>
<el-table-column label="工序名称" prop="processName" :show-overflow-tooltip="true">
<template slot-scope="scope">
{{ scope.row.processName || '-' }}
......@@ -53,29 +59,36 @@
{{ scope.row.workshop || '-' }}
</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="createTime">
<template slot-scope="scope">
<span>{{ scope.row.createTime | transformDateByFormat('YYYY-MM-DD HH:mm') }}</span>
</template>
</el-table-column>
<el-table-column label="创建人" prop="createBy">
<el-table-column label="操作人" prop="createBy">
<template slot-scope="scope">
{{ scope.row.createBy || '-' }}
</template>
</el-table-column>
<el-table-column label="操作" class-name="small-padding fixed-width" width="240px">
<el-table-column
label="操作"
class-name="small-padding fixed-width"
width="180px"
>
<template slot-scope="scope">
<el-button :type="typeParent" :size="size" @click="handleDetail(scope.row)">
详情
</el-button>
<el-button :type="typeParent" :size="size" @click="handleUpdate(scope.row)">
{{ updataName }}
</el-button>
<el-button
size="mini"
type="text"
@click="handleDelete(scope.row)"
>删除</el-button>
<div class="processListBtns">
<el-button :type="typeParent" :size="size" @click="handleDetail(scope.row)">
详情
</el-button>
<el-button :type="typeParent" :size="size" @click="handleUpdate(scope.row)">
{{ updataName }}
</el-button>
<el-button
size="mini"
type="text"
@click="handleDelete(scope.row)"
>删除
</el-button>
</div>
</template>
</el-table-column>
</el-table>
......@@ -92,13 +105,13 @@
<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-input v-model.trim="form.processName" show-word-limit :maxlength="30" placeholder="请输入工序名称"/>
</el-form-item>
<el-form-item label="工厂车间" prop="workshop">
<el-input v-model.trim="form.workshop" show-word-limit :maxlength="30" placeholder="请输入工厂车间" />
<el-input v-model.trim="form.workshop" 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="操作人" prop="createBy">
<el-input v-model.trim="form.createBy" :maxlength="30" show-word-limit placeholder="请输入操作人"/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
......@@ -111,16 +124,20 @@
<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-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-input v-model.trim="singleDetails.workshop" :readonly="isReadOnly"/>
</el-form-item>
<el-form-item label="创建时间：" prop="createTime">
<el-input v-model.trim="singleDetails.createTime" :readonly="isReadOnly" />
<el-form-item label="操作时间：" prop="createTime">
<!--
TODO: el-input 里不能调用全局日期过滤器 transformDateByFormat('YYYY-MM-DD HH:mm')
<el-input v-model.trim="singleDetails.createTime" :readonly="isReadOnly" />
-->
{{ 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-form-item label="操作人：" prop="createBy">
<el-input v-model.trim="singleDetails.createBy" :readonly="isReadOnly"/>
</el-form-item>
</el-form>
</el-dialog>
......@@ -159,13 +176,15 @@ export default {
multiple: true,
// 总条数
total: 0,
// 角色表格数据
roleList: [],
// TODO: 工序表格数据
processList: [],
// TODO: 模拟数据中转表 (为了解决模拟数据的查询问题)
toList: [],
// 弹出层标题
title: '',
// 是否显示弹出层
// TODO: 是否显示弹出层
open: false,
// 是否显示弹出层（数据详情）
// TODO: 是否显示弹出层（数据详情）
openDetails: false,
// 日期范围
// dateRange: [],
......@@ -175,13 +194,12 @@ export default {
menuNodeAll: false,
deptExpand: true,
deptNodeAll: false,
// 查询参数
// TODO: 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
processName: undefined,
workshop: undefined,
flag: undefined
processName: '',
workshop: ''
},
defaultProps: {},
// TODO: 表单参数
......@@ -213,16 +231,33 @@ export default {
createBy: ''
},
// TODO: 模拟测试数据
simulateProcessList: [{ processName: '打磨', workshop: '车间1', flag: 1, createTime: new Date(), updataTime: new Date(), createBy: '张三' }, { processName: '焊接', workshop: '车间2', flag: 2, createTime: new Date(), updataTime: new Date(), createBy: '李四' }],
simulateProcessList: [
{
processName: '打磨',
workshop: '车间1',
flag: 1,
createTime: new Date(),
updataTime: new Date(),
createBy: '张三'
},
{
processName: '焊接',
workshop: '车间2',
flag: 2,
createTime: new Date(),
updataTime: new Date(),
createBy: '李四'
}
],
// 表单校验
// TODO: 表单校验
rules: {
processName: [
{ required: true, message: '请输入工序名称', trigger: 'blur' },
{ min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
{required: true, message: '请输入工序名称', trigger: 'blur'},
{min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur'}
],
workshop: [
{ required: true, message: '请输入车间名称', trigger: 'blur' }
{required: true, message: '请输入车间名称', trigger: 'blur'}
],
createBy: [
{ required: true, message: '请输入创建人姓名', trigger: 'blur' }
......@@ -250,11 +285,37 @@ export default {
this.getList()
},
methods: {
/** 查询角色列表 */
/** TODO: 查询列表 */
getList() {
this.loading = true
this.roleList = this.simulateProcessList
console.log(this.roleList)
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)
}
}
} 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 {
this.toList = this.simulateProcessList
}
// DONE: 此上为模拟数据的，根据不同条件去查询的过滤方法，可以删除！
this.processList = this.toList
this.total = this.toList.length
console.log(this.processList)
this.loading = false
},
// 取消按钮
......@@ -265,6 +326,7 @@ export default {
// 表单重置
reset() {
// TODO: 将模拟数据的空对象赋值给表单对象，达成清空填写表单的效果
this.toList = []
this.form = {
processName: '',
workshop: '',
......@@ -278,6 +340,7 @@ export default {
handleQuery() {
this.queryParams.pageNum = 1
this.getList()
console.log('this is queryParams', this.queryParams)
},
/** TODO: 重置按钮操作 */
resetQuery() {},
......@@ -399,14 +462,23 @@ export default {
margin-left: 15px;
}
}
.el-divider--vertical{
.el-divider--vertical {
height: 12em;
width: 4px;
}
.aboutSingleDetails{
.el-form-item{
.el-input >>> .el-input__inner {
//TODO: 这里是控制内容列表的样式
.processListBtns {
.el-button {
margin: 0 7px;
}
}
//TODO: readOnly里去删除el-input的边框样式
.aboutSingleDetails {
.el-form-item {
.el-input > > > .el-input__inner {
-webkit-appearance: none;
background-color: #FFF;
background-image: none;
......
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