|
|
@@ -4,7 +4,7 @@
|
|
|
ref="elTable"
|
|
|
:data="data"
|
|
|
v-bind="table"
|
|
|
- style="width:100%;"
|
|
|
+ style="width: 100%"
|
|
|
v-on="$listeners"
|
|
|
@selection-change="tableSelection = $event"
|
|
|
>
|
|
|
@@ -32,7 +32,6 @@
|
|
|
/>
|
|
|
<el-tooltip
|
|
|
v-else
|
|
|
-
|
|
|
:effect="column._screen_tip_effect_ || 'dark'"
|
|
|
:content="column._screen_tip_ || '筛选'"
|
|
|
:placement="column._screen_tip_placement_ || 'top'"
|
|
|
@@ -75,7 +74,7 @@
|
|
|
:page-sizes="[10, 20, 50, 100]"
|
|
|
:total="page.total"
|
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
|
- style="text-align:right"
|
|
|
+ style="text-align: right"
|
|
|
class="fu-page"
|
|
|
@current-change="$emit('page-curr-change', $event)"
|
|
|
@size-change="$emit('page-size-change', $event)"
|
|
|
@@ -100,11 +99,11 @@
|
|
|
:key="'conditionItem' + conditionIndex"
|
|
|
class="condition-item"
|
|
|
>
|
|
|
- <hr>
|
|
|
+ <hr />
|
|
|
<el-select
|
|
|
v-model="conditionItem.prop"
|
|
|
:class="{
|
|
|
- 'el-error': !conditionItem.prop || conditionItem.prop == ''
|
|
|
+ 'el-error': !conditionItem.prop || conditionItem.prop == '',
|
|
|
}"
|
|
|
:clearable="true"
|
|
|
placeholder="请选择"
|
|
|
@@ -116,8 +115,8 @@
|
|
|
v-for="screenColumnItem in screenColumns"
|
|
|
:key="
|
|
|
'conditionItem_screenCol' +
|
|
|
- conditionIndex +
|
|
|
- screenColumnItem.prop
|
|
|
+ conditionIndex +
|
|
|
+ screenColumnItem.prop
|
|
|
"
|
|
|
:label="screenColumnItem.label"
|
|
|
:value="screenColumnItem.prop"
|
|
|
@@ -126,7 +125,7 @@
|
|
|
<el-select
|
|
|
v-model="conditionItem.keyId"
|
|
|
:class="{
|
|
|
- 'el-error': !conditionItem.keyId || conditionItem.keyId == ''
|
|
|
+ 'el-error': !conditionItem.keyId || conditionItem.keyId == '',
|
|
|
}"
|
|
|
:clearable="true"
|
|
|
placeholder="请选择"
|
|
|
@@ -138,8 +137,8 @@
|
|
|
v-for="screenKeyItem in conditionItem._screenKeys_"
|
|
|
:key="
|
|
|
'conditionItem_screenKey' +
|
|
|
- conditionIndex +
|
|
|
- screenKeyItem.id
|
|
|
+ conditionIndex +
|
|
|
+ screenKeyItem.id
|
|
|
"
|
|
|
:label="screenKeyItem.label"
|
|
|
:value="screenKeyItem.id"
|
|
|
@@ -152,7 +151,7 @@
|
|
|
'conditionItem_hr' + conditionIndex + typeItem + typeIndex
|
|
|
"
|
|
|
:class="'divider-hr'"
|
|
|
- >
|
|
|
+ />
|
|
|
<el-input
|
|
|
v-if="typeIndex == 0 && typeItem === 'text'"
|
|
|
:key="
|
|
|
@@ -162,7 +161,7 @@
|
|
|
:class="{
|
|
|
'el-error':
|
|
|
conditionItem.value === undefined ||
|
|
|
- conditionItem.value === ''
|
|
|
+ conditionItem.value === '',
|
|
|
}"
|
|
|
placeholder="请输入内容"
|
|
|
maxlength="50"
|
|
|
@@ -172,15 +171,15 @@
|
|
|
v-else-if="typeIndex > 0 && typeItem === 'text'"
|
|
|
:key="
|
|
|
'conditionItem_val_end' +
|
|
|
- conditionIndex +
|
|
|
- typeItem +
|
|
|
- typeIndex
|
|
|
+ conditionIndex +
|
|
|
+ typeItem +
|
|
|
+ typeIndex
|
|
|
"
|
|
|
v-model="conditionItem.value_end"
|
|
|
:class="{
|
|
|
'el-error':
|
|
|
conditionItem.value_end === undefined ||
|
|
|
- conditionItem.value_end === ''
|
|
|
+ conditionItem.value_end === '',
|
|
|
}"
|
|
|
placeholder="请输入内容"
|
|
|
maxlength="50"
|
|
|
@@ -195,7 +194,7 @@
|
|
|
:class="{
|
|
|
'el-error':
|
|
|
conditionItem.value === undefined ||
|
|
|
- conditionItem.value === ''
|
|
|
+ conditionItem.value === '',
|
|
|
}"
|
|
|
:min="0"
|
|
|
:max="999"
|
|
|
@@ -205,15 +204,15 @@
|
|
|
v-else-if="typeIndex > 0 && typeItem === 'number'"
|
|
|
:key="
|
|
|
'conditionItem_val_end' +
|
|
|
- conditionIndex +
|
|
|
- typeItem +
|
|
|
- typeIndex
|
|
|
+ conditionIndex +
|
|
|
+ typeItem +
|
|
|
+ typeIndex
|
|
|
"
|
|
|
v-model="conditionItem.value_end"
|
|
|
:class="{
|
|
|
'el-error':
|
|
|
conditionItem.value_end === undefined ||
|
|
|
- conditionItem.value_end === ''
|
|
|
+ conditionItem.value_end === '',
|
|
|
}"
|
|
|
:min="0"
|
|
|
:max="999"
|
|
|
@@ -222,7 +221,7 @@
|
|
|
<el-date-picker
|
|
|
v-else-if="
|
|
|
typeIndex == 0 &&
|
|
|
- (typeItem === 'date' || typeItem === 'datetime')
|
|
|
+ (typeItem === 'date' || typeItem === 'datetime')
|
|
|
"
|
|
|
:key="
|
|
|
'conditionItem_val' + conditionIndex + typeItem + typeIndex
|
|
|
@@ -231,7 +230,7 @@
|
|
|
:class="{
|
|
|
'el-error':
|
|
|
conditionItem.value === undefined ||
|
|
|
- conditionItem.value === ''
|
|
|
+ conditionItem.value === '',
|
|
|
}"
|
|
|
:type="typeItem"
|
|
|
:value-format="'timestamp'"
|
|
|
@@ -242,19 +241,19 @@
|
|
|
<el-date-picker
|
|
|
v-else-if="
|
|
|
typeIndex > 0 &&
|
|
|
- (typeItem === 'date' || typeItem === 'datetime')
|
|
|
+ (typeItem === 'date' || typeItem === 'datetime')
|
|
|
"
|
|
|
:key="
|
|
|
'conditionItem_val_end' +
|
|
|
- conditionIndex +
|
|
|
- typeItem +
|
|
|
- typeIndex
|
|
|
+ conditionIndex +
|
|
|
+ typeItem +
|
|
|
+ typeIndex
|
|
|
"
|
|
|
v-model="conditionItem.value_end"
|
|
|
:class="{
|
|
|
'el-error':
|
|
|
conditionItem.value_end === undefined ||
|
|
|
- conditionItem.value_end === ''
|
|
|
+ conditionItem.value_end === '',
|
|
|
}"
|
|
|
:type="typeItem"
|
|
|
:value-format="'timestamp'"
|
|
|
@@ -272,21 +271,22 @@
|
|
|
'el-select-val': true,
|
|
|
'el-error':
|
|
|
conditionItem.value === undefined ||
|
|
|
- conditionItem.value === ''
|
|
|
+ conditionItem.value === '',
|
|
|
}"
|
|
|
:clearable="true"
|
|
|
placeholder="请选择"
|
|
|
@change="$forceUpdate()"
|
|
|
>
|
|
|
<el-option
|
|
|
- v-for="(optionItem,
|
|
|
- optionIndex) in conditionItem._select_options_"
|
|
|
+ v-for="(
|
|
|
+ optionItem, optionIndex
|
|
|
+ ) in conditionItem._select_options_"
|
|
|
:key="
|
|
|
'conditionItem_val_option' +
|
|
|
- conditionIndex +
|
|
|
- typeItem +
|
|
|
- typeIndex +
|
|
|
- optionIndex
|
|
|
+ conditionIndex +
|
|
|
+ typeItem +
|
|
|
+ typeIndex +
|
|
|
+ optionIndex
|
|
|
"
|
|
|
:label="optionItem.label"
|
|
|
:value="optionItem.id"
|
|
|
@@ -296,30 +296,31 @@
|
|
|
v-else-if="typeIndex > 0 && typeItem === 'select'"
|
|
|
:key="
|
|
|
'conditionItem_val_end' +
|
|
|
- conditionIndex +
|
|
|
- typeItem +
|
|
|
- typeIndex
|
|
|
+ conditionIndex +
|
|
|
+ typeItem +
|
|
|
+ typeIndex
|
|
|
"
|
|
|
v-model="conditionItem.value_end"
|
|
|
:class="{
|
|
|
'el-select-val': true,
|
|
|
'el-error':
|
|
|
conditionItem.value_end === undefined ||
|
|
|
- conditionItem.value_end === ''
|
|
|
+ conditionItem.value_end === '',
|
|
|
}"
|
|
|
:clearable="true"
|
|
|
placeholder="请选择"
|
|
|
@change="$forceUpdate()"
|
|
|
>
|
|
|
<el-option
|
|
|
- v-for="(optionItem,
|
|
|
- optionIndex) in conditionItem._select_options_end_"
|
|
|
+ v-for="(
|
|
|
+ optionItem, optionIndex
|
|
|
+ ) in conditionItem._select_options_end_"
|
|
|
:key="
|
|
|
'conditionItem_val_option_end' +
|
|
|
- conditionIndex +
|
|
|
- typeItem +
|
|
|
- typeIndex +
|
|
|
- optionIndex
|
|
|
+ conditionIndex +
|
|
|
+ typeItem +
|
|
|
+ typeIndex +
|
|
|
+ optionIndex
|
|
|
"
|
|
|
:label="optionItem.label"
|
|
|
:value="optionItem.id"
|
|
|
@@ -334,7 +335,7 @@
|
|
|
/>
|
|
|
</div>
|
|
|
<div class="condition-item">
|
|
|
- <hr>
|
|
|
+ <hr />
|
|
|
<el-button
|
|
|
type="primary"
|
|
|
icon="el-icon-circle-plus-outline"
|
|
|
@@ -355,70 +356,69 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import Sortable from 'sortablejs'
|
|
|
+import Sortable from "sortablejs";
|
|
|
|
|
|
export default {
|
|
|
- name: 'ExTable',
|
|
|
+ name: "ExTable",
|
|
|
components: {
|
|
|
- 'ex-slot': {
|
|
|
+ "ex-slot": {
|
|
|
functional: true,
|
|
|
props: {
|
|
|
render: Function,
|
|
|
scope: {
|
|
|
type: Object,
|
|
|
- default: null
|
|
|
+ default: null,
|
|
|
},
|
|
|
column: {
|
|
|
type: Object,
|
|
|
- default: null
|
|
|
- }
|
|
|
+ default: null,
|
|
|
+ },
|
|
|
},
|
|
|
render: (h, data) => {
|
|
|
- if (data.props.column) data.props.scope.column = data.props.column
|
|
|
- return data.props.render(h, data.props.scope)
|
|
|
- }
|
|
|
- }
|
|
|
+ if (data.props.column) data.props.scope.column = data.props.column;
|
|
|
+ return data.props.render(h, data.props.scope);
|
|
|
+ },
|
|
|
+ },
|
|
|
},
|
|
|
directives: {
|
|
|
// v-drap 可拖拽指令
|
|
|
drap: {
|
|
|
- inserted: function(element, binding) {
|
|
|
- element.onmousedown = function(e) {
|
|
|
- const el = binding.modifiers.parent ? element.parentNode : element
|
|
|
- const bodyWidth = document.body.offsetWidth
|
|
|
- const bodyHeight = document.body.offsetHeight
|
|
|
- const elWidth = el.offsetWidth
|
|
|
- const elHeight = el.offsetHeight
|
|
|
+ inserted: function (element, binding) {
|
|
|
+ element.onmousedown = function (e) {
|
|
|
+ const el = binding.modifiers.parent ? element.parentNode : element;
|
|
|
+ const bodyWidth = document.body.offsetWidth;
|
|
|
+ const bodyHeight = document.body.offsetHeight;
|
|
|
+ const elWidth = el.offsetWidth;
|
|
|
+ const elHeight = el.offsetHeight;
|
|
|
// 开始拖动，记录左上角坐标点
|
|
|
- const disX = e.clientX - el.offsetLeft
|
|
|
- const disY = e.clientY - el.offsetTop
|
|
|
- document.onmousemove = function(e) {
|
|
|
+ const disX = e.clientX - el.offsetLeft;
|
|
|
+ const disY = e.clientY - el.offsetTop;
|
|
|
+ document.onmousemove = function (e) {
|
|
|
// 拖动中，修改dom的左上角坐标点
|
|
|
- let l = e.clientX - disX
|
|
|
- let t = e.clientY - disY
|
|
|
+ let l = e.clientX - disX;
|
|
|
+ let t = e.clientY - disY;
|
|
|
if (binding.modifiers.limit) {
|
|
|
- l = l < 0 ? 0 : l
|
|
|
- t = t < 0 ? 0 : t
|
|
|
- l = l > bodyWidth - elWidth ? bodyWidth - elWidth : l
|
|
|
- t = t > bodyHeight - elHeight ? bodyHeight - elHeight : t
|
|
|
+ l = l < 0 ? 0 : l;
|
|
|
+ t = t < 0 ? 0 : t;
|
|
|
+ l = l > bodyWidth - elWidth ? bodyWidth - elWidth : l;
|
|
|
+ t = t > bodyHeight - elHeight ? bodyHeight - elHeight : t;
|
|
|
}
|
|
|
- el.style.left = l + 'px'
|
|
|
- el.style.top = t + 'px'
|
|
|
- }
|
|
|
- document.onmouseup = function() {
|
|
|
+ el.style.left = l + "px";
|
|
|
+ el.style.top = t + "px";
|
|
|
+ };
|
|
|
+ document.onmouseup = function () {
|
|
|
// 结束拖动
|
|
|
- document.onmousemove = null
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ document.onmousemove = null;
|
|
|
+ };
|
|
|
+ };
|
|
|
+ },
|
|
|
+ },
|
|
|
},
|
|
|
props: {
|
|
|
-
|
|
|
// el-table 表格数据 对应data字段
|
|
|
data: {
|
|
|
type: Array,
|
|
|
- default: () => []
|
|
|
+ default: () => [],
|
|
|
},
|
|
|
/**
|
|
|
* el-table-column 表格列属性集合
|
|
|
@@ -439,7 +439,7 @@ export default {
|
|
|
*/
|
|
|
columns: {
|
|
|
type: Array,
|
|
|
- default: () => []
|
|
|
+ default: () => [],
|
|
|
},
|
|
|
/**
|
|
|
* el-pagination
|
|
|
@@ -455,29 +455,29 @@ export default {
|
|
|
*/
|
|
|
page: {
|
|
|
type: [Boolean, Object],
|
|
|
- default: false
|
|
|
+ default: false,
|
|
|
},
|
|
|
/**
|
|
|
* 筛选条件集合
|
|
|
*/
|
|
|
conditions: {
|
|
|
type: Array,
|
|
|
- default: () => []
|
|
|
+ default: () => [],
|
|
|
},
|
|
|
/**
|
|
|
* 是否允许拖拽行
|
|
|
*/
|
|
|
isRowDrop: {
|
|
|
type: Boolean,
|
|
|
- default: false
|
|
|
+ default: false,
|
|
|
},
|
|
|
/**
|
|
|
* 是否允许拖拽列
|
|
|
*/
|
|
|
isColDrop: {
|
|
|
type: Boolean,
|
|
|
- default: false
|
|
|
- }
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
@@ -487,50 +487,48 @@ export default {
|
|
|
isScreenDialog: false,
|
|
|
// 筛选的key集合
|
|
|
screenKeys: [
|
|
|
- { id: '1', key: '1', type: 'text', label: '包含' },
|
|
|
- { id: '2', key: '2', type: 'text', label: '不包含' },
|
|
|
- { id: '3', key: '3', type: 'text', label: '等于' },
|
|
|
- { id: '4', key: '4', type: 'text', label: '不等于' },
|
|
|
- { id: '5', key: '5', type: '', label: '为空' },
|
|
|
- { id: '6', key: '6', type: '', label: '不为空' },
|
|
|
- { id: '7', key: '7', type: 'date', label: '开始于' },
|
|
|
- { id: '8', key: '8', type: 'date', label: '结束于' },
|
|
|
- { id: '9', key: '9', type: 'date', label: '早于' },
|
|
|
- { id: '10', key: '10', type: 'date', label: '晚于' },
|
|
|
- { id: '11', key: '11', type: 'date', label: '不早于' },
|
|
|
- { id: '12', key: '12', type: 'date', label: '不晚于' },
|
|
|
- { id: '13', key: '13', type: 'datetime_datetime', label: '时间段' },
|
|
|
- { id: '14', key: '14', type: 'number', label: '前N天' },
|
|
|
- { id: '15', key: '15', type: 'number', label: '后N天' },
|
|
|
- { id: '16', key: '16', type: 'number', label: '前N月' },
|
|
|
- { id: '17', key: '17', type: 'number', label: '后N月' },
|
|
|
- { id: '18', key: '18', type: 'number', label: '大于' },
|
|
|
- { id: '19', key: '19', type: 'number', label: '大于等于' },
|
|
|
- { id: '20', key: '20', type: 'number', label: '小于' },
|
|
|
- { id: '21', key: '21', type: 'number', label: '小于等于' },
|
|
|
- { id: '22', key: '22', type: 'number_number', label: '介于' },
|
|
|
- { id: '23', key: '3', type: 'select', label: '单项选择' },
|
|
|
- { id: '24', key: '22', type: 'select_select', label: '区间选择' }
|
|
|
- ]
|
|
|
- }
|
|
|
+ { id: "1", key: "1", type: "text", label: "包含" },
|
|
|
+ { id: "2", key: "2", type: "text", label: "不包含" },
|
|
|
+ { id: "3", key: "3", type: "text", label: "等于" },
|
|
|
+ { id: "4", key: "4", type: "text", label: "不等于" },
|
|
|
+ { id: "5", key: "5", type: "", label: "为空" },
|
|
|
+ { id: "6", key: "6", type: "", label: "不为空" },
|
|
|
+ { id: "7", key: "7", type: "date", label: "开始于" },
|
|
|
+ { id: "8", key: "8", type: "date", label: "结束于" },
|
|
|
+ { id: "9", key: "9", type: "date", label: "早于" },
|
|
|
+ { id: "10", key: "10", type: "date", label: "晚于" },
|
|
|
+ { id: "11", key: "11", type: "date", label: "不早于" },
|
|
|
+ { id: "12", key: "12", type: "date", label: "不晚于" },
|
|
|
+ { id: "13", key: "13", type: "datetime_datetime", label: "时间段" },
|
|
|
+ { id: "14", key: "14", type: "number", label: "前N天" },
|
|
|
+ { id: "15", key: "15", type: "number", label: "后N天" },
|
|
|
+ { id: "16", key: "16", type: "number", label: "前N月" },
|
|
|
+ { id: "17", key: "17", type: "number", label: "后N月" },
|
|
|
+ { id: "18", key: "18", type: "number", label: "大于" },
|
|
|
+ { id: "19", key: "19", type: "number", label: "大于等于" },
|
|
|
+ { id: "20", key: "20", type: "number", label: "小于" },
|
|
|
+ { id: "21", key: "21", type: "number", label: "小于等于" },
|
|
|
+ { id: "22", key: "22", type: "number_number", label: "介于" },
|
|
|
+ { id: "23", key: "3", type: "select", label: "单项选择" },
|
|
|
+ { id: "24", key: "22", type: "select_select", label: "区间选择" },
|
|
|
+ ],
|
|
|
+ };
|
|
|
},
|
|
|
computed: {
|
|
|
// 允许筛选的列
|
|
|
screenColumns() {
|
|
|
- return this.columns.filter(item => item._screen_ === true)
|
|
|
+ return this.columns.filter((item) => item._screen_ === true);
|
|
|
},
|
|
|
// 允许设置的列
|
|
|
setColumns() {
|
|
|
- return this.columns.filter(item => !item._noset_)
|
|
|
+ return this.columns.filter((item) => !item._noset_);
|
|
|
},
|
|
|
// 筛选条件是否包含当前列
|
|
|
isHasScreenColumn() {
|
|
|
- return function(col) {
|
|
|
- return this.conditions.some(item => item.prop === col.prop)
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
+ return function (col) {
|
|
|
+ return this.conditions.some((item) => item.prop === col.prop);
|
|
|
+ };
|
|
|
+ },
|
|
|
page_curr() {
|
|
|
return this.page.curr;
|
|
|
},
|
|
|
@@ -554,24 +552,24 @@ export default {
|
|
|
},
|
|
|
mounted() {
|
|
|
// 拖拽绑定
|
|
|
- this.rowDrop()
|
|
|
- this.columnDrop()
|
|
|
+ this.rowDrop();
|
|
|
+ this.columnDrop();
|
|
|
},
|
|
|
methods: {
|
|
|
// 添加一行条件
|
|
|
addConditionItemByCol(col, scope) {
|
|
|
- this.isScreenDialog = true
|
|
|
+ this.isScreenDialog = true;
|
|
|
// 当前项
|
|
|
const index = col
|
|
|
- ? this.conditions.findIndex(item => item.prop === col.prop)
|
|
|
- : undefined
|
|
|
+ ? this.conditions.findIndex((item) => item.prop === col.prop)
|
|
|
+ : undefined;
|
|
|
if (col && index !== undefined && index > -1) {
|
|
|
const dom = document.querySelector(
|
|
|
`.dialog-screen .body #conditionItem${index}`
|
|
|
- )
|
|
|
+ );
|
|
|
this.$nextTick(() => {
|
|
|
- this.screenBodyScrollTop(dom.offsetTop - dom.scrollHeight)
|
|
|
- })
|
|
|
+ this.screenBodyScrollTop(dom.offsetTop - dom.scrollHeight);
|
|
|
+ });
|
|
|
} else {
|
|
|
this.conditions.push(
|
|
|
Object.assign(
|
|
|
@@ -579,85 +577,85 @@ export default {
|
|
|
col || {},
|
|
|
col
|
|
|
? {
|
|
|
- _select_options_end_:
|
|
|
+ _select_options_end_:
|
|
|
col._select_options_ && !col._select_options_end_
|
|
|
? col._select_options_
|
|
|
: col._select_options_end_,
|
|
|
- _screenKeys_: col._keys_
|
|
|
- ? col._keys_.map(item =>
|
|
|
- this.screenKeys.find(fitem => item == fitem.id)
|
|
|
- )
|
|
|
- : [].concat(this.screenKeys)
|
|
|
- }
|
|
|
+ _screenKeys_: col._keys_
|
|
|
+ ? col._keys_.map((item) =>
|
|
|
+ this.screenKeys.find((fitem) => item == fitem.id)
|
|
|
+ )
|
|
|
+ : [].concat(this.screenKeys),
|
|
|
+ }
|
|
|
: {}
|
|
|
)
|
|
|
- )
|
|
|
+ );
|
|
|
this.$nextTick(() => {
|
|
|
this.screenBodyScrollTop(
|
|
|
- document.querySelector('.dialog-screen .body').scrollHeight
|
|
|
- )
|
|
|
- })
|
|
|
+ document.querySelector(".dialog-screen .body").scrollHeight
|
|
|
+ );
|
|
|
+ });
|
|
|
}
|
|
|
},
|
|
|
// 删除一行条件
|
|
|
delConditionItemByIndex(index, item) {
|
|
|
- this.conditions.splice(index, 1)
|
|
|
+ this.conditions.splice(index, 1);
|
|
|
},
|
|
|
// 筛选重置
|
|
|
screenReset() {
|
|
|
- this.conditions.splice(0)
|
|
|
- this.$emit('screen-reset', this.conditions)
|
|
|
- this.isScreenDialog = false
|
|
|
+ this.conditions.splice(0);
|
|
|
+ this.$emit("screen-reset", this.conditions);
|
|
|
+ this.isScreenDialog = false;
|
|
|
},
|
|
|
// 筛选提交
|
|
|
screenSubmit() {
|
|
|
if (this.validotarScreen()) {
|
|
|
- this.$emit('screen-submit', this.conditions)
|
|
|
- this.isScreenDialog = false
|
|
|
+ this.$emit("screen-submit", this.conditions);
|
|
|
+ this.isScreenDialog = false;
|
|
|
} else {
|
|
|
- this.$message.error('筛选项及筛选值不可为空')
|
|
|
+ this.$message.error("筛选项及筛选值不可为空");
|
|
|
}
|
|
|
},
|
|
|
// 滚动筛选框body
|
|
|
screenBodyScrollTop(t) {
|
|
|
- document.querySelector('.dialog-screen .body').scrollTop = t
|
|
|
+ document.querySelector(".dialog-screen .body").scrollTop = t;
|
|
|
},
|
|
|
// 校验筛选框筛选条件
|
|
|
validotarScreen() {
|
|
|
return this.conditions.every(
|
|
|
- item =>
|
|
|
+ (item) =>
|
|
|
item.prop &&
|
|
|
- item.prop != '' &&
|
|
|
+ item.prop != "" &&
|
|
|
item.keyId &&
|
|
|
- item.keyId != '' &&
|
|
|
+ item.keyId != "" &&
|
|
|
item.key &&
|
|
|
- item.key != '' &&
|
|
|
+ item.key != "" &&
|
|
|
(item.type.length === 0 ||
|
|
|
(item.type.length === 1 &&
|
|
|
item.value !== undefined &&
|
|
|
- item.value !== '') ||
|
|
|
+ item.value !== "") ||
|
|
|
(item.type.length > 1 &&
|
|
|
item.value !== undefined &&
|
|
|
- item.value !== '' &&
|
|
|
+ item.value !== "" &&
|
|
|
item.value_end !== undefined &&
|
|
|
- item.value_end !== ''))
|
|
|
- )
|
|
|
+ item.value_end !== ""))
|
|
|
+ );
|
|
|
},
|
|
|
// 筛选条件prop改变
|
|
|
screenPropsChange(val, scindex, scitem) {
|
|
|
- if (val === undefined || val === '') throw new Error('数据异常')
|
|
|
+ if (val === undefined || val === "") throw new Error("数据异常");
|
|
|
// 选中列的原始数据
|
|
|
- const columnsItem = this.columns.find(item => item.prop === val)
|
|
|
+ const columnsItem = this.columns.find((item) => item.prop === val);
|
|
|
// 重置当前筛选条件数据
|
|
|
this.$set(
|
|
|
this.conditions,
|
|
|
scindex,
|
|
|
Object.assign(
|
|
|
{
|
|
|
- keyId: '',
|
|
|
- key: '',
|
|
|
- value: '',
|
|
|
- value_end: ''
|
|
|
+ keyId: "",
|
|
|
+ key: "",
|
|
|
+ value: "",
|
|
|
+ value_end: "",
|
|
|
},
|
|
|
columnsItem,
|
|
|
{
|
|
|
@@ -666,97 +664,98 @@ export default {
|
|
|
? columnsItem._select_options_
|
|
|
: columnsItem._select_options_end_,
|
|
|
_screenKeys_: columnsItem._keys_
|
|
|
- ? columnsItem._keys_.map(item =>
|
|
|
- this.screenKeys.find(fitem => item == fitem.id)
|
|
|
- )
|
|
|
- : [].concat(this.screenKeys)
|
|
|
+ ? columnsItem._keys_.map((item) =>
|
|
|
+ this.screenKeys.find((fitem) => item == fitem.id)
|
|
|
+ )
|
|
|
+ : [].concat(this.screenKeys),
|
|
|
}
|
|
|
)
|
|
|
- )
|
|
|
+ );
|
|
|
},
|
|
|
// 筛选条件key改变
|
|
|
screenKeysChange(val, scindex, scitem) {
|
|
|
- if (val === undefined || val === '') throw new Error('数据异常')
|
|
|
+ if (val === undefined || val === "") throw new Error("数据异常");
|
|
|
// 选中key支持的类型
|
|
|
- const typeText = this.screenKeys.find(item => item.id === val).type || ''
|
|
|
- const key = this.screenKeys.find(item => item.id === val).key || ''
|
|
|
+ const typeText =
|
|
|
+ this.screenKeys.find((item) => item.id === val).type || "";
|
|
|
+ const key = this.screenKeys.find((item) => item.id === val).key || "";
|
|
|
// 重置当前筛选条件数据
|
|
|
this.$set(
|
|
|
this.conditions,
|
|
|
scindex,
|
|
|
Object.assign({}, scitem, {
|
|
|
key: key,
|
|
|
- value: '',
|
|
|
- value_end: '',
|
|
|
+ value: "",
|
|
|
+ value_end: "",
|
|
|
typeText: typeText,
|
|
|
type: typeText
|
|
|
- .split('_')
|
|
|
- .filter(item => item !== undefined && item !== '')
|
|
|
+ .split("_")
|
|
|
+ .filter((item) => item !== undefined && item !== ""),
|
|
|
})
|
|
|
- )
|
|
|
+ );
|
|
|
},
|
|
|
// 行拖拽
|
|
|
rowDrop() {
|
|
|
const tbody = document.querySelector(
|
|
|
- '.el-table__body-wrapper > table > tbody'
|
|
|
- )
|
|
|
+ ".el-table__body-wrapper > table > tbody"
|
|
|
+ );
|
|
|
Sortable.create(tbody, {
|
|
|
disabled: !this.isRowDrop,
|
|
|
- ghostClass: 'sortable-ghost',
|
|
|
+ ghostClass: "sortable-ghost",
|
|
|
animation: 180,
|
|
|
delay: 0,
|
|
|
- onEndevt: evt => {
|
|
|
- const currItem = this.data.splice(evt.oldIndex, 1)[0]
|
|
|
- this.data.splice(evt.newIndex, 0, currItem)
|
|
|
- }
|
|
|
- })
|
|
|
+ onEndevt: (evt) => {
|
|
|
+ const currItem = this.data.splice(evt.oldIndex, 1)[0];
|
|
|
+ this.data.splice(evt.newIndex, 0, currItem);
|
|
|
+ },
|
|
|
+ });
|
|
|
},
|
|
|
// 列拖拽
|
|
|
columnDrop() {
|
|
|
- const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
|
|
|
+ const wrapperTr = document.querySelector(".el-table__header-wrapper tr");
|
|
|
Sortable.create(wrapperTr, {
|
|
|
disabled: !this.isColDrop,
|
|
|
- ghostClass: 'sortable-ghost',
|
|
|
+ ghostClass: "sortable-ghost",
|
|
|
animation: 180,
|
|
|
delay: 0,
|
|
|
- onEnd: evt => {
|
|
|
- const currItem = this.columns.splice(evt.oldIndex, 1)[0]
|
|
|
- this.columns.splice(evt.newIndex, 0, currItem)
|
|
|
- }
|
|
|
- })
|
|
|
+ onEnd: (evt) => {
|
|
|
+ const currItem = this.columns.splice(evt.oldIndex, 1)[0];
|
|
|
+ this.columns.splice(evt.newIndex, 0, currItem);
|
|
|
+ },
|
|
|
+ });
|
|
|
},
|
|
|
// 获取对象的属性
|
|
|
getObjPrototype(o, a) {
|
|
|
- const fn = Function
|
|
|
- return new fn('obj', `return obj.${a}`)(o)
|
|
|
+ const fn = Function;
|
|
|
+ return new fn("obj", `return obj.${a}`)(o);
|
|
|
},
|
|
|
/** 表格方法 传递给el-table，后续有需要可继续增加 **/
|
|
|
// 对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法
|
|
|
doLayout(...arg) {
|
|
|
- this.$refs.elTable.doLayout(...arg)
|
|
|
+ this.$refs.elTable.doLayout(...arg);
|
|
|
},
|
|
|
// 用于多选表格，清空用户的选择
|
|
|
clearSelection(...arg) {
|
|
|
- this.$refs.elTable.clearSelection(...arg)
|
|
|
+ this.$refs.elTable.clearSelection(...arg);
|
|
|
},
|
|
|
// 用于多选表格，切换某一行的选中状态
|
|
|
toggleRowSelection(...arg) {
|
|
|
- this.$refs.elTable.toggleRowSelection(...arg)
|
|
|
+ this.$refs.elTable.toggleRowSelection(...arg);
|
|
|
},
|
|
|
// 用于多选表格，切换所有行的选中状态
|
|
|
toggleAllSelection(...arg) {
|
|
|
- this.$refs.elTable.toggleAllSelection(...arg)
|
|
|
+ this.$refs.elTable.toggleAllSelection(...arg);
|
|
|
},
|
|
|
// 用于单选表格，设定某一行为选中行
|
|
|
setCurrentRow(...arg) {
|
|
|
- this.$refs.elTable.setCurrentRow(...arg)
|
|
|
+ this.$refs.elTable.setCurrentRow(...arg);
|
|
|
},
|
|
|
// 用于可展开表格与树形表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开）
|
|
|
toggleRowExpansion(...arg) {
|
|
|
- this.$refs.elTable.toggleRowExpansion(...arg)
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ this.$refs.elTable.toggleRowExpansion(...arg);
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="css">
|
