Commit 6123a96d by jianshuqin

优化:组件功能

parent 3bb39234
......@@ -133,22 +133,22 @@ namespace Bailun.DC.Models.Component.DTO
/// <summary>
/// 过虑控件
/// </summary>
public IEnumerable<ControlDTO> ListFilterControl { get; set; }
public IEnumerable<dynamic> ListFilterControl { get; set; }
/// <summary>
/// 操作控件
/// </summary>
public IEnumerable<ControlDTO> ListOperateControl { get; set; }
public IEnumerable<dynamic> ListOperateControl { get; set; }
/// <summary>
/// 字段
/// </summary>
public IEnumerable<ColumnDTO> ListColumn { get; set; }
public IEnumerable<dynamic> ListColumn { get; set; }
/// <summary>
/// 操作列值
/// </summary>
public IEnumerable<ControlDTO> ListOperateColumnControl { get; set; }
public IEnumerable<dynamic> ListOperateColumnControl { get; set; }
}
}
......@@ -62,14 +62,14 @@ namespace Bailun.DC.Services.Component
OperateColumnWidth = entity.operate_column_width,
ListCrumb = !string.IsNullOrWhiteSpace(entity.crumbs) ? DeserializeCollection<string>(entity.crumbs) : null,
ListJavascriptSrc = !string.IsNullOrWhiteSpace(entity.javascript_src) ? DeserializeCollection<string>(entity.javascript_src) : null,
ListFilterControl = !string.IsNullOrWhiteSpace(entity.filter_controls) ? DeserializeCollection<ControlDTO>(entity.filter_controls) : null,
ListOperateControl = !string.IsNullOrWhiteSpace(entity.operate_controls) ? DeserializeCollection<ControlDTO>(entity.operate_controls) : null,
ListOperateColumnControl = !string.IsNullOrWhiteSpace(entity.operate_column_value) ? DeserializeCollection<ControlDTO>(entity.operate_column_value) : null,
ListFilterControl = !string.IsNullOrWhiteSpace(entity.filter_controls) ? DeserializeCollection<dynamic>(entity.filter_controls) : null,
ListOperateControl = !string.IsNullOrWhiteSpace(entity.operate_controls) ? DeserializeCollection<dynamic>(entity.operate_controls) : null,
ListOperateColumnControl = !string.IsNullOrWhiteSpace(entity.operate_column_value) ? DeserializeCollection<dynamic>(entity.operate_column_value) : null,
};
//列
if (dto.ColumnType == ColumnTypeEnum.Config && !string.IsNullOrWhiteSpace(entity.column_value))
{
dto.ListColumn = DeserializeCollection<ColumnDTO>(entity.column_value);
dto.ListColumn = DeserializeCollection<dynamic>(entity.column_value);
}
if (dto.ListOperateControl?.Count() > 0)
{
......@@ -81,9 +81,9 @@ namespace Bailun.DC.Services.Component
return dto;
}
public IList<ColumnDTO> GetListColumn(QueryFilterDTO queryFilter = null, TableDTO entity = null)
public IList<dynamic> GetListColumn(QueryFilterDTO queryFilter = null, TableDTO entity = null)
{
IList<ColumnDTO> list = default(IList<ColumnDTO>);
IList<dynamic> list = default(IList<dynamic>);
if (queryFilter != null && !string.IsNullOrWhiteSpace(queryFilter.Code))
{
......@@ -104,14 +104,14 @@ namespace Bailun.DC.Services.Component
//查询
using (var db = (entity.DataDB == DBEnum.DataWareHouse ? DW_DB : DB))
{
list = DB.Query<ColumnDTO>(entity.ColumnValue, sqlparam).ToList();
list = DB.Query<dynamic>(entity.ColumnValue, sqlparam).ToList();
}
break;
#endregion
#region 本地配置
case ColumnTypeEnum.Config:
list = DeserializeCollection<ColumnDTO>(entity.ColumnValue).ToList();
list = DeserializeCollection<dynamic>(entity.ColumnValue).ToList();
break;
#endregion
......@@ -472,13 +472,13 @@ namespace Bailun.DC.Services.Component
if (queryFilter != null)
{
TableDTO entity = this.Get(queryFilter.Code);
IList<ColumnDTO> listColumn = this.GetListColumn(queryFilter, entity);
IList<dynamic> listColumn = this.GetListColumn(queryFilter, entity);
if (listColumn != null)
{
//数据类型
DataTypeEnum?[] dataTypes = { DataTypeEnum.Table, DataTypeEnum.Sql };
//列标题
IDictionary<string, string> listHeader = listColumn.Where(l => l.IsExport == true || (l.IsExport == null && l.IsHide != true)).ToDictionary(l => l.Prop, l => l.Name);
IDictionary<string, string> listHeader = (dynamic)listColumn.Where(l => l.IsExport == true || (l.IsExport == null && l.IsHide != true)).ToDictionary(l => l.Prop, l => l.Name);
//全部数据导出
queryFilter.CurrentPage = null;
queryFilter.pageSize = null;
......@@ -725,10 +725,10 @@ namespace Bailun.DC.Services.Component
}
else
{
IList<ColumnDTO> listColumn = default(IList<ColumnDTO>);
IList<dynamic> listColumn = default(IList<dynamic>);
if (entity.ColumnType == ColumnTypeEnum.Config)
{
listColumn = DeserializeCollection<ColumnDTO>(entity.ColumnValue).ToList();
listColumn = DeserializeCollection<dynamic>(entity.ColumnValue).ToList();
}
else
{
......@@ -754,7 +754,7 @@ namespace Bailun.DC.Services.Component
string whereSql = this.GetFilterSql(queryFilter, ref sqlparam);
//排序条件SQL
string orderbySql = this.GetOrderBySql(queryFilter, entity);
string fromSql = $"FROM {(entity.DataType == DataTypeEnum.Table ? $"[dbo].[{entity.DataValue}]" : $"( {entity.DataValue} )")} AS A {whereSql}";
string fromSql = $"FROM {(entity.DataType == DataTypeEnum.Table ? $"`{entity.DataValue}`" : $"( {entity.DataValue} )")} AS A {whereSql}";
string totalSql = $"SELECT COUNT(*) {fromSql}";
string dataSql = $"SELECT A.* {fromSql} {(!string.IsNullOrWhiteSpace(orderbySql) ? $"ORDER BY {orderbySql}" : string.Empty) } LIMIT {offset} , {fetch}";
var db = (entity.DataDB == DBEnum.DataWareHouse ? DW_DB : DB);
......
<el-container class="el-form-dialog">
<el-container class="el-dialog-form">
<el-dialog ref="dialog"
class="el-form-dialog"
class="el-dialog-form"
el-dialog
append-to-body
v-dialogDrag
......@@ -19,17 +19,17 @@
<template v-for="(item,index) in dialog.listFormItem">
<el-col v-bind:span="item.width || 24"
v-bind:key="index">
<el-form-item v-if="!item.isHide || !javaScript.call(dialog,item.isHide,request,form)"
<el-form-item v-if="!item.isHide || !javaScript.call(dialog,item.isHide,form)"
v-bind:label="item.label || ''"
v-bind:prop="item.prop"
v-bind:rules="item.rules || (item.required ? { required: true, message: item.message || ('请输入' + item.label)} : null)"
v-bind:style="item.color ? 'color:' + item.color: ''">
<el-control ref="control"
<el-form-control ref="control"
v-bind:item="item"
v-bind:form="form"
v-model="form[item.prop]"
v-on:upload-success="(response,file) => $emit('upload-success',response,file)">
</el-control>
</el-form-control>
</el-form-item>
</el-col>
</template>
......@@ -45,7 +45,7 @@
v-bind:icon="control.icon"
v-bind:size="control.size"
v-bind:key="index"
v-on:click="javaScript.call(this,control.onclick,request,form)">{{ button.name }}</el-button>
v-on:click="javaScript.call(this,control.onclick,form)">{{ button.name }}</el-button>
</template>
<el-button v-if="dialog.isShowSaveButton == null || dialog.isShowSaveButton"
type="primary"
......@@ -63,4 +63,4 @@
</el-container>
</script>
<script src="@Url.Content("~/js/component/el-dialog-drag.js")" type="text/javascript"></script>
<script src="@Url.Content("~/js/component/el-form-dialog.js")" type="text/javascript"></script>
<script src="@Url.Content("~/js/component/el-dialog-form.js")" type="text/javascript"></script>
<el-form ref="form-filter" label-width="auto" size="medium" class="el-form-filter">
<el-row v-bind:gutter="20">
<el-row v-bind:gutter="10">
<el-col v-if="filter.listFilterControl && filter.listFilterControl.length" v-bind:span="item.colSpan || 24" v-bind:class="{'auto-width': item.colSpan == null || item.colSpan == 'auto'}" v-for="(item,index) in filter.listFilterControl" v-bind:key="index">
<el-form-item v-bind:label="item.name" v-if="item.type">
<el-control v-bind:item="item" v-model="item.value"></el-control>
<el-form-control v-bind:item="item" v-model="item.value"></el-form-control>
</el-form-item>
</el-col>
<el-col class="el-form-button">
<el-control v-if="filter.isShowSearchButton" v-bind:item="{type: 'button',name:'查询',buttonType:'primary',icon:'el-icon-search'}" v-on:click="onSearch"></el-control>
<el-control v-if="filter.isShowResetButton" v-bind:item="{type: 'button',name:'重置',icon:'el-icon-refresh-right'}" v-on:click="onReset"></el-control>
<el-control v-if="filter.isShowExportButton" v-bind:item="{type: 'button',name:'导出',buttonType:'success',icon:'el-icon-download'}" v-on:click="onExport"></el-control>
<el-control v-if="filter.isShowImportButton" v-bind:item="{type: 'button',name:'导入',icon:'el-icon-upload2'}" v-on:click="onImport"></el-control>
<el-form-control v-if="filter.isShowSearchButton" v-bind:item="{type: 'button',name:'查询',buttonType:'primary',icon:'el-icon-search'}" v-on:click="onSearch"></el-form-control>
<el-form-control v-if="filter.isShowResetButton" v-bind:item="{type: 'button',name:'重置',icon:'el-icon-refresh-right'}" v-on:click="onReset"></el-form-control>
<el-form-control v-if="filter.isShowExportButton" v-bind:item="{type: 'button',name:'导出',buttonType:'success',icon:'el-icon-download'}" v-on:click="onExport"></el-form-control>
<el-form-control v-if="filter.isShowImportButton" v-bind:item="{type: 'button',name:'导入',icon:'el-icon-upload2'}" v-on:click="onImport"></el-form-control>
<template v-if="filter.operateControlsPosition == 2">
<el-control v-for="(item,index) in filter.listOperateControl" v-bind:item="item" v-bind:key="index"></el-control>
<el-form-control v-for="(item,index) in filter.listOperateControl" v-bind:item="item" v-bind:key="index"></el-form-control>
</template>
</el-col>
</el-row>
<el-row class="h40" v-if="(filter.operateControlsPosition == null || filter.operateControlsPosition == 1) && (filter.listOperateControl && filter.listOperateControl.length > 0)">
<el-control v-for="(item,index) in filter.listOperateControl" v-bind:item="item" v-bind:key="index" v-on:click="onClick(item.click)"></el-control>
<el-form-control v-for="(item,index) in filter.listOperateControl" v-bind:item="item" v-bind:key="index" v-on:click="onClick(item.click)"></el-form-control>
</el-row>
</el-form>
</script>
<script type="text/x-template" id="elControl">
@Html.PartialAsync("~/Areas/Component/Views/Control/Index.cshtml").Result
<script type="text/x-template" id="elFormControl">
@Html.PartialAsync("~/Areas/Component/Views/Form/Control.cshtml").Result
</script>
<script src="@Url.Content("~/js/component/el-form-filter.js")" type="text/javascript"></script>
<el-table ref="table"
class="form-table el-table--scrollable-y"
class="el-table-control el-table--scrollable-y"
stripe
border
v-bind:data="listData"
......@@ -41,35 +41,54 @@
v-bind:show-overflow-tooltip="setting.showTooltip"
v-bind:width="setting.operateColumnWidth || 80">
<template slot-scope="scope">
<el-control v-for="(operateColumn,index) in setting.listOperateColumnControl"
class="inline"
v-bind:key="index"
v-bind:item="operateColumn"
v-bind:disabled="operateColumn.disabled != null && (operateColumn.disabled == true || javaScript.call(setting,operateColumn.disabled,scope))"
v-model="scope.row[operateColumn.prop]"
v-on:click="javaScript.call(scope,operateColumn.click,scope)"
v-on:change="javaScript.call(scope,operateColumn.change,scope)">
</el-control>
<el-form-control v-for="(operateColumn,index) in setting.listOperateColumnControl"
class="inline"
v-bind:key="index"
v-bind:item="operateColumn"
v-bind:scope="scope"
v-bind:disabled="operateColumn.disabled != null && (operateColumn.disabled == true || javaScript.call(setting,operateColumn.disabled,scope))"
v-model="scope.row[operateColumn.prop]"
v-on:click="javaScript.call(scope,operateColumn.click,scope)"
v-on:change="javaScript.call(scope,operateColumn.change,scope)">
</el-form-control>
</template>
</el-table-column>
<template v-for="(column,index) in setting.listColumn">
<el-table-column header-align="center"
v-bind:sortable="column.sortable == null || column.sortable ? 'custom' : false"
v-bind:sortable="(!setting.isShowColumnSearch && (column.sortable == null || column.sortable)) ? 'custom' : false"
v-bind:prop="column.prop"
v-bind:show-overflow-tooltip="setting.showTooltip"
v-bind:label="column.name"
v-bind:key="index"
v-bind:width="column.width || ''"
v-bind:min-width="!column.width && ((column.name || ' ').length * 15 + 45)">
<div v-if="setting.isShowColumnSearch"
class="el-table-column-search"
v-bind:slot="setting.isShowColumnSearch ? 'header' : ''" slot-scope="scope">
<el-form-control v-bind:item="{type:'input',placeholder:''}"
v-model="column.value">
</el-form-control>
</div>
<el-table-column v-if="setting.isShowColumnSearch"
header-align="center"
v-bind:sortable="column.sortable == null || column.sortable ? 'custom' : false"
v-bind:prop="column.prop"
v-bind:show-overflow-tooltip="setting.showTooltip"
v-bind:label="column.name"
v-bind:key="index"
v-bind:width="column.width || ''"
v-bind:min-width="!column.width && ((column.name || ' ').length * 15 + 45)">
</el-table-column>
<template slot-scope="scope">
<el-control v-bind:item="column"
v-model="scope.row[column.prop]"
v-on:click="javaScript.call(scope,column.click,scope)"
v-on:change="javaScript.call(scope,column.change,scope)">
</el-control>
<el-form-control v-model="scope.row[column.prop]"
v-bind:item="column"
v-bind:scope="scope"
v-on:click="javaScript.call(scope,column.click,scope)"
v-on:change="javaScript.call(scope,column.change,scope)">
</el-form-control>
</template>
</el-table-column>
</template>
</el-table>
</script>
<script src="@Url.Content("~/js/component/el-table-base.js")" type="text/javascript">
\ No newline at end of file
<script src="@Url.Content("~/js/component/el-table-control.js")" type="text/javascript">
\ No newline at end of file
......@@ -6,9 +6,11 @@
@section css{
<link href="@Url.Content("~/css/vue/v-cloak.css")" rel="stylesheet" />
<link href="@Url.Content("~/css/vue/element-ui-2.15.6.css")" rel="stylesheet" />
<link href="@Url.Content("~/css/component/el-form-control.css")" rel="stylesheet" />
<link href="@Url.Content("~/css/component/el-form-filter.css")" rel="stylesheet" />
<link href="@Url.Content("~/css/component/el-table-control.css")" rel="stylesheet" />
<link href="@Url.Content("~/css/component/el-table-query.css")" rel="stylesheet" />
<link href="@Url.Content("~/css/component/el-form-dialog.css")" rel="stylesheet" />
<link href="@Url.Content("~/css/component/el-dialog-form.css")" rel="stylesheet" />
}
@section scripts{
......@@ -19,8 +21,8 @@
<script type="text/x-template" id="elTableQuery">
@Html.PartialAsync("~/Areas/Component/Views/Table/Query.cshtml").Result
</script>
<script type="text/x-template" id="elFormDialog">
@Html.PartialAsync("~/Areas/Component/Views/Form/Dialog.cshtml").Result
<script type="text/x-template" id="elDialogForm">
@Html.PartialAsync("~/Areas/Component/Views/Dialog/Form.cshtml").Result
</script>
<script>
$(document).ready(function () {
......@@ -34,10 +36,10 @@
},
methods: {
onShowDialog(title, form, code) {
this.$refs.formDialog.showDialog(title, form, code);
this.$refs.dialogForm.showDialog(title, form, code);
},
onCloseDialog(title, form, code) {
this.$refs.formDialog.closeDialog();
this.$refs.dialogForm.closeDialog();
}
}
})
......@@ -46,5 +48,5 @@
}
<div id="app" v-cloak>
<el-table-query v-bind:code="code" v-on:show-dialog="onShowDialog" v-on:close-dialog="onCloseDialog"></el-table-query>
<el-form-dialog v-bind:code="code" ref="formDialog"></el-form-dialog>
<el-dialog-form v-bind:code="code" ref="dialogForm"></el-dialog-form>
</div>
<el-container class="el-table-query">
<el-header>
<el-header v-show="setting.listFilterControl && setting.listFilterControl.length && setting.listOperateControl && setting.listOperateControl.length">
<el-form-filter ref="formFilter"
v-bind:filter="setting"
v-on:search="onSearch"
......@@ -10,10 +10,10 @@
<el-main v-loading="$root.loading">
<el-container>
<el-main>
<el-table-base ref="table"
<el-table-control ref="table"
v-bind:code="code"
v-bind:filterParams="filterParams"
v-on:init="onInit"></el-table-base>
v-on:init="onInit"></el-table-control>
</el-main>
<el-footer>
<el-pagination background layout="total,sizes,jumper,prev, pager, next"
......@@ -33,8 +33,8 @@
<script type="text/x-template" id="elFormFilter">
@Html.PartialAsync("~/Areas/Component/Views/Form/Filter.cshtml").Result
</script>
<script type="text/x-template" id="elTableBase">
@Html.PartialAsync("~/Areas/Component/Views/Table/Base.cshtml").Result
<script type="text/x-template" id="elTableControl">
@Html.PartialAsync("~/Areas/Component/Views/Table/Control.cshtml").Result
</script>
<script src="@Url.Content("~/js/component/xlsx.full.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/js/component/file-saver.js")" type="text/javascript"></script>
......
......@@ -6,14 +6,15 @@
</PropertyGroup>
<ItemGroup>
<Content Remove="Areas\Component\Views\Form\Dialog.cshtml" />
<Content Remove="Areas\Component\Views\Dialog\Form.cshtml" />
<Content Remove="Areas\Component\Views\Form\Control.cshtml" />
<Content Remove="Areas\Component\Views\Form\Filter.cshtml" />
<Content Remove="Areas\Component\Views\Table\Base.cshtml" />
<Content Remove="Areas\Component\Views\Table\Control.cshtml" />
<Content Remove="wwwroot\css\laytpl-v1.1\demo.url" />
<Content Remove="wwwroot\css\laytpl-v1.1\更新日志.txt" />
<Content Remove="wwwroot\js\component\el-form-dialog.js" />
<Content Remove="wwwroot\js\component\el-dialog-form.js" />
<Content Remove="wwwroot\js\component\el-form-filter.js" />
<Content Remove="wwwroot\js\component\el-table-base.js" />
<Content Remove="wwwroot\js\component\el-table-control.js" />
</ItemGroup>
<ItemGroup>
......@@ -66,19 +67,18 @@
</ItemGroup>
<ItemGroup>
<None Include="Areas\Component\Views\Control\Index.cshtml" />
<None Include="Areas\Component\Views\Dialog\Form.cshtml" />
<None Include="Areas\Component\Views\Form\Filter.cshtml" />
<None Include="Areas\Component\Views\Form\Dialog.cshtml" />
<None Include="Areas\Component\Views\Form\Control.cshtml" />
<None Include="Areas\Component\Views\Table\Query.cshtml" />
<None Include="Areas\Component\Views\Table\Base.cshtml" />
<None Include="Areas\Component\Views\Table\Control.cshtml" />
<None Include="wwwroot\css\hplus\js\plugins\bootstrap-table\fixed-columns\bootstrap-table-fixed-columns.js" />
<None Include="wwwroot\css\hplus\js\plugins\bootstrap-table\fixed-columns\bootstrap-table-fixed-columns.min.js" />
<None Include="wwwroot\css\Layer-2.1\extend\layer.ext.js" />
<None Include="wwwroot\css\Layer-2.1\layer.js" />
<None Include="wwwroot\js\component\el-form-dialog.js" />
<None Include="wwwroot\js\component\el-control.js" />
<None Include="wwwroot\js\component\el-dialog-form.js" />
<None Include="wwwroot\js\component\el-form-filter.js" />
<None Include="wwwroot\js\component\el-table-base.js" />
<None Include="wwwroot\js\component\el-table-control.js" />
<None Include="wwwroot\js\component\el-table-query.js" />
<None Include="wwwroot\js\vue\element-ui-2.15.6.js" />
<None Include="wwwroot\js\vue\vue-2.6.14.js" />
......
.el-form-dialog .el-dialog__body {
.el-dialog-form .el-dialog__body {
padding: 0px;
}
.el-form-dialog .el-main {
.el-dialog-form .el-main {
padding: 10px 20px;
}
.el-form-dialog .el-form .el-col .el-form-item {
.el-dialog-form .el-form .el-col .el-form-item {
margin-bottom: 10px;
}
.el-form-dialog .el-form .el-col .el-form-item .el-form-item__error {
.el-dialog-form .el-form .el-col .el-form-item .el-form-item__error {
padding-top: 0px;
}
.el-form-dialog .el-form.border .el-col .el-form-item {
.el-dialog-form .el-form.border .el-col .el-form-item {
border-top: 1px solid #ebeef5;
border-left: 1px solid #ebeef5;
border-right: 1px solid #ebeef5;
margin-bottom: 0px;
}
.el-form-dialog .el-form.border .el-col:last-child .el-form-item {
.el-dialog-form .el-form.border .el-col:last-child .el-form-item {
border-bottom: 1px solid #ebeef5;
}
.el-form-dialog .el-form.border .el-form-item__content {
.el-dialog-form .el-form.border .el-form-item__content {
padding: 0px 5px;
border-left: 1px solid #ebeef5;
}
.el-form-dialog .el-dialog__header {
.el-dialog-form .el-dialog__header {
border-bottom: 1px solid #dcdfe6;
}
.el-form-dialog .el-footer {
.el-dialog-form .el-footer {
border-top: 1px solid #dcdfe6;
padding-top: 10px;
}
.el-form-dialog .el-form-item__label {
.el-dialog-form .el-form-item__label {
color: unset;
}
.el-form-dialog .el-control.text {
.el-dialog-form .el-form-control.text {
margin-top: 0px;
}
.el-form-dialog .el-control .el-select
.el-form-dialog .el-control .el-input-number {
.el-dialog-form .el-form-control .el-select
.el-dialog-form .el-form-control .el-input-number {
width: 100%;
}
.el-form-control .el-select,
.el-form-control .el-date-editor.el-input,
.el-form-control .el-input-number,
.el-form-control .el-autocomplete {
width: 100%;
}
.el-form-control .el-input-number .el-input__inner {
text-align: left;
}
.el-date-picker.has-sidebar {
width: auto !important;
padding-bottom: 20px;
}
.el-picker-panel .el-picker-panel__shortcut {
width: auto;
}
.el-picker-panel [slot=sidebar] + .el-picker-panel__body, .el-picker-panel__sidebar + .el-picker-panel__body {
margin-left: 0px !important;
}
.el-picker-panel [slot=sidebar], .el-picker-panel__sidebar {
top: auto !important;
left: 70px;
width: auto !important;
border: 0px !important;
margin-bottom: 2px;
display: inline-flex;
z-index: 1;
}
.el-picker-panel.el-date-range-picker.el-popper.has-sidebar .el-picker-panel__sidebar {
left: 70px;
}
.el-picker-panel.el-date-range-picker.el-popper.has-sidebar .el-picker-panel__body .el-picker-panel__content.el-date-range-picker__content {
padding-bottom: 25px;
}
.el-date-editor.el-input .el-input__icon {
cursor: pointer;
}
.el-form-control .el-range-separator {
width: auto;
}
......@@ -20,7 +20,7 @@
width: auto;
}
.el-form-filter .el-form-button .el-control {
.el-form-filter .el-form-button .el-form-control {
margin-right: 10px;
}
......@@ -28,12 +28,6 @@
margin-bottom: 5px;
}
.el-form-filter .el-select,
.el-form-filter .el-date-editor.el-input,
.el-form-filter .el-autocomplete {
width: 100%;
}
.el-form-filter .el-date-editor.el-input .el-input__inner {
cursor: pointer;
padding-right: 35px;
......@@ -55,43 +49,4 @@
.el-form-filter .el-select__caret.el-input__icon.el-icon-circle-close {
height: 90%;
}
.el-date-picker.has-sidebar {
width: auto !important;
padding-bottom: 20px;
}
.el-picker-panel .el-picker-panel__shortcut {
width: auto;
}
.el-picker-panel [slot=sidebar] + .el-picker-panel__body, .el-picker-panel__sidebar + .el-picker-panel__body {
margin-left: 0px !important;
}
.el-picker-panel [slot=sidebar], .el-picker-panel__sidebar {
top: auto !important;
left: 134px;
width: auto !important;
border: 0px !important;
margin-bottom: 2px;
display: inline-flex;
z-index: 1;
}
.el-picker-panel.el-date-range-picker.el-popper.has-sidebar .el-picker-panel__sidebar {
left: 70px;
}
.el-picker-panel.el-date-range-picker.el-popper.has-sidebar .el-picker-panel__body .el-picker-panel__content.el-date-range-picker__content {
padding-bottom: 25px;
}
.el-date-editor.el-input .el-input__icon {
cursor: pointer;
}
.el-form-filter .el-control .el-range-separator {
width: auto;
}
}
\ No newline at end of file
.el-table-control .el-table-column-search input {
border: 0px;
}
.el-table-control .el-table__header-wrapper th .cell,
.el-table-control .el-table__header-wrapper .el-table-column--selection .cell {
padding: 0px;
}
.el-table-control .el-table__body tr td a {
color: #3a8ee6;
margin: 0px 5px;
}
\ No newline at end of file
......@@ -17,11 +17,6 @@
background: white;
}
.el-table-query .el-table__body tr td a {
color: #3a8ee6;
margin: 0px 5px;
}
.el-container.el-table-query .el-header {
padding: 0px;
height: auto !important;
......
Vue.component('el-form-dialog', {
Vue.component('el-dialog-form', {
props: {
//编码
code: {
......@@ -118,5 +118,5 @@
}
}
},
template: '#elFormDialog'
template: '#elDialogForm'
});
\ No newline at end of file
Vue.component('el-control', {
Vue.component('el-form-control', {
props: {
item: {
type: Object,
default: {}
},
//绑定值
value: {
default: null
},
ploading: {
type: Boolean,
default: false
//数据源
scope: {
default: null
},
//是否禁用
disabled: {
default: null
}
},
//双向绑定
model: {
prop: "value",
event: "change"
},
//监听
watch: {
value: {
handler(val) {
......@@ -64,6 +71,7 @@
//自定义JS
javaScript(js, $event, item) {
var form = this.form
var scope = this.scope;
if (js) {
return eval(js)
}
......@@ -127,6 +135,7 @@
case 'month':
case 'date':
that.$set(that, "item_value", that.item.defaultValue == 'new Date()' ? new Date() : that.item.defaultValue);
break;
case 'daterange':
var date = new Date();
switch (that.item.defaultValue) {
......@@ -155,5 +164,5 @@
showDialog(title, form, code) {
},
},
template: '#elControl'
template: '#elFormControl'
});
\ No newline at end of file
......@@ -14,7 +14,7 @@
onInitValue: function () {
},
//获取查询过虑条件
getQueryFilter: function (defaultValue) {
getFilter: function (defaultValue) {
var that = this;
var listFilter = [];
//当前筛选区域过虑条件
......@@ -90,15 +90,15 @@
},
//查询
onSearch: function () {
this.$emit("search", this.getQueryFilter());
this.$emit("search", this.getFilter());
},
//重置
onReset: function () {
this.$emit("reset", this.getQueryFilter(true));
this.$emit("reset", this.getFilter(true));
},
//导出
onExport: function () {
this.$emit("export", this.getQueryFilter());
this.$emit("export", this.getFilter());
},
//导入
onImport: function () {
......
Vue.component('el-table-base', {
Vue.component('el-table-control', {
props: {
//编码
code: {
......@@ -11,6 +11,31 @@
//过虑条件参数
filterParams: {
type: Object
},
//绑定值
value: {
default: null
}
},
//双向绑定
model: {
prop: "value",
event: "change"
},
//监听
watch: {
value: {
handler(val) {
this.$set(this, "listData", val || [])
},
deep: true,
immediate: true
},
listData: {
handler(val) {
this.$emit("change", val)
},
deep: true
}
},
data: function () {
......@@ -21,9 +46,18 @@
}
},
methods: {
//初始化数据
onInit: function () {
this.isFirst = true;
//清空排序
clearSort: function () {
this.$refs.table.clearSort();
},
//清空列值
clearColumnValue: function () {
var that = this;
if (that.setting.isShowColumnSearch && that.setting.listColumn && that.setting.listColumn.length) {
that.setting.listColumn.forEach(function (l) {
l.value = null;
})
}
},
//获取表单组件信息
getTable: function () {
......@@ -61,6 +95,46 @@
this.$message(error.statusText || " 未知错误!");
});
},
//获取选择行
getSelectItems: function () {
return this.$refs.table.selection;
},
//自定义JS
javaScript(js, scope) {
if (js) {
return eval(js)
}
},
//是否存在JS或CSS
isInclude: function (name) {
var js = /js$/i.test(name);
var es = document.getElementsByTagName(js ? 'script' : 'link');
for (var i = 0; i < es.length; i++) {
if (es[i][js ? 'src' : 'href'].indexOf(name) != -1) {
return true;
}
}
return false;
},
//同步引用JS
srcScript: function (url) {
if (url) {
var include = this.isInclude(url);
if (!include) {
var request = new XMLHttpRequest();
request.open("get", url, false);//false指定非异步执行
request.send(null);
var ele = document.createElement("script");
ele.setAttribute("type", "text/javascript");
ele.text = request.responseText;
document.body.appendChild(ele);
}
}
},
//初始化数据
onInit: function () {
this.isFirst = true;
},
//查询字段
onSearchColumn: function () {
var that = this;
......@@ -85,7 +159,9 @@
that.$http.post("/Component/Table/GetListData", $.extend({ code: that.code }, that.filterParams), { emulateJSON: true, code: that.code }).then(function (response) {
var result = response.data;
if (response.status === 200 && result.result && result.data) {
Vue.set(that.filterParams, "total", result.data.totalCount);
if (that.filterParams) {
Vue.set(that.filterParams, "total", result.data.totalCount);
}
Vue.set(that, "listData", (result.data.list || []));
} else {
this.$message(result.message || " 未知错误!");
......@@ -148,46 +224,6 @@
return null;
}
},
//获取选择行
getSelectItems: function () {
return this.$refs.table.selection;
},
/** 自定义JS */
javaScript(js, scope) {
if (js) {
return eval(js)
}
},
//清空排序
clearSort: function () {
this.$refs.table.clearSort();
},
//是否存在JS或CSS
isInclude: function (name) {
var js = /js$/i.test(name);
var es = document.getElementsByTagName(js ? 'script' : 'link');
for (var i = 0; i < es.length; i++) {
if (es[i][js ? 'src' : 'href'].indexOf(name) != -1) {
return true;
}
}
return false;
},
//同步引用JS
srcScript: function (url) {
if (url) {
var include = this.isInclude(url);
if (!include) {
var request = new XMLHttpRequest();
request.open("get", url, false);//false指定非异步执行
request.send(null);
var ele = document.createElement("script");
ele.setAttribute("type", "text/javascript");
ele.text = request.responseText;
document.body.appendChild(ele);
}
}
},
},
mounted: function () {
this.onInit();
......@@ -196,5 +232,5 @@
created: function () {
},
template: '#elTableBase'
template: '#elTableControl'
});
\ No newline at end of file
......@@ -29,6 +29,42 @@
}
},
methods: {
//关闭弹出窗
closeDialog() {
this.$emit("close-dialog")
},
//弹出窗
showDialog(title, form, code) {
this.$emit("show-dialog", title, form, code)
},
//获取过虑条件
getFilter: function (filter) {
var that = this;
var listFilter = [];
//筛选区域过虑条件
if (!filter) {
listFilter = that.$refs.formFilter.getFilter(true);
} else {
listFilter = filter.length > 0 ? filter : [];
}
//列值过虑条件
if (that.setting.isShowColumnSearch && that.setting.listColumn && that.setting.listColumn.length) {
var listColumnFilter = that.setting.listColumn.filter(function (l) {
return !!l.value
});
if (listColumnFilter && listColumnFilter.length) {
listColumnFilter = listColumnFilter.forEach(function (l) {
if ((l.type && l.type.toLowerCase()) == 'select') {
listFilter.push({ field: l.prop, operator: "=", value: l.value });
} else {
listFilter.push({ field: l.prop, operator: "like", value: l.value });
}
});
}
}
Vue.set(that.filterParams, 'listFilter', listFilter);
return listFilter;
},
//表单组件初始化事件
onInit: function (setting) {
var that = this;
......@@ -36,7 +72,7 @@
//初始化时设置过虑条件
if (setting.listFilterControl) {
that.$refs.formFilter.filter.listFilterControl = setting.listFilterControl
Vue.set(that.filterParams, 'listFilter', that.$refs.formFilter.getQueryFilter(true));
Vue.set(that.filterParams, 'listFilter', that.$refs.formFilter.getFilter(true));
}
//面包屑
if (that.setting.listCrumb && that.setting.listCrumb.length && document.getElementsByClassName("breadcrumb").length == 1) {
......@@ -50,12 +86,8 @@
//设置当前第一页
Vue.set(that.filterParams, 'currentPage', 1);
Vue.set(that.filterParams, 'code', that.code);
//设置过虑条件
if (!listFilter) {
Vue.set(that.filterParams, 'listFilter', that.$refs.formFilter.getQueryFilter(true));
} else {
Vue.set(that.filterParams, 'listFilter', listFilter.length > 0 ? listFilter : null);
}
//获取过虑条件
this.getFilter(listFilter);
//查询
that.$refs.table.onSearch();
},
......@@ -74,10 +106,13 @@
}
//清空排序
that.$refs.table.clearSort();
//清空列值
that.$refs.table.clearColumnValue;
Vue.set(that.filterParams, 'pageSize', 10);
Vue.set(that.filterParams, 'ListOrder', null);
//初始化过虑条件
Vue.set(that.filterParams, 'listFilter', listFilter && listFilter.length > 0 ? listFilter : null);
//重新查询
that.onSearch();
},
//导出
......@@ -132,14 +167,6 @@
Vue.set(that.filterParams, "currentPage", val);
//查询
that.$refs.table.onSearchData();
},
//弹出窗
showDialog(title, form, code) {
this.$emit("show-dialog", title, form, code)
},
//关闭弹出窗
closeDialog() {
this.$emit("close-dialog")
}
},
mounted: function () {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment