【部件中心】->【配件】页面

需求描述

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)

废话不多说直接上代码

<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;">

批量操作 <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">

</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">

<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>

<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>

<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>

<el-button type="primary" @click="subDelete()">确定</el-button>

<el-button @click="delIsShow=false">取消</el-button>

</div>

</el-dialog>

</div>

</template>

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>

.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'

})

}

配件页面功能

配件页面功能

废话不多说直接上代码

以下是接口api，我们用的是elementUI+vue的后台框架

推荐阅读更多精彩内容