Authored by xwx

aj配置功能添加搜索功能

1 <div class="container" :style="{'height':height+'px','max-height':height+'px'}"> 1 <div class="container" :style="{'height':height+'px','max-height':height+'px'}">
2 <div class="cm-card" :style="{'min-height':height+'px','max-height':height+'px','height':'100%'}"> 2 <div class="cm-card" :style="{'min-height':height+'px','max-height':height+'px','height':'100%'}">
3 <div class="search"> 3 <div class="search">
4 - <div class="btns" style="justify-content: left;padding-left: 0px"> 4 + <div class="keyword" style="padding-left: 10px">
  5 + <el-form-item >
  6 + <el-input v-model="search.keyword" placeholder="请输入关键字,回车搜索" @keydown.enter.native="getDataList"></el-input>
  7 + </el-form-item>
  8 + </div>
  9 + <div class="selectType" style="padding-left: 10px;width: 120px;">
  10 + <el-select v-model="couponSelected" class="m-2" placeholder="请选择" size="large" @change="onChangeStripe">
  11 + <el-option
  12 + v-for="item in typeOptions"
  13 + :key="item.value"
  14 + :label="item.label"
  15 + :value="item.value"
  16 + />
  17 + </el-select>
  18 + </div>
  19 + <div class="adds" style="">
5 <el-form-item> 20 <el-form-item>
6 - <el-button type="primary" @click="addAj()" style="margin-left: 10px">新增</el-button> 21 + <el-button @click="addAj()" style="margin-left: 10px">新增</el-button>
7 </el-form-item> 22 </el-form-item>
8 </div> 23 </div>
9 - <div class="design" style="float:right;padding-left: 1410px"> 24 + <div class="design" style="float:right;padding-left: 1200px">
10 <el-form-item> 25 <el-form-item>
11 <el-button type="primary" @click="handleView()" style="margin-left: 10px">设计</el-button> 26 <el-button type="primary" @click="handleView()" style="margin-left: 10px">设计</el-button>
12 </el-form-item> 27 </el-form-item>
@@ -68,9 +83,11 @@ @@ -68,9 +83,11 @@
68 83
69 84
70 <el-form-item label="类型" prop="type"> 85 <el-form-item label="类型" prop="type">
  86 + <div style="width: 240px">
71 <el-radio v-model="ajConfigFrom.type" label="0" size="large">菜单</el-radio> 87 <el-radio v-model="ajConfigFrom.type" label="0" size="large">菜单</el-radio>
72 <el-radio v-model="ajConfigFrom.type" label="1" size="large">按钮</el-radio> 88 <el-radio v-model="ajConfigFrom.type" label="1" size="large">按钮</el-radio>
73 <el-radio v-model="ajConfigFrom.type" label="2" size="large">详情页</el-radio> 89 <el-radio v-model="ajConfigFrom.type" label="2" size="large">详情页</el-radio>
  90 + </div>
74 <!-- <div style="height: 15px; color: darkgrey">说明:参数中间用'&'拼接</div>--> 91 <!-- <div style="height: 15px; color: darkgrey">说明:参数中间用'&'拼接</div>-->
75 </el-form-item> 92 </el-form-item>
76 93
@@ -96,7 +113,7 @@ @@ -96,7 +113,7 @@
96 <el-input :size="$global.elementSize" v-model="ajConfigFrom.menuName" clearable></el-input> 113 <el-input :size="$global.elementSize" v-model="ajConfigFrom.menuName" clearable></el-input>
97 </el-form-item> 114 </el-form-item>
98 115
99 - <el-form-item label="菜单标题" prop="title" v-if="ajConfigFrom.type==1"> 116 + <el-form-item label="弹框标题" prop="title" v-if="ajConfigFrom.type==1">
100 <el-input :size="$global.title" v-model="ajConfigFrom.title" clearable></el-input> 117 <el-input :size="$global.title" v-model="ajConfigFrom.title" clearable></el-input>
101 </el-form-item> 118 </el-form-item>
102 119
@@ -19,11 +19,31 @@ export default { @@ -19,11 +19,31 @@ export default {
19 message: '请选择类型!', 19 message: '请选择类型!',
20 trigger: 'blur', 20 trigger: 'blur',
21 }], 21 }],
  22 + menuPid:[{
  23 + required: true,
  24 + message: '请选择父菜单!',
  25 + trigger: 'blur',
  26 + }],
  27 + menuName:[{
  28 + required: true,
  29 + message: '请填写菜单名称!',
  30 + trigger: 'blur',
  31 + }],
  32 + title:[{
  33 + required: true,
  34 + message: '请填写弹框标题!',
  35 + trigger: 'blur',
  36 + }],
22 designPage:[{ 37 designPage:[{
23 required: true, 38 required: true,
24 message: '请选择设计页面!', 39 message: '请选择设计页面!',
25 trigger: 'blur', 40 trigger: 'blur',
26 }], 41 }],
  42 + resType:[{
  43 + required: true,
  44 + message: '请选择资源类型!',
  45 + trigger: 'blur',
  46 + }],
27 /*resource:[{ 47 /*resource:[{
28 required: true, 48 required: true,
29 message: '请填写绑定资源!', 49 message: '请填写绑定资源!',
@@ -50,7 +70,8 @@ export default { @@ -50,7 +70,8 @@ export default {
50 desc:'用户id' 70 desc:'用户id'
51 }]); 71 }]);
52 //表格字段 72 //表格字段
53 - let columns=Vue.ref([ 73 + let columns=Vue.ref([]);
  74 + let detailColumns=Vue.ref([
54 { 75 {
55 prop: 'id', 76 prop: 'id',
56 label: '编号', 77 label: '编号',
@@ -90,6 +111,88 @@ export default { @@ -90,6 +111,88 @@ export default {
90 align: 'left' 111 align: 'left'
91 } 112 }
92 ]) 113 ])
  114 + let menuColumns=Vue.ref([
  115 + {
  116 + prop: 'id',
  117 + label: '编号',
  118 + sortable: true,
  119 + align: 'center',
  120 + width:'250'
  121 + },
  122 + {
  123 + prop: 'type',
  124 + label: '类型',
  125 + sortable: true,
  126 + align: 'center',
  127 + width:'250',
  128 + },
  129 + {
  130 + prop: 'menuName',
  131 + label: '菜单名称',
  132 + sortable: true,
  133 + align: 'center',
  134 + width:'250'
  135 + },
  136 + {
  137 + prop: 'designPage',
  138 + label: '设计器编码',
  139 + sortable: true,
  140 + align: 'center',
  141 + width:'250'
  142 + },{
  143 + prop: 'param',
  144 + label: '参数',
  145 + sortable: true,
  146 + align: 'center',
  147 + width:'300'
  148 + },{
  149 + prop: 'creatTime',
  150 + label: '创建时间',
  151 + sortable: true,
  152 + align: 'left'
  153 + }
  154 + ])
  155 + let butColumns=Vue.ref([
  156 + {
  157 + prop: 'id',
  158 + label: '编号',
  159 + sortable: true,
  160 + align: 'center',
  161 + width:'250'
  162 + },
  163 + {
  164 + prop: 'type',
  165 + label: '类型',
  166 + sortable: true,
  167 + align: 'center',
  168 + width:'250',
  169 + },
  170 + {
  171 + prop: 'title',
  172 + label: '弹框标题',
  173 + sortable: true,
  174 + align: 'center',
  175 + width:'250'
  176 + },
  177 + {
  178 + prop: 'designPage',
  179 + label: '设计器编码',
  180 + sortable: true,
  181 + align: 'center',
  182 + width:'250'
  183 + },{
  184 + prop: 'param',
  185 + label: '参数',
  186 + sortable: true,
  187 + align: 'center',
  188 + width:'300'
  189 + },{
  190 + prop: 'creatTime',
  191 + label: '创建时间',
  192 + sortable: true,
  193 + align: 'left'
  194 + }
  195 + ])
93 let currentPage=Vue.ref(1); 196 let currentPage=Vue.ref(1);
94 let pageSize=Vue.ref(10); 197 let pageSize=Vue.ref(10);
95 let keyword=Vue.ref(); 198 let keyword=Vue.ref();
@@ -105,6 +208,27 @@ export default { @@ -105,6 +208,27 @@ export default {
105 let options=Vue.ref([]); 208 let options=Vue.ref([]);
106 //菜单下拉框 209 //菜单下拉框
107 let menuOptions=Vue.ref([]); 210 let menuOptions=Vue.ref([]);
  211 + let search = Vue.ref({
  212 + keyword:'',
  213 + type:'',
  214 + page:1,
  215 + limit:10,
  216 + });
  217 + //按钮下拉框
  218 + let typeOptions=Vue.ref([
  219 + {
  220 + value: '0',
  221 + label: '菜单',
  222 + },
  223 + {
  224 + value: '1',
  225 + label: '按钮',
  226 + },
  227 + {
  228 + value: '2',
  229 + label: '详情页',
  230 + }]);
  231 + let couponSelected = Vue.ref();
108 let ajConfigFrom = Vue.ref({ 232 let ajConfigFrom = Vue.ref({
109 id:'', 233 id:'',
110 type: 0, 234 type: 0,
@@ -253,18 +377,39 @@ export default { @@ -253,18 +377,39 @@ export default {
253 377
254 //重新加载表格数据 378 //重新加载表格数据
255 let loadTableDataList = ({page, limit}) => { 379 let loadTableDataList = ({page, limit}) => {
256 - currentPage.value=page;  
257 - pageSize.value=limit; 380 + search.value.page = page;
  381 + search.value.limit = limit;
  382 + getDataList()
  383 + }
  384 +
  385 + let onChangeStripe = (e)=>{
  386 + if(e =='0'){
  387 + columns.value=menuColumns.value;
  388 + }
  389 + if (e =='1'){
  390 + columns.value=butColumns.value;
  391 + }
  392 + if (e =='2'){
  393 + columns.value=detailColumns.value;
  394 + }
  395 + search.value.type=e;
258 getDataList() 396 getDataList()
259 } 397 }
260 398
261 //获取aj配置信息 399 //获取aj配置信息
262 let getDataList=()=>{ 400 let getDataList=()=>{
263 - proxy.$http.get(`/api-web/ajConfig/ajConfigList`,null, function (res) { 401 + let params={
  402 + page:search.value.page,
  403 + limit:search.value.limit,
  404 + type:search.value.type,
  405 + keyword:search.value.keyword
  406 + }
  407 + proxy.$http.get(`/api-web/ajConfig/ajConfigList`,params, function (res) {
264 if (res && res.data) { 408 if (res && res.data) {
265 - count.value = res.data.length; 409 + count.value = res.count;
266 tableDataList.value = res.data; 410 tableDataList.value = res.data;
267 }else{ 411 }else{
  412 + count.value = 0;
268 tableDataList.value='暂无数据'; 413 tableDataList.value='暂无数据';
269 } 414 }
270 }); 415 });
@@ -277,8 +422,10 @@ export default { @@ -277,8 +422,10 @@ export default {
277 } 422 }
278 // 挂载完 423 // 挂载完
279 Vue.onMounted(() => { 424 Vue.onMounted(() => {
  425 + couponSelected.value = typeOptions.value[0].label;
  426 + columns.value=menuColumns.value;
  427 + search.value.type=typeOptions.value[0].value;
280 getDataList(); 428 getDataList();
281 -  
282 }) 429 })
283 430
284 431
@@ -337,7 +484,13 @@ export default { @@ -337,7 +484,13 @@ export default {
337 menuList, 484 menuList,
338 menuOptions, 485 menuOptions,
339 getResType, 486 getResType,
340 - configs 487 + configs,
  488 + typeOptions,
  489 + onChangeStripe,
  490 + search,
  491 + butColumns,
  492 + detailColumns,
  493 + couponSelected
341 } 494 }
342 } 495 }
343 496