Commit fb6831e2 authored by Mac's avatar Mac

1

parent b7463bfe
<template> <template>
<div class="q-pa-md"> <div class="q-pa-md">
<q-page padding style="background: #FFF;border-radius: 10px;"> <q-page padding style="background: #FFF;border-radius: 10px;" >
<q-tabs <q-tabs
v-model="tab" v-model="tab"
dense dense
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
active-color="primary" active-color="primary"
indicator-color="primary" indicator-color="primary"
narrow-indicator narrow-indicator
@update:model-value='gettabs'
> >
<q-tab name="yewumoshi" label="业务模式" /> <q-tab name="yewumoshi" label="业务模式" />
<q-tab name="field" label="客户字段" /> <q-tab name="field" label="客户字段" />
...@@ -29,19 +30,36 @@ ...@@ -29,19 +30,36 @@
import customerField from './components/customerField.vue' import customerField from './components/customerField.vue'
import clueRule from './components/clueRule.vue' import clueRule from './components/clueRule.vue'
import customerPhase from './components/customerPhase.vue' import customerPhase from './components/customerPhase.vue'
import router from '@/router/index'
import { import {
defineComponent, defineComponent,
ref ref
} from 'vue' } from 'vue'
export default defineComponent({ export default defineComponent({
components: { components: {
customerField, customerField,
clueRule, clueRule,
customerPhase customerPhase
}, },
setup() { setup() {
let tab = ref<string>('phase')
if( router.currentRoute.value.query && router.currentRoute.value.query.type){
// let type = router.currentRoute.value.query.type;
tab.value = router.currentRoute.value.query.type as string
}
const gettabs = () => {
// console.log(tab.value)
}
// if(props && props.type){
// }
return { return {
tab: ref('phase') tab,
gettabs
} }
} }
......
...@@ -10,73 +10,113 @@ ...@@ -10,73 +10,113 @@
<div class="container"> <div class="container">
<div class="content-block"> <div class="content-block">
<div class="bold">名称</div> <div class="bold">名称</div>
<q-input clearable debounce filled maxlength="20" counter v-model="state.addMsg.FlowName" <q-input
style="width:600px" placeholder="名称" :rules="[val => !!val || '不能为空']" /> clearable
debounce
filled
maxlength="20"
counter
v-model="state.addMsg.FlowName"
style="width:600px"
placeholder="名称"
:rules="[val => !!val || '不能为空']"
/>
</div> </div>
<div class="content-block"> <div class="content-block">
<div class="bold">阶段适用范围</div> <div class="bold">阶段适用范围</div>
<!-- <q-input clearable debounce filled maxlength="20" counter v-model="state.addMsg.FlowName" style="width:600px" <!-- <q-input clearable debounce filled maxlength="20" counter v-model="state.addMsg.FlowName" style="width:600px"
placeholder="名称" :rules="[val => !!val || '不能为空']" /> --> placeholder="名称" :rules="[val => !!val || '不能为空']" />-->
</div> </div>
<div class="content-block"> <div class="content-block">
<div class="bold">选择使用阶段 <div class="bold">
选择使用阶段
<span style="font-size: 14px;font-weight: 300;color:rgb(133, 133, 152);"> <span style="font-size: 14px;font-weight: 300;color:rgb(133, 133, 152);">
若没有找到可选项,请前往 <span style="color:#3470ff;cursor: pointer;" @click="stageManagement"> 若没有找到可选项,请前往
"阶段管理"</span>进行</span> <span style="color:#3470ff;cursor: pointer;" @click="stageManagement">"阶段管理"</span>进行
</span>
</div> </div>
<div style="display:flex;align-items: center;"> <div style="display:flex;align-items: center;">
<div class="all-stage" :style="{height:state.getheight+'px'}"> <div class="all-stage" :style="{ height: state.getheight + 'px' }">
<p class="select-item-title">全部阶段</p> <p class="select-item-title">全部阶段</p>
<div class="" v-for="(x,y) in state.StageList" :key='y'> <div class v-for="(x,y) in state.StageList" :key="y">
<q-checkbox v-model="state.addMsg.UseStage" :val="x.Id" :label="x.Name" <q-checkbox
:disable="x.IsDefault==0?false:true" v-if="x.Type==1" v-model="state.addMsg.UseStage"
@update:model-value="getusestageName" /> :val="x.Id"
:label="x.Name"
:disable="x.IsDefault == 0 ? false : true"
v-if="x.Type == 1"
@update:model-value="getusestageName"
/>
</div> </div>
</div> </div>
<div class="right-arrow"><i class="el-icon-arrow-right"></i></div> <div class="right-arrow">
<div class="all-stage" :style="{height:state.getheight+'px'}"> <i class="el-icon-arrow-right"></i>
</div>
<div class="all-stage" :style="{ height: state.getheight + 'px' }">
<p class="select-item-title">已选阶段</p> <p class="select-item-title">已选阶段</p>
<div v-for="(x,y) in state.UseStageName" :key='y'> <div v-for="(x,y) in state.UseStageName" :key="y">
<div style="height:40px;line-height: 40px;" v-if="x.IsDefault==0"> <div style="height:40px;line-height: 40px;" v-if="x.IsDefault == 0">
<span>{{x.Name}}</span> <span >{{ x.Name }}</span>
</div> </div>
</div> </div>
<div style="height:40px;line-height: 40px;" v-for="(x,y) in state.UseStageName" :key='y'> <div
<span v-if="x.IsDefault==1" style="color: #ccc;">{{x.Name}}</span>
v-for="(x,y) in state.UseStageName"
:key="y"
>
<span v-if="x.IsDefault == 1" style="color: #ccc;height:40px;line-height: 40px;">{{ x.Name }}</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div v-if="state.StageList"> <div v-if="state.StageList">
<div v-for="(x,y) in state.StageList" :key="y" > <div v-for="(x,y) in state.StageList" :key="y">
<div class="content-block" v-if="x.Type==2"> <div class="content-block" v-if="x.Type == 2">
<div class="bold" v-if="x.Name=='已输单'">选择输单原因 <div class="bold" v-if="x.Name == '已输单'">
<span style="font-size: 14px;font-weight: 300;color:rgb(133, 133, 152);">若没有找到可选项,请前往 <span 选择输单原因
style="color:#3470ff;cursor: pointer;" @click="stageManagement"> <span
"阶段管理"</span>进行</span> style="font-size: 14px;font-weight: 300;color:rgb(133, 133, 152);"
>
若没有找到可选项,请前往
<span
style="color:#3470ff;cursor: pointer;"
@click="stageManagement"
>"阶段管理"</span>进行
</span>
</div> </div>
<div class="bold" v-if="x.Name=='无效'"> <div class="bold" v-if="x.Name == '无效'">
选择无效原因 选择无效原因
<span style="font-size: 14px;font-weight: 300;color:rgb(133, 133, 152);">若没有找到可选项,请前往 <span <span
style="color:#3470ff;cursor: pointer;" @click="stageManagement"> style="font-size: 14px;font-weight: 300;color:rgb(133, 133, 152);"
"阶段管理"</span>进行</span> >
若没有找到可选项,请前往
<span
style="color:#3470ff;cursor: pointer;"
@click="stageManagement"
>"阶段管理"</span>进行
</span>
</div> </div>
<div style="display:flex;align-items: center;flex-wrap: wrap;"> <div style="display:flex;align-items: center;flex-wrap: wrap;">
<div v-if='x.Name=="已输单"'> <div v-if="x.Name =='已输单'">
<q-checkbox v-model="state.addMsg.LoseCause" <q-checkbox
v-for="(item,index) in x.OptionsList" :key='index' :val="item.Id" :label="item.Name" /> v-model="state.addMsg.LoseCause"
v-for="(item,index) in x.OptionsList"
:key="index"
:val="item.Id"
:label="item.Name"
/>
</div> </div>
<div v-if='x.Name=="无效"'> <div v-if="x.Name =='无效'">
<q-checkbox v-model="state.addMsg.InvalidCause" <q-checkbox
v-for="(item,index) in x.OptionsList" :key='index' :val="item.Id" :label="item.Name" /> v-model="state.addMsg.InvalidCause"
v-for="(item,index) in x.OptionsList"
:key="index"
:val="item.Id"
:label="item.Name"
/>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
...@@ -85,17 +125,17 @@ ...@@ -85,17 +125,17 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, onMounted, reactive, } from 'vue' import { defineComponent, onMounted, reactive, } from 'vue'
import router from '@/router/index' import router from '@/router/index'
import customerService from '@/api/customer' import customerService from '@/api/customer'
import { useQuasar } from 'quasar' import { useQuasar } from 'quasar'
export default defineComponent({ export default defineComponent({
setup() { setup() {
const $q = useQuasar() const $q = useQuasar()
const state:any = reactive({ const state: any = reactive({
addMsg: { addMsg: {
Id: 0, Id: 0,
FlowName: '', FlowName: '',
...@@ -111,7 +151,12 @@ ...@@ -111,7 +151,12 @@
UseStageName: [], UseStageName: [],
}) })
const jumpBeforePage = () => { const jumpBeforePage = () => {
router.go(-1) router.push({
path: '/customerSetup',
query: {
type:'phase'
}
})
} }
const getList = () => { const getList = () => {
...@@ -168,7 +213,7 @@ ...@@ -168,7 +213,7 @@
} }
}) })
} }
const savemove=()=>{ const savemove = () => {
$q.notify({ $q.notify({
type: 'negative', type: 'negative',
message: '不能删除', message: '不能删除',
...@@ -189,11 +234,11 @@ ...@@ -189,11 +234,11 @@
} }
} }
}) })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.page { .page {
min-height: 100vh; min-height: 100vh;
background-color: #f4f4f6; background-color: #f4f4f6;
padding-bottom: 20px; padding-bottom: 20px;
...@@ -202,9 +247,9 @@ ...@@ -202,9 +247,9 @@
.mt20 { .mt20 {
margin-top: 90px; margin-top: 90px;
} }
} }
.navbar { .navbar {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -218,9 +263,9 @@ ...@@ -218,9 +263,9 @@
top: 0; top: 0;
right: 0; right: 0;
z-index: 9; z-index: 9;
} }
.container { .container {
margin: 0 auto; margin: 0 auto;
width: 1087px; width: 1087px;
...@@ -264,7 +309,6 @@ ...@@ -264,7 +309,6 @@
align-items: center; align-items: center;
margin-top: 24px; margin-top: 24px;
margin-left: 56px; margin-left: 56px;
;
margin-bottom: 30px; margin-bottom: 30px;
} }
...@@ -280,25 +324,23 @@ ...@@ -280,25 +324,23 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
}
.addPhase .all-stage {
}
.addPhase .all-stage {
width: 300px; width: 300px;
padding: 20px 45px; padding: 20px 45px;
border: 1px solid #d7d7d7; border: 1px solid #d7d7d7;
border-radius: 8px; border-radius: 8px;
min-height: 260px; min-height: 260px;
} }
.addPhase .select-item-title { .addPhase .select-item-title {
font-size: 14px; font-size: 14px;
font-weight: 800; font-weight: 800;
padding-bottom: 10px; padding-bottom: 10px;
} }
.addPhase .right-arrow { .addPhase .right-arrow {
width: 28px; width: 28px;
height: 28px; height: 28px;
background: #e7e7e7; background: #e7e7e7;
...@@ -309,12 +351,12 @@ ...@@ -309,12 +351,12 @@
color: #fff; color: #fff;
font-size: 16px; font-size: 16px;
margin: 0 30px; margin: 0 30px;
} }
.addPhase .user_lists { .addPhase .user_lists {
width: 100%; width: 100%;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: 20px; margin-top: 20px;
} }
</style> </style>
\ No newline at end of file
...@@ -5,105 +5,176 @@ ...@@ -5,105 +5,176 @@
<q-breadcrumbs-el label="返回" icon="navigate_before" @click="jumpBeforePage" /> <q-breadcrumbs-el label="返回" icon="navigate_before" @click="jumpBeforePage" />
<q-breadcrumbs-el label="阶段管理" /> <q-breadcrumbs-el label="阶段管理" />
</q-breadcrumbs> </q-breadcrumbs>
<q-btn color="primary" label="完成" @click="savemove" :loading="state.loading"/> <q-btn color="primary" label="完成" @click="savemove" :loading="state.loading" />
</div> </div>
<div class="container"> <div class="container">
<div class="content-block" > <div class="content-block">
<div class="bold" style="margin-bottom: 30px;">跟进阶段</div> <div class="bold" style="margin-bottom: 30px;">跟进阶段</div>
<draggable v-model="state.followupStage" item-key="Id"> <draggable v-model="state.followupStage" item-key="Id">
<template #item="{ element ,index}"> <template #item="{ element, index }">
<div style="display: flex;align-items: flex-start;"> <div style="display: flex;align-items: flex-start;">
<div style="width: 57px;margin-top: 5px;"> <div style="width: 57px;margin-top: 5px;">
<i class="iconfont icon-drag" style="font-size: 25px;color: #777;margin: 0 10px;"></i> <i
class="iconfont icon-drag"
style="font-size: 25px;color: #777;margin: 0 10px;"
></i>
</div> </div>
<q-input clearable debounce filled maxlength="10" counter v-model="element.Name" <q-input
style="width:500px" placeholder="名称" :rules="[val => !!val || '不能为空']" /> clearable
<q-btn flat size="md" icon="delete" color="negative" class="q-mr-xs" debounce
style="margin-left: 10px;margin-top: 10px;" label="" filled
@click="getStageDel(element.Id,index)" /> maxlength="10"
counter
v-model="element.Name"
style="width:500px"
placeholder="名称"
:rules="[val => !!val || '不能为空']"
/>
<q-btn
flat
size="md"
icon="delete"
color="negative"
class="q-mr-xs"
style="margin-left: 10px;margin-top: 10px;"
label
@click="getStageDel(element.Id, index)"
/>
</div> </div>
</template> </template>
</draggable> </draggable>
<div> <div>
<div v-for="(x,y) in state.followupStage_d" :key="y" style="display: flex;"> <div v-for="(x,y) in state.followupStage_d" :key="y" style="display: flex;">
<div style="width: 57px;height: 1px;"> <div style="width: 57px;height: 1px;"></div>
</div> <q-input
<q-input clearable debounce filled v-model="x.Name" style="width:500px" disable placeholder="名称" clearable
:rules="[val => !!val || '不能为空']" /> debounce
filled
v-model="x.Name"
style="width:500px"
disable
placeholder="名称"
:rules="[val => !!val || '不能为空']"
/>
</div> </div>
</div> </div>
<div class="btn"> <div class="btn">
<q-btn v-if="state.followupStage.length<30" color="accent" class="q-mr-md" label="添加" icon='add' <q-btn
@click="state.followupStage.push({Id: 0, v-if="state.followupStage.length < 30"
color="accent"
class="q-mr-md"
label="添加"
icon="add"
@click="state.followupStage.push({
Id: 0,
IsDefault: 0, IsDefault: 0,
Name: '', Name: '',
OptionsList: [], OptionsList: [],
Sort: 0, Sort: 0,
Type: 1})" style="width: 100px;" /> Type: 1
<span style="color:#858598"> 已设/可设上限:{{state.followupStage.length}}/30 </span> })"
style="width: 100px;"
/>
<span style="color:#858598">已设/可设上限:{{ state.followupStage.length }}/30</span>
</div> </div>
</div> </div>
<div class="content-block"> <div class="content-block">
<div class="bold">结束跟进</div> <div class="bold">结束跟进</div>
<div v-for="(x,y) in state.reasonList" :key="y"> <div v-for="(x,y) in state.reasonList" :key="y">
<ul style="margin-left: 30px;margin-top: 10px;" v-if="x.Type==2"> <ul style="margin-left: 30px;margin-top: 10px;" v-if="x.Type == 2">
<li> <li>
<q-input clearable filled debounce placeholder="名称" v-model="x.Name" style="width:500px" <q-input
disable /> clearable
filled
debounce
placeholder="名称"
v-model="x.Name"
style="width:500px"
disable
/>
</li> </li>
<li class="bold" style="margin: 10px 0 30px;" v-if="x.Name=='已输单'">输单原因</li> <li class="bold" style="margin: 10px 0 30px;" v-if="x.Name == '已输单'">输单原因</li>
<li class="bold" style="margin: 10px 0 30px;" v-if="x.Name=='无效'">无效原因</li> <li class="bold" style="margin: 10px 0 30px;" v-if="x.Name == '无效'">无效原因</li>
<draggable v-model="x.OptionsList" item-key="Id"> <draggable v-model="x.OptionsList" item-key="Id">
<template #item="{ element ,index}"> <template #item="{ element, index }">
<div style="display: flex;"> <div style="display: flex;">
<div style="width: 31px;"> <div style="width: 31px;">
<i class="iconfont icon-weiyi" <i
style="font-size: 14px;color: #777;margin: 0 10px;"></i> class="iconfont icon-weiyi"
style="font-size: 14px;color: #777;margin: 0 10px;"
></i>
</div> </div>
<q-input clearable debounce filled maxlength="10" counter v-model="element.Name" <q-input
style="width:500px" placeholder="名称" :rules="[val => !!val || '不能为空']" /> clearable
<q-btn flat size="sm" icon="delete" color="negative" class="q-mr-xs" debounce
style="margin-left: 10px;" label="" filled
@click="setCauseDel(y,index,x.Name,element.Id)" /> maxlength="10"
counter
v-model="element.Name"
style="width:500px"
placeholder="名称"
:rules="[val => !!val || '不能为空']"
/>
<q-btn
flat
size="sm"
icon="delete"
color="negative"
class="q-mr-xs"
style="margin-left: 10px;"
label
@click="setCauseDel(y, index, x.Name, element.Id)"
/>
</div> </div>
</template> </template>
</draggable> </draggable>
</ul> </ul>
<div class="btn" style="margin-left: 61px" v-if="x.Type==2"> <div class="btn" style="margin-left: 61px" v-if="x.Type == 2">
<q-btn v-if="x.OptionsList.length<30" color="accent" class="q-mr-md" label="添加" icon='add' <q-btn
@click="state.reasonList[y].OptionsList.push({Id:0,Name:'',disable:false})" v-if="x.OptionsList.length < 30"
style="width: 100px;" /> color="accent"
<span style="color:#858598"> 已设/可设上限:{{x.OptionsList.length}}/30 </span> class="q-mr-md"
label="添加"
icon="add"
@click="state.reasonList[y].OptionsList.push({ Id: 0, Name: '', disable: false })"
style="width: 100px;"
/>
<span style="color:#858598">已设/可设上限:{{ x.OptionsList.length }}/30</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, onMounted, reactive ,ref} from 'vue' import { defineComponent, onMounted, reactive, ref } from 'vue'
import router from '@/router/index' import router from '@/router/index'
import customerService from '@/api/customer' import customerService from '@/api/customer'
import draggable from "vuedraggable"; import draggable from "vuedraggable";
import { useQuasar } from 'quasar' import { useQuasar } from 'quasar'
export default defineComponent({ export default defineComponent({
components: { components: {
draggable draggable
}, },
setup() { setup() {
const $q = useQuasar() const $q = useQuasar()
const state:any = reactive({ const state: any = reactive({
addMsg: [], addMsg: [],
followupStage: [], followupStage: [],
followupStage_d: [], followupStage_d: [],
reasonList: [], reasonList: [],
loading:false loading: false
}) })
const jumpBeforePage = () => { const jumpBeforePage = () => {
router.go(-1) // router.go(-1)
router.push({
path: '/customerSetup',
query: {
type:'phase'
}
})
} }
const getList = () => { const getList = () => {
...@@ -217,7 +288,7 @@ ...@@ -217,7 +288,7 @@
var show = ref(false) var show = ref(false)
for (let i = 0; i < state.followupStage.length; i++) {//判断根据阶段的值填写没有 for (let i = 0; i < state.followupStage.length; i++) {//判断根据阶段的值填写没有
let x = state.followupStage[i] let x = state.followupStage[i]
if (x.Name == '' || x.Name==null) { if (x.Name == '' || x.Name == null) {
$q.notify({ $q.notify({
type: 'negative', type: 'negative',
message: '请填写跟进阶段列表选项值', message: '请填写跟进阶段列表选项值',
...@@ -238,7 +309,7 @@ ...@@ -238,7 +309,7 @@
for (let j = 0; j < x.OptionsList.length; j++) { for (let j = 0; j < x.OptionsList.length; j++) {
let z = x.OptionsList[j] let z = x.OptionsList[j]
if (z.Name == ''|| z.Name == null) { if (z.Name == '' || z.Name == null) {
$q.notify({ $q.notify({
type: 'negative', type: 'negative',
message: '请填写' + x.Name + '原因值', message: '请填写' + x.Name + '原因值',
...@@ -289,11 +360,11 @@ ...@@ -289,11 +360,11 @@
} }
} }
}) })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.page { .page {
/* height: 100vh; */ /* height: 100vh; */
background-color: #f4f4f6; background-color: #f4f4f6;
padding-bottom: 20px; padding-bottom: 20px;
...@@ -302,9 +373,9 @@ ...@@ -302,9 +373,9 @@
.mt20 { .mt20 {
margin-top: 90px; margin-top: 90px;
} }
} }
.navbar { .navbar {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -318,9 +389,9 @@ ...@@ -318,9 +389,9 @@
top: 0; top: 0;
right: 0; right: 0;
z-index: 9; z-index: 9;
} }
.container { .container {
margin: 0 auto; margin: 0 auto;
width: 1087px; width: 1087px;
...@@ -328,7 +399,7 @@ ...@@ -328,7 +399,7 @@
padding: 30px 20px; padding: 30px 20px;
border-radius: 8px; border-radius: 8px;
background-color: #fff; background-color: #fff;
margin-top:30px; margin-top: 30px;
.fission-title { .fission-title {
color: #000; color: #000;
...@@ -364,7 +435,6 @@ ...@@ -364,7 +435,6 @@
align-items: center; align-items: center;
margin-top: 24px; margin-top: 24px;
margin-left: 56px; margin-left: 56px;
;
margin-bottom: 30px; margin-bottom: 30px;
} }
...@@ -373,7 +443,5 @@ ...@@ -373,7 +443,5 @@
font-size: 14px; font-size: 14px;
color: #333; color: #333;
} }
}
}
</style> </style>
\ No newline at end of file
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