{"remainingRequest":"/Users/shuguang/Desktop/毕设/CodeMaster/CodeMaster/node_modules/vue-loader/lib/index.js??vue-loader-options!/Users/shuguang/Desktop/毕设/CodeMaster/CodeMaster/src/components/common/ColumnSetting.vue?vue&type=style&index=0&id=9568ac34&lang=less&scoped=true","dependencies":[{"path":"/Users/shuguang/Desktop/毕设/CodeMaster/CodeMaster/src/components/common/ColumnSetting.vue","mtime":1742646402762},{"path":"/Users/shuguang/Desktop/毕设/CodeMaster/CodeMaster/node_modules/css-loader/dist/cjs.js","mtime":1743264596127},{"path":"/Users/shuguang/Desktop/毕设/CodeMaster/CodeMaster/node_modules/vue-loader/lib/loaders/stylePostLoader.js","mtime":1743264597030},{"path":"/Users/shuguang/Desktop/毕设/CodeMaster/CodeMaster/node_modules/postcss-loader/src/index.js","mtime":1743264596321},{"path":"/Users/shuguang/Desktop/毕设/CodeMaster/CodeMaster/node_modules/less-loader/dist/cjs.js","mtime":1743264596730},{"path":"/Users/shuguang/Desktop/毕设/CodeMaster/CodeMaster/node_modules/cache-loader/dist/cjs.js","mtime":1743264595665},{"path":"/Users/shuguang/Desktop/毕设/CodeMaster/CodeMaster/node_modules/vue-loader/lib/index.js","mtime":1743264596512}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:Ci5zZXR0aW5nLWl0ZW0gewogIGRpc3BsYXk6IGZsZXg7CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICBwYWRkaW5nOiA0cHggMTZweCA0cHggNHB4OwogIC5hbnQtY2hlY2tib3gtd3JhcHBlciB7CiAgICBmbGV4LWdyb3c6IDE7CiAgfQogIC5zZXR0aW5nLWhhbmRsZSB7CiAgICBvcGFjaXR5OiAwLjg7CiAgICBjdXJzb3I6IG1vdmU7CiAgICAuYW50aWNvbi1tb3JlIHsKICAgICAgZm9udC1zaXplOiAxMnB4OwogICAgICBtYXJnaW4tdG9wOiAycHg7CiAgICAgICYgKyAuYW50aWNvbi1tb3JlIHsKICAgICAgICBtYXJnaW46IDJweCA0cHggMCAtOHB4OwogICAgICB9CiAgICB9CiAgfQp9Ci5zZXR0aW5nLWhlYWRlciB7CiAgcGFkZGluZzogNXB4IDE2cHggMTBweCAyNHB4OwogIG1pbi13aWR0aDogMTgwcHg7Cn0KLnNldHRpbmcgewogIC5hbnQtZGl2aWRlciB7CiAgICBtYXJnaW46IDA7CiAgfQogIC5hbnQtY2hlY2tib3gtZ3JvdXAgewogICAgcGFkZGluZzogNHB4IDA7CiAgICBkaXNwbGF5OiBibG9jazsKICB9Cn0K"},{"version":3,"sources":["ColumnSetting.vue"],"names":[],"mappings":";AAwFA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"ColumnSetting.vue","sourceRoot":"src/components/common","sourcesContent":["<template>\n  <a-dropdown v-model=\"show\" :trigger=\"['click']\">\n    <a-icon type=\"setting\" style=\"cursor: pointer; font-size: 16px\" />\n    <div slot=\"overlay\" class=\"ant-dropdown-menu setting ant-dropdown-content\">\n      <div class=\"setting-header setting-item\">\n        <a-checkbox\n          :indeterminate=\"indeterminate\"\n          :checked=\"checkAll\"\n          @change=\"onCheckAllChange\"\n        >\n          列展示\n        </a-checkbox>\n        <a @click=\"init\">重置</a>\n      </div>\n      <a-divider />\n      <div class=\"ant-checkbox-group\">\n        <draggable v-model=\"columnSetting\" animation=\"300\">\n          <div\n            class=\"setting-item\"\n            v-for=\"item in columnSetting\"\n            :key=\"item.dataIndex\"\n          >\n            <div class=\"setting-handle\">\n              <a-icon type=\"more\" />\n              <a-icon type=\"more\" />\n            </div>\n            <a-checkbox v-model=\"item.checked\">\n              {{ item.title }}\n            </a-checkbox>\n          </div>\n        </draggable>\n      </div>\n    </div>\n  </a-dropdown>\n</template>\n\n<script>\nimport draggable from 'vuedraggable';\n\nexport default {\n  name: 'ColumnSetting',\n  components: {\n    draggable,\n  },\n  props: {\n    columns: {\n      type: Array,\n      default: () => [],\n    },\n  },\n  data() {\n    return {\n      show: false,\n      columnSetting: [],\n    };\n  },\n  computed: {\n    checkedList() {\n      return this.columnSetting.filter(v => v.checked);\n    },\n    indeterminate() {\n      return this.checkedList.length > 0 && this.checkedList.length < this.columnSetting.length;\n    },\n    checkAll() {\n      return this.checkedList.length === this.columnSetting.length;\n    },\n  },\n  watch: {\n    checkedList(value) {\n      this.$emit('change', value);\n    },\n  },\n  mounted() {\n    this.init();\n  },\n  methods: {\n    init() {\n      this.columnSetting = this.columns.map(value => ({ ...value, checked: true }));\n    },\n    onCheckAllChange(e) {\n      const checked = e.target.checked;\n      this.columnSetting = this.columns.map(value => ({ ...value, checked }));\n    },\n  },\n};\n</script>\n\n<style lang=\"less\" scoped>\n.setting-item {\n  display: flex;\n  align-items: center;\n  padding: 4px 16px 4px 4px;\n  .ant-checkbox-wrapper {\n    flex-grow: 1;\n  }\n  .setting-handle {\n    opacity: 0.8;\n    cursor: move;\n    .anticon-more {\n      font-size: 12px;\n      margin-top: 2px;\n      & + .anticon-more {\n        margin: 2px 4px 0 -8px;\n      }\n    }\n  }\n}\n.setting-header {\n  padding: 5px 16px 10px 24px;\n  min-width: 180px;\n}\n.setting {\n  .ant-divider {\n    margin: 0;\n  }\n  .ant-checkbox-group {\n    padding: 4px 0;\n    display: block;\n  }\n}\n</style>\n"]}]}