304 lines
8.1 KiB
Vue
304 lines
8.1 KiB
Vue
<template>
|
|
<div>
|
|
<el-row :gutter="20">
|
|
<!--用户数据-->
|
|
<el-col v-if="queryOption.disable === false" :span="20" :xs="24">
|
|
<el-form
|
|
:model="params"
|
|
ref="queryForm"
|
|
:inline="queryOption.inline"
|
|
:label-width="queryOption.labelWidth ? queryOption.labelWidth : '100px'"
|
|
>
|
|
<el-form-item v-for="item in queryOption.queryChilds" :key="item.key" :label="item.label">
|
|
<el-input
|
|
v-if="!item.type || item.type === 'input'"
|
|
v-model="params[item.key]"
|
|
:placeholder="item.placeholder || ''"
|
|
:clearable="item.clearable"
|
|
:size="item.size || 'small'"
|
|
:style="item.style || ''"
|
|
@keyup.enter.native="handleQuery"
|
|
/>
|
|
|
|
<el-select
|
|
v-if="item.type === 'select'"
|
|
v-model="params[item.key]"
|
|
:clearable="item.clearable"
|
|
:placeholder="item.placeholder"
|
|
:size="item.size || 'small'"
|
|
:style="item.style || ''"
|
|
>
|
|
<el-option
|
|
v-for="items in item.options"
|
|
:key="items[item.optionKey.key]"
|
|
:label="items[item.optionKey.label]"
|
|
:value="items[item.optionKey.value]"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<el-form-item>
|
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
|
<!-- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> -->
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-col>
|
|
|
|
<el-table
|
|
ref="selectTabel"
|
|
v-loading="tableOption.loading"
|
|
:data="dataList"
|
|
class="select-table"
|
|
:height="tableOption.maxHeight"
|
|
:highlight-pageNum-row="true"
|
|
default-expand-all
|
|
highlight-current-row
|
|
:tree-props="tableOption.treeProps"
|
|
:row-key="tableOption.rowKey"
|
|
@row-click="row_clicks"
|
|
@row-dblclick="rowDblclick"
|
|
@selection-change="handleSelectionChange"
|
|
>
|
|
<el-table-column type="index" label="序号" align="center" :index="indexFormatter" width="80px"></el-table-column>
|
|
|
|
<el-table-column
|
|
v-if="tableOption.selection === true"
|
|
type="selection"
|
|
width="50"
|
|
align="center"
|
|
/>
|
|
|
|
<el-table-column
|
|
v-for="(item, index) in tableOption.childs"
|
|
:key="index"
|
|
:type="item.type"
|
|
:width="item.width"
|
|
:align="item.align"
|
|
:label="item.label"
|
|
:prop="item.prop"
|
|
>
|
|
<template slot-scope="scope" v-if="item.tempType !== '' ">
|
|
<el-switch
|
|
v-if="item.tempType === 'switch'"
|
|
v-model="scope.row[item.prop]"
|
|
:active-value="item.option['active-value']"
|
|
:inactive-value="item.option['inactive-value']"
|
|
:disable="item.option.disable"
|
|
></el-switch>
|
|
|
|
<span v-else-if="item.tempType === 'span'">{{scope.row[item.prop]}}</span>
|
|
|
|
<svg-icon v-else-if="item.tempType === 'icon'" :icon-class="scope.row[item.prop]" />
|
|
|
|
<span
|
|
v-else-if="item.tempType === 'time'"
|
|
>{{ parseTime(new Date(scope.row[item.prop])) }}</span>
|
|
|
|
<span
|
|
v-else-if="item.tempType === 'text1'"
|
|
v-html="scope.row[item.prop] === '0' ? '正常':'禁用'"
|
|
></span>
|
|
|
|
</template>
|
|
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<pagination
|
|
v-show="queryOption.page.total > 0"
|
|
:total="queryOption.page.total"
|
|
:page.sync="queryOption.page.pageNum"
|
|
:limit.sync="queryOption.page.pageSize"
|
|
@pagination="handleQuery2"
|
|
/>
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: "nl_select_table",
|
|
props: {
|
|
otherOption: {
|
|
type: Object,
|
|
default: {}
|
|
},
|
|
queryOption: {
|
|
type: Object,
|
|
default: () => {
|
|
return {
|
|
disable: false,
|
|
params: {},
|
|
page: {
|
|
pageSize: 10,
|
|
pageNum: 1,
|
|
total: 100
|
|
},
|
|
inline: true,
|
|
queryChilds: [
|
|
{
|
|
style: "",
|
|
placeholder: "请输入用户名称",
|
|
clearable: true,
|
|
label: "用户名称",
|
|
type: "input",
|
|
key: "userName",
|
|
size: "small",
|
|
value: ""
|
|
}
|
|
]
|
|
};
|
|
}
|
|
},
|
|
tableOption: {
|
|
type: Object,
|
|
default: () => {
|
|
return {
|
|
loading: false,
|
|
treeProps: "{ children: 'children', hasChildren: 'hasChildren'}",
|
|
rowKey: "deptId",
|
|
selection: true,
|
|
maxHeight: "45vh",
|
|
childs: [
|
|
{
|
|
style: "",
|
|
label: "",
|
|
type: "selection",
|
|
prop: "userName",
|
|
align: "center",
|
|
width: "50",
|
|
"show-overflow-tooltip": false,
|
|
tempType: ""
|
|
},
|
|
{
|
|
style: "",
|
|
label: "用户编号",
|
|
type: "",
|
|
prop: "userName",
|
|
align: "center",
|
|
width: "50",
|
|
"show-overflow-tooltip": true,
|
|
tempType: "",
|
|
option: {
|
|
"active-value": "0",
|
|
"inactive-value": "1",
|
|
disable: false
|
|
}
|
|
}
|
|
],
|
|
tableList: {
|
|
type: Array
|
|
}
|
|
};
|
|
}
|
|
},
|
|
tableList: {
|
|
type: Array
|
|
},
|
|
option: {
|
|
type: Object,
|
|
default: () => {
|
|
return {};
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
loading: false,
|
|
dataList: [],
|
|
single: "",
|
|
multiple: "",
|
|
params: {},
|
|
multipleSelection: [],
|
|
optionTrue: true
|
|
};
|
|
},
|
|
updated() {
|
|
if (this.optionTrue && this.tableList.length <= 0) {
|
|
this.handleQuery2();
|
|
this.optionTrue = false;
|
|
}
|
|
},
|
|
methods: {
|
|
indexFormatter(val) {
|
|
return val + 1 + ((this.queryOption.page.pageNum - 1) * this.queryOption.page.pageSize);
|
|
},
|
|
// 多选框选中数据
|
|
handleSelectionChange(selection) {
|
|
this.$emit("returnEvent", {
|
|
value: selection,
|
|
type: "select",
|
|
otherOption: this.otherOption
|
|
});
|
|
},
|
|
/** 搜索按钮操作 */
|
|
handleQuery() {
|
|
// debugger
|
|
// this.queryOption.page.pageNum = 1;
|
|
// this.queryOption.params = this.params
|
|
this.optionTrue = false
|
|
this.getList(this.queryOption.page, this.queryOption.params);
|
|
},
|
|
handleQuery2() {
|
|
this.getList(this.queryOption.page, this.queryOption.params);
|
|
},
|
|
/** 重置按钮操作 */
|
|
resetQuery() {
|
|
this.dataList = [];
|
|
this.resetForm("queryForm");
|
|
this.queryOption.page.pageNum = 1;
|
|
this.handleQuery();
|
|
},
|
|
getList(page, params) {
|
|
this.tableOption.loading = true;
|
|
this.$emit("parentGetList", {
|
|
page: page,
|
|
param: params,
|
|
otherOption: this.otherOption
|
|
});
|
|
},
|
|
rowDblclick(row) {
|
|
if (this.tableOption.selection) {
|
|
return
|
|
}
|
|
this.$emit("returnEvent", {
|
|
value: row,
|
|
type: "dblclick",
|
|
otherOption: this.otherOption
|
|
});
|
|
},
|
|
row_clicks(row) {
|
|
if (this.tableOption.selection) {
|
|
this.$refs.selectTabel.toggleRowSelection(row)
|
|
} else {
|
|
this.$emit("returnEvent", {
|
|
value: row,
|
|
type: "click",
|
|
otherOption: this.otherOption
|
|
});
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
this.params = this.queryOption.params;
|
|
this.handleQuery2();
|
|
},
|
|
watch: {
|
|
tableList(value) {
|
|
this.dataList = value;
|
|
this.tableOption.loading = false;
|
|
},
|
|
multipleSelection(val) {
|
|
console.log(val)
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss">
|
|
.select-table {
|
|
.el-table--striped .el-table__body tr.el-table__row--striped.current-row td,
|
|
.el-table__body tr.current-row > td {
|
|
background-color: #ffec8b;
|
|
}
|
|
}
|
|
</style>
|