From 99e37eb1e5ba8636b6a5994861dec31278d312c2 Mon Sep 17 00:00:00 2001
From: 石广澎 <shiguangpeng@163.com>
Date: 星期二, 21 十一月 2023 15:08:32 +0800
Subject: [PATCH] 列表搜索项支持级联
---
admin-web/README-注意事项.md | 32 ++++++++++
admin-web/src/components/mySearch/SearchItem.vue | 107 +++++++++++++++++++----------------
admin-web/src/components/mySearch/mySearch.vue | 23 +++++++
3 files changed, 113 insertions(+), 49 deletions(-)
diff --git "a/admin-web/README-\346\263\250\346\204\217\344\272\213\351\241\271.md" "b/admin-web/README-\346\263\250\346\204\217\344\272\213\351\241\271.md"
index 43d48df..3e067f3 100644
--- "a/admin-web/README-\346\263\250\346\204\217\344\272\213\351\241\271.md"
+++ "b/admin-web/README-\346\263\250\346\204\217\344\272\213\351\241\271.md"
@@ -79,4 +79,36 @@
return { value: DateFormatter.LongToDateTime(row.create_time) }
}
```
+7. 琛ㄥ崟鎼滅储椤圭骇鑱�
+```
+ {
+ type: 'select',
+ dataIndex: 'orgId',
+ label: '涓诲姙鍗曚綅',
+ placeholder: '璇烽�夋嫨',
+ defaultValue: '',
+ options: [],
+ cascader: [{key:'orgDeptId',queryKey: 'parentId'}],
+ optionsConfig: {
+ label: 'label',
+ value: 'id',
+ url: SettingIplatform.apiBaseURL + '/base/dept/select/treeDept'
+ }
+ },
+ {
+ type: 'select',
+ dataIndex: 'orgDeptId',
+ label: '涓诲姙閮ㄩ棬',
+ placeholder: '璇烽�夋嫨',
+ defaultValue: '',
+ // 閫夋嫨鍚庝細瑙﹀彂鍝簺椤圭殑鍔犺浇锛屾敮鎸佸涓紱 parentId
+ // 浼氳嚜鍔ㄥ湪鎸囧畾椤瑰姞涓妠[dataIndex]: value}鐨勭瓫閫夋潯浠�
+ options: [],
+ optionsConfig: {
+ label: 'deptName',
+ value: 'id',
+ url: SettingIplatform.apiBaseURL + '/base/dept/selectDeptByParentId'
+ }
+ },
+```
diff --git a/admin-web/src/components/mySearch/SearchItem.vue b/admin-web/src/components/mySearch/SearchItem.vue
index 4da675b..cefc365 100644
--- a/admin-web/src/components/mySearch/SearchItem.vue
+++ b/admin-web/src/components/mySearch/SearchItem.vue
@@ -132,54 +132,7 @@
item: Object,
},
created() {
- if (this.item.type === 'select' && this.item.optionsConfig) {
- if (this.$axios === undefined) {
- console.error('璇峰厛閰嶇疆this.$axios');
- return;
- }
- request({
- url: this.item.optionsConfig.url,
- method: 'get',
- }).then((res) => {
- const data = res || [];
- this.item.options = [];
- data.forEach((v) => {
- this.item.options.push({
- label: v[this.item.optionsConfig.label || 'label'],
- value: v[this.item.optionsConfig.value || 'value'],
- });
- });
- });
- }
- if (this.item.type === 'cascader' && this.item.optionsConfig) {
- if (this.$axios === undefined) {
- console.error('璇峰厛閰嶇疆this.$axios');
- return;
- }
- request({
- url: this.item.optionsConfig.url,
- method: 'get',
- }).then((res) => {
- const data = res || [];
- this.item.options = [];
- this.item.options = data;
- });
- }
- if (this.item.type === 'tree-select' && this.item.optionsConfig) {
- if (this.$axios === undefined) {
- console.error('璇峰厛閰嶇疆this.$axios');
- return;
- }
- if (this.item.asyncLoad) {
- this.asyncLoad({value: 0}).then((res) => {
- this.treeData = res;
- });
- } else {
- this.asyncLoad({}).then((res) => {
- this.treeData = res;
- });
- }
- }
+ this.initData({})
},
watch: {
value(v) {
@@ -230,6 +183,64 @@
};
},
methods: {
+ clearData() {
+ this.item.options = []
+ this.treeData = []
+ },
+ initData(params) {
+ this.val = this.item.defaultValue
+ if (this.item.type === 'select' && this.item.optionsConfig) {
+ if (this.$axios === undefined) {
+ console.error('璇峰厛閰嶇疆this.$axios');
+ return;
+ }
+ request({
+ url: this.item.optionsConfig.url,
+ method: 'get',
+ params
+ }).then((res) => {
+ const data = res || [];
+ this.item.options = [];
+ data.forEach((v) => {
+ this.item.options.push({
+ label: v[this.item.optionsConfig.label || 'label'],
+ value: v[this.item.optionsConfig.value || 'value'],
+ });
+ });
+ });
+ }
+ if (this.item.type === 'cascader' && this.item.optionsConfig) {
+ if (this.$axios === undefined) {
+ console.error('璇峰厛閰嶇疆this.$axios');
+ return;
+ }
+ request({
+ url: this.item.optionsConfig.url,
+ method: 'get',
+ params
+ }).then((res) => {
+ const data = res || [];
+ this.item.options = [];
+ this.item.options = data;
+ });
+ }
+ if (this.item.type === 'tree-select' && this.item.optionsConfig) {
+ if (this.$axios === undefined) {
+ console.error('璇峰厛閰嶇疆this.$axios');
+ return;
+ }
+ if (this.item.asyncLoad) {
+ params.value = 0
+ this.asyncLoad(params).then((res) => {
+ this.treeData = res;
+ });
+ } else {
+ this.asyncLoad(params).then((res) => {
+ this.treeData = res;
+ });
+ }
+ }
+ },
panelChange(v, type) {
var info = null
if (v && this.item.type !== 'date-time-picker') {
diff --git a/admin-web/src/components/mySearch/mySearch.vue b/admin-web/src/components/mySearch/mySearch.vue
index 8570825..92b5924 100644
--- a/admin-web/src/components/mySearch/mySearch.vue
+++ b/admin-web/src/components/mySearch/mySearch.vue
@@ -2,7 +2,7 @@
<div class="table-page-search-wrapper" style="padding: 0 10px 10px 10px">
<el-form :model="form" inline ref="formData" size="small">
<el-form-item :label="item.label" :prop="item.dataIndex" v-for="(item, i) in myItems1" :key="i">
- <search-item :item="item" @change="formChange($event, i)" :value="item.value" />
+ <search-item :ref="item.dataIndex" :item="item" @change="formChange($event, i)" :value="item.value" />
</el-form-item>
<el-form-item>
<div class="table-page-search-submitButtons">
@@ -82,6 +82,27 @@
});
},
formChange(e, i) {
+ const item = this.items[i]
+ if(item.cascader&&item.cascader.length>0){
+ item.cascader.map(obj=>{
+ const st = this.$refs[obj.key]
+ if(st&&st[0]){
+
+ if(!e){
+ st[0].clearData()
+ let cur = this.items.find(t=>t.dataIndex==obj.key)
+ cur.value = ''
+ this.form[cur.dataIndex] = '';
+ // this.$set
+ }else{
+ st[0].initData({
+ [obj.queryKey]: e
+ })
+ }
+
+ }
+ })
+ }
this.form[this.items[i].dataIndex] = e;
this.items[i].value = e;
this.$forceUpdate();
--
Gitblit v1.9.1