弹框带数据

目录

此处以开票申请的选合同带出经营负责人为例

一、前端Jsp

1.1、弹框的前端界面

1.2、form_option.js 

1.3、contractManageSrht_dialog_selectContract.jsp 

二、后端


此处以开票申请的选合同带出经营负责人为例

一、前端Jsp

1.1、弹框的前端界面

<div id="_xform_fdContrantNoId" _xform_type="dialog">
<xform:dialog propertyId="fdContrantNoId" propertyName="fdContrantNoName" showStatus="edit" required="true" subject="${lfn:message('contract-manage:contractManageKpsq.fdContrantNo')}" style="width:95%;">
dialogSelect(false,'contract_manage_srht_selectContract','fdContrantNoId','fdContrantNoName');
</xform:dialog>
</div>

注: 此处弹框对应的是对应模块的form_option.js文件,拿着contract_manage_srht_selectContract去搜就行

1.2、form_option.js 

contract_manage_srht_selectContract: {
    modelName: 'com.landray.kmss.contract.manage.model.ContractManageSrht',
    sourceUrl: '/contract/manage/contract_manage_srht/contractManageSrhtData.do?method=selectContract'
},

dialogLinks: [{
    idField: 'fdDkmx_Form[*].fdContrantNoId',
    nameField: 'fdDkmx_Form[*].fdContrantNoName',
    dialog: 'contract_manage_srht_selectContract',
    inputs: [],
    outputs: [{
        'key': 'fdHtmc',
        'value': 'fdDkmx_Form[*].fdHtmc'
    },{
        'key': 'contractAmount',
        'value': 'fdDkmx_Form[*].fdHtje'
    },{
        'key': 'receivedAmount',
        'value': 'fdDkmx_Form[*].fdYhke'
    },{
        'key': 'fdProjectId',
        'value': 'fdDkmx_Form[*].fdProjectNoId'
    },{
        'key': 'fdProjectName',
        'value': 'fdDkmx_Form[*].fdProjectNoName'
    },{
        'key': 'fdXmmc',
        'value': 'fdDkmx_Form[*].fdXmmc'
    },{
        'key': 'fdJfdw.fdId',
        'value': 'fdDkmx_Form[*].fdOwnerId'
    },{
        'key': 'fdJfdw.fdName',
        'value': 'fdDkmx_Form[*].fdOwnerName'
    },{
        'key': 'fdJyfzr.fdId',
        'value': 'fdAccountsPeopleId'
    },{
        'key': 'fdJyfzr.fdName',
        'value': 'fdAccountsPeopleName'
    }]
},

注:拿着刚才弹框对应的 contract_manage_srht_selectContract到此页面来搜

sourceUrl:对应的是后端的Action里查出来的数据供前端带数据使用

outputs:输出对应的属性到页面上的指定字段

1.3、contractManageSrht_dialog_selectContract.jsp 

<%@ page language="java" contentType="text/json; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/sys/ui/jsp/common.jsp" %>
<list:data>
    <list:data-columns var="contractManageSrht" list="${queryPage.list}" varIndex="status" custom="false">
        <list:data-column property="fdId" />
        <list:data-column property="fdHtbh" title="${lfn:message('contract-manage:contractManageSrht.fdHtbh')}" />

        <list:data-column col="index">
            ${status+1}
        </list:data-column>
        <list:data-column property="fdHtmc" title="${lfn:message('contract-manage:contractManageSrht.fdHtmc')}" />
        <list:data-column property="fdHtje" />
        <list:data-column property="fdYskje" />
        <list:data-column col="contractAmount">
            <c:out value="${contractManageSrht.contractAmount == null ? '' : contractManageSrht.contractAmount}" />
        </list:data-column>
        <list:data-column col="invoicedAmount">
            <c:out value="${contractManageSrht.invoicedAmount == null ? '' : contractManageSrht.invoicedAmount}" />
        </list:data-column>
        <list:data-column col="amountRecovered">
            <c:out value="${contractManageSrht.amountRecovered == null ? '' : contractManageSrht.amountRecovered}" />
        </list:data-column>
        <list:data-column col="receivedAmount">
            <c:out value="${contractManageSrht.receivedAmount == null ? '' : contractManageSrht.receivedAmount}" />
        </list:data-column>
        <list:data-column property="fdProjectId" />
        <list:data-column property="fdProjectName" />
        <list:data-column property="fdXmmc" />
        <list:data-column property="fdJfdw.fdId" />
        <list:data-column property="fdJfdw.fdName" />
        <list:data-column property="fdJyfzr.fdId"/>
        <list:data-column property="fdJyfzr.fdName"/>

    </list:data-columns>
    <%-- 分页信息生成 --%>
    <list:data-paging page="${queryPage}" />
</list:data>

注:想要选择合同后成功带出属性到指定的字段,还需要在此页面配置获取的字段 

二、后端

public ActionForward selectContract(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception {
        TimeCounter.logCurrentTime("selectContract", true, getClass());
        KmssMessages messages = new KmssMessages();
        try {
            String s_pageno = request.getParameter("pageno");
            String s_rowsize = request.getParameter("rowsize");
            String keyWord = request.getParameter("q._keyword");
            int pageno = 0;
            int rowsize = SysConfigParameters.getRowSize();
            if (s_pageno != null && s_pageno.length() > 0) {
                pageno = Integer.parseInt(s_pageno);
            }
            if (s_rowsize != null && s_rowsize.length() > 0) {
                rowsize = Integer.parseInt(s_rowsize);
            }
            //当前登录人所属机构
            List<String> orgIds = new ArrayList<>();
            if(UserUtil.getUser().getFdParentOrg()!=null){
                orgIds.add(UserUtil.getUser().getFdParentOrg().getFdId());
            }
            List<SysOrgElement> fdPosts = UserUtil.getUser().getFdPosts();
            for (SysOrgElement fdPost : fdPosts) {
                if(fdPost.getFdParentOrg()!=null){
                    orgIds.add(fdPost.getFdParentOrg().getFdId());
                }
            }
            HQLInfo hqlInfo = new HQLInfo();
            hqlInfo.setPageNo(pageno);
            hqlInfo.setRowSize(rowsize);
            String where = "";
            if (StringUtil.isNotNull(keyWord)) {
                where += "(contractManageSrht.fdHtbh like :fdHtbh";
                hqlInfo.setParameter("fdHtbh", "%" + keyWord + "%");
                where += " or contractManageSrht.fdHtmc like :fdHtmc";
                hqlInfo.setParameter("fdHtmc", "%" + keyWord + "%");
                where += ")";
            }
            //String sql = StringUtil.linkString(where, " and ", " contractManageSrht.docStatus = 30 ");
            String sql = StringUtil.linkString(where, " and ", " contractManageSrht.docStatus in ('11','20','30') ");
            sql += " and contractManageSrht.fdYfdw.fdId in (:org) ";
            hqlInfo.setParameter("org",orgIds);
            hqlInfo.setWhereBlock(StringUtil.linkString(sql," and "," contractManageSrht.docIsNewVersion=1 "));
            hqlInfo.setOrderBy("case when contractManageSrht.fdHtmc like '%公共费用%' then 0 else 1 end, contractManageSrht.fdHtmc asc, contractManageSrht.docCreateTime desc");
            HQLHelper.by(request).buildHQLInfo(hqlInfo, ContractManageSrht.class);
            // 暂时去除数据权限过滤
            hqlInfo.setAuthCheckType(SysAuthConstant.AUTH_CHECK_NONE);

            Page page = getServiceImp(request).findPage(hqlInfo);
            List<ContractManageSrht> list = page.getList();
            DecimalFormat df=new DecimalFormat("0.00");
            for (ContractManageSrht contractManageSrht : list) {
                //合同金额
                contractManageSrht.setContractAmount(df.format(contractManageSrht.getFdHtje()!=null?contractManageSrht.getFdHtje():0.00));
                //已开票额
                if(contractManageSrht.getFdYkp()!=null){
                    contractManageSrht.setInvoicedAmount(df.format(contractManageSrht.getFdYkp()!=null?contractManageSrht.getFdYkp():0.00));
                }
                //已开收据额
                if(contractManageSrht.getFdReceipt()!=null){
                    contractManageSrht.setAmountRecovered(df.format(contractManageSrht.getFdReceipt()!=null?contractManageSrht.getFdReceipt():0.00));
                }
                //已收款金额
                if(contractManageSrht.getFdYskje()!=null){
                    contractManageSrht.setReceivedAmount(df.format(contractManageSrht.getFdYskje()!=null?contractManageSrht.getFdYskje():0.00));
                }
            }
            request.setAttribute("queryPage", page);
        } catch (Exception e) {
            messages.addError(e);
        }
        TimeCounter.logCurrentTime("selectContract", false, getClass());
        if (messages.hasError()) {
            KmssReturnPage.getInstance(request).addMessages(messages).addButton(KmssReturnPage.BUTTON_CLOSE).save(request);
            return mapping.findForward("failure");
        } else {
            return mapping.findForward("selectContract");
        }
    }

注:此方法就是刚才在sourceUrl配置的方法,查出来需要的数据并返给前端 

  • 12
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
如果你在Vue3和ElementUI中使用el-select组件的multiple属性进行单选或多选,并且想要在点击编辑按钮后,弹出一个弹框来显示选择的结果,可以使用ElementUI的Dialog组件来实现。具体步骤如下: 1. 在父组件中,给el-select绑定一个v-model,用来存储选择的值,并在点击编辑按钮时,打开一个Dialog弹框,用来显示选择结果。 2. 将选择结果传递给Dialog弹框,在弹框中显示选择结果。 下面是一个简单的示例代码: 父组件: ```html <template> <div> <el-select v-model="selected" multiple> <el-option label="Option 1" value="1"></el-option> <el-option label="Option 2" value="2"></el-option> <el-option label="Option 3" value="3"></el-option> </el-select> <el-button @click="edit">编辑</el-button> <el-dialog :visible.sync="dialogVisible" title="选择结果"> <div v-for="item in selected" :key="item">{{ item }}</div> </el-dialog> </div> </template> <script> import { ref } from 'vue' export default { setup() { const selected = ref([]) // 存储选择结果的数组 const dialogVisible = ref(false) // 控制Dialog弹框显示的变量 const edit = () => { // 打开Dialog弹框 dialogVisible.value = true } return { selected, dialogVisible, edit } } } </script> ``` 在父组件中,我们使用了Vue3的Composition API来定义了存储选择结果的数组和控制Dialog弹框显示的变量,并在edit方法中,打开了Dialog弹框。 在Dialog弹框中,我们使用了v-for来遍历选择结果数组,将每个选择结果显示在弹框中。 注意,我们使用了v-bind.sync来将dialogVisible属性和Dialog组件中的visible属性进行了双向绑定,这样就可以在父组件中控制Dialog弹框的显示和隐藏。 子组件: ```html <template> <div> <el-select v-model="selected" :multiple="true"> <el-option label="Option 1" value="1"></el-option> <el-option label="Option 2" value="2"></el-option> <el-option label="Option 3" value="3"></el-option> </el-select> </div> </template> <script> import { defineProps, ref, watch } from 'vue' export default { props: { selected: { type: Array, default: () => [] } }, setup(props) { const selected = ref(props.selected) // 存储选择结果的数组 // 监听父组件传递的选择结果,更新子组件的选择结果 watch(() => props.selected, (newValue) => { selected.value = newValue }) return { selected } } } </script> ``` 在子组件中,我们使用了props来接收父组件传递的v-model的值,并在el-select中绑定这个值,用来实现选择功能。 在父组件中,我们使用v-bind.sync来将父组件中的selected属性和子组件中的selected属性进行了双向绑定,这样就可以实现在父组件中点击编辑后,Dialog弹框内部的回显数据

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值