首页静态页面 #2

Merged
zwq merged 2 commits from zwq into master 2021-11-17 16:16:25 +08:00
3 changed files with 400 additions and 27 deletions

View File

@ -1,7 +1,237 @@
<!-- <template>
* @Author: zwq <div class="mod-config">
* @Date: 2021-11-15 15:18:18 <el-form :inline="true">
* @LastEditors: zwq <el-form-item>
* @LastEditTime: 2021-11-15 15:18:19 <el-radio v-model="processType" :label="0" border>复加工</el-radio>
* @Description: <el-radio v-model="processType" :label="1" border>追加</el-radio>
--> </el-form-item>
<el-form-item>
<el-button type="primary" @click="addOrUpdateHandle()">新增</el-button>
</el-form-item>
<el-form-item style="margin-left:8%">
任务起点位置 :
<el-button style="margin-left:10px" type="primary" @click="getPoint(0)">{{startBtnName}}</el-button>
</el-form-item>
<el-form-item style="margin-left:2%">
窑炉 :
<el-button style="margin-left:10px" type="primary" @click="getPoint(1)">{{kilnBtnName}}</el-button>
</el-form-item>
<el-form-item style="margin-left:10%">
<el-button type="primary" @click="submitTask()">提交任务</el-button>
</el-form-item>
</el-form>
<el-table
:data="dataList"
border
v-loading="dataListLoading"
style="width: 100%;">
<el-table-column
type="index"
header-align="center"
align="center"
label="序号"
width="50">
</el-table-column>
<el-table-column
prop="id"
header-align="center"
align="center"
width="80"
label="标识卡">
</el-table-column>
<el-table-column
prop="paramKey"
header-align="center"
align="center"
label="客户信息">
</el-table-column>
<el-table-column
prop="paramValue"
header-align="center"
align="center"
label="订单号">
</el-table-column>
<el-table-column
prop="remark"
header-align="center"
align="center"
label="产品名称">
</el-table-column>
<el-table-column
prop="card"
header-align="center"
align="center"
label="材料号牌">
</el-table-column>
<el-table-column
prop="number"
header-align="center"
align="center"
label="数量">
</el-table-column>
<el-table-column
prop="weight"
header-align="center"
align="center"
label="重量">
</el-table-column>
<el-table-column
prop="unit"
header-align="center"
align="center"
label="单位">
</el-table-column>
<el-table-column
fixed="right"
header-align="center"
align="center"
width="150"
label="操作">
<template slot-scope="scope">
<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
<el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="sizeChangeHandle"
@current-change="currentChangeHandle"
:current-page="pageIndex"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
:total="totalPage"
layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
<!-- 弹窗, 新增 / 修改 -->
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
<process-point v-if="processPointVisible" ref="processPoint" @refreshPoint="setPoint"></process-point>
</div>
</template>
<script>
import AddOrUpdate from './order-process-add'
import ProcessPoint from './order-process-point'
export default {
data () {
return {
startBtnName: '选择起点',
kilnBtnName: '选择窑炉',
dataList: [],
processType: 1,
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false,
addOrUpdateVisible: false,
processPointVisible: false
}
},
components: {
AddOrUpdate,
ProcessPoint
},
activated () {
this.getDataList()
},
methods: {
//
getDataList () {
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/sys/config/list'),
method: 'get',
params: this.$http.adornParams({
'page': this.pageIndex,
'limit': this.pageSize
})
}).then(({data}) => {
if (data && data.code === 0) {
this.dataList = data.page.list
this.totalPage = data.page.totalCount
} else {
this.dataList = []
this.totalPage = 0
}
this.dataListLoading = false
})
},
//
sizeChangeHandle (val) {
this.pageSize = val
this.pageIndex = 1
this.getDataList()
},
//
currentChangeHandle (val) {
this.pageIndex = val
this.getDataList()
},
// /
addOrUpdateHandle (id) {
this.addOrUpdateVisible = true
this.$nextTick(() => {
this.$refs.addOrUpdate.init(id)
})
},
//
getPoint (pointType) {
this.processPointVisible = true
this.$nextTick(() => {
this.$refs.processPoint.init(pointType)
})
},
setPoint (count, pointType) {
if (!pointType) {
this.startBtnName = count
} else {
this.kilnBtnName = count
}
},
submitTask () {
if (this.dataList.length === 0) {
this.$message({
message: '任务为空,请新增一条托盘信息',
type: 'warning'
})
} else if (this.startBtnName === '选择起点') {
this.$message({
message: '请选择任务起点',
type: 'warning'
})
} else if (this.kilnBtnName === '选择窑炉') {
this.$message({
message: '请选择窑炉',
type: 'warning'
})
}
},
//
deleteHandle (id) {
this.$confirm(`确定对[id=${id}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$http({
url: this.$http.adornUrl('/sys/config/delete'),
method: 'post',
data: this.$http.adornData(id, false)
}).then(({data}) => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.getDataList()
}
})
} else {
this.$message.error(data.msg)
}
})
}).catch(() => {})
}
}
}
</script>

View File

@ -0,0 +1,83 @@
<!--
* @Author: zwq
* @Date: 2021-11-17 15:49:18
* @LastEditors: zwq
* @LastEditTime: 2021-11-17 15:58:31
* @Description:
-->
<template>
<el-dialog
title="库位信息"
:visible.sync="visible">
<el-table
:data="dataList"
border
style="width: 100%;">
<el-table-column
type="index"
header-align="center"
align="center"
label="序号"
width="50">
</el-table-column>
<el-table-column
prop="id"
header-align="center"
align="center"
label="标识卡">
</el-table-column>
<el-table-column
prop="id1"
header-align="center"
align="center"
label="客户信息">
</el-table-column>
<el-table-column
prop="number"
header-align="center"
align="center"
label="数量">
</el-table-column>
<el-table-column
prop="unit"
header-align="center"
align="center"
label="单位">
</el-table-column>
</el-table>
<span slot="footer" class="dialog-footer">
<el-button @click="visible = false">取消</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
data () {
return {
visible: false,
dataList: []
}
},
methods: {
init (id) {
this.visible = true
this.$nextTick(() => {
if (id) {
this.$http({
url: this.$http.adornUrl(`/sys/config/info/${this.dataForm.id}`),
method: 'get',
params: this.$http.adornParams()
}).then(({data}) => {
if (data && data.code === 0) {
this.dataForm.paramKey = data.config.paramKey
this.dataForm.paramValue = data.config.paramValue
this.dataForm.remark = data.config.remark
}
})
}
})
}
}
}
</script>

View File

@ -2,48 +2,108 @@
* @Author: zwq * @Author: zwq
* @Date: 2021-11-15 15:17:30 * @Date: 2021-11-15 15:17:30
* @LastEditors: zwq * @LastEditors: zwq
* @LastEditTime: 2021-11-16 16:59:23 * @LastEditTime: 2021-11-17 16:07:04
* @Description: * @Description:
--> -->
<template> <template>
<div> <div>
<div class="mainDiv" style="margin:10px 0 100px"> <div class="mainDiv" style="margin:10px 0 100px">
<div class="flexDiv"> <div class="flexDiv">
<div class="wareBox" :class="[count > Math.round(Math.random()*10)?'enableBox':'disableBox',{active:count===isActive}]" v-for="count in 10" v-bind:key="count"> <div
class="wareBox"
:class="[
count > Math.round(Math.random() * 10) ? 'enableBox' : 'disableBox',
{ active: count === isActive }
]"
@click="selectBox(count)"
v-for="count in 10"
v-bind:key="count"
>
<div class="plat">库位{{ count }}</div> <div class="plat">库位{{ count }}</div>
</div> </div>
</div> </div>
<div class="flexDiv"> <div class="flexDiv">
<div class="wareBox" :class="[count > Math.round(Math.random()*10)?'enableBox':'disableBox',{active:count===isActive}]" v-for="count in 10" v-bind:key="count"> <div
<div class="plat">库位{{ count }}</div> class="wareBox"
:class="[
count > Math.round(Math.random() * 10) ? 'enableBox' : 'disableBox',
{ active: count + 10 === isActive }
]"
@click="selectBox(count + 10)"
v-for="count in 10"
v-bind:key="count"
>
<div class="plat">库位{{ count + 10 }}</div>
</div> </div>
</div> </div>
</div> </div>
<div class="line"></div> <div class="line"></div>
<div class="mainDiv" style="margin:100px 0 10px"> <div class="mainDiv" style="margin:100px 0 10px">
<div class="flexDiv"> <div class="flexDiv">
<div class="wareBox end-plat" v-for="count in 4" v-bind:key="count"> <div class="wareBox end-plat" @click="selectPlat(count)" v-for="count in 4" v-bind:key="count">
<div class="plat">提升台{{ count }}</div> <div class="plat">提升台{{ count }}</div>
</div> </div>
</div> </div>
</div> </div>
<ex-warehouse-info
v-if="ExWarehouseInfoVisible"
ref="ExWarehouseInfoRef"
></ex-warehouse-info>
</div> </div>
</template> </template>
<script> <script>
import ExWarehouseInfo from './ex-warehouse-info'
export default { export default {
data () { data () {
return { return {
isActive: '' isActive: '',
ExWarehouseInfoVisible: false
} }
}, },
components: {
ExWarehouseInfo
},
created () {}, created () {},
methods: {} methods: {
selectBox (count) {
this.isActive = count
this.ExWarehouseInfoVisible = true
this.$nextTick(() => {
this.$refs.ExWarehouseInfoRef.init()
})
},
selectPlat (count) {
if (this.isActive) {
this.$confirm(`确认从库位${this.isActive}出库至提升台${count}?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'info '
}).then(() => {
this.$message({
type: 'success',
message: '出库成功!'
})
}).catch(() => {
this.$message({
type: 'info',
message: '出库取消'
})
})
} else {
this.$message({
message: '请选择出库库位',
type: 'warning'
})
}
}
}
} }
</script> </script>
<style scoped> <style scoped>
.mainDiv{ .mainDiv {
border: 2px solid rgb(145, 174, 255); border: 2px solid rgb(145, 174, 255);
padding: 20px 0; padding: 20px 0;
} }
@ -89,17 +149,17 @@ export default {
border-left: 200px solid #ddd; border-left: 200px solid #ddd;
border-right: 200px solid #ddd; border-right: 200px solid #ddd;
} }
.enableBox{ .enableBox {
background: rgb(0, 189, 16); background: rgb(0, 189, 16);
} }
.disableBox{ .disableBox {
background: #ddd; background: #ddd;
cursor: not-allowed; cursor: not-allowed;
} }
.end-plat{ .end-plat {
background-color: rgb(195, 246, 255); background-color: rgb(195, 246, 255);
} }
.active{ .active {
border: 2px solid red; border: 2px solid red;
} }
</style> </style>