smartsearch/vue/src/views/subject/fieldedit.vue

<template>
  <a-modal
    :width="1200"
    v-model:visible="visible"
    :title="title"
    :confirm-loading="confirmLoading"
    :keyboard="false"
    :footer="null"
    :mask-closable="false">
    <Form :ref="modalFormRef" :model="dataModel" @finish="handleOk" autocomplete="off">
      <a-divider orientation="left">基础信息</a-divider>
      <a-row type="flex">
        <a-col :span="7">
          <a-form-item label="字段编码" name="fieldCode" :label-col="{span:7}"
                       :rules="[{ required: true, message: '请填写字段编码!' }]">
            <a-input v-model:value="dataModel.fieldCode" placeholder="">
            </a-input>
          </a-form-item>
        </a-col>
        <a-col :span="7">
          <a-form-item label="字段名称" name="fieldName" :label-col="{span:7}"
                       :rules="[{ required: true, message: '请填写字段名称!' }]">
            <a-input v-model:value="dataModel.fieldName" placeholder="">
            </a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row type="flex">
        <a-col :span="7">
          <a-form-item label="配置类型" name="settingTypeId" :label-col="{span:7}"
                       :rules="[{ required: true, message: '请选择配置类型!' }]">
            <a-select ref="select" v-model:value="dataModel.settingTypeId"
                      :options="settingTypeList" :field-names="{label:'name',value:'value'}" :allow-clear="true">
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="7">
          <a-form-item label="数据类型" name="dataType" :label-col="{span:7}"
                       :rules="[{ required: true, message: '请选择数据类型!' }]">
            <a-select ref="select" v-model:value="dataModel.dataType"
                      :options="DataTypeList" :field-names="{label:'name',value:'value'}" :allow-clear="true">
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="7">
          <a-form-item label="是否查询字段" name="isSearchField" :label-col="{span:7}">
            <a-radio-group v-model:value="dataModel.isSearchField">
              <a-radio :value="1">是</a-radio>
              <a-radio :value="0">否</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row type="flex">
        <a-col :span="7">
          <a-form-item label="查询类型" name="queryTypeId" :label-col="{span:7}"
                       :rules="[{ required: true, message: '请选择配置类型!' }]">
            <a-select ref="select" v-model:value="dataModel.queryTypeId"
                      :options="queryTypeList" :field-names="{label:'name',value:'value'}" :allow-clear="true">
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="7" v-if="dataModel.queryTypeId==8">
          <a-form-item label="取数字典编码" name="dictionaryCode" :label-col="{span:7}"
                       :rules="[{ required: true, message: '请选择数据类型!' }]">
            <a-input v-model:value="dataModel.dictionaryCode" placeholder="">
            </a-input>
          </a-form-item>
        </a-col>
        <a-col :span="7">
          <a-form-item label="显示排序" name="disOrder" :label-col="{span:7}" :rules="[{ required: true, message: '请输入显示排序!' }]">
            <a-input-number v-model:value="dataModel.disOrder">
            </a-input-number>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row type="flex">
        <a-col :span="7">
          <a-form-item label="是否关联字段" name="isForeignKey" :label-col="{span:7}">
            <a-radio-group v-model:value="dataModel.isForeignKey">
              <a-radio :value="1">是</a-radio>
              <a-radio :value="0">否</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col :span="7" v-if="dataModel.isForeignKey==1">
          <a-form-item label="显示别名" name="fieldAlias" :label-col="{span:7}"
                       :rules="[{ required: true, message: '请填写显示别名!' }]">
            <a-input v-model:value="dataModel.fieldAlias" placeholder="">
            </a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row type="flex"  v-if="dataModel.isForeignKey==1">
        <a-col :span="7">
          <a-form-item label="外键表" name="referencesTab" :label-col="{span:7}"
                       :rules="[{ required: true, message: '请输入外键表!' }]">
            <a-input v-model:value="dataModel.referencesTab" placeholder="">
            </a-input>
          </a-form-item>
        </a-col>
        <a-col :span="7">
          <a-form-item label="外键列" name="foreignKey" :label-col="{span:7}"
                       :rules="[{ required: true, message: '请输入外键列!' }]">
            <a-input v-model:value="dataModel.foreignKey" placeholder="">
            </a-input>
          </a-form-item>
        </a-col>
        <a-col :span="7">
          <a-form-item label="外键表显示列" name="displayColumn" :label-col="{span:7}" :rules="[{ required: true, message: '请输入外键表显示列!' }]">
            <a-input v-model:value="dataModel.displayColumn" placeholder="">
            </a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row v-if="dataModel.isForeignKey==1">
        <a-col :span="21">
          <a-form-item label="sql预览" name="displayColumn" :label-col="{span:2}" >
            <codemirror
              v-model="code"
              :style="{ height: '100px',width:'100%' }"
              :autofocus="true"
              :indent-with-tab="true"
              :lang="lang"
              disabled="false"
              tab-size="2"
              :theme="oneDark"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row style="height: 20px"></a-row>
      <a-row type="flex">
        <a-col :span="24" style="text-align: right;margin-right: 20px;">
          <a-button type="primary" html-type="submit">提交</a-button>
        </a-col>
      </a-row>
    </Form>
  </a-modal>
</template>
<script lang="ts">
import {Form} from 'ant-design-vue';
import {defineComponent, reactive, ref, watch} from "vue";
import BUploadFile from "@/components/file/uploadFile.vue";
import type {SelectProps} from "ant-design-vue";
import {getDictionaryItemList} from "@/api/system/dictionary";
import type {FormInstance} from 'ant-design-vue';
import {DataTypeList} from '@/enums/dictions';
import { Codemirror } from 'vue-codemirror'
import { oneDark } from '@codemirror/theme-one-dark'
import { sql, MySQL } from '@codemirror/lang-sql';
import type {Subjectfield} from "@/views/subject/model";

export default defineComponent({
  name: 'FieldEdit',
  components: {BUploadFile, Form,Codemirror,MySQL,sql,oneDark},
  props: {
    onSave: {
      type: Function,
      default: null
    }
  },
  setup(props) {
    const visible = ref<boolean>(false);
    const confirmLoading = ref<boolean>(false);
    const modalFormRef = ref<FormInstance>();
    const defaultValue = reactive<Subjectfield>({
      fieldCode: "",
      fieldName: "",
      fieldAlias: "",
      settingTypeId: "",
      fieldDesc: "",
      dataType: null,
      queryTypeId: "",
      isSearchField: 1,
      dictionaryCode: '',
      isForeignKey: 0,
      foreignKey: '',
      displayColumn: '',
      referencesTab: ''
    });
    const dataModel = ref({...defaultValue});
    const settingTypeList = ref<SelectProps['options']>();
    const queryTypeList = ref<SelectProps['options']>();
    const title = ref();

    const lang=sql();
    const code =ref("");
    const options = {
      disabled: false,
      indentWithTab: true,
      tabSize: 2,
      autofocus: true,
      height: 'auto',
      language: 'javascript',
      theme:'oneDark'
    }
    getDictionaryItemList({code: "settingType"}).then(data => {
      settingTypeList.value = data;
    });
    getDictionaryItemList({code: "queryType"}).then(data => {
      queryTypeList.value = data;
    });

    const show = (record: any) => {
      if(record==null) {
        record = {...defaultValue} ;
      }
      dataModel.value =record;
      title.value = "主题字段定义";
      visible.value = true;
    };


    const handleOk = () => {
      props.onSave(dataModel.value);
      visible.value=false;
    };

    const handleCancel = () => {
      visible.value = false;
    };

    watch(
      () => [dataModel.value.fieldCode,dataModel.value.fieldAlias,dataModel.value.foreignKey,dataModel.value.referencesTab,dataModel.value.displayColumn],
      () => {
       code.value=` select 主表.*,${dataModel.value.referencesTab}.${dataModel.value.displayColumn} as ${dataModel.value.fieldAlias} from 主表 ` +
         `inner join ${dataModel.value.referencesTab}  on 主表.${dataModel.value.fieldCode} =${dataModel.value.referencesTab}.${dataModel.value.foreignKey}`
      },
    );
    return {
      dataModel,
      modalFormRef,
      visible,title,options,code,oneDark,lang,
      confirmLoading,
      settingTypeList,
      DataTypeList,
      queryTypeList,
      show, handleOk,handleCancel,
    };
  },
  mounted() {

  },
})
</script>