DataTemplateDialog.vue
3.15 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<template>
<el-dialog
title="选择表单列表"
:append-to-body="true"
:visible.sync="dialogVisible"
:before-close="()=>dialogVisible=false"
:close-on-click-modal="false"
width="50%"
>
<el-container>
<el-main>
<ht-table
@load="loadData"
:data="data"
:pageResult="pageResult"
:selection="false"
:selectable="false"
quick-search-props="name,alias"
:show-export="false"
:showCustomColumn="false"
:default-sorter="[{ direction: 'DESC', property: 'create_time_' }]"
ref="htTable"
@row-click="rowClick"
>
<template>
<ht-table-column type="index" width="50" align="center" label="序号" />
<ht-table-column prop="name" label="名称" :sortable="true" :show-overflow-tooltip="true">
<template slot-scope="scope">
<el-link
type="primary"
@click="onConfirm(scope.row)"
title="选择"
>{{ scope.row.name }}</el-link>
</template>
</ht-table-column>
<ht-table-column prop="alias" label="别名" :sortable="true" />
<ht-table-column prop="boDefAlias" label="业务对象别名" :sortable="true" />
<ht-table-column prop="typeName" label="分类" />
<ht-table-column prop="subject" label="绑定流程名称" />
</template>
</ht-table>
</el-main>
</el-container>
</el-dialog>
</template>
<script>
import form from "@/api/form.js";
export default {
name: "data-template-dialog",
data() {
return {
pageResult: {
page: 1,
pageSize: 20,
total: 0
},
data: [],
dialogVisible: false
};
},
methods: {
showDialog() {
this.dialogVisible = true;
},
//鼠标选中行改变复选框
rowClick(row, column, event){
this.$refs.htTable.$refs.htTable.toggleRowSelection(row);
},
loadData(param, cb) {
param.querys || (param.querys = []);
param.querys.push({
group: "main",
property: "mobileFormAlias",
operation: "NOTNULL",
relation: "AND"
});
if (!param.sorter) {
param.sorter = [
{
direction: "DESC",
property: "UPDATE_TIME_"
}
];
} else {
param.sorter.push({
direction: "DESC",
property: "UPDATE_TIME_"
});
}
form
.getDataTemplateData(param)
.then(response => {
this.data = response.rows;
this.pageResult = {
page: response.page,
pageSize: response.pageSize,
total: response.total
};
})
.finally(() => cb());
},
onConfirm(selectedNode) {
this.$emit("onConfirm", {
alias: selectedNode.alias,
name: selectedNode.name
});
this.dialogVisible = false;
}
}
};
</script>
<style lang="scss" scoped>
div[aria-invalid="true"] >>> .el-input__inner,
div[aria-invalid="true"] >>> .el-input__inner:focus {
border-color: #f56c6c;
}
</style>