lshcomment 1.0.0

package/src/components/clueSolitTable/dialog.vue

@@ -0,0 +1,160 @@
+<template>
+  <el-dialog class="table-custom" title="报表个性化设置" :visible.sync="dialogVisible">
+    <el-checkbox v-model="selectAll" @change="handleToggle">全选</el-checkbox>
+    <el-checkbox-group v-model="groupList" @change="handleChange">
+      <el-checkbox v-for="item in configFields" :label="item.columnCode" :key="item.columnCode">
+        {{ item.columnName }}
+      </el-checkbox>
+    </el-checkbox-group>
+    <div class="table-header" v-if="fields.length">
+      <ul :style="{ width: scrollWidth + 'px' }">
+        <li ref="li" v-dragging="{ item: item, list: fields }" v-for="item in fields" :key="item.columnCode">
+          {{ item.columnName }}
+        </li>
+      </ul>
+      <div class="empty" :style="{ width: scrollWidth + 'px' }">暂无数据</div>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="dialogVisible = false">取 消</el-button>
+      <el-button type="primary" @click="handleOk">确 定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+  import Vue from 'vue'
+  import { Dialog, Checkbox, CheckboxGroup, Message } from 'element-ui'
+  import VueDND from 'awe-dnd'
+  import api from 'common/api'
+
+  Vue.use(Dialog)
+  Vue.use(Checkbox)
+  Vue.use(CheckboxGroup)
+  Vue.use(VueDND)
+
+  export default {
+    data () {
+      return {
+        dialogVisible: false,
+        selectAll: false,
+        configFields: [],
+        fields: [],
+        groupList: [],
+        scrollWidth: 0
+      }
+    },
+    methods: {
+
+      /**
+       * init data
+       */
+      init (configFields = [], fields = []) {
+        this.dialogVisible = true
+        this.fields = [...fields]
+        this.configFields = [...configFields]
+        this.groupList = fields.map(({ columnCode }) => columnCode)
+        this.selectAll = this.fields.length == this.configFields.length
+        this.calcWidth()
+      },
+
+      /**
+       * handleToggle
+       */
+      handleToggle () {
+        this.groupList = this.selectAll ? this.configFields.map(({ columnCode }) => columnCode) : []
+        this.handleChange()
+      },
+
+      /**
+       * checkbox change
+       */
+      handleChange () {
+        console.info(this.groupList);
+        // this.fields = this.configFields.filter(({ columnCode }) => this.groupList.includes(columnCode))
+        this.fields = []
+        for(let i = 0, len = this.groupList.length; i < len; i++) {
+          console.info(this.groupList[i])
+          var _k = this.configFields.filter(({ columnCode }) => columnCode == this.groupList[i])
+          this.fields.push(_k[0])
+        }
+
+        this.selectAll = this.fields.length == this.configFields.length
+        this.calcWidth()
+      },
+
+      /**
+       * calc table scroll width
+       */
+      calcWidth () {
+        this.$nextTick(() => {
+          this.scrollWidth = 0
+          this.$refs.li.forEach(item => this.scrollWidth += item.offsetWidth)
+        })
+      },
+
+      /**
+       * 确定
+       */
+      handleOk () {
+        const columnCodeList = this.fields.map(({ columnCode }) => columnCode)
+        const userInfo = sessionStorage.getItem('userInfo') && JSON.parse(sessionStorage.getItem('userInfo'))
+        const params = { reportCode: 'FileExportTypeRenewSolicitRpt', userId: userInfo.empVo.empCode, columnCodeList }
+        api.liApi.contract.saveReportDesignInfo(params, res => {
+          if (res && res.data.code == 'success') {
+            Message({
+              type: 'success',
+              message: '保存成功',
+              showClose: true
+            })
+            this.dialogVisible = false
+            this.$emit('handleOk', JSON.parse(JSON.stringify(this.fields)))
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .table-custom {
+    .el-dialog--small {
+      width: 920px;
+    }
+    .el-dialog__body {
+      padding: 20px 10px;
+      .el-checkbox {
+        width: 130px;
+        margin: 5px 10px;
+        .el-checkbox__input {
+          line-height: inherit;
+        }
+      }
+      .table-header {
+        margin-top: 20px;
+        overflow: auto;
+        ul {
+          min-width: 100%;
+          margin: 0;
+          padding: 0;
+          li {
+            padding: 10px 15px;
+            display: inline-flex;
+            justify-content: center;
+            background: #eef1f6;
+            border-right: 1px solid #dfe6ec;
+            color: #1f2d3d;
+            cursor: pointer;
+            &:last-child {
+              border: none
+            }
+          }
+        }
+        .empty {
+          padding: 10px;
+          border: 1px solid #ddd;
+          border-top: none;
+        }
+      }
+    }
+  }
+</style>

package/src/components/clueSolitTable/index.vue

@@ -0,0 +1,298 @@
+<template>
+  <div class="xq-report-table" v-if="configFields.length">
+    
+    <div v-if="justifyContent!='justify-content:end'" class="report-table-btn-sybol" :style="{justifyContent}">
+      <slot></slot>
+      <i class="el-icon-menu"  @click="handleSetTable" />
+      
+    </div>
+    <div v-else class="report-table-btn-sybol" :style="'justify-content:end'">
+      <i class="el-icon-menu" style="margin-right:20px" @click="handleSetTable" />
+      <slot></slot>
+    </div>
+    <el-table border ref="table" :data="data" :default-sort="defaultSort"  @sort-change="handleSortChange" @row-click="getCurrentRow" >
+         <!-- <el-table-column
+            type="selection"
+            width="55">
+          </el-table-column> -->
+      <el-table-column label="选择" width="70" fixed="left">
+				<template slot-scope="scope">
+					<input type="radio" :value="scope.row" v-model="selectCon"/>
+				</template>
+			</el-table-column>
+      <el-table-column label="序号" width="70" v-if="showIndex">
+        <template slot-scope="scope">{{ scope.$index + 1 + listIndex }}</template>
+      </el-table-column>
+      <el-table-column
+        show-overflow-tooltip
+        v-for="(item, i) in fields"
+        :min-width="minWidth[item.columnCode]"
+        :sortable="item.orderFlag == 1 ? 'custom' : false"
+        :prop="item.columnCode"
+        :label="item.columnName"
+        :key="i"
+      >
+        <template slot-scope="scope">
+          <slot :name="item.columnCode" :row="data[scope.$index]">
+            <span class="pici" @click="goToTelephone(scope.row, item.columnCode)" v-if="item.columnCode === 'applicantMobile' || item.columnCode === 'insuredCustomMobile'|| item.columnCode === 'vehicleOwnerPhone' ">
+              <el-tooltip class="item" effect="dark" :content="scope.row[item.columnCode]"  placement="top-start">  
+                  <span>{{ scope.row[item.columnCode] | capitalize}}</span>
+              </el-tooltip>
+            </span>
+            <!-- <span v-else-if="item.columnCode === 'vin'">
+              <el-tooltip class="item" effect="dark" :content="scope.row[item.columnCode]"  placement="top-start">  
+                  <span>{{ scope.row[item.columnCode] | capitalizeCarNo}}</span>
+              </el-tooltip>
+            </span> -->
+            <span v-else>{{ scope.row[item.columnCode] }}</span>
+          </slot>
+        </template>
+      </el-table-column>
+      <el-table-column label="报价历史" width="100" fixed="right" v-if="showIndex">
+        <template slot-scope="scope">
+          <b-button variant="primary" size="sm" @click="handleCheck(scope.row)">查看</b-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <dialog-model ref="dialog" @handleOk="handleOk" />
+  </div>
+</template>
+
+<script>
+  /**
+   * @author nassua
+   * @description report table
+   * @see 2020-04-23
+   */
+
+  import Vue from 'vue'
+  import { Table } from 'element-ui'
+  import DialogModel from './dialog'
+  import api from 'common/api'
+  import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
+
+  Vue.use(Table)
+  Vue.filter('capitalize',function(value){
+      if(!value) return ''
+      return value = value.substring(0,3)+"****"+value.substring(value.length-4)
+  });
+  // Vue.filter('capitalizeCarNo',function(value){
+  //     if(!value) return ''
+  //     return value = value.substring(0,3)+"*******"+value.substring(10)
+  // });
+  export default {
+    props: {
+      /**
+       * table type
+       */
+      reportCode: {
+        type: String,
+        default: ''
+      },
+      /**
+       * index
+       */
+      showIndex: {
+        type: Boolean,
+        default: false
+      },
+      /**
+       * operate type
+       */
+      operateType: {
+        type: String,
+        default: ''
+      },
+      /**
+       * table dataSource 
+       */
+      data: {
+        type: Array,
+        default: () => []
+      },
+      justifyContent: {
+        type: String,
+        default: 'space-between'
+      },
+      /**
+       * default sort
+       */
+      defaultSort: {
+        type: Object,
+        default: () => {}
+      },
+      /**
+       * column min-width
+       */
+      minWidth: {
+        type: Object,
+        default: () => {}
+      },
+      /**
+       * pageNum
+       */
+      pageNum: {
+        type: Number,
+        default: 1
+      },
+      /**
+       * pageSize
+       */
+      pageSize: {
+        type: Number,
+        default: 15
+      },
+      selectCon:{
+        type:Object
+      
+      }
+    },
+    data () {
+      return {
+        configFields: [], // all columns
+        fields: [], // columns to display
+        fixColumn: [] ,// column fixed left 
+        selCont:""
+      }
+    },
+     computed: {
+        listIndex(){
+        return (this.pageNum - 1) * this.pageSize
+      },
+      ...mapState('customerPortrayal', [
+        'customerPhoneNo',
+        'portrayalVisible'
+      ]),
+       phoneStatus:{
+        get:function(){
+          return this.$store.getters["dialogState/getPhoneStatus"]
+        },
+        set:function(value){}
+      }
+  },
+    created() {
+      console.log(this.justifyContent,'tjhis.justifyContent');
+      this.queryConfigFields()
+      this.queryFields()
+    },
+    methods: {
+      ...mapActions({
+      saveScvId: 'customerPortrayal/getScvIdSave',
+      savePhoneNo: 'customerPortrayal/getCustomerPhoneNo',
+      savePortrayalVisible: 'customerPortrayal/getPortrayalVisible'
+    }),
+      /**
+       * query all fields
+       */
+      queryConfigFields () {
+        const params = { reportCode: this.reportCode }
+        api.liApi.contract.queryReportDesignDefault(params, res => {
+          console.log(res);
+          if (res && res.data.code == 'success') {
+            const Vo = res.data.obj || {}
+            this.configFields = Vo.reportDesignDetailInfoVoList || []
+            console.log(this.configFields)
+          }
+        })
+      },
+
+      /**
+       * query custom columns
+       */
+      queryFields () {
+        const userInfo = sessionStorage.getItem('userInfo') && JSON.parse(sessionStorage.getItem('userInfo'))
+        const params = { reportCode: this.reportCode, userId: userInfo.empVo.empCode }
+        api.liApi.contract.queryReportDesignByEmpInfo(params, res => {
+            console.log(res);
+          if (res && res.data.code == 'success') {
+            const Vo = res.data.obj || {}
+            this.fixColumn = Vo.fixColumn
+            this.fields = Vo.reportDesignDetailInfoVoList || [];
+            console.log(this.fields)
+          }
+        })
+      },
+
+      /**
+       * toggle
+       */
+      // handleSelectionChange(list) {
+      //   this.$emit('selectionChange', list)
+      // },
+      getCurrentRow(data){
+        this.selCont = data;
+        // console.log(data,"change");
+        this.$emit('rowClick',data)
+      },
+      handleCheck(row){
+        this.selCont = row;
+        let clueId = row.id;
+        let dealerCode = row.dealerCode;
+        api.liApi.distribute.insureHistory({clueId:clueId},res=>{
+         if(res.data.code == "success"){
+            console.log(res);
+            let offerTable = res.data.obj;
+              this.$emit("checkRules",offerTable,clueId,dealerCode)
+            // console.log(this.tableData)
+          }
+        })
+      },
+      /**
+       * sort change
+       */
+      handleSortChange (Vo) {
+        const sort = { ascending: 'asc', descending: 'desc' }
+        this.$emit('sortChange', { [Vo.prop]: sort[Vo.order] })
+      },
+
+      /**
+       * set tabel custom
+       */
+      handleSetTable () {
+        this.$refs.dialog.init(this.configFields, this.fields)
+      },
+    
+      /**
+       * handleOk
+       */
+      handleOk (fields) {
+        this.fields = JSON.parse(JSON.stringify(fields))
+      },
+      //打开CTI
+      goToTelephone (row, key){
+        this.$store.commit('dialogState/changePhoneStatus',"calling");
+        console.log(this.phoneStatus);
+        console.log(row, key)
+        console.log(row[key])
+        this.savePortrayalVisible(!this.portrayalVisible)
+        this.savePhoneNo(row[key]);
+        
+      }
+    },
+    components: {
+      DialogModel
+    }
+  }
+</script>
+
+<style lang="scss">
+  .xq-report-table {
+    .report-table-btn-sybol {
+      display: flex;
+      margin-top: 15px;
+      margin-bottom: 10px;
+      justify-content: space-between;
+      align-items: flex-end;
+      .el-icon-menu {
+        font-size: 24px;
+        color: #577EB9;
+        cursor: pointer;
+      }
+    }
+    .pici {
+      text-decoration:underline;
+      cursor:pointer;
+      color:rgb(25, 137, 250);
+    }
+  }
+</style>

package/src/components/containers/Full.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="app" id="app">
+    <app-header></app-header>
+    <div class="app-body">
+      <Sidebar :navItems="nav" />
+      <main class="main">
+        <breadcrumb :list="list" />
+        <div class="container-fluid">
+          <router-view></router-view>
+        </div>
+      </main>
+    </div>
+    <AppFooter/>
+  </div>
+</template>
+
+<script>
+  import AppHeader from '../header/Header.vue'
+  import Sidebar from '../sidebar/Sidebar.vue'
+  import AppAside from '../aside/Aside.vue'
+  import AppFooter from '../footer/Footer.vue'
+  import Breadcrumb from '../breadcrumb/Breadcrumb.vue'
+  import nav from '../../views/_nav'
+  export default {
+    name: 'app',
+    data: function() {
+      return {
+        nav: nav.items
+      }
+    },
+    methods: {},
+    components: {
+      AppHeader,
+      Sidebar,
+      AppAside,
+      AppFooter,
+      Breadcrumb
+    },
+    computed: {
+      name() {
+        return this.$route.name
+      },
+      list() {
+        return this.$route.matched
+      }
+    }
+  }
+</script>