Merge branch 'develop' of http://117.34.109.166:18448/r/vue_mdc_430

zenglf

2023-09-18 92ff846fb659c62037a32b1d8c15eae9df9d9b54

 src/views/eam/modules/equipmentCategory/EquipmentCategoryLeft.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,388 @@
<template>
  <a-card
    :loading="cardLoading"
    :bordered="false"
    title="设备分类"
    style="height: 100%;"
  >
    <a-spin :spinning="loading">
      <a-alert
        type="info"
        :showIcon="true"
        style="margin-right: 54px;"
      >
        <div slot="message">
          å½“前：<span v-if="this.currSelected.title">{{ getCurrSelectedTitle() }}</span>
          <a
            v-if="this.currSelected.title"
            style="margin-left: 10px"
            @click="onClearSelected"
          >取消</a>
        </div>
      </a-alert>
      <div class="drawer-bootom-button">
        <a-dropdown
          :trigger="['click']"
          placement="bottomCenter"
        >
          <a-menu slot="overlay">
            <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-tree
        showLine
        ref="tree"
        :checkStrictly="checkStrictly"
        :expandedKeys.sync="expandedKeys"
        :selectedKeys="selectedKeys"
        :dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
        :treeData="treeDataSource"
        :autoExpandParent="autoExpandParent"
        @select="onSelect"
        @expand="onExpand"
      >
      <template
          slot="title"
          slot-scope="{key,entity,title,leaf}"
        >
        <span>{{ title }}</span>
          <a-dropdown
            v-if="entity"
            :trigger="['click']"
            placement="bottomCenter"
          >
            <a-menu slot="overlay">
              <a-menu-item v-if="key!=-1" v-has="'equipmentCategory:add&Edit&delete'">
                <a
                  href="javascript:;"
                  @click="handleEdit(entity)"
                >编辑</a>
              </a-menu-item>
              <a-menu-item v-has="'equipmentCategory:add&Edit&delete'">
                <a
                  href="javascript:;"
                  @click="handleAdd(entity)"
                >
               æ·»åŠ å­ç±»åˆ«
                </a>
              </a-menu-item>
              <a-menu-item v-if="key!=-1&&leaf" v-has="'equipmentCategory:add&Edit&delete'">
                <a-popconfirm
                  title="确定删除吗?"
                  @confirm="() => handleDelete(entity.id)"
                >
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
            <span :style="{position: 'absolute',right: 0}">
              <a-icon type="down" />
            </span>
          </a-dropdown>
        </template>
      </a-tree>
      <equipment-category-model
      ref="modalForm"
      @ok="modalFormOk"
      :mainId="mainId"
    ></equipment-category-model>
    </a-spin>
  </a-card>
</template>

<script>
import { getAction } from '@/api/manage'
import Tooltip from 'ant-design-vue/es/tooltip'
import JEllipsis from "@/components/jeecg/JEllipsis"
import EquipmentCategoryModel from './EquipmentCategoryModel'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { deleteAction } from '../../../../api/manage'

export default {
  name: 'EquipmentCategoryLeft',
  mixins: [JeecgListMixin],
  components: {
    Tooltip,
    JEllipsis,
    EquipmentCategoryModel,
  },
  props: ['value'],
  data() {
    return {
      searchInput: '',
      disableMixinCreated:true,
      cardLoading: false,
      loading: false,
      treeDataSource: [],
      selectedKeys: [],
      expandedKeys: [],
      mainId:'',
      url: {
        equipmentCategoryTreeList: '/eam/equipmentCategory/loadTree',
        delete: "/eam/equipmentCategory/delete",
        list: "/eam/equipmentCategory/getAllChildren",
      },
      searchValue: '',
      dataList: [],
      autoExpandParent: true,
      checkStrictly: true,
      allTreeKeys: [],
      currSelected: {},
      hiding: false,
    }
  },
  created() {
    this.queryTreeData();
    this.closeAll();
  },
  methods: {
    getCurrSelectedTitle() {
      return !this.currSelected.title ? '' : this.currSelected.title;
    },
    handleAdd: function (record) {
      this.$refs.modalForm.add({ parentNum: record.num, parentName: record.name });
      this.$refs.modalForm.title = "新增";
      this.$refs.modalForm.disableSubmit = false;
      this.$refs.modalForm.parentId = record.id;
    },
    onClearSelected() {
      this.hiding = true;
      this.currSelected = {};
      this.selectedKeys = [];
    },
    onSelect(selectedKeys, e) {
      this.hiding = false;
      let record = e.node.dataRef;
      this.currSelected = Object.assign({}, record);
      this.selectedKeys = [record.key];
      this.mainId = record.key;
    },
    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },
    queryTreeData() {
      this.loading = true;
      this.cardLoading = true;
      getAction(this.url.equipmentCategoryTreeList).then((res) => {
        if (res.success) {
          this.dataList = [];
          this.allTreeKeys = [];
          this.treeDataSource = res.result;
          this.generateList(res.result);
        } else {
          this.$message.warn(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;
    },
    handleDelete(id) {
      if (!this.url.delete) {
        this.$message.error("请设置url.delete属性!")
        return
      }
      var that = this;
      deleteAction(that.url.delete, { id: id }).then((res) => {
        if (res.success) {
          //重新计算分页问题
          that.reCalculatePage(1)
          that.$message.success(res.message);
          that.queryTreeData();
          that.$bus.$emit('loadData')
          that.alterFlag = new Date();
        } else {
          that.$message.warning(res.message);
        }
      });
    },
    generateList(data) {
      for (let i = 0; i < data.length; i++) {
        const node = data[i];
        const key = node.key;
        const title = node.title;
        // const type = node.type;

        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();
    }
  },
  mounted() {
    this.$bus.$on('queryTreeData', this.queryTreeData);
  },
  //监听
  watch: {
    currSelected(val) {//监听currSelected å˜åŒ–，将变化后的数值传递给 getCurrSelected äº‹ä»¶
      this.$bus.$emit('getCurrSelected', val);
    },
  }
}
</script>

<style>
.replaceSearch {
  color: #00090f;
  font-weight: bold;
  background-color: rgb(204, 204, 204);
}
/* .ant-select-disabled {
  color: rgba(241, 16, 16, 0.25);
}
.ant-select-disabled .ant-select-selection {
  background: #a76b6b;
} */
/*隐藏树的默认icon*/
.ant-tree-switcher-noop {
  display: none !important;
}
/*隐藏树的默认竖线*/
.ant-tree.ant-tree-show-line li:not(:last-child):before {
  border-left: 0px;
}

.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;
}

#app .desktop {
  height: auto !important;
}

/** Button按钮间距 */
.ant-btn {
  margin-left: 3px;
}
.ant-alert {
  padding: 5px 15px 5px 37px;
}
.drawer-bootom-button {
  position: absolute;
  top: 1px;
  /* padding: 10px 16px; */
  text-align: left;
  right: 0;
  background: #fff;
  border-radius: 0 0 2px 2px;
}
</style>