【部件中心】->【配件】页面
需求描述
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)
返回
废话不多说直接上代码
v-model="machineType" placeholder="机器主型号1" style="float: left;margin-right: 10px;margin-bottom: 10px;" @change="selectModel(machineType)"> v-for="iteminmachineTypeLeft" :key="item" :label="item" :value="item"/>
v-for="iteminmachineModelRight" :key="item.productId" :label="item.productModel" :value="item.productId"/> v-for="iteminallPartsType" :key="item.value" :label="item.label" :value="item.value"/> style="background-color: #006EFF;color: #fff;float: right ; margin-bottom: 15px;" @click="newOpenparts=true">新建配件
批量操作 :action="doUpload" :headers="head"> slot="reference" type="danger" icon="el-icon-delete" size="mini" @click="showData(scope.row.id)"/> :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"/> v-model="ruleform.categroyId" placeholder="请选择" class="date_input"> v-for="iteminnewOptionsPartsType" :key="item.value" :label="item.label" :value="item.value"/> v-model.trim="ruleform.announceDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" class="date_input"/> v-model.trim="ruleform.deliveryDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" class="date_input"/> v-model.trim="ruleform.withdrawDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" class="date_input"/> v-for="iteminpartsType" :key="item.value" :label="item.label" :value="item.value"/> v-model="formPartsEdit.announceDate" type="date" class="date_input" value-format="yyyy-MM-dd" placeholder="选择日期"/> v-model="formPartsEdit.deliveryDate" type="date" class="date_input" value-format="yyyy-MM-dd" placeholder="选择日期"/> v-model="formPartsEdit.withdrawDate" type="date" class="date_input" value-format="yyyy-MM-dd" placeholder="选择日期"/>
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)
})
}
}
}
.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;
}
以下是接口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'
})
}