Skip to content

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

1.优化了工序管理数据，并且封装了表单组件 

2.增加了表格的分页功能
3.为表格动画增添了过渡的效果
4.引入了更多的模拟数据并且将模拟数据改为外部导入
Signed-off-by: 's avatarAiNoeLiYa <jzbcxy@gmail.com>
parent 99e2f6ec
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 707 additions and 186 deletions
src/components/Pagination/index.vue
View file @ 709d36cb
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
</template> </template>
<script> <script>
import { scrollTo } from '@/utils/scroll-to' import {scrollTo} from '@/utils/scroll-to'
export default { export default {
name: 'Pagination', name: 'Pagination',
......
src/views/equipment/application.vue
View file @ 709d36cb
...@@ -87,8 +87,8 @@ ...@@ -87,8 +87,8 @@
<el-pagination <el-pagination
background background
layout="prev, pager, next" layout="prev, pager, next"
:total="1000"> :total="1000"
</el-pagination> />
<!-- TODO: 添加或修改设备配置对话框 --> <!-- TODO: 添加或修改设备配置对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body> <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
...@@ -154,6 +154,7 @@ ...@@ -154,6 +154,7 @@
<script> <script>
// TODO: 导入外部已经封装好的button组件 // TODO: 导入外部已经封装好的button组件
import Coolbutton from '@/components/coolbutton' import Coolbutton from '@/components/coolbutton'
export default { export default {
name: 'Role', name: 'Role',
components: { Coolbutton }, components: { Coolbutton },
...@@ -165,7 +166,7 @@ export default { ...@@ -165,7 +166,7 @@ export default {
nameParent: '删除', nameParent: '删除',
resetName: '重置', resetName: '重置',
addName: '新增', addName: '新增',
application:'申请领用', application: '申请领用',
updataName: '修改', updataName: '修改',
size: 'mini', size: 'mini',
smallSize: 'small', smallSize: 'small',
...@@ -217,9 +218,9 @@ export default { ...@@ -217,9 +218,9 @@ export default {
deviceName: '', deviceName: '',
deviceId: '', deviceId: '',
LOT: '', LOT: '',
location:'', location: '',
ply:'', ply: '',
state:'', state: '',
flag: '1', flag: '1',
remark: '', remark: '',
createTime: new Date(), createTime: new Date(),
...@@ -231,10 +232,10 @@ export default { ...@@ -231,10 +232,10 @@ export default {
deviceName: '', deviceName: '',
deviceId: '', deviceId: '',
LOT: '', LOT: '',
location:'', location: '',
ply:'', ply: '',
state:'', state: '',
state:'', state: '',
flag: '1', flag: '1',
createTime: new Date(), createTime: new Date(),
updataTime: new Date(), updataTime: new Date(),
...@@ -245,38 +246,38 @@ export default { ...@@ -245,38 +246,38 @@ export default {
deviceName: '', deviceName: '',
deviceId: '', deviceId: '',
LOT: '', LOT: '',
location:'', location: '',
ply:'', ply: '',
state:'', state: '',
flag: '1', flag: '1',
createTime: new Date(), createTime: new Date(),
updataTime: new Date(), updataTime: new Date(),
createBy: '' createBy: ''
}, },
// TODO: 模拟测试数据 // TODO: 模拟测试数据
simulateDeviceList: [{ simulateDeviceList: [{
deviceName: '设备1', deviceId: '0001', flag: 1, LOT: '0001', location:'XXX', ply:'YYY', createTime: new Date(), updataTime: new Date(), createBy: 'admin',state:'驳回', 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: '设备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: '设备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: '设备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: '设备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: '设备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: '设备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: '设备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: '设备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:'通过', deviceName: '设备10', deviceId: '00010', flag: 2, LOT: '0010', location: 'XXX', ply: 'YYY', createTime: new Date(), updataTime: new Date(), createBy: 'admin', state: '通过'
}, }
], ],
// 表单校验 // 表单校验
rules: { rules: {
...@@ -333,9 +334,9 @@ export default { ...@@ -333,9 +334,9 @@ export default {
this.form = { this.form = {
deviceName: '', deviceName: '',
deviceId: '', deviceId: '',
location:'', location: '',
ply:'', ply: '',
state:'', state: '',
flag: '1', flag: '1',
createTime: new Date(), createTime: new Date(),
updataTime: new Date(), updataTime: new Date(),
......
src/views/equipment/draw.vue
View file @ 709d36cb
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
@keyup.enter.native="handleQuery" @keyup.enter.native="handleQuery"
/> />
</el-form-item> </el-form-item>
<el-form-item label="LOT" > <el-form-item label="LOT">
<el-input <el-input
v-model="queryParams.LOT" v-model="queryParams.LOT"
placeholder="请输入LOT" placeholder="请输入LOT"
...@@ -98,10 +98,14 @@ ...@@ -98,10 +98,14 @@
<el-button v-if="scope.row.state !== '驳回'" type="typeParent" :size="size" @click="handleDetail(scope.row)"> <el-button v-if="scope.row.state !== '驳回'" type="typeParent" :size="size" @click="handleDetail(scope.row)">
详情 详情
</el-button> </el-button>
<el-button v-if="scope.row.state !== ' '" type="typeParent" :size="size" @click="handleUpdate(scope.row)"> <el-button v-if="scope.row.state !== ' '" type="typeParent" :size="size" @click="handleUpdate(scope.row)">
{{ updataName }} {{ updataName }}
</el-button> </el-button>
<el-button v-if="scope.row.state !== ' '" type="typeParent" :size="size" @click="handleDelete(scope.row)" <el-button
v-if="scope.row.state !== ' '"
type="typeParent"
:size="size"
@click="handleDelete(scope.row)"
>删除</el-button> >删除</el-button>
</template> </template>
</el-table-column> </el-table-column>
...@@ -110,8 +114,8 @@ ...@@ -110,8 +114,8 @@
<el-pagination <el-pagination
background background
layout="prev, pager, next" layout="prev, pager, next"
:total="1000"> :total="1000"
</el-pagination> />
<!-- TODO: 添加或修改设备配置对话框 --> <!-- TODO: 添加或修改设备配置对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body> <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
...@@ -177,6 +181,7 @@ ...@@ -177,6 +181,7 @@
<script> <script>
// TODO: 导入外部已经封装好的button组件 // TODO: 导入外部已经封装好的button组件
import Coolbutton from '@/components/coolbutton' import Coolbutton from '@/components/coolbutton'
export default { export default {
name: 'Role', name: 'Role',
components: { Coolbutton }, components: { Coolbutton },
...@@ -188,7 +193,7 @@ export default { ...@@ -188,7 +193,7 @@ export default {
nameParent: '删除', nameParent: '删除',
resetName: '重置', resetName: '重置',
addName: '新增', addName: '新增',
application:'申请领用', application: '申请领用',
updataName: '修改', updataName: '修改',
size: 'mini', size: 'mini',
smallSize: 'small', smallSize: 'small',
...@@ -240,9 +245,9 @@ export default { ...@@ -240,9 +245,9 @@ export default {
deviceName: '', deviceName: '',
deviceId: '', deviceId: '',
LOT: '', LOT: '',
location:'', location: '',
ply:'', ply: '',
state:'', state: '',
flag: '1', flag: '1',
remark: '', remark: '',
createTime: new Date(), createTime: new Date(),
...@@ -254,10 +259,10 @@ export default { ...@@ -254,10 +259,10 @@ export default {
deviceName: '', deviceName: '',
deviceId: '', deviceId: '',
LOT: '', LOT: '',
location:'', location: '',
ply:'', ply: '',
state:'', state: '',
state:'', state: '',
flag: '1', flag: '1',
createTime: new Date(), createTime: new Date(),
updataTime: new Date(), updataTime: new Date(),
...@@ -268,38 +273,38 @@ export default { ...@@ -268,38 +273,38 @@ export default {
deviceName: '', deviceName: '',
deviceId: '', deviceId: '',
LOT: '', LOT: '',
location:'', location: '',
ply:'', ply: '',
state:'', state: '',
flag: '1', flag: '1',
createTime: new Date(), createTime: new Date(),
updataTime: new Date(), updataTime: new Date(),
createBy: '' createBy: ''
}, },
// TODO: 模拟测试数据 // TODO: 模拟测试数据
simulateDeviceList: [{ simulateDeviceList: [{
deviceName: '设备1', deviceId: '0001', flag: 1, LOT: '0001', location:'XXX', ply:'YYY', createTime: new Date(), updataTime: new Date(), createBy: 'admin',state:'驳回', 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: '设备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: '设备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: '设备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: '设备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: '设备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: '设备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: '设备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: '设备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:'通过', deviceName: '设备10', deviceId: '00010', flag: 2, LOT: '0010', location: 'XXX', ply: 'YYY', createTime: new Date(), updataTime: new Date(), createBy: 'admin', state: '通过'
}, }
], ],
// 表单校验 // 表单校验
rules: { rules: {
...@@ -356,9 +361,9 @@ export default { ...@@ -356,9 +361,9 @@ export default {
this.form = { this.form = {
deviceName: '', deviceName: '',
deviceId: '', deviceId: '',
location:'', location: '',
ply:'', ply: '',
state:'', state: '',
flag: '1', flag: '1',
createTime: new Date(), createTime: new Date(),
updataTime: new Date(), updataTime: new Date(),
......
src/views/equipment/income.vue
View file @ 709d36cb
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
@keyup.enter.native="handleQuery" @keyup.enter.native="handleQuery"
/> />
</el-form-item> </el-form-item>
<el-form-item label="LOT" > <el-form-item label="LOT">
<el-input <el-input
v-model="queryParams.LOT" v-model="queryParams.LOT"
placeholder="请输入LOT" placeholder="请输入LOT"
...@@ -149,6 +149,7 @@ ...@@ -149,6 +149,7 @@
<script> <script>
// TODO: 导入外部已经封装好的button组件 // TODO: 导入外部已经封装好的button组件
import Coolbutton from '@/components/coolbutton' import Coolbutton from '@/components/coolbutton'
export default { export default {
name: 'Role', name: 'Role',
components: { Coolbutton }, components: { Coolbutton },
...@@ -160,7 +161,7 @@ export default { ...@@ -160,7 +161,7 @@ export default {
nameParent: '删除', nameParent: '删除',
resetName: '重置', resetName: '重置',
addName: '新增', addName: '新增',
application:'申请领用', application: '申请领用',
updataName: '修改', updataName: '修改',
size: 'mini', size: 'mini',
smallSize: 'small', smallSize: 'small',
...@@ -236,11 +237,11 @@ export default { ...@@ -236,11 +237,11 @@ export default {
createBy: '' createBy: ''
}, },
// TODO: 模拟测试数据 // TODO: 模拟测试数据
simulateDeviceList: [{ simulateDeviceList: [{
deviceName: '挖掘机', deviceId: '0001', flag: 1, LOT: '0001', createTime: new Date(), updataTime: new Date(), createBy: '张三' deviceName: '挖掘机', deviceId: '0001', flag: 1, LOT: '0001', createTime: new Date(), updataTime: new Date(), createBy: '张三'
}, { }, {
deviceName: '汽车', deviceId: '车间2', flag: 2, LOT: '0002', createTime: new Date(), updataTime: new Date(), createBy: '李四' deviceName: '汽车', deviceId: '车间2', flag: 2, LOT: '0002', createTime: new Date(), updataTime: new Date(), createBy: '李四'
}], }],
// 表单校验 // 表单校验
rules: { rules: {
......
src/views/equipment/statistic.vue
View file @ 709d36cb
...@@ -43,13 +43,13 @@ ...@@ -43,13 +43,13 @@
<div class="Role" style="width: 100%; height: 400px; display: flex; padding-left: 100px"> <div class="Role" style="width: 100%; height: 400px; display: flex; padding-left: 100px">
<!--左边两个图--> <!--左边两个图-->
<div class="left-charts" style="width: 100%; height: 100%; display: flex; flex-direction: column;"> <div class="left-charts" style="width: 100%; height: 100%; display: flex; flex-direction: column;">
<div id="myChart1" style="width: 50%; height: 50%;"></div> <div id="myChart1" style="width: 50%; height: 50%;" />
<div id="myChart2" style="width: 50%; height: 50%;"></div> <div id="myChart2" style="width: 50%; height: 50%;" />
</div> </div>
<!--右边两个图--> <!--右边两个图-->
<div class="right-charts" style="width: 100%; height: 100%; display: flex; flex-direction: column;"> <div class="right-charts" style="width: 100%; height: 100%; display: flex; flex-direction: column;">
<div id="myChart5" style="width: 50%; height: 50%;"></div> <div id="myChart5" style="width: 50%; height: 50%;" />
<div id="myChart3" style="width: 50%; height: 50%;"></div> <div id="myChart3" style="width: 50%; height: 50%;" />
</div> </div>
</div> </div>
</div> </div>
...@@ -57,17 +57,17 @@ ...@@ -57,17 +57,17 @@
<script> <script>
import { import {
listRole,
getRole,
delRole,
addRole, addRole,
updateRole, changeRoleStatus,
exportRole,
dataScope, dataScope,
changeRoleStatus delRole,
exportRole,
getRole,
listRole,
updateRole
} from '@/api/system/role' } from '@/api/system/role'
import { roleMenuTreeselectMC, treeselect as menuTreeselect, roleMenuTreeselect } from '@/api/system/menu' import {roleMenuTreeselect, roleMenuTreeselectMC, treeselect as menuTreeselect} from '@/api/system/menu'
import { treeselect as deptTreeselect, roleDeptTreeselect } from '@/api/system/dept' import {roleDeptTreeselect, treeselect as deptTreeselect} from '@/api/system/dept'
// import { getRolesByInsId } from '../../../api/businessManage/template' // import { getRolesByInsId } from '../../../api/businessManage/template'
import * as echarts from 'echarts' import * as echarts from 'echarts'
......
src/views/processManagement/basicProcessManagement/componets/processTable.vue 0 → 100644
View file @ 709d36cb
<template>
<div>
<el-table
v-loading="loading"
class="processList"
border
:data="processList.slice((queryParams.pageNum - 1) * queryParams.pageSize, queryParams.pageNum * queryParams.pageSize)"
height="495"
style="width: 100%"
@selection-change="handleSelectionChange"
>
<el-table-column type="index" label="序号" width="50" :index="nIndex" />
<el-table-column label="工序名称" prop="processName" :show-overflow-tooltip="true">
<template slot-scope="scope">
{{ scope.row.processName || '-' }}
</template>
</el-table-column>
<el-table-column label="生产车间" prop="workshop">
<template slot-scope="scope">
{{ scope.row.workshop || '-' }}
</template>
</el-table-column>
<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" width="210px">
<template slot-scope="scope">
{{ scope.row.createBy || '-' }}
</template>
</el-table-column>
<el-table-column
label="操作"
class-name="small-padding fixed-width"
width="180px"
>
<template slot-scope="scope">
<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)">
修改
</el-button>
<el-button :type="typeParent" :size="size" @click="handleDelete(scope.row)">
删除
</el-button>
</div>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: 'ProcessTable',
props: {
processList: {
required: true,
type: Array,
default: null
},
queryParams: {
required: true,
type: Object,
default: null
},
nIndex: {
required: true,
type: Number,
default: null
}
},
data() {
return {
typeParent: 'text',
size: 'mini'
}
},
methods: {
handleDetail(row) {
this.$emit('handle-detail', row)
},
handleUpdate(row) {
this.$emit('handle-update', row)
},
handleDelete(row) {
this.$emit('handle-delete', row)
}
}
}
</script>
<style lang="scss" scoped>
//TODO: 这里是控制内容列表的样式
.processListBtns {
.el-button {
margin: 0 7px;
}
}
// TODO: 滚动条样式 此为设置背景颜色
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
width: 0;
background-color: white;
}
// 设置宽度
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
width: 3px;
opacity: 0.5;
}
// 此为设置滚动条内部颜色
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
border-radius: 15px;
background-color: #b3b3b3;
}
</style>
src/views/processManagement/basicProcessManagement/index.vue
View file @ 709d36cb
...@@ -37,69 +37,37 @@ ...@@ -37,69 +37,37 @@
<div class="placeholder" /> <div class="placeholder" />
<!-- TODO: 中间的分隔符号 --> <!-- TODO: 中间的分隔符号 -->
<div style="padding:5px 10px"> <div class="main" style="padding:5px 10px">
<!-- TODO: 以下为基础工序管理列表 --> <!-- TODO: 以下为基础工序管理列表 -->
<div class="mb12 font-small-bold">基础工序管理列表</div> <div class="mb12 font-small-bold">基础工序列表</div>
<el-table
v-loading="loading" <div class="ProcessTable">
class="processList" <transition name="fade-transform" mode="out-in">
border <component
:data="processList" :is="ProcessTable"
@selection-change="handleSelectionChange" :key="queryParams.pageNum"
> :query-params="queryParams"
<el-table-column type="index" label="序号" width="50" /> :process-list="processList"
<el-table-column label="工序名称" prop="processName" :show-overflow-tooltip="true"> :n-index="nIndex"
<template slot-scope="scope"> @handle-detail="handleDetail"
{{ scope.row.processName || '-' }} @handle-update="handleUpdate"
</template> @handle-delete="handleDelete"
</el-table-column> />
<el-table-column label="生产车间" prop="workshop"> </transition>
<template slot-scope="scope"> </div>
{{ scope.row.workshop || '-' }} <div class="Pagination">
</template> <pagination
</el-table-column> v-show="total>0"
<el-table-column label="操作时间" :show-overflow-tooltip="true" align="center" prop="createTime"> :key="queryParams.pageNum"
<template slot-scope="scope"> :total="total"
<span>{{ scope.row.createTime | transformDateByFormat('YYYY-MM-DD HH:mm') }}</span> :page.sync="queryParams.pageNum"
</template> :limit.sync="queryParams.pageSize"
</el-table-column> @pagination="getList"
<el-table-column label="操作人" prop="createBy"> />
<template slot-scope="scope"> </div>
{{ scope.row.createBy || '-' }}
</template>
</el-table-column>
<el-table-column
label="操作"
class-name="small-padding fixed-width"
width="180px"
>
<template slot-scope="scope">
<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>
</div> </div>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- TODO: 添加或修改工序配置对话框 --> <!-- TODO: 添加或修改工序配置对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body> <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
...@@ -134,6 +102,7 @@ ...@@ -134,6 +102,7 @@
TODO: el-input 里不能调用全局日期过滤器 transformDateByFormat('YYYY-MM-DD HH:mm') TODO: el-input 里不能调用全局日期过滤器 transformDateByFormat('YYYY-MM-DD HH:mm')
<el-input v-model.trim="singleDetails.createTime" :readonly="isReadOnly" /> <el-input v-model.trim="singleDetails.createTime" :readonly="isReadOnly" />
--> -->
&nbsp;
{{ singleDetails.createTime | transformDateByFormat('YYYY-MM-DD HH:mm') }} {{ singleDetails.createTime | transformDateByFormat('YYYY-MM-DD HH:mm') }}
</el-form-item> </el-form-item>
<el-form-item label="操作人：" prop="createBy"> <el-form-item label="操作人：" prop="createBy">
...@@ -148,10 +117,14 @@ ...@@ -148,10 +117,14 @@
<script> <script>
// TODO: 导入外部已经封装好的button组件 // TODO: 导入外部已经封装好的button组件
import Coolbutton from '@/components/coolbutton' import Coolbutton from '@/components/coolbutton'
// TODO: 引入封装好的通用table组件
import ProcessTable from '@/views/processManagement/basicProcessManagement/componets/processTable.vue'
// TODO: 通过json的形式，优化导入模拟数据，并增加模拟数据的数量
const simulateDataList = require('../basicProcessManagement/simulateDataList/simulateProcessList.json')
export default { export default {
name: 'Role', name: 'Role',
components: { Coolbutton }, components: { Coolbutton, ProcessTable },
data() { data() {
return { return {
typeParent: 'text', typeParent: 'text',
...@@ -178,7 +151,7 @@ export default { ...@@ -178,7 +151,7 @@ export default {
// 总条数 // 总条数
total: 0, total: 0,
// TODO: 工序表格数据 // TODO: 工序表格数据
processList: [], processList: null,
// TODO: 模拟数据中转表 (为了解决模拟数据的查询问题) // TODO: 模拟数据中转表 (为了解决模拟数据的查询问题)
toList: [], toList: [],
// 弹出层标题 // 弹出层标题
...@@ -232,24 +205,7 @@ export default { ...@@ -232,24 +205,7 @@ export default {
createBy: '' createBy: ''
}, },
// TODO: 模拟测试数据 // TODO: 模拟测试数据
simulateProcessList: [ 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: 表单校验 // TODO: 表单校验
rules: { rules: {
...@@ -267,6 +223,11 @@ export default { ...@@ -267,6 +223,11 @@ export default {
deptOptions: [] deptOptions: []
} }
}, },
computed: {
ProcessTable() {
return ProcessTable
}
},
/** 路由离开前存储筛选条件*/ /** 路由离开前存储筛选条件*/
beforeRouteLeave(to, from, next) { beforeRouteLeave(to, from, next) {
this.$store.dispatch('searchSave/searchParamsSet', { this.$store.dispatch('searchSave/searchParamsSet', {
...@@ -283,9 +244,21 @@ export default { ...@@ -283,9 +244,21 @@ export default {
const param = JSON.parse(searchParams[path]) // 保留着的查询条件 const param = JSON.parse(searchParams[path]) // 保留着的查询条件
this.queryParams = { ...param } this.queryParams = { ...param }
} }
// TODO: 获取大量模拟数据！ require用于将 JSON 数据转换为 JavaScript 对象数组
// 测试用 console.log('this is json', simulateDataList)
this.simulateProcessList = simulateDataList
this.getList() this.getList()
}, },
methods: { 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: 查询列表 */ /** TODO: 查询列表 */
getList() { getList() {
this.loading = true this.loading = true
...@@ -310,11 +283,13 @@ export default { ...@@ -310,11 +283,13 @@ export default {
} }
} }
} else { } else {
this.toList = this.simulateProcessList // 测试用 console.log('this is simulate: ', this.simulateProcessList)
// TODO:
this.toList = [...this.simulateProcessList]
} }
// DONE: 此上为模拟数据的，根据不同条件去查询的过滤方法，可以删除！ // DONE: 此上为模拟数据的，根据不同条件去查询的过滤方法，可以删除！
this.processList = this.toList this.processList = [...this.toList]
this.total = this.toList.length this.total = this.toList.length
console.log(this.processList) console.log(this.processList)
this.loading = false this.loading = false
...@@ -327,7 +302,8 @@ export default { ...@@ -327,7 +302,8 @@ export default {
// 表单重置 // 表单重置
reset() { reset() {
// TODO: 将模拟数据的空对象赋值给表单对象，达成清空填写表单的效果 // TODO: 将模拟数据的空对象赋值给表单对象，达成清空填写表单的效果
this.toList = [] this.processList = null
this.toList = null
this.form = { this.form = {
processName: '', processName: '',
workshop: '', workshop: '',
...@@ -469,11 +445,10 @@ export default { ...@@ -469,11 +445,10 @@ export default {
width: 4px; width: 4px;
} }
//TODO: 这里是控制内容列表的样式 .ProcessTable{
.processListBtns { padding: 5px;
.el-button { margin: 0 auto;
margin: 0 7px; height: 495px;
}
} }
//TODO: readOnly里去删除el-input的边框样式 //TODO: readOnly里去删除el-input的边框样式
...@@ -488,8 +463,6 @@ export default { ...@@ -488,8 +463,6 @@ export default {
width: 100%; width: 100%;
} }
} }
} }
</style> </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