|
|
@@ -5,7 +5,7 @@
|
|
|
<el-col :span="8">
|
|
|
<div class="searchBox">
|
|
|
<div class="searchTitle">栏目名称：</div>
|
|
|
- <el-input v-model="search" placeholder="请输入栏目名称" :clearable="true"/>
|
|
|
+ <el-input v-model="search" placeholder="请输入栏目名称" :clearable="true" />
|
|
|
<!-- <el-input placeholder="请输入栏目名称" autocomplete="off" v-model="getApiData.name" /> -->
|
|
|
</div>
|
|
|
</el-col>
|
|
|
@@ -66,41 +66,44 @@
|
|
|
|
|
|
<!--表格内容 start------------------------------------------------------------>
|
|
|
<div class="layerBox">
|
|
|
- <tableTitle :name="tableDivTitle"/>
|
|
|
+ <tableTitle :name="tableDivTitle" />
|
|
|
<el-row>
|
|
|
<template>
|
|
|
- <el-table
|
|
|
- :data="tableData.filter(data => searchFilter(data, search))"
|
|
|
- style="width: 100%"
|
|
|
- row-key="id"
|
|
|
- :default-expand-all="isExpandAll"
|
|
|
- :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
|
|
|
- :row-class-name="tableRowClassName"
|
|
|
- >
|
|
|
+ <el-table :data="tableData.filter(data => searchFilter(data, search))" style="width: 100%" row-key="id"
|
|
|
+ :default-expand-all="isExpandAll" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
|
|
+ :row-class-name="tableRowClassName">
|
|
|
<el-table-column fixed prop="category_id" label="编号" width="180"></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>
|
|
|
+ <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 prop="alias" label="展示名称"></el-table-column>
|
|
|
- <el-table-column label="排序" width="95">
|
|
|
- <template slot-scope="scope" >
|
|
|
- <el-input
|
|
|
- v-model="scope.row.sort"
|
|
|
- @blur="handleBlur(scope.row)"
|
|
|
- placeholder="请输入排序值"
|
|
|
- maxlength="5"
|
|
|
- ></el-input>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
+ <el-table-column prop="type" label="栏目类型">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span v-if="scope.row.type == 1">资讯</span>
|
|
|
+ <span v-else-if="scope.row.type == 2">商品</span>
|
|
|
+ <span v-else-if="scope.row.type == 3">书刊音像</span>
|
|
|
+ <span v-else-if="scope.row.type == 4">招聘</span>
|
|
|
+ <span v-else-if="scope.row.type == 5">求职</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="排序" width="95">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input v-model="scope.row.sort" @blur="handleBlur(scope.row)" placeholder="请输入排序值"
|
|
|
+ maxlength="5"></el-input>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
<el-table-column prop="created_at" label="创建时间"></el-table-column>
|
|
|
<el-table-column prop="updated_at" label="修改时间"></el-table-column>
|
|
|
<el-table-column fixed="right" label="操作" width="120" header-align="center">
|
|
|
<template slot-scope="scope">
|
|
|
<div class="listBtnBox">
|
|
|
- <div class="listEditBtn" @click="editRow(scope.row.category_id)"><i class="el-icon-edit-outline"></i>编辑</div>
|
|
|
+ <div class="listEditBtn" @click="editRow(scope.row.category_id)"><i
|
|
|
+ class="el-icon-edit-outline"></i>编辑
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
@@ -129,7 +132,7 @@
|
|
|
<input type="hidden" v-model="form.seo_title">
|
|
|
</el-form-item>
|
|
|
|
|
|
- <el-form-item label="名称拼音：" :label-width="formLabelWidth" class="custom-align-right">
|
|
|
+ <el-form-item label="名称拼音：" :label-width="formLabelWidth" class="custom-align-right">
|
|
|
<el-input v-model="form.alias_pinyin" autocomplete="off"></el-input>
|
|
|
</el-form-item>
|
|
|
|
|
|
@@ -140,7 +143,7 @@
|
|
|
</el-form-item>
|
|
|
<el-form-item label="展示关键词：" :label-width="formLabelWidth" prop="seo_keywords" class="custom-align-right">
|
|
|
<div class="formLabelFloatBox">
|
|
|
- <inputTag :initialTags="tags" @tags-updated="updateTags"/>
|
|
|
+ <inputTag :initialTags="tags" @tags-updated="updateTags" />
|
|
|
<!-- <inputTag :initialTags="form.seo_keywords" @tags-updated="updateTags"/> -->
|
|
|
<!-- <el-input v-model="form.seo_keywords" autocomplete="off"></el-input> -->
|
|
|
</div>
|
|
|
@@ -150,7 +153,7 @@
|
|
|
</el-form-item>
|
|
|
<el-form-item label="排序：" :label-width="formLabelWidth" prop="sort" class="custom-align-right">
|
|
|
<div class="formLabelFloatBox">
|
|
|
- <el-input v-model="form.sort" autocomplete="off" ></el-input>
|
|
|
+ <el-input v-model="form.sort" autocomplete="off"></el-input>
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
</div>
|
|
|
@@ -183,7 +186,7 @@ export default {
|
|
|
data() {
|
|
|
//0.全局操作 start ------------------------------------------------------------>
|
|
|
//表单验证
|
|
|
- const validateEmpty = (rule,value,callback) => {
|
|
|
+ const validateEmpty = (rule, value, callback) => {
|
|
|
if (value.length == 0) {
|
|
|
callback(new Error('该项不能为空！'))
|
|
|
} else {
|
|
|
@@ -198,35 +201,35 @@ export default {
|
|
|
search: '',
|
|
|
tags: [],
|
|
|
//1.列表和分页相关 start ------------------------------------------------------------>
|
|
|
- tableDivTitle:"栏目详情",
|
|
|
+ tableDivTitle: "栏目详情",
|
|
|
tableData: [],//列表
|
|
|
- allCount:0,//总条数
|
|
|
- editId:0,//要修改的网站id
|
|
|
- getApiData:{
|
|
|
- website_id:0,//网站id
|
|
|
- name:"",//导航名称
|
|
|
- alias:"",//网站导航名称
|
|
|
- city_id:"",//行政区划
|
|
|
- department_id:"",//行政职能部门
|
|
|
- page:1,//当前是第几页
|
|
|
- pageSize:10,//一共多少条
|
|
|
+ allCount: 0,//总条数
|
|
|
+ editId: 0,//要修改的网站id
|
|
|
+ getApiData: {
|
|
|
+ website_id: 0,//网站id
|
|
|
+ name: "",//导航名称
|
|
|
+ alias: "",//网站导航名称
|
|
|
+ city_id: "",//行政区划
|
|
|
+ department_id: "",//行政职能部门
|
|
|
+ page: 1,//当前是第几页
|
|
|
+ pageSize: 10,//一共多少条
|
|
|
},
|
|
|
- website_column_arr:[],//获得的网系
|
|
|
+ website_column_arr: [],//获得的网系
|
|
|
//分页相关 end ------------------------------------------------------------>
|
|
|
|
|
|
//2.弹出框设置 start ------------------------------------------------------------>
|
|
|
//是否显示弹出窗口
|
|
|
- windowStatus:false,
|
|
|
+ windowStatus: false,
|
|
|
formLabelWidth: '120px',
|
|
|
//弹出框设置 end ------------------------------------------------------------>
|
|
|
|
|
|
//3.搜索相关 start ------------------------------------------------------------>
|
|
|
//3.1获得职能部门
|
|
|
- searchDepartmentKey:0,
|
|
|
+ searchDepartmentKey: 0,
|
|
|
searchDepartmentData: {
|
|
|
checkStrictly: true,
|
|
|
lazy: true,
|
|
|
- async lazyLoad (node, resolve) {
|
|
|
+ async lazyLoad(node, resolve) {
|
|
|
const { level, data } = node;
|
|
|
if (data && data.children && data.children.length !== 0) {
|
|
|
return resolve(node)
|
|
|
@@ -234,9 +237,9 @@ export default {
|
|
|
console.log(level)
|
|
|
let parentId = level == 0 ? 0 : data.value
|
|
|
let parames = {
|
|
|
- 'pid':parentId
|
|
|
+ 'pid': parentId
|
|
|
}
|
|
|
- self.$store.dispatch('pool/getDepartment',parames).then(res=> {
|
|
|
+ self.$store.dispatch('pool/getDepartment', parames).then(res => {
|
|
|
if (res.data) {
|
|
|
const nodes = res.data.map(item => ({
|
|
|
value: item.id,
|
|
|
@@ -250,11 +253,11 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
//3.2获得行政区划
|
|
|
- searchCascaderKey:0, //列表缓存key
|
|
|
+ searchCascaderKey: 0, //列表缓存key
|
|
|
searchCityData: {
|
|
|
checkStrictly: true,
|
|
|
lazy: true,
|
|
|
- async lazyLoad (node, resolve) {
|
|
|
+ async lazyLoad(node, resolve) {
|
|
|
const { level, data } = node;
|
|
|
if (data && data.children && data.children.length !== 0) {
|
|
|
return resolve(node)
|
|
|
@@ -262,9 +265,9 @@ export default {
|
|
|
console.log(level)
|
|
|
let parentId = level == 0 ? 0 : data.value
|
|
|
let parames = {
|
|
|
- 'pid':parentId
|
|
|
+ 'pid': parentId
|
|
|
}
|
|
|
- self.$store.dispatch('pool/getcityList',parames).then(res=> {
|
|
|
+ self.$store.dispatch('pool/getcityList', parames).then(res => {
|
|
|
if (res.data) {
|
|
|
const nodes = res.data.map(item => ({
|
|
|
value: item.id,
|
|
|
@@ -282,47 +285,47 @@ export default {
|
|
|
//3.弹出框中的表单设置 start ------------------------------------------------------------>
|
|
|
//3.1 表单收集的数据
|
|
|
form: {
|
|
|
- website_id:0,//网站id
|
|
|
- category_id:0,//导航id
|
|
|
- alias:"",//导航名称
|
|
|
- alias_pinyin:"",//导航名称拼音
|
|
|
- seo_title:"",//导航seo名称
|
|
|
- seo_keywords:"",//导航关键词
|
|
|
- seo_description:"",//导航描述
|
|
|
- sort:0//排序
|
|
|
+ website_id: 0,//网站id
|
|
|
+ category_id: 0,//导航id
|
|
|
+ alias: "",//导航名称
|
|
|
+ alias_pinyin: "",//导航名称拼音
|
|
|
+ seo_title: "",//导航seo名称
|
|
|
+ seo_keywords: "",//导航关键词
|
|
|
+ seo_description: "",//导航描述
|
|
|
+ sort: 0//排序
|
|
|
},
|
|
|
//3.2表单验证规则
|
|
|
formRules: {
|
|
|
//网站名称不能为空
|
|
|
- alias:[{required:true,trigger:'blur',validator:validateEmpty}],
|
|
|
- sort:[{required:true,trigger:'blur',validator:validateEmpty}],
|
|
|
+ alias: [{ required: true, trigger: 'blur', validator: validateEmpty }],
|
|
|
+ sort: [{ required: true, trigger: 'blur', validator: validateEmpty }],
|
|
|
//网站标题，关键词，描述不能为空
|
|
|
- seo_title:[{required:true,trigger:'blur',validator:validateEmpty}],
|
|
|
- seo_keywords:[{required:true,trigger:'blur',validator:validateEmpty}],
|
|
|
- seo_description:[{required:true,trigger:'blur',validator:validateEmpty}],
|
|
|
+ seo_title: [{ required: true, trigger: 'blur', validator: validateEmpty }],
|
|
|
+ seo_keywords: [{ required: true, trigger: 'blur', validator: validateEmpty }],
|
|
|
+ seo_description: [{ required: true, trigger: 'blur', validator: validateEmpty }],
|
|
|
},
|
|
|
//弹出框中的表单设置 end ------------------------------------------------------------>
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- tableRowClassName({row, rowIndex}) {
|
|
|
- if (row.pid == 0) {
|
|
|
- return 'warning-row';
|
|
|
- }
|
|
|
- return '';
|
|
|
- },
|
|
|
+ tableRowClassName({ row, rowIndex }) {
|
|
|
+ if (row.pid == 0) {
|
|
|
+ return 'warning-row';
|
|
|
+ }
|
|
|
+ return '';
|
|
|
+ },
|
|
|
//1.列表和分页相关 start ------------------------------------------------------------>
|
|
|
//1.1 获取内容
|
|
|
- getData(){
|
|
|
+ getData() {
|
|
|
//行政职能部门提交最后一个
|
|
|
- if(this.getApiData.department_id.length>0){
|
|
|
+ if (this.getApiData.department_id.length > 0) {
|
|
|
this.getApiData.department_id = this.getApiData.department_id[this.getApiData.department_id.length - 1];
|
|
|
}
|
|
|
//城市id提交最后一个
|
|
|
- if(this.getApiData.city_id.length>0){
|
|
|
+ if (this.getApiData.city_id.length > 0) {
|
|
|
this.getApiData.city_id = this.getApiData.city_id[this.getApiData.city_id.length - 1];
|
|
|
}
|
|
|
- this.$store.dispatch('pool/getWebsiteAllCategory',this.getApiData).then(res=> {
|
|
|
+ this.$store.dispatch('pool/getWebsiteAllCategory', this.getApiData).then(res => {
|
|
|
let data = res.data;
|
|
|
this.tableData = data;//放入数据
|
|
|
// this.allCount = res.data.count;//放入总条数
|
|
|
@@ -340,7 +343,7 @@ export default {
|
|
|
// this.getData();
|
|
|
// },
|
|
|
//1.4 重置按钮
|
|
|
- clearSearchList(){
|
|
|
+ clearSearchList() {
|
|
|
this.tableData = [];
|
|
|
this.getApiData.alias = "";
|
|
|
this.getApiData.name = "";
|
|
|
@@ -359,12 +362,12 @@ export default {
|
|
|
this.windowStatus = true;
|
|
|
},
|
|
|
//2.2 关闭弹出框
|
|
|
- closeWindow(){
|
|
|
+ closeWindow() {
|
|
|
this.windowStatus = false;
|
|
|
this.clearToServe();
|
|
|
},
|
|
|
//2.3 清空提交窗口
|
|
|
- clearToServe(){
|
|
|
+ clearToServe() {
|
|
|
//重置窗口
|
|
|
this.editId = "";
|
|
|
this.form.website_id = 0;
|
|
|
@@ -379,13 +382,13 @@ export default {
|
|
|
|
|
|
//4.编辑导航 start ------------------------------------------------------------>
|
|
|
//回显数据
|
|
|
- editRow(id){
|
|
|
+ editRow(id) {
|
|
|
this.openWindow();
|
|
|
let data = {
|
|
|
- website_id:this.$route.query.website_id,
|
|
|
- category_id:id
|
|
|
+ website_id: this.$route.query.website_id,
|
|
|
+ category_id: id
|
|
|
}
|
|
|
- this.$store.dispatch('pool/getWebsiteCategoryOnes',data).then(res=> {
|
|
|
+ this.$store.dispatch('pool/getWebsiteCategoryOnes', data).then(res => {
|
|
|
// console.log(res.data)
|
|
|
this.form.website_id = this.$route.query.website_id;
|
|
|
this.form.category_id = id;
|
|
|
@@ -393,18 +396,18 @@ export default {
|
|
|
this.form.alias = res.data.alias;
|
|
|
this.form.seo_title = res.data.seo_title;
|
|
|
this.form.seo_keywords = res.data.seo_keywords;
|
|
|
- this.tags = res.data.seo_keywords?res.data.seo_keywords.split(','):[];
|
|
|
+ this.tags = res.data.seo_keywords ? res.data.seo_keywords.split(',') : [];
|
|
|
this.form.seo_description = res.data.seo_description;
|
|
|
this.form.sort = res.data.sort;
|
|
|
})
|
|
|
},
|
|
|
//提交编辑的数据
|
|
|
- addToServe(){
|
|
|
+ addToServe() {
|
|
|
//把标题的值给与seo_title
|
|
|
// this.form.seo_title = this.form.alias;
|
|
|
this.$refs.form.validate(valid => {
|
|
|
if (valid) {
|
|
|
- this.$store.dispatch('pool/upWebsiteCategoryones',this.form).then(res=> {
|
|
|
+ this.$store.dispatch('pool/upWebsiteCategoryones', this.form).then(res => {
|
|
|
//汇报结果
|
|
|
this.$message({
|
|
|
type: 'success',
|
|
|
@@ -425,32 +428,32 @@ export default {
|
|
|
},
|
|
|
//编辑导航 end ------------------------------------------------------------>
|
|
|
updateTags(newTags) {
|
|
|
- // this.foem.seo_keywords = newTags;
|
|
|
- this.tags = newTags;
|
|
|
- this.form.seo_keywords = newTags.join(',');
|
|
|
+ // this.foem.seo_keywords = newTags;
|
|
|
+ this.tags = newTags;
|
|
|
+ this.form.seo_keywords = newTags.join(',');
|
|
|
},
|
|
|
handleBlur(row) {
|
|
|
const inputValue = row.sort;
|
|
|
if (/^\d+$/.test(inputValue)) {
|
|
|
row.sort = parseInt(inputValue, 10);
|
|
|
let parems = {
|
|
|
- 'website_id':row.website_id,
|
|
|
- 'id':row.id,
|
|
|
- 'sort':row.sort
|
|
|
+ 'website_id': row.website_id,
|
|
|
+ 'id': row.id,
|
|
|
+ 'sort': row.sort
|
|
|
}
|
|
|
- this.$store.dispatch('pool/upWebsiteCategorySort',parems).then(res=> {
|
|
|
- //汇报结果
|
|
|
- this.$message({
|
|
|
- type: 'success',
|
|
|
- message: '排序修改成功！'
|
|
|
- });
|
|
|
- this.getData();
|
|
|
- }).catch(() => {
|
|
|
- this.$message({
|
|
|
- type: 'info',
|
|
|
- message: '网络错误，请重试！'
|
|
|
- });
|
|
|
- })
|
|
|
+ this.$store.dispatch('pool/upWebsiteCategorySort', parems).then(res => {
|
|
|
+ //汇报结果
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: '排序修改成功！'
|
|
|
+ });
|
|
|
+ this.getData();
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'info',
|
|
|
+ message: '网络错误，请重试！'
|
|
|
+ });
|
|
|
+ })
|
|
|
// 这里可以添加保存数据到后端的逻辑，例如使用 axios 发送请求
|
|
|
console.log('数据保存成功：', row);
|
|
|
} else {
|
|
|
@@ -480,7 +483,7 @@ export default {
|
|
|
return row.name.toLowerCase().includes(lowerSearch);
|
|
|
},
|
|
|
},
|
|
|
- mounted(){
|
|
|
+ mounted() {
|
|
|
//console.log(this.$route.query);
|
|
|
//获取具体参数
|
|
|
this.getApiData.website_id = this.$route.query.website_id;
|
|
|
@@ -492,7 +495,7 @@ export default {
|
|
|
watch: {
|
|
|
search(newValue, oldValue) {
|
|
|
this.isExpandAll = true
|
|
|
- console.log("====:",this.isExpandAll)
|
|
|
+ console.log("====:", this.isExpandAll)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -502,14 +505,19 @@ export default {
|
|
|
::v-deep .highlight {
|
|
|
background-color: yellow;
|
|
|
}
|
|
|
+
|
|
|
//表单微调 start------------------------------------------------------------>*/
|
|
|
-::v-deep .custom-form-item > .el-form-item__label {
|
|
|
+::v-deep .custom-form-item>.el-form-item__label {
|
|
|
line-height: 140px !important;
|
|
|
}
|
|
|
+
|
|
|
::v-deep .custom-textarea .el-textarea__inner {
|
|
|
- resize: none; /* 禁止用���拖拽调整大小 */
|
|
|
+ resize: none;
|
|
|
+ /* 禁止用���拖拽调整大小 */
|
|
|
}
|
|
|
+
|
|
|
::v-deep .custom-align-right .el-form-item__label {
|
|
|
- text-align: right; /* 设置标签文字右对齐 */
|
|
|
+ text-align: right;
|
|
|
+ /* 设置标签文字右对齐 */
|
|
|
}
|
|
|
</style>
|
rkljw