MTP2.0_WEB/src/common/components/permanceTemp/choosePermancePlanTmp.vue

<template>
  <!--选择履约模板-->
  <Drawer :title="'选择履约模板'"
          :placement="'right'"
          :visible="visible"
          @cancel="cancel"
          :class="[position === 'top' ? 'top486' : 'delistingBottom']">
    <span class="add-permance"
          @click="open">
      <svg class="icon svg-icon"
           aria-hidden="true">
        <use xlink:href="#icon-xinjianzengjiaxinzeng-20" />
      </svg>
    </span>
    <a-spin :spinning="loading">
      <div class="moduleContent">
        <div class="itemBar"
             v-for="item in tableList"
             :key="item.autoid"
             @click="chooseTemp(item)">
          <div class="itemName">{{item.templatename}}</div>
          <div class="rulesCont">
            <a-row>
              <a-col :span="24"
                     class="ruleCol">
                <div class="line"
                     v-for="sub in item.LstStep"
                     :key="sub.autoid">
                  <div class="name">{{sub.steptypename}}</div>
                  <div class="time">{{sub.stepdate}}</div>
                </div>
              </a-col>
            </a-row>
          </div>
        </div>
      </div>
    </a-spin>
  </Drawer>
  <Add v-if="show"
       :position="position"
       @cancel="closeAddTemp" />
</template>

<script lang="ts">
import { defineComponent, PropType, ref } from 'vue';
import { Des } from '@/common/components/commonDes';
import { _closeModal } from '@/common/setup/modal/modal';
import Drawer from '@/common/components/drawer/index.vue';
import { QueryPermancePlanTmpReq, QueryPermancePlanTmpRsp } from '@/services/go/wrtrade/interface';
import { queryQueryPermancePlanTmp } from '@/services/go/wrtrade';
import { getUsrId } from '@/services/bus/user';
import { queryTableList } from '@/common/setup/table';
import Add from '@/common/components/permanceTemp/addPermanceTemp.vue';

function hanldeOpenAndCloseComponent<T>() {
    const show = ref<boolean>(false);
    const selected = ref<T>(); // 选中的朋友 id 列表
    function close(value: any) {
        if (value) {
            selected.value = value;
        }
        show.value = false;
    }
    function open() {
        show.value = true;
    }
    return { show, selected, close, open };
}

export default defineComponent({
    emits: ['cancel', 'update'],
    name: 'queryQueryPermancePlanTmp',
    components: { Des, Drawer, Add },
    props: {
        position: {
            type: String,
            default: 'top',
        },
        // 新版本仓单贸易挂牌时，都需要选择履约模板，查询时增加marketID参数
        marketid: {
            type: Number,
            default: undefined,
        }
    },
    setup(props, context) {
        const { visible, cancel } = _closeModal(context);
        // 新增模板
        const { show, close, open } = hanldeOpenAndCloseComponent();

        const param: QueryPermancePlanTmpReq = {
            // userid: getUsrId(), // 新版本不用传userid
            tmptype: '0,2',
        };
        if (props.marketid) { param.marketid = props.marketid }
        const { loading, tableList, queryTable } = queryTableList<QueryPermancePlanTmpRsp>();
        queryTable(queryQueryPermancePlanTmp, param);

        function closeAddTemp(isRefresh: boolean) {
            if (isRefresh) {
                queryTable(queryQueryPermancePlanTmp, param);
            }
            close(null);
        }
        // 选择履约模板
        function chooseTemp(item: QueryPermancePlanTmpRsp) {
            context.emit('update', item);
            cancel();
        }
        return {
            loading,
            cancel,
            visible,
            tableList,
            show,
            close,
            open,
            chooseTemp,
            closeAddTemp,
        };
    },
});
</script>


<style lang="less" scoped>
.add-permance {
    position: absolute;
    top: 10px;
    right: 20px;
    .icon {
        font-size: 20px;
        color: @m-blue25;
    }
}
.moduleContent {
    padding: 10px 20px 0;
    width: 470px;
    height: 100%;
    overflow-y: auto;
    .itemBar {
        width: 100%;
        padding: 0 14px 6px;
        margin-bottom: 10px;
        .flex;
        flex-direction: column;
        background: @m-blue34;
        .rounded-corners(5px);
        .itemName {
            width: 100%;
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid @m-blue20;
            color: @m-white11;
            font-size: 16px;
        }
    }
}
/*滚动条样式*/
::-webkit-scrollbar {
    //width: 10px;
    height: 4px;
}
/* 滚动的滑块 */
::-webkit-scrollbar-thumb {
    border-radius: 2px;
    background-color: @m-blue35;
}
/* 滚动条两端的按钮 */
::-webkit-scrollbar-button {
    background-color: transparent;
    display: none;
}
/* 内层滚动槽 */
::-webkit-scrollbar-track-piece {
    background-color: transparent;
}
/* 边角 */
::-webkit-scrollbar-corner,
.el-input::-webkit-scrollbar-corner {
    background-color: @m-blue35;
}
</style>