recom-gorse/web/src/components/dialog/IndexAdd.vue

<template>
  <!-- 边类型信息修改 -->
  <div>
    <el-dialog
        title="添加"
        :visible.sync="indexDialogVisible"
        width="60%">
      <el-form ref="fieldCmd" label-width="80px">
        <el-form-item label="索引类型">
          <el-select v-model="indexCmd.type" style="width: 100%" @change="handleIndexTypeChange">
            <el-option :label="item" :value="item" v-for="item in indexTypeList"
                       :key="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="名称">
          <el-select v-model="indexCmd.onName" style="width: 100%" @change="handleIndexOnNameChange">
            <template v-if="indexCmd.type == 'TAG'">
              <el-option :label="item.Name" :value="item.Name" v-for="item in tagList"
                         :key="item.Name"></el-option>
            </template>
            <template v-if="indexCmd.type == 'EDGE'">
              <el-option :label="item.Name" :value="item.Name" v-for="item in edgeList"
                         :key="item.Name"></el-option>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="索引名称">
          <el-input v-model="indexCmd.name"></el-input>
        </el-form-item>
        <el-form-item label="索引属性">
          <el-tag style="margin-right: 15px"
                  v-for="tagObj in indexCmd.fields"
                  :key="tagObj.fieldName"
                  @close="handleIndexFieldClose(tagObj)"
                  closable>
            {{ tagObj.fieldName }}({{ tagObj.len }})
          </el-tag>
          <el-button @click="showAddIndexFieldDialog" type="text" size="small">添加</el-button>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="indexDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitAddIndex">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
        title="添加索引属性"
        :append-to-body="true"
        :visible.sync="indexFieldDialogVisible"
        width="40%">
      <el-form ref="fieldCmd" label-width="140px">
        <el-form-item label="选择关联的属性">
          <el-select v-model="indexFieldCmd.fieldName" style="width: 100%">
            <el-option :label="item.Field" :value="item.Field" v-for="item in indexFields"
                       :key="item.Field" v-show="filterSelected(item.Field)"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="长度">
          <el-input v-model="indexFieldCmd.len"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="indexFieldDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addFieldToIndexCmd">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/utils/request';

var vm;
export default {
  data() {
    return {
      space: '',
      tagList: [],
      edgeList: [],
      indexDialogVisible: false,
      indexCmd: {},
      indexTypeList: ['TAG', 'EDGE'],
      indexFields: [],
      indexFieldCmd: {},
      indexFieldDialogVisible: false
    }
  },
  created() {
    vm = this;
  },
  mounted() {

  },
  methods: {
    showAddIndexDialog(space) {
      vm.space = space;
      vm.indexCmd = {
        space: vm.space,
        onName: '',
        name: '',
        type: 'TAG',
        fields: []
      };
      vm.queryTagList();
      vm.queryEdgeList();
      vm.indexDialogVisible = true;
    },
    queryTagList() {
      request({
        url: `/nebula_operate/showtag/${vm.space}`,
        method: 'get',
        data: {}
      }).then(res => {
        vm.tagList = res.data;
      });
    },
    queryEdgeList() {
      request({
        url: `/nebula_operate/showedge/${vm.space}`,
        method: 'get',
        data: {}
      }).then(res => {
        vm.edgeList = res.data;
      });
    },
    handleIndexTypeChange() {
      vm.indexCmd.onName = '';
      vm.indexCmd.fields = [];
    },
    handleIndexFieldClose(tagObj) {
      vm.indexCmd.fields.splice(vm.indexCmd.fields.indexOf(tagObj), 1);
    },
    handleIndexOnNameChange() {
      vm.indexCmd.fields = [];
      let url = '';
      if (vm.indexCmd.type == 'TAG') {
        url = `/nebula_operate/desctag/${vm.space}/${vm.indexCmd.onName}`;
      } else {
        url = `/nebula_operate/descedge/${vm.space}/${vm.indexCmd.onName}`;
      }
      request({
        url: url,
        method: 'get',
        data: {}
      }).then(res => {
        vm.indexFields = res.data;
      });
    },
    showAddIndexFieldDialog() {
      if (vm.indexCmd.onName.length == 0) {
        vm.$message.warning("请选择名称");
        return;
      }
      vm.indexFieldCmd = {
        fieldName: '',
        len: ''
      };
      vm.indexFieldDialogVisible = true;
    },
    addFieldToIndexCmd() {
      vm.indexCmd.fields.push(vm.indexFieldCmd);
      vm.indexFieldDialogVisible = false;
    },
    filterSelected(fieldName) {
      let _index = vm.indexCmd.fields.findIndex(row => {
        return row.fieldName == fieldName;
      });
      return _index < 0; // 存在了
    },
    submitAddIndex() {
      if (vm.indexCmd.onName.length == 0) {
        vm.$message.warning("请选择名称");
        return;
      }
      if (vm.indexCmd.name.length == 0) {
        vm.$message.warning("请填写索引名称");
        return;
      }
      request({
        url: `/nebula_operate/createindex/${vm.space}`,
        method: 'post',
        data: vm.indexCmd
      }).then(res => {
        vm.indexDialogVisible = false;
        vm.$parent.queryIndexList();
      });
    },
  }
}

</script>

<style>

.info-content > div {
  margin-bottom: 5px;
  line-height: 20px;
}


</style>