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==4">
          <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="14">
          <a-form-item label="标签" name="queryTypeId" :label-col="{span:3}"
                       :rules="[{ required: true, message: '请选择标签' }]">
            <a-select
              v-model:value="dataModel.tagList"
              mode="tags"
              style="width: 100%"
              :options="tagOptions">
            </a-select>
          </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%' ,fontSize:'16px'}"
              :autofocus="true"
              :indent-with-tab="true"
              disabled="false"
              tab-size="2"
              :extensions="[sql(),solarizedLight]"
            />
          </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 {solarizedLight} from 'thememirror';
import {sql, MySQL} from '@codemirror/lang-sql';
import type {Subjectfield} from "@/views/subject/model";
import {get} from '@/api/common';

export default defineComponent({
  name: 'FieldEdit',
  components: {BUploadFile, Form, Codemirror, MySQL, sql, solarizedLight},
  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: '',
      tagList: []
    });
    const dataModel = ref({...defaultValue});
    const settingTypeList = ref<SelectProps['options']>();
    const queryTypeList = ref<SelectProps['options']>();
    const tagOptions = ref();
    const title = ref();

    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;
    });
    get('subject/getTagList', {}).then((data: any[]) => {
      tagOptions.value = data.map(x => ({value: x.tagName}));
    })
    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,sql, solarizedLight, tagOptions,
      confirmLoading,
      settingTypeList,
      DataTypeList,
      queryTypeList,
      show, handleOk, handleCancel,
    };
  },
  mounted() {

  },
})
</script>