Commit 77822a16 authored by 罗超's avatar 罗超

完成组件封装

parent b6030ed5
......@@ -21,4 +21,6 @@ export default defineComponent({
.svg-icon-grey g [fill]
transition: fill 0.3s ease
fill: #ddd !important
.all-borders
border:1px solid #ddd
</style>
......@@ -5,8 +5,6 @@
import { HttpResponse } from '@/@types'
import Axios from './axios'
/**
* @interface loginParams -登录参数
* @property {string} grant_type -授权类型
......@@ -161,6 +159,15 @@ class CustomerService {
data
})
}
//获取客户线索下载模板地址
static async getLabelListByIds(ids: string): Promise<HttpResponse> {
const data = { ids }
return Axios('/QYWeChat/GetLabelListByIds', {
method: 'post',
responseType: 'json',
data
})
}
}
export {CutomerParams}
export { CutomerParams }
export default CustomerService
......@@ -59,6 +59,7 @@ export default {
columns: Array
},
setup(props, context) {
console.log(props.columns)
const queryMsg = reactive({
whereId: 0,
customResult: {
......
......@@ -6,7 +6,7 @@
<where-item :data="x" @change="changeDataHandler($event, i)"></where-item>
</div>
<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="selectList.length>0" @click="deleteSelect" />
<img src="@/assets/images/customer/delete.png" style="width: 20px" class="cursor-pointer q-mr-md" v-if="selectList.length>1" @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>
......
......@@ -30,7 +30,7 @@ export default {
)
if (model.value.Name) {
const temp = allCol.find(x => x.data.Id === model.value.Name)
const temp = allCol.find(x => x.data.Id === model.value.Name || (x.data.Name === model.value.Name && model.value.IsCustom != 1))
currentNode.value = temp ? temp : allCol[0]
console.log(currentNode)
} else {
......
......@@ -38,7 +38,7 @@ export default {
const initWhere = val => {
colData.nodeWhere = UseDirection.QueryDirectionByType(val.data.Type)
model.value.Name = val.data.Id
model.value.Name = val.IsCustom==1?val.data.Id:val.data.Name
model.value.Type = val.data.Type
model.value.StartValue = ''
model.value.EndValue = ''
......
......@@ -5,9 +5,27 @@
<div v-if="currentNode.data.Type == 3">
<q-select @update:model-value="radioModel.changeHandler" v-model="radioModel.model" map-options :options="radioModel.Option" :option-label="radioModel.label" :option-value="radioModel.val" filled dense></q-select>
</div>
<div v-if="currentNode.data.Type == 4">
<div v-if="currentNode.data.Type == 4 && currentNode.IsCustom == 1">
<q-select multiple @update:model-value="checkModel.changeHandler" v-model="checkModel.model" map-options :options="checkModel.Option" :option-label="checkModel.label" :option-value="checkModel.val" filled dense></q-select>
</div>
<div v-if="currentNode.data.Type == 4 && currentNode.IsCustom == 2" class="full-height" @click="checkModel.showLabelDialog()">
<div class="rounded-borders all-borders full-height row items-center q-pa-sm overflow-hidden cursor-pointer">
<div class="col" v-if="!checkModel.labelLoading">
<div class="flex full-height" v-if="checkModel.model && checkModel.model.length > 0">
<div class="full-height f12 text-dark rounded-borders bg-grey-2 q-px-sm q-mr-sm">{{ checkModel.model[0].Name }}</div>
<div class="full-height f12 text-dark rounded-borders bg-grey-2 q-px-sm" v-if="checkModel.model && checkModel.model.length > 1">+{{ checkModel.model.length - 1 }}</div>
</div>
<div class="full-height text-grey-5 f12" v-else>请选择标签</div>
</div>
<div class="col" v-else>
<q-inner-loading label="加载中..." class="f12"></q-inner-loading>
</div>
<div class="q-ml-sm" style="margin-bottom: -7px">
<svg-icon icon="Navigation/Angle-down.svg" color="svg-icon-grey" size="18" v-if="!checkModel.model || checkModel.model.length == 0"></svg-icon>
<svg-icon icon="Code/Error-circle.svg" color="svg-icon-grey" class="cursor-pointer" @click.stop="checkModel.clearLabelHandler" size="18" v-if="checkModel.model && checkModel.model.length > 0"></svg-icon>
</div>
</div>
</div>
<div v-if="currentNode.data.Type == 7">
<q-input v-model="model.StartValue" @update:model-value="integerModel.changeHandler" filled dense placeholder="请输入"></q-input>
</div>
......@@ -22,11 +40,15 @@
</q-popup-proxy>
</q-input>
</div>
<label-group v-model="checkModel.showDialog" ref="labelRef" :list="checkModel.model" @submit="checkModel.changeLabelHandler" v-if="currentNode.data.Type == 4 && currentNode.IsCustom == 2 && !checkModel.labelLoading"></label-group>
</template>
<script>
import { inject, reactive, watch, onMounted, ref } from 'vue'
import labelGroup from '../../customer/label-group'
import CustomerService from '@/api/customer'
export default {
components: { labelGroup },
props: {
/**
* 条件节点
......@@ -38,6 +60,8 @@ export default {
const currentNode = ref(props.node)
const labelRef = ref(null)
watch(
() => props.node,
val => {
......@@ -72,6 +96,8 @@ export default {
Option: [],
val: 'Id',
label: 'Name',
showDialog: false,
labelLoading: true,
changeHandler: val => {
let startValue = ''
val.forEach((x, i) => {
......@@ -82,6 +108,27 @@ export default {
})
model.value.StartValue = startValue
changeModelHandler()
},
changeLabelHandler: val => {
let startValue = ''
val.forEach((x, i) => {
startValue += x.Id
if (i < val.length - 1) {
startValue += ','
}
})
model.value.StartValue = startValue
checkModel.model = val
changeModelHandler()
},
clearLabelHandler: () => {
checkModel.model = []
model.value.StartValue = ''
labelRef.value.clearListHandler()
},
showLabelDialog: () => {
if (checkModel.labelLoading) return
checkModel.showDialog = true
}
})
......@@ -167,25 +214,41 @@ export default {
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
model.value.StartValue = node.data.OptionsList[0].Id.toString()
}
radioModel.Option = node.data.OptionsList
}
const initCheckModel = node => {
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)
}
})
if (model.value.StartValue) {
if (node.IsCustom != 2) {
const temp = model.value.StartValue.split(',')
checkModel.model = []
node.data.OptionsList.forEach(x => {
if (temp.indexOf(x.Id.toString()) != -1) {
checkModel.model.push(x)
}
})
checkModel.labelLoading = false
} else {
checkModel.model = model.Value ?? []
CustomerService.getLabelListByIds(model.value.StartValue).then(r => {
if (r.data && r.data.Data) {
checkModel.model = r.data.Data
}
checkModel.labelLoading = false
})
}
} else {
checkModel.model = [node.data.OptionsList[0]]
model.value.StartValue = checkModel.model.Id
if (node.IsCustom != 2) {
checkModel.model = [node.data.OptionsList[0]]
model.value.StartValue = checkModel.model.Id
} else {
checkModel.model = []
model.value.StartValue = ''
}
checkModel.labelLoading = false
}
checkModel.Option = node.data.OptionsList
}
......@@ -242,7 +305,7 @@ export default {
init(props.node)
})
return { model, currentNode, changeModelHandler, radioModel, checkModel, integerModel, dateModel, dateRangeModel, rangeRefs }
return { model, currentNode, labelRef, changeModelHandler, radioModel, checkModel, integerModel, dateModel, dateRangeModel, rangeRefs }
}
}
</script>
......
......@@ -6,7 +6,7 @@
<q-date :options="optionsFn" v-model="queryMsg.createDate" range @range-end="updateCreateRange"></q-date>
</q-popup-proxy>
</q-input>
<vt-custom-btn ref="vtBtn" :page-code="pageCode" :columns="columns" @empty-where="deleteWhereHandler(0)" @update-where="updateWhereHandler"></vt-custom-btn>
<vt-custom-btn v-if="allColumn && allColumn.length > 0" ref="vtBtn" :page-code="pageCode" :columns="allColumn" @empty-where="deleteWhereHandler(0)" @update-where="updateWhereHandler"></vt-custom-btn>
<q-btn class="q-ml-md q-px-md" color="dark" label="重置" dense outline @click="deleteWhereHandler(1)"></q-btn>
</div>
</template>
......@@ -16,7 +16,7 @@ import searchBox from '../common/searchBox.vue'
import { formatDateTime } from '@/utils/tools'
import vtCustomBtn from '../common/customWhere/vtCustomBtn.vue'
import { reactive, computed, ref } from 'vue'
import { GetLabelObject, GetChannelObject } from '@/utils/customColumn'
export default {
props: {
/**
......@@ -34,6 +34,12 @@ export default {
},
components: { searchBox, vtCustomBtn },
setup(props, context) {
const allColumn = ref(props.columns)
allColumn.value.splice(0,0,GetLabelObject())
//注意GetChannelObject是异步方法,插入自己需要的位置
GetChannelObject().then(r => {
allColumn.value.splice(1, 0, r)
})
const pageCode = ref('clue_custom')
const vtBtn = ref(null)
const queryMsg = reactive({
......@@ -116,7 +122,7 @@ export default {
pushRelaodHandler()
}
return { queryMsg, modelType, updateCreateRange, optionsFn,vtBtn, qDateProxy, pageCode, updateWhereHandler, deleteWhereHandler, reloadDataHandler }
return { queryMsg, modelType, allColumn, updateCreateRange, optionsFn, vtBtn, qDateProxy, pageCode, updateWhereHandler, deleteWhereHandler, reloadDataHandler }
}
}
</script>
......
......@@ -44,8 +44,8 @@
</div>
</q-card-section>
<q-card-actions align="right" class="bg-white">
<q-btn label="取消" flat color="grey-10" style="font-weight:400 !important" v-close-popup />
<q-btn label="确定" color="accent q-px-md" style="font-weight:400 !important" @click="determine" />
<q-btn label="取消" flat color="grey-10" dense style="font-weight:400 !important" v-close-popup />
<q-btn label="确定" color="primary" class="q-px-md" unelevated dense style="font-weight:400 !important" @click="determine" />
</q-card-actions>
</q-card>
......@@ -84,6 +84,7 @@
}
const determine = () => {//确定并返回数据
ctx.emit('submit', selectList.value)
goclose()
}
const getclose = (tag, index) => {
let Id = tag.Id
......@@ -115,20 +116,14 @@
})
}
const getLabelList = () => {
console.log("props.list:",props.list)
customerSetService.getLabelList({}).then((res) => {
if (res.data.Code == 1) {
LableList.value = res.data.Data
LableList.value.forEach(x => {
if (x.ChildList.length > 0) {
x.ChildList.forEach(j => {
j.chek = false;
for (let index = 0; index < props.list.length; index++) {
const element = props.list[index];
if (element.Id == j.Id) {
j.chek = true;
break
}
}
j.chek = props.list.findIndex(y=>y.Id==j.Id)!=-1;
})
}
})
......@@ -138,6 +133,14 @@
onMounted(() => {//进入页面就调用
getLabelList()
})
const clearListHandler=()=>{
selectList.value=[]
LableList.value.forEach(x=>{
x.ChildList.forEach(y=>y.chek=false)
})
}
return {
show,
goclose,
......@@ -146,7 +149,8 @@
getLabelList,
LableList,
changechek,
getclose
getclose,
clearListHandler
}
}
......
......@@ -196,7 +196,7 @@ const TextTypeValidateRule = (model: SelectModel): string => {
if (directModel && directModel.length > 0) {
const directItemModel = directModel[0].Childs.find(x => x.Id == model.Direction)
if (directItemModel) {
console.log(directItemModel,directModel)
console.log(directItemModel, directModel)
if (!directItemModel.IsNotValue && model.StartValue.trim() != '') {
return ''
} else if (directItemModel.IsNotValue) {
......@@ -275,7 +275,7 @@ const MappingAuto = (list: SelectModel[]): SelectModel[] => {
]
list.forEach(x => {
rule.forEach(y => {
if (y.mapping.indexOf(x.Type)!=-1) {
if (y.mapping.indexOf(x.Type) != -1) {
x.Type = y.type
}
})
......@@ -284,6 +284,8 @@ const MappingAuto = (list: SelectModel[]): SelectModel[] => {
return list
}
//#endregion
const UseDirection = {
......
......@@ -7,7 +7,7 @@
<q-tab :name="3" label="无效线索" />
<q-tab :name="4" label="已转客户" />
</q-tabs>
<clue-head :columns="data.allColumns" @reload-data="reloadListHandler"></clue-head>
<clue-head :columns="data.allColumns" @reload-data="reloadListHandler" v-if="data.allColumns.length>0"></clue-head>
<div class="page-content q-mt-lg col full-width">
<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%">
......
import customerService from '@/api/customer'
const GetLabelObject = (): any => {
return {
IsCustom: 2,
name: '标签',
value: 'diy_标签',
visible: false,
data: {
Id: 0,
Type: 4,
Name: '标签',
IsDefault: 0,
IsLock: 0,
IsSystem: 0,
OptionsList: [],
TypeName: '标签'
}
}
}
const GetChannelObject = async (): Promise<any> => {
let list: Array<any> = new Array<any>()
await customerService.getCustomStageList({}).then(r => {
if (r.data && r.data.Data) {
list = r.data.Data
}
})
return {
IsCustom: 3,
name: '客户阶段',
value: 'diy_客户阶段',
visible: false,
data: {
Id: 0,
Type: 3,
Name: '客户阶段',
IsDefault: 0,
IsLock: 0,
IsSystem: 0,
OptionsList: list,
TypeName: '客户阶段'
}
}
}
export { GetLabelObject, GetChannelObject }
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