mashangyoujiu/Application/Retail/View/ModifyPriceOrder/details.html

<!doctype html>
<html>
<!--[1.5.46]-->
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/vue/element-ui.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/Retail/css/myscroll.css"/>
    <script type="text/javascript" charset="utf-8" src="__PUBLIC__/jquery/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="__PUBLIC__/vue/js/vue2.5.16.js"></script>
    <script type="text/javascript" charset="utf-8" src="__PUBLIC__/vue/element-ui.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            padding: 20px;
        }
        [v-cloak] {
            display: none;
        }

        th {
            background-color: #f5f7fa !important;
        }

        th > .cell {
            white-space: nowrap !important;
            text-align: center;
        }

        th, td {
            text-align: center;
            line-height: 30px;
            padding: 0;
        }

        th > .cell, td > .cell {
            text-align: center;
        }

        .el-pagination {
            padding: 8px;
        }

        .el-input {
            width: 200px;
        }

        .el-table__row > td:last-child > .cell {
            white-space: nowrap;
        }

        .center-content {
            margin: 20px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .center-content .el-input__inner {
            padding: 0 15px;
            text-align: left;
        }

        .small-dialog-content {
            margin-left: calc(7% + 40px);
        }

        .goods_title {
            padding: 10px 0;
        }

        .el-input {
            margin-bottom: 10px;
        }

        .details-all {
            padding: 10px;
            background: #f5f7fa;
            color: #606266;
            border: 1px solid #ebeef5;
            border-top: none;
            margin-bottom: 20px;
        }

        .details-all-lists {
            font-size:14px;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            width: 100%;
        }

        .details-all-list {
            width: 33%;
        }

        .form-textarea {
            margin-bottom: 20px;
        }

        .form-textarea-title {
            margin-bottom: 20px;
        }

        .form-button {
            display: flex;
            justify-content: flex-end;
        }

        .el-textarea.is-disabled .el-textarea__inner {
            background-color: #f5f7fa;
            border-color: #e4e7ed;
            cursor: not-allowed;
        }
    </style>
</head>
<body>
<div id="details" v-cloak>
    <div style="text-align: right;margin-bottom: 10px;">
        <if condition="$authArr['exportOperation'] eq true">
            <el-button type="primary" plain @click="exportOperation" size="small">导出</el-button>
        </if>
    </div>
    <div class="details-all">
        <div class="details-all-lists">
            <div class="details-all-list">
                调价单号：<span>{{order_number}}</span>
            </div>
            <div class="details-all-list">
                调价仓库：<span>{{warehouse}}</span>
            </div>
            <div class="details-all-list">
                调价时间：<span>{{add_time}}</span>
            </div>
        </div>
    </div>
    <div style="border: 1px solid rgb(230, 230, 230);">
        <el-table border :data="detailsList" style="calc(100% - 1px); box-sizing: border-box; border: none;"
                  size="mini"
                  max-height="500"
                  v-loading="loading"
                  element-loading-text="数据获取中"
                  element-loading-spinner="el-icon-loading">
            <el-table-column prop="index" label="序号" show-overflow-tooltip></el-table-column>
            <el-table-column prop="goods_name" label="商品名称" show-overflow-tooltip></el-table-column>
            <el-table-column prop="sku_name" label="规格" show-overflow-tooltip></el-table-column>
            <el-table-column prop="goods_number" label="货号" show-overflow-tooltip></el-table-column>
            <el-table-column prop="goods_code" label="条码" show-overflow-tooltip></el-table-column>
            <el-table-column prop="company" label="单位" show-overflow-tooltip></el-table-column>
            <el-table-column prop="sku_num" label="规格基数" show-overflow-tooltip></el-table-column>
            <el-table-column prop="purchase_price" label="原进价" show-overflow-tooltip></el-table-column>
            <el-table-column prop="cost_price" label="进价" show-overflow-tooltip></el-table-column>
            <el-table-column prop="remarks" label="备注" show-overflow-tooltip></el-table-column>
        </el-table>
    </div>
    <div class="form-textarea" style="margin-top: 10px;">
        <div class="form-textarea-title">订单备注</div>
        <el-input
                type="textarea"
                :rows="2"
                :disabled="true"
                v-model="remarks">
        </el-input>
    </div>
</div>
</body>
<script type="text/javascript">
    var details = new Vue({
        el: "#details",
        data: function () {
            return {
                id: "{$id}",
                detailsList: [],
                warehouse: "{$warehouse}",
                add_time: "{$info['add_time']}",
                order_number: "{$info['order_number']}",
                remarks: "{$info['remarks']}",
                loading: true,
            }
        },
        methods: {
            //导出
            exportOperation: function () {
                var id = this.id;
                window.location.href = "{:U('detailsExport')}?id=" + id
            },
            //查询
            getData: function () {
                var that = this;
                var id = that.id;
                $.ajax({
                    url: "{:U('detailsList')}",
                    type: "post",
                    data: {
                        id: id
                    },
                    success: function (res) {
                        that.loading = false;
                        that.detailsList = res.data;
                    }
                })
            },
        },
        created: function () {
            this.getData();
        }
    })
</script>
</html>