Skip to content

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

临时提交

parent 6c776c6f
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 862 additions and 10378 deletions
package-lock.json deleted 100644 → 0
View file @ 6c776c6f
This diff is collapsed.
package.json
View file @ ebbd42db
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
"quasar": "^2.0.0", "quasar": "^2.0.0",
"quasar-tiptap-branch": "^1.8.1", "quasar-tiptap-branch": "^1.8.1",
"vue-i18n": "^9.0.0", "vue-i18n": "^9.0.0",
"vue-inline-svg": "^2.1.0", "vue-inline-svg": "^3.1.0",
"vuedraggable": "^4.1.0", "vuedraggable": "^4.1.0",
"vuex": "^4.0.1", "vuex": "^4.0.1",
"vuex-persistedstate": "^4.1.0" "vuex-persistedstate": "^4.1.0"
......
quasar.conf.js
View file @ ebbd42db
...@@ -32,7 +32,7 @@ module.exports = configure(function (ctx) { ...@@ -32,7 +32,7 @@ module.exports = configure(function (ctx) {
boot: ['i18n', 'axios', 'dict', 'permission', 'globalcmp', 'antDesign'], boot: ['i18n', 'axios', 'dict', 'permission', 'globalcmp', 'antDesign'],
// 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'], css: ['app.scss','svg.scss'],
// https://github.com/quasarframework/quasar/tree/dev/extras // https://github.com/quasarframework/quasar/tree/dev/extras
extras: [ extras: [
...@@ -100,7 +100,7 @@ module.exports = configure(function (ctx) { ...@@ -100,7 +100,7 @@ module.exports = configure(function (ctx) {
// https://v2.quasar.dev/quasar-cli/quasar-conf-js#Property%3A-framework // https://v2.quasar.dev/quasar-cli/quasar-conf-js#Property%3A-framework
framework: { framework: {
config: {}, config: {},
lang: 'zh-CN',
// iconSet: 'material-icons', // Quasar icon set // iconSet: 'material-icons', // Quasar icon set
// lang: 'en-US', // Quasar language pack // lang: 'en-US', // Quasar language pack
......
src/@types/enumHelper.ts
View file @ ebbd42db
...@@ -31,3 +31,11 @@ export enum ScaleType { ...@@ -31,3 +31,11 @@ export enum ScaleType {
'51-100人' = 3, '51-100人' = 3,
'100人以上' = 4 '100人以上' = 4
} }
/**
* @description 是否为默认的字段
*/
export enum ColumnDefaultState{
'Yes' = 1,
'No' = 0
}
\ No newline at end of file
src/App.vue
View file @ ebbd42db
...@@ -10,5 +10,6 @@ export default defineComponent({ ...@@ -10,5 +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_cjbyphc00i6.css') @import url('//at.alicdn.com/t/font_2930340_5n2w0eo4056.css')
@import url('./css/table.sass')
</style> </style>
src/assets/svg/diy/switch.svg 0 → 100644
View file @ ebbd42db
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1637907429400" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19848" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M338 544h348c80.632 0 146 65.368 146 146s-65.368 146-146 146H338c-80.634 0-146-65.368-146-146s65.366-146 146-146z" fill="#2c2c2c" p-id="19849"></path><path d="M686 836H338c-80.504 0-146-65.496-146-146s65.496-146 146-146h348c80.504 0 146 65.496 146 146s-65.496 146-146 146zM338 604c-47.42 0-86 38.58-86 86s38.58 86 86 86h348c47.42 0 86-38.58 86-86s-38.58-86-86-86H338z" fill="#2c2c2c" p-id="19850"></path><path d="M338 196h348c80.632 0 146 65.366 146 146s-65.368 146-146 146H338c-80.634 0-146-65.366-146-146s65.366-146 146-146z" fill="#2c2c2c" p-id="19851"></path><path d="M686 488H338c-80.504 0-146-65.496-146-146s65.496-146 146-146h348c80.504 0 146 65.496 146 146s-65.496 146-146 146zM338 256c-47.42 0-86 38.58-86 86s38.58 86 86 86h348c47.42 0 86-38.58 86-86s-38.58-86-86-86H338z" fill="#2c2c2c" p-id="19852"></path><path d="M354 690m-66 0a66 66 0 1 0 132 0 66 66 0 1 0-132 0Z" fill="#2c2c2c" p-id="19853"></path><path d="M354 756C317.608 756 288 726.392 288 690S317.608 624 354 624s66 29.608 66 66-29.608 66-66 66z m0-92c-14.336 0-26 11.664-26 26s11.664 26 26 26 26-11.664 26-26-11.664-26-26-26z" fill="#2c2c2c" p-id="19854"></path><path d="M670 342m-66 0a66 66 0 1 0 132 0 66 66 0 1 0-132 0Z" fill="#2c2c2c" p-id="19855"></path></svg>
\ No newline at end of file
src/components/common/customWhere/customWhere.vue 0 → 100644
View file @ ebbd42db
<template>
<q-card class="vt-customwhere-card column" flat v-if="allCol">
<q-card-section>
<div class="text-h6 pfb">{{colData.cardTitle}}</div>
<div class="f12 text-grey">当线索符合以下条件时</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>
</div>
<q-separator />
<q-card-section class="row">
<div class="col">
<q-btn dense outline color="dark" 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>
</div>
</q-card-section>
</q-card>
</template>
<script>
import { ref,computed,reactive } from 'vue'
import useScrollModule from '@/module/scrollbar/scrollModule'
import whereNode from './whereNode.vue'
export default {
components: { whereNode },
props: {
/**
* @description 当前表格列（只适用于自定义列）
*/
columns: Array,
/**
* @description 标题
*/
title:String,
/**
* @description 条件所属页面编号
*/
code:String
},
setup(props) {
const allCol = computed(() => {
return props.columns.filter(x=>x.value.indexOf('diy_')!=-1)
})
console.log(props.columns,allCol.value)
const colData=reactive({
cardTitle:props.title?ref(props.title):'自定义筛选',
scroll: useScrollModule(),
currentNode: null
})
return {allCol,colData}
}
}
</script>
<style lang="sass" scoped>
.vt-customwhere-card
width: 700px
height: 500px
</style>
src/components/common/customWhere/whereNode.vue 0 → 100644
View file @ ebbd42db
<template>
<div class="col-8 row q-pl-md">
<q-select v-if="colData.nodeWhere && colData.nodeWhere.length > 0" v-model="colData.where" :options="colData.nodeWhere" option-label="name" class="col-4" dense option-value="id" map-options filled></q-select>
</div>
</template>
<script>
import { reactive, watch, onMounted } from 'vue'
export default {
props: {
/**
* @description 传入Node对象
*/
node: Object
},
setup(props) {
const colData = reactive({
nodeWhere: [],
where: null,
whereValue:""
})
watch(
() => props.node,
val => {
initWhere(val.Type)
},
{ deep: true }
)
const wheres = reactive([
{
name: '包含所有',
id: 1,
mappingType: [3]
},
{
name: '包含所有',
id: 2,
mappingType: [3]
},
{
name: '不包含',
id: 3,
mappingType: [3]
},
{
name: '等于',
id: 4,
mappingType: [1, 2, 4, 7]
},
{
name: '不等于',
id: 5,
mappingType: [1, 2, 4, 7]
},
{
name: '为空',
id: 6,
mappingType: [1, 2, 3, 4]
},
{
name: '不为空',
id: 7,
mappingType: [1, 2, 3, 4]
},
{
name: '包含',
id: 8,
mappingType: [1, 2, 4]
},
{
name: '大于',
id: 9,
mappingType: [7]
},
{
name: '大于等于',
id: 10,
mappingType: [7]
},
{
name: '小于',
id: 11,
mappingType: [7]
},
{
name: '大于等于',
id: 12,
mappingType: [7]
}
])
const initWhere = type => {
colData.nodeWhere = wheres.filter(x => x.mappingType.indexOf(type) != -1)
if (colData.nodeWhere && colData.nodeWhere.length > 0) {
colData.where = colData.nodeWhere[0]
} else {
colData.where = null
}
}
onMounted(() => {
initWhere(props.node.Type)
})
return { colData }
}
}
</script>
<style></style>
src/components/common/searchBox.vue 0 → 100644
View file @ ebbd42db
<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>
</div>
</template>
<script>
import { computed, ref } from 'vue'
export default {
props: {
/**
* @description 绑定值
*/
modelValue: String,
/**
* @description 默认文本框宽度
*/
width: Number,
/**
* @description 文本框内容
*/
placeHolder: String,
},
setup(props, context) {
const boxWidth = computed(() => {
return { width: props.width ? props.width + 'px' : '75px' }
})
const keyWord = ref(props.modelValue)
const ph = ref(props.placeHolder)
if (!ph.value) {
ph.value = '搜索'
}
const keyFocus=ref(false)
const valueChange = () => {
context.emit('change', keyWord.value)
}
const inputValue = () => {
context.emit('update:modelValue', keyWord.value)
}
const focusHandler=()=>{
keyFocus.value=true
}
const blurHandler=()=>{
keyFocus.value=false
}
return { boxWidth, keyWord, valueChange, ph, inputValue,focusHandler,blurHandler,keyFocus }
}
}
</script>
<style>
.vt-search-box{
background: #FFF;
border-radius: 4px;
padding:5px;
position: absolute;
left:-5px;
right:0;
top:-5px;
width:unset !important;
z-index: 2;
}
</style>
src/components/common/visibleColumns.vue 0 → 100644
View file @ ebbd42db
<template>
<q-card flat class="visible-col-box column">
<div class="q-px-sm f16">自定义列</div>
<q-scroll-area :thumb-style="scrollStyle.thumbStyle" :bar-style="scrollStyle.barStyle" class="col q-pa-sm">
<div class="visible-col row items-center" v-for="(x, i) in myAllCol" :key="i">
<q-toggle v-model="x.visible" color="primary" @update:model-value="changeVisible(x)" />
<div class="q-ml-md f12">{{ x.name }}</div>
</div>
</q-scroll-area>
</q-card>
</template>
<script>
import { computed } from 'vue'
import useScrollModule from '@/module/scrollbar/scrollModule'
export default {
props: {
/**
* @description 大小，单位为PX
*/
modelValue: Array,
/**
* @description 图标名称，默认路径为“asset/svg”
*/
allCol: Array
},
setup(props, context) {
let { scrollStyle } = useScrollModule()
const myAllCol = computed(() => {
return props.allCol
})
const showCol = computed(() => {
console.log(props.modelValue)
return props.modelValue
})
const changeVisible = (e) => {
if (e.visible) {
showCol.value.push(e.value)
} else {
showCol.value.splice(showCol.value.indexOf(e.value), 1)
}
context.emit('update:modelValue', showCol.value)
console.log(showCol.value)
}
return { myAllCol, scrollStyle, changeVisible }
}
}
</script>
<style>
.visible-col-box {
width: 200px;
height: 350px;
padding-top: 14px;
}
.visible-col {
border-bottom: 1px solid #f1f1f1;
padding: 6px 0;
}
.visible-col:last-child {
border: none;
}
</style>
src/components/customer/clueHead.vue 0 → 100644
View file @ ebbd42db
<template>
<div class="row q-mx-md relative-position vt-header-box">
<search-box v-model="queryMsg.searchKey"></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-list style="width: 250px" dense>
<q-item clickable v-ripple>
<q-item-section>
<q-item-label>自定义筛选</q-item-label>
</q-item-section>
<q-item-section side>
<i class="iconfont icon-arrow-right f12"></i>
</q-item-section>
</q-item>
<q-separator />
<q-item-label header class="row">
<div class="col f12">常用筛选</div>
<div class="text-dark">
<i class="iconfont icon-setting f12 q-mr-md"></i>
<i class="iconfont icon-plus-circle f12"></i>
</div>
</q-item-label>
<q-item v-for="(x, i) in whereList" :key="i" @click="updateWhereHandler(x.Id)" :active="x.Id == queryMsg.whereId" active-class="text-primary" clickable v-ripple>
<q-item-section>
<q-item-label>{{ x.name }}</q-item-label>
</q-item-section>
</q-item>
<q-separator />
<q-item clickable v-ripple v-close-popup @click="deleteWhereHandler">
<q-item-section>
<q-item-label class="text-primary">清空筛选条件</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-popup-proxy>
</q-btn>
<q-btn class="q-ml-md q-px-md" color="primary" label="重置" dense outline></q-btn>
</div>
<q-dialog v-model="showColWhereCard">
<custom-where :columns="columns"></custom-where>
</q-dialog>
</template>
<script>
import searchBox from '../common/searchBox.vue'
import { formatDateTime } from '@/utils/tools'
import { reactive, computed, ref } from 'vue'
import CustomWhere from '../common/customWhere/customWhere.vue'
export default {
props: {
/**
* @description 模式：0为未选择表格内容模式，1为选中了表格内容模式
*/
model: {
type: Number,
default: 0 | 1
},
/**
* @description 列数组
*/
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)
const queryMsg = reactive({
searchKey: '',
createDate: {},
formatCreateDateRange: '',
whereId: 0
})
const modelType = computed(() => {
return props.model
})
const updateCreateRange = e => {
if (e.from && e.to) {
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}`
}
qDateProxy.value.hide()
console.log()
}
const nowDate = formatDateTime(new Date(), 'yyyy/MM/dd')
console.log(nowDate)
const optionsFn = date => {
return date >= '2020/01/01' && date <= nowDate
}
const qDateProxy = ref(null)
const updateWhereHandler = id => {
queryMsg.whereId = id
}
const deleteWhereHandler = () => {
queryMsg.whereId = 0
}
return { queryMsg, modelType, updateCreateRange, optionsFn, qDateProxy, whereList, updateWhereHandler, deleteWhereHandler, showColWhereCard }
}
}
</script>
<style>
.vt-header-box .q-field--outlined.q-field--readonly .q-field__control:before {
border-style: solid !important;
}
</style>
src/css/font.sass
View file @ ebbd42db
...@@ -39,7 +39,7 @@ ...@@ -39,7 +39,7 @@
.Poppins .Poppins
font-family: 'Poppins' font-family: 'Poppins'
body body
font-family: 'Poppins','Helvetica','sans-serif',pf font-family: 'Poppins','Helvetica','sans-serif',pf !important
color: var(--q-dark) color: var(--q-dark)
.no-underline .no-underline
text-decoration: none !important text-decoration: none !important
...@@ -50,6 +50,9 @@ body ...@@ -50,6 +50,9 @@ body
.f12 .f12
font-family: 'msl' !important font-family: 'msl' !important
font-size: 13px font-size: 13px
.f16
font-family: 'msl' !important
font-size: 16px
.mycard .mycard
box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075) !important box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075) !important
border-radius: 0.475rem !important border-radius: 0.475rem !important
src/css/svg.scss 0 → 100644
View file @ ebbd42db
.svg-icon.svg-icon-primary g [fill] {
transition: fill 0.3s ease;
fill: var(--q-color-primary) !important;
}
.svg-icon.svg-icon-secondary g [fill] {
transition: fill 0.3s ease;
fill: var(--q-color-secondary) !important;
}
.svg-icon.svg-icon-grey g [fill] {
transition: fill 0.3s ease;
fill: #ccc !important;
}
.svg-icon.svg-icon-warning g [fill] {
transition: fill 0.3s ease;
fill: var(--q-color-warning) !important;
}
.svg-icon.svg-icon-negative g [fill] {
transition: fill 0.3s ease;
fill: var(--q-color-negative) !important;
}
.svg-icon.svg-icon-accent g [fill] {
transition: fill 0.3s ease;
fill: var(--q-color-accent) !important;
}
.svg-icon.svg-icon-dark g [fill] {
transition: fill 0.3s ease;
fill: var(--q-color-dark) !important;
}
.svg-icon.svg-icon-orange g [fill] {
transition: fill 0.3s ease;
fill: rgb(255, 152, 0) !important;
}
.svg-icon.svg-icon-positive g [fill] {
transition: fill 0.3s ease;
fill: "#C9F7F5" !important;
}
.svg-icon.svg-icon-white g [fill] {
transition: fill 0.3s ease;
fill: white !important;
}
.svg-icon.svg-icon-g-p g [fill] {
transition: fill 0.3s ease;
fill: grey !important;
}
.svg-icon.svg-icon-g-p {
cursor: pointer;
}
.svg-icon.svg-icon-g-p:hover g [fill] {
transition: fill 0.3s ease;
fill: var(--q-color-primary) !important;
}
.svg-icon.svg-icon-b-p g [fill] {
transition: fill 0.3s ease;
fill: #000 !important;
}
.svg-icon.svg-icon-b-p {
cursor: pointer;
}
.svg-icon.svg-icon-b-p:hover g [fill] {
transition: fill 0.3s ease;
fill: var(--q-color-primary) !important;
}
.hover-primary:hover .svg-icon g [fill] {
transition: fill 0.3s ease;
fill: white !important;
}
.hover-primary:hover .q-avatar {
background-color: var(--q-color-primary) !important;
}
.hover-primary:hover {
color: var(--q-color-primary) !important;
}
.hover-d-p {
cursor: pointer;
color: var(--q-color-dark) !important;
}
.hover-d-p .svg-icon g [fill] {
transition: fill 0.3s ease;
fill: var(--q-color-dark) !important;
}
.hover-d-p:hover {
color: var(--q-color-primary) !important;
}
.hover-d-p:hover .svg-icon g [fill] {
transition: fill 0.3s ease;
fill: var(--q-color-primary) !important;
}
.hover-g-p {
cursor: pointer;
color: #ccc !important;
}
.hover-g-p .svg-icon g [fill] {
transition: fill 0.3s ease;
fill: #ccc !important;
}
.hover-g-p:hover {
color: var(--q-color-primary) !important;
}
.hover-g-p:hover .svg-icon g [fill] {
transition: fill 0.3s ease;
fill: var(--q-color-primary) !important;
}
\ No newline at end of file
src/css/table.sass 0 → 100644
View file @ ebbd42db
.sticky-column-table
max-width: 100%
thead
background: rgb(245, 246, 247)
thead tr:first-child
height: 40px
line-height: 14px
thead tr:first-child th
font-size: 12px
font-weight: 400
color: rgb(168, 168, 179)
thead tr:first-child th:first-child
background-color: rgb(245, 246, 247)
td:first-child
background-color: #fff
th:first-child,
td:first-child
position: sticky
left: 0
z-index: 1
box-shadow: rgba(0, 0, 0, 0.05) 2px 0px 0px
td.none-shadow
box-shadow: none
.sticky-tow-column-table
max-width: 100%
thead
background: rgb(245, 246, 247)
thead tr:first-child
height: 40px
line-height: 14px
thead tr:first-child th
font-size: 12px
font-weight: 400
color: rgb(168, 168, 179)
thead tr:first-child th:nth-child(-n+2)
background-color: rgb(245, 246, 247)
td:nth-child(-n+2)
background-color: #fff
th:nth-child(1),
td:nth-child(1)
position: sticky
left: 0
z-index: 1
th:nth-child(2),
td:nth-child(2)
position: sticky
z-index: 1
box-shadow: rgba(0, 0, 0, 0.05) 2px 0px 0px
td.none-shadow
box-shadow: none
.sticky-right-column-table
max-width: 100%
thead
background: rgb(245, 246, 247)
thead tr:first-child
height: 40px
line-height: 14px
thead tr:first-child th
font-size: 12px
font-weight: 400
color: rgb(168, 168, 179)
thead tr:first-child th:last-child
background-color: rgb(245, 246, 247)
td:last-child
background-color: #fff
th:last-child,
td:last-child
position: sticky
right: 0
z-index: 1
box-shadow: rgba(0, 0, 0, 0.05) -2px 0px 0px
.sticky-header-table
/* height or max-height is important */
.q-table__top,
.q-table__bottom,
thead tr:first-child th
/* bg color is important for th; just specify one */
background-color: #f5f6f7
thead tr th
position: sticky
z-index: 2 !important
thead tr th:first-child
z-index: 3 !important
thead tr:first-child th
top: 0
/* this is when the loading indicator appears */
&.q-table--loading thead tr:last-child th
/* height of all previous header rows */
top: 48px
.no-bottom-table
.q-table__bottom
display: none !important
.sticky-header-column-table
td:first-child
/* bg color is important for td; just specify one */
background-color: #c1f4cd !important
tr th
position: sticky
/* higher than z-index for td below */
z-index: 2
/* bg color is important; just specify one */
background: #fff
/* this will be the loading indicator */
thead tr:last-child th
/* height of all previous header rows */
top: 48px
/* highest z-index */
z-index: 3
thead tr:first-child th
top: 0
z-index: 1
tr:first-child th:first-child
/* highest z-index */
z-index: 3
td:first-child
z-index: 1
td:first-child, th:first-child
position: sticky
left: 0
\ No newline at end of file
src/layouts/MainLayout.vue
View file @ ebbd42db
...@@ -42,8 +42,17 @@ ...@@ -42,8 +42,17 @@
</div> </div>
</q-drawer> </q-drawer>
<q-page-container style="background: #f3f6f9"> <q-page-container style="background: #f3f6f9" class="window-height">
<router-view /> <q-scroll-area
:thumb-style="scrollStyle.thumbStyle"
:bar-style="scrollStyle.barStyle"
class="full-height full-width"
style="max-width: 100%;"
>
<div class="window-height full-width absolute">
<router-view />
</div>
</q-scroll-area>
</q-page-container> </q-page-container>
</q-layout> </q-layout>
</template> </template>
...@@ -160,6 +169,10 @@ export default defineComponent({ ...@@ -160,6 +169,10 @@ export default defineComponent({
}) })
</script> </script>
<style> <style>
.layout{
min-height: 100vh !important;
overflow: hidden;
}
.layout .q-drawer { .layout .q-drawer {
background: linear-gradient(180deg, #1c2658, #0f152e); background: linear-gradient(180deg, #1c2658, #0f152e);
} }
......
src/module/customer/clueModule.ts
View file @ ebbd42db
import customerService from '@/api/customer'
import { ref, reactive } from 'vue' import { ref, reactive } from 'vue'
import clueService, { ClueParams } from '@/api/clue' import clueService, { ClueParams } from '@/api/clue'
import dayjs from 'dayjs' import { ColumnDefaultState } from '@/@types/enumHelper'
const ClueModule = () => { const ClueModule = () => {
// 定义tab // 定义tab
...@@ -29,8 +30,7 @@ const ClueModule = () => { ...@@ -29,8 +30,7 @@ const ClueModule = () => {
selectVal: '', selectVal: '',
selectWay: 0 selectWay: 0
}) })
const msg = reactive<ClueParams>({ const msg = reactive<ClueParams>({
ClueState: 1, ClueState: 1,
PageIndex: 1, PageIndex: 1,
...@@ -53,59 +53,61 @@ const ClueModule = () => { ...@@ -53,59 +53,61 @@ const ClueModule = () => {
OrderBy: 1, //排序 OrderBy: 1, //排序
AddCondition: 0 //查询条件 AddCondition: 0 //查询条件
}) })
const dateRange = ref([])
const format = 'YYYY/MM/DD'
const chooseDate = (val) => {
const a = dayjs(val[0]._d).format(format)
const b = dayjs(val[1]._d).format(format)
console.log(a, b)
msg.CreateSTime = a
msg.CreateETime = b
getCluerList()
}
const data = reactive({ const data = reactive({
columns: [ columns: [
{ {
name: 'CustomerName', name: 'Id',
label: '编号',
field: 'Id',
align: 'left'
},
{
name: 'Sys_CustomerName',
label: '客户', label: '客户',
field: 'CustomerName', field: 'Sys_CustomerName',
align: 'left' align: 'left'
}, },
{ name: 'StageName', align: 'center', field: 'StageName', label: '客户阶段' }, { name: 'CreateTime', label: '创建时间', field: 'CreateTime', align: 'left' }
{ name: 'LableList', label: '客户标签', field: 'LableList', align: 'left' },
{ name: 'carbs', label: '内容标签', field: 'carbs', align: 'left' },
{ name: 'CreateTime', label: '创建时间', field: 'CreateTime', align: 'left' },
{ name: 'sodium', label: '负责人', field: 'sodium', align: 'left' },
{ name: 'LastFollowUpTime', label: '上次跟进', field: 'LastFollowUpTime', align: 'left' },
{ name: 'Source', label: '渠道活码来源', field: 'Source', align: 'left' },
// { name: 'num', label: '7日内客户回复消息数', align: 'left'},
// { name: 'num', label: '7日内员工发送消息数', align: 'left'},
{ name: 'FriendTime', label: '添加好友时间', field: 'FriendTime', align: 'left' },
{ name: 'CheckInNum', label: '签到拜访', field: 'CheckInNum', align: 'left' }
], ],
showColumns: ['Sys_CustomerName', 'CreateTime'],
allColumns: [{ name: '创建时间', value: 'CreateTime', visible: true, OptionsList: [], Type: 0 }],
selected: [], selected: [],
dataList: [], dataList: [],
WayList: [], WayList: [],
EmployeeList: [], EmployeeList: [],
rowsPerPage: 0 rowsPerPage: 0,
colLoadingFinish: false
}) })
//选择方式
const getSelectWay = () => { customerService
msg.CorpName = '' .getCustomerFiledList({
msg.WeChatName = '' Enable: 1
msg.CustomerMobile = '' })
//1企业名称 2姓名 3备注名 4手机号 .then(r => {
if (SeletObj.selectWay == 0) { const tempCol = r.data.Data
msg.CorpName = SeletObj.selectVal if (tempCol && tempCol.length > 0) {
} console.log(tempCol)
if (SeletObj.selectWay == 1) { tempCol.sort((x, y) => {
msg.WeChatName = SeletObj.selectVal return x.Sort - y.Sort
} })
if (SeletObj.selectWay == 2) { tempCol.forEach(x => {
msg.CustomerMobile = SeletObj.selectVal const tempRow = { name: `diy_${x.Name}`, label: x.Name, field: `diy_${x.Name}`, align: 'left' }
} data.columns.push(tempRow)
} if (x.IsDefault == ColumnDefaultState.Yes) {
data.showColumns.push(`diy_${x.Name}`)
}
data.allColumns.push({ name: x.Name, value: `diy_${x.Name}`, visible: x.IsDefault == ColumnDefaultState.Yes, OptionsList: x.OptionsList, Type: x.Type })
})
}
//#region 添加菜单权限
data.columns.push({ name: 'sys_setting', label: '自定义列', field: 'sys_setting', align: 'left' })
data.showColumns.push('sys_setting')
//#endregion
data.colLoadingFinish = true
})
//获取线索列表 //获取线索列表
const getCluerList = () => { const getCluerList = () => {
clueService.getCustomerClueList(msg).then(res => { clueService.getCustomerClueList(msg).then(res => {
...@@ -115,6 +117,6 @@ const ClueModule = () => { ...@@ -115,6 +117,6 @@ const ClueModule = () => {
}) })
} }
return { useTab, msg, data, getCluerList, TypeList, SeletObj, getSelectWay, dateRange,format, chooseDate } return { useTab, msg, data, getCluerList, TypeList, SeletObj }
} }
export default ClueModule export default ClueModule
src/pages/customerManage/clue.vue
View file @ ebbd42db
<template> <template>
<div class="q-pa-md clue"> <div class="q-pa-md clue full-height full-width">
<q-page padding style="background: #FFF;border-radius: 10px;"> <q-card class="column full-height full-width q-pa-md" flat style="background: #FFF;border-radius: 10px;">
<q-tabs <q-tabs
v-model="tab" v-model="tab"
dense dense
...@@ -15,7 +15,8 @@ ...@@ -15,7 +15,8 @@
<q-tab :name="3" label="无效线索" /> <q-tab :name="3" label="无效线索" />
<q-tab :name="4" label="已转客户" /> <q-tab :name="4" label="已转客户" />
</q-tabs> </q-tabs>
<div class="page-search row items-center"> <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 row wrap q-mr-lg q-col-gutter-md">
<div class="col-3"> <div class="col-3">
<q-input <q-input
...@@ -53,14 +54,20 @@ ...@@ -53,14 +54,20 @@
/> />
</div> </div>
</div> </div>
</div> </div> -->
<div class="page-content q-mt-lg"> <div class="page-content q-mt-lg col full-width">
<q-table <q-table
:rows="data.dataList" :rows="data.dataList"
:columns="data.columns" :columns="data.columns"
class="my-sticky-header-column-table" :visible-columns="data.showColumns"
row-key="name" flat
class="sticky-tow-column-table full-height sticky-right-column-table"
row-key="Id"
no-data-label="暂无相关数据"
selection="multiple" selection="multiple"
v-if="data.colLoadingFinish"
separator="none"
style="max-width: 100%;"
> >
<template v-slot:bottom> <template v-slot:bottom>
<q-pagination <q-pagination
...@@ -71,27 +78,63 @@ ...@@ -71,27 +78,63 @@
:input="true" :input="true"
/> />
</template> </template>
<template v-slot:body-cell-Sys_CustomerName="props">
<q-td :props="props">
<div class="row" style="width:200px;">
<q-avatar size="50" color="grey-4" class="text-white q-mr-md" rounded>
{{props.row.CustomerName[0]}}
</q-avatar>
<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>
待添加
</div>
</div>
</div>
</q-td>
</template>
<template v-for="x in data.allColumns.filter(x=>x.value.indexOf('diy_')!=-1)" :key="x.value" v-slot:[`body-cell-${x.value}`]="props">
<q-td auto-width :props="props">
{{props.row.CustomFiledList.find(y=>y.Name==x.value.replace('diy_','')).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>
</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;">
<q-popup-proxy>
<visible-columns v-model="data.showColumns" :allCol="data.allColumns"></visible-columns>
</q-popup-proxy>
</i>
</q-th>
</template>
</q-table> </q-table>
</div> </div>
</q-page> </q-card>
</div> </div>
</template> </template>
<script lang='ts'> <script lang='ts'>
import { toRefs, defineComponent, onMounted } from 'vue' import { toRefs, defineComponent, onMounted } from 'vue'
import ClueModule from '@/module/customer/clueModule' import ClueModule from '@/module/customer/clueModule'
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN'; import visibleColumns from '@/components/common/visibleColumns.vue'
import ClueHead from '@/components/customer/clueHead.vue'
export default defineComponent({ export default defineComponent({
components: { visibleColumns, ClueHead },
setup() { setup() {
let { let {
useTab, getCluerList, msg, data, TypeList, SeletObj, getSelectWay, dateRange, format, chooseDate useTab, getCluerList, msg, data, SeletObj
} = ClueModule() } = ClueModule()
let [tab, setTab] = useTab() let [tab] = useTab()
onMounted(() => { onMounted(() => {
getCluerList() getCluerList()
}) })
return { return {
locale, tab, setTab, msg, getCluerList, data, TypeList, ...toRefs(SeletObj), getSelectWay, dateRange, format, chooseDate tab, msg, getCluerList, data, ...toRefs(SeletObj)
} }
} }
}) })
...@@ -109,4 +152,11 @@ export default defineComponent({ ...@@ -109,4 +152,11 @@ export default defineComponent({
border: none; border: none;
overflow: hidden; overflow: hidden;
} }
.clue .sticky-tow-column-table th:nth-child(2),
.clue .sticky-tow-column-table td:nth-child(2){
left:72px;
}
.clue .mysetting{
padding: 7px 6px;
}
</style> </style>
src/utils/tools.ts
View file @ ebbd42db
...@@ -29,3 +29,22 @@ export function isNaNModified(inputStr: string) { ...@@ -29,3 +29,22 @@ export function isNaNModified(inputStr: string) {
const numericRepr = parseFloat(inputStr) const numericRepr = parseFloat(inputStr)
return isNaN(numericRepr) || numericRepr.toString().length != inputStr.length return isNaN(numericRepr) || numericRepr.toString().length != inputStr.length
} }
export function formatDateTime(date,fmt) {
const o = {
"M+": date.getMonth() + 1,
"d+": date.getDate(),
"H+": date.getHours(),
"m+": date.getMinutes(),
"s+": date.getSeconds(),
"q+": Math.floor((date.getMonth() + 3) / 3),
"S": date.getMilliseconds()
};
let year = date.getFullYear().toString();
year = year.length >= 4 ? year : '0000'.substr(0, 4 - year.length) + year;
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (year + "").substr(4 - RegExp.$1.length));
for (const k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}
\ 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