lshcomment 1.0.0

package/src/components/sidebar/SidebarNavLink.vue

@@ -0,0 +1,157 @@
+<template>
+  <div class="clearfix favorite_box">
+    <div class="pull-left favorite" @click.prevent.stop="favoriteClick">
+        <img v-if="!toggle" class="befor_favorite" :src="getUrl('/static/image/收藏前@2x.png')" width="14px" height="14px">
+
+        <img v-if="toggle" :src="getUrl('/static/image/收藏后@2x.png')" width="14px" height="14px">
+    </div>
+
+    <div class="pull-left" style="width: calc(100% - 40px);">
+        <router-link v-if="isNative == 'livecs'" :to="url" class="nav-link pl7">
+            {{ name }}
+        </router-link>
+        <a v-else class="nav-link" @click="navLink(url)">
+            {{ name }}
+        </a>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import { mapGetters, mapActions } from 'vuex'
+
+  export default {
+    name: "sidebar-nav-link",
+    props: {
+      name: {
+        type: String,
+        default: ''
+      },
+      url: {
+        type: String,
+        default: ''
+      },
+      icon: {
+        type: String,
+        default: ''
+      },
+      isNative:{
+        type: String,
+        default: 'liveCs'      
+      },
+      levels: {
+        type: Number,
+        default: 1
+      },
+      itemInfo: {
+        type: Object
+      }
+    },
+    data() {
+        return {
+            toggle: false
+        }
+    },
+    computed: {
+        userInfo() {
+            return JSON.parse(sessionStorage.getItem('userInfo'))
+        },
+        ...mapGetters('qualityTest',[
+            'favoriteInfos'
+        ])
+    },
+    methods:{
+        getUrl(path) {
+            const env = process.env.NODE_ENV
+            const origin = window.location.origin
+            return env == 'development' ? path : `${origin}/livecs${path}`
+        },
+        navLink(url) {
+            const classify = this.isNative == 'live' ? 'web' : this.isNative
+            window.location.href = `${window.location.origin}/${classify}${url}`
+        },
+        favoriteClick() {
+            const { orgCode } = this.userInfo.userAvailableInfo
+            const { empCode } = this.userInfo.empVo
+            const { resourceCode, resourceName } = this.itemInfo
+
+            const { id, empFavoriteCode } = this.favoriteInfos.filter(k => k.resourceCode === this.itemInfo.resourceCode)[0] || {}
+
+            const _this = this
+            const params = {
+                editParams: {
+                    groupCode: orgCode,
+                    resourceChannelCode: 'MenuPC',
+                    empCode,
+                    orgCode: this.userInfo.inCharegSubOrgVo.orgCode,
+                    storeFavorite: this.toggle ? 0 : 1,
+                    resourceCode,
+                    resourceName,
+                    id: this.toggle ? id : undefined,
+                    empFavoriteCode: this.toggle ? empFavoriteCode : undefined,
+                },
+                next: function() {
+                    _this.toggle = !_this.toggle
+                }
+            }
+
+            this.storeFavorite(params)
+        },
+        ...mapActions('qualityTest', [
+            'storeFavorite'
+        ])
+    },
+    watch: {
+        favoriteInfos(val) {
+            const item = this.favoriteInfos.filter(k => k.resourceCode === this.itemInfo.resourceCode)[0]
+            this.toggle = !!item
+        }
+    }
+  }
+</script>
+
+<style scoped>
+  .SidebarNavLink {
+    display: inline !important;
+    margin-left: 15px !important;
+    margin-right: 0 !important;  
+    color: aliceblue !important;
+  }
+  .third-link {
+    overflow: hidden;
+  }
+  .third-link .nav-link {
+    display: flex !important;
+    align-items: center;
+    height: 45px;
+    padding: 0 10px 0 15px !important;
+  }
+  .second-link .pl7{
+    padding-left: 7px !important;
+  }
+  .favorite {
+    width: 40px;
+    height: 45px;
+    display: flex;
+    align-items: center;
+    justify-content:flex-end;
+    cursor: pointer;
+   
+  }
+.second-link .favorite{
+  justify-content:center;
+   padding-left: 10px;
+}
+  .favorite_box:hover {
+    background-color: #214A80;
+  }
+
+  .befor_favorite {
+      display: none;
+  }
+
+  .favorite_box:hover .befor_favorite {
+      display: block;
+  }
+</style>

package/src/components/sidebar/SidebarNavTitle.vue

@@ -0,0 +1,16 @@
+<template>
+  <li class="nav-title">
+    {{name}}
+  </li>
+</template>
+
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>

package/src/components/table/dialog.vue

@@ -0,0 +1,179 @@
+<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" :style="{ 'marginRight': marginRight + 'px' }">
+        {{ 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 {
+    props: {
+      reportCode: {
+        type: String,
+        default: 'FileExportTypeAccidentVehicleOrder'
+      },
+      marginRight: {
+        type: Number,
+        default: 40
+      }
+    },
+
+    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, i) => {
+            const result = window.getComputedStyle(this.$refs.li[i], null).width
+            const result1 = result.replace('px','')
+            this.scrollWidth += parseFloat(result1)
+          })
+        })
+      },
+
+      /**
+       * 确定
+       */
+      handleOk () {
+        
+        const columnCodeList = this.fields.map(({ columnCode }) => columnCode)
+        const userInfo = sessionStorage.getItem('userInfo') && JSON.parse(sessionStorage.getItem('userInfo'))
+        const params = { reportCode: this.reportCode, 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 40px 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;
+            box-sizing: border-box;
+            border-right: 1px solid #dfe6ec;
+            color: #1f2d3d;
+            cursor: pointer;
+            &:last-child {
+              border: none !important;
+            }
+          }
+        }
+        .empty {
+          padding: 10px;
+          border: 1px solid #ddd;
+          border-top: none;
+        }
+      }
+    }
+  }
+</style>
+

package/src/components/table/index.vue

@@ -0,0 +1,252 @@
+<template>
+  <div class="report-table" v-if="configFields.length">
+    <div class="report-table-btn" :style="{ justifyContent }">
+      <slot></slot>
+      <i class="el-icon-menu" @click="handleSetTable" />
+    </div>
+    <el-table v-if="ifTable" :max-height="maxHeight" border :data="data" :default-sort="defaultSort" @sort-change="handleSortChange" @selection-change="handleSelectionChange">
+      <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="55" fixed="left" v-if="operateType == 'multipleTable'" />
+      <el-table-column label="单选" width="65" fixed="left" v-if="operateType == 'radio'">
+        <template slot-scope="{ row }">
+          <el-radio style="margin:0" v-model="radioValue" :label="row">&nbsp;</el-radio>
+        </template>
+      </el-table-column>
+      <el-table-column
+        show-overflow-tooltip
+        v-for="(item, i) in fields"
+        :fixed="fixColumn != fields.length && i < fixColumn ? true : false"
+        :min-width="minWidth[item.columnCode] || minWidthDefault"
+        :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]">{{ scope.row[item.columnCode] }}</slot>
+        </template>
+      </el-table-column>
+      <slot name="tableEnd"></slot>
+      <el-table-column
+        v-show="custRow.length"
+        v-for="item in custRow"
+        :key="item.prop"
+        :label="item.label"
+        :prop="item.prop"
+        :min-width="item.width"
+        fixed="right"
+      >
+        <template slot-scope="scope">
+          <slot :name="item.prop" :row="data[scope.$index]">{{ scope.row[item.prop] }}</slot>
+        </template>
+      </el-table-column>
+    </el-table>
+    <dialog-model ref="dialog" v-bind="$attrs" :reportCode="reportCode" @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)
+
+  export default {
+    props: {
+      /**
+       * table type
+       */
+      reportCode: {
+        type: String,
+        default: ''
+      },
+      custRow: {
+        type: Array,
+        default: () => []
+      },
+      justifyContent: {
+        type: String,
+        default: 'space-between'
+      },
+      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: () => ({})
+      },
+      minWidthDefault: {
+        type: String,
+        default: ''
+      },
+      /**
+       * pageNum
+       */
+      pageNum: {
+        type: Number,
+        default: 1
+      },
+      /**
+       * pageSize
+       */
+      pageSize: {
+        type: Number,
+        default: 15
+      },
+      /**
+       * maxHeight
+       */
+      maxHeight: {
+        type: Number,
+        default: 1000
+      }
+    },
+    watch: {
+      data: {
+        handler(val) {
+          this.radioValue = null
+        }
+      },
+    },
+    computed: {
+      listIndex(){
+        return (this.pageNum - 1) * this.pageSize
+      }
+    },
+    data () {
+      return {
+        configFields: [], // all columns
+        fields: [], // columns to display
+        fixColumn: [], // column fixed left 
+        ifTable: true,
+        radioValue: null,
+      }
+    },
+    created() {
+      this.queryConfigFields()
+      this.queryFields()
+    },
+    methods: {
+      // 变更
+      /**
+       * query all fields
+       */
+      queryConfigFields () {
+        const params = { reportCode: this.reportCode }
+        api.liApi.contract.queryReportDesignDefault(params, res => {
+          if (res && res.data.code == 'success') {
+            const Vo = res.data.obj || {}
+            this.configFields = Vo.reportDesignDetailInfoVoList || []
+          }
+        })
+      },
+
+      /**
+       * 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 => {
+          if (res && res.data.code == 'success') {
+            const Vo = res.data.obj || {}
+            this.fixColumn = Vo.fixColumn
+            this.fields = Vo.reportDesignDetailInfoVoList || []
+          }
+        })
+      },
+
+      /**
+       * toggle
+       */
+      handleSelectionChange(list) {
+        this.$emit('selectionChange', list)
+      },
+
+      /**
+       * 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))
+        if(this.minWidthDefault){
+          this.ifTable = false
+          this.$nextTick(() => {
+            this.ifTable = true
+          });
+        }
+      }
+    },
+    components: {
+      DialogModel
+    }
+  }
+</script>
+
+<style lang="scss">
+  .report-table {
+    .report-table-btn {
+      display: flex;
+      float: none !important;
+      margin-top: 0 !important;
+      margin-bottom: 10px;
+      justify-content: space-between;
+      align-items: center;
+      .el-icon-menu {
+        margin-left: 10px;
+        font-size: 24px;
+        color: #577EB9;
+        cursor: pointer;
+      }
+    }
+  }
+</style>