美文网首页
配件页面功能

配件页面功能

作者: Sunshine_488c | 来源:发表于2019-11-21 19:25 被阅读0次

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

    需求描述

    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'

      })

    }

    相关文章

      网友评论

          本文标题:配件页面功能

          本文链接:https://www.haomeiwen.com/subject/rntxwctx.html