Skip to content

H
horse
Commit 3e995e0d authored by 罗超's avatar 罗超
Browse files
Options

1

parent fd2cea4a
Hide whitespace changes
Inline Side-by-side
Showing with 986 additions and 997 deletions
package.json
View file @ 3e995e0d
...@@ -14,10 +14,9 @@ ...@@ -14,10 +14,9 @@
"@types/lockr": "^0.8.7", "@types/lockr": "^0.8.7",
"@types/lodash": "^4.14.175", "@types/lodash": "^4.14.175",
"@types/webpack-env": "^1.16.2", "@types/webpack-env": "^1.16.2",
"ant-design-vue": "^2.2.8",
"axios": "^0.21.1", "axios": "^0.21.1",
"core-js": "^3.6.5", "core-js": "^3.6.5",
"element-plus": "^1.2.0-beta.3", "dayjs": "^1.10.7",
"katex": "^0.13.18", "katex": "^0.13.18",
"lockr": "^0.9.0-beta.0", "lockr": "^0.9.0-beta.0",
"lodash": "^4.17.21", "lodash": "^4.17.21",
......
quasar.conf.js
View file @ 3e995e0d
...@@ -29,7 +29,7 @@ module.exports = configure(function (ctx) { ...@@ -29,7 +29,7 @@ module.exports = configure(function (ctx) {
// app boot file (/src/boot) // app boot file (/src/boot)
// --> boot files are part of "main.js" // --> boot files are part of "main.js"
// https://v2.quasar.dev/quasar-cli/boot-files // https://v2.quasar.dev/quasar-cli/boot-files
boot: ['i18n', 'axios', 'dict', 'permission', 'globalcmp', 'antDesign','naiveUI'], boot: ['i18n', 'axios', 'dict', 'permission', 'globalcmp','naiveUI'],
// https://v2.quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css // https://v2.quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css
css: ['app.scss','svg.scss'], css: ['app.scss','svg.scss'],
......
src/App.vue
View file @ 3e995e0d
...@@ -10,6 +10,6 @@ export default defineComponent({ ...@@ -10,6 +10,6 @@ export default defineComponent({
</script> </script>
<style lang="sass"> <style lang="sass">
@import url('./css/font.sass') @import url('./css/font.sass')
@import url('//at.alicdn.com/t/font_2930340_5n2w0eo4056.css') @import url('//at.alicdn.com/t/font_2930340_at4xv6vjdh.css')
@import url('./css/table.sass') @import url('./css/table.sass')
</style> </style>
src/boot/antDesign.ts deleted 100644 → 0
View file @ fd2cea4a
import { boot } from 'quasar/wrappers'
import Antd from 'ant-design-vue'
// import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import 'ant-design-vue/dist/antd.css'
export default boot(({ app }) => {
// Set Antd instance on app
app.use(Antd)
// app.use(ElementPlus)
})
src/boot/naiveUI.ts
View file @ 3e995e0d
import { boot } from 'quasar/wrappers' import { boot } from 'quasar/wrappers'
import naive from 'naive-ui' import naive from 'naive-ui'
export default boot(({ app }) => { export default boot(({ app }) => {
// Set naive instance on app // Set naive instance on app
app.use(naive) app.use(naive)
......
src/components/common/fileUpload.vue
View file @ 3e995e0d
...@@ -8,16 +8,16 @@ ...@@ -8,16 +8,16 @@
<q-input v-model="msg.Remark" maxlength="1000" type="textarea" placeholder="请填写跟进记录" /> <q-input v-model="msg.Remark" maxlength="1000" type="textarea" placeholder="请填写跟进记录" />
<div class="file_box"> <div class="file_box">
<div class="img_list"> <div class="img_list">
<div v-for="(e,i) in msg.ImageList" :key="i" class="img_box"> <div v-for="(e, i) in msg.ImageList" :key="i" class="img_box">
<img :src="e" class="img" /> <img :src="e" class="img" />
<q-icon name="cancel" color="primary" class="del_icon" @click="delImg(i)"/> <q-icon name="cancel" color="primary" class="del_icon" @click="delImg(i)" />
</div> </div>
</div> </div>
<div class="file_list"> <div class="file_list">
<div v-for="(e,i) in msg.FileList" :key="i" class="flex items-center file_box"> <div v-for="(e, i) in msg.FileList" :key="i" class="flex items-center file_box">
<div class="flex items-center"> <div class="flex items-center">
附件： 附件：
<span style="color:#333">{{ e.FileName }}</span> <span style="color: #333">{{ e.FileName }}</span>
({{ e.size }}) ({{ e.size }})
</div> </div>
<div class="del_btn" @click="delFile(i)">删除</div> <div class="del_btn" @click="delFile(i)">删除</div>
...@@ -25,40 +25,23 @@ ...@@ -25,40 +25,23 @@
</div> </div>
</div> </div>
<div class="file_Space"> <div class="file_Space">
<div style="display:flex;align-items:center;"> <div style="display: flex; align-items: center">
<div> <div>
<a-upload <n-upload accept="image/*" multiple :show-file-list="false" v-model:file-list="data.imageList"
accept="image/*" :custom-request="customUploadImg">
v-model:file-list="data.imageList" <i style="font-size: 25px; cursor: pointer" class="iconfont icon-picture"></i>
name="file" </n-upload>
:multiple="true"
:show-upload-list="false"
:customRequest="customUploadImg"
>
<i style="font-size:25px;cursor:pointer;" class="iconfont icon-picture"></i>
</a-upload>
</div> </div>
<div style="margin-left:8px;"> <div style="margin-left: 8px">
<a-upload <n-upload accept="image/*" multiple :show-file-list="false" v-model:file-list="data.fileList"
v-model:file-list="data.fileList" :custom-request="customUploadFile">
name="file" <i style="font-size: 20px; cursor: pointer" class="iconfont icon-paperclip"></i>
:multiple="true" </n-upload>
:show-upload-list="false"
:customRequest="customUploadFile"
>
<i style="font-size:20px;cursor:pointer;" class="iconfont icon-paperclip"></i>
</a-upload>
</div> </div>
</div> </div>
<div> <div>
<q-btn <q-btn color="myInput" text-color="#000" size="sm" @click="data.isShowEdit = false" label="取消" />
color="myInput" <q-btn color="primary" style="margin-left: 10px" size="sm" @click="save" label="确定" />
text-color="#000"
size="sm"
@click="data.isShowEdit = false"
label="取消"
/>
<q-btn color="primary" style="margin-left:10px;" size="sm" @click="save" label="确定" />
</div> </div>
</div> </div>
</div> </div>
...@@ -66,129 +49,145 @@ ...@@ -66,129 +49,145 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { import {
reactive, reactive,
inject inject
} from 'vue' } from 'vue'
import customer2 from '@/api/customer2' import customer2 from '@/api/customer2'
import massage from "@/utils/message" import massage from '@/utils/message'
import { UploadSelfFile } from '@/utils/upload' import {
interface dataParam { UploadSelfFile
[key: string]: any } from '@/utils/upload'
} interface dataParam {
export default { [key: string]: any
setup(props,ctx) { }
let msg = reactive<dataParam>({ export default {
setup(props, ctx) {
let msg = reactive < dataParam > ({
CustomerId: inject('CustomerId'), CustomerId: inject('CustomerId'),
Remark: "", Remark: '',
ImageList: [], ImageList: [],
FileList: [] FileList: []
}) })
const data = reactive<dataParam>({ const data = reactive < dataParam > ({
isShowEdit: false, isShowEdit: false,
fileList: [], fileList: [],
imageList: [] imageList: []
})
let customUploadImg = (file) => {
UploadSelfFile('/horse', file.file, (res) => {
msg.ImageList.push(res.FileUrl )
})
}
let customUploadFile = (file) => {
UploadSelfFile('/horse', file.file, (res) => {
msg.FileList.push({ FileName: res.FileName, FileUrl: res.FileUrl, size: res.Size })
})
}
const delImg=(i)=>{
msg.ImageList.splice(i,1)
}
const delFile=(i)=>{
msg.FileList.splice(i,1)
}
const save = () => {
customer2.setCustomerTripFollowUpInfo(msg).then((res)=>{
massage.successMsg(res.data.Message)
msg.Remark=""
msg.ImageList=[]
msg.FileList=[]
ctx.emit("success")
}) })
} let customUploadImg = file => {
console.log(82,file)
UploadSelfFile('/horse', file.file.file, res => {
msg.ImageList.push(res.FileUrl)
})
}
let customUploadFile = file => {
UploadSelfFile('/horse', file.file.file, res => {
msg.FileList.push({
FileName: res.FileName,
FileUrl: res.FileUrl,
size: res.Size
})
})
}
const delImg = i => {
msg.ImageList.splice(i, 1)
}
const delFile = i => {
msg.FileList.splice(i, 1)
}
const save = () => {
customer2.setCustomerTripFollowUpInfo(msg).then(res => {
massage.successMsg(res.data.Message)
msg.Remark = ''
msg.ImageList = []
msg.FileList = []
ctx.emit('success')
})
}
return { return {
msg, msg,
data, data,
customUploadImg, customUploadImg,
customUploadFile, customUploadFile,
delImg, delImg,
delFile, delFile,
UploadSelfFile, UploadSelfFile,
save save
}
} }
} }
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.editer_input { .editer_input {
padding: 5px 0; padding: 5px 0;
} }
.myInput { .myInput {
background-color: #f6f6f6 !important; background-color: #f6f6f6 !important;
} }
.file_box {
margin-top: 5px;
.img_list {
display: flex;
flex-wrap: wrap;
.img_box {
width: 40px;
height: 40px;
margin: 10px;
position: relative; .file_box {
.img { margin-top: 5px;
width: 100%;
height: 100%; .img_list {
overflow: hidden; display: flex;
object-fit: cover; flex-wrap: wrap;
}
.del_icon { .img_box {
font-size: 18px; width: 40px;
position: absolute; height: 40px;
top: 0; margin: 10px;
right: 0;
transform: translate(50%, -50%); position: relative;
.img {
width: 100%;
height: 100%;
overflow: hidden;
object-fit: cover;
}
.del_icon {
font-size: 18px;
position: absolute;
top: 0;
right: 0;
transform: translate(50%, -50%);
}
} }
} }
}
.file_list { .file_list {
.file_box { .file_box {
font-size: 14px; font-size: 14px;
color: #9696a6; color: #9696a6;
.del_btn {
margin-left: 10px; .del_btn {
padding-left: 5px; margin-left: 10px;
border-left: 1px solid var(--q-primary); padding-left: 5px;
color: var(--q-primary); border-left: 1px solid var(--q-primary);
cursor: pointer; color: var(--q-primary);
cursor: pointer;
}
} }
} }
} }
}
.file_Space {
display: flex;
justify-content: space-between;
margin-top: 10px;
align-items: center;
}
.q-field__control { .file_Space {
background-color: #f6f6f6 !important; display: flex;
} justify-content: space-between;
margin-top: 10px;
align-items: center;
}
.q-field__control {
background-color: #f6f6f6 !important;
}
.q-field--filled .q-field__control:hover:before {
opacity: 0;
}
.q-field--filled .q-field__control:hover:before {
opacity: 0;
}
</style> </style>
src/components/customer/request-group.vue
View file @ 3e995e0d
<style> <style>
.my-special-class { .my-special-class {
width: 200px; width: 200px;
margin-right: 6px; margin-right: 6px;
} }
.input_label { .input_label {
width: 200px; width: 200px;
height: 40px; height: 40px;
border-radius: 4px; border-radius: 4px;
...@@ -15,32 +15,32 @@ ...@@ -15,32 +15,32 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
cursor: pointer; cursor: pointer;
} }
.right_select { .right_select {
width: 40px; width: 40px;
position: absolute; position: absolute;
left: 0; left: 0;
top: 20px; top: 20px;
} }
.border_top { .border_top {
border: 1px solid #d7d7d7; border: 1px solid #d7d7d7;
width: 29px; width: 29px;
border-bottom: none; border-bottom: none;
border-right: none; border-right: none;
margin-left: 12px; margin-left: 12px;
} }
.border-bottom { .border-bottom {
border: 1px solid #d7d7d7; border: 1px solid #d7d7d7;
width: 29px; width: 29px;
border-top: none; border-top: none;
border-right: none; border-right: none;
margin-left: 12px; margin-left: 12px;
} }
.right_select .border_mid div { .right_select .border_mid div {
width: 23px; width: 23px;
height: 23px; height: 23px;
text-align: center; text-align: center;
...@@ -49,700 +49,643 @@ ...@@ -49,700 +49,643 @@
font-size: 12px; font-size: 12px;
cursor: pointer; cursor: pointer;
background: #d8d8d8; background: #d8d8d8;
} }
.right_select .border_mid .checked { .right_select .border_mid .checked {
background: #333 !important; background: #333 !important;
color: #fff !important; color: #fff !important;
} }
.tag-select-input { .tag-select-input {
padding: 4px 10px; padding: 4px 10px;
border-radius: 5px; border-radius: 5px;
background-color: #f6f6f6; background-color: #f6f6f6;
font-size: 14px; font-size: 14px;
} }
</style> </style>
<template> <template>
<div class="requestgroup"> <div class="requestgroup">
<div :style="{ 'position': 'relative', 'padding-left': addMsg.length > 1 ? '40px' : '0' }"> <div :style="{ position: 'relative', 'padding-left': addMsg.length > 1 ? '40px' : '0' }">
<div class="row" v-for="(x,y) in addMsg" :key="y" style="margin-bottom: 8px"> <div class="row" v-for="(x, y) in addMsg" :key="y" style="margin-bottom: 8px">
<!-- name --> <!-- name -->
<q-select <q-select outlined v-model="x.Id" :options="filedList" dense class="my-special-class" label="请选择客户信息"
outlined option-value="Id" option-label="Name" option-disable="disable" emit-value map-options
v-model="x.Id" @update:model-value="changeName($event, y)" />
:options="filedList" <!-- Direction -->
dense <q-select v-if="x.Type === 1 || x.Type === 2 || x.Type === 5 || x.Type == ''" outlined v-model="x.Direction"
class="my-special-class" :options="x.directionList" dense label="请选择" class="my-special-class" option-value="Id" option-label="Name"
label="请选择客户信息" emit-value map-options />
option-value="Id" <div class="cascader" v-if="x.Type == 3">
option-label="Name" <n-cascader v-model:value="birthday" clearable placeholder="请选择" check-strategy="child" multiple
option-disable="disable" style="width:200px" size="large" max-tag-count="responsive" :options="dateOptions" expand-trigger="hover"
emit-value @update:value="changeDate($event, y)" />
map-options </div>
@update:model-value="changeName($event, y)" <div v-if="x.Type == 4">
/> <n-config-provider :locale="zhCN" :date-locale="dateZhCN">
<!-- Direction --> <n-date-picker v-model:value="x.rangeArr" type="datetimerange" size="large" separator="至"
<q-select clearable @update:value="changeRange($event,y)"/>
v-if="x.Type === 1 || x.Type === 2 || x.Type === 5 || x.Type == ''" </n-config-provider>
outlined
v-model="x.Direction" </div>
:options="x.directionList" <!-- StartValue -->
dense <div v-if="x.Name == '标签' && (x.Direction == 1 || x.Direction == 2 || x.Direction == 3 || x.Direction == '')"
label="请选择" class="input_label" @click="showlabel(x, y)">
class="my-special-class" <div style="display: flex" v-if="lableList && lableList.length > 0">
option-value="Id" <div class="text-clamp-1 tag-select-input">{{ lableList[0].Name }}</div>
option-label="Name" <div v-if="lableList.length > 1" class="tag-select-input" style="margin-left: 5px">
emit-value {{ lableList.length - 1 }}+</div>
map-options </div>
/> </div>
<div class="cascader" v-if="x.Type == 3"> <div v-if="(x.Type === 1 || x.Type === 2 || x.Type === 5 || x.Type == '') && x.Name !== '标签'">
<a-cascader <div v-if="x.labelType == 3">
v-model:value="birthday" <q-select v-if="x.Direction == 1 || x.Direction == 2 || x.Direction == ''" outlined v-model="x.StartValue"
:options="dateOptions" :options="x.OptionsList" dense :multiple="x.labelType == 4" label="请选择" class="my-special-class"
placeholder="请选择" option-value="Id" option-label="Name" emit-value map-options />
expandTrigger="hover" </div>
size="large" <div v-else-if="x.labelType == 4">
@change="changeDate($event, y)" <q-select v-if="x.Direction == 1 || x.Direction == 2 || x.Direction == 3 || x.Direction == ''" outlined
/> v-model="x.StartValue" :options="x.OptionsList" dense :multiple="true" label="请选择"
</div> class="my-special-class" option-value="Id" option-label="Name" emit-value map-options />
<div v-if="x.Type == 4"> </div>
<a-range-picker <div v-else-if="x.labelType == 1 || x.labelType == 2 || x.labelType == 7">
style="width:auto" <q-input
v-model:value="x.rangeArr" v-if="x.Type == 1 && (x.Direction == 1 || x.Direction == 2 || x.Direction == 3 || x.Direction == '')"
size="large" outlined v-model="x.StartValue" label="请输入" dense />
:locale="locale" <q-input v-if="x.Type == 2 && (x.Direction == 1 || x.Direction == 2 || x.Direction == '')" outlined
format="YYYY/MM/DD HH:mm:ss" v-model="x.StartValue" label="请输入" dense />
showTime <q-input v-if="x.Type == 5 || x.Type == ''" outlined v-model="x.StartValue" label="请输入" dense />
@change="changeRange($event, y)" </div>
/> <div v-else>
</div> <q-input outlined label="请输入" dense />
<!-- StartValue --> </div>
<div </div>
v-if="x.Name == '标签' && (x.Direction == 1 || x.Direction == 2 || x.Direction == 3 || x.Direction == '')"
class="input_label"
@click="showlabel(x, y)"
>
<div style="display: flex;" v-if="lableList && lableList.length > 0">
<div class="text-clamp-1 tag-select-input">{{ lableList[0].Name }}</div>
<div
v-if="lableList.length > 1"
class="tag-select-input"
style="margin-left: 5px;"
>{{ lableList.length - 1 }}+</div>
</div>
</div>
<div
v-if="(x.Type === 1 || x.Type === 2 || x.Type === 5 || x.Type == '') && x.Name !== '标签'"
>
<div v-if="x.labelType == 3">
<q-select
v-if="x.Direction == 1 || x.Direction == 2 || x.Direction == ''"
outlined
v-model="x.StartValue"
:options="x.OptionsList"
dense
:multiple="x.labelType == 4"
label="请选择"
class="my-special-class"
option-value="Id"
option-label="Name"
emit-value
map-options
/>
</div>
<div v-else-if="x.labelType == 4">
<q-select
v-if="x.Direction == 1 || x.Direction == 2 || x.Direction == 3 || x.Direction == ''"
outlined
v-model="x.StartValue"
:options="x.OptionsList"
dense
:multiple="true"
label="请选择"
class="my-special-class"
option-value="Id"
option-label="Name"
emit-value
map-options
/>
</div>
<div v-else-if="x.labelType == 1 || x.labelType == 2 || x.labelType == 7">
<q-input
v-if="x.Type == 1 && (x.Direction == 1 || x.Direction == 2 || x.Direction == 3 || x.Direction == '')"
outlined
v-model="x.StartValue"
label="请输入"
dense
/>
<q-input
v-if="x.Type == 2 && (x.Direction == 1 || x.Direction == 2 || x.Direction == '')"
outlined
v-model="x.StartValue"
label="请输入"
dense
/>
<q-input
v-if="x.Type == 5 || x.Type == ''"
outlined
v-model="x.StartValue"
label="请输入"
dense
/>
</div>
<div v-else>
<q-input outlined label="请输入" dense />
</div>
</div>
<!-- 新增和删除 --> <!-- 新增和删除 -->
<div style="display: flex;align-items: center;"> <div style="display: flex; align-items: center">
<img <img src="../../assets/images/customer/delete.png" v-if="addMsg.length > 1"
src="../../assets/images/customer/delete.png" style="width: 20px; height: 20px; margin-left: 10px" @click="deleteadd(y)" />
v-if="addMsg.length > 1" <img src="../../assets/images/customer/add.png" v-if="addMsg.length == y + 1 && addMsg.length < 10"
style="width: 20px;height: 20px;margin-left: 10px;" style="width: 20px; height: 20px; margin-left: 10px" @click="addsList()" />
@click="deleteadd(y)" </div>
/> </div>
<img <div class="right_select" v-if="addMsg.length > 1">
src="../../assets/images/customer/add.png" <div class="border_top" :style="{ height: (addMsg.length * 48 - 8 - 46 - 40) / 2 + 'px' }"></div>
v-if="addMsg.length == y + 1 && addMsg.length < 10" <div class="border_mid">
style="width: 20px;height: 20px;margin-left: 10px;" <div class="and" :class="{ checked: addCondition == 1 }" @click="changeAddCondition(1)">且</div>
@click="addsList()" <div class="no" :class="{ checked: addCondition == 2 }" @click="changeAddCondition(2)">或</div>
/>
</div>
</div>
<div class="right_select" v-if="addMsg.length > 1">
<div
class="border_top"
:style="{ height: ((addMsg.length * 48 - 8 - 46 - 40) / 2) + 'px' }"
></div>
<div class="border_mid">
<div
class="and"
:class="{ 'checked': addCondition == 1 }"
@click="changeAddCondition(1)"
>且</div>
<div
class="no"
:class="{ 'checked': addCondition == 2 }"
@click="changeAddCondition(2)"
>或</div>
</div>
<div
class="border-bottom"
:style="{ height: ((addMsg.length * 48 - 8 - 46 - 40) / 2) + 'px' }"
></div>
</div>
</div> </div>
<labelgroup <div class="border-bottom" :style="{ height: (addMsg.length * 48 - 8 - 46 - 40) / 2 + 'px' }"></div>
v-if="isshowlabel" </div>
:list="lableList"
@close="isshowlabel = false"
@submit="getlabel"
></labelgroup>
</div> </div>
<labelgroup v-if="isshowlabel" :list="lableList" @close="isshowlabel = false" @submit="getlabel"></labelgroup>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { import {
defineComponent, defineComponent,
ref, ref,
watch, watch,
onMounted onMounted
} from 'vue' } from 'vue'
import customerService from '@/api/customer' import customerService from '@/api/customer'
import labelgroup from './label-group.vue' import labelgroup from './label-group.vue'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN'; import {
import { Notify } from 'quasar' Notify
interface params { } from 'quasar'
import {
zhCN,
dateZhCN
} from 'naive-ui'
interface params {
Name: number | string Name: number | string
IsCustom: number IsCustom: number
Type: number | string Type: number | string
labelType?: number | string labelType ? : number | string
Id?: number | string Id ? : number | string
Direction?: string | number Direction ? : string | number
StartValue?: string | Array<any> StartValue ? : string | Array < any >
EndValue?: string EndValue ? : string
disable?: boolean disable ? : boolean
directionList?: Array<any> directionList ? : Array < any >
OptionsList?: Array<any> OptionsList ? : Array < any >
isSelect?: boolean isSelect ? : boolean
rangeArr?: Array<any> rangeArr ? : Array < any > | null
} }
interface dateParams { interface dateParams {
value: string | number value: string | number
label: string label: string
children?: Array<dateParams> children ? : Array < dateParams >
} }
const format = "YYYY/MM/DD HH:mm:ss" const format = 'YYYY/MM/DD HH:mm:ss'
export default defineComponent({ export default defineComponent({
props: { props: {
addCondition: { addCondition: {
type: Number, type: Number,
default: 1 default: 1
}, },
defaultData: { defaultData: {
type: Array, type: Array,
default: () => [] default: () => []
} }
}, },
components: { components: {
labelgroup, labelgroup
}, },
setup(props, ctx) { setup(props, ctx) {
let birthday = ref([])//只有一个 let birthday = ref([]) //只有一个
let lableList = ref<Array<any>>([]) //标签的数组//只有一个 let lableList = ref < Array < any >> ([]) //标签的数组//只有一个
let filedList = ref<Array<params>>([]); //客户字段数组 let filedList = ref < Array < params >> ([]) //客户字段数组
let addMsg = ref<Array<any>>([]) //筛选数组 let addMsg = ref < Array < any >> ([]) //筛选数组
let isshowlabel = ref(false) //标签弹出显示 let isshowlabel = ref(false) //标签弹出显示
let selectindex = ref(0) //现在筛选数组 索引 let selectindex = ref(0) //现在筛选数组 索引
//日期数组
let dateOptions = ref<Array<dateParams>>([])
let year: any = new Date().getFullYear()
for (let i = 1; i <= 12; i++) {
let obj: dateParams = {
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: d < 10 ? '0' + d : d,
label: d + '号',
})
}
dateOptions.value.push(obj)
}
const directionList1 = [{
Id: 1,
Name: '包含所有'
}, {
Id: 2,
Name: '包含任意'
}, {
Id: 3,
Name: '不包含'
}, {
Id: 4,
Name: '为空'
}, {
Id: 5,
Name: '不为空'
},]
const directionList2 = [{
Id: 1,
Name: '等于'
}, {
Id: 2,
Name: '不等于'
}, {
Id: 3,
Name: '为空'
}, {
Id: 4,
Name: '不为空'
}, {
Id: 5,
Name: '模糊'
},]
const directionList5 = [{
Id: 1,
Name: '等于'
}, {
Id: 2,
Name: '大于'
}, {
Id: 3,
Name: '大于等于'
}, {
Id: 4,
Name: '小于'
}, {
Id: 5,
Name: '小于等于'
},]
const init = () => {
console.log('init', props.defaultData)
if (props.defaultData && props.defaultData.length > 0) {
addMsg.value = []
props.defaultData.map((e: any) => {
let find: any = filedList.value.find((_e) => {
return _e.Id == e.Id
})
if (find && find.OptionsList) {
e.OptionsList = find.OptionsList
}
switch (find.Type) {
case 1: {//单行文本
e.labelType = 1
e.directionList = directionList2
break;
}
case 2: {//多行文本
e.labelType = 2
e.directionList = directionList2
break;
}
case 3: {//单选
e.labelType = 3
e.directionList = directionList2
e.StartValue = Number(e.StartValue)
if (find.OptionsList) {
e.OptionsList = find.OptionsList
}
break;
}
case 4: {//多选
e.labelType = 4
if (e.Id == "标签") {
e.StartValue=''
} else {
if (e.StartValue) {
e.StartValue = e.StartValue.split(',').map(e => Number(e))
} else {
e.StartValue = []
}
}
e.directionList = directionList1 //日期数组
if (find.OptionsList) { let dateOptions = ref < Array < dateParams >> ([])
e.OptionsList = find.OptionsList let year: any = new Date().getFullYear()
} for (let i = 1; i <= 12; i++) {
break; let obj: dateParams = {
} value: i < 10 ? '0' + i : '' + i,
case 5: {//日期 label: i + '月',
e.labelType = 5 children: []
if (e.StartValue) {
birthday.value = e.StartValue.split('-')
} else {
birthday.value = []
}
console.log(5, e.StartValue)
break;
}
case 6: {//日期时间范围
e.labelType = 6
e.rangeArr = [e.StartValue, e.EndValue]
console.log(6, e.StartValue)
break;
}
case 7: {//数值
e.labelType = 7
e.directionList = directionList5
break;
}
}
addMsg.value.push(e)
})
} else {
addMsg.value = [{
Id: '标签',
Name: '标签',
Type: 1,
Direction: '',
StartValue: '',
EndValue: '',
IsCustom: 2,
directionList: directionList1
}]
}
} }
let changeAddCondition = (val) => { let day = new Date(year, i, 0).getDate()
ctx.emit('update:addCondition', val) for (let d = 1; d <= day; d++) {
obj.children?.push({
value: (i < 10 ? '0' + i : '' + i) + '-' + (d < 10 ? '0' + d : '' + d),
label: d + '号'
})
} }
const getCustomerFiledList = () => { dateOptions.value.push(obj)
customerService.getCustomerFiledList({ }
Enable: 1 const directionList1 = [{
}).then((res) => { Id: 1,
let data = res.data.Data Name: '包含所有'
filedList.value = data; },
filedList.value.forEach((x) => { // IsCustom 是否自定义字段 1是 2标签 3阶段 {
x.IsCustom = 1 Id: 2,
}) Name: '包含任意'
getCustomerStageList(); //获取客户阶段 },
}) {
} Id: 3,
const getCustomerStageList = () => { Name: '不包含'
customerService.getCustomerStageList({}).then(res => { },
let obj: params = { {
Id: '客户阶段', Id: 4,
Name: '客户阶段', Name: '为空'
Type: 3, },
IsCustom: 3, {
OptionsList: res.data.Data Id: 5,
} Name: '不为空'
filedList.value.unshift(obj)
let obj2: params = {
Id: '标签',
Name: '标签',
Type: 4,
IsCustom: 2
}
filedList.value.unshift(obj2)
console.log("标签", filedList.value)
})
}
const deleteadd = (index) => { //删除addMsg某一项
addMsg.value.splice(index, 1)
}
const addsList = () => {
let obj: params = {
Id: 0,
Name: '',
Type: '',
Direction: '',
StartValue: '',
EndValue: '',
IsCustom: 2,
directionList: directionList2
}
addMsg.value.push(obj)
}
const showlabel = (x, y) => {
selectindex.value = y;
isshowlabel.value = true
} }
const getlabel = (list) => { ]
isshowlabel.value = false; const directionList2 = [{
lableList.value = list Id: 1,
addMsg.value[selectindex.value].StartValue = list.map(e => e.Id).toString() Name: '等于'
},
{
Id: 2,
Name: '不等于'
},
{
Id: 3,
Name: '为空'
},
{
Id: 4,
Name: '不为空'
},
{
Id: 5,
Name: '模糊'
} }
//---------------------------------------------------------------------------- ]
// 禁用标签 const directionList5 = [{
let changeLabel = () => { Id: 1,
let find: any = addMsg.value.find((e) => { Name: '等于'
return e.Id == '标签' },
}) {
if (find) { Id: 2,
filedList.value.map((_e) => { Name: '大于'
if (_e.Id == '标签') { },
_e.disable = true {
} Id: 3,
}) Name: '大于等于'
} else { },
filedList.value.map((_e) => { {
if (_e.Id == '标签') { Id: 4,
_e.disable = false Name: '小于'
} },
}) {
} Id: 5,
//禁用生日 Name: '小于等于'
let find2: any = addMsg.value.find((e) => {
return e.Id == 17
})
console.log('生日2', find2)
if (find2) {
filedList.value.map((_e) => {
if (_e.Id == 17) {
_e.disable = true
}
})
} else {
filedList.value.map((_e) => {
if (_e.Id == 17) {
_e.disable = false
}
})
}
} }
]
//标签改变 const init = () => {
let changeName = (val: any, y: number) => { console.log('init', props.defaultData)
addMsg.value[y].StartValue = '' if (props.defaultData && props.defaultData.length > 0) {
addMsg.value[y].EndValue = '' addMsg.value = []
props.defaultData.map((e: any) => {
switch (val) { let find: any = filedList.value.find(_e => {
case "标签": { return _e.Id == e.Id
addMsg.value[y].IsCustom = 2
break;
}
case "客户阶段": {
addMsg.value[y].IsCustom = 3
break;
}
default: {
addMsg.value[y].IsCustom = 1
}
}
let find: any = filedList.value.find((e) => {
return e.Id == val
}) })
if (find) { if (find && find.OptionsList) {
addMsg.value[y].Name = find.Name e.OptionsList = find.OptionsList
} }
switch (find.Type) { switch (find.Type) {
case 1: {//单行文本 case 1: {
addMsg.value[y].labelType = 1 //单行文本
addMsg.value[y].directionList = directionList2 e.labelType = 1
addMsg.value[y].Type = 2 e.directionList = directionList2
break; break
} }
case 2: {//多行文本 case 2: {
addMsg.value[y].labelType = 2 //多行文本
addMsg.value[y].directionList = directionList2 e.labelType = 2
addMsg.value[y].Type = 2 e.directionList = directionList2
break; break
}
case 3: {
//单选
e.labelType = 3
e.directionList = directionList2
e.StartValue = Number(e.StartValue)
if (find.OptionsList) {
e.OptionsList = find.OptionsList
} }
case 3: {//多选 break
addMsg.value[y].labelType = 3 }
addMsg.value[y].directionList = directionList2 case 4: {
addMsg.value[y].Type = 2 //多选
if (find.OptionsList) { e.labelType = 4
addMsg.value[y].OptionsList = find.OptionsList if (e.Id == '标签') {
} e.StartValue = ''
break; } else {
} if (e.StartValue) {
case 4: {//多选 e.StartValue = e.StartValue.split(',').map(e => Number(e))
addMsg.value[y].labelType = 4 } else {
addMsg.value[y].StartValue = [] e.StartValue = []
addMsg.value[y].directionList = directionList1 }
addMsg.value[y].Type = 1
if (find.OptionsList) {
addMsg.value[y].OptionsList = find.OptionsList
}
break;
}
case 5: {//日期
addMsg.value[y].labelType = 5
addMsg.value[y].Type = 3
break;
} }
case 6: {//日期时间范围
addMsg.value[y].labelType = 6 e.directionList = directionList1
addMsg.value[y].Type = 4 if (find.OptionsList) {
addMsg.value[y].rangeArr = [] e.OptionsList = find.OptionsList
break;
} }
case 7: {//数值 break
addMsg.value[y].labelType = 7 }
addMsg.value[y].directionList = directionList5 case 5: {
addMsg.value[y].Type = 5 //日期
break; e.labelType = 5
if (e.StartValue) {
birthday.value = e.StartValue.split(',')
} else {
birthday.value = []
} }
console.log(5, e.StartValue)
break
}
case 6: {
//日期时间范围
e.labelType = 6
e.rangeArr = [Date.parse(e.StartValue), Date.parse(e.EndValue)]
console.log(6, e.StartValue)
break
}
case 7: {
//数值
e.labelType = 7
e.directionList = directionList5
break
}
} }
addMsg.value.push(e)
})
} else {
addMsg.value = [{
Id: '标签',
Name: '标签',
Type: 1,
Direction: '',
StartValue: '',
EndValue: '',
IsCustom: 2,
directionList: directionList1
}]
} }
let changeDate = (value, y) => { }
console.log(500, value, y) let changeAddCondition = val => {
addMsg.value[y].StartValue = value.join('-') ctx.emit('update:addCondition', val)
}
const getCustomerFiledList = () => {
customerService
.getCustomerFiledList({
Enable: 1
})
.then(res => {
let data = res.data.Data
filedList.value = data
filedList.value.forEach(x => {
// IsCustom 是否自定义字段 1是 2标签 3阶段
x.IsCustom = 1
})
getCustomerStageList() //获取客户阶段
})
}
const getCustomerStageList = () => {
customerService.getCustomerStageList({}).then(res => {
let obj: params = {
Id: '客户阶段',
Name: '客户阶段',
Type: 3,
IsCustom: 3,
OptionsList: res.data.Data
}
filedList.value.unshift(obj)
let obj2: params = {
Id: '标签',
Name: '标签',
Type: 4,
IsCustom: 2
}
filedList.value.unshift(obj2)
console.log('标签', filedList.value)
})
}
const deleteadd = index => {
//删除addMsg某一项
addMsg.value.splice(index, 1)
}
const addsList = () => {
let obj: params = {
Id: 0,
Name: '',
Type: '',
Direction: '',
StartValue: '',
EndValue: '',
IsCustom: 2,
directionList: directionList2
} }
let changeRange = (val, y) => { addMsg.value.push(obj)
let a = dayjs(val[0]._d).format(format) }
let b = dayjs(val[1]._d).format(format)
console.log(a, b) const showlabel = (x, y) => {
addMsg.value[y].StartValue = a selectindex.value = y
addMsg.value[y].EndValue = b isshowlabel.value = true
}
const getlabel = list => {
isshowlabel.value = false
lableList.value = list
addMsg.value[selectindex.value].StartValue = list.map(e => e.Id).toString()
}
//----------------------------------------------------------------------------
// 禁用标签
let changeLabel = () => {
let find: any = addMsg.value.find(e => {
return e.Id == '标签'
})
if (find) {
filedList.value.map(_e => {
if (_e.Id == '标签') {
_e.disable = true
}
})
} else {
filedList.value.map(_e => {
if (_e.Id == '标签') {
_e.disable = false
}
})
}
//禁用生日
let find2: any = addMsg.value.find(e => {
return e.Id == 17
})
console.log('生日2', find2)
if (find2) {
filedList.value.map(_e => {
if (_e.Id == 17) {
_e.disable = true
}
})
} else {
filedList.value.map(_e => {
if (_e.Id == 17) {
_e.disable = false
}
})
} }
const checkRule = (val: Array<params>) => { }
let flag = false
flag = val.every(e => {
if (e.Type == 1) {
if (e.Direction == 1 || e.Direction == 2 || e.Direction == 3) {
return !!e.Id && !!e.StartValue
} else {
return !!e.Id && e.Direction
}
} else if (e.Type == 2) { //标签改变
if (e.Direction == 1 || e.Direction == 2) { let changeName = (val: any, y: number) => {
return !!e.Id && !!e.StartValue addMsg.value[y].StartValue = ''
} else { addMsg.value[y].EndValue = ''
return e.Id && e.Direction
}
} else if (e.Type == 3) {
return e.Id && e.StartValue
} else if (e.Type == 4) {
return e.Id && e.StartValue && e.EndValue
} else {
return e.Id && e.Direction && e.StartValue
}
}) switch (val) {
if (!flag) { case '标签': {
Notify.create({ addMsg.value[y].IsCustom = 2
type: 'warning', break
position: 'top', }
message: '规则适用范围不可空' case '客户阶段': {
}) addMsg.value[y].IsCustom = 3
break
}
default: {
addMsg.value[y].IsCustom = 1
}
}
let find: any = filedList.value.find(e => {
return e.Id == val
})
if (find) {
addMsg.value[y].Name = find.Name
}
switch (find.Type) {
case 1: {
//单行文本
addMsg.value[y].labelType = 1
addMsg.value[y].directionList = directionList2
addMsg.value[y].Type = 2
break
}
case 2: {
//多行文本
addMsg.value[y].labelType = 2
addMsg.value[y].directionList = directionList2
addMsg.value[y].Type = 2
break
}
case 3: {
//多选
addMsg.value[y].labelType = 3
addMsg.value[y].directionList = directionList2
addMsg.value[y].Type = 2
if (find.OptionsList) {
addMsg.value[y].OptionsList = find.OptionsList
}
break
}
case 4: {
//多选
addMsg.value[y].labelType = 4
addMsg.value[y].StartValue = []
addMsg.value[y].directionList = directionList1
addMsg.value[y].Type = 1
if (find.OptionsList) {
addMsg.value[y].OptionsList = find.OptionsList
} }
return flag break
}
case 5: {
//日期
addMsg.value[y].labelType = 5
addMsg.value[y].Type = 3
break
}
case 6: {
//日期时间范围
addMsg.value[y].labelType = 6
addMsg.value[y].Type = 4
addMsg.value[y].rangeArr = null
break
}
case 7: {
//数值
addMsg.value[y].labelType = 7
addMsg.value[y].directionList = directionList5
addMsg.value[y].Type = 5
break
}
} }
watch(() => [...addMsg.value], (val) => { }
changeLabel() let changeDate = (value, y) => {
let newVal: Array<params> = [] addMsg.value[y].StartValue = value.toString();
val.map((e: params) => { }
let item: params = JSON.parse(JSON.stringify(e)) let changeRange = (val, y) => {
if (e.OptionsList) { const newVal=JSON.parse(JSON.stringify(val))
delete item.OptionsList const s= dayjs(newVal[0]).format(format)
} const e= dayjs(newVal[1]).format(format)
if (e.directionList) { console.log(570,val,s,e)
delete item.directionList addMsg.value[y].StartValue = s
} addMsg.value[y].EndValue = e
if (item.labelType === 4 && Array.isArray(item.StartValue)) { }
item.StartValue = item.StartValue.join(',') const checkRule = (val: Array < params > ) => {
} let flag = false
delete item.labelType flag = val.every(e => {
newVal.push(item) if (e.Type == 1) {
}) if (e.Direction == 1 || e.Direction == 2 || e.Direction == 3) {
console.log('change', newVal) return !!e.Id && !!e.StartValue
ctx.emit('change', newVal) } else {
}, { deep: true }) return !!e.Id && e.Direction
onMounted(() => { //进入页面就调用 }
setTimeout(() => { } else if (e.Type == 2) {
init() if (e.Direction == 1 || e.Direction == 2) {
}, 2000) return !!e.Id && !!e.StartValue
getCustomerFiledList(); //获取客户字段 } else {
return e.Id && e.Direction
}
} else if (e.Type == 3) {
return e.Id && e.StartValue
} else if (e.Type == 4) {
return e.Id && e.StartValue && e.EndValue
} else {
return e.Id && e.Direction && e.StartValue
}
}) })
return { if (!flag) {
birthday, Notify.create({
dateOptions, type: 'warning',
getCustomerFiledList, position: 'top',
filedList, message: '规则适用范围不可空'
addMsg, })
deleteadd, }
addsList, return flag
isshowlabel, }
selectindex, watch(
lableList, () => [...addMsg.value],
showlabel, val => {
getlabel, changeLabel()
changeName, let newVal: Array < params > = []
changeDate, val.map((e: params) => {
changeRange, let item: params = JSON.parse(JSON.stringify(e))
locale, if (e.OptionsList) {
changeAddCondition, delete item.OptionsList
checkRule }
if (e.directionList) {
delete item.directionList
}
delete item.labelType
newVal.push(item)
})
console.log('change', newVal)
ctx.emit('change', newVal)
}, {
deep: true
} }
)
onMounted(() => {
//进入页面就调用
setTimeout(() => {
init()
}, 2000)
getCustomerFiledList() //获取客户字段
})
return {
zhCN,
dateZhCN,
birthday,
dateOptions,
getCustomerFiledList,
filedList,
addMsg,
deleteadd,
addsList,
isshowlabel,
selectindex,
lableList,
showlabel,
getlabel,
changeName,
changeDate,
changeRange,
changeAddCondition,
checkRule
}
} }
})
})
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep .ant-cascader-picker { ::v-deep .ant-cascader-picker {
border-radius: 4px; border-radius: 4px;
border-color: rgb(0 0 0 / 24%); border-color: rgb(0 0 0 / 24%);
overflow: hidden; overflow: hidden;
} }
</style> </style>
<style> <style>
/*修改滚动条样式*/ /*修改滚动条样式*/
ul::-webkit-scrollbar { ul::-webkit-scrollbar {
width: 6px; width: 6px;
height: 10px; height: 10px;
/**/ /**/
} }
ul::-webkit-scrollbar-track {
ul::-webkit-scrollbar-track {
background: rgb(239, 239, 239); background: rgb(239, 239, 239);
border-radius: 3px; border-radius: 3px;
} }
ul::-webkit-scrollbar-thumb {
ul::-webkit-scrollbar-thumb {
background: #bfbfbf; background: #bfbfbf;
border-radius: 10px; border-radius: 10px;
} }
ul::-webkit-scrollbar-thumb:hover {
ul::-webkit-scrollbar-thumb:hover {
background: #333; background: #333;
} }
</style>
\ No newline at end of file </style>
src/pages/customer/components/CustomerOperation.vue
View file @ 3e995e0d
<template> <template>
<div class="q-mt-md q-pa-md CustomerOperation flex"> <div class="q-mt-md q-pa-md CustomerOperation flex">
<div class="customer-operation-category"> <div class="customer-operation-category">
<div v-for="item in leftList" :key="item.Id" :class="{ active: curItem == item.Id }" <div v-for="item in leftList" :key="item.Id" :class="{ active: curItem == item.Id }" class="customer-operation-category--item" @click="changeActive(item)">{{ item.Name }}</div>
class="customer-operation-category--item" @click="changeActive(item)">{{ item.Name }}</div>
</div> </div>
<div class="customer-operation-content"> <div class="customer-operation-content">
<div v-if="curItem == 1" class="row"> <div v-if="curItem == 1" class="row">
<div class="col-2 content-left">领取公海客户:</div> <div class="collaborator-title">领取公海客户:</div>
<div class="col-10"> <div class="col-10">
<div class="flex items-center"> <div class="flex items-center">
<q-toggle v-model="data.IsPublicAudit" :true-value="1" :false-value="2" /> <q-toggle v-model="data.IsPublicAudit" :true-value="1" :false-value="2" />
...@@ -14,7 +13,7 @@ ...@@ -14,7 +13,7 @@
</div> </div>
<div class="flex items-center"> <div class="flex items-center">
<q-toggle v-model="data.PublicGetDept" false-value="-1" />以下部门允许领取公海客户 <q-toggle v-model="data.PublicGetDept" false-value="-1" />以下部门允许领取公海客户
<q-btn color="primary" label="修改" size="xs" class="q-ml-lg" @click="checkedPublicGetDept" /> <q-btn color="primary" unelevated label="修改" size="xs" class="q-ml-lg" @click="checkedPublicGetDept" />
</div> </div>
<div> <div>
<div v-for="item in items" :key="item.id">{{ item }}</div> <div v-for="item in items" :key="item.id">{{ item }}</div>
...@@ -23,7 +22,7 @@ ...@@ -23,7 +22,7 @@
</div> </div>
<div v-if="curItem == 2"> <div v-if="curItem == 2">
<div class="row"> <div class="row">
<div class="col-2 content-left">可放弃客户:</div> <div class="collaborator-title">可放弃客户:</div>
<div class="col-10"> <div class="col-10">
<div class="q-gutter-sm"> <div class="q-gutter-sm">
<q-radio v-model="data.AbandonType" :val="1" label="全部客户" /> <q-radio v-model="data.AbandonType" :val="1" label="全部客户" />
...@@ -35,247 +34,329 @@ ...@@ -35,247 +34,329 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-2 content-left">可操作员工:</div> <div class="collaborator-title">可操作员工:</div>
<div class="col-10"> <div class="col-10">
<div class="flex items-center"> <div class="flex items-center">
<q-toggle v-model="data.AbandonDept" false-value="-1" />以下部门允许将客户放弃到公海 <q-toggle v-model="data.AbandonDept" false-value="-1" />以下部门允许将客户放弃到公海
<q-btn color="primary" label="修改" size="xs" class="q-ml-lg" @click="checkedPublicGetDept" /> <q-btn color="primary" label="修改" unelevated size="xs" class="q-ml-lg" @click="checkedPublicGetDept" />
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-2 content-left">放弃后审核:</div> <div class="collaborator-title">放弃后审核:</div>
<div class="col-10"> <div class="col-10">
<div class="flex items-center"> <div class="flex items-center"><q-toggle v-model="data.AbandonAudit" false-value="-1" />开启后，员工放弃客户时需要企微端设置的部门上级审批，审批同意后才可放弃。</div>
<q-toggle v-model="data.AbandonAudit" false-value="-1" />开启后，员工放弃客户时需要企微端设置的部门上级审批，审批同意后才可放弃。</div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-2 content-left" style="padding-top: 15px">放弃原因:</div> <div class="collaborator-title" style="padding-top: 15px">放弃原因:</div>
<div class="col-10"> <div class="col-10">
<draggable v-model="data.AbandonReasonList" tag="div" item-key="Id"> <draggable v-model="data.AbandonReasonList" tag="div" item-key="Id">
<template #item="{ element }"> <template #item="{ element }">
<div class="flex items-center"> <div class="flex items-center">
<i class="iconfont icon-drag" style="font-size: 20px; color: #777"></i> <i class="iconfont icon-drag" style="font-size: 20px; color: #777"></i>
<div class="AbandonReasonItem flex items-center">{{ element }}</div> <div class="AbandonReasonItem flex items-center">{{ element }}</div>
<n-popover trigger="hover">
<template #trigger>
<q-icon name="warning" />
</template>
<span>编辑</span>
</n-popover>
</div> </div>
</template> </template>
</draggable> </draggable>
<div class="flex items-center q-pl-sm"><q-btn color="primary" label="添加" unelevated class="q-ml-lg q-mr-md" />已设/可设上限：5/10</div>
</div> </div>
</div> </div>
</div> </div>
<div v-if="curItem == 3" class="row"> <div v-if="curItem == 3" class="row">
<div class="col-2 content-left">申请成为协作人：</div> <div class="collaborator-title">申请成为协作人：</div>
<div class="col-10"> <div class="col-10">
<div class="flex items-center"> <div class="flex items-center">
<q-toggle v-model="data.ApplyForTeamDept" :true-value="1" :false-value="0" />以下部门允许申请成为协作人 <q-toggle v-model="data.ApplyForTeamDept" :true-value="1" :false-value="0" />以下部门允许申请成为协作人
<q-btn color="primary" label="修改" size="xs" class="q-ml-lg" @click="checkedPublicGetDept" /> <q-btn color="primary" label="修改" unelevated size="xs" class="q-ml-lg" @click="checkedPublicGetDept" />
</div> </div>
<div> <div>
<div v-for="item in items" :key="item.id">{{ item }}</div> <div v-for="item in items" :key="item.id">{{ item }}</div>
</div> </div>
</div> </div>
</div> </div>
<div v-if="curItem == 4" class="row"> <div v-if="curItem == 4" class="row">
<div class="col-2 content-left">添加协作人：</div> <div class="collaborator-title">添加协作人：</div>
<div class="col-10"> <div class="col-10">
<div class="flex items-center"> <div class="flex items-center">
<q-toggle v-model="data.AddTeamDept" :true-value="1" :false-value="0" />以下部门允许申请成为协作人 <q-toggle v-model="data.AddTeamDept" :true-value="1" :false-value="0" />以下部门允许申请成为协作人
<q-btn color="primary" label="修改" size="xs" class="q-ml-lg" @click="checkedPublicGetDept" /> <q-btn color="primary" label="修改" unelevated size="xs" class="q-ml-lg" @click="checkedPublicGetDept" />
</div> </div>
<div> <div>
<div v-for="item in items" :key="item.id">{{ item }}</div> <div v-for="item in items" :key="item.id">{{ item }}</div>
</div> </div>
<div class="flex"> <div class="flex">
<q-checkbox v-model="data.AddTeamDept" label="协作人被移除后（若该协作人已添加客户为好友），自动创建新的客户" /> <q-checkbox v-model="data.AddTeamDept" label="协作人被移除后（若该协作人已添加客户为好友），自动创建新的客户" />
</div>
</div>
</div>
<div v-if="curItem == 5">
<div class="row">
<div class="collaborator-title">转移客户：</div>
<div class="col-10">
<div class="flex items-center">
<q-toggle v-model="data.ApplyForTeamDept" :true-value="1" :false-value="0" />
以下部门允许转移客户
<q-btn color="primary" label="修改" unelevated size="xs" class="q-ml-lg" @click="checkedPublicGetDept" />
</div>
</div>
</div>
<div class="row">
<div class="collaborator-title">转移范围：</div>
<div class="col-10">
<div class="flex items-center">
<q-toggle v-model="data.ApplyForTeamDept" :true-value="1" :false-value="0" />
转移客户时允许选择的范围
<q-btn color="primary" label="设置" unelevated size="xs" class="q-ml-lg" />
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="row" v-if="curItem == 6">
<div class="collaborator-title">删除客户跟进记录：</div>
<div class="col-10">
<div class="flex items-center">
<q-toggle v-model="data.ApplyForTeamDept" :true-value="1" :false-value="0" />
开启后，允许员工删除自己填写的客户跟进记录
</div>
<div class="flex items-center">
<q-toggle v-model="data.ApplyForTeamDept" :true-value="1" :false-value="0" />
开启后，仅允许添加跟进记录后
<q-input outlined v-model="data.text" dense type="number" :min="0" style="width: 100px; margin: 0 10px" />
分钟内删除
</div>
</div>
</div>
<div v-if="curItem == 7">
<div class="row">
<div class="collaborator-title">签到拜访限制：</div>
<div class="col-10">
<div class="flex items-center">
<q-toggle v-model="data.ApplyForTeamDept" :true-value="1" :false-value="0" />
开启后，仅企业客户允许签到拜访
</div>
</div>
</div>
<div class="row">
<div class="collaborator-title">签到拜访拍照：</div>
<div class="col-10">
<div class="flex items-center">
<q-toggle v-model="data.ApplyForTeamDept" :true-value="1" :false-value="0" />
开启后，签到拜访时必须拍照
</div>
</div>
</div>
</div>
<div v-if="curItem == 8">
<div class="row">
<div class="collaborator-title" style="min-width: 140px">创建企业时查重方式：</div>
<div class="col-10">
<div class="q-gutter-sm">
<q-radio v-model="data.AbandonType" :val="1" label="模糊查重" />
<q-radio v-model="data.AbandonType" :val="2" label="精准查重 " />
</div>
</div>
</div>
<div class="row">
<div class="collaborator-title" style="min-width: 140px">创建企业客户：</div>
<div class="col-10">
<div class="flex items-center">
<q-toggle v-model="data.ApplyForTeamDept" :true-value="1" :false-value="0" />
仅支持通过工商信息库来创建企业
</div>
</div>
</div>
</div>
<div v-if="curItem == 9">
<div class="row flex justify-end">
<q-btn color="primary" label="添加自定义字段" unelevated />
</div>
</div>
</div> </div>
<departmentStaff v-model="showDptDialog" :defaultArray="defaultDpt" nodeKey="newId" :showType="1" <departmentStaff v-model="showDptDialog" :defaultArray="defaultDpt" nodeKey="newId" :showType="1" labelKey="DeptName" childrenKey="ChildList" strategy="leaf" :treeData="DptDataTree" @select="getdpt" />
labelKey="DeptName" childrenKey="ChildList" strategy="leaf" :treeData="DptDataTree" @select="getdpt" />
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { import { ref, toRefs, reactive, defineComponent, onMounted } from 'vue'
ref, import customerService from '@/api/customer'
toRefs, // import customerService2 from '@/api/customer2'
reactive, import departmentStaff from '@/components/common/departmentStaff.vue'
defineComponent, import requestGroup from '@/components/customer/request-group.vue'
onMounted import draggable from 'vuedraggable'
} from 'vue' export default defineComponent({
import customerService from '@/api/customer' components: {
// import customerService2 from '@/api/customer2' departmentStaff,
import departmentStaff from '@/components/common/departmentStaff.vue' requestGroup,
import requestGroup from '@/components/customer/request-group.vue' draggable
import draggable from 'vuedraggable' },
export default defineComponent({ setup() {
components: { const leftList = ref([
departmentStaff, {
requestGroup, Id: 1,
draggable Name: '领取公海客户'
}, },
setup() { {
const leftList = ref([{ Id: 2,
Id: 1, Name: '放弃到公海'
Name: '领取公海客户' },
}, {
{ Id: 3,
Id: 2, Name: '申请成为协作人'
Name: '放弃到公海' },
}, {
{ Id: 4,
Id: 3, Name: '添加协作人'
Name: '申请成为协作人' },
}, {
{ Id: 5,
Id: 4, Name: '转移客户'
Name: '添加协作人' },
}, {
{ Id: 6,
Id: 5, Name: '删除客户跟进记录'
Name: '转移客户' },
}, {
{ Id: 7,
Id: 6, Name: '签到拜访设置'
Name: '删除客户跟进记录' },
}, {
{ Id: 8,
Id: 7, Name: '创建企业'
Name: '签到拜访设置' },
}, {
{ Id: 9,
Id: 8, Name: '写跟进'
Name: '创建企业'
},
{
Id: 9,
Name: '写跟进'
}
])
let curItem = ref(1)
let data = reactive({
data: {
IsPublicAudit: 1,
PublicGetDept: -1,
AbandonType: 1
},
showDptDialog: false,
defaultDpt: [],
DptDataTree: []
})
const changeActive = item => {
curItem.value = item.Id
}
const getConfig = () => {
customerService.getCustomerConfig({}).then(res => {
console.log('CONFIG', res.data.Data)
data.data = res.data.Data
})
}
const getDptTree = () => {
customerService.getDeptTree({}).then(res => {
console.log('DptDataTree', res.data.Data)
data.DptDataTree = res.data.Data
// 重组唯一id
if (data.DptDataTree.length == 0) return
data.DptDataTree.forEach((x: any) => {
x.newId = x.DataType + '-' + x.DeptId
if (x.ChildList && x.ChildList.length > 0) {
getChildList(x.ChildList)
}
})
})
} }
const getChildList = (ChildList: Array < any > ) => { ])
ChildList.forEach(x => { let curItem = ref(1)
let data = reactive({
data: {
IsPublicAudit: 1,
PublicGetDept: -1,
AbandonType: 1
},
showDptDialog: false,
defaultDpt: [],
DptDataTree: []
})
const changeActive = item => {
curItem.value = item.Id
}
const getConfig = () => {
customerService.getCustomerConfig({}).then(res => {
console.log('CONFIG', res.data.Data)
data.data = res.data.Data
})
}
const getDptTree = () => {
customerService.getDeptTree({}).then(res => {
console.log('DptDataTree', res.data.Data)
data.DptDataTree = res.data.Data
// 重组唯一id
if (data.DptDataTree.length == 0) return
data.DptDataTree.forEach((x: any) => {
x.newId = x.DataType + '-' + x.DeptId x.newId = x.DataType + '-' + x.DeptId
if (x.ChildList && x.ChildList.length > 0) { if (x.ChildList && x.ChildList.length > 0) {
getChildList(x.ChildList) getChildList(x.ChildList)
} }
}) })
}
const getdpt = val => {
console.log('dpt', val)
}
//领取公海客户
const checkedPublicGetDept = () => {
data.showDptDialog = true
}
const setCustomerConfig = () => {
customerService.setCustomerConfig(data.data).then(res => {
console.log('set', res.data.Data)
})
}
onMounted(() => {
getDptTree()
getConfig()
}) })
return {
leftList,
curItem,
changeActive,
...toRefs(data),
getdpt,
checkedPublicGetDept,
setCustomerConfig
}
} }
}) const getChildList = (ChildList: Array<any>) => {
ChildList.forEach(x => {
</script> x.newId = x.DataType + '-' + x.DeptId
<style lang="scss" scoped> if (x.ChildList && x.ChildList.length > 0) {
.CustomerOperation { getChildList(x.ChildList)
background-color: rgb(243, 246, 249); }
} })
.customer-operation-category {
margin-right: 10px;
width: 200px;
flex: none;
background-color: #fff;
border-radius: 8px;
padding: 15px 0;
overflow: auto;
.customer-operation-category--item {
padding: 15px 25px;
cursor: pointer;
font-weight: 600;
user-select: none;
color: #333;
font-size: 14px;
} }
const getdpt = val => {
.active { console.log('dpt', val)
background-color: #eaf0ff; }
color: #3470ff; //领取公海客户
const checkedPublicGetDept = () => {
data.showDptDialog = true
}
const setCustomerConfig = () => {
customerService.setCustomerConfig(data.data).then(res => {
console.log('set', res.data.Data)
})
}
onMounted(() => {
getDptTree()
getConfig()
})
return {
leftList,
curItem,
changeActive,
...toRefs(data),
getdpt,
checkedPublicGetDept,
setCustomerConfig
} }
} }
})
</script>
<style lang="scss" scoped>
.CustomerOperation {
background-color: rgb(243, 246, 249);
}
.customer-operation-content { .customer-operation-category {
background: #fff; margin-right: 10px;
flex: 1; width: 200px;
border-radius: 8px; flex: none;
padding: 25px; background-color: #fff;
overflow: auto; border-radius: 8px;
} padding: 15px 0;
overflow: auto;
.content-left { .customer-operation-category--item {
line-height: 40px; padding: 15px 25px;
cursor: pointer;
font-weight: 600; font-weight: 600;
white-space: nowrap; user-select: none;
color: #333;
font-size: 14px;
} }
.AbandonReasonItem { .active {
width: 453px; background-color: #eaf0ff;
height: 50px; color: #3470ff;
line-height: 50px;
padding-left: 22px;
background-color: #fff;
border-radius: 5px;
border: 1px solid #d7d7d7;
margin: 10px;
} }
}
.customer-operation-content {
background: #fff;
flex: 1;
border-radius: 8px;
padding: 25px;
overflow: auto;
}
.AbandonReasonItem {
width: 453px;
height: 50px;
line-height: 50px;
padding-left: 22px;
background-color: #fff;
border-radius: 5px;
border: 1px solid #d7d7d7;
margin: 10px;
}
.collaborator-title {
min-width: 80px;
line-height: 40px;
text-align: right;
margin-right: 10px;
font-weight: 600;
white-space: nowrap;
}
</style> </style>
src/pages/customerManage/customer.vue
View file @ 3e995e0d
...@@ -99,22 +99,10 @@ ...@@ -99,22 +99,10 @@
<q-input filled v-model="msg.Q_NotFollowUpDay" label="几天未跟进"></q-input> <q-input filled v-model="msg.Q_NotFollowUpDay" label="几天未跟进"></q-input>
</div> </div>
<div class="col-3"> <div class="col-3">
<!-- <selectTree
:treeData="data.EmployeeList"
:defaultArray="data.defaultArray"
nodeKey="newId"
:multiple="false"
labelKey="DeptName"
childrenKey="ChildList"
tipText="选择部门/人员"
@getChild="getChild"
></selectTree>-->
<n-cascader v-model:value="data.CascaderValue" clearable placeholder="选择部门/人员" check-strategy="all" <n-cascader v-model:value="data.CascaderValue" clearable placeholder="选择部门/人员" check-strategy="all"
value-field="newId" label-field="DeptName" size="large" :show-path="false" max-tag-count="responsive" value-field="newId" label-field="DeptName" size="large" :show-path="false" max-tag-count="responsive"
:options="data.EmployeeList" cascade children-field="ChildList" :options="data.EmployeeList" cascade children-field="ChildList"
@update:value="CascaderUpdateValue" /> @update:value="CascaderUpdateValue" />
<!-- <Cascader :options="data.EmployeeList" optionLabel="DeptName" optionValue="newId" optionChildren="ChildList"
label="选择部门/人员" :multiple="true" /> -->
</div> </div>
<div class="col-3"> <div class="col-3">
<q-btn color="primary" size="sm" label="导入" /> <q-btn color="primary" size="sm" label="导入" />
...@@ -160,14 +148,10 @@ ...@@ -160,14 +148,10 @@
onMounted onMounted
} from 'vue' } from 'vue'
import CustomerModule from '@/module/customer/customerModule' import CustomerModule from '@/module/customer/customerModule'
// import selectTree from '@/components/common/selectTree.vue'
import customRight from '@/components/common/customRight.vue' import customRight from '@/components/common/customRight.vue'
// import Cascader from "@/components/common/Cascader.vue"
export default defineComponent({ export default defineComponent({
components: { components: {
// selectTree,
customRight, customRight,
// Cascader
}, },
setup() { setup() {
let { let {
......
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