IDCDatasync-vue/src/views/data/modules/dataIndexingModal.vue

<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    okText="保存"
    cancelText="关闭">

    <a-spin :spinning="confirmLoading">
      <a-form-model ref="ruleForm" :model="form" :rules="rules">
        <a-form-model-item label="索引名称" :labelCol="labelCol" >
          <a-input v-model="form.indexName" ></a-input>
        </a-form-model-item>
        <a-form-model-item label="索引类型" >
          <a-select v-model="form.indexTypeId" placeholder="选择索引类型" option-filter-prop="children" size="large">
            <a-select-option :value="0">
              普通索引
            </a-select-option>
            <a-select-option :value="1">
              唯一索引
            </a-select-option>
            <a-select-option :value="2">
              全文索引
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="字段" :labelCol="labelCol" >
          <a-tree-select v-model="checkedList" style="width: 100%"
                        :tree-data="treeData" multiple search-placeholder="请选项" 
                        :dropdownStyle="{ maxHeight: '400px', overflowY: 'auto'}"/>
        </a-form-model-item>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
import moment from "moment"
import { getAction, deleteAction, putAction, postAction } from '@/api/manage'

import pick from 'lodash.pick'
  
  export default {
    name: "dataIndexingModal",
    components: {
    },
    data () {
      return {
        title:"操作",
        buttonStyle: 'solid',
        visible: false,
        dateFormat:'YYYY-MM-DD HH:mm:ss',
        status:'',
        model: {},
        confirmLoading: false,
        form: {
          indexName: '',
          columnName: '',
          indexTypeId: 0
        },
        rules: {
          indexName: [{ required: true, message: '索引名称', trigger: 'blur' },{ min: 1, max: 60, message: '长度1-60位' },],
          indexTypeId: [{ required: true, message: '请选择', trigger: 'change' }]
        },
        strategys:[],
        dataStrategySelected:'',
        idcDataStrategyId:"",
        shipMode:{},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        shipNum:{},
        rangeTime:[],
        treeData: [],
        schemaMass:"",
        tableName:"",
        checkedList:[]
      }
    },
    created () {
    },
    methods: {
      getQuerytableColumns() {
        getAction("/dataManager/getTableColumnNames?schemaMass="+this.schemaMass+"&tableName="+this.tableName, {}).then((res) => {
          if (res.success) {
            this.treeData = []
              res.result.forEach(element => {
                  this.treeData.push({
                      title: element,
                      value: element,
                      key: element,
                  })
              });
          } else {
            this.$message.warning(res.message);
          }
        });
      },
      add (schemaMass,tableName) {
        this.schemaMass = schemaMass;
        this.tableName = tableName;
        this.visible =true;
        this.form ={
          indexName: '',
          columnName: '',
          indexTypeId: 0
        };
        this.checkedList =[];
        this.getQuerytableColumns()
      },
      edit (schemaMass,tableName,record) {
        console.log(schemaMass,tableName);
        this.schemaMass = schemaMass;
        this.tableName = tableName;
        this.getQuerytableColumns()
        this.visible =true;
        this.form.indexName = record.indexName;
        this.checkedList = record.columnName.split(',');
        this.form.indexTypeCode = record.indexTypeId;

      },
      close () {
        this.visible =false;
      },
      handleOk () {
        const that = this;
        // 触发表单验证
        this.$refs.ruleForm.validate((valid, values) => {
          console.log('values',values)
          if (valid) {
            that.confirmLoading = true;
            this.model.indexName = this.form.indexName;
            this.model.columns = this.checkedList.join(',');
            this.model.indexTypeCode = this.form.indexTypeId;
            
            postAction("/tableIndex/updateIndexSafe?schemaMass="+this.schemaMass+"&tableName="+this.tableName+"&indexName="+this.model.indexName+"&columns="+this.model.columns+"&indexTypeCode="+this.model.indexTypeCode,{}).then(res => {
              if (res.success) {
                console.log(res);
                that.$message.success(res.result);
                that.visible =false;
                that.$emit('ok');
              } else {
                that.$message.warning(res.message);
              }
              that.confirmLoading = false;
            })
          }
        })
      },
      handleCancel () {
        this.close()
      },
    }
  }
</script>

<style scoped>
.disabled{
  pointer-events: none;
}
</style>