bi-element-ui 0.1.41 → 0.1.42

package/src/components/BiTableColumn/Group.vue

@@ -1,277 +1,277 @@
-<template>
-  <el-dialog custom-class="dialog-class dialog-width" title="自定义列" :visible.sync="dialogVisible" width="620px">
-    <div class="dialog-body" style="min-height: 160px">
-      <div class="checkbox-container" style="width: auto; margin: 0 auto">
-        <div v-for="(item, index) in colList" :key="index" class="checkbox-item">
-          <p>
-            <el-checkbox
-              v-model="item.status"
-              @change="
-                val => {
-                  return handleCheckAllChange(val, item)
-                }
-              "
-              >{{ item.content }}</el-checkbox
-            >
-          </p>
-          <p style="padding: 0 20px">
-            <el-checkbox-group
-              v-model="checkList"
-              :true-label="1"
-              :false-label="0"
-              @change="
-                val => {
-                  return handleCheckedColChange(val, item)
-                }
-              "
-            >
-              <el-checkbox
-                v-for="(city, childrenIndex) in item.children"
-                :key="childrenIndex"
-                :label="city.name"
-                style="width:120px;margin:0 15px 15px 0;"
-                @change="
-                  val => {
-                    return handleChange(val, city)
-                  }
-                "
-              >
-                {{ city.content }}
-              </el-checkbox>
-            </el-checkbox-group>
-          </p>
-        </div>
-        <!-- <span
-          v-for="(item, index) in colList"
-          :key="index"
-          style="
-            display: inline-block;
-            width: 80px;
-            margin: 0 25px;
-            line-height: 35px;
-          "
-        >
-          <el-checkbox  @change="checkChange($event,item)"
-                       v-model="item.check" :label="item.name">
-            {{item.content}}
-          </el-checkbox>
-        </span> -->
-      </div>
-    </div>
-    <span slot="footer" class="dialog-footer" style="display: flex; justify-content: space-between">
-      <span style="display: inline-block; line-height: 32px">
-        <el-checkbox v-model="checkAllData" label="全选" @change="checkAll">
-          全选
-        </el-checkbox>
-      </span>
-      <el-button @click="dialogVisible = false">关闭</el-button>
-    </span>
-  </el-dialog>
-</template>
-
-<script>
-import { saveOperate, getList } from './api'
-export default {
-  props: {
-    value: {
-      type: Boolean,
-      default: false
-    },
-    listType: {
-      type: String,
-      require: true,
-      default: ''
-    },
-    granularity: {
-      type: String,
-      default: 'day'
-    },
-    checkData: {
-      type: Array,
-      require: true,
-      default: () => {
-        return []
-      }
-    },
-    viewsColumn: {
-      type: Array,
-      default: () => {
-        return []
-      }
-    }
-  },
-  data() {
-    return {
-      colList: [],
-      checkList: [], // 存放勾选数据
-      checkAllData: false
-    }
-  },
-  computed: {
-    dialogVisible: {
-      get() {
-        return this.value
-      },
-      set(val) {
-        this.$emit('input', val)
-      }
-    },
-    tableColumnList() {
-      const obj = {}
-      this.colList.map(group => {
-        if (group.children && group.children.length) {
-          group.children.map(item => {
-            obj[item.name] = Boolean(item.status)
-          })
-        } else {
-          obj[group.name] = Boolean(group.status)
-        }
-      })
-      return obj
-    }
-  },
-  watch: {
-    viewsColumn() {
-      if (this.viewsColumn.length > 0 && this.viewsColumn !== this.colList) {
-        this.colList = this.viewsColumn
-        this.defaultCheck()
-        this.$emit('handleTableColumnList', this.tableColumnList)
-      }
-    },
-    colList: {
-      handler(now, old) {
-        let i = true
-        now.forEach((item, index) => {
-          item.status = Boolean(item.status)
-          if (item.status) {
-            this.checkAllData = item.status
-          } else {
-            i = false
-          }
-          this.checkAllData = i
-        })
-      },
-
-      deep: true
-    },
-    granularity() {
-      this.granularityLabel()
-    },
-    checkList: {
-      handler(now, old) {
-        this.$emit('showTableColumn', { colList: now })
-        this.saveOperate()
-      },
-      deep: true
-    }
-  },
-
-  mounted() {
-    this.getList(this.listType)
-  },
-  beforeDestroy() {
-    this.visible = false
-    this.checkList = []
-  },
-  methods: {
-    granularityLabel() {
-      this.colList[0].children.map(item => {
-        if (this.granularity === 'week') {
-          item.name === 'today_roi' && (item.content = '当周回本')
-          item.name === 'date_num' && (item.content = '回本周数')
-        } else if (this.granularity === 'month') {
-          item.name === 'today_roi' && (item.content = '当月回本')
-          item.name === 'date_num' && (item.content = '回本月数')
-        }
-      })
-    },
-    // 获取列表
-    async getList(params) {
-      const res = await getList(params)
-      if (res.status_code === 1) {
-        this.colList = res.data
-        this.defaultCheck()
-        this.$emit('handleTableColumnList', this.tableColumnList)
-      }
-    },
-    // 全选
-    checkAll(val) {
-      this.colList.forEach((item, index) => {
-        this.handleCheckAllChange(val, item)
-        item.status = val
-        // item.children.forEach((em) => {
-        //   if (em.check) {
-        //     this.checkList.push(em.label);
-        //   }
-        // });
-      })
-      if (!val) {
-        this.checkList = []
-      }
-    },
-    // 默认勾选
-    defaultCheck() {
-      this.checkList = []
-      this.colList.forEach((item, index) => {
-        item.children.forEach(em => {
-          if (em.status) {
-            this.checkList.push(em.name)
-          }
-        })
-      })
-    },
-    // 分类全选
-    handleCheckAllChange(val, item) {
-      item.children.forEach((em, inx) => {
-        em.status = val ? 1 : 0
-        if (em.status) {
-          if (this.checkList.indexOf(em.name) === -1) {
-            this.checkList.push(em.name)
-          }
-        } else {
-          this.checkAllData = false
-          const index = this.checkList.indexOf(em.name)
-          this.checkList.splice(index, 1)
-        }
-      })
-      // this.saveOperate()
-    },
-    // 勾选框组监听选中数组
-    handleCheckedColChange(array, item) {
-      let flag = true
-      item.children.forEach(em => {
-        if (em.status) {
-          item.status = true
-        } else {
-          flag = false
-        }
-      })
-      item.status = flag
-      //  this.saveOperate()
-    },
-    // 勾选框单个变化
-    handleChange(val, item) {
-      item.status = val ? 1 : 0
-      if (!val) {
-        this.checkAllData = false
-      }
-    },
-    // 发送数据
-    async saveOperate() {
-      // 数组变化调用接口保存全部数据
-      const params = JSON.parse(JSON.stringify(this.colList))
-      var arr = []
-      params.forEach((item, index) => {
-        item.status = item.status ? 1 : 0
-        arr.push(...item.children)
-      })
-      const data = JSON.stringify(arr)
-      await saveOperate(data)
-      this.$emit('handleTableColumnList', this.tableColumnList)
-      this.$emit('viewsColumn', this.colList)
-    }
-  }
-}
-</script>
-
-<style scoped lang="scss"></style>
+<template>
+  <el-dialog custom-class="dialog-class dialog-width" title="自定义列" :visible.sync="dialogVisible" width="620px">
+    <div class="dialog-body" style="min-height: 160px">
+      <div class="checkbox-container" style="width: auto; margin: 0 auto">
+        <div v-for="(item, index) in colList" :key="index" class="checkbox-item">
+          <p>
+            <el-checkbox
+              v-model="item.status"
+              @change="
+                val => {
+                  return handleCheckAllChange(val, item)
+                }
+              "
+              >{{ item.content }}</el-checkbox
+            >
+          </p>
+          <p style="padding: 0 20px">
+            <el-checkbox-group
+              v-model="checkList"
+              :true-label="1"
+              :false-label="0"
+              @change="
+                val => {
+                  return handleCheckedColChange(val, item)
+                }
+              "
+            >
+              <el-checkbox
+                v-for="(city, childrenIndex) in item.children"
+                :key="childrenIndex"
+                :label="city.name"
+                style="width:120px;margin:0 15px 15px 0;"
+                @change="
+                  val => {
+                    return handleChange(val, city)
+                  }
+                "
+              >
+                {{ city.content }}
+              </el-checkbox>
+            </el-checkbox-group>
+          </p>
+        </div>
+        <!-- <span
+          v-for="(item, index) in colList"
+          :key="index"
+          style="
+            display: inline-block;
+            width: 80px;
+            margin: 0 25px;
+            line-height: 35px;
+          "
+        >
+          <el-checkbox  @change="checkChange($event,item)"
+                       v-model="item.check" :label="item.name">
+            {{item.content}}
+          </el-checkbox>
+        </span> -->
+      </div>
+    </div>
+    <span slot="footer" class="dialog-footer" style="display: flex; justify-content: space-between">
+      <span style="display: inline-block; line-height: 32px">
+        <el-checkbox v-model="checkAllData" label="全选" @change="checkAll">
+          全选
+        </el-checkbox>
+      </span>
+      <el-button @click="dialogVisible = false">关闭</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { saveOperate, getList } from './api'
+export default {
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    },
+    listType: {
+      type: String,
+      require: true,
+      default: ''
+    },
+    granularity: {
+      type: String,
+      default: 'day'
+    },
+    checkData: {
+      type: Array,
+      require: true,
+      default: () => {
+        return []
+      }
+    },
+    viewsColumn: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      colList: [],
+      checkList: [], // 存放勾选数据
+      checkAllData: false
+    }
+  },
+  computed: {
+    dialogVisible: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    tableColumnList() {
+      const obj = {}
+      this.colList.map(group => {
+        if (group.children && group.children.length) {
+          group.children.map(item => {
+            obj[item.name] = Boolean(item.status)
+          })
+        } else {
+          obj[group.name] = Boolean(group.status)
+        }
+      })
+      return obj
+    }
+  },
+  watch: {
+    viewsColumn() {
+      if (this.viewsColumn.length > 0 && this.viewsColumn !== this.colList) {
+        this.colList = this.viewsColumn
+        this.defaultCheck()
+        this.$emit('handleTableColumnList', this.tableColumnList)
+      }
+    },
+    colList: {
+      handler(now, old) {
+        let i = true
+        now.forEach((item, index) => {
+          item.status = Boolean(item.status)
+          if (item.status) {
+            this.checkAllData = item.status
+          } else {
+            i = false
+          }
+          this.checkAllData = i
+        })
+      },
+
+      deep: true
+    },
+    granularity() {
+      this.granularityLabel()
+    },
+    checkList: {
+      handler(now, old) {
+        this.$emit('showTableColumn', { colList: now })
+        this.saveOperate()
+      },
+      deep: true
+    }
+  },
+
+  mounted() {
+    this.getList(this.listType)
+  },
+  beforeDestroy() {
+    this.visible = false
+    this.checkList = []
+  },
+  methods: {
+    granularityLabel() {
+      this.colList[0].children.map(item => {
+        if (this.granularity === 'week') {
+          item.name === 'today_roi' && (item.content = '当周回本')
+          item.name === 'date_num' && (item.content = '回本周数')
+        } else if (this.granularity === 'month') {
+          item.name === 'today_roi' && (item.content = '当月回本')
+          item.name === 'date_num' && (item.content = '回本月数')
+        }
+      })
+    },
+    // 获取列表
+    async getList(params) {
+      const res = await getList(params)
+      if (res.status_code === 1) {
+        this.colList = res.data
+        this.defaultCheck()
+        this.$emit('handleTableColumnList', this.tableColumnList)
+      }
+    },
+    // 全选
+    checkAll(val) {
+      this.colList.forEach((item, index) => {
+        this.handleCheckAllChange(val, item)
+        item.status = val
+        // item.children.forEach((em) => {
+        //   if (em.check) {
+        //     this.checkList.push(em.label);
+        //   }
+        // });
+      })
+      if (!val) {
+        this.checkList = []
+      }
+    },
+    // 默认勾选
+    defaultCheck() {
+      this.checkList = []
+      this.colList.forEach((item, index) => {
+        item.children.forEach(em => {
+          if (em.status) {
+            this.checkList.push(em.name)
+          }
+        })
+      })
+    },
+    // 分类全选
+    handleCheckAllChange(val, item) {
+      item.children.forEach((em, inx) => {
+        em.status = val ? 1 : 0
+        if (em.status) {
+          if (this.checkList.indexOf(em.name) === -1) {
+            this.checkList.push(em.name)
+          }
+        } else {
+          this.checkAllData = false
+          const index = this.checkList.indexOf(em.name)
+          this.checkList.splice(index, 1)
+        }
+      })
+      // this.saveOperate()
+    },
+    // 勾选框组监听选中数组
+    handleCheckedColChange(array, item) {
+      let flag = true
+      item.children.forEach(em => {
+        if (em.status) {
+          item.status = true
+        } else {
+          flag = false
+        }
+      })
+      item.status = flag
+      //  this.saveOperate()
+    },
+    // 勾选框单个变化
+    handleChange(val, item) {
+      item.status = val ? 1 : 0
+      if (!val) {
+        this.checkAllData = false
+      }
+    },
+    // 发送数据
+    async saveOperate() {
+      // 数组变化调用接口保存全部数据
+      const params = JSON.parse(JSON.stringify(this.colList))
+      var arr = []
+      params.forEach((item, index) => {
+        item.status = item.status ? 1 : 0
+        arr.push(...item.children)
+      })
+      const data = JSON.stringify(arr)
+      await saveOperate(data)
+      this.$emit('handleTableColumnList', this.tableColumnList)
+      this.$emit('viewsColumn', this.colList)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss"></style>

package/src/components/BiTableColumn/api.js

@@ -1,16 +1,16 @@
-import request from '@/utils/request'
-
-export function getList(type) {
-  return request({
-    url: '/admin/tablehead/list',
-    method: 'get',
-    params: { type }
-  })
-}
-export function saveOperate(head_info) {
-  return request({
-    url: '/admin/tablehead/operate',
-    method: 'post',
-    data: { head_info }
-  })
-}
+import request from '@/utils/request'
+
+export function getList(type) {
+  return request({
+    url: '/admin/tablehead/list',
+    method: 'get',
+    params: { type }
+  })
+}
+export function saveOperate(head_info) {
+  return request({
+    url: '/admin/tablehead/operate',
+    method: 'post',
+    data: { head_info }
+  })
+}