yos_web/src/optionSystem/optionOrder/detail/modules/setOrderCalc.vue

<template>
    <table bgcolor="#FAFAFA" cellpadding="0" style="width: 100%;" class="result">
        <tr style="width: 100px;">
            <td class="title">{{$t('光头')}}</td>
            <td>
                <div class="text1" v-if="!resultArr[0].itemname && !resultArr[0].actuatorbrand">-</div>
                <div v-else>
                    <div class="text1" style="margin-bottom: 8px;">
                        <el-tag style="margin-right: 10px;" size="small" type="warning">{{ resultArr[0] && resultArr[0].actuatorbrand || '无品牌' }}</el-tag>
                        <span>{{ resultArr[0] && resultArr[0].itemname || '无'}}</span>
                    </div>

                    <div class="descript">
                        <div class="item" v-if="resultArr.length && resultArr[0].itemno"><span style="color: #888888;">{{$t('料号')}}：</span>{{resultArr[0].itemno }}</div>
                        <div class="item" v-if="resultArr.length && resultArr[0].torque"><span style="color: #888888;">{{$t('扭矩')}}：</span>{{resultArr[0].torque }}</div>
                        <div class="item" v-if="resultArr.length && resultArr[0].flh"><span style="color: #888888;">{{$t('法兰号')}}：</span>{{resultArr[0].flh.join('-') }}</div>
                        <div class="item" v-if="resultArr.length && resultArr[0].caliber"><span style="color: #888888;">{{$t('公称通径')}}：</span>{{resultArr[0].caliber }}</div>
                        <div class="item" v-if="resultArr.length && resultArr[0].nominalpressure"><span style="color: #888888;">{{$t('公称压力')}}：</span>{{ tool.nominalPressureSet(resultArr[0].nominalpressure) }}</div>
                        <div class="item" v-if="resultArr.length && resultArr[0].stemmaterial"><span style="color: #888888;">{{$t('阀杆材质')}}：</span>{{resultArr[0].stemmaterial }}</div>
                        <div class="item" v-if="resultArr.length && resultArr[0].mainmaterial"><span style="color: #888888;">{{$t('主体材质')}}：</span>{{resultArr[0].mainmaterial }}</div>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td class="title">{{$t('节流件')}}</td>
            <td>
                <div class="text1" style="margin-bottom: 8px;">
                    <el-tag style="margin-right: 10px;" size="small" type="warning">{{ resultArr[1] && resultArr[1].actuatorbrand || '无品牌' }}</el-tag>
                    <span>{{ resultArr[1].itemname || '无' }}</span>
                </div>
                <div class="descript">
                    <!-- <div class="item" v-if="resultArr.length >= 2 && resultArr[1].actuatorname"><span style="color: #888888;">{{$t('执行器名称')}}：</span>{{resultArr[1].actuatorname }}</div> -->
                    <div class="item" v-if="resultArr.length >= 2 && resultArr[1].itemno"><span style="color: #888888;">{{$t('节流件料号')}}：</span>{{resultArr[1].itemno }}</div>
                    <div class="item" v-if="resultArr.length >= 2 && resultArr[1].itemname"><span style="color: #888888;">{{$t('节流件类型')}}：</span>{{resultArr[1].throttletype }}</div>
                    <div class="item" v-if="resultArr.length >= 2 && resultArr[1].itemname"><span style="color: #888888;">{{$t('Kv100')}}：</span>{{resultArr[1].kv100 }}</div>
                </div>
            </td>
        </tr>
        <!-- <tr>
            <td class="title">{{$t('辅件')}}</td>
            <td style="padding: 0;">
                <tr style="border-bottom: 1px solid #DDDDDD;" class="custom-table">
                    <div style="color: #333333;">{{$t('定位器')}}</div>
                    <div class="text1">
                        <el-tag style="margin-right: 10px;" size="small" type="warning" v-if="resultArr.filter(item => item.itemname == '定位器').length ">{{resultArr.filter(item => item.itemname == '定位器')[0].actuatorbrand }}</el-tag>
                        <span>{{ resultArr.filter(item => item.itemname == '定位器').length ? resultArr.filter(item => item.itemname == '定位器')[0].model : '-' }}</span>
                    </div>
                    <div style="color: #333333;">{{$t('电磁阀')}}</div>
                    <div class="text1">
                        <el-tag style="margin-right: 10px;" size="small" type="warning" v-if="resultArr.filter(item => item.itemname == '电磁阀').length ">{{resultArr.filter(item => item.itemname == '电磁阀')[0].actuatorbrand }}</el-tag>
                        <span>{{ resultArr.filter(item => item.itemname == '电磁阀').length ? resultArr.filter(item => item.itemname == '电磁阀')[0].model : '-' }}</span>
                    </div>
                </tr>

                <tr class="custom-table">
                    <div style="color: #333333;">{{$t('限位开关')}}</div>
                    <div class="text1">
                        <el-tag style="margin-right: 10px;" size="small" type="warning" v-if="resultArr.filter(item => item.itemname == '限位开关').length ">{{resultArr.filter(item => item.itemname == '限位开关')[0].actuatorbrand }}</el-tag>
                        <span>{{ resultArr.filter(item => item.itemname == '限位开关').length ? resultArr.filter(item => item.itemname == '限位开关')[0].model : '-' }}</span>
                    </div>
                    <div style="color: #333333;">{{$t('过滤减压阀')}}</div>
                    <div class="text1">
                        <el-tag style="margin-right: 10px;" size="small" type="warning" v-if="resultArr.filter(item => item.itemname == '过滤减压阀').length ">{{resultArr.filter(item => item.itemname == '过滤减压阀')[0].actuatorbrand }}</el-tag>
                        <span>{{ resultArr.filter(item => item.itemname == '过滤减压阀').length ? resultArr.filter(item => item.itemname == '过滤减压阀')[0].model : '-' }}</span>
                    </div>
                </tr>
            </td>
        </tr> -->
        <tr>
            <td class="title">{{$t('成品料号')}}</td>
            <td class="text1" style="height: 100%;"><span>{{ Object.keys(product).length ? product.itemno||'-' : '' }}</span></td>
        </tr>
        <tr>
            <td class="title">{{$t(product.itemno?'牌价':'最低经销价')}}</td>
            <td class="text2">
                ￥{{ Object.keys(product).length ? tool.formatAmount(product.price,2) : 'xxxxxx' }}
                <div style="color:#1C1919;font-weight: normal;font-size: 12px;">*{{$t('非标准产品，当前价格仅供参考')}}!</div>
            </td>
        </tr>
    </table>
</template>

<script>
export default {
    data () {
        return {
            resultArr:[],
            product:{}
        }
    },
    methods: {
        listData () {
            this.$api.requested({
                "id": 20240718162002,
                "content": {
                    "sa_lectotypecfgid": this.$route.query.id
                },
            }).then(res => {
                console.log("123123321",res)
                this.resultArr = res.data
                // 判断数组中是否存在parttype为'主阀'的项，如果没有则在第一行插入一条空数据
                const hasMainValve = this.resultArr.some(item => item.parttype === '主阀')
                if (!hasMainValve) {
                    this.resultArr.unshift({
                        parttype: '主阀',
                        actuatorbrand: '',
                        itemname: '',
                        itemno: '',
                        torque: '',
                        flh: [],
                        caliber: '',
                        nominalpressure: '',
                        stemmaterial: '',
                        mainmaterial: '',
                        itemid: ''
                    })
                }
                this.$api.requested({
                    "id": 2024071916224702,
                    "content": {
                        "part_itemids": this.resultArr.map(item => {
                            return {
                                parttype:item.parttype,
                                itemid:item.itemid
                            }
                        })
                    },
                }).then(res => {
                    this.product = res.data
                })
            })
        }
    },
    created () {
        this.listData()
    }
}
</script>

<style scoped>
.descript {
    font-size:12px;
    color:red;
    display: flex;
    flex-wrap: wrap;
}
table,td,tr {
    border-collapse: collapse;
}
td {
    padding: 10px;
}
table,td {
    border: 1px solid #DDDDDD;
}
.result{
    margin-top: 10px;
}
.result .title {
    font-family: Source Han Sans SC, Source Han Sans SC;
    font-weight: bold;
    font-size: 16px;
    color: #333333;
    padding: 10px;
    min-width: 120px;
}
.custom-table {
    border: none;
    display: flex;
    height: 64px;
    align-items: center;
    align-content: center;
}
.custom-table div{
    border-right: 1px solid #DDDDDD;
    height: 100%;
    display: flex;
    align-items: center;
    align-content: center;
    padding-left: 20px;
}
.custom-table div:nth-child(1) {
    width: 120px;
}
.custom-table div:nth-child(2) {
    flex: 1;
}
.custom-table div:nth-child(3) {
    width: 120px;
}
.custom-table div:nth-child(4) {
    flex: 1;
}
.descript {
    display: flex;
}
.descript .item {
    font-family: Source Han Sans SC, Source Han Sans SC;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
    margin-right: 40px;
}
.descript .item:last-child {
    margin-right: 0 !important;
}
.text1 {
    font-family: Source Han Sans SC, Source Han Sans SC;
    font-weight: bold;
    font-size: 16px;
    color: #3874F6;
}
.text2 {
    font-family: Source Han Sans SC, Source Han Sans SC;
    font-weight: bold;
    font-size: 16px;
    color: #E80000;
}
</style>