lshcomment 1.0.0

package/src/components/distributeTable/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: 'FileExportTypeRenewalDistributionRpt', 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/distributeTable/index.vue

@@ -0,0 +1,262 @@
+<template>
+  <div class="xq-report-table" v-if="configFields.length">
+    <div class="report-table-btn-sybol" :style="{ justifyContent }">
+      <slot></slot>
+      <i class="el-icon-menu" @click="handleSetTable" />
+    </div>
+    <el-table border ref="table" :data="data" :default-sort="defaultSort" @row-click="rowClick" @sort-change="handleSortChange" @selection-change="handleSelectionChange">
+         <el-table-column
+            type="selection"
+            width="55">
+          </el-table-column>
+      <el-table-column label="序号" width="70" fixed="left" v-if="showIndex">
+        <template slot-scope="scope">{{ scope.$index + 1 + listIndex }}</template>
+      </el-table-column>
+      <el-table-column type="selection" width="70" fixed="left" v-if="operateType == 'multipleTable'" />
+      <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 v-if="item.columnCode === 'applicantMobile' || 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 === 'vehicleOwnerCertificateNo'">
+                <el-tooltip class="item" effect="dark" :content="scope.row[item.columnCode]"  placement="top-start">  
+                   <span>{{ scope.row[item.columnCode] | capitalizeCertify}}</span>
+                </el-tooltip>
+              </span>
+              <span v-else-if="item.columnCode === 'insExpireDate'">
+                <span>{{ scope.row[item.columnCode] ? new Date(scope.row[item.columnCode]).Format('yyyy-MM-dd') : '' }}</span>
+              </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>
+    <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'
+
+  Vue.use(Table)
+  Vue.filter('capitalize',function(value){
+      if(!value) return ''
+      return value = value.substring(0,3)+"****"+value.substring(value.length-4)
+  });
+  Vue.filter('capitalizeCertify',function(value){
+      if(!value) return ''
+      var length = value.length;
+      return value = value.substring(0,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: () => []
+      },
+      /**
+       * default sort
+       */
+      defaultSort: {
+        type: Object,
+        default: () => {}
+      },
+      /**
+       * column min-width
+       */
+      minWidth: {
+        type: Object,
+        default: () => {}
+      },
+      justifyContent: {
+        type: String,
+        default: 'space-between'
+      },
+      /**
+       * pageNum
+       */
+      pageNum: {
+        type: Number,
+        default: 1
+      },
+      /**
+       * pageSize
+       */
+      pageSize: {
+        type: Number,
+        default: 15
+      }
+    },
+    computed: {
+      listIndex(){
+        return (this.pageNum - 1) * this.pageSize
+      }
+    },
+    data () {
+      return {
+        configFields: [], // all columns
+        fields: [], // columns to display
+        fixColumn: [] // column fixed left 
+      }
+    },
+    created() {
+      this.queryConfigFields()
+      this.queryFields()
+    },
+    methods: {
+      
+      /**
+       * 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)
+      },
+      
+      rowClick(row) {
+        this.$emit('rowClick',row)
+      },
+      /**
+       * 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))
+      },
+      // 批次号弹出新链接
+      // getBlank (row) {
+      //    const { href } = this.$router.resolve({
+      //               name: `card-batch-detail`,
+      //               query: {
+      //                   cardMakeOrderNo:row.cardMakeOrderNo
+      //               }
+      //           });
+      //           window.open(href, "_blank", 'width= 800, resizable=yes, height= 500,top=100, left=200');
+      //       }
+    },
+    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;
+      // float: right;
+      .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/el/DatePicker.vue

@@ -0,0 +1,123 @@
+<template>
+  <el-date-picker
+    ref="datePicker"
+    :readonly="readonly"
+    :disabled="disabled"
+    :editable="editable"
+    :clearable="clearable"
+    :size="size"
+    v-model="date"
+    :type="type"
+    :placeholder="placeholder"
+    :format="format"
+    :align="align"
+    :picker-options="pickerOptions"
+    :range-separator="rangeSeparator"
+    :default-value="defaultValue"
+    :default-time="defaultTime"
+    @change="change">
+  </el-date-picker>
+</template>
+
+<script>
+  export default {
+    props:{
+      readonly: { type: Boolean, default: false }, // 完全只读
+      value: [String, Number, Array, Date], // 双向绑定，父组件选中的值
+      placeholder: { type: String, default: '请选择日期' }, // 占位符
+      type: { type: String, default: 'date' }, // 显示类型  year/month/date/week/datetime/datetimerange/daterange
+      disabled: { type: Boolean, default: false },  // 是否禁用
+      editable: { type: Boolean, default: false }, // 文本框可输入
+      clearable: { type: Boolean, default: true }, // 是否可以清空选项
+      size: {type: String, default: ''}, // 输入框尺寸 large/small/mini
+      format: {type: String, default: 'yyyy-MM-dd'}, // 时间日期格式化	  年 yyyy，月 MM，日 dd，小时 HH，分 mm，秒 ss
+      align: {type: String, default: 'left'}, // 对齐方式 left/center/right
+      rangeSeparator: {type: String, default: ' - '}, // 选择范围时的分隔符
+      defaultValue: [String, Number, Array, Date], // 可选，DatePicker打开时默认显示的时间，可被new Date()解析
+      defaultTime: {type: Array, default: () => (['00:00:00', '23:59:59'])}, // 选中日期后的默认具体时刻，非范围选择时：形如12:00:00的字符串；范围选择时：数组，长度为 2，每项值为字符串，形如12:00:00，第一项指定开始日期的时刻，第二项指定结束日期的时刻。不指定会使用时刻 00:00:00
+      maxDate: {type: Number, default: 0}, // 可选，设置最大可选时间（天数）
+      valueFormat: {type: String, default: ''}, // 可选，绑定值的格式。不指定则绑定值为 Date 对象
+    },
+    data() {
+      return {
+        date: '',
+        pickerMinDate: '',
+        pickerOptions: {
+          disabledDate: (time) => {
+            if (this.maxDate){
+              if (this.pickerMinDate !== '') {
+                let maxTime = this.pickerMinDate + this.maxDate * 3600000 * 24
+                if (maxTime > new Date()) {
+                  maxTime = new Date()
+                }
+                return time.getTime() > maxTime
+              }
+              return time.getTime() > Date.now()
+            }
+          },
+          onPick: ({ maxDate, minDate }) => {
+            if (this.maxDate){
+              this.pickerMinDate = minDate.getTime()
+              if (maxDate) {
+                this.pickerMinDate = ''
+              }
+            }
+          },
+        },
+      };
+    },
+    watch: {
+      value: {
+        handler (val, oldVal) {
+          if(['daterange','datetimerange'].includes(this.type)){
+            if (!val || !val.length) {
+              this.change()
+            } else if(val[0] !== this.date[0] || val[1] !== this.date[1]){
+              this.change(val[0] + this.rangeSeparator + val[1])
+            }
+          } else {
+            this.date = val
+          }
+        },
+        immediate: true,
+        deep: true,
+      },
+    },
+    mounted() {
+      
+    },
+    methods: {
+      change(value){
+        if(['daterange','datetimerange'].includes(this.type)){
+          if (!value) {
+            value = [undefined, undefined]
+          } else {
+            let valueArr = this.global.getType(value) == 'string' ? value.split(this.rangeSeparator) : value
+            if(this.valueFormat){
+              value = [
+                valueArr[0] ? this.global.format(valueArr[0],this.valueFormat) : undefined,
+                valueArr[1] ? this.global.format(valueArr[1],this.valueFormat) : undefined,
+              ]
+            }else{
+              value = [
+                valueArr[0] ? this.global.format(valueArr[0],'yyyy-MM-dd') + ' 00:00:00' : undefined,
+                valueArr[1] ? this.global.format(valueArr[1],'yyyy-MM-dd') + ' 23:59:59' : undefined,
+              ]
+            }
+          }
+        } else if(['date'].includes(this.type)){
+          if(this.valueFormat && value){
+            value = this.global.format(value,this.valueFormat)
+          }
+        }
+        this.date = value
+        this.$emit('input', value)
+        this.$emit('change', value)
+      },
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+.el-range-editor.el-input__inner{max-width: 100%;}
+</style>

package/src/components/el/Dialog.vue

@@ -0,0 +1,70 @@
+<template>
+  <el-dialog
+    :title="title"
+    ref="dialog"
+    :visible.sync="visible"
+    :size="size"
+    :top="top"
+    :modal="modal"
+    :modal-append-to-body="modalAppendToBody"
+    :close-on-click-modal="closeOnClickModal"
+    :show-close="showClose"
+    :before-close="handleClose">
+    <template v-if="customTitle" slot="title">
+      <slot name="title"></slot>
+    </template>
+    <slot v-if="visible"></slot>
+    <span v-if="showFooter" slot="footer" class="dialog-footer">
+      <slot v-if="customFooter" name="footer"></slot>
+      <div v-else>
+        <el-button @click="visible = false">取 消</el-button>
+        <el-button type="primary" @click="$emit('confirm')">确 定</el-button>
+      </div>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+  export default {
+    props:{
+      title: {type: String, default: '提示'}, // Dialog 的标题
+      customTitle: Boolean, // 是否使用自定义标题
+      beforeClose: Boolean, // 关闭前的回调，会暂停 Dialog 的关闭
+      show: Boolean, // 是否默认显示
+      showFooter: Boolean, // 是否显示底部按钮
+      customFooter: Boolean, // 是否使用自定义底部按钮
+      size: {type: String, default: 'small'}, // tiny/small/large/full
+      top: {type: String,default: '15%'}, // Dialog CSS 中的 top 值（仅在 size 不为 full 时有效）
+      modal: {type: Boolean, default: true}, // 是否需要遮罩层
+      modalAppendToBody: {type: Boolean, default: true}, // 遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Dialog 的父元素上
+      closeOnClickModal: {type: Boolean, default: true}, // 是否可以通过点击 modal 关闭 Dialog
+      showClose: {type: Boolean, default: true}, // 是否显示关闭按钮
+    },
+    data() {
+      return {
+        visible: false
+      };
+    },
+    mounted(){
+      this.visible = this.show;
+    },
+    methods: {
+      close(){
+        this.$refs.dialog.handleClose()
+      },
+      handleClose(done) {
+        if(this.beforeClose){
+          this.$confirm('确认关闭？')
+          .then(_ => {
+            this.$emit('close')
+            done();
+          })
+          .catch(_ => {});
+        } else {
+          this.$emit('close')
+          done()
+        }
+      }
+    }
+  };
+</script>

package/src/components/el/Page.vue

@@ -0,0 +1,66 @@
+<template>
+  <el-pagination
+    class="f-tar f-mt10"
+    @size-change="handleSizeChange"
+    @current-change="handleCurrentChange"
+    :current-page="currentPage"
+    :page-sizes="pageSizes"
+    :page-size="pageSize"
+    :layout="layout"
+    :total="total">
+  </el-pagination>
+</template>
+
+<script>
+  export default {
+    props:{
+      pageStart: { type: Number, default: 1 }, // 当前页数
+      pageNums: { type: Number, default: 10 }, // 每页显示条目个数
+      total: { type: Number, default: 0 }, // 总条目数
+      layout: {type: String, default: 'total, sizes, prev, pager, next, jumper'}, // 组件布局，子组件名用逗号分隔
+      pageSizes: {type: Array, default: () => [10, 20, 50, 100]}, // 每页显示个数选择器的选项设置
+      isStartGetData: { type: Boolean, default: true }, // 是否开始加载数据
+    },
+    data() {
+      return {
+        currentPage: 1,
+        pageSize: 10,
+      };
+    },
+    mounted() {
+      this.currentPage = this.pageStart
+      this.pageSize = this.pageNums
+      if (this.isStartGetData){
+        this.change()
+      }
+    },
+    methods: {
+      handleSizeChange(val) {
+        this.pageSize = val
+        this.change()
+      },
+      handleCurrentChange(val) {
+        this.currentPage = val
+        this.change()
+      },
+      change(pageStart, pageNums){
+        if(pageStart || pageNums){
+          this.reset(pageStart, pageNums)
+        }
+        this.$emit('change', {
+          pageStart: this.currentPage,
+          pageNums: this.pageSize
+        })
+      },
+      // 重置页数和个数，但不触发change
+      reset(pageStart, pageNums){
+        this.currentPage = pageStart ? pageStart : this.pageStart
+        this.pageSize = pageNums ? pageNums : this.pageNums
+      },
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+/deep/ .el-pagination__sizes{width: 100px !important}
+</style>