<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>报价</title>
    <meta name="author" content="JIAL">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta name="HandheldFriendly" content="true">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <link rel="icon" href="/static/image/JNlogo.png" type="image/x-icon">
    <link rel="stylesheet" href="/plugins/element-ui/index.css">
    <!-- import CSS -->
    <link rel="stylesheet" href="/static/zmquotation/css/index.css">
</head>
<body>
<div class="container" id="index-app">
    <div class="center-container">
        <div class="form-box">
            <el-form  label-width="45%" :model="formLabelAlign">
                <el-row>
                    <el-col :span="6">
                        <el-form-item  label="加工费" title="蒸汽费/钢丝铠装材料及加工费">
                            <el-input v-model="formLabelAlign.processingFee" placeholder="蒸汽费/钢丝铠装材料及加工费">
                                <template slot="append">%</template>
                            </el-input>
                        </el-form-item>
                    </el-col >
                    <el-col :span="6">
                        <el-form-item label="生产财务成本" title="生产财务成本">
                            <el-input v-model="formLabelAlign.prodFinancialCost" placeholder="生产财务成本">
                                <template slot="append">%</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="账期" title="账期">
                            <el-input v-model="formLabelAlign.accountPeriod" placeholder="账期">
                                <template slot="append">%</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="承兑" title="承兑">
                            <el-input v-model="formLabelAlign.acceptance" placeholder="承兑">
                                <template slot="append">%</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="公司管理成本" title="公司管理成本">
                            <el-input v-model="formLabelAlign.companyMgmtCost" placeholder="公司管理成本">
                                <template slot="append">%</template>
                            </el-input>
                        </el-form-item>
                    </el-col >
                    <el-col :span="6">
                        <el-form-item label="中标服务费" title="中标服务费">
                            <el-input v-model="formLabelAlign.bidServiceFee" placeholder="中标服务费">
                                <template slot="append">%</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="公司净利润" title="公司净利润">
                            <el-input v-model="formLabelAlign.netProfit" placeholder="公司净利润">
                                <template slot="append">%</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="业务费" title="业务费">
                            <el-input v-model="formLabelAlign.businessFee" placeholder="业务费">
                                <template slot="append">%</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="省">
                            <el-input :disabled="true" v-model="formLabelAlign.province" placeholder="省"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item  label="市">
                            <el-input :disabled="true" v-model="formLabelAlign.city" placeholder="市"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="区">
                            <el-input :disabled="true" v-model="formLabelAlign.district" placeholder="区"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" >
                        <el-form-item label="公里数">
                            <el-input v-model="formLabelAlign.kilometers" placeholder="公里数">
                                <template slot="append">KM</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="成本累计" title="成本累计">
                            <el-input v-model="formLabelAlign.cumulativeCost" placeholder="成本累计">
                                <template slot="append">¥</template>
                            </el-input>
                        </el-form-item>
                    </el-col >
                    <el-col :span="6">
                        <el-form-item label="底价" title="底价">
                            <el-input v-model="formLabelAlign.floorPrice" placeholder="底价">
                                <template slot="append">¥</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="可下浮" title="可下浮">
                            <el-input v-model="formLabelAlign.canFloat" placeholder="可下浮">
                                <template slot="append">%</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="实际成本比例" title="实际材料成本占厂价比例">
                            <el-input v-model="formLabelAlign.actualCostRatio" placeholder="实际材料成本占厂价比例">
                                <template slot="append">%</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="厂家金额" title="厂家金额">
                            <el-input v-model="formLabelAlign.manufAmount" placeholder="厂家金额">
                                <template slot="append">¥</template>
                            </el-input>
                        </el-form-item>
                    </el-col >
                    <el-col :span="6">
                        <el-form-item label="人工费" title="人工费">
                            <el-input v-model="formLabelAlign.laborCost" placeholder="人工费">
                                <template slot="append">%</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="盘具" title="盘具">
                            <el-input v-model="formLabelAlign.inventoryCost" placeholder="盘具">
                                <template slot="append">¥</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" >
                        <el-form-item label="运费">
                            <el-input v-model="formLabelAlign.freight" placeholder="运费">
                                <template slot="append">¥</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="button-box">
            <el-button type="text">选择地区</el-button>
            <el-button type="text">添加物料</el-button>
            <el-button type="text">刷新界面</el-button>
            <el-button type="text"></el-button>
        </div>
        <div class="table-box">
            <el-table
                    :data="tableData"
                    border
                    :cell-style="cellStyle"
                    :header-cell-style="{ background: '#eef1f6', color: '#606266', 'text-align': 'center' }">
                <el-table-column
                        fixed
                        width="180"
                        prop="kunnr1"
                        label="物料编码">
                </el-table-column>
                <el-table-column
                        width="180"
                        prop="kunnr2"
                        label="物料描述">
                </el-table-column>
                <el-table-column
                        width="180"
                        prop="kunnr3"
                        label="销售单位">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.kunnr3" >
                        </el-input>
                    </template>
                </el-table-column>
                <el-table-column
                        width="180"
                        prop="kunnr4"
                        label="厂价">
                </el-table-column>
                <el-table-column
                        width="180"
                        prop="kunnr5"
                        label="基准成本"
                        style="color: red">
                </el-table-column>
                <el-table-column
                        width="180"
                        prop="kunnr6"
                        label="现行采购成本">
                </el-table-column>
                <el-table-column
                        width="180"
                        prop="kunnr7"
                        label="保留字段1">
                </el-table-column>
                <el-table-column
                        width="180"
                        prop="kunnr8"
                        label="保留字段2">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        width="80"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" style="color: red;" type="text">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

    </div>

</div>


<script src="/plugins/vue/vue.js"></script>
<script src="/plugins/element-ui/index.js"></script>
<script src="/plugins/calendar/calendar.js"></script>
<script src="/plugins/axios/axios.min.js"></script>
<script src="/plugins/axios/request.js"></script>
<!-- import Script -->
<script src="/static/zmquotation/js/index.js"></script>

<script>
    new Vue({
        el: '#index-app',
        data() {
            return {
                labelPosition: 'right',
                formLabelAlign: {
                    processingFee: '0.60',      /*蒸汽费/钢丝铠装材料及加工费*/
                    prodFinancialCost: '0.40',  /*生产财务成本*/
                    accountPeriod: '1.20',      /*账期*/
                    acceptance: '0.90',         /*承兑*/
                    companyMgmtCost: '1.50',    /*公司管理成本*/
                    bidServiceFee: '0.44',      /*中标服务费*/
                    netProfit: '3.00',          /*公司净利润*/
                    businessFee: '2.00',        /*业务费*/
                    province: '',               /*省*/
                    city: '',                   /*市*/
                    district: '',               /*区*/
                    freight: '',                /*运费*/
                    cumulativeCost: '',         /*成本累计*/
                    floorPrice: '',             /*底价*/
                    canFloat: '',               /*可下浮*/
                    actualCostRatio: '',        /*实际材料成本占厂价比例*/
                    manufAmount: '',            /*厂家金额*/
                    laborCost: '',              /*人工费*/
                    inventoryCost: '',          /*盘具*/
                    kilometers: '',             /*公里数*/
                },
                tableData: [
                    { kunnr1: '001', kunnr2: '002', kunnr3: '003', kunnr4: '004', kunnr5: '005', kunnr6: '006', kunnr7: '007', kunnr8: '008' },
                    { kunnr1: '101', kunnr2: '102', kunnr3: '103', kunnr4: '104', kunnr5: '105', kunnr6: '106', kunnr7: '107', kunnr8: '108' },
                    // Add more rows as needed
                ],
            }
        },
        computed: {

        },
        created() {

        },
        mounted() {

        },
        methods: {
            async init () {

            },

            cellStyle({row, column, rowIndex, columnIndex}) {
                if(columnIndex === 0) {
                    return 'color : black; text-align : center; background : #E0E0E0; padding: 2px 0px 1px 0px';
                } else if (columnIndex === 8) {
                    return 'text-align : center; background : #F5F5F5; padding: 2px 0px 1px 0px';
                } else {
                    return ' text-align : center; height : 10px; padding: 2px 0px 1px 0px';
                }
            },



        },
    })
</script>
</body>
</html>