Commit 59fc5a44 authored by CenXinYi's avatar CenXinYi

Merge branch 'project1' of http://gitlab.91isoft.com:90/yangshuo/template_vue into project1

parents 690a3319 cb73d0c1
......@@ -34,6 +34,17 @@ export function add(data) {
}
})
}
// 再利用
export function recycle(data) {
return request({
url: '/wbwarehouse/recycle',
method: 'post',
data,
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}
})
}
// 逻辑删除基础信息接口
export function deletedevice(id) {
return request({
......
<template>
<div class="app-container">
<!-- TODO: 基础工序管理-->
<el-form ref="queryForm" style="padding: 0 0 0 10px" :model="queryParams" :inline="true">
<el-form-item label="工序名称" prop="roleName">
<el-input
v-model="queryParams.processName"
placeholder="请输入工序名称"
clearable
:maxlength="30"
size="small"
style="width: 150px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="生产车间" prop="roleKey">
<el-input
v-model="queryParams.workshop"
placeholder="请输入生产车间"
clearable
size="small"
style="width: 150px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" size="small" icon="el-icon-search" @click="handleQuery">查询</el-button>
</el-form-item>
<div style="float: right">
<el-form-item>
<el-button style="padding: 8px 7px;" :type="typePrimary" :size="smallSize" :icon="addIcon" @click="handleAdd">
{{ addName }}
</el-button>
</el-form-item>
<el-form ref="form" :model="form" :rules="rule" label-width="80px">
<div class="info"><span class="title">再利用</span></div>
<el-row :gutter="40">
<el-col :span="12" style="padding-left: 10%;">
<el-form-item label="pn:" style="flex-basis: 50%;" prop="pn">
<el-input ref="input1" v-model="form.pn" placeholder="请输入pn" style="width: 400px" :maxlength="10" @keyup.enter.native="handelTab(1,$event)" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="lot:" style="flex-basis: 50%;" prop="lot">
<el-input ref="input2" v-model="form.lot" placeholder="请输入lot" :style="{ width: '400px', height: '30px' }" :maxlength="10" @keyup.enter.native="handelTab(2,$event)" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="40">
<el-col :span="12" style="padding-left: 10%;">
<el-form-item label="位置:" style="flex-basis: 50%;" prop="plocation">
<el-input ref="input3" v-model="form.plocation" placeholder="请输入位置" :style="{ width: '400px', height: '30px' }" :maxlength="10" @keyup.enter.native="handelTab(3,$event)" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="厚度:" style="flex-basis: 50%;" prop="phd">
<el-input ref="input4" v-model="form.phd" placeholder="请输入厚度" :style="{ width: '400px', height: '30px' }" :maxlength="10" @keyup.enter.native="handelTab(4,$event)" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="40">
<el-col :span="12" style="padding-left: 10%;">
<el-form-item label="psm:" style="flex-basis: 50%;" prop="psm">
<el-input ref="input5" v-model="form.psm" placeholder="请输入psm" :style="{ width: '400px', height: '30px' }" :maxlength="50" @keyup.enter.native="handelTab(5,$event)" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="pzl:" style="flex-basis: 50%;" prop="pzl">
<el-input ref="input6" v-model="form.pzl" placeholder="请输入pzl" :style="{ width: '400px', height: '30px' }" :maxlength="10" @keyup.enter.native="handelTab(6,$event)" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12" style="padding-left: 8.6%;">
<el-form-item label="prank:" style="flex-basis: 50%;" prop="prank">
<el-input ref="input7" v-model="form.prank" placeholder="请输入prank" :style="{ width: '400px', height: '30px' }" :maxlength="10" @keyup.enter.native="handelTab(7,$event)" />
</el-form-item>
</el-col>
</el-row>
<div class="button">
<el-button type="primary" @click="submitForm">提交</el-button>
</div>
</el-form>
<!-- TODO: 中间的分隔符号 -->
<div class="placeholder" />
<div class="main" style="padding:5px 10px">
<!-- TODO: 以下为基础工序管理列表 -->
<transition name="fade-transform" mode="out-in">
<component
:is="BaseTable"
:key="queryParams.pageNum"
:all-table-arguments="allTableArguments"
@handle-detail="handleDetail"
@handle-update="handleUpdate"
@handle-delete="handleDelete"
/>
</transition>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</div>
<!-- TODO: 添加或修改工序配置对话框 -->
<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-form-item>
<el-form-item label="工厂车间" prop="workshop">
<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>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="cancel">取 消</el-button>
<el-button type="primary" @click="submitForm">确 定</el-button>
</div>
</el-dialog>
<!-- TODO: 单项详情信息表单配置 -->
<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-form-item>
<el-form-item label="工厂车间:" prop="workshop">
<el-input v-model.trim="singleDetails.workshop" :readonly="isReadOnly" />
</el-form-item>
<el-form-item label="操作时间:" prop="createTime">
<!--
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">
<el-input v-model.trim="singleDetails.createBy" :readonly="isReadOnly" />
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
<script>
// TODO: 引入封装好的通用table组件
import BaseTable from '@/components/Table/BaseTable/index.vue'
import { recycle } from '@/api/magnagement'
// TODO: 通过json的形式,优化导入模拟数据,并增加模拟数据的数量
const simulateDataList = require('../basicProcessManagement/simulateDataList/simulateProcessList.json')
export default {
name: 'Role',
components: { BaseTable },
data() {
return {
// TODO: 动态按钮类型
typeParent: 'text',
typePrimary: 'primary',
typeSuccess: 'success',
// TODO: 动态按钮名称
nameParent: '删除',
resetName: '重置',
addName: '新增',
updataName: '修改',
// TODO: 动态按钮尺寸
size: 'mini',
smallSize: 'small',
// TODO: 图标名
delicon: 'el-icon-delete',
addIcon: 'el-icon-plus',
exportIcon: 'el-icon-download',
resetIcon: '',
// TODO: 控制只读
isReadOnly: true,
// TODO: 遮罩层 (加载进度条)
loading: true,
// TODO: 分页的总条数
total: 0,
// TODO: 是否显示弹出层
open: false,
// TODO: 是否显示弹出层(数据详情的)
openDetails: false,
/* 以下为所有table的基本数据 */
// TODO: 模拟测试数据的数据库
simulateProcessList: [],
// TODO: 模拟数据中转表 (为了解决模拟数据的查询问题)
toList: [],
// TODO: 工序表格数据
processList: [],
// TODO: 表单初始化专用参数
formReset: {
processName: '',
workshop: '',
flag: '1',
createTime: new Date(),
updataTime: new Date(),
createBy: ''
},
// TODO: 弹出框层标题
title: '',
// TODO: 表单校验参数
rules: {
processName: [
{ required: true, message: '请输入工序名称', trigger: 'blur' },
{ min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
],
workshop: [
{ required: true, message: '请输入车间名称', trigger: 'blur' }
],
createBy: [
{ required: true, message: '请输入创建人姓名', trigger: 'blur' }
]
},
// TODO: 新增+修改的 表单参数
form: {
processName: '',
workshop: '',
flag: '1',
remark: '',
createTime: new Date(),
updataTime: new Date(),
createBy: ''
},
// TODO: 表单里的单项详情的参数
singleDetails: {
processName: '',
workshop: '',
flag: '1',
createTime: new Date(),
updataTime: new Date(),
createBy: ''
pn: '',
lot: '',
plocation: '',
phd: '',
psm: '',
pzl: '',
prank: '',
flag: 1,
ptype: '',
pstatus: 0
},
// TODO: 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
processName: '',
workshop: ''
},
// TODO: 用来说明每一列的类型
columObj: {
// 选择框
selection: false,
// 选择框根据条件是否可选
selectable: (row, index) => {
if (row.switchs) {
return true
}
},
lazy: 'true',
// column列,columType(列类型,可选text(默认为普通文字模式),input(input可编辑框),switch(switch开关),image(图片),operation(操作按钮))
// prop(参数),label(列名),width(宽度),align(对齐方式),sortable(是否支持排序)
columnData: [{
text: true,
prop: 'processName',
label: '工序名称'
}, {
text: true,
prop: 'workshop',
label: '生产车间'
},
{
time: true,
prop: 'createTime',
label: '操作时间',
align: 'center'
},
{
text: true,
editRow: null,
prop: 'createBy',
label: '操作人',
sortable: false,
width: '210px'
},
// 如果为操作列,则需要填写需要的操作按钮,类型为Object。operation(操作类型,可选edit,delete,see),type(按钮样式,参考el—botton类型),label(按钮文字)icon(参考el-icon),color(字体颜色)
{
isOperation: true,
label: '操作',
width: '180px',
align: 'center',
sortable: false,
operation: [{
type: this.typeParent,
label: '详情',
icon: '',
color: '',
size: this.size,
buttonClick: this.handleDetail,
isShow: (row, $index) => {
return true
}
}, {
type: this.typeParent,
label: '修改',
icon: '',
color: '',
size: this.size,
buttonClick: this.handleUpdate,
isShow: (row, $index) => {
return true
}
}, {
type: this.typeParent,
label: '删除',
icon: '',
color: '',
size: this.size,
buttonClick: this.handleDelete,
isShow: (row, $index) => {
return true
}
}]
}
]
}
// DONE:
}
},
computed: {
BaseTable() {
return BaseTable
},
// TODO: 用来汇总Table组件所需要的全部数据并一次性传输给子组件
allTableArguments() {
return {
listName: '基础工序列表',
loading: this.loading,
processList: this.processList,
queryParams: this.queryParams,
columObj: this.columObj
historForm: {},
rule: {
pn: [{ required: true, message: '请输入pn', trigger: 'blur' }],
lot: [{ required: true, message: '请输入lot', trigger: 'blur' }],
plocation: [{ required: true, message: '请输入位置', trigger: 'blur' }],
phd: [{ pattern: /^\d+$/, message: '仅能输入数字', trigger: 'change' }],
psm: [{ pattern: /^\d+$/, message: '仅能输入数字', trigger: 'change' }],
pzl: [{ pattern: /^\d+$/, message: '仅能输入数字', trigger: 'change' }],
prank: [{ pattern: /^\d+$/, message: '仅能输入数字', trigger: 'change' }]
}
}
},
/** TODO: 路由离开前存储筛选条件*/
beforeRouteLeave(to, from, next) {
this.$store.dispatch('searchSave/searchParamsSet', {
path: this.$route.path,
param: {
...this.queryParams
}
mounted() {
this.$nextTick(() => {
this.$refs.input1.$refs.input.focus()
})
next()
},
created() {
// 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
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 {
// 测试用 console.log('this is simulate: ', this.simulateProcessList)
// TODO:
this.toList = [...this.simulateProcessList]
}
// DONE: 此上为模拟数据的,根据不同条件去查询的过滤方法,可以删除!
this.processList = [...this.toList]
this.total = this.toList.length
console.log(this.processList)
this.loading = false
},
// TODO: 表单的取消按钮
cancel() {
this.open = false
this.reset()
},
// TODO: 表单+数据列表+中转数据的重置
reset() {
// TODO: 将模拟数据的空对象赋值给表单对象,达成清空填写表单的效果
this.processList = null
this.toList = null
this.form = { ...this.formReset }
},
/** TODO: 查询按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1
this.getList()
console.log('this is queryParams', this.queryParams)
},
/** TODO: 重置按钮操作 */
resetQuery() {},
// 多选框选中数据
handleSelectionChange(selection) {},
/** TODO: 新增按钮操作 */
handleAdd() {
// TODO: 初始化新增对话框的状态
this.reset()
this.title = '添加工序'
this.open = !this.open
},
// TODO: 获取所选行详情信息操作
handleDetail(row, $index) {
this.singleDetails = this.formReset
this.singleDetails = row
this.title = '详情信息'
this.openDetails = !this.openDetails
focusNextInput(form) {
this.$nextTick(() => {
this.$refs[form].$refs.input.focus()
})
},
/** TODO: 修改按钮操作 */
handleUpdate(row, $index) {
this.form = { ...this.formReset }
this.title = '修改工序'
const updProcessName = row.processName
for (const pd of this.simulateProcessList) {
if (pd.processName === updProcessName) {
this.form = pd
}
handelTab(i, e) {
const that = this
if (!that.$refs['input' + i]) {
return
}
this.open = true
that.$nextTick(() => {
e.target.blur()
const index = i + 1
that.$refs['input' + index].focus()
})
},
/** TODO: 修改或增加list列表里的数据 */
submitForm: function() {
this.$refs['form'].validate(valid => {
if (valid) {
// TODO: 模拟测试数据的修改,可删除
for (const p of this.simulateProcessList) {
if (p.processName === this.form.processName) {
this.simulateProcessList = this.simulateProcessList.map(obj =>
obj.processName === this.form.processName ? this.form : obj
)
this.msgSuccess('修改成功')
this.reset()
this.getList()
this.open = !this.open
break
} else {
this.simulateProcessList.push(this.form)
this.msgSuccess('新增成功')
this.reset()
this.getList()
this.open = !this.open
return
}
// 提价时要调的接口
submitForm() {
this.$confirm('是否确认提交?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(res => {
this.$refs.form.validate((valid) => {
if (valid) {
recycle(this.form).then(res => {
console.log('res', res)
if (res.code === 200) {
this.$message.success('操作成功')
this.resetFrom()
} else if (res.code === null) {
this.$message.success(res.message)
}
})
}
}
})
})
},
resetFrom() {
this.form = {
pn: '',
lot: '',
plocation: '',
phd: '',
psm: '',
pzl: '',
prank: '',
flag: 1,
ptype: '',
pstatus: 0
}
this.$refs.form.clearValidate()
}
}
}
</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
.info{
height: 100px;
display: flex;
align-items: center;
justify-content: center;
.title{
color: #333;
font-weight: 700;
font-size: 16px;
}
}
.el-switch {
margin-left: 15px;
.button{
margin-top: 7%;
margin-left: 15.6%;
}
}
.el-divider--vertical {
height: 12em;
width: 4px;
}
//.ProcessTable{
// padding: 5px;
// margin: 0 auto;
// height: 495px;
//}
//TODO: readOnly里去删除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>
......@@ -13,7 +13,7 @@
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="name" prop="name">
<el-form-item label="dname" prop="dname">
<el-input
v-model="queryParams.dname"
placeholder="请输入名称"
......@@ -23,6 +23,16 @@
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="dno" prop="dno">
<el-input
v-model="queryParams.dno"
placeholder="请输入dno"
clearable
size="small"
style="width: 150px"
@keyup.enter.native="handleQuery"
/>
</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 style="padding: 8px 7px;" icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
......@@ -36,13 +46,13 @@
icon="el-icon-plus"
@click="handleAdd"
>新增</el-button>
<el-button
style="padding: 8px 7px;"
type="success"
size="small"
icon="el-icon-download"
@click="handleExport"
>导出</el-button>
<!-- <el-button-->
<!-- style="padding: 8px 7px;"-->
<!-- type="success"-->
<!-- size="small"-->
<!-- icon="el-icon-download"-->
<!-- @click="handleExport"-->
<!-- >导出</el-button>-->
</el-form-item>
</div>
</el-form>
......@@ -68,22 +78,22 @@
{{ scope.row.dno || '-' }}
</template>
</el-table-column>
<el-table-column label="remarks" prop="remarks" :show-overflow-tooltip="true">
<template slot-scope="scope">
{{ scope.row.remarks || '-' }}
</template>
</el-table-column>
<!-- <el-table-column label="remarks" prop="remarks" :show-overflow-tooltip="true">-->
<!-- <template slot-scope="scope">-->
<!-- {{ scope.row.remarks || '-' }}-->
<!-- </template>-->
<!-- </el-table-column>-->
<el-table-column label="操作人" prop="createName" :show-overflow-tooltip="true">
<template slot-scope="scope">
{{ scope.row.createName || '-' }}
</template>
</el-table-column>
<el-table-column label="操作时间" prop="createDate" :show-overflow-tooltip="true">
<el-table-column label="操作时间" prop="updateDate" :show-overflow-tooltip="true">
<template slot-scope="scope">
{{ parseTime(scope.row.createDate, '{y}-{m}-{d} {h}:{i}') || '-' }}
{{ parseTime(scope.row.updateDate, '{y}-{m}-{d} {h}:{i}') || '-' }}
</template>
</el-table-column>
<el-table-column label="操作">
<el-table-column label="操作" width="150px">
<template slot-scope="scope">
<el-button
size="mini"
......@@ -128,9 +138,9 @@
<el-form-item label="dno" prop="dno">
<el-input v-model.trim="form.dno" :maxlength="30" placeholder="请输入dno" />
</el-form-item>
<el-form-item label="remarks" prop="remarks">
<el-input v-model.trim="form.remarks" :maxlength="30" placeholder="请输入remarks" />
</el-form-item>
<!-- <el-form-item label="remarks" prop="remarks">-->
<!-- <el-input v-model.trim="form.remarks" :maxlength="30" placeholder="请输入remarks" />-->
<!-- </el-form-item>-->
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="cancel"> </el-button>
......@@ -154,7 +164,8 @@ export default {
form: {},
rules: {
pn: [{ required: true, message: '请输入pn', trigger: 'blur' }],
dname: [{ required: true, message: '请输入name', trigger: 'blur' }]
dname: [{ required: true, message: '请输入dname', trigger: 'blur' }],
dno: [{ required: true, message: '请输入dno', trigger: 'blur' }]
},
total: 0,
loading: false,
......@@ -162,7 +173,8 @@ export default {
page: 1,
rows: 10,
pn: '',
dname: ''
dname: '',
dno: ''
},
statusOptions: {},
basicinfoMationList: []
......@@ -232,7 +244,7 @@ export default {
getList() {
this.loading = true
queryList(this.queryParams).then(res => {
res.rows.createDate = parseTime(res.rows.createDate, '{y}-{m}-{d}')
res.rows.updateDate = parseTime(res.rows.updateDate, '{y}-{m}-{d}')
this.total = res.total
this.basicinfoMationList = res.rows
this.loading = false
......@@ -249,7 +261,8 @@ export default {
page: 1,
rows: 10,
pn: '',
dname: ''
dname: '',
dno: ''
}
this.getList()
},
......
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