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

<template>
  <!-- 套保品种详情 -->
  <a-modal class="commonModal hedgingDetail"
           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">
      <fieldset class="formFieldSet">
        <legend>基本信息</legend>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="套保品种名称"
                         name="deliverygoodsname">
              <span class="white">{{selctedMG.mg.middlegoodsname}}</span>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="套保品种单位"
                         name="deliverygoodscode">
              <span class="white">{{selctedMG.mg.enumdicname}}</span>
            </a-form-item>
          </a-col>
        </a-row>
      </fieldset>
      <fieldset class="formFieldSet">
        <legend>修改套保比例列表</legend>
        <a-row :gutter="24"
               class="dialogRowTitle">
          <a-col :span="5">
            <span>
              修改时间
            </span>
          </a-col>
          <a-col :span="5">
            <span>
              修改前比例
            </span>
          </a-col>
          <a-col :span="5">
            <span>
              修改后比例
            </span>
          </a-col>
          <a-col :span="5">
            <span>
              备注
            </span>
          </a-col>
          <a-col :span="4"
                 class="tc">
            <span>
              修改人
            </span>
          </a-col>
        </a-row>
        <a-row :gutter="24"
               class="dialogRowTitle"
               v-for="(item, index) in list"
               :key="index">
          <a-col :span="5" class="nowrap">
            <span class="white">
              {{item.updatetime}}
            </span>
          </a-col>
          <a-col :span="5">
            <span class="white">
              {{item.beforevalue}}
            </span>
          </a-col>
          <a-col :span="5">
            <span class="white">
              {{item.aftervalue}}
            </span>
          </a-col>
          <a-col :span="5" class="ellipse">
            <span class="white">
              {{item.logremark}}
            </span>
          </a-col>
          <a-col :span="4"
                 class="tc">
            <span class="white">
              {{item.applyname}}
            </span>
          </a-col>
        </a-row>
      </fieldset>
    </a-form>
  </a-modal>
</template>

<script lang="ts">
import { defineComponent, PropType, ref, watchEffect } from 'vue';
import { closeModal } from '@/common/setup/modal/index';
import { initMG } from '../../list/hedging-variety/setup';
import { Ermcp3MiddleGoodsDetail2, ErmcpMiddleGoodsChangeLog } from '@/services/go/ermcp/goodsInfo/interface';
import { QueryMiddleGoodsChange } from '@/services/go/ermcp/goodsInfo';
import { message } from 'ant-design-vue';

export default defineComponent({
    name: 'hedging-detail',
    components: {},
    props: {
        selctedMG: {
            default: initMG,
            type: Object as PropType<Ermcp3MiddleGoodsDetail2>,
        },
    },
    setup(props) {
        const { visible, cancel } = closeModal('detail');
        const list = ref<ErmcpMiddleGoodsChangeLog[]>([]);
        const loading = ref<boolean>(false);
        function submit() {
            cancel();
        }
        watchEffect(() => {
            if (props.selctedMG.mg.middlegoodsid && visible.value) {
                QueryMiddleGoodsChange(props.selctedMG.mg.middlegoodsid)
                    .then((res) => {
                        list.value = res;
                    })
                    .catch((err) => message.error(err));
            }
        });
        return {
            visible,
            cancel,
            submit,
            loading,
            maskClosableFlag: false,
            list,
        };
    },
});
</script>

<style lang="less">
.hedgingDetail {
  .ellipse {
    white-space: nowrap;
    overflow: hidden;
    width: 20%;
    text-overflow: ellipsis;
  }
  .nowrap {
    white-space: nowrap;
  }
}
</style
>;