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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
| <template>
| <el-dialog
| :title="options.title"
| append-to-body
| :visible.sync="crudParams.isShowDialog"
| width="65%"
| destroy-on-close
| @close="clearTableRowSelection"
| style="height: 110vh; margin-top: -12vh; overflow-y: hidden">
| <avue-crud :option="crudParams.crudOption"
| :table-loading="crudParams.crudLoading"
| :data="crudParams.crudData"
| :ref="crudParams.ref"
| @row-click="selectedBtmTypeAttrRowClick"
| @selection-change="selectionBtmTypeAttrChange"
| @search-change="selectedBtmTypeAttrSrchChange"
| @search-reset="selectedBtmTypeAttrSrchReset">
| </avue-crud>
| <div slot="footer" class="dialog-footer">
| <el-button type="primary" @click="selectedBtmTypeAttr">确 定</el-button>
| <el-button @click="crudParams.isShowDialog = false">取 消</el-button>
| </div>
| </el-dialog>
| </template>
|
| <script>
| import { gridAttributesByBtmId } from "@/api/code/referBtmType";
| export default {
| name: "referSelectBtmAttrDialog",
| props: {
| // 对话框显示隐藏控制
| visible: {
| type: "Boolean",
| default: false,
| },
|
|
| },
| watch: {
| // 监听父组件传的窗口显示隐藏的值
| visible (){
| this.crudParams.isShowDialog = this.visible;
| }
| },
| data() {
| return {
|
| // 表格相关参数
| crudParams: {
| ref: "selectedAttrCrud",
| isShowDialog: this.visible, //对话框显示控制
| crudLoading: false,
| crudOption: {
| border: true,
| height: '250px',
| tip: false,
| //searchShow: false,
| index: true,
| selection: true,
| addBtn: false,
| menu: false,
| // refreshBtn: false,
| searchShowBtn: false,
| columnBtn: false,
| dialogClickModal: false,
| highlightCurrentRow: true,
| searchMenuSpan: 5,
| align: 'center',
| menuAlign: 'center',
| border: true,
| column: [{
| label: '属性英文编号',
| width: 120,
| search: true,
| searchSpan: 8,
| searchLabelWidth: 100,
| prop: 'id'
| },{
| label: '属性中文名称',
| search: true,
| searchSpan: 8,
| searchLabelWidth: 100,
| prop: 'name'
| },{
| label: '属性长度',
| search: false,
| prop: 'attrLength'
| },{
| label: '属性类型',
| search: false,
| prop: 'attrType'
| }],
| },
| crudData: [],
| crudQuery: {},
| crudSelectedRowData: [],
| },
| // 调用方传过来的相关参数
| options: {},
|
| }
| },
| methods: {
|
| // 清空选中
| clearTableRowSelection(){
| this.crudParams.crudSelectedRow='';
| this.crudParams.crudSelectedRowData = '';
| this.$emit('update:visible', false);
| },
|
| // crud相关方法
| selectedBtmTypeAttrOnLoad(params){
| this.options = params;
| this.crudParams.crudLoading = true;
| // 调用api请求
| const data = {
| total: 2,
| data: [{
| id: 'test',
| name: '测试',
| attrLength: 11,
| attrType: '字符串'
| }, {
| id: 'test1',
| name: '测试1',
| attrLength: 12,
| attrType: '数字'
| }]
| }
| let param = {};
| // 多个conditionMap这样传参
| if(this.crudParams.crudQuery){
| Object.keys(crudParams.crudQuery).forEach(key=>{
| param['conditionMap['+key+']'] = crudParams.crudQuery[key];
| });
| }
| gridAttributesByBtmId(1,-1,param).then(res=>{
| console.log(res);
| })
| this.crudParams.crudData = data.data;
| this.crudParams.crudLoading = false;
| },
| selectedBtmTypeAttrSrchChange(params, done){
| this.crudParams.crudQuery = params;
| this.selectedBtmTypeAttrOnLoad(this.options);
| done();
| },
| selectedBtmTypeAttrSrchReset(){
| this.crudParams.crudQuery = {};
| this.selectedBtmTypeAttrOnLoad(this.options);
| },
| selectedBtmTypeAttrRowClick(row){
| this.crudParams.crudSelectedRowData = row;
| this.$refs[this.crudParams.ref].toggleSelection();
| this.$refs[this.crudParams.ref].setCurrentRow(row);
| this.$refs[this.crudParams.ref].toggleRowSelection(row); //选中当前行
| },
| selectionBtmTypeAttrChange(list){
| this.crudParams.crudSelectedRowData = list;
| this.$refs[this.crudParams.ref].setCurrentRow(this.crudParams.crudSelectedRowData[list.length-1]);
| //当前选中行为空的时候就将码段管理表格数据置空
| },
| // 选中属性之后
| selectedBtmTypeAttr(){
| if(this.crudParams.crudSelectedRowData.length<=0 || (this.options.condition == 'sortField' && this.crudParams.crudSelectedRowData.length!=1)) {
| this.$message.warning("请选择一条数据");
| return;
| }
| // 构造回显父组件需要传递的相关参数
| let data = {
| selectedArrary: this.crudParams.crudSelectedRowData,
| condition: this.options.condition
| };
| this.$emit('echoSelectedAttr',data);
| this.crudParams.isShowDialog = false;
| },
|
| },
|
| }
| </script>
|
| <style>
|
| </style>
|
|
