Skip to content

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

格式优化 

Signed-off-by: 's avatarAiNoeLiYa <jzbcxy@gmail.com>
parent 9930433f
Hide whitespace changes
Inline Side-by-side
Showing with 604 additions and 90 deletions
src/views/processManagement/basicProcessManagement/componets/processTable.vue 0 → 100644
View file @ 0088e221
<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 @ 0088e221
......@@ -37,69 +37,37 @@
<div class="placeholder" />
<!-- TODO: 中间的分隔符号 -->
<div style="padding:5px 10px">
<div class="main" style="padding:5px 10px">
<!-- TODO: 以下为基础工序管理列表 -->
<div class="mb12 font-small-bold">基础工序管理列表</div>
<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 || '-' }}
</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">
<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)">
{{ updataName }}
</el-button>
<el-button
size="mini"
type="text"
@click="handleDelete(scope.row)"
>删除
</el-button>
</div>
</template>
</el-table-column>
</el-table>
<div class="mb12 font-small-bold">基础工序列表</div>
<div class="ProcessTable">
<transition name="fade-transform" mode="out-in">
<component
:is="ProcessTable"
:key="queryParams.pageNum"
:query-params="queryParams"
:process-list="processList"
:n-index="nIndex"
@handle-detail="handleDetail"
@handle-update="handleUpdate"
@handle-delete="handleDelete"
/>
</transition>
</div>
<div class="Pagination">
<pagination
v-show="total>0"
:key="queryParams.pageNum"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</div>
</div>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- TODO: 添加或修改工序配置对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
......@@ -134,6 +102,7 @@
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">
......@@ -148,10 +117,14 @@
<script>
// TODO: 导入外部已经封装好的button组件
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 {
name: 'Role',
components: { Coolbutton },
components: { Coolbutton, ProcessTable },
data() {
return {
typeParent: 'text',
......@@ -178,7 +151,7 @@ export default {
// 总条数
total: 0,
// TODO: 工序表格数据
processList: [],
processList: null,
// TODO: 模拟数据中转表 (为了解决模拟数据的查询问题)
toList: [],
// 弹出层标题
......@@ -232,24 +205,7 @@ 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: [],
// TODO: 表单校验
rules: {
......@@ -267,6 +223,11 @@ export default {
deptOptions: []
}
},
computed: {
ProcessTable() {
return ProcessTable
}
},
/** 路由离开前存储筛选条件*/
beforeRouteLeave(to, from, next) {
this.$store.dispatch('searchSave/searchParamsSet', {
......@@ -283,9 +244,21 @@ export default {
const param = JSON.parse(searchParams[path]) // 保留着的查询条件
this.queryParams = { ...param }
}
// TODO: 获取大量模拟数据！ require用于将 JSON 数据转换为 JavaScript 对象数组
// 测试用 console.log('this is json', simulateDataList)
this.simulateProcessList = simulateDataList
this.getList()
},
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: 查询列表 */
getList() {
this.loading = true
......@@ -310,11 +283,13 @@ export default {
}
}
} else {
this.toList = this.simulateProcessList
// 测试用 console.log('this is simulate: ', this.simulateProcessList)
// TODO:
this.toList = [...this.simulateProcessList]
}
// DONE: 此上为模拟数据的，根据不同条件去查询的过滤方法，可以删除！
this.processList = this.toList
this.processList = [...this.toList]
this.total = this.toList.length
console.log(this.processList)
this.loading = false
......@@ -327,7 +302,8 @@ export default {
// 表单重置
reset() {
// TODO: 将模拟数据的空对象赋值给表单对象，达成清空填写表单的效果
this.toList = []
this.processList = null
this.toList = null
this.form = {
processName: '',
workshop: '',
......@@ -469,11 +445,10 @@ export default {
width: 4px;
}
//TODO: 这里是控制内容列表的样式
.processListBtns {
.el-button {
margin: 0 7px;
}
.ProcessTable{
padding: 5px;
margin: 0 auto;
height: 495px;
}
//TODO: readOnly里去删除el-input的边框样式
......@@ -488,8 +463,6 @@ export default {
width: 100%;
}
}
}
</style>
src/views/processManagement/basicProcessManagement/simulateDataList/simulateProcessList.json 0 → 100644
View file @ 0088e221
[
{
"processName": "打磨",
"workshop": "车间1",
"flag": 1,
"createTime": "2023-07-25T12:00:00.000Z",
"updataTime": "2023-07-25T12:00:00.000Z",
"createBy": "张三"
},
{
"processName": "焊接",
"workshop": "车间2",
"flag": 2,
"createTime": "2023-07-25T12:00:00.000Z",
"updataTime": "2023-07-25T12:00:00.000Z",
"createBy": "李四"
},
{
"processName": "组装",
"workshop": "车间3",
"flag": 3,
"createTime": "2023-07-25T12:00:00.000Z",
"updataTime": "2023-07-25T12:00:00.000Z",
"createBy": "王五"
},
{
"processName": "涂装",
"workshop": "车间1",
"flag": 1,
"createTime": "2023-07-25T12:00:00.000Z",
"updataTime": "2023-07-25T12:00:00.000Z",
"createBy": "赵六"
},
{
"processName": "包装",
"workshop": "车间4",
"flag": 2,
"createTime": "2023-07-25T12:00:00.000Z",
"updataTime": "2023-07-25T12:00:00.000Z",
"createBy": "钱七"
},
{
"processName": "质检",
"workshop": "车间2",
"flag": 3,
"createTime": "2023-07-25T12:00:00.000Z",
"updataTime": "2023-07-25T12:00:00.000Z",
"createBy": "孙八"
},
{
"processName": "喷漆",
"workshop": "车间3",
"flag": 1,
"createTime": "2023-07-25T12:00:00.000Z",
"updataTime": "2023-07-25T12:00:00.000Z",
"createBy": "刘九"
},
{
"processName": "检修",
"workshop": "车间4",
"flag": 2,
"createTime": "2023-07-25T12:00:00.000Z",
"updataTime": "2023-07-25T12:00:00.000Z",
"createBy": "周十"
},
{
"processName": "组装",
"workshop": "车间1",
"flag": 3,
"createTime": "2023-07-25T12:00:00.000Z",
"updataTime": "2023-07-25T12:00:00.000Z",
"createBy": "张三"
},
{
"processName": "打磨",
"workshop": "车间2",
"flag": 1,
"createTime": "2023-07-25T12:00:00.000Z",
"updataTime": "2023-07-25T12:00:00.000Z",
"createBy": "李四"
},
{
"processName": "焊接",
"workshop": "车间3",
"flag": 2,
"createTime": "2023-07-25T12:00:00.000Z",
"updataTime": "2023-07-25T12:00:00.000Z",
"createBy": "王五"
},
{
"processName": "涂装",
"workshop": "车间4",
"flag": 3,
"createTime": "2023-07-25T12:00:00.000Z",
"updataTime": "2023-07-25T12:00:00.000Z",
"createBy": "赵六"
},
{
"processName": "包装",
"workshop": "车间1",
"flag": 1,
"createTime": "2023-07-25T12:00:00.000Z",
"updataTime": "2023-07-25T12:00:00.000Z",
"createBy": "钱七"
},
{
"processName": "质检",
"workshop": "车间2",
"flag": 2,
"createTime": "2023-07-25T12:00:00.000Z",
"updataTime": "2023-07-25T12:00:00.000Z",
"createBy": "孙八"
},
{
"processName": "喷漆",
"workshop": "车间3",
"flag": 3,
"createTime": "2023-07-25T12:00:00.000Z",
"updataTime": "2023-07-25T12:00:00.000Z",
"createBy": "刘九"
},
{
"processName": "检修",
"workshop": "车间4",
"flag": 1,
"createTime": "2023-07-25T12:00:00.000Z",
"updataTime": "2023-07-25T12:00:00.000Z",
"createBy": "周十"
},
{
"processName": "喷漆",
"workshop": "车间3",
"flag": 3,
"createTime": "2023-07-25T12:00:00.000Z",
"updataTime": "2023-07-25T12:00:00.000Z",
"createBy": "刘九"
},
{
"processName": "检修",
"workshop": "车间4",
"flag": 1,
"createTime": "2023-07-25T12:00:00.000Z",
"updataTime": "2023-07-25T12:00:00.000Z",
"createBy": "周十"
},
{
"processName": "组装",
"workshop": "车间1",
"flag": 2,
"createTime": "2023-07-25T12:00:00.000Z",
"updataTime": "2023-07-25T12:00:00.000Z",
"createBy": "李四"
},
{
"processName": "包装",
"workshop": "车间2",
"flag": 1,
"createTime": "2023-07-25T12:00:00.000Z",
"updataTime": "2023-07-25T12:00:00.000Z",
"createBy": "王五"
},
{
"processName": "焊接",
"workshop": "车间3",
"flag": 2,
"createTime": "2023-07-25T12:00:00.000Z",
"updataTime": "2023-07-25T12:00:00.000Z",
"createBy": "张三"
},
{
"processName": "装配",
"workshop": "车间1",
"flag": 3,
"createTime": "2023-07-25T12:00:00.000Z",
"updataTime": "2023-07-25T12:00:00.000Z",
"createBy": "陈二"
},
{
"processName": "打磨",
"workshop": "车间4",
"flag": 2,
"createTime": "2023-07-25T12:00:00.000Z",
"updataTime": "2023-07-25T12:00:00.000Z",
"createBy": "杨六"
},
{
"processName": "检验",
"workshop": "车间2",
"flag": 3,
"createTime": "2023-07-25T12:00:00.000Z",
"updataTime": "2023-07-25T12:00:00.000Z",
"createBy": "赵七"
},
{
"processName": "涂层",
"workshop": "车间3",
"flag": 1,
"createTime": "2023-07-25T12:00:00.000Z",
"updataTime": "2023-07-25T12:00:00.000Z",
"createBy": "吴八"
},
{
"processName": "质量控制",
"workshop": "车间1",
"flag": 2,
"createTime": "2023-07-25T12:00:00.000Z",
"updataTime": "2023-07-25T12:00:00.000Z",
"createBy": "孙九"
},
{
"processName": "喷涂",
"workshop": "车间4",
"flag": 3,
"createTime": "2023-07-25T12:00:00.000Z",
"updataTime": "2023-07-25T12:00:00.000Z",
"createBy": "刘十"
},
{
"processName": "装箱",
"workshop": "车间2",
"flag": 1,
"createTime": "2023-07-25T12:00:00.000Z",
"updataTime": "2023-07-25T12:00:00.000Z",
"createBy": "周一"
},
{
"processName": "组织调度",
"workshop": "车间3",
"flag": 2,
"createTime": "2023-07-25T12:00:00.000Z",
"updataTime": "2023-07-25T12:00:00.000Z",
"createBy": "李二"
},
{
"processName": "精确测量",
"workshop": "车间1",
"flag": 3,
"createTime": "2023-07-25T12:00:00.000Z",
"updataTime": "2023-07-25T12:00:00.000Z",
"createBy": "王三"
},
{
"processName": "抛光",
"workshop": "车间4",
"flag": 2,
"createTime": "2023-07-25T12:00:00.000Z",
"updataTime": "2023-07-25T12:00:00.000Z",
"createBy": "张四"
},
{
"processName": "品质检查",
"workshop": "车间2",
"flag": 3,
"createTime": "2023-07-25T12:00:00.000Z",
"updataTime": "2023-07-25T12:00:00.000Z",
"createBy": "赵五"
},
{
"processName": "喷塑",
"workshop": "车间3",
"flag": 1,
"createTime": "2023-07-25T12:00:00.000Z",
"updataTime": "2023-07-25T12:00:00.000Z",
"createBy": "吴六"
},
{
"processName": "装配调试",
"workshop": "车间1",
"flag": 2,
"createTime": "2023-07-25T12:00:00.000Z",
"updataTime": "2023-07-25T12:00:00.000Z",
"createBy": "孙七"
},
{
"processName": "清洗",
"workshop": "车间4",
"flag": 3,
"createTime": "2023-07-25T12:00:00.000Z",
"updataTime": "2023-07-25T12:00:00.000Z",
"createBy": "刘八"
},
{
"processName": "包装检验",
"workshop": "车间2",
"flag": 1,
"createTime": "2023-07-25T12:00:00.000Z",
"updataTime": "2023-07-25T12:00:00.000Z",
"createBy": "周九"
},
{
"processName": "组装检查",
"workshop": "车间3",
"flag": 2,
"createTime": "2023-07-25T12:00:00.000Z",
"updataTime": "2023-07-25T12:00:00.000Z",
"createBy": "李十"
},
{
"processName": "涂装调整",
"workshop": "车间1",
"flag": 3,
"createTime": "2023-07-25T12:00:00.000Z",
"updataTime": "2023-07-25T12:00:00.000Z",
"createBy": "王一"
},
{
"processName": "打磨抛光",
"workshop": "车间4",
"flag": 2,
"createTime": "2023-07-25T12:00:00.000Z",
"updataTime": "2023-07-25T12:00:00.000Z",
"createBy": "张二"
},
{
"processName": "品质审查",
"workshop": "车间2",
"flag": 3,
"createTime": "2023-07-25T12:00:00.000Z",
"updataTime": "2023-07-25T12:00:00.000Z",
"createBy": "赵三"
},
{
"processName": "打包",
"workshop": "车间3",
"flag": 1,
"createTime": "2023-07-25T12:00:00.000Z",
"updataTime": "2023-07-25T12:00:00.000Z",
"createBy": "吴四"
},
{
"processName": "总装",
"workshop": "车间1",
"flag": 2,
"createTime": "2023-07-25T12:00:00.000Z",
"updataTime": "2023-07-25T12:00:00.000Z",
"createBy": "孙五"
},
{
"processName": "喷漆调试",
"workshop": "车间4",
"flag": 3,
"createTime": "2023-07-25T12:00:00.000Z",
"updataTime": "2023-07-25T12:00:00.000Z",
"createBy": "刘六"
},
{
"processName": "组织物料",
"workshop": "车间2",
"flag": 1,
"createTime": "2023-07-25T12:00:00.000Z",
"updataTime": "2023-07-25T12:00:00.000Z",
"createBy": "周七"
},
{
"processName": "质量测试",
"workshop": "车间3",
"flag": 2,
"createTime": "2023-07-25T12:00:00.000Z",
"updataTime": "2023-07-25T12:00:00.000Z",
"createBy": "李八"
},
{
"processName": "喷漆检验",
"workshop": "车间1",
"flag": 3,
"createTime": "2023-07-25T12:00:00.000Z",
"updataTime": "2023-07-25T12:00:00.000Z",
"createBy": "王九"
},
{
"processName": "焊接调整",
"workshop": "车间4",
"flag": 2,
"createTime": "2023-07-25T12:00:00.000Z",
"updataTime": "2023-07-25T12:00:00.000Z",
"createBy": "张十"
},
{
"processName": "产品检查",
"workshop": "车间2",
"flag": 3,
"createTime": "2023-07-25T12:00:00.000Z",
"updataTime": "2023-07-25T12:00:00.000Z",
"createBy": "赵一"
},
{
"processName": "喷涂调试",
"workshop": "车间3",
"flag": 1,
"createTime": "2023-07-25T12:00:00.000Z",
"updataTime": "2023-07-25T12:00:00.000Z",
"createBy": "吴二"
},
{
"processName": "装配测试",
"workshop": "车间1",
"flag": 2,
"createTime": "2023-07-25T12:00:00.000Z",
"updataTime": "2023-07-25T12:00:00.000Z",
"createBy": "孙三"
},
{
"processName": "研磨",
"workshop": "车间4",
"flag": 3,
"createTime": "2023-07-25T12:00:00.000Z",
"updataTime": "2023-07-25T12:00:00.000Z",
"createBy": "刘四"
},
{
"processName": "装配调整",
"workshop": "车间2",
"flag": 1,
"createTime": "2023-07-25T12:00:00.000Z",
"updataTime": "2023-07-25T12:00:00.000Z",
"createBy": "周五"
}
]
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