/** * @Description: 高级搜索 * @author wx * @date 2023/03/14 */ <template> <div ref="advanceSearch" class="advanceSearch-com"> <div v-for="(item, index) in viewSearchList[pageId]" :key="index" class="flex-s dee-row-item" :class="{'dee-active-row-background': curItemName(item.name)}" @click="clickItem(item)"> <span class="name">{{ item.name }}{{ item.isCommon ? "(公共)" : "" }}</span> <div v-if="!item.isCommon || (item.isCommon && item.creatorId+'' === curUserId)" class="oparation-btn"> <img src="/icons/edit-L.png" alt="重命名" @click.stop="edit(item)"> <img src="/icons/delete-L.png" alt="删除" @click.stop="remove(item)"> </div> </div> <dee-dialog :dialog-visible="dialogVisible" title="重命名" width="580px" @handleClose="handleClose" > <dee-as-com parent-show-mode="dialog" :lay-config="{ typeName: 'DxSearchTemplate', layKey: 'defaultEdit' }" :basic-data="editItem" @close="handleClose" @on-cancel="handleClose" @completeEven="completeEven" /> </dee-dialog> </div> </template> <script> import { mapGetters } from 'vuex' export default { name: 'AdvanceSearch', componentName: '高级搜索', components: {}, props: { viewKey: { type: String, default: '' }, modelName: { type: String, default: '' } }, data() { return { dialogVisible: false, editItem: null } }, computed: { ...mapGetters([ 'viewSearchList' ]), pageId() { return this.modelName && this.viewKey ? `${this.modelName}-${this.viewKey}` : '' }, curUserId() { return localStorage.getItem('userId') } }, watch: { }, created() { this.$bus.$on('refreshSearchList', (data) => { this.getSearchList(data.pageId) }) }, mounted() { this.getSearchList() }, methods: { handleClose() { this.dialogVisible = false }, completeEven() { this.handleClose() this.getSearchList() }, getSearchList(pageId) { const params = { 'pageFrom': 1, 'pageSize': 100, 'sortItem': [{ fieldName: 'isCommon', sortOrder: 'desc' }, { fieldName: 'createTime', sortOrder: 'desc' }], 'searchItems': { 'operator': 'OR', 'items': [], 'children': [ { 'operator': 'AND', 'items': [ { 'fieldName': 'isCommon', 'operator': 'EQ', 'value': false }, { 'fieldName': 'pageId', 'operator': 'EQ', 'value': pageId || this.pageId }, { 'fieldName': 'creatorId', 'operator': 'EQ', 'value': localStorage.getItem('userId') } ] }, { 'operator': 'AND', 'items': [ { 'fieldName': 'isCommon', 'operator': 'EQ', 'value': true }, { 'fieldName': 'pageId', 'operator': 'EQ', 'value': pageId || this.pageId } ] } ] }, 'toValidateKeys': '' } this.$api.searchApi('DxSearchTemplate', params).then(res => { this.updateList(res.items.content || []) }) }, updateList(arr = []) { const list = this.viewSearchList this.$set(list, this.pageId, arr) this.$store.dispatch('viewSearchList/updateList', list) }, edit(item) { this.editItem = item this.dialogVisible = true }, remove(item) { this.$api.remove('DxSearchTemplate', item.id).then(res => { this.$utils.showMessageSuccess('删除成功') this.getSearchList() }) }, clickItem(item) { this.$emit('typeSearch', 'conditionSearch', item || { queryCondition: '{}', isAdvancedSearch: false }, '我的搜索') }, curItemName(name) { const visitePath = this.$store.state.breadcrumb.visitePath[this.pageId] || [] return !!(visitePath.length >= 2 && name === visitePath[1]) } } } </script> <style lang='scss'> .advanceSearch-com{ .flex-s{ display: flex; justify-content: space-between; } .dee-row-item{ font-size: 13px; // color: #232323; color:#686868; line-height: 34px; padding: 0 14px 0 24px; cursor: pointer; } .oparation-btn{ display: none; img { display: block; width: 14px; height: 14px; margin: auto 0; &:nth-child(1){ margin-right: 10px; } } } .dee-row-item:hover{ .oparation-btn { display: flex; } } } </style>