Skip to content

H
horse
Commit 528bcda8 authored by 罗超's avatar 罗超
Browse files
Options

新增自定义弹窗

parent 8b4792ef
Hide whitespace changes
Inline Side-by-side
Showing with 784 additions and 203 deletions
src/api/customQuery.ts 0 → 100644
View file @ 528bcda8
/**
* 所有跟自定义查询保存相关的
*/
import { HttpResponse } from '@/@types'
import Axios from './axios'
interface CustomQuerySaveModel {
Id: number
Code: string
Name: string
SelectList: string
}
/**
* 封装API调用
*/
class CustomQueryService {
/**
* 保存自定义对象
* @param data 自定义对象
* @returns 成功或失败
*/
static async saveCustom(data: CustomQuerySaveModel): Promise<HttpResponse> {
return Axios('/QYCustomer/SaveCustomQuery', {
method: 'post',
responseType: 'json',
data
})
}
/**
* 删除指定自定义信息
* @param id 编号
* @returns 成功或失败
*/
static async deleteCustom(id: number): Promise<HttpResponse> {
const data = { id }
return Axios('/QYCustomer/DeleteCustomQuery', {
method: 'post',
responseType: 'json',
data
})
}
/**
* 查询指定Code的自定义内容
* @param code 页面编号
* @returns 自定义集合
*/
static async queryMyCustom(code: string): Promise<HttpResponse> {
const data = { code }
return Axios('/QYCustomer/GetUserCustomQuery', {
method: 'post',
responseType: 'json',
data
})
}
/**
* 查询指定编号的自定义信息
* @param id 编号
* @returns 指定编号的详情
*/
static async queryCustomById(id: number): Promise<HttpResponse> {
const data = { id }
return Axios('/QYCustomer/GetCustomQueryById', {
method: 'post',
responseType: 'json',
data
})
}
}
export { CustomQuerySaveModel }
export default CustomQueryService
src/components/common/customWhere/customWhere.vue
View file @ 528bcda8
<template>
<q-card class="vt-customwhere-card column" flat v-if="allCol">
<q-card-section>
<div class="text-h6 pfb">{{colData.cardTitle}}</div>
<q-card-section v-if="modeType == 1">
<div class="text-h6 pfb">{{ colData.cardTitle }}</div>
<div class="f12 text-grey">当线索符合以下条件时</div>
</q-card-section>
<q-card-section v-else-if="modeType != 1">
<div class="text-h6 pfb">{{ modeType == 2 ? '添加' : '编辑' }}常用筛选</div>
</q-card-section>
<q-card-section v-if="modeType != 1">
<q-input ref="whereName" maxlength="20" filled dense v-model="model.Name" :rules="[val => !!val || '请输入分类名称']" placeholder="请输入分类名称"></q-input>
</q-card-section>
<q-card-section v-if="modeType != 1">
<div class="text-h6 pfb">当线索符合以下条件时</div>
</q-card-section>
<div class="col">
<q-scroll-area
:thumb-style="colData.scroll.scrollStyle.thumbStyle"
:bar-style="colData.scroll.scrollStyle.barStyle"
class="full-height full-width q-px-md"
>
<div class="row">
<q-select v-model="colData.currentNode" :options="allCol" option-label="name" class="col-3" dense option-value="value" map-options filled></q-select>
<where-node :node="colData.currentNode" v-if="colData.currentNode"></where-node>
</div>
</q-scroll-area>
<q-scroll-area :thumb-style="colData.scroll.scrollStyle.thumbStyle" :bar-style="colData.scroll.scrollStyle.barStyle" class="full-height full-width q-px-md">
<where ref="whereBox" :columns="allCol" :data="current" v-if="allCol.length > 0"></where>
</q-scroll-area>
</div>
<q-separator />
<q-card-section class="row">
<div class="col">
<q-btn dense outline color="dark" label="存为常用模板" class=" q-px-sm"></q-btn>
<q-btn dense outline color="dark" @click="changeModeToNew" v-if="modeType == 1" label="存为常用模板" class="q-px-sm"></q-btn>
</div>
<div>
<q-btn dense flat label="重置" class="q-mr-md"></q-btn>
<q-btn unelevated dense color="primary" label="确定" class="q-mr-md q-px-lg"></q-btn>
<q-btn dense flat label="重置" class="q-mr-md" v-if="modeType == 1" @click="resetHandler"></q-btn>
<q-btn unelevated dense color="primary" @click="subCustomHander" label="确定" :loading="subLoading" v-if="modeType == 1" class="q-mr-md q-px-lg"></q-btn>
<q-btn unelevated dense color="primary" label="立即保存" :loading="subLoading" @click="saveHandler" v-if="modeType != 1" class="q-mr-md q-px-lg"></q-btn>
</div>
</q-card-section>
</q-card>
</template>
<script>
import { ref,computed,reactive,onMounted } from 'vue'
import { ref, computed, reactive, onMounted } from 'vue'
import useScrollModule from '@/module/scrollbar/scrollModule'
import whereNode from './whereNode.vue'
import where from './where.vue'
import CustomQueryService from '@/api/customQuery'
import message from '@/utils/message'
export default {
components: { whereNode },
components: { where },
props: {
/**
* @description 当前表格列（只适用于自定义列）
......@@ -44,35 +49,126 @@ export default {
/**
* @description 标题
*/
title:String,
title: String,
/**
* @description 条件所属页面编号
*/
code:String
code: String,
/**
* @description 1,临时查询；2,新增；3,编辑
*/
mode: String,
/**
* @description 编号
*/
dataId: Number,
/**
* 当前自定义条件
*/
current: Object
},
setup(props) {
setup(props, context) {
const allCol = computed(() => {
return props.columns.filter(x=>x.IsCustom>0)
return props.columns.filter(x => x.IsCustom > 0)
})
const colData=reactive({
cardTitle:props.title?ref(props.title):'自定义筛选',
scroll: useScrollModule(),
currentNode: null
const model = ref(null)
const modeType = ref(props.mode)
const whereName = ref(null)
const colData = reactive({
cardTitle: props.title ? ref(props.title) : '自定义筛选',
scroll: useScrollModule(),
currentNode: null
})
onMounted(() => {
const tempCurrent=props.columns.filter(x=>x.IsCustom>0)
colData.currentNode=tempCurrent?tempCurrent[0]:null
const tempCurrent = props.columns.filter(x => x.IsCustom > 0)
colData.currentNode = tempCurrent ? tempCurrent[0] : null
})
return {allCol,colData}
const whereBox = ref(null)
const resetHandler = () => {
whereBox.value.reset()
}
const changeModeToNew = () => {
model.value = {
Id: 0,
Name: '',
Code: props.code,
SelectLit: '',
AddCondition: 1
}
modeType.value = 2
}
const changeModeToModify = () => {
if (props.dataId) {
CustomQueryService.queryCustomById(props.dataId).then(r => {
if (r.data.Data.Id != props.dataId) {
changeModeToNew()
} else {
model.value = r.data.Data
}
})
} else {
changeModeToNew()
}
}
if (props.mode == 3) {
changeModeToModify()
} else if (props.mode == 2) {
changeModeToNew()
}
const subLoading = ref(false)
const saveHandler = () => {
subLoading.value = true
const data = whereBox.value.getData()
if (data.list && data.list.length > 0) {
whereName.value.validate()
if (whereName.value.hasError) {
message.warnMsg('请填写分类名称')
} else {
model.value.AddCondition = data.condition
model.value.SelectList = JSON.stringify(data.list)
CustomQueryService.saveCustom(model.value).then(r => {
if(r.data && r.data.Code ==1){
message.successMsg('保存完毕')
context.emit('change-reload', 'SAVE')
}
subLoading.value = false
})
}
}
subLoading.value = false
}
const subCustomHander=()=>{
subLoading.value = true
const data = whereBox.value.getData()
if (data.list && data.list.length > 0) {
context.emit('change-reload', 'CUSTOM',data)
}else{
message.warnMsg("你还未设置任何查询内容")
}
subLoading.value = false
}
return { allCol, colData, whereBox, subCustomHander, resetHandler, changeModeToNew, model, modeType, saveHandler, subLoading, whereName }
}
}
</script>
<style lang="sass" scoped>
.vt-customwhere-card
max-width: 700px !important
width: 700px
height: 500px
</style>
src/components/common/customWhere/where.vue 0 → 100644
View file @ 528bcda8
<template>
<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="row q-mb-md" v-for="(x, i) in selectList" :key="`${i}`">
<div class="col-11">
<where-item :data="x" @change="changeDataHandler($event, i)"></where-item>
</div>
<div class="col-1 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/add.png" style="width: 20px" class="cursor-pointer" @click="addSelect" v-if="i + 1 == selectList.length" />
</div>
</div>
</div>
<div class="absolute-full q-my-md q-ml-md flex" style="border: 1px solid #f1f1f1" v-if="selectList.length > 1">
<div class="where-box">
<div class="where-box-item cursor-pointer" :class="{ active: addCondition == 1 }" @click="changeCondition(1)">且</div>
<div class="where-box-item cursor-pointer" :class="{ active: addCondition == 2 }" @click="changeCondition(2)">或</div>
</div>
</div>
</div>
</template>
<script>
import { ref, watch, provide, nextTick } from 'vue'
import whereItem from './whereItem.vue'
import { UseDirection } from '@/config/direction'
import message from '@/utils/message'
export default {
components: { whereItem },
props: {
/**
* @description 当前表格列（只适用于自定义列）
*/
columns: Array,
/**
* 数据
*/
data: Array
},
setup(props) {
const selectList = ref([])
provide('columns', props.columns)
watch(
() => props.columns,
val => {
provide('columns', val)
},
{ deep: true }
)
const addCondition = ref(1)
const initList = val => {
if (val && val.list && val.list.length > 0) {
selectList.value = val.list
addCondition.value = val.condition
} else {
selectList.value = [
{
Name: '',
Type: 0,
Direction: -1,
StartValue: '',
EndValue: '',
IsCustom: 1
}
]
}
}
initList(props.data)
const addSelect = () => {
selectList.value.push({
Name: '',
Type: 0,
Direction: -1,
StartValue: '',
EndValue: '',
IsCustom: 1
})
}
const deleteSelect = index => {
selectList.value.splice(index, 1)
}
const changeDataHandler = (e, i) => {
if (e.StartValue != undefined) {
selectList.value[i] = e
console.log('收到了：', e)
}
}
const changeCondition = val => {
addCondition.value = val
}
const reset = async () => {
selectList.value = []
await nextTick()
selectList.value.push({
Name: '',
Type: 0,
Direction: -1,
StartValue: '',
EndValue: '',
IsCustom: 1
})
addCondition.value = 1
}
const getData = () => {
let list = []
if (selectList.value.length > 0) {
const temp = JSON.parse(JSON.stringify(selectList.value))
const msg = UseDirection.ValidateCoustom(temp)
if (msg != '') {
message.warnMsg(msg)
} else {
list = temp
}
}
return { list, condition: addCondition.value }
}
return { selectList, deleteSelect, addSelect, changeDataHandler, addCondition, changeCondition, reset, getData }
}
}
</script>
<style>
.where-box {
position: absolute;
width: 23px;
left: -11px;
top: 50%;
margin-top: -23px;
z-index: 3;
}
.where-box .where-box-item {
height: 23px;
line-height: 23px;
text-align: center;
font-size: 12px;
font-family: 'microsoft yahei';
background: var(--q-secondary);
color: var(--q-dark);
}
.where-box .where-box-item.active {
background: var(--q-dark);
color: var(--q-secondary);
}
</style>
src/components/common/customWhere/whereItem.vue 0 → 100644
View file @ 528bcda8
<template>
<div class="row">
<q-select v-model="currentNode" :options="allCol" option-label="name" class="col-3" dense option-value="value" map-options filled></q-select>
<where-node :node="currentNode" v-if="currentNode"></where-node>
</div>
</template>
<script>
import { ref, inject, provide, watch } from 'vue'
import whereNode from './whereNode.vue'
export default {
components: { whereNode },
props: {
data: Object
},
setup(props, context) {
const allCol = inject('columns')
const currentNode = ref(null)
const model = ref(props.data)
provide('whereModel', model)
console.log(model.value, '....')
watch(
() => model,
val => {
context.emit('change', val.value)
},
{ deep: true }
)
if (model.value.Name) {
const temp = allCol.find(x => x.data.Id === model.value.Name)
currentNode.value = temp ? temp : allCol[0]
console.log(currentNode)
} else {
currentNode.value = allCol ? allCol[0] : null
}
return { allCol, currentNode }
}
}
</script>
<style></style>
src/components/common/customWhere/whereNode.vue
View file @ 528bcda8
<template>
<div class="col-8 row q-px-md">
<q-select v-if="colData.nodeWhere && colData.nodeWhere.length > 0" v-model="colData.where" :options="colData.nodeWhere" option-label="Name" class="col-5" dense option-value="Id" map-options filled></q-select>
<div class="col-7 q-pl-md">
<where-node-value :node="node" v-model="model" v-if="colData.where && !colData.where.IsNotValue"></where-node-value>
<div class="col-9 row q-px-md">
<q-select v-if="colData.nodeWhere && colData.nodeWhere.length > 0" @update:model-value="changeWhereHandler" v-model="colData.where" :options="colData.nodeWhere" option-label="Name" class="col-5 q-pr-md" dense option-value="Id" map-options filled></q-select>
<div class="col">
<where-node-value :node="node" v-if="(colData.where && !colData.where.IsNotValue) || model.Direction == ''"></where-node-value>
</div>
</div>
</template>
<script>
import { reactive, watch, onMounted } from 'vue'
import { reactive, watch, onMounted, inject } from 'vue'
import { UseDirection } from '@/config/direction'
import whereNodeValue from './whereNodeValue.vue'
export default {
......@@ -26,44 +26,49 @@ export default {
whereValue: ''
})
const model = reactive({
Name: props.node.data.Id,
Type: props.node.data.Type,
Direction: -1,
StartValue: '',
EndValue: '',
IsCustom: props.node.data.IsCustom
})
const model = inject('whereModel')
watch(
() => props.node,
val => {
initWhere(val.data)
initWhere(val)
},
{ deep: true }
)
const initWhere = data => {
console.log(data)
colData.nodeWhere = UseDirection.QueryDirectionByType(data.Type)
model.Name=data.Id
model.Type=data.Type
model.StartValue='',
model.EndValue='',
model.IsCustom=data.IsCustom
const initWhere = val => {
colData.nodeWhere = UseDirection.QueryDirectionByType(val.data.Type)
model.value.Name = val.data.Id
model.value.Type = val.data.Type
model.value.StartValue = ''
model.value.EndValue = ''
model.value.IsCustom = val.IsCustom
if (colData.nodeWhere && colData.nodeWhere.length > 0) {
colData.where = colData.nodeWhere[0]
model.Direction=colData.where.Id
model.value.Direction = colData.where.Id
} else {
colData.where = null
model.Direction=-1
model.value.Direction = ''
}
}
const changeWhereHandler = val => {
model.value.Direction = val.Id
}
onMounted(() => {
initWhere(props.node.data)
if (model.value.StartValue == '') {
initWhere(props.node)
} else {
colData.nodeWhere = UseDirection.QueryDirectionByType(model.value.Type)
if (colData.nodeWhere && colData.nodeWhere.length > 0 && model.value.Direction != '') {
colData.where = colData.nodeWhere.find(x => x.Id == model.value.Direction)
} else {
colData.where = null
}
}
})
return { colData,model }
return { colData, model, changeWhereHandler }
}
}
</script>
......
src/components/common/customWhere/whereNodeValue.vue
View file @ 528bcda8
......@@ -11,26 +11,30 @@
<div v-if="currentNode.data.Type == 7">
<q-input v-model="model.StartValue" @update:model-value="integerModel.changeHandler" filled dense placeholder="请输入"></q-input>
</div>
<div v-if="currentNode.data.Type == 5 && dateModel.options.length > 0">
<n-cascader class="vt-cascader" v-model:value="dateModel.model" multiple clearable placeholder="请选择" max-tag-count="responsive" expand-trigger="click" :options="dateModel.options" check-strategy="child" @update:value="dateModel.changeHandler" />
</div>
<div v-if="currentNode.data.Type == 6" class="vt-header-box">
<q-input outlined dense v-model="dateRangeModel.formatRange" placeholder="请选择" readonly>
<q-popup-proxy ref="rangeRefs" transition-show="scale" transition-hide="scale">
<q-date v-model="dateRangeModel.model" range @range-end="dateRangeModel.changeHandler"></q-date>
</q-popup-proxy>
</q-input>
</div>
</template>
<script>
import { computed, reactive, watch, onMounted, ref } from 'vue'
import { inject, reactive, watch, onMounted, ref } from 'vue'
export default {
props: {
/**
* 条件节点
*/
node: Object,
/**
* 对象
*/
modelValue: Object
node: Object
},
setup(props, context) {
const model = computed(() => {
return props.modelValue
})
setup(props) {
const model = inject('whereModel')
const currentNode = ref(props.node)
......@@ -38,16 +42,20 @@ export default {
() => props.node,
val => {
currentNode.value = val
model.value.StartValue = ''
model.value.EndValue = ''
init(val)
},
{ deep: true }
)
const changeModelHandler = () => {
console.log(model.value)
context.emit('update:modelValue', model.value)
// console.log(model.value)
// context.emit('update:modelValue', model.value)
}
//#region 封装的规则映射数据
const radioModel = reactive({
model: null,
Option: [],
......@@ -79,43 +87,106 @@ export default {
const integerModel = reactive({
mask: '',
nomuch: (val,len) => {
nomuch: (val, len) => {
val = val.replace(/[^\d.]/g, '') //清除"数字"和"."以外的字符
val = val.replace(/^\./g, '') //验证第一个字符是数字而不是
val = val.replace(/\.{2,}/g, '.') //只保留第一个. 清除多余的
val = val.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')
let lenStr=""
let lenStr = ''
for (let i = 0; i < len; i++) {
lenStr+="\\d"
lenStr += '\\d'
}
let matchRule=''
let matchRule = ''
eval(`matchRule=/^(\\-)*(\\d+)\\.(${lenStr}).*$/`)
val = val.replace(matchRule, '$1$2.$3') //只能输入一个小数
return val
},
changeHandler: val => {
let temp=""
if(currentNode.value.data.Digits==0){
temp=val.replace(/\D/gi, '')
temp=temp?parseInt(temp).toString():''
}else{
temp= integerModel.nomuch(val,currentNode.value.data.Digits)
let temp = ''
if (currentNode.value.data.Digits == 0) {
temp = val.replace(/\D/gi, '')
temp = temp ? parseInt(temp).toString() : ''
} else {
temp = integerModel.nomuch(val, currentNode.value.data.Digits)
}
console.log(temp)
setTimeout(() => {
model.value.StartValue = temp
}, 200);
changeModelHandler()
changeModelHandler()
}, 200)
}
})
const dateModel = reactive({
options: [],
model: [],
init: () => {
dateModel.options = []
let year = new Date().getFullYear()
for (let i = 1; i <= 12; i++) {
let obj = {
value: i < 10 ? '0' + i : '' + i,
label: i + '月',
children: []
}
let day = new Date(year, i, 0).getDate()
for (let d = 1; d <= day; d++) {
obj.children.push({
value: (i < 10 ? '0' + i : '' + i) + '-' + (d < 10 ? '0' + d : '' + d),
label: d + '日'
})
}
dateModel.options.push(obj)
}
},
changeHandler: val => {
model.value.StartValue = val.toString()
}
})
const rangeRefs = ref(null)
const dateRangeModel = reactive({
model: {},
formatRange: '',
refObj: ref(null),
changeHandler: e => {
if (e.from && e.to) {
console.log(dateRangeModel.model)
let tempFrom = e.from.year + '-' + (e.from.month > 9 ? e.from.month : `0${e.from.month}`) + '-' + (e.from.day > 9 ? e.from.day : `0${e.from.day}`)
let tempTo = e.to.year + '-' + (e.to.month > 9 ? e.to.month : `0${e.to.month}`) + '-' + (e.to.day > 9 ? e.to.day : `0${e.to.day}`)
dateRangeModel.formatRange = `${tempFrom} 至 ${tempTo}`
model.value.StartValue = tempFrom
model.value.EndValue = tempTo
rangeRefs.value.hide()
changeModelHandler()
}
}
})
const initRadioModel = node => {
radioModel.model = node.data.OptionsList[0]
if (model.value.StartValue != '') {
radioModel.model = node.data.OptionsList.find(x => x.Id == model.value.StartValue)
} else {
radioModel.model = node.data.OptionsList[0]
model.value.StartValue = node.data.OptionsList[0].val
}
radioModel.Option = node.data.OptionsList
}
const initCheckModel = node => {
checkModel.model = [node.data.OptionsList[0]]
if (model.value.StartValue != '') {
const temp = model.value.StartValue.split(',')
checkModel.model = []
console.log(temp, node.data.OptionsList)
node.data.OptionsList.forEach(x => {
if (temp.indexOf(x.Id.toString()) != -1) {
checkModel.model.push(x)
}
})
} else {
checkModel.model = [node.data.OptionsList[0]]
model.value.StartValue = checkModel.model.Id
}
checkModel.Option = node.data.OptionsList
}
......@@ -127,6 +198,30 @@ export default {
integerModel.mask = mask
}
const initDateModel = () => {
dateModel.init()
if (model.value.StartValue != '') {
dateModel.model = model.value.StartValue.split(',')
} else {
dateModel.model = []
}
}
const initDateRangeModel = () => {
if (model.value.StartValue == '') {
dateRangeModel.model = {}
dateRangeModel.formatRange = ''
} else {
dateRangeModel.model = {
from: model.value.StartValue.replaceAll('-', '/'),
to: model.value.EndValue.replaceAll('-', '/')
}
console.log(dateRangeModel.model)
dateRangeModel.formatRange = model.value.StartValue + ' 至 ' + model.value.EndValue
}
}
//#endregion
const init = node => {
if (node.data.Type == 3) {
initRadioModel(node)
......@@ -134,16 +229,38 @@ export default {
initCheckModel(node)
} else if (node.data.Type == 7) {
initIntegerModel(node)
} else if (node.data.Type == 5) {
initDateModel()
} else if (node.data.Type == 6) {
initDateRangeModel()
}
changeModelHandler()
}
onMounted(() => {
init(props.node)
})
return { model, currentNode, changeModelHandler, radioModel, checkModel, integerModel }
return { model, currentNode, changeModelHandler, radioModel, checkModel, integerModel, dateModel, dateRangeModel, rangeRefs }
}
}
</script>
<style></style>
<style>
.v-binder-follower-container {
z-index: 99999999 !important;
}
.vt-cascader > div:first-child {
padding-left: 0px !important;
height: 40px !important;
width: 186px;
}
.vt-cascader .n-base-selection .n-base-selection-tags {
padding-left: 7px !important;
height: 40px !important;
}
.vt-header-box .q-field--outlined.q-field--readonly .q-field__control:before {
border-style: solid !important;
}
</style>
src/components/common/searchBox.vue
View file @ 528bcda8
<template>
<div :style="boxWidth" :class="{'vt-search-box':keyFocus}">
<q-input dense v-model="keyWord" outlined @change="valueChange" @focus="focusHandler" @blur="blurHandler" @input="inputValue" :placeholder="ph"> </q-input>
<q-input dense v-model="keyWord" outlined @change="valueChange" clearable @focus="focusHandler" @blur="blurHandler" @update:model-value="inputValue" :placeholder="ph"> </q-input>
</div>
</template>
<script>
import { computed, ref } from 'vue'
import { computed, ref, watch } from 'vue'
export default {
props: {
......@@ -31,6 +31,15 @@ export default {
return { width: props.width ? props.width + 'px' : '75px' }
})
watch(
() => props.modelValue,
val => {
keyWord.value=val
},
{ deep: true }
)
const keyWord = ref(props.modelValue)
const ph = ref(props.placeHolder)
......@@ -53,6 +62,7 @@ export default {
}
const blurHandler=()=>{
keyFocus.value=false
context.emit("blur",keyWord.value)
}
return { boxWidth, keyWord, valueChange, ph, inputValue,focusHandler,blurHandler,keyFocus }
......
src/components/customer/clueHead.vue
View file @ 528bcda8
<template>
<div class="row q-mx-md relative-position vt-header-box">
<search-box v-model="queryMsg.searchKey"></search-box>
<search-box v-model="queryMsg.searchKey" @blur="reloadDataHandler"></search-box>
<q-input class="q-ml-md" outlined dense v-model="queryMsg.formatCreateDateRange" placeholder="创建时间" readonly>
<q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale">
<q-date :options="optionsFn" v-model="queryMsg.createDate" range @range-end="updateCreateRange"></q-date>
</q-popup-proxy>
</q-input>
<q-btn class="q-ml-md q-px-md" color="primary" label="自定义筛选" dense outline>
<q-popup-proxy transition-show="scale" transition-hide="scale" class="q-py-sm">
<q-btn class="q-ml-md q-px-md" :color="queryMsg.customResult.list || 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>
<q-item clickable v-ripple @click="openWhereBoxHander(1)">
<q-item-section>
<q-item-label>自定义筛选</q-item-label>
</q-item-section>
......@@ -22,12 +22,12 @@
<div class="col f12">常用筛选</div>
<div class="text-dark">
<i class="iconfont icon-setting f12 q-mr-md"></i>
<i class="iconfont icon-plus-circle f12"></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-label>{{ x.Name }}</q-item-label>
</q-item-section>
</q-item>
<q-separator />
......@@ -39,10 +39,10 @@
</q-list>
</q-popup-proxy>
</q-btn>
<q-btn class="q-ml-md q-px-md" color="primary" label="重置" dense outline></q-btn>
<q-btn class="q-ml-md q-px-md" color="dark" label="重置" dense outline @click="deleteWhereHandler(1)"></q-btn>
</div>
<q-dialog v-model="showColWhereCard">
<custom-where :columns="columns"></custom-where>
<custom-where :columns="columns" :current="queryMsg.customResult" :code="pageCode" :mode="mode" @change-reload="changeWhereHandler"></custom-where>
</q-dialog>
</template>
......@@ -51,6 +51,8 @@ import searchBox from '../common/searchBox.vue'
import { formatDateTime } from '@/utils/tools'
import { reactive, computed, ref } from 'vue'
import CustomWhere from '../common/customWhere/customWhere.vue'
import CustomQueryService from '@/api/customQuery'
import {UseDirection} from '@/config/direction'
export default {
props: {
/**
......@@ -67,20 +69,30 @@ export default {
columns: Array
},
components: { searchBox, CustomWhere },
setup(props) {
const whereList = reactive([
{ name: '成都的客户', Id: 1 },
{ name: '绵阳的客户', Id: 2 },
{ name: '德阳的客户', Id: 3 },
{ name: '宜宾的客户', Id: 4 }
])
const showColWhereCard = ref(true)
setup(props, context) {
const whereList = ref([])
const pageCode = ref('clue_custom')
const showColWhereCard = ref(false)
const customRef = ref(null)
const mode = ref(1)
const queryMsg = reactive({
searchKey: '',
createDate: {},
formatCreateDateRange: '',
whereId: 0
whereId: 0,
customResult: {}
})
const selectMsg = reactive({
CustomerName: '',
CorpName: '',
WeChatName: '',
CustomerMobile: '',
CreateSTime: '',
CreateETime: '',
SelectList: [],
AddCondition: 1
})
const modelType = computed(() => {
return props.model
})
......@@ -90,13 +102,18 @@ export default {
let tempFrom = e.from.year + '-' + e.from.month + '-' + e.from.day
let toFrom = e.to.year + '-' + e.to.month + '-' + e.to.day
queryMsg.formatCreateDateRange = `${tempFrom} 至 ${toFrom}`
selectMsg.CreateSTime = tempFrom
selectMsg.CreateETime = toFrom
}else{
queryMsg.formatCreateDateRange = ''
selectMsg.CreateSTime = ''
selectMsg.CreateETime = ''
}
qDateProxy.value.hide()
console.log()
pushRelaodHandler()
}
const nowDate = formatDateTime(new Date(), 'yyyy/MM/dd')
console.log(nowDate)
const optionsFn = date => {
return date >= '2020/01/01' && date <= nowDate
}
......@@ -104,13 +121,86 @@ export default {
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 = () => {
const deleteWhereHandler = type => {
queryMsg.customResult = {}
selectMsg.SelectList = []
selectMsg.AddCondition = 0
queryMsg.whereId = 0
//重置
if (type == 1) {
queryMsg.formatCreateDateRange = ''
queryMsg.createDate = {}
queryMsg.searchKey = ''
}
reloadDataHandler()
}
//#region 初始化已保存的自定义信息
const loadWhereList = () => {
CustomQueryService.queryMyCustom(pageCode.value).then(r => {
whereList.value = r.data.Data
})
}
loadWhereList()
//#endregion
//#region 处理数据回调
const reloadDataHandler = () => {
selectMsg.CustomerName = queryMsg.searchKey
// selectMsg.CorpName = queryMsg.searchKey
// selectMsg.WeChatName = queryMsg.searchKey
// selectMsg.CustomerMobile = queryMsg.searchKey
if (queryMsg.formatCreateDateRange.indexOf('至') != -1) {
selectMsg.CreateSTime = queryMsg.formatCreateDateRange.split(' 至 ')[0]
selectMsg.CreateETime = queryMsg.formatCreateDateRange.split(' 至 ')[1]
} else {
selectMsg.CreateSTime = ''
selectMsg.CreateETime = ''
}
pushRelaodHandler()
}
const changeWhereHandler = (code, result) => {
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
}
return { queryMsg, modelType, updateCreateRange, optionsFn, qDateProxy, whereList, updateWhereHandler, deleteWhereHandler, showColWhereCard }
//#endregion
return { queryMsg, modelType, customRef, updateCreateRange, openWhereBoxHander, changeWhereHandler, optionsFn, qDateProxy, mode, whereList, updateWhereHandler, deleteWhereHandler, showColWhereCard, pageCode, reloadDataHandler }
}
}
</script>
......
src/config/direction.ts
View file @ 528bcda8
/**
* @description 条件子项
*/
......@@ -217,16 +215,18 @@ const DateTypeValidateRule = (model: SelectModel): string => {
//#region 验证数据
const ValidateCoustom = (list: SelectModel[]): string => {
console.log(list)
let msg = ''
//定义映射规则
for (let i = 0; i < list.length; i++) {
if ([1, 2, 3, 4].indexOf(list[i].Type) == -1) {
if ([1, 2, 3, 4, 7].indexOf(list[i].Type) != -1) {
msg = TextTypeValidateRule(list[i])
} else if (list[i].Type == 5) {
msg = DateTypeValidateRule(list[i])
} else if (list[i].Type == 6) {
msg = RangeTypeValidateRule(list[i])
} else {
console.log(list[i])
msg = '不存在的数据验证规则'
}
if (msg != '') {
......@@ -237,11 +237,46 @@ const ValidateCoustom = (list: SelectModel[]): string => {
return msg
}
const MappingAuto = (list: SelectModel[]): SelectModel[] => {
const rule = [
{
type: 1,
mapping: [4]
},
{
type: 2,
mapping: [1, 2, 3]
},
{
type: 3,
mapping: [5]
},
{
type: 4,
mapping: [6]
},
{
type: 5,
mapping: [7]
}
]
list.forEach(x => {
rule.forEach(y => {
if (y.mapping.indexOf(x.Type)!=-1) {
x.Type = y.type
}
})
})
console.log(list)
return list
}
//#endregion
const UseDirection = {
QueryDirectionByType,
ValidateCoustom
ValidateCoustom,
MappingAuto
}
export { UseDirection }
src/module/customer/clueModule.ts
View file @ 528bcda8
......@@ -77,7 +77,8 @@ const ClueModule = () => {
WayList: [],
EmployeeList: [],
rowsPerPage: 0,
colLoadingFinish: false
colLoadingFinish: false,
dataLoding: false
})
customerSetService
......@@ -110,13 +111,24 @@ const ClueModule = () => {
//获取线索列表
const getCluerList = () => {
data.dataLoding = true
clueService.getCustomerClueList(msg).then(res => {
console.log(res, '数据')
data.dataList = res.data.Data.PageData
msg.pageCount = res.data.Data.PageCount
data.dataLoding = false
})
}
return { useTab, msg, data, getCluerList, TypeList, SeletObj }
const reloadListHandler = (obj: any) => {
console.log(obj)
msg.CustomerName = obj.CustomerName
msg.CreateETime = obj.CreateETime
msg.CreateSTime = obj.CreateSTime
msg.AddCondition = obj.AddCondition
msg.SelectList = obj.SelectList
getCluerList()
}
return { useTab, msg, data, getCluerList, TypeList, SeletObj, reloadListHandler }
}
export default ClueModule
src/pages/customerManage/clue.vue
View file @ 528bcda8
<template>
<div class="q-pa-md clue full-height full-width">
<q-card class="column full-height full-width q-pa-md" flat style="background: #FFF;border-radius: 10px;">
<q-tabs
v-model="tab"
dense
class="text-grey q-mb-md"
align="left"
active-color="primary"
indicator-color="primary"
narrow-indicator
>
<q-card class="column full-height full-width q-pa-md" flat style="background: #fff; border-radius: 10px">
<q-tabs v-model="tab" dense class="text-grey q-mb-md" align="left" active-color="primary" indicator-color="primary" narrow-indicator>
<q-tab :name="1" label="未处理" />
<q-tab :name="2" label="待回访" />
<q-tab :name="3" label="无效线索" />
<q-tab :name="4" label="已转客户" />
</q-tabs>
<clue-head :columns="data.allColumns"></clue-head>
<!-- <div class="page-search row items-center">
<div class="col row wrap q-mr-lg q-col-gutter-md">
<div class="col-3">
<q-input
filled
v-model="selectVal"
clearable
@clear="getCluerList"
@update:model-value="getSelectWay(), getCluerList()"
label="请输入"
>
<template #before>
<q-select
filled
style="width:120px;"
@update:model-value="getSelectWay"
option-value="Id"
option-label="Name"
v-model="selectWay"
:options="TypeList"
emit-value
map-options
label="选择类型"
/>
</template>
</q-input>
</div>
<div class="col-3">
<a-range-picker
style="width:auto"
v-model:value="dateRange"
size="large"
:locale="locale"
:format="format"
@change="chooseDate"
/>
</div>
</div>
</div> -->
<clue-head :columns="data.allColumns" @reload-data="reloadListHandler"></clue-head>
<div class="page-content q-mt-lg col full-width">
<q-table
:rows="data.dataList"
:columns="data.columns"
:visible-columns="data.showColumns"
flat
class="sticky-tow-column-table full-height sticky-right-column-table"
row-key="Id"
no-data-label="暂无相关数据"
selection="multiple"
v-if="data.colLoadingFinish"
separator="none"
style="max-width: 100%;"
>
<q-table :rows="data.dataList" :loading="data.dataLoding" :columns="data.columns" :visible-columns="data.showColumns" flat class="sticky-tow-column-table full-height sticky-right-column-table" row-key="Id" no-data-label="暂无相关数据" selection="multiple" v-if="data.colLoadingFinish" separator="none" style="max-width: 100%">
<template v-slot:bottom>
<q-pagination
class="full-width justify-end"
v-model="msg.PageIndex"
color="primary"
:max="msg.pageCount"
:input="true"
/>
<q-pagination class="full-width justify-end" v-model="msg.PageIndex" color="primary" :max="msg.pageCount" :input="true" />
</template>
<template v-slot:body-cell-Sys_CustomerName="props">
<q-td :props="props">
<div class="row" style="width:200px;">
<div class="row" style="width: 200px">
<q-avatar size="50" color="grey-4" class="text-white q-mr-md" rounded>
{{props.row.CustomerName[0]}}
{{ props.row.CustomerName[0] }}
</q-avatar>
<div>
<div class="f16 text-accent cursor-pointer">{{props.row.CustomerName}}</div>
<div class="f16 text-accent cursor-pointer">{{ props.row.CustomerName }}</div>
<div class="text-grey-4">
<i class="iconfont icon-wechat cursor-pointer" style="font-size:12px;"></i>
<i class="iconfont icon-wechat cursor-pointer" style="font-size: 12px"></i>
待添加
</div>
</div>
......@@ -95,17 +31,17 @@
</q-td>
</template>
<template v-for="x in data.allColumns.filter(x=>x.IsCustom>0)" :key="x.value" v-slot:[`body-cell-${x.value}`]="props">
<q-td auto-width :props="props">
{{props.row.CustomFiledList.find(y=>y.Name==x.name).ShowValue}}
<template v-for="x in data.allColumns.filter(x => x.IsCustom > 0)" :key="x.value" v-slot:[`body-cell-${x.value}`]="props">
<q-td auto-width :props="props">
{{ props.row.CustomFiledList.find(y => y.Name == x.name).ShowValue }}
</q-td>
</template>
<template v-slot:body-cell-sys_setting="props">
<q-td :props="props" style="background:rgba(0,0,0,0)"></q-td>
<q-td :props="props" style="background: rgba(0, 0, 0, 0)"></q-td>
</template>
<template v-slot:header-cell-sys_setting="props">
<q-th class="mysetting" :props="props">
<i class="iconfont icon-tiaojieqi cursor-pointer" style="font-size:20px;">
<i class="iconfont icon-tiaojieqi cursor-pointer" style="font-size: 20px">
<q-popup-proxy>
<visible-columns v-model="data.showColumns" :allCol="data.allColumns"></visible-columns>
</q-popup-proxy>
......@@ -117,28 +53,34 @@
</q-card>
</div>
</template>
<script lang='ts'>
<script lang="ts">
import { toRefs, defineComponent, onMounted } from 'vue'
import ClueModule from '@/module/customer/clueModule'
import visibleColumns from '@/components/common/visibleColumns.vue'
import ClueHead from '@/components/customer/clueHead.vue'
import useMetaModule from '@/module/meta/metaModule'
let { setTitle } = useMetaModule()
setTitle('线索管理')
export default defineComponent({
components: { visibleColumns, ClueHead },
setup() {
let {
useTab, getCluerList, msg, data, SeletObj
} = ClueModule()
let { useTab, getCluerList, msg, data, SeletObj,reloadListHandler } = ClueModule()
let [tab] = useTab()
onMounted(() => {
getCluerList()
})
return {
tab, msg, getCluerList, data, ...toRefs(SeletObj)
tab,
msg,
getCluerList,
data,
reloadListHandler,
...toRefs(SeletObj)
}
}
})
</script>
<style lang="scss">
.clue .q-field__before {
......@@ -152,11 +94,11 @@ export default defineComponent({
border: none;
overflow: hidden;
}
.clue .sticky-tow-column-table th:nth-child(2),
.clue .sticky-tow-column-table td:nth-child(2){
left:72px;
.clue .sticky-tow-column-table th:nth-child(2),
.clue .sticky-tow-column-table td:nth-child(2) {
left: 72px;
}
.clue .mysetting{
.clue .mysetting {
padding: 7px 6px;
}
</style>
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