|
|
@@ -6,7 +6,7 @@
|
|
|
<el-col :span="8">
|
|
|
<div class="searchBox">
|
|
|
<div class="searchTitle">栏目名称：</div>
|
|
|
- <el-input v-model="getApiData.name" placeholder="请输入栏目名称" :clearable="true" @clear="onInputClear"/>
|
|
|
+ <el-input v-model="getApiData.name" placeholder="请输入栏目名称" :clearable="true" @clear="onInputClear" />
|
|
|
<!-- <el-input placeholder="请输入栏目名称" autocomplete="off" v-model="getApiData.name" /> -->
|
|
|
</div>
|
|
|
</el-col>
|
|
|
@@ -28,19 +28,15 @@
|
|
|
<tableTitle :name="tableDivTitle" />
|
|
|
<el-row>
|
|
|
<template>
|
|
|
- <el-table
|
|
|
- :data="tableData"
|
|
|
- style="width: 100%"
|
|
|
- row-key="id"
|
|
|
- :default-expand-all="isExpandAll"
|
|
|
- :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
|
|
|
- >
|
|
|
+ <el-table :data="tableData" style="width: 100%" row-key="id" :default-expand-all="isExpandAll"
|
|
|
+ :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
|
|
|
<el-table-column fixed prop="id" label="编号" width="150"></el-table-column>
|
|
|
<el-table-column prop="name" label="栏目名称">
|
|
|
<template slot-scope="scope">
|
|
|
- <span :class="{ highlight: isHighlight(scope.row, search) }" v-if="scope.row.pid==0">{{ scope.row.name }}</span>
|
|
|
- <span :class="{ highlight: isHighlight(scope.row, search)}" v-else>____{{ scope.row.name }}</span>
|
|
|
- </template>
|
|
|
+ <span :class="{ highlight: isHighlight(scope.row, search) }" v-if="scope.row.pid == 0">{{ scope.row.name
|
|
|
+ }}</span>
|
|
|
+ <span :class="{ highlight: isHighlight(scope.row, search) }" v-else>____{{ scope.row.name }}</span>
|
|
|
+ </template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="是否外链" align="center">
|
|
|
<template slot-scope="scope">
|
|
|
@@ -54,9 +50,12 @@
|
|
|
<el-table-column fixed="right" label="操作" width="230" header-align="center">
|
|
|
<template slot-scope="scope">
|
|
|
<div class="listBtnBox">
|
|
|
- <div class="listDeleteBtn" @click="deleteData(scope.row.id, tableData)"><i class="el-icon-delete"></i>删除</div>
|
|
|
- <div class="listEditBtn" @click="getDataMain(scope.row.id, tableData)"><i class="el-icon-edit-outline"></i>编辑</div>
|
|
|
- <div class="listMainBtn" @click="addCategoryList(scope.row)"><i class="el-icon-document-add"></i>添加</div>
|
|
|
+ <div class="listDeleteBtn" @click="deleteData(scope.row.id, tableData)"><i
|
|
|
+ class="el-icon-delete"></i>删除</div>
|
|
|
+ <div class="listEditBtn" @click="getDataMain(scope.row.id, tableData)"><i
|
|
|
+ class="el-icon-edit-outline"></i>编辑</div>
|
|
|
+ <div class="listMainBtn" @click="addCategoryList(scope.row)"><i class="el-icon-document-add"></i>添加
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<!-- <el-button @click.native.prevent="deleteData(scope.row.id, tableData)" type="text" size="small">删除</el-button>
|
|
|
<el-button @click.native.prevent="getDataMain(scope.row.id, tableData)" type="text" size="small">编辑</el-button> -->
|
|
|
@@ -85,7 +84,8 @@
|
|
|
<el-form :model="form" ref="form" :rules="formRules" autocomplete="off" label-position="left">
|
|
|
<div class="formDiv">
|
|
|
<el-form-item label="栏目名称：" :label-width="formLabelWidth" prop="name" class="custom-align-right">
|
|
|
- <el-input v-model="form.name" autocomplete="off" placeholder="请输入栏目名称"></el-input>
|
|
|
+ <el-input v-model="form.name" autocomplete="off" placeholder="请输入栏目名称"
|
|
|
+ :disabled="editId ? true : false"></el-input>
|
|
|
<el-checkbox v-model="show_url" @change="ifUrl">引用外链</el-checkbox>
|
|
|
</el-form-item>
|
|
|
<div v-if="show_url == 1">
|
|
|
@@ -117,6 +117,30 @@
|
|
|
<el-form-item label="父级栏目：" :label-width="formLabelWidth" class="custom-align-right">
|
|
|
<el-cascader :key="parentKey" v-model="form.pid_arr" placeholder="请选择要绑定的父级栏目" :props="parentData"
|
|
|
filterable clearable></el-cascader>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="栏目类型：" :label-width="formLabelWidth" prop="type" class="custom-align-right">
|
|
|
+ <template #label>
|
|
|
+ <span class="askBox">
|
|
|
+ 栏目类型：
|
|
|
+ <el-tooltip class="item" effect="dark" content=" 选择类型提交后不可更改，请谨慎考虑后提交！" placement="top">
|
|
|
+ <i class="el-icon-question"></i>
|
|
|
+ </el-tooltip>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <el-radio-group v-model="form.type" size="small" :disabled="editId ? true : false">
|
|
|
+ <el-radio-button label="1">资讯</el-radio-button>
|
|
|
+ <el-radio-button label="2">商品</el-radio-button>
|
|
|
+ <el-radio-button label="3">书刊音响</el-radio-button>
|
|
|
+ <el-radio-button label="4">招聘</el-radio-button>
|
|
|
+ <el-radio-button label="5">求职</el-radio-button>
|
|
|
+ </el-radio-group>
|
|
|
+ <!-- 选择类型提交后不可更改，请谨慎考虑后提交！ 提示词 -->
|
|
|
+ <div style="color: brown;">
|
|
|
+ 选择类型提交后不可更改，请谨慎考虑后提交!
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
</el-form-item>
|
|
|
<el-form-item label="栏目标题：" :label-width="formLabelWidth" prop="seo_title" class="custom-align-right">
|
|
|
<template #label>
|
|
|
@@ -184,7 +208,7 @@ export default {
|
|
|
InputTag
|
|
|
},
|
|
|
data() {
|
|
|
-
|
|
|
+
|
|
|
//0.全局操作 start ------------------------------------------------------------>
|
|
|
//表单验证
|
|
|
const validateEmpty = (rule, value, callback) => {
|
|
|
@@ -315,6 +339,7 @@ export default {
|
|
|
seo_title: "",//标题
|
|
|
seo_keywords: "",//关键词
|
|
|
seo_description: "",//描述
|
|
|
+ type: 1,//栏目类型
|
|
|
pid_arr: []//父级栏目
|
|
|
},
|
|
|
//4.2表单验证规则
|
|
|
@@ -389,36 +414,34 @@ export default {
|
|
|
parentData: {
|
|
|
checkStrictly: true,
|
|
|
lazy: true,
|
|
|
- lazyLoad: async (node, resolve) => {
|
|
|
+ async lazyLoad(node, resolve) {
|
|
|
const { level, data } = node;
|
|
|
if (data && data.children && data.children.length !== 0) {
|
|
|
- return resolve(node);
|
|
|
+ return resolve(node)
|
|
|
}
|
|
|
- const parentId = level === 0 ? 0 : data.value;
|
|
|
- try {
|
|
|
- const res = await this.$store.dispatch('pool/categoryList', { pid: parentId });
|
|
|
+ console.log(level)
|
|
|
+ let parentId = level == 0 ? 0 : data.value
|
|
|
+ let parames = {
|
|
|
+ 'pid': parentId
|
|
|
+ }
|
|
|
+ self.$store.dispatch('pool/categoryList', parames).then(res => {
|
|
|
if (res.data) {
|
|
|
const nodes = res.data.map(item => ({
|
|
|
value: item.id,
|
|
|
label: item.name,
|
|
|
leaf: level >= 3,
|
|
|
children: []
|
|
|
- }));
|
|
|
- resolve(nodes);
|
|
|
- } else {
|
|
|
- resolve([]);
|
|
|
+ }))
|
|
|
+ resolve(nodes)
|
|
|
}
|
|
|
- } catch (error) {
|
|
|
- console.error('Failed to load parent category data:', error);
|
|
|
- resolve([]);
|
|
|
- }
|
|
|
+ })
|
|
|
}
|
|
|
},
|
|
|
//弹出框中的表单设置 end ------------------------------------------------------------>
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- onInputClear(){
|
|
|
+ onInputClear() {
|
|
|
this.isExpandAll = false;
|
|
|
this.getData();
|
|
|
},
|
|
|
@@ -426,10 +449,10 @@ export default {
|
|
|
//1.列表和分页相关 start ------------------------------------------------------------>
|
|
|
//1.1 开始请求列表信息方法
|
|
|
getData(type) {
|
|
|
- if(type=='search'){
|
|
|
- this.getApiData.page=1
|
|
|
+ if (type == 'search') {
|
|
|
+ this.getApiData.page = 1
|
|
|
this.isExpandAll = true;
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
this.isExpandAll = false;
|
|
|
}
|
|
|
//搜索条件
|
|
|
@@ -442,10 +465,10 @@ export default {
|
|
|
// this.getApiData.city_id = this.getApiData.city_id[this.getApiData.city_id.length - 1];
|
|
|
// }
|
|
|
//如果是搜索，重新加载第一页
|
|
|
-
|
|
|
+
|
|
|
this.$store.dispatch('pool/getCategoryList', this.getApiData).then(res => {
|
|
|
// console.log("=============:",res.data)
|
|
|
- this.tableData = res.data.rows; //与内容
|
|
|
+ this.tableData = res.data.rows; //��与内容
|
|
|
this.allCount = res.data.total
|
|
|
}).catch(() => {
|
|
|
this.$message({
|
|
|
@@ -525,41 +548,27 @@ export default {
|
|
|
this.windowStatus = true;
|
|
|
},
|
|
|
//2.1.1 添加栏目池
|
|
|
- async addCategoryList(row) {
|
|
|
+ addCategoryList(row) {
|
|
|
this.form.pid_arr = [];
|
|
|
this.show_url = false;
|
|
|
+ // this.form.is_url = 0;
|
|
|
this.editId = 0;
|
|
|
this.editBtn = false;
|
|
|
- this.tags = [];
|
|
|
-
|
|
|
- if(row) {
|
|
|
- let pidArr = [];
|
|
|
- if(row.pid == 0) {
|
|
|
- pidArr = [row.id];
|
|
|
+ this.tags = []
|
|
|
+ if (row) {
|
|
|
+ if (row.pid == 0) {
|
|
|
+ this.form.pid_arr.push(row.id)
|
|
|
} else {
|
|
|
- try {
|
|
|
- pidArr = JSON.parse(row.pid_arr);
|
|
|
- pidArr.push(row.id);
|
|
|
- } catch(e) {
|
|
|
- pidArr = [];
|
|
|
- }
|
|
|
+ let pidArr = [];
|
|
|
+ // console.log("fuck:",row.pid_arr);
|
|
|
+ pidArr = JSON.parse(row.pid_arr)
|
|
|
+ pidArr.push(row.id)
|
|
|
+ this.form.pid_arr = pidArr
|
|
|
+ // console.log('追加id：',this.form.pid_arr)
|
|
|
}
|
|
|
-
|
|
|
- // 先打开窗口
|
|
|
- this.openWindow();
|
|
|
-
|
|
|
- // 预加载数据
|
|
|
- for(let i = 0; i < pidArr.length; i++) {
|
|
|
- const parentId = i === 0 ? 0 : pidArr[i - 1];
|
|
|
- await this.$store.dispatch('pool/categoryList', { pid: parentId });
|
|
|
- }
|
|
|
-
|
|
|
- // 设置值并更新 key
|
|
|
- this.form.pid_arr = pidArr;
|
|
|
- this.parentKey += 1;
|
|
|
- } else {
|
|
|
- this.openWindow();
|
|
|
}
|
|
|
+ // console.log("=========:", this.form.pid_arr)
|
|
|
+ this.openWindow();
|
|
|
},
|
|
|
//2.2 关闭弹出框
|
|
|
closeWindow() {
|
|
|
@@ -572,6 +581,7 @@ export default {
|
|
|
// this.form.department_arr_id = [];
|
|
|
// this.form.city_arr_id = [];
|
|
|
this.form.pid_arr = [];
|
|
|
+ this.form.type = 1;
|
|
|
}
|
|
|
if (type == 2) { //type2 全部清理
|
|
|
this.form.name = "";
|
|
|
@@ -584,6 +594,7 @@ export default {
|
|
|
this.form.seo_keywords = "";
|
|
|
this.form.seo_description = "";
|
|
|
this.form.pid_arr = [];
|
|
|
+ this.form.type = 1;
|
|
|
//存在验证的时候再清理
|
|
|
if (this.$refs.form && this.$refs.form.fields.some(field => field.validateState === 'error')) {
|
|
|
this.$refs.form.clearValidate();
|
|
|
@@ -684,6 +695,7 @@ export default {
|
|
|
this.form.seo_keywords = res.data.seo_keywords;
|
|
|
this.tags = res.data.seo_keywords ? res.data.seo_keywords.split(',') : [];
|
|
|
this.form.seo_description = res.data.seo_description;
|
|
|
+ this.form.type = res.data.type;
|
|
|
|
|
|
//回显排序
|
|
|
this.form.sort = res.data.sort;
|
|
|
@@ -773,6 +785,7 @@ export default {
|
|
|
::v-deep .highlight {
|
|
|
background-color: yellow;
|
|
|
}
|
|
|
+
|
|
|
//表单微调 start------------------------------------------------------------>*/
|
|
|
::v-deep .custom-form-item>.el-form-item__label {
|
|
|
line-height: 140px !important;
|
|
|
@@ -780,50 +793,50 @@ export default {
|
|
|
|
|
|
::v-deep .custom-textarea .el-textarea__inner {
|
|
|
resize: none;
|
|
|
- /* 禁止用拖拽调整大小 */
|
|
|
+ /* 禁止用���拖拽调整大小 */
|
|
|
}
|
|
|
|
|
|
::v-deep .custom-align-right .el-form-item__label {
|
|
|
text-align: right;
|
|
|
/* 设置标签文字右对齐 */
|
|
|
}
|
|
|
-.collector {
|
|
|
- margin-left: 0px;
|
|
|
- padding-left: 0px;
|
|
|
- margin-right: 20px;
|
|
|
- width: 76px;
|
|
|
- height: 36px;
|
|
|
- line-height: 36px;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .collectorIcon {
|
|
|
- display: inline-block;
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
- background: url("../../assets/advertise/Graph.png");
|
|
|
- vertical-align: middle;
|
|
|
- margin-right: 6px;
|
|
|
- }
|
|
|
-
|
|
|
- .collectorIcon1 {
|
|
|
- position: absolute;
|
|
|
- top: 12px;
|
|
|
- left: 8px;
|
|
|
- }
|
|
|
|
|
|
- }
|
|
|
+.collector {
|
|
|
+ margin-left: 0px;
|
|
|
+ padding-left: 0px;
|
|
|
+ margin-right: 20px;
|
|
|
+ width: 76px;
|
|
|
+ height: 36px;
|
|
|
+ line-height: 36px;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .collectorIcon {
|
|
|
+ display: inline-block;
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ background: url("../../assets/advertise/Graph.png");
|
|
|
+ vertical-align: middle;
|
|
|
+ margin-right: 6px;
|
|
|
+ }
|
|
|
|
|
|
+ .collectorIcon1 {
|
|
|
+ position: absolute;
|
|
|
+ top: 12px;
|
|
|
+ left: 8px;
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
- .collector {
|
|
|
- text-align: center;
|
|
|
- border-radius: 8px;
|
|
|
- cursor: pointer;
|
|
|
- color: #519C66;
|
|
|
- background-color: rgba(81, 156, 102, 0.16);
|
|
|
|
|
|
- >i {
|
|
|
- padding-right: 8px;
|
|
|
- }
|
|
|
- }
|
|
|
+.collector {
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 8px;
|
|
|
+ cursor: pointer;
|
|
|
+ color: #519C66;
|
|
|
+ background-color: rgba(81, 156, 102, 0.16);
|
|
|
+
|
|
|
+ >i {
|
|
|
+ padding-right: 8px;
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
-//表单微调 end------------------------------------------------------------>*/</style>
|
|
|
+//表单微调 end------------------------------------------------------------>*/</style>
|
Jing