|
@@ -1,14 +1,70 @@
|
|
|
<template>
|
|
|
- <div id="table" style="padding: 20px"></div>
|
|
|
+ <div id="table" style="margin: 20px">
|
|
|
+ <div v-show="view === 'table'">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="23" style="text-align: right; padding: 10px 0">
|
|
|
+ <el-button type="primary" :disabled="!(project && project.id)" @click="toAdd">添加表</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-table :data="list" style="width: 100%" stripe border fit>
|
|
|
+ <el-table-column align="center" prop="name" label="表名" />
|
|
|
+ <el-table-column align="center" prop="remark" label="备注" />
|
|
|
+ <el-table-column align="center" label="操作">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-link :underline="false" size="mini" type="primary" @click="toEdit(row.id)">修改</el-link>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-link :underline="false" size="mini" type="warning" @click="toExport(row.id)">导出</el-link>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-link :underline="false" size="mini" type="danger" @click="toDelete(row.id)">删除</el-link>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <el-card v-show="view !== 'table'" class="backCard">
|
|
|
+ <el-affix target=".backCard" :offset="0">
|
|
|
+ <el-row style="margin: 20px 0; background: #abc">
|
|
|
+ <el-col :span="7" style="text-align: center">
|
|
|
+ <el-button @click="toReturn">返回</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8" style="text-align: center">
|
|
|
+ <el-button type="primary" @click="submit()">提交</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8" style="text-align: center">
|
|
|
+ <el-button @click="resetForm()">重置</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-affix>
|
|
|
+ <el-form ref="form" :model="form" label-position="left" label-width="120px">
|
|
|
+ <el-form-item label="表名" prop="name" :required="true">
|
|
|
+ <el-input v-model="form.name"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="备注" prop="remark">
|
|
|
+ <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 4 }" v-model="form.remark"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="字段列表">
|
|
|
+ <column-table v-model:value="form.columns"></column-table>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import table from '@/api/table';
|
|
|
+import columnTable from './column.vue';
|
|
|
const _ = require('lodash');
|
|
|
-import { defineComponent } from 'vue';
|
|
|
+import { defineComponent, defineAsyncComponent } from 'vue';
|
|
|
export default defineComponent({
|
|
|
name: 'tables',
|
|
|
- components: {},
|
|
|
+ components: { columnTable },
|
|
|
props: {
|
|
|
project: Object,
|
|
|
},
|
|
@@ -17,18 +73,78 @@ export default defineComponent({
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- table: undefined,
|
|
|
+ view: 'table',
|
|
|
+ form: {
|
|
|
+ columns: [],
|
|
|
+ },
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
async toSearch({ skip = 0, limit = 10, ...condition } = {}) {
|
|
|
- await this.query({ skip, limit, ...condition });
|
|
|
+ await this.query({ skip, limit, ...condition, project: _.get(this.project, 'id') });
|
|
|
+ },
|
|
|
+ async toEdit(id) {
|
|
|
+ if (!id) {
|
|
|
+ this.$message.error('没有选择要修改的表');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ const data = await this.fetch(id);
|
|
|
+ this.form = data;
|
|
|
+ this.view = 'form';
|
|
|
+ },
|
|
|
+ async toDelete(id) {
|
|
|
+ if (!id) {
|
|
|
+ this.$message.error('没有选择要删除的表');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ this.$confirm('确认删除该数据?', '提示', {
|
|
|
+ confirmButtonText: '确认删除',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning',
|
|
|
+ }).then(async () => {
|
|
|
+ const data = await this.destory(id);
|
|
|
+ if (data) await this.query();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ async submit() {
|
|
|
+ this.$refs.form.validate(async (valid) => {
|
|
|
+ if (valid) {
|
|
|
+ let res;
|
|
|
+ const data = _.cloneDeep(this.form);
|
|
|
+ if (!_.get(data, 'id')) res = await this.create(data);
|
|
|
+ else res = await this.update(data);
|
|
|
+ if (res) {
|
|
|
+ this.view = 'table';
|
|
|
+ await this.query();
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ console.log('error submit!!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ async toExport(id) {
|
|
|
+ const res = await this.exportData({ ids: [id] });
|
|
|
+ console.log(JSON.parse(res));
|
|
|
+ },
|
|
|
+ toAdd() {
|
|
|
+ this.view = 'form';
|
|
|
+ this.form.project = _.get(this.project, 'id');
|
|
|
+ this.resetForm();
|
|
|
+ },
|
|
|
+ toReturn() {
|
|
|
+ this.view = 'table';
|
|
|
+ this.form = { columns: [] };
|
|
|
+ },
|
|
|
+ resetForm() {
|
|
|
+ this.$refs.form.resetFields();
|
|
|
},
|
|
|
},
|
|
|
watch: {
|
|
|
project: {
|
|
|
handler(val, oval) {
|
|
|
- if (_.get(val, 'id')) this.toSearch({ skip: 0, limit: 10, project: _.get(val, 'id') });
|
|
|
+ if (_.get(val, 'id')) this.toSearch({ skip: 0, limit: 10 });
|
|
|
},
|
|
|
deep: true,
|
|
|
},
|