|
|
@@ -0,0 +1,557 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <el-form
|
|
|
+ :model="queryParams"
|
|
|
+ ref="queryForm"
|
|
|
+ size="small"
|
|
|
+ :inline="true"
|
|
|
+ v-show="showSearch"
|
|
|
+ label-width="68px"
|
|
|
+ >
|
|
|
+ <el-form-item label="表格组名" prop="dtName">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.dtName"
|
|
|
+ placeholder="请输入表格组名"
|
|
|
+ clearable
|
|
|
+ @keyup.enter.native="handleQuery"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ icon="el-icon-search"
|
|
|
+ size="mini"
|
|
|
+ @click="handleQuery"
|
|
|
+ >搜索</el-button
|
|
|
+ >
|
|
|
+ <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
|
|
|
+ >重置</el-button
|
|
|
+ >
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <el-row :gutter="10" class="mb8">
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ plain
|
|
|
+ icon="el-icon-plus"
|
|
|
+ size="mini"
|
|
|
+ @click="handleAdd"
|
|
|
+ >新增</el-button
|
|
|
+ >
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button
|
|
|
+ type="danger"
|
|
|
+ plain
|
|
|
+ icon="el-icon-delete"
|
|
|
+ size="mini"
|
|
|
+ :disabled="multiple"
|
|
|
+ @click="handleDelete"
|
|
|
+ >删除</el-button
|
|
|
+ >
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button type="danger" plain size="mini" @click="handlePreview"
|
|
|
+ >动态页面</el-button
|
|
|
+ >
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-table
|
|
|
+ v-loading="loading"
|
|
|
+ :data="tableList"
|
|
|
+ ref="tableRef"
|
|
|
+ @selection-change="handleSelectionChange"
|
|
|
+ >
|
|
|
+ <el-table-column type="selection" width="55" align="center" />
|
|
|
+ <el-table-column label="表格组名" align="center" prop="tId" />
|
|
|
+ <el-table-column label="描述" align="center" prop="dtName" />
|
|
|
+ <el-table-column label="表格数" align="center" prop="dtNickname" />
|
|
|
+ <el-table-column label="成员表格" align="center" prop="tableKey" />
|
|
|
+ <el-table-column
|
|
|
+ label="操作"
|
|
|
+ align="center"
|
|
|
+ class-name="small-padding fixed-width"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-dropdown>
|
|
|
+ <el-button type="warning" plain size="small">
|
|
|
+ 处理<i class="el-icon-arrow-down el-icon--right"></i>
|
|
|
+ </el-button>
|
|
|
+ <el-dropdown-menu slot="dropdown">
|
|
|
+ <el-dropdown-item>
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-edit"
|
|
|
+ @click="handleUpdate(scope.row)"
|
|
|
+ >修改
|
|
|
+ </el-button>
|
|
|
+ </el-dropdown-item>
|
|
|
+ <el-dropdown-item>
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-delete"
|
|
|
+ @click="handleDelete(scope.row)"
|
|
|
+ >删除
|
|
|
+ </el-button>
|
|
|
+ </el-dropdown-item>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </el-dropdown>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <pagination
|
|
|
+ v-show="total > 0"
|
|
|
+ :total="total"
|
|
|
+ :page.sync="queryParams.pageNum"
|
|
|
+ :limit.sync="queryParams.pageSize"
|
|
|
+ @pagination="getList"
|
|
|
+ />
|
|
|
+ <!-- 新增联动表格组弹窗 -->
|
|
|
+ <el-dialog title="新增动态表格组" :visible.sync="isShowTable" width="50%">
|
|
|
+ <div class="dialog_wrap">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ icon="el-icon-plus"
|
|
|
+ @click="addOneTable"
|
|
|
+ class="mb10"
|
|
|
+ >新增</el-button
|
|
|
+ >
|
|
|
+
|
|
|
+ <el-table
|
|
|
+ :data="tableDataList"
|
|
|
+ border
|
|
|
+ stripe
|
|
|
+ @selection-change="handleSelectionChange"
|
|
|
+ >
|
|
|
+ <el-table-column type="index" width="50" />
|
|
|
+ <el-table-column label="标题" prop="title" />
|
|
|
+ <el-table-column
|
|
|
+ label="表格名"
|
|
|
+ prop="tableName"
|
|
|
+ type="index"
|
|
|
+ width="50"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column label="显示字段" prop="showFields">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.showFields }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="关联字段" prop="theRelateField">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.theRelateField }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="可执行操作" prop="executeOptions">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.executeOptions }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="操作"
|
|
|
+ align="center"
|
|
|
+ class-name="small-padding fixed-width"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-dropdown>
|
|
|
+ <el-button type="warning" plain size="small">
|
|
|
+ 处理<i class="el-icon-arrow-down el-icon--right"></i>
|
|
|
+ </el-button>
|
|
|
+ <el-dropdown-menu slot="dropdown">
|
|
|
+ <el-dropdown-item>
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-edit"
|
|
|
+ @click="handleUpdate(scope.row)"
|
|
|
+ >修改
|
|
|
+ </el-button>
|
|
|
+ </el-dropdown-item>
|
|
|
+ <el-dropdown-item>
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-delete"
|
|
|
+ @click="handleDelete(scope.row)"
|
|
|
+ >删除
|
|
|
+ </el-button>
|
|
|
+ </el-dropdown-item>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </el-dropdown>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <template #footer>
|
|
|
+ <span>
|
|
|
+ <el-button @click="isShowTable = false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="() => {}">确认</el-button>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ <!-- 编辑某一条表格数据弹窗 -->
|
|
|
+ <el-dialog title="添加关联表格" :visible.sync="isShowForm" width="500px">
|
|
|
+ <div class="formWrap">
|
|
|
+ <el-form
|
|
|
+ ref="tableItemForm"
|
|
|
+ style="max-width: 350px"
|
|
|
+ :model="tableItemForm"
|
|
|
+ label-width="100px"
|
|
|
+ >
|
|
|
+ <el-form-item label="标题:">
|
|
|
+ <el-input
|
|
|
+ v-model="tableItemForm.title"
|
|
|
+ style="max-width: 221px"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="表格名称:">
|
|
|
+ <el-select
|
|
|
+ v-model="tableItemForm.tableId"
|
|
|
+ placeholder="请选择表格名称"
|
|
|
+ >
|
|
|
+ <el-option label="表格一" value="1"></el-option>
|
|
|
+ <el-option label="表格二" value="2"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="展示字段:">
|
|
|
+ <el-select
|
|
|
+ v-model="tableItemForm.showFields"
|
|
|
+ multiple
|
|
|
+ filterable
|
|
|
+ placeholder="请选择展示字段"
|
|
|
+ >
|
|
|
+ <el-option label="字段1" value="field1"></el-option>
|
|
|
+ <el-option label="字段2" value="field2"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="关联字段:">
|
|
|
+ <el-select
|
|
|
+ v-model="tableItemForm.theRelateField"
|
|
|
+ placeholder="请选择关联字段"
|
|
|
+ >
|
|
|
+ <el-option label="关联1" value="1"></el-option>
|
|
|
+ <el-option label="关联2" value="2"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="可执行操作:">
|
|
|
+ <el-select
|
|
|
+ v-model="tableItemForm.executeOptions"
|
|
|
+ multiple
|
|
|
+ filterable
|
|
|
+ placeholder="请选择执行操作"
|
|
|
+ >
|
|
|
+ <el-option label="操作1" value="field1"></el-option>
|
|
|
+ <el-option label="操作2" value="field2"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <template #footer>
|
|
|
+ <span>
|
|
|
+ <el-button @click="isShowForm = false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="confirmAddHandler">确认</el-button>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { listTable, removeTableList } from "@/api/dragform/tableList";
|
|
|
+import { delMenu } from "@/api/system/menu";
|
|
|
+import { mapGetters } from "vuex";
|
|
|
+import DictData from "@/components/DictData";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "relateTable",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 遮罩层
|
|
|
+ loading: false,
|
|
|
+ // 选中数组
|
|
|
+ ids: [],
|
|
|
+ // 选中数组(包含所有数据)
|
|
|
+ selection: [],
|
|
|
+ Keys: [],
|
|
|
+ menuIds: [],
|
|
|
+ // 非单个禁用
|
|
|
+ single: true,
|
|
|
+ // 非多个禁用
|
|
|
+ multiple: true,
|
|
|
+ // 显示搜索条件
|
|
|
+ showSearch: true,
|
|
|
+ // 总条数
|
|
|
+ total: 0,
|
|
|
+ // 动态格表格数据
|
|
|
+ tableList: [],
|
|
|
+ // 弹出层标题
|
|
|
+ title: "",
|
|
|
+ // 是否显示弹出层
|
|
|
+ open: false,
|
|
|
+ // 查询参数
|
|
|
+ queryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ dtName: null,
|
|
|
+ dtNickname: null,
|
|
|
+ tableKey: null,
|
|
|
+ sqlKey: null,
|
|
|
+ dtTableName: null,
|
|
|
+ dtNotes: null,
|
|
|
+ dtColumnName: null,
|
|
|
+ timeFormat: null,
|
|
|
+ spare: null,
|
|
|
+ spare1: null,
|
|
|
+ isSelection: null,
|
|
|
+ },
|
|
|
+ // 表单参数
|
|
|
+ form: {},
|
|
|
+ // 表单校验
|
|
|
+ rules: {},
|
|
|
+
|
|
|
+ // dialog弹窗数据
|
|
|
+ isShowTable: false,
|
|
|
+ isShowForm: false,
|
|
|
+ tableDataList: [
|
|
|
+ {
|
|
|
+ title: "",
|
|
|
+ tableId: "",
|
|
|
+ tableName: "",
|
|
|
+ showFields: [],
|
|
|
+ theRelateField: "",
|
|
|
+ executeOptions: [],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+
|
|
|
+ tableItemForm: {
|
|
|
+ title: "",
|
|
|
+ tableId: "",
|
|
|
+ tableName: "",
|
|
|
+ showFields: [],
|
|
|
+ theRelateField: "",
|
|
|
+ executeOptions: [],
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // this.getList();
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters(["addRoutes"]),
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ /** 查询动态格列表 */
|
|
|
+ getList() {
|
|
|
+ this.loading = true;
|
|
|
+ let tempSelection = JSON.parse(JSON.stringify(this.selection));
|
|
|
+ listTable(this.queryParams).then((response) => {
|
|
|
+ response.rows = response.rows.filter(
|
|
|
+ (item) => !tempSelection.find((val) => val.tId == item.tId)
|
|
|
+ );
|
|
|
+ this.tableList = [...tempSelection, ...response.rows];
|
|
|
+ this.total = response.total;
|
|
|
+ this.loading = false;
|
|
|
+ if (tempSelection.length) {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ tempSelection.forEach((item) => {
|
|
|
+ this.$refs.tableRef.toggleRowSelection(item);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 取消按钮
|
|
|
+ cancel() {
|
|
|
+ this.open = false;
|
|
|
+ this.reset();
|
|
|
+ },
|
|
|
+ // 表单重置
|
|
|
+ reset() {
|
|
|
+ this.form = {
|
|
|
+ tId: null,
|
|
|
+ dtName: null,
|
|
|
+ dtNickname: null,
|
|
|
+ tableKey: null,
|
|
|
+ sqlKey: null,
|
|
|
+ dtTableName: null,
|
|
|
+ dtNotes: null,
|
|
|
+ dtColumnName: null,
|
|
|
+ timeFormat: null,
|
|
|
+ spare: null,
|
|
|
+ spare1: null,
|
|
|
+ delFlag: null,
|
|
|
+ createBy: null,
|
|
|
+ createTime: null,
|
|
|
+ updateBy: null,
|
|
|
+ updateTime: null,
|
|
|
+ isSelection: null,
|
|
|
+ };
|
|
|
+ this.resetForm("form");
|
|
|
+ },
|
|
|
+ /** 搜索按钮操作 */
|
|
|
+ handleQuery() {
|
|
|
+ this.queryParams.pageNum = 1;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ /** 重置按钮操作 */
|
|
|
+ resetQuery() {
|
|
|
+ this.resetForm("queryForm");
|
|
|
+ this.handleQuery();
|
|
|
+ },
|
|
|
+ // 多选框选中数据
|
|
|
+ handleSelectionChange(selection) {
|
|
|
+ this.ids = selection.map((item) => item.tId);
|
|
|
+ this.Keys = selection.map((item) => item.sqlKey);
|
|
|
+ this.menuIds = selection.map((item) => item.menuId);
|
|
|
+ this.selection = selection;
|
|
|
+ this.single = selection.length !== 1;
|
|
|
+ this.multiple = !selection.length;
|
|
|
+ },
|
|
|
+ /** 新增按钮操作 */
|
|
|
+ handleAdd() {
|
|
|
+ this.isShowTable = true;
|
|
|
+ },
|
|
|
+ /** 修改按钮操作 */
|
|
|
+ async handleUpdate(row) {
|
|
|
+ // 兼容勾选单个的修改
|
|
|
+ let tId = row?.tId || this.ids[0];
|
|
|
+ // this.$router.push({
|
|
|
+ // path: "/system/fromModel/index/tableMange",
|
|
|
+ // query: {
|
|
|
+ // tId: tId,
|
|
|
+ // },
|
|
|
+ // });
|
|
|
+ },
|
|
|
+ /** 提交按钮 */
|
|
|
+ submitForm() {
|
|
|
+ this.$refs["form"].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ if (this.form.tId != null) {
|
|
|
+ updateTable(this.form).then((response) => {
|
|
|
+ this.$modal.msgSuccess("修改成功");
|
|
|
+ this.open = false;
|
|
|
+ this.getList();
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ addTable(this.form).then((response) => {
|
|
|
+ this.$modal.msgSuccess("新增成功");
|
|
|
+ this.open = false;
|
|
|
+ this.getList();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** 删除按钮操作 */
|
|
|
+ handleDelete(row) {
|
|
|
+ let data = {},
|
|
|
+ menuIdList = [];
|
|
|
+ if (row.tId && row.sqlKey) {
|
|
|
+ data.tIds = [row.tId];
|
|
|
+ data.sqlKeys = [row.sqlKey];
|
|
|
+ menuIdList.push(row.menuId);
|
|
|
+ } else {
|
|
|
+ data.tIds = this.ids;
|
|
|
+ data.sqlKeys = this.Keys;
|
|
|
+ menuIdList = this.menuIds;
|
|
|
+ }
|
|
|
+ // console.log(data);
|
|
|
+ this.$modal
|
|
|
+ .confirm(
|
|
|
+ '是否确认删除动态格编号为"' +
|
|
|
+ data.tIds.join(",") +
|
|
|
+ '"的数据项？删除后菜单中相关数据也将删除!'
|
|
|
+ )
|
|
|
+ .then(async function () {
|
|
|
+ let res = await delMenu(row.menuId);
|
|
|
+ if (res.code == 200) {
|
|
|
+ await removeTableList(data);
|
|
|
+ } else {
|
|
|
+ return Promise.reject();
|
|
|
+ }
|
|
|
+
|
|
|
+ // let promiseArr = [];
|
|
|
+ // for (let i = 0; i < menuIdList.length; i++) {
|
|
|
+ // console.log(menuIdList[i]);
|
|
|
+ // promiseArr.push(
|
|
|
+ // new Promise((resolve, reject) => {
|
|
|
+ // delMenu(menuIdList[i]).then(
|
|
|
+ // (val) => {
|
|
|
+ // resolve(val);
|
|
|
+ // },
|
|
|
+ // (res) => {
|
|
|
+ // reject(res);
|
|
|
+ // }
|
|
|
+ // );
|
|
|
+ // })
|
|
|
+ // );
|
|
|
+ // }
|
|
|
+ // let result = await Promise.all(promiseArr);
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ this.getList();
|
|
|
+ this.reloadRouter();
|
|
|
+ this.$modal.msgSuccess("删除成功");
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
+ },
|
|
|
+ // 更新路由
|
|
|
+ reloadRouter() {
|
|
|
+ this.$store.dispatch("GenerateRoutes").then((accessRoutes) => {
|
|
|
+ this.$router.addRoutes(accessRoutes); // 动态添加可访问路由表
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** 导出按钮操作 */
|
|
|
+ handleExport() {
|
|
|
+ this.download(
|
|
|
+ process.env.VUE_APP_BASE_API3 + "system/table/export",
|
|
|
+ {
|
|
|
+ ...this.queryParams,
|
|
|
+ },
|
|
|
+ `table_${new Date().getTime()}.xlsx`
|
|
|
+ );
|
|
|
+ },
|
|
|
+ // 新增一个联动表格
|
|
|
+ addOneTable() {
|
|
|
+ // 注意校验最后一条数据是否合法
|
|
|
+
|
|
|
+ this.isShowForm = true;
|
|
|
+ },
|
|
|
+ // 确认添加一个表格
|
|
|
+ confirmAddHandler() {
|
|
|
+ this.tableDataList.push(this.tableItemForm);
|
|
|
+ this.tableItemFormReset();
|
|
|
+ this.isShowForm = false;
|
|
|
+ },
|
|
|
+ // 重置表单
|
|
|
+ tableItemFormReset() {
|
|
|
+ Object.assign(this.tableItemForm, {
|
|
|
+ title: "",
|
|
|
+ tableId: "",
|
|
|
+ tableName: "",
|
|
|
+ showFields: [],
|
|
|
+ theRelateField: "",
|
|
|
+ executeOptions: [],
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handlePreview() {
|
|
|
+ this.$router.push({
|
|
|
+ path: "/system/fromModel/index/relateTableEdit",
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style scoped lang="scss">
|
|
|
+.formWrap {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+</style>
|
lph