朱兆平 / vue_cli · 提交

转到一个项目

作者 朱兆平
提交 e8c8469f9e799488392f17e9eeb94e7ae9cdbd13 1 个父辈 8034c3da

动态设置宽度 以及textarea的样式优化

内嵌 并排对比
正在显示 1 个修改的文件 包含 277 行增加 和 227 行删除
<template>
<el-row>
<el-card style="background-color: #F5F7FA">
<el-row class="toolbar" style="height:auto">
<el-form :model="addForm" :rules="rules" ref="addForm">
<el-divider content-position="left"><i class="el-icon-document"></i> 货物信息</el-divider>
<el-row>
<el-col :span="6">
<el-form-item label="" :label-width="formLabelWidth" prop="serialnumber">
<el-input v-model="addForm.serialnumber" autocomplete="off" disabled>
<template slot="prepend">流&emsp;&emsp;水</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="" :label-width="formLabelWidth" prop="waybill">
<el-input v-model="addForm.waybillmaster" autocomplete="off" suffix-icon="el-icon-document" clearable>
<template slot="prepend">主&emsp;&emsp;单</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="" :label-width="formLabelWidth" prop="waybill">
<el-input v-model="addForm.waybillsub" autocomplete="off" suffix-icon="el-icon-document" clearable>
<template slot="prepend">分&emsp;&emsp;单</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="" :label-width="formLabelWidth" prop="pcs">
<el-input v-model.number="addForm.pcs" autocomplete="off" suffix-icon="el-icon-files" clearable >
<template slot="prepend">件&emsp;&emsp;数</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="" :label-width="formLabelWidth" prop="weight">
<el-input v-model="addForm.weight" autocomplete="off" suffix-icon="el-icon-files" clearable>
<template slot="prepend">重&emsp;&emsp;量</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="" :label-width="formLabelWidth" prop="billweight">
<el-input v-model="addForm.billweight" autocomplete="off" suffix-icon="el-icon-files" clearable>
<template slot="prepend">计费重量</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="" :label-width="formLabelWidth" prop="vol">
<div class="my-text-area">
<div class="el-input-group__prepend prepand">体&emsp;&emsp;积</div>
<el-input v-model="addForm.vol"
type="textarea"
autosize
placeholder="请输入体积"
style="float: left;width:calc(100% - 89px)"
>
</el-input>
</div>
</el-form-item>
</el-col>
</el-row>
<el-divider content-position="left"><i class="el-icon-s-home"></i> 入库相关</el-divider>
<el-row>
<el-col :span="7">
<el-form-item label="" :label-width="formLabelWidth" prop="area">
<el-input v-model="addForm.area" autocomplete="off" style="width: 300px">
<template slot="prepend">库&emsp;&emsp;区</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="" :label-width="formLabelWidth" prop="location">
<el-input v-model="addForm.location" autocomplete="off" style="width: 300px">
<template slot="prepend">库&emsp;&emsp;位</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="" :label-width="formLabelWidth" prop="transcar">
<el-input v-model="addForm.transcar" autocomplete="off" style="width: 300px">
<template slot="prepend">运输车辆</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="" :label-width="formLabelWidth" prop="opter">
<el-input v-model="addForm.opter" autocomplete="off" style="width: 300px" disabled>
<template slot="prepend">经&nbsp;办&nbsp;人</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="" :label-width="formLabelWidth" prop="customername">
<el-input v-model="addForm.customername" autocomplete="off" style="width: 300px">
<template slot="prepend">货主名称</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
<!-- <el-row>
<el-col :span="7">
<el-form-item label="" :label-width="formLabelWidth" prop="house">
<el-input v-model="addForm.house" autocomplete="off" style="width: 300px">
<template slot="prepend">出入库仓库</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="" :label-width="formLabelWidth" prop="opttime">
<el-input v-model="addForm.opttime" autocomplete="off" style="width: 300px">
<template slot="prepend">出入库时间</template>
</el-input>
<el-date-picker
v-model="addForm.opttime"
type="datetime" size="mini"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd HH:mm:ss"
style="width:300px"
placeholder="选择出入库时间">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="" :label-width="formLabelWidth" prop="station">
<el-input v-model="addForm.station" autocomplete="off" style="width: 300px">
<template slot="prepend">出入库场站</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
-->
<el-divider content-position="left"><i class="el-icon-mobile-phone"></i> 业务属性</el-divider>
<el-row>
<el-col :span="7">
<el-form-item label="" :label-width="formLabelWidth" prop="transtype">
<!-- <el-input v-model="addForm.transtype" autocomplete="off" style="width: 300px">-->
<!-- <template slot="prepend">交易类型</template>-->
<!-- </el-input>-->
<el-select v-model="addForm.transtype" placeholder="请选择交易类型" autocomplete="off" style="width: 300px">
<el-option
v-for="item in options1"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="" :label-width="formLabelWidth" prop="goodstype">
<!-- <el-input v-model="addForm.goodstype" autocomplete="off" style="width: 300px">-->
<!-- <template slot="prepend">出入库货物类型</template>-->
<!-- </el-input>-->
<el-select v-model="addForm.goodstype" placeholder="请选择出入库货物类型" autocomplete="off" style="width: 300px">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="" :label-width="formLabelWidth" prop="ietype">
<el-select v-model="addForm.ietype" placeholder="出入库类型" size="mini" style="width: 300px">
<el-option label="出入库类型-进" value="I"></el-option>
<el-option label="出入库类型-出" value="E"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<!-- <el-form-item label="" :label-width="formLabelWidth" prop="status">-->
<!-- <el-input v-model="addForm.status" autocomplete="off" style="width: 300px">-->
<!-- <template slot="prepend">状&emsp;&emsp;态</template>-->
<!-- </el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="" :label-width="formLabelWidth" prop="status">-->
<!-- <el-select v-model="addForm.status" placeholder="请选择状态" size="mini" style="width: 300px">-->
<!-- <el-option label="状态-失败" value="0"></el-option>-->
<!-- <el-option label="状态-成功" value="1"></el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
</el-col>
</el-row>
<!-- <el-row>
<el-col :span="7">
<el-form-item label="" :label-width="formLabelWidth" prop="custel">
<el-input v-model="addForm.custel" autocomplete="off" style="width: 300px">
<template slot="prepend">出入库客户联系电话</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="" :label-width="formLabelWidth" prop="customer">
<el-input v-model="addForm.customer" autocomplete="off" style="width: 300px">
<template slot="prepend">出入库客户联系人姓名</template>
</el-input>
</el-form-item>
</el-col>
</el-row>-->
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="apply_dialog.addDialog = false" >取 消</el-button>
<el-button type="primary" @click="dialogApply==='create'?add():edit()" >提 交</el-button>
</div>
</el-row>
<!-- 搜索区域-->
<el-row :gutter="10" class="toolbar">
<el-col :span="7">
<el-input v-model="queryInfo.waybill" prefix-icon="el-icon-search" size="small" style="width: 280px"
<el-input v-model="queryInfo.waybill" prefix-icon="el-icon-search" style="width: 280px"
placeholder="货物单号" clearable>
<template slot="prepend">货物单号</template>
</el-input>
</el-col>
<el-col :span="6">
<el-button type="primary" icon="el-icon-search" size="small" @click="getList()">
<el-col :span="8">
<el-button type="primary" icon="el-icon-search" @click="getList()">
查询
</el-button>
<el-button type="success" icon="el-icon-edit" size="small" @click="applyAdd()">新增</el-button>
<el-button type="success" icon="el-icon-edit" @click="applyAdd()">直接入库</el-button>
<el-button type="success" icon="el-icon-edit" @click="applyAdd()">批量入库</el-button>
</el-col>
</el-row>
<!-- 列表区域-->
<el-row>
<template>
<el-table
:data="tableData"
border
:cell-style="{textAlign:'center'}"
style="border-radius: 10px 10px 0px 0px;line-height: 25px"
:header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small"
:header-cell-style="{background:'#6F8294',color:'#FFFFFF'}"
>
<el-table-column
fixed
... ... @@ -145,7 +356,6 @@
</template>
</el-table-column>
</el-table>
</template>
</el-row>
<el-row style="margin-top: 10px" class="toolbar">
<el-pagination
... ... @@ -158,208 +368,15 @@
:total="total">
</el-pagination>
</el-row>
<el-row>
<el-dialog :title="dialogMap[dialogApply]" :visible.sync="apply_dialog.addDialog" width="80%" >
<el-form :model="addForm" :rules="rules" ref="addForm" style="margin-top: 40px">
<el-row>
<el-col :span="7">
<el-form-item label="" :label-width="formLabelWidth" prop="waybill">
<el-input v-model="addForm.waybill" autocomplete="off" size="small" style="width: 300px">
<template slot="prepend">货物单号</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="" :label-width="formLabelWidth" prop="weight">
<el-input v-model="addForm.weight" autocomplete="off" size="small" style="width: 300px">
<template slot="prepend">重&emsp;&emsp;量</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="" :label-width="formLabelWidth" prop="vol">
<el-input v-model="addForm.vol" autocomplete="off" size="small" style="width: 300px">
<template slot="prepend">体&emsp;&emsp;积</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="7">
<el-form-item label="" :label-width="formLabelWidth" prop="pcs">
<el-input v-model="addForm.pcs" autocomplete="off" size="small" style="width: 300px">
<template slot="prepend">件&emsp;&emsp;数</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="" :label-width="formLabelWidth" prop="billweight">
<el-input v-model="addForm.billweight" autocomplete="off" size="small" style="width: 300px">
<template slot="prepend">计费重量</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="" :label-width="formLabelWidth" prop="area">
<el-input v-model="addForm.area" autocomplete="off" size="small" style="width: 300px">
<template slot="prepend">库&emsp;&emsp;区</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="7">
<el-form-item label="" :label-width="formLabelWidth" prop="location">
<el-input v-model="addForm.location" autocomplete="off" size="small" style="width: 300px">
<template slot="prepend">库&emsp;&emsp;位</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="" :label-width="formLabelWidth" prop="serialnumber">
<el-input v-model="addForm.serialnumber" autocomplete="off" size="small" style="width: 300px">
<template slot="prepend">流水&emsp;号</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="" :label-width="formLabelWidth" prop="transtype">
<!-- <el-input v-model="addForm.transtype" autocomplete="off" size="small" style="width: 300px">-->
<!-- <template slot="prepend">交易类型</template>-->
<!-- </el-input>-->
<el-select v-model="addForm.transtype" placeholder="请选择交易类型" autocomplete="off" size="small" style="width: 300px">
<el-option
v-for="item in options1"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="7">
<el-form-item label="" :label-width="formLabelWidth" prop="house">
<el-input v-model="addForm.house" autocomplete="off" size="small" style="width: 300px">
<template slot="prepend">出入库仓库</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="" :label-width="formLabelWidth" prop="opttime">
<!-- <el-input v-model="addForm.opttime" autocomplete="off" size="small" style="width: 300px">-->
<!-- <template slot="prepend">出入库时间</template>-->
<!-- </el-input>-->
<el-date-picker
v-model="addForm.opttime"
type="datetime" size="mini"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd HH:mm:ss"
style="width:300px"
placeholder="选择出入库时间">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="" :label-width="formLabelWidth" prop="station">
<el-input v-model="addForm.station" autocomplete="off" size="small" style="width: 300px">
<template slot="prepend">出入库场站</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="7">
<el-form-item label="" :label-width="formLabelWidth" prop="transcar">
<el-input v-model="addForm.transcar" autocomplete="off" size="small" style="width: 300px">
<template slot="prepend">运输车辆信息</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="" :label-width="formLabelWidth" prop="opter">
<el-input v-model="addForm.opter" autocomplete="off" size="small" style="width: 300px">
<template slot="prepend">出入库经办人</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="" :label-width="formLabelWidth" prop="customername">
<el-input v-model="addForm.customername" autocomplete="off" size="small" style="width: 300px">
<template slot="prepend">出入库客户名称</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="7">
<el-form-item label="" :label-width="formLabelWidth" prop="goodstype">
<!-- <el-input v-model="addForm.goodstype" autocomplete="off" size="small" style="width: 300px">-->
<!-- <template slot="prepend">出入库货物类型</template>-->
<!-- </el-input>-->
<el-select v-model="addForm.goodstype" placeholder="请选择出入库货物类型" autocomplete="off" size="small" style="width: 300px">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="" :label-width="formLabelWidth" prop="ietype">
<el-select v-model="addForm.ietype" placeholder="出入库类型" size="mini" style="width: 300px">
<el-option label="出入库类型-进" value="I"></el-option>
<el-option label="出入库类型-出" value="E"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<!-- <el-form-item label="" :label-width="formLabelWidth" prop="status">-->
<!-- <el-input v-model="addForm.status" autocomplete="off" size="small" style="width: 300px">-->
<!-- <template slot="prepend">状&emsp;&emsp;态</template>-->
<!-- </el-input>-->
<!-- </el-form-item>-->
<el-form-item label="" :label-width="formLabelWidth" prop="status">
<el-select v-model="addForm.status" placeholder="请选择状态" size="mini" style="width: 300px">
<el-option label="状态-失败" value="0"></el-option>
<el-option label="状态-成功" value="1"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="7">
<el-form-item label="" :label-width="formLabelWidth" prop="custel">
<el-input v-model="addForm.custel" autocomplete="off" size="small" style="width: 300px">
<template slot="prepend">出入库客户联系电话</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="" :label-width="formLabelWidth" prop="customer">
<el-input v-model="addForm.customer" autocomplete="off" size="small" style="width: 300px">
<template slot="prepend">出入库客户联系人姓名</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="apply_dialog.addDialog = false" size="small">取 消</el-button>
<el-button type="primary" @click="dialogApply==='create'?add():edit()" size="small">提 交</el-button>
</div>
</el-dialog>
</el-row>
</el-card>
</el-row>
</template>
<script>
import {selectInventroyrecords,delInventoryrecord,addInventoryrecord,ediInventroyrecord} from '../../api/consigner/station';
import dateUtil from "@/utils/index"
import jsutil from "@/common/js/util";
import {mapActions, mapGetters} from 'vuex'
export default {
name: "inventroyrecord",
... ... @@ -391,9 +408,9 @@
custel: '',
customer: '',
customername: '',
goodstype: '',
goodstype: '运单',
house:'',
ietype:'',
ietype:'I',
location:'',
opter:'',
opttime: '',
... ... @@ -402,7 +419,7 @@
station: '',
status: '',
transcar: '',
transtype:'',
transtype:'销售入库',
vol:'',
waybill:'',
weight:'',
... ... @@ -433,25 +450,27 @@
value: '销售入库',
label: '交易类型-销售入库'
}],
formLabelWidth: '80px',
formLabelWidth: '5px',
rules: {
userName: [
// { required: true, message: '请输入申请人', trigger: 'blur' },
// // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
// ],
// applyTime: [
// { required: true, message: '请选择时间', trigger: 'change' }
// ],
// needCount: [
// { required: true, message: '请输入需要车辆数量', trigger: 'blur' },
// ],
// orginStation: [
// { required: true, message: '请输入起始场站', trigger: 'blur' },
// ],
// endStation: [
// { required: true, message: '请输入目的场站', trigger: 'blur' },
// ],
pcs: [
{ required: true, message: '件数必填', trigger: 'blur' },
{ type:"number", message: '件数必须为整数'}
],
weight: [
{ required: true, message: '重量为必填项', trigger: 'blur' },
// eslint-disable-next-line no-useless-escape
{ pattern: /^([0-9]+)(\.\d{2})?$/, message: '只允许输入数字与小数,支持到小数点后两位' }
],
billweight: [
{ required: true, message: '计费重量为必填项', trigger: 'blur' },
{ pattern: /^([0-9]+)(\.\d{2})?$/, message: '只允许输入数字与小数,支持到小数点后两位' }
],
orginStation: [
{ required: true, message: '请输入起始场站', trigger: 'blur' },
],
endStation: [
{ required: true, message: '请输入目的场站', trigger: 'blur' },
]
},
}
},
... ... @@ -587,13 +606,27 @@
}).catch(() => {
})
},
serialNumber:()=>{
let serialDate= new Date();
let serialCode = serialDate.format("yyyyMMddhhmmssS")
return serialCode
}
},
mounted() {
this.getList();
// this.getYardList();
// this.getList();
this.addForm.serialnumber = this.serialNumber()
if (!jsutil.checkNull(this.getUserInfoStore) && !jsutil.checkNull(this.getUserInfoStore.username)){
this.$message.error("获取用户信息出错")
}else{
this.addForm.opter = this.getUserInfoStore.username
}
},
computed: {
...mapGetters(['getUserInfoStore','getUserMenuStore']) // 动态计算属性，相当于this.$store.getters.resturantName
},
}
</script>
... ... @@ -604,8 +637,25 @@
/*line-height: 60px;*/
vertical-align: middle;
border-radius: 5px 5px 5px 5px;
padding: 15px 0 0 20px;
padding: 10px 10px 0 10px;
box-shadow: 0px 5px 5px #e5e8eb;
}
.my-text-area .prepand{
float: left;
width:89px;
height: 28px;
font-size: 12px;
line-height: 28px;
}
</style>
<style>
.my-text-area .el-textarea__inner{
min-height: 28px;
height: 28px;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
</style>
... ...