Merge remote-tracking branch 'origin/master'

cuilei

5 天以前 ba77fdc6a30c9ad0941e40319f8c4f6fe6fdf9f1

 src/views/mdc/base/modules/deviceCalendar/DeviceCalendarAdd.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,528 @@
<template>

  <a-card class="tree_con" :loading="cardLoading" :bordered="false" >
    <a-spin :spinning="loading">
      <a-alert type="info" :showIcon="false" style="margin-right: 54px;padding-left: 5px">
        <div slot="message">
          <span v-if="this.currSelected.title">{{ getCurrSelectedTitle() }}</span>
          <span v-else>无</span>
        </div>
      </a-alert>
      <div class="drawer-bootom-button">
        <a-dropdown :trigger="['click']" placement="bottomCenter">
          <a-menu slot="overlay">
            <!--<a-menu-item key="1" @click="switchCheckStrictly(1)">父子关联</a-menu-item>-->
            <!--<a-menu-item key="2" @click="switchCheckStrictly(2)">取消关联</a-menu-item>-->
            <!--<a-menu-item key="3" @click="checkALL">全部勾选</a-menu-item>-->
            <!--<a-menu-item key="4" @click="cancelCheckALL">取消全选</a-menu-item>-->
            <a-menu-item key="1" @click="expandAll">展开所有</a-menu-item>
            <a-menu-item key="2" @click="closeAll">合并所有</a-menu-item>
            <a-menu-item key="3" @click="refreshTree">刷新</a-menu-item>
          </a-menu>
          <a-button>
            <a-icon type="bars"/>
          </a-button>
        </a-dropdown>
      </div>
      <a-input-search @search="handleSearch" style="width:100%;margin-top: 10px" placeholder="检索 ç±»åˆ«ç¼–码/名称" allowClear
                      v-model="searchInput" @change="handleChange"/>

      <a-form>
        <a-form-item>
            <a-tree  ref="tree"
                     checkable
                     @check="onCheck"
                     :checkStrictly="checkStrictly"
                     :expandedKeys="expandedKeys"
                     :checkedKeys="checkedKeys"
                      :selectedKeys="selectedKeys"
                      :treeData="treeDataSource"
                      :autoExpandParent="autoExpandParent"
                     @select="onSelect"
                     @expand="onExpand">
            </a-tree>

        </a-form-item>
      </a-form>

    </a-spin>

    <!--<tier-model ref="tierModalForm"  @ok="modalFormOk"></tier-model>-->


  </a-card>
    <!--<div class="drawer-bootom-button">-->
      <!--<a-dropdown style="float: left" :trigger="['click']" placement="topCenter">-->
        <!--<a-menu slot="overlay">-->
          <!--<a-menu-item key="1" @click="switchCheckStrictly(1)">父子关联</a-menu-item>-->
          <!--<a-menu-item key="2" @click="switchCheckStrictly(2)">取消关联</a-menu-item>-->
          <!--<a-menu-item key="3" @click="checkALL">全部勾选</a-menu-item>-->
          <!--<a-menu-item key="4" @click="cancelCheckALL">取消全选</a-menu-item>-->
          <!--<a-menu-item key="5" @click="expandAll">展开所有</a-menu-item>-->
          <!--<a-menu-item key="6" @click="closeAll">合并所有</a-menu-item>-->
        <!--</a-menu>-->
        <!--<a-button>-->
          <!--树操作 <a-icon type="up" />-->
        <!--</a-button>-->
      <!--</a-dropdown>-->
      <!--&lt;!&ndash;&lt;!&ndash;<a-popconfirm title="确定放弃编辑？" @confirm="close" okText="确定" cancelText="取消">&ndash;&gt;&ndash;&gt;-->
      <!--&lt;!&ndash;&lt;!&ndash;<a-button style="margin-right: .8rem">取消</a-button>&ndash;&gt;&ndash;&gt;-->
      <!--&lt;!&ndash;&lt;!&ndash;</a-popconfirm>&ndash;&gt;&ndash;&gt;-->
      <!--&lt;!&ndash;&lt;!&ndash;<a-button @click="handleSubmit(false)" type="primary" :loading="loading" ghost style="margin-right: 0.8rem">仅保存</a-button>&ndash;&gt;&ndash;&gt;-->
      <!--&lt;!&ndash;&lt;!&ndash;<a-button @click="handleSubmit(true)" type="primary" :loading="loading">保存并关闭</a-button>&ndash;&gt;&ndash;&gt;-->
    <!--</div>-->
</template>

<script>
  import {
    getAction,
    postAction,
    deleteAction
  } from '@/api/manage'
  import Tooltip from 'ant-design-vue/es/tooltip'
  // import TierModel from './modules/baseTree/TierModel'

  export default {
    name: 'BaseTree',
    props: {
      editDisable: {
        type: Boolean,
        default() {
          return true
        }
      }
    },
    components: {
      Tooltip,
      // TierModel
    },
    data() {
      return {
        searchInput: '',
        cardLoading: false,
        loading: false,
        treeDataSource: [],
        selectedKeys: [],
        expandedKeys: [],
        checkedKeys:[],
        checkedId:[],
        url: {
          getBaseTree: '/mdc/mdcequipment/loadTree',
          deleteBatch: '/mdc/mdcequipment/deleteBatch'
        },
        searchValue: '',
        dataList: [],
        autoExpandParent: false,
        checkStrictly: false,
        allTreeKeys: [],
        currSelected: {},
        currentSlectList:[],
        hiding: false,
        mathChange:''
      }
    }
    ,
    created() {
      this.queryTreeData()
      // this.closeAll()
    }
    ,
    methods: {
      switchCheckStrictly (v) {
        if(v==1){
          this.checkStrictly = false
        }else if(v==2){
          this.checkStrictly = true
        }
      },
      checkALL (e) {
        this.checkedKeys = this.allTreeKeys
        // console.log(this.checkedKeys);
        this.currentSlectList =  this.treeDataSource;
        // console.log(this.currentSlectList)
      },
      cancelCheckALL () {
        //this.checkedKeys = this.defaultCheckedKeys
        this.checkedKeys = [];
        this.currentSlectList = [];
        // console.log(this.checkedKeys);
        // console.log(this.currentSlectList)
      },
      onCheck (o,checkedNodes) {
        console.log(o);
        console.log(checkedNodes);
        if(this.checkStrictly){
          this.checkedKeys = o.checked;
        }else{
          this.checkedKeys = o
        }
        // console.log(checkedNodes)
        // console.log(o)
        // console.log(o.checked)
        // console.log(checkedNodes.node.dataRef);
        // console.log( this.currentSlectList);
        // if(checkedNodes.checked == true && this.checkStrictly){
        //   this.currentSlectList.push(checkedNodes.node.dataRef)
        // }else if(checkedNodes.checked == false && this.checkStrictly.length == 0){
        //   console.log(111)
        // }
        // console.log(this.checkStrictly)
        if(checkedNodes.checked == true){
          this.currentSlectList.push(checkedNodes.node.dataRef)
        }else{
          for(var i = 0;i<this.currentSlectList.length;i++){
            if(this.currentSlectList[i].key == checkedNodes.node.dataRef.key){
              this.currentSlectList.splice(i,1);
            }
          }
        }
        // console.log(this.currentSlectList)
        // // if(this.checkStrictly = false){
        // //   if(checkedNodes.checked == true){
        // //     this.currentSlectList.push(checkedNodes.node.dataRef)
        // //   }else{
        // //     for(var i = 0;i<this.currentSlectList.length;i++){
        // //       if(this.currentSlectList[i].key == checkedNodes.node.dataRef.key){
        // //         this.currentSlectList.splice(i,1);
        // //       }
        // //     }
        // //   }
        // //   console.log(this.currentSlectList);
        // // }else{
        // //   console.log(checkedNodes)
        // //   if(checkedNodes.checked == true){
        // //     this.currentSlectList.push(checkedNodes.node.dataRef)
        // //   }
        // //   else{
        // //     for(var i = 0;i<this.currentSlectList.length;i++){
        // //       if(this.currentSlectList[i].key == checkedNodes.node.dataRef.key){
        // //         this.currentSlectList.splice(i,1);
        // //       }
        // //     }
        // //   }
        // //   console.log(this.currentSlectList)
        // // }
        // // console.log( this.currentSlectList);
        // if(this.checkStrictly){
        //   this.checkedKeys = o.checked;
        //   console.log(checkedNodes)
        //   // this.
        //   console.log(this.checkedKeys)
        // }else{
        //   this.checkedKeys = o;
        //   console.log(this.checkedKeys)
        // }
      },
      clearSelect(){
        this.checkedKeys = [];
        this.currentSlectList = [];
      },
      getCurrSelectedTitle() {
        return !this.currSelected.title ? '' : this.currSelected.title
      }
      ,
      // onClearSelected() {
      //   this.hiding = true
      //   this.currSelected = {}
      //   this.selectedKeys = []
      //   this.$emit('sendSelectBaseTree', '')
      // },

      onSelect(selectedKeys, e) {
        // console.log(e);
        this.hiding = false
        let record = e.node.dataRef
        this.currSelected = Object.assign({}, record)
        // console.log(this.currSelected)
        this.selectedKeys = [record.key]
        this.$emit('sendSelectBaseTree', this.selectedKeys)
      },
      handleEdit(entity) {
        this.$refs.tierModalForm.edit(entity)
        this.$refs.tierModalForm.title = '编辑层级'
        this.$refs.tierModalForm.disableSubmit = false
      },
      onExpand(expandedKeys) {
        this.expandedKeys = expandedKeys
        this.autoExpandParent = false
      },
      queryTreeData() {
        this.loading = true
        this.cardLoading = true
        getAction(this.url.getBaseTree).then((res) => {
          if (res.success) {
            this.dataList = []
            this.allTreeKeys = []
            this.treeDataSource = res.result
            this.generateList(res.result)
          } else {
            // this.$message.warn(res.message)
            this.$notification.warning({
              message:'消息',
              description:res.message
            });
          }
        }).finally(() => {
          this.loading = false
          this.cardLoading = false
        })
      },
      handleChange() {
        let search = this.searchInput
        let expandedKeys = this.dataList
          .map(item => {
            if (item.title.indexOf(search) > -1) {
              return this.getParentKey(item.key, this.treeDataSource)
            }
            return null
          })
          .filter((item, i, self) => item && self.indexOf(item) === i)
        Object.assign(this, {
          expandedKeys,
          searchValue: search,
          autoExpandParent: true
        })
      }
      ,
      handleSearch(value) {
        let search = value
        let expandedKeys = this.dataList
          .map(item => {
            if (item.title.indexOf(search) > -1) {
              return this.getParentKey(item.key, this.treeDataSource)
            }
            return null
          })
          .filter((item, i, self) => item && self.indexOf(item) === i)
        Object.assign(this, {
          expandedKeys,
          searchValue: search,
          autoExpandParent: true
        })
      }
      ,
      getParentKey(key, tree) {
        let parentKey
        for (let i = 0; i < tree.length; i++) {
          const node = tree[i]
          if (node.children) {
            if (node.children.some(item => item.key === key)) {
              parentKey = node.key
            } else if (
              this.getParentKey(key, node.children)) {
              parentKey = this.getParentKey(key, node.children)
            }
          }
        }
        return parentKey
      },

      generateList(data) {
        for (let i = 0; i < data.length; i++) {
          const node = data[i]
          const key = node.key
          const title = node.title
          this.dataList.push({
            key,
            title: title
          })
          this.allTreeKeys.push(key)
          if (node.children) {
            this.generateList(node.children)
          }
        }
      },
      expandAll() {
        this.expandedKeys = this.allTreeKeys
      },
      closeAll() {
        this.expandedKeys = ['-1']
      },
      refreshTree() {
        this.queryTreeData()
      },
      batchDel: function(entity) {
        if (!this.url.deleteBatch) {
          this.$message.error('请设置url.deleteBatch属性!')
          return
        }
        let ids = entity.id
        if (!ids) {
          // this.$message.warning('请选择一条记录！')
          this.$notification.warning({
            message:'消息',
            description:'请选择一条记录'
          });
          return
        } else {
          var that = this
          this.$confirm({
            title: '确认删除',
            content: '是否删除选中数据?',
            onOk: function() {
              that.loading = true
              deleteAction(that.url.deleteBatch, { ids: ids }).then((res) => {
                if (res.success) {
                  // that.$message.success(res.message)
                  that.$notification.success({
                    message:'消息',
                    description:res.message
                  });
                  that.queryTreeData();
                } else {
                  // that.$message.warning(res.message)
                  that.$notification.warning({
                    message:'消息',
                    description:res.message
                  });
                }
              }).finally(() => {
                that.loading = false
              })
            }
          })
        }
      },
      modalFormOk(val) {
        console.log("mmm")
        // æ–°å¢ž/修改 æˆåŠŸæ—¶ï¼Œé‡è½½åˆ—表
        this.queryTreeData()
        // æ–°å¢ž/修改 æˆåŠŸæ—¶ï¼Œé‡è½½åˆ—表
      }

    }
    ,
    //监听
    watch: {
      currSelected(val) { //监听currSelected å˜åŒ–，将变化后的数值传递给 getCurrSelected äº‹ä»¶
        this.$emit('getCurrSelected', val)

      },
      currentSlectList(msg){
        this.$emit('getcurrentSlectList',msg)
      },
      checkedKeys(valId){
        this.$emit('getcheckedKeys',valId)
      }
    }
  }
</script>

<style lang="less" scoped>
  /*.tree_con{*/
    /*position: relative;*/
  /*}*/
  .drawer-bootom-button {
    position: absolute;
    top: 1px;
    /* padding: 10px 16px; */
    text-align: left;
    right: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
  }
  .draw-bootom-button {
    position: absolute;
    bottom: 0;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
  }
  .replaceSearch {
    color: #40a9ff;
    font-weight: bold;
    background-color: rgb(204, 204, 204);
  }

  .ant-card-body .table-operator {
    margin: 15px;
  }

  .anty-form-btn {
    width: 100%;
    text-align: center;
  }

  .anty-form-btn button {
    margin: 0 5px;
  }

  .anty-node-layout .ant-layout-header {
    padding-right: 0;
  }

  .header {
    padding: 0 8px;
  }

  .header button {
    margin: 0 3px;
  }

  .ant-modal-cust-warp {
    height: 100%;
  }

  .ant-modal-cust-warp .ant-modal-body {
    height: calc(100% - 110px) !important;
    overflow-y: auto;
  }

  .ant-modal-cust-warp .ant-modal-content {
    height: 90% !important;
    overflow-y: hidden;
  }

  /** Button按钮间距 */
  .ant-btn {
    margin-left: 3px;
  }

  .ant-alert {
    padding: 5px 15px 5px 37px;
  }

  /*.drawer-bootom-button {*/
    /*position: absolute;*/
    /*bottom: 1px;*/
     /*padding: 10px 16px;*/
    /*text-align: left;*/
    /*left: 0;*/
    /*background: #fff;*/
    /*border-radius: 0 0 2px 2px;*/
  /*}*/
  @media screen and (min-width: 1920px){
    .tree_con{
      height: 748px!important;
      overflow: scroll;
    }
  }
  @media screen and (min-width: 1680px) and (max-width: 1920px){
    .tree_con{
      height: 748px!important;
      overflow: scroll;
    }
  }
  @media screen and (min-width: 1400px) and (max-width: 1680px){
    .tree_con{
      height: 600px!important;
      overflow: scroll;
    }
  }
  @media screen and (min-width: 1280px) and (max-width: 1400px){
    .tree_con{
      height: 501px!important;
      overflow: scroll;
    }
  }
  @media screen and (max-width: 1280px){
    .tree_con{
      height: 501px!important;
      overflow: scroll;
    }
  }
</style>