<template>
    <div>
        <!--            列表区域-->
        <el-row style="margin-top: -10px">
            <el-row class="toolbar" style="height: 70px">
                <el-col :span="3">
                    <div class="analysis_title">（出库）总件数:</div>
                    <div class="analysis_text">
                        <el-input v-model="pcsSumE" readonly>
                        </el-input>
                    </div>
                </el-col>
                <el-col :span="1">
                    <el-divider direction="vertical"></el-divider>
                </el-col>
                <el-col :span="3">
                    <div class="analysis_title">（出库）总重量:</div>
                    <div class="analysis_text">
                        <el-input v-model="weightSumE" readonly>
                        </el-input>
                    </div>
                </el-col>
                <el-col :span="1">
                    <el-divider direction="vertical"></el-divider>
                </el-col>
                <el-col :span="3" >
                    <div class="analysis_title">（出库）总体积:</div>
                    <div class="analysis_text">
                        <el-input v-model="goodsvolSumE"  readonly>
                        </el-input>
                    </div>
                </el-col>
                <el-col :span="1">
                    <el-divider direction="vertical"></el-divider>
                </el-col>
                <el-col :span="3">
                    <div class="analysis_title">（进库）总件数:</div>
                    <div class="analysis_text">
                        <el-input v-model="pcsSumI" readonly>
                        </el-input>
                    </div>
                </el-col>
                <el-col :span="1">
                    <el-divider direction="vertical"></el-divider>
                </el-col>
                <el-col :span="3">
                    <div class="analysis_title">（进库）总重量:</div>
                    <div class="analysis_text">
                        <el-input v-model="weightSumI" readonly>
                        </el-input>
                    </div>
                </el-col>
                <el-col :span="1">
                    <el-divider direction="vertical"></el-divider>
                </el-col>
                <el-col :span="3" >
                    <div class="analysis_title">（进库）总体积:</div>
                    <div class="analysis_text">
                        <el-input v-model="goodsvolSumI"  readonly>
                        </el-input>
                    </div>
                </el-col>
            </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"
                >
                    <el-table-column
                            fixed
                            prop="waybill"
                            label="货物单号"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            fixed
                            prop="billfhl"
                            label="分单号"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="pcs"
                            label="件数"
                            width="60">
                    </el-table-column>
                    <el-table-column
                            prop="billweight"
                            label="出入库重量"
                            width="90">
                    </el-table-column>
                    <el-table-column
                            prop="feeweight"
                            label="收费重量"
                            width="70">
                    </el-table-column>
                    <el-table-column
                            prop="goodssize"
                            label="尺寸"
                            width="140">
                    </el-table-column>
                    <el-table-column
                            prop="goodsvol"
                            label="体积"
                            width="60">
                    </el-table-column>
                    <el-table-column
                            prop="remark4"
                            label="随货文件"
                            show-overflow-tooltip
                            width="90">
                    </el-table-column>
                    <el-table-column
                            prop="location"
                            label="库位"
                            width="60">
                    </el-table-column>
                    <el-table-column
                            prop="serialnumber"
                            label="流水号"
                            width="160">
                    </el-table-column>
<!--                    <el-table-column-->
<!--                            prop="station"-->
<!--                            label="出入库场站"-->
<!--                            width="100">-->
<!--                    </el-table-column>-->
<!--                    <el-table-column-->
<!--                            prop="status"-->
<!--                            label="状态"-->
<!--                            width="80">-->
<!--                        <template slot-scope="scope">-->
<!--                            <span v-if="scope.row.status ==='0'">失败</span>-->
<!--                            <span v-if="scope.row.status ==='1'">成功</span>-->
<!--                        </template>-->
<!--                    </el-table-column>-->
<!--                    <el-table-column-->
<!--                            prop="transcar"-->
<!--                            label="运输车辆信息"-->
<!--                            width="100">-->
<!--                    </el-table-column>-->
<!--                    <el-table-column-->
<!--                            prop="transtype"-->
<!--                            label="交易类型"-->
<!--                            width="100">-->
<!--                    </el-table-column>-->
<!--                    <el-table-column-->
<!--                            prop="custel"-->
<!--                            label="客户联系电话"-->
<!--                            width="140">-->
<!--                    </el-table-column>-->
<!--                    <el-table-column-->
<!--                            prop="customer"-->
<!--                            label="联系人姓名"-->
<!--                            width="100">-->
<!--                    </el-table-column>-->
<!--                    <el-table-column-->
<!--                            prop="goodstype"-->
<!--                            label="货物类型"-->
<!--                            width="80">-->
<!--                    </el-table-column>-->
<!--                    <el-table-column-->
<!--                            prop="house"-->
<!--                            label="出入库仓库"-->
<!--                            width="100">-->
<!--                    </el-table-column>-->
                    <el-table-column
                            prop="ietype"
                            label="类型"
                            width="60">
                        <template slot-scope="scope">
                            <span v-if="scope.row.ietype ==='I'">进</span>
                            <span v-if="scope.row.ietype ==='E'">出</span>
                            <span v-if="scope.row.ietype ==='C'">退</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="packingid"
                            label="包装类型"
                            width="95">
<!--                        <template slot-scope="scope">-->
<!--                            {{gettype(scope.row.packingid)}}-->
<!--                        </template>-->
                    </el-table-column>
                    <el-table-column
                            prop="custcode"
                            label="客户代码"
                            width="80">
                    </el-table-column>
                    <el-table-column
                            prop="opter"
                            label="出入库经办人"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="licenseplate"
                            label="车辆信息"
                            width="140">
                    </el-table-column>
                    <el-table-column
                            prop="opttime"
                            label="出入库时间"
                            width="140">
                    </el-table-column>
                    <el-table-column prop="image" label="图片"  width="140" >
                        <template slot-scope="scope">
                            <el-image
                                    style="width: 100px; height: 30px"
                                    :src="scope.row.annex"
                                    ></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="remark3"
                            label="破损"
                            width="140">
                    </el-table-column>
                    <el-table-column
                            prop="remark1"
                            label="备注"
                            width="140">
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            label="操作"
                            width="220">
                        <template slot-scope="scope">
                            <el-button type="success" size="mini" @click="outBound(scope.row)" :disabled="outBoundStatus(scope.row)">出库</el-button>
                            <!--<el-button v-else type="success" size="mini" @click="outBound(scope.row)">出库</el-button>-->
                            <el-button  type="primary" :disabled="inBoundStatus(scope.row)" size="mini" @click="inBound(scope.row)">回库</el-button>
                            <!--<el-button v-else type="primary" size="mini" @click="inBound(scope.row)">回库</el-button>-->
                            <el-button type="warning" size="mini" @click="reBound(scope.row)" :disabled="reBoundStatus(scope.row)">退库</el-button>
                            <!--<el-button v-else type="warning"  size="mini" @click="reBound(scope.row)">退库</el-button>-->
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </el-row>
        <el-row style="margin-top: 10px" class="toolbar">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="tabulationInfo.pageNum"
                    :page-size="tabulationInfo.pageSize"
                    :page-sizes="[10, 50, 100, 500]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :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">
                                <div class="my-text-area">
                                    <div class="el-input-group__prepend prepand">交易类型</div>
                                    <el-select v-model="addForm.transtype" placeholder="请选择交易类型"  autocomplete="off" size="small" style="width: 210px">
                                        <el-option
                                                v-for="item in options1"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                </div>
                            </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">
                                <div class="my-text-area">
                                    <div class="el-input-group__prepend prepand">交易类型</div>
                                    <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:210px"
                                            placeholder="选择出入库时间">
                                    </el-date-picker>
                                </div>
                            </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="goodstype">
                                <div class="my-text-area">
                                    <div class="el-input-group__prepend prepand">交易类型</div>
                                    <el-select v-model="addForm.goodstype" placeholder="请选择出入库货物类型"  autocomplete="off" size="small" style="width: 170px">
                                        <el-option
                                                v-for="item in options"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="" :label-width="formLabelWidth"  prop="ietype">
                                <div class="my-text-area">
                                    <div class="el-input-group__prepend prepand">出入库类型</div>
                                    <el-select v-model="addForm.ietype" placeholder="出入库类型" size="mini" style="width: 210px">
                                        <el-option label="出入库类型-进" value="I"></el-option>
                                        <el-option label="出入库类型-出" value="E"></el-option>
                                    </el-select>
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="" :label-width="formLabelWidth"  prop="status">
                                <div class="my-text-area">
                                    <div class="el-input-group__prepend prepand">状&emsp;&emsp;态</div>
                                    <el-select v-model="addForm.status" placeholder="请选择状态" size="mini" style="width: 210px">
                                        <el-option label="状态-失败" value="0"></el-option>
                                        <el-option label="状态-成功" value="1"></el-option>
                                    </el-select>
                                </div>
                            </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="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>
                    <el-button disabled type="primary" @click="zancun()" size="small">暂存</el-button>
                </div>
            </el-dialog>
        </el-row>
    </div>

</template>

<script>
    import {
        delInventoryrecord,
        ediInventroyrecord,
        ExtNewinventroyrecord,
        selectNewInventroyrecords,ReNewinventroyrecord,CancleNewinventroyrecord
    } from "../../api/consigner/station";
    import packge from '@/api/nmms/packge'

    export default {
        name: "Tabulation",
        props: [
            'tabulationInfo'
        ],
        data(){
            return {
                tableData: [],
                total: 0,
                pcsSumI: '',
                pcsSumE: '',
                weightSumE: '',
                weightSumI: '',
                goodsvolSumE: '',
                goodsvolSumI: '',
                dialogMap: {
                    update: '编辑',
                    create: '新增'
                },
                dialogApply: 'create',
                apply_dialog: {
                    // 添加对话框
                    addDialog: false,
                    // 编辑对话框
                    editDialog: false
                },
                addForm: {
                    area: '',
                    billweight: '',
                    custel: '',
                    customer: '',
                    customername: '',
                    goodstype: '',
                    house:'',
                    ietype:'',
                    location:'',
                    opter:'',
                    opttime: '',
                    pcs: '',
                    serialnumber: '',
                    station: '',
                    status: '',
                    transcar: '',
                    transtype:'',
                    vol:'',
                    waybill:'',
                    weight:'',
                    remark:'',
                    remark1:'',
                    remark2:'',
                    remark3:'',
                    remark4:'',
                    remark5:'',
                },
                options: [
                    {
                    value: '板箱',
                    label: '货物类型-板箱'
                }, {
                    value: '运单',
                    label: '货物类型-运单'
                }, {
                    value: '托盘',
                    label: '货物类型-托盘'
                }],
                options1: [{
                    value: '采购入库',
                    label: '交易类型-采购入库'
                }, {
                    value: '生产入库',
                    label: '交易类型-生产入库'
                }, {
                    value: '销售入库',
                    label: '交易类型-销售入库'
                }],
                zancundata:[],
                formLabelWidth: '80px',
                packgeOptions:packge,
                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' },
                        // ],
                    ],
                },
            }
        },
        methods:{
            gettype(e){
                for (var i = 0; i < this.packgeOptions.length; i++) {
                    if (this.packgeOptions[i].code == e) { //dictValue，dictLabel保持和上面定义一致
                        return this.packgeOptions[i].name;
                    }
                }
            },
            getList() {
                const _this = this
                selectNewInventroyrecords(this.tabulationInfo).then((response) => {
                    const res = response.data
                    console.log(response.data)
                    if (res.code !== '200') {
                        return _this.$message.error('获取消息收发记录，失败！')
                    }
                    // 获取列表数据
                    _this.tableData = res.data.list
                    // 获取列表的总记录数
                    _this.total = res.data.total
                    _this.goodsvolSumI = res.data.goodsvolSumI
                    _this.goodsvolSumE = res.data.goodsvolSumE
                    _this.pcsSumE = res.data.pcsSumE
                    _this.pcsSumI = res.data.pcsSumI
                    _this.weightSumE = res.data.weightSumE
                    _this.weightSumI = res.data.weightSumI
                    _this.$message.success('获取消息收发记录，成功！')
                }).catch(error => {
                    // 关闭加载
                    _this.$message.error(error.toString())
                })
            },
            handleSizeChange(val) {
                this.tabulationInfo.pageSize = val
                this.getList()
            },
            handleCurrentChange(val) {
                this.tabulationInfo.pageNum = val
                this.getList()
            },
            //出库
            outBound(row) {
                this.$confirm('是否确认出库?',  {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                ).then(() => {
                    // console.log(row);
                    ExtNewinventroyrecord({serialnumber:row.serialnumber}).then((response) => {
                        console.log(row)
                        const res = response.data
                        if (res.code != '200') {
                            return this.$message.error(res.msg)
                        }
                        this.$message.success(res.msg)
                        this.getList()
                    }).catch(error => {
                        this.$message.error(res.msg)
                    })
                }).catch(() => {
                })
            },
            //回库
            inBound(row) {
                this.$confirm('是否确认回库?',  {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                ).then(() => {
                    // console.log(row);
                    ReNewinventroyrecord(row).then((response) => {
                        console.log(row)
                        const res = response.data
                        if (res.code != '200') {
                            return this.$message.error(res.msg)
                        }
                        this.$message.success(res.msg)
                        this.getList()
                    }).catch(error => {
                        this.$message.error(res.msg)
                    })
                }).catch(() => {
                })
            },
            //退库
            reBound(row) {
                this.$confirm('是否确认退库?',  {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                ).then(() => {
                    // console.log(row);
                    CancleNewinventroyrecord(row).then((response) => {
                        // console.log(row)
                        const res = response.data
                        if (res.code != '200') {
                            return this.$message.error(res.msg)
                        }
                        this.$message.success(res.msg)
                        this.getList()
                    }).catch(error => {
                        this.$message.error(error)
                    })
                }).catch(() => {
                })
            },
            // 删除
            applyDel(index, row) {
                // 弹框询问是否删除？
                this.$confirm('此操作永久删除该消息收发记录, 是否继续?', '警告', {
                        confirmButtonText: '确定删除',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                ).then(() => {
                    // console.log(row);
                    delInventoryrecord({uuid:row.uuid}).then((response) => {
                        // console.log(row)
                        const res = response.data
                        if (res.code != '200') {
                            return this.$message.error(res.msg)
                        }
                        this.$message.success(res.msg)
                        this.getList()
                    }).catch(error => {
                        this.$message.error(res.msg)
                    })
                }).catch(() => {
                })
            },
            // 打开编辑
            applyEdit(row) {
                this.apply_dialog.addDialog = true;
                this.dialogApply = 'update';
                this.addForm=row;
            },
            // 编辑功能
            edit() {
                // 进行表单的预验证
                this.$refs.addForm.validate(valid => {
                    // 未通过，表单预校验
                    if (!valid) return
                    ediInventroyrecord(this.addForm).then((response) => {
                        console.log(row)
                        const res = response.data
                        if (res.code != '200') {
                            return this.$message.error(res.msg)
                        }
                        this.$message.success(res.msg)
                        // 隐藏对话框
                        this.apply_dialog.addDialog = false
                        // 刷新列表
                        this.getList()
                    }).catch(error => {
                        this.$message.error(error.toString())
                    })
                })
            },

            outBoundStatus:(row)=>{
                if(row.ietype=='I' && row.goodsstatus=='1' ||row.ietype=='E' ||row.ietype=='C'){
                    return true;
                }else{
                    return false;
                }
            },
            inBoundStatus:(row)=>{
                if(row.ietype=='I' || row.ietype=='C'){
                    return true;
                }else{
                    return false;
                }
            },
            reBoundStatus:(row)=>{
                if(row.ietype=='I' && row.goodsstatus=='0'){
                    return false;
                }else{
                    return true;
                }
            },

        },
        mounted() {
            this.getList();
        },
        watch:{
            tabulationInfo(value){
                console.log('from parent='+JSON.stringify(value))
            }
        }

    }
</script>

<style scoped>
    .toolbar{
        height: 60px;
        background-color: white;
        /*line-height: 60px;*/
        vertical-align: middle;
        border-radius: 5px 5px 5px 5px;
        padding: 15px 0 0 20px;
        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>