MTP2.0_WEB/src/views/information/goods/components/spotDetail/index.vue

<template>
    <!-- 现货品种详情 -->
    <a-modal class="commonModal spot-detail"
             title="详情"
             v-if="visible"
             v-model:visible="visible"
             centered
             :maskClosable="maskClosableFlag"
             @cancel="cancel"
             width="890px">
        <template #footer>
            <a-button key="submit"
                      type="primary"
                      :loading="loading"
                      @click="submit">完成
            </a-button>
        </template>
        <a-form class="inlineForm"
                ref="formRef"
                :model="formState"
                :rules="rules">
            <fieldset class="formFieldSet">
                <legend>基本信息</legend>
                <a-row :gutter="24">
                    <a-col :span="12">
                        <a-form-item label="现货品种名称"
                                     name="deliverygoodsname">
                            <span class="white">{{ formatValue(selectedRow.data.deliverygoodsname) }}</span>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="现货品种代码"
                                     name="deliverygoodscode">
                            <span class="white">{{ formatValue(selectedRow.data.deliverygoodsname) }}</span>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="24">
                    <a-col :span="12">
                        <a-form-item label="单位"
                                     name="unitid">
                            <span class="white">{{ formatValue(selectedRow.data.enumdicname) }}</span>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="状态"
                                     name="unitid">
                            <span class="green">{{ getValidName(selectedRow.data.isvalid) }}</span>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="24">
                    <a-col :span="24">
                        <a-form-item label="备注"
                                     name="remark">
                            <span class="white">{{ formatValue(selectedRow.data.remark) }}</span>
                        </a-form-item>
                    </a-col>
                </a-row>
            </fieldset>
            <fieldset class="formFieldSet">
                <legend>品类信息</legend>
                <a-row :gutter="24"
                       class="dialogRowTitle">
                    <a-col :span="8">
            <span>
              品类
            </span>
                    </a-col>
                    <a-col :span="8">
            <span>
              单位
            </span>
                    </a-col>
                    <a-col :span="8">
            <span>
              标仓系数
            </span>
                    </a-col>
                    <template v-for="item in selectedRow.gmlist" :key="item.wrstandardid">
                        <a-col :span="8" class="bt1">
                            <div class="white">{{ item.wrstandardname }}</div>
                        </a-col>
                        <a-col :span="8">
                            <div class="white">{{ item.enumdicname }}</div>
                        </a-col>
                        <a-col :span="8">
                            <div class="white">{{ item.convertfactor }}</div>
                        </a-col>
                    </template>
                </a-row>
            </fieldset>
            <fieldset class="formFieldSet">
                <legend>品牌信息</legend>
                <a-row :gutter="24"
                       class="dialogRowTitle dialogRowTitle2">
                    <a-col :span="24">
            <span>
              品牌
            </span>
                    </a-col>
                    <template v-for="item in selectedRow.gblist" :key="item.brandid">
                        <a-col :span="24" class="bt1">
                            <div class="white">{{ item.brandname }}</div>
                        </a-col>
                    </template>
                </a-row>
            </fieldset>
            <fieldset class="formFieldSet">
                <legend>套保品种信息</legend>
                <a-row :gutter="24"
                       class="dialogRowTitle">
                    <a-col :span="8">
            <span>
              套保品种
            </span>
                    </a-col>
                    <a-col :span="8">
            <span>
              单位
            </span>
                    </a-col>
                    <a-col :span="8">
            <span>
              套保系数
            </span>
                    </a-col>
                    <template v-for="item in selectedRow.mgList" :key="item.mg.middlegoodsid">
                        <a-col :span="8" class="bt1">
                            <div class="white">{{ item.mg.middlegoodsname }}</div>
                        </a-col>
                        <a-col :span="8">
                            <div class="white">{{ item.mg.enumdicname }}</div>
                        </a-col>
                        <a-col :span="8">
                            <div class="white">{{ item.mg.needhedgeratio }}</div>
                        </a-col>
                    </template>
                </a-row>
            </fieldset>
        </a-form>
    </a-modal>
</template>

<script lang="ts">
import {defineComponent, PropType, ref} from 'vue';
import {closeModal} from '@/common/setup/modal/index';
import {formatValue, initData} from '@/common/methods/index';
import {ErmcpDeliveryGoodsDetailEx} from "@/services/go/ermcp/goodsInfo/interface";
import {getValidName} from "@/views/information/goods/setup";

export default defineComponent({
    name: 'modify-custom',
    components: {},
    props: {
        selectedRow: {
            type: Object as PropType<ErmcpDeliveryGoodsDetailEx>,
            default: {},
        },
    },
    setup() {
        const {visible, cancel} = closeModal('detail');

        const loading = ref<boolean>(false);
        const maskClosableFlag = ref<boolean>(false);

        function submit() {
            cancel();
        }

        initData(() => {
        });
        return {
            visible,
            cancel,
            submit,
            loading,
            maskClosableFlag: false,
            formatValue,
            getValidName,
        };
    },
});
</script>

<style lang="less">
.spot-detail {
    fieldset {
        padding-right: 170px;
    }

    .upload {
        display: inline-flex;

        .ant-btn.uploadBtn {
            width: 60px;
            height: 30px;
            background: @m-blue0;
            border: 0;
            padding: 0;
            text-align: center;
            font-size: 14px;
            color: @m-white0;
            .rounded-corners(3px);

            &:hover {
                background: rgba(@m-blue0, 0);
                color: rgba(@m-white0, 0.8);
            }
        }

        .look {
            color: @m-blue0;
            font-size: 14px;
            margin-left: 10px;
            cursor: pointer;
        }
    }

    div.white {
        width: 100%;
        text-align: center;
    }
}
</style
>;