|
|
@@ -585,17 +585,69 @@ export function htmlTemplateCard(json, options,zkqyData,dataSource,url) {
|
|
|
if(cardComponent) {
|
|
|
x = !cardComponent.cardSelect;
|
|
|
}
|
|
|
- console.log('json', jsonData);
|
|
|
+ console.log('htmlTemplateCardm模板传入的jsonData', jsonData);
|
|
|
console.log('json---x', x);
|
|
|
+ // cardComponent?.columns
|
|
|
+ // cardComponent?.cardCallableInterface
|
|
|
|
|
|
- // 根据 x 的值生成不同的模板
|
|
|
- const searchInputTemplate = x ? `
|
|
|
- <div>
|
|
|
- <el-input placeholder="请输入内容" v-model="selectValue" class="input-with-select">
|
|
|
+ // 根据 cardSelectType 的值生成不同的模板
|
|
|
+ let searchInputTemplate = '';
|
|
|
+ let cardCallableInterface = '';
|
|
|
+ let cardCycle = false;
|
|
|
+ let oldFlag = false;
|
|
|
+ let selectRc = '';
|
|
|
+ let cardColumnTZJS = '';
|
|
|
+ // cardButtonTZYM
|
|
|
+ if (x) {
|
|
|
+ if (cardComponent?.cardSelectType == 'input') {
|
|
|
+ searchInputTemplate = `
|
|
|
+ <div style="display: flex; align-items: center;">
|
|
|
+ <el-input placeholder="请输入内容" v-model="selectValue" class="input-with-select" clearable>
|
|
|
+ <el-button slot="append" icon="el-icon-search" @click="searchCardList()"></el-button>
|
|
|
+ </el-input>
|
|
|
+ </div>`;
|
|
|
+ } else if (cardComponent?.cardSelectType == 'select') {
|
|
|
+ searchInputTemplate = `
|
|
|
+ <div>
|
|
|
+ <el-select v-model="selectValue" placeholder="请选择" style="width: 100%" clearable>
|
|
|
+ <el-option
|
|
|
+ v-for="item in selectOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
<el-button slot="append" icon="el-icon-search" @click="searchCardList()"></el-button>
|
|
|
- </el-input>
|
|
|
- </div>` : '';
|
|
|
+ </div>`;
|
|
|
+ } else if (cardComponent?.cardSelectType == 'dateRange') {
|
|
|
+ searchInputTemplate = `
|
|
|
+ <div style="display: flex; align-items: center;">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="selectValue"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ style="width: 100%">
|
|
|
+ </el-date-picker>
|
|
|
+ <el-button slot="append" icon="el-icon-search" @click="searchCardList()"></el-button>
|
|
|
+ </div>`;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if(cardComponent?.columns || !cardComponent?.cardCallableInterface){
|
|
|
+ oldFlag = true
|
|
|
+ cardColumnTZJS = cardComponent?.cardColumnTZJS;
|
|
|
+ }else if(cardComponent?.cardCallableInterface){
|
|
|
+ oldFlag = false
|
|
|
+ // 如果cardCycle是true,是自己选1个接口--单张--不循环
|
|
|
+ // 如果是false，是自己选1个接口--多张--循环
|
|
|
+ cardCallableInterface = cardComponent?.cardCallableInterface?.replace(/^\//, '') || ''
|
|
|
+ cardCycle = cardComponent?.cardCycle
|
|
|
+ selectRc = cardComponent?.itemAssociatedField
|
|
|
+ cardColumnTZJS = cardComponent?.itemAssociatedFieldTZJS;
|
|
|
|
|
|
+ }
|
|
|
return `<html lang="zh">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
@@ -638,41 +690,208 @@ export function htmlTemplateCard(json, options,zkqyData,dataSource,url) {
|
|
|
pageSize: 5,
|
|
|
pageNum: 1
|
|
|
},
|
|
|
+ originalRule: null,
|
|
|
selectValue:'',
|
|
|
+ cardCallableInterface:'${cardCallableInterface}',
|
|
|
+ cardCycle:${cardCycle},
|
|
|
+ oldFlag: ${oldFlag},
|
|
|
+ selectRc:'${selectRc}',
|
|
|
+ cardColumnTZJS:'${cardColumnTZJS}',
|
|
|
+ savedTZJSValue:'',
|
|
|
+ selectOptions: [
|
|
|
+ { value: '1', label: '已完成' },
|
|
|
+ { value: '2', label: '未完成' },
|
|
|
+ ],
|
|
|
zkqyData:${zkqyData},
|
|
|
|
|
|
};
|
|
|
},
|
|
|
mounted(){
|
|
|
- // 寻找type为'elCard'的对象
|
|
|
+ // 保存原始规则
|
|
|
+ this.originalRule = JSON.parse(JSON.stringify(this.rule));
|
|
|
const cardComponent = Array.isArray(this.rule) ?
|
|
|
- this.rule.find(item => item.type === 'elCard') : null;
|
|
|
+ this.rule.find(item => item.type === 'elCard') : null;
|
|
|
// 获取pageId
|
|
|
const x = cardComponent?.props?.pageId;
|
|
|
// 设置到cardList中
|
|
|
this.cardList.pageId = x;
|
|
|
// 获取分页参数
|
|
|
let { pageId, pageNum, pageSize} = this.cardList;
|
|
|
+ if(this.oldFlag){
|
|
|
// 调用接口
|
|
|
this.getTableLimitInfo({pageId, pageNum, pageSize});
|
|
|
+ }else{
|
|
|
+ console.log('是否循环',this.cardCycle)
|
|
|
+ console.log('自选的一个接口',this.cardCallableInterface)
|
|
|
+ if(this.cardCycle){
|
|
|
+ this.getCardCycleNew({pageId, pageNum, pageSize})
|
|
|
+ }else{
|
|
|
+ this.getCardCycleNew({pageId, pageNum, pageSize})
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
methods: {
|
|
|
- searchCardList(){
|
|
|
- this.rule.forEach(item => {
|
|
|
- if(item.type === 'elCard'){
|
|
|
- let cardColumn = item.cardColumn;
|
|
|
- let { pageId, pageNum, pageSize} = this.cardList;
|
|
|
- // 添加搜索参数
|
|
|
- let params = {
|
|
|
- pageId,
|
|
|
- pageNum,
|
|
|
- pageSize,
|
|
|
- [cardColumn]: this.selectValue
|
|
|
- };
|
|
|
- // 调用接口
|
|
|
- this.getTableLimitInfo(params);
|
|
|
- }
|
|
|
- })
|
|
|
+ async getCardCycleNew(params = {}) {
|
|
|
+ const endpoint = this.cardCallableInterface;
|
|
|
+ await this.fetchGet(endpoint, params, (data) => {
|
|
|
+ if (data.code === 200) {
|
|
|
+ console.log('Data', data);
|
|
|
+ // 获取第一个 elCard 类型的组件作为模板
|
|
|
+ const templateCard = Array.isArray(this.rule) ?
|
|
|
+ this.rule.find(item => item.type === 'elCard') : null;
|
|
|
+ if (templateCard) {
|
|
|
+ console.log('templateCard',templateCard)
|
|
|
+ console.log('data.columns',data.data)
|
|
|
+ console.log('data.columns',data.data.columns)
|
|
|
+ console.log('data.result',data.data.result)
|
|
|
+ // 将 columns 转换为键值对映射
|
|
|
+ const columnMap = data.data.columns.reduce((acc, col) => {
|
|
|
+ acc[col.key] = col.value;
|
|
|
+ return acc;
|
|
|
+ }, {});
|
|
|
+
|
|
|
+ // 处理结果数据
|
|
|
+ const formattedResult = data.data.result.map(item => {
|
|
|
+ const formattedItem = {};
|
|
|
+ // 遍历 columns 中定义的键
|
|
|
+ data.data.columns.forEach(col => {
|
|
|
+ formattedItem[col.key] = item[col.key];
|
|
|
+ });
|
|
|
+ return formattedItem;
|
|
|
+ });
|
|
|
+
|
|
|
+ console.log('格式化后的结果:', formattedResult);
|
|
|
+
|
|
|
+ // 创建新的数组，根据 data.rows 的数量复制 elCard
|
|
|
+ const newRule = formattedResult.map((row, index) => {
|
|
|
+ // 深拷贝模板对象
|
|
|
+ const newCard = JSON.parse(JSON.stringify(templateCard));
|
|
|
+
|
|
|
+ // 更新 children 数组中的值
|
|
|
+ newCard.children.forEach(child => {
|
|
|
+ if (child.itemAssociatedField && row[child.itemAssociatedField] !== undefined) {
|
|
|
+ child.value = row[child.itemAssociatedField];
|
|
|
+ }
|
|
|
+ if(child.type === 'elButton'){
|
|
|
+ console.log('child',child);
|
|
|
+ // 要跳转的页面id
|
|
|
+ let cardButtonTZYM = child?.cardButtonTZYM;
|
|
|
+ let itemAssociatedField = child?.itemAssociatedField;
|
|
|
+ let itemAssociatedFieldTZ = child?.itemAssociatedFieldTZ;
|
|
|
+ let clickString =
|
|
|
+ '$FNX:let targetChild = $inject.rule['+index+'].children.find(child => child.itemAssociatedField === "'+itemAssociatedField+'");' +
|
|
|
+ 'let targetChildTZ = $inject.rule['+index+'].children.find(child => child?.itemAssociatedField === "'+itemAssociatedFieldTZ+'");' +
|
|
|
+ 'let targetValue = targetChild ? targetChild.value : null;' +
|
|
|
+ 'let targetValueTZ = targetChildTZ ? targetChildTZ.value : null;' +
|
|
|
+ 'let targetValueTZArray = ["'+itemAssociatedFieldTZ+'", targetValueTZ];' +
|
|
|
+ 'console.log("跳转页面ID:", "'+cardButtonTZYM+'");' +
|
|
|
+ 'console.log("关联字段值:", targetValue);' +
|
|
|
+ 'console.log("跳转列值:", targetValueTZ);' +
|
|
|
+ 'console.log("关联字段:", "'+itemAssociatedField+'");' +
|
|
|
+ 'console.log("跳转列:", "'+itemAssociatedFieldTZ+'");' +
|
|
|
+ 'console.log("跳转列数组:", targetValueTZArray);' +
|
|
|
+ 'fetch("'+this.baseUrl+'api/mobilePageDesignData/queryMobileClickAddData/'+cardButtonTZYM+'", {' +
|
|
|
+ ' method: "GET",' +
|
|
|
+ ' headers: {' +
|
|
|
+ ' "Accept": "application/json",' +
|
|
|
+ ' "dbname": "'+this.headers.dbname+'",' +
|
|
|
+ ' "Content-Type": "application/json"' +
|
|
|
+ ' }' +
|
|
|
+ '}).then(response => {' +
|
|
|
+ ' if (!response.ok) {' +
|
|
|
+ ' throw new Error("HTTP error! status: " + response.status);' +
|
|
|
+ ' }' +
|
|
|
+ ' return response.json();' +
|
|
|
+ '}).then(data => {' +
|
|
|
+ ' console.log("htmlData", data?.data?.htmlData);' +
|
|
|
+ ' const decodedHtml = decodeURIComponent(data?.data?.htmlData);' +
|
|
|
+ ' const iframe = document.createElement("iframe");' +
|
|
|
+ ' iframe.srcdoc = decodedHtml;' +
|
|
|
+ ' iframe.style.width = "100%";' +
|
|
|
+ ' iframe.style.height = "100vh";' +
|
|
|
+ ' iframe.style.border = "none";' +
|
|
|
+ ' document.body.innerHTML = "";' +
|
|
|
+ ' document.body.appendChild(iframe);' +
|
|
|
+ ' iframe.onload = function() {' +
|
|
|
+ ' try {' +
|
|
|
+ ' const iframeWindow = iframe.contentWindow;' +
|
|
|
+ ' setTimeout(() => {' +
|
|
|
+ ' const vueInstance = iframeWindow.document.querySelector("#app").__vue__;' +
|
|
|
+ ' if (vueInstance) {' +
|
|
|
+ ' vueInstance?.searchCardList(targetValue, targetValueTZArray);' +
|
|
|
+ ' }' +
|
|
|
+ ' }, 1000);' +
|
|
|
+ ' } catch (error) {' +
|
|
|
+ ' console.error("调用 iframe 方法时出错:", error);' +
|
|
|
+ ' }' +
|
|
|
+ ' };' +
|
|
|
+ '}).catch(error => {' +
|
|
|
+ ' console.error("调用接口出错:", error);' +
|
|
|
+ '});';
|
|
|
+ child.on = {
|
|
|
+ 'click': clickString
|
|
|
+ };
|
|
|
+ console.log('child-on',child.on);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // 更新 _fc_id 和 name，确保唯一性
|
|
|
+ newCard._fc_id = \`\${newCard._fc_id}_\${index}\`;
|
|
|
+ newCard.name = \`\${newCard.name}_\${index}\`;
|
|
|
+ return newCard;
|
|
|
+ });
|
|
|
+ // 更新 this.rule
|
|
|
+ this.rule = newRule;
|
|
|
+ console.log('更新后的 rule:', this.rule);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ console.warn('接口返回非 200 状态:', data);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ searchCardList(value,id){
|
|
|
+ if(value) this.selectValue = value
|
|
|
+ if(id){
|
|
|
+ console.log('id',id)
|
|
|
+ console.log('this.cardColumnTZJS',this.cardColumnTZJS,id[1])
|
|
|
+ // 如果有id和cardColumnTZJS,保存到data中供后续查询使用
|
|
|
+ if(id && this.cardColumnTZJS) {
|
|
|
+ this.savedTZJSValue = id[1];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if(this.oldFlag){
|
|
|
+ let params;
|
|
|
+ const originalPageId = this.cardList.pageId;
|
|
|
+ let savedCardColumn;
|
|
|
+ // 先保存一份原始的cardColumn
|
|
|
+ const cardItem = this.rule.find(item => item.type === 'elCard');
|
|
|
+ savedCardColumn = cardItem?.cardColumn;
|
|
|
+ let { pageNum, pageSize} = this.cardList;
|
|
|
+ // 添加搜索参数
|
|
|
+ params = {
|
|
|
+ pageId: originalPageId,
|
|
|
+ pageNum,
|
|
|
+ pageSize,
|
|
|
+ ...(this.selectValue && savedCardColumn ? {[savedCardColumn]: this.selectValue} : {}),
|
|
|
+ ...(this.savedTZJSValue ? {[this.cardColumnTZJS]:this.savedTZJSValue} : {})
|
|
|
+ };
|
|
|
+ console.log('originalPageId',params)
|
|
|
+
|
|
|
+ this.getTableLimitInfo(params);
|
|
|
+ }else{
|
|
|
+ // 直接使用 cardList 中的参数，不需要遍历
|
|
|
+
|
|
|
+ const originalPageId = this.cardList.pageId;
|
|
|
+ let { pageId, pageNum, pageSize} = this.cardList;
|
|
|
+ // 添加搜索参数
|
|
|
+ let params = {
|
|
|
+ pageId: originalPageId,
|
|
|
+ pageNum,
|
|
|
+ pageSize,
|
|
|
+ ...(this.selectValue ? {[this.selectRc]: this.selectValue} : {})
|
|
|
+ };
|
|
|
+ // 调用接口
|
|
|
+ this.getCardCycleNew(params);
|
|
|
+ }
|
|
|
},
|
|
|
async getTableLimitInfo(params = {}) {
|
|
|
const endpoint = 'api/mobilePageDesignData/muti/tableLimitInfo';
|
|
|
@@ -694,6 +913,70 @@ export function htmlTemplateCard(json, options,zkqyData,dataSource,url) {
|
|
|
if (child.columnItem && row[child.columnItem] !== undefined) {
|
|
|
child.value = row[child.columnItem];
|
|
|
}
|
|
|
+ if(child.type === 'elButton'){
|
|
|
+ console.log('child',child);
|
|
|
+ let cardButtonTZYM = child?.cardButtonTZYM;
|
|
|
+ let cardButtonColumn = child;
|
|
|
+ // 绑定字段 columnItem
|
|
|
+ let columnItem = child?.columnItem;
|
|
|
+ // 跳转字段 columnItemTZPT
|
|
|
+ let columnItemTZPT = child?.columnItemTZPT;
|
|
|
+ let clickString =
|
|
|
+ '$FNX:let targetChild = $inject.rule['+index+'].children.find(child => child.columnItem === "'+columnItem+'");' +
|
|
|
+ 'let targetChildTZ = $inject.rule['+index+'].children.find(child => child?.columnItem === "'+columnItemTZPT+'");' +
|
|
|
+ 'let targetValue = targetChild ? targetChild.value : null;' +
|
|
|
+ 'let targetValueTZ = targetChildTZ ? targetChildTZ.value : null;' +
|
|
|
+ 'let targetValueTZArray = ["'+columnItemTZPT+'", targetValueTZ];' +
|
|
|
+ 'console.log("跳转页面ID:", "'+cardButtonTZYM+'");' +
|
|
|
+ 'console.log("绑定字段值:", targetValue);' +
|
|
|
+ 'console.log("跳转字段值:", targetValueTZ);' +
|
|
|
+ 'console.log("绑定字段:", "'+columnItem+'");' +
|
|
|
+ 'console.log("跳转列:", "'+columnItemTZPT+'");' +
|
|
|
+ 'console.log("跳转列数组:", targetValueTZArray);' +
|
|
|
+ 'fetch("'+this.baseUrl+'api/mobilePageDesignData/queryMobileClickAddData/'+cardButtonTZYM+'", {' +
|
|
|
+ ' method: "GET",' +
|
|
|
+ ' headers: {' +
|
|
|
+ ' "Accept": "application/json",' +
|
|
|
+ ' "dbname": "'+this.headers.dbname+'",' +
|
|
|
+ ' "Content-Type": "application/json"' +
|
|
|
+ ' }' +
|
|
|
+ '}).then(response => {' +
|
|
|
+ ' if (!response.ok) {' +
|
|
|
+ ' throw new Error("HTTP error! status: " + response.status);' +
|
|
|
+ ' }' +
|
|
|
+ ' return response.json();' +
|
|
|
+ '}).then(data => {' +
|
|
|
+ ' console.log("htmlData", data?.data?.htmlData);' +
|
|
|
+ ' const decodedHtml = decodeURIComponent(data?.data?.htmlData);' +
|
|
|
+ ' const iframe = document.createElement("iframe");' +
|
|
|
+ ' iframe.srcdoc = decodedHtml;' +
|
|
|
+ ' iframe.style.width = "100%";' +
|
|
|
+ ' iframe.style.height = "100vh";' +
|
|
|
+ ' iframe.style.border = "none";' +
|
|
|
+ ' document.body.innerHTML = "";' +
|
|
|
+ ' document.body.appendChild(iframe);' +
|
|
|
+ ' iframe.onload = function() {' +
|
|
|
+ ' try {' +
|
|
|
+ ' const iframeWindow = iframe.contentWindow;' +
|
|
|
+ ' setTimeout(() => {' +
|
|
|
+ ' const vueInstance = iframeWindow.document.querySelector("#app").__vue__;' +
|
|
|
+ ' if (vueInstance) {' +
|
|
|
+ ' vueInstance?.searchCardList(targetValue, targetValueTZArray);' +
|
|
|
+ ' }' +
|
|
|
+ ' }, 1000);' +
|
|
|
+ ' } catch (error) {' +
|
|
|
+ ' console.error("调用 iframe 方法时出错:", error);' +
|
|
|
+ ' }' +
|
|
|
+ ' };' +
|
|
|
+ '}).catch(error => {' +
|
|
|
+ ' console.error("调用接口出错:", error);' +
|
|
|
+ '});';
|
|
|
+ child.on = {
|
|
|
+ 'click': clickString
|
|
|
+ };
|
|
|
+
|
|
|
+ console.log('child-on',child.on);
|
|
|
+ }
|
|
|
});
|
|
|
|
|
|
// 更新 _fc_id 和 name，确保唯一性
|
|
|
@@ -703,9 +986,17 @@ export function htmlTemplateCard(json, options,zkqyData,dataSource,url) {
|
|
|
return newCard;
|
|
|
});
|
|
|
|
|
|
- // 更新 this.rule
|
|
|
- this.rule = newRule;
|
|
|
+ // 更新 this.rule，确保保留 __fc__ 属性
|
|
|
+ if (newRule.length > 0) {
|
|
|
+ this.rule = newRule;
|
|
|
+ } else {
|
|
|
+ // 如果没有数据，使用原始模板
|
|
|
+ this.rule = [templateCard];
|
|
|
+ }
|
|
|
console.log('更新后的 rule:', this.rule);
|
|
|
+ } else {
|
|
|
+ // 如果没有找到模板卡片，使用原始规则
|
|
|
+ this.rule = this.originalRule || [];
|
|
|
}
|
|
|
} else {
|
|
|
console.warn('接口返回非 200 状态:', data);
|
sql715