Files
JY1.0/src/views/WorkshopProcurement/CreatingProcurementContracts/index.vue
liushuai d441411fa9 更新
2018-12-29 12:11:59 +08:00

762 lines
29 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<div class="app-container">
<el-card class="searchContract">
<el-form ref="form1" :model="form1" label-position="right" label-width="130px" class="searchForm">
<el-row>
<el-col :span="6">
<el-form-item label="请购单号/合同编号">
<el-select v-model="contractNumValue" size="small" @change="searchData">
<el-option
v-for="item in contractNum"
:key="item.value"
:label="item.label"
:value="item.value"/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="合同名称">
<el-input v-model="contractName" size="small"/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="供应商">
<el-input v-model="supplierName" size="small" placeholder="请双击选择" readonly clearable @dblclick.native="dialogVisible1=true;submitDisable=true" @clear="emptySupplierDetail"/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="预付款">
<el-input v-model="AdvanceCharge" size="small" placeholder="预付款"/>
<!--<el-select v-model="payMethodValue" placeholder="预付款" size="small" @change="payMethodChange">-->
<!--<el-option-->
<!--v-for="item in payMethod"-->
<!--:key="item.value"-->
<!--:label="item.label"-->
<!--:value="item.value"/>-->
<!--</el-select>-->
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label="币种">
<el-select v-model="currencyValue" placeholder="币种" size="small" clearable>
<el-option
v-for="item in currency"
:key="item.value"
:label="item.label"
:value="item.value"/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="规定到货时间">
<el-date-picker
v-model="stipulateArrivalTime"
:picker-options="endDateOpt"
:disabled="Boolean(!contractNumValue)"
size="small"
type="date"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
placeholder="选择日期"/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="采购员">
<el-input v-model="name" size="small" readonly/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="税率">
<el-input v-model="taxRate" size="small"/>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-card>
<el-card>
<el-table :data="tableData4" border style="width: 100%;max-height: 400px;" height="300px" size="mini">
<el-table-column label="单价" align="center" width="150">
<template slot-scope="scope">
<el-input v-model="scope.row.单价" size="mini" style="width:70px"/>
</template>
</el-table-column>
<el-table-column label="零件名称" align="center" min-width="100">
<template slot-scope="scope">
{{ scope.row.物料名称 }}
</template>
</el-table-column>
<el-table-column label="零件图号" align="center" min-width="100">
<template slot-scope="scope">
{{ scope.row.零件图号 }}
</template>
</el-table-column>
<el-table-column label="材料" align="center" width="200">
<template slot-scope="scope">
{{ scope.row.材料 }}
</template>
</el-table-column>
<el-table-column label="订货数量" align="center" width="100">
<template slot-scope="scope">
{{ scope.row.零件数量 }}
</template>
</el-table-column>
<el-table-column label="金额" align="center" width="100">
<template slot-scope="scope">
{{ scope.row.金额 }}
</template>
</el-table-column>
<el-table-column label="交货期" align="center" width="150">
<template slot-scope="scope">
<el-date-picker
v-model="scope.row.物料计划到货时间"
size="small"
type="date"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
style="width: 133px"
@change="update(scope.row)"/>
</template>
</el-table-column>
<el-table-column label="备注" align="center" width="150">
<template slot-scope="scope">
<el-input v-model="scope.row.备注" size="mini" style="width: 120px" @change="update(scope.row)"/>
</template>
</el-table-column>
</el-table>
<el-table :data="tableData3" border style="width: 100%;max-height: 400px;" height="300px" size="mini">
<el-table-column label="单价" align="center" width="150">
<template slot-scope="scope">
<el-input v-model="scope.row.单价" size="mini" style="width:70px"/>
</template>
</el-table-column>
<!--<el-table-column label="发货天数" align="center" width="150">-->
<!--<template slot-scope="scope">-->
<!--<el-input v-model="deliveryDay[scope.$index]" size="mini" style="width:70px"/>-->
<!--</template>-->
<!--</el-table-column>-->
<el-table-column label="物料名称" align="center" min-width="100">
<template slot-scope="scope">
{{ scope.row.物料名称 }}
</template>
</el-table-column>
<el-table-column label="物料型号" align="center" min-width="100">
<template slot-scope="scope">
{{ scope.row.物料型号 }}
</template>
</el-table-column>
<el-table-column label="物料规格" align="center" width="200">
<template slot-scope="scope">
{{ scope.row.物料规格 }}
</template>
</el-table-column>
<el-table-column label="订货数量" align="center" width="100">
<template slot-scope="scope">
{{ scope.row.零件数量 }}
</template>
</el-table-column>
<el-table-column label="金额" align="center" width="100">
<template slot-scope="scope">
{{ scope.row.金额 }}
</template>
</el-table-column>
<el-table-column label="交货期" align="center" width="150">
<template slot-scope="scope">
<el-date-picker
v-model="scope.row.物料计划到货时间"
size="small"
type="date"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
style="width: 133px"
@change="update(scope.row)"/>
</template>
</el-table-column>
<el-table-column label="备注" align="center" width="150">
<template slot-scope="scope">
<el-input v-model="scope.row.备注" size="small" style="width: 120px" @change="update(scope.row)"/>
</template>
</el-table-column>
<!--<el-table-column label="计算方式" align="center" width="110">-->
<!--<template slot-scope="scope">-->
<!--<el-select v-model="calculateWayValue[scope.$index]" style="width:75px" size="mini">-->
<!--<el-option-->
<!--v-for="item in calculateWay"-->
<!--:key="item.value"-->
<!--:label="item.label"-->
<!--:value="item.value">-->
<!--</el-option>-->
<!--</el-select>-->
<!--</template>-->
<!--</el-table-column>-->
<!--<el-table-column label="重量" align="center" width="100">-->
<!--<template slot-scope="scope">-->
<!--<el-input size="mini" v-model="weight[scope.$index]" style="width:70px"></el-input>-->
<!--</template>-->
<!--</el-table-column>-->
</el-table>
<el-button
type="primary"
size="small"
icon=""
style="margin-top:10px"
@click="calculateContractSum">计算合同总额</el-button>
<span>合同总额:</span>
<el-input v-model="contractSum" size="small"/>
</el-card>
<el-card>
<el-input :rows="20" v-model="textArea" type="textarea" style="width:calc(99% - 250px);float:right;margin-bottom: 20px" resize="none"/>
<el-button
type="primary"
size="small"
icon=""
style="margin-left: 4.5%"
@click="doneContract">生成采购合同</el-button>
<!--<el-button type="primary" size="small" icon="" style="float:right;margin: 0 10px 15px 0"-->
<!--@click="doneContract">生成采购合同</el-button>-->
</el-card>
<el-dialog :visible.sync="dialogVisible1" title="供应商选择" center style="min-height: 300px">
<el-form ref="form1" :model="form1" label-position="left" label-width="90px" class="searchForm">
<el-row>
<el-col :span="12">
<el-form-item label="供应商名称">
<el-input v-model="supplierName" size="small"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="企业性质">
<el-input v-model="enterpriseNature" size="small"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="货期">
<el-input v-model="goodTime" size="small"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="注册资本">
<el-input v-model="registeredCapital" size="small"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="税号">
<el-input v-model="taxNum" size="small"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="电子邮箱">
<el-input v-model="EMail" size="small"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="地址">
<el-input v-model="address" size="small"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="账号">
<el-input v-model="account" size="small"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="开户行">
<el-input v-model="openingBank" size="small"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="电话号码">
<el-input v-model="phone" size="small"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="传真">
<el-input v-model="fax" size="small"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-button
type="success"
size="small"
icon="el-icon-search"
@click="searchSupplier">查询</el-button>
<el-button
:disabled="submitDisable"
type="primary"
size="small"
icon="el-icon-check"
@click="submitSelectSupplier">确定</el-button>
<el-button
type="danger"
size="small"
icon="el-icon-delete"
@click="emptySupplierDetail">清空</el-button>
</el-col>
</el-row>
<el-table :data="tableData01" size="mini" style="width: 97%;max-height: 300px;margin-top:15px" height="200px" border @row-click="showSupplierDetail">
<el-table-column align="center" label="供应商名称" width="200">
<template slot-scope="scope">
{{ scope.row.供应商名称 }}
</template>
</el-table-column>
<el-table-column align="center" label="企业性质">
<template slot-scope="scope">
{{ scope.row.企业性质 }}
</template>
</el-table-column>
<el-table-column align="center" label="创立日期">
<template slot-scope="scope">
{{ scope.row.创立日期 }}
</template>
</el-table-column>
<el-table-column align="center" label="注册资本">
<template slot-scope="scope">
{{ scope.row.注册资本 }}
</template>
</el-table-column>
</el-table>
</el-form>
</el-dialog>
</div>
</template>
<script>
import { searchSupplier, update, doneContract, initPurchaseOrder, searchData, searchData1, searchData2, searchContractDemo } from '@/api/WorkshopProcurement/CreatingProcurementContracts'
import { mapGetters } from 'vuex'
export default {
inject: ['reload'],
data() {
return {
submitDisable: true, // 不点击表格中的行不让确定
minDate: null,
endDateOpt: { // 禁用大于规定到货日期和小于当前日期
disabledDate: (time) => {
if (this.minDate) {
return time.getTime() > this.minDate || time.getTime() < new Date()
}
}
},
AdvanceCharge: '',
loading: false,
dialogVisible1: false,
disable2: true,
disable3: true,
disable4: true,
disable5: true,
disable6: true,
tableData01: [],
tableData2: [], // 合同模板表
form1: {},
form2: {},
textArea: '',
paramRow: '', // 参数row
contractSum: 0,
contractSum1: 0,
deliveryDay: [],
deliveryDay1: [],
contractNumValue: '',
RequisitionNumber: '',
contractNum: [], // 合同号
contractName: '产品购销合同', // 合同名称
supplierName: '', // 供应商
supplier: [],
supplierValue: '', // 供应商流水号
enterpriseNature: '', // 企业性质
createDate: '', // 创立日期
registeredCapital: '', // 注册资本
taxNum: '', // 税号
EMail: '', // 电子邮箱
address: '', // 地址
account: '', // 账户
openingBank: '', // 开户行
phone: '', // 电话号码
fax: '', // 传真
goodTime: '', // 货期
supplierCheck1: 0,
supplierCheck2: 0,
supplierCheck3: 0,
supplierCheck4: 0,
supplierCheck5: 0,
supplierCheck6: 0,
supplierCheck7: 0,
supplierCheck8: 0,
supplierCheck9: 0,
supplierCheck10: 0,
supplierCheck11: 0,
supplierCheck12: 0,
payMethod: [], // 付款方式
payMethodValue: 1,
payMethodName: '货到付款',
currency: [{
label: '人民币',
value: 1
}, {
label: '美元',
value: 2
}, {
label: '英镑',
value: 3
}, {
label: '欧元',
value: 4
}], // 币种
currencyValue: 1,
payTime1: [],
payTime1Value: 1,
payTime2: [],
payTime2Value: 1,
payTime3: [],
payTime3Value: 1,
payTime4: [],
payTime4Value: 1,
payTime5: [],
payTime5Value: 1,
payTime6: [],
payTime6Value: 1,
planArrivalTime: '', // 计划到货时间
stipulateArrivalTime: '', // 规定到货时间
freight: '', // 运费
taxRate: '0.16', // 税率
tableData3: [],
tableData4: [],
groupNum1: [],
groupNum2: [],
group1: '',
group2: '',
group3: '',
group5: '',
group6: '',
group7: '',
group8: '',
group9: '',
group10: ''
}
},
computed: {
...mapGetters([
'sidebar',
'avatar',
'name',
'id'
])
},
created() {
this.fetchData()
},
methods: {
searchData() {
const numGroup = [] // 空数组,放物料的计划到货时间
searchData(this.contractNumValue).then(response => {
console.log(response.data, 111)
for (let i = 0; i < response.data.length; i++) {
numGroup.push(Date.parse(response.data[i].物料计划到货时间))
}
this.minDate = new Date(Math.min(...numGroup))
})
searchData1(this.contractNumValue).then(response => {
console.log(response.data, 222)
for (let j = 0; j < response.data.length; j++) {
response.data[j].物料计划到货时间 = (response.data[j].物料计划到货时间).split(' ')[0]
}
this.tableData3 = response.data
for (let i = 0; i < response.data.length; i++) {
this.deliveryDay[i] = 0
this.tableData3[i].金额 = parseFloat(this.tableData3[i].单价) * parseFloat(this.tableData3[i].零件数量)
}
}).then(() => {
this.groupNum1 = this.tableData3 // 给中间变量需要时重新push
console.log(this.tableData3)
})
searchData2(this.contractNumValue).then(response => {
for (let j = 0; j < response.data.length; j++) {
response.data[j].物料计划到货时间 = (response.data[j].物料计划到货时间).split(' ')[0]
}
this.tableData4 = response.data
for (let i = 0; i < response.data.length; i++) {
this.deliveryDay1[i] = 0
this.tableData4[i].金额 = parseFloat(this.tableData4[i].单价) * parseFloat(this.tableData4[i].零件数量)
}
}).then(() => {
this.groupNum2 = this.tableData4 // 给中间变量需要时重新push
console.log(this.tableData4)
})
},
update(row) {
update(row.请购单明细流水号, row.物料计划到货时间, row.备注).then(response => {
})
},
calculateContractSum() { // 计算合同总额
this.contractSum = 0
this.contractSum1 = 0
this.costAccount = 0
this.riseFallPoint = 0
this.tableData3 = []
this.tableData4 = []
for (let i = 0; i < this.groupNum1.length; i++) {
this.groupNum1[i].金额 = parseFloat(this.groupNum1[i].单价) * parseFloat(this.groupNum1[i].零件数量)
this.contractSum += parseFloat(this.groupNum1[i].金额)
this.tableData3.push(this.groupNum1[i])
}
for (let i = 0; i < this.groupNum2.length; i++) {
this.groupNum2[i].金额 = parseFloat(this.groupNum2[i].单价) * parseFloat(this.groupNum2[i].零件数量)
this.contractSum1 += parseFloat(this.groupNum2[i].金额)
this.tableData4.push(this.groupNum2[i])
}
this.contractSum = (this.contractSum + this.contractSum1).toFixed(2)
this.costAccount = this.contractSum
if (parseInt(this.costAccount) === 0) {
this.$message.error('成本核算不可为0')
} else {
this.riseFallPoint = (this.contractSum - this.costAccount) / this.costAccount
this.riseFallPoint = this.riseFallPoint.toFixed(2)
}
},
fetchData() {
searchContractDemo(1).then(response => {
this.textArea = response.data[0].合同模板内容
})
this.getSelect(initPurchaseOrder, ['请购单编号', '请购单流水号'], 'contractNum')
},
searchSupplier() { // 查询创立日期和注册资本大于符合条件的数据
this.supplierName ? this.supplierCheck1 = 1 : (this.supplierCheck1 = 0, this.supplierName = '')
this.enterpriseNature ? this.supplierCheck2 = 1 : (this.supplierCheck2 = 0, this.enterpriseNature = '')
this.createDate ? this.supplierCheck3 = 1 : (this.supplierCheck3 = 0, this.createDate = '')
this.registeredCapital ? this.supplierCheck4 = 1 : (this.supplierCheck4 = 0, this.registeredCapital = '')
this.taxNum ? this.supplierCheck5 = 1 : (this.supplierCheck5 = 0, this.taxNum = '')
this.EMail ? this.supplierCheck6 = 1 : (this.supplierCheck6 = 0, this.EMail = '')
this.address ? this.supplierCheck7 = 1 : (this.supplierCheck7 = 0, this.address = '')
this.account ? this.supplierCheck8 = 1 : (this.supplierCheck8 = 0, this.account = '')
this.openingBank ? this.supplierCheck9 = 1 : (this.supplierCheck9 = 0, this.openingBank = '')
this.phone ? this.supplierCheck10 = 1 : (this.supplierCheck10 = 0, this.phone = '')
this.fax ? this.supplierCheck11 = 1 : (this.supplierCheck11 = 0, this.fax = '')
this.goodTime ? this.supplierCheck12 = 1 : (this.supplierCheck12 = 0, this.goodTime = '')
searchSupplier(this.supplierCheck1, this.supplierName, this.supplierCheck2, this.enterpriseNature, this.supplierCheck3, this.createDate, this.supplierCheck4, this.registeredCapital, this.supplierCheck5, this.taxNum, this.supplierCheck6, this.EMail, this.supplierCheck7, this.address, this.supplierCheck8, this.account, this.supplierCheck9, this.openingBank, this.supplierCheck10, this.phone, this.supplierCheck11, this.fax, this.supplierCheck12, this.goodTime).then(response => {
for (let i = 0; i < response.data.length; i++) {
if (response.data[i].创立日期 !== '' && response.data[i].创立日期 !== null) {
response.data[i].创立日期 = response.data[i].创立日期.split(' ')[0]
}
}
this.tableData01 = response.data
})
},
submitSelectSupplier() { // 确定选择供应商
this.dialogVisible1 = false
},
emptySupplierDetail() { // 清空
this.submitDisable = true
this.supplierValue = ''
this.supplierName = ''
this.enterpriseNature = ''
this.createDate = ''
this.registeredCapital = ''
this.taxNum = ''
this.EMail = ''
this.address = ''
this.account = ''
this.openingBank = ''
this.phone = ''
this.fax = ''
this.goodTime = ''
},
showSupplierDetail(row) {
this.submitDisable = false
this.form2.supplierValue = row.供应商流水号
this.form2.supplierName = row.供应商名称
this.supplierValue = row.供应商流水号
this.supplierName = row.供应商名称
this.enterpriseNature = row.企业性质
this.createDate = row.创立日期
this.registeredCapital = row.注册资本
this.taxNum = row.税号
this.EMail = row.电子信箱
this.address = row.地址
this.account = row.帐号
this.openingBank = row.开户行
this.phone = row.电话号码
this.fax = row.传真
this.goodTime = row.货期
},
doneContract() { // 生成采购合同
if (this.contractNumValue === '') {
this.$message.error('请选择生成合同的询价单')
} else if (this.stipulateArrivalTime === '' || this.stipulateArrivalTime === null) {
this.$message.error('请选择规定到货时间!')
} else {
for (let i = 0; i < this.deliveryDay.length; i++) {
if (parseInt(this.deliveryDay[i]) < 0) {
this.$message.error('规定到货日期不可小于当前日期')
return
}
}
this.group1 = ''
this.group2 = ''
this.group3 = ''
// this.group5 = ''
// this.group6 = ''
this.group7 = ''
this.group8 = ''
this.group9 = ''
this.group10 = ''
for (let i = 0; i < this.tableData3.length; i++) {
this.group1 += this.tableData3[i].物料流水号 + ','
this.group2 += this.tableData3[i].零件数量 + ','
this.group3 += this.tableData3[i].单价 + ','
this.group7 += this.taxRate + ','
this.group8 += this.currencyValue + ','
this.group9 += this.tableData3[i].请购单明细流水号 + ','
}
for (let i = 0; i < this.tableData4.length; i++) {
this.group1 += this.tableData4[i].物料流水号 + ','
this.group2 += this.tableData4[i].零件数量 + ','
this.group3 += this.tableData4[i].单价 + ','
this.group7 += this.taxRate + ','
this.group8 += this.currencyValue + ','
this.group9 += this.tableData4[i].请购单明细流水号 + ','
}
for (let i = 0; i < this.contractNum.length; i++) {
if (this.contractNum[i].value === this.contractNumValue) {
this.RequisitionNumber = this.contractNum[i].label
}
}
// for (let i = 0; i < this.payMethod.length; i++) {
// if (this.payMethod[i].value === this.payMethodValue) {
// this.payMethodName = this.payMethod[i].label
// }
// }
// const payTimeNum = this.payMethodName.split(':')
// if (payTimeNum.length > 1) {
// for (let i = 0; i < payTimeNum.length; i++) {
// switch (i) {
// case 0:
// this.group6 += this.payTime1Value + ','
// break
// case 1:
// this.group6 += this.payTime2Value + ','
// break
// case 2:
// this.group6 += this.payTime3Value + ','
// break
// case 3:
// this.group6 += this.payTime4Value + ','
// break
// case 4:
// this.group6 += this.payTime5Value + ','
// break
// case 5:
// this.group6 += this.payTime6Value + ','
// break
// }
// this.group5 += payTimeNum[i] + ',' // 付款比例 付款方式 付款计划
// }
// } else {
// this.group5 = '10,' // 付款比例 付款方式 付款计划
// this.group6 = this.payTime1Value + ',' // 付款时间
// }
this.group1 = this.group1.substr(0, this.group1.length - 1)
this.group2 = this.group2.substr(0, this.group2.length - 1)
this.group3 = this.group3.substr(0, this.group3.length - 1)
// this.group5 = this.group5.substr(0, this.group5.length - 1)
// this.group6 = this.group6.substr(0, this.group6.length - 1)
// this.group7 = this.group7.substr(0, this.group7.length - 1)
// this.group8 = this.group8.substr(0, this.group8.length - 1)
// this.group9 = this.group9.substr(0, this.group9.length - 1)
// this.group10 = this.group10.substr(0, this.group10.length - 1)
doneContract(this.contractNumValue, this.RequisitionNumber, this.contractName, this.planArrivalTime, this.stipulateArrivalTime, this.supplierValue, this.textArea, this.freight, this.group1, this.group2, this.group3, this.group7, this.group8, this.group9, this.id, this.AdvanceCharge).then(response => {
if (response.data[0].result === '1') {
this.$message.success('生成合同成功')
this.reload()
} else { this.$message.error('生成合同失败') }
})
}
},
// payMethodChange() { // 付款方式改变
// for (let i = 0; i < this.payMethod.length; i++) {
// if (this.payMethod[i].value === this.payMethodValue) {
// this.payMethodName = this.payMethod[i].label
// }
// }
// const payTimeNum = this.payMethodName.split(':')
// switch (payTimeNum.length) {
// case 1:
// this.disable2 = true
// this.disable3 = true
// this.disable4 = true
// this.disable5 = true
// this.disable6 = true
// break
// case 2:
// this.disable2 = false
// this.disable3 = true
// this.disable4 = true
// this.disable5 = true
// this.disable6 = true
// break
// case 3:
// this.disable2 = false
// this.disable3 = false
// this.disable4 = true
// this.disable5 = true
// this.disable6 = true
// break
// case 4:
// this.disable2 = false
// this.disable3 = false
// this.disable4 = false
// this.disable5 = true
// this.disable6 = true
// break
// case 5:
// this.disable2 = false
// this.disable3 = false
// this.disable4 = false
// this.disable5 = false
// this.disable6 = true
// break
// case 6:
// this.disable2 = false
// this.disable3 = false
// this.disable4 = false
// this.disable5 = false
// this.disable6 = false
// break
// }
// this.fetchData()
// },
exportExcel() {}
}
}
</script>
<style scoped>
.el-card{
margin-bottom: 15px;
}
.el-date-editor{
width:200px
}
.el-select{
width:200px
}
.el-input{
width:200px
}
span{
margin: 10px 0 10px 10px;
}
.searchForm .el-form-item{
margin-bottom: 5px;
}
</style>