Commit 71efaafb authored by 罗超's avatar 罗超

封装自定义按钮

parent 5dc99292
...@@ -150,7 +150,7 @@ export default { ...@@ -150,7 +150,7 @@ export default {
CustomQueryService.saveCustom(model.value).then(r => { CustomQueryService.saveCustom(model.value).then(r => {
if (r.data && r.data.Code == 1) { if (r.data && r.data.Code == 1) {
message.successMsg('保存完毕') message.successMsg('保存完毕')
context.emit('change-reload', 'SAVE') context.emit('change-reload', 'SAVE',model.value)
} }
subLoading.value = false subLoading.value = false
}) })
......
<template>
<q-btn class="q-ml-md q-px-md" :color="(queryMsg.customResult.list && queryMsg.whereId == 0) || queryMsg.whereId != 0 ? 'primary' : 'dark'" label="自定义筛选" dense outline>
<q-popup-proxy ref="customRef" transition-show="scale" transition-hide="scale" class="q-py-sm">
<q-list style="width: 250px" dense>
<q-item clickable v-ripple @click="openWhereBoxHander(1)">
<q-item-section>
<q-item-label>自定义筛选</q-item-label>
</q-item-section>
<q-item-section side>
<i class="iconfont icon-arrow-right f12"></i>
</q-item-section>
</q-item>
<q-separator />
<q-item-label header class="row">
<div class="col f12">常用筛选</div>
<div class="text-dark">
<i class="iconfont icon-setting f12 q-mr-md cursor-pointer" @click="settingWhereList"></i>
<i class="iconfont icon-plus-circle f12 cursor-pointer" @click="openWhereBoxHander(2)"></i>
</div>
</q-item-label>
<q-item v-for="(x, i) in pageData.whereList" :key="i" @click="updateWhereHandler(x.Id)" :active="x.Id == queryMsg.whereId" active-class="text-primary" clickable v-ripple>
<q-item-section>
<q-item-label>{{ x.Name }}</q-item-label>
</q-item-section>
</q-item>
<q-separator />
<q-item clickable v-ripple v-close-popup @click="deleteWhereHandler">
<q-item-section>
<q-item-label class="text-primary">清空筛选条件</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-popup-proxy>
</q-btn>
<q-dialog v-model="pageData.showColWhereCard">
<custom-where :columns="columns" :dataId="pageData.dataId" :current="queryMsg.customResult" :code="pageCode" :mode="pageData.mode" @change-reload="changeWhereHandler"></custom-where>
</q-dialog>
<q-dialog v-model="pageData.showWhereList">
<where-list :code="pageCode" @update-where="editorWhereHandler"></where-list>
</q-dialog>
</template>
<script>
import { reactive, ref } from 'vue'
import CustomWhere from './customWhere.vue'
import whereList from './whereList.vue'
import CustomQueryService from '@/api/customQuery'
import { UseDirection } from '@/config/direction'
export default {
components: { CustomWhere, whereList },
props: {
/**
* 页面功能编码
*/
pageCode: String,
/**
* @description 列数组
*/
columns: Array
},
setup(props, context) {
const queryMsg = reactive({
whereId: 0,
customResult: {
list: null,
condition: 1
}
})
const customRef = ref(null)
const pageData = reactive({
showColWhereCard: false,
showWhereList: false,
mode: 1, //声明分类ID,适用于修改分类对应的自定义筛选【mode=3】
dataId: 0,
whereList: []
})
const openWhereBoxHander = m => {
pageData.mode = m
pageData.showColWhereCard = true
}
const deleteWhereHandler = () => {
queryMsg.whereId = 0
queryMsg.customResult = {
list: null,
condition: 1
}
context.emit('empty-where')
}
const updateWhereHandler = id => {
queryMsg.whereId = id
queryMsg.customResult = {}
//@TODO: 处理变更
let params = {
SelectList: [],
AddCondition: 1
}
CustomQueryService.queryCustomById(id).then(r => {
if (r.data && r.data.Code == 1) {
params.SelectList = JSON.parse(r.data.Data.SelectList)
params.SelectList = UseDirection.MappingAuto(params.SelectList)
params.AddCondition = r.data.Data.AddCondition
}
context.emit('update-where', params)
})
}
//#region 初始化已保存的自定义信息
const loadWhereList = () => {
pageData.whereList = []
CustomQueryService.queryMyCustom(props.pageCode).then(r => {
pageData.whereList = r.data.Data
})
}
loadWhereList()
//#endregion
//#region 处理数据回调
const changeWhereHandler = (code, result) => {
console.log('触发了吗?')
if (code == 'SAVE') {
loadWhereList()
console.log(queryMsg.whereId,result)
if (result.Id == queryMsg.whereId) {
let params = {}
params.AddCondition = result.AddCondition
params.SelectList = UseDirection.MappingAuto(JSON.parse(result.SelectList))
context.emit('update-where', params)
}
} else if (code == 'CUSTOM') {
queryMsg.customResult = JSON.parse(JSON.stringify(result))
let params = {}
params.AddCondition = result.condition
params.SelectList = UseDirection.MappingAuto(result.list)
context.emit('update-where', params)
}
pageData.showColWhereCard = false
customRef.value.hide()
}
const editorWhereHandler = id => {
pageData.showWhereList = false
if (id > 0) {
pageData.mode = 3 //3 代表编辑
pageData.dataId = id
} else {
pageData.mode = 2
}
pageData.showColWhereCard = true
}
const settingWhereList = () => {
pageData.showColWhereCard = false
pageData.showWhereList = true
}
const clearWhereHandler = () => {
queryMsg.whereId = 0
queryMsg.customResult = {}
}
//#endregion
return { queryMsg, pageData, customRef, clearWhereHandler, openWhereBoxHander, updateWhereHandler, changeWhereHandler, editorWhereHandler, deleteWhereHandler, settingWhereList }
}
}
</script>
<style></style>
...@@ -2,11 +2,11 @@ ...@@ -2,11 +2,11 @@
<div class="relative-position"> <div class="relative-position">
<div class="bg-white relative-position" :class="{ 'q-ml-xl': selectList.length > 1 }" v-if="selectList.length > 0" style="z-index: 2"> <div class="bg-white relative-position" :class="{ 'q-ml-xl': selectList.length > 1 }" v-if="selectList.length > 0" style="z-index: 2">
<div class="row q-mb-md" v-for="(x, i) in selectList" :key="`${i}`"> <div class="row q-mb-md" v-for="(x, i) in selectList" :key="`${i}`">
<div class="col-11"> <div class="col-10">
<where-item :data="x" @change="changeDataHandler($event, i)"></where-item> <where-item :data="x" @change="changeDataHandler($event, i)"></where-item>
</div> </div>
<div class="col-1 flex items-center justify-start"> <div class="col-2 flex items-center justify-start">
<img src="@/assets/images/customer/delete.png" style="width: 20px" class="cursor-pointer q-mr-md" v-if="i + 1 != selectList.length" @click="deleteSelect" /> <img src="@/assets/images/customer/delete.png" style="width: 20px" class="cursor-pointer q-mr-md" v-if="selectList.length>0" @click="deleteSelect" />
<img src="@/assets/images/customer/add.png" style="width: 20px" class="cursor-pointer" @click="addSelect" v-if="i + 1 == selectList.length" /> <img src="@/assets/images/customer/add.png" style="width: 20px" class="cursor-pointer" @click="addSelect" v-if="i + 1 == selectList.length" />
</div> </div>
</div> </div>
......
...@@ -6,63 +6,23 @@ ...@@ -6,63 +6,23 @@
<q-date :options="optionsFn" v-model="queryMsg.createDate" range @range-end="updateCreateRange"></q-date> <q-date :options="optionsFn" v-model="queryMsg.createDate" range @range-end="updateCreateRange"></q-date>
</q-popup-proxy> </q-popup-proxy>
</q-input> </q-input>
<q-btn class="q-ml-md q-px-md" :color="queryMsg.customResult.list || queryMsg.whereId != 0 ? 'primary' : 'dark'" label="自定义筛选" dense outline> <vt-custom-btn ref="vtBtn" :page-code="pageCode" :columns="columns" @empty-where="deleteWhereHandler(0)" @update-where="updateWhereHandler"></vt-custom-btn>
<q-popup-proxy ref="customRef" transition-show="scale" transition-hide="scale" class="q-py-sm">
<q-list style="width: 250px" dense>
<q-item clickable v-ripple @click="openWhereBoxHander(1)">
<q-item-section>
<q-item-label>自定义筛选</q-item-label>
</q-item-section>
<q-item-section side>
<i class="iconfont icon-arrow-right f12"></i>
</q-item-section>
</q-item>
<q-separator />
<q-item-label header class="row">
<div class="col f12">常用筛选</div>
<div class="text-dark">
<i class="iconfont icon-setting f12 q-mr-md cursor-pointer" @click="settingWhereList"></i>
<i class="iconfont icon-plus-circle f12 cursor-pointer" @click="openWhereBoxHander(2)"></i>
</div>
</q-item-label>
<q-item v-for="(x, i) in whereList" :key="i" @click="updateWhereHandler(x.Id)" :active="x.Id == queryMsg.whereId" active-class="text-primary" clickable v-ripple>
<q-item-section>
<q-item-label>{{ x.Name }}</q-item-label>
</q-item-section>
</q-item>
<q-separator />
<q-item clickable v-ripple v-close-popup @click="deleteWhereHandler">
<q-item-section>
<q-item-label class="text-primary">清空筛选条件</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-popup-proxy>
</q-btn>
<q-btn class="q-ml-md q-px-md" color="dark" label="重置" dense outline @click="deleteWhereHandler(1)"></q-btn> <q-btn class="q-ml-md q-px-md" color="dark" label="重置" dense outline @click="deleteWhereHandler(1)"></q-btn>
</div> </div>
<q-dialog v-model="showColWhereCard">
<custom-where :columns="columns" :dataId="dataId" :current="queryMsg.customResult" :code="pageCode" :mode="mode" @change-reload="changeWhereHandler"></custom-where>
</q-dialog>
<q-dialog v-model="showWhereList">
<where-list :code="pageCode" @update-where="editorWhereHandler"></where-list>
</q-dialog>
</template> </template>
<script> <script>
import searchBox from '../common/searchBox.vue' import searchBox from '../common/searchBox.vue'
import { formatDateTime } from '@/utils/tools' import { formatDateTime } from '@/utils/tools'
import vtCustomBtn from '../common/customWhere/vtCustomBtn.vue'
import { reactive, computed, ref } from 'vue' import { reactive, computed, ref } from 'vue'
import CustomWhere from '../common/customWhere/customWhere.vue'
import whereList from '@/components/common/customWhere/whereList.vue'
import CustomQueryService from '@/api/customQuery'
import { UseDirection } from '@/config/direction'
export default { export default {
props: { props: {
/** /**
* @description 模式:0为未选择表格内容模式,1为选中了表格内容模式 * @description 模式:0为未选择表格内容模式,1为选中了表格内容模式
*/ */
model: { mode: {
type: Number, type: Number,
default: 0 | 1 default: 0 | 1
}, },
...@@ -72,21 +32,14 @@ export default { ...@@ -72,21 +32,14 @@ export default {
*/ */
columns: Array columns: Array
}, },
components: { searchBox, CustomWhere, whereList }, components: { searchBox, vtCustomBtn },
setup(props, context) { setup(props, context) {
const whereList = ref([])
const pageCode = ref('clue_custom') const pageCode = ref('clue_custom')
const showColWhereCard = ref(false) const vtBtn = ref(null)
const showWhereList = ref(false)
const customRef = ref(null)
const mode = ref(1)
const dataId = ref(0) //声明分类ID,适用于修改分类对应的自定义筛选【mode=3】
const queryMsg = reactive({ const queryMsg = reactive({
searchKey: '', searchKey: '',
createDate: {}, createDate: {},
formatCreateDateRange: '', formatCreateDateRange: ''
whereId: 0,
customResult: {}
}) })
const selectMsg = reactive({ const selectMsg = reactive({
CustomerName: '', CustomerName: '',
...@@ -100,7 +53,7 @@ export default { ...@@ -100,7 +53,7 @@ export default {
}) })
const modelType = computed(() => { const modelType = computed(() => {
return props.model return props.mode
}) })
const updateCreateRange = e => { const updateCreateRange = e => {
...@@ -125,22 +78,7 @@ export default { ...@@ -125,22 +78,7 @@ export default {
} }
const qDateProxy = ref(null) const qDateProxy = ref(null)
const updateWhereHandler = id => {
queryMsg.whereId = id
queryMsg.customResult = {}
selectMsg.SelectList = []
CustomQueryService.queryCustomById(id).then(r => {
if (r.data && r.data.Code == 1) {
selectMsg.SelectList = JSON.parse(r.data.Data.SelectList)
selectMsg.SelectList = UseDirection.MappingAuto(selectMsg.SelectList)
selectMsg.AddCondition = r.data.Data.AddCondition
}
pushRelaodHandler()
})
}
const deleteWhereHandler = type => { const deleteWhereHandler = type => {
queryMsg.customResult = {}
selectMsg.SelectList = [] selectMsg.SelectList = []
selectMsg.AddCondition = 0 selectMsg.AddCondition = 0
queryMsg.whereId = 0 queryMsg.whereId = 0
...@@ -149,23 +87,19 @@ export default { ...@@ -149,23 +87,19 @@ export default {
queryMsg.formatCreateDateRange = '' queryMsg.formatCreateDateRange = ''
queryMsg.createDate = {} queryMsg.createDate = {}
queryMsg.searchKey = '' queryMsg.searchKey = ''
vtBtn.value.clearWhereHandler()
} }
reloadDataHandler() reloadDataHandler()
} }
const updateWhereHandler = params => {
//#region 初始化已保存的自定义信息 selectMsg.SelectList = params.SelectList
selectMsg.AddCondition = params.AddCondition
const loadWhereList = () => { pushRelaodHandler()
CustomQueryService.queryMyCustom(pageCode.value).then(r => {
whereList.value = r.data.Data
})
} }
loadWhereList() const pushRelaodHandler = () => {
context.emit('reload-data', selectMsg)
//#endregion }
//#region 处理数据回调
const reloadDataHandler = () => { const reloadDataHandler = () => {
selectMsg.CustomerName = queryMsg.searchKey selectMsg.CustomerName = queryMsg.searchKey
...@@ -182,48 +116,7 @@ export default { ...@@ -182,48 +116,7 @@ export default {
pushRelaodHandler() pushRelaodHandler()
} }
const changeWhereHandler = (code, result) => { return { queryMsg, modelType, updateCreateRange, optionsFn,vtBtn, qDateProxy, pageCode, updateWhereHandler, deleteWhereHandler, reloadDataHandler }
if (code == 'SAVE') {
loadWhereList()
} else if (code == 'CUSTOM') {
queryMsg.customResult = JSON.parse(JSON.stringify(result))
//selectMsg.SelectList = result.list
selectMsg.AddCondition = result.condition
selectMsg.SelectList = UseDirection.MappingAuto(result.list)
pushRelaodHandler()
}
showColWhereCard.value = false
customRef.value.hide()
}
const pushRelaodHandler = () => {
context.emit('reload-data', selectMsg)
}
const openWhereBoxHander = m => {
mode.value = m
showColWhereCard.value = true
}
const editorWhereHandler = id => {
showWhereList.value = false
if (id > 0) {
mode.value = 3 //3 代表编辑
dataId.value = id
} else {
mode.value = 2
}
showColWhereCard.value = true
}
const settingWhereList=()=>{
showColWhereCard.value = false
showWhereList.value = true
}
//#endregion
return { queryMsg, modelType, customRef,settingWhereList, showWhereList, dataId, editorWhereHandler, updateCreateRange, openWhereBoxHander, changeWhereHandler, optionsFn, qDateProxy, mode, whereList, updateWhereHandler, deleteWhereHandler, showColWhereCard, pageCode, reloadDataHandler }
} }
} }
</script> </script>
......
...@@ -17,7 +17,7 @@ interface DirectionItem { ...@@ -17,7 +17,7 @@ interface DirectionItem {
/** /**
* 是否不需要值 * 是否不需要值
*/ */
IsNotValue?: boolean IsNotValue: boolean
} }
/** /**
...@@ -54,15 +54,18 @@ DirectionRule.push({ ...@@ -54,15 +54,18 @@ DirectionRule.push({
Childs: [ Childs: [
{ {
Id: 1, Id: 1,
Name: '包含所有' Name: '包含所有',
IsNotValue: false
}, },
{ {
Id: 2, Id: 2,
Name: '包含任意' Name: '包含任意',
IsNotValue: false
}, },
{ {
Id: 3, Id: 3,
Name: '不包含' Name: '不包含',
IsNotValue: false
}, },
{ {
Id: 4, Id: 4,
...@@ -85,11 +88,13 @@ DirectionRule.push({ ...@@ -85,11 +88,13 @@ DirectionRule.push({
Childs: [ Childs: [
{ {
Id: 1, Id: 1,
Name: '等于' Name: '等于',
IsNotValue: false
}, },
{ {
Id: 2, Id: 2,
Name: '不等于' Name: '不等于',
IsNotValue: false
}, },
{ {
Id: 3, Id: 3,
...@@ -104,7 +109,8 @@ DirectionRule.push({ ...@@ -104,7 +109,8 @@ DirectionRule.push({
{ {
Id: 5, Id: 5,
Name: '模糊', Name: '模糊',
ExceptionMapping: [3] ExceptionMapping: [3],
IsNotValue: false
} }
] ]
}) })
...@@ -112,32 +118,38 @@ DirectionRule.push({ ...@@ -112,32 +118,38 @@ DirectionRule.push({
//#region 第三组组用于文本,多好文本,单选之类 //#region 第三组组用于文本,多好文本,单选之类
DirectionRule.push({ DirectionRule.push({
Id: 2, Id: 3,
MappingType: [7], MappingType: [7],
Childs: [ Childs: [
{ {
Id: 1, Id: 1,
Name: '等于' Name: '等于',
IsNotValue: false
}, },
{ {
Id: 2, Id: 2,
Name: '大于' Name: '大于',
IsNotValue: false
}, },
{ {
Id: 3, Id: 3,
Name: '大于等于' Name: '大于等于',
IsNotValue: false
}, },
{ {
Id: 4, Id: 4,
Name: '小于' Name: '小于',
IsNotValue: false
}, },
{ {
Id: 5, Id: 5,
Name: '小于等于' Name: '小于等于',
IsNotValue: false
}, },
{ {
Id: 6, Id: 6,
Name: '不等于' Name: '不等于',
IsNotValue: false
} }
] ]
}) })
...@@ -182,8 +194,9 @@ const TextTypeValidateRule = (model: SelectModel): string => { ...@@ -182,8 +194,9 @@ const TextTypeValidateRule = (model: SelectModel): string => {
if (SupportList.indexOf(model.Type) != -1) { if (SupportList.indexOf(model.Type) != -1) {
const directModel = DirectionRule.filter(x => x.MappingType.indexOf(model.Type) != -1) const directModel = DirectionRule.filter(x => x.MappingType.indexOf(model.Type) != -1)
if (directModel && directModel.length > 0) { if (directModel && directModel.length > 0) {
const directItemModel = DirectionRule[0].Childs.find(x => (x.Id = model.Direction)) const directItemModel = directModel[0].Childs.find(x => x.Id == model.Direction)
if (directItemModel) { if (directItemModel) {
console.log(directItemModel,directModel)
if (!directItemModel.IsNotValue && model.StartValue.trim() != '') { if (!directItemModel.IsNotValue && model.StartValue.trim() != '') {
return '' return ''
} else if (directItemModel.IsNotValue) { } else if (directItemModel.IsNotValue) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment