JSuperQuery.vue 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640
  1. <template>
  2. <div class="j-super-query-box">
  3. <slot name="button" :isActive="superQueryFlag" :isMobile="izMobile" :open="handleOpen" :reset="handleReset">
  4. <a-tooltip v-if="superQueryFlag" v-bind="tooltipProps" :mouseLeaveDelay="0.2">
  5. <!-- begin 不知道为什么不加上这段代码就无法生效 -->
  6. <span v-show="false">{{tooltipProps}}</span>
  7. <!-- end 不知道为什么不加上这段代码就无法生效 -->
  8. <template slot="title">
  9. <span>已有高级查询条件生效</span>
  10. <a-divider type="vertical"/>
  11. <a @click="handleReset">清空</a>
  12. </template>
  13. <a-button-group>
  14. <a-button type="primary" @click="handleOpen">
  15. <a-icon type="appstore" theme="twoTone" spin/>
  16. <span>高级查询</span>
  17. </a-button>
  18. <a-button v-if="izMobile" type="primary" icon="delete" @click="handleReset"/>
  19. </a-button-group>
  20. </a-tooltip>
  21. <a-button v-else type="primary" icon="filter" @click="handleOpen">高级查询</a-button>
  22. </slot>
  23. <j-modal
  24. title="高级查询构造器"
  25. :width="1000"
  26. :visible="visible"
  27. @cancel="handleCancel"
  28. :mask="false"
  29. :fullscreen="izMobile"
  30. class="j-super-query-modal"
  31. style="top:5%;max-height: 95%;"
  32. >
  33. <template slot="footer">
  34. <div style="float: left">
  35. <a-button :loading="loading" @click="handleReset">重置</a-button>
  36. <a-button :loading="loading" @click="handleSave">保存查询条件</a-button>
  37. </div>
  38. <a-button :loading="loading" @click="handleCancel">关闭</a-button>
  39. <a-button :loading="loading" type="primary" @click="handleOk">查询</a-button>
  40. </template>
  41. <a-spin :spinning="loading">
  42. <a-row>
  43. <a-col :sm="24" :md="24-5">
  44. <a-empty v-if="queryParamsModel.length === 0" style="margin-bottom: 12px;">
  45. <div slot="description">
  46. <span>没有任何查询条件</span>
  47. <a-divider type="vertical"/>
  48. <a @click="handleAdd">点击新增</a>
  49. </div>
  50. </a-empty>
  51. <a-form v-else layout="inline">
  52. <a-row style="margin-bottom: 12px;">
  53. <a-col :md="12" :xs="24">
  54. <a-form-item label="过滤条件匹配" :labelCol="{md: 6,xs:24}" :wrapperCol="{md: 18,xs:24}" style="width: 100%;">
  55. <a-select v-model="matchType" :getPopupContainer="node=>node.parentNode" style="width: 100%;">
  56. <a-select-option value="and">AND(所有条件都要求匹配)</a-select-option>
  57. <a-select-option value="or">OR(条件中的任意一个匹配)</a-select-option>
  58. </a-select>
  59. </a-form-item>
  60. </a-col>
  61. </a-row>
  62. <a-row type="flex" style="margin-bottom:10px" :gutter="16" v-for="(item, index) in queryParamsModel" :key="index">
  63. <a-col :md="8" :xs="24" style="margin-bottom: 12px;">
  64. <a-tree-select
  65. showSearch
  66. v-model="item.field"
  67. :treeData="fieldTreeData"
  68. :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
  69. placeholder="选择查询字段"
  70. allowClear
  71. treeDefaultExpandAll
  72. :getPopupContainer="node=>node.parentNode"
  73. style="width: 100%"
  74. @select="(val,option)=>handleSelected(option,item)"
  75. >
  76. </a-tree-select>
  77. </a-col>
  78. <a-col :md="4" :xs="24" style="margin-bottom: 12px;">
  79. <a-select placeholder="匹配规则" :value="item.rule" :getPopupContainer="node=>node.parentNode" @change="handleRuleChange(item,$event)">
  80. <a-select-option value="eq">等于</a-select-option>
  81. <a-select-option value="like">包含</a-select-option>
  82. <a-select-option value="right_like">以..开始</a-select-option>
  83. <a-select-option value="left_like">以..结尾</a-select-option>
  84. <a-select-option value="in">在...中</a-select-option>
  85. <a-select-option value="ne">不等于</a-select-option>
  86. <a-select-option value="gt">大于</a-select-option>
  87. <a-select-option value="ge">大于等于</a-select-option>
  88. <a-select-option value="lt">小于</a-select-option>
  89. <a-select-option value="le">小于等于</a-select-option>
  90. </a-select>
  91. </a-col>
  92. <a-col :md="8" :xs="24" style="margin-bottom: 12px;">
  93. <template v-if="item.dictCode">
  94. <template v-if="item.type === 'table-dict'">
  95. <j-popup
  96. v-model="item.val"
  97. :code="item.dictTable"
  98. :field="item.dictCode"
  99. :orgFields="item.dictCode"
  100. :destFields="item.dictCode"
  101. ></j-popup>
  102. </template>
  103. <template v-else>
  104. <j-multi-select-tag v-show="allowMultiple(item)" v-model="item.val" :dictCode="item.dictCode" placeholder="请选择"/>
  105. <j-dict-select-tag v-show="!allowMultiple(item)" v-model="item.val" :dictCode="item.dictCode" placeholder="请选择"/>
  106. </template>
  107. </template>
  108. <j-popup v-else-if="item.type === 'popup'" :value="item.val" v-bind="item.popup" group-id="superQuery" @input="(e,v)=>handleChangeJPopup(item,e,v)"/>
  109. <j-select-multi-user
  110. v-else-if="item.type === 'select-user' || item.type === 'sel_user'"
  111. v-model="item.val"
  112. :buttons="false"
  113. :multiple="false"
  114. placeholder="请选择用户"
  115. :returnKeys="['id', item.customReturnField || 'username']"
  116. />
  117. <j-select-depart
  118. v-else-if="item.type === 'select-depart' || item.type === 'sel_depart'"
  119. v-model="item.val"
  120. :multi="false"
  121. placeholder="请选择部门"
  122. :customReturnField="item.customReturnField || 'id'"
  123. />
  124. <a-select
  125. v-else-if="item.options instanceof Array"
  126. v-model="item.val"
  127. :options="item.options"
  128. allowClear
  129. placeholder="请选择"
  130. :mode="allowMultiple(item)?'multiple':''"
  131. />
  132. <j-area-linkage v-model="item.val" v-else-if="item.type==='area-linkage' || item.type==='pca'" style="width: 100%"/>
  133. <j-date v-else-if=" item.type=='date' " v-model="item.val" placeholder="请选择日期" style="width: 100%"></j-date>
  134. <j-date v-else-if=" item.type=='datetime' " v-model="item.val" placeholder="请选择时间" :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" style="width: 100%"></j-date>
  135. <a-time-picker v-else-if="item.type==='time'" :value="item.val ? moment(item.val,'HH:mm:ss') : null" format="HH:mm:ss" style="width: 100%" @change="(time,value)=>item.val=value"/>
  136. <a-input-number v-else-if=" item.type=='int'||item.type=='number' " style="width: 100%" placeholder="请输入数值" v-model="item.val"/>
  137. <a-input v-else v-model="item.val" placeholder="请输入值"/>
  138. </a-col>
  139. <a-col :md="4" :xs="0" style="margin-bottom: 12px;">
  140. <a-button @click="handleAdd" icon="plus"></a-button>&nbsp;
  141. <a-button @click="handleDel( index )" icon="minus"></a-button>
  142. </a-col>
  143. <a-col :md="0" :xs="24" style="margin-bottom: 12px;text-align: right;">
  144. <a-button @click="handleAdd" icon="plus"></a-button>&nbsp;
  145. <a-button @click="handleDel( index )" icon="minus"></a-button>
  146. </a-col>
  147. </a-row>
  148. </a-form>
  149. </a-col>
  150. <a-col :sm="24" :md="5">
  151. <!-- 查询记录 -->
  152. <a-card class="j-super-query-history-card" :bordered="true">
  153. <div slot="title">
  154. 保存的查询
  155. </div>
  156. <a-empty v-if="saveTreeData.length === 0" class="j-super-query-history-empty" description="没有保存任何查询"/>
  157. <a-tree
  158. v-else
  159. class="j-super-query-history-tree"
  160. showIcon
  161. :treeData="saveTreeData"
  162. :selectedKeys="[]"
  163. @select="handleTreeSelect"
  164. >
  165. </a-tree>
  166. </a-card>
  167. </a-col>
  168. </a-row>
  169. </a-spin>
  170. <a-modal title="请输入保存的名称" :visible="prompt.visible" @cancel="prompt.visible=false" @ok="handlePromptOk">
  171. <a-input v-model="prompt.value"></a-input>
  172. </a-modal>
  173. </j-modal>
  174. </div>
  175. </template>
  176. <script>
  177. import moment from 'moment'
  178. import * as utils from '@/utils/util'
  179. import { mixinDevice } from '@/utils/mixin'
  180. import JDate from '@/components/jeecg/JDate.vue'
  181. import JSelectDepart from '@/components/jeecgbiz/JSelectDepart'
  182. import JSelectMultiUser from '@/components/jeecgbiz/JSelectMultiUser'
  183. import JMultiSelectTag from '@/components/dict/JMultiSelectTag'
  184. import JAreaLinkage from '@comp/jeecg/JAreaLinkage'
  185. export default {
  186. name: 'JSuperQuery',
  187. mixins: [mixinDevice],
  188. components: { JAreaLinkage, JMultiSelectTag, JDate, JSelectDepart, JSelectMultiUser },
  189. props: {
  190. /*
  191. fieldList: [{
  192. value:'',
  193. text:'',
  194. type:'',
  195. dictCode:'' // 只要 dictCode 有值,无论 type 是什么,都显示为字典下拉框
  196. }]
  197. type:date datetime int number string
  198. * */
  199. fieldList: {
  200. type: Array,
  201. required: true
  202. },
  203. /*
  204. * 这个回调函数接收一个数组参数 即查询条件
  205. * */
  206. callback: {
  207. type: String,
  208. required: false,
  209. default: 'handleSuperQuery'
  210. },
  211. // 当前是否在加载中
  212. loading: {
  213. type: Boolean,
  214. default: false
  215. },
  216. // 保存查询条件的唯一 code,通过该 code 区分
  217. // 默认为 null,代表以当前路由全路径为区分Code
  218. saveCode: {
  219. type: String,
  220. default: null
  221. }
  222. },
  223. data() {
  224. return {
  225. moment,
  226. fieldTreeData: [],
  227. prompt: {
  228. visible: false,
  229. value: ''
  230. },
  231. visible: false,
  232. queryParamsModel: [],
  233. treeIcon: <a-icon type="file-text"/>,
  234. // 保存查询条件的treeData
  235. saveTreeData: [],
  236. // 保存查询条件的前缀名
  237. saveCodeBefore: 'JSuperQuerySaved_',
  238. // 查询类型,过滤条件匹配(and、or)
  239. matchType: 'and',
  240. superQueryFlag: false,
  241. }
  242. },
  243. computed: {
  244. izMobile() {
  245. return this.device === 'mobile'
  246. },
  247. tooltipProps() {
  248. return this.izMobile ? { visible: false } : {}
  249. },
  250. fullSaveCode() {
  251. let saveCode = this.saveCode
  252. if (saveCode == null || saveCode === '') {
  253. saveCode = this.$route.fullPath
  254. }
  255. return this.saveCodeBefore + saveCode
  256. },
  257. },
  258. watch: {
  259. // 当 saveCode 变化时,重新查询已保存的条件
  260. fullSaveCode: {
  261. immediate: true,
  262. handler() {
  263. let list = this.$ls.get(this.fullSaveCode)
  264. if (list instanceof Array) {
  265. this.saveTreeData = list.map(i => this.renderSaveTreeData(i))
  266. }
  267. }
  268. },
  269. fieldList: {
  270. deep: true,
  271. immediate: true,
  272. handler(val) {
  273. let mainData = [], subData = []
  274. val.forEach(item => {
  275. let data = { ...item }
  276. data.label = data.label || data.text
  277. let hasChildren = (data.children instanceof Array)
  278. data.disabled = hasChildren
  279. data.selectable = !hasChildren
  280. if (hasChildren) {
  281. data.children = data.children.map(item2 => {
  282. let child = { ...item2 }
  283. child.label = child.label || child.text
  284. child.label = data.label + '-' + child.label
  285. child.value = data.value + ',' + child.value
  286. child.val = ''
  287. return child
  288. })
  289. data.val = ''
  290. subData.push(data)
  291. } else {
  292. mainData.push(data)
  293. }
  294. })
  295. this.fieldTreeData = mainData.concat(subData)
  296. }
  297. }
  298. },
  299. methods: {
  300. show() {
  301. if (!this.queryParamsModel || this.queryParamsModel.length === 0) {
  302. this.resetLine()
  303. }
  304. this.visible = true
  305. },
  306. handleOk() {
  307. if (!this.isNullArray(this.queryParamsModel)) {
  308. let event = {
  309. matchType: this.matchType,
  310. params: this.removeEmptyObject(this.queryParamsModel)
  311. }
  312. // 移动端模式下关闭弹窗
  313. if (this.izMobile) {
  314. this.visible = false
  315. }
  316. this.emitCallback(event)
  317. } else {
  318. this.$message.warn("不能查询空条件")
  319. }
  320. },
  321. emitCallback(event = {}) {
  322. let { params = [], matchType = this.matchType } = event
  323. this.superQueryFlag = (params && params.length > 0)
  324. for (let param of params) {
  325. if (Array.isArray(param.val)) {
  326. param.val = param.val.join(',')
  327. }
  328. }
  329. console.debug('---高级查询参数--->', { params, matchType })
  330. this.$emit(this.callback, params, matchType)
  331. },
  332. handleCancel() {
  333. this.close()
  334. },
  335. close() {
  336. this.$emit('close')
  337. this.visible = false
  338. },
  339. handleAdd() {
  340. this.addNewLine()
  341. },
  342. addNewLine() {
  343. this.queryParamsModel.push({ rule: 'eq' })
  344. },
  345. resetLine() {
  346. this.superQueryFlag = false
  347. this.queryParamsModel = []
  348. this.addNewLine()
  349. },
  350. handleDel(index) {
  351. this.queryParamsModel.splice(index, 1)
  352. },
  353. handleSelected(node, item) {
  354. let { type, options, dictCode, dictTable, customReturnField, popup } = node.dataRef
  355. item['type'] = type
  356. item['options'] = options
  357. item['dictCode'] = dictCode
  358. item['dictTable'] = dictTable
  359. item['customReturnField'] = customReturnField
  360. if (popup) {
  361. item['popup'] = popup
  362. }
  363. this.$set(item, 'val', undefined)
  364. },
  365. handleOpen() {
  366. this.show()
  367. },
  368. handleReset() {
  369. this.resetLine()
  370. this.emitCallback()
  371. },
  372. handleSave() {
  373. let queryParams = this.removeEmptyObject(this.queryParamsModel)
  374. if (this.isNullArray(queryParams)) {
  375. this.$message.warning('空条件不能保存')
  376. } else {
  377. this.prompt.value = ''
  378. this.prompt.visible = true
  379. }
  380. },
  381. handlePromptOk() {
  382. let { value } = this.prompt
  383. if(!value){
  384. this.$message.warning('保存名称不能为空')
  385. return
  386. }
  387. // 取出查询条件
  388. let records = this.removeEmptyObject(this.queryParamsModel)
  389. // 判断有没有重名的
  390. let filterList = this.saveTreeData.filter(i => i.originTitle === value)
  391. if (filterList.length > 0) {
  392. this.$confirm({
  393. content: `${value} 已存在,是否覆盖?`,
  394. onOk: () => {
  395. this.prompt.visible = false
  396. filterList[0].records = records
  397. this.saveToLocalStore()
  398. this.$message.success('保存成功')
  399. }
  400. })
  401. } else {
  402. // 没有重名的,直接添加
  403. this.prompt.visible = false
  404. // 添加到树列表中
  405. this.saveTreeData.push(this.renderSaveTreeData({
  406. title: value,
  407. matchType: this.matchType,
  408. records: records
  409. }))
  410. // 保存到 LocalStore
  411. this.saveToLocalStore()
  412. this.$message.success('保存成功')
  413. }
  414. },
  415. handleTreeSelect(idx, event) {
  416. if (event.selectedNodes[0]) {
  417. let { matchType, records } = event.selectedNodes[0].data.props
  418. // 将保存的matchType取出,兼容旧数据,如果没有保存就还是使用原来的
  419. this.matchType = matchType || this.matchType
  420. this.queryParamsModel = utils.cloneObject(records)
  421. }
  422. },
  423. handleRemoveSaveTreeItem(event, vNode) {
  424. // 阻止事件冒泡
  425. event.stopPropagation()
  426. this.$confirm({
  427. content: '是否删除当前查询?',
  428. onOk: () => {
  429. let { eventKey } = vNode
  430. this.saveTreeData.splice(Number.parseInt(eventKey.substring(2)), 1)
  431. this.saveToLocalStore()
  432. },
  433. })
  434. },
  435. // 将查询保存到 LocalStore 里
  436. saveToLocalStore() {
  437. let saveValue = this.saveTreeData.map(({ originTitle, matchType, records }) => ({ title: originTitle, matchType, records }))
  438. this.$ls.set(this.fullSaveCode, saveValue)
  439. },
  440. isNullArray(array) {
  441. //判断是不是空数组对象
  442. if (!array || array.length === 0) {
  443. return true
  444. }
  445. if (array.length === 1) {
  446. let obj = array[0]
  447. if (!obj.field || (obj.val == null || obj.val === '') || !obj.rule) {
  448. return true
  449. }
  450. }
  451. return false
  452. },
  453. // 去掉数组中的空对象
  454. removeEmptyObject(arr) {
  455. let array = utils.cloneObject(arr)
  456. for (let i = 0; i < array.length; i++) {
  457. let item = array[i]
  458. if (item == null || Object.keys(item).length <= 0) {
  459. array.splice(i--, 1)
  460. } else {
  461. if (Array.isArray(item.options)) {
  462. // 如果有字典属性,就不需要保存 options 了
  463. if (item.dictCode) {
  464. // 去掉特殊属性
  465. delete item.options
  466. }
  467. }
  468. }
  469. }
  470. return array
  471. },
  472. /** 渲染保存查询条件的 title(加个删除按钮) */
  473. renderSaveTreeData(item) {
  474. item.icon = this.treeIcon
  475. item.originTitle = item['title']
  476. item.title = (fn, vNode) => {
  477. let { originTitle } = vNode.dataRef
  478. return (
  479. <div class="j-history-tree-title">
  480. <span>{originTitle}</span>
  481. <div class="j-history-tree-title-closer" onClick={e => this.handleRemoveSaveTreeItem(e, vNode)}>
  482. <a-icon type="close-circle"/>
  483. </div>
  484. </div>
  485. )
  486. }
  487. return item
  488. },
  489. /** 判断是否允许多选 */
  490. allowMultiple(item) {
  491. return item.rule === 'in'
  492. },
  493. handleRuleChange(item, newValue) {
  494. let oldValue = item.rule
  495. this.$set(item, 'rule', newValue)
  496. // 上一个规则是否是 in,且type是字典或下拉
  497. if (oldValue === 'in') {
  498. if (item.dictCode || item.options instanceof Array) {
  499. let value = item.val
  500. if (typeof item.val === 'string') {
  501. value = item.val.split(',')[0]
  502. } else if (Array.isArray(item.val)) {
  503. value = item.val[0]
  504. }
  505. this.$set(item, 'val', value)
  506. }
  507. }
  508. },
  509. handleChangeJPopup(item, e, values) {
  510. item.val = values[item.popup['destFields']]
  511. },
  512. }
  513. }
  514. </script>
  515. <style lang="less" scoped>
  516. .j-super-query-box {
  517. display: inline-block;
  518. }
  519. .j-super-query-modal {
  520. .j-super-query-history-card {
  521. ::v-deep .ant-card-body,
  522. ::v-deep .ant-card-head-title {
  523. padding: 0;
  524. }
  525. ::v-deep .ant-card-head {
  526. padding: 4px 8px;
  527. min-height: initial;
  528. }
  529. }
  530. .j-super-query-history-empty {
  531. ::v-deep .ant-empty-image {
  532. height: 80px;
  533. line-height: 80px;
  534. margin-bottom: 0;
  535. }
  536. ::v-deep img {
  537. width: 80px;
  538. height: 65px;
  539. }
  540. ::v-deep .ant-empty-description {
  541. color: #afafaf;
  542. margin: 8px 0;
  543. }
  544. }
  545. .j-super-query-history-tree {
  546. .j-history-tree-title {
  547. width: calc(100% - 24px);
  548. position: relative;
  549. display: inline-block;
  550. &-closer {
  551. color: #999999;
  552. position: absolute;
  553. top: 0;
  554. right: 0;
  555. width: 24px;
  556. height: 24px;
  557. text-align: center;
  558. opacity: 0;
  559. transition: opacity 0.3s, color 0.3s;
  560. &:hover {
  561. color: #666666;
  562. }
  563. &:active {
  564. color: #333333;
  565. }
  566. }
  567. &:hover {
  568. .j-history-tree-title-closer {
  569. opacity: 1;
  570. }
  571. }
  572. }
  573. ::v-deep .ant-tree-switcher {
  574. display: none;
  575. }
  576. ::v-deep .ant-tree-node-content-wrapper {
  577. width: 100%;
  578. }
  579. }
  580. }
  581. </style>