|
@@ -151,7 +151,7 @@
|
|
|
<div class="sizeInputSymbol">*</div>
|
|
|
<div class="sizeInput"><el-input v-model="ruleForm.component_height" clearable placeholder="高"></el-input></div>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="组件展示字段:" prop="listType" class="custom-align-right" v-if="[1,2,3,4,5,6,7,8,9,14].includes(ruleForm.type_id)">
|
|
|
+ <el-form-item label="组件展示字段:" prop="listType" class="custom-align-right">
|
|
|
<!-- <div class="formLabelFloatBox"> -->
|
|
|
<!-- <div class="labelTitleStyle"> -->
|
|
|
|
|
@@ -159,10 +159,10 @@
|
|
|
<i class="el-icon-question"></i>
|
|
|
</el-tooltip> -->
|
|
|
<!-- </div> -->
|
|
|
- <el-checkbox-group v-model="ruleForm.listType">
|
|
|
- <el-checkbox v-for="item in column_options" :key="item" value="item" disabled>{{item}}</el-checkbox>
|
|
|
+ <!-- <el-checkbox-group v-model="ruleForm.listType"> -->
|
|
|
+ <span v-for="item in column_options" :key="item" value="item" disabled style="margin-right: 20px;">{{item}}</span>
|
|
|
|
|
|
- </el-checkbox-group>
|
|
|
+ <!-- </el-checkbox-group> -->
|
|
|
<!-- </div> -->
|
|
|
</el-form-item>
|
|
|
<!-- <el-form-item label="组件所需字段:" prop="listType">
|
|
@@ -176,10 +176,10 @@
|
|
|
|
|
|
<!-- 组件分类:1:资讯-头条组件;2:资讯-轮播组件;3:资讯-推荐图类组件;4:资讯-最新类组件;5:资讯-推荐类;6:资讯-热点类组件;
|
|
|
7:资讯-栏目类组件;8:列表类组件;9:详情类组件;10:二级导航栏类组件;11:广告类;12:静态资源类;13:底部导航类; -->
|
|
|
- <el-form-item label="含有图片新闻数量:" prop="img_num" v-if="[1,2,3,4,5,6,7,14].includes(ruleForm.type_id)">
|
|
|
+ <el-form-item label="含有图片新闻数量:" prop="img_num" v-if="[1,2,3,4,5,6,7,14,15].includes(ruleForm.type_id)">
|
|
|
<el-input v-model="ruleForm.img_num" placeholder="请输入含有图片新闻数量"></el-input>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="含有文字新闻数量:" prop="text_num" v-if="[1,2,3,4,5,6,7,14].includes(ruleForm.type_id)">
|
|
|
+ <el-form-item label="含有文字新闻数量:" prop="text_num" v-if="[1,2,3,4,5,6,7,14,15].includes(ruleForm.type_id)">
|
|
|
<el-input v-model="ruleForm.text_num" placeholder="请输入含有文字新闻数量"></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="含有子级图片新闻数量:" prop="child_imgnum" v-if="ruleForm.type_id == 7 || ruleForm.type_id == 14">
|
|
@@ -188,13 +188,14 @@
|
|
|
<el-form-item label="含有子级文字新闻数量:" prop="child_textnum" v-if="ruleForm.type_id == 7 || ruleForm.type_id == 14">
|
|
|
<el-input v-model="ruleForm.child_textnum" placeholder="请输入含有子级文字新闻数量"></el-input>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="每页新闻数量:" prop="pageSize" v-if="ruleForm.type_id == 8">
|
|
|
+ <el-form-item label="每页新闻数量:" prop="pageSize" v-if="[8,17].includes(ruleForm.type_id)">
|
|
|
<el-input v-model="ruleForm.pageSize" placeholder="请输入每页新闻数量"></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="广告类型:" prop="ad_type" v-if="ruleForm.type_id == 11 || ruleForm.type_id == 14">
|
|
|
<el-select v-model="ruleForm.ad_type" placeholder="请选择广告类型">
|
|
|
<el-option :value="1" label="文字类型">文字类型</el-option>
|
|
|
- <el-option :value="2" label="图文类型">图文类型</el-option>
|
|
|
+ <el-option :value="2" label="图文类型" :disabled="ruleForm.type_id == 14">图文类型</el-option>
|
|
|
+
|
|
|
</el-select>
|
|
|
<!-- <el-input v-model="ruleForm.ad_type" placeholder="请输入广告类型"></el-input> -->
|
|
|
</el-form-item>
|
|
@@ -354,22 +355,44 @@ export default {
|
|
|
ad_img: '', //广告示例图
|
|
|
num: '', //栏目数量
|
|
|
},
|
|
|
-
|
|
|
rules: {
|
|
|
component_name: [{ required: true, trigger: 'blur', validator: validateEmpty }],
|
|
|
component_type: [{ required: true, trigger: 'blur', validator: validateEmpty }],
|
|
|
- component_keyword: [{ required: true, trigger: 'blur', validator: validateArray }],
|
|
|
+ // component_keyword: [{ required: true, trigger: 'blur', validator: validateArray }],
|
|
|
component_width: [{ required: true, trigger: 'blur', validator: validateEmpty }],
|
|
|
component_height: [{ required: true, trigger: 'blur', validator: validateEmpty }],
|
|
|
component_img: [{ required: true, trigger: 'blur', validator: validateEmpty }],
|
|
|
type_id: [{ required: true, trigger: 'blur', validator: validateEmpty }],
|
|
|
- component_width: [{ required: true, trigger: 'blur', validator: validateEmpty }],
|
|
|
- component_height: [{ required: true, trigger: 'blur', validator: validateEmpty }],
|
|
|
},
|
|
|
+
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
//1.列表和分页相关 start ------------------------------------------------------------>
|
|
|
+ dynamicRules() {
|
|
|
+ const art_types = [1, 2, 3, 4, 5, 6, 7, 14, 15];
|
|
|
+ const validateEmpty = (rule, value, callback) => {
|
|
|
+ if (value.length == 0) {
|
|
|
+ callback(new Error('该项不能为空!'))
|
|
|
+ } else {
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 仅当 ruleForm.type_id 存在且在 art_types 数组中时,返回验证规则
|
|
|
+ if (this.ruleForm.type_id && art_types.includes(Number(this.ruleForm.type_id))) {
|
|
|
+ return {
|
|
|
+ img_num: [{ required: true, trigger: 'blur', validator: this.validateEmpty }],
|
|
|
+ text_num: [{ required: true, trigger: 'blur', validator: this.validateEmpty }],
|
|
|
+ // 仅当组件类型为 7 或 14 时,对子级数量添加验证规则
|
|
|
+ ...(this.ruleForm.type_id === '7' || this.ruleForm.type_id === '14' ? {
|
|
|
+ child_imgnum: [{ required: true, trigger: 'blur', validator: this.validateEmpty }],
|
|
|
+ child_textnum: [{ required: true, trigger: 'blur', validator: this.validateEmpty }],
|
|
|
+ } : {}),
|
|
|
+ };
|
|
|
+ }
|
|
|
+ return {};
|
|
|
+ },
|
|
|
+
|
|
|
//1.1 开始请求列表信息方法
|
|
|
getData() {
|
|
|
const data = {
|
|
@@ -503,11 +526,18 @@ export default {
|
|
|
this.ruleForm.component_keyword = JSON.parse(val.component_keyword) || [] // 解析 JSON 字符串为数组,若解析失败则返回空数组
|
|
|
this.tags = JSON.parse(val.component_keyword) || []
|
|
|
this.columns = JSON.parse(val.component_column)
|
|
|
- this.column_options = this.columns.listType
|
|
|
+ this.ruleForm.type_id = val.type_id //组件分类
|
|
|
+ if(this.ruleForm.type_id == 11){
|
|
|
+ this.column_options = this.columns.ad
|
|
|
+ console.log("广告",this.column_options)
|
|
|
+ console.log("广告类型",this.columns.ad)
|
|
|
+ }else{
|
|
|
+ this.column_options = this.columns.listType
|
|
|
+ }
|
|
|
+ // this.column_options = this.columns.listType
|
|
|
this.ruleForm.component_width = val.component_width //组件宽度
|
|
|
this.ruleForm.component_height = val.component_height //组件高度
|
|
|
this.ruleForm.component_img = val.component_img //组件展示图
|
|
|
- this.ruleForm.type_id = val.type_id //组件分类
|
|
|
this.ruleForm.img_num = val.img_num //含有图片新闻数量
|
|
|
this.ruleForm.text_num = val.text_num //含有文字新闻数量
|
|
|
this.ruleForm.child_imgnum = val.child_imgnum //组件子级图片新闻数量
|
|
@@ -522,6 +552,8 @@ export default {
|
|
|
this.adLogoUrl = val.ad_img //广告示例图
|
|
|
this.ruleForm.ad_imgid = val.ad_imgid
|
|
|
this.imageInfo = JSON.parse(val.adimg_info)
|
|
|
+ console.log("图片信息",this.column_options);
|
|
|
+
|
|
|
},
|
|
|
|
|
|
|
|
@@ -530,99 +562,109 @@ export default {
|
|
|
submitForm(formName) {
|
|
|
this.$refs[formName].validate((valid) => {
|
|
|
if (valid) {
|
|
|
- console.log('submit!');
|
|
|
+ console.log('基础规则验证通过,开始动态规则验证');
|
|
|
+ // 执行动态规则验证
|
|
|
+ // this.dynamicValidation().then((isValid) => {
|
|
|
+ // if (isValid) {
|
|
|
+ console.log('动态规则验证通过,开始调用接口');
|
|
|
+ if (this.dialogName === "添加") {
|
|
|
+ let img_info = JSON.stringify(this.imageInfo);
|
|
|
+ const data = {
|
|
|
+ component_name: this.ruleForm.component_name,
|
|
|
+ component_type: this.ruleForm.component_type,
|
|
|
+ component_keyword: JSON.stringify(this.ruleForm.component_keyword),
|
|
|
+ component_width: this.ruleForm.component_width,
|
|
|
+ component_height: this.ruleForm.component_height,
|
|
|
+ component_img: this.ruleForm.component_img,
|
|
|
+ type_id: this.ruleForm.type_id,
|
|
|
+ num: this.ruleForm.listType,
|
|
|
+ img_num: this.ruleForm.img_num,
|
|
|
+ text_num: this.ruleForm.text_num,
|
|
|
+ child_imgnum: this.ruleForm.child_imgnum,
|
|
|
+ child_textnum: this.ruleForm.child_textnum,
|
|
|
+ pageSize: this.ruleForm.pageSize,
|
|
|
+ ad_type: this.ruleForm.ad_type,
|
|
|
+ ad_width: this.ruleForm.ad_width,
|
|
|
+ ad_height: this.ruleForm.ad_height,
|
|
|
+ ad_img: this.ruleForm.ad_img,
|
|
|
+ num: this.ruleForm.num,
|
|
|
+ ad_imgid: this.ruleForm.ad_imgid,
|
|
|
+ // 修正错误,使用之前定义的 img_info 变量
|
|
|
+ img_info: img_info,
|
|
|
+ };
|
|
|
+ this.$store.dispatch('module/addComponent', data).then(data => {
|
|
|
+ if (data.code === 200) {
|
|
|
+ this.$message({
|
|
|
+ message: '添加成功',
|
|
|
+ type: 'success'
|
|
|
+ });
|
|
|
+ this.dialogTableVisible = false;
|
|
|
+ this.getData();
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ message: data.message,
|
|
|
+ type: 'error'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (this.dialogName === "编辑") {
|
|
|
+ let img_info = JSON.stringify(this.imageInfo);
|
|
|
+ const edit_data = {
|
|
|
+ id: this.activeid,
|
|
|
+ component_name: this.ruleForm.component_name,
|
|
|
+ component_type: this.ruleForm.component_type,
|
|
|
+ component_keyword: JSON.stringify(this.ruleForm.component_keyword),
|
|
|
+ component_width: this.ruleForm.component_width,
|
|
|
+ component_height: this.ruleForm.component_height,
|
|
|
+ component_img: this.ruleForm.component_img,
|
|
|
+ type_id: this.ruleForm.type_id,
|
|
|
+ num: this.ruleForm.listType,
|
|
|
+ img_num: this.ruleForm.img_num,
|
|
|
+ text_num: this.ruleForm.text_num,
|
|
|
+ child_imgnum: this.ruleForm.child_imgnum,
|
|
|
+ child_textnum: this.ruleForm.child_textnum,
|
|
|
+ pageSize: this.ruleForm.pageSize,
|
|
|
+ ad_type: this.ruleForm.ad_type,
|
|
|
+ ad_width: this.ruleForm.ad_width,
|
|
|
+ ad_height: this.ruleForm.ad_height,
|
|
|
+ ad_img: this.ruleForm.ad_img,
|
|
|
+ num: this.ruleForm.num,
|
|
|
+ ad_imgid: this.ruleForm.ad_imgid,
|
|
|
+ // 修正错误,使用之前定义的 img_info 变量
|
|
|
+ img_info: img_info,
|
|
|
+ };
|
|
|
+ this.$store.dispatch('module/updateComponent', edit_data).then(data => {
|
|
|
+ if (data.code === 200) {
|
|
|
+ this.$message({
|
|
|
+ message: '编辑成功',
|
|
|
+ type: 'success'
|
|
|
+ });
|
|
|
+ this.dialogTableVisible = false;
|
|
|
+ this.getData();
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ message: data.message,
|
|
|
+ type: 'error'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ // } else {
|
|
|
+ // console.log('动态规则验证失败');
|
|
|
+ // }
|
|
|
+ // }).catch((error) => {
|
|
|
+ // console.error('动态规则验证出错:', error);
|
|
|
+ // this.$message({
|
|
|
+ // message: '验证过程中出现错误,请重试',
|
|
|
+ // type: 'error'
|
|
|
+ // });
|
|
|
+ // });
|
|
|
} else {
|
|
|
console.log('error submit!!');
|
|
|
- return false;
|
|
|
+ return;
|
|
|
}
|
|
|
});
|
|
|
- if (this.dialogName == "添加") {
|
|
|
- // console.log("添加", Array.isArray(this.imageInfo));
|
|
|
- let img_info = JSON.stringify(this.imageInfo)
|
|
|
- // console.log("添111加",img_info);
|
|
|
- const data = {
|
|
|
- component_name: this.ruleForm.component_name,
|
|
|
- component_type: this.ruleForm.component_type,
|
|
|
- component_keyword: JSON.stringify(this.ruleForm.component_keyword),
|
|
|
- component_width: this.ruleForm.component_width,
|
|
|
- component_height: this.ruleForm.component_height,
|
|
|
- component_img: this.ruleForm.component_img,
|
|
|
- type_id: this.ruleForm.type_id,
|
|
|
- num: this.ruleForm.listType,
|
|
|
- img_num: this.ruleForm.img_num,
|
|
|
- text_num: this.ruleForm.text_num,
|
|
|
- child_imgnum: this.ruleForm.child_imgnum,
|
|
|
- child_textnum: this.ruleForm.child_textnum,
|
|
|
- pageSize: this.ruleForm.pageSize,
|
|
|
- ad_type: this.ruleForm.ad_type,
|
|
|
- ad_width: this.ruleForm.ad_width,
|
|
|
- ad_height: this.ruleForm.ad_height,
|
|
|
- ad_img: this.ruleForm.ad_img,
|
|
|
- num: this.ruleForm.num,
|
|
|
- ad_imgid: this.ruleForm.ad_imgid,
|
|
|
- // 修正错误,使用之前定义的 img_info 变量
|
|
|
- img_info: img_info,
|
|
|
- }
|
|
|
- // console.log("111111111",data);
|
|
|
- this.$store.dispatch('module/addComponent',data).then(data => {
|
|
|
- if (data.code == 200) {
|
|
|
- this.$message({
|
|
|
- message: '添加成功',
|
|
|
- type: 'success'
|
|
|
- })
|
|
|
- this.dialogTableVisible = false
|
|
|
- this.getData()
|
|
|
- }else{
|
|
|
- this.$message({
|
|
|
- message: data.message,
|
|
|
- type: 'error'
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- if (this.dialogName == "编辑") {
|
|
|
- let img_info = JSON.stringify(this.imageInfo)
|
|
|
- const edit_data = {
|
|
|
- id: this.activeid,
|
|
|
- component_name: this.ruleForm.component_name,
|
|
|
- component_type: this.ruleForm.component_type,
|
|
|
- component_keyword: JSON.stringify(this.ruleForm.component_keyword),
|
|
|
- component_width: this.ruleForm.component_width,
|
|
|
- component_height: this.ruleForm.component_height,
|
|
|
- component_img: this.ruleForm.component_img,
|
|
|
- type_id: this.ruleForm.type_id,
|
|
|
- num: this.ruleForm.listType,
|
|
|
- img_num: this.ruleForm.img_num,
|
|
|
- text_num: this.ruleForm.text_num,
|
|
|
- child_imgnum: this.ruleForm.child_imgnum,
|
|
|
- child_textnum: this.ruleForm.child_textnum,
|
|
|
- pageSize: this.ruleForm.pageSize,
|
|
|
- ad_type: this.ruleForm.ad_type,
|
|
|
- ad_width: this.ruleForm.ad_width,
|
|
|
- ad_height: this.ruleForm.ad_height,
|
|
|
- ad_img: this.ruleForm.ad_img,
|
|
|
- num: this.ruleForm.num,
|
|
|
- ad_imgid: this.ruleForm.ad_imgid,
|
|
|
- // 修正错误,使用之前定义的 img_info 变量
|
|
|
- img_info: img_info,
|
|
|
- }
|
|
|
- this.$store.dispatch('module/updateComponent',edit_data).then(data => {
|
|
|
- if (data.code == 200) {
|
|
|
- this.$message({
|
|
|
- message: '编辑成功',
|
|
|
- type: 'success'
|
|
|
- })
|
|
|
- this.dialogTableVisible = false
|
|
|
- this.getData()
|
|
|
- }else{
|
|
|
- this.$message({
|
|
|
- message: data.message,
|
|
|
- type: 'error'
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
},
|
|
|
//1.8 添加
|
|
|
addWebsite() {
|
|
@@ -767,7 +809,6 @@ export default {
|
|
|
},
|
|
|
getTypeList(){
|
|
|
this.$store.dispatch('module/getComponentType').then(res => {
|
|
|
-
|
|
|
if (res.code == 200) {
|
|
|
this.type_options = res.data
|
|
|
}
|
|
@@ -779,7 +820,7 @@ export default {
|
|
|
});
|
|
|
})
|
|
|
},
|
|
|
- // 关键词标签
|
|
|
+ // 关键词标签
|
|
|
updateTags(newTags) {
|
|
|
this.tags = newTags;
|
|
|
this.ruleForm.component_keyword = newTags;
|
|
@@ -790,6 +831,19 @@ export default {
|
|
|
this.getData()
|
|
|
this.getTypeList()
|
|
|
},
|
|
|
+ // watch: {
|
|
|
+ // 'ruleForm.type_id': {
|
|
|
+ // handler(newVal, oldVal) {
|
|
|
+ // // 当 type_id 变化时,检查 ruleForm 引用是否存在,存在则调用动态规则函数
|
|
|
+ // if (this.$refs.ruleForm) {
|
|
|
+ // this.$refs.ruleForm.validate(this.dynamicRules());
|
|
|
+
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // immediate: true // 立即调用一次,确保初始化时也会触发验证
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
}
|
|
|
</script>
|
|
|
|
|
@@ -1022,14 +1076,14 @@ input[aria-hidden=true] {
|
|
|
}
|
|
|
|
|
|
::v-deep .el-form-item {
|
|
|
- margin-bottom: 50px;
|
|
|
+ margin-bottom: 20px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 弹出层按钮
|
|
|
.dialogBtn {
|
|
|
text-align: center;
|
|
|
- margin: 50px auto 20px;
|
|
|
+ margin: 30px auto 20px;
|
|
|
|
|
|
button {
|
|
|
width: 184px;
|