123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276 |
- @{
- ViewBag.Title = "报表开发";
- Layout = "~/Views/Shared/_Form.cshtml";
- }
- <!--表格组件end-->
- <script>
- var keyValue = request('keyValue');
- $(function () {
- initControl();
- //加载导向
- $('#wizard').wizard().on('change', function (e, data) {
- var $finish = $("#btn_finish");
- var $next = $("#btn_next");
- if (data.direction == "next") {
- switch (data.step) {
- case 1:
- if (!$('#tempform').Validform()) {
- return false;
- }
- break;
- case 2:
- if (!$('#tempGraphform').Validform()) {
- return false;
- }
- break;
- case 3:
- if (!$('#tempListform').Validform()) {
- return false;
- }
- $finish.removeAttr('disabled');
- $next.attr('disabled', 'disabled');
- break;
- default:
- break;
- }
- } else {
- $finish.attr('disabled', 'disabled');
- $next.removeAttr('disabled');
- }
- });
- //完成,保存事件
- $("#btn_finish").click(function () {
- var tempJson = $("#tempbody").GetWebControls();
- tempJson["Description"] = $("#TempDescription").val();
- $.SaveForm({
- url: "../../ReportManage/Report/SaveForm?keyValue=" + keyValue,
- param: { tempJson: JSON.stringify(tempJson), __RequestVerificationToken: tempJson["__RequestVerificationToken"] },
- loading: "正在保存数据...",
- success: function () {
- $.currentIframe().$("#gridTable").trigger("reloadGrid");
- }
- })
- })
- //发布报表事件
- $("#publish_btn").click(function () {
- $("#publish_panel").animate({ top: 50, speed: 2000 });
- return false;
- });
- });
- //初始化控件
- function initControl() {
- //报表类别
- $("#TempCategory").ComboBoxTree({
- param: { EnCode: "ReportSort" },
- url: "../../SystemManage/DataItemDetail/GetDataItemTreeJson",
- description: "==请选择==",
- height: "230px"
- });
- //图表类型
- $("#TempType").ComboBox({
- description: "==请选择==",
- height: "200px"
- }).bind("change", function () {
- type = $(this).attr('data-value');
- SetRemark();
- });
- //模块目标
- $("#Target").ComboBox({
- description: "==请选择==",
- height: "200px"
- });
- //模块上级
- $("#ParentId").ComboBoxTree({
- url: "../../AuthorizeManage/Module/GetCatalogTreeJson",
- description: "==请选择==",
- height: "195px",
- allowSearch: true
- });
- //获取表单
- if (!!keyValue) {
- $.SetForm({
- url: "../../ReportManage/Report/GetFormJson",
- param: { keyValue: keyValue },
- success: function (data) {
- $("#tempbody").SetWebControls(data);
- $("#TempDescription").val(data.Description);
- var paramjson = JSON.parse(data.ParamJson);
- $("#title").val(paramjson.title)
- $("#sqlString").val(paramjson.sqlString);
- $("#listSqlString").val(paramjson.listSqlString);
- $("#ParentId").ComboBoxSetValue(paramjson.ParentId);
- $("#Icon").val(paramjson.Icon);
- $("#Description").val(paramjson.Description);
- type = data.TempType;
- SetRemark();
- }
- });
- }
- }
- function SetRemark() {
- var remark = "";
- switch (type) {
- case 'line':
- remark = " <i class='fa fa-question-circle alert-dismissible' style='position: relative; top: 1px; font-size: 15px; padding-right: 5px;'></i>注:折线图的SQL语句至少需要两个字段,name代表项目名称;value代表图例上的值;group代表组。如:select 月份 as name , sum(金额) as value,产品 as group from 订单表 group by 月份,产品"
- break;
- case 'bar':
- remark = " <i class='fa fa-question-circle alert-dismissible' style='position: relative; top: 1px; font-size: 15px; padding-right: 5px;'></i>注:柱型图的SQL语句至少需要两个字段,name代表项目名称;value代表图例上的值;group代表组。如:select 月份 as name , sum(金额) as value,产品 as group from 订单表 group by 月份,产品"
- break;
- case 'pie':
- remark = " <i class='fa fa-question-circle alert-dismissible' style='position: relative; top: 1px; font-size: 15px; padding-right: 5px;'></i>注:饼图的SQL语句至少需要两个字段,name代表项目名称;value代表图例上的值;group代表组。如:select 产品 as name , sum(金额) as value from 订单表 group by 产品"
- break;
- case 'map':
- remark = " <i class='fa fa-question-circle alert-dismissible' style='position: relative; top: 1px; font-size: 15px; padding-right: 5px;'></i>注:地图的SQL语句至少需要两个字段,name代表城市名称;value代表值;group代表组。如:select 城市 as name , sum(金额) as value,产品 as group from 订单表 group by 城市,产品"
- break;
- default:
- }
- $("#div_remark").html(remark);
- }
- function SelectIcon() {
- dialogOpen({
- id: "SelectIcon",
- title: '选取图标',
- url: '/AuthorizeManage/Module/Icon?ControlId=Icon',
- width: "1000px",
- height: "600px",
- btn: false
- })
- }
- </script>
- <div class="widget-body" id="tempbody">
- <div id="wizard" class="wizard" data-target="#wizard-steps" style="border-left: none; border-top: none; border-right: none;">
- <ul class="steps">
- <li data-target="#step-1" class="active"><span class="step">1</span>基础设置<span class="chevron"></span></li>
- <li data-target="#step-2"><span class="step">2</span>图表设置<span class="chevron"></span></li>
- <li data-target="#step-3"><span class="step">3</span>列表设置<span class="chevron"></span></li>
- <li data-target="#step-4"><span class="step">4</span>自动创建<span class="chevron"></span></li>
- </ul>
- </div>
- <div class="step-content" id="wizard-steps" style="border-left: none; border-bottom: none; border-right: none;">
- <div class="step-pane active" id="step-1" style="margin-left: 0px; margin-top: 15px; margin-right: 30px;">
- <table id="tempform" class="form">
- <tr>
- <th class="formTitle">报表编号<font face="宋体">*</font></th>
- <td class="formValue">
- <input id="EnCode" type="text" class="form-control" isvalid="yes" checkexpession="NotNull" />
- </td>
- </tr>
- <tr>
- <th class="formTitle">报表名称<font face="宋体">*</font></th>
- <td class="formValue">
- <input id="FullName" type="text" class="form-control" isvalid="yes" checkexpession="NotNull" />
- </td>
- </tr>
- <tr>
- <th class="formTitle">图表类型<font face="宋体">*</font></th>
- <td class="formValue">
- <div id="TempType" type="select" class="ui-select" isvalid="yes" checkexpession="NotNull">
- <ul>
- <li data-value="line">折线图</li>
- <li data-value="bar">柱形图</li>
- <li data-value="pie">饼图</li>
- <li data-value="map">地图</li>
- </ul>
- </div>
- </td>
- </tr>
- <tr>
- <th class="formTitle">报表分类<font face="宋体">*</font></th>
- <td class="formValue">
- <div id="TempCategory" type="selectTree" class="ui-select" isvalid="yes" checkexpession="NotNull"></div>
- </td>
- </tr>
- <tr>
- <th class="formTitle" valign="top" style="padding-top: 4px;">报表介绍</th>
- <td class="formValue">
- <textarea id="TempDescription" class="form-control" style="height: 70px;"></textarea>
- </td>
- </tr>
- </table>
- </div>
- <div class="step-pane" id="step-2">
- <div id="div_remark" class="alert alert-danger" style="text-align: left; margin: 5px; margin-bottom: 10px;"></div>
- <div style="margin-top: 15px; margin-right: 30px;">
- <table id="tempGraphform" class="form">
- <tr>
- <th class="formTitle">报表标题</th>
- <td class="formValue">
- <input id="title" type="text" class="form-control" />
- </td>
- </tr>
- <tr>
- <th class="formTitle" valign="top" style="padding-top: 4px;">SQL语句</th>
- <td class="formValue">
- <textarea id="sqlString" class="form-control" style="height: 210px;"></textarea>
- </td>
- </tr>
- </table>
- </div>
- </div>
- <div class="step-pane" id="step-3" style="margin-top: 15px; margin-right: 30px;">
- <table id="tempListform" class="form">
- <tr>
- <th class="formTitle">列表说明</th>
- <td class="formValue">
- <input id="desc" type="text" class="form-control" />
- </td>
- </tr>
- <tr>
- <th class="formTitle" valign="top" style="padding-top: 4px;">SQL语句</th>
- <td class="formValue">
- <textarea id="listSqlString" class="form-control" style="height: 210px;"></textarea>
- </td>
- </tr>
- </table>
- </div>
- <div class="step-pane" id="step-4" style="margin-top: 15px; margin-right: 30px;">
- <div style="height: 400px;">
- <div class="drag-tip" style="text-align: center; padding-top: 50px;">
- <i class="fa fa-check-circle" style="font-size: 204px; color: #0FA74F;"></i>
- <div id="finish-msg" style="font-weight: bold; font-size: 24px; color: #0FA74F; margin-top: 20px;">
- </div>
- <p style="color: #666; font-size: 12px; margin-top: 10px;">
- <a href="#" id="publish_btn">发布报表</a>
- </p>
- </div>
- <div id="publish_panel" style="position: absolute; height: 350px; top: 560px; z-index: 100; background: #ffffff; margin-top: 15px; margin-right: 30px;">
- <table class="form">
- <tr>
- <th class="formTitle">上级</th>
- <td class="formValue">
- <div id="ParentId" type="selectTree" class="ui-select">
- </div>
- </td>
- <th class="formTitle">图标</th>
- <td class="formValue">
- <input id="Icon" type="text" class="form-control" />
- <span class="input-button" onclick="SelectIcon()" title="选取图标">...</span>
- </td>
- </tr>
- <tr>
- <th class="formTitle" valign="top" style="padding-top: 4px;">描述
- </th>
- <td class="formValue" colspan="3">
- <textarea id="Description" class="form-control" style="height: 70px;"></textarea>
- </td>
- </tr>
- </table>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="form-button" id="wizard-actions">
- <a id="btn_last" disabled class="btn btn-default btn-prev">上一步</a>
- <a id="btn_next" class="btn btn-default btn-next">下一步</a>
- <a id="btn_finish" disabled class="btn btn-success">完成</a>
- </div>
- <style>
- body {
- overflow: hidden;
- }
- </style>
|