|
@@ -4,33 +4,40 @@
|
|
|
<a-divider orientation="left">主题定义</a-divider>
|
|
|
<a-row :gutter="24">
|
|
|
<a-col :span="8">
|
|
|
- <a-form-item :label-col="{span:6}" label="表编码" name="tabcode"
|
|
|
+ <a-form-item :label-col="{span:6}" label="主题名称" name="subjectName"
|
|
|
+ :rules="[{ required: true, message: '请填写主题名称!' }]">
|
|
|
+ <a-input v-model:value="dataModel.subjectName" placeholder="">
|
|
|
+ </a-input>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="8">
|
|
|
+ <a-form-item :label-col="{span:6}" label="表编码" name="tabCode"
|
|
|
:rules="[{ required: true, message: '请填写表编码!' }]">
|
|
|
- <a-input v-model:value="dataModel.tabcode" placeholder="">
|
|
|
+ <a-input v-model:value="dataModel.tabCode" placeholder="">
|
|
|
</a-input>
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
<a-col :span="8">
|
|
|
- <a-form-item :label-col="{span:6}" label="表名称" name="tabname"
|
|
|
+ <a-form-item :label-col="{span:6}" label="表名称" name="tabName"
|
|
|
:rules="[{ required: true, message: '请填表名称!' }]">
|
|
|
- <a-input v-model:value="dataModel.tabname" placeholder="">
|
|
|
+ <a-input v-model:value="dataModel.tabName" placeholder="">
|
|
|
</a-input>
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
<a-row :gutter="24">
|
|
|
<a-col :span="8">
|
|
|
- <a-form-item :label-col="{span:6}" label="是否有外键字段" name="isreferences"
|
|
|
+ <a-form-item :label-col="{span:8}" label="是否有外键字段" name="isReferences"
|
|
|
:rules="[{ required: true, message: '请填写是否有外键字段!' }]">
|
|
|
- <a-radio-group v-model:value="dataModel.isreferences">
|
|
|
+ <a-radio-group v-model:value="dataModel.isReferences">
|
|
|
<a-radio :value="1">是</a-radio>
|
|
|
<a-radio :value="0">否</a-radio>
|
|
|
</a-radio-group>
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
<a-col :span="8">
|
|
|
- <a-form-item :label-col="{span:6}" label="描述" name="tabdesc">
|
|
|
- <a-input v-model:value="dataModel.tabdesc" placeholder="">
|
|
|
+ <a-form-item :label-col="{span:6}" label="描述" name="tabDesc">
|
|
|
+ <a-input v-model:value="dataModel.tabDesc" placeholder="">
|
|
|
</a-input>
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
@@ -52,51 +59,35 @@
|
|
|
</a-row>
|
|
|
<a-row>
|
|
|
<a-col style="margin-bottom: 20px;">
|
|
|
- <a-table :columns="columns" :data-source="data" :pagination="false"
|
|
|
+ <a-table :columns="columns" :data-source="fieldData" :pagination="false"
|
|
|
bordered>
|
|
|
- <template #bodyCell="{ column ,index}">
|
|
|
- <template v-if="column.key === 'name'">
|
|
|
- <div>
|
|
|
- <a-input v-if="isEdit"
|
|
|
- v-model:value="data[index][column.key]" style="width: 200px"
|
|
|
- />
|
|
|
- <template v-else>
|
|
|
- {{ data[index][column.key] }}
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <template v-if="column.key === 'typeName'">
|
|
|
- <div>
|
|
|
- <a-input v-if="isEdit"
|
|
|
- v-model:value="data[index][column.key]" style="width: 200px"
|
|
|
- />
|
|
|
- <template v-else>
|
|
|
- {{ data[index][column.key] }}
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <template v-if="column.key === 'qty'">
|
|
|
- <div>
|
|
|
- <a-input v-if="isEdit"
|
|
|
- v-model:value="data[index][column.key]" style="width: 200px"
|
|
|
- />
|
|
|
- <template v-else>
|
|
|
- {{ data[index][column.key] }}
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
+ <template #bodyCell="{ column ,record,index}">
|
|
|
<template v-if="column.key === 'operation'">
|
|
|
- <a-button type="link" size="small" @click="deleteDevice(index)">删除</a-button>
|
|
|
+ <a-button type="link" size="small" @click="edit(record)">修改</a-button>
|
|
|
+ <a-popconfirm placement="leftTop"
|
|
|
+ title="是否删除数据?"
|
|
|
+ @confirm="onDelete(index)">
|
|
|
+ <a-button type="link" size="small">删除</a-button>
|
|
|
+ </a-popconfirm>
|
|
|
</template>
|
|
|
</template>
|
|
|
</a-table>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
- <a-divider orientation="left">生成Sql</a-divider>
|
|
|
+ <a-divider orientation="left">Sql预览</a-divider>
|
|
|
<a-row>
|
|
|
<a-col class="table-bottom-a1">
|
|
|
<a-form-item :label-col="{span:8}" label="" name="remark">
|
|
|
- <a-textarea v-model:value="dataModel.remark" placeholder="备注" :rows="5"/>
|
|
|
+ <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>
|
|
@@ -111,85 +102,152 @@
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
</a-form>
|
|
|
- <FieldEdit ref="modalRef" :loadData="loadData"></FieldEdit>
|
|
|
+ <FieldEdit ref="modalRef" :onSave="onFieldSave"></FieldEdit>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
|
-import {defineComponent, reactive, ref, toRefs} from 'vue';
|
|
|
+import {defineComponent, reactive, ref, toRefs, watch} from 'vue';
|
|
|
import {useTabsViewStore} from '@/store/modules/tabsView';
|
|
|
import BUploadFile from "@/components/file/uploadFile.vue";
|
|
|
import type {TableColumnsType} from 'ant-design-vue';
|
|
|
import {save} from '@/api/common';
|
|
|
import FieldEdit from "@/views/subject/fieldedit.vue";
|
|
|
+import {getDictionaryItemList} from "@/api/system/dictionary";
|
|
|
+import {Codemirror} from 'vue-codemirror'
|
|
|
+import {oneDark} from '@codemirror/theme-one-dark'
|
|
|
+import {sql, MySQL} from '@codemirror/lang-sql';
|
|
|
+import type {Subjectfield, Subject} from "@/views/subject/model";
|
|
|
|
|
|
interface FormState {
|
|
|
- dataModel: any;
|
|
|
+ dataModel: Subject;
|
|
|
}
|
|
|
|
|
|
export default defineComponent({
|
|
|
- name: 'ClassroomEditForm',
|
|
|
+ name: 'subjectEditForm',
|
|
|
components: {
|
|
|
- BUploadFile,FieldEdit
|
|
|
+ BUploadFile, FieldEdit, Codemirror, MySQL, sql, oneDark
|
|
|
},
|
|
|
setup() {
|
|
|
- const formState = reactive<FormState>({dataModel: {}});
|
|
|
+ const subject: Subject = {
|
|
|
+ subjectName: "",
|
|
|
+ tabCode: "",
|
|
|
+ tabName: "",
|
|
|
+ isReferences: 0,
|
|
|
+ tabDesc: ""
|
|
|
+ }
|
|
|
+ const formState = reactive<FormState>({dataModel: subject});
|
|
|
const tabsViewStore = useTabsViewStore();
|
|
|
const modalRef = ref();
|
|
|
+ const fieldData = ref<Subjectfield[]>([]);
|
|
|
+ const settingTypeList = ref([{name: '', value: ''}]);
|
|
|
+ const queryTypeList = ref([{name: '', value: ''}]);
|
|
|
+ const lang = sql();
|
|
|
+ const code = ref("");
|
|
|
+ let isEdit = false;
|
|
|
|
|
|
const onFinish = () => {
|
|
|
- formState.dataModel.device = data.value
|
|
|
- save('', formState.dataModel).then(result => {
|
|
|
+ save('/subject/saveSubject', {dataModel: formState.dataModel, fieldList: fieldData.value}).then(result => {
|
|
|
+ debugger
|
|
|
if (result) {
|
|
|
onClose(1)
|
|
|
}
|
|
|
});
|
|
|
};
|
|
|
- const onFinishFailed = (errorInfo: any) => {
|
|
|
- console.log('Failed:', errorInfo);
|
|
|
- };
|
|
|
|
|
|
const onClose = (reload: any) => {
|
|
|
- tabsViewStore.closeCurrentTabByPath("/practicebase/classroom/edit");
|
|
|
- tabsViewStore.openTab("/practicebase/classroom/list", {reload: reload});
|
|
|
+ tabsViewStore.closeCurrentTabByPath("/views/subjectedit");
|
|
|
+ tabsViewStore.openTab("views/subjectlist", {reload: reload});
|
|
|
};
|
|
|
|
|
|
- const loadData = async (id) => {
|
|
|
+ getDictionaryItemList({code: "queryType"}).then(data => {
|
|
|
+ queryTypeList.value = data;
|
|
|
+ });
|
|
|
+
|
|
|
+ getDictionaryItemList({code: "settingType"}).then(data => {
|
|
|
+ settingTypeList.value = data;
|
|
|
+ });
|
|
|
+
|
|
|
+ const onFieldSave = async (model: Subjectfield) => {
|
|
|
+ if (!isEdit) {
|
|
|
+ fieldData.value.push(model);
|
|
|
+ }
|
|
|
+ formState.dataModel.isReferences = fieldData.value.filter((x) => x.isForeignKey == 1).length > 0 ? 1 : 0;
|
|
|
+ }
|
|
|
+ const loadData = (id) => {
|
|
|
console.log(id)
|
|
|
}
|
|
|
-
|
|
|
const columns: TableColumnsType = [
|
|
|
{
|
|
|
title: '序号', width: 80, dataIndex: 'num', key: 'num', align: "center", customRender: ({index}) => {
|
|
|
return `${index + 1}`;
|
|
|
}
|
|
|
},
|
|
|
- {title: '设备名称', dataIndex: 'name', key: 'name', align: "center"},
|
|
|
- {title: '设备型号', dataIndex: 'typeName', key: 'typeName', align: "center"},
|
|
|
- {title: '数量', dataIndex: 'qty', key: 'qty', align: "center"},
|
|
|
+ {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: '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"},
|
|
|
{title: '操作', key: 'operation', fixed: 'right', width: 120, align: "center"},
|
|
|
];
|
|
|
- const isEdit = true;
|
|
|
const data = ref([]);
|
|
|
|
|
|
const add = () => {
|
|
|
- modalRef.value.show(formState.dataModel.subid);
|
|
|
+ isEdit = false;
|
|
|
+ modalRef.value.show(null);
|
|
|
+ }
|
|
|
+ const edit = (record) => {
|
|
|
+ isEdit = true;
|
|
|
+ modalRef.value.show(record);
|
|
|
}
|
|
|
- const deleteDevice = (record) => {
|
|
|
- (data.value as any[]).splice(record, 1);
|
|
|
- // delDev();
|
|
|
+ const onDelete = (record) => {
|
|
|
+ fieldData.value.splice(record, 1);
|
|
|
}
|
|
|
+ watch(
|
|
|
+ () => [formState.dataModel.tabCode, fieldData],
|
|
|
+ () => {
|
|
|
+ code.value = ` select ${formState.dataModel.tabCode}.*`;
|
|
|
+ fieldData.value.filter(x => x.isForeignKey == 1).forEach(x => {
|
|
|
+ code.value += `,${x.referencesTab}.${x.displayColumn} as ${x.fieldAlias}`
|
|
|
+ })
|
|
|
+ code.value += ` from ${formState.dataModel.tabCode}`;
|
|
|
+ fieldData.value.filter(x => x.isForeignKey == 1).forEach(x => {
|
|
|
+ code.value += ` left join ${x.referencesTab} on ${formState.dataModel.tabCode}.${x.fieldCode}=${x.referencesTab}.${x.foreignKey}`
|
|
|
+ })
|
|
|
+ }, {deep: true}
|
|
|
+ );
|
|
|
return {
|
|
|
...toRefs(formState),
|
|
|
- onFinish,
|
|
|
- onFinishFailed,
|
|
|
- loadData,
|
|
|
- onClose,
|
|
|
- add,
|
|
|
- deleteDevice,
|
|
|
+ onFinish, onFieldSave, onClose, add,
|
|
|
+ edit,
|
|
|
+ onDelete,
|
|
|
+ loadData, oneDark,
|
|
|
+ fieldData,
|
|
|
columns,
|
|
|
isEdit,
|
|
|
data,
|
|
|
+ lang,
|
|
|
+ code,
|
|
|
modalRef,
|
|
|
};
|
|
|
},
|