cmc-web/webs/ams-web/src/views/module/index.vue

<template>
  <div class="wrapper">
    <AmsPosition></AmsPosition>
    <!-- 左侧树形目录 -->
    <split-pane v-show="!detailVisible" class="cmdb-split" v-on:resize="resize" :min-percent="10" :default-percent="15" split="vertical">
      <template slot="paneL">
        <Tree ref="treeRef" :type="activeName === 'attr' ? 'normal' : 'search'" @handleNodeClick="handleNodeClick" :update-node="updateNodeGraph" @getList="getList"> </Tree>
      </template>
      <template slot="paneR">
        <el-scrollbar class="full-height">
          <el-card shadow="never" class="m-l">
            <div class="m-b-sm m-l-xs">配置模型</div>
            <!-- 搜索区域 -->
            <cb-table-search :configs="searchConfigs" :onSearch="handleSearch" class="service-search m-b-sm">
              <template #operate v-if="!selectPostion">
                <el-button type="primary" icon="el-icon-plus" @click="handlCreate()">新增 </el-button>
              </template>
            </cb-table-search>
            <!-- 卡片 -->
            <el-row :gutter="20">
              <el-col v-for="(row, index) in list" :xl="6" :lg="8" :md="12" :key="index" class="m-b card-container">
                <el-card class="card" shadow="hover" @click.native="goDetail(row)">
                  <div class="card-content">
                    <el-avatar :src="row.iconImage"></el-avatar>
                    <div class="cell-content">
                      <p class="cell-title">{{ row.name }}</p>
                      <p class="cell-code">编码：{{ row.code }}</p>
                    </div>
                  </div>
                  <div class="card-remark">{{ row.remark || '暂无描述' }}</div>
                  <div class="card-footer" v-if="!selectPostion">
                    <el-button type="text" class="operate" @click.stop="handlCreate(row)"> 编辑 </el-button>
                    <el-button type="text" class="operate" @click.stop="handleRemove(row)"> 删除 </el-button>
                  </div>
                </el-card>
              </el-col>
              <cb-empty v-if="!list.length"> </cb-empty>
            </el-row>
            <!-- 分页 -->
            <el-row>
              <el-col :span="24" class="pull-right">
                <el-pagination class="pull-right" @size-change="handleSizeChange" @current-change="getList" background :current-page.sync="params.page" :page-sizes="[12, 16, 24, 32, 40, 80]" :page-size="params.rows" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
              </el-col>
            </el-row>
          </el-card>
        </el-scrollbar>
      </template>
    </split-pane>
    <!--详情界面-->
    <ModuleDetail v-if="detailVisible" :module-data="moduleData" @goBack="detailVisible = false" />
  </div>
</template>
<script>
import { mapState } from 'vuex'
import { getCurrentInstance } from 'vue'
import splitPane from 'vue-splitpane'
import ModuleDetail from './ModuleDetail.vue'
import { getModules, removeModule } from 'services/cmdb/module'
import usePostion from '@/views/usePosition'
import AmsPosition from '@/views/AmsPosition.vue'

function getSearchConfigs(moduleGroupId, flag) {
  return [
    { type: 'Const', value: 'moduleGroupId', initValue: moduleGroupId },
    { type: 'Const', value: 'flag', initValue: flag },
    { type: 'Input', label: '模型名称', value: 'name' },
  ]
}
export default {
  components: {
    Tree: () => import('./side/index'),
    splitPane,
    ModuleDetail,
    AmsPosition,
  },
  data() {
    return {
      searchConfigs: getSearchConfigs(),
      params: {
        page: 1,
        rows: 12,
      },
      total: 0,
      list: [],
      detailVisible: false,
      moduleData: {},
      loading: true,
      currentModuleId: '',
      isJsonSuccess: true,
      activeName: '',
    }
  },
  setup() {
    const instance = getCurrentInstance()
    const { selectPostion } = usePostion(() => {
      instance.proxy.getList()
      instance.proxy.$refs.treeRef.$refs.tree.loadGroups()
    })
    return {
      selectPostion,
    }
  },
  methods: {
    async getList() {
      const res = await getModules(this.params)
      if (res.success) {
        this.list = res.data.rows
        this.total = res.data.total
      }
    },
    handleSearch(param) {
      this.params.page = 1
      this.params.params = param
      this.getList()
    },
    handleSizeChange(val) {
      this.params.page = 1
      this.params.rows = val
      this.getList()
    },
    handleRemove({ id, name }) {
      this.$confirm(`该操作不可恢复，删除模型将清空该模型下所有配置及关联关系，建议采取禁用操作。是否确认删除【${name}】？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        const res = await removeModule(id)
        if (res.success) {
          this.$message.success(res.message)
          this.getList()
          this.$refs.treeRef.updateSuccess()
        }
      })
    },
    handlCreate(data = {}) {
      this.$refs.treeRef.handleCreate({
        type: data.id ? 'update' : 'create',
        operate: 'module',
        parentId: data.groupId || this.searchConfigs[0].initValue,
        data,
      })
    },
    goDetail(data) {
      this.moduleData = data
      this.detailVisible = true
    },
    handleImportProps(props) {
      this.fieldItemList = [...this.fieldItemList, ...props]
    },
    resize(a) {
      console.log(a)
    },
    updateNodeGraph() {
      if (this.activeName === 'relation') {
        this.$nextTick(() => {
          this.initGraph()
        })
      }
    },
    handleNodeClick(data) {
      const { id, name, parentId } = data
      let moduleGroupId = ''
      let flag = ''
      if (name === '其他') {
        moduleGroupId = parentId
        flag = false
      } else if (id !== 'all') {
        moduleGroupId = id
        flag = true
      }
      this.searchConfigs = getSearchConfigs(moduleGroupId, flag)
    },
  },
}
</script>
<style lang="scss">
.field-item {
  margin-top: 10px;
  cursor: move;
  padding: 5px;
  position: relative;
  display: flex;
  flex: 1 1 auto;

  &.select {
    border: 1px solid #ddd;
  }
}

.field-item-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  padding-right: 10px;
  margin: 0;
  width: 20%;
  height: 30px;
  line-height: 30px;
  max-width: 110px;
}

.field-item-value {
  flex: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.field-item-operate {
  margin-left: 10px;
  width: 30px;
  height: 30px;
  border: 1px solid #f0f0f0;
  color: #d05d5d;
  border-radius: 5px;
  text-align: center;
  line-height: 30px;
  display: block;
  font-weight: 600;
  cursor: pointer;
  z-index: 100;

  .icon-delete {
    font-size: 18px;
    font-weight: 400;
  }
}

.field-options {
  width: 450px;
}

.field-options-title {
  padding: 0 16px;
  line-height: 40px;
  height: 40px;
  border-bottom: 1px solid #eee;
  margin-bottom: 16px;
  font-weight: 700;
}

.field-options-item {
  margin-bottom: 10px;
  display: flex;

  label.required:before,
  .field-item label.required:before {
    display: inline-block;
    margin-right: 4px;
    content: '*';
    font-size: 13px;
    color: #f50;
  }

  label.required,
  label.labelWidth {
    width: 120px;
    text-align: right;
  }
}

.icon-guanjianzi {
  font-size: 13px;
  color: #ffda00;
}

span.title {
  font-size: inherit;
  color: inherit;
}

.item-group {
  width: calc(100% - 45px) !important;
  padding: 5px 8px;
  color: #3c763d;
  background-color: #dff0d8;
}

.wrapper {
  height: calc(100vh - 110px);
  .leftC {
    height: 100%;
    margin-left: 5px;
  }

  .rightC {
    height: 100%;
    margin-left: 10px;
  }

  .float-right {
    position: absolute;
    right: 10px;
    top: 10px;
  }
}

.splitter-pane-resizer {
  margin-left: 20px;
}

.field-list-custom {
  color: #4082e6;
  cursor: pointer;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.cmdb-popper {
  border-top-color: rgb(30, 84, 213);

  .popper__arrow {
    border-bottom-color: rgb(30, 84, 213) !important;
  }
}
.cmdb-split {
  .splitter-pane-resizer {
    background: #fff !important;
  }
}
</style>
<style lang="scss" scoped>
@import './card.scss';
</style>