|
@@ -3,7 +3,9 @@
|
|
|
<div slot="header" class="clearfix">
|
|
|
<el-tag class="tag_NO">{{ dtName }}</el-tag>
|
|
|
<!-- <span class="title">{{ cardData.title }}</span> -->
|
|
|
- <el-button icon="el-icon-plus" type="primary" @click="handleAdd">新增数据</el-button>
|
|
|
+ <el-button icon="el-icon-plus" type="primary" @click="handleAdd"
|
|
|
+ >新增数据</el-button
|
|
|
+ >
|
|
|
</div>
|
|
|
<!-- body -->
|
|
|
<el-table
|
|
@@ -11,7 +13,9 @@
|
|
|
:data="tableList"
|
|
|
height="300"
|
|
|
highlight-current-row
|
|
|
- @row-click="(row,e,column) => handleCurrentChange(row,e,column,cardData)"
|
|
|
+ @row-click="
|
|
|
+ (row, e, column) => handleCurrentChange(row, e, column, cardData)
|
|
|
+ "
|
|
|
style="width: 100%"
|
|
|
>
|
|
|
<el-table-column
|
|
@@ -19,33 +23,33 @@
|
|
|
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)"
|
|
|
+ <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-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-button>
|
|
|
+ </el-dropdown-item>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </el-dropdown>
|
|
|
+ </template>
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
v-for="(item, index) in columns"
|
|
@@ -54,7 +58,6 @@
|
|
|
:label="item.value"
|
|
|
>
|
|
|
</el-table-column>
|
|
|
-
|
|
|
</el-table>
|
|
|
|
|
|
<pagination
|
|
@@ -92,9 +95,9 @@ import {
|
|
|
addTableData,
|
|
|
batchEdit,
|
|
|
} from "@/api/tablelist/commonTable";
|
|
|
-import {inputDisableComplete} from "@/utils/other";
|
|
|
+import { inputDisableComplete } from "@/utils/other";
|
|
|
|
|
|
-import {camelCase} from "@/utils";
|
|
|
+import { camelCase } from "@/utils";
|
|
|
export default {
|
|
|
name: "RelateTableCard",
|
|
|
props: ["cardData", "index", "tableKey", "sort"],
|
|
@@ -104,7 +107,7 @@ export default {
|
|
|
// 总条数
|
|
|
total: 0,
|
|
|
tableList: [],
|
|
|
- newsort: '',
|
|
|
+ newsort: "",
|
|
|
queryParams: {
|
|
|
pageNum: 1, // 第几页
|
|
|
pageSize: 10, // 每页大小
|
|
@@ -126,7 +129,7 @@ export default {
|
|
|
columns: [],
|
|
|
// 回显表格数据,
|
|
|
defaultValue: {},
|
|
|
- currentValue:{},
|
|
|
+ currentValue: {},
|
|
|
//存放表单渲染数据
|
|
|
jsonData: {},
|
|
|
// 弹出层标题
|
|
@@ -141,161 +144,163 @@ export default {
|
|
|
sortOrder: true,
|
|
|
// 当前模版信息
|
|
|
templateInfo: {},
|
|
|
- tableName: '',
|
|
|
- queryFromWhere:'',
|
|
|
+ tableName: "",
|
|
|
+ queryFromWhere: "",
|
|
|
condition: [],
|
|
|
- dtName: '',
|
|
|
+ dtName: "",
|
|
|
// 下拉框动态数据
|
|
|
dynamicData: {},
|
|
|
row: null,
|
|
|
- myContion:null,
|
|
|
- preRow:{}
|
|
|
+ myContion: null,
|
|
|
+ preRow: {},
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
// currentValues
|
|
|
- cardDataWatcher: function(){
|
|
|
- return this.cardData
|
|
|
+ cardDataWatcher: function () {
|
|
|
+ return this.cardData;
|
|
|
},
|
|
|
- tableKeyWatcher: function(){
|
|
|
- return this.tableKey
|
|
|
+ tableKeyWatcher: function () {
|
|
|
+ return this.tableKey;
|
|
|
},
|
|
|
- sortWatcher: function(){
|
|
|
- return this.sort
|
|
|
+ sortWatcher: function () {
|
|
|
+ return this.sort;
|
|
|
},
|
|
|
},
|
|
|
- watch:{
|
|
|
+ watch: {
|
|
|
cardDataWatcher: {
|
|
|
- handler(newval,oldval){
|
|
|
+ handler(newval, oldval) {
|
|
|
// debugger;
|
|
|
- this.currentValue=newval;
|
|
|
- this.$refs.singleTable?.doLayout()
|
|
|
+ this.currentValue = newval;
|
|
|
+ this.$refs.singleTable?.doLayout();
|
|
|
},
|
|
|
deep: true,
|
|
|
- immediate:true,
|
|
|
+ immediate: true,
|
|
|
},
|
|
|
tableKeyWatcher: {
|
|
|
- handler(newval){
|
|
|
+ handler(newval) {
|
|
|
// console.log(newval)
|
|
|
this.gettableListHandler(newval);
|
|
|
},
|
|
|
deep: true,
|
|
|
- immediate:true,
|
|
|
+ immediate: true,
|
|
|
},
|
|
|
sortWatcher: {
|
|
|
- handler(newval){
|
|
|
- this.newsort = newval
|
|
|
+ handler(newval) {
|
|
|
+ this.newsort = newval;
|
|
|
},
|
|
|
deep: true,
|
|
|
- immediate:true,
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
+ immediate: true,
|
|
|
+ },
|
|
|
},
|
|
|
+ mounted() {},
|
|
|
methods: {
|
|
|
// 根据tablekey请求数据表头数据
|
|
|
- async gettableListHandler(tableKey, paramsContion = [], defaultVal ={}){
|
|
|
- const res = await dragTableInfo({queryMap: {tableKey : tableKey }})
|
|
|
- this.getTableHandle(res, paramsContion = [],defaultVal = {})
|
|
|
+ async gettableListHandler(tableKey, paramsContion = [], defaultVal = {}) {
|
|
|
+ const res = await dragTableInfo({ queryMap: { tableKey: tableKey } });
|
|
|
+ this.getTableHandle(res, (paramsContion = []), (defaultVal = {}));
|
|
|
},
|
|
|
// 处理表格表头
|
|
|
- async getTableHandle(res){
|
|
|
- this.columns = []
|
|
|
- // 得到当前模版信息 --- sql columns queryWhere
|
|
|
- this.templateInfo = res.data.resultMap;
|
|
|
- this.queryParams.orderByColumn =
|
|
|
- res.data.resultMap.querySql.orderByColumn;
|
|
|
- this.sortOrder = JSON.parse(res.data.resultMap.querySql.sortOrder);
|
|
|
- // 根据拖拽时设置当前列表排列顺序
|
|
|
- this.queryParams.isAsc = this.sortOrder ? "DESC" : "ASC"
|
|
|
- this.tableName = this.templateInfo.template.dtTableName;
|
|
|
- this.dtName = this.templateInfo.template.dtName;
|
|
|
+ async getTableHandle(res) {
|
|
|
+ this.columns = [];
|
|
|
+ // 得到当前模版信息 --- sql columns queryWhere
|
|
|
+ this.templateInfo = res.data.resultMap;
|
|
|
+ this.queryParams.orderByColumn =
|
|
|
+ res.data.resultMap.querySql.orderByColumn;
|
|
|
+ this.sortOrder = JSON.parse(res.data.resultMap.querySql.sortOrder);
|
|
|
+ // 根据拖拽时设置当前列表排列顺序
|
|
|
+ this.queryParams.isAsc = this.sortOrder ? "DESC" : "ASC";
|
|
|
+ this.tableName = this.templateInfo.template.dtTableName;
|
|
|
+ this.dtName = this.templateInfo.template.dtName;
|
|
|
|
|
|
- // 得到查询条件
|
|
|
- this.queryFromWhere = res.data.resultMap.where;
|
|
|
- // 得到当前列表表头信息
|
|
|
- this.columns = this.columnsHandler(
|
|
|
- JSON.parse(this.templateInfo.template.dtColumnName)
|
|
|
- );
|
|
|
-
|
|
|
- if (this.templateInfo) {
|
|
|
- this.tableCondition = this.templateInfo.querySql.tableCondition
|
|
|
- this.tableCondition = this.tableCondition.split('AND')
|
|
|
+ // 得到查询条件
|
|
|
+ this.queryFromWhere = res.data.resultMap.where;
|
|
|
+ // 得到当前列表表头信息
|
|
|
+ this.columns = this.columnsHandler(
|
|
|
+ JSON.parse(this.templateInfo.template.dtColumnName)
|
|
|
+ );
|
|
|
+
|
|
|
+ if (this.templateInfo) {
|
|
|
+ this.tableCondition = this.templateInfo.querySql.tableCondition;
|
|
|
+ this.tableCondition = this.tableCondition.split("AND");
|
|
|
+
|
|
|
+ this.condition = [];
|
|
|
|
|
|
- this.condition = [];
|
|
|
-
|
|
|
- // 调用查询需要携带当前table的唯一标识
|
|
|
- this.queryParams.queryMap.sqlkey = this.templateInfo.template.sqlKey;
|
|
|
+ // 调用查询需要携带当前table的唯一标识
|
|
|
+ this.queryParams.queryMap.sqlkey = this.templateInfo.template.sqlKey;
|
|
|
|
|
|
- this.queryParams.orderByColumn = camelCase(
|
|
|
- this.queryParams.orderByColumn || ""
|
|
|
- );
|
|
|
- // 根据sql语句查询当前表数据
|
|
|
- this.contion = this.templateInfo.template.dtTableName + '.' + this.templateInfo.template.primaryKey
|
|
|
+ this.queryParams.orderByColumn = camelCase(
|
|
|
+ this.queryParams.orderByColumn || ""
|
|
|
+ );
|
|
|
+ // 根据sql语句查询当前表数据
|
|
|
+ this.contion =
|
|
|
+ this.templateInfo.template.dtTableName +
|
|
|
+ "." +
|
|
|
+ this.templateInfo.template.primaryKey;
|
|
|
|
|
|
- this.$nextTick(async ()=>{
|
|
|
- if(this.newsort == 0){
|
|
|
- // 第一张表请求表数据不需要条件
|
|
|
- await this.getDataHandler()
|
|
|
- }else{
|
|
|
- if(this.myContion){
|
|
|
- await this.getDataHandler(this.myContion,this.preRow)
|
|
|
- }
|
|
|
+ this.$nextTick(async () => {
|
|
|
+ if (this.newsort == 0) {
|
|
|
+ // 第一张表请求表数据不需要条件
|
|
|
+ await this.getDataHandler();
|
|
|
+ } else {
|
|
|
+ if (this.myContion) {
|
|
|
+ await this.getDataHandler(this.myContion, this.preRow);
|
|
|
+ console.log(this.myContion, this.preRow);
|
|
|
}
|
|
|
- })
|
|
|
-
|
|
|
- //处理三张不同表的依赖关系
|
|
|
- // let k;
|
|
|
- // this.tableCondition.forEach((item, i) => {
|
|
|
- // let val = item.split('=')
|
|
|
- // if(i!==0){
|
|
|
-
|
|
|
- // k =val[0].split('.')
|
|
|
- // let str = k[0].trim() + '.' + k[1]
|
|
|
- // this.condition.push({
|
|
|
- // key: k[0].trim(),
|
|
|
- // value: k[1]
|
|
|
- // })
|
|
|
- // }
|
|
|
- // })
|
|
|
-
|
|
|
- }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ //处理三张不同表的依赖关系
|
|
|
+ // let k;
|
|
|
+ // this.tableCondition.forEach((item, i) => {
|
|
|
+ // let val = item.split('=')
|
|
|
+ // if(i!==0){
|
|
|
+
|
|
|
+ // k =val[0].split('.')
|
|
|
+ // let str = k[0].trim() + '.' + k[1]
|
|
|
+ // this.condition.push({
|
|
|
+ // key: k[0].trim(),
|
|
|
+ // value: k[1]
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ }
|
|
|
},
|
|
|
// 获取表格数据
|
|
|
- async getDataHandler(contion, list){
|
|
|
- // console.log(contion);
|
|
|
- this.myContion=contion;
|
|
|
- this.preRow=list;
|
|
|
+ async getDataHandler(contion, list) {
|
|
|
+ console.log(contion, list);
|
|
|
+ this.myContion = contion;
|
|
|
+ this.preRow = list;
|
|
|
// console.log(list);
|
|
|
// 处理请求下一张表数据的依赖条件
|
|
|
- if(contion){
|
|
|
- let key = contion.split('.')
|
|
|
- this.queryParams.queryMap['#{' + contion] = "'" + list[key[1]] + "'";
|
|
|
+ if (contion) {
|
|
|
+ let key = contion.split(".");
|
|
|
+ this.queryParams.queryMap["#{" + contion] = "'" + list[key[1]] + "'";
|
|
|
}
|
|
|
this.queryParams.queryMap.sqlkey = this.templateInfo.template.sqlKey;
|
|
|
-
|
|
|
+
|
|
|
this.tableList = [];
|
|
|
- let tableLists = await unionListTableData(this.queryParams)
|
|
|
- if(tableLists.code == 200){
|
|
|
+ let tableLists = await unionListTableData(this.queryParams);
|
|
|
+ if (tableLists.code == 200) {
|
|
|
// 默认根据这张表的第一条数据请求下一张表的数据
|
|
|
- this.$emit('getDefaultCardData', this.index)
|
|
|
+ this.$emit("getDefaultCardData", this.index);
|
|
|
|
|
|
tableLists.rows.forEach((item) => {
|
|
|
this.tableList.push(item.resultMap);
|
|
|
});
|
|
|
-
|
|
|
- // 驼峰转换
|
|
|
- this.tableList = this.tableList.map((item) => {
|
|
|
- let kv = {};
|
|
|
- for (let itemKey in item) {
|
|
|
- kv[camelCase(itemKey)] = item[itemKey];
|
|
|
- }
|
|
|
- return kv;
|
|
|
- })
|
|
|
- // console.log(this.tableList);
|
|
|
- }
|
|
|
- this.total = tableLists.total;
|
|
|
- this.loading = false;
|
|
|
+
|
|
|
+ // 驼峰转换
|
|
|
+ this.tableList = this.tableList.map((item) => {
|
|
|
+ let kv = {};
|
|
|
+ for (let itemKey in item) {
|
|
|
+ kv[camelCase(itemKey)] = item[itemKey];
|
|
|
+ }
|
|
|
+ return kv;
|
|
|
+ });
|
|
|
+ // console.log(this.tableList);
|
|
|
+ }
|
|
|
+ this.total = tableLists.total;
|
|
|
+ this.loading = false;
|
|
|
},
|
|
|
// 处理列表信息
|
|
|
columnsHandler(columns) {
|
|
@@ -311,14 +316,10 @@ export default {
|
|
|
return resArr;
|
|
|
},
|
|
|
// 调用父组件方法更新表格数据
|
|
|
- handleCurrentChange(row,event,column,val) {
|
|
|
- this.row = row
|
|
|
+ handleCurrentChange(row, event, column, val) {
|
|
|
+ this.row = row;
|
|
|
// console.log(row);
|
|
|
- this.$emit(
|
|
|
- "updateData",
|
|
|
- row,
|
|
|
- this.index,
|
|
|
- );
|
|
|
+ this.$emit("updateData", row, this.index);
|
|
|
},
|
|
|
/** 新增按钮操作 */
|
|
|
handleAdd(row) {
|
|
@@ -344,12 +345,12 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
// 下一表数据
|
|
|
- getNextCardData(){
|
|
|
- this.handleCurrentChange(this.row)
|
|
|
+ getNextCardData() {
|
|
|
+ this.handleCurrentChange(this.row);
|
|
|
},
|
|
|
// 根据表格第一条数据请求下一个表格的数据
|
|
|
- getDefaultCard(){
|
|
|
- this.handleCurrentChange(this.tableList[0])
|
|
|
+ getDefaultCard() {
|
|
|
+ this.handleCurrentChange(this.tableList[0]);
|
|
|
},
|
|
|
// 使用提交数据类型的按钮获取数据
|
|
|
tempSubBtn(getData) {
|
|
@@ -384,10 +385,10 @@ export default {
|
|
|
};
|
|
|
|
|
|
// 后台接收需要是表中字段真实的名称,无所谓驼峰。
|
|
|
- updateData.conditionMap[this.templateInfo.template?.primaryKey] =
|
|
|
+ updateData.conditionMap[this.templateInfo.template?.primaryKey] =
|
|
|
this.defaultValue[
|
|
|
camelCase(this.templateInfo.template?.primaryKey)
|
|
|
- ];
|
|
|
+ ];
|
|
|
Object.keys(values).map((k) => {
|
|
|
updateData.commMap[k] = values[k];
|
|
|
});
|
|
@@ -398,6 +399,7 @@ export default {
|
|
|
this.$modal.msgError("修改失败");
|
|
|
}
|
|
|
} else {
|
|
|
+ // data;
|
|
|
let res = await addTableData(data);
|
|
|
if (res.code == 200) {
|
|
|
this.$modal.msgSuccess("添加成功");
|
|
@@ -406,19 +408,18 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
// this.tableList = []
|
|
|
- if(this.index == 0){
|
|
|
- this.getDataHandler()
|
|
|
+ if (this.index == 0) {
|
|
|
+ this.getDataHandler();
|
|
|
} else {
|
|
|
// 判断修改是否点击了上一表格的数据
|
|
|
- if(this.row){
|
|
|
- this.$emit('getChildData', this.index)
|
|
|
+ if (this.row) {
|
|
|
+ this.$emit("getChildData", this.index);
|
|
|
} else {
|
|
|
- this.$emit('getEditHandle', this.index)
|
|
|
+ this.$emit("getEditHandle", this.index);
|
|
|
}
|
|
|
}
|
|
|
this.defaultValue = {};
|
|
|
this.open = false;
|
|
|
-
|
|
|
})
|
|
|
.catch((res) => {
|
|
|
this.$modal.msgError("表单校验失败,请规范填写数据");
|
|
@@ -427,18 +428,20 @@ export default {
|
|
|
// 取消按钮
|
|
|
cancel() {
|
|
|
this.open = false;
|
|
|
- this.defaultVal = {}
|
|
|
+ this.defaultVal = {};
|
|
|
// this.reset();
|
|
|
},
|
|
|
/** 修改按钮操作 */
|
|
|
handleUpdate(row) {
|
|
|
- let obj = {}
|
|
|
- for(let key in row) {
|
|
|
- let modifiedTable = key.replace(/[A-Z]/g, (match) => `_${match}`).toLowerCase();
|
|
|
+ let obj = {};
|
|
|
+ for (let key in row) {
|
|
|
+ let modifiedTable = key
|
|
|
+ .replace(/[A-Z]/g, (match) => `_${match}`)
|
|
|
+ .toLowerCase();
|
|
|
obj[modifiedTable] = row[key];
|
|
|
}
|
|
|
|
|
|
- getInfoBySqlKey(this.templateInfo.template.sqlKey).then(({data}) => {
|
|
|
+ getInfoBySqlKey(this.templateInfo.template.sqlKey).then(({ data }) => {
|
|
|
if (!data || !data.dfVueTemplate) {
|
|
|
this.$message.error("当前表格未绑定表单!");
|
|
|
return;
|
|
@@ -467,11 +470,11 @@ export default {
|
|
|
this.form.password = "";
|
|
|
});
|
|
|
},
|
|
|
- // k-form-build表单变化回调
|
|
|
- formChangeHandler(value, label) {
|
|
|
+ // k-form-build表单变化回调
|
|
|
+ formChangeHandler(value, label) {
|
|
|
// console.log(value, label);
|
|
|
},
|
|
|
- /** 删除按钮操作
|
|
|
+ /** 删除按钮操作
|
|
|
*
|
|
|
* 删除提示信息语句(标识)
|
|
|
* */
|
|
@@ -500,11 +503,9 @@ export default {
|
|
|
// 调用子组件查询方法 目的是携带上子组件中的查询参数
|
|
|
// this.$refs.mychild.pageList();
|
|
|
this.$modal.msgSuccess("删除成功");
|
|
|
- this.gettableListHandler(this.tableKey)
|
|
|
-
|
|
|
+ this.gettableListHandler(this.tableKey);
|
|
|
})
|
|
|
- .catch(() => {
|
|
|
- });
|
|
|
+ .catch(() => {});
|
|
|
},
|
|
|
},
|
|
|
};
|
|
@@ -531,5 +532,4 @@ export default {
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
}
|
|
|
-
|
|
|
-</style>
|
|
|
+</style>
|