lshcomment 1.0.0

package/src/components/tablethree/index.vue

@@ -0,0 +1,282 @@
+<template>
+  <div class="report-table" v-if="configFields.length">
+    <div class="report-table-btn">
+      <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 prop="batchNumber" label="批次号" min-width="150">
+      </el-table-column>
+      <el-table-column prop="storeName" label="门店名称" min-width="150">
+      </el-table-column>
+      <el-table-column prop="jobPosition" label="岗位名称" min-width="150">
+        <template  slot-scope="scope">
+         <span>{{ change(scope.row.jobPosition) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="effectiveTime" label="有效时间" min-width="150">
+      </el-table-column>
+      <el-table-column prop="createTimeStr" label="创建时间" min-width="150">
+      </el-table-column>
+      <el-table-column prop="switchStatus" label="开关状态" min-width="80">
+      </el-table-column>
+
+      <el-table-column label="操作" width="100">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="danger"
+            :disabled="scope.row.switchStatus=='打开'?true:false"
+            @click="handleDelete(scope.$index, scope.row)"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+/**
+ * @author nassua
+ * @description report table
+ * @see 2020-04-23
+ */
+
+import Vue from "vue";
+import { Table } from "element-ui";
+import api from "common/api";
+import { Message } from "element-ui";
+
+Vue.use(Table);
+
+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: () => {},
+    },
+    /**
+     * pageNum
+     */
+    pageNum: {
+      type: Number,
+      default: 1,
+    },
+    /**
+     * pageSize
+     */
+    pageSize: {
+      type: Number,
+      default: 15,
+    },
+  },
+  computed: {
+    listIndex() {
+      return (this.pageNum - 1) * this.pageSize;
+    },
+  },
+  data() {
+    return {
+      flag: false,
+      configFields: [], // all columns
+      fields: [], // columns to display
+      fixColumn: [], // column fixed left
+    };
+  },
+  created() {
+    this.queryConfigFields();
+    this.queryFields();
+  },
+  methods: {
+    handleDelete(index,val){
+       this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          this.$emit('del',val.id)
+          // this.$message({
+          //   type: 'success',
+          //   message: '删除成功!'
+          // });
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消删除'
+          });          
+        });
+    },
+    /**
+     * 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) {
+      // console.log(list,'list');
+      this.$emit("selectionChange", list);
+    },
+
+    rowClick(row) {
+        // console.log(row);
+      //   let resswitch
+      // if (row.length > 1) {
+      //   let res = row[0].batchNumber;
+      //    resswitch = row.every((item) => {
+      //     return item.batchNumber == res;
+      //   });
+      // } else {
+      //     resswitch = true
+      // }
+      //  console.log(resswitch, "值为");
+      this.$emit('rowClick',row)
+    },
+    /**
+     * sort change
+     */
+    handleSortChange(Vo) {
+      const sort = { ascending: "asc", descending: "desc" };
+      this.$emit("sortChange", { [Vo.prop]: sort[Vo.order] });
+    },
+    change(value){
+
+      let res = JSON.parse(value).map(item=>{
+        return item.postTypeName
+      })
+      return res.join('/') 
+    },
+
+    /**
+     * 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: {
+  
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.report-table {
+  .report-table-btn {
+    display: flex;
+    margin-top: 15px !important;
+    margin-bottom: 10px;
+    justify-content: space-between;
+    align-items: flex-end;
+    float: right !important;
+    .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/tabletwo/dialog.vue

@@ -0,0 +1,162 @@
+<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: 'CouponsManagement', 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/tabletwo/index.vue

@@ -0,0 +1,258 @@
+<template>
+  <div class="report-table" v-if="configFields.length">
+    <div class="report-table-btn">
+      <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" v-if="showSelect"></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="55" fixed="left" v-if="operateType == 'multipleTable'" />
+      <el-table-column
+        show-overflow-tooltip
+        v-for="(item, i) in fields"
+        :min-width="minWidth[item.columnCode] || 120"
+        :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="getBlank(scope.row)" v-if="item.columnCode === 'cardMakeOrderNo'">
+                {{ scope.row[item.columnCode] }}
+              </span>
+              <span v-else-if="item.columnCode === 'confirmOperatorTime'">
+                {{ scope.row['confirmOperatorTimeStr'] }}
+              </span>
+
+              <span v-else-if="item.columnCode === 'auditPassTime'">
+                {{ scope.row['auditPassTimeStr'] }}
+              </span>
+
+              <span v-else>{{ scope.row[item.columnCode] }}</span>
+          </slot>
+        </template>
+
+
+      </el-table-column>
+      <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" @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: () => []
+      },
+      /**
+       * index
+       */
+      showSelect: {
+        type: Boolean,
+        default: true
+      },
+      /**
+       * 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: () => {}
+      },
+      /**
+       * 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 => {
+          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)
+      },
+      
+      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" scoped>
+  .report-table {
+    .report-table-btn {
+      display: flex;
+      margin-top: 15px !important;
+      margin-bottom: 10px;
+      justify-content: space-between;
+      align-items: flex-end;
+      float: right !important;
+      .el-icon-menu {
+        font-size: 24px;
+        color: #577EB9;
+        cursor: pointer;
+      }
+    }
+    .pici {
+      text-decoration:underline;
+      cursor:pointer;
+      color:rgb(25, 137, 250);
+    }
+  }
+</style>