配件页面功能
【部件中心】->【配件】页面
需求描述
1. 机型筛选
根据机型（机器主型号+机器子型号）对页面数据进行筛选。
下拉列表选项变化时，刷新下方FC列表中的数据。
配件分类支持一下分类：
面板样式，基础语言，线缆，导轨，处理器激活码，内存激活码，动态内存扩展，其他。
2. 新建
需求描述必填项
配件类型FCType。显示当前的配件类型下拉列表的值。是
PN32个字符以内。去除首尾空格。（PN与FC，不能同时为空）是
FC32个字符以内。去除首尾空格。（PN与FC，不能同时为空）是
中文描述100个字符以内。去除首尾空格。是
英文描述100个字符以内。去除首尾空格。是
发布日期AnnounceDay是
供货日期GADay。供货日期必须晚于发布日期。否
退市日期WithdrawDay。退市日期必须晚于发布日期。否
提示信息Info否
3. 编辑
显示之前保存的数据，并可以编辑。
需求描述必填项
配件类型FCType。显示当前的配件类型下拉列表的值。是
PN32个字符以内。去除首尾空格。（PN与FC，不能同时为空）是
FC32个字符以内。去除首尾空格。（PN与FC，不能同时为空）是
中文描述100个字符以内。去除首尾空格。是
英文描述100个字符以内。去除首尾空格。是
发布日期AnnounceDay是
供货日期GADay。供货日期必须晚于发布日期。否
退市日期WithdrawDay。退市日期必须晚于发布日期。否
提示信息Info否
4. 删除
单击删除按钮，弹出提示框。
5. 批量操作
1）批量导出：按照下列模板，导出Excel文件。
2）批量导入：
导入Excel文件，并抽取数据，存入系统数据库。导入时，检测主型号和子型号，如果发现不匹配，则报错，中止导入。
3）清空数据：清空当前列表中的所有数据。
6. 分页器
1）分页设置
下拉列表向上弹出。可以设置每页展示条数，25、50或100条/页。默认为25条/页。
2）分页器
“<<”跳转至首页。“>>”跳转至尾页。
每次展示10页。设按钮名称为b0~b9。默认b0=1。
设被点击按钮为bx, 当x>4时，重新设置分页器按钮。b0=bx-4。其他按钮依次递增一。
3）计数显示
“显示 第x 至 y项，共 z项”。
z为搜索结果的总条数。
x为本页第一条记录在搜索结果中的序号。从1开始。
y为本页最后一条记录在搜索结果中的序号。
验收标准
附件
9009-42A_配件_yyyyMMddHHmmss.xlsx (9.17K)
废话不多说直接上代码
<template>
<!-- 配件页面 -->
<div>
<el-container>
<el-main>
<el-select
v-model="machineType"
placeholder="机器主型号1"
style="float: left;margin-right: 10px;margin-bottom: 10px;"
@change="selectModel(machineType)">
<el-option
v-for="iteminmachineTypeLeft"
:key="item"
:label="item"
:value="item"/>
</el-select>
<el-select v-model="machineModel" placeholder="机器子型号1" @change="setProductId(machineModel)">
<el-option
v-for="iteminmachineModelRight"
:key="item.productId"
:label="item.productModel"
:value="item.productId"/>
</el-select>
<el-select v-model="allParts" placeholder="全部" @change="setCategroyId(allParts)">
<el-option
v-for="iteminallPartsType"
:key="item.value"
:label="item.label"
:value="item.value"/>
</el-select>
<!--新建配件-->
<el-button
style="background-color: #006EFF;color: #fff;float: right ; margin-bottom: 15px;"
@click="newOpenparts=true">新建配件
</el-button>
<el-dropdown class="content_dropdown" size="80px;">
<span class="el-dropdown-link">
批量操作 <i class="el-icon-arrow-down el-icon--right"/>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item><span @click="handleExport">批量导出</span></el-dropdown-item>
<el-dropdown-item>
<el-upload
:action="doUpload"
:headers="head">
<div class="el-upload__text">批量导入</div>
</el-upload>
</el-dropdown-item>
<el-dropdown-item ><span @click="partsClear()">清空数据</span></el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<!--表格内容-->
<el-table :data="data" border stripe>
<el-table-column prop="componentPn" label="PN" align="center"/>
<el-table-column prop="componentFc" label="FC" align="center"/>
<el-table-column prop="description" label="描述" align="center"/>
<el-table-column prop="announceDate" label="发布日期" align="center"/>
<el-table-column prop="gaDate" label="供货日期" align="center"/>
<el-table-column prop="withdrawDate" label="退市日期" align="center"/>
<!--操作-->
<el-table-column prop="operation" label="操作" align="center">
<template slot-scope="scope">
<el-button size="mini" type="primary" icon="el-icon-edit" @click="editPartsData(scope.row.id)"/>
<el-button
slot="reference"
type="danger"
icon="el-icon-delete"
size="mini"
@click="showData(scope.row.id)"/>
</template>
</el-table-column>
</el-table>
<!--分页-->
<el-pagination
:total="total"
:current-page="page+ 1"
style="margin-top: 8px;float: right;margin-bottom: 20px;"
layout="total, prev, pager, next, sizes"
@size-change="sizeChange"
@current-change="pageChange"/>
</el-main>
</el-container>
<!--点击新建配件,弹出新建配件对话框-->
<el-dialog :visible.sync="newOpenparts" :modal-append-to-body="false" title="新建配件" width="25%" center>
<el-form ref="ruleform" :rules="rules" :model="ruleform" label-width="80px">
<el-form-item label="配件类型" prop="categroyId">
<el-select
v-model="ruleform.categroyId"
placeholder="请选择"
class="date_input">
<el-option
v-for="iteminnewOptionsPartsType"
:key="item.value"
:label="item.label"
:value="item.value"/>
</el-select>
</el-form-item>
<el-form-item label="PN" prop="componentPN">
<el-input v-model.trim="ruleform.componentPN" placeholder="请输入"/>
</el-form-item>
<el-form-item label="FC" prop="componentFC">
<el-input v-model.trim="ruleform.componentFC" placeholder="请输入"/>
</el-form-item>
<el-form-item label="中文描述" prop="descriptionCN">
<el-input v-model.trim="ruleform.descriptionCN" type="textarea" placeholder="请输入"/>
</el-form-item>
<el-form-item label="英文描述" prop="descriptionEN">
<el-input v-model.trim="ruleform.descriptionEN" type="textarea" placeholder="请输入"/>
</el-form-item>
<el-form-item label="发布日期" prop="announceDate">
<el-date-picker
v-model.trim="ruleform.announceDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择日期"
class="date_input"/>
</el-form-item>
<el-form-item label="供货日期" prop="deliveryDate">
<el-date-picker
v-model.trim="ruleform.deliveryDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择日期"
class="date_input"/>
</el-form-item>
<el-form-item label="退市日期" prop="withdrawDate">
<el-date-picker
v-model.trim="ruleform.withdrawDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择日期"
class="date_input"/>
</el-form-item>
<el-form-item label="提示信息" prop="tips">
<el-input v-model.trim="ruleform.tips" placeholder="请输入"/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button :disabled="forbidden" type="primary" @click="submitForm('ruleform')">确 定</el-button>
<el-button @click="newOpenparts= false">取 消</el-button>
</div>
</el-dialog>
<!--点击编辑配件,弹出编辑配件对话框-->
<el-dialog :visible.sync="editIsShow" :modal-append-to-body="false" title="编辑配件" width="25%" center>
<el-form ref="ruleform" :rules="rules" :model="formPartsEdit" label-width="80px">
<el-form-item label="配件类型" prop="categroyId">
<el-select v-model="formPartsEdit.categroyId" placeholder="请选择" class="date_input">
<el-option
v-for="iteminpartsType"
:key="item.value"
:label="item.label"
:value="item.value"/>
</el-select>
</el-form-item>
<el-form-item label="PN" prop="componentPN">
<el-input v-model="formPartsEdit.componentPN" placeholder="请输入"/>
</el-form-item>
<el-form-item label="FC" prop="componentFC">
<el-input v-model="formPartsEdit.componentFC" placeholder="请输入"/>
</el-form-item>
<el-form-item label="中文描述" prop="descriptionCN">
<el-input v-model="formPartsEdit.descriptionCN" type="textarea" placeholder="请输入"/>
</el-form-item>
<el-form-item label="英文描述" prop="descriptionEN">
<el-input v-model="formPartsEdit.descriptionEN" type="textarea" placeholder="请输入"/>
</el-form-item>
<el-form-item label="发布日期" prop="announceDate">
<el-date-picker
v-model="formPartsEdit.announceDate"
type="date"
class="date_input"
value-format="yyyy-MM-dd"
placeholder="选择日期"/>
</el-form-item>
<el-form-item label="供货日期" prop="deliveryDate">
<el-date-picker
v-model="formPartsEdit.deliveryDate"
type="date"
class="date_input"
value-format="yyyy-MM-dd"
placeholder="选择日期"/>
</el-form-item>
<el-form-item label="退市日期" prop="withdrawDate">
<el-date-picker
v-model="formPartsEdit.withdrawDate"
type="date"
class="date_input"
value-format="yyyy-MM-dd"
placeholder="选择日期"/>
</el-form-item>
<el-form-item label="提示信息" prop="tips">
<el-input v-model="formPartsEdit.tips" placeholder="请输入"/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button :disabled="forbidden" type="primary" @click="updateSure('ruleform')">确 定</el-button>
<el-button @click="editIsShow= false">取 消</el-button>
</div>
</el-dialog>
<!--点击删除配件,弹出删除配件对话框-->
<el-dialog :visible.sync="delIsShow" :modal-append-to-body="false" title="删除配件" width="25%" center>
<el-form :model="tempValue" label-width="80px">
<el-form-item label="FC" prop="componentFC">
<el-input v-model="tempValue.componentFC" placeholder="请输入" disabled/>
</el-form-item>
<el-form-item label="描述" prop="descriptionCN">
<el-input v-model="tempValue.descriptionCN" placeholder="请输入" disabled />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="subDelete()">确 定</el-button>
<el-button @click="delIsShow=false">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import axios from 'axios'
import initDatafrom '@/mixins/initDataPage'
import { machineType, machineModel, partsEmpty }from '@/api/parts'
import {
addDate,
delParts,
editUpdate, updateParts
}from '@/api/parts'
export default {
name:'Parts',
mixins: [initData],
data() {
// 校验componentPN
const validatorcomponentPN = (rule, value, callback) => {
if (value.trim() ==='') {
if (value ==='' &&/^[A-Za-z0-9]{1,32}$/.test(this.ruleform.componentFC)) {
callback()
this.forbidden =false
console.log('PN输入正确')
return
}else {
this.forbidden =true
return callback(new Error('请输入PN或者FC'))
}
}else if (!/^[A-Za-z0-9]{1,32}$/.test(value)) {
this.forbidden =true
return callback(new Error('长度为1-32个字符，首尾不可有空格'))
}else {
callback()
this.forbidden =false
console.log('PN输入正确')
}
}
// 校验componentFC
const validatorcomponentFC = (rule, value, callback) => {
if (value.trim() ==='') {
if (value.trim() ==='' &&/^[A-Za-z0-9]{1,32}$/.test(this.ruleform.componentPN)) {
callback()
this.forbidden =false
console.log('PN输入正确')
return
}else {
this.forbidden =false
return callback(new Error('请输入PN或者FC'))
}
}else if (!/^[A-Za-z0-9]{1,32}$/.test(value)) {
this.forbidden =false
return callback(new Error('长度为1-32的所有字符,去除首位空格'))
}else {
callback()
this.forbidden =false
console.log('FC输入正确')
}
}
// 校验中文描述
const validatorDesCN = (rule, value, callback) => {
if (value.trim() ==='') {
this.forbidden =true
return callback(new Error('请输入中文描述'))
// 中文、英文、数字但不包括下划线等符号，100以内的字符
}else if (!/^[\u4E00-\u9FA5A-Za-z0-9]{1,100}$/.test(value)) {
this.forbidden =true
return callback(new Error('首位不可包含空格且不可超过100个字符'))
}else {
callback()
this.forbidden =false
console.log('中文描述输入正确')
}
}
// 校验英文描述
const validatorDesEN = (rule, value, callback) => {
if (value.trim() ==='') {
this.forbidden =true
return callback(new Error('请输入英文描述'))
// 英文和数字
}else if (!/^[A-Za-z0-9]{1,100}$/.test(value)) {
this.forbidden =true
return callback(new Error('首位不可包含空格且不可超过100个字符'))
}else {
callback()
this.forbidden =false
console.log('英文描述输入正确')
}
}
// 校验发布日期
const validatorAnnounceDate = (rule, value, callback) => {
if (value ==='') {
this.forbidden =true
return callback(new Error('请选择发布日期'))
}else if (!(value)) {
this.forbidden =true
return callback(new Error('发布日期不能为空'))
}else {
callback()
this.forbidden =false
console.log('发布日期选择正确')
}
}
return {
// 导出
export:localStorage.imgBase_url +'/software/download',
// 导入
doUpload:localStorage.imgBase_url +'/software/upload',
head: {
'Authorization':localStorage.token
},
categroyId: -1,
machineType:'',// 机器主型号
machineTypeLeft: [],// 机器主型号数据
machineModel:'',// 机器子型号
machineModelRight: [],
allParts:'全部',// 全部
allPartsType: [// 全部
{
value: -1,
label:'全部'
},
{
value:32,
label:'面板样式'
},
{
value:28,
label:'基础语言'
},
{
value:11,
label:'处理器激活码'
},
{
value:12,
label:'内存激活码'
},
{
value:31,
label:'动态内存扩展'
},
{
value:30,
label:'线缆'
},
{
value:29,
label:'导轨'
}
],
partsType: [// 编辑 配件类型
{
value:32,
label:'面板样式'
},
{
value:28,
label:'基础语言'
},
{
value:11,
label:'处理器激活码'
},
{
value:12,
label:'内存激活码'
},
{
value:31,
label:'动态内存扩展'
},
{
value:30,
label:'线缆'
},
{
value:29,
label:'导轨'
}
],
newOpenparts:false,// 点击新建配件,控制新建配件内容是否隐藏
editIsShow:false,// 点击编辑软件，控制编辑软件对话框的显示隐蔽 true 显示 false 隐藏
delIsShow:false,// 点击删除软件，控制删除软件对话框的显示隐蔽 true 显示 false 隐藏
forbidden:false,// 禁用
// 新建配件
ruleform: {
categroyId:'',// 配件类型
componentPN:'',// pn
componentFC:'',// fc
descriptionCN:'',// 中文描述
descriptionEN:'',// 英文描述
announceDate:'',// 发布时间
deliveryDate:'',// 供货时间
withdrawDate:'',// 退市时间
tips:'' // 提示信息
},
// 编辑配件
formPartsEdit: {
categroyId:'',// 配件类型
componentPN:'',// pn
componentFC:'',// fc
descriptionCN:'',// 中文描述
descriptionEN:'',// 英文描述
announceDate:'',// 发布时间
deliveryDate:'',// 供货时间
withdrawDate:'',// 退市时间
titleMsg:'' // 提示信息
},
// 新建配件类型
newOptionsPartsType: [
{
value:32,
label:'面板样式'
},
{
value:28,
label:'基础语言'
},
{
value:11,
label:'处理器激活码'
},
{
value:12,
label:'内存激活码'
},
{
value:31,
label:'动态内存扩展'
},
{
value:30,
label:'线缆'
},
{
value:29,
label:'导轨'
}
],
// 弹框两个数据 --删除
tempValue: {
componentFC:'',
descriptionCN:''
},
rules: {
categroyId: [
{required:true,message:'请选择配件类型',trigger:'change' }
],
componentPN: [
{validator:validatorcomponentPN,trigger:'blur' }
],
componentFC: [
{validator:validatorcomponentFC,trigger:'blur' }
],
descriptionCN: [
{required:true,validator:validatorDesCN,trigger:'blur' }
],
descriptionEN: [
{required:true,validator:validatorDesEN,trigger:'blur' }
],
announceDate: [
{required:true,message:'发布日期不能为空',trigger:'blur' },
{validator:validatorAnnounceDate,trigger: ['blur','change'] }
]
}
}
},
watch: {
newOpenparts(newVal) {
if (newVal ===false) {
this.$refs['ruleform'].resetFields()
}
}
},
created() {
this.$nextTick(() => {
this.init()
})
},
mounted() {
this.init()
this.selectType()
},
methods: {
// 清空操作
partsClear() {
const params = {
machineType:this.machineType,
machineModel:this.machineModel,
categroyId:this.categroyId
}
partsEmpty(params).then(res => {
this.$message({
message:'清空成功！',
type:'success'
})
this.init()
}).catch((err) => {
console.log('err', err)
this.$message.error('清空失败！')
})
},
// 批量导出
handleExport() {
axios({
method:'get',
url:this.export,
responseType:'blob',
headers: {
'Authorization':localStorage.token
}
}).then(response => {
const fileName =window.decodeURI(response.headers['content-disposition'])
const link =document.createElement('a')
link.href =window.URL.createObjectURL(new Blob([response.data], {type:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' }))
link.target ='_blank'
link.download =fileName
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
})
},
// 批量导入
uploadExcelFile() {
console.log(this.$refs.inputFile)
var formData =new window.FormData()
formData.append('file',document.querySelector('input[type=file]').files[0])
uploadExcel(formData)
},
// 分页
beforeInit() {
this.url ='other/page/' +this.categroyId,
this.params = {
pageNum:this.page +1,
pageSize:this.size,
machineType:this.machineType,
machineModel:this.machineModel
}
return true
},
// 机器主型号
selectType() {
machineType().then(res => {
// console.log(res)
this.machineTypeLeft = res.machineType
}).catch(err => {
this.$message.error('系统错误！')
})
this.init()
},
// 机器子型号
selectModel(type) {
this.machineType = type
console.log(type)
machineModel(type).then(res => {
console.log(res)
this.machineModelRight = res.machineModel
this.machineModel =''
}).catch(err => {
console.log('err', err)
this.$message.error('获取机器主型号失败！')
})
},
setCategroyId(model) {// 全部
this.categroyId = model
console.log(model)
this.init()
},
setProductId(model) {// 机器子型号1
console.log(model)
this.productId = model
for (let i =0;i
if (this.machineModelRight[i].productId == model) {
this.machineModel =this.machineModelRight[i].productModel
console.log(model)
}
}
this.init()
},
// 新建配件
submitForm(formName) {
this.newOpenparts =true
this.$refs[formName].validate((valid) => {
if (valid) {
const params = {
productId:this.productId,
categroyId:this.ruleform.categroyId,
componentPn:this.ruleform.componentPN,// pn
componentFc:this.ruleform.componentFC,// fc
description:this.ruleform.descriptionCN,// 中文描述
descriptionEn:this.ruleform.descriptionEN,// 英文描述
announceDate:this.ruleform.announceDate,// 发布日期
gaDate:this.ruleform.deliveryDate,// 供货日期
withdrawDate:this.ruleform.withdrawDate,// 退货日期
titleMsg:this.ruleform.tips // 提示信息
}
console.log(params)
addDate(params,this.productId,this.ruleform.partsType).then(res => {
console.log(res)
this.newOpenparts =false
this.$message({
message:'新建配件成功！',
type:'success'
})
console.log('添加成功')
this.init()
}).catch((err) => {
console.log('err', err)
this.$message.error('新建配件失败')
})
}
})
},
// 编辑配件 回显
editPartsData(id) {
this.editIsShow =true // 点击编辑按钮，弹框显示
editUpdate(id).then(res => {
var res = res.data
this.id =res.id
console.log(res)
this.formPartsEdit.categroyId =res.categroyId
this.formPartsEdit.componentPN =res.componentPn
this.formPartsEdit.componentFC =res.componentFc
this.formPartsEdit.descriptionCN =res.description
this.formPartsEdit.descriptionEN =res.descriptionEn
this.formPartsEdit.announceDate =res.announceDate
this.formPartsEdit.deliveryDate =res.gaDate
this.formPartsEdit.withdrawDate =res.withdrawDate
this.formPartsEdit.tips =res.titleMsg
})
},
// 确定修改
updateSure(formName, id) {
this.editIsShow =false
// this.$refs[formName].validate((valid) => {
// if (valid) {
const params = {
id:this.id,
categroyId:this.formPartsEdit.categroyId,
componentPn:this.formPartsEdit.componentPN,// PN
componentFc:this.formPartsEdit.componentFC,// FC
description:this.formPartsEdit.descriptionCN,// 中文描述
descriptionEN:this.formPartsEdit.descriptionEN,// 英文描述
announceDate:this.formPartsEdit.announceDate,// 发布日期
gaDate:this.formPartsEdit.deliveryDate,// 供货日期
withdrawDate:this.formPartsEdit.withdrawDate,// 退市日期
titleMsg:this.formPartsEdit.tips // 提示
}
console.log(params)
updateParts(params).then(res => {
const resMsg =res.msg
var res = res.data
console.log(res)
this.$message({
message:resMsg,
type:'success'
})
this.init()
})
// }
// })
},
// 获取删除模态框数据
showData(id) {
this.id = id// 全局的id
this.delIsShow =true
editUpdate(id).then(res => {
var res = res.data
console.log(id)
console.log(res)
// 获取删除模态框两个数据，并且赋值给它
this.tempValue.componentFC =res.componentFc // FC
this.tempValue.descriptionCN =res.description // 中文描述
})
},
// 点击弹框中确认删除,删除数据
subDelete() {
console.log(this.id)
this.delIsShow =true
delParts(this.id).then(res => {
console.log(res)
if (res.msg =='删除成功') {
this.$message({
message:'删除成功！',
type:'success'
})
this.init()
this.delIsShow =false
}else if (res.msg ==='删除失败') {
this.$message.error('删除失败！')
}
}).catch(err => {
console.log(err.response.data.message)
})
}
}
}
</script>
<style scoped>
.dialog-footer {
display:flex;
justify-content:center;
}
.el-dialog__header {
border-bottom:solid 1px #EFEFEF;
}
.dialog-footer {
display:flex;
justify-content:center;
}
.el-form-item__content .date_input {
width:100%!important;
}
.el-dropdown-link {
border:solid 1px #dcdfe6;
padding:10px 30px;
border-radius:3px;
cursor:pointer;
color:darkgray;
float:right;
background-color:#ffffff;
}
.el-icon-arrow-down {
font-size:12px;
color:darkgray;
background-color:#ffffff;
}
.el-dropdown-link {
padding:12px 40px;
cursor:pointer;
color:#409EFF;
}
.el-icon-arrow-down {
font-size:12px;
}
.content_dropdown {
float:right;
padding-right:10px;
}
</style>
以下是接口api，我们用的是elementUI+vue的后台框架
import requestfrom '@/utils/request'
// 新建配件
export function addDate(params) {
return request({
url:'other',
method:'post',
data: params
})
}
// 主型号
export function machineType() {
return request({
url:'product/type',
method:'get'
})
}
// 子型号
export function machineModel(type) {
return request({
url:'product/model/' + type,
method:'get'
})
}
// 编辑 - 回显软件
export function editUpdate(id) {
return request({
url:'other/' + id,
method:'get'
})
}
// 确定修改软件categoryId
export function updateParts(params) {
return request({
url:'other',
method:'put',
data: params
})
}
// 删除数据
export function delParts(id) {
return request({
url:'other/' + id,
method:'delete'
})
}
// 清空
export function partsEmpty(data) {
return request({
url:'other?machineType=' + data.machineType +'&machineModel=' + data.machineModel +'&categroyId='+ data.categroyId,
method:'delete'
})
}
