临时提交

package.json

@@ -25,7 +25,7 @@
     "quasar": "^2.0.0",
     "quasar-tiptap-branch": "^1.8.1",
     "vue-i18n": "^9.0.0",
-    "vue-inline-svg": "^2.1.0",
+    "vue-inline-svg": "^3.1.0",
     "vuedraggable": "^4.1.0",
     "vuex": "^4.0.1",
     "vuex-persistedstate": "^4.1.0"

quasar.conf.js

@@ -32,7 +32,7 @@ module.exports = configure(function (ctx) {
     boot: ['i18n', 'axios', 'dict', 'permission', 'globalcmp', 'antDesign'],
 
     // 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
     extras: [
@@ -100,7 +100,7 @@ module.exports = configure(function (ctx) {
     // https://v2.quasar.dev/quasar-cli/quasar-conf-js#Property%3A-framework
     framework: {
       config: {},
-
+      lang: 'zh-CN',
       // iconSet: 'material-icons', // Quasar icon set
       // lang: 'en-US', // Quasar language pack
 

src/@types/enumHelper.ts

@@ -31,3 +31,11 @@ export enum ScaleType {
   '51-100人' = 3,
   '100人以上' = 4
 }
+
+/**
+ * @description 是否为默认的字段
+ */
+export enum ColumnDefaultState{
+  'Yes' = 1,
+  'No' = 0
+}
\ No newline at end of file

src/App.vue

@@ -10,5 +10,6 @@ export default defineComponent({
 </script>
 <style lang="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>

src/assets/svg/diy/switch.svg

+<?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

+<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

+<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

+<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

+<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

+<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

@@ -39,7 +39,7 @@
 .Poppins
     font-family: 'Poppins'
 body
-    font-family: 'Poppins','Helvetica','sans-serif',pf
+    font-family: 'Poppins','Helvetica','sans-serif',pf !important
     color: var(--q-dark)
 .no-underline
     text-decoration: none !important
@@ -50,6 +50,9 @@ body
 .f12
     font-family: 'msl' !important
     font-size: 13px
+.f16
+    font-family: 'msl' !important
+    font-size: 16px
 .mycard
     box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075) !important
     border-radius: 0.475rem !important

src/css/svg.scss

+.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

+.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

@@ -42,8 +42,17 @@
       </div>
     </q-drawer>
 
-    <q-page-container style="background: #f3f6f9">
+    <q-page-container style="background: #f3f6f9" class="window-height">
+      <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-layout>
 </template>
@@ -160,6 +169,10 @@ export default defineComponent({
 })
 </script>
 <style>
+.layout{
+  min-height: 100vh !important;
+  overflow: hidden;
+}
 .layout .q-drawer {
   background: linear-gradient(180deg, #1c2658, #0f152e);
 }

src/module/customer/clueModule.ts

+import customerService from '@/api/customer'
 import { ref, reactive } from 'vue'
 import clueService, { ClueParams } from '@/api/clue'
-import dayjs from 'dayjs'
+import { ColumnDefaultState } from '@/@types/enumHelper'
 
 const ClueModule = () => {
   // 定义tab
@@ -30,7 +31,6 @@ const ClueModule = () => {
     selectWay: 0
   })
 
-  
   const msg = reactive<ClueParams>({
     ClueState: 1,
     PageIndex: 1,
@@ -53,59 +53,61 @@ const ClueModule = () => {
     OrderBy: 1, //排序
     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({
     columns: [
       {
-        name: 'CustomerName',
+        name: 'Id',
+        label: '编号',
+        field: 'Id',
+        align: 'left'
+      },
+      {
+        name: 'Sys_CustomerName',
         label: '客户',
-        field: 'CustomerName',
+        field: 'Sys_CustomerName',
         align: 'left'
       },
-      { name: 'StageName', align: 'center', field: 'StageName', label: '客户阶段' },
-      { 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' }
+      { name: 'CreateTime', label: '创建时间', field: 'CreateTime', align: 'left' }
     ],
+    showColumns: ['Sys_CustomerName', 'CreateTime'],
+    allColumns: [{ name: '创建时间', value: 'CreateTime', visible: true, OptionsList: [], Type: 0 }],
     selected: [],
     dataList: [],
     WayList: [],
     EmployeeList: [],
-    rowsPerPage: 0
+    rowsPerPage: 0,
+    colLoadingFinish: false
   })
-  //选择方式
-  const getSelectWay = () => {
-    msg.CorpName = ''
-    msg.WeChatName = ''
-    msg.CustomerMobile = ''
-    //1企业名称 2姓名 3备注名 4手机号
-    if (SeletObj.selectWay == 0) {
-      msg.CorpName = SeletObj.selectVal
-    }
-    if (SeletObj.selectWay == 1) {
-      msg.WeChatName = SeletObj.selectVal
-    }
-    if (SeletObj.selectWay == 2) {
-      msg.CustomerMobile = SeletObj.selectVal
+
+  customerService
+    .getCustomerFiledList({
+      Enable: 1
+    })
+    .then(r => {
+      const tempCol = r.data.Data
+      if (tempCol && tempCol.length > 0) {
+        console.log(tempCol)
+        tempCol.sort((x, y) => {
+          return x.Sort - y.Sort
+        })
+        tempCol.forEach(x => {
+          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 = () => {
     clueService.getCustomerClueList(msg).then(res => {
@@ -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

src/pages/customerManage/clue.vue

 <template>
-  <div class="q-pa-md clue">
-    <q-page padding style="background: #FFF;border-radius: 10px;">
+  <div class="q-pa-md clue full-height full-width">
+    <q-card class="column full-height full-width q-pa-md" flat style="background: #FFF;border-radius: 10px;">
       <q-tabs
         v-model="tab"
         dense
@@ -15,7 +15,8 @@
         <q-tab :name="3" label="无效线索" />
         <q-tab :name="4" label="已转客户" />
       </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-3">
             <q-input
@@ -53,14 +54,20 @@
             />
           </div>
         </div>
-      </div>
-      <div class="page-content q-mt-lg">
+      </div> -->
+      <div class="page-content q-mt-lg col full-width">
         <q-table
           :rows="data.dataList"
           :columns="data.columns"
-          class="my-sticky-header-column-table"
-          row-key="name"
+          :visible-columns="data.showColumns"
+          flat
+          class="sticky-tow-column-table full-height sticky-right-column-table"
+          row-key="Id"
+          no-data-label="暂无相关数据"
           selection="multiple"
+          v-if="data.colLoadingFinish"
+          separator="none" 
+          style="max-width: 100%;"
         >
           <template v-slot:bottom>
             <q-pagination
@@ -71,27 +78,63 @@
               :input="true"
             />
           </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>
       </div>
-    </q-page>
+    </q-card>
   </div>
 </template>
 <script lang='ts'>
 import { toRefs, defineComponent, onMounted } from 'vue'
 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({
+  components: { visibleColumns, ClueHead },
   setup() {
     let {
-      useTab, getCluerList, msg, data, TypeList, SeletObj, getSelectWay, dateRange, format, chooseDate
+      useTab, getCluerList, msg, data, SeletObj
     } = ClueModule()
-    let [tab, setTab] = useTab()
+    let [tab] = useTab()
     onMounted(() => {
       getCluerList()
     })
 
     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({
   border: none;
   overflow: hidden;
 }
+.clue .sticky-tow-column-table th:nth-child(2), 
+.clue .sticky-tow-column-table td:nth-child(2){
+  left:72px; 
+}
+.clue .mysetting{
+  padding: 7px 6px;
+}
 </style>

src/utils/tools.ts

@@ -29,3 +29,22 @@ export function isNaNModified(inputStr: string) {
   const numericRepr = parseFloat(inputStr)
   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