smartsearch/vue/src/views/subject/detail.vue

<template>
  <div class="card-edit">
    <a-divider orientation="left">主题定义</a-divider>
    <a-descriptions title="" bordered>
      <a-descriptions-item   :labelStyle="{'width':'12%'}" :contentStyle="{'width':'21%'}"  label="主题名称"> {{ dataModel.subjectName }}</a-descriptions-item>
      <a-descriptions-item  :labelStyle="{'width':'12%'}" :contentStyle="{'width':'21%'}"  label="表编码"> {{ dataModel.tabCode }}</a-descriptions-item>
      <a-descriptions-item  :labelStyle="{'width':'12%'}" :contentStyle="{'width':'21%'}"  label="表名称"> {{ dataModel.tabName }}</a-descriptions-item>
      <a-descriptions-item   :labelStyle="{'width':'12%'}" :contentStyle="{'width':'21%'}"  label="描述"> {{ dataModel.tabDesc }}</a-descriptions-item>
      <a-descriptions-item  :labelStyle="{'width':'12%'}" :contentStyle="{'width':'21%'}"  label="是否有外键字段"> {{ dataModel.isReferences==1?"是":"否" }}</a-descriptions-item>
     </a-descriptions>
    <a-divider orientation="left">字段定义</a-divider>
    <a-table :columns="columns" :data-source="fieldData" :scroll="{ x:'100%', y: 500 }" :pagination="false"
             bordered>
    </a-table>
    <a-divider orientation="left">Sql预览</a-divider>
    <codemirror
      v-model="dataModel.execSql"
      :style="{ height: '100px',width:'100%' }"
      :autofocus="true"
      :indent-with-tab="true"
      disabled="false"
      tab-size="2"
      :theme="'oneDark'"
    />
    <a-form-item class="buttom-btns">
      <a-button @click="onClose">关闭</a-button>
    </a-form-item>
  </div>
</template>
<script  lang="ts">
import { ref,defineComponent} from 'vue';
import {get} from "@/api/common";
import {useTabsViewStore} from "@/store/modules/tabsView";
import dayjs from "dayjs";
import type {TableColumnsType} from "ant-design-vue";
import {getDictionaryItemList} from "@/api/system/dictionary";
import type {Subject, Subjectfield} from "@/views/subject/model";
import {Codemirror} from 'vue-codemirror';
import {MySQL, sql} from "@codemirror/lang-sql";
import {oneDark} from "@codemirror/theme-one-dark";
import {useRoute} from "vue-router";
import router from "@/router";

export default defineComponent({
  name: 'subjectDetail',
  components: {
    Codemirror, MySQL, sql, oneDark
  },
  setup() {
    const tabsViewStore = useTabsViewStore();
    const route = useRoute();
    const fieldData = ref<Subjectfield[]>([]);
    const dataModel = ref<Subject>();
    const settingTypeList = ref([{name: '', value: ''}]);
    const queryTypeList = ref([{name: '', value: ''}]);

    getDictionaryItemList({code: "queryType"}).then(data => {
      queryTypeList.value = data;
    });

    getDictionaryItemList({code: "settingType"}).then(data => {
      settingTypeList.value = data;
    });
    const columns: TableColumnsType = [
      {
        title: '序号', width: 80, dataIndex: 'num', key: 'num', align: "center", customRender: ({index}) => {
          return `${index + 1}`;
        }
      },
      {title: '字段编码', dataIndex: 'fieldCode', key: 'fieldCode', align: "center"},
      {title: '字段名称', dataIndex: 'fieldName', key: 'fieldName', align: "center"},
      {
        title: '配置类型', dataIndex: 'settingTypeId', key: 'settingTypeId', align: "center", customRender: ({record}) => {
          return settingTypeList.value.filter(x => x.value == record.settingTypeId)[0]?.name;
        }
      },
      {
        title: '是否查询字段', dataIndex: 'isSearchField', key: 'isSearchField', align: "center", customRender: ({record}) =>
          record.isSearchField == "1" ? "是" : "否"
      },
      {
        title: '查询类型', dataIndex: 'queryTypeId', key: 'queryTypeId', align: "center", customRender: ({record}) =>
          queryTypeList.value.filter(x => x.value == record.queryTypeId)[0]?.name
      },
      {title: '取数字典编码', dataIndex: 'dictionaryCode', key: 'dictionaryCode', align: "center"},
      {title: '显示排序', dataIndex: 'disOrder', key: 'disOrder', align: "center"},
      {
        title: '标签', dataIndex: 'tagList', key: 'tagList', align: "center", customRender: ({record}) =>
          record.tagList == null ? "" : (record.tagList as []).join(",")
      },
      {
        title: '是否关联字段', dataIndex: 'isForeignKey', key: 'isForeignKey', align: "center", customRender: ({record}) =>
          record.isForeignKey == "1" ? "是" : "否"
      },
      {title: '显示别名', dataIndex: 'fieldAlias', key: 'fieldAlias', align: "center"},
      {title: '外键表', dataIndex: 'referencesTab', key: 'referencesTab', align: "center"},
      {title: '外键列', dataIndex: 'foreignKey', key: 'foreignKey', align: "center"},
      {title: '外键表显示列', dataIndex: 'displayColumn', key: 'displayColumn', align: "center"},
    ];
    const loadData = async (id) => {
      get('subject/getSubject',
        {subjectId: id}).then(data => {
        dataModel.value = data;
      })
      get('subject/getFieldList',
        {subjectId: id}).then(data => {
        fieldData.value = data;
      })
    }
    loadData( history.state.params?.id);

    const onClose = () => {
      tabsViewStore.closeCurrentTab(route);
      router.back();
    };

    return {
      loadData,columns,fieldData,
      onClose,
      dataModel,
      dayjs
    };
  },
  created() {
    const id = history.state.params?.id;
    const approveKeyID =ref( history.state.params?.approveKeyID);
    this.loadData(id ? id : approveKeyID.value);
  }
});
</script>