|
@@ -1168,10 +1168,11 @@ export function htmlTemplateCard(json, options,zkqyData,dataSource,url) {
|
|
|
console.log('自选的一个接口',this.cardCallableInterface)
|
|
|
// 有接收值
|
|
|
let cardColumnTZJS = this.cardColumnTZJS
|
|
|
- if(!cardColumnTZJS){
|
|
|
+ // 如果不是日期范围类型,才在初始化时调用
|
|
|
+ if(!cardColumnTZJS && !this.isDateOrMonthRange){
|
|
|
this.getCardCycleNew({pageId, pageNum, pageSize})
|
|
|
}
|
|
|
- }
|
|
|
+ }
|
|
|
},
|
|
|
methods: {
|
|
|
handleSizeChange(val) {
|
|
@@ -1517,11 +1518,84 @@ export function htmlTemplateCard(json, options,zkqyData,dataSource,url) {
|
|
|
await this.fetchGet(endpoint, params, (data) => {
|
|
|
if (data.code === 200) {
|
|
|
console.log('Data', data);
|
|
|
+ // 更新分页总数
|
|
|
+ if(data?.data?.total > 0){
|
|
|
+ this.cardList.total = data.data.total;
|
|
|
+ }
|
|
|
// 获取第一个 elCard 类型的组件作为模板
|
|
|
const templateCard = Array.isArray(this.rule) ?
|
|
|
this.rule.find(item => item.type === 'elCard') : null;
|
|
|
|
|
|
if (templateCard) {
|
|
|
+ // 检查数据是否为空
|
|
|
+ if (!data.rows || data.rows.length === 0) {
|
|
|
+ console.log('数据为空,使用模板卡片');
|
|
|
+ this.cardList = {
|
|
|
+ pageId: this.cardList.pageId,
|
|
|
+ total: 0,
|
|
|
+ pageSize: 2,
|
|
|
+ pageNum: 1
|
|
|
+ }
|
|
|
+ // 创建一个新的模板卡片,但不填入任何值
|
|
|
+ const emptyTemplateCard = JSON.parse(JSON.stringify(templateCard));
|
|
|
+ // 设置空卡片的样式为隐藏
|
|
|
+ emptyTemplateCard.style = {
|
|
|
+ ...emptyTemplateCard.style,
|
|
|
+ display: 'none'
|
|
|
+ };
|
|
|
+ // 递归清除所有子组件的值
|
|
|
+ const clearChildrenValues = (children) => {
|
|
|
+ children.forEach(child => {
|
|
|
+ if (child.type === 'fcRow' || child.type === 'col') {
|
|
|
+ clearChildrenValues(child.children);
|
|
|
+ } else {
|
|
|
+ child.value = '';
|
|
|
+ }
|
|
|
+ });
|
|
|
+ };
|
|
|
+ clearChildrenValues(emptyTemplateCard.children);
|
|
|
+ const nonCardComponents = this.rule.filter(item => item.type !== 'elCard' && item.type !== 'div');
|
|
|
+ // 添加无数据提示的 div
|
|
|
+ const noDataDiv = {
|
|
|
+ type: 'div',
|
|
|
+ style: {
|
|
|
+ width: '100%',
|
|
|
+ height: '500px',
|
|
|
+ display: 'flex',
|
|
|
+ justifyContent: 'flex-start',
|
|
|
+ alignItems: 'center',
|
|
|
+ flexDirection: 'column',
|
|
|
+ paddingTop: '3rem'
|
|
|
+ },
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ type: 'img',
|
|
|
+ attrs: {
|
|
|
+ src: 'https://tc.z.wiki/autoupload/20250603/1l3o/1109X736/%E6%97%A0%E6%95%B0%E6%8D%AE.png',
|
|
|
+ alt: 'logo',
|
|
|
+ style: 'width: 184px; height: 122px;'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'span',
|
|
|
+ style: {
|
|
|
+ fontSize: '11px',
|
|
|
+ color: '#C8C8C8'
|
|
|
+ },
|
|
|
+ children: ['暂 无 数 据']
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ // 将空状态 div 和隐藏的原始卡片都添加到 rule 中
|
|
|
+ this.rule = [...nonCardComponents, noDataDiv, emptyTemplateCard];
|
|
|
+ // 强制更新视图
|
|
|
+ this.$nextTick(() => {
|
|
|
+ const ruleJson = formCreate.toJson([...this.rule]);
|
|
|
+ this.rule = formCreate.parseJson(ruleJson);
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
const newRule = data.rows.map((row, index) => {
|
|
|
const newCard = JSON.parse(JSON.stringify(templateCard));
|
|
|
|
|
@@ -1587,10 +1661,14 @@ export function htmlTemplateCard(json, options,zkqyData,dataSource,url) {
|
|
|
return newCard;
|
|
|
});
|
|
|
|
|
|
- // this.rule = newRule.length > 0 ? newRule : [templateCard];
|
|
|
- // 保留非elCard类型的组件(如elImage)
|
|
|
+ // 保留非elCard类型的组件(如elImage)
|
|
|
const nonCardComponents = this.rule.filter(item => item.type !== 'elCard');
|
|
|
this.rule = newRule.length > 0 ? [...nonCardComponents, ...newRule] : [...nonCardComponents, templateCard];
|
|
|
+ // 强制更新视图
|
|
|
+ this.$nextTick(() => {
|
|
|
+ const ruleJson = formCreate.toJson([...this.rule]);
|
|
|
+ this.rule = formCreate.parseJson(ruleJson);
|
|
|
+ });
|
|
|
console.log('更新后的 rule:', this.rule);
|
|
|
} else {
|
|
|
this.rule = this.originalRule || [];
|